/* ==========================================================================
   PROPIEX — landing
   Dirección: lámina editorial. Se construye con filetes de 1 px, no con cajas
   ni sombras. Tipografía grande y confiada, aire, y el color racionado.

   REGLA DE CONTRASTE, INNEGOCIABLE
   --verde-500 (#57A177) da 3,1:1 sobre blanco: solo sirve como STROKE de icono
   o como filete. Nunca en una regla `color:`. Para texto verde sobre fondo
   claro va --verde-600; sobre fondos tintados (verde-50) va --verde-650.

   PRESUPUESTO DE COLOR
   Máximo 6 apariciones de verde vivo por pantalla visible. Si aparece una
   séptima, alguna se apaga a --gris-texto.

   TECHO DE PESO
   600 en todo, salvo el H1, los precios de los planes y el neto de la
   liquidación, donde 700 se lee como firmeza y no como grito.

   ORDEN DEL ARCHIVO
   1 tokens · 2 base · 3 utilidades · 4 botones · 5 nav · 6 hero
   7 tarjeta de cifras · 8 problema · 9 lo que resuelve · 10 IPC
   11 cómo funciona · 12 banda de dispositivos · 13 para quién · 14 lanzamiento
   15 Excel · 16 preguntas · 17 cierre · 18 pie · 19 movimiento
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* Marca — paleta del producto */
  --verde-900: #123A2C;   /* fondos oscuros, botones, títulos */
  --verde-800: #164736;
  --verde-700: #1D5B44;   /* filetes sobre fondo oscuro */
  --verde-650: #2C7550;   /* texto verde sobre fondos tintados — 4,8:1 */
  --verde-600: #2F7D55;   /* texto verde sobre blanco y crema — 5,0:1 */
  --verde-500: #57A177;   /* SOLO stroke de icono y filetes — 3,1:1 */
  --verde-300: #8ECFA6;   /* trazos y texto sobre verde-900 — 7,0:1 */
  --verde-50:  #E8F0EA;   /* fondo de bloque claro */
  --crema:     #F4F7F5;   /* fondo de página */

  /* Neutrales */
  --blanco:     #FFFFFF;
  --tinta:      #14201B;  /* texto principal */
  --gris-texto: #565550;  /* texto secundario — 6,9:1 sobre crema, 7,5:1 sobre blanco */
  --gris-tinte: #4E4D49;  /* el mismo papel sobre fondos tintados — 7,3:1 sobre verde-50 */
  --gris-meta:  #5E5D59;  /* etiquetas y metadatos pequeños — 6,1:1 sobre crema */
  --gris-borde: #BFBBB8;
  --linea:      #DFE5E1;  /* el filete de 1 px, material de construcción */
  --linea-dura: #C9D3CC;

  /* Semánticos — confinados a las maquetas y a los chips */
  --mora:      #B4471F;
  --mora-bg:   #FBEDE7;
  --espera:    #8A6410;
  --espera-bg: #FBF3E0;

  /* Tipografía */
  --fuente: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-h1:      clamp(2.375rem, 1.6rem + 2.9vw, 3.75rem);      /* 38 → 60 */
  --t-h2:      clamp(1.75rem, 1.36rem + 1.55vw, 2.5rem);      /* 28 → 40 */
  --t-h3:      clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);   /* 18 → 21 */
  --t-lead:    clamp(1.0625rem, 0.99rem + 0.35vw, 1.3125rem); /* 17 → 21 */
  --t-body:    1.0625rem;                                      /* 17 */
  --t-sm:      0.9375rem;                                      /* 15 */
  --t-xs:      0.8125rem;                                      /* 13 */
  --t-eyebrow: 0.75rem;                                        /* 12 */

  /* Radios — 16 es el techo; solo los marcos de dispositivo pasan de ahí */
  --r-ui:   12px;
  --r-card: 16px;
  --r-pill: 999px;

  /* Medidas */
  --ancho:    1200px;
  --aire:     clamp(20px, 5vw, 40px);
  --seccion:  clamp(52px, 5.5vw, 84px);
  --nav-alto: 72px;
}

/* ---------- 2. BASE ------------------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 400 var(--t-body)/1.6 var(--fuente);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg{ display: block; max-width: 100%; }

h1, h2, h3, h4, p, figure, dl, dd, blockquote{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }

a{ color: inherit; }
button{ font: inherit; color: inherit; }
hr{ border: 0; margin: 0; }

/* ---------- 3. UTILIDADES ------------------------------------------------ */
.wrap{
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--aire);
}

.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace de salto: invisible hasta que recibe foco por teclado */
.salto{
  position: absolute;
  left: var(--aire); top: 8px;
  z-index: 100;
  transform: translateY(-250%);
  background: var(--verde-900);
  color: var(--crema);
  padding: 12px 20px;
  border-radius: var(--r-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
}
.salto:focus{ transform: translateY(0); }

/* El filete de 1 px. Es el material con el que está construida la página. */
.rule{ height: 1px; background: var(--linea); width: 100%; }
.rule--dura{ background: var(--linea-dura); }
.rule--oscura{ background: var(--verde-700); }

.eyebrow{
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}

/* Iconos del sprite. El color entra por `color:` y sale como stroke. */
.ico{ width: 26px; height: 26px; flex: none; color: var(--verde-500); stroke-width: 1.75; }
.ico--26{ width: 34px; height: 34px; stroke-width: 1.6; }  /* bloques de valor e IPC */
.ico--16{ width: 18px; height: 18px; }
/* Funciona porque al <symbol id="i-check"> se le quito su atributo
   stroke-width: asi hereda el del <svg class="ico"> que lo instancia. */
.ico--check{ stroke-width: 2; }

/* Titulares de sección */
.titulo{
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--verde-900);
  text-wrap: balance;
}
.bajada{
  margin-top: 14px;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--gris-texto);
  max-width: 54ch;
}

