/* Aulix · landing (app/PLAN-LANDING.md). Sin marcos ni CDN: las tipografías van en /fuentes. */
@font-face { font-family: "Inter"; src: url("fuentes/inter.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fuentes/space-grotesk.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --noche: #0A1020;
  --noche-2: #111a30;
  --noche-3: #1a2540;
  --papel: #F5F7FB;
  --blanco: #FFFFFF;
  --texto: #0E1628;
  --gris: #556074;
  --gris-claro: #9AA6BC;
  --linea: #E2E7F0;
  --linea-oscura: rgba(255, 255, 255, .1);
  --turquesa: #2DD4BF;
  --indigo: #818CF8;
  --ambar: #F5A524;
  --verde: #10B981;
  --rojo: #F43F5E;
  --degradado: linear-gradient(115deg, #2DD4BF 0%, #60A5FA 50%, #A78BFA 100%);
  --radio: 18px;
  --sombra: 0 1px 2px rgba(14, 22, 40, .06), 0 12px 32px -12px rgba(14, 22, 40, .18);
  --titulos: "Space Grotesk", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; color: var(--texto); background: var(--blanco); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.08; letter-spacing: -.02em; margin: 0; }
h2 { font-size: clamp(30px, 4.4vw, 50px); }
h3 { font-size: 20px; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; border-radius: 6px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.contenedor { width: min(1160px, 100% - 40px); margin-inline: auto; }
section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.oscura { background: var(--noche); color: #E6EAF3; }
.oscura .gris, .oscura .bajada { color: var(--gris-claro); }
.gris-fondo { background: var(--papel); }
.ceja { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.oscura .ceja { color: var(--turquesa); }
.bajada { font-size: clamp(17px, 1.7vw, 20px); color: var(--gris); max-width: 720px; margin-top: 20px; }
.degradado-texto { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Etiquetas «Funciona hoy» / «En construcción» / «Datos simulados» */
.sello { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; padding: 4px 11px; border-radius: 99px; white-space: nowrap; }
.sello::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sello.hoy { background: rgba(16, 185, 129, .12); color: #0B8A62; }
.sello.construye { background: rgba(245, 165, 36, .15); color: #A86500; }
.sello.simulado { background: rgba(129, 140, 248, .14); color: #4F46E5; }
.oscura .sello.hoy { color: #5EEAB5; background: rgba(16, 185, 129, .16); }
.oscura .sello.construye { color: #FBC163; }
.oscura .sello.simulado { color: #B4BBFF; background: rgba(129, 140, 248, .18); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px/1 "Inter", sans-serif; padding: 15px 24px; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.primario { background: var(--degradado); color: #071019; box-shadow: 0 10px 30px -10px rgba(45, 212, 191, .6); }
.btn.secundario { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .9; }
.btn.chico { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
.btn svg { width: 18px; height: 18px; }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 50; background: rgba(10, 16, 32, .78); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--linea-oscura); color: #E6EAF3; }
.barra .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 22px/1 var(--titulos); letter-spacing: -.02em; }
.marca svg { width: 30px; height: 30px; }
.barra nav { display: flex; gap: 26px; font-size: 15px; }
.barra nav a { text-decoration: none; color: var(--gris-claro); transition: color .15s; }
.barra nav a:hover { color: #fff; }
@media (max-width: 920px) { .barra nav { display: none; } }

/* Portada */
.portada { padding-top: clamp(56px, 8vw, 104px); overflow: hidden; }
.portada::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); pointer-events: none; }
.portada::after { content: ""; position: absolute; width: 760px; height: 760px; right: -220px; top: -240px; background: radial-gradient(circle, rgba(96, 165, 250, .28), rgba(167, 139, 250, .12) 40%, transparent 68%); pointer-events: none; }
.portada .contenedor { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.portada h1 { font-size: clamp(42px, 6.4vw, 78px); color: #fff; }
.portada .bajada { color: #B7C1D6; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
@media (max-width: 920px) { .portada .contenedor { grid-template-columns: 1fr; } }

/* Constructor simulado */
.constructor { background: linear-gradient(180deg, rgba(26, 37, 64, .9), rgba(17, 26, 48, .92)); border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08); }
.constructor label { display: block; font: 600 14px/1.3 var(--titulos); color: #fff; margin-bottom: 10px; letter-spacing: 0; }
.constructor form { display: flex; gap: 8px; }
.constructor input { flex: 1; min-width: 0; font: 500 16px "Inter", sans-serif; color: #fff; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 13px 14px; }
.constructor input::placeholder { color: #7F8BA3; }
.constructor input:focus { outline: none; border-color: var(--turquesa); box-shadow: 0 0 0 3px rgba(45, 212, 191, .25); }
.constructor button { flex-shrink: 0; }
.ficha { margin-top: 18px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); padding: 18px; min-height: 290px; }
.ficha-cab { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 12px; }
.ficha-cab .avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--degradado); display: grid; place-items: center; color: #071019; flex-shrink: 0; }
.ficha-cab .avatar svg { width: 22px; height: 22px; }
.ficha-cab b { font: 700 18px/1.2 var(--titulos); color: #fff; display: block; }
.ficha-cab small { color: var(--gris-claro); font-size: 13px; }
.ficha dl { margin: 0; display: grid; gap: 10px; }
.ficha dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.ficha dl > div.ver { opacity: 1; transform: none; }
.ficha dt { color: var(--gris-claro); font-weight: 500; }
.ficha dd { margin: 0; color: #E6EAF3; }
.ficha .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha .chips span { font-size: 12.5px; padding: 3px 9px; border-radius: 99px; background: rgba(45, 212, 191, .14); color: #7EF0DD; }
.ficha .esperando { color: var(--gris-claro); font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.ficha .puntos span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--turquesa); margin-right: 4px; animation: brinco 1s infinite; }
.ficha .puntos span:nth-child(2) { animation-delay: .15s; } .ficha .puntos span:nth-child(3) { animation-delay: .3s; }
@keyframes brinco { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.constructor .nota { font-size: 12.5px; color: #8692A9; margin-top: 12px; display: flex; gap: 8px; align-items: center; }
@media (max-width: 520px) { .ficha dl > div { grid-template-columns: 1fr; gap: 2px; } .constructor form { flex-direction: column; } }

.franja { grid-column: 1 / -1; border-top: 1px solid var(--linea-oscura); margin-top: clamp(56px, 8vw, 96px); padding-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 28px; color: #8692A9; font-size: 14.5px; }
.franja b { color: #CBD3E3; font-weight: 600; }

/* Problema */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
@media (max-width: 860px) { .tres { grid-template-columns: 1fr; } }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); }
.tarjeta .icono { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--papel); color: var(--texto); margin-bottom: 20px; }
.tarjeta .icono svg { width: 22px; height: 22px; }
.tarjeta h3 { margin-bottom: 10px; }
.tarjeta p { color: var(--gris); font-size: 16px; }

/* Pasos del constructor */
.como-cuerpo { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 64px); margin-top: 56px; align-items: start; }
@media (max-width: 920px) { .como-cuerpo { grid-template-columns: 1fr; } }
.pasos { margin-top: 0; display: grid; gap: 0; position: relative; }
.pasos::before { content: ""; position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px; background: var(--linea); }
.pasos .relleno { position: absolute; left: 27px; top: 12px; width: 2px; height: 0; background: var(--degradado); transition: height .2s linear; }
.paso { display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 18px 0; position: relative; }
.paso .num { width: 56px; height: 56px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--linea); display: grid; place-items: center; font: 700 20px var(--titulos); color: var(--gris); position: relative; z-index: 1; transition: all .3s; }
.paso.activo .num { border-color: transparent; background: var(--degradado); color: #071019; box-shadow: 0 8px 24px -8px rgba(96, 165, 250, .6); }
.paso h3 { font-size: 24px; margin: 12px 0 8px; }
.paso p { color: var(--gris); max-width: 640px; }
.lanzar { display: grid; gap: 20px; position: sticky; top: 96px; }
.lanzar .tarjeta h3 { font-size: 18px; }
.lista-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lista-chips span { font-size: 14px; padding: 7px 12px; border-radius: 10px; background: var(--papel); border: 1px solid var(--linea); }
.honesta { border-left: 4px solid var(--ambar); }
.honesta p { font-size: 15.5px; }

/* Caso real: pestañas por rol */
.pestanas { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--blanco); border: 1px solid var(--linea); margin-top: 36px; flex-wrap: wrap; }
.pestanas button { font: 600 15px "Inter", sans-serif; padding: 10px 18px; border-radius: 10px; border: 0; background: transparent; color: var(--gris); cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--noche); color: #fff; }
.panel-rol { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); margin-top: 32px; align-items: start; }
.panel-rol[hidden] { display: none; }
@media (max-width: 920px) { .panel-rol { grid-template-columns: 1fr; } }
.funciones { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.funciones li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.funciones li::before { content: ""; width: 22px; height: 22px; margin-top: 3px; border-radius: 7px; background: rgba(45, 212, 191, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9F8C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.funciones b { display: block; font-weight: 600; }
.funciones span { color: var(--gris); font-size: 16px; }

/* Pantallas simuladas del portal */
.pantalla { background: var(--blanco); border-radius: 16px; border: 1px solid var(--linea); box-shadow: 0 30px 60px -30px rgba(14, 22, 40, .35); overflow: hidden; font-size: 14px; }
.pantalla .cromo { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #EEF1F6; border-bottom: 1px solid var(--linea); }
.pantalla .cromo i { width: 10px; height: 10px; border-radius: 50%; background: #D3D8E2; }
.pantalla .cromo span { margin-left: 10px; font-size: 12px; color: var(--gris); background: #fff; padding: 3px 10px; border-radius: 6px; flex: 1; max-width: 260px; }
.pantalla .cromo .sello { margin-left: auto; }
.pantalla .adentro { padding: 20px; display: grid; gap: 12px; background: #FBFAF7; }
.pantalla h4 { margin: 0; font: 700 19px var(--titulos); }
.pantalla .sub { color: var(--gris); font-size: 13px; margin-top: -6px; }
.caja { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.caja .fila { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.caja b { font-size: 14px; }
.caja small { color: var(--gris); font-size: 12.5px; }
.barra-prog { height: 7px; border-radius: 9px; background: #EDF0F5; overflow: hidden; }
.barra-prog i { display: block; height: 100%; border-radius: 9px; background: var(--degradado); }
.etq { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: #EEF1F6; color: var(--gris); white-space: nowrap; }
.etq.ok { background: rgba(16, 185, 129, .12); color: #0B8A62; }
.etq.atn { background: rgba(245, 165, 36, .16); color: #A86500; }
.etq.ag { background: rgba(129, 140, 248, .14); color: #4F46E5; }
.mini-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mini-tabla th { text-align: left; color: var(--gris); font-weight: 500; padding: 6px 4px; border-bottom: 1px solid var(--linea); }
.mini-tabla td { padding: 7px 4px; border-bottom: 1px solid #F0F2F6; }

/* Clase en vivo */
.vivo .contenedor > .dos { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 920px) { .vivo .contenedor > .dos { grid-template-columns: 1fr; } }
.vivo .funciones b { color: #fff; }
.vivo .funciones span { color: var(--gris-claro); }
.diapo { background: #F8F5EE; color: #1F2A37; border-radius: 18px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); position: relative; }
.diapo .cinta { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #1F6F78; }
.diapo h3 { font-size: clamp(22px, 2.6vw, 30px); margin: 10px 0 20px; color: #0F2A44; }
.punto { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(15, 42, 68, .1); }
.punto p { font-size: 16px; line-height: 1.45; }
.punto p b { color: #0F2A44; }
.no-entendi { display: inline-flex; align-items: center; gap: 8px; font: 600 13px "Inter", sans-serif; border: 1.5px solid rgba(200, 85, 61, .4); color: #B4472F; background: #fff; border-radius: 99px; padding: 7px 12px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.no-entendi .cuenta { min-width: 20px; height: 20px; border-radius: 99px; background: rgba(200, 85, 61, .12); display: grid; place-items: center; font-size: 12px; padding: 0 6px; }
.no-entendi[aria-pressed="true"] { background: #C8553D; color: #fff; border-color: #C8553D; }
.no-entendi[aria-pressed="true"] .cuenta { background: rgba(255, 255, 255, .25); }
.no-entendi.salto { animation: salto .4s; }
@keyframes salto { 40% { transform: scale(1.08); } }
.diapo .sello.simulado { color: #4F46E5; background: rgba(129, 140, 248, .14); }
.diapo .pie-diapo { display: flex; justify-content: space-between; margin-top: 16px; font-size: 12.5px; color: #6B7A89; gap: 12px; flex-wrap: wrap; }
.cola { margin-top: 18px; background: var(--noche-2); border: 1px solid var(--linea-oscura); border-radius: 16px; padding: 16px; }
.cola h4 { margin: 0 0 10px; font: 600 14px "Inter", sans-serif; color: #CBD3E3; display: flex; justify-content: space-between; gap: 10px; }
.pregunta { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea-oscura); font-size: 14.5px; }
.pregunta:first-of-type { border-top: 0; }
.voto { display: grid; place-items: center; width: 46px; border-radius: 10px; border: 1px solid var(--linea-oscura); background: transparent; color: #E6EAF3; cursor: pointer; font: 600 13px "Inter", sans-serif; padding: 5px 0; }
.voto svg { width: 14px; height: 14px; }
.voto[aria-pressed="true"] { border-color: var(--turquesa); color: var(--turquesa); }
.pregunta .propuesta { display: block; margin-top: 6px; font-size: 13px; color: var(--gris-claro); border-left: 2px solid var(--indigo); padding-left: 10px; }
.pregunta .propuesta b { color: #B4BBFF; font-weight: 600; }
.cita { margin-top: 40px; font: 600 clamp(24px, 3vw, 34px)/1.2 var(--titulos); letter-spacing: -.02em; color: #fff; max-width: 760px; }

/* Bandeja */
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; margin-top: 48px; }
@media (max-width: 920px) { .dos-col { grid-template-columns: 1fr; } }
.bandeja { background: var(--papel); border: 1px solid var(--linea); border-radius: 20px; padding: 20px; }
.bandeja .titulo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.bandeja .titulo b { font: 700 16px var(--titulos); }
.accion { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 18px; box-shadow: var(--sombra); transition: opacity .3s, transform .3s; }
.accion.sale { opacity: 0; transform: translateX(24px); }
.accion .tipo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.accion h4 { margin: 0 0 6px; font: 700 17px/1.3 var(--titulos); }
.accion .motivos { color: var(--gris); font-size: 14px; }
.accion .borrador { margin-top: 12px; background: var(--papel); border-radius: 10px; padding: 12px; font-size: 14.5px; line-height: 1.5; border: 1px dashed #CBD3E3; }
.accion .borrador[contenteditable="true"] { background: #fff; border-style: solid; border-color: var(--turquesa); outline: none; }
.accion .botones { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn.oscuro { background: var(--noche); color: #fff; }
.btn.claro { background: #fff; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linea); }
.bitacora { margin-top: 14px; font-size: 13.5px; color: var(--gris); display: grid; gap: 6px; min-height: 22px; }
.bitacora div { display: flex; gap: 8px; align-items: baseline; animation: entra .4s; }
.bitacora div::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex-shrink: 0; transform: translateY(-1px); }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } }
.seis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
@media (max-width: 920px) { .seis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .seis { grid-template-columns: 1fr; } }
.seis .tarjeta { padding: 24px; }
.seis .tarjeta h3 { font-size: 18px; }
.seis .tarjeta p { font-size: 15.5px; }

/* Niveles de autonomía */
.niveles { display: grid; gap: 14px; margin-top: 48px; }
.nivel { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; padding: 22px 26px; border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); }
.nivel .n { font: 700 14px/1.3 var(--titulos); letter-spacing: .02em; }
.nivel .n span { display: block; font-size: 30px; letter-spacing: -.02em; }
.nivel.uno .n { color: #0E9F8C; } .nivel.dos .n { color: #3B82F6; } .nivel.tres .n { color: #7C3AED; }
.nivel h3 { font-size: 19px; margin-bottom: 4px; }
.nivel p { color: var(--gris); font-size: 16px; }
@media (max-width: 700px) { .nivel { grid-template-columns: 1fr; gap: 8px; } }
.condiciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
@media (max-width: 920px) { .condiciones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .condiciones { grid-template-columns: 1fr; } }
.condicion { padding: 18px; border-radius: 14px; background: var(--noche); color: #E6EAF3; }
.condicion b { display: block; font: 600 16px var(--titulos); color: #fff; margin-bottom: 4px; }
.condicion span { font-size: 14.5px; color: var(--gris-claro); }
.datos { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .datos { grid-template-columns: 1fr; } }
.datos .tarjeta { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 22px; }
.datos .tarjeta .icono { margin: 0; }
.datos .tarjeta h3 { font-size: 17px; margin-bottom: 4px; }

/* Para quién */
.cuatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
@media (max-width: 920px) { .cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cuatro { grid-template-columns: 1fr; } }
.cuatro .tarjeta h3 { font-size: 18px; }

/* Hoy y lo que viene */
.ruta { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 18px; margin-top: 48px; }
@media (max-width: 920px) { .ruta { grid-template-columns: 1fr; } }
.ruta .tarjeta h3 { font-size: 18px; margin: 12px 0 14px; }
.ruta ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15.5px; }
.ruta li { display: flex; gap: 10px; }
.ruta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; margin-top: 10px; flex-shrink: 0; background: var(--gris-claro); }
.ruta .hoy li::before { background: var(--verde); }
.ruta .construye li::before { background: var(--ambar); }
.ruta .hoy ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
@media (max-width: 600px) { .ruta .hoy ul { grid-template-columns: 1fr; } }

/* Preguntas frecuentes */
.faq { margin-top: 40px; max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font: 600 19px/1.35 var(--titulos); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 22px; color: var(--gris); max-width: 760px; }

/* Formulario */
.cierre .contenedor { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 920px) { .cierre .contenedor { grid-template-columns: 1fr; } }
.cierre { overflow: hidden; }
.cierre::before { content: ""; position: absolute; width: 640px; height: 640px; left: -240px; bottom: -280px; background: radial-gradient(circle, rgba(45, 212, 191, .2), transparent 65%); pointer-events: none; }
.formulario { position: relative; background: var(--blanco); color: var(--texto); border-radius: 22px; padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario .ancho { grid-column: 1 / -1; }
@media (max-width: 600px) { .formulario { grid-template-columns: 1fr; } }
.campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.campo label small { font-weight: 400; color: var(--gris); }
.campo input, .campo select, .campo textarea { width: 100%; font: 400 16px "Inter", sans-serif; color: var(--texto); background: var(--papel); border: 1px solid var(--linea); border-radius: 11px; padding: 12px 13px; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: #2BB6A4; box-shadow: 0 0 0 3px rgba(45, 212, 191, .2); background: #fff; }
.autoriza { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; color: var(--gris); align-items: start; }
.autoriza input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #0E9F8C; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estado-form { font-size: 15px; min-height: 0; }
.estado-form.ok { color: #0B8A62; font-weight: 600; }
.estado-form.error { color: #C2410C; }
.formulario .btn { width: 100%; }
.formulario .btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.gracias { text-align: center; padding: 30px 10px; display: grid; gap: 10px; justify-items: center; }
.gracias .icono { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(16, 185, 129, .14); color: #0B8A62; }
.gracias h3 { font-size: 24px; }

/* Pie */
footer { background: #070C18; color: #8692A9; padding: 44px 0; font-size: 14.5px; }
footer .contenedor { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
footer .marca { color: #fff; font-size: 19px; }
footer nav { display: flex; gap: 20px; }
footer a { text-decoration: none; } footer a:hover { color: #fff; }

/* Aparecer al hacer scroll */
.revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .pestanas { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .pestanas button { padding: 10px 6px; font-size: 14px; }
}