/* ==========================================================================
   Cuentela · portada.css — la puesta en escena de la portada y las landings
   --------------------------------------------------------------------------
   Web 2.0 (2026-10-03). La cargan SÓLO `index.html` y las trece landings
   `/para/{slug}` —la plantilla la nombra y `generar-landings.mjs` le pone su
   huella `?v=`—, igual que `que-me-llamen.css`. Vivió dentro de `estilos.css`
   como §10, §10c y §10d, y salió de ahí porque esa hoja la pagan TODAS las
   páginas de la carpeta: el que abre una cotización por WhatsApp no tiene por
   qué bajar el hero de la portada.

   Lo que NO cambia, y que esta hoja sólo viste:
   · La paleta. Todo color es un token del §1 de `estilos.css` o uno de los
     cinco de marca; las únicas cifras sueltas son las sombras teñidas de cacao
     y de rosa, que ya vivían aquí, y el tenue del cacao (#c5b3ba) que el §1
     usa en modo oscuro y aquí pinta la tarjeta de cacao en modo claro.
   · El copy, los `id` de las franjas, las marcas GENERADO y el contrato con
     `mosaico.js` (§3 de esta hoja: lienzo, relevo y `hero--estatico`).
   · Quicksand 700 para titulares y la pila del sistema para el cuerpo.

   Lo que sí es nuevo: una cabecera fija con las franjas, el hero en dos
   columnas en pantalla ancha —el mosaico grande a la derecha, y el logotipo
   3D se planta encima porque `mosaico.js` mide la caja del SVG—, el mapa como
   rejilla con la figura de cada herramienta, la jornada como línea de tiempo,
   el enlace dentro de un teléfono, los planes con el de paga en cacao y el
   cierre en un panel rosa. El movimiento es sólo `transform` y `opacity`, con
   la misma curva en toda la página, y se apaga entero con
   `prefers-reduced-motion` (§16 de esta hoja y §11 de `estilos.css`).

   Regla de color que se hereda del §10 de siempre: el Rosa Mexicano es forma
   (logotipo, teselas, iconos) y nunca letra menuda; la letra de marca va en
   `--accion`. El Maíz nunca es letra: es relleno con cacao encima.

   Formas: botones en píldora, teselas a 18 px (`--radio-tesela`), paneles
   grandes a 28 px (`--radio-panel`) y lo menudo a 10 px. Nada más.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de la puesta en escena
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) {
  /* Alias de la fuente del §1b de `estilos.css`. */
  --fuente-portada: var(--fuente-quicksand);

  /* Teselas de marca: forma, no letra. Sobre cacao el rosa de marca da 3.6:1 y
     toma el relevo el rosa-claro. */
  --tesela-marca: var(--cuentela-rosa);

  /* Halo del hero quieto. Con el mosaico vivo el lienzo pinta `--fondo` opaco
     y lo tapa: el color lo ponen entonces las teselas que vuelan. */
  --hero-tinte: rgb(228 40 124 / 10%);
  --hero-tinte-borde: rgb(228 40 124 / 3%);

  /* Velo del hero vivo: el mismo papel del fondo, detrás del texto. */
  --hero-velo: rgb(251 246 243 / 90%);

  /* La cabecera fija: translúcida sobre el papel. */
  --sitio-fondo: rgb(251 246 243 / 82%);
  /* La isla de la cabecera: 56 px de píldora y 12 de aire arriba y abajo. */
  --alto-sitio: 76px;

  /* La tarjeta de cacao del plan de paga, y su letra. */
  --plan-fondo: var(--cuentela-cacao);
  --plan-texto: var(--cuentela-papel);
  --plan-tenue: #c5b3ba; /* 7.75:1 sobre cacao — el tenue del §1 en oscuro */
  --plan-accion: var(--cuentela-rosa-claro);

  /* El panel del cierre: rosa con papel encima (5.75:1). */
  --panel-fondo: var(--accion);
  --panel-texto: var(--accion-texto);

  --radio-panel: 28px;

  /* La escala de letra. El dueño la pidió más contenida dos veces (la segunda
     el 2026-10-03: «sigo pensando que la fuente su tamaño es demasiado»), y
     la web anterior —lema de 48 y títulos de 36— era la referencia: ahora
     todo lo de exhibición queda por debajo de ella. El texto corrido se queda
     en 16 px; lo que baja es lo grande, que en Quicksand negrita pesa más de
     lo que mide. Entre corchetes, el tamaño a 390 y a 1440 px de ancho. */
  --letra-lema: clamp(1.75rem, 1.35rem + 1.4vw, 2.625rem); /* [28 · 42] */
  --letra-lema-landing: clamp(1.625rem, 1.3rem + 1.1vw, 2.375rem); /* [26 · 37] */
  --letra-titulo: clamp(1.5rem, 1.25rem + 0.75vw, 2rem); /* [24 · 31] */
  --letra-cifra: clamp(1.5rem, 1.3rem + 0.45vw, 1.875rem); /* [24 · 27] */
  --letra-subtitulo: clamp(1.25rem, 1.15rem + 0.3vw, 1.5rem); /* [20 · 23] */
  --letra-tarjeta: clamp(1.0625rem, 1rem + 0.15vw, 1.1875rem); /* [17 · 18] */
  --letra-entrada: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); /* [16 · 17] */
  --letra-cuerpo: 1rem; /* 16 */
  --letra-menor: 0.9375rem; /* 15 */

  /* Las dos máscaras que se repiten: la flecha de los botones y las tarjetas,
     y la C del logotipo del panel del cierre. Se declaran una vez. */
  --mascara-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --mascara-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3Crect x='21.5' y='1.5' width='17' height='17' rx='2.4'/%3E%3Crect x='41.5' y='1.5' width='17' height='17' rx='2.4'/%3E%3Crect x='61.5' y='1.5' width='17' height='17' rx='2.4'/%3E%3Crect x='1.5' y='21.5' width='17' height='17' rx='2.4'/%3E%3Crect x='21.5' y='21.5' width='17' height='17' rx='2.4'/%3E%3Crect x='1.5' y='41.5' width='17' height='17' rx='2.4'/%3E%3Crect x='1.5' y='61.5' width='17' height='17' rx='2.4'/%3E%3Crect x='21.5' y='61.5' width='17' height='17' rx='2.4'/%3E%3Crect x='21.5' y='81.5' width='17' height='17' rx='2.4'/%3E%3Crect x='41.5' y='81.5' width='17' height='17' rx='2.4'/%3E%3Crect x='61.5' y='81.5' width='17' height='17' rx='2.4'/%3E%3C/g%3E%3C/svg%3E");

  /* Sombras teñidas de cacao, una sola luz desde arriba. */
  --sombra-reposo: 0 1px 2px rgb(43 34 38 / 5%), 0 4px 14px rgb(43 34 38 / 5%);
  --sombra-alzada: 0 2px 4px rgb(43 34 38 / 6%), 0 18px 40px -12px rgb(43 34 38 / 22%);
  --sombra-telefono: 0 2px 6px rgb(43 34 38 / 8%), 0 40px 80px -28px rgb(43 34 38 / 38%);

  /* Una sola curva para todo lo que se mueve: sale rápido y se asienta. */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-boton: cubic-bezier(0.3, 0.7, 0.4, 1);
}

@media (prefers-color-scheme: dark) {
  :is(.pagina-portada, .pagina-landing) {
    --tesela-marca: var(--cuentela-rosa-claro);
    --hero-tinte: rgb(247 140 186 / 13%);
    --hero-tinte-borde: rgb(247 140 186 / 3%);
    --hero-velo: rgb(43 34 38 / 90%);
    --sitio-fondo: rgb(43 34 38 / 80%);

    /* En oscuro el cacao ya es el fondo: la tarjeta de paga se separa con el
       rosa tenue y el borde rosa-claro. */
    --plan-fondo: var(--accion-suave); /* papel encima 11.53:1 */
    --plan-tenue: #c5b3ba; /* 6.2:1 sobre el rosa tenue */

    --sombra-reposo: 0 1px 2px rgb(0 0 0 / 28%), 0 4px 14px rgb(0 0 0 / 22%);
    --sombra-alzada: 0 2px 4px rgb(0 0 0 / 30%), 0 18px 40px -12px rgb(0 0 0 / 60%);
    --sombra-telefono: 0 2px 6px rgb(0 0 0 / 30%), 0 40px 80px -28px rgb(0 0 0 / 70%);
  }
}

/* --------------------------------------------------------------------------
   2. Base de estas páginas
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) h1,
:is(.pagina-portada, .pagina-landing) h2,
:is(.pagina-portada, .pagina-landing) h3 {
  font-family: var(--fuente-portada);
}

/* El §4 de `estilos.css` le da al `main` un respiro arriba que aquí estorba.
   Va por `#contenido` para empatarle la especificidad de id. */
:is(.pagina-portada, .pagina-landing) #contenido {
  padding-top: 0;
}

/* Las anclas se deslizan; la cabecera fija se reserva arriba para que el
   título de la franja no quede debajo de ella. Bajo `prefers-reduced-motion`
   el §11 de `estilos.css` devuelve el desplazamiento a `auto`. */
html:has(:is(.pagina-portada, .pagina-landing)) {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-sitio, 60px) + var(--esp-4));
}

:is(.pagina-portada, .pagina-landing) ::selection {
  background: var(--accion-suave);
  color: var(--texto);
}

/* Teselas del logotipo dibujado en línea: el `fill` del SVG lleva el rosa de
   marca de respaldo y esta regla lo vira en oscuro. La tesela de Maíz no
   tiene clase a propósito: nada la puede recolorear. */
:is(.pagina-portada, .pagina-landing) .logo-mosaico__tesela {
  fill: var(--tesela-marca);
}

:is(.pagina-portada, .pagina-landing) .envoltura {
  max-width: 1200px;
  padding: 0 clamp(16px, 4vw, 40px);
}

/* Botones: se alzan un pelo al pasar y se hunden al apretar. Sólo
   `transform`: el color sigue con su transición de 120 ms del §5. */
:is(.pagina-portada, .pagina-landing) .boton {
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    transform 220ms var(--curva-boton),
    box-shadow 220ms var(--curva-boton);
}

