/* ═══════════════════════════════════════════════════════════════════════════
   INFLUENCER BOLIVIA · sistema visual "El Número" (v2)
   ───────────────────────────────────────────────────────────────────────────
   Idea: el sitio es una revista y el talento es la portada. Un founder no
   recibe una credencial, recibe un número de colección.

   Reglas del sistema (cada una existe para que no se vea plantilla):
   - Bandas planas a sangre completa. Cada banda tiene UN fondo y UN acento,
     y los componentes leen ese par desde variables (--fg, --acc, --btn-*),
     así un botón o un campo se adapta solo a la banda donde cae.
   - El amarillo (--sol) solo se pone sobre un NÚMERO o sobre algo que se
     puede tocar. Si es amarillo, vale algo.
   - Jerarquía por tamaño de tipografía. Cero sombras, cero degradados, cero
     bordes redondeados, cero mono, cero mayúsculas sostenidas.
   - Sin modo oscuro por defecto: un solo tema, claro, con bandas oscuras.
   - Tipografías autoalojadas (public/fonts): Gloock solo para titulares y
     números grandes (no tiene cursiva ni negrita: no se sintetizan);
     Hanken Grotesk (variable) para todo lo demás. Ambas con licencia OFL.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Gloock';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/gloock-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Respaldos con el ancho de la fuente real. Si la red es lenta y la fuente tarda,
   el titular cambia de tipografía sin saltar de renglón. Anchos medidos en
   Chrome/Windows sobre los titulares reales: Gloock es 2,5% más ancha que
   Georgia y 12,8% más que Times; Hanken es igual de ancha que Arial y 11,2%
   más que Roboto (la de Android). Donde no exista ninguna, cae a serif/sans-serif. */
@font-face { font-family: 'Gloock Respaldo';   src: local('Georgia');                         size-adjust: 102.5%; }
@font-face { font-family: 'Gloock Respaldo T'; src: local('Times New Roman'), local('Times'); size-adjust: 112.8%; }
@font-face { font-family: 'Hanken Respaldo';   src: local('Arial'), local('Helvetica');       size-adjust: 100%; }
@font-face { font-family: 'Hanken Respaldo R'; src: local('Roboto');                          size-adjust: 111.2%; }

:root {
  color-scheme: light;

  /* paleta: planos, nunca degradados */
  --papel:         #FBFAF7;   /* casi blanco, 1% tibio: NO crema */
  --tinta:         #0C0C12;
  --cobalto:       #1B2BE0;
  --sol:           #FFD23F;
  --gris:          #6B6B76;   /* texto secundario sobre papel */
  /* mezclas ya calculadas (contraste verificado, ver más abajo) */
  --sobre-cobalto: #D3D5F3;   /* papel 82% sobre cobalto: texto secundario */
  --borde-cobalto: #969DED;   /* papel 55% sobre cobalto: borde de casilla */
  --sobre-tinta:   #CBCAC9;   /* papel 80% sobre tinta: texto secundario */
  --tinta-72:      #50431F;   /* tinta 72% sobre sol: texto secundario en banda sol */
  --suave:         #D5D4D2;   /* filete fino sobre papel (decorativo) */

  --display: 'Gloock', 'Gloock Respaldo', 'Gloock Respaldo T', Georgia, 'Times New Roman', serif;
  --cuerpo:  'Hanken Grotesk', 'Hanken Respaldo', 'Hanken Respaldo R', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* escala tipográfica (fluida, medida en navegador real) */
  --t-hero: clamp(2.6rem, 5.6vw, 5.5rem);
  --t-1:    clamp(2.2rem, 5vw, 4.5rem);
  --t-2:    clamp(1.5rem, 2.8vw, 2.25rem);
  --t-3:    1.25rem;

  --ancho: 1240px;
  --pad:   max(20px, 4vw);
  --gap:   clamp(.75rem, 2vw, 2rem);
  --band-v: clamp(3.5rem, 11vh, 8rem);
  --regla: 2px solid var(--tinta);
}

/* Contraste calculado (WCAG 2.x), no declarado:
   tinta/papel 18,7 · papel/cobalto 8,15 · sol/cobalto 5,89 · tinta/sol 13,5
   gris/papel 5,04 · sobre-cobalto/cobalto 5,91 · borde-cobalto/cobalto 3,38 */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--sol); color: var(--tinta); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.oculto { display: none !important; }

/* ── bandas ───────────────────────────────────────────────────────────────── */
/* .franja es el nombre que ya usan las plantillas: queda como banda de papel.
   Los valores de papel también viven en :root, así nav, hero y diálogos (que no
   son bandas) heredan un par fondo/acento completo. */
