/* =========================================================================
   LANDING PÚBLICA · sonqoinmobiliario.com  (v2: docs/reporte-landing.md)
   Sistema (mismos nombres que las variables de Figma «Sonqo · Landing»):
   - Grilla de 12 columnas, contenido de 1200 px, 24 px entre columnas; margen 24 px (celular) y
     48 px (escritorio). Logo, hero y todas las secciones arrancan en la misma línea.
   - Espaciado en escala de 4: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Secciones: 96 px
     (escritorio) y 64 px (celular): se bajó de 128/80 para que la página no pase de ~7 pantallas.
   - Inter, 6 tamaños: display · título de sección · subtítulo 24 · cuerpo 18 · nota 15 · etiqueta 13.
   - Petróleo / Niebla en ritmo; Verde #2ED39A solo sobre Petróleo; Verde accesible sobre claro.
   - Radios: 24 paneles · 12 tarjetas internas · píldora en botones.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("fuentes/inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  /* color/… */
  --color-petroleo: #0F2E3A;
  --color-petroleo-oscuro: #0A222B;
  --color-petroleo-2: #17404F;
  --color-petroleo-80: #3F5861;
  --color-petroleo-60: #546B74;
  --color-verde: #2ED39A;
  --color-verde-acc: #0B7A56;
  --color-verde-acc-hover: #09664A;
  --color-verde-10: #E6F9F1;
  --color-niebla: #F2F6F3;
  --color-niebla-2: #E4ECE8;
  --color-blanco: #FFFFFF;
  --color-sobre-oscuro: #CFE6E0;
  --color-ambar: #B45309;
  --color-wa-fondo: #E4ECE8;
  --color-wa-saliente: #D9FDD3;
  /* esp/… */
  --esp-4: 4px; --esp-8: 8px; --esp-12: 12px; --esp-16: 16px; --esp-24: 24px; --esp-32: 32px;
  --esp-48: 48px; --esp-64: 64px; --esp-96: 96px; --esp-128: 128px;
  /* grilla/… margen/… seccion/… */
  --grilla-ancho: 1200px;
  --grilla-separacion: 24px;
  --margen: 24px;
  --seccion: 64px;
  /* radio/… */
  --radio-panel: 24px;
  --radio-tarjeta: 12px;
  --radio-pildora: 999px;
  /* texto (v2/…) */
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(48px, 7vw, 104px);
  --t-titulo: clamp(36px, 4.5vw, 64px);
  --t-sub: 24px;
  --t-cuerpo: 18px;
  --t-nota: 15px;
  --t-etiqueta: 13px;
  /* movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --nav-alto: 72px;
}
@media (min-width: 768px) { :root { --margen: 48px; } }
@media (min-width: 1024px) { :root { --seccion: 96px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-alto); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.lp, body.legal-p {
  margin: 0; background: var(--color-niebla); color: var(--color-petroleo);
  font: 400 var(--t-cuerpo)/1.6 var(--fuente); -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01"; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-verde-acc); text-underline-offset: 4px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--color-verde-acc); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .como :focus-visible, .confianza :focus-visible, .cierre :focus-visible, .pie :focus-visible, .nav :focus-visible { outline-color: var(--color-verde); }
::selection { background: var(--color-verde); color: var(--color-petroleo); }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.saltar { position: absolute; left: var(--esp-12); top: -64px; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--esp-16); background: var(--color-petroleo); color: var(--color-blanco); border-radius: var(--radio-pildora); font-size: var(--t-nota); }
.saltar:focus { top: var(--esp-12); }

/* Tipos (máximo 6 tamaños) */
.display { font-size: var(--t-display); line-height: 0.95; letter-spacing: -0.04em; }
.titulo { font-size: var(--t-titulo); line-height: 1; letter-spacing: -0.03em; }
.sub { font-size: var(--t-sub); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.nota { font-size: var(--t-nota); line-height: 1.5; }
.etiqueta { font-size: var(--t-etiqueta); line-height: 1.4; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Grilla */
.contenedor { width: 100%; max-width: calc(var(--grilla-ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.grilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grilla-separacion); }
.grilla > * { grid-column: 1 / -1; }
section { padding-block: var(--seccion); }

/* ---------- Botones (píldora) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--esp-32);
  border-radius: var(--radio-pildora); background: var(--color-verde-acc); color: var(--color-blanco);
  font: 600 var(--t-cuerpo)/1 var(--fuente); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-chico { min-height: 44px; padding: 0 var(--esp-16); font-size: var(--t-nota); }
.btn-sec { background: var(--color-petroleo); }
.hero .btn, .nav .btn, .cierre .btn { background: var(--color-verde); color: var(--color-petroleo); }
@media (hover: hover) {
  .btn:hover { background: var(--color-verde-acc-hover); }
  .btn-sec:hover { background: var(--color-petroleo-80); }
  .hero .btn:hover, .nav .btn:hover, .cierre .btn:hover { background: #5ADDB0; }
}

/* ---------- 0. Navegación ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; color: var(--color-blanco); background: transparent; border-bottom: 1px solid transparent; transition: background-color 200ms ease, border-color 200ms ease; } /* taste-skill-ignore: borde fino al bajar (pedido en el brief) */
.nav.solida, .nav.abierta { background: var(--color-petroleo); border-bottom-color: rgba(207, 230, 224, 0.16); }
.nav-fila { display: flex; align-items: center; gap: var(--esp-24); height: var(--nav-alto); }
.marca { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.marca img { height: 28px; width: auto; }
.nav-enlaces { display: none; }
.nav-enlaces a, .nav-ingresar { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-blanco); text-decoration: none; font-size: var(--t-nota); font-weight: 500; }
.nav-acc { margin-left: auto; display: flex; align-items: center; gap: var(--esp-16); }
.nav-ingresar { display: none; }
.nav-menu-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: calc(-1 * var(--esp-8)); border: 0; border-radius: var(--radio-pildora); background: transparent; color: var(--color-blanco); cursor: pointer; }
.nav-menu-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 200ms var(--ease-out); }
.nav.abierta .nav-menu-btn svg { transform: rotate(90deg); }
/* Menú del celular: se despliega bajo la barra */
.nav.abierta .nav-enlaces { display: grid; position: absolute; inset: var(--nav-alto) 0 auto; padding: var(--esp-8) var(--margen) var(--esp-24); background: var(--color-petroleo); border-bottom: 1px solid rgba(207, 230, 224, 0.16); } /* taste-skill-ignore: borde fino del menú desplegado */
.nav.abierta .nav-enlaces a { font-size: var(--t-cuerpo); min-height: 52px; }
@media (max-width: 379px) { .nav .btn-chico { display: none; } }
/* Sin JavaScript (celular): no hay menú desplegable; los enlaces se ven debajo de la barra */
@media (max-width: 1023px) {
  html:not(.js) .nav { position: relative; background: var(--color-petroleo); }
  html:not(.js) .nav-fila { flex-wrap: wrap; height: auto; min-height: var(--nav-alto); padding-block: var(--esp-12); }
  html:not(.js) .nav-menu-btn { display: none; }
  html:not(.js) .nav-enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--esp-24); order: 3; width: 100%; }
  html:not(.js) .hero { padding-top: var(--esp-48); }
}
@media (min-width: 1024px) {
  .nav-enlaces, .nav.abierta .nav-enlaces { display: flex; position: static; gap: var(--esp-32); margin-left: var(--esp-24); padding: 0; background: none; border: 0; }
  .nav-enlaces a { opacity: 0.86; transition: opacity 150ms ease; }
  .nav-enlaces a:hover, .nav-ingresar:hover { opacity: 1; text-decoration: underline; }
  .nav-ingresar { display: inline-flex; }
  .nav-menu-btn, .solo-cel { display: none !important; }
}

