@charset "utf-8";
/* KORE · VIDA — firma de movimiento «el disco cae y rebota en la goma»
   Verbo: cae y rebota · Dirección: de arriba abajo · Ritmo: seco, 0,55 s, con un rebote elástico de goma bien visible
   Textura: motas del caucho y una nube de polvo de tiza al tocar suelo */
:root {
  --vida-dur: .55s;
  --vida-dur-l: .95s;
  --vida-ease: cubic-bezier(.3, 1.55, .5, 1);
  --vida-dir: -1;            /* −1 = viene de arriba */
  --vida-dist: 26px;
  --tiza-polvo: radial-gradient(circle at 18% 60%, rgba(250,249,246,.55) 0 2px, transparent 3px), radial-gradient(circle at 34% 30%, rgba(250,249,246,.4) 0 1.5px, transparent 2.5px), radial-gradient(circle at 52% 70%, rgba(250,249,246,.5) 0 2.5px, transparent 3.5px), radial-gradient(circle at 68% 40%, rgba(250,249,246,.35) 0 1.5px, transparent 2.5px), radial-gradient(circle at 84% 65%, rgba(250,249,246,.45) 0 2px, transparent 3px), radial-gradient(ellipse at 50% 100%, rgba(250,249,246,.25), transparent 70%);
}

/* ——— Todos los revelados caen y asientan ——— */
.js .rv { transform: translateY(calc(var(--vida-dist) * var(--vida-dir))); transition: opacity .45s ease, transform var(--vida-dur) var(--vida-ease); transition-delay: var(--dl, 0s); }
.js .rv.is-in, .js .rv:focus-within { transform: none; }

