/* ZONA · la página web.
   Una sola hoja, sin nada de fuera: ni fuentes ni imágenes de otro sitio. El
   servidor manda `style-src 'self'`, así que TODO el estilo vive aquí (en el
   HTML no hay <style> ni style="").

   La familia visual es la de la app (ios/Esmeralda/Diseno/Tema.swift y su
   catálogo de colores): títulos en serif (New York), fondo marfil, cian de
   acento; y la «noche» del ícono —azul oscuro con resplandor verde azulado y
   el verde de la carita de Esme— para la portada, Esme y el pie. */

/* ───────── Colores ───────── */
:root {
  --fondo: #f7f5ef;        /* Fondo de la app */
  --tinte: #efede5;        /* Superficie2 */
  --sup: #ffffff;
  --texto: #16211d;
  --suave: #56615b;        /* un punto más oscuro que el de la app: AA sobre el tinte */
  --linea: #dcd8cc;
  --acento: #006a8e;       /* PrimarioTexto, oscurecido para AA sobre marfil y tinte */
  --azul: #2456c6;         /* LatonTexto: el azul del pin */
  --boton: #16211d;
  --sobre-boton: #f7f5ef;
  --sombra: 22 33 29;

  /* La noche del ícono. No cambia con el modo: es de marca. */
  --noche: #05121c;
  --noche-2: #0a2636;
  --noche-texto: #eef5f6;
  --noche-suave: #a4bcc6;
  --noche-linea: rgb(255 255 255 / .12);
  --esme: #3df0a6;         /* el verde de la carita */
  --cian: #29c6e8;         /* Primario de la app */
  --pin: #7aa6ff;

  --serif: "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --margen: clamp(20px, 5vw, 48px);
  --aire: clamp(76px, 11vw, 150px);   /* entre secciones */
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1412;
    --tinte: #131b18;
    --sup: #17201c;
    --texto: #eceFEA;
    --suave: #a3aea8;
    --linea: #2a3530;
    --acento: #29c6e8;
    --azul: #8fb4ff;
    --boton: #29c6e8;
    --sobre-boton: #032a36;
    --sombra: 0 0 0;
  }
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Los enlaces de la barra saltan a una sección: que el título no quede
     pegado al borde de arriba. */
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 clamp(17px, 1.05vw + 13px, 19px)/1.58 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* los teléfonos inclinados asoman unos píxeles */
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }

h1 {
  font-size: clamp(46px, 11.6vw, 104px);
  line-height: .94;
  letter-spacing: -.03em;
}
/* «sabiendo.» en cursiva y en el verde de Esme: la palabra que importa. */
h1 em { display: block; font-style: italic; font-weight: 600; color: var(--esme); }

h2 {
  font-size: clamp(34px, 5.3vw, 66px);
  line-height: 1.02;
  letter-spacing: -.022em;
}
h3 { font-size: clamp(20px, 1.6vw + 14px, 25px); line-height: 1.2; letter-spacing: -.01em; }

/* El foco SIEMPRE se ve, en claro, en oscuro y sobre la noche. */
:focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; border-radius: 6px; }

.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 10;
  background: var(--sup); color: var(--texto);
  padding: 10px 16px; border-radius: 10px; font-weight: 600;
}
.saltar:focus { top: 12px; }

.ancho { width: min(1200px, 100% - 2 * var(--margen)); margin-inline: auto; }

/* La «ceja»: la etiqueta chica en mayúsculas sobre cada título. Lleva una
   rayita delante, como el subrayado azul de «Hoy en la zona» en la app. */
