@charset "utf-8";
/* =========================================================
   XOLARIS · VIDA
   Firma de movimiento: «se cruza». Dos trazos: lo que queda por recuperar baja,
   el ahorro sube en diagonal (de abajo-izquierda a arriba-derecha). Ritmo de contador:
   seco y exacto, sin rebote. Textura: trazo fino de gráfica, tinta y turquesa.
   ========================================================= */
:root{
  --vida-dur:.72s;
  --vida-ease:cubic-bezier(.65,0,.35,1);
  --vida-dir:-35deg;          /* la diagonal del ahorro */
  --vida-dx:-14px; --vida-dy:14px;   /* todo entra desde abajo-izquierda */
}
@media (max-width:700px){:root{--vida-dx:0px;--vida-dy:18px}}

/* ---------- cabecera: dos líneas que se cruzan con el scroll ---------- */
.vida-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.vida-prog i{position:absolute;top:0;height:2px;width:100%;transform-origin:left center}
.vida-prog .p{right:0;left:auto;background:var(--fg,#0C1B22);opacity:.55;transform-origin:right center;transform:scaleX(var(--vp-r,1))}
.vida-prog .a{left:0;background:var(--sol);transform:scaleX(var(--vp,0))}
.hdr--inv:not(.is-solid) .vida-prog .p{background:#fff}

/* ---------- portada: imagen o vídeo a pantalla completa ---------- */
.inicio--media{position:relative;isolation:isolate;color:#fff;--fg:#fff;--fg-2:#D6E0E2;--linea:rgba(255,255,255,.2);--linea-2:rgba(255,255,255,.35)}
.inicio__media{position:absolute!important;inset:0;z-index:-1;aspect-ratio:auto!important;background:var(--tinta)}
.inicio__media>img,.inicio__media>video{transform:scale(1.06);transition:opacity 1.2s var(--vida-ease),transform 6s var(--vida-ease)}
.inicio__media.has-img>img,.inicio__media.has-img>video{transform:scale(1)}
.inicio__media::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,rgba(12,27,34,.88) 0%,rgba(12,27,34,.62) 42%,rgba(12,27,34,.18) 72%,rgba(12,27,34,.35) 100%),
  linear-gradient(0deg,rgba(12,27,34,.55),transparent 40%)}
.inicio--media .k{color:#D6E0E2}
.inicio--media .k::before{--sol:var(--sol-2)}
.inicio--media .notas b{color:#fff}
.inicio--media .notas a{color:var(--sol-2)}
.inicio--media .calc{color:var(--tinta);--fg:var(--tinta);--fg-2:#4A5A60;--linea:rgba(12,27,34,.12);--linea-2:rgba(12,27,34,.26);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.inicio--media{padding-bottom:clamp(40px,5vw,80px)}
@media (max-width:980px){.inicio__media::after{background:linear-gradient(180deg,rgba(12,27,34,.62) 0%,rgba(12,27,34,.4) 26%,rgba(12,27,34,.22) 40%,rgba(12,27,34,.55) 58%,rgba(12,27,34,.88) 100%)}.inicio--media .calc{margin-top:34vw}}
/* el titular se compone línea a línea, subiendo en diagonal */
.vida-l{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.vida-l>span{display:inline-block;transform:translate(calc(var(--vida-dx) * 1.6),110%);transition:transform calc(var(--vida-dur) * 1.3) var(--vida-ease)}
.is-vida .vida-l>span{transform:none}

/* ---------- bandas a todo el ancho, con parallax ---------- */
.vb{position:relative;width:100%;overflow:hidden;background:var(--tinta)}
.vb>.art{--ratio:auto!important;aspect-ratio:auto!important;height:min(56.25vw,82vh);min-height:240px;background:var(--tinta)}
.vb>.art>img,.vb>.art>svg,.vb>.art>video{inset:-8% 0 auto;height:116%;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.vb--cab>.art{height:min(46vw,70vh)}
@media (max-width:700px){.vb>.art{height:62vw}}

/* ---------- revelado por máscara: la diagonal del ahorro ---------- */
/* el recorte va en los hijos, nunca en la figura observada */
.vm>img,.vm>svg,.vm>video{clip-path:polygon(0 100%,0 100%,0 100%,0 100%);transition:clip-path calc(var(--vida-dur) * 1.6) var(--vida-ease),opacity 1s var(--ease)}
.vm.is-cut>img,.vm.is-cut>svg,.vm.is-cut>video{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.vm::after{content:"";position:absolute;z-index:3;left:0;bottom:0;width:142%;height:3px;background:var(--sol);transform-origin:left bottom;transform:rotate(var(--vida-dir)) scaleX(0);pointer-events:none;opacity:.95;transition:transform calc(var(--vida-dur) * 1.6) var(--vida-ease),opacity .4s calc(var(--vida-dur) * 1.6)}
.vm.is-cut::after{transform:rotate(var(--vida-dir)) scaleX(1);opacity:0}

/* ---------- separadores: los dos trazos del logo se dibujan al pasar ---------- */
.vsep{position:relative;height:clamp(36px,4.4vw,64px);max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.vsep svg{width:100%;height:100%;overflow:visible}
.vsep path{fill:none;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset calc(var(--vida-dur) * 1.8) var(--vida-ease)}
.vsep .p{stroke:var(--tinta);opacity:.5}
.vsep .a{stroke:var(--sol);stroke-width:2.5;transition-delay:.18s}
.vsep circle{fill:#fff;stroke:var(--tinta);stroke-width:1.5;opacity:0;transition:opacity .3s calc(var(--vida-dur) * 1.6)}
.vsep.is-on path{stroke-dashoffset:0}
.vsep.is-on circle{opacity:1}

/* ---------- listas escalonadas, entrando por la diagonal ---------- */
.vst>*{opacity:0;transform:translate(var(--vida-dx),var(--vida-dy));transition:opacity var(--vida-dur) var(--vida-ease),transform var(--vida-dur) var(--vida-ease);transition-delay:calc(var(--i,0) * 80ms)}
.vst.is-on>*{opacity:1;transform:none}
.vst>.rv{opacity:0}
.vst.is-on>.rv{opacity:1}

/* ---------- botones: el trazo del ahorro se cruza con el de la tinta ---------- */
.btn::before{content:"";position:absolute;right:calc(1.1em + 1px);top:50%;width:12px;height:2px;background:currentColor;opacity:0;transform:translateY(-50%) rotate(35deg) scaleX(.2);transition:transform .35s var(--vida-ease),opacity .2s}
.btn{position:relative}
.btn:hover::before{opacity:.8;transform:translateY(-50%) rotate(35deg) scaleX(1)}

/* ---------- cifra que cuenta (rentabilidad) ---------- */
[data-hero-pay].is-cuenta{font-variant-numeric:tabular-nums}

/* ---------- visita: atención con foto ---------- */
.vat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:center;margin-bottom:clamp(28px,4vw,56px)}
.vat>.datos-c{margin:0}
@media (max-width:820px){.vat{grid-template-columns:1fr}}

/* ---------- confirmación: los dos trazos se cruzan sobre el 0,00 € ---------- */
.vconf{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.vconf path{fill:none;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--vida-ease)}
.vconf .p{stroke:var(--tinta)}
.vconf .a{stroke:var(--sol);stroke-width:4;transition-delay:.2s}
.vconf.is-on path{stroke-dashoffset:0}
.fra{position:sticky}
.fra.is-pagada .fra__t tfoot td{color:var(--sol-osc);transition:color .4s 1s}

/* ---------- transición entre páginas: entra subiendo por la diagonal ---------- */
.vida-in main{animation:vidaIn calc(var(--vida-dur) * .9) var(--vida-ease) both}
@keyframes vidaIn{from{opacity:0;transform:translate(calc(var(--vida-dx) * .6),calc(var(--vida-dy) * .8))}to{opacity:1;transform:none}}

/* ---------- movimiento reducido: todo visible y quieto ---------- */
@media (prefers-reduced-motion:reduce){
  .vida-l>span,.vst>*,.vsep path,.vsep circle,.vconf path{transition:none!important;transform:none!important;opacity:1!important;stroke-dashoffset:0!important}
  .vm>img,.vm>svg,.vm>video{clip-path:none!important;transition:opacity .3s!important}
  .vm::after{display:none}
  .vb>.art>img,.vb>.art>svg{transform:none!important}
  .vida-in main{animation:none}
  .inicio__media>img,.inicio__media>video{transform:none!important}
}