:root, .banda, .franja {
  --bg: var(--papel); --fg: var(--tinta); --sec: var(--gris); --acc: var(--cobalto);
  --btn-bg: var(--cobalto); --btn-fg: var(--papel); --btn-bg-h: var(--tinta); --btn-fg-h: var(--papel);
  --line: var(--tinta);
}
.banda, .franja {
  background: var(--bg); color: var(--fg);
  padding-block: var(--band-v);
  position: relative;
}
.franja-borde { border-top: var(--regla); }
.banda-cobalto {
  --bg: var(--cobalto); --fg: var(--papel); --sec: var(--sobre-cobalto); --acc: var(--sol);
  --btn-bg: var(--sol); --btn-fg: var(--tinta); --btn-bg-h: var(--papel); --btn-fg-h: var(--tinta);
  --line: var(--papel);
}
.banda-sol {
  --bg: var(--sol); --fg: var(--tinta); --sec: var(--tinta-72); --acc: var(--tinta);
  --btn-bg: var(--tinta); --btn-fg: var(--sol); --btn-bg-h: var(--papel); --btn-fg-h: var(--tinta);
  --line: var(--tinta);
}
.banda-tinta {
  --bg: var(--tinta); --fg: var(--papel); --sec: var(--sobre-tinta); --acc: var(--sol);
  --btn-bg: var(--sol); --btn-fg: var(--tinta); --btn-bg-h: var(--papel); --btn-fg-h: var(--tinta);
  --line: var(--papel);
}
.caja { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-inline: var(--pad); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

:focus-visible { outline: 3px solid var(--acc, var(--cobalto)); outline-offset: 3px; }

/* ── tipografía ───────────────────────────────────────────────────────────── */
.display {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  line-height: .98; letter-spacing: -.015em; text-wrap: balance; margin: 0;
}
.display b, .display strong { font-weight: 400; }
.t-xl { font-size: var(--t-hero); }
.t-lg { font-size: var(--t-1); }
.t-md { font-size: var(--t-2); line-height: 1.04; }

/* Etiqueta de sección: minúscula normal, peso 500, sin trackeo. */
.campo {
  font: 500 .95rem/1.3 var(--cuerpo); color: var(--sec); margin: 0;
}
.campo-sello { color: var(--acc); font-weight: 700; }

.bajada { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--sec); max-width: 56ch; margin: 0; }

/* El resaltado del titular: un bloque plano a la altura del texto, sin
   cursiva (Gloock no la tiene) y sin partirse entre renglones. */
.hl {
  display: inline-block; background: var(--cobalto); color: var(--papel);
  line-height: 1; padding: 0 .14em .05em; white-space: nowrap;
}
.banda-cobalto .hl { background: var(--sol); color: var(--tinta); }
/* El recuadro del resaltado va POR DEBAJO del texto de los renglones de arriba:
   con interlineado tan justo, el recuadro del renglón siguiente le tapaba la cola
   a letras como la "p" de "pidan". `isolation` mantiene ese orden adentro del titular. */
.display { isolation: isolate; }
.hl { position: relative; z-index: -1; }
/* En pantallas angostas el titular no entra en un solo renglón: el resaltado se
   parte con el texto y repite su fondo en cada renglón, en vez de salirse. */
@media (max-width: 640px) {
  .hl { display: inline; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}

/* ── estructura de contenido ─────────────────────────────────────────────── */
.sec-cab { margin-bottom: clamp(1.75rem, 4vw, 3rem); max-width: 40rem; }
.sec-cab .campo { margin-bottom: .9rem; }
.sec-cab .bajada { margin-top: 1rem; }

/* ── barra de navegación ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--papel); color: var(--tinta);
  border-bottom: var(--regla);
}
.nav-in { display: flex; align-items: center; gap: 1.75rem; min-height: 64px; }
.marca { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.marca-wm { font: 400 1.4rem/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a:not(.btn) {
  font: 500 1rem/1 var(--cuerpo); text-decoration: none; color: var(--tinta);
  padding: .5rem 0; background: linear-gradient(var(--sol), var(--sol)) 0 100% / 0 3px no-repeat;
  transition: background-size .18s;
}
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { background-size: 100% 3px; }
.nav-burger { display: none; }

@media (max-width: 860px) {
  .nav-in { min-height: 60px; flex-wrap: wrap; row-gap: 0; }
  .nav-burger { display: none; }
  /* Sin JavaScript no hay menú que abrir: los enlaces quedan a la vista, en
     renglón, debajo del logo. (Antes el panel quedaba abierto encima del titular
     y el botón "Menú" no hacía nada.) */
  .nav-links { flex: 1 0 100%; flex-wrap: wrap; gap: .25rem 1.4rem; padding: 0 0 .85rem; }
  .nav-links a:not(.btn) { padding: .5rem 0; }
  .nav-links .btn { margin-top: .25rem; }
  /* Con JavaScript (la clase `js` la pone un script mínimo en el <head>): botón
     "Menú" y panel desplegable. */
  .js .nav-in { flex-wrap: nowrap; }
  .js .nav-burger {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
    background: var(--tinta); color: var(--papel); border: 0; border-radius: 0;
    font: 700 .95rem/1 var(--cuerpo); cursor: pointer;
  }
  .js .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; flex: none;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0;
    background: var(--papel); border-bottom: var(--regla);
    padding: .25rem var(--pad) 1.25rem;
  }
  .js .nav-links[hidden] { display: none; }
  .js .nav-links a:not(.btn) { padding: 1rem 0; border-bottom: 1px solid var(--suave); font-size: 1.15rem; background: none; }
  .js .nav-links .btn { margin-top: 1rem; }
}

/* ── botones ─────────────────────────────────────────────────────────────── */
/* Sin sombra y sin borde redondeado. El gesto de firma es la inversión de
   color al pasar el mouse y la flecha que avanza. */
.btn {
  --flecha: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: 0; border: 2px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 700 1.02rem/1 var(--cuerpo); text-decoration: none; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.btn::after {
  content: ''; width: .62em; height: .62em; flex: 0 0 auto;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translateX(var(--flecha)) rotate(45deg); transition: transform .16s;
}
.btn:hover { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bg-h); --flecha: 5px; }
.btn:active { transform: translateY(1px); }
.btn-papel { --btn-bg: var(--papel); --btn-fg: var(--tinta); --btn-bg-h: var(--sol); --btn-fg-h: var(--tinta); }
/* el secundario es un enlace con filete, no un botón más */
.btn-linea {
  background: transparent; color: var(--fg); border-color: transparent;
  padding: 0 .25rem; min-height: 52px; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 7px;
}
.btn-linea::after { display: none; }
.btn-linea:hover { background: transparent; color: var(--acc); border-color: transparent; text-decoration-color: var(--acc); }
.btn-ancho { width: 100%; }
.btn-chico { min-height: 44px; padding: 0 1.15rem; font-size: .95rem; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(1.75rem, 4.2vw, 3.75rem) 0; position: relative; z-index: 2; }
/* La portada se estira a la altura del texto y se pasa 4rem sobre la banda
   siguiente: el solape editorial sale de la geometría, no de un número fijo. */
