/* ─────────────────────────────────────────────────────────────────────────────
   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; min-height: 44px; }
.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; }
.ej-bloque-fin { margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: clamp(1.5rem, 4vw, 2.5rem) 0 0; border-bottom: 0; border-top: 2px solid var(--suave, currentColor); }
.hero-precio { margin-top: 1rem; max-width: 42ch; font-size: .95rem; opacity: .85; }
.hero-wa { margin-top: .5rem; }
.hero-wa a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.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: none; white-space: nowrap; 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: 0 1rem; margin-top: .6rem; }
.perfil-compartir .btn-linea { padding-inline: 0; }

/* ── 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(5, 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)); text-align: left; padding-left: 1.3rem; display: grid; gap: .35rem; }
.wiz-ok-guarda { display: grid; justify-items: center; gap: .15rem; margin: .2rem 0; }
.wiz-ok-guarda[hidden] { display: none; }
.wiz-ok-lbl { margin: 0; font: 700 .85rem/1.2 var(--cuerpo); text-transform: uppercase; letter-spacing: .06em; color: var(--sec, var(--gris)); }
.wiz-ok-nota { margin: 0; font: 500 .9rem/1.35 var(--cuerpo); color: var(--sec, var(--gris)); max-width: 40ch; }
.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 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 :focus-visible { outline-color: var(--negro); }
.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. El formulario mismo (.ped-on) también: con
   `.form { display: grid }` el atributo hidden no lo ocultaba y la pantalla de gracias quedaba debajo, fuera de vista. */
.ped-on[hidden], .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; }
/* la portada trae dos versiones del loop (ver index.html): 16:9 en pantallas anchas, 4:5 en el celular; la otra no se muestra ni se baja */
.vid-loop .vid-movil { display: none; }
@media (max-width: 760px) {
  .vid-loop .vid-pc { display: none; }
  .vid-loop .vid-movil { display: block; aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto; }
}
.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; }
/* perfil prearmado: "Así se vería tu perfil" con la credencial del catálogo */
.inv-previa { margin: 0; justify-self: center; width: min(100%, 380px); display: grid; gap: .8rem; }
.inv-previa-cab { display: grid; gap: .25rem; }
.inv-previa-t { font: 700 .78rem/1 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--acento, var(--sol)); }
.inv-previa-sub { font: 500 .9rem/1.4 var(--cuerpo); color: var(--sec, var(--gris)); }
.inv-previa .cred { box-shadow: 0 18px 50px -24px color-mix(in srgb, var(--tinta) 45%, transparent); }
.inv-previa .cred:hover { transform: none; }
.inv-previa .cred-cuerpo { padding-bottom: 1.15rem; }
.inv-previa-link { margin: 0; font: 500 .9rem/1.4 var(--cuerpo); color: var(--sec, var(--gris)); word-break: break-all; }
.inv-previa-link b { color: var(--tinta); font-weight: 700; }
.inv-previa-fuente { margin: -.4rem 0 0; font: 500 .78rem/1.4 var(--cuerpo); color: var(--sec, var(--gris)); }
.metricas-publico { border-style: dashed; color: var(--p-fg, var(--tinta)); white-space: normal; line-height: 1.25; }
.metricas-conexion { color: var(--p-fg, var(--tinta)); border-color: var(--p-acc, var(--acento)); margin-top: .35rem; }
.metricas-conexion svg { color: var(--p-acc, var(--acento)); width: 14px; height: 14px; }
.wiz-pre-nota { margin: -.2rem 0 .4rem; padding: .7rem .9rem; border-radius: 14px; font: 500 .9rem/1.4 var(--cuerpo); background: color-mix(in srgb, var(--acento, var(--sol)) 16%, transparent); color: inherit; border: 1px solid color-mix(in srgb, var(--acento, var(--sol)) 45%, transparent); }
.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-previa { width: min(100%, 380px); }
  .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)); }