/* ---------- 1. Hero ---------- */
.hero { background: var(--color-petroleo); color: var(--color-blanco); padding-top: calc(var(--nav-alto) + var(--esp-48)); padding-bottom: 0; display: flex; flex-direction: column; }
.hero-grilla { row-gap: var(--esp-48); align-items: center; flex: 1; }
.hero-txt { display: grid; gap: var(--esp-24); }
.display .linea { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.display .linea > span { display: block; white-space: nowrap; }
.hero-verde { color: var(--color-verde); max-width: 22ch; }
.hero-beneficio { color: var(--color-sobre-oscuro); max-width: 40ch; }
.hero-acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-16) var(--esp-32); margin-top: var(--esp-8); }
.enlace-flecha { display: inline-flex; align-items: center; gap: var(--esp-8); min-height: 44px; color: var(--color-blanco); font-weight: 600; text-decoration: none; }
.enlace-flecha span { transition: transform 200ms var(--ease-out); }
.enlace-flecha:hover span { transform: translateX(4px); }
.hero-nota { color: var(--color-sobre-oscuro); }
.hero-tel { display: grid; justify-items: center; }
.franja { display: flex; flex-wrap: wrap; gap: var(--esp-8) var(--esp-32); padding-block: var(--esp-32); margin-top: var(--esp-48); font-size: var(--t-nota); color: var(--color-sobre-oscuro); }
.franja li { display: inline-flex; align-items: center; gap: var(--esp-12); }
.franja li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-verde); flex: none; }
@media (min-width: 1024px) {
  .hero { min-height: 100svh; }
  .hero-txt { grid-column: 1 / 8; }
  .hero-tel { grid-column: 8 / 13; }
  .franja { justify-content: space-between; }
}

/* ---------- Teléfono (siempre completo) ---------- */
.telefono { width: min(300px, 78vw); aspect-ratio: 300 / 620; padding: 10px; border-radius: 48px; background: #071A21; box-shadow: 0 0 0 1px rgba(207, 230, 224, 0.16); flex: none; } /* taste-skill-ignore: canto del teléfono sobre Petróleo */
.pantalla { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--color-niebla); color: var(--color-petroleo); font-size: var(--t-nota); line-height: 1.4; }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--color-verde-10); color: var(--color-verde-acc); font-weight: 600; font-size: var(--t-nota); flex: none; }

