/* Resolana · instaladores de placas solares en Almería (concepto ficticio de WEBO)
   Mundo: la carta solar del técnico sobre cal blanca. Mona Sans con eje de anchura, azul de célula,
   un único ámbar de sol. Esquinas de 2 px y filetes de 1 px; las marcas de la brújula son círculos,
   como en una rosa de los vientos. Movimiento 5/10: un día que pasa con el scroll y poco más. */

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/conceptos/monasans-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --blanco: #FBFCFC;
  --palido: #E4EEF5;
  --celula: #111B36;
  --celula-2: #0C1328;
  --pizarra: #4B566B;
  --aluminio: #C9CFD8;
  --ambar: #F2A23C;
  --prod: #C97E22;
  --cons: #5B93D9;
  --borde-campo: #7D8798;
  --error: #B42318;
  --linea: rgb(17 27 54 / .14);
  --linea-oscura: rgb(201 207 216 / .2);

  --margen: clamp(20px, 4.4vw, 64px);
  --ancho: 1312px;
  --cab: 68px;
  --casas-h: clamp(220px, 40svh, 460px);
  --r: 2px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  /* Luz de la portada: el JS cambia data-luz en <html> según la altura del sol */
  --texto: var(--celula);
  --texto-2: #34405A;
  --arco-linea: rgb(17 27 54 / .42);
  --arco-ref: rgb(17 27 54 / .22);
  --foco: var(--celula);
}
html[data-luz="noche"] {
  --texto: #FBFCFC;
  --texto-2: rgb(236 240 246 / .84);
  --arco-linea: rgb(236 240 246 / .44);
  --arco-ref: rgb(236 240 246 / .22);
}

html { background: var(--celula); }
body {
  font-family: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--celula);
  background: var(--blanco);
  font-optical-sizing: auto;
}
::selection { background: rgb(242 162 60 / .38); color: var(--celula); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }

.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r);
  background: var(--celula); color: var(--blanco); text-decoration: none;
}
.saltar:focus-visible { top: 12px; outline-color: var(--ambar); }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r);
  background: var(--b-fondo, var(--celula)); color: var(--b-texto, var(--blanco));
  font: inherit; font-size: 16px; font-weight: 560; font-stretch: 104%; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 200ms ease, color 200ms ease;
}
.boton:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .boton:hover { background: var(--b-hover, #26335C); } }
.boton--claro { --b-fondo: var(--blanco); --b-texto: var(--celula); --b-hover: var(--palido); }

.enlace {
  display: inline-flex; align-items: center; min-height: 48px;
  color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .enlace:hover { text-decoration-color: currentColor; } }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--cab);
  color: var(--texto);
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.cabecera__in {
  display: flex; align-items: center; gap: 28px; height: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen);
}
.cabecera.es-solida {
  color: var(--celula); background: rgb(251 252 252 / .95);
  box-shadow: 0 1px 0 var(--linea);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.marca__signo { width: 30px; height: 30px; flex: none; }
.marca__arco { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 2 2.4; opacity: .7; }
.marca__linea { stroke: currentColor; stroke-width: 1.6; }
.marca__sol { fill: var(--ambar); }
.marca__nombre { font-size: 19px; font-weight: 620; font-stretch: 114%; letter-spacing: -.01em; }
.marca__sub { font-size: 13px; font-stretch: 108%; opacity: .78; padding-left: 10px; border-left: 1px solid currentColor; line-height: 1; }
.cabecera__nav { margin-left: auto; }
.cabecera__nav ul { display: flex; gap: 4px; }
.cabecera__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 15px; font-weight: 460; text-decoration: none; border-radius: var(--r);
  transition: background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .cabecera__nav a:hover { background: color-mix(in srgb, currentColor 9%, transparent); } }
