/* =====================================================================
   EXEN · Sitio público · v4 "Un día de sol"
   La página se lee como un día: amanece oscuro en la portada, el sol recorre
   el cielo en la historia, el contenido vive a plena luz y cierra de noche.
   Tipografía: Bricolage Grotesque condensada (titulares altos y firmes) +
   Instrument Sans (lectura). Rojo EXEN solo para la acción principal.
   ===================================================================== */
:root {
  --noche: #0A1622;
  --noche-2: #12233A;
  --celda: #16304A;
  --tinta: #0E1B27;
  --tinta-2: #3E4D5B;
  --tinta-3: #66737F;
  --papel: #EEF2F4;
  --papel-2: #E2E8EC;
  --linea: #D5DDE2;
  --blanco: #FFFFFF;
  --sol: #F5B13C;
  --sol-2: #FFD58A;
  --rojo-marca: #DF0504;
  --rojo: #C8150F;
  --rojo-hover: #A8100B;
  --rojo-texto: #AE120D;
  --rojo-velo: #FBEEED;
  --verde: #1C7A4B; --verde-t: #E3F3EA; --ambar: #8A5300; --ambar-t: #FCF0DB; --azul: #1F5FA8; --azul-t: #E6EEF8; --gris-t: #ECEFF1;
  --wa: #11804A;
  --en-oscuro: #C9D5DF;
  --en-oscuro-2: #93A5B5;

  --f-tit: "Geist", "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-txt: "Geist", "Inter", "Segoe UI", system-ui, sans-serif;

  --ancho: 1480px;
  --pad: clamp(20px, 4.4vw, 72px);
  --cab-h: 72px;
  --r-xl: 32px; --r-l: 22px; --r-m: 14px;
  --flotante: 0 1px 2px rgba(10,22,34,.06), 0 24px 48px -24px rgba(10,22,34,.4);
  --curva: cubic-bezier(.22,.8,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-h) + 20px); }