/* Chat del hero */
.chat { display: flex; flex-direction: column; background: var(--color-wa-fondo); }
.chat-cab { display: flex; align-items: center; gap: var(--esp-12); padding: 44px var(--esp-16) var(--esp-12); background: var(--color-blanco); }
.chat-cab b { display: block; }
.chat-cab small { display: block; color: var(--color-petroleo-60); font-size: var(--t-etiqueta); }
.chat-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--esp-8); padding: var(--esp-16) var(--esp-12); }
.msg { max-width: 84%; padding: var(--esp-8) var(--esp-12); border-radius: var(--radio-tarjeta); }
.msg.ent { background: var(--color-blanco); align-self: flex-start; border-top-left-radius: 4px; }
.msg.sal { background: var(--color-wa-saliente); align-self: flex-end; border-top-right-radius: 4px; }
.chat-pie { padding: var(--esp-8) var(--esp-12) var(--esp-24); }
.chat-pie span { display: block; padding: var(--esp-8) var(--esp-16); border-radius: var(--radio-pildora); background: var(--color-blanco); color: var(--color-petroleo-60); }
.noti { position: absolute; top: 40px; left: var(--esp-8); right: var(--esp-8); display: grid; grid-template-columns: 1fr auto; gap: var(--esp-4) var(--esp-8); align-items: center; padding: var(--esp-12); border-radius: var(--radio-tarjeta); background: var(--color-blanco); box-shadow: 0 12px 32px rgba(15, 46, 58, 0.22); } /* taste-skill-ignore: la notificación flota sobre el chat */
.noti-cab { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--esp-8); color: var(--color-petroleo-60); }
.noti-cab img { width: 20px; height: 20px; border-radius: 6px; }
.noti-btn { min-height: 44px; padding: 0 var(--esp-12); border: 0; border-radius: var(--radio-pildora); background: var(--color-petroleo); color: var(--color-blanco); font: 600 var(--t-nota)/1 var(--fuente); cursor: pointer; transition: transform 160ms var(--ease-out); }
.noti-btn:active { transform: scale(0.97); }
.noti-hecho .noti-txt { color: var(--color-petroleo-80); }
/* Pasos del chat (con JavaScript); sin JavaScript se ve el final */
.js .chat .msg, .js .chat .noti { transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.js .chat[data-etapa="0"] [data-msg="1"], .js .chat[data-etapa="0"] [data-msg="2"], .js .chat[data-etapa="0"] [data-msg="3"],
.js .chat[data-etapa="1"] [data-msg="2"], .js .chat[data-etapa="1"] [data-msg="3"],
.js .chat[data-etapa="2"] [data-msg="3"] { opacity: 0; transform: translateY(12px); }
.js .chat:not([data-etapa="4"]) [data-chat-aviso] { opacity: 0; transform: translateY(-16px) scale(0.98); pointer-events: none; visibility: hidden; }
.js .chat[data-etapa="4"] [data-chat-aviso] { visibility: visible; }

/* ---------- 2. El problema ---------- */
.problema { background: var(--color-niebla); }
.problema .grilla { row-gap: var(--esp-48); }
.escenas { display: grid; gap: var(--esp-32); }
.escena { display: grid; gap: var(--esp-16); }
.aviso-tel { display: flex; align-items: center; gap: var(--esp-12); padding: var(--esp-12) var(--esp-16); border-radius: var(--radio-tarjeta); background: var(--color-blanco); font-size: var(--t-nota); line-height: 1.4; }
.aviso-tel b, .aviso-tel span span { display: block; }
.aviso-tel .grow span { color: var(--color-petroleo-60); }
.aviso-hora { color: var(--color-petroleo-60); font-size: var(--t-etiqueta); align-self: flex-start; }
.ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ic svg { width: 22px; height: 22px; fill: none; stroke: var(--color-blanco); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ic-wa { background: var(--color-verde-acc); }
.ic-rec { background: var(--color-ambar); }
.ic-xls { background: var(--color-petroleo-80); }
.escena-txt { display: grid; gap: var(--esp-8); max-width: 44ch; }
.problema-cierre { color: var(--color-verde-acc); }
@media (min-width: 1024px) {
  .problema-t { grid-column: 1 / 8; }
  .escenas { grid-column: 1 / 13; grid-template-columns: repeat(3, 1fr); gap: var(--grilla-separacion); }
  .escena:nth-child(2) { margin-top: var(--esp-32); }
  .escena:nth-child(3) { margin-top: var(--esp-64); }
  .problema-cierre { grid-column: 1 / 13; }
}

/* ---------- 3. Cómo funciona ---------- */
.como { background: var(--color-petroleo); color: var(--color-blanco); }
.como .grilla { row-gap: var(--esp-48); }
.pasos { display: grid; gap: var(--esp-64); }
.paso { display: grid; gap: var(--esp-12); justify-items: start; }
.paso > p { color: var(--color-sobre-oscuro); max-width: 40ch; }
.telefono-paso { width: min(300px, 80vw); aspect-ratio: auto; margin-top: var(--esp-16); justify-self: center; }
.telefono-paso .pantalla { height: auto; }
.telefono-paso .p { padding-bottom: var(--esp-32); }
.como-fijo { display: none; }
/* Pantallas de la app dentro del teléfono */
.p { position: absolute; inset: 0; padding: 48px var(--esp-16) var(--esp-16); display: grid; align-content: start; gap: var(--esp-12); }
.telefono-paso .p { position: static; height: 100%; }
.p-tit { font-size: var(--t-sub); font-weight: 600; letter-spacing: -0.01em; }
.p-fila { display: flex; align-items: center; gap: var(--esp-12); padding: var(--esp-12); border-radius: var(--radio-tarjeta); background: var(--color-blanco); }
.p-fila b, .p-fila small { display: block; }
.p-fila small, .p-nota { color: var(--color-petroleo-60); font-size: var(--t-etiqueta); }
.ic-cal { background: var(--color-petroleo); }
.ic-fb { background: var(--color-petroleo-60); }
.ic-fb svg { fill: var(--color-blanco); stroke: none; }
.p-fila-suave { background: var(--color-niebla-2); }
.p-msg { max-width: 90%; }
.p-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--esp-4); text-align: center; font-weight: 600; }
.p-semana span { display: grid; gap: 2px; padding: var(--esp-8) 0; border-radius: var(--radio-tarjeta); }
.p-semana small { font-size: var(--t-etiqueta); font-weight: 400; color: var(--color-petroleo-60); }
.p-semana .hoy { background: var(--color-petroleo); color: var(--color-blanco); }
.p-semana .hoy small { color: var(--color-sobre-oscuro); }
.p-ok { color: var(--color-verde-acc); font-weight: 600; font-size: var(--t-etiqueta); }
.p-ok::before { content: "● "; }
.p-ok-bloque { padding: var(--esp-12); border-radius: var(--radio-tarjeta); background: var(--color-verde-10); }
.p-chip { padding: var(--esp-4) var(--esp-8); border-radius: var(--radio-pildora); background: var(--color-niebla-2); font-size: var(--t-etiqueta); font-weight: 600; }
.p-ficha dl { display: grid; gap: var(--esp-8); padding: var(--esp-12); border-radius: var(--radio-tarjeta); background: var(--color-blanco); }
.p-ficha dl div { display: flex; justify-content: space-between; gap: var(--esp-8); }
.p-ficha dt { color: var(--color-petroleo-60); }
.p-ficha dd { font-weight: 600; text-align: right; white-space: nowrap; }
.p-ia { color: var(--color-verde-acc); font-size: var(--t-etiqueta); }
.p-cita { display: flex; gap: var(--esp-12); padding: var(--esp-12); border-radius: var(--radio-tarjeta); background: var(--color-blanco); border-left: 0; }
.p-hora { font-size: var(--t-sub); font-weight: 600; line-height: 1; }
.p-hora small { display: block; font-size: var(--t-etiqueta); font-weight: 400; color: var(--color-petroleo-60); margin-top: var(--esp-4); }
.p-cita .etiqueta { color: var(--color-verde-acc); display: block; }
.p-cita-reunion .etiqueta { color: var(--color-ambar); }
.p-cita b, .p-cita small { display: block; }
.p-cita small { color: var(--color-petroleo-60); font-size: var(--t-etiqueta); }
@media (min-width: 1024px) {
  .como-t { grid-column: 1 / 6; grid-row: 1; align-self: start; }
  .pasos { grid-column: 1 / 6; grid-row: 2; gap: 0; }
  .paso { min-height: 30svh; align-content: center; }
  .paso .sub { font-size: var(--t-titulo); line-height: 1; letter-spacing: -0.03em; }
  .telefono-paso { display: none; }
  .como-fijo { display: block; grid-column: 7 / 13; grid-row: 1 / 3; }
  .como-pegado { position: sticky; top: calc(50svh - 330px + var(--nav-alto) / 2); display: grid; justify-items: center; gap: var(--esp-24); }
  .js .pantallas .p { opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), visibility 0s linear 400ms; }
  .js .pantallas .p.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .paso { opacity: 0.4; transition: opacity 300ms ease; }
  .js .paso.on { opacity: 1; }
}
.progreso { display: flex; gap: var(--esp-8); width: 300px; }
.progreso span { flex: 1; height: 4px; border-radius: var(--radio-pildora); background: rgba(207, 230, 224, 0.24); overflow: hidden; position: relative; }
.progreso span::after { content: ""; position: absolute; inset: 0; background: var(--color-verde); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease-out); }
.progreso span.on::after { transform: scaleX(1); }

