/* Kiwi ERP · landing
   La misma casa que la app (Poppins para títulos, Open Sans para el texto, el verde
   del ícono «K» #2f7d32), con más voz: el verde monte de fondo y el verde pulpa del
   kiwi como acento, solo sobre fondo oscuro.
   Móvil primero. Sin estilos en línea en el HTML (la CSP no los necesita). */

/* ----------------------------------------------------------------- fuentes */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-800-latin.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* latin-ext: aquí vive el colón (₡, U+20A1) */
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Respaldos con las métricas ajustadas a Poppins y Open Sans: mientras la fuente
   llega (font-display: swap), el texto ocupa casi el mismo lugar y el titular no
   empuja la captura del héroe cuando cambia de letra (CLS). */
@font-face {
  font-family: "Poppins respaldo";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 112%; ascent-override: 93%; descent-override: 31%; line-gap-override: 9%;
}
@font-face {
  font-family: "Open Sans respaldo";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 105%; ascent-override: 101%; descent-override: 28%; line-gap-override: 0%;
}

/* ----------------------------------------------------------------- identidad */
:root {
  --monte: #0f3b2c;        /* fondo de héroe, clave y cierre */
  --monte-hondo: #0a2b20;  /* marcos sobre el monte */
  --kiwi: #2f7d32;         /* el verde del ícono: botones sobre claro (5,1:1 con blanco) */
  --kiwi-hondo: #23622a;   /* hover y enlaces sobre claro (7,0:1) */
  --pulpa: #c6e26b;        /* acento, SOLO sobre el monte (9,6:1) */
  --pulpa-viva: #d6ee88;
  --papel: #f2f6ef;        /* tramos alternos */
  --blanco: #ffffff;
  --tinta: #13231c;        /* texto (15:1 sobre blanco) */
  --tinta-suave: #44544c;  /* texto secundario (7,6:1 sobre blanco, 7:1 sobre papel) */
  --sobre-monte: #e8f0e9;  /* texto sobre el monte */
  --sobre-monte-suave: #b9ccbf; /* 7,9:1 sobre el monte */
  --linea: #d3dcd3;
  --sombra: 0 1px 0 rgba(10, 43, 32, 0.06), 0 16px 26px -18px rgba(10, 43, 32, 0.5);

  --titulos: "Poppins", "Poppins respaldo", "Segoe UI", system-ui, sans-serif;
  --texto: "Open Sans", "Open Sans respaldo", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --gutter: 16px;
  --ancho: 1180px;
  --foco: var(--kiwi-hondo);
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--titulos); color: inherit; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--kiwi-hondo); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--pulpa); color: var(--monte); }
figure { margin: 0; }
figcaption { font-size: 0.875rem; color: var(--tinta-suave); margin-top: 0.75rem; }
[hidden] { display: none !important; }