@media (hover: hover) and (pointer: fine) {
  :is(.pagina-portada, .pagina-landing) .boton:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  :is(.pagina-portada, .pagina-landing) .boton--primario:hover:not(:disabled) {
    box-shadow: 0 10px 22px -10px rgb(184 30 99 / 60%);
  }
}

:is(.pagina-portada, .pagina-landing) .boton:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
  box-shadow: none;
}

/* El primario de registro lleva su flecha en una cápsula propia, al ras de
   su borde derecho: el círculo es `::before` (el color de la letra al 18 %) y
   la flecha `::after`, un trazo con máscara del color de la letra. Las dos son
   adorno y no las lee nadie; al pasar, la flecha sube en diagonal y la
   cápsula crece un pelo. */
/* Con `.boton` repetido para ganarle al relleno de `.hero__acciones .boton`
   y de `.empezar__enlaces .boton`, que vienen después. */
:is(.pagina-portada, .pagina-landing) .boton.boton--primario[data-cta-registro] {
  position: relative;
  padding-right: 58px;
}

:is(.pagina-portada, .pagina-landing) .boton--primario[data-cta-registro]::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 7px;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.18;
  transition: transform 320ms var(--curva-boton);
}

:is(.pagina-portada, .pagina-landing) .boton--primario[data-cta-registro]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: currentColor;
  -webkit-mask: var(--mascara-flecha)
    center / contain no-repeat;
  mask: var(--mascara-flecha)
    center / contain no-repeat;
  transition: transform 260ms var(--curva-boton);
}

@media (hover: hover) and (pointer: fine) {
  :is(.pagina-portada, .pagina-landing) .boton--primario[data-cta-registro]:hover::after {
    transform: translate(2px, -2px) rotate(-45deg);
  }

  :is(.pagina-portada, .pagina-landing) .boton--primario[data-cta-registro]:hover::before {
    transform: scale(1.1);
  }
}

/* El botón chico de la cabecera: la cápsula a su medida. */
:is(.pagina-portada, .pagina-landing) .boton.sitio__cta[data-cta-registro] {
  padding-right: 50px;
}

:is(.pagina-portada, .pagina-landing) .sitio__cta[data-cta-registro]::before {
  right: 5px;
  width: 32px;
  height: 32px;
  margin-top: -16px;
}

:is(.pagina-portada, .pagina-landing) .sitio__cta[data-cta-registro]::after {
  right: 12px;
}

/* En un teléfono la isla no tiene ancho para la marca, el botón y su
   cápsula: el botón se queda con su letrero, y basta. */
@media (max-width: 420px) {
  :is(.pagina-portada, .pagina-landing) .boton.sitio__cta[data-cta-registro] {
    padding: 0 var(--esp-4);
  }

  :is(.pagina-portada, .pagina-landing) .sitio__cta[data-cta-registro]::before,
  :is(.pagina-portada, .pagina-landing) .sitio__cta[data-cta-registro]::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. La cabecera del sitio
   --------------------------------------------------------------------------
   Fija arriba y en el flujo (`sticky`): el hero empieza debajo de ella y no
   detrás, así que el contrato de medidas de `mosaico.js` no cambia. El vidrio
   esmerilado sólo en pantalla ancha: en un teléfono de gama baja el
   `backdrop-filter` se paga en cada cuadro del desplazamiento, y ahí manda el
   papel liso.
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .sitio {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--alto-sitio);
  /* La isla flota sobre el hero: el margen negativo le devuelve su alto al
     flujo y el hero empieza detrás de ella (su relleno de arriba lo cuenta). */
  margin-bottom: calc(-1 * var(--alto-sitio));
  padding-top: 12px;
  pointer-events: none;
}

/* La píldora: separada de los bordes, con su bisel de una línea. */
:is(.pagina-portada, .pagina-landing) .sitio__contenido {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: min(1120px, calc(100% - 24px));
  min-height: 56px;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pildora);
  background: var(--fondo-elevado);
  box-shadow:
    0 1px 2px rgb(43 34 38 / 5%),
    0 12px 32px -14px rgb(43 34 38 / 24%);
  pointer-events: auto;
}

@media (prefers-color-scheme: dark) {
  :is(.pagina-portada, .pagina-landing) .sitio__contenido {
    box-shadow:
      0 1px 2px rgb(0 0 0 / 30%),
      0 12px 32px -14px rgb(0 0 0 / 70%);
  }
}

/* El vidrio, sólo en pantalla ancha: en un teléfono de gama baja el
   `backdrop-filter` se paga en cada cuadro del desplazamiento. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (min-width: 768px) {
    :is(.pagina-portada, .pagina-landing) .sitio__contenido {
      background: var(--sitio-fondo);
      -webkit-backdrop-filter: saturate(1.5) blur(18px);
      backdrop-filter: saturate(1.5) blur(18px);
    }
  }
}

/* «Saltar al contenido» aparece debajo de la isla y no detrás de ella. */
:is(.pagina-portada, .pagina-landing) .salto-contenido:focus {
  top: calc(var(--alto-sitio) + var(--esp-2));
  z-index: 60;
}

:is(.pagina-portada, .pagina-landing) .sitio__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  padding-right: var(--esp-2);
  border-radius: var(--radio-pildora);
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--texto);
  text-decoration: none;
}

:is(.pagina-portada, .pagina-landing) .sitio__marca:hover {
  color: var(--texto);
}

:is(.pagina-portada, .pagina-landing) .sitio__logo {
  width: 28px;
  height: 28px;
  flex: none;
  transition: transform 500ms var(--curva);
}

@media (hover: hover) and (pointer: fine) {
  :is(.pagina-portada, .pagina-landing) .sitio__marca:hover .sitio__logo {
    transform: rotate(-8deg) scale(1.06);
  }
}

:is(.pagina-portada, .pagina-landing) .sitio__nav {
  display: none;
}

@media (min-width: 900px) {
  :is(.pagina-portada, .pagina-landing) .sitio__nav {
    display: flex;
    gap: var(--esp-1);
  }
}

:is(.pagina-portada, .pagina-landing) .sitio__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radio-pildora);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto-tenue);
  text-decoration: none;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

:is(.pagina-portada, .pagina-landing) .sitio__nav a:hover {
  background: var(--fondo-hundido);
  color: var(--texto);
}

/* La franja que se está leyendo, marcada desde `portada.js`. */
:is(.pagina-portada, .pagina-landing) .sitio__nav a[aria-current="true"] {
  background: var(--accion-suave);
  color: var(--texto);
}

:is(.pagina-portada, .pagina-landing) .sitio__cta {
  min-height: 44px;
  padding: 0 var(--esp-4);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------------------
   Contrato con `mosaico.js`, que no cambia: el lienzo cubre el hero por detrás
   y arranca invisible; el SVG de `#hero-logo` es lo que se ve. Con el primer
   cuadro real el módulo añade `hero--vivo` y aquí se hace el relevo; si decide
   no animar añade `hero--estatico` y el lienzo sale del árbol de pintado. Sin
   ninguna de las dos clases el mosaico se queda quieto, que es un estado
   válido.

   En pantalla ancha el hero va en dos columnas SIN tocar el orden del HTML:
   `.hero__contenido` es una rejilla con áreas y el logotipo se va a la
   derecha. El módulo mide la caja del `<svg>`, así que el logotipo 3D se
   planta exactamente ahí y del tamaño del dibujo.
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--alto-sitio) + clamp(20px, 4vh, 72px)) 0 clamp(56px, 10vh, 104px);
  overflow: hidden;
  background-color: var(--fondo);
  background-image:
    radial-gradient(circle at 50% 22%, var(--hero-tinte), var(--hero-tinte-borde) 38%, transparent 64%);
}

@media (min-width: 960px) {
  :is(.pagina-portada, .pagina-landing) .hero {
    background-image:
      radial-gradient(circle at 74% 46%, var(--hero-tinte), var(--hero-tinte-borde) 30%, transparent 56%);
  }
}

/* Las cuatro esquinas en su forma larga: `inset` es de 2021. */
:is(.pagina-portada, .pagina-landing) .hero__lienzo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms ease;
}

:is(.pagina-portada, .pagina-landing) .hero--vivo .hero__lienzo {
  opacity: 1;
}

:is(.pagina-portada, .pagina-landing) .hero--estatico .hero__lienzo {
  display: none;
}

:is(.pagina-portada, .pagina-landing) .hero__contenido {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "logo"
    "marca"
    "lema"
    "sub"
    "acciones";
  justify-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  text-align: left;
}

@media (min-width: 960px) {
  :is(.pagina-portada, .pagina-landing) .hero__contenido {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas:
      ".        logo"
      "marca    logo"
      "lema     logo"
      "sub      logo"
      "acciones logo"
      ".        logo";
    column-gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }
}

/* El velo, sólo con el mosaico vivo: las motas de ambiente cruzan por detrás
   del texto y lo dejan sobre confeti. Un óvalo de `--fondo` las apaga justo
   debajo de la columna de texto y se disuelve antes de llegar a los bordes;
   en pantalla ancha se queda en la columna izquierda para no deslavar el
   logotipo, que es lo único que sí tiene que verse nítido. */
:is(.pagina-portada, .pagina-landing) .hero__contenido::before {
  content: "";
  position: absolute;
  top: 14%;
  right: -6%;
  bottom: -10%;
  left: -6%;
  z-index: -1;
  background-image: radial-gradient(
    ellipse 70% 64% at 45% 55%,
    var(--hero-velo) 0%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}

@media (min-width: 960px) {
  :is(.pagina-portada, .pagina-landing) .hero__contenido::before {
    top: 0;
    right: 36%;
    bottom: -4%;
    left: -10%;
    background-image: radial-gradient(
      ellipse 66% 64% at 50% 52%,
      var(--hero-velo) 0%,
      var(--hero-velo) 38%,
      transparent 82%
    );
  }
}

:is(.pagina-portada, .pagina-landing) .hero--vivo .hero__contenido::before {
  opacity: 1;
}

:is(.pagina-portada, .pagina-landing) .hero__logo {
  grid-area: logo;
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--esp-4);
  transition:
    opacity 600ms ease,
    transform 600ms ease;
}

:is(.pagina-portada, .pagina-landing) .hero__logo .logo-mosaico {
  width: clamp(56px, 16vw, 92px);
  height: clamp(56px, 16vw, 92px);
}

