/* ─────────────────────────────────────────────────────────────────────────────
   INFLUENCER BOLIVIA · capa de tema y movimiento (se carga DESPUÉS de ib.css)

   Qué hace:
   1. Saca el cobalto. La identidad ahora es neutra: tinta, papel y el amarillo sol.
      Un catálogo de personas de todos los tonos de piel y colores no puede competir
      con un fondo de color: el color lo ponen ellas.
   2. Modo claro y modo oscuro. <html data-tema="light|dark"> lo pone el script del
      <head> (guardado del visitante, o el del sistema). Sin script queda el claro.
   3. Movimiento: entradas, revelado al scrollear, hover, cambio de tema. Todo se
      apaga con prefers-reduced-motion.

   Truco de fondo: ib.css usa --papel/--tinta para "fondo" y "texto". En oscuro se
   intercambian sus valores y todo el sitio se invierte solo. Lo que NO debe
   invertirse (lo que va sobre el amarillo sol, o dentro de un marco fijo) usa
   --negro/--blanco, que no cambian nunca.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --negro: #0C0C12;
  --blanco: #FBFAF7;
  --campo: #fff;                 /* fondo de los campos de formulario */

  /* claro: el antiguo cobalto pasa a ser tinta */
  --cobalto:       #0C0C12;
  --sobre-cobalto: #CBCAC9;
  --borde-cobalto: #8F8E8C;

  /* mismo par de botones, pero que se note el hover */
  --btn-bg-h: var(--sol); --btn-fg-h: var(--negro);
}
.banda:not([class*="banda-"]), .franja, .dlg {
  --btn-bg-h: var(--sol); --btn-fg-h: var(--negro);
}
.banda-cobalto, .banda-tinta { --btn-bg-h: var(--blanco); --btn-fg-h: var(--negro); }

/* ── OSCURO ──────────────────────────────────────────────────────────────── */
:root[data-tema="dark"] {
  color-scheme: dark;
  --papel:  #0E0E12;
  --tinta:  #F2F1ED;
  --gris:   #A0A0AA;
  --suave:  #2B2B33;
  --sobre-tinta: #B3B2B0;
  --cobalto:       #1A1A21;     /* banda "elevada": un escalón sobre el fondo */
  --sobre-cobalto: #B3B2B0;
  --borde-cobalto: #4B4B54;
  --campo: #17171D;
  --regla: 2px solid #E9E7E1;

  --bg: var(--papel); --fg: var(--tinta); --sec: var(--gris); --acc: var(--sol);
  --btn-bg: var(--sol); --btn-fg: var(--negro); --btn-bg-h: var(--tinta); --btn-fg-h: var(--negro);
  --line: var(--tinta);
}
[data-tema="dark"] .banda, [data-tema="dark"] .franja, [data-tema="dark"] .dlg {
  --bg: var(--papel); --fg: var(--tinta); --sec: var(--gris); --acc: var(--sol);
  --btn-bg: var(--sol); --btn-fg: var(--negro); --btn-bg-h: var(--tinta); --btn-fg-h: var(--negro);
  --line: var(--tinta);
}
[data-tema="dark"] .banda-cobalto {
  --bg: #1A1A21; --fg: var(--tinta); --sec: var(--sobre-cobalto); --acc: var(--sol);
  --btn-bg: var(--sol); --btn-fg: var(--negro); --btn-bg-h: var(--tinta); --btn-fg-h: var(--negro);
  --line: var(--tinta);
}
[data-tema="dark"] .banda-tinta {
  --bg: #07070A; --fg: var(--tinta); --sec: var(--sobre-tinta); --acc: var(--sol);
  --btn-bg: var(--sol); --btn-fg: var(--negro); --btn-bg-h: var(--tinta); --btn-fg-h: var(--negro);
  --line: var(--tinta);
}
[data-tema="dark"] .banda-sol {
  --bg: var(--sol); --fg: var(--negro); --sec: #50431F; --acc: var(--negro);
  --btn-bg: var(--negro); --btn-fg: var(--sol); --btn-bg-h: var(--blanco); --btn-fg-h: var(--negro);
  --line: var(--negro);
}