/* Vitrina: servicios, marcas, trayectoria y video que carga la persona (lib/vitrina.js) */
.vitrina { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.vit-bloque { 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); color: var(--p-fg, var(--tinta)); }
.vit-servicios, .vit-logros, .vit-marcas { list-style: none; margin: 0; padding: 0; }
.vit-servicios li { padding: .7rem 0; border-top: 1px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 12%, transparent); }
.vit-servicios li:first-child { border-top: 0; padding-top: 0; }
.vit-serv-cab { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font: 600 1rem/1.35 var(--cuerpo); }
/* el precio va en el color de texto del tema, no en el acento de la persona: "Bs 1.000" en naranja sobre blanco daba 3,1:1 */
.vit-precio { font: 700 1rem/1.2 var(--display); white-space: nowrap; color: var(--p-fg, var(--tinta)); }
.vit-servicios p { margin: .25rem 0 0; font: 500 .9rem/1.5 var(--cuerpo); color: var(--p-sec, var(--gris)); }
.vit-nota { margin: .6rem 0 0; font: 500 .8rem/1.4 var(--cuerpo); color: var(--p-sec, var(--gris)); }
.vit-marcas { display: flex; flex-wrap: wrap; gap: .45rem; }
.vit-marcas li { padding: .38rem .8rem; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 22%, transparent); font: 600 .88rem/1.2 var(--cuerpo); }
.vit-logros li { position: relative; padding: .45rem 0 .45rem 1.1rem; font: 500 .96rem/1.5 var(--cuerpo); }
.vit-logros li::before { content: ""; position: absolute; left: 0; top: 1rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--p-acc, var(--tinta)); }
.vit-extra { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }
.vit-extra p { margin: 0; font: 500 .96rem/1.5 var(--cuerpo); }
/* Perfil como "link en la bio": redes clicables, contacto elegido por la persona y links propios */
.perfil-redes { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.perfil-red { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .5rem 1rem; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 22%, transparent); color: var(--p-fg, var(--tinta));
  text-decoration: none; font: 500 .95rem/1.2 var(--cuerpo); background: var(--p-card, transparent); }
a.perfil-red:hover, a.perfil-red:focus-visible { border-color: var(--p-acc, var(--tinta)); }
.perfil-red b { font-weight: 700; }
.perfil-red i { font-style: normal; font-weight: 700; padding-left: .55rem; border-left: 1.5px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 20%, transparent); }
.perfil-red svg { flex: 0 0 auto; }
.perfil-contacto { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.perfil-cto { min-height: 48px; }
.vit-links { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; max-width: 34rem; }
.vit-link { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .7rem 1.1rem; border-radius: 16px; text-align: center;
  background: var(--p-card, var(--campo)); color: var(--p-fg, var(--tinta)); text-decoration: none; font: 700 1rem/1.25 var(--cuerpo);
  border: 1.5px solid color-mix(in srgb, var(--p-fg, var(--tinta)) 18%, transparent); overflow-wrap: anywhere; }
.vit-link:hover, .vit-link:focus-visible { border-color: var(--p-acc, var(--tinta)); }
.vit-idiomas { margin: .8rem 0 0; font: 500 .96rem/1.5 var(--cuerpo); }
/* la barra fija es solo del celular (ib.css la oculta en pantallas anchas): fuera de este media query se mostraba también en la computadora */
@media (max-width: 760px) { .barra-cta.visible { display: flex; gap: .55rem; } }
.barra-cta .btn { flex: 1 1 auto; width: auto; min-height: 48px; }
/* la barra es oscura en los dos temas: el botón de compartir va claro */
.barra-cta .barra-compartir, [data-tema="dark"] .barra-cta .barra-compartir { flex: 0 0 auto; color: #fff; background: transparent; border-color: rgba(255,255,255,.65); text-decoration: none; padding-inline: 1.1rem; }
@media (max-width: 760px) {
  .perfil-contacto .perfil-cto { flex: 1 1 100%; justify-content: center; }
  .perfil-redes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad, 16px) * -1); padding-inline: var(--pad, 16px); scroll-snap-type: x proximity; }
  .perfil-redes::-webkit-scrollbar { display: none; }
  .perfil-redes li { flex: 0 0 auto; scroll-snap-align: start; }
  .vit-links { max-width: none; }
  .vitrina { grid-template-columns: 1fr; }
}
.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; }
}

/* ── managers: línea "Representado por" y perfil del manager ─────────────── */
.perfil-manager { margin: .7rem 0 0; font: 600 .98rem/1.4 var(--cuerpo); color: var(--p-sec, var(--gris)); }
.perfil-manager a { color: var(--p-fg, var(--tinta)); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--p-acc, var(--acento)); }
.mgr-quien { margin: .35rem 0 0; font: 600 1rem/1.3 var(--cuerpo); color: var(--p-sec, var(--gris)); }
.mgr-plantel { padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 40px) 8px; }
.mgr-plantel .grid-creds { margin-top: 18px; }
.mgr-armado { max-width: 62ch; }
.mgr-armado .bajada { margin-top: 10px; }

/* ── Areas tactiles de 44 px (accesibilidad) ──────────────────────────────────
   Solo suben el area clicable: migas, nombre de tarjeta, "Saltar al contenido" y
   logo. En las listas de guias y hubs (.mapa) se sube a 44 px en celular. El ritmo
   visual de migas y nombres se conserva con margen negativo del mismo tamaño. */
.saltar { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; padding-inline: 1.1rem; }
.marca { min-height: 44px; }
.migas a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
/* El nombre queda en línea (si es largo se parte y el tilde sigue al final sin
   pisar el oficio); el área táctil de 44 px la da un pseudo-elemento invisible. */
