@charset "utf-8";
/* ==========================================================
   MOVA · VIDA (v2-vida)
   Firma de movimiento: ESTIBA
   - verbo: la carga entra en el camión y se asienta
   - dirección: horizontal, de derecha a izquierda (de las puertas a la cabina)
   - ritmo: firme, con un pequeño asiento final · 0,62 s
   - textura: la cincha (correa con hebilla) y la costura en rombo de la manta
   ========================================================== */
:root{
  --vida-dur:.62s;
  --vida-ease:cubic-bezier(.2,.92,.3,1.22);    /* entra firme y asienta: sobrepasa ~5 px y vuelve */
  --vida-ease-in:cubic-bezier(.4,0,.2,1);
  --vida-dir:1;                                /* 1 = entra desde la derecha */
  --vida-dx:calc(var(--vida-dir) * 44px);
  --vida-stag:.07s;
}

/* ---------- revelados: todo se estiba de derecha a izquierda ---------- */
.js .rv{transform:translateX(var(--vida-dx));transition:opacity var(--vida-dur) var(--vida-ease-in),transform var(--vida-dur) var(--vida-ease)}
.js .rv.on{transform:none}

/* listas: cada bulto entra detrás del anterior */
.js .vl>*{opacity:0;transform:translateX(var(--vida-dx));transition:opacity var(--vida-dur) var(--vida-ease-in),transform var(--vida-dur) var(--vida-ease);transition-delay:calc(var(--k,0) * var(--vida-stag))}
.js .vl.on>*{opacity:1;transform:none}

/* ---------- la cincha que acompaña el scroll ---------- */
.vcincha{position:fixed;left:0;right:0;top:var(--hh);height:7px;z-index:59;pointer-events:none;background:var(--manta-d);transition:top .45s var(--ease)}
.nav.hide~.vcincha{top:0}
.vcincha i{position:absolute;top:0;bottom:0;right:0;width:calc(var(--p,0) * 1%);background:var(--hv) repeating-linear-gradient(90deg,transparent 0 9px,rgba(15,19,34,.28) 9px 13px) center/100% 1.5px no-repeat}
.vcincha b{position:absolute;top:50%;right:calc(var(--p,0) * 1%);width:16px;height:15px;transform:translate(50%,-50%);border:2.5px solid var(--ruta);background:var(--hv);border-radius:2px;transition:transform .25s var(--vida-ease)}
.vcincha.clic b{transform:translate(50%,-50%) scale(1.35)}
.open .vcincha{opacity:0}

/* ---------- fotos con cine: la imagen se enfoca y se asienta al llegar ---------- */
.ph>img,.ph>video{transform:translateX(calc(var(--vida-dir) * 26px)) scale(1.05);transition:opacity .6s var(--ease),transform calc(var(--vida-dur) * 1.3) var(--vida-ease)}
.ph.vv>img,.ph.vv>video{transform:scale(1.015);filter:none}
.ph.vv:hover>img{transform:scale(1.04)}