/* lo que vive sobre el sol o dentro de un marco fijo: no se invierte */
[data-tema="dark"] ::selection { background: var(--sol); color: var(--negro); }
[data-tema="dark"] .btn-papel { --btn-bg: var(--blanco); --btn-fg: var(--negro); --btn-bg-h: var(--sol); --btn-fg-h: var(--negro); }
[data-tema="dark"] .portada { color: var(--negro); }
[data-tema="dark"] .portada-foto { background: #07070A; color: var(--blanco); }
[data-tema="dark"] .portada-foto .portada-cab { color: var(--negro); }
[data-tema="dark"] .portada-sello { color: var(--negro); border-color: var(--negro); }
[data-tema="dark"] .casilla.proxima,
[data-tema="dark"] .casilla-n,
[data-tema="dark"] .cred-founder,
[data-tema="dark"] .perfil-founder,
[data-tema="dark"] .chip[aria-pressed="true"], [data-tema="dark"] .chip.activo,
[data-tema="dark"] .reserva-sugeridos button:hover { color: var(--negro); }
[data-tema="dark"] .cred-founder { border-color: var(--negro); }
[data-tema="dark"] .casilla.tomada, [data-tema="dark"] .pt.tomada { background: var(--negro); }
[data-tema="dark"] .casilla.reservada { color: var(--negro); }
[data-tema="dark"] .perfil-founder p { color: #50431F; }
[data-tema="dark"] .cred-marco, [data-tema="dark"] .perfil-foto-grande { background: #07070A; }
[data-tema="dark"] .cred-verif, [data-tema="dark"] .perfil-verif { background: var(--sol); color: var(--negro); }
[data-tema="dark"] .barra-pedido, [data-tema="dark"] .barra-cta { background: #1A1A21; color: var(--tinta); }

/* lo que antes era "texto cobalto" o "subrayado cobalto": en oscuro es sol */
[data-tema="dark"] .hl { background: var(--sol); color: var(--negro); }
[data-tema="dark"] .reserva-estado.libre,
[data-tema="dark"] .perfil-url a,
[data-tema="dark"] .dlg-x:hover,
[data-tema="dark"] .lanza-dato b { color: var(--sol); }
[data-tema="dark"] .chip:hover,
[data-tema="dark"] .migas a:hover,
[data-tema="dark"] .mapa a:hover { text-decoration-color: var(--sol); }
[data-tema="dark"] .aviso-ok { border-left-color: var(--sol); }
[data-tema="dark"] .perfil-tiras button[aria-pressed="true"] { border-color: var(--sol); }
[data-tema="dark"] .cred-pick input { accent-color: var(--sol); }

/* campos de formulario */
.reserva-fila, .campo-in, input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], select, textarea, .aviso { background: var(--campo); }
[data-tema="dark"] .reserva-fila { border-color: #E9E7E1; }

/* ── marca: logo + nombre ─────────────────────────────────────────────────── */
.marca { gap: .65rem; }
.ib-logo { height: 48px; width: auto; flex: 0 0 auto; display: block; }
.ib-logo .w, .ib-logo .b { fill: var(--fg, var(--tinta)); }
.ib-logo .a { fill: var(--logo-acc, #F5B800); }
.ib-logo-grande { height: 84px; }
.marca:hover .ib-logo { animation: logo-guiño .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes logo-guiño { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(-8deg) scale(1.1); } 100% { transform: rotate(0) scale(1); } }
.pie .marca { margin: 0; display: inline-flex; }

/* ── botón de tema ────────────────────────────────────────────────────────── */
.tema-btn {
  width: 44px; height: 44px; flex: 0 0 auto; display: inline-grid; place-items: center;
  background: transparent; color: var(--tinta); border: 2px solid var(--tinta); border-radius: 50%;
  cursor: pointer; padding: 0; transition: background .18s, color .18s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.tema-btn:hover { background: var(--sol); color: var(--negro); border-color: var(--sol); transform: rotate(25deg) scale(1.06); }
.tema-ico {
  width: 18px; height: 18px; border-radius: 50%; background: currentColor; position: relative; display: block;
  overflow: hidden; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
/* sol en claro (círculo lleno); media luna en oscuro (la sombra que le muerde un lado) */
.tema-ico::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--papel); top: -7px; right: -9px; transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.2, .5, 1);
}
[data-tema="dark"] .tema-ico::after { transform: scale(1); }
[data-tema="dark"] .tema-ico { transform: rotate(-35deg); }
@media (max-width: 860px) {
  .js .nav-links .tema-btn { margin: 1rem 0 0; align-self: flex-start; }
}

/* cambio de tema: un barrido circular desde el botón (si el navegador lo permite) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: tema-barrido .65s cubic-bezier(.65, 0, .2, 1) both; clip-path: circle(0 at var(--tx, 50%) var(--ty, 0)); }
@keyframes tema-barrido { to { clip-path: circle(150vmax at var(--tx, 50%) var(--ty, 0)); } }
body, .nav, .banda, .franja { transition: background-color .35s, color .35s; }

/* ── movimiento ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* barra de avance de lectura (solo donde el navegador soporta scroll-timeline) */
  @supports (animation-timeline: scroll()) {
    .nav::after {
      content: ''; position: absolute; left: 0; bottom: -2px; height: 3px; width: 100%;
      background: var(--sol); transform-origin: 0 50%; transform: scaleX(0);
      animation: avance linear both; animation-timeline: scroll(root);
    }
    @keyframes avance { to { transform: scaleX(1); } }
  }

  /* entrada del primer pantallazo */
  .hero-txt > * { animation: sube .75s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-txt > *:nth-child(2) { animation-delay: .08s; }
  .hero-txt > *:nth-child(3) { animation-delay: .16s; }
  .hero-txt > *:nth-child(4) { animation-delay: .24s; }
  .hero-txt > *:nth-child(5) { animation-delay: .32s; }
  .portada { animation: portada-entra .9s cubic-bezier(.2, .8, .2, 1) .15s both; }
  @keyframes sube { from { opacity: 0; transform: translateY(26px); } }
  @keyframes portada-entra { from { opacity: 0; transform: translateY(34px) rotate(2.5deg) scale(.96); } }

  /* el resaltado del titular se "pinta" como un marcador */
  .hl { animation: marcador .8s cubic-bezier(.7, 0, .2, 1) .45s both; background-repeat: no-repeat; }
  @keyframes marcador { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  /* En pantallas angostas el resaltado se parte en renglones y el clip-path de un
     elemento en línea recorta el segundo renglón: ahí aparece con un fundido. */
  @media (max-width: 640px) {
    .hl { animation-name: marcador-fundido; }
    @keyframes marcador-fundido { from { opacity: 0; } to { opacity: 1; } }
  }

  /* portada con inclinación siguiendo el puntero (ib-tema.js pone --rx/--ry) */
  .portada { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; will-change: transform; }

  /* revelado al scrollear: solo lo marca el JS, así que sin JS todo se ve */
  .rev { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
  .rev.ya { opacity: 1; transform: none; }

  /* hover: las tarjetas suben, la foto respira, los botones empujan */
  .cred-marco img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
  .cred:hover .cred-marco img { transform: scale(1.05); }
  .cred-marco { overflow: hidden; }
  .btn:not(.btn-linea):not(.btn-sello) { box-shadow: 0 0 0 0 var(--sol); transition: background .14s, color .14s, border-color .14s, transform .14s, box-shadow .2s; }
  .banda:not(.banda-sol) .btn:not(.btn-linea):hover, .franja .btn:not(.btn-linea):hover { box-shadow: 5px 5px 0 0 var(--fg); transform: translate(-2px, -2px); }
  .btn:active { transform: translate(0, 1px) !important; box-shadow: none !important; }
  .casilla, .pt { transition: transform .2s, background .2s; }
  .casilla:hover { transform: translateY(-3px); }
  .casilla.proxima { animation: pulso 2.2s ease-in-out infinite; }
  @keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, .7); } 50% { box-shadow: 0 0 0 9px rgba(255, 210, 63, 0); } }

  /* cinta del sello: el sol del botón de tema y el número de la portada flotan apenas */
  .portada-num { animation: flota 6s ease-in-out infinite; }
  @keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5%); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rev { opacity: 1 !important; transform: none !important; }
}

/* pantallas muy angostas: logo y nombre más chicos para que quepan con el botón Menú */
@media (max-width: 400px) {
  .nav-in { gap: .75rem; }
  .nav .marca { gap: .45rem; min-width: 0; }
  .nav .ib-logo { height: 34px; }
}

/* formularios: ib.css fija #fff con más peso; acá se ajusta por tema */
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="password"],
.form input[type="number"], .form input[type="date"], .form select, .form textarea,
.reserva-fila, .aviso { background: var(--campo); }
[data-tema="dark"] .form input, [data-tema="dark"] .form select, [data-tema="dark"] .form textarea { border-color: #CFCDC7; }

/* oscuro: reglas de ib.css que escribían "papel" como texto sobre banda oscura */
[data-tema="dark"] .banda-cobalto .reserva-fila { border-color: var(--tinta); }
[data-tema="dark"] .banda-cobalto .reserva-estado.no { color: var(--tinta); }
[data-tema="dark"] .banda-cobalto .form label.etiqueta, [data-tema="dark"] .banda-cobalto .form span.etiqueta { color: var(--tinta); }
[data-tema="dark"] .banda-cobalto .form input, [data-tema="dark"] .banda-cobalto .form select, [data-tema="dark"] .banda-cobalto .form textarea { border-color: #CFCDC7; background: var(--campo); }
[data-tema="dark"] .banda-cobalto .aviso { background: var(--campo); color: var(--tinta); }
[data-tema="dark"] .barra-pedido .btn-linea, [data-tema="dark"] .barra-cta .btn-linea { color: var(--tinta); }
[data-tema="dark"] .barra-cta { --btn-bg: var(--sol); --btn-fg: var(--negro); --btn-bg-h: var(--tinta); --btn-fg-h: var(--negro); }

/* oscuro: el muro de casillas libres se tiene que poder leer */
[data-tema="dark"] { --borde-cobalto: #6A6A74; }
[data-tema="dark"] .casilla { color: #C9C8C4; }
[data-tema="dark"] .casilla.proxima { color: var(--negro); }

/* ── plataforma: hero con dos puertas y "Cómo funciona" ─────────────────────── */
.hero-doble { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 1.8rem 0 0; }
.hero-txt .reserva { margin-top: 2rem; }
.portada-libre .portada-num { font: 400 clamp(2.6rem, 17cqw, 5.2rem)/.95 var(--display); letter-spacing: -.02em; text-align: center; padding: 0 6cqw; }

.como { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); margin-top: 2.5rem; }
.como-col { border-top: 2px solid var(--line); padding-top: 1.4rem; }
.como-rol { font: 400 clamp(1.5rem, 2.8vw, 2.1rem)/1.1 var(--display); margin: 0 0 1.4rem; }
.como-pasos { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: paso; display: grid; gap: 1.1rem; }
.como-pasos li { counter-increment: paso; position: relative; padding-left: 3.2rem; line-height: 1.45; color: var(--sec); }
.como-pasos li b { display: block; color: var(--fg); font-size: 1.12rem; margin-bottom: .15rem; }
.como-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -.15rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  font: 400 1.3rem/1 var(--display); background: var(--sol); color: var(--negro); border-radius: 50%;
}
@media (max-width: 760px) { .como { grid-template-columns: 1fr; } }
.hero-con-portada .t-xl { font-size: clamp(2.3rem, 4.5vw, 4.3rem); }
.pie .ib-logo-grande { height: auto; width: min(300px, 100%); }
.pie .marca { max-width: 100%; }


/* ═════════════════════════════════════════════════════════════════════════════
   IDENTIDAD v3 (2026-10-05)
   - Tipografía: Fredoka (redondeada, como el logo) en titulares; Hanken Grotesk en el cuerpo.
   - Se fue el amarillo. UN acento vivo que sale del destello del logo: coral en claro, lima en oscuro.
     Lo "seleccionado" ya no es de color: es tinta rellena (o papel en oscuro).
   - Píldoras y esquinas redondeadas, como el logo y el mockup de perfiles.
   - Temas de perfil ([data-ptema]) y colores propios de cada creador.
   ═════════════════════════════════════════════════════════════════════════════ */

:root { --acento: #FF5A36; --sol: var(--acento); --radio-c: 24px; --radio-m: 14px; }
:root[data-tema="dark"] { --acento: #DFFF3D; }

::selection, :root[data-tema="dark"] ::selection { background: var(--tinta); color: var(--papel); }

/* el titular se marca con el acento (texto negro encima: contraste >= 6) */
.hl, :root[data-tema="dark"] .hl { background: var(--acento); color: var(--negro); border-radius: .22em; padding-inline: .14em; }

/* el destello y el celular del logo siempre del acento */
.ib-logo .a { fill: var(--acento); }

/* ── "Para negocios": ya no es un bloque amarillo, es una banda de tinta ───── */
.banda-sol {
  --bg: var(--negro); --fg: var(--blanco); --sec: #B3B2B0; --acc: var(--acento);
  --btn-bg: var(--acento); --btn-fg: var(--negro); --btn-bg-h: var(--blanco); --btn-fg-h: var(--negro);
  --line: var(--blanco);
}
:root[data-tema="dark"] .banda-sol {
  --bg: #1A1A21; --fg: var(--tinta); --sec: #B3B2B0; --acc: var(--acento);
  --btn-bg: var(--acento); --btn-fg: var(--negro); --btn-bg-h: var(--tinta); --btn-fg-h: var(--negro);
  --line: var(--tinta);
}

/* ── seleccionado = tinta, nunca amarillo ──────────────────────────────────── */
.check-largo input, .cred-pick input, :root[data-tema="dark"] .cred-pick input { accent-color: var(--tinta); }
.chip { border: 2px solid var(--suave); border-radius: 999px; padding: .5rem 1.05rem; margin: 0; text-decoration: none; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.chip:hover, :root[data-tema="dark"] .chip:hover { background: var(--suave); border-color: var(--tinta); text-decoration: none; }
:root .chip[aria-pressed="true"], :root .chip.activo,
:root[data-tema="dark"] .chip[aria-pressed="true"], :root[data-tema="dark"] .chip.activo {
  background: var(--tinta); color: var(--papel); border-color: var(--tinta); font-weight: 700;
}
.riel { gap: .5rem .5rem; }
.reserva-sugeridos button { border-radius: 999px; padding: .45rem 1rem; }
.reserva-sugeridos button:hover, :root[data-tema="dark"] .reserva-sugeridos button:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.casilla.proxima, :root[data-tema="dark"] .casilla.proxima { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
@media (prefers-reduced-motion: no-preference) {
  .casilla.proxima { animation: none; }
}
.cred-metrica { border-radius: 0 0 0 14px; }

/* ── píldoras y esquinas ───────────────────────────────────────────────────── */
.btn { border-radius: 999px; }
.btn-linea { border-radius: 999px; }
.nav-burger, .js .nav-burger { border-radius: 999px; }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="password"],
.form input[type="number"], .form input[type="date"], .form select, .form textarea { border-radius: var(--radio-m); }
.reserva-fila { border-radius: 999px; overflow: hidden; }
.reserva-btn { margin: -2px -2px -2px 0; }
@media (max-width: 560px) { .reserva-fila { border-radius: 22px; } }
.sel-ciudad { border-radius: 10px; border: 2px solid var(--suave); padding: .35rem .7rem; }
.aviso { border-radius: var(--radio-m); }
.dlg { border-radius: 26px; overflow: hidden; }
.portada { border-radius: var(--radio-c); }
.barra-pedido, .barra-cta { border-radius: 22px 22px 0 0; }
.perfil-foto-grande { border-radius: var(--radio-c); }
.perfil-tiras button { border-radius: 12px; }
.perfil-verif, .cred-verif { border-radius: 999px; }
.cred-nivel { border-radius: 999px; }

/* ── la tarjeta del catálogo es una tarjeta (con el tema de cada persona) ──── */
.cred {
  background: var(--p-card, var(--campo)); color: var(--p-fg, var(--tinta));
  border: 1px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 14%, transparent);
  border-radius: var(--radio-c); overflow: hidden; transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.cred:hover { transform: translateY(-5px); }
.cred:hover .cred-marco { transform: none; }
.cred-marco { overflow: hidden; }
.cred-cuerpo { padding: 1rem 1.2rem 0; }
.cred .cred-pick { margin: .8rem 1.2rem 0; padding: .7rem 0 0; }
.cred-parte, .perfil-parte { display: flex; align-items: center; gap: .55rem; margin: .9rem 1.2rem 1.15rem; font: 600 .78rem/1 var(--cuerpo); color: var(--p-sec, var(--gris)); }
.perfil-parte { margin: 1.6rem 0 0; }
.ib-logo-mini { --lw: var(--p-logo, var(--p-fg, var(--tinta))); --la: var(--p-spark, var(--acento)); height: 32px; width: auto; aspect-ratio: 1649 / 460; flex: 0 0 auto; }

/* ── temas de perfil ───────────────────────────────────────────────────────── */
[data-ptema="tinta"]   { --p-bg: var(--papel); --p-fg: var(--tinta); --p-sec: var(--gris); --p-acc: var(--acento); --p-card: var(--campo); --p-logo: var(--tinta); --p-spark: var(--acento); --p-title: var(--tinta); --p-btn-bg: var(--tinta); --p-btn-fg: var(--papel); --p-btn-bg-h: var(--acento); --p-btn-fg-h: var(--negro); }
[data-ptema="cobalto"] { --p-bg: #FBF3E6; --p-fg: #0B1220; --p-sec: #4A5368; --p-acc: #1D3BFF; --p-btn-bg: #1D3BFF; --p-btn-fg: #FFFFFF; --p-btn-bg-h: #0B1220; --p-btn-fg-h: #FBF3E6; --p-card: #FFF9F0; --p-title: #1D3BFF; --p-logo: #1D3BFF; --p-spark: #FF6A2B; }
[data-ptema="voltaje"] { --p-bg: #0E0F16; --p-fg: #F4F4F1; --p-sec: #A9AAB5; --p-acc: #DFFF3D; --p-btn-bg: #DFFF3D; --p-btn-fg: #0E0F16; --p-btn-bg-h: #F4F4F1; --p-btn-fg-h: #0E0F16; --p-card: #171925; --p-title: #F4F4F1; --p-logo: #F4F4F1; --p-spark: #DFFF3D; }
[data-ptema="magenta"] { --p-bg: #3A0D2B; --p-fg: #FFF1F5; --p-sec: #D9B3C6; --p-acc: #D81E78; --p-btn-bg: #D81E78; --p-btn-fg: #FFFFFF; --p-btn-bg-h: #FFF1F5; --p-btn-fg-h: #3A0D2B; --p-card: #4A1237; --p-title: #FFF1F5; --p-logo: #FFF1F5; --p-spark: #FF3D9A; }
[data-ptema="violeta"] { --p-bg: #FBF3E6; --p-fg: #2A1450; --p-sec: #5D4A80; --p-acc: #4A1F82; --p-btn-bg: #4A1F82; --p-btn-fg: #FBF3E6; --p-btn-bg-h: #FF7A59; --p-btn-fg-h: #2A1450; --p-card: #FFF9F0; --p-title: #4A1F82; --p-logo: #4A1F82; --p-spark: #FF7A59; }
/* colores propios: el servidor/JS solo fija --p-bg, --p-fg, --p-acc y --p-btn-fg (#RRGGBB validados); el resto se deriva */
[data-ptema="custom"] {
  --p-sec: color-mix(in srgb, var(--p-fg) 72%, var(--p-bg));
  --p-card: color-mix(in srgb, var(--p-bg) 93%, var(--p-fg));
  --p-btn-bg: var(--p-acc); --p-btn-bg-h: var(--p-fg); --p-btn-fg-h: var(--p-bg);
  --p-title: var(--p-fg); --p-logo: var(--p-fg); --p-spark: var(--p-acc);
}
/* dentro de un perfil con tema propio, todos los componentes del sitio leen sus colores */
[data-ptema]:not([data-ptema="tinta"]) {
  --papel: var(--p-bg); --tinta: var(--p-fg); --gris: var(--p-sec); --suave: color-mix(in srgb, var(--p-fg) 18%, transparent);
  --sol: var(--p-acc); --cobalto: var(--p-title); --campo: var(--p-card); --regla: 2px solid var(--p-fg);
  --bg: var(--p-bg); --fg: var(--p-fg); --sec: var(--p-sec); --acc: var(--p-acc); --line: var(--p-fg);
  --btn-bg: var(--p-btn-bg); --btn-fg: var(--p-btn-fg); --btn-bg-h: var(--p-btn-bg-h); --btn-fg-h: var(--p-btn-fg-h);
  color-scheme: normal;
}
[data-ptema]:not([data-ptema="tinta"]) .cred-nombre, [data-ptema]:not([data-ptema="tinta"]) .cred-nombre a { color: var(--p-title); }
[data-ptema]:not([data-ptema="tinta"]) .cred-pick input { accent-color: var(--p-acc); }

/* la página de perfil: todo el bloque es el perfil de esa persona */
.perfil-tema {
  background: var(--p-bg); color: var(--p-fg); border-radius: 30px; padding: clamp(1.1rem, 3.2vw, 2.6rem);
  border: 1px solid color-mix(in srgb, var(--p-fg) 14%, transparent);
}
.perfil-tema h1 { color: var(--p-title); }
.perfil-tema .campo { color: var(--p-sec); }
.perfil-tema .aviso { background: var(--p-card); color: var(--p-fg); border-left-color: var(--p-acc); }
.perfil-tema .btn-sello { --btn-bg: var(--p-btn-bg); --btn-fg: var(--p-btn-fg); --btn-bg-h: var(--p-btn-bg-h); --btn-fg-h: var(--p-btn-fg-h); }

/* ── perfiles de ejemplo (home y /ejemplo) ─────────────────────────────────── */
.ej-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin-top: 2.2rem; }
@media (max-width: 900px) { .ej-grid { grid-template-columns: 1fr; max-width: 30rem; } }
.ej { display: block; background: var(--p-card); color: var(--p-fg); border-radius: 26px; overflow: hidden; text-decoration: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
a.ej:hover { transform: translateY(-6px) rotate(-.4deg); }
.ej-hero { width: 100%; aspect-ratio: 445 / 346; object-fit: cover; display: block; }
.ej-cuerpo { padding: 1.25rem 1.4rem 1.1rem; }
.ej-rotulo { display: inline-block; font: 700 .72rem/1 var(--cuerpo); letter-spacing: .06em; background: var(--p-fg); color: var(--p-bg); padding: .32rem .7rem; border-radius: 999px; }
.ej-nombre { font: 400 clamp(1.8rem, 3vw, 2.35rem)/1.05 var(--display); color: var(--p-title); margin: .65rem 0 .25rem; letter-spacing: -.01em; }
.ej-rubro { font: 600 .82rem/1.3 var(--cuerpo); letter-spacing: .08em; color: var(--p-fg); margin: 0 0 .35rem; }
.ej-frase { margin: 0; color: var(--p-sec); font-size: 1.02rem; }
.ej-botones { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0; }
.ej-btn { display: inline-flex; align-items: center; border-radius: 999px; padding: .68rem 1.15rem; font: 700 .92rem/1 var(--cuerpo); background: var(--p-btn-bg); color: var(--p-btn-fg); }
.ej-btn-linea { background: transparent; color: var(--p-fg); box-shadow: inset 0 0 0 2px var(--p-fg); }
.ej-minis { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ej-minis img { width: 100%; aspect-ratio: 182 / 178; object-fit: cover; border-radius: 14px; display: block; }
.ej .cred-parte { margin: .95rem 0 0; }
.ej-pie { margin: .7rem 0 0; font-size: .78rem; color: var(--p-sec); }
.ej-mas { margin-top: 2rem; }
.ej-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: 1rem; }
.ej-layout #ej-preview { position: sticky; top: 90px; }
@media (max-width: 900px) { .ej-layout { grid-template-columns: 1fr; } .ej-layout #ej-preview { position: static; max-width: 32rem; order: 2; } .ej-ctrl { order: 1; } }
.ptema-nota { margin: 1.2rem 0 0; color: var(--gris); font-size: .95rem; max-width: 34rem; }

/* controles de tema y colores */
.ptema { margin: 1.6rem 0 0; }
.ptema-etq { font: 700 .95rem/1.3 var(--cuerpo); margin: 0 0 .6rem; }
.ptema-muestras { display: flex; flex-wrap: wrap; gap: .55rem; }
.ptema-muestra { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem 1rem .35rem .4rem; border: 2px solid var(--suave); border-radius: 999px; background: transparent; color: var(--tinta); cursor: pointer; font: 700 .95rem/1 var(--cuerpo); transition: border-color .15s, background .15s; }
.ptema-muestra:hover { border-color: var(--tinta); }
.ptema-muestra[aria-checked="true"] { border-color: var(--tinta); background: var(--suave); }
.ptema-chip { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); box-shadow: inset 0 0 0 2px var(--c3); }
.ptema-custom { margin-top: 1rem; border: 2px solid var(--suave); border-radius: 18px; padding: .8rem 1.1rem; }
.ptema-custom summary { cursor: pointer; font: 700 .98rem/1.3 var(--cuerpo); }
.ptema-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: .9rem; }
@media (max-width: 520px) { .ptema-campos { grid-template-columns: 1fr; } }
.ptema-campos label { display: grid; gap: .35rem; font: 600 .9rem/1.2 var(--cuerpo); color: var(--gris); }
.ptema-campos input[type="color"] { width: 100%; height: 48px; padding: 3px; border: 2px solid var(--tinta); border-radius: 12px; background: var(--campo); cursor: pointer; }
.ptema-aviso { margin: .8rem 0 0; font: 600 .92rem/1.4 var(--cuerpo); color: var(--tinta); background: color-mix(in srgb, var(--acento) 22%, transparent); padding: .6rem .9rem; border-radius: 12px; }
.ptema-botones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.ptema-btn { border: 2px solid var(--tinta); background: transparent; color: var(--tinta); border-radius: 999px; padding: .55rem 1.1rem; font: 700 .9rem/1 var(--cuerpo); cursor: pointer; }
.ptema-btn:hover { background: var(--tinta); color: var(--papel); }
.ptema-personas { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.2rem 0 0; }
.ptema-persona { text-decoration: none; padding: .45rem 1rem; border-radius: 999px; border: 2px solid var(--suave); font: 600 .92rem/1 var(--cuerpo); }
.ptema-persona.on { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* ── "Cómo funciona": los números ya no son de color de relleno chillón ────── */
.como-pasos li::before { background: var(--acento); color: var(--negro); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent); } 50% { box-shadow: 0 0 0 9px transparent; } }
}
@media (prefers-reduced-motion: no-preference) {
  .cred.rev, .ej.rev { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
  .cred.rev.ya { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
}

/* ── vista previa de la propia ficha, aviso de creador, ejemplos en el catálogo ─────────────── */
.vp-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
  margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: 20px;
  background: var(--tinta); color: var(--papel); border: 2px solid var(--acento, var(--tinta));
}
.vp-txt { flex: 1 1 18rem; line-height: 1.45; }
.vp-txt b { display: block; font-family: var(--display); font-size: 1.15rem; margin-bottom: .15rem; }
.vp-banner .btn { --btn-bg: var(--papel); --btn-fg: var(--tinta); --btn-bg-h: var(--acento, var(--papel)); --btn-fg-h: var(--negro, var(--tinta)); }
.aviso-creador { margin: 0 0 1.5rem; }
.aviso-creador a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.ej-bloque { margin: 0 0 clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); border-bottom: 2px solid var(--suave, currentColor); }
.ej-bloque .campo { margin-bottom: .6rem; }
.vacio-red { margin: 0 0 2.5rem; }

/* ── ronda 1 de pulido: catálogo parejo, monograma neutro, pick de 44px ───── */
.grid-creds { align-items: stretch; }
.grid-creds > :nth-child(n) { margin-top: 0; }
.cred { background: var(--campo); color: var(--tinta); border-top: 4px solid var(--p-acc, transparent); }
[data-ptema="tinta"].cred { border-top-color: transparent; }
.cred-cuerpo { flex: 1; }
.cred-nombre, .cred-nombre a { color: var(--p-title, var(--tinta)); }
.cred-oficio { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* sin foto: monograma de iniciales sobre superficie plana, nunca un bloque gigante */
/* sin foto (ronda 2): superficie neutra (5 tonos fijos por id) + destello sutil del acento + "Foto pendiente" */
:root { --mono-0: #EFEDE8; --mono-1: #E7EBEE; --mono-2: #F0E8E3; --mono-3: #E8EEE7; --mono-4: #ECE7F0; }
:root[data-tema="dark"] { --mono-0: #1E1E26; --mono-1: #1B2128; --mono-2: #25201F; --mono-3: #1D2520; --mono-4: #231F2B; }
.cred-marco.cred-marco-vacio, [data-tema="dark"] .cred-marco.cred-marco-vacio {
  aspect-ratio: auto; height: 170px; max-height: 220px; overflow: hidden;
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--p-acc, var(--acento)) 20%, transparent), transparent 62%), var(--mono, var(--mono-0));
}
.cred-tono-0 { --mono: var(--mono-0); } .cred-tono-1 { --mono: var(--mono-1); } .cred-tono-2 { --mono: var(--mono-2); }
.cred-tono-3 { --mono: var(--mono-3); } .cred-tono-4 { --mono: var(--mono-4); }
.cred-sinfoto { background: transparent; color: var(--p-title, var(--tinta)); font: 700 4rem/1 var(--display); }
.cred-pendiente {
  position: absolute; left: .8rem; bottom: .7rem; font: 700 .7rem/1 var(--cuerpo); letter-spacing: .04em;
  padding: .35rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--tinta) 10%, transparent); color: var(--tinta);
}
.perfil-foto-grande.perfil-foto-vacia {
  position: relative; aspect-ratio: 3 / 2; height: auto; background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--p-acc, var(--acento)) 20%, transparent), transparent 62%), var(--mono-0);
}
.perfil-foto-vacia .cred-sinfoto { display: grid; place-items: center; width: 100%; font-size: clamp(5rem, 14vw, 9rem); }
@media (min-width: 881px) { .perfil-foto-grande.perfil-foto-vacia.sin-foto { aspect-ratio: 4 / 5; align-self: start; } }
/* "Sumar al pedido": botón pastilla, el checkbox queda oculto pero accesible */
.cred .cred-pick, .perfil-acciones .cred-pick {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px;
  margin: .8rem 1.2rem 1.15rem; padding: 0 1.1rem; border: 2px solid var(--tinta); border-radius: 999px;
  font: 700 .92rem/1 var(--cuerpo); cursor: pointer; transition: background .15s, color .15s;
}
.perfil-acciones .cred-pick { margin: 0; }
.cred-pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cred-pick .cred-pick-on { display: none; }
.cred-pick:has(input:checked) { background: var(--tinta); color: var(--papel); }
.cred-pick:has(input:checked) .cred-pick-on { display: inline; }
.cred-pick:has(input:checked) .cred-pick-off { display: none; }
.cred-pick:has(input:focus-visible) { outline: 3px solid var(--acc, var(--acento)); outline-offset: 3px; }
.cred-parte { display: none; }
.ej .cred-parte { display: flex; }
.tp-prev .cred-pick { display: none; }

/* hero: la tarjeta cierra dentro de la sección clara */
.hero-portada { margin-bottom: 0; }
.hero-portada .portada { max-height: 36rem; }
.hero-con-portada .hero-txt, .hero-con-portada .hero-portada { padding-bottom: 0; }
.hero-con-portada + .banda { padding-top: var(--band-v); }
.hero-con-portada { padding-bottom: clamp(2rem, 4vw, 3rem); }

@media (max-width: 480px) {
  /* campo de reserva: input y sufijo en una fila, botón aparte a todo el ancho */
  .hero .reserva .reserva-fila { flex-direction: column; border: 0; background: transparent; gap: 10px; overflow: visible; }
  .hero .reserva-campo { flex-wrap: nowrap; align-items: center; min-height: 52px; padding: 0 1rem; background: #fff; border: 2px solid var(--tinta); border-radius: 26px; }
  .hero .reserva-campo input { flex: 1 1 auto; width: auto; min-width: 0; padding-block: .6rem; }
  .hero .reserva-dominio { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
  .hero .reserva-campo { max-width: 100%; box-sizing: border-box; }
  .hero .reserva-campo input { min-width: 3ch; }
  .hero .reserva-btn { width: 100%; border-radius: 999px; }
  .cred .cred-pick { margin: .6rem .8rem .9rem; padding-inline: .6rem; font-size: .85rem; }
  .cred-cuerpo { padding: .8rem .8rem 0; }
  .cred-nombre { font-size: 1.15rem; }
  .cred-marco.cred-marco-vacio { height: 130px; }
  .hero .reserva-campo { background: var(--campo); }
}


/* ═════════════════════════════════════════════════════════════════════════════
   RONDA 2 (loop de abogados del diablo) · reversible: _v-backup-loop-r2/
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── hero: dos puertas del mismo peso y el campo de link en su tarjeta ─────── */
.hero-doble { gap: .75rem; }
.hero-doble .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 1.7rem; font-size: 1.05rem; }
.hero-doble .btn-linea { border: 2px solid var(--tinta); }
.hero-reserva {
  margin-top: 2rem; max-width: 40rem; padding: 1.1rem 1.25rem 1rem; border-radius: var(--radio-c);
  border: 2px solid var(--suave); background: color-mix(in srgb, var(--campo) 55%, transparent);
}
.hero-reserva .campo { margin: 0 0 .5rem; }
.hero-reserva .reserva { margin-top: 0; }
.reserva-sub { margin: 0 0 .65rem; font: 500 .95rem/1.4 var(--cuerpo); color: var(--gris); overflow-wrap: anywhere; }
.hero-reserva .micro { margin-top: .5rem; }
@media (max-width: 560px) {
  .hero-doble { flex-direction: column; align-items: stretch; }
  .hero-doble .btn { width: 100%; }
  .hero-reserva { padding: .8rem 1rem .6rem; }
  .hero-reserva > .campo, .hero-reserva .reserva-sub { display: none; }
}

/* ── hero: abanico de perfiles de ejemplo en vez de la tarjeta de color vacía ─ */
.hero-portada .portada.portada-fan {
  background: transparent; overflow: visible; aspect-ratio: auto; min-height: 0; max-height: none;
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; container-type: normal; color: var(--tinta);
}
.hero-con-portada .hero-portada { margin-bottom: 0; align-items: center; }
.fan { position: relative; height: clamp(19rem, 34vw, 29rem); }
.fan-c {
  position: absolute; width: 62%; background: var(--p-card); color: var(--p-fg); border-radius: 22px; overflow: hidden;
  text-decoration: none; box-shadow: 0 18px 40px -18px rgba(12, 12, 18, .45); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  border: 1px solid color-mix(in srgb, var(--p-fg) 14%, transparent);
}
.fan-c img { width: 100%; height: auto; aspect-ratio: 445 / 346; object-fit: cover; display: block; }
.fan-pie { display: grid; gap: .25rem; padding: .8rem 1rem 1rem; }
.fan-pie b { font: 400 1.35rem/1.1 var(--display); color: var(--p-title); }
.fan-pie i { font: 600 .82rem/1.3 var(--cuerpo); font-style: normal; color: var(--p-sec); overflow-wrap: anywhere; }
.fan-pie .ej-rotulo { justify-self: start; }
.fan-1 { left: 0; top: 0; transform: rotate(-5deg); z-index: 1; }
.fan-2 { right: 0; top: 8%; transform: rotate(4deg); z-index: 2; }
.fan-3 { left: 14%; bottom: 0; transform: rotate(-1.5deg); z-index: 3; width: 68%; }
.fan-c:hover { transform: translateY(-6px) rotate(0); z-index: 4; }
.portada-fan .portada-num { font: 700 .8rem/1 var(--cuerpo); letter-spacing: .05em; text-transform: uppercase; background: var(--acento); color: var(--negro); padding: .45rem .8rem; border-radius: 999px; align-self: flex-start; margin: 0; text-align: left; }
.portada-fan .portada-pie { padding: 0; font: 500 1rem/1.4 var(--cuerpo); color: var(--tinta); }
.portada-fan .portada-pie b { font: 400 1.5rem/1.1 var(--display); display: block; margin-bottom: .25rem; }
.portada-fan .portada-pie span { color: var(--gris); }
@media (max-width: 1000px) {
  /* celular/tablet: tira compacta de 3 caras entre los botones y el campo de link */
  .hero-con-portada .hero-txt { display: contents; }
  .hero-con-portada .hero-in { row-gap: 0; }
  .hero-con-portada .hero-doble { margin-top: 1.2rem; }
  .hero-con-portada .bajada { margin-top: 1rem; }
  .hero-con-portada .campo-sello { margin-bottom: .7rem; }
  .hero-con-portada .hero-doble { order: 1; }
  .hero-con-portada .hero-portada { order: 2; margin: 1.1rem 0 0; max-width: 30rem; width: 100%; }
  .hero-con-portada .hero-reserva { order: 3; margin-top: 1.1rem; }
  .fan { height: clamp(9rem, 38vw, 15rem); }
  .fan-c { width: 42%; border-radius: 16px; }
  .fan-3 { width: 47%; left: 26.5%; }
  .fan-pie b { display: none; }
  .fan-pie { padding: .5rem .7rem .65rem; gap: .15rem; }
  .fan-pie b { font-size: 1rem; }
  .fan-pie i { display: none; }
  .fan-pie .ej-rotulo { font-size: .62rem; padding: .25rem .5rem; }
  .portada-fan .portada-num, .portada-fan .portada-pie { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .portada.portada-fan { transform: none; transition: none; }
}

/* ── home: pasos legibles, pausa compacta ──────────────────────────────────── */
.como-pasos li { font-size: 1.0625rem; }
.como-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.como-btns .btn-linea { border: 2px solid var(--tinta); }
.pausa { min-height: 0; padding-block: clamp(2rem, 5vw, 3.2rem); }
.pausa-txt { font-size: clamp(1.5rem, 3.4vw, 2.3rem); }
.pausa-sub { margin-top: 1rem; font-size: 1.05rem; }

/* ── /talentos: ejemplos en carrusel en el celular; filtros compactos ──────── */
@media (max-width: 900px) {
  .ej-bloque .ej-grid {
    display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; max-width: none; margin-inline: calc(var(--pad) * -1);
    padding: 0 var(--pad) .6rem; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .ej-bloque .ej-grid::-webkit-scrollbar { display: none; }
  .ej-bloque .ej { flex: 0 0 78vw; max-width: 420px; scroll-snap-align: start; }
  .ej-bloque .ej-minis, .ej-bloque .ej .cred-parte, .ej-bloque .ej-botones { display: none; }
  .ej-bloque .ej-hero { aspect-ratio: 4 / 3; height: auto; }
  .ej-bloque .ej-cuerpo { padding: .9rem 1.1rem 1rem; }
  .ej-bloque .bajada { font-size: .98rem; }
}
.filtros-mas { border-bottom: 1px solid var(--suave); }
.filtros-mas > summary { cursor: pointer; list-style: none; padding: .7rem 0; font: 700 .95rem/1.2 var(--cuerpo); display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.filtros-mas > summary::-webkit-details-marker { display: none; }
.filtros-mas > summary::after { content: '+'; font-size: 1.3rem; line-height: 1; margin-left: auto; }
.filtros-mas[open] > summary::after { content: '\2212'; }
.filtros-mas .n-activos { background: var(--tinta); color: var(--papel); border-radius: 999px; font-size: .78rem; padding: .2rem .55rem; }
.sel-ciudad { border-radius: 999px; padding: .5rem 1.1rem; }
@media (max-width: 640px), (pointer: coarse) {
  .filtros .chip, .filtros .sel-ciudad { min-height: 44px; }
  .filtros .chip { display: inline-flex; align-items: center; }
}
@media (max-width: 640px) {
  .riel.con-mas { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}

/* ── grilla: tarjeta de cierre ─────────────────────────────────────────────── */
.cred-cta {
  display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding: 1.6rem 1.4rem; border-radius: var(--radio-c);
  border: 2px dashed var(--suave); background: transparent; color: var(--tinta); text-align: left; min-height: 12rem;
}
.cred-cta b { font: 400 clamp(1.3rem, 2.2vw, 1.65rem)/1.12 var(--display); }
.cred-cta p { margin: 0; color: var(--gris); font-size: .98rem; }
.cred-cta .btn { align-self: flex-start; }

/* ── /ejemplo: controles fijos, tarjeta con borde, seleccionado claro ──────── */
@media (min-width: 900px) { .ej-layout .ej-ctrl { position: sticky; top: 96px; align-self: start; } }
.ej-layout #ej-preview .ej { border: 2px solid color-mix(in srgb, var(--tinta) 30%, transparent); }
.ptema-muestras { gap: .4rem; }
.ptema-muestra { padding: .3rem .8rem .3rem .35rem; gap: .45rem; font-size: .9rem; }
.ptema-muestra:hover { background: transparent; }
.ptema-muestra[aria-checked="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.ptema-muestra[aria-checked="true"] .ptema-chip { box-shadow: inset 0 0 0 2px var(--c3), 0 0 0 2px var(--papel); }
.ptema-muestra[aria-checked="true"] .ptema-nombre::before { content: '\2713\00a0'; }

/* oscuro: el destello del acento (lima) sobre neutro oscuro se veía oliva; más tenue */
:root[data-tema="dark"] .cred-marco.cred-marco-vacio,
:root[data-tema="dark"] .perfil-foto-grande.perfil-foto-vacia {
  background: radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--p-acc, var(--acento)) 7%, transparent), transparent 60%), var(--mono, var(--mono-0));
}

/* ── ronda 3: perfiles sin foto = fila compacta rotulada, nunca una tarjeta vacia ───── */
.grid-creds > .cred-compacta, .grid-creds > .cred-compacta:nth-child(n) {
  grid-column: 1 / -1; margin-top: 0; display: flex; flex-direction: row; align-items: center; gap: 1rem;
  padding: .8rem 1rem; border-top-width: 1px; border-radius: 18px;
}
.cred-compacta .cred-av {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mono, var(--mono-0)); color: var(--tinta); font: 700 1.5rem/1 var(--display);
}
.cred-compacta .cred-cuerpo { padding: 0; min-width: 0; }
.cred-compacta .cred-nombre { margin: 0; font-size: 1.05rem; }
.cred-compacta .cred-oficio { margin: .1rem 0 .35rem; font-size: .9rem; -webkit-line-clamp: 1; line-clamp: 1; }
.cred-armado {
  display: inline-block; align-self: flex-start; justify-self: start; width: fit-content; font: 700 .75rem/1 var(--cuerpo); letter-spacing: .02em; padding: .35rem .65rem; border-radius: 999px;
  background: var(--tinta); color: var(--papel);
}
.cred-compacta .cred-pick { margin: 0 0 0 auto; flex: none; min-height: 44px; }
@media (max-width: 560px) {
  .grid-creds > .cred-compacta { flex-wrap: wrap; }
  .cred-compacta .cred-pick { margin: 0; width: 100%; }
}
.ej-cta { margin-top: 1.4rem; }
.ej-layout #ej-preview { scroll-margin-top: 76px; }
@media (max-width: 900px) {
  .ej-layout { gap: 1rem; }
  .ej-ctrl .ptema-nota { margin-top: .8rem; font-size: .88rem; }
  .ptema-muestra { min-height: 44px; }
}

/* ── ronda 3: ejemplos en movil como carrusel (cara real arriba, home mas corto) ───── */
@media (max-width: 900px) {
  .ej-grid {
    display: flex; max-width: none; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad, 16px) * -1); padding: 0 var(--pad, 16px) .6rem; scroll-padding-inline: var(--pad, 16px);
    -webkit-overflow-scrolling: touch;
  }
  .ej-grid > .ej { flex: 0 0 78vw; max-width: 22rem; scroll-snap-align: start; }
}
@media (max-width: 760px) { .grid-creds > .cred-cta { grid-column: 1 / -1; } }

/* ══ Mejoras Maiden (2026-10-05): métricas, alta por pasos, cinta, /marcas ══════ */

/* ── barra de métricas (tarjeta, perfil y ejemplos) ─────────────────────────── */
.metricas { display: grid; gap: .45rem; margin: .55rem 0 0; }
.metricas-lista { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.metricas-lista li {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .28rem .7rem .28rem .55rem;
  border-radius: 999px; background: color-mix(in srgb, var(--p-fg, var(--tinta)) 8%, transparent);
  color: var(--p-fg, var(--tinta)); font: 600 .82rem/1 var(--cuerpo);
}
.metricas-lista li svg { flex: 0 0 auto; color: var(--p-acc, var(--acento)); }
.metricas-lista li b { font: 800 .98rem/1 var(--cuerpo); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.metricas-lista li span { color: var(--p-sec, var(--gris)); font-weight: 600; }
.metricas-origen {
  justify-self: start; display: inline-flex; align-items: center; gap: .3rem; font: 700 .72rem/1 var(--cuerpo);
  letter-spacing: .02em; padding: .32rem .6rem; border-radius: 999px; color: var(--p-sec, var(--gris));
  border: 1.5px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 22%, transparent);
}
.metricas-verificado { color: var(--p-fg, var(--tinta)); border-color: var(--p-acc, var(--acento)); }
.metricas-verificado::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--p-acc, var(--acento)); }
.metricas-ejemplo { border-style: dashed; }
.metricas-grande .metricas-lista li { min-height: 40px; padding: .45rem .95rem .45rem .75rem; font-size: .9rem; }
.metricas-grande .metricas-lista li b { font-size: 1.18rem; }
.metricas-grande { margin: 1.1rem 0 .3rem; }
.ej .metricas { margin: .2rem 0 .9rem; }
.ej .metricas-lista li { background: color-mix(in srgb, var(--p-fg) 10%, transparent); }
.cred .cred-total b { font-variant-numeric: tabular-nums; }
.cred-bio { margin: .2rem 0 .1rem; font: 500 .9rem/1.4 var(--cuerpo); color: var(--p-sec, var(--gris)); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* ── perfil: bio, alcance y compartir ───────────────────────────────────────── */
.perfil-bio { margin: .8rem 0 0; font: 500 1.08rem/1.5 var(--cuerpo); color: var(--p-fg, var(--tinta)); max-width: 46ch; }
.perfil-alcance { margin: .35rem 0 0; font: 600 .95rem/1.3 var(--cuerpo); color: var(--p-sec, var(--gris)); }
.perfil-alcance b { font: 400 1.6rem/1 var(--display); color: var(--p-title, var(--tinta)); margin-right: .25rem; font-variant-numeric: tabular-nums; }
.perfil-compartir { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.btn-wa { --btn-bg: #0E7A3F; --btn-fg: #fff; --btn-bg-h: #0A5E30; --btn-fg-h: #fff; border-radius: 999px; }

/* ── alta por pasos ─────────────────────────────────────────────────────────── */
/* un fieldset con display:grid deja al legend fuera de la grilla y el título se monta sobre el texto:
   bloque normal con separación entre hijos */
.wiz-paso { border: 0; margin: 0; padding: 0; min-width: 0; display: block; }
.wiz-paso > * + * { margin-top: 1.1rem; }
.wiz-titulo { display: block; width: 100%; padding: 0; margin: 0 0 .35rem; font: 400 clamp(1.5rem, 3vw, 2rem)/1.15 var(--display); color: var(--fg, var(--tinta)); }
.wiz-paso > .wiz-bajada { margin-top: .35rem; color: var(--sec, var(--gris)); font: 500 .95rem/1.45 var(--cuerpo); }
.opcional { font-weight: 500; color: var(--sec, var(--gris)); }
/* sin JavaScript: todo el formulario a la vista, sin barra de pasos ni botones de paso */
.wiz:not(.wiz-on) .wiz-cab, .wiz:not(.wiz-on) .wiz-nav, .wiz:not(.wiz-on) .wiz-cuenta { display: none; }
.wiz:not(.wiz-on) .wiz-paso + .wiz-paso { border-top: 1px solid var(--suave); padding-top: 1.4rem; }
.wiz-on .wiz-paso[hidden], .wiz-on [hidden] { display: none !important; }
.wiz-cab { margin-bottom: .3rem; }
.wiz-pasos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0 0 .7rem; padding: 0; }
.wiz-pasos li { display: flex; align-items: center; gap: .45rem; font: 700 .8rem/1.1 var(--cuerpo); color: var(--sec, var(--gris)); min-width: 0; }
.wiz-pasos li span {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 .82rem/1 var(--cuerpo);
  border: 2px solid currentColor; transition: background .25s, color .25s, border-color .25s;
}
.wiz-pasos li b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-pasos li[aria-current="step"] { color: var(--fg, var(--tinta)); }
.wiz-pasos li[aria-current="step"] span { background: var(--fg, var(--tinta)); color: var(--bg, var(--papel)); border-color: var(--fg, var(--tinta)); }
.wiz-pasos li.hecho { color: var(--fg, var(--tinta)); cursor: pointer; }
.wiz-pasos li.hecho span { background: var(--acento); color: var(--negro); border-color: var(--acento); }
.wiz-barra { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--fg, var(--tinta)) 14%, transparent); overflow: hidden; }
.wiz-barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--acento); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.wiz-cuenta { margin: 0; font: 700 .78rem/1 var(--cuerpo); letter-spacing: .04em; text-transform: uppercase; color: var(--sec, var(--gris)); }
.wiz-nav { display: flex; gap: .7rem; justify-content: space-between; align-items: center; }
.wiz-nav .btn, .wiz .js-wiz-enviar { min-height: 52px; }
.wiz-nav .js-wiz-sig { margin-left: auto; min-width: 11rem; }
.wiz-entra { animation: wiz-entra .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wiz-entra { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.red-filas { display: grid; gap: .8rem; }
.red-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .6rem; align-items: end; }
.red-fila .etiqueta { grid-column: 1 / -1; margin-bottom: 0; }
.red-fila-una { grid-template-columns: 1fr; }
.wiz-resumen { border-radius: var(--radio-m, 14px); background: color-mix(in srgb, var(--fg, var(--tinta)) 6%, transparent); padding: .9rem 1.1rem; }
.wiz-resumen-t { margin: 0 0 .5rem; font: 800 .8rem/1 var(--cuerpo); letter-spacing: .04em; text-transform: uppercase; color: var(--sec, var(--gris)); }
.wiz-resumen dl { display: grid; gap: .35rem; margin: 0; }
.wiz-resumen dl div { display: flex; gap: .7rem; justify-content: space-between; font: 500 .95rem/1.35 var(--cuerpo); }
.wiz-resumen dt { color: var(--sec, var(--gris)); }
.wiz-resumen dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
[aria-invalid="true"] { outline: 2px solid #E5484D; outline-offset: 2px; }
/* pantalla de éxito */
.wiz-ok-in { text-align: center; display: grid; justify-items: center; gap: .7rem; padding: clamp(1.2rem, 4vw, 2.4rem) .5rem; }
.wiz-ok-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--negro); }
.wiz-ok-t { margin: .2rem 0 0; font: 400 clamp(1.6rem, 3.6vw, 2.3rem)/1.05 var(--display); outline: none; }
.wiz-ok .js-msg { margin: 0; max-width: 40ch; color: var(--sec, var(--gris)); }
.wiz-ok-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin: .2rem 0; font: 800 1.05rem/1.2 var(--cuerpo); overflow-wrap: anywhere; }
.wiz-ok-acc { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .4rem; }
.wiz-ok-acc .btn { min-height: 52px; }
@media (prefers-reduced-motion: no-preference) {
  .wiz-ok:not([hidden]) .wiz-ok-ico { animation: wiz-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
  @keyframes wiz-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 560px) {
  .wiz-pasos li b { display: none; }
  .wiz-pasos li[aria-current="step"] b { display: inline; }
  .wiz-pasos { grid-template-columns: auto auto auto auto; justify-content: start; gap: .5rem .9rem; }
  .red-fila { grid-template-columns: 1fr; }
  .wiz-nav .js-wiz-sig { min-width: 0; flex: 1; }
}

/* ── cinta "Creadores en la red" (home) ─────────────────────────────────────── */
.cinta-sec { padding-block: clamp(2rem, 6vw, 3.6rem); }
.cinta-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 1.2rem; }
.cinta-cab h2 { margin: .3rem 0 0; }
.cinta {
  list-style: none; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 1.4rem 0 0;
  padding: .2rem 0 1rem; scroll-padding-inline: 2px; -webkit-overflow-scrolling: touch;
}
.cinta li { flex: 0 0 clamp(12.5rem, 22vw, 15.5rem); scroll-snap-align: start; }
.cinta-c {
  display: block; position: relative; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--p-fg);
  background: var(--p-card); aspect-ratio: 3 / 4; isolation: isolate;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.cinta-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cinta-c::after { content: ''; position: absolute; inset: 40% 0 0; z-index: -1; background: linear-gradient(transparent, rgba(8, 8, 12, .82)); }
