/* =====================================================================
   SANTA AUTOMATIZA · ESTILOS DE LA PÁGINA DE VENTA
   ---------------------------------------------------------------------
   Idea: la página muestra el producto funcionando en vez de describirlo.
   - La primera pantalla se pinta del color del rubro elegido y recorre
     4 pantallas reales de la demo, como las historias de Instagram.
   - El resto usa cosas del mundo del cliente: el chat de WhatsApp y la
     comanda (ticket) con lo que incluye.
   - Página corta: cada sección entra en una pantalla o poco más.
   Misma letra que los locales, para que todo se sienta un solo producto.
   ===================================================================== */
:root {
    color-scheme: light;
    --tinta: #0D1230;      /* texto y bloques oscuros */
    --gris: #555B76;       /* texto secundario */
    --papel: #F4F5F9;      /* franjas grises */
    --linea: #E2E4EE;
    --azul: #1F4BFF;       /* la marca */
    --sol: #FFC83D;        /* acento: precios y la mesa del ticket */
    --rubro: #D9380B;      /* color del rubro elegido (lo cambia sa.js) */
    --dura: 5000ms;        /* cuánto dura cada pantalla del recorrido */
    --f: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--tinta); font: 400 1rem/1.5 var(--f); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 6vw + 0.4rem, 2.5rem); }
