@charset "utf-8";
/* =============================================================================
   Centros Visia · vida (v2-vida)
   Firma de movimiento: «enfoca».
   - Verbo: enfoca (de borroso a nítido, con un último ajuste fino, como el foróptero).
   - Dirección: desde la línea central hacia arriba y abajo, en espejo (el eje del logo).
   - Ritmo: pausado y preciso, 0,9 s, sin rebote; ajuste final de 0,15 s.
   - Textura: líneas de optotipo que menguan y las 7 barras de la onda del logo.
   Todo lo nuevo vive aquí y en assets/js/vida-web.js.
============================================================================= */
:root{
  --vida-dur:.9s;
  --vida-ease:cubic-bezier(.2,.7,.1,1);
  --vida-dir:"centro → arriba y abajo";
  --vida-ajuste:.15s;
  --vida-paso:70ms;
  --vida-reflejo:rgba(0,168,143,.30);
}

/* ---------- Revelados de bloque con la firma (sustituye el «sube 26 px») ---------- */
.js-vida .rv{opacity:0;transform:scaleY(.94);transform-origin:50% 50%;filter:blur(6px);
  transition:opacity var(--vida-dur) var(--vida-ease),transform var(--vida-dur) var(--vida-ease),filter calc(var(--vida-dur) + var(--vida-ajuste)) var(--vida-ease)}
.js-vida .rv.is-in{opacity:1;transform:none;filter:none}

/* ---------- Enfoque de imágenes: se abren desde el eje central y se ajustan ---------- */
.ph.vz{}
.ph.vz>img,.ph.vz>video,.ph.vz>svg.art{filter:blur(16px);transform:scaleY(1.035);transition:filter calc(var(--vida-dur) + .3s) var(--vida-ease),transform calc(var(--vida-dur) + .6s) var(--vida-ease),opacity .9s var(--ease)}
.ph.vz::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--reflejo,#00A88F);transform:scaleX(0);opacity:.9;z-index:3;pointer-events:none;transition:transform .45s var(--vida-ease),opacity .5s var(--vida-ease) .45s}
.ph.vz.vz-on::after{transform:scaleX(1);opacity:0}

.ph.vz.vz-in>img,.ph.vz.vz-in>video,.ph.vz.vz-in>svg.art{filter:blur(0);transform:scale(1)}


/* ---------- Reflejo antirreflejante: dos bandas verdes que salen del centro una vez ---------- */
.vr-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(to bottom,transparent,var(--vida-reflejo),transparent) 0 50%/100% 30% no-repeat,
             linear-gradient(to bottom,transparent,var(--vida-reflejo),transparent) 0 50%/100% 30% no-repeat}
@keyframes vidaReflejo{0%{opacity:0;background-position:0 50%,0 50%}20%{opacity:1}100%{opacity:0;background-position:0 -45%,0 145%}}
.vr-on .vr-sheen{animation:vidaReflejo 1.4s var(--vida-ease) .15s 1 both}
@media (hover:hover){.vr-card:hover .vr-sheen{animation:vidaReflejo 1.1s var(--vida-ease) 0s 1 both}}

/* ---------- Titular que se compone letra a letra, cada letra abre desde su línea media ---------- */
.vt .vw{display:inline-block;white-space:nowrap}
.vt .vl{display:inline-block;opacity:0;transform:scaleY(.18);transform-origin:50% 58%;filter:blur(6px);font-weight:200;
  transition:opacity .5s var(--vida-ease),transform var(--vida-dur) var(--vida-ease),filter calc(var(--vida-dur) + var(--vida-ajuste)) var(--vida-ease),font-weight 1.1s var(--vida-ease);
  transition-delay:calc(var(--i,0) * 22ms)}
.vt.vt-in .vl{opacity:1;transform:none;filter:none;font-weight:inherit}
.vt b .vl,.vt strong .vl{font-weight:200}
.vt.vt-in b .vl,.vt.vt-in strong .vl{font-weight:inherit}