.cinta-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem 1rem; color: #fff; display: grid; gap: .25rem; }
.cinta-pie b { font: 400 1.25rem/1.05 var(--display); }
.cinta-pie i { font: 600 .82rem/1.3 var(--cuerpo); font-style: normal; opacity: .9; }
.cinta-rotulo { position: absolute; top: .7rem; left: .7rem; font: 800 .7rem/1 var(--cuerpo); letter-spacing: .03em; padding: .35rem .55rem; border-radius: 999px; background: #fff; color: #0C0C12; }
@media (hover: hover) { .cinta-c:hover { transform: translateY(-5px); } }

/* ── /marcas ─────────────────────────────────────────────────────────────────── */
.mk-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; }
@media (max-width: 900px) { .mk-hero-in { grid-template-columns: 1fr; } }
.mk-hero .hl { display: inline-block; }
.mk-hero { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.mk-mock { position: relative; min-height: clamp(30rem, 46vw, 41rem); margin-bottom: 2.4rem; }
.mk-mock .ej { position: absolute; width: 50%; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45); }
.mk-mock .ej .ej-minis, .mk-mock .ej .ej-botones, .mk-mock .ej .ej-frase, .mk-mock .ej .ej-pie, .mk-mock .ej .cred-parte { display: none; }
.mk-mock .ej:nth-child(1) { left: 0; top: 6%; transform: rotate(-4deg); z-index: 1; }
.mk-mock .ej:nth-child(2) { right: 0; top: 0; transform: rotate(3deg); z-index: 2; }
.mk-mock .ej:nth-child(3) { left: 25%; top: 22%; transform: rotate(-1deg); z-index: 3; }
.mk-mock-pie { position: absolute; left: 0; right: 0; bottom: -2.2rem; text-align: center; font: 600 .8rem/1.3 var(--cuerpo); color: var(--sec, var(--gris)); }
@media (max-width: 900px) {
  .mk-mock { min-height: 0; display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
  .mk-mock .ej { position: relative; inset: auto; transform: none !important; width: auto; flex: 0 0 72vw; max-width: 19rem; scroll-snap-align: start; box-shadow: none; }
  .mk-mock-pie { position: static; }
}
.mk-pasos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); margin: 1.6rem 0 0; padding: 0; counter-reset: mk; }
.mk-pasos li { counter-increment: mk; border-radius: var(--radio-c, 24px); background: var(--campo); padding: 1.3rem 1.3rem 1.4rem; border: 1px solid var(--suave); }
.mk-pasos li::before { content: counter(mk); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acento); color: var(--negro); font: 800 1.05rem/1 var(--cuerpo); margin-bottom: .8rem; }
.mk-pasos h3, .mk-ahorro h3 { margin: 0 0 .35rem; font: 400 1.3rem/1.1 var(--display); }
.mk-pasos p, .mk-ahorro p { margin: 0; color: var(--sec, var(--gris)); font: 500 .95rem/1.5 var(--cuerpo); }
.mk-ahorro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.2rem); margin-top: 1.6rem; }
.mk-ahorro > div { border-radius: var(--radio-c, 24px); padding: 1.3rem 1.3rem 1.4rem; background: var(--campo); border: 1px solid var(--suave); }
.mk-ahorro b.mk-num { display: block; font: 400 clamp(1.9rem, 4vw, 2.6rem)/1 var(--display); color: var(--fg, var(--tinta)); margin-bottom: .5rem; }
@media (max-width: 760px) { .mk-pasos, .mk-ahorro { grid-template-columns: 1fr; } }
.mk-confianza { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.4rem; align-items: start; border-radius: 28px; padding: clamp(1.2rem, 3.5vw, 2.2rem); background: var(--negro); color: var(--blanco); }
.mk-confianza svg { color: var(--acento); }
.mk-confianza h2 { margin: 0 0 .5rem; color: var(--blanco); }
.mk-confianza p { margin: .3rem 0 0; color: #C9C8C4; max-width: 60ch; }
@media (max-width: 560px) { .mk-confianza { grid-template-columns: 1fr; } }
.faq { display: grid; gap: .6rem; margin-top: 1.4rem; max-width: 52rem; }
.faq details { border-radius: 18px; background: var(--campo); border: 1px solid var(--suave); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.2rem; font: 700 1.02rem/1.35 var(--cuerpo); position: relative; min-height: 52px; display: flex; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font: 700 1.4rem/1 var(--cuerpo); color: var(--acento); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--sec, var(--gris)); font: 500 .98rem/1.55 var(--cuerpo); }
.mk-cta { border-radius: 28px; padding: clamp(1.4rem, 4vw, 2.6rem); background: var(--acento); color: var(--negro); display: grid; gap: .8rem; justify-items: start; }
.mk-cta h2 { margin: 0; color: var(--negro); }
.mk-cta p { margin: 0; max-width: 52ch; }
.mk-cta .btn { --btn-bg: var(--negro); --btn-fg: var(--blanco); --btn-bg-h: var(--blanco); --btn-fg-h: var(--negro); }

