/*
 * Estilos propios de /  (Inicio), por encima de `web/base.css`. Mismo aviso que `base.css`:
 * Propshaft mete este fichero en la app entera, asi que todo selector nuevo va con el prefijo
 * `.web-` o con `.web` de ancestro.
 *
 * VERSION 4 (24-sep-2026, `docs/decisions/ui.md`). La portada se rehizo para quien busca ayuda con
 * algo que le cuesta, con una regla dura: al aterrizar en la app no puede encontrarse otra cosa.
 * De ahi salen las tres piezas nuevas de este fichero: el hero sobre `--cielo-dia`, la tarjeta de
 * grupo calcada de `.mb` (`cohortes/_miembro`) y las puertas, que NO se estilan aqui -- son
 * `comun/_tarjeta` con el `tarjeta.css` de la app, enlazado por `layouts/web`; aqui solo va la
 * rejilla que las reparte.
 *
 * Lo que se fue con la v4: la tira del campamento del hero (`.web-postal-tira*`, sustituida por
 * `.web-grupo`), los chips del hero, la postal de las tres mascotas de la seccion de la mascota
 * (`.web-postal--mascota`) y la seccion aparte de personalizacion (`.web-personaliza*`), que se
 * fundio con la de la mascota.
 *
 * Las clases siguen diciendo "momo" en la seccion de la mascota: el nombre sale del COPY visible
 * (`docs/DECISIONS.md`, 20-ago-2026), no de los identificadores.
 */

/* ---------- 0. Piezas compartidas ---------- */

/* `.web ` DELANTE a proposito, y no `.web-inicio-p` a secas: `base.css` fija `.web p{font-size:18px}`
   (clase + elemento = 0,1,1), que gana a una clase sola (0,1,0). Misma trampa con `.web h2`. */
.web .web-inicio-p{
  font-size: 17px; line-height: 1.55; font-weight: 700; color: var(--tinta2); max-width: 480px;
  text-wrap: pretty;
}

/* Tres tamaños de titular en toda la portada: h1 56, h2 36, h3 (el de cada estacion) 22. El
   rotulo de seccion sube a 13px, por encima de los 11 de `base.css`, que siguen en las demas
   paginas. */
.web-encabezado{ display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-bottom: 44px; }
.web-encabezado h2,.web-companion-texto h2,.web-momo-texto h2,.web-cierre-cont h2{
  font-size: 36px; line-height: 1.08; letter-spacing: -.02em;
  font-weight: var(--peso-titulo); text-wrap: balance;
}
.web .web-encabezado-sub{ font-size: 17px; line-height: 1.55; max-width: 540px; text-wrap: pretty; }

/* El rotulo de la app (`rotulo.css`) sin copia: aqui solo cambia la escala. Un punto mas grande que
   los 9px de dentro porque se lee a un metro de la pantalla, y sin el margen de debajo, que en la
   app reserva el foco de un campo. */
.web .rotulo{ margin: 0; padding: 3px 10px; font-size: 10.5px; }

/* La pastilla del tipo que enseña la captura de al lado: vainilla, el color de lo activo en la app. */
.web-chip--vainilla{ background: var(--vainilla); }

/* `momo/figura` trae el trazo de su arte con la clase `.cs`, cuyo grosor vive en `application.css`,
   que la landing no carga: se replica solo ese trazo. Lo usan la tarjeta de grupo del hero y la
   figura vestida de la seccion de la mascota. */
.web-figura{ overflow: visible; }
.web-figura .cs{
  fill: none; stroke: var(--tinta); stroke-width: .8; stroke-linejoin: round; stroke-linecap: round;
}
.web-figura .cs.fina{ stroke-width: .7; }
.web-figura .cs.gruesa{ stroke-width: 1.2; }
.web-figura [stroke-width]{ stroke-width: .8; }