/* cabeceras: la imagen entra como una carga que se mete en el camión */
.vh{position:relative;overflow:hidden;isolation:isolate}
.vh::after{content:"";position:absolute;inset:0;z-index:3;background:var(--manta);transform-origin:left;transform:scaleX(1);transition:transform calc(var(--vida-dur) * 1.4) var(--vida-ease-in) .1s;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 24L24 0L48 24L24 48Z' fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.2' stroke-dasharray='3 4'/%3E%3C/svg%3E")}
.vh.vv::after{transform:scaleX(0)}

/* pictogramas que se dibujan: se descubren de derecha a izquierda */
.js .pgbig .pg,.js .eyebrow .pg,.js .srv .pg,.js .pasos4 .pg{clip-path:inset(0 0 0 100%);transition:clip-path calc(var(--vida-dur) * 1.3) var(--vida-ease-in)}
.js .pgd .pg{clip-path:inset(0 0 0 0)}


/* ---------- PORTADA ---------- */
.hero.vida{padding-bottom:clamp(36px,4vw,64px)}
.hero.vida .hero-g{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
.hero.vida .hero-v{margin-top:calc(-1 * clamp(24px,3.4vw,52px));margin-right:calc(-1 * var(--gut))}
.hero.vida .hero-v .ph{aspect-ratio:9/16;max-height:calc(100vh - var(--hh) + 20px);max-width:none;width:100%;margin-left:auto}
.hero.vida .hero-lbl{left:-1px;bottom:24px}
/* banda con la frase que se desplaza */
.vfrase{background:var(--ruta);color:var(--film);overflow:hidden;padding:clamp(18px,2.4vw,30px) 0;border-block:1.5px solid var(--ruta)}
.vfrase p{margin:0;white-space:nowrap;font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(56px,9vw,150px);line-height:.9;transform:translateX(calc(var(--fx,0) * 1px));will-change:transform}
.vfrase p span{display:inline-flex;align-items:center;gap:.3em;margin-right:.5em}
.vfrase p .pg{width:.7em;height:.7em;color:var(--hv)}
.vfrase p em{font-style:normal;color:var(--hv)}
/* servicios con foto */
.srv.vida a{grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto auto auto}
.srv.vida a>.ph{grid-column:1/-1;grid-row:1;margin:0 0 16px;aspect-ratio:4/3;border:1.5px solid rgba(238,241,242,.25)}
.srv.vida a>[data-pg]{grid-row:2/span 3}
.srv.vida a>h3{grid-row:2}
.srv.vida a>p{grid-row:3}
.srv.vida a>.fld{grid-row:4}
.cie-fig{margin:0 0 22px;aspect-ratio:16/9}

/* ---------- INTERIORES ---------- */
/* Mudanzas: vídeo a la derecha que sangra hasta el borde, índice encima */
.ph-mud{position:relative}
.ph-mud .vh-media{position:absolute;top:0;bottom:0;right:0;width:56%;z-index:0}
.ph-mud .vh-media .ph{height:100%;aspect-ratio:auto}
.ph-mud .vh-media::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--film) 0,rgba(238,241,242,0) 38%);pointer-events:none}
.ph-mud .wrap{position:relative;z-index:4}
.ph-mud .phead-grid{grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr)}
.ph-mud .toc{align-self:end;margin-bottom:-8px}
/* Empresas: vídeo apaisado grande bajo el titular */
.emp-hero.vida .ph{aspect-ratio:16/9}
.phead.manta .phead-grid.vida{grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);align-items:center}
/* Rutas: banda de muelle detrás del titular */
.pz-top.vida{padding-top:0}
.pz-banner{position:relative;margin:0 0 clamp(28px,4vw,48px);color:var(--film)}
.pz-banner .vh{aspect-ratio:16/9;max-height:min(68vh,640px);width:100%}
.pz-banner .vh .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.pz-banner .vh::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(15,19,34,.86) 0,rgba(15,19,34,.25) 55%,rgba(15,19,34,.1) 100%)}
.pz-banner .pz-bt{position:absolute;left:0;right:0;bottom:0;z-index:4;padding-bottom:clamp(24px,3vw,44px)}
.pz-banner .crumbs a,.pz-banner .crumbs{color:var(--film)}
.pz-banner .ph .cap{top:12px;bottom:auto;left:auto;right:12px}
.pz-banner h1{color:var(--film);margin:0}
.pz-banner .eyebrow{color:var(--hv)}
/* Método, Presupuesto y Expediente: foto grande en la cabecera, cada una con su composición */
.phead.vfoto{padding-bottom:0;border-bottom:0}
.vfoto .vfw{margin-top:clamp(28px,3.4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--gut);align-items:end}
.vfoto .vfw .vh{aspect-ratio:16/9}
.vfoto .vfw .vh .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.vfoto .vfw .vf-n{padding-bottom:16px}
.pq-head.vida{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--gut);align-items:end}
.pq-head.vida .vh{aspect-ratio:4/3;grid-row:1/span 3;grid-column:2}
.pq-head.vida .vh .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.pq-head.vida>:not(.vh){grid-column:1}
.ex-head .phead-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,.9fr)}
.ex-head .vh{aspect-ratio:3/4;align-self:stretch}
.ex-head .vh .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}
/* secciones con foto en la cabecera de bloque */
.sh.fig{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr)}
.sh.fig>.vh{grid-column:4;grid-row:1/span 2;align-self:stretch;aspect-ratio:4/3}
.sh.fig>.vh.r34{aspect-ratio:3/4}
.sh.fig>.vh .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.inc-fig{aspect-ratio:1/1;margin:0}
.inc-g.vida{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--gut);align-items:start}
.pp-head.vida{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr)}
.pp-head.vida .vh{aspect-ratio:4/3}
.pp-head.vida .vh .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.et-head.vida{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr)}
.et-head.vida .vh{aspect-ratio:4/3}
.et-head.vida .vh .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}

@media (max-width:1100px){
  .hero.vida .hero-g{grid-template-columns:1fr}
  .hero.vida .hero-v{margin:0 calc(-1 * var(--gut))}
  .hero.vida .hero-v .ph{aspect-ratio:9/16;max-height:none;width:100%}
  .ph-mud .vh-media{position:relative;width:auto;height:auto;aspect-ratio:16/9;margin:0 calc(-1 * var(--gut)) 0}
  .ph-mud .vh-media::before{display:none}
  .ph-mud .phead-grid,.phead.manta .phead-grid.vida,.ex-head .phead-grid{grid-template-columns:1fr}
  .sh.fig{grid-template-columns:auto minmax(0,1fr)}
  .sh.fig>.vh{grid-column:1/-1;grid-row:auto}
  .vfoto .vfw,.pq-head.vida,.pp-head.vida,.et-head.vida,.inc-g.vida{grid-template-columns:1fr}
  .pq-head.vida .vh{grid-column:1;grid-row:auto}
  .ex-head .vh{aspect-ratio:3/4;max-width:420px}
}
@media (max-width:640px){
  .vcincha{height:5px}
  .hero.vida .hero-v .ph{max-height:none}
  .pz-banner .vh{aspect-ratio:3/4;max-height:none}
  .vfrase p{font-size:clamp(46px,15vw,72px)}
}
@media (prefers-reduced-motion:reduce){
  .js .vl>*{opacity:1;transform:none}
  .ph>img,.ph>video{transform:none;filter:none}
  .vh::after{display:none}
  .js .pgbig .pg,.js .eyebrow .pg,.js .srv .pg,.js .pasos4 .pg{clip-path:none}
  .vfrase p{transform:none}
}
@media print{.vcincha{display:none}}
.pz-top.vida .pz-head{grid-template-columns:1fr;margin-bottom:28px}
.vh.inc-fig{width:100%;max-width:440px}
.vh.inc-fig .ph{position:absolute;inset:0;aspect-ratio:auto;height:100%}
/* lo que entra desde la derecha no puede ensanchar la página */
html,body{overflow-x:clip}
main{overflow-x:clip}

