/* El Sauce · v2-vida · capa de movimiento
   Firma: SE ACERCA · en profundidad, de lejos a cerca · pausado (0,9 s, frenada suave) · textura: el filete de la esquela y una veladura de papel que se disuelve.
   Quien acompaña se acerca despacio, sin invadir: nada entra de lado ni cae; todo llega desde un poco más lejos y se queda.
   Todo lo que se mueve aquí usa estas tres variables. */
:root{
  --vida-dur:.9s;
  --vida-ease:cubic-bezier(.22,.61,.24,1);
  --vida-dir:.965;             /* escala de partida: llega desde un poco más lejos */
  --p:0;
  --vida-filete:linear-gradient(90deg,var(--rubor-f) 0 35%,currentColor 35% 100%);
}

/* ---------- 1. Revelado común: se acerca ---------- */
.vp,.rv{opacity:0;transform:scale(var(--vida-dir));transition:opacity var(--vida-dur) var(--vida-ease),transform var(--vida-dur) var(--vida-ease)}
.vp.is-in,.rv.is-in{opacity:1;transform:none}
.no-js .vp,.no-js .vc .vc-txt>*{opacity:1;transform:none}

/* ---------- 2. El filete: bajo los titulares de cabecera y en «Lo siguiente» ---------- */
.filete{display:block;width:clamp(96px,12vw,168px);height:3px;margin-top:clamp(16px,1.6vw,22px);color:var(--noche);background:var(--vida-filete);transform-origin:left;transform:scaleX(0);transition:transform calc(var(--vida-dur) * 1.4) var(--vida-ease)}
.on-dark .filete{color:var(--dia)}
.is-in .filete,.filete.is-in{transform:none}
.vc .vc-txt>*{transform-origin:0 50%}
.vc .vc-txt>.migas,.vc .vc-txt>h1,.vc .vc-txt>.lead,.vc .vc-txt>.small{opacity:0;transform:scale(var(--vida-dir));transition:opacity var(--vida-dur) var(--vida-ease),transform var(--vida-dur) var(--vida-ease)}
.vc .vc-txt>h1{transition-delay:.25s}
.vc .vc-txt>.lead,.vc .vc-txt>.small{transition-delay:.42s}
.vc .vc-txt.is-in>*{opacity:1;transform:none}
/* páginas de urgencia (Qué hacer ahora, Contacto): la cabecera llega sin esperas */
.pag-calma .vc .vc-txt>*{transition-delay:0s!important;transition-duration:.45s}
.pag-calma .vc .vc-txt>.filete{transition-duration:.9s}

/* el hilo que acompaña el scroll: el filete del logo bajo la cabecera */
.vida-hilo{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;color:var(--noche);background:linear-gradient(90deg,var(--rubor-f) 0 120px,var(--petroleo) 120px 100%);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .2s linear}
.hd-main{position:relative}

/* «Lo siguiente»: al llegar, el filete se completa bajo la frase */
.siguiente .sig-txt{background:var(--vida-filete) left bottom/0 2px no-repeat;color:var(--noche);padding-bottom:.18em;transition:background-size calc(var(--vida-dur) * 1.6) var(--vida-ease) .2s}
.siguiente.is-in .sig-txt{background-size:min(100%,9em) 2px}
.siguiente .sig-lbl{transition:transform var(--vida-dur) var(--vida-ease)}
.siguiente:not(.is-in) .sig-lbl{transform:scale(var(--vida-dir))}

/* ---------- 3. Fotos: veladura de papel que se disuelve; las grandes, además, se acercan muy despacio mientras se ven ---------- */
.vela{position:absolute;inset:0;z-index:4;background:var(--dia);transition:opacity calc(var(--vida-dur) * 1.4) var(--vida-ease);pointer-events:none}
.on-dark .vela,.portada-guardia .vela{background:var(--noche)}
.bg-2 .vela{background:var(--dia-2)}
.ph.is-vista .vela{opacity:0}
.ph.vida-respira.has-img img{transform-origin:50% 50%;animation:respira 22s ease-in-out infinite alternate;animation-play-state:paused}
.ph.vida-respira.has-img.en-vista img{animation-play-state:running}
.ph.has-video img{animation:none}
@keyframes respira{from{transform:scale(1)}to{transform:scale(1.05)}}

/* ---------- 4. Cabeceras con imagen: una composición por página ---------- */
.vc{position:relative;overflow:hidden}
.vc .vc-foto::before{display:none}
.vc .vc-foto{border-radius:var(--radio)}
.vc-grid{display:grid;gap:clamp(24px,4vw,64px);align-items:end}

/* Servicios: texto y papel en vertical a la derecha */
.vc--lado .vc-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.vc--lado .vc-foto{height:clamp(300px,30vw,440px);grid-column:2;align-self:stretch}
.vc--lado .indice{grid-column:1 / -1;margin-top:0}

/* Tengo seguro: espejo, la mesa a la izquierda */
.vc--espejo .vc-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.vc--espejo .vc-foto{order:-1;height:clamp(300px,30vw,440px)}