/* ---------- 1. Hero ---------- */
.web-hero{ background: var(--cielo-dia); padding: 72px 0 88px; }
.web-hero-cont{
  display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 56px; align-items: center;
}
.web-hero-texto{ display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.web-hero-texto h1{ font-size: 56px; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.web .web-hero-sub{
  font-size: 19px; line-height: 1.55; font-weight: 700; color: var(--tinta2);
  max-width: 520px; text-wrap: pretty;
}
.web-hero-cta{ margin-top: 4px; }

/* ---------- 2. La postal ---------- */
/* El marco de paisaje de `web/inicio/_postal`. Tres medidas cuelgan de la variante: el tamaño del
   marco, la banda de hierba (`--prado`) y las colinas (`--cerros`), estas dos en PORCENTAJE del alto
   para que la misma escena valga en escritorio y en movil sin recolocar el horizonte a mano.
 *
 * Los verdes son los del artboard aprobado (29-ago-2026), no los de la escena de la app: aqui la
 * escena es un recorte sobre papel y con los de la app se lee como una mancha. */
.web-postal{
  position: relative; flex-shrink: 0; overflow: hidden;
  width: var(--postal-ancho); max-width: 100%; height: var(--postal-alto);
  border-radius: 34px; border: var(--contorno) solid var(--tinta);
  box-shadow: 0 2px 0 var(--som); background: var(--cielo);
}
.web-postal-prado{ position: absolute; left: 0; right: 0; bottom: 0; height: var(--prado); background: #D2EBC6; }
.web-postal-cerros{ position: absolute; left: 0; right: 0; bottom: var(--prado); height: var(--cerros); }
.web-postal-cerros svg{ display: block; width: 100%; height: 100%; }
.web-postal-arbol{ position: absolute; }
.web-postal-arbol svg{ display: block; width: 100%; height: auto; }

/* La fila de mascotas: su borde INFERIOR es la linea de suelo, y `flex-end` hace que figuras de
   tamaños distintos pisen la misma hierba. */
.web-postal-fila{
  position: absolute; left: 0; right: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
}
.web-postal-fila--sola{ left: auto; }

/* Los PNG dejan un 14,45 % de alto transparente bajo las patas: el margen negativo lo devuelve para
   que la caja acabe donde acaba la mascota. */
.web-peana{
  position: relative; flex-shrink: 0;
  width: var(--peana); height: var(--peana);
  margin-bottom: calc(var(--peana) * -0.1445);
}
.web-peana img{ position: absolute; left: 0; bottom: 0; z-index: 2; display: block; width: 100%; height: auto; }

/* El telefono de las estaciones, plantado en la hierba y recortado por el borde de abajo de la
   postal: se lee como una ventana a la app, no como un aparato posado. Mide 310px (240 en movil)
   para que la captura se lea: a 200 el texto de la app quedaba en 5px y no se entendia. */
.web-postal-movil{ position: absolute; z-index: 2; }
.web-postal-movil .web-movil{ width: 310px; }

/* --- 2.1 Variante "hero": el grupo y su tarjeta --- */
.web-postal--hero{ --postal-ancho: 540px; --postal-alto: 520px; --prado: 60%; --cerros: 22%; }
.web-postal--hero .web-postal-arbol--1{ left: 1.1%; bottom: 68.9%; width: 36px; }
.web-postal--hero .web-postal-arbol--2{ left: 91.5%; bottom: 69.7%; width: 41px; }
.web-postal--hero .web-postal-fila{ bottom: 50.4%; padding: 0 40px; }
.web-postal--hero .web-peana + .web-peana{ margin-left: -6px; }
.web-postal--hero .web-peana--azul{ --peana: 130px; }
.web-postal--hero .web-peana--centro{ --peana: 190px; }
.web-postal--hero .web-peana--dormido{ --peana: 120px; }

/* LA TARJETA DE GRUPO, calcada de la lista de miembros de la pantalla del reto (§ 25 de
   `application.css`, `.mb*`): mismas medidas de fila (avatar 38, columna de hoy 44), la misma raya
   discontinua entre filas, el vainilla de `.mb.tuyo` y el chip `.chip-hoy`. Solo el chasis de
   fuera es de la portada: una tarjeta blanca apoyada en el borde de abajo de la postal. */
.web-grupo{
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 4;
  padding: 14px 16px 9px; border-radius: 20px;
  border: var(--contorno) solid var(--tinta); box-shadow: 0 2px 0 var(--som); background: var(--fondo);
}
.web .web-grupo-cabecera{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px;
}
.web-grupo-cabecera b{ font-size: 15px; font-weight: var(--peso-titulo); letter-spacing: -.015em; color: var(--tinta); }
.web-grupo-cabecera span{ font-size: 12px; font-weight: 700; color: var(--tinta2); }
.web-grupo-miembros{ margin: 0; padding: 0; list-style: none; }
.web-mb{
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-bottom: var(--contorno-fino) dashed rgba(75,75,75,.18);
}
.web-mb:last-child{ border-bottom: none; }
.web-mb--tuya{ background: var(--vainilla-cl); border: 0; border-radius: 14px; padding: 5px 6px; margin: 3px -4px; }
.web-mb-ava{ display: block; width: 38px; height: 38px; flex: 0 0 auto; }
.web-mb-txt{ flex: 1; min-width: 0; }
.web-mb-l1{ display: flex; align-items: baseline; gap: 6px; }
.web-mb-l1 > b{ font-size: 13.5px; font-weight: var(--peso-fuerte); letter-spacing: -.01em; }
.web-mb-cuenta{
  margin-left: auto; font-size: 10.5px; font-weight: var(--peso-fuerte); letter-spacing: .02em;
  color: var(--tinta2); white-space: nowrap;
}
.web-mb-cuenta b{ font-size: 13px; color: var(--tinta); }
.web-mb-barra{ display: block; height: 10px; margin-top: 4px; border-radius: 999px; background: var(--pista); overflow: hidden; }
.web-mb-barra i{
  display: block; height: 100%; border-radius: 999px; background: var(--menta-cl);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55);
}
.web-mb-hoy{ width: 44px; flex: 0 0 auto; display: flex; justify-content: center; }
.web-mb-chip{
  padding: 2px 7px; border: var(--contorno-fino) solid var(--tinta); border-radius: 999px;
  background: var(--menta-cl); box-shadow: 0 1px 0 var(--menta);
  font-size: 10px; font-weight: var(--peso-fuerte); white-space: nowrap;
}

/* --- 2.2 Variante "estacion": un telefono y una mascota --- */
.web-postal--estacion{ --postal-ancho: 580px; --postal-alto: 560px; --prado: 34%; --cerros: 24%; }
.web-postal--estacion .web-postal-arbol--1{ left: 62%; bottom: 43%; width: 32px; }
.web-postal--estacion .web-postal-arbol--2{ left: 93%; bottom: 43.5%; width: 28px; }
.web-postal--estacion .web-postal-movil{ left: 40px; top: 44px; }
.web-postal--estacion .web-postal-fila{ right: 18px; bottom: 22%; z-index: 3; }
.web-postal--estacion .web-peana--sola{ --peana: 170px; }
/* La estacion 2 es mas baja para que la postal corte el telefono justo despues de «Registrar mi
   dia» (el 48 % del alto de la captura): enseña el paso de hoy y deja fuera la lista del
   campamento, que numera a cada persona y en una portada se leeria como un marcador. Se acorta la
   postal y no se baja el telefono: bajado, dejaba 240px de cielo vacio encima. */
.web-estacion--2 .web-postal--estacion{ --postal-alto: 420px; }
.web-estacion--2 .web-postal--estacion .web-postal-movil{ top: 98px; }

/* ---------- 3. ¿Que te cuesta? ---------- */
/* Las puertas son `comun/_tarjeta` con el CSS de la app. La portada solo decide la rejilla: una
   columna por categoria en escritorio, del ancho de la columna del movil (≈340px), para que cada
   tarjeta mida lo que mide dentro. */
.web-retos{ padding: 96px 0 40px; background: var(--fondo); --cinta: var(--cielo); }
.web-puertas{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
.web-puertas-categoria h3{ margin: 0 0 14px; }
.web-puertas-lista{ display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.web-puertas-lista .tarjeta{ margin-bottom: 0; }
/* La frase de cada puerta es de la portada y algo mas larga que la de la app: tres lineas en vez de
   dos, al mismo cuerpo de letra. */
.web-puertas-lista .t-meta > .t-descripcion{ -webkit-line-clamp: 3; font-size: 12px; }

/* ---------- 4. Como funciona ---------- */
/* El tramo comparte el blanco de la pagina. Solo el texto de cada paso se apoya en una forma
   pastel sin borde ni sombra; la postal queda siempre sobre blanco. */
.web-como{
  overflow: hidden; background: var(--fondo); padding: 8px 0 56px; --cinta: var(--cielo);
}
.web-como-cont{ display: flex; flex-direction: column; gap: 8px; }

.web-estacion{
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 580px;
  gap: 56px; align-items: center; padding: 44px 0 44px 40px;
}
.web-estacion-texto::before{
  content: ""; position: absolute; z-index: -1; inset: -34px -30px -38px -40px;
  border-radius: 54% 46% 51% 49% / 46% 54% 47% 53%;
  background: var(--cielo); transform: rotate(-.8deg);
}
.web-estacion--2 .web-estacion-texto::before{
  inset: -36px -42px -40px -30px;
  border-radius: 47% 53% 55% 45% / 54% 46% 52% 48%;
  background: var(--vainilla-cl); transform: rotate(.8deg);
}
.web-estacion--3 .web-estacion-texto::before{
  inset: -34px -34px -38px -42px;
  border-radius: 56% 44% 48% 52% / 45% 55% 49% 51%;
  background: var(--lavanda-cl); transform: rotate(-.5deg);
}
/* Alterna lado. El orden del HTML es siempre texto -> postal; en la invertida solo se mueve la
   columna visual. */
.web-estacion--invertida{ grid-template-columns: 580px minmax(0, 1fr); padding: 44px 40px 44px 0; }
.web-estacion--invertida .web-estacion-texto{ order: 2; }
.web-estacion--invertida .web-estacion-arte{ order: 1; justify-content: flex-start; }
.web-estacion-texto{
  position: relative; z-index: 1; isolation: isolate;
  display: flex; flex-direction: column; gap: 16px;
}
.web-estacion-arte{ position: relative; z-index: 1; display: flex; justify-content: flex-end; }

/* El rotulo numerado ES el titulo de la estacion: caja con el ordinal y el nombre al lado. */
.web-estacion-rotulo{ display: flex; align-items: center; gap: 12px; margin: 0; }
.web-num{
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  border: var(--contorno) solid var(--tinta); background: var(--fondo); box-shadow: 0 1px 0 var(--som);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 900;
  /* `color` explicito: el rotulo es un `<p>` y heredaria el `--tinta2` de todo parrafo. */
  color: var(--tinta);
}
.web .web-estacion-nombre{ font-size: 22px; font-weight: 800; color: var(--tinta); letter-spacing: -.01em; }
.web-estacion-texto h2{
  font-size: 36px; line-height: 1.08; letter-spacing: -.02em;
  font-weight: var(--peso-titulo); text-wrap: balance;
}
.web .web-estacion-sub{
  margin: 0; max-width: 470px; font-size: 17px; line-height: 1.55;
  font-weight: 700; color: var(--tinta2); text-wrap: pretty;
}
.web-tipos{ display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }

/* ---------- 5. Modo companion ---------- */
/* El acento es el chicle, el color del companion dentro de la app. Va SOLO en el rotulo (la receta
   de `.rotulo` en chicle) y en la forma que recoge el telefono; los chips de las opciones son
   blancos porque aqui ninguna esta elegida. */
.web-companion{ overflow: hidden; padding: 40px 0 96px; background: var(--fondo); --cinta: var(--cielo); }
.web-companion-cont{
  display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 72px; align-items: center;
}
.web-companion-texto{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.web .web-companion-rotulo{
  display: inline-block; padding: 3px 10px;
  background: var(--chicle); border: var(--contorno-fino) solid var(--tinta); border-radius: 999px;
  box-shadow: 0 var(--sombra-rotulo) 0 var(--chicle-s);
  font-size: 10.5px; font-weight: var(--peso-fuerte); letter-spacing: .1em; color: var(--tinta);
}
.web-companion-opciones{ display: flex; flex-direction: column; gap: 14px; margin: 6px 0 0; }
.web-companion-opciones dt{ margin: 0 0 8px; font-size: 13px; font-weight: var(--peso-fuerte); color: var(--tinta); }
.web-companion-opciones dd{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.web-companion-opciones .web-chip{ height: 30px; padding: 0 13px; font-size: 12px; }
.web-companion-arte{ position: relative; display: flex; justify-content: center; padding: 28px 0; }
.web-companion-arte::before{
  content: ""; position: absolute; inset: 0 10px;
  border-radius: 51% 49% 46% 54% / 44% 52% 48% 56%;
  background: color-mix(in srgb, var(--chicle) 32%, var(--fondo)); transform: rotate(-2deg);
}
.web-companion-arte .web-movil{ position: relative; }

/* ---------- 6. Tu mascota ---------- */
/* La captura del Armario prueba donde se elige y la figura grande enseña el resultado con el MISMO
   parcial de la app. El ovalo de cielo agrupa el collage sin bordearlo como una tarjeta. */
.web-momo{ overflow: hidden; padding: 88px 0; background: var(--lavanda-cl); }
.web-momo-cont{
  display: grid; grid-template-columns: 540px minmax(0, 1fr); gap: 80px; align-items: center;
}
.web-momo-texto{ display: flex; flex-direction: column; gap: 16px; }
.web-momo-pelajes{ display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.web-momo-pelajes i{
  display: block; width: 34px; height: 34px; border-radius: 999px;
  border: var(--contorno) solid var(--tinta); box-shadow: 0 1px 0 var(--som);
}
.web-momo-arte{ position: relative; order: -1; min-height: 560px; }
.web-momo-arte::before{
  content: ""; position: absolute; width: 370px; height: 370px; left: 210px; top: 190px;
  border-radius: 53% 47% 45% 55% / 48% 55% 45% 52%;
  background: var(--fondo); transform: rotate(-3deg);
}
.web-momo-movil{ position: absolute; z-index: 2; left: 10px; top: 0; }
.web-momo-muestra{
  position: absolute; z-index: 3; right: 0; bottom: 36px;
  width: 290px; display: flex; justify-content: center;
}
.web-momo-figura{ display: block; width: 280px; height: auto; }

/* ---------- 7. Por que en compañia ---------- */
.web-por-que{ padding: 96px 0 88px; background: var(--fondo); --cinta: var(--cielo); }
/* La entradilla cabe en una línea en escritorio: sin el tope de ancho del encabezado común. */
.web-por-que .web-encabezado,.web .web-por-que .web-encabezado-sub{ max-width: none; }
/* Índice numerado: numeral gigante en lila, revista y frase, enlace a la derecha. Sin filetes: las
   filas se separan solo con aire. */
.web-estudios{ display: flex; flex-direction: column; gap: 56px; margin: 0; padding: 0; list-style: none; }
.web-estudio{
  display: grid; grid-template-columns: 120px minmax(0, 1fr) 150px; gap: 32px; align-items: start;
}
.web .web-estudio-numero{
  font-size: 112px; line-height: .8; font-weight: var(--peso-titulo); letter-spacing: -.05em; color: var(--lavanda-s);
}
.web-estudio-cuerpo{ display: flex; flex-direction: column; gap: 10px; }
.web .web-estudio-origen{ font-size: 13px; line-height: 1.45; }
.web .web-estudio-revista{ font-weight: var(--peso-fuerte); color: var(--tinta); }
.web .web-estudio-detalle{ color: var(--tinta3); }
.web .web-estudio-frase{
  max-width: 760px; font-size: 26px; line-height: 1.3; font-weight: var(--peso-fuerte); letter-spacing: -.01em;
  color: var(--tinta); text-wrap: pretty;
}
.web .web-estudio-fuente{
  justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 13px; font-weight: 700; color: var(--tinta); text-decoration: none;
}
.web .web-estudio-fuente:hover{ color: var(--menta-d); }

/* ---------- 8. Preguntas ---------- */
/* `<details>` nativos: la landing no carga JavaScript. Cada pregunta es una tarjeta con el chasis
   de la app (contorno fino, radio 20, sombra dura de 2px) y el chevron dibujado con dos bordes de
   1,5px, el trazo de los iconos de interfaz. */
.web-preguntas{ padding: 8px 0 96px; background: var(--fondo); --cinta: var(--cielo); }
.web-preguntas-cont{ display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start; }
.web-preguntas-cont .web-encabezado{ margin-bottom: 0; }
.web-preguntas-lista{ display: flex; flex-direction: column; gap: 12px; }
.web-pregunta{
  border: var(--contorno) solid var(--tinta); border-radius: 20px;
  box-shadow: 0 2px 0 var(--som); background: var(--fondo);
}
.web-pregunta summary{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 22px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: var(--peso-fuerte); color: var(--tinta);
}
.web-pregunta summary::-webkit-details-marker{ display: none; }
.web-pregunta summary::marker{ content: ""; }
.web-pregunta summary::after{
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: -4px;
  border-right: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta);
  transform: rotate(45deg);
}
.web-pregunta[open] summary::after{ margin-top: 4px; transform: rotate(-135deg); }
.web .web-pregunta p{ padding: 0 22px 20px; font-size: 16px; line-height: 1.55; max-width: 620px; }

/* ---------- 9. Cierre ---------- */
/* El cielo del hero vuelve al final: la pagina abre y cierra con la misma luz que la raiz de la app. */
.web-cierre{ padding: 96px 0 0; background: var(--cielo-dia); }
.web-cierre-cont{ display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
/* Las tres mascotas del hero de pie en el prado, al ancho entero de la seccion. Las crestas son las
   de `_postal` (mismos verdes); `.web-postal-fila` pone a las tres sobre la misma linea de suelo. */
.web-cierre-escena{ position: relative; height: 200px; margin-top: 16px; }
.web-cierre-cerros{ position: absolute; left: 0; right: 0; bottom: 0; height: 140px; }
.web-cierre-cerros svg{ display: block; width: 100%; height: 100%; }
.web-cierre-fila{ bottom: 40px; }
.web-cierre-fila .web-peana + .web-peana{ margin-left: -4px; }
.web-cierre-fila .web-peana--azul{ --peana: 110px; }
.web-cierre-fila .web-peana--centro{ --peana: 150px; }
.web-cierre-fila .web-peana--dormido{ --peana: 100px; }

/* ---------- 10. <=900px: se apila ---------- */
/* Todo va a una columna dentro del gutter de 20px de `.web-cont`: las postales bajan a 350px, que es
   lo que queda de un movil de 390, y `max-width:100%` las encoge en pantallas aun mas estrechas. */
@media (max-width: 900px){
  .web-encabezado{ gap: 12px; margin-bottom: 28px; }
  .web-encabezado h2,.web-companion-texto h2,.web-momo-texto h2,.web-cierre-cont h2{ font-size: 28px; }
  .web .web-encabezado-sub,.web .web-inicio-p{ font-size: 16px; }

  .web-hero{ padding: 32px 0 44px; }
  .web-hero-cont{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .web-hero-texto{ gap: 16px; }
  .web-hero-texto h1{ font-size: 36px; }
  .web .web-hero-sub{ font-size: 16px; }
  /* En el movil el boton ocupa la columna, igual que `.cta` dentro de la app. */
  .web-hero-cta{ align-self: stretch; margin-top: 4px; }

  .web-postal--hero{ --postal-ancho: 350px; --postal-alto: 370px; --prado: 66%; --cerros: 15%; }
  .web-postal--hero .web-postal-arbol--1{ left: 2%; bottom: 73%; width: 24px; }
  .web-postal--hero .web-postal-arbol--2{ left: 88%; bottom: 74%; width: 27px; }
  .web-postal--hero .web-postal-fila{ bottom: 61%; padding: 0 20px; }
  .web-postal--hero .web-peana + .web-peana{ margin-left: -2px; }
  .web-postal--hero .web-peana--azul{ --peana: 80px; }
  .web-postal--hero .web-peana--centro{ --peana: 116px; }
  .web-postal--hero .web-peana--dormido{ --peana: 74px; }
  .web-grupo{ left: 12px; right: 12px; bottom: 12px; padding: 12px 12px 6px; }

  .web-retos{ padding: 56px 0 48px; }
  .web-puertas{ grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .web-como{ padding: 0 0 32px; }
  .web-como-cont{ gap: 4px; }
  .web-estacion,
  .web-estacion--invertida{
    grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 36px 0 32px;
  }
  .web-estacion-texto::before,
  .web-estacion--2 .web-estacion-texto::before,
  .web-estacion--3 .web-estacion-texto::before{ inset: -24px -22px -26px; }
  /* Apilada, la postal va SIEMPRE detras del texto. */
  .web-estacion--invertida .web-estacion-texto{ order: 0; }
  .web-estacion--invertida .web-estacion-arte{ order: 0; }
  .web-estacion-arte,
  .web-estacion--invertida .web-estacion-arte{ justify-content: center; }
  .web-estacion-rotulo{ gap: 10px; }
  .web-num{ width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
  .web .web-estacion-nombre{ font-size: 19px; }
  .web-estacion-texto h2{ font-size: 24px; }
  .web .web-estacion-sub{ font-size: 16px; }

  .web-postal--estacion{ --postal-ancho: 350px; --postal-alto: 440px; --prado: 30%; --cerros: 20%; }
  .web-postal--estacion .web-postal-arbol--1{ left: 77%; bottom: 36%; width: 23px; }
  .web-postal--estacion .web-postal-arbol--2{ left: 90%; bottom: 38%; width: 20px; }
  .web-postal--estacion .web-postal-movil{ left: 14px; top: 30px; }
  .web-estacion--2 .web-postal--estacion{ --postal-alto: 320px; }
  .web-estacion--2 .web-postal--estacion .web-postal-movil{ top: 71px; }
  .web-postal-movil .web-movil{ width: 240px; }
  .web-postal--estacion .web-postal-fila{ right: 4px; bottom: 16%; }
  .web-postal--estacion .web-peana--sola{ --peana: 92px; }

  .web-companion{ padding: 16px 0 48px; }
  .web-companion-cont{ grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .web-companion-arte .web-movil{ width: 240px !important; }

  .web-momo{ padding: 56px 0 40px; }
  .web-momo-cont{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .web-momo-arte{ order: 0; width: 100%; max-width: 350px; min-height: 470px; margin: 0 auto; }
  .web-momo-arte::before{ width: 240px; height: 250px; left: 110px; top: 215px; }
  .web-momo-movil{ left: 0; }
  /* Telefono y figura NO se pisan: con la figura encima se tapaba el texto de la captura. */
  .web-momo-movil .web-movil{ width: 200px !important; }
  .web-momo-muestra{ right: -8px; bottom: 30px; width: 160px; }
  .web-momo-figura{ width: 160px; }
  /* Las ocho muestras en una sola fila: a 34px con 10 de hueco se pasan de 350px. */
  .web-momo-pelajes{ gap: 8px; }
  .web-momo-pelajes i{ width: 30px; height: 30px; }

  .web-por-que{ padding: 56px 0 48px; }
  .web-estudios{ gap: 44px; }
  .web-estudio{ grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .web .web-estudio-numero{ font-size: 64px; line-height: .9; }
  .web .web-estudio-frase{ font-size: 19px; line-height: 1.4; }
  .web .web-estudio-fuente{ justify-self: start; }

  .web-preguntas{ padding: 8px 0 56px; }
  .web-preguntas-cont{ grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .web-pregunta summary{ padding: 14px 18px; font-size: 15px; }
  .web .web-pregunta p{ padding: 0 18px 18px; font-size: 15px; }

  .web-cierre{ padding: 56px 0 0; }
  .web-cierre-cont{ gap: 20px; }
  .web-cierre-escena{ height: 150px; margin-top: 12px; }
  .web-cierre-cerros{ height: 100px; }
  .web-cierre-fila{ bottom: 26px; }
  .web-cierre-fila .web-peana--azul{ --peana: 80px; }
  .web-cierre-fila .web-peana--centro{ --peana: 110px; }
  .web-cierre-fila .web-peana--dormido{ --peana: 74px; }
}