/* costura de manta entre bloques: una puntada discontinua que se cose de derecha a izquierda (uno o dos cortes por página) */
.vcos{position:relative;height:0;z-index:2}
.vcos::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:repeating-linear-gradient(90deg,var(--hv) 0 14px,transparent 14px 22px);clip-path:inset(0 0 0 100%);transition:clip-path calc(var(--vida-dur) * 2.2) var(--vida-ease-in)}
.vcos::after{content:"";position:absolute;top:-8px;left:calc(100% - 26px);width:14px;height:14px;border:3px solid var(--ruta);background:var(--hv);border-radius:2px;transition:left calc(var(--vida-dur) * 2.2) var(--vida-ease-in);opacity:.95}
.vcos.vv::before{clip-path:inset(0 0 0 0)}
.vcos.vv::after{left:12px}
@media (prefers-reduced-motion:reduce){.vcos::before{clip-path:none}.vcos::after{left:12px}}
/* Mudanzas: la cortina espera a que el titular se asiente */
.ph-mud .vh-media{width:50%}
.ph-mud .vh-media::after{transition-delay:.5s}
.ph-mud .vh-media::before{background:linear-gradient(90deg,var(--film) 0,rgba(238,241,242,.6) 18%,rgba(238,241,242,0) 42%)}
@media (max-width:640px){.hero.vida .hero-v .ph{aspect-ratio:3/4}}

/* ── portada · vídeo de la carretera detrás, como en Mudanzas (la columna izquierda no cambia) ── */
.hero.vida.ctra .hero-g{position:relative;min-height:calc(100svh - var(--hh) - clamp(24px,3.4vw,52px) - 70px)}
.hero.vida.ctra .hero-t{position:relative;z-index:4}
.hero.vida.ctra .hero-v{position:absolute;z-index:0;margin:0;
  top:calc(-1 * (var(--hh) + clamp(24px,3.4vw,52px)));bottom:0;
  right:calc(-1 * ((100vw - min(100vw, var(--maxw))) / 2 + var(--gut)));width:52vw}
.hero.vida.ctra .hero-v .ph{position:absolute;inset:0;height:100%;width:100%;max-height:none;max-width:none;aspect-ratio:auto}
.hero.vida.ctra .hero-v::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--film) 0,rgba(238,241,242,.62) 16%,rgba(238,241,242,0) 40%)}
.hero.vida.ctra .hero-v::after{transition-delay:.5s}
.hero.vida.ctra .hero-lbl{left:auto;right:max(var(--gut),calc((100vw - min(100vw, var(--maxw))) / 2 + var(--gut)));bottom:clamp(28px,3vw,44px);z-index:5}
.hero.vida.ctra .ruta{box-shadow:0 24px 50px -28px rgba(15,19,34,.55)}
@media (max-width:1100px){
  .hero.vida.ctra .hero-g{min-height:0}
  .hero.vida.ctra .hero-v{position:relative;top:auto;bottom:auto;right:auto;width:auto;margin:6px calc(-1 * var(--gut)) 0;aspect-ratio:16/9}
  .hero.vida.ctra .hero-v::before{display:none}
  .hero.vida.ctra .hero-lbl{right:var(--gut);bottom:16px}
}
@media (max-width:640px){
  .hero.vida.ctra .hero-v{aspect-ratio:4/3}
  .hero.vida.ctra .hero-lbl{top:12px;left:var(--gut);right:auto;bottom:auto;padding:7px 10px}
  .hero.vida.ctra .hero-lbl b{font-size:22px}
  .hero.vida.ctra .hero-lbl .fld{font-size:10px}
}

/* ── Mudanzas · vídeo vertical (el sofá por la rampa): fundido más corto para que no tape al operario de la izquierda ── */
.ph-mud .vh-media::before{background:linear-gradient(90deg,var(--film) 0,rgba(238,241,242,.55) 9%,rgba(238,241,242,0) 24%)}
@media (max-width:1100px){.ph-mud .vh-media{width:auto;aspect-ratio:3/2}}
@media (max-width:640px){.ph-mud .vh-media{aspect-ratio:4/5}}