.hero-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
.hero-txt { grid-column: 1 / span 7; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.hero-portada { grid-column: 8 / span 5; margin-bottom: -4rem; display: flex; }
.hero-portada .portada { width: 100%; aspect-ratio: auto; min-height: 30rem; }
.hero .campo { margin-bottom: 1.1rem; }
.hero h1 { margin: 0; }
.hero .bajada { margin-top: 1.4rem; color: var(--fg); }
.hero-btns { display: flex; gap: .75rem 1.5rem; margin-top: 1.9rem; flex-wrap: wrap; align-items: center; }
/* La microlínea va en bloque DEBAJO de los botones (nunca pegada al costado). */
.micro { margin: 1.1rem 0 0; font: 500 .95rem/1.4 var(--cuerpo); color: var(--sec); }
.micro b { color: var(--fg); font-weight: 700; }
.hero-otra { margin: .6rem 0 0; }

/* ── reservar el nombre (el campo del hero y el de la ficha) ─────────────────
   Un solo gesto: escribís y ves al instante si está libre. El estado se dice con
   palabras y con un signo (✓ / ×), nunca solo con color. */
.reserva { margin-top: 1.9rem; max-width: 40rem; }
.reserva-etq { display: block; font: 700 .95rem/1.3 var(--cuerpo); margin-bottom: .5rem; }
.reserva-fila { display: flex; align-items: stretch; background: #fff; border: 2px solid var(--tinta); }
.reserva-fila:focus-within { outline: 3px solid var(--acc); outline-offset: 3px; }
.reserva-campo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding-inline: 1rem; }
.reserva-campo input, .form .reserva-campo input[type="text"] {
  flex: 1 1 0; width: 0; min-width: 0; min-height: 0; border: 0; background: transparent; color: var(--tinta); outline: 0;
  padding: 1rem 0; border-radius: 0; font: 700 clamp(1.15rem, 2.2vw, 1.5rem)/1.1 var(--cuerpo);
}
.form .reserva-campo input[type="text"]:focus { outline: 0; }
.reserva-campo input::placeholder { color: #8E8E98; font-weight: 500; }
.reserva-dominio { flex: none; font: 500 clamp(.92rem, 1.7vw, 1.12rem)/1 var(--cuerpo); color: var(--gris); white-space: nowrap; }
.reserva-btn { flex: none; margin: -2px -2px -2px 0; padding-inline: 1.6rem; }
.reserva-estado { min-height: 1.5em; margin: .65rem 0 0; font: 500 1rem/1.4 var(--cuerpo); color: var(--sec); overflow-wrap: anywhere; }
.reserva-estado.libre { color: var(--cobalto); font-weight: 700; }
.reserva-estado.no { color: var(--tinta); font-weight: 700; }
.reserva-estado.libre::before { content: "\2713\00a0"; }
.reserva-estado.no::before { content: "\00d7\00a0"; }
.reserva-sugeridos { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin-top: .5rem; }
.reserva-sugeridos button {
  border: 2px solid var(--fg); background: transparent; color: var(--fg); border-radius: 0; cursor: pointer;
  padding: .35rem .7rem; font: 700 .95rem/1.2 var(--cuerpo);
}
.reserva-sugeridos button:hover { background: var(--sol); color: var(--tinta); border-color: var(--sol); }
/* dentro de la ficha (banda cobalto): el campo va a la par de los demás */
.reserva-fila-form { min-height: 52px; }
.reserva-fila-form .reserva-campo input, .form .reserva-fila-form .reserva-campo input[type="text"] { padding: .7rem 0; font: 700 1.0625rem/1.4 var(--cuerpo); }
.banda-cobalto .reserva-fila { border-color: var(--papel); }
.banda-cobalto .reserva-estado.libre { color: var(--sol); }
.banda-cobalto .reserva-estado.no { color: var(--papel); }
@media (max-width: 560px) {
  .reserva .reserva-fila { flex-direction: column; }
  /* el nombre ocupa todo el ancho y el dominio queda debajo, dentro del mismo campo */
  .reserva-campo { flex-wrap: wrap; padding-block: .3rem .65rem; }
  .reserva-campo input, .form .reserva-campo input[type="text"] { flex: 1 1 100%; width: 100%; padding-block: .6rem .15rem; }
  .reserva-dominio { flex: 1 1 100%; font-size: .98rem; }
  .reserva-btn { margin: 0; min-height: 52px; }
}
@media (max-width: 1000px) {
  /* minmax(0, 1fr): con "1fr" a secas la columna crece hasta el contenido más
     ancho que no se puede partir y empuja toda la página fuera de la pantalla */
  .hero-in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero-txt, .hero-portada { grid-column: 1 / -1; }
  .hero-txt { padding-bottom: 2.25rem; }
  .hero-portada { margin-bottom: -2.5rem; max-width: 26rem; display: block; }
  .hero-portada .portada { aspect-ratio: 4 / 5; min-height: 0; }
}
/* la banda que recibe el solape necesita aire extra arriba (solo en la portada) */
.hero-con-portada + .banda { padding-top: calc(var(--band-v) + 4rem); }
@media (max-width: 1000px) { .hero-con-portada + .banda { padding-top: calc(var(--band-v) + 2.5rem); } }

/* La portada: o es una persona real, o es la portada libre con el número
   que le toca al próximo. Nunca una foto de archivo, nunca una disculpa. */
.portada {
  container-type: inline-size;
  position: relative; background: var(--sol); color: var(--tinta);
  aspect-ratio: 4 / 5; display: grid; grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.portada-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.25rem 0; font: 700 .9rem/1.2 var(--cuerpo);
  padding: 4cqw 5cqw 0; font: 700 clamp(.82rem, 3.4cqw, 1rem)/1.2 var(--cuerpo);
}
.portada-cab .mast { font: 400 1.35rem/1 var(--display); font: 400 clamp(1.15rem, 5.4cqw, 1.5rem)/1 var(--display); }
.portada-cuerpo { display: grid; place-items: center; min-height: 0; }
.portada-num {
  font: 400 clamp(5rem, 19vw, 10.5rem)/.9 var(--display);
  font: 400 44cqw/.9 var(--display); letter-spacing: -.03em; font-variant-numeric: lining-nums;
  font-synthesis: none; margin: 0;
}
.portada-pie { margin: 0; padding: 0 1.25rem 1.25rem; font: 500 1rem/1.35 var(--cuerpo); }
.portada-pie { padding: 0 5cqw 5cqw; font: 500 clamp(.95rem, 4.1cqw, 1.15rem)/1.35 var(--cuerpo); }
/* el nombre se corta en 2 renglones: un nombre larguísimo no puede empujar la portada */
.portada-pie b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 400 1.7rem/1.08 var(--display); font: 400 clamp(1.4rem, 7cqw, 2rem)/1.08 var(--display); margin-bottom: .2em;
}
/* con persona real: foto a sangre, franja de mastil arriba, pie de tinta */
.portada-foto { background: var(--tinta); color: var(--papel); }
.portada-foto .portada-cab { background: var(--sol); color: var(--tinta); padding: .65rem 1.25rem; padding: 3cqw 5cqw; }
.portada-foto .portada-img { position: relative; display: block; min-height: 0; overflow: hidden; }
.portada-foto .portada-img img { width: 100%; height: 100%; object-fit: cover; }
.portada-foto .portada-pie { padding: 1rem 1.25rem; padding: 4cqw 5cqw; }
/* el sello vive DENTRO del marco de la foto: queda en su esquina inferior sin
   importar cuántos renglones ocupe el nombre del pie */
.portada-sello {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--sol); color: var(--tinta); border: 2px solid var(--tinta); border-left: 0; border-bottom: 0;
  padding: .1em .55em .05em .45em; font: 400 2rem/1.1 var(--display); font: 400 clamp(1.7rem, 9cqw, 2.4rem)/1.1 var(--display);
}