h2 { font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.125rem); }
h3 { font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.15; }
p, figure { margin: 0; }
.ancho { --gutter: 20px; width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }
.bajada { margin-top: 8px; color: var(--gris); max-width: 34em; }
.seccion { padding-block: clamp(36px, 5vw, 64px); }
.franja { background: var(--papel); }
@media (max-width: 380px) { .ancho { --gutter: 16px; } }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: 12px; font-weight: 700; font-size: 1rem; text-decoration: none; text-align: center; line-height: 1.2; }
.boton:active { transform: translateY(1px); }
.boton-chico { min-height: 38px; padding: 6px 14px; font-size: .875rem; border-radius: 10px; }
.boton-tinta { background: var(--tinta); color: #fff; }
.boton-sol { background: var(--sol); color: var(--tinta); }
.boton-blanco { background: #fff; color: var(--tinta); }
.boton-fantasma { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.boton-rubro { background: var(--rubro); color: #fff; }
.boton-linea { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }

/* ---------- Tope: arriba de todo es parte de la portada; al bajar (en PC) queda fijo y blanco ---------- */
.tope { background: var(--tinta); color: #fff; }
.tope-fila { display: flex; align-items: center; gap: 20px; min-height: 52px; }
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 800; font-size: 1rem; letter-spacing: -0.03em; margin-right: auto; white-space: nowrap; }
.marca svg { width: 28px; height: 28px; flex: none; }
.m-fondo { fill: var(--azul); }
.m-bolsa { fill: #fff; }
.m-asa { stroke: var(--sol); }
.tope-nav { display: none; gap: 24px; font-weight: 600; font-size: .9375rem; }
.tope-nav a { text-decoration: none; padding: 8px 0; opacity: .88; }
.bajo .tope-nav a { opacity: 1; }
.tope-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.tope-btn { display: none; background: var(--sol); color: var(--tinta); }
.tope :focus-visible { outline-color: #fff; }
@media (min-width: 860px) {
    .tope { position: sticky; top: 0; z-index: 20; }
    .tope-fila { min-height: 60px; }
    .tope-nav { display: flex; }
    .tope-btn { display: inline-flex; }
    .bajo .tope { background: #fff; color: var(--tinta); box-shadow: 0 1px 0 var(--linea); transition: none; }
    .bajo .tope-btn { background: var(--tinta); color: #fff; }
    .bajo .tope :focus-visible { outline-color: var(--azul); }
    #como, #incluye, #planes, #preguntas { scroll-margin-top: 40px; }
}

/* ---------- Portada ----------
   Lo que vive el dueño: su WhatsApp lleno de chats sin leer un viernes de temporada,
   al lado del único mensaje que le llega con su local online. Fondo azul noche de la marca. */
.hero { background: var(--tinta); color: #fff; overflow: hidden; }
.hero-fila { display: grid; gap: 26px; padding-block: 14px 34px; }
.hero-txt { min-width: 0; }
.hero h1 { font-size: clamp(1.875rem, min(8.6vw, 7.5vh) + .1rem, 4rem); line-height: .98; letter-spacing: -0.045em; max-width: 11em; }
.hero-bajada { margin-top: 12px; color: #D5D9EE; font-size: clamp(.9375rem, 3.6vw + .1rem, 1.0625rem); line-height: 1.45; max-width: 30em; }
.hero-btns { margin-top: 20px; display: grid; gap: 10px; justify-items: start; }
.boton-grande { min-height: 56px; padding: 14px 24px; border-radius: 14px; font-size: 1.0625rem; }
.hero-otras { color: #C3C8E6; font-size: .9375rem; }
.hero-otras a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.hero-precio { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); color: #C3C8E6; font-size: .9375rem; max-width: 30em; }
.hero-precio span { color: #fff; font-weight: 700; white-space: nowrap; }
.hero :focus-visible { outline-color: var(--sol); }
@media (max-width: 599px) { .boton-grande { width: 100%; min-height: 52px; padding: 12px 16px; } }

/* El antes y el después, con los colores reales de WhatsApp para que se reconozca al instante */
.hero-wa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.hero-wa figure { margin: 0; min-width: 0; }
.hero-wa figcaption { margin-bottom: 8px; color: #C3C8E6; font-size: .875rem; font-weight: 600; }
.wa-cel { background: #fff; color: #111B21; border-radius: 22px; overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); }
.wa-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.wa-cab b { color: #1DAA61; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.wa-filtros { display: flex; gap: 6px; }
.wa-filtros em { white-space: nowrap; font-style: normal; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #F0F2F5; color: #54656F; }
.wa-filtros .on { background: #D9FDD3; color: #0A7C3B; }
.wa-cel ul { list-style: none; margin: 0; padding: 0 0 6px; }
.wa-cel li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 14px; }
@media (max-width: 379px) { .wa-cel li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; padding: 7px 12px; } .wa-av { width: 36px !important; height: 36px !important; font-size: .9375rem !important; } .wa-cab b { font-size: 1.0625rem; } .wa-filtros em:first-child { display: none; } .wa-pedido { margin-left: 12px !important; } .wa-burbuja { font-size: .8125rem; } }
.wa-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; font-size: 1.0625rem; }
.wa-txt { min-width: 0; display: grid; border-bottom: 1px solid #EEF0F2; padding-bottom: 9px; margin-bottom: -9px; }
.wa-txt b { font-weight: 600; font-size: .9375rem; }
.wa-txt span { color: #3B4A54; font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-meta { display: grid; justify-items: end; gap: 4px; }
.wa-meta time { color: #1DAA61; font-size: .75rem; font-weight: 600; }
.wa-meta i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #25D366; color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.wa-pedido { position: relative; }
.wa-burbuja { position: relative; padding: 10px 12px 22px; border-radius: 0 14px 14px 14px; background: #fff; color: #111B21; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .875rem; line-height: 1.4; white-space: pre-wrap; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0, 0, 0, .04); }
.wa-burbuja time { position: absolute; right: 10px; bottom: 5px; font-size: .6875rem; color: #53BDEB; }
.wa-pedido { background: #EFE7DD; background-image: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1.4px); background-size: 15px 15px; padding: 12px; border-radius: 22px; }
.wa-pedido figcaption { color: #3F4560; }
/* En el celular: la lista se ve recortada (se entiende que sigue) y el pedido se le apoya encima */
@media (max-width: 899px) {
    .wa-cel ul li:nth-child(n+6) { display: none; }
    .wa-pedido { margin: -34px 0 0 22px; }
}
@media (min-width: 600px) and (max-width: 899px) and (orientation: landscape) {
    .hero-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; align-items: start; }
    .hero h1 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); }
    .wa-pedido { margin: -60px 0 0 30px; }
}
@media (min-width: 900px) {
    .hero-fila { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 52px; align-items: center; padding-block: 40px 56px; }
    .hero h1 { font-size: clamp(3.1rem, 4.7vw, 4.4rem); }
    .hero-bajada { font-size: 1.1875rem; }
    .hero-wa { grid-template-columns: minmax(0, 310px) minmax(0, 300px); justify-content: end; align-items: end; gap: 0; }
    .wa-lista { position: relative; z-index: 1; }
    .wa-pedido { margin: 0 0 -26px -34px; z-index: 2; }
    .wa-filtros em:first-child { display: none; }
}
@media (min-width: 900px) and (max-height: 760px) { .hero-fila { padding-block: 26px 40px; } .wa-cel li { padding-block: 6px; } }

/* ---------- Cómo funciona: las 4 pantallas reales, una al lado de la otra ---------- */
.como-cab { display: grid; gap: 16px; align-items: end; }
.como-cab .rubros { justify-self: start; }
@media (max-width: 479px) { .como-cab .rubros { justify-self: stretch; grid-auto-columns: minmax(0, 1fr); } .rubro { padding-inline: 6px; } }
.rubros { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 14px; background: var(--papel); max-width: 100%; }
.rubro { min-height: 42px; padding: 0 14px; border-radius: 10px; color: var(--gris); font-weight: 700; font-size: clamp(.8125rem, 3.6vw, .9375rem); white-space: nowrap; }
.rubro[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.como-btn { margin-top: 22px; }
@media (min-width: 900px) { .como-cab { grid-template-columns: minmax(0, 1fr) auto; } }
.pasos { list-style: none; margin: 24px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 6px; display: grid; grid-auto-flow: column; grid-auto-columns: min(68%, 250px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
.paso { display: grid; gap: 10px; align-content: start; scroll-snap-align: start; min-width: 0; }
.paso figure { aspect-ratio: 390 / 560; border-radius: 22px; overflow: hidden; background: var(--papel); box-shadow: 0 0 0 1px var(--linea); }
.paso img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.paso-cab { display: flex; align-items: flex-start; gap: 10px; }
.paso h3 { padding-top: 3px; }
.paso-n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font-weight: 800; font-size: .875rem; }
.paso h3 { font-size: 1.0625rem; }
.paso p { color: var(--gris); font-size: .9375rem; line-height: 1.4; }
@media (min-width: 900px) { .pasos { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- De 12 mensajes a 1 ---------- */
.ad { display: grid; gap: 14px; margin-top: 22px; align-items: start; }
.wa { position: relative; border-radius: 20px; overflow: hidden; background: #EFE7DD; background-image: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1.4px); background-size: 15px 15px; min-width: 0; }
.wa figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; padding: 10px 16px; color: #fff; font-size: .875rem; line-height: 1.3; }
.wa figcaption strong { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.wa-antes figcaption { background: #454A63; }
.wa-despues figcaption { background: #0B5D47; }
.wa-chat { display: flex; flex-direction: column; gap: 5px; padding: 12px 10px 14px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .875rem; line-height: 1.36; color: #111B21; }
.wa-chat p { max-width: 86%; padding: 6px 9px 5px; border-radius: 11px; box-shadow: 0 1px 1px rgba(0, 0, 0, .13); overflow-wrap: anywhere; }
.b-in { align-self: flex-start; background: #fff; border-top-left-radius: 0 !important; }
.b-out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 0 !important; }
.wa-chat time { float: right; margin: 6px 0 0 12px; font-size: .6875rem; color: #667781; }
.wa-chat .b-pedido { max-width: 96%; white-space: pre-wrap; padding: 9px 11px 7px; }
/* En el celular el chat largo se corta y se funde: se entiende que sigue sin tener que recorrerlo */
.wa-antes .wa-chat { max-height: 236px; overflow: hidden; }
.wa-sigue { position: absolute; left: 0; right: 0; bottom: 0; padding: 54px 16px 12px; background: linear-gradient(rgba(239, 231, 221, 0), #EFE7DD 54%); text-align: center; font-size: .875rem; font-weight: 600; color: #3F4560; }
.wa-despues { box-shadow: 0 0 0 1px var(--linea); }
.ad-cuenta { display: grid; align-content: center; padding: 16px 18px; border-radius: 20px; background: var(--tinta); color: #C9CEEA; line-height: 1.45; }
.ad-cuenta strong { color: #fff; font-weight: 700; }
@media (min-width: 860px) {
    .ad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px 24px; align-items: stretch; margin-top: 26px; }
    .wa-antes { grid-row: 1 / 3; }
    .wa-antes .wa-chat { max-height: none; padding-bottom: 8px; }
    .wa-sigue { position: static; padding: 0 16px 14px; background: none; }
    .ad-cuenta { padding: 18px 22px; font-size: 1.0625rem; }
}

/* ---------- Qué incluye: la comanda ---------- */
.incluye { display: grid; gap: 22px; align-items: center; }
.incluye-txt { min-width: 0; }
.incluye-btn { display: none; margin-top: 20px; transition: background-color .3s ease; }
.ticket-caja { background: var(--sol); border-radius: 22px; padding: 18px 12px; min-width: 0; }
.ticket { --z: 8px; background: #fff; max-width: 400px; margin-inline: auto; padding: 24px 18px 26px;
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) 51% repeat-x;
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) 51% repeat-x; }
.ticket-tit { text-align: center; font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.ticket h3 { margin-top: 12px; padding-top: 11px; border-top: 2px dashed #C9CCDA; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.ticket ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; font-size: .875rem; line-height: 1.3; }
.ticket li { display: flex; align-items: baseline; gap: 7px; }
.ticket li span { min-width: 0; }
.ticket li i { flex: 1; min-width: 10px; border-bottom: 2px dotted #C9CCDA; transform: translateY(-4px); }
.ticket li b { font-weight: 800; color: #0E7A3D; }
.ticket li em { font-style: normal; font-weight: 700; font-size: .6875rem; padding: 2px 7px; border-radius: 999px; background: #E3E8FF; color: #1433C4; white-space: nowrap; }
.ticket-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 11px; border-top: 2px dashed #C9CCDA; font-weight: 800; }
.ticket-total strong { font-size: 1.625rem; letter-spacing: -0.03em; line-height: 1; }
@media (min-width: 640px) {
    .ticket { max-width: 620px; padding-inline: 24px; }
    .ticket-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
}
@media (min-width: 860px) { .incluye-btn { display: inline-flex; } }
@media (min-width: 980px) {
    .incluye { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 44px; }
    .ticket-caja { padding: 28px 22px; }
    .ticket { transform: rotate(-1deg); }
}

/* ---------- Calculadora ---------- */
.franja-oscura { background: var(--tinta); color: #fff; }
.calc { display: grid; gap: 22px; align-items: center; }
.calc-txt, .calc-res { min-width: 0; }
.calc-campo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 18px; font-weight: 600; font-size: .9375rem; }
.calc-campo output { font-weight: 800; font-size: 1.625rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--sol); }
#ventas { width: 100%; margin: 8px 0 0; height: 36px; accent-color: var(--sol); cursor: pointer; }
.calc-com { border: 0; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9375rem; }
.calc-com legend { float: left; margin-right: 6px; padding: 0; font-weight: 600; }
.calc-com label { position: relative; cursor: pointer; }
.calc-com input { position: absolute; opacity: 0; }
.calc-com span { display: block; min-width: 50px; text-align: center; padding: 8px 8px; border-radius: 999px; border: 2px solid #3A4170; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-com input:checked + span { background: #fff; color: var(--tinta); border-color: #fff; }
.calc-com input:focus-visible + span { outline: 3px solid var(--sol); outline-offset: 2px; }
.calc-res { display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: #171E47; }
.calc-fila { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; }
.calc-fila > span { color: #C3C8E6; font-size: .9375rem; }
.calc-fila strong { font-weight: 800; font-size: clamp(1.125rem, 1.4vw + .8rem, 1.5rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; white-space: nowrap; }
.barra { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: #262E63; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 999px; background: #8FA2FF; transition: width .25s ease; }
.barra-sol i { background: var(--sol); }
.calc-dif { padding-top: 12px; border-top: 1px solid #333B74; font-weight: 600; }
.calc-dif strong { color: var(--sol); font-weight: 800; font-variant-numeric: tabular-nums; }
.calc-nota { margin-top: -6px; font-size: .8125rem; color: #A9AFD6; line-height: 1.4; }
@media (min-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } .calc-res { padding: 22px; } }

/* ---------- Precios ---------- */
.planes-fila { display: grid; gap: 16px; }
.planes-cab, .planes { min-width: 0; }
.planes { display: grid; gap: 14px; align-items: start; }
.plan { position: relative; display: grid; gap: 10px; padding: 20px 18px 18px; border-radius: 22px; background: var(--papel); min-width: 0; }
.plan-destacado { background: var(--azul); color: #fff; }
.plan-sello { position: absolute; top: 18px; right: 18px; padding: 3px 10px; border-radius: 999px; background: var(--sol); color: var(--tinta); font-weight: 700; font-size: .8125rem; }
.plan h3 { font-size: 1.25rem; }
.plan-para { color: var(--gris); margin-top: -6px; font-size: .9375rem; }
.plan-destacado .plan-para { color: #D5DCFF; }
.plan-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.plan-precio strong { font-weight: 800; font-size: clamp(2rem, 2vw + 1.5rem, 2.5rem); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.plan ul { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; align-content: start; gap: 7px; font-size: .9375rem; line-height: 1.35; }
.plan li { display: flex; gap: 9px; align-items: flex-start; }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--azul); }
.plan-destacado li svg { color: var(--sol); }
.plan li span { min-width: 0; }
.planes-alta { color: var(--gris); font-size: .9375rem; max-width: 40em; }
@media (min-width: 640px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .plan { grid-template-rows: auto auto auto 1fr auto; } }
@media (min-width: 980px) {
    .planes-fila { grid-template-columns: minmax(0, .58fr) minmax(0, 2fr); grid-template-rows: auto 1fr; grid-template-areas: "cab planes" "alta planes"; gap: 14px 40px; }
    .planes-cab { grid-area: cab; }
    .planes { grid-area: planes; }
    .planes-alta { grid-area: alta; }
    .plan { padding: 24px 22px 22px; }
}

/* ---------- Preguntas ---------- */
.faq-fila { display: grid; gap: 16px; }
.faq { border-top: 2px solid var(--tinta); min-width: 0; }
.faq details { border-bottom: 1px solid #D5D8E6; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; cursor: pointer; font-weight: 700; line-height: 1.3; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-weight: 600; font-size: 1.125rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; background: var(--tinta); color: #fff; }
.faq p { padding: 0 0 16px; color: var(--gris); max-width: 40em; }
@media (min-width: 980px) { .faq-fila { grid-template-columns: minmax(0, .58fr) minmax(0, 2fr); gap: 40px; align-items: start; } }

/* ---------- Cierre y base ---------- */
.cierre { background: var(--tinta); color: #fff; padding-block: clamp(30px, 4.5vw, 48px); }
.cierre-fila { display: grid; gap: 16px; align-items: center; }
.cierre p { margin-top: 6px; max-width: 32em; }
.cierre-btns { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.cierre-btns .boton { min-width: 0; padding-inline: 4px; font-size: clamp(.8125rem, 3.7vw, 1rem); }
.cierre .boton:focus-visible { outline-color: #fff; }
@media (min-width: 860px) {
    .cierre-fila { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
    .cierre-btns { grid-template-columns: repeat(3, auto); gap: 10px; }
    .cierre-btns .boton { padding-inline: 20px; }
}
.base { padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: .875rem; color: var(--gris); }
.base-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.base a { font-weight: 600; color: var(--tinta); }

/* ---------- Barra fija del celular: probar la demo siempre a mano ---------- */
.fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -1px 0 var(--linea), 0 -10px 26px rgba(13, 18, 48, .1); }
.fija { transition: transform .2s ease; }
.fija.oculta { transform: translateY(110%); }
.fija .boton-rubro { flex: 1; background: var(--sol); color: var(--tinta); }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 860px) { .fija { display: none; } body { padding-bottom: 0; } }