@media (min-width: 960px) {
  :is(.pagina-portada, .pagina-landing) .hero__logo {
    justify-self: center;
    justify-content: center;
    margin-bottom: 0;
  }

  :is(.pagina-portada, .pagina-landing) .hero__logo .logo-mosaico {
    width: clamp(240px, 28vw, 380px);
    height: clamp(240px, 28vw, 380px);
  }
}

/* El relevo: manda el mosaico vivo, se apaga el quieto. */
:is(.pagina-portada, .pagina-landing) .hero--vivo .hero__logo {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}

/* La marca es el rótulo sobre el lema: en la portada es el `<h1>` y en la
   landing un `<p>`, y se ven igual. La cabecera ya dice «Cuentela» en grande;
   aquí basta la tesela de Maíz y el nombre. */
:is(.pagina-portada, .pagina-landing) .hero__marca {
  grid-area: marca;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--esp-3);
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pildora);
  background: var(--fondo-elevado);
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--texto);
  box-shadow: var(--sombra-reposo);
}

/* La tesela va chica a propósito: en la portada la marca ES el `<h1>`, y
   `visual-landings` exige que el Maíz no pase del 4 % de su recorte. */
:is(.pagina-portada, .pagina-landing) .hero__marca::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--realce);
}

:is(.pagina-portada, .pagina-landing) .hero__lema {
  grid-area: lema;
  margin: 0 0 var(--esp-4);
  max-width: 19ch;
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: var(--letra-lema);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

:is(.pagina-portada, .pagina-landing) .hero__sub {
  grid-area: sub;
  margin: 0 0 var(--esp-6);
  max-width: 52ch;
  font-size: var(--letra-entrada);
  line-height: 1.6;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

:is(.pagina-portada, .pagina-landing) .hero__acciones {
  grid-area: acciones;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin: 0;
}

:is(.pagina-portada, .pagina-landing) .hero__acciones .boton {
  min-height: 52px;
  padding: 0 26px;
  font-size: var(--letra-cuerpo);
}

/* En pantalla angosta los dos botones se estiran: un solo borde vertical y el
   pulgar no tiene que buscar. */
@media (max-width: 430px) {
  :is(.pagina-portada, .pagina-landing) .hero__acciones {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  :is(.pagina-portada, .pagina-landing) .hero__acciones .boton {
    min-height: 52px;
  }
}

/* Indicador de desplazamiento: una gota que baja por un riel. Decorativo —va
   `aria-hidden`— porque los CTA ya llevan a donde hay que ir. */
:is(.pagina-portada, .pagina-landing) .hero__gota {
  position: absolute;
  left: 50%;
  bottom: var(--esp-5);
  z-index: 1;
  width: 2px;
  height: 44px;
  margin-left: -1px;
  border-radius: var(--radio-pildora);
  background: var(--borde-fuerte);
  overflow: hidden;
}

:is(.pagina-portada, .pagina-landing) .hero__gota::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 15px;
  border-radius: var(--radio-pildora);
  background: var(--accion);
  animation: portada-gota 2400ms ease-in-out infinite;
}

@keyframes portada-gota {
  0% {
    transform: translateY(-16px);
    opacity: 0;
  }
  25%,
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(44px);
    opacity: 0;
  }
}

/* La entrada: el lema sube palabra por palabra y detrás llegan el texto y
   los botones. Es una animación de CSS con `both` —arranca escondida y acaba
   en su sitio—, así que no depende de ningún guion y termina antes de un
   segundo; con `prefers-reduced-motion` el §11 de `estilos.css` la reduce a
   nada y todo aparece en su lugar. El logotipo NO entra animado: `mosaico.js`
   mide su caja al arrancar para plantar encima el 3D. */
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra {
  display: inline-block;
  animation: portada-palabra 900ms var(--curva) both;
}

@keyframes portada-palabra {
  from {
    opacity: 0;
    transform: translateY(0.45em) rotate(2deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(2) { animation-delay: 45ms; }
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(3) { animation-delay: 90ms; }
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(4) { animation-delay: 135ms; }
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(5) { animation-delay: 180ms; }
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(6) { animation-delay: 225ms; }
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(7) { animation-delay: 270ms; }
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(8) { animation-delay: 315ms; }
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(9) { animation-delay: 360ms; }
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(10) { animation-delay: 405ms; }
:is(.pagina-portada, .pagina-landing) .hero__lema .palabra:nth-child(n + 11) { animation-delay: 450ms; }

:is(.pagina-portada, .pagina-landing) :is(.hero__marca, .hero__sub, .hero__acciones) {
  animation: portada-asoma 800ms var(--curva) both;
}

:is(.pagina-portada, .pagina-landing) .hero__sub {
  animation-delay: 320ms;
}

/* Los botones acaban de entrar antes de 1.1 s: el arnés mide dónde quedan. */
:is(.pagina-portada, .pagina-landing) .hero .hero__acciones {
  animation-duration: 700ms;
  animation-delay: 400ms;
}

@keyframes portada-asoma {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Las landings encabezan con la promesa de SU herramienta, una frase más
   larga que el lema de la portada. */
.pagina-landing .hero__lema {
  max-width: 22ch;
  font-size: var(--letra-lema-landing);
}

/* --------------------------------------------------------------------------
   5. Franjas y encabezados de sección
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .franja {
  position: relative;
  padding: clamp(64px, 9vw, 116px) 0;
}

:is(.pagina-portada, .pagina-landing) .franja--hundida {
  background: var(--fondo-hundido);
}

:is(.pagina-portada, .pagina-landing) .franja__cabeza {
  max-width: 62ch;
  margin-bottom: clamp(32px, 4vw, 52px);
}

/* Rótulo: la tesela de Maíz y el nombre de la franja en `--accion`, en su
   caja natural y no en versalitas —en cada franja, las mayúsculas gritaban—. */
:is(.pagina-portada, .pagina-landing) .franja__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--esp-4);
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pildora);
  background: var(--fondo-elevado);
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--accion);
}

:is(.pagina-portada, .pagina-landing) .franja__rotulo::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--realce);
}

:is(.pagina-portada, .pagina-landing) .franja__titulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--letra-titulo);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:is(.pagina-portada, .pagina-landing) .franja__entrada {
  margin: 0;
  max-width: 56ch;
  font-size: var(--letra-entrada);
  line-height: 1.6;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   6. Los pasos: tres en la landing, cinco en la jornada de la portada
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .pasos {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 820px) {
  .pagina-landing .pasos {
    --hueco-pasos: clamp(24px, 4vw, 56px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hueco-pasos);
  }

  /* El hilo punteado que lleva de un número al siguiente: sale del borde de
     la tesela y se detiene un pelo antes de la otra. El último no lleva. */
  .pagina-landing .paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 72px;
    right: calc(var(--hueco-pasos) * -1 + 16px);
    height: 2px;
    background-image: linear-gradient(90deg, var(--borde-fuerte) 50%, transparent 50%);
    background-size: 12px 2px;
  }
}

:is(.pagina-portada, .pagina-landing) .paso {
  position: relative;
}

/* El número va en una tesela de Maíz con cacao encima (9.75:1): es el único
   sitio donde el Maíz manda, y por eso marca la secuencia. */
:is(.pagina-portada, .pagina-landing) .paso__numero {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--esp-4);
  border-radius: 14px;
  background: var(--realce);
  color: var(--realce-texto);
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px var(--fondo);
}

.franja--hundida .paso__numero {
  box-shadow: 0 0 0 6px var(--fondo-hundido);
}

:is(.pagina-portada, .pagina-landing) .paso__titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--letra-tarjeta);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

:is(.pagina-portada, .pagina-landing) .paso__texto {
  margin: 0;
  max-width: 46ch;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* ----- La jornada de la portada: una línea de tiempo ----- */

/* Cinco pasos contando un día: se leen de arriba abajo, con el número a la
   izquierda y un hilo que los une. En pantalla ancha la cabeza se queda fija
   a la izquierda mientras el día pasa a su lado. */
@media (min-width: 960px) {
  .pagina-portada #como-encaja .envoltura {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }

  .pagina-portada #como-encaja .franja__cabeza {
    position: sticky;
    top: calc(var(--alto-sitio) + 48px);
    margin-bottom: 0;
  }
}

.pagina-portada #como-encaja .pasos {
  gap: clamp(28px, 4vw, 44px);
}

/* El tablero de la jornada vive en la cabeza fija, debajo del título, y toma
   la figura del paso que se está leyendo. En teléfono no hay columna para
   él: ahí el día se cuenta solo, paso por paso. */
@media (min-width: 960px) {
  .pagina-portada #como-encaja .tablero {
    display: block;
    max-width: 340px;
    margin-top: clamp(32px, 4vw, 48px);
    padding: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-panel);
    background: var(--fondo);
  }
}

/* El paso que se está leyendo: su tesela pasa del Maíz al rosa de acción
   (papel encima, 5.75:1) y crece un poco. */
.pagina-portada #como-encaja .paso__numero {
  transition:
    background-color 300ms ease,
    color 300ms ease,
    transform 420ms var(--curva);
}

.pagina-portada #como-encaja .paso.es-activa .paso__numero {
  background: var(--accion);
  color: var(--accion-texto);
  transform: scale(1.08);
}

/* El riel del día. */
.pagina-portada #como-encaja .pasos::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 2px;
  border-radius: var(--radio-pildora);
  background: var(--borde-fuerte);
}

/* Lo recorrido del día, que se llena al bajar. Donde el navegador no sabe de
   animaciones ligadas al desplazamiento, el riel se queda lleno y quieto. */
.pagina-portada #como-encaja .pasos::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 2px;
  border-radius: var(--radio-pildora);
  background: var(--accion);
  transform-origin: top;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pagina-portada #como-encaja .pasos::after {
      animation: portada-riel linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 60%;
    }
  }
}

@keyframes portada-riel {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.pagina-portada #como-encaja .paso {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

.pagina-portada #como-encaja .paso__numero {
  grid-row: 1 / span 2;
  margin-bottom: 0;
  z-index: 1;
}

.pagina-portada #como-encaja .paso__titulo {
  padding-top: 14px;
}