/* ── cifras (se usan en /marcas) ─────────────────────────────────────────── */
.cifras { display: flex; gap: 1.25rem clamp(2rem, 5vw, 4rem); flex-wrap: wrap; margin-top: 2.25rem; padding-top: 1.5rem; border-top: var(--regla); }
.cifra b { display: block; font: 400 clamp(2.4rem, 5vw, 3.6rem)/1 var(--display); }
.cifra span { display: block; font: 500 .95rem/1.3 var(--cuerpo); color: var(--sec); margin-top: .35rem; }

/* ── FOUNDERS: contador y muro ───────────────────────────────────────────── */
.fnd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: start; }
.fnd-txt { grid-column: 1 / span 5; }
.fnd-muro { grid-column: 6 / span 7; }
.fnd-txt h2 { margin-top: .9rem; }
.fnd-txt .bajada { margin-top: 1.4rem; }
.fnd-acciones { display: flex; gap: .75rem 1.5rem; flex-wrap: wrap; align-items: center; margin-top: 2rem; }
@media (max-width: 900px) { .fnd-txt, .fnd-muro { grid-column: 1 / -1; } }

.muro-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.contador { display: flex; align-items: baseline; gap: .15em 1rem; flex-wrap: wrap; }
.contador b {
  font: 400 clamp(4.5rem, 11vw, 8.5rem)/.85 var(--display); color: var(--acc);
  letter-spacing: -.03em; font-variant-numeric: lining-nums; font-synthesis: none;
}
.contador .de { font: 400 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--display); color: var(--fg); }
.contador span:not(.de) { flex-basis: 100%; font: 500 1rem/1.4 var(--cuerpo); color: var(--sec); }

