@font-face { font-family: "Inter"; src: url("fuentes/inter.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fuentes/newsreader.woff2") format("woff2"); font-weight: 300 500; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fuentes/newsreader-cursiva.woff2") format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; }
:root {
  color-scheme: dark;
  --noche: #0b1814; --noche-2: #12241e; --noche-3: #1a3129; --linea-noche: rgb(255 255 255 / .1);
  --claro: #f1efe8; --niebla: #a9b8b0; --luz: #f3c677; --luz-hover: #f8d898;
  --lienzo: #f7f5f0; --superficie: #fff; --superficie-2: #eeebe3; --tinta: #14231d; --suave: #55625b;
  --linea: #e0dcd2; --verde: #0e6655; --verde-palido: #dfeee7; --burbuja: #d9fdd3; --chat: #efeae2; --rojo: #a4453a;
  --sombra: 0 1px 2px rgb(11 24 20 / .05), 0 18px 48px -16px rgb(11 24 20 / .18);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--noche); color: var(--tinta); font: 400 16px/1.55 "Inter", system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
a, button, summary { touch-action: manipulation; }
svg { width: 16px; height: 16px; }
del { text-decoration-thickness: 1px; }
.sprite { position: absolute; width: 0; height: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; border-radius: 6px; }
.dia a:focus-visible, .dia summary:focus-visible, .dia button:focus-visible { outline-color: var(--verde); }
.contenedor { width: min(1200px, 100%); margin: 0 auto; padding: 0 24px; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 30; padding: 10px 14px; background: #fff; color: var(--tinta); }
.saltar:focus { left: 8px; }

.promo { display: flex; align-items: center; justify-content: center; gap: 2px 8px; flex-wrap: wrap; min-height: 40px; padding: 8px 16px; background: var(--luz); color: var(--noche); font-size: 14px; line-height: 1.3; text-align: center; text-decoration: none; }
.promo strong { font-weight: 600; white-space: nowrap; }
.promo svg { flex: none; transition: transform .2s; }
.promo:hover svg { transform: translateX(3px); }

.cabecera { position: sticky; top: 0; z-index: 20; background: rgb(11 24 20 / .78); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--linea-noche); color: var(--claro); }
.cabecera-fila { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { display: block; width: auto; height: 44px; }
.cabecera nav { display: flex; gap: 4px; margin: 0 auto; }
.cabecera nav a { padding: 8px 15px; border-radius: 999px; color: var(--niebla); font-size: 14.5px; text-decoration: none; transition: color .2s, background .2s; }
.cabecera-simple { justify-content: space-between; }
.cabecera nav a:hover { color: var(--claro); background: var(--linea-noche); }

.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-size: 15.5px; font-weight: 500; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; }
.boton:hover { transform: translateY(-1px); }
.boton-luz { background: var(--luz); color: var(--noche); }
.boton-luz:hover { background: var(--luz-hover); box-shadow: 0 8px 28px -8px rgb(243 198 119 / .55); }
.boton-vidrio { border-color: rgb(255 255 255 / .22); background: rgb(255 255 255 / .08); color: var(--claro); }
.boton-vidrio:hover { background: rgb(255 255 255 / .15); }
.boton-chico { min-height: 44px; padding: 0 18px; font-size: 14.5px; white-space: nowrap; }
.boton-ancho { width: 100%; }
.boton-grande { min-height: 56px; padding: 0 32px; font-size: 17px; }

.antetitulo { margin-bottom: 18px; color: var(--verde); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.hero .antetitulo, .noche .antetitulo { color: var(--luz); }
h1, h2 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 300; }
h1 { font-size: clamp(46px, 6.1vw, 82px); line-height: 1.02; letter-spacing: -.022em; }
h2 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -.018em; }