.boton--cab { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
html[data-luz="noche"] .cabecera:not(.es-solida) .boton--cab,
html[data-luz="noche"] .portada .boton { --b-fondo: var(--blanco); --b-texto: var(--celula); --b-hover: var(--palido); }
html[data-luz="noche"] .cabecera:not(.es-solida) { --foco: var(--blanco); }

/* ---------- Portada: el cielo de ahora ---------- */
.portada { position: relative; background: var(--celula-2); }
.escena { position: relative; }
.lienzo {
  position: relative; height: 100svh; min-height: 600px; overflow: hidden; isolation: isolate;
  color: var(--texto); --foco: var(--texto);
}
.cielo, .cielo__capa, .cielo__estrellas { position: absolute; inset: 0; }
.cielo { z-index: 0; }
.cielo__capa { will-change: opacity; }
.cielo__capa--noche { background: linear-gradient(180deg, #0A1230 0%, #131E44 58%, #1E2B57 100%); }
.cielo__capa--alba { background: linear-gradient(180deg, #24346B 0%, #4E5D92 52%, #B98A86 84%, #D9A07E 100%); opacity: 0; }
.cielo__capa--dorada { background: linear-gradient(180deg, #86AED6 0%, #B4C8DC 50%, #EBCDA6 82%, #F3BF86 100%); opacity: 0; }
.cielo__capa--dia { background: linear-gradient(180deg, #92BEE3 0%, #B7D5EC 48%, #DCEAF4 80%, #EAF1F6 100%); opacity: 1; }
.cielo__estrellas {
  opacity: 0; will-change: opacity;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 14%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 19% 31%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 27% 9%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 36% 22%, #fff 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 47% 12%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 55% 34%, #fff 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 63% 7%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 71% 26%, #fff 60%, transparent 62%),
    radial-gradient(1.5px 1.5px at 82% 16%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 90% 38%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 95% 8%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 13% 44%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 42% 41%, #fff 60%, transparent 62%),
    radial-gradient(1.1px 1.1px at 77% 45%, #fff 60%, transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 70%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 70%);
}

/* Arco del sol: lo dibuja el JS en píxeles; sin JS no se enseña */
.arco { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; visibility: hidden; }
.con-js .arco { visibility: visible; }
.arco__ref { fill: none; stroke: var(--arco-ref); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; }
.arco__ref-txt { fill: var(--texto-2); font-size: 11.5px; font-stretch: 108%; opacity: .8; }
.arco__camino { fill: none; stroke: var(--arco-linea); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.arco__hecho { fill: none; stroke: var(--ambar); stroke-width: 2; stroke-linecap: round; }
.arco__tic { fill: var(--texto); opacity: .55; }
.arco__hora { fill: var(--texto-2); font-size: 12px; font-weight: 500; font-stretch: 106%; }
.horizonte { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; visibility: hidden; pointer-events: none; }
.con-js .horizonte { visibility: visible; }
.arco__rumbo-tic { stroke: var(--texto); stroke-width: 1; opacity: .5; }
.arco__rumbo { fill: var(--texto); font-size: 11.5px; font-weight: 600; font-stretch: 112%; opacity: .7; letter-spacing: .04em; }
.arco__extremo { fill: var(--texto); font-size: 12.5px; font-weight: 560; font-stretch: 108%; }

.sol {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 14px rgb(247 200 128 / .42), 0 0 0 38px rgb(250 226 186 / .2);
  opacity: 0; will-change: transform;
}
.sol-etq {
  position: absolute; left: 0; top: 0; z-index: 4;
  padding: 5px 9px; border-radius: var(--r);
  background: var(--celula); color: var(--blanco);
  font-size: 13px; font-weight: 520; font-stretch: 106%; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 0 0 1px rgb(201 207 216 / .22);
  opacity: 0; will-change: transform;
}
.con-js .sol, .con-js .sol-etq { opacity: 1; }
.sol.es-oculto, .sol-etq.es-oculto { opacity: 0; }

/* Casas encaladas (ilustración en tres luces que se funden; con foto, el recorte toma la luz con .casas__tinte) */
.casas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--casas-h); }
.casas__capa, .casas__foto { position: absolute; inset: 0; width: 100%; height: 100%; }
.casas__foto { object-fit: cover; object-position: 50% 100%; }
.casas__capa--dorada, .casas__capa--dia { will-change: opacity; }
.casas__capa--dorada { opacity: 0; }
.casas__capa--dia { opacity: 1; }
.casas__tinte { position: absolute; inset: 0; background: #0B1430; mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.casas__capa--noche {
  --sierra-lejos: #1B2650; --sierra-cerca: #16214A; --suelo: #121B3B; --invernadero: #24325D;
  --muro: #2B3864; --muro-sombra: #222D55; --techo: #35437A; --pretil: #3A4980;
  --teja: #3B3754; --teja-sombra: #2E2A47; --teja-linea: #4A4666;
  --placa: #0C1430; --placa-marco: #46548A; --placa-linea: #1E2B57;
  --ventana: #F4CB7A; --ventana-b: #1B2448; --puerta: #1A2347; --reja: #1A2347; --zocalo: #222E5A;
  --deposito: #3B4A7E; --deposito-tapa: #4B5A90; --antena: #4B5A90;
  --tronco: #1D2749; --palmera: #18223F; --calle: #0D152F; --bordillo: #27345E;
}
.casas__capa--dorada {
  --sierra-lejos: #A99AAE; --sierra-cerca: #8F8199; --suelo: #D7B48B; --invernadero: #EFDCC2;
  --muro: #F6DFC2; --muro-sombra: #C9A890; --techo: #EECBA7; --pretil: #FAEAD6;
  --teja: #B86C55; --teja-sombra: #8C5446; --teja-linea: #A15E4C;
  --placa: #23355F; --placa-marco: #D9C8B6; --placa-linea: #3C4F80;
  --ventana: #48506E; --ventana-b: #48506E; --puerta: #6E5B55; --reja: #5C4D49; --zocalo: #CFAE92;
  --deposito: #E3CDB6; --deposito-tapa: #F2E2CF; --antena: #8E7C73;
  --tronco: #7C6252; --palmera: #6C7650; --calle: #B79C84; --bordillo: #DBC4A8;
}
.casas__capa--dia {
  --sierra-lejos: #B6C4D3; --sierra-cerca: #A0AFBF; --suelo: #E3D8C6; --invernadero: #F4F6F7;
  --muro: #FBFCFC; --muro-sombra: #D6DDE5; --techo: #EDF1F4; --pretil: #FFFFFF;
  --teja: #BF6B51; --teja-sombra: #985440; --teja-linea: #A95D46;
  --placa: #1B2A55; --placa-marco: #C9CFD8; --placa-linea: #34477A;
  --ventana: #4B566B; --ventana-b: #4B566B; --puerta: #2E4A6B; --reja: #2B3550; --zocalo: #C9CFD8;
  --deposito: #E6EAEE; --deposito-tapa: #F6F8F9; --antena: #8C96A5;
  --tronco: #8A7360; --palmera: #5D7854; --calle: #C9CFD8; --bordillo: #E4E8EC;
}

/* Texto de la portada */
.portada__texto {
  position: absolute; z-index: 5; left: var(--margen); top: var(--cab); bottom: var(--casas-h);
  width: min(46vw, 640px);
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding-bottom: 2svh;
}
.portada__titulo {
  font-size: clamp(40px, 4.7vw, 76px); line-height: 1.02; font-weight: 330; font-stretch: 112%;
  letter-spacing: -.028em; max-width: 13ch;
}
.portada__sub { margin-top: clamp(16px, 2svh, 24px); max-width: 44ch; font-size: clamp(16px, 1.25vw, 18.5px); color: var(--texto-2); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: clamp(20px, 3svh, 32px); }
.ahora {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: clamp(18px, 3svh, 30px); padding-top: 14px; max-width: 46ch;
  border-top: 1px solid color-mix(in srgb, var(--texto) 22%, transparent);
  font-size: 14px; line-height: 1.45; color: var(--texto-2);
}
.ahora::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ambar); transform: translateY(-1px); }

/* ---------- Un día en tu tejado ----------
   Por defecto (sin movimiento): sección normal con las cinco fases y la pantalla de la curva. */
.dia { position: relative; background: var(--blanco); color: var(--celula); padding: clamp(72px, 9vw, 128px) var(--margen); }
.dia__panel { max-width: var(--ancho); margin: 0 auto; }
.dia__titulo { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.06; font-weight: 360; font-stretch: 110%; letter-spacing: -.02em; }
.dia__entrada { margin-top: 14px; max-width: 54ch; color: var(--pizarra); }
.fases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: clamp(32px, 4vw, 52px); }
.fase { padding-top: 18px; border-top: 1px solid var(--linea); }
.fase__hora { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; color: var(--pizarra); font-stretch: 106%; }
.fase__reloj { font-size: 22px; font-weight: 540; font-stretch: 112%; color: var(--celula); letter-spacing: -.01em; }
.fase__reloj:empty { display: none; }
.fase h3 { margin-top: 10px; font-size: 19px; line-height: 1.25; font-weight: 540; font-stretch: 104%; }
.fase p:last-child { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--pizarra); }

.curva {
  margin-top: clamp(36px, 4vw, 56px); padding: clamp(18px, 2.4vw, 30px);
  border-radius: var(--r); background: var(--celula); color: var(--blanco);
  --foco: var(--blanco);
}
.curva__leyenda { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: rgb(236 240 246 / .86); font-stretch: 104%; }
.clave { display: inline-flex; align-items: center; gap: 8px; }
.clave::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: var(--prod); }
.clave--cons::before { background: var(--cons); }
.clave--exc::before {
  height: 10px; width: 14px; border-radius: 1px;
  background: repeating-linear-gradient(135deg, rgb(242 162 60 / .75) 0 1.5px, transparent 1.5px 4px);
  box-shadow: inset 0 0 0 1px rgb(242 162 60 / .35);
}
.curva__marco { position: relative; margin-top: 14px; height: clamp(96px, 11vw, 140px); }
.curva__grafico { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.con-js .curva__grafico { visibility: visible; }
.curva__base { stroke: rgb(201 207 216 / .35); stroke-width: 1; }
.curva__marca { stroke: rgb(201 207 216 / .55); stroke-width: 1; }
.curva__area { fill: rgb(201 126 34 / .16); }
.curva__exceso { fill: url(#rayado); }
.rayado__linea { stroke: rgb(242 162 60 / .62); stroke-width: 1.6; }
.curva__prod { fill: none; stroke: var(--prod); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.curva__cons { fill: none; stroke: var(--cons); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.curva__cursor { opacity: 0; }
.curva__cursor line { stroke: rgb(236 240 246 / .5); stroke-width: 1; }
.curva__cursor circle { fill: var(--ambar); stroke: var(--celula); stroke-width: 2; }
.curva__etq {
  position: absolute; left: 0; top: 0; font-size: 12.5px; font-weight: 520; color: rgb(236 240 246 / .9);
  white-space: nowrap; pointer-events: none; opacity: 0;
}
.con-js .curva__etq { opacity: 1; }
.curva__ejes { position: relative; height: 18px; margin-top: 8px; font-size: 12.5px; color: rgb(236 240 246 / .78); }
.curva__ejes span { position: absolute; top: 0; white-space: nowrap; }
.curva__ejes span:nth-child(1) { left: 0; }
.curva__ejes span:nth-child(2) { left: 50%; transform: translateX(-50%); }
.curva__ejes span:nth-child(3) { right: 0; }
.curva__pie { margin-top: 14px; font-size: 13px; line-height: 1.45; color: rgb(236 240 246 / .72); max-width: 70ch; }

/* Con movimiento: la escena se queda fija y el día pasa encima (el JS la ancla con ScrollTrigger) */
.mov .escena { height: 100svh; min-height: 600px; overflow: hidden; }
.mov .lienzo { position: absolute; inset: 0; height: auto; min-height: 0; }
.mov .dia {
  position: absolute; z-index: 6; left: var(--margen); top: var(--cab); bottom: calc(var(--casas-h) - 22px);
  width: min(44vw, 590px); padding: 0; background: none;
  display: flex; flex-direction: column; justify-content: center; pointer-events: none;
}
.mov .dia__panel {
  margin: 0; padding: clamp(20px, 2.2vw, 30px); border-radius: var(--r);
  background: var(--celula); color: var(--blanco);
  box-shadow: 0 0 0 1px rgb(201 207 216 / .18);
  opacity: 0; visibility: hidden; pointer-events: auto;
}
.mov .dia__titulo { font-size: clamp(20px, 1.7vw, 26px); font-weight: 420; letter-spacing: -.01em; }
.mov .dia__entrada { margin-top: 6px; font-size: 14.5px; color: rgb(236 240 246 / .78); }
.mov .fases { display: grid; grid-template-columns: 1fr; margin-top: 18px; gap: 0; }
.mov .fase {
  grid-area: 1 / 1; padding-top: 16px; border-top-color: var(--linea-oscura);
  opacity: 0; transform: translateY(8px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.mov .fase.es-activa { opacity: 1; transform: none; }
.mov .fase__hora, .mov .fase p:last-child { color: rgb(236 240 246 / .8); }
.mov .fase__reloj { color: var(--blanco); }
.mov .fase h3 { font-size: clamp(18px, 1.5vw, 21px); }
.mov .curva { margin-top: 18px; padding: 16px 0 0; border-top: 1px solid var(--linea-oscura); border-radius: 0; background: none; }
.mov .curva__marco { height: clamp(78px, 7.6vw, 104px); }
@media (min-width: 861px) and (max-height: 860px) {
  .mov .dia__entrada { display: none; }
  .mov .dia__panel { padding: 20px 24px; }
  .mov .fases { margin-top: 12px; }
  .mov .curva { margin-top: 12px; padding-top: 12px; }
  .mov .curva__marco { height: 74px; }
}
.mov .curva__cursor { opacity: 1; }
.mov .curva__pie { display: none; }
.mov .portada__texto .portada__titulo, .mov .portada__texto .portada__sub, .mov .portada__texto .acciones, .mov .portada__texto .ahora { visibility: hidden; }
.mov-listo .portada__texto .portada__titulo, .mov-listo .portada__texto .portada__sub, .mov-listo .portada__texto .acciones, .mov-listo .portada__texto .ahora { visibility: visible; }

/* ---------- Bandas comunes ---------- */
.instalamos__in, .tejado__in, .proceso__in, .ayudas__in, .estudio__in, .pie__in {
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding-inline: var(--margen);
}
.instalamos h2, .tejado h2, .proceso h2, .ayudas h2, .estudio h2 {
  font-size: clamp(30px, 3.4vw, 52px); line-height: 1.06; font-weight: 360; font-stretch: 110%; letter-spacing: -.02em;
  max-width: 22ch;
}

/* Qué instalamos: banda de noche */
.instalamos { background: var(--celula); color: var(--blanco); padding-block: clamp(80px, 10vw, 144px); --foco: var(--blanco); }
.instalamos__entrada { margin-top: 16px; max-width: 52ch; color: rgb(236 240 246 / .8); }
.mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 72px); }
.celda--casa { grid-column: 1 / 8; }
.celda--comunidad { grid-column: 8 / 13; }
.celda--negocio { grid-column: 1 / 6; }
.celda--extras { grid-column: 6 / 13; align-self: start; }
.celda__texto { margin-top: 18px; max-width: 46ch; }
.celda h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; font-weight: 460; font-stretch: 106%; }
.celda p { margin-top: 8px; color: rgb(236 240 246 / .8); }
.celda--extras { padding-top: 22px; border-top: 1px solid var(--linea-oscura); }
.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; margin-top: 22px; }
.extras h4 { font-size: 17px; font-weight: 560; font-stretch: 104%; }
.extras p { margin-top: 6px; font-size: 15.5px; line-height: 1.5; }

/* Marcador de foto: una escena dibujada con el mismo vocabulario que las casas de la portada */
.placa-foto { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 8 / 7; background: #D6E6F2; }
.placa-foto__dibujo { position: absolute; inset: 0; width: 100%; height: 100%; }
.placa-foto--casa { aspect-ratio: 16 / 10; }
.placa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Tu tejado: la brújula */
.tejado { background: var(--blanco); padding-block: clamp(80px, 10vw, 144px); }
.tejado__cab p { margin-top: 16px; max-width: 54ch; color: var(--pizarra); }
.brujula {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  margin-top: clamp(36px, 5vw, 64px);
}
.brujula__rosa { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; justify-items: center; gap: 22px; }
.brujula__disco { position: relative; width: min(100%, 460px); aspect-ratio: 1; container-type: inline-size; }
.brujula__plano { position: absolute; inset: 48px; width: calc(100% - 96px); height: calc(100% - 96px); overflow: visible; }
.brujula__aro { fill: var(--palido); stroke: var(--aluminio); stroke-width: 1; }
.brujula__marcas line { stroke: var(--pizarra); stroke-width: 1; opacity: .45; }
.brujula__marcas line.es-mayor { opacity: .9; stroke-width: 1.4; }
.brujula__recorrido { fill: none; stroke: var(--ambar); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.brujula__solcito { fill: var(--ambar); }
.brujula__hora { fill: var(--pizarra); font-size: 9px; font-stretch: 106%; }
.tejado-plano { transform-box: fill-box; transform-origin: center; transition: transform 560ms var(--ease-in-out); }
.tejado-plano__muro { fill: #F4F6F8; stroke: var(--celula); stroke-width: 1.2; }
.tejado-plano__cara--norte { fill: #E2E6EB; }
.tejado-plano__cara--sol { fill: #EEF1F4; }
.tejado-plano__tejas line { stroke: #B9C1CC; stroke-width: 1; }
.tejado-plano__cumbrera { stroke: var(--celula); stroke-width: 1.4; }
.tejado-plano__placas rect { fill: #1B2A55; stroke: var(--aluminio); stroke-width: .8; }
.tejado-plano__pretil { fill: #EEF1F4; stroke: #B9C1CC; stroke-width: 1; }
.tejado-plano__dos-aguas, .tejado-plano__azotea { transition: opacity 220ms ease; }
.tejado-plano__azotea { opacity: 0; }
.es-plana .tejado-plano__dos-aguas { opacity: 0; }
.es-plana .tejado-plano__azotea { opacity: 1; }
.brujula__botones { position: absolute; inset: 0; --radio: calc(50cqi - 24px); }
.rumbo {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  transform: rotate(var(--a)) translateY(calc(var(--radio) * -1)) rotate(calc(var(--a) * -1));
  cursor: pointer;
}
.rumbo > span[aria-hidden] {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--blanco); box-shadow: inset 0 0 0 1px var(--aluminio);
  font-size: 13.5px; font-weight: 600; font-stretch: 108%; color: var(--celula);
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 160ms var(--ease);
}
.rumbo:active > span[aria-hidden] { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .rumbo:hover > span[aria-hidden] { box-shadow: inset 0 0 0 1px var(--celula); } }
.rumbo input:checked + span[aria-hidden] { background: var(--celula); color: var(--blanco); box-shadow: none; }
.rumbo input:focus-visible + span[aria-hidden] { outline: 2px solid var(--celula); outline-offset: 3px; }
.azotea {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--aluminio); cursor: pointer; font-size: 15.5px; font-weight: 500;
  transition: box-shadow 180ms ease, background-color 180ms ease;
}
.azotea input { width: 18px; height: 18px; margin: 0; accent-color: var(--celula); }
.azotea:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--celula); background: var(--palido); }
.azotea:has(input:focus-visible) { outline: 2px solid var(--celula); outline-offset: 3px; }
.azotea input:focus-visible { outline: none; }

.veredicto { max-width: 520px; }
.veredicto__rumbo { color: var(--pizarra); }
.veredicto h3 { min-height: 2.2em; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; font-weight: 380; font-stretch: 108%; letter-spacing: -.015em; }
.franjas { margin-top: 22px; }
.franjas__titulo { font-size: 13.5px; color: var(--pizarra); }
.franjas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.franja__barra { display: block; height: 12px; border-radius: 1px; background: var(--palido); box-shadow: inset 0 0 0 1px var(--aluminio); overflow: hidden; }
.franja__barra span { display: block; height: 100%; background: var(--ambar); opacity: 0; transition: opacity 240ms ease; }
.franja[data-nivel="1"] .franja__barra span { opacity: .3; }
.franja[data-nivel="2"] .franja__barra span { opacity: .62; }
.franja[data-nivel="3"] .franja__barra span { opacity: 1; }
.franja__nombre { display: block; margin-top: 6px; font-size: 13.5px; color: var(--celula); }
.veredicto__texto { margin-top: 20px; font-size: 17.5px; }
.veredicto__nota { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 14.5px; color: var(--pizarra); }
.veredicto__apunte { margin-top: 14px; font-size: 14.5px; font-weight: 520; display: flex; gap: 8px; align-items: baseline; }
.veredicto__apunte[hidden] { display: none; }
.veredicto__apunte::before, .formulario__aviso.es-ok::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ambar); transform: translateY(-1px); }
.veredicto__apunte a { text-underline-offset: 4px; }

/* Proceso */
.proceso { background: var(--palido); padding-block: clamp(80px, 10vw, 140px); }
.pasos { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(40px, 5vw, 64px); }
.pasos__linea { position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: var(--celula); opacity: .35; transform-origin: 0 50%; }
.paso { position: relative; }
.paso__n {
  display: grid; place-items: center; width: 31px; height: 31px; border-radius: var(--r);
  background: var(--palido); box-shadow: inset 0 0 0 1px var(--celula);
  font-size: 14px; font-weight: 600;
}
.paso:first-of-type .paso__n { background: var(--celula); color: var(--blanco); }
.paso h3 { margin-top: 20px; font-size: 19px; line-height: 1.25; font-weight: 540; font-stretch: 104%; }
.paso p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--pizarra); }
.proceso__nota { margin-top: clamp(40px, 5vw, 60px); padding-top: 18px; border-top: 1px solid var(--linea); max-width: 64ch; font-size: 15.5px; color: var(--celula); }

/* Ayudas */
.ayudas { background: var(--blanco); padding-block: clamp(80px, 10vw, 140px); }
.ayudas__listas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); margin-top: clamp(36px, 4.5vw, 60px); }
.lista-ayudas h3 { font-size: 15px; font-weight: 600; font-stretch: 108%; color: var(--pizarra); padding-bottom: 14px; border-bottom: 1px solid var(--celula); }
.lista-ayudas li { padding: 18px 0; border-bottom: 1px solid var(--linea); max-width: 58ch; }
.lista-ayudas strong { font-weight: 600; }
.ayudas__nota { margin-top: 28px; max-width: 70ch; font-size: 15.5px; color: var(--pizarra); }

/* Estudio gratis */
.estudio { background: var(--celula); color: var(--blanco); padding-block: clamp(80px, 10vw, 140px); --foco: var(--blanco); }
.estudio__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.estudio__entrada { margin-top: 16px; max-width: 44ch; color: rgb(236 240 246 / .82); }
.placa-foto--tecnico { margin-top: 32px; aspect-ratio: 4 / 3; }
.contacto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: 28px; }
.contacto dt { font-size: 13px; color: rgb(236 240 246 / .7); }
.contacto dd { margin-top: 3px; font-size: 16px; }
.contacto a { text-underline-offset: 4px; text-decoration-color: rgb(236 240 246 / .45); }
.formulario {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 18px;
  padding: clamp(22px, 3vw, 40px); border-radius: var(--r);
  background: var(--blanco); color: var(--celula); --foco: var(--celula);
}
.campo { display: grid; gap: 7px; align-content: start; min-width: 0; }
.campo--ancho, .campo--opciones, .consentimiento, .formulario__pie { grid-column: 1 / -1; }
.campo label, .campo legend { font-size: 14.5px; font-weight: 540; }
.campo__opcional { font-weight: 400; color: var(--pizarra); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--borde-campo); border-radius: var(--r);
  background: #fff; color: var(--celula); font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo textarea { padding: 12px 14px; resize: vertical; min-height: 96px; line-height: 1.45; }
.campo select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111B36' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--celula); box-shadow: 0 0 0 1px var(--celula); }
.campo [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.campo--opciones { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo--opciones legend { padding: 0; margin-bottom: 7px; }
.opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcion span {
  display: grid; place-items: center; min-height: 46px; padding: 0 10px;
  box-shadow: inset 0 0 0 1px var(--borde-campo); font-size: 15.5px; font-weight: 500;
  transition: background-color 180ms ease, color 180ms ease;
}
.opcion + .opcion span { margin-left: -1px; }
.opcion:first-child span { border-radius: var(--r) 0 0 var(--r); }
.opcion:last-child span { border-radius: 0 var(--r) var(--r) 0; }
.opcion input:checked + span { background: var(--celula); color: var(--blanco); box-shadow: inset 0 0 0 1px var(--celula); }
.opcion input:focus-visible + span { outline: 2px solid var(--celula); outline-offset: 2px; position: relative; z-index: 1; }
.consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.consentimiento input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--celula); }
.consentimiento input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.formulario__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.formulario__aviso { font-size: 15px; line-height: 1.45; max-width: 46ch; }
.formulario__aviso:empty { display: none; }
.formulario__aviso.es-error { color: var(--error); }
.formulario__aviso.es-ok { color: var(--celula); display: flex; gap: 10px; align-items: baseline; }

/* Pie */
.pie { background: var(--celula-2); color: rgb(236 240 246 / .86); padding: 36px 0 96px; box-shadow: inset 0 1px 0 var(--linea-oscura); --foco: var(--blanco); }
.pie__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; font-size: 14.5px; }
.pie__marca { font-weight: 600; font-stretch: 110%; color: var(--blanco); }
.pie nav { margin-left: auto; }
.pie ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; text-decoration-color: rgb(236 240 246 / .4); }

.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Adaptación ---------- */
@media (max-width: 1080px) {
  .cabecera__nav { display: none; }
  .boton--cab { margin-left: auto; }
  .fases { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .pasos__linea { display: none; }
}
@media (max-width: 860px) {
  :root { --cab: 62px; --casas-h: clamp(170px, 24svh, 240px); }
  .sol { width: 30px; height: 30px; margin: -15px 0 0 -15px; box-shadow: 0 0 0 10px rgb(247 200 128 / .42), 0 0 0 26px rgb(250 226 186 / .2); }
  .ahora:not(.es-noche) { display: none; }
  .marca__sub { display: none; }
  .portada__texto {
    left: var(--margen); right: var(--margen); width: auto; bottom: auto;
    top: calc(var(--cab) + 14px); justify-content: flex-start; padding: 0;
  }
  .portada__titulo { font-size: clamp(36px, 10.4vw, 52px); max-width: 12ch; }
  .portada__sub { font-size: 16px; }
  .acciones { gap: 4px 20px; margin-top: 18px; }
  .ahora { margin-top: 14px; padding-top: 12px; font-size: 13.5px; }
  .mov .dia { left: var(--margen); right: var(--margen); width: auto; top: calc(var(--cab) + 10px); bottom: auto; justify-content: flex-start; }
  .mov .dia__panel { padding: 16px 16px 14px; }
  .mov .dia__entrada { display: none; }
  .mov .fases { margin-top: 10px; }
  .mov .fase { padding-top: 10px; }
  .mov .fase__reloj { font-size: 18px; }
  .mov .fase h3 { margin-top: 4px; font-size: 17.5px; }
  .mov .fase p:last-child { font-size: 14.5px; margin-top: 4px; }
  .mov .curva { margin-top: 12px; padding-top: 10px; }
  .mov .curva__leyenda { font-size: 12px; gap: 4px 14px; }
  .mov .curva__marco { height: 72px; margin-top: 10px; }
  .mov .curva__ejes { font-size: 11.5px; margin-top: 6px; }
  .fases { grid-template-columns: 1fr; gap: 0; }
  .fase { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; padding: 16px 0 18px; }
  .fase__hora { grid-row: 1 / span 2; flex-direction: column; gap: 2px; }
  .fase h3 { margin-top: 0; }
  .mov .fase { display: block; }
  .mov .fase__hora { flex-direction: row; gap: 4px 10px; }
  .mosaico { grid-template-columns: 1fr; }
  .celda--casa, .celda--comunidad, .celda--negocio, .celda--extras { grid-column: 1; }
  .placa-foto, .placa-foto--casa { aspect-ratio: 4 / 3; }
  .brujula { grid-template-columns: 1fr; }
  .veredicto { max-width: none; }
  .estudio__in { grid-template-columns: 1fr; gap: 28px; }
  .estudio__texto { display: contents; }
  .estudio__texto h2 { order: 1; }
  .estudio__entrada { order: 2; margin-top: -12px; }
  .estudio .formulario { order: 3; }
  .estudio .contacto { order: 4; margin-top: 4px; }
  .placa-foto--tecnico { order: 5; margin-top: 0; }
  .ayudas__listas { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .boton--cab { padding: 0 13px; font-size: 14px; }
  .extras { grid-template-columns: 1fr; gap: 20px; }
  .pasos { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .paso { display: grid; grid-template-columns: 31px minmax(0, 1fr); column-gap: 18px; padding-bottom: 28px; }
  .paso__n { grid-row: 1 / span 2; }
  .paso h3 { margin-top: 4px; }
  .pasos__linea { display: block; left: 15px; right: auto; top: 0; bottom: 28px; width: 1px; height: auto; transform-origin: 50% 0; }
  .formulario { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: 1fr; }
  .brujula__plano { inset: 44px; width: calc(100% - 88px); height: calc(100% - 88px); }
  .pie nav { margin-left: 0; }
}
@media (max-width: 380px) {
  .marca__nombre { font-size: 17px; }
  .boton--cab { min-height: 38px; padding: 0 10px; font-size: 13px; }
}
@media (max-height: 640px) and (min-width: 861px) {
  .ahora { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tejado-plano { transition-duration: 1ms; }
  .fase, .mov .fase { transition: none; }
}
@media (forced-colors: active) {
  .sol { forced-color-adjust: none; }
  .rumbo input:checked + span[aria-hidden] { outline: 2px solid CanvasText; }
}