.muro {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px; grid-template-columns: repeat(20, minmax(0, 1fr));
}
.casilla {
  position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
  border: 1.5px solid var(--borde-cobalto); color: var(--fg);
  font: 500 clamp(.7rem, .95vw, .8rem)/1 var(--cuerpo); font-variant-numeric: tabular-nums;
}
.casilla-n { position: relative; z-index: 1; }
.casilla.libre { background: transparent; }
/* la próxima libre: es la invitación, por eso es la única amarilla */
.casilla.proxima { background: var(--sol); border-color: var(--sol); color: var(--tinta); font-weight: 700; }
/* ocupada pero todavía sin cara: el lugar está tomado de verdad */
.casilla.reservada { background: var(--sobre-cobalto); border-color: var(--sobre-cobalto); color: var(--cobalto); font-weight: 700; }
.casilla.tomada { background: var(--tinta); border-color: var(--sol); }
.casilla.tomada a { position: absolute; inset: 0; text-decoration: none; }
.casilla.tomada img { width: 100%; height: 100%; object-fit: cover; }
.casilla.tomada .casilla-n {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--sol); color: var(--tinta);
  font-weight: 700; text-align: center; padding: 2px 0; font-size: .64rem;
}
@media (max-width: 700px) {
  .muro { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .casilla { font-size: .75rem; }
}
.muro-pie { margin: 1.1rem 0 0; font: 500 .95rem/1.5 var(--cuerpo); color: var(--sec); max-width: 52ch; }
.muro-leyenda { display: flex; gap: .6rem 1.6rem; flex-wrap: wrap; margin-top: 1.2rem; font: 500 .9rem/1.3 var(--cuerpo); color: var(--sec); }
.muro-leyenda span { display: inline-flex; align-items: center; gap: .55rem; }
.pt { width: 14px; height: 14px; display: inline-block; border: 1.5px solid var(--borde-cobalto); }
.pt.tomada { background: var(--tinta); border-color: var(--sol); }
.pt.reservada { background: var(--sobre-cobalto); border-color: var(--sobre-cobalto); }
.pt.libre { background: transparent; }
.pt.proxima { background: var(--sol); border-color: var(--sol); }

/* /founders: el muro ocupa todo el ancho y las casillas se ven grandes */
.muro-grande .muro { gap: 5px; }
.muro-grande .casilla { font-size: clamp(.78rem, 1.2vw, 1rem); }
.muro-grande .casilla.tomada .casilla-n { font-size: clamp(.7rem, 1vw, .85rem); }

/* ── la pausa: una frase que da aire ─────────────────────────────────────── */
.pausa { min-height: min(46vh, 26rem); display: flex; align-items: center; }
.pausa-txt { grid-column: 2 / span 9; margin: 0; }
.pausa-sub { grid-column: 2 / span 9; margin: 1.6rem 0 0; font: 700 1.25rem/1.4 var(--cuerpo); color: var(--acc); }
@media (max-width: 900px) { .pausa-txt, .pausa-sub { grid-column: 1 / -1; } }

/* ── listas de beneficios y pasos ────────────────────────────────────────── */
.lista-plana { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--gap); border-top: var(--regla); }
.lista-plana li { padding: 1.4rem 0 1.5rem; display: grid; gap: .5rem; border-bottom: 1px solid var(--suave); align-content: start; }
.banda-cobalto .lista-plana li, .banda-tinta .lista-plana li { border-bottom-color: var(--borde-cobalto); }
.lista-plana h3 { font: 400 var(--t-3)/1.2 var(--display); margin: 0; }
.lista-plana p { margin: 0; color: var(--sec); font-size: 1rem; }
@media (min-width: 720px) { .lista-plana.en-dos { grid-template-columns: 1fr 1fr; } }

.pasos { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.pasos li { counter-increment: p; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; align-items: start; }
.pasos li::before {
  content: counter(p); font: 400 2.6rem/.9 var(--display); color: var(--acc);
  font-variant-numeric: lining-nums; text-align: left;
}
.pasos h3 { font: 700 1.1rem/1.3 var(--cuerpo); margin: 0 0 .15rem; }
.pasos p { margin: 0; color: var(--sec); font-size: 1rem; }

/* ── PARA MARCAS: tres líneas con numeral grande ─────────────────────────── */
.marcas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: start; }
.marcas-cab { grid-column: 1 / span 5; }
.marcas-lista { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; counter-reset: m; }
.marcas-lista li {
  counter-increment: m; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: center;
  padding: 1.1rem 0 1.2rem; border-top: var(--regla);
}
.marcas-lista li::before { content: counter(m); font: 400 4rem/.85 var(--display); font-variant-numeric: lining-nums; }
.marcas-lista li span { font: 400 clamp(1.3rem, 2.2vw, 1.7rem)/1.2 var(--display); }
.marcas-acciones { grid-column: 7 / span 6; display: flex; gap: .75rem 1.5rem; flex-wrap: wrap; align-items: center; border-top: var(--regla); padding-top: 1.6rem; }
@media (max-width: 900px) { .marcas-cab, .marcas-lista, .marcas-acciones { grid-column: 1 / -1; } }