/* --------------------------------------------------------------------------
   7. El mapa: una tesela por landing, con la figura de su herramienta
   --------------------------------------------------------------------------
   La figura es la misma retícula 5×5 que arma el hero de esa landing (la
   dibuja `generar-landings.mjs` desde `RETICULAS` de `mosaico.js`): quien la
   ve aquí la reconoce al llegar. En teléfono, una columna de tarjetas; en
   tableta, dos, con la primera —el catálogo, el principio del grafo— a lo
   ancho (2 + 12 = 14, siete renglones parejos); en escritorio el mapa es un
   índice con el tablero al lado (§7c).
   -------------------------------------------------------------------------- */

.pagina-portada .mapa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .pagina-portada .mapa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pagina-portada .mapa > :first-child {
    grid-column: span 2;
  }
}


/* `position: relative` es el ancla del enlace estirado de
   `.pieza__enlace::after`, que vuelve tocable la tesela entera. */
.pagina-portada .pieza {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  min-height: 100%;
  padding: var(--esp-5);
  overflow: hidden;
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tesela);
  box-shadow: var(--sombra-reposo);
  transition:
    transform 420ms var(--curva),
    box-shadow 420ms var(--curva),
    border-color 200ms ease;
}

/* La luz que sigue al puntero (`portada.js` escribe `--luz-x` y `--luz-y`):
   un halo rosa muy tenue debajo del texto. Sólo con ratón. */
.pagina-portada .pieza::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: radial-gradient(
    320px circle at var(--luz-x, 50%) var(--luz-y, 0%),
    var(--hero-tinte),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .pagina-portada .pieza:hover {
    transform: translateY(-4px);
    border-color: var(--borde-fuerte);
    box-shadow: var(--sombra-alzada);
  }

  .pagina-portada .pieza:hover::before {
    opacity: 1;
  }
}

.pagina-portada .pieza:active {
  transform: translateY(-1px) scale(0.995);
}

/* La etiqueta dice de qué lado del precio cae la pieza y sale del `plan` de su
   JSON. Maíz con cacao encima da 9.75:1, y el rosa tenue con `--texto` encima
   12.82:1 en claro y 11.53:1 en oscuro. */
.pagina-portada .pieza__etiqueta {
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--radio-pildora);
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.pagina-portada .pieza__etiqueta--incluido {
  background: var(--realce);
  color: var(--realce-texto);
}

.pagina-portada .pieza__etiqueta--premium {
  background: var(--accion-suave);
  color: var(--texto);
}

/* La figura de la herramienta, arriba a la derecha. Forma, no letra: rosa de
   marca y su tesela de Maíz, que no se recolorea. */
.pagina-portada .pieza__figura {
  position: absolute;
  top: var(--esp-5);
  right: var(--esp-5);
  width: 40px;
  height: 40px;
  color: var(--tesela-marca);
}

.pagina-portada .pieza__figura rect {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 520ms var(--curva),
    opacity 420ms ease;
}

.pagina-portada .pieza__figura .pieza__maiz {
  fill: var(--cuentela-maiz);
}

/* Al pasar, la figura respira tesela por tesela. */
@media (hover: hover) and (pointer: fine) {
  .pagina-portada .pieza:hover .pieza__figura rect {
    transform: scale(0.72);
  }

  .pagina-portada .pieza:hover .pieza__figura .pieza__maiz {
    transform: scale(1.18);
  }

  .pagina-portada .pieza:hover .pieza__figura rect:nth-child(3n + 1) {
    transition-delay: 40ms;
  }

  .pagina-portada .pieza:hover .pieza__figura rect:nth-child(3n + 2) {
    transition-delay: 90ms;
  }
}

.pagina-portada .pieza__titulo {
  margin: var(--esp-2) 0 0;
  padding-right: 48px;
  font-size: var(--letra-tarjeta);
  line-height: 1.26;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* El título ES el enlace y va en el color del texto: de rosa serían trece
   llamadas a la acción compitiendo con «Abre tu tienda».

   `display: block` con `min-height`: la caja de un enlace en línea la dan las
   métricas de la fuente, y una sola línea quedaba por debajo de los 24×24 de
   WCAG 2.5.8. */
.pagina-portada .pieza__enlace {
  display: block;
  min-height: 24px;
  color: var(--texto);
  text-decoration: none;
}

.pagina-portada .pieza__enlace:hover {
  color: var(--texto);
}

/* Enlace estirado: en un teléfono se toca la tesela, no el renglón. */
.pagina-portada .pieza__enlace::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--radio-tesela);
}

.pagina-portada .pieza__texto {
  margin: 0;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* «Ver más», el pie de cada tesela (el dueño, 2026-10-12: «el botón para ir a ver más debería ser
   más obvio, la flecha no dice a dónde ir» y «ver más podría aparecer cuando ese cuadro es
   protagonista, los demás podrían estar sin color»). Es un botón de verdad a la vista que dice qué
   pasa al tocarlo: de la tesela protagonista —la que se lee (`es-activa`), la que tiene el puntero o
   el foco— sale lleno y en negritas; en las demás queda apagado, sin el rosa. Va `aria-hidden`: el
   enlace estirado del título ya dice a dónde lleva. El apagado usa el gris del texto tenue, que
   cumple el contraste; sin JavaScript no hay protagonista y todos salen llenos. */
.pagina-portada .pieza__mas {
  display: inline-flex;
  align-self: flex-start;
  justify-self: start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: var(--esp-4) 0 0;
  padding: 8px 16px;
  border: 2px solid var(--borde-fuerte);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-tenue);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  transition:
    background-color 240ms var(--curva),
    border-color 240ms var(--curva),
    color 240ms var(--curva);
}

.pagina-portada .pieza__mas::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--mascara-flecha)
    center / contain no-repeat;
  mask: var(--mascara-flecha)
    center / contain no-repeat;
  transition: transform 320ms var(--curva);
}

.pagina-portada .pieza.es-activa .pieza__mas,
.pagina-portada .pieza:focus-within .pieza__mas {
  border-color: var(--accion);
  background: var(--accion);
  color: var(--fondo-elevado);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .pagina-portada .pieza:hover .pieza__mas {
    border-color: var(--accion);
    background: var(--accion);
    color: var(--fondo-elevado);
    font-weight: 700;
  }

  .pagina-portada .pieza:hover .pieza__mas::after {
    transform: translateX(4px);
  }
}

@media (scripting: none) {
  .pagina-portada .pieza__mas {
    border-color: var(--accion);
    background: var(--accion);
    color: var(--fondo-elevado);
    font-weight: 700;
  }
}

/* La pieza grande: el catálogo, con la figura a lo grande abajo a la derecha.
   Sólo en la rejilla de dos columnas: en escritorio el mapa es una lista. */
@media (min-width: 640px) and (max-width: 1023px) {
  .pagina-portada .mapa > :first-child {
    padding: clamp(24px, 3vw, 40px);
    background:
      radial-gradient(circle at 100% 100%, var(--hero-tinte), transparent 60%),
      var(--fondo-elevado);
  }

  .pagina-portada .mapa > :first-child .pieza__titulo {
    max-width: 16ch;
    padding-right: 0;
    font-size: var(--letra-subtitulo);
    line-height: 1.16;
    letter-spacing: -0.02em;
  }

  .pagina-portada .mapa > :first-child .pieza__texto {
    max-width: 36ch;
    font-size: var(--letra-cuerpo);
  }

  .pagina-portada .mapa > :first-child .pieza__figura {
    top: auto;
    right: clamp(24px, 3vw, 40px);
    bottom: clamp(24px, 3vw, 40px);
    width: clamp(96px, 13vw, 168px);
    height: clamp(96px, 13vw, 168px);
  }
}


/* Renglón de remate: lo que la portada nombra sin dedicarle tesela. */
:is(.pagina-portada, .pagina-landing) .extras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
  list-style: none;
  margin: var(--esp-6) 0 0;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--texto-tenue);
}

:is(.pagina-portada, .pagina-landing) .extra {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 40px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pildora);
}

:is(.pagina-portada, .pagina-landing) .extra::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--realce);
}

/* El enlace a la landing del catálogo vive dentro del renglón: el mínimo de
   24 px de WCAG 2.5.8, con relleno sólo arriba y abajo. */
.pagina-portada .tienda-publica__nota a {
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
}

/* --------------------------------------------------------------------------
   7b. La cinta: las trece herramientas, corriendo
   --------------------------------------------------------------------------
   Entre el hero y el mapa, el nombre corto de cada herramienta en letra
   enorme, separado por teselas, corriendo de derecha a izquierda. La escribe
   el generador (`CINTA:GENERADO`) con el grupo DOS veces: el carril recorre
   justo la mitad de su ancho y vuelve a empezar sin costura. Es adorno
   (`aria-hidden`); se detiene con el puntero encima y, con
   `prefers-reduced-motion`, se queda quieta.
   -------------------------------------------------------------------------- */

.pagina-portada .cinta {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 36px) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  background: var(--fondo);
}

/* Los bordes se desvanecen en el papel: la cinta entra y sale de la nada. */
.pagina-portada .cinta::before,
.pagina-portada .cinta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: clamp(32px, 10vw, 160px);
  pointer-events: none;
}

.pagina-portada .cinta::before {
  left: 0;
  background: linear-gradient(90deg, var(--fondo), transparent);
}

.pagina-portada .cinta::after {
  right: 0;
  background: linear-gradient(270deg, var(--fondo), transparent);
}

.pagina-portada .cinta__carril {
  display: flex;
  width: max-content;
  animation: portada-cinta 46s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
  .pagina-portada .cinta:hover .cinta__carril {
    animation-play-state: paused;
  }
}

@keyframes portada-cinta {
  to {
    transform: translateX(-50%);
  }
}

.pagina-portada .cinta__grupo {
  display: flex;
  flex: none;
  align-items: center;
}

.pagina-portada .cinta__nombre {
  padding: 0 clamp(18px, 2.4vw, 36px);
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--texto);
}

/* Una de cada dos, en el rosa de la letra de marca (5.75:1 sobre papel). */
.pagina-portada .cinta__nombre:nth-of-type(even) {
  color: var(--accion);
}

.pagina-portada .cinta__tesela {
  flex: none;
  width: clamp(14px, 1.6vw, 22px);
  height: clamp(14px, 1.6vw, 22px);
  border-radius: 22%;
  background: var(--tesela-marca);
  transform: rotate(12deg);
}