.seccion{ padding-block: var(--seccion); }
.fondo-blanco{ background: var(--blanco); }
.fondo-crema{ background: var(--crema); }
.fondo-oscuro{ background: var(--verde-900); color: rgba(244,247,245,.88); }
.fondo-oscuro .titulo{ color: var(--crema); }
.fondo-oscuro .bajada{ color: rgba(244,247,245,.82); }
.fondo-oscuro .eyebrow{ color: rgba(244,247,245,.72); }

/* Encabezado de sección: filete arriba, luego el título */
.encabezado .rule{ margin-bottom: 20px; }

/* ---------- 4. BOTONES --------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--verde-900);
  cursor: pointer;
}
/* Doble clase a propósito: la capa de movimiento va al final del archivo y su
   regla `.btn` (fondo verde oscuro) pisaría esta variante si tuvieran la misma
   especificidad. Lo mismo pasa con .plan.plan--destacado y .tarjeta. */
.btn.btn--sobre-oscuro{
  background: var(--crema);
  color: var(--verde-900);
  border-color: var(--crema);
}
.btn.btn--sobre-oscuro:hover{ background: var(--blanco); }
.btn--ancho{ width: 100%; justify-content: center; }

.btn-linea{
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--r-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.enlace-flecha{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--verde-900);
  border-bottom: 1px solid var(--gris-texto);
  padding-bottom: 3px;
  transition: border-color 180ms var(--mov-curva, ease);
}
.enlace-flecha:hover{ border-bottom-color: var(--verde-900); }
.enlace-flecha .ico{ width: 20px; height: 20px; color: currentColor; }

/* ---------- 5. BARRA DE NAVEGACIÓN --------------------------------------- */
.nav__interior{
  height: var(--nav-alto);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__marca{
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--verde-900);
  margin-right: auto;
}
.nav__marca .isotipo{ width: 26px; height: 27px; flex: none; }
.nav__marca .nombre{
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -.057em;
  line-height: 1;
}
.nav__enlaces{ display: flex; align-items: center; gap: 30px; }
.nav__enlace{
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--gris-texto);
  text-decoration: none;
  transition: color 180ms var(--mov-curva, ease);
}
.nav__enlace:hover{ color: var(--verde-900); }

@media (max-width: 899px){
  .nav__enlaces{ display: none; }
}

/* ---------- 6. HERO ------------------------------------------------------ */
.hero{
  background: var(--crema);
  /* Aire de arriba corto a propósito: con 96 px, la fila de badges de tienda
     caía por debajo del pliegue en una ventana de 830 px de alto. */
  padding-block: clamp(28px, 3.4vw, 52px) clamp(72px, 9vw, 132px);
}
.hero__reja{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
}
.hero__texto{ grid-column: 1 / span 6; max-width: 560px; }
.hero__pieza{ grid-column: 7 / span 6; align-self: center; }

.hero__eyebrow{ margin-top: 14px; display: block; }

.hero h1{
  margin-top: 18px;
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--verde-900);
  text-wrap: balance;
}
.hero h1 .segunda{ color: var(--gris-texto); }
.br-desk{ display: none; }

.hero__lead{
  margin-top: 20px;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--gris-texto);
  max-width: 46ch;
}
.hero__ctas{
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__plataformas{ margin-top: 26px; }
.hero__plataformas .rule{ margin-bottom: 14px; }
.plataformas__linea{
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--gris-texto);
  margin-bottom: 12px;
}
.plataformas__linea strong{ font-weight: 500; color: var(--verde-900); }

@media (min-width: 1024px){ .br-desk{ display: inline; } }

/* La pieza NO sangra hacia la derecha. Antes lo hacía para darle ancho al
   monitor dibujado, y el resultado era una portada descentrada: 193 px de
   margen a la izquierda contra 74 px a la derecha. Ahora la foto vive dentro
   de la reja y los dos márgenes son iguales. */

@media (max-width: 1199px){
  .hero__texto{ grid-column: 1 / span 6; }
  .hero__pieza{ grid-column: 7 / span 6; }
}
@media (max-width: 899px){
  .hero__reja{ display: block; }
  .hero__texto{ max-width: 620px; }
  .hero h1{ letter-spacing: -.02em; }
  /* La foto ocupa el ancho completo de la columna: así sus bordes coinciden con
     los del texto. Con el max-width de 680 px quedaba unos píxeles metida hacia
     dentro y se notaba el desajuste. */
  .hero__pieza{ margin-top: 56px; }
}

/* La pieza del hero es una FOTO del producto: Propiex en un portátil y en un
   celular, sobre un escritorio (assets/img/propiex-app-dispositivos.jpg).
   Reemplazó a los marcos de dispositivo dibujados en CSS con las maquetas
   dentro. Esos marcos siguen existiendo en assets/maquetas.css (.px-dev-*) por
   si hay que volver a ellos, pero hoy la portada no los usa.
   La imagen lleva `alt` de verdad, no `aria-hidden`: se ve lo que es. */
.pieza__foto{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

/* ---------- 7. TARJETA DE CIFRAS (monta sobre el borde del hero) --------- */
.cifras-borde{ background: var(--blanco); }
.cifras{
  margin-top: calc(-1 * clamp(44px, 5.5vw, 76px));
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  position: relative;
  z-index: 4;
}
/* El encabezado dice para qué sirve el cuadro, no que las cifras son de
   ejemplo: es la promesa de la sección, presentada como una banda propia. */
.cifras__top{
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 3vw, 32px);
  background: var(--verde-50);
  border-bottom: 1px solid var(--linea);
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}
.cifras__ico{
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--verde-650);
  stroke-width: 1.6;
}
.cifras__intro{ min-width: 0; }
.cifras__titulo{
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--verde-900);
}
.cifras__sub{
  margin-top: 5px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--gris-tinte);
  max-width: 52ch;
}
.cifras__mes{
  margin-left: auto;
  flex: none;
  align-self: flex-start;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--verde-900);
  letter-spacing: -.01em;
  background: var(--blanco);
  border: 1px solid var(--verde-300);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  line-height: 1;
  white-space: nowrap;
}
.cifras__reja{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.cifras__celda{
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 32px);
  border-left: 1px solid var(--linea);
}
.cifras__celda:first-child{ border-left: 0; }
.cifras__lbl{
  font-size: var(--t-xs);
  color: var(--gris-texto);
  margin-bottom: 10px;
}
.cifras__valor{
  display: block;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--verde-900);
}
.cifras__celda--neto .cifras__valor{ font-weight: 700; }
.cifras__pie{
  margin-top: 8px;
  font-size: var(--t-xs);
  color: var(--gris-meta);
}