@keyframes vida-cae { from { transform: translateY(calc(9% * var(--vida-dir))); clip-path: inset(0 0 100% 0); } 62% { clip-path: inset(0 0 0 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
@keyframes vida-txt { from { opacity: 0; transform: translateY(calc(var(--vida-dist) * var(--vida-dir))); } to { opacity: 1; transform: none; } }
@keyframes vida-polvo { 0% { opacity: 0; transform: scaleX(.6) translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1.25) translateY(-14px); } }

/* ——— Cabeceras con imagen: tres composiciones que se alternan ——— */
.vh { overflow: hidden; }
.vh > .wrap { position: relative; z-index: 2; }
.vh-media { position: relative; z-index: 1; }
.vh-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 34px; background: var(--tiza-polvo); opacity: 0; pointer-events: none; z-index: 5; animation: vida-polvo 1.1s ease-out both calc(var(--vida-dur-l) * .7); }
.vh .vh-media > .ph { animation: vida-cae var(--vida-dur-l) var(--vida-ease) both .05s; }
.vh .eyebrow, .vh h1, .vh .lead, .vh .phd-meta, .vh .hero-cta { animation: vida-txt var(--vida-dur) var(--vida-ease) both; }
.vh .eyebrow { animation-delay: .25s; } .vh h1 { animation-delay: .32s; } .vh .lead { animation-delay: .42s; } .vh .hero-cta { animation-delay: .5s; } .vh .phd-meta { animation-delay: .56s; }

/* A · fondo: la imagen llena la cabecera en 16:9 y el texto se apoya abajo */
.vh-fondo { display: flex; flex-direction: column; justify-content: flex-end; min-height: min(56.25vw, 100svh); padding-bottom: clamp(36px, 4vw, 64px); }
.vh-fondo .vh-media { position: absolute; inset: 0; }
.vh-fondo .vh-media::before { content: ''; position: absolute; inset: 0; z-index: 4; background: linear-gradient(180deg, rgba(23,23,22,.55) 0%, rgba(23,23,22,.08) 32%, rgba(23,23,22,.35) 58%, rgba(23,23,22,.92) 100%), linear-gradient(90deg, rgba(23,23,22,.55), rgba(23,23,22,0) 65%); pointer-events: none; }
.vh-fondo .vh-media::after { display: none; }
.vh-fondo .phd-meta { background: rgba(23,23,22,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 18px; border-radius: 4px; }

/* B · franja: el título arriba y una franja 16:9 que cae debajo */
.vh-franja { display: flex; flex-direction: column; padding-bottom: 0; }
.vh-franja > .wrap { order: 1; width: 100%; }
.vh-franja .vh-media { order: 2; width: min(1240px, calc(100% - 2 * var(--gut))); margin: clamp(28px, 4vw, 52px) auto 0; }
.vh-franja .vh-media .ph { border-radius: 4px 4px 0 0; }

/* C · lado: el título a la izquierda y una lámina 3:4 que cae a la derecha */
.vh-lado { display: grid; grid-template-columns: minmax(0, 1fr) min(32vw, 440px); column-gap: clamp(24px, 4vw, 64px); align-items: end; padding-right: var(--gut); }
.vh-lado > .wrap { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding-right: 0; }
.vh-lado .phd-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.vh-lado .vh-media { grid-column: 2; grid-row: 1; transform: rotate(1.4deg); }
.vh-lado .vh-media .ph { border-radius: 4px; box-shadow: 0 40px 60px -36px rgba(0,0,0,.7); }


/* ——— Fotos que caen a caballo entre dos bloques ——— */
.vida-cae { position: relative; z-index: 2; overflow-x: clip; background: linear-gradient(180deg, var(--a) 50%, var(--b) 50%); padding: 0 var(--gut); }
.vida-cae .ph { max-width: 1100px; margin: 0 auto; border-radius: 4px; box-shadow: 0 46px 60px -40px rgba(0,0,0,.75); transform: translateY(calc(70px * var(--vida-dir))) rotate(calc(var(--rot, 0deg) * 4)); opacity: 0; transition: transform var(--vida-dur-l) var(--vida-ease), opacity .4s ease; }
.vida-cae.is-in .ph { transform: rotate(var(--rot, 0deg)); opacity: 1; }
.vida-cae::after { content: ''; position: absolute; left: 50%; bottom: calc(50% - min(1100px, 100vw - 2 * var(--gut)) * .28125 - 10px); width: min(900px, 80vw); height: 40px; transform: translateX(-50%); background: var(--tiza-polvo); opacity: 0; pointer-events: none; }
.vida-cae.is-in::after { animation: vida-polvo 1.1s ease-out both calc(var(--vida-dur-l) * .6); }

/* ——— Fotos quietas: caen 14px y asientan con el rebote de la goma ——— */
.vf .ph-art, .vf > img { transform: translateY(calc(14px * var(--vida-dir))); transition: transform var(--vida-dur-l) var(--vida-ease), opacity .9s var(--ease); }
.vf.vf-in .ph-art, .vf.vf-in > img { transform: none; }

/* ——— Portada: el vídeo de la sala cae y asienta al cargar ——— */
.hero-media > .ph { animation: vida-cae var(--vida-dur-l) var(--vida-ease) both .05s; }

/* ——— Novedades: las notas caen y asientan sobre el corcho (todas a la vez, sin escalonar) ——— */
.nota-cork { animation: vida-nota var(--vida-dur) var(--vida-ease) both .05s; }
@keyframes vida-nota { from { opacity: 0; transform: translateY(-40px) rotate(calc(var(--r, 0deg) * 6)); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }

/* ——— Móvil ——— */
@media (max-width: 760px) {
  .vh-fondo { display: block; min-height: 0; padding-top: var(--hh); }
  .vh-fondo .vh-media { position: relative; inset: auto; aspect-ratio: 16/9; margin: 0 calc(-1 * 0px) 28px; }
  .vh-fondo .vh-media::before { background: linear-gradient(180deg, rgba(23,23,22,0) 60%, rgba(23,23,22,.6)); }
  .vh-fondo .phd-meta { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
  .vh-lado { display: flex; flex-direction: column; padding-right: 0; }
  .vh-lado .vh-media { order: 2; }
  .vh-lado > .wrap { padding-right: var(--gut); }
  .vh-lado .vh-media { width: 62%; margin: 28px var(--gut) 0 auto; }
  .vida-cae .ph { transform: translateY(calc(40px * var(--vida-dir))) rotate(calc(var(--rot, 0deg) * 3)); }
}

/* ——— Movimiento reducido: todo quieto y visible ——— */
@media (prefers-reduced-motion: reduce) {
  .vh .vh-media > .ph, .vh .eyebrow, .vh h1, .vh .lead, .vh .phd-meta, .vh .hero-cta, .nota-cork, .vh-media::after, .vida-cae::after { animation: none !important; }
  .vida-cae .ph { transform: rotate(var(--rot, 0deg)); opacity: 1; transition: none; }
  .vf .ph-art, .vf > img { transform: none; transition: none; }
  .hero-media > .ph { animation: none !important; }
  .js .rv { transform: none; }
}