.ceja {
  display: flex; align-items: center; gap: 12px;
  font: 600 13px/1.3 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--azul);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.ceja::before { content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.ceja--verde { color: var(--esme); }

.entrada {
  font-size: clamp(18px, .9vw + 15px, 22px);
  line-height: 1.5;
  color: var(--suave);
  max-width: 34em;
  margin-top: clamp(20px, 2.4vw, 30px);
}

/* ───────── La noche (portada, Esme y pie) ───────── */
.noche { background: var(--noche); color: var(--noche-texto); }
.noche .entrada { color: var(--noche-suave); }

.portada {
  position: relative;
  /* El resplandor del ícono: verde azulado detrás de los teléfonos y un eco
     azul abajo a la izquierda. */
  background:
    radial-gradient(58% 62% at 78% 46%, rgb(22 110 128 / .62), transparent 70%),
    radial-gradient(46% 50% at 4% 96%, rgb(36 86 198 / .30), transparent 70%),
    linear-gradient(180deg, #06141f, #04101a);
  overflow: hidden;   /* el teléfono se corta en el borde de abajo, a propósito */
}

.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: clamp(18px, 2.4vw, 28px);
}
.marca {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  font: 800 22px/1 var(--sans); letter-spacing: .06em;
}
.marca img { border-radius: 24%; box-shadow: 0 0 0 1px rgb(255 255 255 / .14); }

.barra-nav { display: none; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: 15.5px; }
.barra-nav a { text-decoration: none; color: var(--noche-suave); padding: 8px 0; transition: color .2s; }
.barra-nav a:hover { color: var(--noche-texto); }
.barra-nav .barra-cta {
  color: var(--noche-texto);
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--noche-linea);
  background: rgb(255 255 255 / .05);
}
.barra-nav .barra-cta:hover { background: rgb(255 255 255 / .11); }

.heroe {
  display: grid; gap: clamp(44px, 7vw, 72px);
  padding-top: clamp(28px, 6vw, 84px);
}
.heroe { position: relative; }
.heroe-texto { max-width: 720px; }

/* ───────── Esme, el robot ─────────
   Un personaje, no un ícono: detrás lleva el resplandor verde de su cara y
   debajo una sombra de contacto, para que esté PARADO en la página. */
.robot { position: relative; isolation: isolate; }
.robot img { position: relative; width: 100%; height: auto; }
.robot::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -16% -4%;
  background: radial-gradient(closest-side, rgb(61 240 166 / .30), rgb(41 198 232 / .10) 60%, transparent);
}
.robot::after {
  content: ""; position: absolute; z-index: -1; left: 16%; right: 16%; bottom: -3.5%; height: 9%;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .62), transparent);
}

/* Esme en la portada. En el celular, una tarjeta: robot | rótulo, y debajo
   las preguntas de ejemplo. */
.esme-portada {
  display: grid; grid-template-columns: clamp(96px, 29vw, 124px) 1fr; align-items: center;
  gap: 14px 16px;
  margin-top: clamp(24px, 3vw, 34px);
  padding: 16px 16px 18px;
  border-radius: 24px;
  border: 1px solid var(--noche-linea);
  background: linear-gradient(140deg, rgb(61 240 166 / .10), rgb(255 255 255 / .04) 60%);
}
.esme-rotulo { font: 500 clamp(16px, 4.2vw, 19px)/1.25 var(--sans); color: var(--noche-texto); }
.esme-rotulo strong { font: 700 clamp(26px, 7vw, 34px)/1 var(--serif); letter-spacing: -.01em; color: var(--esme); display: block; margin-bottom: 6px; }
/* En el celular «Esme» va en su renglón y el punto sobra; en escritorio va
   todo seguido y el punto separa. */
.punto { display: none; }
.esme-linea { margin-top: 8px; font-size: clamp(15.5px, 4vw, 17px); line-height: 1.35; color: var(--noche-suave); }
.burbujas.burbujas--portada { grid-column: 1 / -1; margin-top: 0; gap: 8px; }
.burbujas.burbujas--portada li { padding: 8px 14px; font-size: 15px; }
/* En la portada la primera es la «tuya» (cian): es la que más se parece a lo
   que alguien escribiría de verdad. */