.hero { position: relative; overflow: hidden; color: var(--claro); background: linear-gradient(180deg, #0b1814 0%, #0e211b 62%, #143028 100%); }
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 62vw; min-width: 520px; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { top: -38%; right: -12%; background: radial-gradient(closest-side, rgb(33 224 214 / .3), transparent); animation: deriva-a 19s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { top: 6%; left: 22%; background: radial-gradient(closest-side, rgb(138 77 255 / .24), transparent); animation: deriva-b 25s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { bottom: -46%; left: -14%; background: radial-gradient(closest-side, rgb(255 79 184 / .17), transparent); animation: deriva-c 31s ease-in-out infinite alternate; }
@keyframes deriva-a { to { transform: translate(-30%, 26%) scale(1.25); } }
@keyframes deriva-b { to { transform: translate(34%, -22%) scale(.85); } }
@keyframes deriva-c { to { transform: translate(40%, -30%) scale(1.3); } }
.noche > .contenedor { position: relative; }
.estrellas { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 66%); mask-image: linear-gradient(90deg, transparent 50%, #000 66%); }
.contacto .estrellas { -webkit-mask-image: linear-gradient(180deg, #000, transparent 30%); mask-image: linear-gradient(180deg, #000, transparent 30%); }
.estrellas svg { display: block; width: 100%; height: 100%; }
.estrellas circle { fill: #fff; opacity: .55; }
.estrellas circle.titila { animation: titila 5s ease-in-out infinite; }
.estrellas circle.titila.lenta { animation-duration: 8s; animation-delay: 1.5s; }
@keyframes titila { 50% { opacity: .1; } }
.trafico { position: absolute; left: 0; right: 0; bottom: 3px; height: 3px; overflow: hidden; pointer-events: none; }
.trafico i { position: absolute; left: -90px; width: 70px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--luz)); opacity: .7; animation: pasa 30s linear infinite; }
.trafico i:nth-child(2) { animation-delay: -14s; animation-duration: 38s; background: linear-gradient(90deg, transparent, #ff6f7d); }
.trafico i:nth-child(n+3) { display: none; }
@keyframes pasa { to { transform: translateX(calc(100vw + 180px)); } }
/* Verde de la interfaz a ámbar del botón principal, quieto. El RGB queda solo en el logo. */
h1 em { padding-right: .06em; background: linear-gradient(100deg, #5ad8b8 0%, #9fd9a0 45%, var(--luz) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.horizonte { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none; }
.horizonte svg { display: block; width: 100%; height: 100%; }
.horizonte .lejano { fill: #17332a; }
.horizonte .cercano { fill: #0b1814; }
.horizonte .ventana-luz { fill: var(--luz); }
.horizonte .tenue { opacity: .35; }
.horizonte .parpadea { animation: parpadeo 12s ease-in-out infinite; }
.horizonte .parpadea.lento { animation-duration: 18s; animation-delay: 4s; }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.hero-rejilla { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 150px; }
.entrada { max-width: 31em; margin-top: 24px; color: var(--niebla); font-size: 19px; line-height: 1.5; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-escena { position: relative; justify-self: center; width: 330px; }
.movil { overflow: hidden; border: 7px solid #22352e; border-radius: 40px; background: var(--chat); color: var(--tinta); box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 50px 100px -30px rgb(0 0 0 / .75); }
.movil-barra { display: flex; align-items: center; gap: 10px; padding: 26px 16px 12px; background: var(--verde); color: #fff; font-size: 14px; line-height: 1.25; }
.movil-barra b { display: block; font-weight: 600; }
.movil-barra small { font-size: 12px; opacity: .85; }
.movil-chat { display: flex; flex-direction: column; gap: 8px; height: 410px; padding: 14px 12px; font-size: 14px; line-height: 1.38; }
.avatar { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--verde-palido); color: var(--verde); font-size: 12px; font-weight: 600; }
.fecha { align-self: center; padding: 3px 10px; border-radius: 8px; background: var(--superficie); color: var(--suave); font-size: 12px; }
.burbuja { align-self: flex-start; max-width: 85%; padding: 7px 11px; border-radius: 10px; background: var(--superficie); box-shadow: 0 1px 1px rgb(0 0 0 / .06); overflow-wrap: anywhere; }
.burbuja.mia { align-self: flex-end; background: var(--burbuja); }
.burbuja.escribiendo { color: var(--suave); font-style: italic; }
.flotante { position: absolute; display: flex; align-items: center; gap: 11px; padding: 11px 16px 11px 13px; border: 1px solid rgb(255 255 255 / .13); border-radius: 14px; background: rgb(18 36 30 / .9); backdrop-filter: blur(10px); box-shadow: 0 20px 44px -14px rgb(0 0 0 / .7); font-size: 14px; line-height: 1.3; white-space: nowrap; }
.flotante small { display: block; color: var(--niebla); font-size: 12px; }
.flotante b { font-weight: 500; }
.flotante-a { bottom: 52px; left: -104px; }
.flotante-b { bottom: 122px; right: -92px; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 10px var(--luz); }
.ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--luz); color: var(--noche); }
.escena-nota { margin-top: 14px; color: var(--niebla); font-size: 12.5px; text-align: center; }

@keyframes aparece { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.js [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-rv].visto { opacity: 1; transform: none; }

.dia { background: var(--lienzo); color: var(--tinta); }
.seccion { padding: 112px 0 0; }
.preguntas-seccion { padding-bottom: 112px; }
.cabeza { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.cabeza > p:not(.antetitulo) { max-width: 36em; margin: 20px auto 0; color: var(--suave); font-size: 18px; }
.noche .cabeza > p:not(.antetitulo) { color: var(--niebla); }
.video-servicios { margin-top: 104px; margin-bottom: 32px; }
.video-servicios-titulo { font: 400 clamp(28px, 3.2vw, 42px)/1.12 var(--serif); letter-spacing: -.014em; text-wrap: balance; }
.video-servicios-titulo em { font-style: italic; font-weight: 300; }
.nota-centro { margin-top: 18px; color: var(--suave); font-size: 13.5px; text-align: center; }

.comparacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.carril { display: flex; flex-direction: column; padding: 32px; border-radius: 18px; background: var(--superficie-2); }
.carril h3 { margin-bottom: 26px; font-size: 15px; font-weight: 500; color: var(--suave); }
.carril ol { flex: 1; }
.carril li { position: relative; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; padding: 0 0 22px 20px; }
.carril li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #b5b0a3; }
.carril li::after { content: ""; position: absolute; left: 4px; top: 20px; bottom: -3px; width: 1px; background: #cbc6b9; }
.carril li:last-child::after { display: none; }
.carril time { color: var(--suave); font-size: 14px; font-variant-numeric: tabular-nums; }
.carril-fin { display: flex; align-items: center; gap: 9px; padding-top: 18px; border-top: 1px solid #d9d4c7; color: var(--rojo); font-weight: 500; }
.carril-oxa { background: var(--noche); color: var(--claro); box-shadow: var(--sombra); }
.carril-oxa h3 { color: var(--luz); }
.carril-oxa time { color: var(--niebla); }
.carril-oxa li::before { background: var(--luz); box-shadow: 0 0 10px rgb(243 198 119 / .7); }
.carril-oxa li::after { background: var(--noche-3); }
.carril-oxa .carril-fin { border-color: var(--linea-noche); color: var(--luz); }

.ventana { overflow: hidden; border: 1px solid var(--linea); border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra); }
.ventana-barra { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--linea); background: #fbfaf7; color: var(--suave); font-size: 13.5px; }
.luces { display: flex; gap: 6px; }
.luces i { width: 11px; height: 11px; border-radius: 50%; background: var(--linea); }
.etiqueta-ejemplo { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--superficie-2); font-size: 12.5px; font-weight: 500; }
.ventana-cuerpo { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); height: 640px; }
.lista { padding: 14px 10px; border-right: 1px solid var(--linea); background: #fbfaf7; }
.lista-titulo { padding: 4px 10px 12px; color: var(--suave); font-size: 12.5px; font-weight: 500; }
.lista-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; font-size: 14px; line-height: 1.3; }
.lista-item b { display: block; font-weight: 500; }
.lista-item small { color: var(--suave); font-size: 12.5px; }
.lista-item.activa { background: var(--verde-palido); }
.conversacion { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat); }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 18px; font-size: 15px; line-height: 1.4; }
.chat .burbuja { animation: aparece .3s ease both; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; min-height: 66px; padding: 11px 12px; border-top: 1px solid var(--linea); background: var(--superficie); }
.opciones button { min-height: 44px; padding: 6px 14px; border: 1px solid #b9d6ca; border-radius: 22px; background: var(--superficie); color: var(--verde); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.25; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.opciones button:hover { border-color: var(--verde); background: var(--verde-palido); }
.opciones button.secundaria { border-color: var(--linea); color: var(--suave); }
.ficha { display: flex; flex-direction: column; min-width: 0; padding: 22px; border-left: 1px solid var(--linea); }
.ficha-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.ficha h3 { font-size: 16px; font-weight: 600; }
.estado { padding: 3px 10px; border-radius: 999px; background: var(--superficie-2); font-size: 12.5px; font-weight: 500; }
.estado.listo { background: var(--verde-palido); color: var(--verde); }
.estado.persona { background: var(--noche); color: var(--claro); }
.progreso { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-bottom: 10px; color: var(--suave); font-size: 13px; font-variant-numeric: tabular-nums; }
.barra { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 3px; background: var(--superficie-2); }
.barra i { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ficha dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--superficie-2); font-size: 14px; }
.ficha dt { flex: none; color: var(--suave); }
.ficha dd { min-width: 0; color: #9a9f97; text-align: right; overflow-wrap: anywhere; }
.ficha dd.lleno { color: var(--tinta); font-weight: 500; }
.ficha-nota { margin-top: auto; padding-top: 14px; color: var(--suave); font-size: 13px; line-height: 1.45; }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.caja { grid-column: span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 300px; padding: 32px; border-radius: 18px; background: var(--superficie-2); }
.caja-ancha { grid-column: span 7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.caja h3 { margin-bottom: 9px; font-family: var(--serif); font-size: 27px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.caja p { color: var(--suave); }
.caja-noche { background: var(--noche); color: var(--claro); }
.caja-noche > div > p { color: var(--niebla); }
.mini-aprobado { padding: 6px 16px; border-radius: 14px; background: var(--superficie); box-shadow: 0 1px 2px rgb(11 24 20 / .05); font-size: 13.5px; }
.mini-aprobado li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--superficie-2); }
.mini-aprobado li:last-child { border: 0; }
.mini-aprobado i { display: inline-flex; align-items: center; gap: 4px; color: var(--verde); font-size: 12.5px; font-style: normal; font-weight: 500; }
.mini-aprobado svg { width: 13px; height: 13px; }
.mini-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-chips span { padding: 8px 14px; border-radius: 999px; background: var(--superficie); box-shadow: 0 1px 2px rgb(11 24 20 / .05); font-size: 14px; }
.mini-agenda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 13.5px; text-align: center; }
.mini-agenda span { padding-bottom: 2px; color: var(--suave); font-size: 12.5px; }
.mini-agenda b { padding: 9px 0; border-radius: 9px; background: var(--superficie); font-weight: 500; font-variant-numeric: tabular-nums; }
.mini-agenda .elegida { background: var(--verde); color: #fff; }
.mini-agenda .ocupada { background: transparent; color: #b0ac9f; }
.mini-nota { padding: 18px; border: 1px solid var(--linea-noche); border-radius: 14px; background: var(--noche-2); }
.mini-nota small { display: block; margin-bottom: 8px; color: var(--luz); font-size: 12.5px; }
.mini-nota p { color: var(--claro); font-size: 14.5px; line-height: 1.5; }

.noche { position: relative; overflow: hidden; background: var(--noche); color: var(--claro); }
.cifras-banda { margin-top: 112px; padding: 104px 0; background: linear-gradient(180deg, #0b1814, #10241d); }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cifras article { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--linea-noche); border-top-color: rgb(255 255 255 / .2); border-radius: 16px; background: var(--noche-2); }
.cifra { font-family: var(--serif); font-size: clamp(44px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -.02em; color: var(--claro); }
.cifras p:not(.cifra) { color: var(--niebla); }
.cifras a { margin-top: auto; padding-top: 8px; color: var(--luz); font-size: 13.5px; }
.nota-velocidad { max-width: 46em; margin: 32px auto 0; color: var(--niebla); font-size: 14.5px; text-align: center; }

.limites { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.limites-texto { position: sticky; top: 120px; }
.limites-texto p:last-child { margin-top: 20px; color: var(--suave); font-size: 18px; }
.limites-lista li { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.limites-lista li:first-child { padding-top: 6px; }
.marca-no { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--superficie-2); color: var(--rojo); }
.limites-lista strong { font-size: 17px; font-weight: 500; }
.limites-lista p { color: var(--suave); }

.piloto { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.piloto-intro { margin-top: 20px; color: var(--suave); font-size: 18px; }
.pasos-piloto { margin-top: 30px; counter-reset: p; }
.pasos-piloto li { position: relative; padding: 15px 0 15px 42px; border-top: 1px solid var(--linea); counter-increment: p; }
.pasos-piloto li::before { content: counter(p); position: absolute; left: 0; top: 16px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--verde-palido); color: var(--verde); font-size: 13px; font-weight: 600; }
.pasos-piloto strong { display: block; font-weight: 500; }
.pasos-piloto span { color: var(--suave); font-size: 15px; }
.precio { padding: 36px; border-radius: 22px; background: var(--noche); color: var(--claro); box-shadow: 0 0 0 1px rgb(243 198 119 / .3), 0 40px 80px -28px rgb(11 24 20 / .6); }
.precio-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.precio h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.15; }
.sello { padding: 4px 12px; border-radius: 999px; background: var(--luz); color: var(--noche); font-size: 12.5px; font-weight: 600; }
.precio-incluye { display: grid; gap: 14px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--linea-noche); list-style: none; }
.precio-incluye li { display: flex; gap: 12px; color: var(--niebla); font-size: 15px; line-height: 1.45; }
.precio-incluye svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--luz); }
.precio-incluye b { display: block; color: var(--claro); font-weight: 600; }
.precio-nota { margin: 18px 0 22px; color: var(--niebla); font-size: 14px; }

.preguntas-rejilla { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
.preguntas { border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 500; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; color: var(--suave); font-size: 22px; font-weight: 300; line-height: 1; transition: transform .2s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas p { padding-bottom: 20px; color: var(--suave); }

.contacto { padding: 128px 0 280px; text-align: center; background: linear-gradient(180deg, #0b1814, #143028); }
.contacto .horizonte { height: 220px; }
.contacto-texto { position: relative; max-width: 860px; }
.contacto-texto > p:not(.contacto-correo) { max-width: 34em; margin: 22px auto 32px; color: var(--niebla); font-size: 18px; }
.contacto-correo { margin-top: 16px; color: var(--niebla); font-size: 15px; overflow-wrap: anywhere; }

.pie { padding: 30px 0; border-top: 1px solid var(--linea-noche); background: var(--noche); color: var(--niebla); font-size: 14px; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie nav a:hover { color: var(--claro); }

.legal-pagina { background: var(--lienzo); }
.legal { max-width: 720px; padding-top: 72px; padding-bottom: 150px; }
.legal h1 { font-size: clamp(44px, 6vw, 60px); margin-bottom: 8px; }
.legal h2 { margin: 36px 0 8px; font-size: 28px; }
.legal p { color: var(--suave); }
.legal a:not(.boton) { color: var(--verde); }
.legal .boton { margin-top: 8px; background: var(--noche); color: var(--claro); }

@media (max-width: 1100px) {
  .ventana-cuerpo { grid-template-columns: minmax(0, 1fr) 300px; }
  .lista { display: none; }
  .flotante-a { left: -70px; }
  .flotante-b { right: -50px; }
  .caja, .caja-ancha { grid-column: span 6; }
  .caja-ancha { display: flex; }
}
@media (max-width: 900px) {
  .cabecera nav { display: none; }
  .cabecera .boton { margin-left: auto; }
  .hero-rejilla { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 56px; }
  .ventana-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .conversacion { height: 520px; }
  .ficha { border-left: 0; border-top: 1px solid var(--linea); }
  .ficha-nota { margin-top: 12px; }
  .comparacion, .cifras, .limites, .piloto, .preguntas-rejilla { grid-template-columns: minmax(0, 1fr); }
  .limites, .piloto, .preguntas-rejilla { gap: 36px; }
  .limites-texto { position: static; }
  .seccion { padding-top: 80px; }
  .preguntas-seccion { padding-bottom: 80px; }
  .cifras-banda { margin-top: 80px; padding: 72px 0; }
  .contacto { padding: 88px 0 230px; }
  .contacto .horizonte, .horizonte { height: 150px; }
  .hero-rejilla { padding-bottom: 120px; }
}
@media (max-width: 640px) {
  .estrellas { display: none; }
  .contenedor { padding-left: 20px; padding-right: 20px; }
  .caja, .caja-ancha { grid-column: 1 / -1; min-height: 0; padding: 24px; }
  .carril { padding: 24px; }
  .carril li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cabeza { margin-bottom: 40px; }
  .entrada, .cabeza > p:not(.antetitulo) { font-size: 17px; }
  .acciones .boton { flex: 1 1 100%; }
  .hero-escena { width: min(320px, 100%); }
  .movil-chat { height: 400px; }
  .flotante { position: static; margin-top: 10px; backdrop-filter: none; }
  .flotante-a { order: 1; }
  .hero-escena { display: flex; flex-direction: column; }
  .escena-nota { order: 2; }
  .precio { padding: 26px 22px; }
  .boton-grande { width: 100%; }
}
/* Toda la página de noche: las secciones son transparentes sobre la aurora fija. */
:root { --chat: #0a1411; --burbuja: #0b5c4c; }
.aurora-fija { position: fixed; z-index: -1; }
.aurora-fija i { width: 72vw; min-width: 620px; }
.aurora-fija i:nth-child(1) { top: -24%; right: -14%; background: radial-gradient(closest-side, rgb(25 227 208 / .26), transparent); }
.aurora-fija i:nth-child(2) { top: 18%; left: 20%; background: radial-gradient(closest-side, rgb(143 77 255 / .24), transparent); }
.aurora-fija i:nth-child(3) { bottom: -36%; left: -16%; background: radial-gradient(closest-side, rgb(255 63 174 / .2), transparent); }
.aurora-fija::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgb(255 255 255 / .05) 1px, transparent 1px) 0 0 / 34px 34px; }
.hero, .cifras-banda, .contacto, .noche { background: transparent; }
.hero + section { background: linear-gradient(180deg, var(--noche), transparent 260px); }
.dia, .legal-pagina {
  --lienzo: transparent; --superficie: #17302a; --superficie-2: rgb(255 255 255 / .06); --tinta: #f1efe8; --suave: #a9b8b0;
  --linea: rgb(255 255 255 / .11); --verde: #5ad8b8; --verde-palido: rgb(90 216 184 / .14); --rojo: #ff8f80;
  --sombra: 0 30px 70px -28px rgb(0 0 0 / .7);
  color: var(--tinta);
}
/* El cuerpo transparente deja ver la aurora; el fondo de noche lo pone html, si no el lienzo queda blanco. */
html { background: var(--noche); }
.legal-pagina { background: transparent; }
.legal .boton { background: var(--luz); color: var(--noche); }
.burbuja { background: #1d2e29; color: #e9edef; box-shadow: none; }
.burbuja.mia { background: var(--burbuja); color: #f2fbf8; }
.fecha { background: #1d2e29; color: #a9b8b0; }
.movil-barra { background: #12302a; }
.carril { border: 1px solid var(--linea); background: rgb(255 255 255 / .04); }
.carril li::before { background: #6d7f77; }
.carril li::after { background: var(--linea); }
.carril-fin { border-top-color: var(--linea); }
.carril-oxa { border-color: rgb(243 198 119 / .32); background: rgb(11 24 20 / .72); }
.ventana { background: #0f1f1a; border-color: var(--linea); }
.ventana-barra, .lista { background: #12251f; }
.opciones { background: #12251f; }
.opciones button { border-color: rgb(90 216 184 / .4); background: transparent; }
.opciones button.sugerido { border-color: var(--luz); background: rgb(243 198 119 / .14); color: var(--luz); box-shadow: 0 0 0 4px rgb(243 198 119 / .12); }
.ficha dd { color: #82918a; }
.ficha dd.nuevo { animation: dato 1.3s ease; }
@keyframes dato { 0% { background: rgb(243 198 119 / .35); } 100% { background: transparent; } }
.estado.persona { background: var(--luz); color: var(--noche); }
.caja { border: 1px solid var(--linea); background: rgb(255 255 255 / .04); }
.caja-noche { background: rgb(255 255 255 / .04); color: var(--tinta); }
.caja-noche > div > p { color: var(--suave); }
.mini-aprobado { background: rgb(0 0 0 / .22); box-shadow: none; }
.mini-aprobado li { border-color: var(--linea); }
.mini-chips span { background: var(--superficie); box-shadow: none; }
.mini-agenda .elegida { color: var(--noche); }
.mini-agenda .ocupada { color: #5f6f67; }
.mini-nota { background: rgb(0 0 0 / .22); }
.limites-lista .marca-no { background: rgb(255 143 128 / .12); }
.pasos-piloto li { border-color: var(--linea); }
.precio { background: rgb(11 24 20 / .78); }
.pie { background: rgb(7 16 13 / .88); }
.cabecera { background: rgb(11 24 20 / .72); }
.cifras article { background: rgb(255 255 255 / .04); }

.movil-chat { height: 392px; overflow-y: auto; scrollbar-width: none; }
.movil-chat::-webkit-scrollbar { display: none; }
.movil-chat .burbuja { animation: aparece .3s cubic-bezier(.2, .7, .2, 1) both; }
.movil-entrada { display: flex; align-items: center; min-height: 46px; margin: 0 8px 10px; padding: 7px 14px; border-radius: 22px; background: #1d2e29; color: #e9edef; font-size: 13.5px; line-height: 1.3; }
.cursor { width: 1.5px; height: 15px; margin-left: 1px; background: var(--luz); opacity: 0; }
.tecleando .cursor { opacity: 1; animation: titila 1s steps(2) infinite; }
.puntos { display: inline-flex; gap: 4px; padding: 11px 13px; }
.puntos i { width: 7px; height: 7px; border-radius: 50%; background: #a9b8b0; animation: rebote 1.1s ease-in-out infinite; }
.puntos i:nth-child(2) { animation-delay: .15s; }
.puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .45; transform: none; } }
.anima .flotante { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .2, 1); }
.anima .flotante.visible { opacity: 1; transform: none; }

.video-marco { overflow: hidden; max-width: 1000px; margin: 0 auto; border: 1px solid var(--linea); border-radius: 18px; background: #000; box-shadow: var(--sombra); }
.video-marco video { display: block; width: 100%; aspect-ratio: 16 / 9; }

.reloj-pasos { display: none; }
.guiada-activa .reloj-pasos, .anima .reloj-pasos { display: flex; justify-content: center; margin: -28px 0 18px; }
.reloj-pasos span { padding: 6px 16px; border-radius: 999px; border: 1px solid rgb(243 198 119 / .35); background: rgb(243 198 119 / .1); color: var(--luz); font-size: 14px; font-weight: 500; }
.reloj-pasos span:empty { visibility: hidden; }
.anima .comparacion li { opacity: .55; transition: opacity .5s; }
.anima .comparacion li.activo { opacity: 1; }
.anima .comparacion li.activo::before { background: var(--luz); box-shadow: 0 0 0 5px rgb(243 198 119 / .18); }
.anima .comparacion .carril-fin { opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.anima .comparacion.fin .carril-fin { opacity: 1; transform: none; }

.guia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; padding: 12px 14px 12px 20px; border: 1px solid rgb(243 198 119 / .3); border-radius: 14px; background: rgb(243 198 119 / .08); }
.guia p { color: var(--tinta); font-weight: 500; }
.guia button { min-height: 44px; padding: 0 18px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; background: rgb(255 255 255 / .08); color: var(--tinta); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.guia button:hover { background: rgb(255 255 255 / .15); }

.pasos-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.pasos-nav button { position: relative; overflow: hidden; min-height: 52px; padding: 0 16px; border: 1px solid var(--linea); border-radius: 12px; background: rgb(255 255 255 / .04); color: var(--suave); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.pasos-nav b { margin-right: 6px; color: var(--verde); font-weight: 600; }
.pasos-nav i { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--luz); transform: scaleX(0); transform-origin: left; }
.pasos-nav button.activa { border-color: rgb(243 198 119 / .45); color: var(--tinta); }
.pasos-nav button.activa i { animation: llena 5.5s linear both; }
@keyframes llena { to { transform: scaleX(1); } }
.anima .caja { transition: opacity .4s, border-color .4s; }
.anima .caja:not(.activa) { opacity: .42; }
.caja.activa { border-color: rgb(243 198 119 / .45); }
.caja.activa .mini-aprobado li { animation: entra .45s both; }
.caja.activa .mini-aprobado li:nth-child(2) { animation-delay: .9s; }
.caja.activa .mini-aprobado li:nth-child(3) { animation-delay: 1.8s; }
.caja.activa .mini-aprobado i { animation: entra .4s both .4s; }
.caja.activa .mini-aprobado li:nth-child(2) i { animation-delay: 1.3s; }
.caja.activa .mini-aprobado li:nth-child(3) i { animation-delay: 2.2s; }
.caja.activa .mini-chips span { animation: entra .4s both; }
.caja.activa .mini-chips span:nth-child(2) { animation-delay: .7s; }
.caja.activa .mini-chips span:nth-child(3) { animation-delay: 1.4s; }
.caja.activa .mini-chips span:nth-child(4) { animation-delay: 2.1s; }
.caja.activa .mini-chips span:nth-child(5) { animation-delay: 2.8s; }
.caja.activa .mini-agenda b { animation: entra .35s both; }
.caja.activa .mini-agenda b:nth-of-type(2) { animation-delay: .15s; }
.caja.activa .mini-agenda b:nth-of-type(3) { animation: elegir 2.4s both; }
.caja.activa .mini-agenda b:nth-of-type(4) { animation-delay: .3s; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes elegir { 0%, 70% { background: var(--superficie); color: var(--tinta); transform: none; } 85% { transform: scale(1.1); } 100% { transform: none; } }

@media (max-width: 900px) {
  .pasos-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .movil-chat { height: 372px; }
  /* En móvil se ven los servicios apilados, sin pestañas ni rotación. */
  .pasos-nav { display: none; }
  .anima .bento .caja:not(.activa) { opacity: 1; }
  .caja.activa { border-color: var(--linea); }
  .guia { padding: 12px 14px; }
  .guia button { width: 100%; }
}
/* Agencia general: comparación por temas, servicios, rubros y contacto con dos vías. */
[hidden] { display: none !important; }
.hero h1 { font-size: clamp(42px, 5.2vw, 70px); }
.carril li b { color: var(--suave); font-size: 14px; font-weight: 500; }
.carril-oxa li b { color: var(--niebla); }
.bento .caja-completa { grid-column: 1 / -1; }
.mini-web { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 16px; border: 1px solid var(--linea); border-radius: 14px; background: rgb(0 0 0 / .22); }
.mini-web-url { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--superficie-2); color: var(--suave); font-size: 12px; }
.mini-web-titulo { margin-top: 4px; font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.mini-web-linea { height: 7px; border-radius: 4px; background: var(--superficie-2); }
.mini-web-linea.corta { width: 62%; }
.mini-web-wa { margin-top: 6px; padding: 9px 12px; border-radius: 10px; background: #0c7d63; color: #fff; font-size: 13.5px; font-weight: 600; text-align: center; }
.caja.activa .mini-web > * { animation: entra .4s both; }
.caja.activa .mini-web > :nth-child(2) { animation-delay: .25s; }
.caja.activa .mini-web > :nth-child(3) { animation-delay: .45s; }
.caja.activa .mini-web > :nth-child(4) { animation-delay: .6s; }
.caja.activa .mini-web-wa { animation: entra .4s both 1s, late 1.6s ease-in-out 1.6s 2; }
@keyframes late { 50% { box-shadow: 0 0 0 6px rgb(90 216 184 / .25); } }
.rubros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rubro { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--linea); border-radius: 18px; background: rgb(255 255 255 / .04); }
.rubro h3 { margin-top: 8px; font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.15; }
.rubro p:not(.rubro-mensaje) { color: var(--suave); }
.rubro-mensaje { align-self: flex-start; max-width: 100%; padding: 8px 12px; border-radius: 12px 12px 12px 3px; background: #1d2e29; color: #e9edef; font-size: 14px; line-height: 1.35; }
.rubro-suyo { border-color: rgb(243 198 119 / .35); }
.rubro-suyo .rubro-mensaje { background: rgb(243 198 119 / .14); color: var(--luz); }
.contacto .acciones { justify-content: center; margin-top: 0; }
.contacto-correo a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .rubros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rubros { grid-template-columns: minmax(0, 1fr); }
  .rubro { padding: 22px; }
}

/* Efectos con GSAP y Lenis (efectos.js). Lenis no convive con scroll-behavior: smooth. */
html.lenis { scroll-behavior: auto; }
.gsap [data-rv] { opacity: 1; transform: none; transition: none; }
.intro .hero-texto, .intro .hero-escena, .intro .cabecera { visibility: hidden; }
.linea-mask { padding-bottom: .14em; margin-bottom: -.14em; }
.cabecera { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.cabecera.oculta { transform: translateY(-100%); }
/* Mientras se ve el botón de la portada, el de la cabecera espera (app.js). Solo opacidad: GSAP mueve su transform. */
.cabecera .boton-luz { transition: opacity .3s, visibility .3s, background .2s, box-shadow .2s; }
.cabecera.cta-oculta .boton-luz { opacity: 0; visibility: hidden; }
.progreso-pagina { position: fixed; top: 0; left: 0; z-index: 40; width: 100%; height: 3px; background: linear-gradient(90deg, #5ad8b8, #9fd9a0, var(--luz)); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.video-marco { will-change: transform; }
.foco { background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgb(255 255 255 / .075), transparent 45%); }
.foco.precio { background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgb(243 198 119 / .12), transparent 45%); }

/* Logo vivo: los tubos se encienden una vez al cargar y una chispa los recorre; vuelve al pasar el cursor.
   Sin bucle infinito. app.js añade .logo-listo al terminar la entrada. */
.marca-viva { flex: none; border-radius: 10px; transition: filter .4s; }
.marca-viva .logo { display: block; flex: none; width: 221px; height: 44px; overflow: visible; }
.logo-brillo { opacity: 0; }
.logo-brillo > * { stroke-dasharray: 9 100; stroke-dashoffset: 9; }
.logo-texto { transform-box: fill-box; }
.anima .marca-viva:not(.logo-listo) .logo-tubos > * { stroke-dasharray: 100 101; animation: traza .75s cubic-bezier(.6, .05, .3, 1) .45s both; }
.anima .marca-viva:not(.logo-listo) .logo-tubos > :nth-child(2) { animation-delay: .8s; }
.anima .marca-viva:not(.logo-listo) .logo-tubos > :nth-child(3) { animation-delay: .95s; }
.anima .marca-viva:not(.logo-listo) .logo-tubos > :nth-child(4) { animation-delay: 1.15s; }
.anima .marca-viva:not(.logo-listo) .logo-tubos > :nth-child(5) { animation-delay: 1.5s; }
.anima .marca-viva:not(.logo-listo) .logo-texto { animation: enciende-texto .7s ease 1.6s both; }
.anima .marca-viva:not(.logo-listo) { animation: destella 1.6s ease 1.9s both; }
.anima .marca-viva:not(.logo-listo) .logo-brillo { animation: brillo-ver 1.4s 2s both; }
.anima .marca-viva:not(.logo-listo) .logo-brillo > * { animation: chispa 1.4s ease-in-out 2s both; }
.logo-listo:hover .logo-brillo, .logo-listo:focus-visible .logo-brillo { animation: brillo-ver 1.2s both; }
.logo-listo:hover .logo-brillo > *, .logo-listo:focus-visible .logo-brillo > * { animation: chispa 1.2s ease-in-out both; }
.logo-listo:hover .logo-brillo > :nth-child(n+2), .logo-listo:focus-visible .logo-brillo > :nth-child(n+2) { animation-delay: .1s; }
.logo-listo:hover .logo-brillo > :nth-child(n+4), .logo-listo:focus-visible .logo-brillo > :nth-child(n+4) { animation-delay: .2s; }
.marca-viva:hover, .marca-viva:focus-visible { filter: drop-shadow(0 0 7px rgb(143 77 255 / .55)) drop-shadow(0 0 16px rgb(25 227 208 / .25)); }
@keyframes traza { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } }
@keyframes enciende-texto { from { opacity: 0; transform: translateX(-120px); } }
@keyframes destella { 45% { filter: drop-shadow(0 0 8px rgb(143 77 255 / .6)) drop-shadow(0 0 18px rgb(25 227 208 / .3)); } }
@keyframes brillo-ver { 0%, 100% { opacity: 0; } 15%, 85% { opacity: .9; } }
@keyframes chispa { to { stroke-dashoffset: -100; } }
@media (max-width: 400px) {
  .marca-viva { width: 104px; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-rv] { opacity: 1; transform: none; }
}