.cred-nombre a { position: relative; }
.cred-nombre a::before { content: ""; position: absolute; inset: -12px -4px; }
@media (max-width: 760px), (pointer: coarse) {
  .mapa ul { gap: 0; }
  .mapa a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* "Se están sumando": perfiles sin foto, aparte del catálogo y sin casilla de pedido */
.sumandose { margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.4rem; border-top: 2px solid color-mix(in srgb, var(--tinta) 14%, transparent); }
.sumandose-t { margin: 0 0 .3rem; font: 600 1.35rem/1.15 var(--display); }
.sumandose-p { margin: 0 0 1rem; max-width: 52ch; color: var(--sec, var(--gris)); }
.sumandose-lista { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.sumandose-lista > .cred-compacta { margin: 0; display: flex; flex-direction: row; align-items: center; gap: 1rem; padding: .8rem 1rem; border-top-width: 1px; border-radius: 18px; }
.cred-compacta .cred-oficio { -webkit-line-clamp: 2; line-clamp: 2; }
.cred-compacta .cred-ciudad { font-weight: 700; color: var(--tinta); }


/* ═════════════════════════════════════════════════════════════════════════════
   INSIGNIA DE FUNDADOR (2026-10-07)
   Un sello con el número de los primeros perfiles aprobados. Se dibuja en
   public/js/ib-credencial.js (insignia / selloGrande) y solo existe si el
   servidor mandó un número real. Tinta fija + el acento de la marca (coral en
   claro, lima en oscuro): sin amarillo ni cobalto, y se lee igual sobre cualquier
   tema de perfil porque lleva su propio fondo.
   ═════════════════════════════════════════════════════════════════════════════ */
.fundador {
  --f-tinta: #0C0C12; --f-papel: #FBFAF7;
  position: relative; display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle;
  background: var(--f-tinta); color: var(--f-papel); border: 1.5px solid var(--acento); border-radius: 999px;
  padding: .2rem .85rem .2rem .22rem; line-height: 1; max-width: 100%;
}
.fundador-sello { flex: 0 0 auto; width: 30px; height: 30px; display: block; }
.fundador .f-cuerpo { fill: var(--acento); }
.fundador .f-destello { fill: var(--f-tinta); }
.fundador-txt { display: grid; gap: .16rem; text-align: left; white-space: nowrap; }
.fundador-txt small { font: 700 .62rem/1 var(--cuerpo); letter-spacing: .09em; text-transform: uppercase; color: #CBCAC9; }
.fundador-txt b { font: 400 1.02rem/1 var(--display); letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; color: var(--f-papel); }
.fundador-s { padding: .14rem .65rem .14rem .16rem; gap: .4rem; }
.fundador-s .fundador-sello { width: 22px; height: 22px; }
.fundador-s .fundador-txt b { font-size: .88rem; }
.fundador-s .fundador-txt small { font-size: .55rem; }
.fundador-l { padding: .28rem 1.05rem .28rem .28rem; gap: .6rem; }
.fundador-l .fundador-sello { width: 38px; height: 38px; }
.fundador-l .fundador-txt b { font-size: 1.28rem; }
.fundador-l .fundador-txt small { font-size: .66rem; }
.fundador:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
/* en la tarjeta del catálogo va sobre la esquina de la foto */
.cred-marco { position: relative; }
.cred-marco > .fundador { position: absolute; left: .7rem; bottom: .7rem; z-index: 2; pointer-events: none; }
.cred-cuerpo > .fundador { align-self: flex-start; margin: .15rem 0 .2rem; }
.perfil-cab .fundador { margin-right: .15rem; }

/* ── sello del equipo: medalla "Fundadora" / "Fundador" (ib-credencial.js, selloEquipo) ──
   Quien fundó y administra Influencer Bolivia. NO es el sello numerado de arriba: es un chip
   con la estrella de cuatro puntas del logo. Lleva su propio fondo (tinta fija) y texto papel,
   así que se lee igual en tema claro y oscuro y sobre cualquier tema de perfil. El borde y la
   estrella usan --acento: lima #DFFF3D en oscuro, coral en claro. Sin desborde a 390 px:
   no se parte (nowrap) y salta de línea entero junto al nombre. */
.sello-equipo {
  --se-tinta: #0C0C12; --se-papel: #FBFAF7;
  display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle; flex: 0 0 auto;
  box-sizing: border-box; max-width: 100%;
  background: var(--se-tinta); color: var(--se-papel); border: 1.5px solid var(--acento); border-radius: 999px;
  padding: .3rem .8rem .3rem .6rem; font: 700 .82rem/1 var(--cuerpo); letter-spacing: .01em; white-space: nowrap;
}
.sello-equipo-ico { width: .95em; height: .95em; flex: 0 0 auto; display: block; fill: var(--acento); }
.sello-equipo-txt { display: block; }
.sello-equipo-l { font-size: .9rem; padding: .36rem .95rem .36rem .7rem; }
.sello-equipo-l .sello-equipo-ico { width: 1.05em; height: 1.05em; }
.sello-equipo-m { font-size: .78rem; padding: .22rem .65rem .22rem .5rem; gap: .32rem; }
.cred-nombre .sello-equipo { margin-left: .45rem; vertical-align: .18em; }
.cred-cuerpo > .sello-equipo { align-self: flex-start; margin: .15rem 0 .2rem; }
.perfil-cab .sello-equipo { margin-right: .15rem; }
/* El sello numerado de fundador queda a la derecha del nombre y su globito (ancho hasta 270 px, oculto pero con layout)
   se salía de la pantalla en el celular y abría un scroll horizontal (461 y 488 px contra 390 en perfiles con nombre
   largo, varios oficios o chip del equipo). En la cabecera del perfil el globito se ancla siempre a la cabecera entera
   (no al sello) y arranca en el borde izquierdo del nombre. El destello de una sola vez del sello se apaga ahí porque
   se pintaría sobre toda la cabecera (en las tarjetas del catálogo sigue). */
.perfil-cab { position: relative; }
.perfil-cab .fundador { position: static; }
.perfil-cab .fundador::after { content: none; }
@media (forced-colors: active) {
  .sello-equipo { border-color: CanvasText; }
  .sello-equipo-ico { fill: CanvasText; }
}
/* globito con el texto completo (perfil y /mi; en celular se abre al tocar y enfocar) */
.fundador-tip {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 20; width: max-content; max-width: min(270px, 78vw);
  background: var(--f-papel); color: var(--f-tinta); border: 1.5px solid var(--f-tinta); border-radius: 14px;
  padding: .6rem .8rem; font: 600 .82rem/1.4 var(--cuerpo); letter-spacing: 0; text-transform: none; white-space: normal;
  opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none; transition: opacity .16s, transform .16s, visibility .16s;
}
.fundador:hover .fundador-tip, .fundador:focus .fundador-tip, .fundador:focus-within .fundador-tip { opacity: 1; transform: none; visibility: visible; }

/* el sello grande, con el número adentro */
.fundador-grande { position: relative; display: inline-block; width: var(--f-ancho, 168px); aspect-ratio: 1; border-radius: 50%; flex: 0 0 auto; }
.fundador-grande svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fundador-grande .f-cuerpo { fill: var(--acento); }
.fundador-grande .f-disco { fill: #0C0C12; }
.fundador-grande .f-aro { fill: none; stroke: var(--acento); stroke-width: 1.6; opacity: .6; }
.fundador-grande .f-rotulo { font: 700 13px var(--cuerpo); letter-spacing: .3em; fill: #FBFAF7; }
.fundador-grande .f-numero { font: 400 66px var(--display); fill: var(--acento); font-variant-numeric: lining-nums tabular-nums; }
.fundador-grande .f-destello-g { fill: #FBFAF7; }

/* brillo suave al aparecer, una sola vez; con "reducir movimiento" no hay nada */
@media (prefers-reduced-motion: no-preference) {
  .fundador::after, .fundador-grande::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%) 230% 0 / 260% 100% no-repeat;
    animation: f-brillo 1.4s cubic-bezier(.3, .6, .3, 1) .7s 1 both;
  }
  @keyframes f-brillo { from { background-position: 230% 0; } to { background-position: -130% 0; } }
  .fundador-grande { animation: f-llega .7s cubic-bezier(.2, 1.3, .4, 1) both; }
  @keyframes f-llega { from { transform: scale(.82) rotate(-7deg); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ═════════════════════════════════════════════════════════════════════════════
   ALTA MÁS PRO (2026-10-07): vista previa en vivo, barra de avance, errores junto
   al campo, botones grandes en celular y pantalla de éxito. Se apoya en lo que
   ya existía (.wiz-*): solo lo mejora, no lo reemplaza.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── la grilla: texto + vista previa a un lado, formulario al otro, "cómo sigue" abajo ── */
.postular-in > .postular-lado { grid-column: 1 / span 5; align-self: stretch; }
.postular-in > .postular-sigue { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, var(--fg, var(--tinta)) 22%, transparent); padding-top: clamp(1.6rem, 4vw, 2.6rem); }
.postular-sigue > .campo { margin: 0 0 1.2rem; }
.postular-sigue .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 1.6rem; margin: 0; }
.postular-sigue .pasos li { grid-template-columns: 1fr; gap: .5rem; }
.postular-sigue .pasos li::before { font-size: 2.2rem; }
@media (max-width: 1000px) {
  .postular-in > .postular-lado, .postular-in > form, .postular-in > .postular-sigue { grid-column: 1 / -1; }
  .postular-sigue .pasos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .postular-sigue .pasos { grid-template-columns: 1fr; }
  .postular-sigue .pasos li { grid-template-columns: 3.2rem 1fr; gap: 1rem; }
  .postular-sigue .pasos li::before { font-size: inherit; }
}

/* ── vista previa en vivo ───────────────────────────────────────────────────── */
.wiz-prev { margin-top: clamp(1.4rem, 3vw, 2.2rem); max-width: 360px; position: sticky; top: 92px; }
.wiz-prev[hidden] { display: none; }
.wiz-prev-sum { display: none; }
.wiz-prev-etq { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font: 700 .8rem/1 var(--cuerpo); letter-spacing: .06em; text-transform: uppercase; color: var(--sec, var(--gris)); }
.wiz-prev-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--acento); flex: 0 0 auto; }
.wiz-prev-card .cred { pointer-events: none; }
.wiz-prev-card .cred-cuerpo { padding-bottom: 1.15rem; }
.wiz-prev-card .cred:hover { transform: none; }
.wiz-prev-card .cred:hover .cred-marco img { transform: none; }
.previa-sin-nombre .cred-nombre, .previa-vacio { opacity: .5; }
.wiz-prev-url { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; margin: .9rem 0 0; font: 500 .9rem/1.3 var(--cuerpo); color: var(--sec, var(--gris)); }
.wiz-prev-url b { font-weight: 800; color: var(--fg, var(--tinta)); overflow-wrap: anywhere; }
.wiz-prev-nota { margin: .6rem 0 0; font: 500 .85rem/1.45 var(--cuerpo); color: var(--sec, var(--gris)); max-width: 34ch; }
@media (prefers-reduced-motion: no-preference) {
  .wiz-prev-punto { animation: previa-punto 2.2s ease-in-out infinite; }
  @keyframes previa-punto { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
  .previa-late { animation: previa-late .4s cubic-bezier(.3, 1.4, .5, 1); }
  @keyframes previa-late { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }
}
/* celular: una tarjeta que se abre y se cierra arriba del formulario */
@media (max-width: 1000px) {
  .wiz-prev { position: static; max-width: none; margin-top: 1.4rem; border: 1.5px solid color-mix(in srgb, var(--fg, var(--tinta)) 30%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--fg, var(--tinta)) 5%, transparent); }
  .wiz-prev-sum { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; cursor: pointer; list-style: none; min-height: 64px; border-radius: 20px; }
  .wiz-prev-sum::-webkit-details-marker { display: none; }
  .wiz-prev-sum:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
  .wiz-prev-mini { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--negro); }
  .wiz-prev-mini b { font: 400 1.3rem/1 var(--display); }
  .wiz-prev-sumtxt { display: grid; gap: .2rem; min-width: 0; flex: 1; }
  .wiz-prev-sumtxt b { font: 700 1rem/1.2 var(--cuerpo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wiz-prev-sumtxt small { font: 500 .85rem/1.2 var(--cuerpo); color: var(--sec, var(--gris)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wiz-prev-ver { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; font: 700 .85rem/1 var(--cuerpo); color: var(--fg, var(--tinta)); }
  .wiz-prev-ver::after { content: ''; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
  .wiz-prev[open] .wiz-prev-ver::after { transform: rotate(-135deg) translateY(-2px); }
  .wiz-prev-cuerpo { padding: .2rem .9rem 1.1rem; }
  .wiz-prev-card { max-width: 340px; }
}

/* ── barra de pasos: círculos unidos por una línea que se va llenando ───────── */
.wiz-cab { position: relative; margin-bottom: .7rem; }
.wiz-pasos { position: relative; z-index: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; justify-content: stretch; }
.wiz-pasos li { flex-direction: column; align-items: center; text-align: center; gap: .5rem; font-size: .76rem; padding: 0 .1rem; }
.wiz-pasos li span {
  width: 36px; height: 36px; font: 800 .95rem/1 var(--cuerpo); background: var(--bg, var(--papel));
  border-color: color-mix(in srgb, var(--fg, var(--tinta)) 34%, transparent); color: color-mix(in srgb, var(--fg, var(--tinta)) 72%, transparent);
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.wiz-pasos li b { display: block; max-width: 100%; font-weight: 700; }
.wiz-pasos li[aria-current="step"] span { box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 40%, transparent); transform: scale(1.06); }
.wiz-pasos li.hecho span { background: var(--acento); border-color: var(--acento); color: var(--negro); }
.wiz-pasos li.hecho span svg { display: block; }
.wiz-barra { position: absolute; top: 16px; left: 10%; right: 10%; height: 4px; z-index: 0; border-radius: 999px; background: color-mix(in srgb, var(--fg, var(--tinta)) 20%, transparent); }
.wiz-barra span { background: var(--acento); transition: width .55s cubic-bezier(.2, .8, .2, 1); }
.wiz-cuenta { margin: .2rem 0 .1rem; }

/* ── pasos: entran desde el lado al que vas ─────────────────────────────────── */
.wiz-entra-atras { animation: wiz-entra-atras .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wiz-entra-atras { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wiz-entra, .wiz-entra-atras { animation: none; } }

/* ── campos: foco claro y error junto al campo ──────────────────────────────── */
.wiz input:not([type="checkbox"]):focus-visible, .wiz select:focus-visible, .wiz textarea:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-color: var(--acento); }
.wiz .chip-check input:focus-visible + span, .wiz .check-largo input:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.wiz .reserva-fila:focus-within { outline: 3px solid var(--acento); outline-offset: 3px; }
.form .wiz-error { display: flex; align-items: flex-start; gap: .45rem; margin-top: .45rem; font: 600 .92rem/1.35 var(--cuerpo); color: #FFA79A; }
.form .wiz-error::before { content: "!"; flex: 0 0 auto; width: 18px; height: 18px; margin-top: .05rem; border-radius: 50%; background: #FFA79A; color: #0C0C12; font: 800 .75rem/18px var(--cuerpo); text-align: center; }
/* el error de una casilla larga se mete dentro de su etiqueta (grid de dos columnas): sin esto caía en la columna angosta de
   84 px, el texto legal quedaba en una tira y el mensaje fuera de pantalla. Ahora ocupa todo el ancho y va ARRIBA de la
   casilla: el navegador lleva la casilla a la vista y el aviso queda pegado a ella, no al final del texto legal */
.check-largo > .wiz-error { grid-column: 1 / -1; order: -1; margin: 0 0 .1rem; }
.form .wiz-error a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: .5rem .2rem; margin: -.5rem -.2rem; }
/* los links dentro de las casillas (privacidad, términos) con un poco de aire para tocarlos sin tildar la casilla por error */
.check-largo a { padding: .5rem .2rem; margin: -.5rem -.2rem; }
/* un error del servidor sale por encima de la barra fija de botones, no debajo */
.js-estado { scroll-margin-bottom: 120px; }
/* En las páginas del formulario de registro, lo que se enfoca o se lleva a la vista queda entre el encabezado fijo (arriba) y la barra
   de botones (abajo). Acotado a ellas porque otras páginas ya traen su propio scroll-margin y se sumarían. */
html:has(.wiz) { scroll-padding-top: 80px; scroll-padding-bottom: 110px; }
.wiz [aria-invalid="true"] { outline: 2px solid #FFA79A; outline-offset: 2px; }
.wiz-estado-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap; }

/* ── botones: grandes, y pegados abajo en celular ───────────────────────────── */
.wiz-nav .btn { min-height: 54px; }
.wiz-nav .js-wiz-enviar { margin-left: auto; text-wrap: balance; }
/* "Falta confirmar tu correo": una línea chica bajo el botón de crear el perfil mientras está apagado */
.wiz-nav { flex-wrap: wrap; }
.wiz-falta { flex: 0 0 100%; margin: 0; text-align: right; font: 600 .82rem/1.2 var(--cuerpo); color: var(--sec, var(--gris)); }
@media (max-width: 1000px) {
  .wiz-nav { position: sticky; bottom: 0; z-index: 6; background: var(--bg, var(--papel)); margin: .3rem -.1rem 0; padding: .8rem .1rem calc(.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid color-mix(in srgb, var(--fg, var(--tinta)) 18%, transparent); }
  .wiz-nav .btn { min-height: 58px; font-size: 1.05rem; }
  .wiz-nav .js-wiz-enviar { flex: 1; }
}
@media (max-width: 560px) {
  .wiz-pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: stretch; gap: 0; }
  .wiz-pasos li b { display: block; }
  .wiz-pasos li { font-size: .72rem; }
}

/* ── pantalla de éxito ──────────────────────────────────────────────────────── */
.wiz-ok { scroll-margin-top: 12px; }   /* + los 80 px de scroll-padding-top de la página = los 92 de siempre bajo el encabezado fijo */
.wiz-ok-in { position: relative; overflow: hidden; gap: .8rem; }
.wiz-ok-in > * { position: relative; z-index: 1; }
.wiz-ok-in > .wiz-confeti { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; }
.wiz-confeti i { position: absolute; top: -14px; left: var(--x); width: var(--w); height: calc(var(--w) * 1.7); border-radius: 2px; animation: conf-cae var(--t) cubic-bezier(.25, .6, .4, 1) var(--d) both; }
@keyframes conf-cae { 0% { transform: translate3d(0, -10px, 0) rotate(0); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate3d(var(--dx), 480px, 0) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wiz-confeti { display: none; } }
.wiz-ok-sello { position: relative; display: inline-block; width: 96px; height: 96px; border-radius: 50%; }
.wiz-ok-sello svg { display: block; overflow: visible; }
.wok-cuerpo { fill: var(--acento); }
.wok-check { fill: none; stroke: #0C0C12; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .wiz-ok:not([hidden]) .wiz-ok-sello { animation: wiz-sello .7s cubic-bezier(.2, 1.4, .4, 1) both; }
  .wiz-ok:not([hidden]) .wok-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: wok-trazo .5s ease-out .45s forwards; }
  .wiz-ok:not([hidden]) .wiz-ok-sello::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%) 230% 0 / 260% 100% no-repeat;
    animation: f-brillo 1.3s cubic-bezier(.3, .6, .3, 1) .9s 1 both;
  }
  @keyframes wiz-sello { from { transform: scale(.4) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes wok-trazo { to { stroke-dashoffset: 0; } }
}
.wiz-ok-saludo { margin: .3rem 0 0; font: 400 1.25rem/1.1 var(--display); color: var(--acento); }
.wiz-ok-t { margin-top: 0; text-wrap: balance; max-width: 22ch; }
.wiz-ok .js-msg { margin-top: .2rem; }
.wiz-ok-guarda { gap: .55rem; margin: .5rem 0 .3rem; padding: 1rem 1.2rem; width: 100%; max-width: 420px; border: 1.5px solid color-mix(in srgb, var(--fg, var(--tinta)) 28%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--fg, var(--tinta)) 6%, transparent); }
.wiz-ok-link { font-size: clamp(1rem, 4.6vw, 1.2rem); }
.wiz-ok-botones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.wiz-ok-botones .chip { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 45%, transparent); min-height: 46px; display: inline-flex; align-items: center; padding-inline: 1.15rem; text-decoration: none; font-weight: 700; }
.wiz-ok-botones .chip:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); border-color: var(--fg); }
.wiz-ok-fundador { display: flex; align-items: flex-start; gap: .7rem; max-width: 420px; margin: .3rem 0 0; padding: .85rem 1rem; text-align: left; font: 500 .93rem/1.45 var(--cuerpo); color: var(--sec, var(--gris)); border: 1.5px dashed color-mix(in srgb, var(--fg, var(--tinta)) 34%, transparent); border-radius: 16px; }
.wiz-ok-fundador svg { flex: 0 0 auto; margin-top: .05rem; }
.wiz-ok-fundador .f-cuerpo { fill: var(--acento); }
.wiz-ok-fundador .f-destello { fill: #0C0C12; }
.wiz-ok-acc { margin-top: .7rem; width: 100%; }
/* el primer paso de la lista ("Subí tus fotos") es un link a la cuenta */
.wiz-ok-pasos a { color: var(--fg, var(--tinta)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: .45rem .1rem; margin: -.45rem -.1rem; }
/* contador de la línea sobre vos: al llegar al tope (140) lo dice, porque el campo corta lo que se escribe o se pega */
.bio-tope { color: var(--fg, var(--tinta)); font-weight: 700; }
.bio-tope::after { content: " · llegaste al máximo"; }
@media (max-width: 560px) { .wiz-ok-acc .btn { flex: 1 1 100%; } }

/* ── /mi: la tarjeta destacada del fundador ─────────────────────────────────── */
.mi-fund { margin: -10px 0 22px; }
.card.card-fundador { background: #0C0C12; color: #FBFAF7; border-color: var(--acento); padding: 22px 20px 20px; }
.card-fundador .fund-fila { display: flex; align-items: center; gap: 1.2rem; }
.card-fundador .fund-sello { --f-ancho: 132px; flex: 0 0 auto; }
.card-fundador .fund-txt { min-width: 0; }
.card-fundador .fund-etq { margin: 0 0 .35rem; font: 700 .76rem/1 var(--cuerpo); letter-spacing: .09em; text-transform: uppercase; color: var(--acento); }
.card-fundador h2 { color: #FBFAF7; font-size: 1.7rem; margin: 0 0 .4rem; }
.card.card-fundador .sub { color: #CBCAC9; margin: 0; font-size: .95rem; }
.card-fundador .acc-ficha { margin-top: 18px; }
.card-fundador .btn.gold { background: var(--acento); border-color: var(--acento); color: #0C0C12; width: 100%; min-height: 54px; }
.card-fundador .btn.gold:hover:not(:disabled) { background: #FBFAF7; border-color: #FBFAF7; color: #0C0C12; }
.card-fundador .btn:focus-visible { outline: 3px solid #FBFAF7; outline-offset: 3px; }
.card.card-fundador .fund-hint { color: #CBCAC9; min-height: 1.4em; margin-bottom: 0; }
@media (max-width: 480px) {
  .card-fundador .fund-fila { flex-direction: column; align-items: flex-start; }
  .card-fundador .fund-sello { --f-ancho: 150px; }
}

/* ── registro v2: cinco pasos, "Ver más" de roles, redes con casilla y precios ───────────────── */
.wiz-pasos li b { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
@media (max-width: 560px) { .wiz-pasos li { font-size: .66rem; } .wiz-pasos li b { line-height: 1.15; } }
.chips-mas { margin-top: .6rem; }
.chips-mas-sum { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font: 700 .92rem/1 var(--cuerpo); color: var(--fg, var(--tinta)); padding: .55rem .2rem; min-height: 44px; list-style: none; }
.chips-mas-sum::-webkit-details-marker { display: none; }
.chips-mas-sum::after { content: ''; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.chips-mas[open] > .chips-mas-sum::after { transform: rotate(-135deg) translateY(-2px); }
.chips-mas > .chips-check { margin-top: .3rem; }
.chips-mas-sum:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
.campo-otro { margin-top: .9rem; }
.redes-ayuda { margin: .1rem 0 .7rem; color: var(--sec, var(--gris)); font: 500 .92rem/1.4 var(--cuerpo); }
.red-opt { display: grid; gap: .5rem; align-items: center; }
.wiz-on .red-opt:not(.on) .red-campo { display: none; }
.red-opt .chip-check { justify-self: start; }
.red-opt .red-campo input { width: 100%; }
.serv-lista { display: grid; gap: .9rem; }
.serv-fila { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 5.5rem; gap: .5rem; padding: .8rem; border-radius: 14px; background: color-mix(in srgb, var(--fg, var(--tinta)) 5%, transparent); }
.serv-fila .serv-det { grid-column: 1 / -1; }
.serv-fila input, .serv-fila select { width: 100%; }
.serv-quitar { grid-column: 1 / -1; justify-self: end; }
.js-serv-mas { margin-top: .7rem; }
@media (max-width: 560px) {
  .serv-fila { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .serv-fila .serv-nom { grid-column: 1 / -1; }
}

/* ── registro v2, bloque D: confirmar el correo con un código (paso 5) ──────────────────────────── */
.cod { display: grid; gap: .75rem; padding: 1rem 1.1rem; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--fg, var(--tinta)) 28%, transparent); }
.cod[hidden], .cod-ingreso[hidden], .cod-pedir[hidden], .cod-ok[hidden], .wiz-ok-correo[hidden] { display: none !important; }
.cod .etiqueta { margin: 0; }
.cod-fila { display: flex; gap: .6rem; align-items: stretch; }
.cod-fila input { flex: 1 1 auto; min-width: 0; }
.js-cod-correo[readonly] { opacity: .9; text-overflow: ellipsis; }
.cod-cambiar, .cod-reenviar { flex: 0 0 auto; align-self: center; min-height: 44px; padding: 0 .4rem; background: transparent; border: 0; color: var(--fg, var(--tinta)); font: 700 .95rem/1 var(--cuerpo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cod-cambiar:hover, .cod-reenviar:hover { color: var(--acc, var(--acento)); }
.cod-cambiar:focus-visible, .cod-reenviar:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
.cod-reenviar { justify-self: start; padding-left: 0; }
.cod-reenviar[disabled] { opacity: .6; cursor: not-allowed; text-decoration: none; }
.cod-pedir { justify-self: start; min-height: 48px; }
@media (max-width: 560px) { .cod-pedir { justify-self: stretch; min-height: 52px; } }   /* es la acción de este paso: botón sólido, ancho completo */
.cod-ingreso { display: grid; gap: .6rem; }
.cod-input { text-align: center; letter-spacing: .45em; font: 700 1.6rem/1.2 var(--cuerpo) !important; padding-left: calc(1rem + .45em) !important; }
.cod-confirmar { flex: 0 0 auto; min-height: 52px; }
.cod-estado { margin: 0; color: var(--sec, var(--gris)); font: 500 .95rem/1.4 var(--cuerpo); overflow-wrap: anywhere; }
.cod-ok { justify-self: start; }
.wiz .js-wiz-enviar:disabled { opacity: .5; cursor: not-allowed; }
.wiz-ok-correo { margin: 0; max-width: 40ch; color: var(--sec, var(--gris)); font: 500 .95rem/1.4 var(--cuerpo); }
@media (max-width: 560px) {
  .cod-fila { flex-wrap: wrap; }
  .cod-fila input { flex: 1 1 100%; }
  .cod-confirmar { flex: 1 1 100%; }
  .cod-cambiar { align-self: flex-start; padding-left: 0; }
}

/* Aviso solo para quien carga sus precios (alta y /mi): lo arma ib.js / mi.html, nunca una página que ve un negocio */
.nota-comision { margin: .5rem 0 .8rem; padding: .55rem .85rem; border-radius: 12px; background: color-mix(in srgb, var(--fg, var(--tinta)) 7%, transparent); font: 700 .92rem/1.4 var(--cuerpo); }

/* términos y condiciones: la segunda casilla del alta y el recuadro del 10% en /terminos */
.check-terminos { margin-top: .8rem; }
.legal .legal-destacado { padding: 1rem 1.2rem; border-left: 5px solid var(--acento, #FF5A36); background: color-mix(in srgb, var(--acento, #FF5A36) 12%, transparent); font-size: 1.08rem; }