@media (max-width: 899px){
  .cifras__reja{ grid-template-columns: repeat(2, 1fr); }
  .cifras__celda:nth-child(3){ border-left: 0; }
  .cifras__celda:nth-child(n+3){ border-top: 1px solid var(--linea); }
}
@media (max-width: 479px){
  .cifras__reja{ grid-template-columns: 1fr; }
  .cifras__celda{ border-left: 0; border-top: 1px solid var(--linea); }
  .cifras__celda:first-child{ border-top: 0; }
  .cifras__top{ flex-wrap: wrap; }
  .cifras__mes{ margin-left: 0; order: -1; }
}

/* ---------- 8. EL PROBLEMA ----------------------------------------------- */
.problema{ padding-block: clamp(44px, 4.5vw, 68px); }
.problema__lista{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 5vw, 80px);
}
.problema__frase{
  border-top: 1px solid var(--linea);
  padding: clamp(26px, 3.4vw, 40px) 0;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.015em;
  color: var(--verde-900);
  max-width: 30ch;
}
.problema__cierre{
  border-top: 1px solid var(--linea);
  padding-top: 24px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--verde-600);
}
@media (max-width: 767px){
  .problema__lista{ grid-template-columns: 1fr; }
  .problema__frase{ max-width: none; }
}

/* ---------- 9. LO QUE RESUELVE ------------------------------------------- */
.resuelve__reja{
  display: grid;
  grid-template-columns: 4fr 8fr;
  column-gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.resuelve__titulo{ position: sticky; top: calc(var(--nav-alto) + 40px); }

.bloque{
  border-top: 1px solid var(--linea);
  padding-block: clamp(24px, 2.6vw, 36px);
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 20px;
}
.bloque:first-child{ border-top: 0; padding-top: 0; }
.bloque__num{
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--gris-texto);
  letter-spacing: .06em;
  padding-top: 4px;
}
.bloque__cabeza{
  display: flex;
  align-items: center;
  gap: 14px;
}
.bloque h3{
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--verde-900);
  line-height: 1.3;
}
/* Hijo directo a proposito: con `.bloque p` esta regla cruzaba la frontera de
   las piezas ilustradas y le pisaba margenes, color e interlineado a los
   parrafos de la maqueta de celular del bloque 02. */
.bloque > div > p{
  margin-top: 12px;
  color: var(--gris-texto);
  max-width: 58ch;
  line-height: 1.65;
}
.prueba{
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--gris-texto);
  border-left: 2px solid var(--verde-500);
  padding-left: 16px;
  max-width: 60ch;
}

@media (max-width: 899px){
  .resuelve__reja{ grid-template-columns: 1fr; row-gap: 32px; }
  .resuelve__titulo{ position: static; }
}
@media (max-width: 479px){
  .bloque{ grid-template-columns: 1fr; row-gap: 10px; }
  .bloque__num{ padding-top: 0; }
}

/* Maqueta dentro de un bloque de valor */
.maqueta{
  margin-top: 20px;
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  background: var(--blanco);
  overflow: hidden;
}
.maqueta__top{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--verde-900);
}
.maqueta__cuerpo{ padding: 20px; }

/* Factura del bloque 01 */
.factura__fila{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
}
.factura__fila:first-child{ border-top: 0; }
.factura__concepto{ color: var(--gris-texto); }
.factura__concepto small{ display: block; font-size: 12px; color: var(--gris-meta); }
.factura__monto{
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--verde-900);
  white-space: nowrap;
}
.factura__fila--total{
  border-top: 1px solid var(--linea-dura);
  margin-top: 4px;
  padding-top: 15px;
}
.factura__fila--total .factura__concepto{ color: var(--verde-900); font-weight: 500; }
.factura__fila--total .factura__monto{ font-size: 1.125rem; font-weight: 600; }

/* Aprobación del bloque 02 */
.aprobacion{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.aprobacion__lado{
  border: 1px solid var(--linea);
  border-radius: var(--r-ui);
  padding: 16px;
}
.aprobacion__rol{
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin-bottom: 12px;
}
.aprobacion__inm{ font-size: var(--t-sm); font-weight: 500; color: var(--verde-900); }
.aprobacion__monto{
  margin-top: 6px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}
.aprobacion__acciones{ margin-top: 14px; display: flex; gap: 8px; }
.mini-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1;
}
.mini-btn--solido{ background: var(--verde-900); color: var(--crema); }
.mini-btn--linea{ border: 1px solid var(--linea-dura); color: var(--gris-texto); }
.mini-btn .ico{ width: 15px; height: 15px; color: currentColor; }

.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.chip-revision{ background: var(--espera-bg); color: var(--espera); }
.chip-aprobado{ background: var(--verde-50); color: var(--verde-650); }
.chip .icono{ width: 14px; height: 14px; }

@media (max-width: 599px){
  .aprobacion{ grid-template-columns: 1fr; }
}

/* Liquidación del bloque 04 */
.liquidacion{
  margin-top: 20px;
  background: var(--verde-900);
  border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 28px);
  color: rgba(244,247,245,.88);
}
.liquidacion__top{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--verde-700);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--crema);
}
.liquidacion__fila{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: var(--t-sm);
}
.liquidacion__fila span:last-child{
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--crema);
  white-space: nowrap;
}
.liquidacion__fila--neto{
  border-top: 1px solid var(--verde-700);
  margin-top: 6px;
  padding-top: 16px;
  color: var(--crema);
  font-weight: 500;
}
.liquidacion__fila--neto span:last-child{
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--verde-300);
}