/* ── pedido de negocio en 2 pasos ────────────────────────────────────────────── */
.ped-pasos { display: flex; gap: .5rem; margin: 0 0 1rem; font: 700 .8rem/1 var(--cuerpo); color: var(--gris); }
.ped-pasos span { padding: .4rem .7rem; border-radius: 999px; border: 1.5px solid var(--suave); }
.ped-pasos span[aria-current="step"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.ped-on .ped-paso[hidden] { display: none !important; }
.ped:not(.ped-on) .ped-nav, .ped:not(.ped-on) .ped-pasos { display: none; }
.ped-nav { display: flex; gap: .6rem; justify-content: space-between; }
.ped-nav .btn { min-height: 52px; }
.ped-paso { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }

/* ── esqueleto de carga del catálogo y salto al contenido ───────────────────── */
.grid-creds[aria-busy="true"] > *, .js-grid[aria-busy="true"] > * { opacity: .45; transition: opacity .2s; }
.js-grid[aria-busy="true"] { cursor: progress; }
.saltar { position: absolute; left: -9999px; top: .5rem; z-index: 100; padding: .7rem 1rem; border-radius: 999px; background: var(--tinta); color: var(--papel); font: 700 .95rem/1 var(--cuerpo); text-decoration: none; }
.saltar:focus { left: .8rem; }
.orden-sel { min-height: 44px; border-radius: 999px; padding: 0 2.2rem 0 1rem; }
/* éxito del alta: el chip de copiar toma el color de texto de la banda (en claro la banda es tinta) */
.wiz-ok-link .chip { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 45%, transparent); min-height: 44px; display: inline-flex; align-items: center; }
.wiz-ok-link .chip:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); border-color: var(--fg); }
/* pedido en 2 pasos: los botones de un paso que no corresponde no se ven */
.ped-on [hidden] { display: none !important; }
.ped-nav .js-ped-sig { margin-left: auto; min-width: 10rem; }