/* ---------- 4. Beneficios (bento) ---------- */
.beneficios { background: var(--color-niebla); }
.beneficios .titulo { margin-bottom: var(--esp-32); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grilla-separacion); }
.bloque { grid-column: 1 / -1; display: grid; gap: var(--esp-16); align-content: start; padding: var(--esp-24); border-radius: var(--radio-panel); background: var(--color-blanco); }
.bloque p:not(.resultado) { max-width: 40ch; }
.resultado { color: var(--color-verde-acc); font-weight: 600; }
.bloque-agenda { background: var(--color-petroleo); color: var(--color-blanco); justify-items: center; }
.bloque-agenda .bloque-txt { display: grid; gap: var(--esp-16); justify-self: stretch; }
.bloque-agenda p:not(.resultado) { color: var(--color-sobre-oscuro); }
.bloque-agenda .resultado { color: var(--color-verde); }
.telefono-captura { width: min(248px, 72vw); aspect-ratio: auto; }
.telefono-captura img { border-radius: 38px; width: 100%; }
.mini-lista { display: grid; gap: var(--esp-8); }
.mini-lista li { display: flex; align-items: center; gap: var(--esp-12); padding: var(--esp-8) var(--esp-12); border-radius: var(--radio-tarjeta); background: var(--color-niebla); font-size: var(--t-nota); line-height: 1.4; }
.mini-lista b, .mini-lista small { display: block; }
.mini-lista small { color: var(--color-petroleo-60); font-size: var(--t-etiqueta); }
.monto { font-weight: 600; color: var(--color-verde-acc); }
.mini-lista li:first-child { background: var(--color-verde-10); }
.meta-fila { display: flex; align-items: center; gap: var(--esp-24); }
.anillo { width: 120px; height: 120px; flex: none; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 12; }
.anillo-fondo { stroke: var(--color-niebla-2); }
.anillo-avance { stroke: var(--color-verde-acc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 31; }
.js .anillo-avance { stroke-dashoffset: 100; transition: stroke-dashoffset 1200ms var(--ease-out); }
.js .anillo-avance.lleno { stroke-dashoffset: 31; }
.meta-num b { display: block; font-size: var(--t-titulo); line-height: 1; letter-spacing: -0.03em; }
.meta-num span { font-size: var(--t-nota); color: var(--color-petroleo-80); }
.reporte { padding: var(--esp-24); border-radius: var(--radio-tarjeta); background: var(--color-petroleo); color: var(--color-blanco); display: grid; gap: var(--esp-16); }
.reporte-nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-16); }
.reporte-nums div { display: flex; flex-direction: column-reverse; }
.reporte-nums dt { font-size: var(--t-etiqueta); color: var(--color-sobre-oscuro); }
.reporte-nums dd { font-size: var(--t-sub); font-weight: 600; line-height: 1.2; }
.reporte-mejor { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-4) var(--esp-12); padding-top: var(--esp-12); border-top: 1px solid rgba(207, 230, 224, 0.16); } /* taste-skill-ignore: fragmento de la app (reporte) */
.reporte-mejor .etiqueta { color: var(--color-sobre-oscuro); }
.reporte-mejor b { color: var(--color-verde); font-size: var(--t-sub); white-space: nowrap; }
.red-prop { display: grid; grid-template-columns: 1fr; gap: var(--esp-16); padding: var(--esp-12); border-radius: var(--radio-tarjeta); background: var(--color-niebla); align-items: center; }
.red-foto { aspect-ratio: 16 / 7; border-radius: var(--radio-tarjeta); background: var(--color-niebla-2); display: grid; place-items: center; }
.red-foto svg { width: 56px; fill: none; stroke: var(--color-petroleo-60); stroke-width: 2.5; stroke-linejoin: round; }
.red-datos { display: grid; gap: var(--esp-4); }
.red-datos .etiqueta { color: var(--color-petroleo-60); }
.red-datos b { font-size: var(--t-sub); line-height: 1.2; }
.red-datos small { font-size: var(--t-nota); color: var(--color-petroleo-80); }
.red-parte { justify-self: start; margin-top: var(--esp-4); padding: var(--esp-4) var(--esp-12); border-radius: var(--radio-pildora); background: var(--color-verde-10); color: var(--color-verde-acc); font-weight: 600; font-size: var(--t-nota); }
.bento-nota { margin-top: var(--esp-24); color: var(--color-petroleo-80); }
@media (min-width: 480px) { .red-prop { grid-template-columns: 112px 1fr; } .red-foto { aspect-ratio: 1; } }
@media (min-width: 768px) {
  .bloque { padding: var(--esp-32); }
  .bloque-agenda { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--esp-32); }
  .bloque-reporte, .bloque-red { grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--esp-32); }
}
@media (min-width: 1024px) {
  .bloque { padding: var(--esp-48); }
  .bloque-agenda { grid-column: 1 / 9; grid-row: 1 / 3; }
  .bloque-rescatar { grid-column: 9 / 13; grid-row: 1; padding: var(--esp-32); }
  .bloque-meta { grid-column: 9 / 13; grid-row: 2; padding: var(--esp-32); }
  .bloque-reporte { grid-column: 1 / 7; grid-row: 3; padding: var(--esp-32); grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--esp-24); }
  .bloque-red { grid-column: 7 / 13; grid-row: 3; padding: var(--esp-32); grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--esp-24); }
  .bloque-reporte .reporte-nums { grid-template-columns: 1fr 1fr; }
  .bloque-red .red-prop { grid-template-columns: 1fr; }
  .bloque-red .red-foto { aspect-ratio: 16 / 9; }
  .bloque-rescatar, .bloque-meta { gap: var(--esp-12); }
  .bloque-agenda { align-items: center; padding: var(--esp-48) var(--esp-64); }
}