.burbujas.burbujas--portada li:nth-child(3n + 2) { background: rgb(255 255 255 / .08); color: var(--noche-texto); border-color: var(--noche-linea); border-radius: 20px 20px 20px 6px; }
.burbujas.burbujas--portada li:first-child { background: var(--cian); color: #032a36; border-color: transparent; border-radius: 20px 20px 6px 20px; }

.robot--seccion { width: clamp(150px, 16vw, 230px); margin: 0 0 clamp(22px, 3vw, 34px) -6px; }

/* Dentro de un título: lo que debe quedarse junto en su propio renglón. */
.renglon { display: block; }
.heroe .entrada { max-width: 30em; }

/* Las tiendas. NO son enlaces: la app todavía no está publicada y un botón
   que no lleva a ningún lado es una promesa rota. Por eso son rótulos. */
.tiendas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3.4vw, 40px); }
.tienda {
  display: grid; gap: 3px;
  /* A 360 px de ancho las dos caben en un renglón solo si ceden un poco. */
  min-width: min(164px, calc(50% - 6px)); padding: 11px 18px 12px;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / .2);
  background: rgb(255 255 255 / .06);
}
.tienda-chico { font: 500 12px/1.2 var(--sans); letter-spacing: .04em; color: var(--noche-suave); }
.tienda-grande { font: 600 20px/1.15 var(--sans); letter-spacing: -.01em; color: var(--noche-texto); }
.tiendas--chicas .tienda { min-width: 0; padding: 9px 16px 10px; }
.tiendas--chicas .tienda-grande { font-size: 17px; }

.nota { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--noche-suave); max-width: 30em; }

/* ───────── El teléfono ─────────
   Un marco hecho en CSS alrededor de la captura. Todo sale de --w (el ancho):
   así el radio y el grosor del marco guardan la proporción a cualquier tamaño.
   La isla NO se dibuja: ya viene en la captura. */