/* ── guías y páginas de lectura ──────────────────────────────────────────────── */
@media (min-width: 761px) { .pie-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.guia { max-width: 760px; }
.gu-cab { margin-bottom: 1.6rem; }
.gu-cab h1 { margin: .5rem 0 .8rem; }
.gu-meta { margin: 0; color: var(--sec, var(--gris)); font: 500 .92rem/1.4 var(--cuerpo); }
.gu-resumen { margin: 1.1rem 0 0; padding: 1rem 1.2rem; border-radius: 18px; background: var(--campo); border: 1.5px solid var(--suave);
  font: 500 1.06rem/1.6 var(--cuerpo); color: var(--fg, var(--tinta)); }
:root { --acento-texto: #B8361A; } :root[data-tema="dark"] { --acento-texto: #DFFF3D; }
.gu-resumen b { color: var(--acento-texto); }
.gu-indice { margin: 0 0 2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--acento, var(--tinta)); }
.gu-indice p { margin: 0 0 .4rem; font: 700 .85rem/1.2 var(--cuerpo); text-transform: uppercase; letter-spacing: .06em; color: var(--sec, var(--gris)); }
.gu-indice ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.gu-indice a { color: var(--fg, var(--tinta)); text-underline-offset: 3px; }
.gu-cuerpo section { margin: 0 0 2rem; scroll-margin-top: 90px; }
.gu-cuerpo h2 { font: 700 clamp(1.35rem, 2.6vw, 1.75rem)/1.2 var(--display); margin: 0 0 .7rem; color: var(--fg, var(--tinta)); }
.gu-cuerpo p, .gu-cuerpo li { font: 400 1.06rem/1.7 var(--cuerpo); color: var(--fg, var(--tinta)); }
.gu-cuerpo ul, .gu-cuerpo ol { padding-left: 1.3rem; display: grid; gap: .35rem; }
.gu-cuerpo a { color: var(--fg, var(--tinta)); text-decoration-color: var(--acento, currentColor); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gu-faq details { border-top: 1.5px solid var(--suave); padding: .85rem 0; }
.gu-faq summary { cursor: pointer; font: 700 1.02rem/1.4 var(--cuerpo); min-height: 32px; }
.gu-faq details p { margin: .5rem 0 0; }
.gu-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 0; }
.gu-sec { margin: 2.2rem 0 0; }
.gu-sec > h2 { margin: 0 0 1rem; }
.gu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.gu-card { border: 1.5px solid var(--suave); border-radius: 22px; padding: 1.15rem 1.2rem; background: var(--campo); display: flex; flex-direction: column; gap: .45rem;
  transition: transform .2s ease, border-color .2s ease; }
.gu-card:hover { transform: translateY(-3px); border-color: var(--fg, var(--tinta)); }
.gu-card h3 { margin: 0; font: 700 1.15rem/1.25 var(--display); }
.gu-card h3 a { color: var(--fg, var(--tinta)); text-decoration: none; }
.gu-card h3 a::after { content: ''; position: absolute; inset: 0; }
.gu-card { position: relative; }
.gu-card p { margin: 0; color: var(--sec, var(--gris)); font: 400 .97rem/1.5 var(--cuerpo); }
.gu-card .gu-meta { margin-top: auto; font-size: .85rem; }
.gu-para { font: 700 .78rem/1.2 var(--cuerpo) !important; text-transform: uppercase; letter-spacing: .07em; color: var(--acento-texto) !important; }
.gu-rel { margin: 2.6rem 0 0; }
.gu-rel > h2 { margin: 0 0 1rem; }
.gu-hub { margin: 1.4rem 0; padding: 1rem 1.2rem; border-radius: 20px; border: 1.5px dashed var(--suave); display: grid; gap: .5rem; justify-items: start; }
.gu-hub p { margin: 0; }
/* kit para compartir en /mi */
.kit-fila { display: grid; gap: .45rem; margin: .9rem 0 0; }
.kit-fila label { font: 700 .92rem/1.3 var(--cuerpo); }
.kit-fila textarea, .kit-fila input { width: 100%; font: 500 .9rem/1.45 ui-monospace, Menlo, Consolas, monospace; border-radius: 14px; padding: .7rem .8rem; min-height: 44px; }
.kit-fila textarea { min-height: 96px; resize: vertical; }
.kit-acc { display: flex; flex-wrap: wrap; gap: .6rem; }
.kit-badge-prev { margin: .3rem 0 0; }
@media (prefers-reduced-motion: reduce) { .gu-card { transition: none; } .gu-card:hover { transform: none; } }

/* ── videos de marca (OpenMontage) ───────────────────────────────────────── */
.vid { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); }
.vid video { display: block; width: 100%; height: auto; border-radius: 24px; background: var(--negro); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .55); }
.vid figcaption { margin-top: .6rem; font: 500 .85rem/1.4 var(--cuerpo); color: var(--sec, var(--gris)); }
.vid-loop video { aspect-ratio: 16 / 9; }
.vid-vertical { max-width: 360px; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.vid-vertical video { aspect-ratio: 9 / 16; }
.vid-loop { max-width: 980px; margin-inline: auto; }

/* ── invitación personal (/i/<codigo>) ────────────────────────────────────── */
.inv-hero { padding-block: clamp(2.2rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); overflow: hidden; }
.inv-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.inv-txt h1 { margin: .9rem 0 1rem; }
.inv-dir { margin: 1.6rem 0 1.4rem; padding: 1.1rem 1.2rem 1rem; border-radius: 22px; background: var(--campo); border: 1.5px solid color-mix(in srgb, var(--tinta) 18%, transparent); }
.inv-dir-etq { margin: 0 0 .55rem; font: 700 .78rem/1 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--sec, var(--gris)); }
.inv-dir-pill { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; font: 700 clamp(1.25rem, 3.2vw, 1.75rem)/1.2 var(--display); word-break: break-all; }
.inv-dir-nombre { color: var(--acento, var(--sol)); background: color-mix(in srgb, var(--acento, var(--sol)) 14%, transparent); padding: .05em .3em; border-radius: 10px; }
.inv-dir-dom { color: var(--tinta); padding-left: .1em; }
.inv-dir-nota { margin: .6rem 0 0; font: 500 .9rem/1.4 var(--cuerpo); color: var(--sec, var(--gris)); }
.inv-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.inv-vid { margin: 0; justify-self: center; width: min(100%, 420px); }
.inv-vid video { aspect-ratio: 4 / 5; }
.inv-benef { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); }
.inv-benef li { padding: 1.3rem 1.2rem 1.2rem; border-radius: 24px; background: var(--campo); border: 1.5px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.inv-benef-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--acento, var(--sol)); color: var(--negro); font: 700 1.1rem/1 var(--display); }
.inv-benef h3 { margin: .9rem 0 .35rem; font: 700 1.2rem/1.2 var(--display); }
.inv-benef p { margin: 0; font: 500 .95rem/1.45 var(--cuerpo); color: var(--sec, var(--gris)); }
@media (max-width: 900px) {
  .inv-hero-in { grid-template-columns: 1fr; }
  .inv-vid { width: min(100%, 360px); }
  .inv-benef { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .inv-benef { grid-template-columns: 1fr; }
  .inv-ctas .btn { flex: 1 1 100%; }
}

/* ── crecimiento (06-oct): sobre mí, datos, tarifa, identidad, pie "creá el tuyo" ── */
.perfil-sub { margin: 0 0 .7rem; font: 700 1.35rem/1.15 var(--display); color: var(--p-title, var(--tinta)); }
.perfil-texto { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start;
  margin-top: clamp(1.8rem, 4vw, 2.8rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 2px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 14%, transparent); }
.perfil-texto > :only-child { grid-column: 1 / -1; }
.perfil-sobre p { margin: 0 0 .9rem; font: 500 1.05rem/1.65 var(--cuerpo); color: var(--p-fg, var(--tinta)); max-width: 68ch; overflow-wrap: anywhere; }
.perfil-datos { padding: 1.1rem 1.2rem 1.15rem; border-radius: var(--radio-c, 24px); background: var(--p-card, var(--campo)); border: 1.5px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 12%, transparent); }
.perfil-datos p { margin: 0; font: 500 .96rem/1.6 var(--cuerpo); color: var(--p-fg, var(--tinta)); }
.perfil-tarifa { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: .9rem 0 0; padding: .55rem 1rem .6rem; border-radius: 999px;
  border: 2px solid var(--p-acc, var(--acento)); }
