/* ============================================================
   Contacto Activo · hoja de estilos (rediseño 2026-09)
   ------------------------------------------------------------
   Dirección: «papel, tinta, timbre». El sitio se ve impreso, no como
   una app: portada en papel, la tinta reservada para dos capítulos
   (cómo funciona y el cierre), un solo acento (el coral del logo).

   Principios tomados de las referencias (auditorias/2026-09-25/06):
   - Un solo peso de titular (Fraunces 500). La jerarquía sale del
     tamaño y de un segundo tono en cursiva, no de negritas.
   - El salto grande va de título a texto, no entre títulos.
   - El ritmo se acelera con bloques densos y se frena con pausas de
     una sola idea. Nunca más de tres bloques densos seguidos.
   - El fondo cambia de golpe, sin animación, solo cuando cambia el tema.
   - Los objetos (teléfonos, tarjeta) no llevan sombra: la profundidad
     sale de su borde, su perspectiva y de montarse uno sobre otro.
   - Movimiento: un solo gesto (el tachón). Todo lo demás es respuesta
     de interfaz, bajo 300 ms.

   Mobile-first. Todo color sale de las fichas de :root.
   ============================================================ */

/* ---------- 0. El logotipo ----------
   El nombre del logo va en Bricolage Grotesque 800, que es la letra del
   logotipo, no la del sitio. Para no bajar la familia completa (77 KB),
   se aloja solo un subconjunto con las letras de «Contacto Activo»
   (1,5 KB). Se generó con fontTools; ver DISENO.md §Tipografía. */
@font-face {
  font-family: "Contacto Activo Logo";
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url(../assets/fuentes/bricolage-logo-800.woff2) format("woff2");
}