/* ── CATÁLOGO: tarjeta de perfil sin caja ────────────────────────────────── */
.grid-creds {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) var(--gap);
  grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
}
/* alturas escalonadas: la 2da columna baja 48px y la 3ra 24px */
.grid-creds > :nth-child(3n + 2) { margin-top: 3rem; }
.grid-creds > :nth-child(3n) { margin-top: 1.5rem; }
@media (max-width: 900px) {
  .grid-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .9rem; }
  .grid-creds > :nth-child(n) { margin-top: 0; }
  .grid-creds > :nth-child(2n) { margin-top: 2rem; }
}
.cred { position: relative; display: flex; flex-direction: column; background: transparent; border: 0; }
.cred-marco {
  position: relative; display: block; aspect-ratio: 4 / 5; background: var(--tinta);
  text-decoration: none; transition: transform .2s;
}
.cred:hover .cred-marco { transform: translateY(-6px); }
.cred-marco img { width: 100%; height: 100%; object-fit: cover; }
.cred-sinfoto {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 5rem/1 var(--display); color: var(--sol); background: var(--cobalto);
}
/* el número como sello tipográfico, encima de la esquina de la foto */
.cred-founder {
  position: absolute; left: 0; bottom: 0; background: var(--sol); color: var(--tinta);
  border: 2px solid var(--tinta); border-left: 0; border-bottom: 0; padding: .1rem .7rem 0 .55rem;
  display: flex; align-items: baseline; gap: .3rem;
}
.cred-founder::before { content: 'No.'; font: 700 .8rem/1 var(--cuerpo); }
.cred-founder b { font: 400 1.9rem/1.1 var(--display); font-variant-numeric: lining-nums; }
.cred-founder i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cred-metrica {
  position: absolute; top: 0; right: 0; background: var(--tinta); color: var(--papel);
  font: 700 .85rem/1 var(--cuerpo); padding: .45rem .65rem;
}
.cred-cuerpo { padding: .95rem 0 0; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.cred-nombre {
  font: 400 clamp(1.3rem, 2.2vw, 1.65rem)/1.12 var(--display); margin: 0; letter-spacing: -.005em;
}
.cred-nombre .cred-verif, .cred-nombre .cred-nivel { margin-left: .45rem; vertical-align: .12em; }
.cred-nombre a { text-decoration: none; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color .15s; }
.cred:hover .cred-nombre a { text-decoration: underline; text-decoration-color: var(--sol); }
.cred-verif, .perfil-verif {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%; background: var(--cobalto); color: var(--papel);
}
.cred-nivel { font-size: .95rem; }
.cred-oficio { font: 500 .98rem/1.35 var(--cuerpo); color: var(--gris); margin: 0; }
.cred-oficio span { opacity: .6; }
.cred-redes { display: flex; gap: .3rem 1.1rem; margin: .35rem 0 0; flex-wrap: wrap; }
.cred-redes div { display: flex; align-items: baseline; gap: .4rem; }
.cred-redes dt { font: 500 .85rem/1 var(--cuerpo); color: var(--gris); }
.cred-redes dd { font: 700 1rem/1 var(--cuerpo); margin: 0; font-variant-numeric: tabular-nums; }
.cred-sinredes, .cred-total { font: 500 .9rem/1.35 var(--cuerpo); color: var(--gris); margin: 0; }
.cred-total b { color: var(--tinta); font-weight: 700; }
.cred-pick {
  display: flex; align-items: center; gap: .6rem; margin-top: .8rem; padding: .7rem 0 0;
  border-top: 1px solid var(--tinta); font: 500 .95rem/1.2 var(--cuerpo); cursor: pointer;
}
.cred-pick input { width: 18px; height: 18px; accent-color: var(--cobalto); cursor: pointer; margin: 0; }

/* ── filtros: texto subrayado, no pastillas ──────────────────────────────── */
.filtros { display: grid; gap: 0; margin-bottom: 1.6rem; border-top: var(--regla); }
.filtros-fila { display: flex; align-items: baseline; gap: .5rem 1.25rem; padding: .3rem 0; border-bottom: 1px solid var(--suave); min-width: 0; }
.filtros-fila .campo { flex: 0 0 5.6rem; color: var(--gris); }
/* min-width:0 es lo que deja que el riel se desplace por dentro en vez de
   ensanchar toda la página (en v1 esto desbordaba 449px en un celular de 390) */
/* en escritorio los filtros se acomodan en renglones; en el celular, un riel que se desliza */
.riel { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; padding: .15rem 0 .35rem; min-width: 0; flex: 1 1 0; }
@media (max-width: 640px) {
  .filtros-fila { flex-direction: column; align-items: stretch; gap: .2rem; }
  .filtros-fila .campo { flex: none; }
  .riel { flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}
/* alto de toque de 40px (padding vertical), sin que la fila se vea inflada */
.chip {
  background: none; border: 0; border-radius: 0; padding: .6rem .35rem; margin: 0 -.35rem;
  font: 500 1rem/1.3 var(--cuerpo); color: var(--tinta); cursor: pointer; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: #BDBBB3;
}
.chip:hover { text-decoration-color: var(--cobalto); }
.chip[aria-pressed="true"], .chip.activo { background: var(--sol); text-decoration-color: transparent; font-weight: 700; }
.sel-ciudad {
  background: transparent; border: 0; border-bottom: 2px solid var(--tinta); border-radius: 0;
  font: 500 1rem/1.3 var(--cuerpo); color: var(--tinta); padding: .15rem .25rem; cursor: pointer;
}
.resumen-lista { display: flex; align-items: baseline; gap: .5rem 1.5rem; flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: 1.6rem; border-bottom: var(--regla); }
.resumen-lista .campo { margin-right: auto; }

/* ── formularios (sobre papel) ───────────────────────────────────────────── */
.form { display: grid; gap: 1.1rem; }
.form-fila { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-fila.en-dos { grid-template-columns: 1fr 1fr; } }
.form label.etiqueta, .form span.etiqueta { display: block; font: 700 .95rem/1.3 var(--cuerpo); color: var(--fg); margin-bottom: .4rem; }
.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 {
  width: 100%; background: #fff; color: var(--tinta); border: 2px solid var(--tinta); border-radius: 0;
  padding: .8rem .9rem; font: 400 1.0625rem/1.4 var(--cuerpo); min-height: 52px;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--acc); outline-offset: 2px; }
.form textarea { min-height: 120px; resize: vertical; }
.form small { color: var(--sec); font-size: .9rem; line-height: 1.4; display: block; margin-top: .35rem; }

.aviso {
  background: #fff; color: var(--tinta); border-left: 6px solid var(--sol);
  padding: 1rem 1.15rem; font-size: 1rem; line-height: 1.5;
}
.aviso b { font-weight: 700; }
.aviso-ok { border-left-color: var(--cobalto); }
.banda-cobalto .aviso { background: var(--tinta); color: var(--papel); }

.chips-check { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-check { cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 2px solid var(--fg); background: transparent; color: var(--fg); font: 700 .98rem/1 var(--cuerpo);
}
.chip-check:hover span { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bg-h); }
.chip-check input:checked + span { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.chip-check input:focus-visible + span { outline: 3px solid var(--acc); outline-offset: 2px; }

.check-largo {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  border: 2px solid var(--fg); padding: 1rem 1.1rem; cursor: pointer;
}
.check-largo input { margin-top: .25rem; width: 20px; height: 20px; accent-color: var(--sol); cursor: pointer; }
.check-largo span { font-size: .98rem; line-height: 1.5; }

/* campos dentro de una banda de color: el panel de papel va por afuera */
.banda-cobalto .form label.etiqueta, .banda-cobalto .form span.etiqueta { color: var(--papel); }
.banda-cobalto .form input[type="text"], .banda-cobalto .form input[type="tel"], .banda-cobalto .form input[type="email"],
.banda-cobalto .form input[type="password"], .banda-cobalto .form input[type="date"], .banda-cobalto .form select, .banda-cobalto .form textarea { border-color: var(--papel); }

/* ── barra del pedido múltiple ───────────────────────────────────────────── */
.barra-pedido {
  --btn-bg: var(--sol); --btn-fg: var(--tinta); --btn-bg-h: var(--papel); --btn-fg-h: var(--tinta);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--tinta); color: var(--papel); border-top: 4px solid var(--sol);
  padding: .8rem 0 calc(.8rem + env(safe-area-inset-bottom, 0px));
  /* oculta de verdad (no solo fuera de pantalla): no se puede tabular hacia ella */
  visibility: hidden; transform: translateY(110%); transition: transform .22s, visibility 0s .22s;
}
.barra-pedido.visible { visibility: visible; transform: none; transition: transform .22s, visibility 0s; }
.barra-pedido-in { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; }
.barra-pedido .cuenta { font: 500 1.05rem/1.2 var(--cuerpo); margin: 0 auto 0 0; }
.barra-pedido .cuenta b { font: 400 2rem/1 var(--display); color: var(--sol); margin-right: .25rem; }
.barra-pedido .btn-linea { color: var(--papel); }

/* ── perfil ──────────────────────────────────────────────────────────────── */
.perfil-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: start; }
@media (max-width: 880px) { .perfil-in { grid-template-columns: 1fr; } }
.perfil-fotos { display: grid; gap: .6rem; }
.perfil-foto-grande { aspect-ratio: 4 / 5; overflow: hidden; background: var(--tinta); }
.perfil-foto-grande img { width: 100%; height: 100%; object-fit: cover; }
.perfil-tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .5rem; }
.perfil-tiras button { padding: 0; border: 2px solid transparent; border-radius: 0; overflow: hidden; background: var(--tinta); cursor: pointer; aspect-ratio: 1 / 1; }
.perfil-tiras button[aria-pressed="true"] { border-color: var(--cobalto); }
.perfil-tiras img { width: 100%; height: 100%; object-fit: cover; }
.perfil-cab { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ficha { display: grid; gap: 0; border-top: var(--regla); margin: 1.75rem 0 0; }
.ficha div { padding: .8rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--suave); }
.ficha dt { font: 500 .98rem/1.3 var(--cuerpo); color: var(--gris); }
.ficha dd { font: 700 1.02rem/1.3 var(--cuerpo); margin: 0; text-align: right; }
.perfil-founder { display: flex; align-items: center; gap: 1.1rem; margin: 1.5rem 0 0; background: var(--sol); color: var(--tinta); padding: 1rem 1.2rem; }
.perfil-founder-num { font: 400 2.6rem/.9 var(--display); font-variant-numeric: lining-nums; white-space: nowrap; }
/* en el perfil el sello de verificado dice la palabra: un círculo solo no se entiende */
.perfil-verif { width: auto; height: auto; border-radius: 0; padding: .35rem .7rem .35rem .55rem; gap: .4rem; font: 700 .9rem/1 var(--cuerpo); }
.perfil-verif .sr { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: nowrap; }
.perfil-founder .campo { color: var(--tinta); font-weight: 700; }
.perfil-founder p { color: var(--tinta-72); }
/* link propio (nombre.influencer.com.bo): lo agrega la función de subdominios */
.perfil-url { margin: 1rem 0 0; display: flex; gap: .5rem 1rem; align-items: center; flex-wrap: wrap; font: 700 1rem/1.3 var(--cuerpo); }
.perfil-url a { color: var(--cobalto); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; word-break: break-all; }
.perfil-url a:hover { color: var(--tinta); }
.perfil-url .chip { margin: 0; padding: 0 .85rem; min-height: 40px; display: inline-flex; align-items: center; border: 2px solid var(--tinta); text-decoration: none; font-weight: 700; font-size: .92rem; }
.perfil-url .chip:hover { background: var(--tinta); color: var(--papel); }
.perfil-handles { display: flex; gap: .75rem 1.75rem; flex-wrap: wrap; margin-top: 1.4rem; font: 500 1rem/1.3 var(--cuerpo); }
.perfil-handles b { display: block; font: 500 .88rem/1.2 var(--cuerpo); color: var(--gris); margin-bottom: .15rem; }
.perfil-acciones { display: flex; gap: .75rem 1.25rem; align-items: center; flex-wrap: wrap; margin-top: 1.75rem; }
.perfil-acciones .cred-pick { border-top: 0; margin: 0; padding: 0; }
.migas { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font: 500 .95rem/1.3 var(--cuerpo); color: var(--gris); margin-bottom: 1.5rem; }
.migas a { text-decoration: none; color: var(--tinta); }
.migas a:hover { text-decoration: underline; text-decoration-color: var(--cobalto); text-decoration-thickness: 2px; }
.migas span[aria-hidden] { opacity: .5; }