/* ---------- Cabeceras con imagen o vídeo grande ---------- */
.vcab{position:relative}
.vcab .ph{border-radius:var(--radio)}
/* A · Vista: banda ancha bajo la carta */
.vcab--banda{margin:clamp(22px,3vw,40px) calc(var(--gutter) * -1) 0;}
.vcab--banda .ph{height:clamp(260px,52vh,600px);border-radius:0}
/* B · Audición: vídeo de fondo bajo la rejilla del audiograma */
.phero--ag{overflow:hidden;isolation:isolate}
.vcab--fondo{position:absolute;inset:0;z-index:-1}
.vcab--fondo .ph{position:absolute;inset:0;border-radius:0;background:var(--noche)}
.vcab--fondo .ph>img,.vcab--fondo .ph>video{opacity:0}
.vcab--fondo .ph>img.is-ok,.vcab--fondo .ph>video.is-ok{opacity:.42}
.vcab--fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,59,63,.55) 0%,rgba(11,59,63,.35) 40%,rgba(11,59,63,.92) 78%,var(--noche) 100%);pointer-events:none}
/* C · Audífonos: foto grande que sangra a la derecha */
.vcab-der .pp-top{grid-template-columns:minmax(0,6fr) minmax(0,6fr)!important;align-items:end}
.vcab-der .disp{font-size:clamp(40px,5.4vw,92px)!important}
.vcab-der .pp-img{aspect-ratio:4/3;margin-right:calc(var(--gutter) * -1 - max(0px,(100vw - var(--maxw)) / 2));border-radius:var(--radio) 0 0 var(--radio)}
/* D · Lentillas: foto a todo el ancho y el titular en una cartela encima */
.vcab-cartela .pp-top{display:block!important;position:relative}
.vcab-cartela .pp-img{aspect-ratio:auto;height:clamp(320px,64vh,680px);margin:0 calc(var(--gutter) * -1 - max(0px,(100vw - var(--maxw)) / 2));border-radius:0}
.vcab-cartela .pp-top h1{position:absolute;left:0;bottom:0;z-index:4;margin:0;background:var(--papel);padding:clamp(18px,2.4vw,34px) clamp(18px,2.6vw,40px) 0 0;max-width:min(860px,92%)}
/* E · Centros: foto que sangra a la izquierda y titular a la derecha */
.vcab-izq .pp-top{grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr)!important;align-items:end}
.vcab-izq .pp-img{order:-1;margin-left:calc(var(--gutter) * -1 - max(0px,(100vw - var(--maxw)) / 2));border-radius:0 var(--radio) var(--radio) 0}
.vcab-izq .disp{font-size:clamp(40px,5.2vw,88px)!important}
/* F · Gafas: banda de foto y la patilla montada encima */
.vcab--gafas{margin:0 calc(var(--gutter) * -1);}
.vcab--gafas .ph{height:clamp(240px,46vh,520px);border-radius:0}
.vcab--gafas + .temple-wrap{position:relative;z-index:3;margin-top:calc(clamp(40px,5vw,64px) * -1)}
/* G · Cita: franja fina */
.vcab--franja .ph{height:clamp(150px,22vh,240px);margin-bottom:clamp(18px,2.4vw,28px)}
/* H · Nosotros: la carta de 1989 sobre la foto de la tienda */
.vcab-tienda{position:relative;isolation:isolate}
.vcab-tienda .vcab--fondo-claro{position:absolute;left:0;right:0;top:0;height:clamp(420px,78vh,760px);z-index:-1}
.vcab-tienda .vcab--fondo-claro .ph{position:absolute;inset:0;border-radius:0}
.vcab-tienda .vcab--fondo-claro::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,246,251,.10) 0%,rgba(244,246,251,0) 55%,var(--papel) 100%);pointer-events:none}
.vcab-tienda .crumbs{background:rgba(244,246,251,.86);display:inline-flex;padding:6px 10px;border-radius:var(--radio)}
.vcab-tienda .card89{margin-top:clamp(40px,10vh,120px)}