/* ---------- 1. Fichas ---------- */
:root {
  /* Superficies. Una sola tinta: la del logo. */
  --papel:        #F4F0E8;
  --papel-hondo:  #EAE4D8;
  --blanco:       #FFFDF9;
  --tinta:        #111318;
  --tinta-2:      #1B1D24;

  /* Texto. Contrastes medidos (WCAG):
     --texto sobre papel 16,4 · --mudo sobre papel 6,1 y sobre hondo 5,5
     --claro sobre tinta 15,5 · --mudo-claro sobre tinta 7,3 y sobre tinta-2 6,7 */
  --texto:        #111318;
  --mudo:         #5E5953;
  --claro:        #EEEAE3;
  --mudo-claro:   #A8A29A;
  --linea:        #D8D1C4;
  --linea-tinta:  #2C2E37;

  /* Un solo acento: el coral del logo.
     --acento pleno sobre tinta 5,8 · --acento-hondo como texto sobre papel 4,6
     (NO sobre papel-hondo: ahí da 4,1) · --sobre-acento sobre el coral 5,8 */
  --acento:       #FF4D6D;
  --acento-hover: #FF6680;
  --acento-hondo: #D31F42;
  --sobre-acento: #2A0710;

  /* Letras */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto-f: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Escala: saltos reales. Teléfono → escritorio.
     portada 54 → 76 · h2 32 → 44 · h3 21 → 26 · cuerpo 13 / 15 / 17 / 20 */
  --t-hero: clamp(3.375rem, 2.45rem + 3.8vw, 4.75rem);
  --t-2:    clamp(2rem, 1.72rem + 1.15vw, 2.75rem);
  --t-3:    clamp(1.3125rem, 1.2rem + .48vw, 1.625rem);
  --t-20: 1.25rem;
  --t-17: 1.0625rem;
  --t-15: .9375rem;
  --t-13: .8125rem;

  /* Ritmo: la unidad que se repite en lo denso y se rompe en las pausas. */
  --gutter: 20px;
  --denso: 72px;
  --pausa: 128px;
  --radio: 3px;              /* casi recto: papel cortado */

  /* Curvas (Emil Kowalski). Salida: responde rápido y frena suave.
     Entrada-salida: para algo que se mueve dentro de la pantalla. */
  --salida:  cubic-bezier(.23, 1, .32, 1);
  --trazo:   cubic-bezier(.77, 0, .175, 1);

  /* Colores de las tres casas de ejemplo, para las piezas que el sitio
     muestra (tarjeta y estado). Espejo de css/ejemplos.css:
     si cambia una casa allá, se cambia acá. «Qué recibes» usa solo Cordillera. */
  --cor-hoja: #FBF8F2;  --cor-tinta: #16232E; --cor-mudo: #5A5F63;
  --cor-linea: #D9D2C3; --cor-laton: #B8912F;
  --cor-claro: #C9CFD4;
  --wa-fondo: #0B141A;  --wa-mudo: #B8C2CA;   --wa-verde: #1FAD55; --wa-sobre: #06210F;
  --tinte-cor: #ECE5D5;
  --seleccion: #FFC9D3; --placeholder: #8F8981;
}
@media (min-width: 900px) {
  :root { --gutter: 32px; --denso: 104px; --pausa: 176px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--texto-f);
  font-size: var(--t-17);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
p, h1, h2, h3, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, a, summary, input, select { touch-action: manipulation; }
::selection { background: var(--seleccion); color: var(--tinta); }
input, select { caret-color: var(--acento-hondo); }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.seccion--tinta :focus-visible { outline-color: var(--acento); }

.saltar {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--tinta); color: var(--claro);
  padding: 12px 18px; font-weight: 700;
}
.saltar:focus { left: 12px; top: 12px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.env { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.env--angosto { max-width: 820px; }
.env--ancho { max-width: 1320px; }

/* ---------- 3. Tipografía ---------- */
.titular-hero, .titular-2, .titular-3, .pausa__frase, .cero__frase {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.titular-hero { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.02em; }
.titular-2    { font-size: var(--t-2);    line-height: 1.06; letter-spacing: -.015em; }
.titular-3    { font-size: var(--t-3);    line-height: 1.18; letter-spacing: -.005em; }

/* El segundo tono (Ramp + Stripe Press): la segunda frase del título va en
   cursiva y en un apagado SÓLIDO que pasa contraste. Nada de opacidad. */
.tono-1, .tono-2 { display: block; }
.tono-2 { font-style: italic; color: var(--mudo); }
.seccion--tinta .tono-2 { color: var(--mudo-claro); }

/* El tachón: el único gesto coreografiado del sitio.
   ¿Hace falta? Sí: es la tesis de la página actuada en una palabra.
   ¿Qué comunica? Que la tarjeta de papel ya fue: se descarta.
   ¿Qué curva? Entrada-salida (--trazo): arranca y frena como un plumón.
   ¿Cuánto dura? 280 ms, después de 420 ms para que el ojo llegue primero.
   Se dibuja recortando (clip-path), nunca escalando desde cero. */
.tachado { position: relative; white-space: nowrap; }
.tachado::after {
  content: "";
  position: absolute; left: -3%; right: -3%; top: 55%;
  height: .085em; border-radius: .04em;
  background: var(--acento);
  clip-path: inset(0 100% 0 0);
  animation: tachar 280ms 420ms var(--trazo) forwards;
}
.tachado--quieto::after { animation: none; clip-path: none; }
@keyframes tachar { to { clip-path: inset(0 0 0 0); } }

.enlace {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--texto);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: var(--acento-hondo);
}
/* Flecha dibujada (SVG como máscara), no un carácter de texto. */
.enlace::after {
  content: ""; width: 16px; height: 12px; margin-left: 8px; flex: 0 0 auto;
  background: var(--acento-hondo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.5 1.5 14 6l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h13M9.5 1.5 14 6l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms var(--salida);
}
.seccion--tinta .enlace { color: var(--claro); text-decoration-color: var(--acento); }
.seccion--tinta .enlace::after { background: var(--acento); }
@media (hover: hover) { .enlace:hover::after { transform: translateX(3px); } }

/* Motivo de marca: el símbolo de Contacto Activo como máscara, hereda color. */
.marca-qr {
  width: 18px; height: 19px; flex: 0 0 auto;
  background: var(--acento-hondo);
  -webkit-mask: url("../assets/simbolo.svg") center / contain no-repeat;
          mask: url("../assets/simbolo.svg") center / contain no-repeat;
}
.seccion--tinta .marca-qr { background: var(--acento); }

/* ---------- 4. Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px;
  border: 1.5px solid transparent; border-radius: var(--radio);
  font-family: var(--texto-f); font-size: var(--t-17); font-weight: 700;
  line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--salida), background-color 160ms var(--salida),
              border-color 160ms var(--salida), color 160ms var(--salida);
}
.boton svg { width: 22px; height: 22px; flex: 0 0 auto; }
.boton:active { transform: scale(.97); }
.boton--primario { background: var(--acento); color: var(--sobre-acento); }
.boton--linea { background: transparent; color: var(--texto); border-color: var(--texto); }
.boton--claro { background: var(--claro); color: var(--tinta); }
.boton--chico { min-height: 44px; padding: 0 16px; font-size: var(--t-15); }
.boton--bloque { width: 100%; }
.boton b { font-weight: 800; }
.boton__txt { text-wrap: balance; }
@media (hover: hover) {
  .boton--primario:hover { background: var(--acento-hover); }
  .boton--linea:hover { background: var(--texto); color: var(--papel); }
  .boton--claro:hover { background: #fff; }
}

/* ---------- 5. Barra superior (en papel, sin vidrio) ---------- */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  text-decoration: none; color: var(--tinta);
}
.logo__txt {
  font-family: "Contacto Activo Logo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800; font-size: 1.12rem; letter-spacing: -.035em; line-height: 1;
}
.logo .marca-qr { width: 20px; height: 21px; background: var(--acento); }
.barra__nav { display: none; gap: 4px; }
.barra__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-weight: 600; font-size: var(--t-15); color: var(--mudo); text-decoration: none;
  transition: color 160ms var(--salida);
}
@media (hover: hover) { .barra__nav a:hover { color: var(--texto); } }
@media (min-width: 980px) { .barra__nav { display: flex; } }

/* ---------- 6. Secciones y ritmo ---------- */
.seccion { padding-block: var(--denso); }
/* Dos bloques densos seguidos sobre el mismo fondo: la línea los separa y
   el espacio de arriba se acorta, así se leen como un solo tramo rápido. */
.seccion--junta { border-top: 1px solid var(--linea); }
.seccion--hondo { background: var(--papel-hondo); }
.seccion--tinta { background: var(--tinta); color: var(--claro); }
.seccion .titular-2 { max-width: 22ch; }

/* ---------- 7. Portada ---------- */
.hero { padding-top: 28px; overflow: hidden; }
.hero__rejilla { display: grid; gap: 28px; }
.titular-hero .tono-2 { margin-top: .04em; }
.hero__bajada { margin-top: 18px; font-size: var(--t-17); color: var(--mudo); max-width: 38ch; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 24px; }
.hero__acciones .boton--primario { width: 100%; }
.hero__nota {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  font-size: var(--t-15); color: var(--mudo);
}
/* La mesa de la portada vive en css/mesa.css. El abanico de tres
   teléfonos y el QR de escritorio que había antes se quitaron el
   2026-09-26: la mesa cuenta lo mismo, actuado. */

/* Marco de teléfono con una captura real adentro (selector de ejemplos
   y láminas). */
.tel {
  display: block; position: absolute; width: 150px;
  padding: 6px; border-radius: 28px;
  background: var(--tinta);
  text-decoration: none;
  transition: transform 200ms var(--salida), translate 200ms var(--salida);
}
.tel img { width: 100%; border-radius: 22px; }
@media (hover: hover) {
  .tel:hover { translate: 0 -6px; }
}

@media (min-width: 700px) {
  .hero__acciones .boton--primario, .cierre .hero__acciones .boton--primario { width: auto; }
  .tel { width: 200px; border-radius: 34px; padding: 8px; }
  .tel img { border-radius: 26px; }
}

@media (min-width: 980px) {
  .hero { padding-top: 72px; }
  .hero__rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; }
  .hero__texto { padding-bottom: 88px; }
  .hero__bajada { font-size: var(--t-20); }
  .hero__acciones .boton--primario { width: auto; }
}