.envoltura { width: 100%; max-width: calc(var(--ancho) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.saltar {
  position: absolute; left: var(--gutter); top: -100px; z-index: 50;
  background: var(--pulpa); color: var(--monte); padding: 0.6rem 1rem; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ----------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.7rem 1.35rem;
  border-radius: 10px; border: 2px solid transparent;
  background: var(--kiwi); color: var(--blanco);
  font-family: var(--titulos); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}
.boton:hover { background: var(--kiwi-hondo); }
.boton:active { transform: translateY(1px); }
.boton--grande { min-height: 54px; padding: 0.85rem 1.6rem; font-size: 1.0625rem; }
.boton--chico { min-height: 44px; padding: 0.5rem 0.9rem; font-size: 0.9375rem; }
.boton--linea { background: transparent; color: var(--kiwi-hondo); border-color: currentColor; }
.boton--linea:hover { background: rgba(47, 125, 50, 0.08); }
.boton--pulpa { background: var(--pulpa); color: var(--monte); }
.boton--pulpa:hover { background: var(--pulpa-viva); }
.boton--linea-claro { color: var(--sobre-monte); }
.boton--linea-claro:hover { background: rgba(255, 255, 255, 0.08); }

.llamados { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem; }
/* En el teléfono, un botón por fila y a lo ancho: fácil de tocar, y el alto no depende
   de si la fuente ya llegó (con la de respaldo cabían dos por fila y al cambiar saltaba). */
@media (max-width: 519px) {
  .llamados { flex-direction: column; align-items: stretch; }
}

/* ----------------------------------------------------------------- barra
   Blanca, con el logo de Kiwi Dinámico: es la misma casa que el resto del sitio. */
.barra { background: var(--blanco); color: var(--tinta); border-bottom: 1px solid var(--linea); }
.barra__fila { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.marca { display: inline-flex; align-items: center; min-height: 44px; }
.marca__logo { height: 30px; width: auto; }
.marca__producto {
  display: none;
  font-family: var(--titulos); font-weight: 700; font-size: 1.0625rem; color: var(--monte);
  text-decoration: none; padding: 0.35rem 0 0.35rem 0.8rem; margin-left: 0.2rem; border-left: 2px solid var(--linea);
}
.barra__nav { display: none; }
.barra__acciones { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.barra .boton { white-space: nowrap; }
.enlace-entrar {
  color: var(--tinta); font-weight: 600; text-decoration: none; font-size: 0.9375rem;
  padding: 0.6rem 0.5rem; min-height: 44px; display: inline-flex; align-items: center;
}
.enlace-entrar:hover { color: var(--kiwi-hondo); text-decoration: underline; }
@media (max-width: 400px) {
  .marca__logo { height: 26px; }
  .barra .boton--chico { padding: 0.5rem 0.7rem; font-size: 0.875rem; }
}
@media (min-width: 560px) {
  .marca__logo { height: 36px; }
  .marca__producto { display: inline-block; }
}

/* ----------------------------------------------------------------- variantes
   data/planes.js marca <html> antes de pintar: data-precio-base="gratis" muestra el
   gancho de «gratis»; cualquier otro valor (o sin JS) muestra la versión sin precio.
   data-planes="si" muestra todo lo que habla de «Planes y precios».
   js/config.js marca data-registro="si" (registro abierto: «Crear mi cuenta») o "no"
   («Pedir mi cuenta», por solicitud). Sin JS se muestra la versión por solicitud. */
html:not([data-precio-base="gratis"]) .v-gratis,
html[data-precio-base="gratis"] .v-neutral,
html:not([data-planes="si"]) .solo-planes,
html:not([data-registro="si"]) .r-si,
html[data-registro="si"] .r-no { display: none !important; }

/* ----------------------------------------------------------------- héroe */
.heroe { background: var(--monte); color: var(--sobre-monte); padding: 2.25rem 0 0; --foco: var(--pulpa); overflow: hidden; }
.heroe h1 {
  color: var(--blanco);
  font-weight: 800;
  font-size: clamp(2.15rem, 8.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.heroe__bajada { font-size: 1.125rem; line-height: 1.6; color: var(--sobre-monte); max-width: 36rem; margin-top: 1.25rem; }
.heroe .boton--grande { background: var(--pulpa); color: var(--monte); }
.heroe .boton--grande:hover { background: var(--pulpa-viva); }
.heroe .boton--linea { color: var(--blanco); }
.heroe .boton--linea:hover { background: rgba(255, 255, 255, 0.08); }
.heroe__nota { font-size: 0.9375rem; color: var(--sobre-monte-suave); margin: 1.25rem 0 0; }

.heroe__pantallas { margin-top: 2.5rem; position: relative; }
.heroe__pantallas figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.heroe__telefono-extra { display: none; }

/* En el teléfono el héroe muestra el teléfono: la pantalla sale por abajo del monte. */
.marco--escritorio {
  width: min(76vw, 300px);
  margin: 0 auto -1px;
  border: 9px solid var(--monte-hondo);
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
  overflow: hidden;
  background: var(--blanco);
  aspect-ratio: 780 / 1180;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
}
.marco--escritorio img { width: 100%; height: auto; }

/* ----------------------------------------------------------------- tramos y filas */
.tramo { padding: 4.5rem 0; }
.tramo--claro { background: var(--papel); }
.tramo h2 {
  font-weight: 700;
  font-size: clamp(1.7rem, 5.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
  max-width: 22ch;
}
.fila { display: grid; gap: 2.25rem; }
.fila__texto { max-width: 34rem; }
.fila__texto p { color: var(--tinta-suave); }
.nota { font-size: 0.9375rem; border-top: 1px solid var(--linea); padding-top: 0.9rem; }

.lista { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.7rem; }
.lista li { position: relative; padding-left: 1.6rem; }
.lista li::before {
  /* una semilla de kiwi: pequeña, oscura, inclinada */
  content: ""; position: absolute; left: 0.2rem; top: 0.62em;
  width: 0.5rem; height: 0.82rem; border-radius: 50%;
  background: var(--kiwi); transform: rotate(28deg);
}

.marco {
  border-radius: 14px;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
}
.marco--telefono {
  border-radius: 30px;
  border: 7px solid var(--tinta);
  background: var(--tinta);
}
.marco--telefono img { border-radius: 23px; }
.marco--recorte { border-radius: 12px; }
@media (max-width: 699px) { .marco--lineas { max-width: 320px; margin: 0 auto; } }

/* Dos pantallas encimadas en la misma celda: una principal y otra que se le monta. */
.fila__imagen--doble { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.fila__imagen--doble > * { grid-row: 1; }
.fila__imagen--doble .doble__principal { grid-column: 2 / 9; }
.fila__imagen--doble .doble__encima { grid-column: 4 / 13; z-index: 1; margin-bottom: 14%; }
.fila__imagen--cobros { align-items: start; }
.fila__imagen--cobros .doble__principal { grid-column: 1 / 12; }
.fila__imagen--cobros .doble__encima { grid-column: 9 / 13; margin: 42% 0 0; align-self: start; }
@media (max-width: 699px) {
  .fila__imagen--cobros .doble__encima { grid-column: 7 / 13; margin-top: 30%; }
}
.fila__imagen--tarjeta img { width: min(100%, 340px); border-radius: 14px; box-shadow: var(--sombra); }
.fila__imagen--telefono .marco--telefono { width: min(72vw, 290px); margin: 0 auto; }

/* ----------------------------------------------------------------- la clave */
.clave-banda { background: var(--monte); color: var(--sobre-monte); padding: 4.5rem 0; --foco: var(--pulpa); }
.clave-banda h2 {
  color: var(--blanco); font-weight: 700;
  font-size: clamp(1.7rem, 5.2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.015em;
  max-width: 24ch; margin-bottom: 1rem;
}
.clave-banda__bajada { max-width: 40rem; color: var(--sobre-monte); }
.clave-banda__cierre { margin: 2.25rem 0 0; font-family: var(--titulos); font-weight: 600; font-size: 1.125rem; color: var(--blanco); }

.clave {
  margin: 2rem 0 1.75rem;
  font-family: var(--mono);
  font-size: clamp(1.2rem, 2.35vw, 1.9rem);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--blanco);
  font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; column-gap: 0.45em; row-gap: 0.1em;
}
.clave span {
  display: inline-block;
  padding-bottom: 0.18em;
  background-image: linear-gradient(var(--pulpa), var(--pulpa));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  transition: color 240ms ease-out, background-size 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* El único movimiento automático de la página: al llegar acá, los seis tramos se
   subrayan en orden, como quien lee la clave de izquierda a derecha. Sin JS o con
   movimiento reducido, el subrayado ya está completo desde el inicio. */
.clave[data-clave]:not(.es-leida) span { background-size: 100% 3px; }
@media (prefers-reduced-motion: no-preference) {
  .js-listo .clave:not(.es-leida) span { background-size: 0 3px; }
}
.clave.es-leida span:nth-child(2) { transition-delay: 0ms, 140ms; }
.clave.es-leida span:nth-child(3) { transition-delay: 0ms, 280ms; }
.clave.es-leida span:nth-child(4) { transition-delay: 0ms, 420ms; }
.clave.es-leida span:nth-child(5) { transition-delay: 0ms, 560ms; }
.clave.es-leida span:nth-child(6) { transition-delay: 0ms, 700ms; }
.clave span.es-activo { color: var(--pulpa); background-size: 100% 6px; }

.clave-partes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.clave-partes li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem;
  padding: 0.8rem 0; border-top: 1px solid rgba(198, 226, 107, 0.22);
  transition: border-color 200ms ease-out;
}
.clave-partes code {
  font-family: var(--mono); font-size: 0.9375rem; color: var(--pulpa);
  overflow-wrap: anywhere;
}
.clave-partes span { color: var(--sobre-monte); }
.clave-partes li.es-activo { border-top-color: var(--pulpa); }
.clave-partes li.es-activo span { color: var(--blanco); }

/* ----------------------------------------------------------------- índice */
.indice h2 { margin-bottom: 2rem; }
.indice__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2rem 2rem; }
.indice h3 { font-weight: 600; font-size: 1.125rem; color: var(--kiwi-hondo); padding-bottom: 0.6rem; border-bottom: 2px solid var(--kiwi); margin-bottom: 0.4rem; }
.indice ul { list-style: none; margin: 0; padding: 0; }
.indice li { padding: 0.5rem 0; border-bottom: 1px solid var(--linea); font-size: 0.975rem; line-height: 1.45; }

/* ----------------------------------------------------------------- pasos */
.pasos__lista { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2rem; counter-reset: paso; }
.pasos__lista li { counter-increment: paso; display: grid; align-content: start; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 1rem; }
.pasos__lista li::before {
  content: counter(paso);
  grid-row: span 2;
  font-family: var(--titulos); font-weight: 800; font-size: 3.2rem; line-height: 0.95;
  color: var(--kiwi); letter-spacing: -0.04em;
}
.pasos__lista h3 { font-weight: 700; font-size: 1.3rem; margin-bottom: 0.4rem; }
.pasos__lista p { color: var(--tinta-suave); margin: 0; max-width: 32rem; }
.pasos .llamados { margin-top: 2.5rem; }

/* ----------------------------------------------------------------- preguntas */
.preguntas__rejilla { display: grid; gap: 1.5rem; }
.preguntas__lista { border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: 0.9rem 0;
  font-family: var(--titulos); font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--kiwi), var(--kiwi)) center / 14px 2px no-repeat,
    linear-gradient(var(--kiwi), var(--kiwi)) center / 2px 14px no-repeat;
  transition: transform 200ms ease-out;
}
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { color: var(--tinta-suave); max-width: 44rem; }
.preguntas .enlace { font-weight: 600; }

/* ----------------------------------------------------------------- cierre y pie */
.cierre { background: var(--monte); color: var(--sobre-monte); padding: 4.5rem 0; --foco: var(--pulpa); }
.cierre h2 {
  color: var(--blanco); font-weight: 800;
  font-size: clamp(2rem, 6vw, 3rem); line-height: 1.08; letter-spacing: -0.018em; max-width: 22ch;
}
.pie { background: var(--blanco); color: var(--tinta-suave); padding: 2.5rem 0; font-size: 0.9375rem; border-top: 1px solid var(--linea); }
.pie__rejilla { display: grid; gap: 1.5rem; }
.pie p { margin: 0.4rem 0 0; }
.pie__logo { height: 36px; width: auto; }
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.pie__enlaces a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 0.6rem; color: var(--tinta); font-weight: 600; text-decoration: none; }
.pie__enlaces li:first-child a { padding-left: 0; }
.pie__enlaces a:hover { color: var(--kiwi-hondo); text-decoration: underline; }
.pie__nota { font-size: 0.875rem; }

/* ----------------------------------------------------------------- planes y precios
   Una pizarra de precios, como la de una soda: el nombre, los puntitos y el precio. */
.planes__bajada { color: var(--tinta-suave); max-width: 40rem; }
.planes__rejilla { display: grid; gap: 2rem; margin-top: 2.25rem; align-items: start; }
.plan-base {
  background: var(--monte); color: var(--sobre-monte); border-radius: 18px; padding: 1.75rem 1.5rem;
  --foco: var(--pulpa);
}
.plan-base h3 { color: var(--blanco); font-weight: 700; font-size: 1.35rem; }
.plan-base__precio {
  font-family: var(--titulos); font-weight: 800; color: var(--pulpa);
  font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1; letter-spacing: -0.02em; margin: 0.9rem 0 0.8rem;
}
.plan-base__resumen { color: var(--sobre-monte); }
.lista--clara li::before { background: var(--pulpa); }
.lista--clara li { color: var(--sobre-monte); font-size: 0.975rem; }
.plan-base .boton--linea { color: var(--pulpa); }
.plan-base__consultar { margin-top: 1.25rem; }

.modulos h3 { font-weight: 700; font-size: 1.35rem; margin-bottom: 0.5rem; }
.modulos__lista { list-style: none; margin: 0; padding: 0; }
.modulo { padding: 0.6rem 0 1rem; border-bottom: 1px solid var(--linea); }
.modulo__cabeza { display: flex; align-items: baseline; gap: 0.5rem; }
.modulo__nombre { margin: 0; font-family: var(--titulos); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.modulo__puntos { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted var(--borde-puntos, #9fb0a4); transform: translateY(-0.3em); }
.modulo__precio { font-family: var(--titulos); font-weight: 700; white-space: nowrap; color: var(--monte); }
.modulo__precio--texto { font-weight: 600; color: var(--tinta-suave); font-size: 0.9375rem; }
a.modulo__precio--consultar {
  font-size: 0.9375rem; font-weight: 600; color: var(--kiwi-hondo);
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.1rem;
  text-decoration: underline; text-decoration-thickness: 1px;
}
a.modulo__precio--consultar:hover { text-decoration-thickness: 2px; }
.modulo__cabeza { align-items: center; }
.modulo__puntos { transform: none; align-self: center; margin-top: 0.4em; }
.modulo__resuelve { margin: 0.3rem 0 0; color: var(--tinta-suave); font-size: 0.975rem; max-width: 40rem; }
.modulo__accion { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.modulo__modalidad { font-size: 0.9375rem; color: var(--tinta-suave); }

/* ================================================================= tableta */
@media (min-width: 700px) {
  :root { --gutter: 32px; }

  .clave-partes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .pasos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pasos__lista li { grid-template-columns: minmax(0, 1fr); }
  .pasos__lista li::before { grid-row: auto; margin-bottom: 0.75rem; }
}

/* ================================================================= escritorio */
@media (min-width: 1000px) {
  .barra__nav { display: flex; gap: 2px; margin-left: auto; }
  .barra__nav a {
    color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
    padding: 0.6rem 0.7rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px;
  }
  .barra__nav a:hover { color: var(--kiwi-hondo); background: rgba(47, 125, 50, 0.08); }
  .barra__nav + .barra__acciones { margin-left: 12px; }
}

@media (min-width: 900px) {
  .tramo, .clave-banda, .cierre { padding: 6rem 0; }

  /* Héroe: el texto a la izquierda y la pantalla que se sale por el borde derecho. */
  .heroe { padding: 4.5rem 0 0; }
  .heroe__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 3rem;
    align-items: start;
  }
  .heroe__texto { padding-bottom: 5rem; }
  .heroe__pantallas { margin: 0.75rem calc(-1 * var(--gutter) - max(0px, (100vw - var(--ancho) - 2 * var(--gutter)) / 2)) 0 0; align-self: end; }
  .marco--escritorio {
    width: auto; margin: 0; aspect-ratio: 1600 / 759;
    border: 8px solid var(--monte-hondo); border-right: 0; border-bottom: 0;
    border-radius: 16px 0 0 0;
    box-shadow: -20px -10px 60px rgba(0, 0, 0, 0.28);
  }
  .heroe__telefono-extra {
    display: block; position: absolute; left: -64px; bottom: 0;
    width: 168px; aspect-ratio: 780 / 1040; overflow: hidden;
    border-bottom: 0; border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  }
  .heroe__telefono-extra img { border-radius: 20px 20px 0 0; }

  .fila { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4.5rem; align-items: center; }
  .fila--invertida .fila__texto { order: 2; }
  .fila--angosta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .fila__imagen--telefono .marco--telefono { width: 280px; }

  .clave-partes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preguntas__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem; align-items: start; }
  .preguntas h2 { position: sticky; top: 2rem; }
  .cierre__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: end; }
  .cierre .llamados { margin: 0; justify-content: flex-end; }
  .planes__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; }
  .plan-base { padding: 2.25rem 2rem; position: sticky; top: 1.5rem; }
  .pie__rejilla { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .pie__nota { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .heroe h1 { font-size: clamp(2.5rem, 3.7vw, 3.25rem); line-height: 1.06; max-width: 19ch; }
}

/* ================================================================= movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation: none !important; }
}