.pagina-portada .cinta__tesela--maiz {
  background: var(--cuentela-maiz);
  transform: rotate(-8deg);
}

/* --------------------------------------------------------------------------
   7c. El tablero: la figura de lo que se está leyendo
   --------------------------------------------------------------------------
   Veinticinco teselas en una bandeja de doble bisel (la bandeja hundida y,
   dentro, el papel elevado). `portada.js` les cambia la clase —0 hueco, 1
   tesela, 2 maíz— y aquí se mueven: el hueco queda como una mota del borde
   y la tesela crece a su lugar, cada una con su retraso en diagonal (lo pone
   el guion por el CSSOM), así que la figura nueva se arma como una ola.
   Sólo `transform` y el relleno.
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .tablero {
  display: none;
}

:is(.pagina-portada, .pagina-landing) .tablero__teselas {
  display: block;
  width: 100%;
  height: auto;
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: calc(var(--radio-panel) - 8px);
  background: var(--fondo-elevado);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 60%),
    0 1px 2px rgb(43 34 38 / 6%);
}

@media (prefers-color-scheme: dark) {
  :is(.pagina-portada, .pagina-landing) .tablero__teselas {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 6%),
      0 1px 2px rgb(0 0 0 / 30%);
  }
}

:is(.pagina-portada, .pagina-landing) .tablero__t {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 640ms var(--curva),
    fill 360ms ease;
}

:is(.pagina-portada, .pagina-landing) .tablero__t--0 {
  fill: var(--borde-fuerte);
  transform: scale(0.28);
}

:is(.pagina-portada, .pagina-landing) .tablero__t--1 {
  fill: var(--tesela-marca);
}

:is(.pagina-portada, .pagina-landing) .tablero__t--2 {
  fill: var(--cuentela-maiz);
}

/* El golpe de la figura nueva: la bandeja se hunde un pelo y regresa. */
:is(.pagina-portada, .pagina-landing) .tablero--golpe .tablero__teselas {
  animation: portada-golpe 520ms var(--curva);
}

@keyframes portada-golpe {
  30% {
    transform: scale(0.985);
  }
}

:is(.pagina-portada, .pagina-landing) .tablero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-3);
  margin: var(--esp-4) var(--esp-2) 0;
}

:is(.pagina-portada, .pagina-landing) .tablero__nombre {
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: var(--letra-subtitulo);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--texto);
}

:is(.pagina-portada, .pagina-landing) .tablero__etiqueta:empty {
  display: none;
}

:is(.pagina-portada, .pagina-landing) .tablero__etiqueta {
  padding: 4px 12px;
  border-radius: var(--radio-pildora);
  background: var(--accion-suave);
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--texto);
}

:is(.pagina-portada, .pagina-landing) .tablero__etiqueta--incluido {
  background: var(--realce);
  color: var(--realce-texto);
}

/* ----- El vuelo: la C del hero cae en el mapa ----- */

/* La capa es fija y de tamaño CERO: no tapa nada ni recibe el puntero, y sus
   teselas cuelgan de ella con `position: absolute`. Pasa por debajo de la
   isla de la cabecera. `portada.js` le escribe a cada tesela su `transform`
   en cada cuadro del vuelo; aquí sólo su forma y su color. */
.pagina-portada .vuelo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 35;
  width: 0;
  height: 0;
  pointer-events: none;
}

.pagina-portada .vuelo[hidden] {
  display: none;
}

.pagina-portada .vuelo__tesela {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 14%;
  background: var(--tesela-marca);
  box-shadow: 0 18px 30px -18px rgb(43 34 38 / 40%);
  will-change: transform;
}

.pagina-portada .vuelo__tesela--maiz {
  background: var(--cuentela-maiz);
}

/* Mientras la C va en el aire no está en el hero —ni la 3D, que la apaga
   `mosaico.js`, ni la quieta— y sus casillas de destino esperan vacías. */
.pagina-portada .hero--desarmado .hero__logo {
  opacity: 0;
  transition: none;
}

.pagina-portada #herramientas.vuelo-activo .tablero__t:not(.tablero__t--0),
.pagina-portada #herramientas.vuelo-activo .vuelo__destino {
  opacity: 0;
  transition: none;
}

/* ----- El mapa en escritorio: una lista con el tablero fijo al lado ----- */

@media (min-width: 1024px) {
  .pagina-portada #herramientas .envoltura {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "cabeza  cabeza"
      "mapa    tablero"
      "extras  tablero";
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  .pagina-portada #herramientas .franja__cabeza {
    grid-area: cabeza;
  }

  .pagina-portada #herramientas .mapa {
    grid-area: mapa;
  }

  .pagina-portada #herramientas .extras {
    grid-area: extras;
  }

  /* La bandeja, con su bisel de afuera: el papel hundido y una línea. */
  .pagina-portada #herramientas .tablero {
    grid-area: tablero;
    position: sticky;
    top: calc(var(--alto-sitio) + 40px);
    display: block;
    /* En una pantalla baja (una laptop de 13", el visor de un artefacto) el
       tablero se achica para caber entero debajo de la isla, con su nombre. */
    justify-self: end;
    width: min(100%, max(300px, calc(100vh - var(--alto-sitio) - 160px)));
    padding: 10px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-panel);
    background: var(--fondo-hundido);
  }

  .pagina-portada .mapa {
    display: block;
    counter-reset: pieza;
    border-bottom: 1px solid var(--borde-fuerte);
  }

  /* La fila: el número, el título con su etiqueta y el texto. La que se está
     leyendo (`es-activa`) se levanta en tesela. */
  .pagina-portada .pieza {
    counter-increment: pieza;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "numero titulo etiqueta"
      "numero texto  mas";
    column-gap: var(--esp-4);
    row-gap: var(--esp-2);
    align-items: baseline;
    min-height: 0;
    margin: 0;
    padding: 26px 20px 26px 16px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--borde-fuerte);
    border-radius: 0;
    box-shadow: none;
    transition:
      background-color 360ms var(--curva),
      border-radius 360ms var(--curva),
      box-shadow 420ms var(--curva),
      transform 420ms var(--curva),
      opacity 760ms var(--curva);
  }

  .pagina-portada .pieza::before {
    content: counter(pieza, decimal-leading-zero);
    position: static;
    grid-area: numero;
    z-index: auto;
    background: none;
    opacity: 1;
    font-family: var(--fuente-portada);
    font-weight: 700;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    color: var(--texto-tenue);
    transition: color 300ms ease;
  }

  .pagina-portada .pieza.es-activa {
    background: var(--fondo-elevado);
    border-top-color: transparent;
    border-radius: var(--radio-tesela);
    box-shadow: var(--sombra-alzada);
    transform: translateX(8px);
  }

  .pagina-portada .pieza.es-activa + .pieza {
    border-top-color: transparent;
  }

  .pagina-portada .pieza.es-activa::before {
    color: var(--accion);
  }

  /* Al pasar el ratón la fila no se levanta: con la página corriendo debajo
     de un ratón quieto, la fila de abajo se levantaba sola y parecía que la
     lista se adelantaba. Se levanta la que se lee (`es-activa`), que es la
     que decide `portada.js`; el ratón sólo asoma la flecha. */
  .pagina-portada .pieza:hover {
    transform: none;
    box-shadow: none;
  }

  .pagina-portada .pieza__etiqueta {
    grid-area: etiqueta;
    align-self: center;
  }

  .pagina-portada .pieza__titulo {
    grid-area: titulo;
    margin: 0;
    padding-right: 0;
    font-size: var(--letra-tarjeta);
    line-height: 1.26;
    letter-spacing: -0.015em;
  }

  .pagina-portada .pieza__texto {
    grid-area: texto;
    max-width: 58ch;
  }

  /* «Ver más» siempre a la vista, a la derecha de la fila: en la lista ya no hay que
     adivinar que la flecha era un enlace. */
  .pagina-portada .pieza__mas {
    grid-area: mas;
    align-self: center;
    justify-self: end;
    margin: 0;
  }


  /* En la lista manda el tablero: las figuras chicas se retiran. */
  .pagina-portada .pieza__figura {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Tienda pública: el enlace, dentro de un teléfono
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .tienda-publica {
  display: grid;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}

@media (min-width: 860px) {
  :is(.pagina-portada, .pagina-landing) .tienda-publica {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__texto .franja__entrada {
  margin-bottom: var(--esp-5);
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__texto p {
  max-width: 54ch;
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__texto p:last-child {
  margin-bottom: 0;
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__nota {
  color: var(--texto-tenue);
}

/* El escenario del teléfono: un halo rosa detrás, como el del hero. */
:is(.pagina-portada, .pagina-landing) .tienda-publica__muestra {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--esp-5) 0;
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__muestra::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(420px, 110%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hero-tinte), transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* El teléfono: bisel de papel hundido, pantalla elevada, la ceja arriba. */
:is(.pagina-portada, .pagina-landing) .muestra {
  position: relative;
  z-index: 1;
  width: min(300px, 100%);
  margin: 0 auto;
  padding: 56px var(--esp-5) var(--esp-6);
  text-align: center;
  background: var(--fondo-elevado);
  border: 1px solid var(--borde-fuerte);
  border-radius: 44px;
  box-shadow:
    0 0 0 10px var(--fondo-hundido),
    0 0 0 11px var(--borde),
    var(--sombra-telefono);
  transform: rotate(-3deg);
  transition: transform 700ms var(--curva);
}

.franja--hundida .muestra {
  box-shadow:
    0 0 0 10px var(--fondo),
    0 0 0 11px var(--borde),
    var(--sombra-telefono);
}

@media (hover: hover) and (pointer: fine) {
  :is(.pagina-portada, .pagina-landing) .tienda-publica__muestra:hover .muestra {
    transform: rotate(0deg) translateY(-6px);
  }
}

:is(.pagina-portada, .pagina-landing) .muestra::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 76px;
  height: 22px;
  margin-left: -38px;
  border-radius: var(--radio-pildora);
  background: var(--texto);
}

/* Mosaico que insinúa el código QR impreso del mostrador. No es un QR de
   verdad —no lleva a ningún lado— y por eso va `aria-hidden`. */
:is(.pagina-portada, .pagina-landing) .muestra__qr {
  width: clamp(150px, 46vw, 188px);
  height: clamp(150px, 46vw, 188px);
  margin: var(--esp-3) 0 var(--esp-5);
  padding: 14px;
  border-radius: var(--radio-tesela);
  background: var(--fondo);
  fill: var(--tesela-marca);
}

:is(.pagina-portada, .pagina-landing) .muestra__qr rect {
  transform-box: fill-box;
  transform-origin: center;
}

:is(.pagina-portada, .pagina-landing) .muestra__enlace {
  margin: 0 0 var(--esp-2);
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--texto);
}

/* La clave no se parte: si no cabe, baja entera al renglón de abajo. */
:is(.pagina-portada, .pagina-landing) .muestra__codigo {
  color: var(--accion);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

:is(.pagina-portada, .pagina-landing) .muestra__pie {
  margin: 0;
  font-size: 0.875rem;
  color: var(--texto-tenue);
}

/* --------------------------------------------------------------------------
   9. Capacidades (landings)
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .capacidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: var(--esp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* «Trae»: la tira bajo el hero que presume lo que trae la herramienta. */
.pagina-landing .franja--tira {
  padding-block: var(--esp-4);
}

.pagina-landing .trae {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
}

.pagina-landing .trae__rotulo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.pagina-landing .trae__ficha,
.pagina-landing .trae__mas {
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo-elevado);
  color: var(--texto);
  font-size: 0.875rem;
  line-height: 1.3;
  text-decoration: none;
}

.pagina-landing .trae__mas {
  background: var(--accion-suave);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .pagina-landing .trae__ficha:hover,
  .pagina-landing .trae__mas:hover {
    border-color: var(--accion);
  }
}

.pagina-landing .trae__ficha:focus-visible,
.pagina-landing .trae__mas:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: 2px;
}

/* «Todo lo que trae»: el inventario completo de la herramienta, por grupos. */
.pagina-landing .todo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-4);
}

.pagina-landing .todo__grupo {
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tesela);
}