.perfil-tarifa b { font: 700 1.25rem/1.1 var(--display); color: var(--p-title, var(--tinta)); }
.perfil-tarifa span { font: 600 .8rem/1.3 var(--cuerpo); color: var(--p-sec, var(--gris)); }
.perfil-identidad { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .75rem; border-radius: 999px; font: 700 .8rem/1 var(--cuerpo);
  background: var(--p-acc, var(--acento)); color: var(--negro); white-space: nowrap; }
.perfil-vcf-nota { margin: .55rem 0 0; font: 500 .82rem/1.4 var(--cuerpo); color: var(--p-sec, var(--gris)); }
.perfil-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; margin-top: 1.6rem; }
.perfil-pie .perfil-parte { margin: 0; }
.perfil-crear { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; text-decoration: none;
  font: 600 .88rem/1.2 var(--cuerpo); color: var(--p-fg, var(--tinta)); border: 1.5px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 22%, transparent); }
.perfil-crear b { font-weight: 800; text-decoration: underline; text-decoration-color: var(--p-acc, var(--acento)); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.perfil-crear:hover { border-color: var(--p-acc, var(--acento)); }
@media (max-width: 880px) { .perfil-texto { grid-template-columns: 1fr; } }

/* ── botón de Google (alta y cuenta) ──────────────────────────────────────── */
.g-caja { display: grid; gap: .5rem; margin: 0 0 1.2rem; padding: 0 0 1.1rem; border-bottom: 2px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.g-caja small { color: inherit; opacity: .82; font: 500 .86rem/1.4 var(--cuerpo); }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 48px; padding: .75rem 1.3rem; border-radius: 999px;
  background: #fff; color: #1F1F1F; border: 2px solid var(--tinta); font: 700 1rem/1 var(--cuerpo); text-decoration: none; }
.btn-google:hover { background: #F2F2F2; }
.btn-google:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.btn-google .g-ico { flex: 0 0 auto; }
.g-conectado { margin: 0; padding: .7rem .9rem; border-radius: 14px; font: 700 .92rem/1.4 var(--cuerpo); color: var(--negro);
  background: var(--acento); overflow-wrap: anywhere; }

/* ── páginas cortas (correo confirmado, clave nueva) ───────────────────────── */
.aviso-pagina { max-width: 40rem; }
.clave-caja { max-width: 30rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.clave-caja .form { display: grid; gap: 1rem; }

/* ── modo evento (/t/<slug>/qr): siempre oscuro, el QR lo más grande posible ── */
.ev-body { margin: 0; min-height: 100svh; background: #0C0C12; color: #FBFAF7; }
.ev { min-height: 100svh; display: grid; align-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.ev-aviso { margin: 0 auto 1rem; max-width: 52rem; padding: .7rem 1rem; border-radius: 14px; background: #DFFF3D; color: #0C0C12; font: 700 .92rem/1.35 var(--cuerpo); text-align: center; }
.ev-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 72rem; margin: 0 auto; width: 100%; }
.ev-qr { background: #fff; border-radius: 28px; padding: clamp(10px, 2vw, 18px); width: min(78vh, 46vw); max-width: 560px; aspect-ratio: 1; line-height: 0; }
.ev-qr svg { width: 100%; height: 100%; display: block; }
.ev-logo { display: block; }
.ev-logo-svg { height: clamp(34px, 5vw, 48px); width: auto; --lw: #FBFAF7; }
.ev-logo-svg .w, .ev-logo-svg .b { fill: #FBFAF7; }
.ev-logo-svg .a { fill: #DFFF3D; }
.ev-cta { display: inline-block; margin: 1.4rem 0 .9rem; padding: .55rem 1rem; border-radius: 999px; background: #DFFF3D; color: #0C0C12; font: 800 clamp(.95rem, 1.8vw, 1.15rem)/1.1 var(--cuerpo); }
.ev-nombre { margin: 0; font: 700 clamp(2.4rem, 7vw, 5.2rem)/1 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ev-oficio { margin: .7rem 0 0; font: 600 clamp(1.05rem, 2.2vw, 1.4rem)/1.3 var(--cuerpo); color: #CBCAC9; }
.ev-url { margin: 1rem 0 0; font: 700 clamp(1rem, 2.2vw, 1.35rem)/1.2 var(--display); color: #DFFF3D; overflow-wrap: anywhere; }
.ev-acc { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.ev-acc .btn-sello { --btn-bg: #DFFF3D; --btn-fg: #0C0C12; --btn-bg-h: #FBFAF7; --btn-fg-h: #0C0C12; }
.ev-acc .btn-linea { color: #FBFAF7; border: 2px solid #FBFAF7; padding: .8rem 1.3rem; text-decoration: none; min-height: 48px; }
.ev-acc .btn-linea:hover { color: #0C0C12; background: #FBFAF7; border-color: #FBFAF7; }
.ev-nota { margin: 1.2rem 0 0; font: 500 .9rem/1.4 var(--cuerpo); color: #A0A0AA; max-width: 40ch; }
@media (max-width: 760px) {
  .ev-in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ev-qr { width: min(86vw, 52vh); }
  .ev-acc { justify-content: center; }
  .ev-nota { margin-inline: auto; }
}