/* ---------- 8. El problema ---------- */
.escenas { display: grid; gap: 0; margin-top: 40px; counter-reset: escena; }
.escena {
  display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px;
  padding: 24px 0; border-top: 1px solid var(--linea);
}
.escena__n {
  grid-row: span 2;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: var(--t-2); line-height: 1; color: var(--mudo);
}
.escena p { color: var(--mudo); max-width: 52ch; }
@media (min-width: 900px) {
  .escenas { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .escena { grid-template-columns: 1fr; padding-top: 28px; }
  .escena__n { grid-row: auto; margin-bottom: 12px; }
}

/* ---------- 9. Pausas: una sola idea, con aire ---------- */
.pausa { padding-block: var(--pausa); text-align: center; }
.pausa__frase {
  font-size: var(--t-2); line-height: 1.12; letter-spacing: -.015em;
  max-width: 24ch; margin-inline: auto;
}
.pausa__nota { margin-top: 20px; color: var(--mudo); }
.pausa--oferta { background: var(--blanco); border-block: 1px solid var(--linea); }
.pausa--oferta .boton { margin-top: 32px; }

/* ---------- 10. Cómo funciona (tinta) ---------- */
.pasos { display: grid; margin-top: 44px; }
.paso {
  display: grid; grid-template-columns: 28px 1fr; gap: 6px 14px;
  padding: 24px 0; border-top: 1px solid var(--linea-tinta);
}
.paso .marca-qr { grid-row: span 2; margin-top: 6px; }
.paso p { color: var(--mudo-claro); max-width: 46ch; }
@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .paso { grid-template-columns: 1fr; border-top-color: var(--acento); padding-top: 28px; }
  .paso .marca-qr { grid-row: auto; margin: 0 0 14px; }
}

/* La pausa dentro del capítulo: la cifra pesa por estar sola (Mercury). */
.cero { margin-top: var(--denso); padding-top: var(--denso); border-top: 1px solid var(--linea-tinta); text-align: center; }
.cero__frase { font-size: var(--t-2); line-height: 1.14; max-width: 24ch; margin-inline: auto; letter-spacing: -.015em; }
.cero__frase strong { font-weight: 500; color: var(--acento); }
.cero__nota { margin: 20px auto 0; max-width: 46ch; color: var(--mudo-claro); }

/* ---------- 11. Qué recibes ---------- */
/* Objetos compartidos: la tarjeta impresa y el estado de WhatsApp. */
.perspectiva { perspective: 900px; }
.tarjeta {
  width: 270px; aspect-ratio: 90 / 55;
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 16px 16px 14px 18px;
  background: var(--cor-hoja); color: var(--cor-tinta);
  border: 1px solid var(--cor-linea);
  /* El canto del papel dibujado en el objeto: sin sombra de CSS. */
  border-bottom-width: 3px; border-right-width: 2px;
  transform: rotateX(28deg) rotateZ(-8deg);
  transform-style: preserve-3d;
  font-family: "Spectral", Georgia, serif;
}
.tarjeta__datos { display: flex; flex-direction: column; min-width: 0; }
.tarjeta__casa {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
}
.tarjeta__casa img { width: 22px; }
.tarjeta__nom { margin-top: auto; font-weight: 600; font-size: 15px; line-height: 1.15; }
.tarjeta__cargo { font-style: italic; font-size: 11px; color: var(--cor-mudo); }
.tarjeta__tel { margin-top: 6px; font-size: 11px; font-variant-numeric: tabular-nums; }
.tarjeta__qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.tarjeta__qr img { width: 78px; }
.tarjeta__qr span { font-style: italic; font-size: 9px; color: var(--cor-mudo); }

/* El estado de WhatsApp de Rodrigo: la pieza en la identidad de su casa
   (Cordillera), dentro del marco oscuro que pone WhatsApp. */