/* ---------- Fotos grandes dentro del bloque: el enfoque sigue al scroll ---------- */
.vfoco{margin-top:clamp(40px,6vw,88px)}
.vfoco .ph{height:clamp(260px,54vh,600px);clip-path:inset(calc(var(--vb-ap,0) * 18%) 0 calc(var(--vb-ap,0) * 18%) 0 round var(--radio))}
.vfoco .ph>img,.vfoco .ph>video,.vfoco .ph>svg.art{filter:blur(calc(var(--vb-ap,0) * 10px));transform:scale(calc(1 + var(--vb-ap,0) * .05));transition:opacity .9s var(--ease)}
.vfoco .ph::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--reflejo,#00A88F);opacity:calc(var(--vb-ap,0) * .9);z-index:3}



/* ---------- Corrección: la frase de la fundadora heredaba el estilo del presupuesto ---------- */
p.quote{background:none;border:0;border-radius:0;padding:0;margin-top:0;color:var(--papel)}

/* ---------- Móvil ---------- */
@media (max-width:900px){
  .vcab-der .pp-top,.vcab-izq .pp-top{grid-template-columns:minmax(0,1fr)!important}
  .vcab-der .pp-img{margin-right:calc(var(--gutter) * -1);border-radius:0}
  .vcab-izq .pp-img{order:0;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);border-radius:0}
  .vcab-cartela .pp-img{height:52vh;margin:0 calc(var(--gutter) * -1)}
  .vcab-cartela .pp-top h1{position:relative;max-width:none;padding:18px 0 0;margin-top:-56px;margin-right:20px}
  .vcab--gafas + .temple-wrap{margin-top:-28px}
  .vfoco .ph{height:44vh}
}

/* ---------- Movimiento reducido: todo quieto y visible ---------- */
@media (prefers-reduced-motion:reduce){
  .ph.vz>img,.ph.vz>video,.ph.vz>svg.art{filter:none!important;transform:none!important}
  .ph.vz::after,.vfoco .ph::after{display:none}
  .vr-sheen{display:none}
  .vt .vl{opacity:1!important;transform:none!important;filter:none!important;font-weight:inherit!important;transition:none!important}
  .vfoco .ph{clip-path:none!important}.vfoco .ph>img,.vfoco .ph>video,.vfoco .ph>svg.art{filter:none!important;transform:none!important}
  .js-vida .rv{transform:none!important;filter:none!important;opacity:1!important}
}
.vr-card{position:relative;overflow:hidden}

/* Audición: la lámina o el vídeo de fondo, siempre por debajo del titular */
.vcab--fondo .ph>svg.art{opacity:.22}
.vcab--fondo::after{background:linear-gradient(180deg,rgba(11,59,63,.72) 0%,rgba(11,59,63,.55) 45%,rgba(11,59,63,.94) 80%,var(--noche) 100%)}
/* Nosotros: velo bajo el menú y las migas */
.vcab-tienda .vcab--fondo-claro::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(244,246,251,.92),rgba(244,246,251,0))}
/* Portada: el vídeo del umbral como banda bajo la carta */
.vcab--portada{margin:clamp(22px,3vw,40px) calc(var(--gutter) * -1) clamp(18px,2.4vw,30px)}
.vcab--portada .ph{height:clamp(240px,46vh,520px);border-radius:0}
.vcab-der .pp-img,.vcab-izq .pp-img{justify-self:stretch}
:root{--vida-sangre:calc(var(--gutter) + max(0px,(100vw - var(--maxw)) / 2))}
.vcab-der .pp-img{width:calc(100% + var(--vida-sangre))!important;margin-right:0!important}
.vcab-izq .pp-img{width:calc(100% + var(--vida-sangre))!important;margin-left:calc(var(--vida-sangre) * -1)!important;margin-right:0!important}
@media (max-width:900px){
  .vcab-der .pp-img,.vcab-izq .pp-img{width:calc(100% + var(--gutter) * 2)!important;margin-left:calc(var(--gutter) * -1)!important;margin-right:0!important}
}