body { margin: 0; font: 400 18px/1.6 var(--f-txt); color: var(--tinta); background: var(--blanco); overflow-x: hidden; padding-bottom: 84px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.sin-barra { padding-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-tit); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; color: var(--tinta); text-wrap: balance; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; } .saltar:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 8px; }
.ic { width: 1.2em; height: 1.2em; flex: none; }
.cont { width: 100%; max-width: calc(var(--ancho) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.aviso-previa { position: fixed; z-index: 60; left: 12px; top: calc(var(--cab-h) + 8px); background: var(--sol); color: var(--noche); font: 600 12px/1 var(--f-txt); padding: 7px 11px; border-radius: 999px; pointer-events: none; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 56px; padding: 0 1.6em; border-radius: 999px; border: 1.5px solid transparent; font: 600 1.02rem/1 var(--f-txt); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, transform .2s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px); }
.btn-rojo { background: var(--rojo); color: #fff; }
.btn-rojo:hover { background: var(--rojo-hover); }
.btn-borde { background: transparent; color: var(--tinta); border-color: #B7C3CB; }
.btn-borde:hover { border-color: var(--tinta); }
.btn-vidrio { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-vidrio:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.btn-wa { background: #fff; color: var(--wa); border-color: #A9D7BD; }
.btn-wa:hover { border-color: var(--wa); }
.btn-claro { background: #fff; color: var(--tinta); }
.btn-claro:hover { background: var(--papel); }
.btn-bloque { width: 100%; }
.btn-g { min-height: 60px; font-size: 1.06rem; padding: 0 1.8em; }
.enlace { font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--rojo-marca); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color .2s; }
.enlace:hover { color: var(--rojo-texto); }
.enlace .ic { display: none; }

/* ---------- Cabecera: transparente sobre la banda oscura, sólida al bajar ---------- */
.cab { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: #fff; transition: background-color .3s, color .3s, box-shadow .3s; }
.cab-in { max-width: calc(var(--ancho) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); height: var(--cab-h); display: flex; align-items: center; gap: 16px; }
.cab-logo { position: relative; display: block; }
.cab-logo img { height: 28px; width: auto; transition: opacity .3s; }
.cab-logo .logo-color { position: absolute; left: 0; top: 0; opacity: 0; }
.cab.solida { background: rgba(255,255,255,.96); color: var(--tinta); box-shadow: 0 1px 0 var(--linea); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.cab.solida .logo-color { opacity: 1; }
.cab.solida .logo-blanco { opacity: 0; }
.cab-nav { display: none; }
.cab-acc { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cab-tel { display: none; }
.btn-cab { min-height: 46px; padding: 0 1.2em; font-size: .97rem; }
.txt-largo { white-space: pre; }
.cab-menu { width: 46px; height: 46px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; opacity: .9; }
.cab-menu i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s; }
.cab-menu[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
.cab-menu[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
.menu-movil { position: fixed; inset: var(--cab-h) 0 0 0; z-index: 49; background: var(--blanco); padding: 12px var(--pad) 32px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.menu-movil nav { display: flex; flex-direction: column; margin-bottom: 12px; }
.menu-movil nav a { font: 600 2rem/1.1 var(--f-tit); letter-spacing: -.035em; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--papel-2); }
.menu-pie { color: var(--tinta-3); font-size: .95rem; text-align: center; margin-top: 4px; }
body.menu-abierto { overflow: hidden; }
@media (max-width: 399px) { .btn-cab .txt-largo { display: none; } }

/* ---------- Secciones ---------- */
.sec { padding: 88px 0; }
.sec-gris { background: var(--papel); }
.ceja { display: block; font: 600 1rem/1.3 var(--f-txt); color: var(--rojo-texto); margin-bottom: 14px; }
.sec-tit { font-size: clamp(2.4rem, 7.4vw, 5rem); max-width: 16ch; }
.sec-intro { color: var(--tinta-2); font-size: 1.12rem; margin-top: 18px; max-width: 56ch; }
.sec-cab { margin-bottom: 40px; }
.sec-cab-fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; margin-bottom: 40px; }

/* =====================================================================
   PORTADA
   ===================================================================== */
.hero { position: relative; background: var(--noche); color: #fff; overflow: hidden; isolation: isolate; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,22,34,.8) 0%, rgba(10,22,34,.28) 30%, rgba(10,22,34,.4) 52%, rgba(10,22,34,.95) 100%); }
.hero-in { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; gap: 28px; padding-top: calc(var(--cab-h) + 18px); padding-bottom: 36px; }
.hero-txt h1 { color: #fff; font-size: clamp(3rem, 12.4vw, 8rem); font-weight: 700; letter-spacing: -.022em; line-height: .92; max-width: 15ch; }
.hero-sub { font-size: 1.12rem; color: #DCE5EC; margin-top: 20px; max-width: 34rem; }
.hero-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.hero-nota { color: var(--en-oscuro-2); font-size: .95rem; margin-top: 14px; }

/* Arco solar en vivo */
.sol-card { align-self: start; width: 100%; max-width: 560px; }
.sol-arco { width: 100%; height: auto; display: block; overflow: visible; }
.sol-arco .pista { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; }
.sol-arco .recorrido { fill: none; stroke: var(--sol); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(245,177,60,.55)); }
.sol-arco .horizonte { stroke: rgba(255,255,255,.5); stroke-width: 1; }
.sol-arco .astro { fill: var(--sol-2); }
.sol-arco .halo { fill: var(--sol); opacity: .3; }
.sol-arco.es-noche .halo { opacity: 0; }
.sol-arco.es-noche .astro { fill: #C9D3DA; }
.sol-datos { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 8px; font-size: .88rem; color: var(--en-oscuro); }
.sol-datos b { display: block; font: 600 1.25rem/1.15 var(--f-tit); color: #fff; letter-spacing: -.02em; }
.sol-datos .centro { text-align: center; }
.sol-datos .der { text-align: right; }
.sol-ahora { margin-top: 12px; font-size: .92rem; line-height: 1.4; color: #E9EFF3; }
.sol-ahora strong { color: var(--sol); font-weight: 700; }

/* ---------- Un día de sol (historia con desplazamiento) ---------- */
.dia { position: relative; background: var(--noche); color: #fff; padding: 88px 0 40px; }
.dia-cab { margin-bottom: 28px; }
.dia-cab h2 { color: #fff; font-size: clamp(2.4rem, 7.4vw, 5rem); max-width: 14ch; }
.dia-cab p { color: var(--en-oscuro); margin-top: 16px; max-width: 48ch; font-size: 1.1rem; }
.dia-in { position: relative; }
.dia-vis { position: sticky; top: calc(var(--cab-h) + 10px); z-index: 2; height: 34svh; min-height: 230px; border-radius: var(--r-l); overflow: hidden; isolation: isolate; background: #0E1E31; }
.cielo { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.1s ease; }
.cielo-alba { background: linear-gradient(180deg, #1B3352 0%, #5B5E7A 55%, #D9925C 100%); }
.cielo-dia { background: linear-gradient(180deg, #2C6CA6 0%, #74AEDB 60%, #C4E0F2 100%); }
.cielo-tarde { background: linear-gradient(180deg, #24406A 0%, #8C6A7E 55%, #EE9F4C 100%); }
.cielo-noche { background: linear-gradient(180deg, #050C15 0%, #0E1E31 70%, #17304B 100%); }
.dia[data-cielo="alba"] .cielo-alba, .dia[data-cielo="dia"] .cielo-dia, .dia[data-cielo="tarde"] .cielo-tarde, .dia[data-cielo="noche"] .cielo-noche { opacity: 1; }
.dia-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dia-svg .pista { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.2; stroke-dasharray: 2 7; stroke-linecap: round; }
.dia-svg .suelo { fill: #102236; }
.dia-svg .astro { fill: #FFE2A6; }
.dia-svg .halo { fill: var(--sol); opacity: .35; transition: opacity .8s; }
.dia-svg .casa { fill: #14273B; }
.dia-svg .modulo { fill: #2B5A88; stroke: #9CC3E6; stroke-width: .6; transition: fill .8s; }
.dia-svg .ventana { fill: #0F1E2E; transition: fill .8s; }
.dia-svg .bat-caja { fill: #0E1E31; stroke: #fff; stroke-width: 1.4; }
.dia-svg .bat-nivel { fill: #43C07B; transform-box: fill-box; transform-origin: bottom; transition: transform 1.1s var(--curva); }
.dia-svg .bat-txt { fill: #fff; font: 600 11px var(--f-txt); }
.dia[data-cielo="noche"] .ventana { fill: #FFD58A; }
.dia[data-cielo="noche"] .halo { opacity: 0; }
.dia[data-cielo="dia"] .modulo { fill: #5C9BD3; }
.dia-hora { position: absolute; left: 18px; top: 14px; font: 600 clamp(1.8rem, 7vw, 2.6rem)/1 var(--f-tit); letter-spacing: -.035em; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.3); }
.dia-pasos { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.dia-paso { min-height: 72svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 0 8svh; opacity: .32; transition: opacity .5s; }
.dia-paso.activo { opacity: 1; }
.dia-cuando { font-weight: 600; color: var(--sol); font-size: 1rem; margin-bottom: 12px; }
.dia-paso h3 { color: #fff; font-size: clamp(2.1rem, 6.6vw, 3.8rem); max-width: 14ch; }
.dia-paso p { color: var(--en-oscuro); margin-top: 16px; font-size: 1.1rem; max-width: 44ch; }
.dia-paso .btn { align-self: flex-start; margin-top: 28px; }

/* ---------- Cifras (plena luz) ---------- */
.cifras { padding: 72px 0 64px; border-bottom: 1px solid var(--linea); }
.cifras-in { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.cifra b { display: block; font: 600 clamp(3rem, 11vw, 6.4rem)/.9 var(--f-tit); letter-spacing: -.05em; color: var(--tinta); white-space: nowrap; }
.cifra span { display: block; color: var(--tinta-2); margin-top: 12px; font-size: 1rem; line-height: 1.4; max-width: 24ch; }
.clientes { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linea); }
.clientes p { color: var(--tinta-3); font-size: .95rem; margin-bottom: 12px; }
.clientes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.clientes li { font: 600 1.3rem/1.4 var(--f-tit); color: var(--tinta-2); letter-spacing: -.02em; }

/* ---------- Cotización inmediata ---------- */
.cotiza { background: var(--papel); overflow: hidden; }
.cotiza-in { display: flex; flex-direction: column; gap: 48px; }
.cotiza-tit { font-size: clamp(2.5rem, 8vw, 5.4rem); max-width: 13ch; }
.etiqueta-viva { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .95rem; color: var(--tinta); background: #fff; border: 1px solid var(--linea); padding: 8px 14px; border-radius: 999px; margin-bottom: 20px; }
.etiqueta-viva i { width: 9px; height: 9px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 0 4px rgba(43,182,115,.18); }
.pasos-cot { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; }
.pasos-cot li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.pasos-cot .n { width: 48px; height: 48px; border-radius: 50%; background: var(--noche); color: #fff; display: grid; place-items: center; font: 600 1.2rem/1 var(--f-tit); }
.pasos-cot b { display: block; font-size: 1.1rem; font-weight: 600; }
.pasos-cot span { color: var(--tinta-2); font-size: 1rem; }
.cotiza-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
.cotiza-nota { font-size: .92rem; color: var(--tinta-3); margin-top: 12px; max-width: 46ch; }
.prop { position: relative; background: #fff; border-radius: 8px; box-shadow: var(--flotante); padding: 28px 24px 22px; max-width: 500px; width: 100%; margin: 0 auto; }
.prop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--rojo-marca); border-radius: 8px 8px 0 0; }
.prop-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--papel-2); }
.prop-cab img { height: 22px; width: auto; }
.prop-cab div { text-align: right; }
.prop-cab b { display: block; font: 600 1.15rem/1.15 var(--f-tit); }
.prop-cab small { color: var(--tinta-3); font-size: .85rem; }
.prop-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--papel-2); font-size: .98rem; }
.prop-fila span { color: var(--tinta-2); }
.prop-fila b { font-weight: 600; }
.prop-raya { display: inline-block; width: 70px; height: 10px; border-radius: 5px; background: var(--papel-2); }
.prop-total { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; }
.prop-total .prop-raya { width: 120px; height: 18px; background: #EBD5D3; }
.prop-envio { margin-top: 18px; display: grid; gap: 8px; }
.prop-envio div { display: flex; align-items: center; gap: 10px; font-size: .94rem; font-weight: 600; color: var(--tinta-2); padding: 11px 12px; background: var(--papel); border-radius: 10px; }
.prop-envio .ic { color: var(--verde); }
.prop-pie { color: var(--tinta-3); font-size: .82rem; text-align: center; margin-top: 14px; }

/* ---------- Dos rutas ---------- */
.rutas { display: grid; gap: 16px; }
.ruta { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 460px; padding: 28px; border-radius: var(--r-xl); text-decoration: none; overflow: hidden; color: #fff; isolation: isolate; background: var(--noche); }
.ruta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--curva); }
.ruta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,22,34,0) 20%, rgba(10,22,34,.55) 52%, rgba(10,22,34,.94) 100%); }
.ruta:hover > img { transform: scale(1.04); }
.ruta h3 { color: #fff; font-size: clamp(2.3rem, 7.4vw, 4rem); max-width: 12ch; }
.ruta p { color: #DCE4EA; max-width: 42ch; }
.ruta .btn { align-self: flex-start; margin-top: 10px; }
.ruta-celda { background: var(--celda); }
.ruta-celda::before { background: radial-gradient(120% 80% at 100% 0%, rgba(245,177,60,.24), transparent 55%); }
.ruta-equipos { display: flex; gap: 10px; margin-bottom: auto; padding-bottom: 24px; flex-wrap: wrap; }
.ruta-equipos span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 9px 15px; font-size: .94rem; color: #E3E9EE; }

/* ---------- Carriles (desplazamiento horizontal en móvil) ---------- */
.carril, .bento { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--pad) 22px; margin: 0 calc(var(--pad) * -1); scrollbar-width: none; overscroll-behavior-x: contain; }
.carril::-webkit-scrollbar, .bento::-webkit-scrollbar { display: none; }
.carril > *, .bento > * { scroll-snap-align: start; }

/* ---------- Soluciones ---------- */
.sol { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 360px; padding: 26px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--linea); text-decoration: none; overflow: hidden; isolation: isolate; }
.sol h3 { font-size: 2.2rem; }
.sol p { color: var(--tinta-2); font-size: 1rem; }
.sol-dato { margin-top: auto; }
.sol-dato b { display: block; font: 600 2.8rem/.95 var(--f-tit); letter-spacing: -.05em; color: var(--tinta); }
.sol-dato span { font-size: .92rem; color: var(--tinta-3); }
.sol-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; color: var(--tinta); margin-bottom: auto; }
.sol-ic .ic { width: 24px; height: 24px; }
.sol-foto { color: #fff; border: 0; justify-content: flex-end; background: var(--noche); }
.sol-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--curva); }
.sol-foto:hover > img { transform: scale(1.04); }
.sol-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,22,34,.05) 10%, rgba(10,22,34,.6) 45%, rgba(10,22,34,.94) 100%); }
.sol-foto h3, .sol-foto .sol-dato b { color: #fff; }
.sol-foto p, .sol-foto .sol-dato span { color: #D5DEE5; }
.sol-foto .sol-dato { margin-top: 10px; }
.sol .enlace { margin-top: 14px; align-self: flex-start; }

/* ---------- Proyectos ---------- */
.proy { display: flex; flex-direction: column; border-radius: var(--r-l); overflow: hidden; background: #fff; border: 1px solid var(--linea); text-decoration: none; }
.proy-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--papel); }
.proy-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.proy:hover .proy-foto img { transform: scale(1.04); }
.proy-sector { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.95); border-radius: 999px; padding: 7px 13px; font: 600 .86rem/1 var(--f-txt); }
.proy-cuerpo { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.proy-cuerpo h3 { font-size: 1.9rem; }
.proy-cuerpo small { color: var(--tinta-3); font-size: .95rem; display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.proy-datos { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--papel-2); padding-top: 16px; margin: 0; }
.proy-datos div + div { border-left: 1px solid var(--papel-2); padding-left: 16px; }
.proy-datos dt { font-size: .86rem; color: var(--tinta-3); }
.proy-datos dd { margin: 4px 0 0; font: 600 1.8rem/1 var(--f-tit); letter-spacing: -.035em; }
.ph-img { width: 100%; height: 100%; min-height: 200px; display: grid; place-items: center; background: var(--papel); color: var(--tinta-3); font-size: .95rem; }
.vacio { border: 1px dashed #C3CBCF; border-radius: var(--r-m); padding: 28px; color: var(--tinta-2); text-align: center; background: #fff; }

/* ---------- Productos ---------- */
.prod { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 18px; border-radius: var(--r-l); border: 1px solid var(--linea); background: #fff; min-height: 100%; }
.prod-foto { aspect-ratio: 1; border-radius: var(--r-m); background: var(--papel); display: grid; place-items: center; overflow: hidden; margin-bottom: 4px; }
.prod-foto img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.prod-foto .ic { width: 56px; height: 56px; color: #AFBAC2; }
.prod small { font-size: .88rem; color: var(--tinta-3); }
.prod h3 { font: 600 1.08rem/1.32 var(--f-txt); letter-spacing: 0; }
.prod-precio { font: 600 2rem/1 var(--f-tit); letter-spacing: -.035em; margin-top: auto; padding-top: 6px; }
.prod-precio small { display: block; margin-top: 6px; font: 400 .85rem/1 var(--f-txt); letter-spacing: 0; }
.prod-precio span { font: 600 1.05rem/1.2 var(--f-txt) !important; letter-spacing: 0; }
.prod-acc { display: grid; gap: 8px; margin-top: 6px; }
.prod-acc .btn { min-height: 48px; font-size: .96rem; }
.inv { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.inv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.inv-disponible { background: var(--verde-t); color: var(--verde); }
.inv-pocas { background: var(--ambar-t); color: var(--ambar); }
.inv-proximo { background: var(--azul-t); color: var(--azul); }
.inv-pedido, .inv-agotado { background: var(--gris-t); color: #4B5560; }

/* ---------- Por qué EXEN ---------- */
.porque { display: grid; gap: 36px; }
.porque-foto { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 4.6; background: var(--papel); }
.porque-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.porque-foto figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(255,255,255,.95); border-radius: var(--r-m); padding: 12px 16px; font-size: .92rem; color: var(--tinta-2); }
.porque-foto figcaption b { display: block; color: var(--tinta); font-size: 1rem; }
.razones { display: grid; margin-top: 30px; }
.razon { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--linea); }
.razon:last-child { border-bottom: 1px solid var(--linea); }
.razon .ic { width: 28px; height: 28px; color: var(--rojo-marca); margin-top: 3px; }
.razon b { display: block; font: 600 1.6rem/1.05 var(--f-tit); letter-spacing: -.028em; }
.razon span { display: block; color: var(--tinta-2); font-size: 1rem; margin-top: 6px; }
.certs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cert { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: var(--papel); font-size: .92rem; font-weight: 600; }
.cert .ic { color: var(--verde); width: 17px; height: 17px; }

/* ---------- Proceso (secuencia real de 6 pasos) ---------- */
.proceso { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: paso; }
.proceso li { position: relative; padding: 0 0 30px 66px; }
.proceso li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: -4px; width: 48px; height: 48px; border-radius: 50%; background: var(--noche); color: #fff; display: grid; place-items: center; font: 600 1.25rem/1 var(--f-tit); }
.proceso li::after { content: ""; position: absolute; left: 23px; top: 50px; bottom: 2px; width: 2px; background: var(--linea); }
.proceso li:last-child::after { display: none; }
.proceso b { display: block; font: 600 1.6rem/1.05 var(--f-tit); letter-spacing: -.028em; }
.proceso span { display: block; color: var(--tinta-2); font-size: 1rem; margin-top: 8px; }

/* ---------- Financiamiento ---------- */
.fin { border-radius: var(--r-xl); background: var(--celda); color: #fff; padding: 36px 24px; display: grid; gap: 28px; position: relative; overflow: hidden; isolation: isolate; }
.fin::after { content: ""; position: absolute; z-index: -1; right: -160px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(245,177,60,.22), transparent 68%); }
.fin h2 { color: #fff; font-size: clamp(2.4rem, 7.4vw, 4.6rem); max-width: 12ch; }
.fin p { color: var(--en-oscuro); }
.fin .ceja { color: var(--sol-2); }
.fin-datos { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.fin-datos div { padding: 20px 10px 20px 0; }
.fin-datos div + div { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.16); }
.fin-datos b { display: block; font: 600 clamp(2.4rem, 7vw, 3.8rem)/.9 var(--f-tit); letter-spacing: -.05em; }
.fin-datos span { display: block; color: var(--en-oscuro-2); font-size: .88rem; margin-top: 10px; line-height: 1.3; }

/* ---------- Generación distribuida ---------- */
.gd-item { display: grid; gap: 6px; padding: 24px 0; border-top: 1px solid var(--linea); }
.gd-item:last-child { border-bottom: 1px solid var(--linea); }
.gd-item b { font: 600 clamp(3.2rem, 11vw, 5.4rem)/.9 var(--f-tit); letter-spacing: -.045em; color: var(--tinta); }
.gd-item p { color: var(--tinta-2); font-size: 1.02rem; max-width: 46ch; }
.gd-fuente { font-size: .9rem; color: var(--tinta-3); margin-top: 16px; }

/* ---------- FAQ ---------- */
.faq { display: grid; max-width: 900px; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 56px 22px 0; font: 600 1.14rem/1.35 var(--f-txt); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; font: 400 1.5rem/1 var(--f-txt); transition: transform .25s, background .25s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--noche); color: #fff; }
.faq .faq-r { padding: 0 0 24px; color: var(--tinta-2); max-width: 68ch; }
.sec-gris .faq summary::after { background: #fff; }
.faq-wrap > div:first-child, .gd-wrap > div:first-child, .proceso-wrap > div:first-child { margin-bottom: 36px; }

/* ---------- Cierre de noche ---------- */
.noche { position: relative; background: var(--noche); color: #fff; overflow: hidden; isolation: isolate; padding: 104px 0 120px; text-align: center; }
.noche-arco { position: absolute; left: 50%; bottom: 0; width: max(1400px, 170vw); height: auto; transform: translateX(-50%); z-index: -1; }
.noche-arco .pista { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1; stroke-dasharray: 2 8; }
.noche h2 { color: #fff; font-size: clamp(2.9rem, 10vw, 7.4rem); letter-spacing: -.045em; line-height: .92; max-width: 12ch; margin: 0 auto; }
.noche p { color: var(--en-oscuro); margin: 22px auto 0; max-width: 46ch; font-size: 1.12rem; }
.noche .hero-cta { justify-content: center; align-items: stretch; max-width: 440px; margin: 34px auto 0; }
.noche-man { margin-top: 44px !important; font-size: .95rem !important; color: var(--en-oscuro-2) !important; }
.noche-man strong { color: var(--sol); font-weight: 600; }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: var(--en-oscuro); padding: 56px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
.pie-in { max-width: calc(var(--ancho) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); display: grid; gap: 32px; }
.pie-marca img { height: 28px; width: auto; margin-bottom: 16px; }
.pie-marca p { color: var(--en-oscuro); font-size: .98rem; max-width: 40ch; }
.pie-cert { margin-top: 14px !important; font-size: .88rem !important; color: var(--en-oscuro-2) !important; }
.pie-t { font: 600 1rem/1 var(--f-txt); letter-spacing: 0; color: #fff; margin-bottom: 14px; }
.pie a, .pie-in p { display: block; color: var(--en-oscuro); text-decoration: none; padding: 5px 0; font-size: .98rem; }
.pie a:hover { color: #fff; }
.pie-legal { max-width: calc(var(--ancho) + var(--pad) * 2); margin: 40px auto 0; padding: 22px var(--pad); border-top: 1px solid rgba(255,255,255,.1); color: var(--en-oscuro-2); font-size: .88rem; }

/* ---------- Barra inferior móvil ---------- */
.barra-movil { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 6px; padding: 6px; background: rgba(10,22,34,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 999px; box-shadow: 0 14px 34px -12px rgba(10,22,34,.6); border: 1px solid rgba(255,255,255,.08); }
.barra-movil a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .96rem; color: #E3E9EE; }
.barra-movil .bm-cot { background: var(--rojo); color: #fff; }
.barra-movil .bm-wa { color: #8EE0B3; }

/* =====================================================================
   PÁGINAS INTERNAS: banda oscura de cabecera
   ===================================================================== */
.p-cab { position: relative; background: var(--noche); color: #fff; padding: calc(var(--cab-h) + 36px) 0 56px; overflow: hidden; isolation: isolate; }
.p-cab::after { content: ""; position: absolute; z-index: -1; right: -30%; bottom: -26vw; width: 100vw; aspect-ratio: 2 / 1; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border: 1.5px dashed rgba(255,255,255,.16); border-bottom: 0; }
.p-cab::before { content: ""; position: absolute; z-index: -1; right: 14%; top: calc(var(--cab-h) + 18px); width: 16px; height: 16px; border-radius: 50%; background: var(--sol-2); box-shadow: 0 0 0 9px rgba(245,177,60,.18), 0 0 60px 22px rgba(245,177,60,.22); }
.migas { font-size: .92rem; color: var(--en-oscuro-2); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.migas a { color: var(--en-oscuro); }
.p-tit { color: #fff; font-size: clamp(2.8rem, 10.6vw, 6.8rem); font-weight: 700; letter-spacing: -.045em; line-height: .92; max-width: 15ch; }
.p-intro { color: var(--en-oscuro); font-size: 1.14rem; margin-top: 22px; max-width: 60ch; }
.p-cab .etiqueta-viva { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.p-cab-dato { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.p-cab-dato span { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 15px; font-size: .95rem; color: #E3E9EE; }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; margin-bottom: 26px; }
.filtros::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 12px 19px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; font: 600 .98rem/1 var(--f-txt); text-decoration: none; color: var(--tinta); }
.chip[aria-current="page"] { background: var(--noche); color: #fff; border-color: var(--noche); }
.rejilla { display: grid; gap: 18px; }
.caso-hero { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--papel); }
.caso-hero img { width: 100%; height: 100%; object-fit: cover; }
.ficha { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--linea); }
.ficha div { padding: 15px 0; border-bottom: 1px solid var(--linea); }
.ficha div:nth-child(odd):not(.ficha-destacada) { padding-right: 12px; }
.ficha dt { font-size: .88rem; color: var(--tinta-3); }
.ficha dd { margin: 4px 0 0; font: 600 1.7rem/1.05 var(--f-tit); letter-spacing: -.028em; }
.ficha .ficha-destacada { grid-column: 1 / -1; padding: 20px 0; }
.ficha .ficha-destacada dd { font-size: 3.6rem; letter-spacing: -.05em; }
.historia { display: grid; gap: 30px; }
.historia h2 { font-size: 2.4rem; margin-bottom: 12px; }
.historia p { color: var(--tinta-2); white-space: pre-line; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.galeria a { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 1; display: block; background: var(--papel); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.caja-cta { border-radius: var(--r-l); background: var(--noche); color: #fff; padding: 28px; display: grid; gap: 14px; }
.caja-cta h2 { color: #fff; font-size: 2.2rem; }
.caja-cta p { color: var(--en-oscuro); }
.canales { display: grid; border-top: 1px solid var(--linea); }
.canal { display: flex; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--linea); text-decoration: none; }
.canal-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); flex: none; }
.canal-ic .ic { width: 24px; height: 24px; }
.canal-wa .canal-ic { background: #E4F4EA; color: var(--wa); }
.canal b { display: block; font-size: 1.1rem; font-weight: 600; } .canal span { color: var(--tinta-2); font-size: .97rem; }
a.canal:hover b { color: var(--rojo-texto); }
.ayuda { display: grid; gap: 16px; }
.ayuda-item { border-radius: var(--r-l); background: #fff; border: 1px solid var(--linea); padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.ayuda-item h2 { font-size: 2.2rem; }
.ayuda-item p { color: var(--tinta-2); }
.ayuda-item .enlace { margin-top: 8px; align-self: flex-start; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label, .campo .etq { font-weight: 600; font-size: 1rem; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 58px; border: 1.5px solid #BDC8CF; border-radius: var(--r-m); padding: 0 16px; font: 500 1.08rem/1.3 var(--f-txt); color: var(--tinta); background: #fff; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.campo textarea { padding: 14px 16px; min-height: 120px; resize: vertical; }
.campo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230E1B27' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--noche); box-shadow: 0 0 0 4px rgba(10,22,34,.1); }
.campo [aria-invalid="true"] { border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(200,21,15,.08); }
.campo small { color: var(--tinta-3); font-size: .92rem; }
.campo .err { color: var(--rojo-texto); font-size: .92rem; font-weight: 600; display: none; }
.campo [aria-invalid="true"] ~ .err { display: block; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-grid { display: grid; gap: 16px; }
.msg-form { border-radius: var(--r-m); padding: 14px 16px; font-weight: 600; display: none; }
.msg-form.ok { display: block; background: var(--verde-t); color: #13573A; }
.msg-form.error { display: block; background: var(--rojo-velo); color: var(--rojo-texto); }

/* ---------- Cotizar ahora (aplicación) ---------- */
.cot-pag .p-cab { padding-bottom: 140px; }
.cot-pag .p-cab + .sec { padding-top: 0; margin-top: -100px; position: relative; z-index: 2; }
.cot-app { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-xl); box-shadow: var(--flotante); overflow: hidden; }
.cot-prog { padding: 22px 22px 0; }
.cot-prog-txt { display: flex; justify-content: space-between; font-size: .92rem; color: var(--tinta-3); }
.cot-prog-txt b { color: var(--tinta); }
.cot-barra { height: 6px; border-radius: 6px; background: var(--papel-2); margin-top: 10px; overflow: hidden; }
.cot-barra i { display: block; height: 100%; width: 33%; background: linear-gradient(90deg, var(--sol), #E8892A); border-radius: 6px; transition: width .45s var(--curva); }
.cot-paso { padding: 26px 22px 28px; display: none; }
.cot-paso.activo { display: block; animation: entrar .3s ease; }
@keyframes entrar { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.cot-paso h2 { font-size: 2.3rem; }
.cot-paso > p { color: var(--tinta-2); margin: 10px 0 22px; }
.opciones { display: grid; gap: 10px; }
.opcion { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--linea); border-radius: var(--r-m); cursor: pointer; transition: border-color .15s, background .15s; background: #fff; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion .opcion-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; flex: none; color: var(--tinta); }
.opcion .opcion-ic .ic { width: 22px; height: 22px; }
.opcion b { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.opcion span { display: block; color: var(--tinta-2); font-size: .94rem; margin-top: 3px; line-height: 1.4; }
.opcion:hover { border-color: #A9B6BE; }
.opcion:has(input:checked) { border-color: var(--noche); background: #F2F5F8; box-shadow: inset 0 0 0 1px var(--noche); }
.opcion:has(input:checked) .opcion-ic { background: var(--noche); color: var(--sol-2); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--sol); outline-offset: 2px; }
.opcion-sel { padding-right: 52px; }
.opcion-sel::after { content: ""; position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #BDC8CF; background: #fff; }
.opcion:has(input:checked).opcion-sel::after { background: var(--noche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--noche); }
.dos-op { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dos-op .opcion { flex-direction: column; gap: 6px; padding: 14px; }
.grupo { margin-top: 22px; }
.grupo-t { font-weight: 600; margin-bottom: 10px; display: block; }
.avanz { margin-top: 18px; border-top: 1px solid var(--papel-2); padding-top: 14px; }
.avanz summary { cursor: pointer; color: var(--tinta-2); font-weight: 600; font-size: .97rem; }
.avanz .form-grid { margin-top: 14px; }
.archivo { display: flex; align-items: center; gap: 12px; border: 1.5px dashed #BDC8CF; border-radius: var(--r-m); padding: 14px 16px; cursor: pointer; position: relative; }
.archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.archivo .ic { color: var(--tinta-3); width: 26px; height: 26px; }
.archivo b { display: block; font-size: 1rem; font-weight: 600; } .archivo span { color: var(--tinta-3); font-size: .9rem; }
.cot-nav { display: flex; gap: 10px; margin-top: 26px; }
.cot-nav .btn { flex: 1; }
.cot-nav .btn-atras { flex: 0 0 auto; padding: 0 1.3em; }
.cot-aviso { margin-top: 14px; font-size: .92rem; color: var(--tinta-3); display: flex; gap: 8px; align-items: flex-start; }
.cot-aviso .ic { color: var(--verde); margin-top: 3px; }
.cot-error { display: none; margin-top: 14px; background: var(--rojo-velo); color: var(--rojo-texto); font-weight: 600; border-radius: var(--r-m); padding: 12px 14px; }
.cot-error.ver { display: block; }
.cot-estado { padding: 32px 22px 30px; display: none; }
.cot-estado.activo { display: block; animation: entrar .3s ease; }
.cot-estado h2 { font-size: 2.4rem; }
.cot-estado > p { color: var(--tinta-2); margin-top: 8px; }
.etapas { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.etapa { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-m); border: 1px solid var(--linea); color: var(--tinta-3); font-weight: 600; transition: all .3s; }
.etapa i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linea); flex: none; display: grid; place-items: center; }
.etapa.en-curso { color: var(--tinta); border-color: #A9B6BE; }
.etapa.en-curso i { border-top-color: var(--sol); animation: girar .8s linear infinite; }
.etapa.hecha { color: var(--tinta); background: var(--verde-t); border-color: #C3E5D2; }
.etapa.hecha i { background: var(--verde); border-color: var(--verde); }
.etapa.hecha i::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.etapa.pendiente { background: var(--ambar-t); border-color: #F2D7AA; color: var(--ambar); }
.etapa.pendiente i { border-color: var(--ambar); }
.etapa small { display: block; font-weight: 500; font-size: .88rem; color: var(--tinta-2); }
@keyframes girar { to { transform: rotate(360deg); } }
.ok-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; margin-bottom: 16px; }
.ok-ic .ic { width: 32px; height: 32px; }
.siguiente { margin-top: 20px; background: var(--papel); border-radius: var(--r-m); padding: 16px; }
.siguiente b { display: block; margin-bottom: 6px; }
.siguiente ol { margin: 0; padding-left: 20px; color: var(--tinta-2); }
.siguiente li + li { margin-top: 4px; }
.cot-lado { display: grid; gap: 24px; }
.garantia-cot { display: grid; border-top: 1px solid var(--linea); }
.garantia-cot > div { display: flex; gap: 14px; align-items: flex-start; padding: 17px 0; border-bottom: 1px solid var(--linea); }
.garantia-cot .ic { color: var(--rojo-marca); width: 24px; height: 24px; margin-top: 2px; }
.garantia-cot b { display: block; font-weight: 600; }
.garantia-cot span { color: var(--tinta-2); font-size: .97rem; }
.comparativa { border-radius: var(--r-m); overflow: hidden; background: var(--papel); }
.comparativa table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.comparativa th, .comparativa td { padding: 12px 14px; border-bottom: 1px solid #fff; text-align: left; vertical-align: top; }
.comparativa thead th { font-size: .88rem; color: var(--tinta-3); font-weight: 600; }
.comparativa td:last-child { font-weight: 600; color: var(--tinta); }
.comparativa tr:last-child td { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Móvil fino */
@media (max-width: 639px) {
  .fin-datos { grid-template-columns: 1fr; }
  .fin-datos div, .fin-datos div + div { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-left: 0; }
  .fin-datos div + div { border-top: 1px solid rgba(255,255,255,.16); }
  .fin-datos b { min-width: 130px; }
  .fin-datos span { margin-top: 0; font-size: .95rem; }
}

/* =====================================================================
   Tableta
   ===================================================================== */
@media (min-width: 640px) {
  .hero-cta, .cotiza-cta { flex-direction: row; flex-wrap: wrap; }
  .cifras-in { grid-template-columns: repeat(4, 1fr); }
  .cifra + .cifra { border-left: 1px solid var(--linea); padding-left: 24px; }
  .rutas { grid-template-columns: 1fr 1fr; }
  .carril, .bento { grid-auto-columns: 46%; }
  .rejilla { grid-template-columns: 1fr 1fr; }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .ficha { grid-template-columns: repeat(3, 1fr); }
  .ficha .ficha-destacada { grid-column: span 3; }
  .pie-in { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .opciones-2 { grid-template-columns: 1fr 1fr; }
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
  .ayuda { grid-template-columns: 1fr 1fr; }
  .cot-paso, .cot-estado { padding: 32px 36px 36px; }
  .cot-prog { padding: 26px 36px 0; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .cifras-in { grid-template-columns: 1fr 1fr; }
  .cifra:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* =====================================================================
   Escritorio
   ===================================================================== */
@media (min-width: 960px) {
  :root { --cab-h: 84px; }
  body { padding-bottom: 0; }
  .barra-movil, .cab-menu, .menu-movil { display: none !important; }
  .cab-logo img { height: 32px; }
  .cab-nav { display: flex; gap: 2px; margin-left: 36px; }
  .cab-nav a { text-decoration: none; font-weight: 500; font-size: 1rem; padding: 10px 14px; border-radius: 999px; color: inherit; opacity: .86; white-space: nowrap; transition: opacity .2s, background .2s; }
  .cab-nav a:hover, .cab-nav a[aria-current="page"] { opacity: 1; background: rgba(255,255,255,.12); }
  .cab.solida .cab-nav a:hover, .cab.solida .cab-nav a[aria-current="page"] { background: var(--papel); }
  .cab-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: inherit; opacity: .86; font-size: .98rem; padding: 0 10px; white-space: nowrap; }
  .btn-cab { min-height: 50px; padding: 0 1.4em; }
  .sec { padding: 140px 0; }
  .sec-cab, .sec-cab-fila { margin-bottom: 64px; }

  /* Portada: titular enorme abajo, el sol arriba a la derecha */
  .hero-in { grid-template-columns: 1fr minmax(380px, 460px); grid-template-rows: 1fr; align-items: end; gap: 72px; padding-top: calc(var(--cab-h) + 40px); padding-bottom: 72px; }
  .hero-txt { grid-column: 1; grid-row: 1; }
  .sol-card { grid-column: 2; grid-row: 1; align-self: end; width: 100%; padding: 26px 26px 22px; border-radius: var(--r-l); background: rgba(10,22,34,.42); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .hero-txt h1 { font-size: clamp(4.4rem, 6.6vw, 8rem); max-width: 12ch; }
  .hero-sub { font-size: 1.2rem; margin-top: 26px; }
  .hero-cta { margin-top: 32px; }

  /* Un día de sol: el cielo queda fijo a la izquierda, los momentos pasan a la derecha */
  .dia { padding: 140px 0 40px; }
  .dia-cab { margin-bottom: 40px; }
  .dia-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: start; }
  .dia-vis { top: calc(var(--cab-h) + (100svh - var(--cab-h) - 72svh) / 2); height: 72svh; min-height: 460px; border-radius: var(--r-xl); }
  .dia-hora { left: 32px; top: 26px; font-size: 3.6rem; }
  .dia-paso { min-height: 92svh; padding: 0; justify-content: center; }

  .cifras { padding: 120px 0 96px; }
  .cifra + .cifra { padding-left: 36px; }
  .cifra b { font-size: clamp(3.4rem, 6.2vw, 6.4rem); }
  .clientes { display: flex; align-items: baseline; gap: 40px; margin-top: 72px; }
  .clientes p { margin: 0; flex: none; }

  .cotiza-in { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 96px; }
  .prop { padding: 36px 34px 30px; transform: rotate(-2deg); }

  .rutas { gap: 20px; } .ruta { min-height: 660px; padding: 48px; }

  .carril { grid-auto-flow: row; grid-template-columns: repeat(var(--cols, 3), 1fr); grid-auto-columns: auto; overflow: visible; padding: 0; margin: 0; gap: 22px; }
  .carril-4 { --cols: 4; }
  .bento { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(340px, auto)); overflow: visible; padding: 0; margin: 0; gap: 18px; }
  .bento .b-grande { grid-column: span 2; grid-row: span 2; padding: 44px; }
  .bento .b-ancho { grid-column: span 2; }
  .b-grande h3 { font-size: 4rem; }
  .b-grande .sol-dato b { font-size: 5.4rem; }

  .rejilla { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
  .porque { grid-template-columns: 1fr 1.1fr; gap: 96px; align-items: center; }
  .gd-wrap > div:first-child, .faq-wrap > div:first-child { margin-bottom: 0; }
  .proceso-wrap > div:first-child { margin-bottom: 72px; }
  .proceso { grid-template-columns: repeat(6, 1fr); gap: 0 28px; }
  .proceso li { padding: 76px 0 0; }
  .proceso li::before { top: 0; }
  .proceso li::after { left: 60px; right: -20px; top: 23px; bottom: auto; width: auto; height: 2px; }
  .fin { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 80px; gap: 64px; }
  .gd-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 96px; align-items: start; }
  .gd-item { grid-template-columns: 230px 1fr; align-items: baseline; gap: 28px; }
  .faq-wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 96px; align-items: start; }
  .noche { padding: 180px 0 220px; }
  .noche .hero-cta { max-width: none; flex-wrap: nowrap; }

  .p-cab { padding: calc(var(--cab-h) + 64px) 0 96px; }
  .p-cab::after { right: -8%; bottom: -16vw; width: 56vw; }
  .p-cab::before { right: 22%; top: calc(var(--cab-h) + 48px); }
  .caso-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: start; }
  .caso-lateral { position: sticky; top: calc(var(--cab-h) + 24px); display: grid; gap: 24px; }
  .contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .cot-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
  .cot-lado { position: sticky; top: calc(var(--cab-h) + 24px); margin-top: 124px; }
  .cot-pag .p-cab + .sec { padding-bottom: 120px; }
  .pie { padding-top: 88px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .cab-tel { display: none; }
  .cab-nav { margin-left: 16px; }
  .cab-nav a { padding: 10px 9px; font-size: .95rem; }
  .cab-nav a:nth-child(4) { display: none; }
  .carril-4, .rejilla-4 { --cols: 2; grid-template-columns: repeat(2, 1fr); }
  .btn-cab .txt-largo { display: none; }
  .proceso { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .proceso li:nth-child(3)::after { display: none; }
  .hero-in { grid-template-columns: 1fr 360px; gap: 40px; }
}
@media (min-width: 1600px) {
  body { font-size: 19px; }
}

/* =====================================================================
   v5 · Geist, marco de portada, arranque de cotización, simulador de apagón
   (las reglas de aquí abajo prevalecen sobre las anteriores)
   ===================================================================== */
body { font-size: 18px; letter-spacing: -.006em; }
h1, h2, h3 { font-feature-settings: "ss01", "cv11"; }
.sec-tit { font-size: clamp(2.3rem, 6.6vw, 4.6rem); max-width: 17ch; line-height: 1.02; letter-spacing: -.045em; }
.sec-intro { font-size: 1.14rem; line-height: 1.6; }
.ceja { font-weight: 500; }

/* Cabecera: barra limpia; en escritorio se convierte en cápsula flotante */
.cab-nav a, .cab-tel { font-weight: 500; }

/* Portada dentro de un marco redondeado */
.hero { background: #fff; padding: 0; overflow: visible; }
.hero-marco { position: relative; overflow: hidden; isolation: isolate; background: var(--noche); color: #fff; }
.hero-foto { will-change: transform; }
.hero-velo { background: linear-gradient(180deg, rgba(10,22,34,.72) 0%, rgba(10,22,34,.18) 28%, rgba(10,22,34,.3) 50%, rgba(10,22,34,.92) 100%); }
.hero-in { min-height: 100svh; padding-top: calc(var(--cab-h) + 14px); padding-bottom: 28px; gap: 22px; }
.hero-txt h1 { font-size: clamp(2.7rem, 11vw, 7.2rem); font-weight: 600; letter-spacing: -.05em; line-height: .98; max-width: 14ch; }
.hero-sub { color: #D9E2EA; font-size: 1.08rem; margin-top: 18px; }
.hero-nota { margin-top: 16px; font-size: .98rem; }
.hero-nota a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 5px; }
.hero-nota a:hover { text-decoration-color: #fff; }
@supports (animation-timeline: scroll()) {
  .hero-foto { animation: hero-acercar linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes hero-acercar { from { transform: scale(1.02); } to { transform: scale(1.14) translateY(3%); } }
}

/* Arranque de cotización: tipo de inmueble + pago mensual, directo al cotizador */
.arranque { margin-top: 24px; display: grid; gap: 8px; padding: 8px; border-radius: 26px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); max-width: 720px; }
.arranque-tipo { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: rgba(10,22,34,.35); border-radius: 18px; padding: 4px; }
.arranque-tipo label { position: relative; cursor: pointer; }
.arranque-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.arranque-tipo span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 14px; font-weight: 500; font-size: .98rem; color: #DCE5EC; transition: background .2s, color .2s; }
.arranque-tipo span .ic { width: 18px; height: 18px; }
.arranque-tipo input:checked + span { background: #fff; color: var(--tinta); }
.arranque-tipo input:focus-visible + span { outline: 3px solid var(--sol); outline-offset: 1px; }
.arranque-pago { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 18px; border-radius: 18px; background: #fff; color: var(--tinta); cursor: text; }
.arranque-pago small { font-size: .82rem; color: var(--tinta-3); line-height: 1.15; max-width: 9ch; }
.arranque-pago b { font-weight: 600; color: var(--tinta-2); }
.arranque-pago input { flex: 1; min-width: 0; border: 0; outline: 0; font: 600 1.25rem/1 var(--f-txt); letter-spacing: -.02em; color: var(--tinta); background: transparent; -moz-appearance: textfield; }
.arranque-pago input::-webkit-outer-spin-button, .arranque-pago input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.arranque-pago[hidden] { display: none !important; }
.arranque-kwh { display: flex; align-items: center; min-height: 58px; padding: 0 18px; border-radius: 18px; background: rgba(255,255,255,.9); color: var(--tinta-2); font-size: .95rem; }
.arranque .btn { min-height: 58px; border-radius: 18px; }

/* Cifras con conteo */
.cifra b { font-weight: 500; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }

/* ---------- ¿Inyección o híbrido? Simulador de apagón ---------- */
.elige-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 36px; }
.apagon { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 22px 0 10px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; font: 600 1rem/1 var(--f-txt); color: var(--tinta); cursor: pointer; box-shadow: 0 6px 20px -12px rgba(10,22,34,.35); }
.apagon-pista { position: relative; width: 58px; height: 34px; border-radius: 999px; background: #2BB673; transition: background .3s; flex: none; }
.apagon-pista i { position: absolute; top: 4px; left: 28px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .3s var(--curva); }
.apagon[aria-pressed="true"] .apagon-pista { background: #4B5560; }
.apagon[aria-pressed="true"] .apagon-pista i { left: 4px; }
.elige-in { display: grid; gap: 16px; }
.sis { position: relative; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--linea); padding: 22px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.sis-escena { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(180deg, #CFE4F4 0%, #EAF3FA 100%); transition: background .6s; }
.sis-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sis-svg .suelo { fill: #D4DEE5; transition: fill .6s; }
.sis-svg .casa { fill: #1A2C40; }
.sis-svg .techo { fill: #13243A; }
.sis-svg .modulo { fill: #3E7DB8; stroke: #BFD9EF; stroke-width: .6; }
.sis-svg .ventana { fill: #FFD58A; transition: fill .4s; }
.sis-svg .poste { stroke: #5A6875; stroke-width: 3; }
.sis-svg .cable { fill: none; stroke: #5A6875; stroke-width: 1.4; }
.sis-svg .flujo { fill: none; stroke: var(--sol); stroke-width: 2.4; stroke-dasharray: 4 8; animation: fluir 1.2s linear infinite; }
.sis-svg .bat-caja { fill: #fff; stroke: #1A2C40; stroke-width: 1.6; }
.sis-svg .bat-nivel { fill: #2BB673; }
.sis-svg .sol-mini { fill: #F5B13C; }
@keyframes fluir { to { stroke-dashoffset: -24; } }
.sis-estado { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: .98rem; color: var(--tinta-2); min-height: 48px; }
.sis-estado i { width: 10px; height: 10px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 0 5px rgba(43,182,115,.16); flex: none; transition: background .3s, box-shadow .3s; }
.sis h3 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.sis p { color: var(--tinta-2); }
.sis ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.sis li { display: flex; gap: 10px; align-items: flex-start; color: var(--tinta-2); font-size: 1rem; }
.sis li .ic { width: 18px; height: 18px; margin-top: 4px; color: var(--verde); }
.sis li.no .ic { color: var(--tinta-3); }
.sis .btn { align-self: flex-start; margin-top: auto; }
.sis-hib { background: var(--noche); border-color: var(--noche); color: #fff; }
.sis-hib h3 { color: #fff; }
.sis-hib p, .sis-hib li, .sis-hib .sis-estado { color: var(--en-oscuro); }
.sis-hib li .ic { color: #6FDCA4; }
.sis-recomendado { position: absolute; top: 22px; right: 22px; font-size: .85rem; font-weight: 600; color: var(--noche); background: var(--sol-2); padding: 6px 12px; border-radius: 999px; }
/* Apagón */
.elige-in[data-red="off"] .cable-red { stroke: #8795A2; stroke-dasharray: 3 5; }
.elige-in[data-red="off"] .sis-iny .ventana { fill: #26364A; }
.elige-in[data-red="off"] .sis-iny .flujo { opacity: 0; }
.elige-in[data-red="off"] .flujo-red { opacity: 0; }
.elige-in[data-red="off"] .sis-iny .sis-estado i { background: #8B97A2; box-shadow: 0 0 0 5px rgba(139,151,162,.18); }
.elige-in[data-red="off"] .sis-hib .flujo-bat { opacity: 1; }
.flujo-bat { opacity: 0; transition: opacity .3s; }
.elige-in[data-red="off"] .sis-hib .ventana { fill: #FFD58A; }

/* Historia del día: el sol sigue el desplazamiento */
.dia-svg .astro, .dia-svg .halo { transition: none; }

@media (min-width: 640px) {
  .arranque { grid-template-columns: 1fr 1fr; }
  .arranque-tipo { grid-column: 1 / -1; }
  .elige-in { grid-template-columns: 1fr 1fr; }
  .sis { padding: 28px; }
}
@media (min-width: 960px) {
  /* Cabecera en cápsula flotante al bajar */
  .cab.solida { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cab.solida .cab-in { margin-top: 10px; height: 64px; max-width: 1240px; background: rgba(255,255,255,.88); border: 1px solid rgba(213,221,226,.9); border-radius: 999px; padding: 0 10px 0 28px; box-shadow: 0 18px 40px -24px rgba(10,22,34,.45); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); }
  .cab-in { transition: margin .3s var(--curva), height .3s var(--curva), max-width .4s var(--curva), background .3s, padding .3s; }
  .cab.solida .btn-cab { min-height: 46px; }

  .hero { padding: 10px 10px 0; }
  .hero-marco { border-radius: 30px; }
  .hero-in { min-height: calc(100svh - 10px); padding-top: calc(var(--cab-h) + 30px); padding-bottom: 56px; grid-template-columns: 1fr minmax(360px, 430px); gap: 64px; align-items: end; }
  .hero-txt h1 { font-size: clamp(4rem, 6.2vw, 7.2rem); max-width: 13ch; }
  .hero-sub { font-size: 1.18rem; max-width: 40rem; }
  .arranque { grid-template-columns: auto 1fr auto; align-items: center; border-radius: 999px; padding: 7px; gap: 6px; }
  .arranque-tipo { grid-column: auto; border-radius: 999px; grid-template-columns: repeat(3, auto); }
  .arranque-tipo span { border-radius: 999px; padding: 0 16px; min-height: 48px; }
  .arranque-pago, .arranque-kwh { border-radius: 999px; min-height: 54px; }
  .arranque .btn { border-radius: 999px; min-height: 54px; }
  .sol-card { margin-bottom: 4px; }

  .elige-in { gap: 20px; }
  .sis { padding: 36px; gap: 14px; min-height: 100%; }
  .sis-recomendado { top: 36px; right: 36px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .hero-in { grid-template-columns: 1fr 330px; gap: 32px; }
  .arranque { grid-template-columns: 1fr 1fr; border-radius: 26px; }
  .arranque-tipo { grid-column: 1 / -1; }
}
.hero-in { grid-template-columns: minmax(0, 1fr); }
.hero-in > * { min-width: 0; }
.arranque { max-width: 100%; }
.arranque-pago input { width: 100%; min-width: 4ch; }
.sis-recomendado { z-index: 2; }
@media (max-width: 639px) {
  .arranque-tipo span { font-size: .94rem; gap: 5px; }
  .arranque-tipo span .ic { width: 16px; height: 16px; }
  .sol-ahora { font-size: .86rem; }
}
@media (min-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); gap: 56px; }
  .arranque { grid-template-columns: auto minmax(0, 1fr) auto; max-width: 780px; }
  .arranque-pago small { display: none; }
  .arranque-pago input::placeholder { color: #9AA6B0; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .arranque { grid-template-columns: 1fr 1fr; }
}
.arranque-pago small { display: none; }
@media (min-width: 960px) { .arranque-tipo span { padding: 0 13px; } .arranque-pago { min-width: 210px; } }
.elige-in[data-red="off"] .sis-escena { background: linear-gradient(180deg, #DCE3E8 0%, #EEF2F4 100%); }
.elige-in[data-red="off"] .poste { stroke: #9AA6B0; }
@media (min-width: 960px) { .arranque-pago { min-width: 240px; } .arranque-pago input { font-size: 1.12rem; } }

/* ---------- v5.1 · Portada móvil limpia, espera del cotizador ---------- */
.sol-corto { display: none; }
.barra-movil { transition: transform .35s var(--curva), opacity .35s; }
.barra-movil.oculta { transform: translateY(140%); opacity: 0; pointer-events: none; }
.proc-barra { height: 8px; border-radius: 8px; background: var(--papel-2); margin-top: 18px; overflow: hidden; }
.proc-barra i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--sol), #E8892A); transition: width .5s linear; }
.proc-tiempo { margin-top: 8px; font-size: .9rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
@media (max-width: 959px) {
  .aviso-previa { display: none; }
  .cab .btn-cab { display: none; }
  .cab.solida .btn-cab { display: inline-flex; }
  .hero-velo { background: linear-gradient(180deg, rgba(10,22,34,.55) 0%, rgba(10,22,34,.1) 22%, rgba(10,22,34,.35) 42%, rgba(10,22,34,.9) 62%, rgba(10,22,34,.97) 100%); }
  .hero-in { padding-top: calc(var(--cab-h) + 6px); padding-bottom: 22px; gap: 0; grid-template-rows: auto 1fr auto; }
  .sol-card { display: flex; align-items: center; gap: 12px; width: auto; max-width: none; align-self: start; justify-self: start; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(10,22,34,.45); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .sol-card .sol-arco { width: 58px; flex: none; }
  .sol-card .sol-arco .horizonte { stroke-width: 3; }
  .sol-card .sol-arco .pista { stroke-width: 4; stroke-dasharray: 4 12; }
  .sol-card .sol-arco .recorrido { stroke-width: 9; }
  .sol-card .sol-arco .astro { r: 20; } .sol-card .sol-arco .halo { r: 34; }
  .sol-datos, .sol-ahora { display: none; }
  .sol-corto { display: block; font-size: .8rem; line-height: 1.25; color: var(--en-oscuro); }
  .sol-corto b { display: block; font-size: .95rem; font-weight: 600; color: #fff; letter-spacing: -.01em; }
  .hero-txt { grid-row: 3; }
  .hero-txt h1 { font-size: clamp(2.9rem, 12.6vw, 4.6rem); line-height: .96; letter-spacing: -.055em; }
  .sub-largo { display: none; }
  .hero-sub { font-size: 1.05rem; margin-top: 14px; color: #E4EBF0; }
  .arranque { margin-top: 20px; }
  .hero-nota { font-size: .92rem; margin-top: 14px; }
}

/* ---------- Guía ---------- */
.guia { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linea); max-width: 1180px; }
.guia-item { display: grid; grid-template-columns: 48px 1fr; gap: 6px 18px; padding: 28px 0; border-bottom: 1px solid var(--linea); }
.guia-n { width: 48px; height: 48px; border-radius: 50%; background: var(--noche); color: #fff; display: grid; place-items: center; font: 600 1.15rem/1 var(--f-tit); }
.guia-item h2 { font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -.035em; }
.guia-item p { color: var(--tinta-2); margin-top: 8px; max-width: 60ch; }
.guia-exen { grid-column: 2; background: var(--papel); border-radius: var(--r-m); padding: 14px 16px; color: var(--tinta) !important; font-weight: 500; }
.guia-exen b { display: block; font-size: .85rem; color: var(--rojo-texto); font-weight: 600; margin-bottom: 2px; }
@media (min-width: 960px) {
  .guia-item { grid-template-columns: 56px 1.3fr 1fr; gap: 0 32px; align-items: start; padding: 36px 0; }
  .guia-exen { grid-column: 3; margin-top: 0; }
}

/* =====================================================================
   v6 · Páginas de contenido: producto, soluciones, servicios, GD, recursos, testimonios
   ===================================================================== */
.p-cab-dato a { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 15px; font-size: .95rem; color: #E3E9EE; text-decoration: none; }
.p-cab-dato a:hover { border-color: #fff; color: #fff; }
.p-cab-corta { padding-bottom: 22px; }
.p-cab-corta::after, .p-cab-corta::before { display: none; }
.p-tit-art { font-size: clamp(2.3rem, 7.6vw, 4.6rem); max-width: 22ch; }
.p-cab-dos { display: grid; gap: 32px; }
.p-cab-foto { margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--noche-2); }
.p-cab-foto img, .p-cab-foto .ph-img { width: 100%; height: 100%; object-fit: cover; }

/* Producto */
.ficha-prod-sec { padding-top: 32px; }
.ficha-prod { display: grid; gap: 28px; }
.ficha-prod-foto { aspect-ratio: 1; border-radius: var(--r-xl); background: var(--papel); display: grid; place-items: center; overflow: hidden; }
.ficha-prod-foto img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.ficha-prod-foto .ic { width: 96px; height: 96px; color: #AFBAC2; }
.ficha-prod-marca { color: var(--tinta-3); font-size: .98rem; margin-bottom: 8px; }
.ficha-prod-info h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; letter-spacing: -.04em; margin-bottom: 16px; }
.ficha-prod-precio { margin: 22px 0 6px; }
.ficha-prod-precio b { display: block; font: 600 clamp(2.4rem, 7vw, 3.4rem)/1 var(--f-tit); letter-spacing: -.045em; }
.ficha-prod-precio b.sin-precio { font-size: 1.8rem; letter-spacing: -.03em; }
.ficha-prod-precio small { display: block; color: var(--tinta-3); margin-top: 8px; font-size: .95rem; }
.ficha-prod-acc { display: grid; gap: 10px; margin-top: 22px; }
.ficha-prod-garantias { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; color: var(--tinta-2); }
.ficha-prod-garantias li, .lista-check li { display: flex; gap: 10px; align-items: flex-start; }
.ficha-prod-garantias .ic, .lista-check .ic { width: 18px; height: 18px; color: var(--verde); margin-top: 5px; }
.ficha-prod-docs { margin-top: 28px; border-top: 1px solid var(--linea); padding-top: 20px; display: grid; gap: 10px; }
.ficha-prod-docs h2 { font-size: 1.4rem; letter-spacing: -.03em; }
.doc-enlace { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); border: 1px solid var(--linea); text-decoration: none; }
.doc-enlace:hover { border-color: var(--tinta); }
.doc-enlace .ic { width: 28px; height: 28px; color: var(--rojo-marca); }
.doc-enlace b { display: block; font-weight: 600; } .doc-enlace span { color: var(--tinta-3); font-size: .92rem; }
.ficha-prod-desc { margin-top: 56px; max-width: 900px; }
.ficha-prod-desc h2 { font-size: 1.8rem; letter-spacing: -.035em; margin-bottom: 14px; }
.prod-enlace { text-decoration: none; }
.prod-enlace:hover { text-decoration: underline; text-decoration-color: var(--rojo-marca); text-underline-offset: 4px; }
a.prod-foto { text-decoration: none; }

/* Texto largo (artículos, descripciones) */
.texto-largo { max-width: 70ch; color: var(--tinta-2); font-size: 1.1rem; line-height: 1.7; }
.texto-largo h2 { font-size: clamp(1.7rem, 4.6vw, 2.3rem); color: var(--tinta); margin: 44px 0 14px; letter-spacing: -.04em; }
.texto-largo h3 { font-size: 1.4rem; color: var(--tinta); margin: 30px 0 10px; letter-spacing: -.03em; }
.texto-largo p { margin: 0 0 18px; }
.texto-largo ul { margin: 0 0 20px; padding-left: 22px; }
.texto-largo li { margin-bottom: 8px; }
.texto-largo strong { color: var(--tinta); font-weight: 600; }
.texto-largo a { color: var(--tinta); text-decoration-color: var(--rojo-marca); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Soluciones */
.dos-col { display: grid; gap: 36px; }
.lista-check { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; color: var(--tinta-2); }
.lista-check.grande { font-size: 1.15rem; gap: 16px; margin-top: 28px; }
.caja-incluye { background: var(--papel); border-radius: var(--r-xl); padding: 28px; }
.caja-incluye h2 { font-size: 2rem; letter-spacing: -.04em; margin-bottom: 18px; }
.lista-num { margin: 0; padding-left: 22px; display: grid; gap: 12px; color: var(--tinta-2); font-size: 1.05rem; }
.lista-num li::marker { color: var(--rojo-texto); font-weight: 600; }
.nota-caja { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: .95rem; }
.otras { display: grid; gap: 10px; grid-template-columns: 1fr; }
.otra { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--linea); text-decoration: none; }
.otra .sol-ic { margin: 0; width: 44px; height: 44px; }
.otra b { font-weight: 600; }
.otra:hover { border-color: var(--tinta); }
.sol-lista { display: grid; border-top: 1px solid var(--linea); }
.sol-fila { display: grid; grid-template-columns: 52px 1fr 32px; gap: 18px; align-items: center; padding: 24px 4px; border-bottom: 1px solid var(--linea); text-decoration: none; transition: background .2s; }
.sol-fila:hover { background: var(--papel); }
.sol-fila .sol-ic { margin: 0; }
.sol-fila b { display: block; font: 600 clamp(1.4rem, 4vw, 2rem)/1.1 var(--f-tit); letter-spacing: -.035em; }
.sol-fila-txt > span { display: block; color: var(--tinta-2); margin-top: 6px; }
.sol-fila-ir .ic { width: 24px; height: 24px; color: var(--tinta-3); transition: transform .25s, color .25s; }
.sol-fila:hover .sol-fila-ir .ic { transform: translateX(4px); color: var(--rojo-marca); }

/* Servicios */
.servicios { display: grid; gap: 16px; }
.servicio { border: 1px solid var(--linea); border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--cab-h) + 24px); }
.servicio .sol-ic { margin: 0 0 6px; }
.servicio h2 { font-size: 2rem; letter-spacing: -.04em; }
.servicio p { color: var(--tinta-2); }
.servicio .enlace { margin-top: auto; padding-top: 10px; align-self: flex-start; }
.servicio:target { border-color: var(--sol); box-shadow: 0 0 0 3px rgba(245,177,60,.25); }
.proceso-v { grid-template-columns: 1fr !important; }
.proceso-v li { padding: 0 0 30px 66px !important; }
.proceso-v li::before { top: -4px !important; }
.proceso-v li::after { left: 23px !important; right: auto !important; top: 50px !important; bottom: 2px !important; width: 2px !important; height: auto !important; }

/* Generación distribuida */
.flujo-gd { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: f; }
.flujo-gd li { display: grid; grid-template-columns: 52px 1fr; gap: 4px 16px; align-items: start; padding: 18px; border-radius: var(--r-l); background: var(--papel); position: relative; }
.flujo-gd .sol-ic { grid-row: span 2; margin: 0; background: #fff; }
.flujo-gd b { font: 600 1.3rem/1.2 var(--f-tit); letter-spacing: -.03em; }
.flujo-gd li > span:last-child { color: var(--tinta-2); }
.tabla-gd { overflow-x: auto; border-radius: var(--r-l); background: #fff; border: 1px solid var(--linea); }
.tabla-gd table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 1rem; }
.tabla-gd th, .tabla-gd td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--papel-2); }
.tabla-gd thead th { background: var(--noche); color: #fff; font-weight: 600; font-size: .95rem; }
.tabla-gd tbody th { font-weight: 600; width: 26%; }
.tabla-gd td:first-of-type { color: var(--tinta-3); width: 26%; }
.tabla-gd td:last-child { color: var(--tinta); font-weight: 500; background: #FBF7EE; }
.tabla-gd tr:last-child th, .tabla-gd tr:last-child td { border-bottom: 0; }
.casos-gd { display: grid; gap: 16px; margin-top: 32px; }
.casos-gd article { border: 1px solid var(--linea); border-radius: var(--r-l); padding: 26px; }
.casos-gd h3 { font-size: 1.6rem; letter-spacing: -.035em; margin-bottom: 10px; }
.casos-gd p { color: var(--tinta-2); }
.fuentes { margin-top: 64px; border-top: 1px solid var(--linea); padding-top: 24px; color: var(--tinta-3); font-size: .95rem; }
.fuentes h2 { font-size: 1.2rem; letter-spacing: -.02em; color: var(--tinta); margin-bottom: 10px; }
.fuentes ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.fuentes a { color: var(--tinta-2); }

/* Recursos */
.articulos { display: grid; gap: 16px; }
.articulo-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-xl); border: 1px solid var(--linea); background: #fff; text-decoration: none; overflow: hidden; transition: border-color .2s; }
.articulo-card:hover { border-color: var(--tinta); }
.articulo-card img { margin: -26px -26px 8px; width: calc(100% + 52px); max-width: none; aspect-ratio: 16 / 9; object-fit: cover; }
.articulo-card h2 { font-size: 1.7rem; letter-spacing: -.04em; line-height: 1.08; }
.articulo-card p { color: var(--tinta-2); }
.articulo-card small { color: var(--tinta-3); margin-top: auto; padding-top: 6px; }
.articulo-card.destacado { background: var(--noche); border-color: var(--noche); color: #fff; }
.articulo-card.destacado h2 { color: #fff; }
.articulo-card.destacado p { color: var(--en-oscuro); }
.articulo-card.destacado .art-cat { color: var(--sol-2); }
.art-cat { font-size: .92rem; font-weight: 600; color: var(--rojo-texto); }
.art-cuerpo { display: grid; gap: 40px; }
.art-img { border-radius: var(--r-xl); width: 100%; max-width: 1000px; }
.art-cta { border-radius: var(--r-xl); background: var(--papel); padding: 26px; display: grid; gap: 10px; align-self: start; }
.art-cta b { font: 600 1.6rem/1.1 var(--f-tit); letter-spacing: -.035em; }
.art-cta p { color: var(--tinta-2); }
.art-cta .btn { justify-self: start; margin-top: 6px; }

/* Testimonios */
.testi { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--linea); }
.sec-gris .testi { border-color: #fff; }
.testi-video { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16 / 9; background: var(--noche); }
.testi-video iframe { width: 100%; height: 100%; border: 0; }
.testi-estrellas { color: var(--sol); font-size: 1.2rem; letter-spacing: 2px; }
.testi blockquote { margin: 0; font-size: 1.12rem; line-height: 1.6; color: var(--tinta); }
.testi figcaption { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.testi figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testi figcaption span { display: flex; flex-direction: column; color: var(--tinta-2); font-size: .95rem; }
.testi figcaption b { color: var(--tinta); font-weight: 600; }
.testi figcaption small { color: var(--tinta-3); }
.testi figcaption a { color: var(--tinta); font-weight: 600; margin-top: 2px; }

@media (min-width: 640px) {
  .otras { grid-template-columns: 1fr 1fr; }
  .servicios, .articulos, .casos-gd { grid-template-columns: 1fr 1fr; }
  .ficha-prod-acc { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .p-cab-dos { grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; }
  .p-cab-dos .p-tit { font-size: clamp(3rem, 5.4vw, 5.8rem); }
  .ficha-prod { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .ficha-prod-foto { position: sticky; top: calc(var(--cab-h) + 24px); }
  .dos-col { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .otras { grid-template-columns: repeat(3, 1fr); }
  .servicios, .articulos, .casos-gd { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .flujo-gd { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .flujo-gd li { grid-template-columns: 1fr; padding: 24px; }
  .flujo-gd .sol-ic { grid-row: auto; margin-bottom: 8px; }
  .art-cuerpo { grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; }
  .art-img { grid-column: 1 / -1; }
  .art-cta { position: sticky; top: calc(var(--cab-h) + 24px); }
}

/* ---- Mapa de la oficina (Contacto) y equipo (Empresa): datos del panel ---- */
.pie-in p > a { padding: 0; display: inline; }
.mapa-marco { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--linea); background: var(--papel-2); aspect-ratio: 16 / 7; }
.mapa-marco iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapa-pie { margin-top: 10px; }
@media (max-width: 720px) { .mapa-marco { aspect-ratio: 4 / 3; } }
.equipo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; margin-top: 24px; }
@media (max-width: 560px) { .equipo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.persona { margin: 0; text-align: center; }
.persona img, .persona-ini { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-l); background: var(--papel-2); }
.persona-ini { display: grid; place-items: center; font: 600 2.6rem/1 var(--f-tit); color: var(--tinta-3); }
.persona figcaption { margin-top: 10px; }
.persona figcaption b { display: block; color: var(--tinta); }
.persona figcaption span { display: block; color: var(--tinta-2); font-size: .95rem; }

/* ---- Precio de desarrollador / instalador ---- */
.canal-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 2px 0 2px; padding: 6px 0; background: none; border: 0; cursor: pointer; font: 600 .9rem/1.3 var(--f-txt); color: var(--tinta); text-align: left; text-decoration: underline; text-decoration-color: var(--rojo-marca); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.canal-link .ic { width: 18px; height: 18px; flex: none; color: var(--rojo-marca); }
.canal-link:hover { color: var(--rojo-texto); }
.canal-link-g { font-size: 1rem; }
.canal-franja { display: flex; justify-content: flex-end; margin: -6px 0 18px; }
.canal-link-txt { background: none; border: 0; padding: 0; font: inherit; color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--rojo-marca); text-underline-offset: 4px; cursor: pointer; }
.canal-etq { color: var(--verde) !important; font-weight: 600 !important; }
.canal-antes { display: block; margin-top: 6px; font: 400 .85rem/1 var(--f-txt); letter-spacing: 0; color: var(--tinta-3); }
.ficha-prod-precio .canal-etq s { color: var(--tinta-3); font-weight: 400; }
.canal-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; margin: 0 0 18px; border-radius: var(--r-m); background: var(--verde-t); color: var(--tinta); font-size: .95rem; }
.canal-aviso .ic { width: 18px; height: 18px; color: var(--verde); }
.canal-salir { margin-left: auto; background: none; border: 0; padding: 0; font: 600 .9rem/1 var(--f-txt); color: var(--tinta-2); text-decoration: underline; cursor: pointer; }
.canal-dlg { width: min(440px, calc(100vw - 32px)); border: 0; border-radius: var(--r-xl); padding: 0; box-shadow: 0 30px 80px rgba(10, 22, 34, .35); color: var(--tinta); background: var(--blanco); }
.canal-dlg::backdrop { background: rgba(10, 22, 34, .55); backdrop-filter: blur(2px); }
.canal-form { position: relative; display: grid; gap: 12px; padding: 30px 26px 24px; }
.canal-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--papel-2); color: var(--rojo-marca); }
.canal-ic .ic { width: 24px; height: 24px; }
.canal-form h2 { font: 600 1.45rem/1.15 var(--f-tit); letter-spacing: -.02em; margin: 2px 0 0; }
.canal-form label { font-weight: 600; font-size: .98rem; }
.canal-form input { min-height: 52px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: var(--r-m); font: 600 1.15rem/1 var(--f-txt); letter-spacing: .06em; text-transform: uppercase; }
.canal-form input:focus { outline: none; border-color: var(--tinta); }
.canal-msg { min-height: 1.2em; margin: 0; font-size: .92rem; color: var(--rojo-texto); }
.canal-msg.ok { color: var(--verde); }
.canal-sin { margin: 4px 0 0; font-size: .95rem; color: var(--tinta-2); text-align: center; }
.canal-sin a { color: var(--tinta); font-weight: 600; text-decoration-color: var(--rojo-marca); text-underline-offset: 4px; }
.canal-cerrar { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--tinta-2); cursor: pointer; border-radius: 50%; }
.canal-cerrar:hover { background: var(--papel-2); }
.ficha-prod-info .canal-aviso, .ficha-prod-info .canal-link-g { margin-top: 14px; }
.canal-aviso { display: grid; grid-template-columns: auto 1fr auto; }
@media (max-width: 560px) { .canal-aviso { grid-template-columns: auto 1fr; } .canal-aviso .canal-salir { grid-column: 2; justify-self: start; margin-left: 0; } }