.estado {
  width: 188px; padding: 8px 8px 12px; border-radius: 22px;
  background: var(--wa-fondo); color: #fff; font-family: var(--texto-f);
}
.estado__barras { display: flex; gap: 3px; padding: 4px 2px 8px; }
.estado__barras i { height: 2.5px; flex: 1; border-radius: 2px; background: rgb(255 255 255 / .35); }
.estado__barras i:first-child { background: #fff; }
.estado__cab { display: flex; align-items: center; gap: 7px; padding: 0 2px 9px; font-size: 11px; }
.estado__cab img { width: 22px; height: 22px; border-radius: 50%; }
.estado__cab em { margin-left: auto; font-style: normal; color: var(--wa-mudo); }
.estado__lienzo {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 12px 16px; border-radius: 12px;
  background: var(--cor-tinta); box-shadow: inset 0 -3px 0 var(--cor-laton); text-align: center;
  font-family: "Spectral", Georgia, serif;
}
/* El logo de la casa en su propia placa clara: nunca sobre el azul. */
.estado__membrete {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px;
  background: var(--cor-hoja); color: var(--cor-tinta);
  font-weight: 600; font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
}
.estado__membrete img { width: 18px; }
.estado__foto { width: 60px; height: 75px; object-fit: cover; object-position: 50% 15%; margin: 12px 0 8px; border: 1px solid var(--cor-laton); }
.estado__lienzo b { font-weight: 600; font-size: 14px; }
.estado__lienzo small { font-style: italic; font-size: 10px; color: var(--cor-claro); }
.estado__qr { width: 64px; margin: 10px 0 6px; background: #fff; padding: 4px; }
.estado__tel { font-size: 10px; font-variant-numeric: tabular-nums; }

.qr-escala { display: flex; align-items: flex-end; gap: 20px; }
.qr-escala__grande { width: 150px; background: #fff; padding: 10px; }
.qr-escala__chico { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--t-13); color: var(--mudo); }
.qr-escala__chico img { width: 46px; background: #fff; padding: 4px; }

/* La mesa: solo escritorio. Las cuatro piezas juntas, una montada sobre
   la otra, y el teléfono cortado por el borde de la mesa. */
.mesa { display: none; }

/* Láminas: carrusel en el teléfono. Cada lámina muestra su objeto sobre
   un papel teñido apenas con el color de su casa (Stripe Press). */
.laminas {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%;
  gap: 14px; margin-top: 36px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.laminas::-webkit-scrollbar { display: none; }
.lamina { scroll-snap-align: start; scroll-snap-stop: always; }
.lamina__objeto {
  height: 300px; border-radius: var(--radio); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Un solo ejecutivo: todas las láminas en el papel de su casa, alternando
   dos tonos para que se note el paso de una a otra. */
.lamina--pagina .lamina__objeto { background: var(--tinte-cor); align-items: flex-start; padding-top: 28px; }
.lamina--tarjeta .lamina__objeto { background: var(--papel-hondo); }
.lamina--qr .lamina__objeto { background: var(--tinte-cor); }
.lamina--estado .lamina__objeto { background: var(--papel-hondo); }
.tel--lamina { position: relative; width: 190px; }
.lamina figcaption { padding-top: 18px; }
.lamina__n { display: none; }
.lamina figcaption p { margin-top: 8px; color: var(--mudo); font-size: var(--t-15); }
.laminas:focus-visible { outline-offset: 6px; }

/* Puntos: posición y control. Área tocable de 44 px, punto dibujado de 8. */
.puntos { display: flex; justify-content: center; gap: 0; margin-top: 10px; }
.puntos button {
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.puntos button::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--linea); transition: background-color 160ms var(--salida), width 160ms var(--salida);
}
.puntos button[aria-current="true"]::after { width: 22px; border-radius: 4px; background: var(--tinta); }

@media (min-width: 900px) {
  .mesa {
    display: block; position: relative; height: clamp(460px, 40vw + 80px, 560px); margin-top: 56px;
    background: var(--papel-hondo); border-radius: var(--radio); overflow: hidden;
  }
  /* Las cuatro piezas en el MISMO orden y en las MISMAS columnas que los
     textos de abajo (2026-10-02, pedido de Felipe: antes se leían 4, 1, 3, 2).
     La fila interior mide lo mismo que .env y usa la grilla de .laminas, así
     cada pieza queda sobre su texto y su número sobre el número del texto. */
  .mesa__fila {
    position: relative; height: 100%; margin-inline: auto;
    max-width: calc(1180px - 2 * var(--gutter));
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  }
  .mesa__pieza { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 76px; }
  .mesa__n {
    position: absolute; left: 0; top: 22px; font-family: var(--display); font-style: italic;
    font-size: var(--t-3); line-height: 1; color: var(--mudo);
  }
  /* 1 · el teléfono, cortado por el borde de la mesa */
  .mesa__tel .tel--mesa { position: relative; width: min(230px, 88%); }
  /* 2 · la tarjeta, echada sobre la mesa; puede pasarse un poco de su columna */
  .mesa__tarjeta, .mesa__adhesivo { justify-content: center; padding-top: 0; }
  .mesa__tarjeta .perspectiva { width: min(300px, 118%); }
  .mesa__tarjeta .tarjeta { width: 100%; }
  /* 3 · el QR, como adhesivo */
  .mesa__adhesivo img { width: min(120px, 62%); margin-top: -40px; background: #fff; padding: 7px; transform: rotate(6deg); }
  /* 4 · la imagen de estado, en el marco de WhatsApp */
  .mesa__estado .estado { width: min(188px, 78%); transform: rotate(4deg); }

  .laminas {
    grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto;
    overflow: visible; margin-inline: 0; padding-inline: 0; gap: 32px; margin-top: 32px;
  }
  .laminas:focus-visible { outline: none; }
  .lamina__objeto { display: none; }
  .lamina figcaption { padding-top: 0; }
  .lamina__n {
    display: block; font-family: var(--display); font-style: italic;
    font-size: var(--t-3); color: var(--mudo); margin-bottom: 6px;
  }
  #recibes .puntos { display: none; }
}

/* Las tres piezas incluidas (27-sep): una línea de papel las separa del kit,
   con la viñeta de la esquina del QR que usan los planes. */
.extras { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linea); }
.extras__titulo { font-weight: 700; }
.extras__lista { margin-top: 14px; display: grid; gap: 14px; }
.extras__lista li { display: flex; gap: 12px; color: var(--mudo); max-width: 60ch; }
.extras__lista b { color: var(--texto); }
.extras__lista li::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 15px; margin-top: .35em;
  background: var(--acento-hondo);
  -webkit-mask: url("../assets/simbolo.svg") center / contain no-repeat;
          mask: url("../assets/simbolo.svg") center / contain no-repeat;
}
@media (min-width: 900px) {
  .extras__lista { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* ---------- 12. Rubros ---------- */
.rubros { margin-top: 36px; }
.rubro { padding: 22px 0; border-top: 1px solid var(--linea); }
.rubro p { margin-top: 6px; color: var(--mudo); max-width: 56ch; }
.rubro .enlace { margin-top: 4px; }
@media (min-width: 900px) {
  .rubro { display: grid; grid-template-columns: 17rem minmax(0, 1fr) 15rem; gap: 32px; align-items: baseline; }
  .rubro .enlace { justify-self: end; }
  .rubro p { margin-top: 0; }
  .rubro .enlace { margin-top: 0; white-space: nowrap; }
}

/* ---------- 13. Planes ---------- */
.planes { display: grid; gap: 16px; margin-top: 40px; }
.plan {
  display: flex; flex-direction: column; gap: 16px;
  padding: 26px 22px; border: 1px solid var(--linea); border-radius: var(--radio);
}
.plan--destacado { background: var(--blanco); border: 2px solid var(--tinta); }
.plan__quien { color: var(--mudo); font-size: var(--t-15); }
.plan__precio { font-size: var(--t-15); color: var(--mudo); }
/* El precio va dentro de la frase, a tamaño de h3: pesa sin la plantilla
   «número grande + etiqueta» (Stripe Press). */
.plan__monto {
  font-family: var(--display); font-weight: 500; font-size: var(--t-3);
  color: var(--texto); font-variant-numeric: tabular-nums;
}
.plan__lista { display: grid; gap: 8px; font-size: var(--t-15); }
.plan__lista li { display: flex; gap: 10px; }
.plan__lista li::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: .45em;
  background: var(--acento-hondo);
  -webkit-mask: url("../assets/simbolo.svg") center / contain no-repeat;
          mask: url("../assets/simbolo.svg") center / contain no-repeat;
}
.plan__renueva { font-size: var(--t-15); color: var(--mudo); border-top: 1px dashed var(--linea); padding-top: 12px; }
.plan .boton { margin-top: auto; }
.plan:not(.plan--destacado) .boton--linea { border-color: var(--mudo); }

@media (max-width: 899px) {
  .planes {
    grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-block: 4px;
  }
  .planes::-webkit-scrollbar { display: none; }
  .plan { scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (min-width: 900px) {
  .planes { grid-template-columns: 1.15fr 1fr 1fr; align-items: stretch; }
  #planes .puntos { display: none; }
}

.comparador {
  width: 100%; margin-top: 36px; border-collapse: collapse; table-layout: fixed;
  font-size: var(--t-13); font-variant-numeric: tabular-nums;
}
.comparador th, .comparador td { padding: 10px 5px; text-align: center; vertical-align: top; border-bottom: 1px solid var(--linea); }
.comparador thead th { font-family: var(--display); font-weight: 500; font-size: var(--t-15); border-bottom: 2px solid var(--tinta); }
.comparador tbody th { text-align: left; width: 31%; font-weight: 600; color: var(--mudo); }
.comparador .col-destacada { background: var(--blanco); font-weight: 700; }
.comparador tbody tr:last-child > * { border-bottom: 0; }
.comparador .no { color: var(--mudo); font-weight: 400; }
@media (min-width: 560px) {
  .comparador { font-size: var(--t-15); }
  .comparador th, .comparador td { padding: 12px 10px; }
}
.planes__nota { margin-top: 24px; font-size: var(--t-15); color: var(--mudo); max-width: 72ch; }

/* ---------- 14. La cuenta: con cuántos clientes se paga ----------
   Reemplaza al «antes y después» de jefaturas (2026-10-02). Un objeto del
   mundo del vendedor —la boleta de papel térmico, con el timbre PAGADO—
   y una regla para poner su comisión. Sin sombra: la boleta se separa de
   la mesa por su papel y por el corte dentado de abajo. */
.cuenta { display: grid; gap: 28px; margin-top: 28px; }
.cuenta__bajada { color: var(--mudo); max-width: 50ch; }

/* La mesa y la boleta */
.cuenta__mesa {
  display: grid; place-items: center;
  padding: 36px 16px 44px;
  margin-inline: calc(var(--gutter) * -1);
  background: var(--papel-hondo);
}
.boleta {
  --diente: 12px;
  position: relative; width: 100%; max-width: 340px;
  padding: 24px 22px 38px;
  background: var(--blanco);
  transform: rotate(-1.5deg);
  font-size: var(--t-15); line-height: 1.35;
  /* El corte dentado del papel térmico (Temani Afif): un cono por diente. */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--diente) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--diente) 100%;
}
.boleta__marca { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--tinta); }
.boleta__marca .marca-qr { background: var(--acento); }
.boleta__marca .logo__txt { font-size: 1rem; }
.boleta__titulo {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  font-size: var(--t-13); font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  color: var(--mudo);
}
.boleta__titulo::before, .boleta__titulo::after { content: ""; flex: 1; border-top: 1px dashed var(--linea); }

.boleta__lineas { display: grid; gap: 8px; margin: 18px 0 0; }
.boleta__lineas > div { display: flex; align-items: baseline; align-items: last baseline; gap: 6px; }
.boleta__lineas > div[hidden] { display: none; }
.boleta__lineas dt { order: 1; color: var(--mudo); }
/* La guía de puntos entre el concepto y el monto, como en una boleta. */
.boleta__lineas > div::after { content: ""; order: 2; flex: 1 1 12px; min-width: 12px; border-bottom: 1.5px dotted var(--linea); transform: translateY(-.3em); }
.boleta__lineas dd { order: 3; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.boleta__lineas--total { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--linea); }
.boleta__lineas--total dt { color: var(--texto); }
.boleta__cifra { font-family: var(--display); font-weight: 500 !important; font-size: var(--t-2); line-height: 1; }
.boleta__pie {
  margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--linea);
  font-size: var(--t-13); color: var(--mudo); text-align: center; text-wrap: balance;
}

/* El timbre. Tiene su propio lugar bajo los totales: nunca tapa un monto.
   Tinta que se ve a través del papel (multiply) y con poros: una capa de
   motas color papel encima. Si las motas no cargaran, queda un timbre
   liso: nunca desaparece. */
.timbre {
  position: relative; width: max-content; margin: 26px auto 0;
  display: grid; justify-items: center; gap: 3px;
  padding: 9px 16px 8px;
  color: var(--acento-hondo);
  border: 3px solid currentColor; border-radius: 6px;
  outline: 1.5px solid currentColor; outline-offset: 3px;
  transform: rotate(-7deg);
  mix-blend-mode: multiply; opacity: .88;
  pointer-events: none;
}
.timbre::after {
  content: ""; position: absolute; inset: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -26 10.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.timbre b {
  font-family: var(--texto-f); font-weight: 700; font-size: 1.75rem; line-height: 1;
  letter-spacing: .16em; margin-right: -.16em; text-transform: uppercase;
}
.timbre span { font-family: var(--display); font-style: italic; font-size: var(--t-15); line-height: 1.1; }
/* Cae cuando cambia lo que dice, no en cada paso de la regla. 240 ms:
   respuesta de interfaz, como manda el tope de movimiento del sitio. */
.timbre.cae { animation: timbrar 240ms var(--salida); }
@keyframes timbrar {
  0%   { opacity: 0; transform: rotate(-7deg) scale(1.45); }
  55%  { opacity: .88; transform: rotate(-7deg) scale(.97); }
  100% { opacity: .88; transform: rotate(-7deg) scale(1); }
}

/* La regla: una regla de verdad, con su marca cada paso y la larga en
   $10 mil, $100 mil y $1 millón. El cursor es la aguja coral. */
.regla__cabeza { display: grid; gap: 2px; }
.regla__rotulo { font-size: var(--t-15); font-weight: 700; }
.regla__valor {
  font-family: var(--display); font-weight: 500; font-size: var(--t-2); line-height: 1.1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.regla__pista { position: relative; height: 56px; margin-top: 8px; }
.regla__marcas {
  position: absolute; inset: 0 14px; display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none;
}
.regla__marcas i { width: 1px; height: 12px; background: var(--mudo); }
.regla__marcas i:nth-child(9n+1) { height: 24px; background: var(--texto); }
.regla__pista input {
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  background: transparent; cursor: pointer;
}
.regla__pista input::-webkit-slider-runnable-track {
  height: 56px; background: linear-gradient(var(--texto), var(--texto)) 0 100% / 100% 1.5px no-repeat;
}
.regla__pista input::-moz-range-track {
  height: 56px; background: linear-gradient(var(--texto), var(--texto)) 0 100% / 100% 1.5px no-repeat;
}
.regla__pista input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 56px; border: 0; border-radius: 0;
  background:
    radial-gradient(circle at 50% 9px, var(--acento) 8.5px, transparent 9px),
    linear-gradient(var(--acento), var(--acento)) 50% 100% / 3px calc(100% - 12px) no-repeat;
}
.regla__pista input::-moz-range-thumb {
  width: 28px; height: 56px; border: 0; border-radius: 0;
  background:
    radial-gradient(circle at 50% 9px, var(--acento) 8.5px, transparent 9px),
    linear-gradient(var(--acento), var(--acento)) 50% 100% / 3px calc(100% - 12px) no-repeat;
}
.regla__pista input:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
.regla__cifras {
  display: grid; grid-template-columns: 1fr auto 1fr; margin-top: 6px;
  font-size: var(--t-13); color: var(--mudo); font-variant-numeric: tabular-nums;
}
.regla__cifras span:nth-child(2) { justify-self: center; }
.regla__cifras span:last-child { justify-self: end; }

/* Para quién: solo yo o el equipo, y cuántos son. */
.cuenta__quien { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.cuenta__modo { display: inline-flex; border: 1.5px solid var(--texto); border-radius: var(--radio); }
.cuenta__modo button {
  min-height: 44px; padding: 0 18px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-15); font-weight: 700; color: var(--texto);
  transition: background-color 160ms var(--salida), color 160ms var(--salida);
}
.cuenta__modo button + button { border-left: 1.5px solid var(--texto); }
.cuenta__modo button[aria-pressed="true"] { background: var(--texto); color: var(--papel); }
@media (hover: hover) { .cuenta__modo button[aria-pressed="false"]:hover { background: var(--papel-hondo); } }
.cuenta__equipo { display: inline-flex; align-items: center; gap: 4px; }
.cuenta__equipo[hidden] { display: none; }
.cuenta__equipo p { min-width: 9.5em; text-align: center; font-size: var(--t-15); color: var(--mudo); }
.cuenta__equipo output { font-family: var(--display); font-size: var(--t-20); color: var(--texto); font-variant-numeric: tabular-nums; }
.cuenta__equipo button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--linea); border-radius: var(--radio); background: var(--blanco); cursor: pointer;
  transition: border-color 160ms var(--salida), opacity 160ms var(--salida);
}
.cuenta__equipo button svg { width: 16px; height: 16px; fill: none; stroke: var(--texto); stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) { .cuenta__equipo button:not(:disabled):hover { border-color: var(--texto); } }
.cuenta__equipo button:disabled { opacity: .4; cursor: default; }
.cuenta__equipo button:active:not(:disabled) { transform: scale(.94); }

.cuenta__cta { width: 100%; margin-top: 28px; }
.cuenta__nota { margin-top: 14px; font-size: var(--t-15); color: var(--mudo); max-width: 46ch; }
.sin-js .cuenta__mando { display: none; }

@media (min-width: 560px) {
  .cuenta__mesa { margin-inline: 0; border-radius: var(--radio); padding: 48px 24px 56px; }
}
@media (min-width: 900px) {
  .cuenta {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas: "bajada mesa" "mando mesa";
    grid-template-rows: auto 1fr;
    gap: 36px 64px; margin-top: 40px;
  }
  .cuenta__bajada { grid-area: bajada; }
  .cuenta__mesa { grid-area: mesa; padding: 64px 40px 72px; align-self: start; }
  .cuenta__mando { grid-area: mando; }
  .boleta { max-width: 400px; padding: 32px 32px 46px; font-size: var(--t-17); }
  .timbre b { font-size: 2.1rem; }
  .timbre span { font-size: var(--t-17); }
  .cuenta__cta { width: auto; }
}

/* ---------- 15. Preguntas ---------- */
.faq { margin-top: 32px; border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item h3 { margin: 0; font: inherit; }
.faq__boton {
  width: 100%; min-height: 64px; padding: 18px 44px 18px 0; position: relative;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit;
  font-family: var(--display); font-weight: 500; font-size: var(--t-20); line-height: 1.25;
}
.faq__boton::before, .faq__boton::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  background: var(--acento-hondo); transition: transform 200ms var(--salida);
}
.faq__boton::before { width: 16px; height: 2px; margin-top: -1px; }
.faq__boton::after { width: 2px; height: 16px; right: 15px; margin-top: -8px; }
.faq__boton[aria-expanded="true"]::after { transform: rotate(90deg); }
@media (hover: hover) { .faq__boton:hover { color: var(--acento-hondo); } }
/* Acordeón con filas de grilla (0fr → 1fr): no anima propiedades de
   maquetación como max-height. */
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--salida); }
.faq__panel > div { overflow: hidden; }
.faq__panel.abierto { grid-template-rows: 1fr; }
.faq__panel p { padding-bottom: 22px; color: var(--mudo); max-width: 60ch; }
.sin-js .faq__panel { grid-template-rows: 1fr; }

