@charset "utf-8";
/* Modus Clima · «vida» en toda la web.
   Firma de movimiento: BARRE (el cierzo) · diagonal NO→SE (móvil: de arriba abajo)
   · limpio y firme, sin rebote · textura: lamas del split, de frío a calor. */
:root{
  --vida-dur:.9s;
  --vida-ease:cubic-bezier(.7,0,.2,1);
  --vida-dir:135deg;
  --vida-lamas:repeating-linear-gradient(180deg,#000 0 2.5px,transparent 2.5px 5px);
  --vida-frio:#1A72A6;
  --vida-calor:#D63A22;
}

/* ---------- entrada a cada página: una cortina de lamas barre en diagonal ---------- */
html.vw-entra body::after{content:"";position:fixed;inset:-100%;z-index:9999;pointer-events:none}
/* entrar: la parte oscura está al sureste y el filo de lamas avanza hacia allí, destapando desde el noroeste */
html.vw-entra body::after{background:linear-gradient(var(--vida-dir),transparent 0 49.2%,var(--vida-frio) 49.2%,var(--vida-calor) 50.4%,var(--noche) 50.4%);
  animation:vw-barre .6s var(--vida-ease) .05s both}
@keyframes vw-barre{from{transform:translate(-34%,-34%)}to{transform:translate(34%,34%)}}

/* ---------- botones: las lamas cruzan al pasar ---------- */
.btn::after{content:"";position:absolute;left:14%;right:14%;bottom:7px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--vida-frio),var(--vida-calor));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--vida-ease)}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}

/* ---------- cortes diagonales: tres lamas que se dibujan al llegar ---------- */
.vw-filo{position:absolute;left:0;right:0;top:0;height:var(--cut,48px);pointer-events:none;z-index:1}
.vw-filo svg{width:100%;height:100%;display:block;overflow:visible}
.vw-filo svg{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--vida-ease)}
.vw-filo.is-on svg{clip-path:inset(-10px 0 -10px 0)}

/* ---------- cabeceras e imágenes: se descubren en diagonal ---------- */
.vw-telon{position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--noche);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path var(--vida-dur) var(--vida-ease)}
.vw-telon::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--vida-dir),var(--vida-frio),var(--vida-calor));-webkit-mask:var(--vida-lamas);mask:var(--vida-lamas);opacity:.5}
.is-destapada > .vw-telon{clip-path:polygon(100% 100%,100% 100%,100% 100%,100% 100%)}
.ph-hero-media{overflow:hidden}

/* ---------- bandas de vídeo a todo el ancho ---------- */
.vw-band{position:relative;height:clamp(320px,62vh,640px);overflow:hidden;background:var(--noche)}
.vw-band .ph{position:absolute;left:0;right:0;top:-12%;height:124%;border-radius:0;transform:translateY(var(--vw-par,0px));will-change:transform}
.vw-band .ph-cap{bottom:calc(12% + 14px)}

/* ---------- fotos con movimiento de cámara (en lugar de vídeo): un travelling lento en la diagonal del cierzo ---------- */
.ph.vw-cine > img,.ph.vw-cine > .ph-art{animation:vw-cine 22s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:30% 30%}
.ph.vw-cine.is-vis > img,.ph.vw-cine.is-vis > .ph-art{animation-play-state:running}
@keyframes vw-cine{from{transform:scale(1.03) translate(-1.2%,-1.2%)}to{transform:scale(1.13) translate(1.4%,1.4%)}}

/* ---------- piezas que se dibujan o se colocan al entrar ---------- */
.vw-trazo{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--vida-ease)}
.is-trazado .vw-trazo{stroke-dashoffset:0}
.vw-estampa{transform:scale(1.06) rotate(-2deg);opacity:0;transition:transform .7s var(--vida-ease),opacity .4s}
.vw-estampa.is-on{transform:none;opacity:1}
.peg-svg.vw-pega{transform:rotate(-28deg) scale(1.18) translate(-30px,-30px);opacity:0;transition:transform 1s var(--vida-ease),opacity .5s}
.peg-svg.vw-pega.is-on{transform:rotate(-4deg);opacity:1}
.vw-cae{opacity:0;transform:translate(-14px,-18px);transition:opacity .5s, transform .7s var(--vida-ease)}
.is-cayendo .vw-cae{opacity:1;transform:none}
button.cq-s.vw-franja,span.cq-s.vw-franja{transform:scaleX(0);transform-origin:left;transition:transform .5s var(--vida-ease)}
.is-rellena .cq-s.vw-franja{transform:none}
.bloque-vivo > g.vw-planta{opacity:0;transition:opacity .6s var(--vida-ease)}
.is-llena .bloque-vivo > g.vw-planta{opacity:1}

/* ---------- Calderas: la mañana del cambio se rellena de 08:00 a 14:00 ---------- */
.horas.vw-dia{position:relative}
.horas.vw-dia::after{content:"";position:absolute;left:0;right:0;top:-2px;height:3px;background:linear-gradient(90deg,var(--vida-frio),var(--vida-calor));transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--vida-ease)}
.horas.vw-dia.is-on::after{transform:none}
@media (max-width:1180px){ .horas.vw-dia::after{display:none} }

/* ---------- formulario: los pasos entran barriendo ---------- */
.ot-step.is-on{animation:vw-paso .7s var(--vida-ease) both}
@keyframes vw-paso{from{clip-path:polygon(0 0,0 0,0 100%,0 100%);opacity:.3}to{clip-path:polygon(0 0,140% 0,100% 100%,0 100%);opacity:1}}
[data-ot-bar]{background:linear-gradient(90deg,var(--vida-frio),var(--vida-calor))!important}

@media (prefers-reduced-motion:reduce){
  html.vw-entra body::after{display:none}
  .horas.vw-dia::after{transform:none;transition:none}
  .btn::after{display:none}
  .vw-filo svg{clip-path:none;transition:none}
  .vw-trazo{stroke-dashoffset:0;transition:none}
  .vw-telon{display:none}
  .vw-band .ph{transform:none}
  .ph.vw-cine > img,.ph.vw-cine > .ph-art{animation:none}
  .vw-estampa,.peg-svg.vw-pega,.vw-cae,.cq-s.vw-franja,.bloque-vivo > g.vw-planta{opacity:1;transform:none;translate:none;transition:none}
  .ot-step.is-on{animation:none}
}