/* ── vacíos: una invitación, nunca un "sin resultados" seco ──────────────── */
.vacio { border-bottom: var(--regla); padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem); text-align: left; }
.vacio h3 { font: 400 var(--t-2)/1.08 var(--display); margin: 0 0 .9rem; max-width: 22ch; }
.vacio p { color: var(--sec); margin: 0 0 1.6rem; max-width: 52ch; }
.vacio > div { display: flex; gap: .75rem 1.5rem; flex-wrap: wrap; align-items: center; }

/* La vidriera de la portada cuando todavía no hay perfiles publicados: dice la
   verdad (la red recién abre) y la convierte en el motivo para entrar ahora. */
.lanza { display: grid; gap: 2rem var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; border-top: var(--regla); padding-top: 2rem; }
.lanza > :first-child { grid-column: 1 / span 7; }
.lanza > :last-child { grid-column: 9 / span 4; }
.lanza h3 { margin: .7rem 0 1.1rem; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.lanza-btns { display: flex; gap: .75rem 1.5rem; flex-wrap: wrap; align-items: center; margin-top: 1.8rem; }
@media (max-width: 900px) { .lanza > :first-child, .lanza > :last-child { grid-column: 1 / -1; } }

/* ── formulario de entrada a la red ──────────────────────────────────────── */
.postular-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: start; }
.postular-in > :first-child { grid-column: 1 / span 5; }
.postular-in > form { grid-column: 7 / span 6; }
@media (max-width: 1000px) { .postular-in > :first-child { grid-column: 1 / span 12; } .postular-in > form { grid-column: 1 / span 12; } }
.postular-in .pasos { margin-top: 2rem; }