/* ---------- 16. Cierre (tinta) ---------- */
.seccion--cierre { padding-block: var(--pausa) var(--denso); }
.cierre { display: grid; gap: 48px; }
.cierre__eco { font-family: var(--display); font-style: italic; font-size: var(--t-20); color: var(--mudo-claro); margin-bottom: 18px; }
.cierre__bajada { margin-top: 20px; color: var(--mudo-claro); max-width: 44ch; }
.cierre .hero__acciones .boton--primario { width: 100%; }
@media (min-width: 940px) {
  .cierre { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: end; }
  .cierre .hero__acciones .boton--primario { width: auto; }
}

.formulario { display: grid; gap: 16px; }
.campo { display: grid; gap: 7px; }
.campo label { font-size: var(--t-15); font-weight: 700; }
.campo input, .campo select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 1rem; color: var(--claro);
  background: var(--tinta-2); border: 1px solid var(--linea-tinta); border-radius: var(--radio);
  appearance: none;
}
.campo select {
  background-image: linear-gradient(45deg, transparent 50%, var(--mudo-claro) 50%), linear-gradient(-45deg, transparent 50%, var(--mudo-claro) 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}
.campo input::placeholder { color: var(--placeholder); }
.campo input:focus-visible, .campo select:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-color: var(--acento); }
.formulario__pie { font-size: var(--t-13); color: var(--mudo-claro); }