.tel {
  --w: 280px;
  position: relative; flex: none;
  width: var(--w);
  padding: calc(var(--w) * .03);
  border-radius: calc(var(--w) * .17);
  background: linear-gradient(150deg, #3a4651 0%, #11161b 22%, #06080b 60%, #1c232a 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .10),
    0 calc(var(--w) * .14) calc(var(--w) * .26) calc(var(--w) * -.10) rgb(var(--sombra) / .50),
    0 calc(var(--w) * .05) calc(var(--w) * .10) calc(var(--w) * -.04) rgb(var(--sombra) / .40);
}
/* Solo la captura (hija directa): dentro de la conversación dibujada hay
   otra imagen —la carita de Esme— que no es una pantalla. */
.tel > img {
  width: 100%; height: auto;
  aspect-ratio: 1206 / 2622;
  object-fit: cover; object-position: top;
  border-radius: calc(var(--w) * .142);
  /* Si la captura tarda (o falta), el marco enseña la noche de la marca y no
     un hueco blanco. */
  background: radial-gradient(80% 50% at 50% 35%, #12596b, #06141f 75%);
  color: transparent;   /* y el texto alternativo no se pinta encima */
}
.noche .tel { --sombra: 0 0 0; }

/* La inclinación va en `rotate` y no en `transform`: así la animación de
   entrada (que mueve `translate`) no la pisa. */
.tel--frente { z-index: 1; rotate: 3deg; }
.tel--atras { z-index: 0; rotate: -6deg; filter: saturate(.92) brightness(.94); }
.tel--recto { rotate: -2.5deg; }
.tel--ladeo-a { rotate: -3deg; }
.tel--ladeo-b { rotate: 3deg; }

/* Portada: el de inicio delante; el de atrás asoma por la izquierda. */
.heroe-telefonos {
  display: flex; justify-content: center; align-items: flex-start;
  /* Se hunde bajo el borde de la portada, que lo corta: se ve la mitad de
     arriba —la que tiene «Hoy en la zona»— y la página sigue. */
  margin-bottom: calc(clamp(210px, 62vw, 300px) * -.42);
}
.heroe-telefonos .tel--frente { --w: clamp(210px, 62vw, 300px); }
.heroe-telefonos .tel--atras {
  --w: clamp(160px, 46vw, 230px);
  margin-right: calc(var(--w) * -.46);
  margin-top: calc(var(--w) * .30);
}

/* Dos teléfonos solapados. */
.duo { display: flex; justify-content: center; align-items: flex-start; }
.duo .tel--frente { --w: clamp(176px, 50vw, 260px); }
.duo .tel--atras {
  --w: clamp(150px, 42vw, 222px);
  margin-right: calc(var(--w) * -.30);
  margin-top: calc(var(--w) * .34);
}
/* En la sección volteada el de atrás sale por la derecha. */
.duo--izquierda { flex-direction: row-reverse; }
.duo--izquierda .tel--atras { margin-right: 0; margin-left: calc(var(--w) * -.30); rotate: 6deg; }
.duo--izquierda .tel--frente { rotate: -3deg; }

.solo { display: flex; justify-content: center; padding-bottom: 34px; }
.solo .tel { --w: clamp(220px, 64vw, 310px); }

/* ───────── Secciones ───────── */
.seccion { padding-block: var(--aire); }
.seccion--tinte { background: var(--tinte); }

.partida { display: grid; gap: clamp(56px, 8vw, 96px); align-items: center; }

/* La etiqueta chica de arriba de las tarjetas. */
.indice-num {
  font: 600 13px/1 var(--sans); letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: var(--acento); padding-top: .62em;
}

/* El directorio: las categorías como el índice de una guía. Filete grueso
   arriba de cada una, el nombre en serif y, debajo, lo que hay dentro. */
.directorio { display: grid; gap: 0 clamp(28px, 4vw, 56px); margin-top: clamp(40px, 6vw, 72px); }
.rubro { padding: 20px 0 26px; border-top: 2px solid var(--texto); }
.rubro h3 { font-size: clamp(22px, 1.3vw + 16px, 28px); }
.rubro p { margin-top: 8px; color: var(--suave); font-size: 16.5px; line-height: 1.5; max-width: 30em; }
/* La primera (Salud) y la segunda (dónde comer) son lo que más se busca. */
.rubro:nth-child(-n + 2) h3 { color: var(--acento); }
.directorio-nota { padding-top: 18px; border-top: 1px solid var(--linea); color: var(--suave); font-size: 15.5px; }

.practico { margin-top: clamp(64px, 9vw, 120px); }
.titulo-medio { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.02em; margin-bottom: clamp(24px, 3vw, 36px); }

/* Título + explicación, en rejilla. */
.hechos { display: grid; gap: 26px 36px; margin-top: clamp(36px, 5vw, 52px); }
.hechos dt { font: 700 clamp(19px, 1vw + 15px, 22px)/1.2 var(--serif); letter-spacing: -.01em; }
.hechos dd { margin-top: 6px; color: var(--suave); font-size: 16.5px; line-height: 1.5; }
.hechos div { padding-top: 18px; border-top: 2px solid var(--texto); }
.hechos--noche div { border-top: 1px solid var(--noche-linea); }
.hechos--noche dd { color: var(--noche-suave); }
.hechos--noche dt { color: var(--noche-texto); }

/* ───────── Esme ───────── */
.esme {
  position: relative;
  padding-block: var(--aire);
  background:
    radial-gradient(50% 46% at 82% 50%, rgb(61 240 166 / .16), transparent 70%),
    radial-gradient(60% 60% at 10% 0%, rgb(22 110 128 / .50), transparent 70%),
    linear-gradient(180deg, #06141f, #04101a);
  overflow: hidden;
}
/* Lo que le preguntas, como globos de chat: unos tuyos (cian) y, alternados,
   más apagados, para que se lea como una ráfaga de preguntas y no como menú. */
.burbujas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(30px, 4vw, 42px); max-width: 560px; }
.burbujas li {
  padding: 10px 17px; border-radius: 20px 20px 20px 6px;
  font-size: 16px; line-height: 1.3; font-weight: 500;
  background: rgb(255 255 255 / .08); color: var(--noche-texto);
  border: 1px solid var(--noche-linea);
}
.burbujas li:nth-child(3n + 2) {
  background: var(--cian); color: #032a36; border-color: transparent;
  border-radius: 20px 20px 6px 20px;
}

/* ───────── Ofertas y fin de semana ───────── */
.cabeza { max-width: 900px; }
.tarjetas { display: grid; gap: 20px; margin-top: clamp(44px, 6vw, 80px); }
.tarjeta {
  display: grid; align-content: space-between; gap: clamp(32px, 4vw, 48px);
  padding: clamp(26px, 3.6vw, 48px);
  border-radius: clamp(24px, 3vw, 36px);
  background: var(--tinte);
  overflow: hidden;   /* el teléfono de la agenda asoma y se corta abajo */
}
.tarjeta .indice-num { display: block; padding: 0 0 14px; text-transform: uppercase; }
.tarjeta h3 { font-size: clamp(27px, 2vw + 18px, 38px); letter-spacing: -.018em; }
.tarjeta p { margin-top: 12px; color: var(--suave); max-width: 27em; }

/* Solo asoma la parte de arriba del teléfono (los filtros y el primer evento):
   lo de abajo de esa pantalla está vacío y no hace falta enseñarlo. */
.tarjeta--asoma { padding-bottom: 0; }
.tarjeta--asoma .tel { --w: 240px; justify-self: center; margin-bottom: calc(var(--w) * -1.02); }

/* El cupón: un boleto con su talón, las dos muescas y la línea de corte. */
.cupon {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  border-radius: 20px; color: var(--noche-texto);
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(22 110 128 / .9), transparent 70%),
    linear-gradient(135deg, #0a2636, #05121c);
  box-shadow: 0 24px 40px -26px rgb(var(--sombra) / .6);
  rotate: -2deg;
  /* En oscuro el boleto y la tarjeta son casi del mismo tono: el filo lo despega. */
  outline: 1px solid rgb(255 255 255 / .10); outline-offset: -1px;
}
.cupon-cuerpo { display: grid; gap: 8px; align-content: center; padding: clamp(20px, 2.6vw, 30px); min-width: 0; }
.cupon-eti { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--esme); }
.cupon-grande { font: 700 clamp(22px, 1.6vw + 15px, 30px)/1.1 var(--serif); letter-spacing: -.015em; }
.cupon-codigo { font: 500 13px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .1em; white-space: nowrap; color: var(--noche-suave); margin-top: 6px; }
.cupon-talon { position: relative; display: grid; place-items: center; padding: clamp(16px, 2vw, 24px); border-left: 2px dashed rgb(255 255 255 / .28); }
/* Las muescas son dos círculos del color de la tarjeta, sobre la línea de corte. */
.cupon-talon::before, .cupon-talon::after {
  content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--tinte);
}
.cupon-talon::before { top: -11px; }
.cupon-talon::after { bottom: -11px; }
.cupon-qr { width: clamp(76px, 9vw, 104px); height: auto; padding: 7px; border-radius: 10px; background: #f7f5ef; fill: #05121c; }
.cupon-qr .qr-hueco { fill: #f7f5ef; }

/* ───────── La conversación con Esme, dibujada ─────────
   Misma caja que una captura (1206 × 2622) dentro del mismo marco. Los tamaños
   van en `em` sobre una letra que sale de --w: se encoge con el teléfono. */
.pantalla {
  aspect-ratio: 1206 / 2622;
  display: grid; grid-template-rows: auto 1fr auto;
  border-radius: calc(var(--w) * .142);
  background: #f7f5ef; color: #16211d;
  position: relative;
  font-size: calc(var(--w) * .0405); line-height: 1.38;
  overflow: hidden;
}
/* La isla del iPhone: en las capturas ya viene; aquí hay que dibujarla. */
.pantalla::before {
  content: ""; position: absolute; left: 50%; top: 1.05em; translate: -50% 0;
  width: 6.9em; height: 2em; border-radius: 99em; background: #000;
}
.chat-cabeza { display: flex; align-items: center; gap: .8em; padding: 4.1em 1.2em 1em; border-bottom: 1px solid #e2ded3; }
.chat-cara { width: 3.1em; height: auto; flex: none; background: none; border-radius: 0; }
.chat-cabeza strong { display: block; font: 700 1.3em/1.1 var(--serif); }
.chat-cabeza span { display: block; margin-top: .2em; font-size: .86em; color: #5b665f; }
.chat { display: flex; flex-direction: column; gap: .7em; padding: 1.1em 1em; }
.globo {
  max-width: 86%; padding: .7em .95em;
  border-radius: 1.3em 1.3em 1.3em .4em;
  background: #fff; box-shadow: 0 1px 2px rgb(22 33 29 / .08), 0 6px 14px -8px rgb(22 33 29 / .18);
}
.globo--yo { align-self: flex-end; border-radius: 1.3em 1.3em .4em 1.3em; background: #29c6e8; color: #032a36; font-weight: 500; box-shadow: none; }
.globo--plan { max-width: 94%; display: grid; gap: .5em; padding: 1em; border-radius: 1.3em; }
.plan-eti { font-size: .74em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #2456c6; }
.globo--plan strong { font: 700 1.2em/1.15 var(--serif); }
.globo--plan ol { display: grid; gap: .55em; margin-top: .2em; }
.globo--plan li { display: grid; grid-template-columns: 3.1em 1fr; gap: .4em; font-size: .92em; }
.globo--plan b { font-variant-numeric: tabular-nums; color: #006a8e; }
.globo--plan li span { color: #46514b; }
.resultado { display: flex; align-items: center; gap: .7em; max-width: 94%; padding: .6em .8em; border-radius: 1em; background: #fff; box-shadow: 0 1px 2px rgb(22 33 29 / .08); }
.resultado i { flex: none; width: 2.3em; height: 2.3em; border-radius: .6em; background: linear-gradient(135deg, #e1f5fb, #b9e6f3); }
.resultado b { display: block; font: 700 1em/1.2 var(--serif); }
.resultado small { display: block; margin-top: .15em; font-size: .78em; color: #2e7d4f; }
.plan-boton { margin-top: .4em; padding: .7em; border-radius: .9em; text-align: center; font-weight: 600; background: #29c6e8; color: #032a36; }
.chat-pie { padding: .8em 1em 1.7em; }
.chat-fichas { display: flex; gap: .5em; margin-bottom: .8em; white-space: nowrap; overflow: hidden; }
.chat-fichas span { padding: .5em .9em; border-radius: 99em; font-size: .9em; font-weight: 500; background: #e1f5fb; color: #006a8e; }
.chat-campo { display: block; padding: .8em 1.1em; border-radius: 99em; background: #efede5; color: #6b756f; }
.pie-foto { position: absolute; left: 0; right: 0; top: calc(100% + 14px); text-align: center; font-size: 13.5px; color: var(--noche-suave); rotate: 0deg; }

/* ───────── Y además: lo del día ─────────
   Una franja compacta: título chico, cuatro renglones y un teléfono pequeño
   que asoma. Pesa menos que cualquier otra sección, a propósito. */
.ademas { padding-bottom: var(--aire); }
.ademas-caja {
  display: grid; gap: 28px clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(26px, 3.6vw, 44px) clamp(26px, 3.6vw, 48px);
  border-radius: clamp(24px, 3vw, 36px);
  border: 1px solid var(--linea);
  overflow: hidden;
}
.ademas .ceja { margin-bottom: 14px; }
.ademas h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.ademas-lista { display: grid; gap: 8px 32px; margin-top: 20px; color: var(--suave); font-size: 16.5px; line-height: 1.45; }
.ademas-lista strong { color: var(--texto); font-weight: 650; }
.ademas .tel { --w: 168px; justify-self: center; margin-bottom: calc(var(--w) * -1.25); align-self: start; }

/* ───────── Para negocios ───────── */
.tarjeton {
  display: grid; gap: clamp(36px, 5vw, 64px);
  padding: clamp(28px, 5vw, 72px);
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--sup);
  border: 1px solid var(--linea);
  box-shadow: 0 30px 60px -40px rgb(var(--sombra) / .35);
}
.tarjeton h2 { font-size: clamp(32px, 4.2vw, 54px); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: clamp(28px, 3.4vw, 40px); }
.acciones-nota { font-size: 15px; color: var(--suave); }
.acciones-nota a { color: var(--acento); text-underline-offset: 3px; }
/* El correo no se parte en dos renglones: partido, parece otro correo. */
.junto { white-space: nowrap; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 12px 26px;
  border-radius: 14px;   /* Radio.boton de la app */
  background: var(--boton); color: var(--sobre-boton);
  font: 600 17px/1.2 var(--sans); text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgb(var(--sombra) / .6); }
.boton:active { transform: scale(.98); }

.lista-marcas { display: grid; gap: 0; align-content: start; }
.lista-marcas li {
  position: relative;
  padding: 18px 0 18px 34px;
  border-top: 1px solid var(--linea);
  color: var(--suave); font-size: 16.5px; line-height: 1.5;
}
.lista-marcas li:first-child { border-top: 0; padding-top: 0; }
.lista-marcas li:first-child::before { top: 7px; }
.lista-marcas--dos li:first-child { padding-top: 18px; border-top: 1px solid var(--linea); }
.lista-marcas--dos li:first-child::before { top: 25px; }
.lista-marcas strong { color: var(--texto); font-weight: 650; }
/* La palomita: un pin en miniatura, del azul de la marca. */
.lista-marcas li::before {
  content: ""; position: absolute; left: 2px; top: 25px;
  width: 14px; height: 14px; border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: var(--azul);
}

/* ───────── Privacidad ───────── */
.franja { padding-block: clamp(64px, 9vw, 120px); }
.franja-dentro { max-width: 900px; text-align: center; }
.franja h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.08; }
.franja p { margin-top: 18px; color: var(--suave); }
.franja a { color: var(--acento); font-weight: 600; text-underline-offset: 3px; }

/* ───────── Pie ───────── */
.pie { padding-block: clamp(56px, 7vw, 88px) clamp(36px, 4vw, 48px); background: #04101a; }
.pie-dentro { display: grid; gap: 40px; }
.pie-marca p { margin-top: 14px; font: 600 clamp(22px, 2vw + 14px, 30px)/1.15 var(--serif); letter-spacing: -.01em; }
.pie .tiendas { margin-top: 24px; }
.pie-nav { display: grid; gap: 4px; align-content: start; justify-items: start; font-size: 16px; }
.pie-nav a { color: var(--noche-suave); text-decoration: none; padding: 7px 0; transition: color .2s; }
.pie-nav a:hover { color: var(--noche-texto); text-decoration: underline; text-underline-offset: 4px; }
.pie-legal {
  padding-top: 24px; border-top: 1px solid var(--noche-linea);
  font-size: 14px; color: var(--noche-suave);
}

/* ───────── De tableta para arriba ───────── */
@media (min-width: 700px) {
  .barra-nav { display: flex; }
  .barra-nav a:not(.barra-cta) { display: none; }
  .directorio { grid-template-columns: 1fr 1fr; }
  .hechos--tres { grid-template-columns: 1fr 1fr; }
  .ademas-caja { grid-template-columns: 1fr auto; }
  .ademas-lista { grid-template-columns: 1fr 1fr; }
  .hechos { grid-template-columns: 1fr 1fr; }
  .pie-dentro { grid-template-columns: 1.5fr 1fr; }
  .pie-legal { grid-column: 1 / -1; }
  .pie-nav { justify-self: end; }
}

/* ───────── Escritorio ───────── */
@media (min-width: 980px) {
  .barra-nav a:not(.barra-cta) { display: inline; }
  /* Que «Lo que buscas,» quepa en UN renglón al lado de los teléfonos. */
  h1 { font-size: clamp(64px, 6.9vw, 104px); }

  .heroe {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
    align-items: center;
    padding-top: clamp(40px, 5vw, 76px);
    padding-bottom: 0;
  }
  .heroe-texto { padding-bottom: clamp(56px, 6vw, 96px); }
  /* En escritorio la tarjeta se disuelve: el rótulo y las preguntas se quedan
     en la columna del texto y el robot se planta delante de los teléfonos,
     entre las dos columnas. De ahí la profundidad: teléfono de atrás,
     teléfono de delante, robot. */
  .esme-portada {
    display: block; max-width: 440px;
    padding: 0 0 0 20px; border: 0; border-radius: 0; background: none;
    border-left: 2px solid var(--esme);
  }
  .esme-rotulo strong { display: inline; margin: 0; font-size: 34px; }
  .esme-rotulo { font-size: 20px; }
  .punto { display: inline; }
  .burbujas.burbujas--portada { margin-top: 16px; }
  .robot--portada {
    position: absolute; z-index: 3;
    width: clamp(250px, 22.5vw, 330px);
    left: calc(57% - clamp(250px, 22.5vw, 330px) / 2);
    bottom: 34px;
  }
  .heroe-telefonos { margin-bottom: -150px; justify-content: flex-end; padding-right: 2%; }
  .heroe-telefonos .tel--frente { --w: clamp(280px, 25vw, 340px); }
  .heroe-telefonos .tel--atras { --w: clamp(220px, 19.5vw, 265px); }

  .partida { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 6vw, 110px); }
  .partida--volteada { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .partida--volteada .partida-texto { order: 2; }
  .duo .tel--frente { --w: clamp(250px, 22vw, 300px); }
  .duo .tel--atras { --w: clamp(215px, 19vw, 256px); }
  .solo .tel { --w: clamp(280px, 25vw, 330px); }

  .tarjetas { grid-template-columns: 1fr 1fr; gap: 24px; }
  .tarjeta--asoma .tel { --w: 270px; }

  .tarjeton { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .hechos--noche { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
  .hechos--tres { grid-template-columns: 1fr 1fr 1fr; }
  .directorio { grid-template-columns: 1fr 1fr 1fr; }
  .lista-marcas--dos { grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .ademas .tel { --w: 190px; margin-right: clamp(0px, 3vw, 48px); margin-top: -8px; margin-bottom: calc(var(--w) * -1.5); }
}

/* ───────── Movimiento ─────────
   Sobrio, y solo para quien no pidió menos movimiento. Lo de «aparecer al
   entrar» es mejora progresiva: sin `animation-timeline: view()` (Safari y
   Firefox de hoy) todo está simplemente ahí, que es lo correcto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .barra-nav a, .pie-nav a { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* El teléfono de la portada respira. */
  .heroe-telefonos .tel--frente { animation: flotar 9s ease-in-out infinite alternate; }
  .heroe-telefonos .tel--atras { animation: flotar 11s ease-in-out -4s infinite alternate; }
  /* Esme flota, muy poco: es un robot, no un globo. La sombra se queda en
     el piso (va en el ::after del marco, no en la imagen). */
  .robot img { animation: flotar-robot 5.5s ease-in-out infinite alternate; }

  @supports (animation-timeline: view()) {
    .partida-texto > *, .cabeza > *, .rubro, .hechos--tres > div, .ademas-caja, .tarjeta, .tarjeton, .franja-dentro > *,
    .duo .tel, .solo .tel {
      animation: aparecer linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .duo .tel--atras { animation-range: entry 10% entry 80%; }
  }
}

@keyframes flotar { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes aparecer { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes flotar-robot { from { translate: 0 3px; } to { translate: 0 -6px; } }