/* ── diálogo del pedido ──────────────────────────────────────────────────── */
.dlg {
  --fg: var(--tinta); --sec: var(--gris); --acc: var(--cobalto);
  --btn-bg: var(--cobalto); --btn-fg: var(--papel); --btn-bg-h: var(--tinta); --btn-fg-h: var(--papel);
  border: 2px solid var(--tinta); border-radius: 0; background: var(--papel); color: var(--tinta);
  padding: 0; width: min(600px, calc(100vw - 32px)); max-height: 92vh;
}
.dlg::backdrop { background: rgba(12, 12, 18, .72); }
.dlg-in { padding: clamp(1.4rem, 4vw, 2.25rem); position: relative; }
.dlg-x { position: absolute; top: .6rem; right: .8rem; background: none; border: 0; color: var(--tinta); font: 400 2rem/1 var(--cuerpo); cursor: pointer; padding: .25rem .6rem; }
.dlg-x:hover { color: var(--cobalto); }

/* ── pie y mapa ──────────────────────────────────────────────────────────── */
.pie { padding: clamp(3rem, 7vw, 5rem) 0 2.25rem; margin: 0; }
.pie .marca-wm { font-size: 1.7rem; }
.pie-in { display: grid; gap: 2.5rem var(--gap); grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 760px) { .pie-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie-in > :first-child { grid-column: 1 / -1; } }
/* en las pantallas más angostas el correo ya no entra en media columna */
@media (max-width: 420px) { .pie-in { grid-template-columns: minmax(0, 1fr); } }
.pie h4 { font: 700 1rem/1.3 var(--cuerpo); color: var(--acc); margin: 0 0 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.pie a { color: var(--fg); text-decoration: none; font-size: 1rem; overflow-wrap: anywhere; }
.pie a:hover { text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pie .bajada { color: var(--sec); }
.pie-legal { border-top: 1px solid var(--borde-cobalto); margin-top: 2.5rem; padding-top: 1.4rem; color: var(--sec); font-size: .9rem; }
.pie-legal p { margin: 0; }
.banda-tinta .pie-legal { border-top-color: #3A3A46; }

.mapa { display: grid; gap: 2rem var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mapa h4 { font: 700 1rem/1.3 var(--cuerpo); margin: 0 0 .8rem; }
.mapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.mapa a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--suave); text-decoration-thickness: 2px; text-underline-offset: 4px; font-size: 1rem; }
.mapa a:hover { text-decoration-color: var(--cobalto); }

/* ── barra de acción fija en pantallas chicas (la prende ib.js) ──────────── */
.barra-cta {
  --btn-bg: var(--sol); --btn-fg: var(--tinta); --btn-bg-h: var(--papel); --btn-fg-h: var(--tinta);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  background: var(--tinta); border-top: 4px solid var(--sol);
  padding: .65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom, 0px));
}
.barra-cta .btn { width: 100%; }
@media (max-width: 760px) { .barra-cta.visible { display: block; } .pedido-activo .barra-cta { display: none !important; } }

/* ── catálogo en la portada: encabezado partido ─────────────────────────── */
.cat-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.cat-nota { max-width: 30rem; display: grid; gap: .9rem; overflow-wrap: anywhere; }
.cat-nota .bajada { font-size: 1.05rem; }
.ciudades-linea { margin: 0; font: 400 clamp(1.15rem, 2vw, 1.5rem)/1.3 var(--display); overflow-wrap: anywhere; }
/* el único dato propio de la franja de lanzamiento */
.lanza-dato b { display: block; font: 400 clamp(4rem, 9vw, 7rem)/.85 var(--display); color: var(--cobalto); font-variant-numeric: lining-nums; }
.lanza-dato p { margin: .8rem 0 0; color: var(--sec); max-width: 22ch; }

/* ── sin movimiento oculto: nada aparece "al hacer scroll" ───────────────── */
.rev { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}