/* ---------- 17. Pie: corte seco a papel ---------- */
.pie { padding-block: 48px 104px; font-size: var(--t-15); color: var(--mudo); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; }
.pie__que { margin-top: 6px; }
.pie__enlaces { display: grid; gap: 0; }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--texto); }
@media (hover: hover) { .pie__enlaces a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.pie__legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: var(--t-13); max-width: 90ch; }

/* ---------- 18. WhatsApp flotante ----------
   Aparece cuando el botón de la portada ya quedó arriba y se esconde en
   el cierre, donde ya hay uno: nunca dos accesos a WhatsApp encima. */
.wsp-flotante {
  position: fixed; z-index: 70;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; min-width: 56px; padding: 0 16px; justify-content: center;
  border-radius: 999px; background: var(--wa-verde); color: var(--wa-sobre);
  font-weight: 700; text-decoration: none;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 200ms var(--salida), transform 200ms var(--salida);
}
.wsp-flotante.visible { opacity: 1; transform: none; pointer-events: auto; }
.wsp-flotante:active { transform: scale(.96); }
.wsp-flotante svg { width: 24px; height: 24px; }
.wsp-flotante span { display: none; }
@media (min-width: 560px) { .wsp-flotante span { display: inline; } }

/* ---------- 19. Movimiento reducido ----------
   El tachón queda dibujado de una vez; nada se desplaza. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tachado::after { animation: none; clip-path: none; }
  /* Se quita lo que se desplaza; los cambios de color se mantienen. */
  .tel, .enlace::after, .faq__panel, .faq__boton::after { transition: none; }
  .wsp-flotante { transform: none; transition: opacity 200ms var(--salida); }
  .boton:active, .wsp-flotante:active { transform: none; }
  .timbre.cae { animation: none; }
  .cuenta__equipo button:active:not(:disabled) { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .tel:hover, .enlace:hover::after { translate: none; transform: none; }
}

