/* =====================================================================================================
OKEYBOT · sitio.css — la única hoja de estilos del sitio
Misma mano que la landing de referencia de la casa (papel crema, logo negro, tarjetas blancas): los valores
de color, radio, sombra, tamaño y corte (600 / 700 / 860 / 1024) están copiados de ahí. Lo que la referencia no trae
(secciones largas, pasos, acordeón, garantía, calculadora, prosa legal, marco oscuro suelto) está hecho
con las mismas reglas. Pensada primero para celular. Se ve todo junto en dev/galeria.html.
ÍNDICE DE CLASES (nombre → para qué sirve)
Base y página
.salto enlace «Saltar al contenido» (primer elemento del body)
.sr texto solo para lector de pantalla
.pantalla contenedor de página: ancho máximo 1100 px y margen lateral --pad
.columna bloque centrado de 36rem (tarjetas, formularios) · .media 42rem · .ancha 60rem
.centro centra el texto del bloque
Cabecera (parciales/cabecera.html)
.cabecera envoltorio; sin barra, sin fondo, sin raya
.cab-centro fila que centra el logo
.cab-logo enlace del logo (la imagen mide 68 px de alto; 88 px desde 700)
(arriba no hay menú: el guion lo sacó; los enlaces del sitio van en el pie)
Portada y títulos
.portada bloque centrado del arranque de una página
.pastilla-fila fila que centra una pastilla bajo el logo
.pastilla pastilla blanca de borde fino · .pastilla.tinta negra · .pastilla.chica · .pastilla-punto punto azul que late
.titulo título principal (h1) · .titulo.interior deja aire abajo (páginas interiores)
.linea cada renglón del título o de la bajada (desde 700 px van uno por renglón)
.bajada línea de apoyo del título principal · .junto no corta
.portada-acciones botón principal + enlace debajo de la bajada (22rem)
.beneficios viñetas negras en negrita (lista centrada como bloque)
Botones y enlaces
.btn botón principal negro, ancho completo, 52 px · .btn.auto ancho según el texto
.btn-sec botón secundario blanco con borde, mismo tamaño
.btn-chico botón chico blanco de 44 px («Volver», «Cancelar»)
.botonera pila de botones (22rem) · .botonera.en-fila dos columnas desde 600 px
.enlace enlace negro subrayado con área táctil de 44 px · .enlace.azul versión azul
.fl flecha o ícono de trazo de 16 px dentro de botones y filas
.humano párrafo con el enlace azul que va encima de la raya del pie
Secciones
.seccion ritmo vertical entre secciones largas · .seccion.junta menos aire · .seccion.primera sin aire arriba
.seccion-cab cabecera centrada de sección (rótulo + título + una línea)
.rotulo rótulo chico en mayúsculas · .rotulo.izq alineado a la izquierda
.titulo-seccion título de sección (h2)
.apoyo la única línea de apoyo bajo un título de sección
.letra-chica texto chico gris centrado
Tarjetas, filas y listas
.tarjeta tarjeta blanca con sombra · .tarjeta-h su título · .tarjeta-p su línea de apoyo
.tarjetas grilla de tarjetas (2 columnas desde 600) · .de-tres 3 columnas desde 860
.ficha tarjeta chica plana · .ficha-ico ícono · .ficha-t rótulo (hasta 4 palabras) · .ficha-p línea (hasta 12)
.opciones / .opcion filas grandes con flecha (botón o enlace); al pasar o tocar se ponen negras
.filas / .fila filas con rótulo y una línea · .fila-n número · .fila-ico ícono · .fila-tx · .fila-t · .fila-p
.filas.en-dos dos columnas desde 700
.lista-p viñetas chicas para texto plegado · .nota-l aclaración gris bajo un renglón
.marca-si / .marca-no sello redondo con tilde negra / con cruz gris
.kid sello negro rectangular («01», «A»)
.sello etiqueta gris chica dentro de tarjetas
Piezas institucionales
.pasos / .paso pasos numerados (cuatro fases) · .paso-n · .paso-t · .paso-p
details.pregunta acordeón de preguntas frecuentes (dentro de .preguntas) · .pregunta-r la respuesta
details.plegable «ver más» dentro de una tarjeta · .plegable-c su contenido
.encaje dos columnas «es para vos / no es para vos» · .encaje-col.si / .encaje-col.no · .encaje-t · .encaje-lista
.garantia tarjeta de garantía (borde negro) · .garantia-cab · .garantia-ico · .garantia-t · .garantia-p
.garantia-pasos (lista con .kid) · .garantia-nota (la condición)
.tira tira de datos cortos · .tira-n número · .tira-t rótulo · .tira.de-2 / .tira.de-4
.cierre bloque final «papel» · .cierre-t · .cierre-p · .cierre-nota
.barra-fija botón flotante inferior del celular (lo muestra sitio.js con data-visible="si")
.prosa texto largo de Privacidad y Términos · .prosa-fecha
.pagina-error página no encontrada
Formularios
.campo etiqueta + control + ayuda + error · .campo.opcional
.entrada control suelto de 52 px (input, textarea, select) · .entrada-eti su etiqueta, si no va en .campo
.campos-dos dos campos en fila (país + WhatsApp)
.con-prefijo control con prefijo fijo («USD»)
.casilla casilla de verificación con texto
.ayuda / .err ayuda gris / error (aparece solo cuando tiene texto)
.datos nota legal bajo el botón
.aviso-ok estado «enviado» · .aviso-ok-t · .aviso-ok-p
.aviso-error error general del formulario
.calc panel de la calculadora (va sobre una .tarjeta) · .calc-campos (2 columnas desde 600; .campo.entera ocupa las dos)
.calc-resultado (resumen en .tira + escenarios + supuestos plegados)
.escenarios / .escenario los tres escenarios · .escenario-n · .escenario-p · .escenario-monto · .escenario.referencia
Pantallas de ejemplo (oscuras, HTML y CSS, sin imágenes por red)
.escena caja que deja aire para lo que sobresale del marco · .escena.sin-notas sin ese aire
.marco pantalla oscura · .marco.se-funde se desvanece hacia abajo · .marco.aire-abajo deja lugar a una nota abajo
.marco-cab cabecera: .marco-puntos (tres puntos) · .marco-tag (pastilla «EJEMPLO») · .marco-rot (rótulo a la derecha)
.marco-miga / .marco-h / .marco-sub / .marco-sec ruta, título, bajada y rótulo de bloque dentro del marco
.marco-caja recuadro de texto · .marco-caja.acento con borde de acento
.burbujas / .burbuja conversación · .burbuja.entra (la del cliente) · .burbuja.sale (la del agente) · .burbuja-n · .burbuja-h
.marco-lista / .marco-fila lista con estado · .marco-fila-ico · .marco-fila-t · .marco-fila-d · .marco-estado
estados: .marco-fila.en-curso · .marco-fila.hecha
.marco-datos / .marco-dato tarjetas de dato · .marco-dato.acento
.marco-barra barra de avance (el avance va en --v, de 0 a 1)
.nota nota blanca flotante que sobresale del marco · .nota.arriba-der / .nota.abajo-izq · .nota-c su tarjeta
Pie (parciales/pie.html)
.pie raya fina + enlaces + aviso de Meta + legales · .pie-nav · .pie-meta · .pie-legal · .pie-extra
Movimiento
[data-aparece] aparición suave al entrar en pantalla (la activa sitio.js; sin script queda visible)
.late / .hueso relleno de carga
PARCIALES Y SUS CLAVES (lenguaje de plantillas de build.mjs; todas existen en datos/sitio.json o las arma build.mjs)
cabeza.html contenido del head, SIN las etiquetas head (la página las escribe y puede sumar lo suyo después).
Usa: titulo, descripcion, canonical, og_titulo, og_descripcion (si la página no los define valen
el título y la descripción), og_imagen_url, og_imagen_alt, version, sitio.nombre, sitio.gtm,
sitio.ga4, sitio.calendly_url y, sin escape, meta_robots y jsonld_script (etiqueta completa o vacío).
Las páginas noindex (las dos de error) salen sin canónica ni og:url (bloque @si no noindex).
Sin scripts en línea: la medición la arranca /js/sitio.js leyendo tres .
cabecera.html enlace «Saltar al contenido» + logo, sin menú. La página necesita .
Usa: sitio.nombre y volver_html (la pastilla de volver: sale sola con el metadato
"volver": "inicio" o "recursos"; sin él queda vacía).
pie.html los tres enlaces (Recursos · Contacto · WhatsApp) + pie + la ventana del calendario y el aviso
«Reserva hecha», ocultos. Va después de cerrar main. Usa: sitio.nombre, pie_enlaces_html,
agenda_html y anio.
barra-fija.html barra fija de abajo con el botón negro «Agendar mi diagnóstico»; va al final del body.
Usa: barra_fija_html.
Las claves volver_html, pie_enlaces_html, agenda_html, barra_fija_html y anio salen de
datos/global.mjs y están en todas las páginas.
calculadora.html la tarjeta de la calculadora (formulario y resultado). Usa: sitio.calendly_url.
Tras calcular, su único botón es el negro «Agendar una llamada» (solo en /consultoria).
CLASES DE LOS BLOQUES DEL FINAL (cada bloque las explica en su propio comentario)
legales y error .pagina-legal
calculadora y preguntas .calc-resultado.en-pantalla · .marco.calc-pantalla · .calc-barras · .calc-barra · .calc-leyendas
.calc-linea · .tarjeta.de-preguntas · .preguntas.en-tarjeta
recursos .recurso-tx · .recurso-t · .recurso-cab · .recurso-estado · .recurso-incluye · .recurso-cierre
.recurso-mas · .candado-cab · .candado-ico · .candado-t · .candado-p
portada .ancla · .pila · .tarjeta-t · .pie-enlaces · .agenda… · .reserva…
portada 2 todo lo propio de la página de inicio (clases p2-…)
contacto .contacto · .via · .via-tx · .via-t · .via-p · .campo-error
ATRIBUTOS QUE LEE sitio.js
data-evento="nombre" mide el clic con ese nombre; los demás data-* viajan como parámetros
(data-cta-zone="hero" llega como cta_zone). En un se mide al abrirse.
data-evento-carga="nombre" mide ese evento una vez, al cargar la página, con los demás data-* como parámetros
(resource_view en el del detalle de un recurso).
data-calendly="origen" abre Calendly en ventana emergente; el href del enlace es el respaldo.
data-aparece aparición suave al entrar en pantalla (--i escalona varias piezas).
data-sin-barra mientras esa zona está a la vista, la barra fija se esconde.
data-barra-desde la barra fija aparece cuando este elemento ya salió de la pantalla (si falta, vale el h1).
data-seccion="zona" nombre de la zona para medir (detalle_open en los plegables, whatsapp_click).
data-abre-con="ancla" en : se abre solo al llegar por ese ancla (#method-4d, #filtro-icp, #modelo-sociedad).
data-grupo="nombre" en : uno abierto por vez dentro del grupo.
data-anio recibe el año en curso.
===================================================================================================== */
/* ---------- Variables (los mismos nombres que la referencia) ---------- */
:root{
--fondo:#f5f1e8; /* crema */
--papel:#ece5d6; /* crema más hondo: bloque final y contenedores de piezas blancas */
--tarjeta:#ffffff;
--tinta:#000000;
--texto:#18181b;
--suave:#52525b;
--tenue:#63636b; /* la referencia usa #71717a (4,3 a 1 sobre crema); este llega a AA sobre crema, papel y blanco */
--linea:#e4decf;
--linea-fuerte:#d3ccba;
--borde-campo:#8c8473; /* borde de campos y casillas: 3,7 a 1 sobre blanco (en la referencia es --linea-fuerte, 1,6 a 1); va de 1 px */
--marcador:#71717a; /* texto de ejemplo de los campos: 4,8 a 1 sobre blanco (en la referencia es #a1a1aa, 2,6 a 1) */
--azul:#1B70FF; /* puntos, barras y foco */
--azul-texto:#1558D6; /* texto y enlaces */
--azul-suave:rgba(27,112,255,.10);
--error:#b42318;
--error-suave:#fef3f2;
--radio:18px;
--radio-m:12px;
--pad:12px;
--f-titulo:"Helvetica Neue",Arial,system-ui,sans-serif;
--f-texto:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--sombra:0 8px 30px -14px rgba(0,0,0,.16);
--sombra-tarjeta:0 8px 30px -12px rgba(0,0,0,.12);
--sombra-chica:0 1px 2px rgba(0,0,0,.04);
--sombra-flotante:0 22px 60px -22px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.05);
--aire-seccion:44px; /* separación entre secciones largas */
}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
body{
margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
background:var(--fondo);color:var(--texto);
font-family:var(--f-texto);font-size:16px;line-height:1.45;
-webkit-font-smoothing:antialiased;overflow-wrap:break-word;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a,summary,label{-webkit-tap-highlight-color:rgba(0,0,0,.06)}
svg{display:block}
img{max-width:100%}
a{color:var(--azul-texto);text-underline-offset:3px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px;border-radius:6px}
.salto{position:absolute;left:8px;top:-60px;z-index:100;display:inline-flex;align-items:center;min-height:44px;background:#000;color:#fff;padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.salto:focus{top:8px}
main{flex:1 0 auto;width:100%}
.pantalla{
width:100%;max-width:1100px;margin:0 auto;
padding:0 max(var(--pad),env(safe-area-inset-right)) 0 max(var(--pad),env(safe-area-inset-left));
}
.columna{width:100%;max-width:36rem;margin-left:auto;margin-right:auto}
.columna.media{max-width:42rem}
.columna.ancha{max-width:60rem}
.centro{text-align:center}
/* ---------- Cabecera: solo el logo, centrado y limpio. Arriba no hay menú (guion 2.3): los enlaces viven en el pie. ---------- */
.cabecera{position:relative;width:100%;flex-shrink:0}
.cab-centro{display:flex;justify-content:center;padding:28px 20px 0;background:transparent}
.cab-logo{display:block;border-radius:8px;line-height:0}
.cab-logo img{display:block;height:68px;width:auto;max-width:none}
/* ---------- Pastilla ---------- */
.pastilla-fila{text-align:center;padding:14px var(--pad) 0}
.pastilla{
display:inline-flex;align-items:center;gap:9px;max-width:100%;
padding:8px 14px;border:1px solid var(--linea);border-radius:999px;background:#fff;
box-shadow:var(--sombra-chica);
font-size:13.5px;font-weight:700;line-height:1.25;letter-spacing:normal;text-transform:none;color:var(--tinta);text-align:left;
}
.pastilla.tinta{border-color:var(--tinta);background:var(--tinta);color:#fff;box-shadow:none}
.pastilla.chica{padding:4px 10px;font-size:12px;gap:6px}
.pastilla-punto{flex:none;width:8px;height:8px;border-radius:50%;background:var(--azul);animation:latido 1.4s ease-in-out infinite}
/* ---------- Portada: título principal y bajada ---------- */
.portada{text-align:center}
.titulo{
font-family:var(--f-titulo);font-weight:800;letter-spacing:-.03em;color:var(--tinta);
font-size:clamp(21px,6.2vw,28px);line-height:1.14;text-wrap:balance;text-align:center;
max-width:34rem;margin:16px auto 0;
}
.titulo:focus{outline:none}
.titulo.interior{margin-bottom:16px}
.bajada{
font-family:var(--f-texto);font-weight:500;color:#3f3f46;
font-size:clamp(15px,4.2vw,18px);line-height:1.3;text-wrap:balance;text-align:center;
max-width:30rem;margin:10px auto 0;
}
.bajada u{text-underline-offset:3px;text-decoration-thickness:1.5px}
.bajada .junto{white-space:nowrap}
.portada-acciones{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:22rem;margin:18px auto 0}
.portada-acciones .letra-chica{margin-top:6px}
.beneficios{
display:flex;flex-direction:column;gap:6px;width:fit-content;max-width:100%;
margin:16px auto 0;padding:0 4px;text-align:left;
}
.beneficios li{display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:700;line-height:1.35;color:var(--texto)}
.beneficios li::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--tinta)}
/* ---------- Botones ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;min-height:52px;padding:12px 20px;
border:0;border-radius:14px;background:var(--tinta);color:#fff;
font-family:var(--f-texto);font-size:16px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;
transition:transform .12s ease,background .15s ease;
}
@media (hover:hover){.btn:hover{background:#27272a}}
.btn:active{transform:scale(.985)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.65;cursor:default}
.btn svg{width:18px;height:18px;flex:none}
.btn.auto,.btn-sec.auto{width:auto}
.btn-sec{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;min-height:52px;padding:12px 20px;
border:1.5px solid var(--linea-fuerte);border-radius:14px;background:#fff;color:var(--tinta);
font-family:var(--f-texto);font-size:16px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;
box-shadow:var(--sombra-chica);
transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
@media (hover:hover){.btn-sec:hover{border-color:var(--tinta);background:var(--fondo)}}
.btn-sec:active{transform:scale(.985)}
.btn-sec[disabled]{opacity:.65;cursor:default}
.btn-sec svg{width:18px;height:18px;flex:none}
.btn-chico{
display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 16px;
border:1px solid var(--linea);border-radius:12px;background:#fff;color:var(--texto);
font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;box-shadow:var(--sombra-chica);
}
@media (hover:hover){.btn-chico:hover{border-color:var(--linea-fuerte);background:var(--fondo)}}
.botonera{display:grid;gap:10px;width:100%;max-width:22rem;margin-left:auto;margin-right:auto}
.enlace{
display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;
background:none;border:0;border-radius:8px;
color:var(--tinta);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
.enlace.azul{color:var(--azul-texto)}
.fl{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.humano{flex-shrink:0;margin:18px 0 0;padding:0 var(--pad);text-align:center}
.humano a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:var(--azul-texto);text-underline-offset:3px}
/* ---------- Secciones: ritmo vertical, rótulo, título de sección y una línea de apoyo ---------- */
.seccion{padding-top:var(--aire-seccion);scroll-margin-top:0}
.seccion.junta{padding-top:24px}
.seccion.primera{padding-top:0}
.seccion-cab{text-align:center;margin:0 auto 18px}
.rotulo{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--suave);text-align:center;margin:0 0 8px}
.rotulo.izq{text-align:left}
.titulo-seccion{
font-family:var(--f-titulo);font-weight:800;letter-spacing:-.03em;color:var(--tinta);
font-size:clamp(19px,5.4vw,24px);line-height:1.16;text-wrap:balance;text-align:center;
max-width:34rem;margin:0 auto;
}
.titulo-seccion:focus{outline:none}
.apoyo{font-size:15px;line-height:1.4;color:var(--suave);text-align:center;text-wrap:balance;max-width:30rem;margin:8px auto 0}
.letra-chica{font-size:12.5px;line-height:1.45;color:var(--suave);text-align:center;margin-top:8px}
/* ---------- Tarjeta blanca ---------- */
.tarjeta{
border:1px solid var(--linea);border-radius:16px;background:#fff;
box-shadow:var(--sombra-tarjeta);padding:16px;text-align:left;scroll-margin-top:12px;
}
.tarjeta-h{
font-family:var(--f-titulo);font-weight:800;letter-spacing:-.03em;color:var(--tinta);
font-size:20px;line-height:1.2;text-align:center;text-wrap:balance;margin:0 0 16px;
}
.tarjeta-h:focus{outline:none}
.tarjeta-p{font-size:14.5px;line-height:1.45;color:var(--suave);text-align:center;text-wrap:balance;margin:-8px 0 14px}
.tarjeta .btn,.tarjeta .btn-sec{margin-top:12px}
.tarjeta .err{margin-top:6px}
.tarjetas{display:grid;gap:10px}
.ficha{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;border:1px solid var(--linea);border-radius:16px;background:#fff;padding:14px;text-align:left}
.ficha>*{grid-column:2}
.ficha-ico{
grid-column:1;grid-row:1 / span 3;display:grid;place-items:center;width:34px;height:34px;margin:1px 12px 0 0;
border:1px solid var(--linea);border-radius:10px;background:var(--fondo);color:var(--tinta);
}
.ficha-ico svg,.fila-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ficha-t{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;font-size:17px;line-height:1.2;color:var(--tinta)}
.ficha-p{font-size:14px;line-height:1.45;color:var(--suave);margin-top:4px}
.sello{display:inline-block;font-size:12px;font-weight:700;line-height:1.3;padding:4px 9px;border-radius:999px;background:#f4f4f5;color:var(--texto)}
.kid{flex:none;display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border-radius:6px;background:var(--tinta);color:#fff;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
/* ---------- Fila de opción con flecha (botón o enlace) ---------- */
.opciones{display:grid;gap:10px}
.opcion{
display:flex;align-items:center;justify-content:space-between;gap:12px;
width:100%;min-height:56px;padding:12px 18px;
border:1.5px solid var(--linea);border-radius:16px;background:#fff;color:var(--tinta);
font-family:var(--f-texto);font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.01em;text-align:left;text-decoration:none;
box-shadow:var(--sombra-chica);
transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.opcion .fl{opacity:.45}
@media (hover:hover){
.opcion:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
.opcion:hover .fl{opacity:1}
}
.opcion:active{background:var(--tinta);border-color:var(--tinta);color:#fff}
.opcion[data-elegida="true"]{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.opcion[data-elegida="true"] .fl{opacity:1}
/* ---------- Filas con rótulo y una línea ---------- */
.filas{display:grid;gap:8px}
.fila{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;
min-height:56px;padding:10px 14px;border:1px solid var(--linea);border-radius:12px;background:#fff;
color:var(--tinta);text-align:left;text-decoration:none;
}
.fila-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tinta);color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.fila-ico{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--linea);border-radius:10px;background:var(--fondo);color:var(--tinta)}
.fila-tx{display:flex;flex-direction:column;min-width:0}
.fila-t{font-size:15px;font-weight:700;line-height:1.25;color:var(--tinta)}
.fila-p{font-size:13px;line-height:1.35;color:var(--suave);margin-top:1px}
.fila .fl{opacity:.45}
a.fila{transition:border-color .15s ease}
@media (hover:hover){a.fila:hover{border-color:var(--tinta)}a.fila:hover .fl{opacity:1}}
a.fila:active{border-color:var(--tinta)}
/* ---------- Viñetas chicas y sellos ---------- */
.lista-p li{position:relative;padding-left:16px;font-size:14px;line-height:1.45;color:var(--texto)}
.lista-p li+li{margin-top:8px}
.lista-p li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tinta)}
.lista-p .nota-l{display:block;font-size:12.5px;color:var(--suave);margin-top:2px}
.marca-si,.marca-no{flex:none;display:inline-block;width:20px;height:20px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:11px}
.marca-si{background-color:var(--tinta);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 5 8.8l4.5-5.4'/%3E%3C/svg%3E")}
.marca-no{box-shadow:inset 0 0 0 1.5px var(--tenue);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2363636b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.2 3.2l5.6 5.6M8.8 3.2 3.2 8.8'/%3E%3C/svg%3E")}
/* ---------- Pasos numerados (cuatro fases) ---------- */
.pasos{display:grid;gap:8px;counter-reset:paso}
.paso{
display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;
padding:14px;border:1px solid var(--linea);border-radius:12px;background:#fff;text-align:left;
}
.paso-n{
grid-row:1 / span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
background:var(--tinta);color:#fff;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
}
.paso-t{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;font-size:17px;line-height:1.2;color:var(--tinta);align-self:center;min-height:28px;display:flex;align-items:center}
.paso-p{grid-column:2;font-size:14px;line-height:1.45;color:var(--suave);margin-top:2px}
.paso details.plegable{grid-column:2}
/* ---------- Acordeón: preguntas frecuentes y «ver más» ---------- */
.preguntas{display:grid;gap:8px}
details.pregunta{border:1px solid var(--linea);border-radius:12px;background:#fff;text-align:left}
details.pregunta[open]{border-color:var(--linea-fuerte);box-shadow:0 4px 16px -10px rgba(0,0,0,.18)}
details.pregunta>summary{
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;
min-height:56px;padding:10px 14px;border-radius:12px;
font-size:15px;font-weight:700;line-height:1.3;color:var(--tinta);cursor:pointer;list-style:none;
}
details.pregunta>summary::-webkit-details-marker,details.plegable>summary::-webkit-details-marker{display:none}
details.pregunta>summary::after,details.plegable>summary::after{
content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;flex:none;
}
details.pregunta[open]>summary::after,details.plegable[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.pregunta-r{padding:0 14px 14px;font-size:14.5px;line-height:1.5;color:var(--texto)}
.pregunta-r p+p,.plegable-c p+p{margin-top:8px}
details.pregunta[open]>.pregunta-r,details.plegable[open]>.plegable-c{animation:aparece .25s ease-out}
details.plegable{margin-top:10px;border-top:1px dashed var(--linea-fuerte)}
details.plegable>summary{
display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;
font-size:13.5px;font-weight:700;color:var(--tinta);cursor:pointer;list-style:none;
}
.plegable-c{padding-bottom:6px;font-size:14px;line-height:1.5;color:var(--texto)}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ---------- «Es para vos / no es para vos» ---------- */
.encaje{display:grid;gap:10px}
.encaje-col{border:1px solid var(--linea);border-radius:16px;background:#fff;padding:16px;text-align:left}
.encaje-col.si{border:1.5px solid var(--tinta)}
.encaje-col.no{border-style:dashed;border-color:var(--linea-fuerte);background:#faf8f3}
.encaje-t{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;font-size:19px;line-height:1.2;color:var(--tinta);margin-bottom:12px}
.encaje-lista{display:grid;gap:10px}
.encaje-lista li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start;font-size:14.5px;line-height:1.4;color:var(--texto)}
.encaje-lista li::before{content:"";width:20px;height:20px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:11px}
.encaje-col.si .encaje-lista li::before{background-color:var(--tinta);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4 5 8.8l4.5-5.4'/%3E%3C/svg%3E")}
.encaje-col.no .encaje-lista li{color:var(--suave)}
.encaje-col.no .encaje-lista li::before{box-shadow:inset 0 0 0 1.5px var(--tenue);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2363636b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.2 3.2l5.6 5.6M8.8 3.2 3.2 8.8'/%3E%3C/svg%3E")}
/* ---------- Tarjeta de garantía (la única con borde negro, como lo más importante del plan en la referencia) ---------- */
.garantia{border:1.5px solid var(--tinta);border-radius:16px;background:#fff;padding:16px;text-align:left;box-shadow:var(--sombra-tarjeta)}
.garantia-cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin-bottom:12px}
.garantia-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--tinta);color:#fff}
.garantia-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.garantia-t{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;font-size:19px;line-height:1.2;color:var(--tinta);text-wrap:balance}
.garantia-p{font-size:13.5px;line-height:1.4;color:var(--suave);margin-top:3px}
.garantia-pasos li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--linea)}
.garantia-pasos .kid{margin-top:1px}
.garantia-pasos b{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--tinta)}
.garantia-pasos span:not(.kid){display:block;font-size:14px;line-height:1.45;color:var(--suave);margin-top:1px}
.garantia-nota{padding-top:12px;border-top:1px dashed var(--linea-fuerte);font-size:12.5px;line-height:1.45;color:var(--suave)}
/* ---------- Tira de datos cortos ---------- */
.tira{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
border:1px solid var(--linea);border-radius:16px;background:var(--linea);overflow:hidden;
}
.tira.de-2,.tira.de-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.tira>*{display:flex;flex-direction:column;justify-content:center;background:#fff;padding:12px 8px;text-align:center;min-width:0}
.tira-n{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.03em;font-size:clamp(18px,5.4vw,24px);line-height:1.1;color:var(--tinta);font-variant-numeric:tabular-nums}
.tira-t{margin-top:3px;font-size:12px;line-height:1.3;color:var(--suave);text-wrap:balance}
/* ---------- Bloque final «papel»: un título, una línea y el botón negro ---------- */
.cierre{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 14px 18px;border-radius:16px;background:var(--papel);scroll-margin-top:12px}
.cierre-t{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;font-size:19px;line-height:1.2;color:var(--tinta);text-wrap:balance;margin:0}
.cierre-t:focus{outline:none}
.cierre-p{font-size:14.5px;color:var(--suave);margin-bottom:8px;max-width:26rem;text-wrap:balance}
.cierre .btn,.cierre .btn-sec{max-width:22rem}
.cierre-nota{font-size:12.5px;color:var(--tenue);margin:2px 0 4px}
/* ---------- Botón flotante inferior (celular). Lo muestra sitio.js con data-visible="si"; sin script no aparece. ---------- */
.barra-fija{
position:fixed;left:0;right:0;bottom:0;z-index:30;
padding:10px max(var(--pad),env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));
background:rgba(245,241,232,.94);border-top:1px solid var(--linea);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
transform:translateY(105%);visibility:hidden;
transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s;
}
.barra-fija[data-visible="si"]{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s}
.barra-fija .btn{max-width:26rem;margin:0 auto;display:flex;min-height:48px}
body[data-barra="si"] .pie{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
/* ---------- Formularios (siempre 16 px de letra: iOS no hace zoom al enfocar) ---------- */
.entrada,.campo input:not([type="checkbox"]):not([type="radio"]),.campo select,.campo textarea{
display:block;width:100%;min-height:48px;padding:11px 12px;
border:1px solid var(--borde-campo);border-radius:12px;background:#fff;color:var(--tinta);
font-family:var(--f-texto);font-size:16px;line-height:1.25;
scroll-margin-block:110px;
}
.entrada{min-height:52px;padding:13px 14px;line-height:1.4}
.campo textarea,textarea.entrada{min-height:104px;line-height:1.4;resize:vertical}
.entrada::placeholder,.campo input::placeholder,.campo textarea::placeholder{color:var(--marcador);opacity:1}
.entrada:focus,.campo input:not([type="checkbox"]):not([type="radio"]):focus,.campo select:focus,.campo textarea:focus{
outline:none;border-color:var(--tinta);box-shadow:inset 0 0 0 .5px var(--tinta),0 0 0 3px rgba(27,112,255,.45);
}
/* Los :not repetidos son para ganarle en peso a la regla base de los campos. */
.entrada[aria-invalid="true"],.campo input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),.campo select[aria-invalid="true"],.campo textarea[aria-invalid="true"]{
border-color:var(--error);background:var(--error-suave);
}
.entrada[disabled],.campo input[disabled],.campo select[disabled],.campo textarea[disabled]{opacity:.6;cursor:default}
.campo select,select.entrada{
appearance:none;-webkit-appearance:none;padding-right:30px;text-overflow:ellipsis;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2318181b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 10px center;background-size:12px;
}
.campo{margin-top:10px}
.campo:first-child{margin-top:0}
.campo label,.campo legend,.entrada-eti{display:block;font-size:13px;font-weight:700;color:var(--tinta);margin-bottom:5px}
.campo.opcional label::after,.campo.opcional legend::after{content:" (opcional)";font-weight:500;color:var(--suave)}
.campos-dos{display:grid;grid-template-columns:minmax(0,9.4rem) minmax(0,1fr);gap:8px}
.con-prefijo{position:relative}
.con-prefijo>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--suave);pointer-events:none}
.con-prefijo>input{padding-left:50px !important}
.casilla{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
min-height:44px;padding:9px 0;cursor:pointer;font-size:14px;line-height:1.45;color:var(--texto);
}
.casilla input{
appearance:none;-webkit-appearance:none;margin:0;width:22px;height:22px;flex:none;
border:1px solid var(--borde-campo);border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;
}
.casilla input::after{content:"";width:11px;height:6px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:translateY(-1.5px) rotate(-45deg) scale(0);transition:transform .12s ease}
.casilla input:checked{background:var(--tinta);border-color:var(--tinta)}
.casilla input:checked::after{transform:translateY(-1.5px) rotate(-45deg) scale(1)}
.err{display:flex;align-items:flex-start;gap:6px;margin-top:5px;font-size:13px;line-height:1.35;font-weight:700;color:var(--error)}
.err:empty{display:none}
.err::before{content:"!";flex:none;display:grid;place-items:center;width:15px;height:15px;margin-top:1px;border-radius:50%;background:var(--error);color:#fff;font-size:10.5px;font-weight:800}
.ayuda{margin-top:5px;font-size:12.5px;line-height:1.35;color:var(--suave)}
.ayuda b{font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
form .btn{margin-top:14px}
.datos{margin-top:10px;font-size:12px;line-height:1.4;color:var(--suave);text-align:center}
.aviso-ok{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 4px;text-align:center}
.aviso-ok:focus{outline:none}
.aviso-ok::before{
content:"";width:46px;height:46px;margin-bottom:6px;border-radius:50%;background:var(--tinta) no-repeat center / 24px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10.5'/%3E%3C/svg%3E");
animation:pop .35s cubic-bezier(.2,1.4,.4,1);
}
.aviso-ok-t{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;font-size:19px;line-height:1.2;color:var(--tinta);text-wrap:balance}
.aviso-ok-p{font-size:14.5px;line-height:1.45;color:var(--suave);max-width:26rem;text-wrap:balance}
.aviso-error{margin-top:12px;padding:10px 12px;border:1px solid var(--error);border-radius:12px;background:var(--error-suave);font-size:13.5px;line-height:1.4;font-weight:700;color:var(--error)}
.aviso-error:empty{display:none}
/* ---------- Calculadora: campos numéricos y resultado con tres escenarios ---------- */
.calc{position:relative}
.calc-campos{display:grid;gap:10px}
.calc-campos .campo{margin-top:0}
.calc-resultado{margin-top:16px;padding-top:16px;border-top:1px dashed var(--linea-fuerte)}
.calc-resultado:focus{outline:none}
.calc-resultado .tira{margin-bottom:10px}
.calc-resultado .tira-n{font-size:clamp(15px,4.3vw,20px)}
.escenarios{display:grid;gap:8px}
.escenario{
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;
padding:12px 14px;border:1px solid var(--linea);border-radius:12px;background:var(--fondo);
}
.escenario.referencia{border:1.5px solid var(--tinta);background:#fff}
.escenario-n{display:flex;align-items:center;gap:8px;min-height:24px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.escenario.referencia .escenario-n{color:var(--tinta)}
.escenario-p{grid-column:1;font-size:12.5px;line-height:1.35;color:var(--suave);margin-top:2px}
.escenario-monto{
grid-column:2;grid-row:1 / span 2;font-family:var(--f-titulo);font-weight:800;letter-spacing:-.03em;
font-size:21px;line-height:1.1;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* ---------- Prosa larga (Privacidad y Términos: la única excepción a la regla de poco texto) ---------- */
.prosa{max-width:40rem;margin:0 auto;font-size:16px;line-height:1.65;color:var(--texto);text-align:left;text-wrap:pretty}
.prosa>*+*{margin-top:14px}
.prosa h2{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;font-size:20px;line-height:1.25;color:var(--tinta);margin-top:34px;text-wrap:balance}
.prosa h3{font-size:17px;font-weight:700;line-height:1.3;color:var(--tinta);margin-top:24px}
.prosa h2+*,.prosa h3+*{margin-top:8px}
.prosa ul,.prosa ol{display:grid;gap:6px;padding-left:22px}
.prosa ul{list-style:disc}
.prosa ol{list-style:decimal}
.prosa li::marker{color:var(--suave)}
.prosa strong,.prosa b{font-weight:700;color:var(--tinta)}
.prosa a{color:var(--azul-texto);font-weight:500}
.prosa-fecha{font-size:13px;line-height:1.4;color:var(--suave);text-align:center;margin:10px 0 0}
/* ---------- Página de error ---------- */
.pagina-error{text-align:center;padding:10px 0 6px}
.pagina-error .pastilla{margin-top:14px}
/* ---------- Pie: raya fina, enlaces, aviso de Meta y legales ---------- */
.pie{
flex-shrink:0;margin-top:10px;
padding:14px max(var(--pad),env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));
border-top:1px solid var(--linea);text-align:center;font-size:11.5px;line-height:1.5;color:var(--suave);
display:flex;flex-direction:column;align-items:center;
}
.pie a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:var(--azul-texto);text-underline-offset:3px}
.pie-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px;margin-bottom:2px}
.pie-meta{max-width:44rem;margin:4px auto 6px;font-size:11px;line-height:1.5;color:var(--suave);text-wrap:pretty}
.pie-extra{display:block}
.pie-sep{display:none}
.pie a.pie-legal{font-size:inherit;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px}
/* ---------- Relleno de carga y animaciones con nombre (solo opacity y transform) ---------- */
.late{animation:respira 1.6s ease-in-out infinite;pointer-events:none}
.hueso{display:block;height:1em;border-radius:6px;background:var(--linea)}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@keyframes respira{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes flota{from{transform:translate3d(0,3px,0)}to{transform:translate3d(0,-2px,0)}}
/* Aparición al entrar en pantalla. La clase del la pone sitio.js recién cuando puede observar:
sin script, o con movimiento reducido, nada queda oculto. */
@media (prefers-reduced-motion:no-preference){
html.con-aparicion [data-aparece]{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:calc(var(--i,0) * 70ms)}
html.con-aparicion [data-aparece].visto{opacity:1;transform:none}
}
/* =====================================================================
PANTALLAS DE EJEMPLO · marco oscuro suelto
Paleta de noche, grises y un acento que solo se usa adentro. Fuera del marco no se usa.
Todo es decoración: el contenedor lleva role="img" y aria-label, y lo de adentro aria-hidden.
===================================================================== */
.escena{position:relative;width:100%;max-width:26rem;margin:0 auto;padding:16px 12px 22px;pointer-events:none;-webkit-user-select:none;user-select:none}
.escena.sin-notas{padding:0}
.marco{
--marco-noche:#0E1218;
--marco-tinta:#F2F3F5;
--marco-suave:#A3ABB9;
--marco-gris:#7f8898;
--marco-linea:rgba(255,255,255,.09);
--marco-acento:#D4A84B;
--marco-acento-alto:#E8C15A;
--marco-acento-tenue:rgba(212,168,75,.16);
--marco-acento-borde:rgba(212,168,75,.46);
--marco-sombra:36 26% 20%;
position:relative;overflow:hidden;
font-size:13px;line-height:1.4;font-weight:500;color:var(--marco-tinta);text-align:left;letter-spacing:normal;
background:linear-gradient(180deg,#161c26 0,var(--marco-noche) 14em);
border:1px solid rgba(255,255,255,.10);border-radius:20px;
padding:12px 14px 14px;
box-shadow:0 .4em .8em hsl(var(--marco-sombra) / .10),0 2em 4.4em -1em hsl(var(--marco-sombra) / .22),0 5em 9em -2.8em hsl(var(--marco-sombra) / .24),inset 0 1px 0 rgba(255,255,255,.08);
}
.marco b,.marco i{font-style:normal;font-weight:inherit}
.marco.aire-abajo{padding-bottom:5.2em} /* deja libre el rincón que tapa una .nota.abajo-izq */
/* Se funde hacia abajo, como las pantallas del mockup: para que «asome» en vez de terminar con un borde. */
.marco.se-funde{
border-bottom:0;border-radius:20px 20px 0 0;padding-bottom:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 62%,transparent 100%);
}
.marco-cab{display:flex;align-items:center;gap:.8em;min-height:1.6em;margin-bottom:.9em;color:var(--marco-gris);font-size:.86em;line-height:1.2}
.marco-puntos{display:inline-flex;gap:.4em}
.marco-puntos i{width:.55em;height:.55em;border-radius:50%;background:#3a4150}
.marco-tag{
display:inline-flex;align-items:center;height:1.9em;padding:0 .75em;border-radius:99em;
font-size:.9em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1;
border:1px solid rgba(255,255,255,.16);color:var(--marco-suave);white-space:nowrap;
}
.marco-rot{margin-left:auto;white-space:nowrap}
.marco-miga{font-size:.86em;line-height:1.4;color:var(--marco-gris);margin-bottom:.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marco-h{font-size:1.55em;font-weight:700;letter-spacing:-.03em;line-height:1.12}
.marco-sub{color:var(--marco-suave);margin-top:.3em;text-wrap:balance}
.marco-sec{font-size:.8em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--marco-gris);margin:1.4em 0 .6em;white-space:nowrap}
.marco-caja{border:1px solid var(--marco-linea);background:rgba(255,255,255,.025);border-radius:1em;padding:.8em .95em;color:#d5d9e0}
.marco-caja.acento{border-color:var(--marco-acento-borde);background:none}
.burbujas{display:grid;gap:.5em;margin-top:.9em}
.burbuja{position:relative;max-width:86%;padding:.55em .85em .6em;border-radius:1.05em;line-height:1.35}
.burbuja.entra{justify-self:start;border-top-left-radius:.3em;border:1px solid var(--marco-linea);background:rgba(255,255,255,.07);color:#d5d9e0}
.burbuja.sale{justify-self:end;border-top-right-radius:.3em;background:#fff;color:#111B21}
.burbuja-n{display:block;font-size:.84em;line-height:1.3;font-weight:700;color:var(--marco-suave);margin-bottom:.1em}
.burbuja.sale .burbuja-n{color:#55555c}
.burbuja-h{float:right;margin:.55em 0 -.15em .8em;font-size:.78em;line-height:1;color:var(--marco-gris)}
.burbuja.sale .burbuja-h{color:#667781}
.marco-lista{display:grid;gap:.25em}
.marco-fila{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.8em;
padding:.65em .7em;border-radius:1em;border:1px solid transparent;
}
.marco-fila-ico{width:1.7em;height:1.7em;border-radius:50%;border:1px solid #39414f;display:grid;place-content:center}
.marco-fila-ico::after{content:"";width:.5em;height:.5em;border-radius:50%;background:#39414f}
.marco-fila-t{display:block;font-weight:700}
.marco-fila-d{display:block;color:#8f98a7;font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marco-estado{font-size:.82em;font-weight:700;padding:.28em .75em;border-radius:99em;border:1px solid #333b49;color:#97a0af;white-space:nowrap}
.marco-fila.en-curso{background:var(--marco-acento-tenue);border-color:var(--marco-acento-borde)}
.marco-fila.en-curso .marco-fila-t{color:var(--marco-acento-alto)}
.marco-fila.en-curso .marco-fila-ico{border-color:var(--marco-acento)}
.marco-fila.en-curso .marco-fila-ico::after{background:var(--marco-acento)}
.marco-fila.en-curso .marco-estado{border-color:var(--marco-acento-borde);color:var(--marco-acento-alto)}
.marco-fila.hecha .marco-fila-ico{border-color:var(--marco-tinta);background:var(--marco-tinta)}
.marco-fila.hecha .marco-fila-ico::after{width:.72em;height:.4em;border-radius:0;background:none;border-left:.16em solid var(--marco-noche);border-bottom:.16em solid var(--marco-noche);transform:translateY(-.08em) rotate(-45deg)}
.marco-fila.hecha .marco-estado{border-color:rgba(255,255,255,.28);color:var(--marco-tinta)}
.marco-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em}
.marco-dato{border:1px solid var(--marco-linea);background:rgba(255,255,255,.025);border-radius:1em;padding:.75em .95em .8em;min-width:0}
.marco-dato span{display:block;font-size:.78em;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--marco-gris)}
.marco-dato b{display:block;margin-top:.15em;font-size:1.6em;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.marco-dato.acento b{color:var(--marco-acento-alto)}
.marco-barra{height:.5em;margin-top:.7em;border-radius:99em;background:#232a36;overflow:hidden}
.marco-barra i{display:block;height:100%;border-radius:inherit;background:var(--marco-acento);transform-origin:left center;transform:scaleX(var(--v,.5))}
/* Nota blanca que sobresale del marco (la tarjeta del «cuello de botella» del mockup, suelta). */
.nota{position:absolute;z-index:2;max-width:64%}
.nota.arriba-der{top:0;right:0;transform:rotate(2.5deg)}
.nota.abajo-izq{left:0;bottom:0;transform:rotate(-2deg)}
.nota-c{
background:#fff;border:1px solid rgba(11,11,12,.11);border-radius:16px;padding:10px 13px 11px;color:#0b0b0c;
box-shadow:0 .4em .8em hsl(36 26% 20% / .10),0 2em 4.4em -1em hsl(36 26% 20% / .22),0 5em 9em -2.8em hsl(36 26% 20% / .24),inset 0 1px 0 rgba(255,255,255,.9);
animation:flota 7s ease-in-out infinite alternate;
}
.nota.abajo-izq .nota-c{animation-duration:8.5s;animation-delay:-3s}
.nota-c span{display:block;font-size:10.5px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#55555c;margin-bottom:.3em;white-space:nowrap}
.nota-c b{display:block;font-size:15px;font-weight:700;line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
/* =====================================================================
ADAPTACIÓN A PANTALLAS ANCHAS (el celular es la composición principal)
===================================================================== */
@media (max-width:359px){
.campos-dos{grid-template-columns:minmax(0,1fr)}
.pastilla{font-size:12.5px;padding:7px 11px}
.tira:not(.de-2):not(.de-4){grid-template-columns:minmax(0,1fr)}
}
@media (min-width:600px){
:root{--pad:20px}
.tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}
.ficha{display:block}
.ficha-ico{margin:0 0 10px}
.botonera.en-fila{grid-template-columns:repeat(2,minmax(0,1fr));max-width:36rem}
.calc-campos{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.calc-campos .campo.entera{grid-column:1 / -1}
.escenarios{grid-template-columns:repeat(3,minmax(0,1fr))}
.escenario{grid-template-columns:minmax(0,1fr);align-content:start;row-gap:2px;padding:14px}
.escenario-monto{grid-column:1;grid-row:auto;order:2;font-size:24px;margin:6px 0 4px}
.escenario-n{order:1}
.escenario-p{order:3}
.pie-extra{display:inline}
.pie-sep{display:inline}
}
/* Desde 700 px: la composición de escritorio de la referencia. */
@media (min-width:700px){
:root{--aire-seccion:60px}
.cab-centro{padding:36px 32px 0}
.cab-logo img{height:88px}
.pastilla{padding:9px 16px;gap:10px;font-size:15px}
.pastilla.chica{padding:4px 10px;font-size:12px}
.titulo,.bajada{max-width:60rem}
.titulo .linea,.bajada .linea{display:block;text-wrap:balance}
.titulo{font-size:clamp(25px,3.5vw,34px);line-height:1.15;margin-top:22px}
.titulo.interior{margin-bottom:24px}
.bajada{font-size:clamp(17px,2vw,21.5px);line-height:1.25;margin-top:12px}
.portada-acciones{margin-top:24px}
.beneficios{margin-top:24px;gap:8px}
.beneficios li{font-size:16px}
.seccion-cab{margin-bottom:24px}
.rotulo{font-size:12px}
.titulo-seccion{font-size:clamp(22px,2.8vw,28px);line-height:1.15;max-width:44rem}
.apoyo{font-size:16.5px;max-width:38rem;margin-top:10px}
.tarjeta{padding:20px}
.tarjeta-h{font-size:24px;margin-bottom:20px}
.tarjeta-p{font-size:15.5px;margin:-10px 0 18px}
.ficha{padding:16px}
.opcion{font-size:17px;min-height:62px;padding:14px 20px}
.filas.en-dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
.paso{padding:16px}
.encaje{grid-template-columns:repeat(2,minmax(0,1fr))}
.encaje-col,.garantia{padding:20px}
.tira.de-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tira>*{padding:16px 10px}
.tira-n{font-size:26px}
.tira-t{font-size:13px}
.prosa{font-size:17px}
.prosa h2{font-size:22px}
.marco{font-size:14px}
.barra-fija{display:none}
body[data-barra="si"] .pie{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media (min-width:860px){
:root{--aire-seccion:72px}
.pantalla{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.tarjetas.de-tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.pasos{grid-template-columns:repeat(4,minmax(0,1fr))}
.paso{grid-template-columns:minmax(0,1fr);row-gap:10px;align-content:start}
.paso-n{grid-row:auto}
.paso-t{min-height:0}
.paso-p,.paso details.plegable{grid-column:1}
details.pregunta>summary{padding:12px 16px;font-size:16px}
.pregunta-r{padding:0 16px 16px;font-size:15px}
.garantia-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;border-top:1px solid var(--linea)}
.garantia-pasos li{border-top:0;padding:14px 0}
.cierre{padding:34px 20px 24px}
.cierre-t{font-size:22px}
.garantia-t,.encaje-t{font-size:22px}
}
/* ---------- Movimiento reducido: se apaga todo ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
}
@media print{
.barra-fija,.salto{display:none !important}
[data-aparece]{opacity:1 !important;transform:none !important}
}
/* ===== legales y error ===== */
/* Privacidad y Términos terminan en un párrafo, no en un bloque de cierre: se les deja aire antes del pie.
Va junto a .pantalla en el mismo elemento (solo toca el borde de abajo). */
.pagina-legal{padding-bottom:32px}
@media (min-width:700px){
.pagina-legal{padding-bottom:48px}
}
/* ===== calculadora y preguntas ===== */
/* Calculadora (parciales/calculadora.html). El resultado reemplaza al formulario dentro de la misma tarjeta y va
en una pantalla oscura del kit (.marco) rotulada «Estimación». Son los números de la persona: es contenido,
no un dibujo. Colores de pantalla nueva: noche, blanco, gris y azul (solo la barra «Base»).
.calc-resultado.en-pantalla el resultado sin la raya de arriba (ocupa el lugar del formulario)
.marco.calc-pantalla la pantalla · .calc-barras / .calc-barra(.base) · .calc-barra-n · .calc-barra-monto
.calc-leyendas las líneas grises de abajo de las barras
.calc-linea la línea del requisito, sobre blanco, encima del botón de la llamada */
.calc-resultado.en-pantalla{margin-top:0;padding-top:0;border-top:0}
.marco.calc-pantalla{--marco-acento:var(--marco-gris);padding:14px 16px 16px}
.calc-pantalla .marco-cab{margin-bottom:14px}
.calc-pantalla .marco-tag{font-size:11px}
.calc-barras{display:grid;gap:14px}
.calc-barra{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:12px}
.calc-barra-n{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--marco-suave)}
.calc-barra-monto{min-height:1.3em;font-size:15px;font-weight:700;line-height:1.3;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-barra .marco-barra{grid-column:1 / -1;height:8px;margin-top:6px}
.calc-barra .marco-barra i{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.calc-barra.base{--marco-acento:var(--azul)}
.calc-barra.base .calc-barra-n{color:var(--marco-tinta)}
.calc-leyendas{margin-top:14px;font-size:12.5px;line-height:1.45;color:var(--marco-suave)}
.calc-leyendas p+p{margin-top:2px}
.calc-linea{margin-top:14px;font-size:14px;line-height:1.4;color:var(--suave);text-align:center;text-wrap:balance}
.calc-linea+.btn,.calc-linea+.btn-sec{margin-top:8px}
/* Preguntas frecuentes dentro de una tarjeta blanca (datos/preguntas.mjs): filas separadas por una raya fina
en vez de recuadros sueltos.
.tarjeta.de-preguntas la tarjeta · .preguntas.en-tarjeta sus filas (details.pregunta sin recuadro) */
.tarjeta.de-preguntas{padding-top:4px;padding-bottom:4px}
.preguntas.en-tarjeta{gap:0}
.preguntas.en-tarjeta details.pregunta{border:0;border-top:1px solid var(--linea);border-radius:0;background:none;box-shadow:none}
.preguntas.en-tarjeta details.pregunta:first-child{border-top:0}
.preguntas.en-tarjeta details.pregunta>summary{min-height:52px;padding:10px 0;border-radius:8px}
.preguntas.en-tarjeta .pregunta-r{padding:0 0 14px}
.tarjeta.de-preguntas>details.plegable{margin-top:0}
/* ===== recursos ===== */
/* /recursos y /recursos/. Solo lo que el kit no trae, hecho con sus variables.
.recurso-tx · .recurso-t contenido de una fila .opcion de recurso: tipo (.rotulo) arriba, título y pastilla
(la pastilla va debajo del título en celular y a la derecha desde 600 px)
.recurso-cab arranque del detalle: el tipo (.rotulo) va pegado encima del título
.recurso-estado «Disponible pronto» y su línea, centrados dentro de la tarjeta
.recurso-incluye plegable «Qué va a incluir»: aire entre el párrafo y la lista
.recurso-cierre un .cierre sin línea de apoyo: aire entre el título y el botón
.recurso-mas rótulo «Más de …» sobre sus filas
.candado-cab · .candado-ico · .candado-t · .candado-p cabecera del formulario (la pieza del candado de la referencia) */
.recurso-tx{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1 1 auto;min-width:0}
.recurso-tx .rotulo{margin:0;text-align:left;transition:color .15s ease}
.recurso-t{display:block}
.recurso-tx .pastilla{margin-top:4px}
/* La fila se pone negra al pasar o tocar: el tipo pasa a un gris que se lee sobre negro. */
@media (hover:hover){.opcion:hover .recurso-tx .rotulo{color:var(--linea-fuerte)}}
.opcion:active .recurso-tx .rotulo{color:var(--linea-fuerte)}
@media (min-width:600px){
.recurso-tx{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center}
.recurso-tx .rotulo,.recurso-t{grid-column:1}
.recurso-tx .pastilla{grid-column:2;grid-row:1 / span 2;margin-top:0}
}
.recurso-cab .rotulo{margin:16px 0 6px}
.recurso-cab .titulo{margin-top:0}
.recurso-estado{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 4px;text-align:center}
.recurso-estado .tarjeta-p{margin:0}
.recurso-incluye .lista-p{margin-top:10px}
.recurso-cierre .cierre-t{margin-bottom:10px}
.recurso-mas{margin-bottom:10px}
.candado-cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin-bottom:12px}
.candado-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--tinta);color:#fff}
.candado-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.candado-t{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;font-size:18px;line-height:1.2;color:var(--tinta)}
.candado-p{font-size:13.5px;line-height:1.4;color:var(--suave);margin-top:3px}
@media (min-width:700px){
.recurso-cab .rotulo{margin-top:22px}
}
/* ===== portada ===== */
/* Armazón común y página de inicio. Solo lo que el kit no trae, hecho con sus variables.
Armazón (todas las páginas)
.pie-enlaces · .punto los tres enlaces del pie, encima de la raya, separados por un punto medio
.barra-fija desde 700 px vuelve a verse: el guion la pide igual en celular y en escritorio
.agenda · .agenda-fondo · .agenda-caja · .agenda-cerrar · .agenda-respaldo · .agenda-marco
ventana del calendario (la muestra sitio.js; viaja oculta en el pie)
.reserva · .reserva-caja · .reserva-t · .reserva-p aviso «Reserva hecha», pegado abajo
.ancla destino vacío de un ancla vieja (no ocupa lugar)
Piezas sueltas
.pila tarjetas apiladas, con 12 px entre sí
.tarjeta-t título h3 de una tarjeta (la pieza .diag-t de la referencia)
Lo propio de la página de inicio está en el bloque «portada 2», más abajo. */
/* ---------- Armazón ---------- */
.ancla{display:block;height:0}
.pie-enlaces{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:28px}
.pie-enlaces .punto{padding:0 10px;font-weight:700;color:var(--suave)}
html.con-agenda{overflow:hidden}
.agenda{
position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
body[data-reserva="si"] .agenda{padding-bottom:calc(var(--alto-reserva,150px) + 10px)}
.agenda-fondo{position:absolute;inset:0;background:rgba(24,24,27,.55)}
.agenda-caja{
position:relative;display:flex;flex-direction:column;width:100%;max-width:62rem;height:100%;max-height:46rem;overflow:hidden;
border-radius:var(--radio);background:var(--fondo);box-shadow:var(--sombra-flotante);animation:aparece .25s ease-out;
}
.agenda-caja:focus{outline:none}
.agenda-cerrar{
flex:none;align-self:flex-end;display:grid;place-items:center;width:44px;height:44px;margin:6px 6px 0 0;padding:0;
border:1px solid var(--linea);border-radius:50%;background:#fff;color:var(--tinta);box-shadow:var(--sombra-chica);
}
.agenda-cerrar .fl{width:18px;height:18px}
.agenda-marco{position:relative;flex:1 1 auto;min-height:0}
.agenda-marco iframe{display:block;width:100%;height:100%;border:0;background:var(--fondo)}
.agenda[data-cargando] .agenda-marco::after{
content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
border:3px solid var(--linea-fuerte);border-top-color:var(--tinta);animation:agenda-gira .8s linear infinite;pointer-events:none;
}
.agenda-respaldo{position:absolute;left:0;right:0;top:calc(50% + 26px);z-index:2;text-align:center}
@keyframes agenda-gira{to{transform:rotate(360deg)}}
.reserva{
position:fixed;left:0;right:0;bottom:0;z-index:210;
padding:12px max(var(--pad),env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));
background:rgba(245,241,232,.96);border-top:1px solid var(--linea);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:aparece .25s ease-out;
}
.reserva-caja{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:26rem;margin:0 auto;text-align:center}
.reserva-caja:focus{outline:none}
.reserva-t{font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;font-size:17px;line-height:1.2;color:var(--tinta)}
.reserva-p{font-size:14px;line-height:1.4;color:var(--suave);margin-bottom:8px}
.reserva .btn-sec{min-height:48px}
body[data-reserva="si"] .pie{padding-bottom:calc(var(--alto-reserva,150px) + 18px)}
/* ---------- Piezas sueltas ---------- */
.portada-acciones .letra-chica{text-wrap:balance}
.pila{display:grid;gap:12px}
.pila>*{min-width:0}
.tarjeta-t{
font-family:var(--f-titulo);font-weight:800;letter-spacing:-.015em;color:var(--tinta);
font-size:19px;line-height:1.2;text-wrap:balance;margin:0 0 12px;
}
.tarjeta .escena+.letra-chica{margin-top:12px}
/* Una tarjeta que termina en un plegable cerrado no necesita tanto aire abajo: el renglón del plegable ya mide 44 px. */
.tarjeta:has(>details.plegable:last-child),.garantia:has(>details.plegable:last-child){padding-bottom:6px}
.tarjeta:has(>details.plegable[open]:last-child),.garantia:has(>details.plegable[open]:last-child){padding-bottom:12px}
.plegable-c p+.lista-p{margin-top:8px}
.plegable-c .lista-p+p{margin-top:10px}
@media (min-width:700px){
.barra-fija{display:block}
body[data-barra="si"] .pie{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
.pie-enlaces{margin-top:36px}
}
/* Celular apaisado (poco alto): la cabecera y el título llevan menos aire, como en la referencia. */
@media (min-width:700px) and (max-height:480px){
.cab-centro{padding-top:14px}
.titulo{margin-top:14px}
}
@media (min-width:860px){
.tarjeta-t{font-size:22px}
}
/* ===== contacto ===== */
/* /contact y los formularios que envía /js/formularios.js. Solo lo que el kit no trae, hecho con sus variables.
.contacto pila de la página: las dos filas, la tarjeta del formulario y el bloque final
.via fila .opcion de dos renglones · .via-tx el texto · .via-t el rótulo · .via-p la línea gris
.campo-error aviso de error de un campo (el mismo dibujo que .err: aparece solo cuando tiene texto)
Sin JavaScript un formulario con data-formulario no puede enviarse (la API solo recibe JSON): se esconde, y la
página deja en su lugar, dentro de un