/* ---------- 5. Confianza ---------- */
.confianza { background: var(--color-petroleo); color: var(--color-blanco); }
.confianza .grilla { row-gap: var(--esp-48); }
.conf-cab { display: grid; gap: var(--esp-16); align-content: start; }
.conf-sub { color: var(--color-verde); }
.listo { display: grid; gap: var(--esp-16); padding: var(--esp-32); border-radius: var(--radio-panel); background: var(--color-petroleo-2); }
.listo .etiqueta { color: var(--color-sobre-oscuro); }
.listo-msg { padding: var(--esp-16); border-radius: var(--radio-tarjeta); border-top-right-radius: 4px; background: var(--color-wa-saliente); color: var(--color-petroleo); }
.listo-acc { display: flex; flex-wrap: wrap; gap: var(--esp-12); }
.listo-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--esp-24); border-radius: var(--radio-pildora); background: var(--color-verde); color: var(--color-petroleo); font-weight: 600; font-size: var(--t-nota); }
.listo-sec { background: transparent; color: var(--color-blanco); box-shadow: inset 0 0 0 1px rgba(207, 230, 224, 0.4); } /* taste-skill-ignore: botón con contorno dentro del fragmento de la app */
.listo-pie { font-size: var(--t-nota); color: var(--color-sobre-oscuro); }
.promesas { display: grid; gap: var(--esp-32); }
.promesas li { display: grid; gap: var(--esp-12); align-content: start; }
.promesas .sub { color: var(--color-verde); }
.promesas p { color: var(--color-sobre-oscuro); max-width: 36ch; }
.conf-mas { color: var(--color-sobre-oscuro); font-size: var(--t-nota); }
.confianza a { color: var(--color-verde); }
@media (min-width: 1024px) {
  .conf-cab { grid-column: 1 / 6; }
  .listo { grid-column: 7 / 13; }
  .promesas { grid-template-columns: repeat(3, 1fr); gap: var(--grilla-separacion); margin-top: var(--esp-16); }
}