/* ---------- 10. REAJUSTE POR IPC ----------------------------------------- */
.ipc{
  margin-top: clamp(28px, 3vw, 44px);
  background: var(--verde-50);
  border-radius: var(--r-card);
  padding: clamp(26px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 20px;
}
.ipc h3{
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--verde-900);
  line-height: 1.3;
}
.ipc p{
  margin-top: 12px;
  color: var(--gris-tinte);
  max-width: 62ch;
  line-height: 1.65;
}
.ipc .prueba{ border-left-color: var(--verde-500); }
.ipc__pie{
  margin-top: 20px;
  font-size: var(--t-xs);
  color: var(--verde-650);
}
@media (max-width: 479px){
  .ipc{ grid-template-columns: 1fr; row-gap: 14px; }
}

/* ---------- 11. CÓMO FUNCIONA -------------------------------------------- */
.como__reja{ margin-top: clamp(28px, 3vw, 44px); }
.pasos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(24px, 3.5vw, 48px);
}

.paso{ border-top: 1px solid var(--linea-dura); padding-top: 24px; }
.paso__num{
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--verde-600);
}
.paso h3{
  margin-top: 14px;
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--verde-900);
}
.paso p{ margin-top: 10px; color: var(--gris-texto); line-height: 1.6; font-size: 1rem; max-width: 42ch; }
@media (max-width: 767px){
  .pasos{ grid-template-columns: 1fr; row-gap: 32px; }
}

/* ---------- 12. BANDA DE DISPOSITIVOS ------------------------------------ */
.banda{ padding-block: clamp(40px, 4vw, 60px); }
.banda__reja{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 32px;
}
.banda h2{
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--verde-900);
  max-width: 14ch;
}
.banda__nota{
  margin-top: 12px;
  font-size: 1rem;
  color: var(--gris-texto);
  max-width: 34ch;
}
.siluetas{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(24px, 4vw, 56px);
}
.silueta{ text-align: center; color: var(--verde-500); }
.silueta svg{ margin-inline: auto; }
.silueta__lbl{
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
@media (max-width: 767px){
  .banda__reja{ grid-template-columns: 1fr; align-items: start; }
  .siluetas{ justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- 13. PARA QUIÉN ES -------------------------------------------- */
.personas{
  margin-top: clamp(28px, 3vw, 44px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
/* El icono de cada persona va al mismo tamaño que el de los bloques de valor:
   34 px. Con 26 se veía como un detalle, no como la entrada del bloque. */
.persona > .ico{ width: 34px; height: 34px; stroke-width: 1.6; }
.persona{
  padding: clamp(26px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.persona h3{
  margin-top: 18px;
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--verde-900);
}
.persona__quien{
  margin-top: 12px;
  font-size: 1.0625rem;
  color: var(--verde-900);
  line-height: 1.55;
}
.persona__gana{
  margin-top: 14px;
  font-size: 1rem;
  color: var(--gris-texto);
  line-height: 1.65;
}
.persona__asi{
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
  color: var(--verde-600);
  line-height: 1.5;
}
@media (max-width: 899px){
  .personas{ grid-template-columns: 1fr; }
}

/* ---------- 14. LANZAMIENTO ---------------------------------------------- */
/* Reemplaza a la sección de planes: mientras dura el lanzamiento no se
   publican precios, solo la oferta de 3 meses gratis. Es una sola tarjeta
   verde oscuro sobre la sección crema, no una banda a todo el ancho: el cierre
   de la página ya es la banda oscura y dos seguidas pesarían demasiado. */
.lanzamiento{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: 28px;
  background: var(--verde-900);
  border-radius: var(--r-card);
  padding: clamp(30px, 3.6vw, 48px) clamp(28px, 4.5vw, 64px);
  color: rgba(244,247,245,.88);
}
.lanzamiento__eyebrow{
  display: inline-block;
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde-900);
  background: var(--verde-300);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  line-height: 1;
}
.lanzamiento__titulo{
  margin-top: 22px;
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--crema);
  text-wrap: balance;
  max-width: 18ch;
}
.lanzamiento__bajada{
  margin-top: 16px;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: rgba(244,247,245,.86);
  max-width: 46ch;
}
.lanzamiento__accion{ margin-top: 30px; }

/* La cifra grande: el gesto tipográfico de la sección. Es decorativa
   (aria-hidden): el título ya dice lo mismo en texto. */
.lanzamiento__cifra{
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding-left: clamp(28px, 4vw, 56px);
  border-left: 1px solid var(--verde-700);
}
.lanzamiento__numero{
  font-size: clamp(6rem, 4rem + 9vw, 11rem);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--verde-300);
}
.lanzamiento__unidad{
  font-size: clamp(1.125rem, .9rem + .9vw, 1.625rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--crema);
}

@media (max-width: 767px){
  .lanzamiento{ grid-template-columns: 1fr; }
  .lanzamiento__cifra{
    order: -1;
    padding-left: 0;
    border-left: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--verde-700);
  }
}

/* ---------- 15. EXCEL CONTRA PROPIEX ------------------------------------- */
.excel{ margin-top: clamp(28px, 3vw, 44px); }
.excel__fila{
  display: grid;
  grid-template-columns: 3fr 4.5fr 4.5fr;
  column-gap: clamp(24px, 3.5vw, 48px);
  border-top: 1px solid var(--linea);
  padding-block: clamp(18px, 2vw, 26px);
}
.excel__fila--cabeza{
  border-top: 0;
  padding-block: 0 16px;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.excel__que{ font-size: 1.0625rem; font-weight: 500; color: var(--verde-900); }
.excel__antes{ font-size: 1rem; color: var(--gris-texto); line-height: 1.6; }
.excel__ahora{ font-size: 1rem; color: var(--verde-900); line-height: 1.6; }
@media (max-width: 767px){
  .excel__fila{ grid-template-columns: 1fr; row-gap: 10px; }
  .excel__fila--cabeza{ display: none; }
  .excel__antes::before,
  .excel__ahora::before{
    display: block;
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--gris-texto);
    margin-bottom: 4px;
  }
  .excel__antes::before{ content: "En Excel"; }
  .excel__ahora::before{ content: "En Propiex"; }
}

/* ---------- 16. PREGUNTAS ------------------------------------------------ */
.preguntas__reja{
  display: grid;
  grid-template-columns: 4fr 8fr;
  column-gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 899px){
  .preguntas__reja{ grid-template-columns: 1fr; row-gap: 36px; }
}

/* ---------- 17. CIERRE --------------------------------------------------- */
.cierre{ padding-block: clamp(52px, 6vw, 84px); }
.cierre__reja{
  display: grid;
  /* La columna de plataformas va más ancha que la del texto: con 5 de 11 los
     tres badges no cabían en una línea y Google Play se caía solo a un segundo
     renglón. El texto de cierre es corto y aguanta bien la columna angosta. */
  grid-template-columns: 5fr 6fr;
  column-gap: clamp(32px, 6vw, 96px);
  align-items: start;
  row-gap: 44px;
}
.cierre h2{
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--crema);
  text-wrap: balance;
}
.cierre p{
  margin-top: 18px;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: rgba(244,247,245,.84);
  max-width: 44ch;
}
.cierre__accion{ margin-top: 32px; }
@media (max-width: 899px){
  .cierre__reja{ grid-template-columns: 1fr; }
}

/* ---------- 18. PIE ------------------------------------------------------ */
.pie{ background: var(--verde-900); color: rgba(244,247,245,.82); }
.pie__reja{
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 3fr;
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 44px;
  padding-block: clamp(40px, 4.5vw, 60px);
}
.pie__marca{
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--crema);
  text-decoration: none;
}
.pie__marca .isotipo{ width: 26px; height: 27px; flex: none; }
.pie__marca .nombre{
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -.057em;
  line-height: 1;
}
.pie__desc{ margin-top: 20px; font-size: var(--t-sm); color: var(--crema); }
.pie__apoyo{ margin-top: 8px; font-size: var(--t-sm); line-height: 1.6; max-width: 34ch; }