/* ---------- 20. Selector de ejemplos (demo/index.html) ----------
   Muestra las páginas, no los logos: cuatro teléfonos con la primera
   pantalla real de cada ejemplo, a distinta altura para que no se lean
   como cuatro tarjetas iguales. */
.selector { padding-block: 48px var(--denso); }
.selector__bajada { margin-top: 18px; color: var(--mudo); max-width: 46ch; }
.selector__lista { display: grid; gap: 48px; margin-top: 44px; }
.caso .caso__tel { position: relative; width: 220px; }
.caso h2 { margin-top: 20px; }
.caso h2 a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px; text-decoration-color: var(--acento-hondo);
}
.caso p { margin-top: 4px; color: var(--mudo); max-width: 34ch; }
.selector__aviso { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: var(--t-15); color: var(--mudo); max-width: 60ch; }
@media (min-width: 640px) {
  .selector__lista { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; align-items: start; }
  .caso .caso__tel { width: 100%; max-width: 260px; }
  .caso:nth-child(even) { margin-top: 64px; }
}
@media (min-width: 900px) { .selector { padding-top: 72px; } }
@media (min-width: 1100px) {
  .selector__lista { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .caso .caso__tel { max-width: 280px; }
  .caso:nth-child(2) { margin-top: 64px; }
  .caso:nth-child(3) { margin-top: 24px; }
  .caso:nth-child(4) { margin-top: 88px; }
}

/* ---------- 21. Tablet (700–899): carruseles con dos láminas a la vista ---------- */
@media (min-width: 700px) and (max-width: 899px) {
  .laminas { grid-auto-columns: 46%; }
  .planes { grid-auto-columns: 48%; }
}

/* Las piezas REALES del kit (desde el 2026-10-02): la tarjeta y la imagen de
   estado que hizo el generador para el ejemplo de Valeria (BICE VIDA), en vez
   de réplicas dibujadas. Mismo objeto y mismo canto de papel; el contenido es
   el archivo que se entrega. */
.tarjeta--real {
  display: block; padding: 0; aspect-ratio: 90 / 50;
  background: #fff; border-color: #D8D1C4; overflow: hidden;
}
.tarjeta--real img { width: 100%; height: 100%; object-fit: cover; }
.estado__imagen { display: block; width: 100%; height: auto; border-radius: 12px; }

/* En el carrusel del teléfono la lámina mide 300 px de alto y la imagen de
   estado real (9:16) con su marco de WhatsApp medía unos 360: salía cortada
   arriba y abajo. Más angosta, entra entera (2026-10-02). */
.lamina__objeto .estado--real { width: 146px; padding: 6px 6px 9px; border-radius: 18px; }
.lamina__objeto .estado--real .estado__cab { padding-bottom: 6px; font-size: 10px; }
.lamina__objeto .estado--real .estado__cab img { width: 18px; height: 18px; }