.pagina-landing .todo__titulo {
  margin: 0 0 var(--esp-3);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.pagina-landing .todo__puntos {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada punto es una frase corta que afirma algo: se lee como lo que la herramienta hace por ti. */
.pagina-landing .todo__puntos li {
  position: relative;
  padding-left: 1.5em;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--texto);
}

/* La palomita se dibuja con dos bordes: no depende de ninguna fuente ni de un icono. */
.pagina-landing .todo__puntos li::before {
  content: '';
  position: absolute;
  left: 0.2em;
  top: 0.38em;
  width: 0.42em;
  height: 0.72em;
  border: solid var(--cuentela-nopal);
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

/* Con CUATRO capacidades, el `auto-fit` deja tres arriba y una huérfana: van
   dos y dos. Con tres, `auto-fit` ya acierta. */
@media (min-width: 700px) {
  .pagina-landing .capacidades:has(> :nth-child(4):last-child) {
    grid-template-columns: 1fr 1fr;
  }
}

:is(.pagina-portada, .pagina-landing) .capacidad {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tesela);
  box-shadow: var(--sombra-reposo);
  transition:
    transform 420ms var(--curva),
    box-shadow 420ms var(--curva);
}

@media (hover: hover) and (pointer: fine) {
  :is(.pagina-portada, .pagina-landing) .capacidad:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alzada);
  }
}

/* La tesela que abre cada capacidad: tres cuadros en escalera, el último de
   Maíz. Forma, no letra. */
.pagina-landing .capacidad::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-bottom: 28px;
  border-radius: 3px;
  background: var(--tesela-marca);
  box-shadow:
    15px 0 0 var(--tesela-marca),
    15px 15px 0 var(--cuentela-maiz);
}

:is(.pagina-portada, .pagina-landing) .capacidad__icono {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: var(--esp-4);
  color: var(--tesela-marca);
}

:is(.pagina-portada, .pagina-landing) .capacidad__titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--letra-tarjeta);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

:is(.pagina-portada, .pagina-landing) .capacidad__texto {
  margin: 0;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10. Un negocio que crece
   --------------------------------------------------------------------------
   Cuatro puntos, dos y dos, sin tarjeta: los separa una línea arriba. Cada
   uno abre con su figurita de teselas —la señal, el teléfono, los negocios
   aparte y el enlace—, armada con sombras de una sola tesela.
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .crece {
  display: grid;
  gap: clamp(32px, 4vw, 48px) clamp(24px, 5vw, 72px);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  :is(.pagina-portada, .pagina-landing) .crece {
    grid-template-columns: 1fr 1fr;
  }
}

:is(.pagina-portada, .pagina-landing) .crece__punto {
  padding-top: var(--esp-5);
  border-top: 1px solid var(--borde-fuerte);
}

/* Una tesela de 10 px y sus copias: la figura cabe en 36×36. */
:is(.pagina-portada, .pagina-landing) .crece__punto::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 26px 0 var(--esp-4);
  border-radius: 2px;
  background: var(--tesela-marca);
}

/* La señal: tres barras que suben, la más alta de Maíz. */
:is(.pagina-portada, .pagina-landing) .crece__punto:nth-child(4n + 1)::before {
  box-shadow:
    13px 0 0 var(--tesela-marca),
    13px -13px 0 var(--tesela-marca),
    26px 0 0 var(--tesela-marca),
    26px -13px 0 var(--tesela-marca),
    26px -26px 0 var(--cuentela-maiz);
}

/* El teléfono: dos de ancho por tres de alto, con la pantalla encendida. */
:is(.pagina-portada, .pagina-landing) .crece__punto:nth-child(4n + 2)::before {
  box-shadow:
    13px 0 0 var(--tesela-marca),
    0 -13px 0 var(--tesela-marca),
    13px -13px 0 var(--cuentela-maiz),
    0 -26px 0 var(--tesela-marca),
    13px -26px 0 var(--tesela-marca);
}

/* Cada negocio con lo suyo: tres aparte y uno de Maíz, con su hueco. */
:is(.pagina-portada, .pagina-landing) .crece__punto:nth-child(4n + 3)::before {
  box-shadow:
    18px 0 0 var(--tesela-marca),
    0 -18px 0 var(--tesela-marca),
    18px -18px 0 var(--cuentela-maiz);
}

/* El enlace: dos teselas que se tocan en diagonal y la de Maíz al final. */
:is(.pagina-portada, .pagina-landing) .crece__punto:nth-child(4n + 4)::before {
  box-shadow:
    13px -13px 0 var(--tesela-marca),
    26px -26px 0 var(--cuentela-maiz);
}

:is(.pagina-portada, .pagina-landing) .crece__titulo-punto {
  margin: 0 0 var(--esp-2);
  font-size: var(--letra-tarjeta);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

:is(.pagina-portada, .pagina-landing) .crece__texto {
  margin: 0;
  max-width: 48ch;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

.pagina-portada .crece__nota {
  max-width: 68ch;
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding: var(--esp-5) clamp(20px, 3vw, 32px);
  border-left: 4px solid var(--realce);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  background: var(--fondo);
  font-size: var(--letra-cuerpo);
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   11. Lo que cuesta
   -------------------------------------------------------------------------- */

/* ----- Los tres planes de la portada ----- */

/* Los tres se ven parejos (el dueño, 2026-10-03: «los planes no se ven
   uniformes, uno más alto que otro»). En pantalla ancha van en tres columnas
   iguales, con la misma altura, y por dentro comparten renglones con
   `subgrid`: el título, la cifra y la raya de debajo caen a la misma altura
   en las tres aunque la de paga traiga el triple de texto. Lo que no cabe
   en un renglón compartido —la nota y los puntos— va en `.plan__cuerpo`,
   que crece hacia abajo. Sin `subgrid`, quedan al menos de la misma altura. */

.pagina-portada .planes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 9px;
}

@media (min-width: 1000px) {
  .pagina-portada .planes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    align-items: stretch;
  }

  @supports (grid-template-rows: subgrid) {
    .pagina-portada .planes {
      grid-template-rows: auto auto 1fr;
      row-gap: 0;
    }

    .pagina-portada .plan {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

.pagina-portada .plan {
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio-panel);
  /* El doble bisel: la tarjeta asienta en una bandeja de papel hundido con
     su línea, como una pieza metida en su charola. */
  box-shadow:
    0 0 0 8px var(--fondo-hundido),
    0 0 0 9px var(--borde),
    var(--sombra-reposo);
}

/* El de paga, en cacao: no es «el bueno y el malo» —los tres son ofertas
   honestas—, es el que abre todo, y se lee primero. */
/* El mismo resplandor de la primera pieza del mapa, desde la esquina de
   abajo: con las tres a la misma altura, lo que le sobra a la gratuita se lee
   como superficie y no como hueco. Va en una capa aparte, debajo de la letra y
   no como fondo de la tarjeta, para que el arnés de contraste siga midiendo
   las cifras contra su color sólido —con un degradado de fondo las daría por
   indeterminadas—. */
.pagina-portada .plan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(130% 55% at 100% 100%, var(--hero-tinte), transparent 70%);
  pointer-events: none;
}

.pagina-portada .plan--pago::after {
  background: radial-gradient(130% 55% at 100% 100%, rgb(247 140 186 / 9%), transparent 70%);
}

.pagina-portada .plan--pago {
  background: var(--plan-fondo);
  border-color: var(--plan-fondo);
  color: var(--plan-texto);
  box-shadow:
    0 0 0 8px var(--fondo-hundido),
    0 0 0 9px var(--borde),
    var(--sombra-alzada);
}

@media (prefers-color-scheme: dark) {
  .pagina-portada .plan--pago {
    border-color: var(--cuentela-rosa-claro);
  }
}

.pagina-portada .plan--pago :is(.plan__titulo, .plan__cifra strong, .plan__cuerpo strong) {
  color: var(--plan-texto);
}

.pagina-portada .plan--pago :is(.plan__cifra, .plan__nota, .plan__puntos li, .texto-tenue) {
  color: var(--plan-tenue);
}

.pagina-portada .plan__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--esp-3);
  font-size: var(--letra-tarjeta);
}

.pagina-portada .plan__titulo::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--realce);
}

/* La cifra: el número grande y su unidad chica a su lado —«$199 al mes»—,
   cada precio en su renglón. Se estira hasta el fondo de su renglón
   compartido, así que la raya de abajo queda a la misma altura en los tres. */