/* La relación marca/empresa, visible en el pie: es lo que revisa Meta cuando el
   nombre para mostrar de WhatsApp (Propiex) no es la razón social (Ottsa). */
.pie__ottsa{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--verde-700);
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(244,247,245,.82);
}
.pie__ottsa a{
  font-weight: 600;
  color: var(--crema);
  text-decoration: underline;
  text-decoration-color: var(--verde-500);
  text-underline-offset: 4px;
}
.pie__ottsa a:hover{ text-decoration-color: var(--crema); }
.pie__ottsa-desc{ color: rgba(244,247,245,.68); }
.pie__aviso a{ color: rgba(244,247,245,.88); text-underline-offset: 3px; }
.pie h3{
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(244,247,245,.74);
  margin-bottom: 14px;
}
.pie__lista{ display: grid; row-gap: 11px; }
.pie__lista a{
  font-size: 1rem;
  text-decoration: none;
  color: rgba(244,247,245,.88);
  transition: color 180ms var(--mov-curva, ease);
}
.pie__lista a:hover{ color: var(--crema); }
.pie__correo{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--verde-300);
  text-decoration: none;
}
.pie__correo .ico{ width: 20px; height: 20px; color: currentColor; }
.pie__horario{ margin-top: 10px; font-size: var(--t-xs); }
.pie__final{
  border-top: 1px solid var(--verde-700);
  padding-block: 28px 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.pie__legal{ display: flex; gap: 22px; flex-wrap: wrap; }
.pie__legal a{
  font-size: var(--t-sm);
  color: rgba(244,247,245,.80);
  text-decoration: none;
}
.pie__legal a:hover{ color: var(--crema); }
.pie__aviso{
  font-size: var(--t-xs);
  line-height: 1.6;
  color: rgba(244,247,245,.72);
  max-width: 62ch;
}
.pie__derechos{ font-size: var(--t-sm); color: rgba(244,247,245,.72); }
@media (max-width: 899px){
  .pie__reja{ grid-template-columns: 1fr 1fr; }
  .pie__marca-col{ grid-column: 1 / -1; }
}
@media (max-width: 479px){
  .pie__reja{ grid-template-columns: 1fr; }
}


/* ---------- 18b. AJUSTES DE ENSAMBLAJE ----------------------------------- */
/* Reglas que solo se pueden escribir cuando las piezas ya están montadas:
   el escalado de las maquetas dentro de la página y los remates de sección. */

/* El celular del inquilino dentro de la maqueta del bloque 02.
   OJO con el width: un contenedor de consulta cuyo ancho lo decide su contenido
   y cuyo contenido se mide en 100cqw se muerde la cola y colapsa a cero. Hay
   que darle un ancho que no dependa de lo que lleva dentro. */
.aprobacion__celular{
  container-type: inline-size;
  width: 100%;
  max-width: 240px;
  justify-self: center;
}
.aprobacion__celular .px-m-pantalla-a,
.aprobacion__celular .px-m-pantalla-b{ --px-m-base: calc(100cqw / 23.4375); }

/* Navegadores sin unidades de contenedor: tamaño fijo, sin sorpresas */
@supports not (width: 1cqw){
  .aprobacion__celular .px-m-pantalla-b{ --px-m-base: 10px; }
}

.aprobacion{ align-items: start; }
.aprobacion__lado{ align-self: center; }
.aprobacion__estado{ margin-top: 14px; }

/* Siluetas de la banda de dispositivos */
.silueta{ color: var(--verde-500); }
.silueta svg{ height: auto; }
.silueta--monitor svg{ width: clamp(112px, 13vw, 164px); }
.silueta--portatil svg{ width: clamp(100px, 11.5vw, 144px); }
.silueta--tableta svg{ width: clamp(60px, 6.6vw, 82px); }
.silueta--celular svg{ width: clamp(38px, 4.1vw, 51px); }
.silueta__ui rect{ fill: var(--verde-50); }
.silueta--monitor .silueta__ui rect:first-child,
.silueta--portatil .silueta__ui rect:first-child{ fill: var(--verde-300); opacity: .55; }

.banda__honesta{
  margin-top: clamp(24px, 2.6vw, 34px);
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
  color: var(--gris-texto);
}

/* Los tres badges caben en una sola línea dentro de la columna de texto del
   hero (560 px): con el ancho mínimo de fábrica (178 px + 14 de separación)
   se pasaban por 18 px y el de Google Play se iba solo a un segundo renglón. */
.hero__plataformas .px-badge-fila,
.cierre .px-badge-fila{ gap: 10px; }
/* A 50 px de alto los tres badges (navegador + dos oficiales de tienda) caben
   en la columna de texto del hero; a 54 px, el de Google Play se caía solo. */
.hero__plataformas .px-badge{ min-width: 168px; min-height: 50px; padding: 7px 16px 7px 14px; gap: 9px; }
.hero__plataformas .px-badge-oficial__img{ height: 50px; }
/* En celular los badges de tienda bajan a otra línea y la píldora "Pronto"
   sobresale por arriba: con 10 px de separación se montaba sobre el botón de
   navegador. */
@media (max-width: 560px){
  .hero__plataformas .px-badge-fila,
  .cierre .px-badge-fila{ row-gap: 26px; }
}
/* En el cierre la columna es más angosta (5 de 11): los badges se aprietan un
   poco más para que los tres sigan cabiendo en una línea. */
.cierre .px-badge{ min-width: 152px; padding: 10px 13px 10px 12px; gap: 8px; }

/* La línea de plataformas, sobre el fondo verde oscuro del cierre */
.plataformas__linea--oscura{ color: rgba(244,247,245,.82); }
.plataformas__linea--oscura strong{ color: var(--crema); }

/* Los cinco bloques de valor no necesitan contenedor propio: se apilan */
.resuelve__bloques{ min-width: 0; }

/* Las maquetas no desbordan nunca su columna */
.maqueta, .liquidacion{ max-width: 100%; }
.maqueta__cuerpo{ overflow-x: auto; }


/* ---------- 19. MOVIMIENTO ------------------------------------------------
   Generado en la especificacion de movimiento. Va SIEMPRE al final: sus reglas
   de interaccion ganan los empates con la capa de maquetacion de arriba.
   -------------------------------------------------------------------------- */
/* styles.css · tokens de movimiento */
:root{
  /* curva única de toda la página: sale rápido, aterriza sin rebote */
  --mov-curva:        cubic-bezier(0.16, 1, 0.3, 1);

  --mov-revelado:     620ms;   /* subir-y-aparecer */
  --mov-revelado-sua: 500ms;   /* aparecer         */
  --mov-revelado-esc: 700ms;   /* escalar-suave    */
  --mov-filete:       700ms;   /* scaleX de las hr */
  --mov-corta:        240ms;   /* crossfades, acordeón */
  --mov-ui:           180ms;   /* hover, foco, borde   */
  --mov-paso:         70ms;    /* escalón entre hermanos, máximo 5 pasos */

  --mov-sube:         24px;    /* desplazamiento de subir-y-aparecer */
  --mov-sube-corto:   16px;    /* variante para elementos pequeños   */
  --mov-paralaje:     12px;    /* tope duro del recorrido de paralaje */
}

/* styles.css · revelado */

/* Estado inicial: SOLO si el JS está vivo. Sin JS, todo se ve. */
html.js [data-anim]{
  opacity: 0;
  will-change: opacity, transform;
}
html.js [data-anim].subir-y-aparecer{ transform: translate3d(0, var(--mov-sube), 0); }
html.js [data-anim].aparecer{         transform: none; }
html.js [data-anim].escalar-suave{    transform: scale(0.97); }

/* Variante corta para chips, etiquetas y elementos de menos de 80 px de alto */
html.js [data-anim].subir-y-aparecer.corto{ transform: translate3d(0, var(--mov-sube-corto), 0); }

/* Estado final. La transición se declara AQUÍ: así no se dispara durante la carga. */
/* Estado final. La transición se declara AQUÍ: así no se dispara durante la carga.

   OJO CON LA ESPECIFICIDAD. El estado oculto se escribe `html.js [data-anim]` (0,2,1) y el de
   revelado tiene que ganarle. Con `[data-anim].esta-visible` a secas (0,2,0) PIERDE, y el efecto
   es que con JS activo la página entera se queda invisible para siempre: 56 elementos a opacidad 0.
   Por eso todas las reglas de abajo repiten el `html.js` y la variante .corto lleva su propia línea
   (su estado oculto es (0,4,1) y hay que superarlo). Si agregas un modificador de revelado nuevo,
   agrégale también su regla .esta-visible aquí. */
html.js [data-anim].esta-visible{
  opacity: 1;
  transform: none;
  will-change: auto;
  transition:
    opacity   var(--mov-dur, var(--mov-revelado)) var(--mov-curva) var(--mov-retraso, 0ms),
    transform var(--mov-dur, var(--mov-revelado)) var(--mov-curva) var(--mov-retraso, 0ms);
}
html.js [data-anim].subir-y-aparecer.corto.esta-visible{ transform: none; }
[data-anim].aparecer.esta-visible{      --mov-dur: var(--mov-revelado-sua); }
[data-anim].escalar-suave.esta-visible{ --mov-dur: var(--mov-revelado-esc); }

/* Filetes de encabezado: el único gesto "de dibujo" de la página.
   Se trazan desde la izquierda, como una regla que se compone. */
html.js hr.rule[data-anim]{ opacity: 1; transform: scaleX(0); transform-origin: left center; }
html.js hr.rule[data-anim].esta-visible{
  transform: scaleX(1);
  transition: transform var(--mov-filete) var(--mov-curva) var(--mov-retraso, 0ms);
}

/* styles.css · nav */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  background: var(--crema);
  border-bottom: 1px solid transparent;   /* reservado desde el inicio: cero salto */
  transition:
    background-color var(--mov-ui) var(--mov-curva),
    border-color     var(--mov-ui) var(--mov-curva);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)){
  .nav{
    background: color-mix(in srgb, var(--crema) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.08) blur(10px);
    backdrop-filter: saturate(1.08) blur(10px);
  }
}