/* Dejarlo previsto: la ventana sangra hasta el borde derecho */
.vc--sangre .vc-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.vc--sangre .vc-foto{height:clamp(320px,34vw,520px);margin-right:calc(-1 * var(--gut) - max(0px,(100vw - var(--max)) / 2));border-radius:var(--radio) 0 0 var(--radio)}

/* Qué hacer ahora: foto y teléfono superpuestos, sin perder la urgencia */
.vc--urg .vc-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.vc--urg .vc-media{position:relative;padding-bottom:28px}
.vc--urg .vc-foto{height:clamp(240px,22vw,330px)}
.vc--urg .tarjeta-tel{position:relative;margin:-64px 0 0 -28px;width:min(100%,360px);z-index:5;box-shadow:0 18px 40px -22px rgba(18,48,47,.6)}

/* Despedidas: el vestíbulo en una franja alta, encima del título, sobre noche */
.vc--alto>.vc-foto{height:clamp(200px,24vw,340px);width:calc(100% - 2 * var(--gut));max-width:calc(var(--max) - 2 * var(--gut));margin:clamp(28px,3vw,44px) auto 0}
.vc--alto .vc-foto::after{content:"";position:absolute;inset:0;z-index:3;animation:none;opacity:1;background:linear-gradient(0deg,rgba(18,48,47,.35),transparent 50%)}

/* Trámites: la carpeta sangra hasta el borde izquierdo, el texto a la derecha */
.vc--izq .vc-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.vc--izq .vc-foto{height:clamp(240px,24vw,360px);margin-left:calc(-1 * var(--gut) - max(0px,(100vw - var(--max)) / 2));border-radius:0 var(--radio) var(--radio) 0}

/* Contacto: franja recortada dentro de la caja */
.vc--franja .vc-foto{height:clamp(180px,22vw,300px);width:calc(100% - 2 * var(--gut));max-width:calc(var(--max) - 2 * var(--gut));margin:0 auto clamp(32px,4vw,56px)}
/* Legales: un hilo de imagen, quieto */
.vc--hilo .vc-foto{height:clamp(120px,12vw,180px);width:calc(100% - 2 * var(--gut));max-width:calc(var(--max) - 2 * var(--gut));margin:0 auto clamp(32px,4vw,56px)}
.vc--hilo .vc-foto img{animation:none!important}

/* ---------- 5. Portada: la noche detrás del teléfono ---------- */
.portada-guardia{position:relative;overflow:hidden;isolation:isolate}
.portada-guardia>*{position:relative;z-index:1}
.portada-guardia>.vida-noche{position:absolute;inset:0;z-index:0;background:var(--noche)}
.vida-noche::before{display:none}
.vida-noche .ph-art{opacity:.1}
.vida-noche img{opacity:0!important}
.vida-noche.has-img img{opacity:.38!important;filter:saturate(.7)}
.vida-noche::after{content:"";position:absolute;inset:0;z-index:3;animation:none;opacity:1;background:linear-gradient(180deg,rgba(18,48,47,.55),rgba(18,48,47,.86) 45%,var(--noche))}
.vida-noche .ph-tag{z-index:4;top:10px;bottom:auto}

/* ---------- 6. Pausas: una foto grande dentro de la caja entre bloques ---------- */
.vida-pausa-w{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.vida-pausa{border-radius:var(--radio)}
.vida-pausa::before{display:none}
.vida-pausa{height:clamp(240px,34vw,480px)}

/* ---------- móvil ---------- */
@media (max-width:860px){
  .vc--lado .vc-grid,.vc--espejo .vc-grid,.vc--sangre .vc-grid,.vc--urg .vc-grid{grid-template-columns:1fr}
  .vc--lado .vc-foto{grid-row:auto;grid-column:auto;height:auto;aspect-ratio:4/3}
  .vc--lado .indice{grid-column:auto}
  .vc--espejo .vc-foto{order:0;height:auto;aspect-ratio:4/3}
  .vc--sangre .vc-foto{height:auto;aspect-ratio:4/3;margin-right:calc(-1 * var(--gut))}
  .vc--urg .vc-media{display:flex;flex-direction:column-reverse;padding-bottom:0}
  .vc--urg .vc-foto{height:auto;aspect-ratio:21/9;margin-top:14px}
  .vc--urg .tarjeta-tel{margin:0;width:100%}
  .vc--izq .vc-grid{grid-template-columns:1fr}
  .vc--izq .vc-foto{order:2;height:auto;aspect-ratio:16/9;margin-left:calc(-1 * var(--gut))}
  .vc--alto>.vc-foto{height:auto;aspect-ratio:16/9}
  .vc--franja .vc-foto{height:110px}
  .vc--hilo .vc-foto{height:96px}
  .vida-pausa{height:auto;aspect-ratio:16/9}
  .vida-noche .ph-tag{display:none}
}

/* ---------- movimiento reducido: todo en su sitio, sin animar ---------- */
@media (prefers-reduced-motion:reduce){
  .vp,.rv,.vc .vc-txt>*{opacity:1!important;transform:none!important;transition:none!important}
  .filete,.siguiente .sig-lbl{transform:none!important;transition:none!important}
  .siguiente .sig-txt{background-size:min(100%,9em) 2px;transition:none}
  .vela{display:none}
  .ph.has-img img{animation:none!important}
  .vida-hilo{transition:none}
}