.pagina-portada .plan__cifra {
  margin: 0;
  padding-bottom: var(--esp-5);
  border-bottom: 1px solid var(--borde);
  font-size: var(--letra-menor);
  font-weight: 600;
  line-height: 1.35;
  color: var(--texto-tenue);
}

.pagina-portada .plan--pago .plan__cifra {
  border-bottom-color: rgb(251 246 243 / 14%);
}

.pagina-portada .plan__precio {
  display: block;
}

.pagina-portada .plan__precio + .plan__precio {
  margin-top: var(--esp-1);
}

.pagina-portada .plan__cifra strong {
  font-family: var(--fuente-portada);
  font-size: var(--letra-cifra);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

/* El «·» entre el precio del mes y el del año: con cada precio en su renglón
   sobra a la vista, pero se queda para quien lee sin estilos o con lector. */
.pagina-portada .plan__separador {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* «con tu suscripción» de la tarjeta de Facturación: va en su renglón, pegado
   a «10 timbres al mes» (claim prohibido 4 de la hoja de verdad). */
.pagina-portada .plan__cifra > .texto-tenue:last-child {
  display: block;
  margin-top: var(--esp-1);
}

.pagina-portada .plan__cuerpo {
  padding-top: var(--esp-5);
  font-size: var(--letra-menor);
  line-height: 1.5;
}

.pagina-portada .plan__nota {
  margin: 0 0 var(--esp-4);
  color: var(--texto-tenue);
  text-wrap: pretty;
}

.pagina-portada .plan__puntos {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagina-portada .plan__puntos li {
  position: relative;
  padding-left: var(--esp-5);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.pagina-portada .plan__puntos li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--realce);
}

/* ----- El precio de una landing ----- */

.pagina-landing .precio {
  max-width: 760px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio-panel);
  box-shadow: var(--sombra-alzada);
}

/* La cifra se lee de lejos, como el total de la cotización. */
.pagina-landing .precio__cifra {
  margin: 0 0 var(--esp-3);
  font-family: var(--fuente-portada);
  font-size: var(--letra-titulo);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pagina-landing .precio__nota {
  margin: 0 0 var(--esp-5);
  max-width: 60ch;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

.pagina-landing .precio__puntos {
  display: grid;
  gap: var(--esp-3);
  list-style: none;
  margin: 0;
  padding: var(--esp-5) 0 0;
  border-top: 1px solid var(--borde);
}

.pagina-landing .precio__puntos li {
  position: relative;
  padding-left: var(--esp-5);
  color: var(--texto-tenue);
}

.pagina-landing .precio__puntos li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--realce);
}

/* --------------------------------------------------------------------------
   12. Empezar: el cierre, en un panel rosa
   --------------------------------------------------------------------------
   Rosa de acción con papel encima (5.75:1 en claro; en oscuro el rosa-claro
   con cacao encima, 6.93:1). Dentro, los botones se invierten: el primario en
   papel y el secundario hueco, con su borde del mismo color de la letra.
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .panel-cierre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  border-radius: var(--radio-panel);
  background: var(--panel-fondo);
  color: var(--panel-texto);
  box-shadow: 0 30px 60px -30px rgb(184 30 99 / 55%);
}

@media (prefers-color-scheme: dark) {
  :is(.pagina-portada, .pagina-landing) .panel-cierre {
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / 70%);
  }
}

/* La C del logotipo, enorme y tenue, asomando por la esquina. Es fondo: va en
   el color de la letra del panel al 12 %, y el Maíz a su lado. */
:is(.pagina-portada, .pagina-landing) .panel-cierre::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -56px;
  z-index: -1;
  width: 260px;
  height: 260px;
  background: currentColor;
  opacity: 0.12;
  -webkit-mask: var(--mascara-c)
    center / contain no-repeat;
  mask: var(--mascara-c)
    center / contain no-repeat;
  pointer-events: none;
}

@media (min-width: 760px) {
  :is(.pagina-portada, .pagina-landing) .panel-cierre::after {
    right: -20px;
    bottom: -40px;
    width: 340px;
    height: 340px;
  }
}

:is(.pagina-portada, .pagina-landing) .panel-cierre :is(h2, h3, p, strong, .texto-tenue) {
  color: var(--panel-texto);
}

:is(.pagina-portada, .pagina-landing) .panel-cierre .boton--primario {
  background: var(--panel-texto);
  color: var(--panel-fondo);
}

:is(.pagina-portada, .pagina-landing) .panel-cierre .boton--primario:hover:not(:disabled) {
  background: var(--panel-texto);
  color: var(--accion-hover);
  box-shadow: 0 10px 24px -10px rgb(43 34 38 / 45%);
}

:is(.pagina-portada, .pagina-landing) .panel-cierre .boton--secundario {
  background: transparent;
  border-color: var(--panel-texto);
  color: var(--panel-texto);
}

:is(.pagina-portada, .pagina-landing) .panel-cierre .boton--secundario:hover:not(:disabled) {
  background: rgb(251 246 243 / 14%);
  color: var(--panel-texto);
}

@media (prefers-color-scheme: dark) {
  :is(.pagina-portada, .pagina-landing) .panel-cierre .boton--secundario:hover:not(:disabled) {
    background: rgb(43 34 38 / 12%);
  }
}

/* En el panel el foco no puede ser rosa sobre rosa: va del color de la letra. */
:is(.pagina-portada, .pagina-landing) .panel-cierre :where(a, button):focus-visible {
  outline-color: var(--panel-texto);
}

/* ----- El de la portada: dos bloques, el del negocio en el panel ----- */

.pagina-portada .empezar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
  align-items: stretch;
}

@media (min-width: 900px) {
  .pagina-portada .empezar {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--esp-5);
  }
}

.pagina-portada .empezar__bloque {
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radio-panel);
}

/* En la portada el panel es más angosto y el texto llega casi al borde: la C
   de fondo se va a la esquina de arriba, que es la única que queda libre
   —el título es corto—. */
.pagina-portada .empezar__bloque.panel-cierre::after {
  top: -56px;
  right: -56px;
  bottom: auto;
  width: 220px;
  height: 220px;
}

/* El otro bloque —«¿Te llegó un enlace…?»— es una tesela de las de siempre.
   Con `:not()` y no pisando el panel: con la misma especificidad, la regla
   que llegara después le ganaba el fondo al rosa. */
.pagina-portada .empezar__bloque:not(.panel-cierre) {
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-reposo);
}

/* El enlace de muestra no se parte a media clave. */
.pagina-portada .empezar__bloque .texto-tenue {
  white-space: nowrap;
}

.pagina-portada .empezar__bloque p {
  max-width: 52ch;
}

.pagina-portada .empezar__titulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--letra-subtitulo);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.pagina-portada .empezar__bloque p:last-child {
  margin-bottom: 0;
}

.pagina-portada .empezar__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin: var(--esp-5) 0;
}

.pagina-portada .empezar__enlaces .boton {
  min-height: 52px;
  padding: 0 26px;
}