body.con-scroll .nav{ border-bottom-color: var(--linea); }

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)){
  body.con-scroll .nav{ background: color-mix(in srgb, var(--crema) 92%, transparent); }
}

/* Anclas del nav: desplazamiento suave y respiro bajo la barra pegajosa */
html{ scroll-behavior: smooth; }
:where(section, [id]){ scroll-margin-top: 96px; }   /* 72 del nav + 24 de aire */

/* styles.css · cifras */
.cifra{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.03em;
}
.cifra .signo{                 /* el "$" va en un span propio */
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 0.12em;
  vertical-align: 0.06em;
}
/* Columnas de montos, siempre alineadas a la derecha */
.monto{ text-align: right; font-variant-numeric: tabular-nums; }

/* El contador congela su ancho antes de arrancar (lo calcula el JS):
   el número corre sin mover una sola línea a su alrededor. */
.cifra[data-contador]{ display: inline-block; }

/* styles.css · paralaje */
[data-paralaje]{
  will-change: transform;   /* el JS lo quita cuando desactiva */
  transition: none;         /* el paralaje NO se interpola: sigue al scroll */
}
@media (max-width: 1023.98px){
  [data-paralaje]{ transform: none !important; will-change: auto; }
}

/* styles.css · interacción */
.tarjeta{
  border: 1px solid var(--linea);
  border-radius: var(--r-card, 14px);
  background: #fff;
  transition:
    border-color     var(--mov-ui) var(--mov-curva),
    background-color var(--mov-ui) var(--mov-curva),
    transform        var(--mov-ui) var(--mov-curva);
}
.tarjeta:hover{ border-color: var(--verde-300); }

