@charset "utf-8";
/* DINTEL · VIDA
   Firma «da paso»: todo se abate como la hoja de una puerta sobre su bisagra,
   un cuarto de vuelta desde la esquina inferior izquierda, firme y con un tope suave.
   Textura: el arco de giro de los planos (línea fina verde) y el escalón de los dientes de la llave. */
:root{
  --vida-dur:.75s;
  --vida-ease:cubic-bezier(.25,.8,.25,1);
  --vida-dir:0% 100%;              /* bisagra: esquina inferior izquierda */
  --vida-step:60ms;
  --vida-from:0deg;                 /* la hoja arranca vertical, pegada al marco */
}
@property --vida-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --vida-r{syntax:'<length>';inherits:false;initial-value:0px}
/* ---------- cabeceras con imagen ---------- */
.vcab{padding:clamp(22px,3vw,36px) 0 clamp(26px,3.4vw,44px);border-bottom:1px solid var(--linea);overflow:hidden}
.vcab .crumbs{margin-bottom:10px}
.vcab-t{min-width:0;align-self:center}
.vcab-t .lead{margin:12px 0 0}
.vcab-m{position:relative;margin:0;min-width:0}
.vm{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--niebla)}
.vm>.ph{position:absolute;inset:0}
.vm .vv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.vm .vv.on{opacity:1}
/* el arco de giro dibujado en la esquina de la bisagra */
.arc{position:absolute;left:14px;bottom:14px;width:72px;height:72px;overflow:visible;pointer-events:none;z-index:4;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.arc path{fill:none;stroke:#fff;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-dasharray:160;stroke-dashoffset:160}
.go .arc path{transition:stroke-dashoffset calc(var(--vida-dur)*1.5) var(--vida-ease);stroke-dashoffset:0}
/* la imagen entra con un cuarto de círculo que crece desde la bisagra (máscara en el hijo, no en el observado) */
.js-vida .vcab-m .vm>*,.js-vida .own-ph .vm>*,.js-vida .hm .hc.big>.ph{--vida-a:0deg;-webkit-mask-image:conic-gradient(from var(--vida-from) at var(--vida-dir),#000 var(--vida-a),transparent var(--vida-a));mask-image:conic-gradient(from var(--vida-from) at var(--vida-dir),#000 var(--vida-a),transparent var(--vida-a));transition:--vida-a calc(var(--vida-dur)*1.5) var(--vida-ease)}
.js-vida .go .vm>*,.js-vida .hm.go .hc.big>.ph{--vida-a:91deg}
.v-mirror,.v-bleed.l{--vida-dir:100% 100%;--vida-from:270deg}
.hm .hc.big .arc{z-index:4}
/* titulares: la línea se abate desde su esquina */
.js-vida .vh{transform-origin:0 100%;transform:rotate(3deg) translateY(10px);opacity:0;transition:transform var(--vida-dur) var(--vida-ease),opacity var(--vida-dur) var(--vida-ease)}
.js-vida .go .vh,.js-vida .vh.go{transform:none;opacity:1}
/* composiciones */
.v-list .vcab-g{display:grid;grid-template-columns:minmax(0,1fr) min(400px,34vw);gap:20px 40px;align-items:center}
.v-list.vcab{padding-bottom:18px}
.v-side .vcab-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:28px 56px;align-items:center}
.v-mirror .vcab-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:28px 56px;align-items:center}
.v-mirror .vcab-m .arc{left:auto;right:14px;transform:scaleX(-1)}
.v-mirror .ph-c{align-items:flex-start;margin-top:18px}
.v-bleed{display:grid;align-items:center;gap:28px 0}
.v-bleed.r{grid-template-columns:minmax(var(--gut),1fr) minmax(0,calc((var(--max) - 2*var(--gut))*.4)) 48px minmax(0,calc((var(--max) - 2*var(--gut))*.6 - 48px)) minmax(0,1fr)}
.v-bleed.r .vcab-t{grid-column:2}.v-bleed.r .vcab-m{grid-column:4/6}
.v-bleed.r .vm{border-radius:var(--r-l) 0 0 var(--r-l)}
.v-bleed.l{grid-template-columns:minmax(0,1fr) minmax(0,calc((var(--max) - 2*var(--gut))*.6 - 48px)) 48px minmax(0,calc((var(--max) - 2*var(--gut))*.4)) minmax(var(--gut),1fr)}
.v-bleed.l .vcab-m{grid-column:1/3}.v-bleed.l .vcab-t{grid-column:4}
.v-bleed.l .vm{border-radius:0 var(--r-l) var(--r-l) 0}
.v-bleed.l .arc{left:auto;right:14px;transform:scaleX(-1)}
.v-bleed.l .vcab-t p:last-child{margin:18px 0 0}
.v-wide .vcab-m{margin-top:clamp(20px,3vw,32px)}
.v-wide .cartela{position:absolute;right:20px;bottom:20px;z-index:3;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;max-width:300px;display:grid;gap:4px}
.v-wide .cartela .kicker{margin:0}
.v-wide .cartela .lnk{margin-top:10px}
.v-wide .cartela b{font-family:var(--f-h);font-size:1.05rem}
.v-wide .cartela span{color:var(--tinta-2);font-size:.94rem}
.plano-l{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:24px 24px;mix-blend-mode:overlay}
/* portada: foto en propietarios */
.own-g{grid-template-columns:minmax(0,2.6fr) minmax(0,5fr) minmax(0,5fr)}
@media (max-width:1199px){.own-ph{display:none}.own-g{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.own-ph{position:relative;margin:0}
.own-ph .vm{border-radius:var(--r-l)}
.own-ph .vm>.ph{position:absolute;inset:0}
.plans-ph{position:relative;overflow:hidden;border-radius:var(--r);margin:-8px -8px 16px;width:calc(100% + 16px);max-width:none}
.plans-ph .ph{position:absolute;inset:0}
/* ---------- profundidad por capas: la foto va más lenta que su marco ---------- */
.capas>.ph canvas,.capas>.ph img{transform:scale(1.1) translate3d(0,var(--py,0px),0);transition:none}
/* ---------- tarjetas y piezas que se abaten sobre su bisagra ---------- */
.js-vida .abate{transform-origin:0 100%;transform:perspective(1100px) rotateY(-16deg) rotateZ(1.5deg);opacity:0;transition:transform var(--vida-dur) var(--vida-ease),opacity var(--vida-dur) var(--vida-ease);transition-delay:var(--vd,0s)}
.js-vida .abate.go{transform:none;opacity:1}
/* portada: el mosaico se abre en abanico */
.js-vida .hm .hc{transform-origin:0 100%;transform:rotate(-7deg) translateY(20px);opacity:0;transition:transform calc(var(--vida-dur)*1.2) var(--vida-ease),opacity var(--vida-dur) var(--vida-ease)}
.js-vida .hm.go .hc{transform:none;opacity:1}
.js-vida .hm.go .hc:nth-child(2){transition-delay:.12s}.js-vida .hm.go .hc:nth-child(3){transition-delay:.24s}
/* segunda foto al pasar el ratón */
.card .c-img .ph.alt{opacity:0;transition:opacity .45s var(--vida-ease)}
@media (hover:hover){.card:hover .c-img .ph.alt.ready{opacity:1}}
/* marcas de sección: el escalón de la llave que se traza delante del rótulo */
.kicker{display:flex;align-items:center;gap:8px}
.kicker .kmark{width:22px;height:14px;flex:none}
.kicker .kmark path{fill:none;stroke:currentColor;stroke-width:2}
/* plano y comparador que se dibujan */
.js-vida .plan.draw .rm rect{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);fill-opacity:0;transition:stroke-dashoffset 1.6s var(--vida-ease),fill-opacity .6s ease 1.2s}
.js-vida .plan.draw.go .rm rect{stroke-dashoffset:0;fill-opacity:1}
.js-vida .plan.draw .rm text{opacity:0;transition:opacity .5s ease 1.3s}
.js-vida .plan.draw.go .rm text{opacity:1}
/* cronología: la línea se traza de arriba abajo y cada año se abate */
.js-vida .hist{border-left-color:transparent;position:relative}
.js-vida .hist::after{content:"";position:absolute;left:-2px;top:0;width:2px;height:100%;background:var(--linea-2);transform-origin:top;transform:scaleY(0);transition:transform 1.4s var(--vida-ease)}
.js-vida .hist.go::after{transform:scaleY(1)}
/* pasos entre bloques: al entrar, la esquina superior izquierda del bloque gris u oscuro gira como la hoja de una puerta y deja su arco de giro */
:root{--vida-rmax:clamp(56px,9vw,132px)}
.js-vida .sec.gray,.js-vida .sec.dark{position:relative;border-top-left-radius:var(--vida-r);transition:--vida-r calc(var(--vida-dur)*1.4) var(--vida-ease)}
.js-vida .sec.gray.go,.js-vida .sec.dark.go{--vida-r:var(--vida-rmax)}
.js-vida .sec.gray::before,.js-vida .sec.dark::before{content:"";position:absolute;left:-10px;top:-10px;width:calc(var(--vida-rmax) + 10px);height:calc(var(--vida-rmax) + 10px);border-top:2px solid var(--verde);border-left:2px solid var(--verde);border-top-left-radius:calc(var(--vida-rmax) + 10px);pointer-events:none;opacity:0;transform-origin:100% 100%;transform:rotate(-90deg);transition:transform calc(var(--vida-dur)*1.4) var(--vida-ease),opacity .3s}
.js-vida .sec.gray.go::before,.js-vida .sec.dark.go::before{opacity:1;transform:none}
/* legales: casi quietas */
body[data-page=legal] .vh{transform:none!important}
/* ---------- móvil ---------- */
@media (max-width:980px){
  .v-list .vcab-g,.v-side .vcab-g,.v-mirror .vcab-g{grid-template-columns:minmax(0,1fr)}
  .v-mirror .vcab-m{order:2}
  .v-bleed.r,.v-bleed.l{grid-template-columns:var(--gut) minmax(0,1fr) var(--gut)}
  .v-bleed.r .vcab-t,.v-bleed.l .vcab-t{grid-column:2;grid-row:1}
  .v-bleed.r .vcab-m,.v-bleed.l .vcab-m{grid-column:1/4;grid-row:2}
  .v-bleed.r .vm,.v-bleed.l .vm{border-radius:0}
  .v-bleed .arc{display:none}
  .own-g{grid-template-columns:minmax(0,1fr)}
  .v-list .vcab-m{max-width:520px}
}
@media (max-width:620px){
  .v-wide .cartela{position:static;max-width:none;margin-top:12px;box-shadow:none;border:1px solid var(--linea)}
  .arc{width:60px;height:60px;left:-8px;bottom:-8px}
  .v-mirror .vcab-m .arc{right:-8px}
  .v-wide .arc{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js-vida .vcab-m .vm>*,.js-vida .own-ph .vm>*{clip-path:none!important}
  .js-vida .vh,.js-vida .abate,.js-vida .hm .hc{transform:none!important;opacity:1!important}
  .arc path{stroke-dashoffset:0!important}
  .js-vida .vcab-m .vm>*,.js-vida .own-ph .vm>*,.js-vida .hm .hc.big>.ph{-webkit-mask-image:none!important;mask-image:none!important}
  .js-vida .sec.gray,.js-vida .sec.dark{border-top-left-radius:var(--vida-rmax)!important}
  .js-vida .sec.gray::before,.js-vida .sec.dark::before{opacity:1!important}
  .capas>.ph canvas,.capas>.ph img{transform:none!important}
  .js-vida .plan.draw .rm rect{stroke-dashoffset:0!important;fill-opacity:1!important}
  .js-vida .plan.draw .rm text{opacity:1!important}
  .js-vida .hist::after{transform:none!important}
}
html,body{overflow-x:clip}