@media (max-width: 430px) {
  .pagina-portada .empezar__enlaces {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ----- El de la landing ----- */

.pagina-landing .empezar-landing .franja__titulo {
  max-width: 16ch;
}

.pagina-landing .empezar-landing .franja__entrada {
  max-width: 50ch;
  margin-bottom: var(--esp-6);
}

.pagina-landing .empezar-landing .hero__acciones {
  animation: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin: 0;
}

.pagina-landing .empezar-landing .hero__acciones .boton {
  min-height: 52px;
  padding: 0 26px;
  font-size: var(--letra-cuerpo);
}

@media (max-width: 430px) {
  .pagina-landing .empezar-landing .hero__acciones {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   13. Sólo las landings: la objeción, las preguntas y el puente
   -------------------------------------------------------------------------- */

/* La objeción: el párrafo que decide la venta, en grande y con su comilla. */
.pagina-landing .objecion {
  position: relative;
  max-width: 900px;
}

@media (min-width: 900px) {
  .pagina-landing .objecion {
    padding-left: 120px;
  }
}

.pagina-landing .objecion::before {
  content: "«";
  content: "«" / "";
  display: block;
  height: 0.62em;
  margin-bottom: var(--esp-3);
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 0.9;
  color: var(--tesela-marca);
}

@media (min-width: 900px) {
  .pagina-landing .objecion::before {
    position: absolute;
    top: -8px;
    left: 0;
    margin: 0;
    font-size: 5rem;
  }
}

.pagina-landing .objecion .franja__titulo {
  max-width: 22ch;
}

.pagina-landing .objecion__respuesta {
  margin: var(--esp-4) 0 0;
  max-width: 58ch;
  font-size: var(--letra-entrada);
  line-height: 1.6;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* Preguntas: a la vista, sin plegar —un `<details>` esconde justo lo que la
   gente vino a leer—. En pantalla ancha, la pregunta a la izquierda y la
   respuesta a su lado, separadas por su línea. */
.pagina-landing .faq {
  display: grid;
  gap: 0;
  max-width: 1040px;
  border-bottom: 1px solid var(--borde-fuerte);
}

.pagina-landing .faq__punto {
  padding: var(--esp-5) 0;
  border-top: 1px solid var(--borde-fuerte);
}

@media (min-width: 820px) {
  .pagina-landing .faq__punto {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(24px, 5vw, 64px);
    padding: var(--esp-6) 0;
  }
}

.pagina-landing .faq__pregunta {
  margin: 0 0 var(--esp-2);
  font-size: var(--letra-tarjeta);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.pagina-landing .faq__respuesta {
  margin: 0;
  color: var(--texto-tenue);
  text-wrap: pretty;
}

/* El puente: UN solo enlace, al final y después del CTA principal (plan 0165
   §A). Una tesela discreta, sin el rosa del primario: no compite con «Abre tu
   tienda». */
.pagina-landing .puente {
  position: relative;
  display: grid;
  gap: var(--esp-4);
  max-width: 900px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--fondo-elevado);
  border: 1px solid var(--borde);
  border-radius: var(--radio-panel);
  box-shadow: var(--sombra-reposo);
}

@media (min-width: 820px) {
  .pagina-landing .puente {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "rotulo rotulo"
      "titulo accion";
    align-items: center;
    column-gap: var(--esp-6);
  }

  .pagina-landing .puente .franja__rotulo {
    grid-area: rotulo;
    margin: 0;
  }

  .pagina-landing .puente__titulo {
    grid-area: titulo;
  }

  .pagina-landing .puente__accion {
    grid-area: accion;
  }
}

.pagina-landing .puente .franja__rotulo {
  margin: 0;
}

.pagina-landing .puente__titulo {
  margin: 0;
  font-size: var(--letra-subtitulo);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.pagina-landing .puente__accion {
  margin: 0;
}

/* --------------------------------------------------------------------------
   14. Pie
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .pie {
  padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--borde);
  background: var(--fondo);
}

:is(.pagina-portada, .pagina-landing) .pie__contenido {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--esp-3);
}

@media (min-width: 900px) {
  .pagina-portada .pie__contenido {
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--esp-5);
    row-gap: var(--esp-2);
    align-items: start;
  }

  .pagina-portada .pie__logo {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .pagina-portada .pie__texto {
    grid-column: 2;
  }

  .pagina-portada .pie__nav {
    grid-column: 3;
    grid-row: 1 / span 3;
  }

  .pagina-landing .pie__contenido {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--esp-5);
    row-gap: var(--esp-2);
  }

  .pagina-landing .pie__logo {
    grid-row: 1 / span 3;
  }

  .pagina-landing .pie__texto {
    grid-column: 2;
  }
}

:is(.pagina-portada, .pagina-landing) .pie__logo {
  width: 40px;
  height: 40px;
  flex: none;
}

:is(.pagina-portada, .pagina-landing) .pie__texto {
  margin: 0;
}

/* Los enlaces del pie viven en un renglón de texto de 0.875rem: el relleno
   les da la caja de 24×24 de WCAG 2.5.8 y el `border-radius` es la forma de su
   anillo de foco. El primero de cada renglón se pega al margen con el
   relleno negativo, para que el texto alinee a la izquierda. */
:is(.pagina-portada, .pagina-landing) .pie__texto a {
  display: inline-block;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: var(--radio-chico);
}

/* El nav del pie: las trece herramientas, en columnas. */
.pagina-portada .pie__nav {
  width: 100%;
  margin-top: var(--esp-4);
}

@media (min-width: 900px) {
  .pagina-portada .pie__nav {
    margin-top: 0;
  }
}

.pagina-portada .pie__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-1) var(--esp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 560px) {
  .pagina-portada .pie__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pagina-portada .pie__lista a {
  display: inline-block;
  min-height: 24px;
  padding: 4px var(--esp-2);
  margin-left: calc(-1 * var(--esp-2));
  border-radius: var(--radio-chico);
  color: var(--texto-tenue);
  text-decoration: none;
}

.pagina-portada .pie__lista a:hover {
  color: var(--accion);
  text-decoration: underline;
}

/* La marca, enorme, al cierre de la página: «Cuentela» en Quicksand, del
   rosa de las teselas desvaneciéndose hacia abajo, y recortada por el borde
   como un letrero que asoma. Es contenido generado con texto alterno vacío
   (`/ ""`): no es un nodo de texto, ningún lector de pantalla lo anuncia y el
   arnés de contraste no lo cuenta, porque no es letra que haya que leer. */
:is(.pagina-portada, .pagina-landing) .pie {
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

:is(.pagina-portada, .pagina-landing) .pie::after {
  content: "Cuentela";
  content: "Cuentela" / "";
  display: block;
  margin: clamp(40px, 6vw, 80px) auto 0;
  font-family: var(--fuente-portada);
  font-weight: 700;
  font-size: min(14vw, 176px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, var(--tesela-marca) 8%, transparent 88%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(16%);
  pointer-events: none;
  user-select: none;
}

/* El grano: una película de ruido fija sobre toda la página, tan tenue que
   no se ve como tal —quita lo plano de lo digital—. Sólo en pantalla ancha
   y con ratón: en un teléfono de gama baja una capa fija a pantalla completa
   se paga en cada cuadro. No recibe el puntero. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :is(.pagina-portada, .pagina-landing)::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.13 0 0 0 0 0.15 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: 0.045;
    pointer-events: none;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
  :is(.pagina-portada, .pagina-landing)::after {
    opacity: 0.08;
  }
}

/* --------------------------------------------------------------------------
   15. La barra fija de las landings
   --------------------------------------------------------------------------
   El `<aside>` del §9 de `estilos.css`, que acompaña todo el desplazamiento.
   En pantalla ancha flota como una cápsula de vidrio sobre la página; en un
   teléfono sigue pegada abajo, lisa. La pista se apaga en pantalla angosta: a
   360 px la barra se comía tres renglones.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .pagina-landing .barra-cta__pista {
    display: none;
  }

  /* A 360 px los dos botones caben en un renglón sólo sin la cápsula de la
     flecha: con ella «Abre tu tienda» se partía en dos, y la barra no tiene
     alto que regalar (`--alto-cta`). */
  .pagina-landing .barra-cta .boton.boton--primario[data-cta-registro] {
    padding-right: var(--esp-5);
  }

  .pagina-landing .barra-cta .boton--primario[data-cta-registro]::before,
  .pagina-landing .barra-cta .boton--primario[data-cta-registro]::after {
    display: none;
  }
}

/* Ningún botón de estas páginas parte su letrero. */
:is(.pagina-portada, .pagina-landing) .boton {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .pagina-landing .barra-cta {
    left: 50%;
    right: auto;
    bottom: var(--esp-4);
    width: min(1000px, calc(100% - 48px));
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-pildora);
    transform: translateX(-50%);
    box-shadow: var(--sombra-alzada);
  }

  .pagina-landing .barra-cta__contenido {
    padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-6);
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (min-width: 768px) {
    .pagina-landing .barra-cta {
      background: var(--sitio-fondo);
      -webkit-backdrop-filter: saturate(1.4) blur(16px);
      backdrop-filter: saturate(1.4) blur(16px);
    }
  }
}

/* --------------------------------------------------------------------------
   16. Movimiento
   --------------------------------------------------------------------------
   Los aparecidos al desplazar. El estado escondido se declara DENTRO de
   `@media (scripting: enabled)`: sin JavaScript —o en un navegador que ni
   entiende la consulta— el bloque no aplica y el contenido se ve siempre.

   Los hermanos de una rejilla entran escalonados por su posición en el
   renglón (`nth-child` con módulo), así que una fila de cuatro cae en
   cascada sin que la décima tesela espere medio segundo.
   -------------------------------------------------------------------------- */

:is(.pagina-portada, .pagina-landing) .revelar {
  transition:
    opacity 760ms var(--curva),
    transform 760ms var(--curva);
}

@media (scripting: enabled) {
  :is(.pagina-portada, .pagina-landing) .revelar {
    opacity: 0;
    transform: translateY(28px);
  }
}

:is(.pagina-portada, .pagina-landing) .revelado {
  opacity: 1;
  transform: none;
}

/* La pieza sí tiene su `transform` de reposo propio al pasar el ratón: una
   vez revelada, la transición vuelve a ser la de la tesela. */
.pagina-portada .pieza.revelado {
  transition:
    opacity 760ms var(--curva),
    transform 420ms var(--curva),
    box-shadow 420ms var(--curva),
    background-color 360ms var(--curva),
    border-radius 360ms var(--curva),
    border-color 200ms ease;
}

/* Las figuras chicas de las tarjetas (teléfono y tableta) se arman tesela
   por tesela cuando su tarjeta aparece. */
@media (scripting: enabled) {
  .pagina-portada .pieza.revelar:not(.revelado) .pieza__figura rect {
    opacity: 0;
    transform: scale(0.2);
  }
}

.pagina-portada .pieza.revelado .pieza__figura rect:nth-child(odd) {
  transition-delay: 160ms;
}

.pagina-portada .pieza.revelado .pieza__figura rect:nth-child(3n) {
  transition-delay: 260ms;
}

:is(.mapa, .capacidades, .planes, .crece, .pasos, .faq, .empezar) > .revelar:nth-child(4n + 2) {
  transition-delay: 70ms;
}

:is(.mapa, .capacidades, .planes, .crece, .pasos, .faq, .empezar) > .revelar:nth-child(4n + 3) {
  transition-delay: 140ms;
}

:is(.mapa, .capacidades, .planes, .crece, .pasos, .faq, .empezar) > .revelar:nth-child(4n + 4) {
  transition-delay: 210ms;
}

/* En la rejilla del mapa el retraso es sólo para entrar: al pasar el ratón la
   tesela tiene que contestar al instante. */
.pagina-portada .mapa > .revelado:hover {
  transition-delay: 0ms;
}

/* El QR del teléfono se arma tesela por tesela cuando el teléfono aparece. */
@media (scripting: enabled) {
  :is(.pagina-portada, .pagina-landing) .tienda-publica__muestra.revelar .muestra__qr rect {
    opacity: 0;
    transform: scale(0.3);
    transition:
      opacity 500ms var(--curva),
      transform 600ms var(--curva);
  }
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__muestra.revelado .muestra__qr rect {
  opacity: 1;
  transform: none;
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__muestra .muestra__qr rect:nth-child(4n + 1) {
  transition-delay: 240ms;
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__muestra .muestra__qr rect:nth-child(4n + 2) {
  transition-delay: 320ms;
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__muestra .muestra__qr rect:nth-child(4n + 3) {
  transition-delay: 400ms;
}

:is(.pagina-portada, .pagina-landing) .tienda-publica__muestra .muestra__qr rect:nth-child(4n + 4) {
  transition-delay: 480ms;
}

/* Quien pide menos movimiento no ve aparecer nada: el §11 de `estilos.css`
   apaga las transiciones, pero el estado escondido hay que deshacerlo aquí o
   el texto no llegaría nunca. `portada.js` tampoco observa nada en ese caso. */
@media (prefers-reduced-motion: reduce) {
  :is(.pagina-portada, .pagina-landing) .revelar,
  :is(.pagina-portada, .pagina-landing) .tienda-publica__muestra.revelar .muestra__qr rect {
    opacity: 1;
    transform: none;
  }

  :is(.pagina-portada, .pagina-landing) .hero__gota::after {
    animation: none;
  }

  :is(.pagina-portada, .pagina-landing) .muestra {
    transform: none;
  }
}