/* Modificador opcional: elevación de 2 px, sin sombra */
.tarjeta.eleva:hover{ transform: translate3d(0, -2px, 0); }

/* En pantallas táctiles no hay hover: se apaga para que no quede pegado tras el tap */
@media (hover: none){
  .tarjeta:hover{ border-color: var(--linea); }
  .tarjeta.eleva:hover{ transform: none; }
}

/* Botón sólido: solo color. No se mueve. */
.btn{
  background: var(--verde-900);
  color: var(--crema);
  border-radius: var(--r-ui, 12px);
  transition:
    background-color var(--mov-ui) var(--mov-curva),
    color            var(--mov-ui) var(--mov-curva),
    border-color     var(--mov-ui) var(--mov-curva);
}
.btn:hover{ background: #0D2E23; }

.btn-linea{                       /* el outline del nav */
  border: 1px solid var(--verde-900);
  color: var(--verde-900);
  background: transparent;
}
.btn-linea:hover{ background: var(--verde-50); }

/* Enlaces de texto: el subrayado se enciende, no se mueve nada */
.enlace{
  color: var(--verde-600);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition:
    text-decoration-color var(--mov-ui) var(--mov-curva),
    color                 var(--mov-ui) var(--mov-curva);
}
.enlace:hover{ text-decoration-color: currentColor; }

/* Foco visible global: obligatorio, y nunca se apaga */
:focus-visible{
  outline: 2px solid var(--verde-600);
  outline-offset: 3px;
  border-radius: inherit;
}

/* styles.css · chip del comprobante */
.chip-doble{ position: relative; display: inline-grid; }
.chip-doble > .chip{ grid-area: 1 / 1; transition: opacity var(--mov-corta) var(--mov-curva); }

.chip-doble .chip-revision{ opacity: 1; }
.chip-doble .chip-aprobado{ opacity: 0; }

.chip-doble[data-estado="aprobado"] .chip-revision{ opacity: 0; }
.chip-doble[data-estado="aprobado"] .chip-aprobado{ opacity: 1; }

/* El check hace un solo pulso: 1 -> 1,12 -> 1. No rebota, no gira. */
.chip-doble[data-estado="aprobado"] .chip-aprobado .icono{
  animation: pulso-check 380ms var(--mov-curva) 120ms 1 both;
}
@keyframes pulso-check{
  0%  { transform: scale(1); }
  45% { transform: scale(1.12); }
  100%{ transform: scale(1); }
}

/* styles.css · preguntas frecuentes */
.faq{ border-top: 1px solid var(--linea); }
.faq:last-child{ border-bottom: 1px solid var(--linea); }

.faq__titulo{ margin: 0; font: inherit; }   /* el h3 no aporta estilo, solo semántica */

.faq__boton{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: 500 var(--t-h3, 1.1875rem)/1.35 Poppins, system-ui, sans-serif;
  color: var(--verde-900);
  transition: color var(--mov-ui) var(--mov-curva);
}
.faq__boton:hover{ color: var(--verde-600); }

.faq__chevron{
  flex: none;
  width: 24px; height: 24px;
  color: var(--verde-500);
  transition: transform var(--mov-corta) var(--mov-curva);
}
.faq[data-abierto="true"] .faq__chevron{ transform: rotate(180deg); }

/* El panel: una fila de grid que pasa de 0fr a 1fr */
.faq__panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mov-corta) var(--mov-curva);
}
.faq[data-abierto="true"] .faq__panel{ grid-template-rows: 1fr; }

.faq__interior{
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--mov-corta);
}
.faq[data-abierto="true"] .faq__interior{
  visibility: visible;
  transition-delay: 0s;
}
.faq__interior > p{
  margin: 0;
  padding: 0 0 22px;
  max-width: 66ch;
  color: var(--gris-texto);
  font: 400 var(--t-body, 1.0625rem)/1.68 Poppins, system-ui, sans-serif;
}

/* Navegadores sin animación de grid-template-rows: abre y cierra de golpe, sin romperse */
@supports not (grid-template-rows: 0fr){
  .faq__panel{ display: block; height: 0; overflow: hidden; }
  .faq[data-abierto="true"] .faq__panel{ height: auto; }
}