/* ---------- 6. Planes ---------- */
.planes { background: var(--color-niebla); }
.planes .titulo { margin-bottom: var(--esp-32); }
.planes-par { display: grid; gap: var(--grilla-separacion); }
.plan { position: relative; display: grid; gap: var(--esp-12); align-content: start; justify-items: start; padding: var(--esp-32); border-radius: var(--radio-panel); background: var(--color-blanco); }
.plan-dest { box-shadow: inset 0 0 0 2px var(--color-verde-acc); } /* taste-skill-ignore: borde verde del plan recomendado (pedido en el brief) */
.plan-marca { padding: var(--esp-4) var(--esp-12); border-radius: var(--radio-pildora); background: var(--color-verde-acc); color: var(--color-blanco); }
.plan-n { font-size: var(--t-titulo); line-height: 1; letter-spacing: -0.03em; }
.plan-p { font-weight: 600; color: var(--color-petroleo-80); }
.plan-dest .plan-p { color: var(--color-verde-acc); }
.plan ul { display: grid; gap: var(--esp-4); margin-block: 0 var(--esp-8); }
.plan li { display: flex; gap: var(--esp-12); }
.plan li::before { content: ""; width: 16px; height: 16px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--color-verde-10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230B7A56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.winay { margin-top: var(--grilla-separacion); padding: var(--esp-16) var(--esp-24); border-radius: var(--radio-tarjeta); background: var(--color-niebla-2); color: var(--color-petroleo-80); }
.winay b { color: var(--color-petroleo); }
.comparar { margin-top: var(--esp-24); }
.comparar summary { display: inline-flex; align-items: center; gap: var(--esp-8); min-height: 44px; cursor: pointer; font-weight: 600; color: var(--color-verde-acc); list-style: none; }
.comparar summary::-webkit-details-marker { display: none; }
.comparar summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--ease-out); }
.comparar[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.tabla-planes { margin-top: var(--esp-16); overflow-x: auto; border-radius: var(--radio-tarjeta); background: var(--color-blanco); }
.tabla-planes table { width: 100%; border-collapse: collapse; font-size: var(--t-nota); }
.tabla-planes th, .tabla-planes td { text-align: left; padding: var(--esp-12) var(--esp-16); }
.tabla-planes tbody tr:nth-child(odd) { background: var(--color-niebla); }
.tabla-planes tbody th { font-weight: 400; }
.planes-nota { margin-top: var(--esp-24); color: var(--color-petroleo-80); }
@media (min-width: 768px) { .planes-par { grid-template-columns: 1fr 1fr; } .plan { padding: var(--esp-32) var(--esp-48); } }

/* ---------- 7. Preguntas ---------- */
.preguntas { background: var(--color-niebla); padding-top: 0; }
.preguntas .titulo { margin-bottom: var(--esp-32); }
.faq { display: grid; gap: var(--esp-12); align-items: start; }
.faq details { border-radius: var(--radio-tarjeta); background: var(--color-blanco); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-16); min-height: 64px; padding: var(--esp-16) var(--esp-24); cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%230F2E3A' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--esp-24) var(--esp-24); color: var(--color-petroleo-80); max-width: 60ch; }
@media (min-width: 1024px) { .faq { grid-template-columns: 1fr 1fr; gap: var(--esp-12) var(--grilla-separacion); } }

/* ---------- 8. Cierre ---------- */
.cierre { position: relative; overflow: hidden; background: var(--color-petroleo); color: var(--color-blanco); }
.cierre-txt { position: relative; z-index: 1; display: grid; gap: var(--esp-24); justify-items: start; }
.cierre-txt p { color: var(--color-sobre-oscuro); max-width: 36ch; }
.cierre-iso { position: absolute; width: 360px; height: 360px; right: -120px; bottom: -140px; }
@media (min-width: 1024px) { .cierre-iso { width: 640px; height: 640px; right: -180px; top: 50%; bottom: auto; transform: translateY(-50%); } }

/* ---------- 9. Pie ---------- */
.pie { background: var(--color-petroleo-oscuro); color: var(--color-sobre-oscuro); padding-block: var(--esp-64) var(--esp-48); font-size: var(--t-nota); }
.pie a { color: var(--color-blanco); }
.pie-cols { display: grid; gap: var(--esp-32); }
.pie-que { color: var(--color-blanco); font-weight: 600; font-size: var(--t-cuerpo); max-width: 26ch; }
.pie-legal { display: grid; gap: var(--esp-4); }
.pie-legal a { color: var(--color-verde); }
.pie-links { display: grid; align-content: start; }
.pie-links a, .pie-app a { display: inline-flex; align-items: flex-start; min-height: 44px; font-weight: 600; text-decoration: none; }
.pie-links a:hover, .pie-app a:hover { text-decoration: underline; }
.pie-links a[aria-current="page"] { color: var(--color-verde); }
.pie-meta { margin-top: var(--esp-48); max-width: 70ch; }
.pie-marca { width: 100%; max-width: 480px; height: auto; margin-top: var(--esp-48); }
@media (min-width: 768px) { .pie-cols { grid-template-columns: repeat(4, 1fr); gap: var(--grilla-separacion); } .pie { padding-top: var(--esp-64); } }

/* ---------- Movimiento (emil-design-eng): solo transform y opacidad ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .display .linea > span { transform: translateY(105%); animation: subir 700ms var(--ease-out) forwards; }
  .js .display .linea:nth-child(2) > span { animation-delay: 80ms; }
  .js .hero-verde, .js .hero-beneficio, .js .hero-acc, .js .hero-nota { opacity: 0; transform: translateY(12px); animation: aparecer 500ms var(--ease-out) forwards; animation-delay: 360ms; }
  .js .hero-beneficio { animation-delay: 420ms; }
  .js .hero-acc { animation-delay: 480ms; }
  .js .hero-nota { animation-delay: 540ms; }
  .js .hero-tel .telefono { opacity: 0; transform: translateY(24px); animation: aparecer 600ms var(--ease-out) 200ms forwards; }
  .js .entra { opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .js .entra.visto { opacity: 1; transform: none; }
  .mini-lista li { transition: transform 500ms var(--ease-in-out), background-color 300ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .js .entra { opacity: 0; transition: opacity 200ms ease; }
  .js .entra.visto { opacity: 1; }
  .js .chat .msg, .js .chat .noti, .js .pantallas .p { transition: opacity 200ms ease; transform: none !important; }
  .btn:active, .noti-btn:active { transform: none; }
}
@keyframes subir { to { transform: none; } }
@keyframes aparecer { to { opacity: 1; transform: none; } }

/* ---------- Páginas legales (privacidad, términos, eliminar mis datos) ---------- */
.legal-p .nav { position: sticky; background: var(--color-petroleo); }
.legal { max-width: calc(760px + 2 * var(--margen)); margin: 0 auto; padding: var(--esp-64) var(--margen) var(--seccion); }
.legal h1 { font-size: var(--t-titulo); line-height: 1; letter-spacing: -0.03em; }
.legal-ver { margin-top: var(--esp-16); color: var(--color-petroleo-80); font-size: var(--t-nota); }
.legal-indice { display: flex; flex-wrap: wrap; gap: 0 var(--esp-24); margin: var(--esp-32) 0 var(--esp-8); }
.legal-indice a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.legal section { padding: 0; margin-top: var(--esp-48); scroll-margin-top: 88px; }
.legal h2 { font-size: var(--t-sub); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--esp-12); }
.legal h3 { font-size: var(--t-cuerpo); margin: var(--esp-24) 0 var(--esp-8); }
.legal p + p { margin-top: var(--esp-12); }
.legal ul, .legal ol { margin: var(--esp-12) 0 0; padding-left: var(--esp-24); display: grid; gap: var(--esp-8); list-style: revert; }
.legal ol + p, .legal ul + p { margin-top: var(--esp-16); }
.legal .ph { background: #FDF3E2; color: var(--color-petroleo); padding: 0 var(--esp-4); border-radius: 4px; }
.legal-p .nav-ingresar { display: inline-flex; }
html:not(.js) .pantallas .p + .p { display: none; }
.comparar:not([open]) .tabla-planes { display: none; }
@media (max-width: 479px) { .legal-p .nav .btn-chico { display: none; } }

/* ---------- Sitio de 5 páginas (sitio/ + scripts/armar-sitio.mjs) ---------- */
/* Páginas internas: la barra es sólida desde arriba y la primera sección deja su espacio */
.subpagina main > section:first-child { padding-top: calc(var(--nav-alto) + var(--seccion)); }
.nav-enlaces a[aria-current="page"] { opacity: 1; color: var(--color-verde); }
@media (min-width: 1024px) { .nav-enlaces a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } }
/* Cabeza de página (Cómo funciona) */
.pagina-cab { background: var(--color-petroleo); color: var(--color-blanco); padding-bottom: var(--esp-48); }
.pagina-cab .titulo { font-size: var(--t-display); line-height: 0.95; letter-spacing: -0.04em; }
.pagina-lin { margin-top: var(--esp-16); color: var(--color-verde); max-width: 30ch; }
/* El problema, versión corta: las tres escenas en fila, sin escalera */
.problema-corto .escena:nth-child(n) { margin-top: 0; }
.problema-corto .problema-t { margin-bottom: 0; }
/* Portada: accesos a las otras páginas, pegados al hero */
.accesos { background: var(--color-petroleo); padding-top: 0; }
.accesos-lista { display: grid; gap: var(--esp-12); }
.accesos-lista a { display: grid; grid-template-columns: 1fr auto; gap: var(--esp-4) var(--esp-16); align-items: center; min-height: 44px; padding: var(--esp-16) var(--esp-24); border-radius: var(--radio-tarjeta); background: var(--color-petroleo-2); color: var(--color-blanco); text-decoration: none; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.accesos-lista b { font-size: var(--t-cuerpo); }
.accesos-lista span { grid-column: 1; font-size: var(--t-nota); color: var(--color-sobre-oscuro); }
.accesos-lista i { grid-column: 2; grid-row: 1 / 3; font-style: normal; font-size: var(--t-sub); color: var(--color-verde); transition: transform 200ms var(--ease-out); }
.accesos-lista a:active { transform: scale(0.98); }
@media (hover: hover) { .accesos-lista a:hover { background: #1D4A5B; } .accesos-lista a:hover i { transform: translateX(4px); } }
@media (min-width: 768px) { .accesos-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .accesos-lista { grid-template-columns: repeat(4, 1fr); gap: var(--grilla-separacion); } }
/* Cierre: un paso de tono para separarse de la sección Petróleo de arriba; enlace a la página siguiente */
.cierre { background: var(--color-petroleo-2); }
.cierre .siguiente { margin-top: var(--esp-8); color: var(--color-blanco); }
.cierre .siguiente:hover span { transform: translateX(4px); }
/* Cierre compacto (va al final de cada página): título, texto y las dos acciones en una fila */
.cierre { padding-block: var(--esp-64); }
.cierre-txt { gap: var(--esp-16); }
.cierre .siguiente { margin-top: 0; }
.cierre-acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-16) var(--esp-32); margin-top: var(--esp-8); }
@media (min-width: 1024px) { .cierre-iso { width: 440px; height: 440px; right: -120px; } }
.accesos { padding-bottom: var(--esp-48); }
.pie-marca { max-width: 360px; margin-top: var(--esp-32); }
/* Pie en el celular: datos legales y enlaces en dos columnas */
@media (max-width: 767px) { .pie-cols { grid-template-columns: 1fr 1fr; gap: var(--esp-24) var(--esp-16); } .pie-que, .pie-legal { grid-column: 1 / -1; } .pie { padding-block: var(--esp-48) var(--esp-32); } }
/* Páginas internas: el título de la página manda en la primera pantalla */
.subpagina h1.titulo { font-size: var(--t-display); line-height: 0.95; letter-spacing: -0.04em; }
/* Planes: lo que incluye cada plan entra punto por punto; la nota de los 2 meses en el cuerpo de texto */
.planes-nota { font-size: var(--t-cuerpo); color: var(--color-petroleo); }
.winay { color: var(--color-petroleo); }
@media (prefers-reduced-motion: no-preference) {
  .js .plan.entra li { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
  .js .plan.entra.visto li { opacity: 1; transform: none; }
  .js .plan.entra.visto li:nth-child(2) { transition-delay: 60ms; }
  .js .plan.entra.visto li:nth-child(3) { transition-delay: 120ms; }
  .js .plan.entra.visto li:nth-child(4) { transition-delay: 180ms; }
  .js .plan.entra.visto li:nth-child(5) { transition-delay: 240ms; }
}