/* styles.css · interruptor de precios */
.periodo{
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--linea);
}
.periodo__opcion{
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 22px;
  font: 400 15px/1 Poppins, system-ui, sans-serif;
  color: var(--gris-texto);
  transition: color var(--mov-ui) var(--mov-curva);
}
.periodo__opcion[aria-pressed="true"]{ color: var(--verde-900); font-weight: 500; }

.periodo__filete{
  position: absolute;
  left: 0; bottom: -1px;
  width: 50%; height: 1px;
  background: var(--verde-900);
  transform: translateX(0);
  transition: transform 200ms var(--mov-curva);
}
.periodo[data-periodo="anual"] .periodo__filete{ transform: translateX(100%); }

/* El precio cambia con un desvanecido corto; el alto se reserva para que no salte la tarjeta */
.plan__precio{ min-height: 3.2em; display: flex; align-items: baseline; gap: 8px; }
.plan__precio .cifra,
.plan__precio .plan__sufijo{
  transition: opacity 150ms var(--mov-curva), transform 150ms var(--mov-curva);
}
.plan__precio .cambiando{ opacity: 0; transform: translate3d(0, -4px, 0); }



/* ---------- 20. CORRECCIONES POSTERIORES A LA REVISIÓN --------------------
   Van al final del archivo a propósito: corrigen reglas de la capa 19, que es
   la última, y por eso no pueden vivir más arriba.
   -------------------------------------------------------------------------- */

/* Foco visible sobre fondo verde oscuro.
   El contorno global es --verde-600, que sobre --verde-900 da 2,5:1: por debajo
   del 3:1 que exige un indicador de foco. Sobre oscuro se pinta en verde claro
   (7,0:1) y se le agrega un halo oscuro para que también se despegue de los
   botones color crema. */
.fondo-oscuro :focus-visible,
.pie :focus-visible,
.lanzamiento :focus-visible{
  outline-color: var(--verde-300);
  box-shadow: 0 0 0 5px rgba(18, 58, 44, .55);
}

/* Contraste de los iconos que sí comunican estado o afordancia.
   --verde-500 da 3,10:1 sobre blanco (justo en el umbral) pero solo 2,88:1
   sobre crema. En las secciones crema sube a --verde-600. */
.fondo-crema .ico,
.faq__chevron,
.silueta{ color: var(--verde-600); }

/* .ipc p le ganaba por especificidad a .ipc__pie y el --verde-650 nunca se
   llegaba a pintar. */
.ipc p.ipc__pie{ color: var(--verde-650); }
.ipc .prueba{ border-left-color: var(--verde-600); }

/* Los badges del cierre perdieron una línea de texto al quitarles la promesa de
   descarga y quedaron 8 px más bajos que el de navegador. Se igualan. */
.cierre .px-badge{ min-height: 55px; }

/* --- Header verde oscuro -------------------------------------------------
   La barra pasa a ser una banda de marca. Va aquí, al final, porque la capa de
   movimiento (sección 19) declara el fondo crema de .nav y su variante con
   color-mix, y hay que pisar las dos.
   Contrastes sobre --verde-900: crema 11,7:1 · enlaces al 78 % 7,7:1 ·
   borde del botón al 45 % 3,6:1 (mínimo 3:1 para un control). */
.nav{
  background: var(--verde-900);
  border-bottom: 1px solid transparent;
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)){
  .nav{ background: color-mix(in srgb, var(--verde-900) 92%, transparent); }
  body.con-scroll .nav{ background: color-mix(in srgb, var(--verde-900) 96%, transparent); }
}
body.con-scroll .nav{ border-bottom-color: rgba(142, 207, 166, .22); }

.nav__marca{ color: var(--crema); }
.nav__enlace{ color: rgba(244, 247, 245, .78); }
.nav__enlace:hover{ color: var(--crema); }

.nav .btn-linea{
  border-color: rgba(244, 247, 245, .45);
  color: var(--crema);
  background: transparent;
}
.nav .btn-linea:hover{
  background: rgba(244, 247, 245, .12);
  border-color: var(--crema);
}

.nav :focus-visible{
  outline-color: var(--verde-300);
  box-shadow: 0 0 0 5px rgba(18, 58, 44, .55);
}

/* El enlace de salto aparece encima de la barra oscura: se invierte para que se
   lea tanto sobre el verde del header como sobre el crema de la página. */
.salto{
  background: var(--crema);
  color: var(--verde-900);
  box-shadow: 0 0 0 2px var(--verde-900);
}

/* --- Ventanas bajas: la fila de tiendas tiene que entrar en la primera vista -
   En un portátil de 720–800 px de alto el hero no cabe con el aire de diseño y
   la fila de badges se iba por debajo del pliegue. Se comprime por ALTURA, no
   por ancho: en pantallas altas el hero mantiene su respiración. */
@media (min-width: 900px) and (max-height: 820px){
  .hero{ padding-block: 20px clamp(56px, 7vw, 96px); }
  .hero h1{
    margin-top: 14px;
    font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3rem);   /* 34 → 48 */
  }
  .hero__lead{ margin-top: 16px; }
  .hero__ctas{ margin-top: 22px; }
  .hero__plataformas{ margin-top: 20px; }
  .hero__plataformas .rule{ margin-bottom: 12px; }
}

/* ---------- 21. MOVIMIENTO REDUCIDO --------------------------------------
   SIEMPRE el último bloque del archivo: apaga con !important lo que hayan
   declarado todas las secciones anteriores, la 20 incluida. Si agregas una
   sección nueva, va ANTES de esta.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* Nada queda oculto ni a medio revelar */
  html.js [data-anim]{ opacity: 1 !important; transform: none !important; }
  html.js hr.rule[data-anim]{ transform: none !important; }

  /* El paralaje se apaga de raíz */
  [data-paralaje]{ transform: none !important; will-change: auto !important; }

  /* El acordeón abre y cierra de golpe, pero abre y cierra */
  .faq__interior{ transition: none !important; }

  /* El chip muestra el estado final sin pulso */
  .chip-doble .icono{ animation: none !important; }
}