/* =========================================================
   Home · tablero IntroScrollV3.dc.html
   Medidas en "píxeles de tablero" (× --u). Las pantallas que
   quedan quietas (Hero, hoja, Para qué sirve, Cierre) ocupan
   la ventana entera y centran su escena de 1440 × 900.
   ========================================================= */

.panel { height: 100vh; height: 100svh; }
.panel > .escena, .pq-panel > .escena { position: absolute; left: calc(50% - 720 * var(--u)); top: 0; height: 100%; margin: 0; }
.js .revela { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.visto .revela, .revela.visto { opacity: 1; transform: none; }

/* ---------- Intro ---------- */
.intro { display: none; }
.con-intro .intro {
  position: fixed; inset: 0; z-index: 200; color: var(--blanco);
  /* el mismo papel negro de la foto de portada, a la misma escala */
  background: var(--carbon) url(../img/home/paspartu.webp) repeat center / calc(max(100vw, 150vh) * 0.3) auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(64 * var(--u));
  text-align: center; transition: opacity 0.9s ease;
}
.intro.f2 { opacity: 0; pointer-events: none; }
.con-intro .intro.f3 { display: none; }
.intro-logo { position: relative; left: 0; top: 0; font-size: calc(60 * var(--u)); line-height: 1.1; letter-spacing: 0.14em; padding-left: 0.14em; white-space: nowrap; }
.intro-fecha { position: absolute; left: calc(64 * var(--u)); top: calc(56 * var(--u)); text-align: left; display: flex; flex-direction: column; gap: 4px; font-family: var(--jost); font-weight: 200; letter-spacing: 0.12em; text-transform: uppercase; }
.intro-fecha .linea { font-size: max(11px, calc(13 * var(--u))); line-height: 1.25; }
.intro .linea > span { transform: translateY(30px); opacity: 0; }
.intro.f1 .linea > span { transform: none; opacity: 1; }
.intro .d1 { transition-delay: 0.15s; }
.intro .d2 { transition-delay: 0.3s; }

/* ---------- Hero ---------- */
.hero { position: sticky; top: 0; z-index: 0; background: var(--negro); overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; transition: filter 1.8s var(--ease), transform 1.8s var(--ease); }
.con-intro .hero img { filter: blur(12px); transform: scale(1.04); }
.con-intro.f2 .hero img { filter: none; transform: none; }

/* ---------- Hoja blanca: Análisis de color personal ---------- */
.hoja { position: sticky; top: 0; z-index: 1; background: var(--blanco); }
.hoja h1 { position: absolute; left: 0; top: 36.667%; width: 100%; margin: 0; font-weight: 400; text-align: center; white-space: nowrap; font-size: calc(48 * var(--u)); }
.hoja h1 .linea { line-height: 1.05; }
.hoja h1 .linea > span { transform: translateY(calc((1 - var(--tit, 1)) * 34px)); opacity: var(--tit, 1); }
.hoja h1 .linea + .linea > span { transition-delay: 0.15s; }
.hoja h1 .caps { letter-spacing: 0.06em; }
.hoja .epi { position: absolute; left: calc(420 * var(--u)); top: calc(36.667% + 140 * var(--u)); width: calc(600 * var(--u)); margin: 0; text-align: center; text-wrap: balance; font-family: var(--jost); font-weight: 200; font-size: calc(19 * var(--u)); line-height: 1.45; }

/* ---------- La sesión: cuatro fichas ---------- */
.sesion { position: relative; z-index: 1; height: calc(1100 * var(--u)); box-sizing: border-box; padding: calc(260 * var(--u)) 0 calc(120 * var(--u)); background: var(--blanco); box-shadow: 0 2px 0 var(--blanco); overflow: hidden; }
.sesion-cab { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 calc(64 * var(--u)); }
.sesion-cab h2 { margin: 0; font-weight: 400; font-size: calc(24 * var(--u)); line-height: 1.3; }
.caps6 { letter-spacing: 0.06em; }
.sesion-cab a { font-family: var(--jost); font-weight: 200; font-size: max(12px, calc(14 * var(--u))); }
.fichas { margin-top: calc(72 * var(--u)); padding: 0 calc(64 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.fichas figure { margin: 0; flex: 0 0 calc(319 * var(--u)); }
.js .fichas figure { opacity: 0; transition: opacity 1s ease var(--d, 0s); }
.visto .fichas figure { opacity: 1; }
.fichas figure > * { transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
@media (hover: hover) { .fichas:has(figure:hover) figure:not(:hover) > * { opacity: 0.3; } }
.ficha-n { display: block; text-align: right; font-family: var(--jost); font-weight: 200; font-size: max(10px, calc(11 * var(--u))); letter-spacing: 0.06em; margin-bottom: calc(8 * var(--u)); }
.fichas .foto { height: calc(400 * var(--u)); overflow: hidden; }
.fichas .foto img { width: 100%; height: 100%; object-fit: cover; }
.fichas figcaption { padding: calc(16 * var(--u)) 0 0; }
.ficha-t { display: block; font-size: calc(17 * var(--u)); letter-spacing: 0.06em; }
.ficha-d { display: block; margin-top: calc(6 * var(--u)); width: calc(280 * var(--u)); font-family: var(--jost); font-weight: 200; font-size: max(12px, calc(14 * var(--u))); line-height: 1.45; }
@media (hover: none) and (min-width: 1024px) {
  .fichas-vent { overflow-x: auto; scrollbar-width: none; }
  .fichas-vent::-webkit-scrollbar { display: none; }
  .fichas { transform: none; padding-right: calc(64 * var(--u)); }
}

/* ---------- Tu dossier ---------- */
.dossier { position: relative; z-index: 1; height: calc(700 * var(--u)); background: var(--blanco); box-shadow: 0 2px 0 var(--blanco); }
.dossier .escena { height: 100%; }
.rotulo-s { margin: 0; font-family: var(--jost); font-weight: 200; font-size: max(10px, calc(11 * var(--u))); letter-spacing: 0.14em; }
.dossier .rotulo-s { position: absolute; left: calc(64 * var(--u)); top: calc(112 * var(--u)); opacity: 0.6; }
.dossier h2 { position: absolute; left: calc(64 * var(--u)); top: calc(140 * var(--u)); width: calc(670 * var(--u)); margin: 0; font-weight: 400; font-size: calc(32 * var(--u)); line-height: 1.2; }
.dx-lista { position: absolute; left: calc(760 * var(--u)); top: calc(112 * var(--u)); width: calc(600 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.dx-item { display: flex; flex-direction: column; border-top: 1px solid rgba(0, 0, 0, 0.12); padding-top: calc(12 * var(--u)); }
.acc-btn { display: flex; align-items: baseline; width: 100%; padding: 0; background: transparent; border: none; color: inherit; text-align: left; cursor: pointer; font-family: inherit; }
.dx-item .acc-btn { gap: calc(22 * var(--u)); }
.dx-n { width: calc(24 * var(--u)); flex: none; font-family: var(--jost); font-weight: 200; font-size: max(10px, calc(12 * var(--u))); opacity: 0.55; }
.dx-t { flex: 1; font-size: calc(20 * var(--u)); line-height: 1.25; }
.mas { font-family: var(--jost); font-weight: 200; line-height: 1; display: inline-block; transition: transform 0.4s ease; }
.dx-item .mas { font-size: calc(18 * var(--u)); }
.abierto > .acc-btn .mas, .abierto .acc-btn .mas { transform: rotate(45deg); }
.desp { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.5s ease, opacity 0.5s ease; }
.desp > div { overflow: hidden; }
.abierto .desp { grid-template-rows: 1fr; opacity: 1; }
.dx-item .desp p { margin: 0; padding: calc(10 * var(--u)) 0 calc(2 * var(--u)) calc(46 * var(--u)); font-family: var(--jost); font-weight: 200; font-size: max(12px, calc(14 * var(--u))); line-height: 1.45; }

/* ---------- Para qué sirve: despliegue de paspartú ---------- */
.pq { position: relative; z-index: 1; height: 400vh; height: 400svh; background: linear-gradient(var(--carbon) 0 50%, var(--blanco) 50% 100%); }
.pq-panel { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--carbon); }
.pq-hueco, .pq-marco { position: absolute; top: calc((1 - var(--abre, 0)) * 50%); bottom: calc((1 - var(--abre, 0)) * 50%); left: calc((1 - var(--abre, 0)) * 50%); right: calc((1 - var(--abre, 0)) * 50%); }
.pq-hueco { background: var(--blanco); }
.pq-marco { z-index: 5; pointer-events: none; box-shadow: 0 0 0 200vmax var(--carbon); outline-offset: -1px; }
.pq-marco.bisel { outline: 1px solid rgba(255, 255, 255, 0.28); }
.pq-marco.fuera { display: none; }
.pq .tex { z-index: 6; opacity: calc(0.16 * (1 - var(--abre, 0))); }
.pq-cab { position: absolute; left: calc(64 * var(--u)); top: calc(99 * var(--u)); z-index: 2; opacity: var(--cab, 0); }
.pq-cab p { margin: 0; font-size: calc(24 * var(--u)); line-height: 1.3; }
.pq-cab .pq-num { margin-top: calc(22 * var(--u)); font-family: var(--jost); font-weight: 200; font-size: max(11px, calc(13 * var(--u))); letter-spacing: 0.06em; }
.pq-num span { opacity: 0.45; }
.pq-tira { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateX(var(--tx, 0px)); will-change: transform; }
.pq-tira article { position: absolute; left: calc((576 + 900 * var(--k)) * var(--u)); top: 0; width: calc(760 * var(--u)); height: 100%; box-sizing: border-box; padding-bottom: calc(120 * var(--u)); display: flex; flex-direction: column; justify-content: flex-end; opacity: var(--f, 0); }
.pq-tira h3 { margin: 0; font-weight: 400; font-size: calc(66 * var(--u)); line-height: 1.02; }
.pq-tira p { margin: calc(28 * var(--u)) 0 0; max-width: 38ch; font-family: var(--jost); font-weight: 200; font-size: calc(18 * var(--u)); line-height: 1.45; }

/* ---------- Las sesiones ---------- */
.sesiones { position: relative; z-index: 1; height: calc(680 * var(--u)); background: var(--blanco); box-shadow: 0 2px 0 var(--blanco); }
.sesiones .escena { height: 100%; }
.ses-linea { position: absolute; left: calc(64 * var(--u)); top: calc(120 * var(--u)); width: calc(1312 * var(--u)); height: 2px; background: var(--negro); }
.ses-tit { position: absolute; left: calc(64 * var(--u)); top: calc(190 * var(--u)); width: calc(780 * var(--u)); }
.ses-tit h2 { margin: 0; font-weight: 400; font-size: calc(56 * var(--u)); line-height: 1.02; }
.ses-tit .caps { letter-spacing: 0.06em; white-space: nowrap; }
.sesiones .rotulo-s { position: absolute; left: calc(880 * var(--u)); top: calc(150 * var(--u)); transition: opacity 1s ease 0.2s; }
.js .sesiones .rotulo-s { opacity: 0; }
.sesiones .rotulo-s span { opacity: 0.6; }
.ses-lista { position: absolute; left: calc(880 * var(--u)); top: calc(196 * var(--u)); width: calc(480 * var(--u)); display: flex; flex-direction: column; gap: calc(56 * var(--u)); transition: opacity 1s ease 0.3s; }
.js .ses-lista { opacity: 0; }
.sesiones.visto .rotulo-s, .sesiones.visto .ses-lista { opacity: 1; }
.ses-item { display: flex; flex-direction: column; transition: opacity 0.5s ease; }
@media (hover: hover) { .ses-lista:has(.ses-item:hover) .ses-item:not(:hover) { opacity: 0.35; } }
.ses-item .acc-btn { justify-content: space-between; }
.ses-nom { font-size: calc(30 * var(--u)); line-height: 1.2; }
.ses-item .mas { font-size: calc(28 * var(--u)); }
.ses-sub { margin: calc(14 * var(--u)) 0 0; font-size: calc(18 * var(--u)); line-height: 1.55; }
.ses-det { padding-top: calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.ses-det p { margin: 0; font-family: var(--jost); font-weight: 200; font-size: max(13px, calc(15 * var(--u))); line-height: 1.45; }
.ses-item a.fl { align-self: flex-start; margin-top: calc(20 * var(--u)); font-family: var(--jost); font-weight: 200; font-size: max(13px, calc(16 * var(--u))); }

/* ---------- Testimonios ---------- */
.testimonios { position: relative; z-index: 1; height: calc(460 * var(--u)); background: var(--blanco); box-shadow: 0 2px 0 var(--blanco); }
.testimonios .escena { height: 100%; }
.tc-nombres { position: absolute; left: calc(64 * var(--u)); top: calc(40 * var(--u)); display: flex; flex-direction: column; }
.tc-nombres .rotulo-s { opacity: 0.6; margin-bottom: calc(18 * var(--u)); }
.tc-nombres button { position: relative; display: flex; gap: calc(14 * var(--u)); padding: calc(6 * var(--u)) 0; background: none; border: none; cursor: pointer; color: var(--negro); text-align: left; font-family: var(--jost); font-weight: 200; font-size: max(12px, calc(14 * var(--u))); letter-spacing: 0.02em; opacity: 0.45; transition: opacity 0.5s ease; }
.tc-nombres button.on { opacity: 1; }
.tc-barra { position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--negro); transition: width 0s linear; }
.on .tc-barra { width: 100%; transition: width 7s linear; }
.tc-toc .on .tc-barra { transition-duration: 0.4s; }
.tc-citas { position: absolute; left: calc(880 * var(--u)); right: calc(160 * var(--u)); top: calc(34 * var(--u)); height: calc(300 * var(--u)); }
.tc-cita { position: absolute; left: 0; top: 0; right: 0; margin: 0; overflow: hidden; padding-top: calc(6 * var(--u)); opacity: 0; transition: opacity 0.6s ease; }
.tc-cita.on { opacity: 1; }
.tc-cita blockquote { margin: 0; }
.tc-cita blockquote p { margin: 0; font-size: calc(22 * var(--u)); line-height: 1.45; text-indent: -0.42em; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.tc-cita.on blockquote p { transform: none; }
.tc-cita figcaption { margin: calc(20 * var(--u)) 0 0; font-family: var(--jost); font-weight: 200; font-size: max(11px, calc(12 * var(--u))); letter-spacing: 0.06em; opacity: 0.6; }

/* ---------- Quién ---------- */
.quien { position: relative; z-index: 1; height: calc(1000 * var(--u)); background: var(--blanco); box-shadow: 0 2px 0 var(--blanco); overflow: hidden; }
.quien-foto { position: absolute; left: 0; top: 0; width: calc(50% - 80 * var(--u)); height: 100%; overflow: hidden; }
.quien-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.quien .escena { height: 100%; }
.quien-txt { position: absolute; left: calc(760 * var(--u)); top: calc(300 * var(--u)); width: calc(560 * var(--u)); display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
.quien-txt h2 { margin: 0; font-weight: 400; font-size: calc(48 * var(--u)); line-height: 1.04; }
.quien-txt .caps { letter-spacing: 0.06em; white-space: nowrap; }
.quien-txt p { margin: 0; width: calc(440 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.5; }
.quien-txt a.fl { align-self: flex-start; font-family: var(--jost); font-weight: 200; font-size: max(13px, calc(16 * var(--u))); }

/* ---------- Cierre · ref. 5 ---------- */
.cierre { position: relative; z-index: 1; height: 300vh; height: 300svh; background: var(--carbon); color: var(--blanco); box-shadow: 0 2px 0 var(--carbon); }
.cierre-panel { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cierre .tex { z-index: 4; opacity: 0.14; }
.cierre-frase { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; opacity: var(--cf, 0); }
.cierre-frase p { margin: 0; font-size: calc(72 * var(--u)); line-height: 1.04; letter-spacing: 0.01em; text-align: center; white-space: nowrap; }
.cierre-foto { position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(220 * var(--u)); height: calc(330 * var(--u)); margin: calc(-165 * var(--u)) 0 0 calc(-110 * var(--u)); opacity: var(--cp, 0); transform: scale(var(--cs, 1.04)); filter: blur(calc(var(--cb, 10) * 1px)); }
.cierre-foto img { width: 100%; height: 100%; object-fit: cover; }
.cierre-res { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(36 * var(--u)); opacity: var(--cr, 0); transform: translateY(calc(var(--cry, 12) * 1px)); pointer-events: none; }
.cierre-res h2 { margin: 0; font-weight: 400; font-size: calc(40 * var(--u)); line-height: 1.2; letter-spacing: 0.192em; text-align: center; }
.cierre-res a.fl { color: var(--blanco); font-family: var(--jost); font-weight: 200; font-size: max(13px, calc(16 * var(--u))); }
.cierre-res a.fl + a.fl { margin-top: calc(24 * var(--u)); }
.cierre .pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; opacity: var(--cr, 0); pointer-events: none; }
.cierre.activo .cierre-res, .cierre.activo .pie { pointer-events: auto; }

/* =========================================================
   CELULAR Y TABLET VERTICAL (menos de 1024 px)
   ========================================================= */
@media (max-width: 1023px) {
  .panel > .escena, .pq-panel > .escena { left: 0; top: 0; width: 100%; height: 100%; }

  .intro { gap: 0; }
  .intro-logo { left: 0; top: 0; font-size: 30px; }
  .intro-fecha { left: 24px; top: 32px; }
  .intro-fecha .linea { font-size: 11px; }

  .hoja .escena { display: flex; flex-direction: column; justify-content: center; padding: 0 24px; box-sizing: border-box; }
  .hoja h1 { position: static; white-space: normal; font-size: 30px; }
  .hoja h1 .l2 { display: block; }
  .hoja .epi { position: static; width: auto; max-width: 34ch; margin: 28px auto 0; font-size: 16px; }

  .sesion { height: auto; padding: 112px 0 88px; }
  .sesion-cab { flex-direction: column; align-items: flex-start; gap: 20px; padding: 0 24px; }
  .sesion-cab h2 { font-size: 22px; }
  .sesion-cab a { font-size: 14px; }
  .fichas-vent { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px; scrollbar-width: none; }
  .fichas-vent::-webkit-scrollbar { display: none; }
  .fichas { margin-top: 40px; padding: 0 24px; gap: 12px; transform: none; }
  .fichas figure { flex: 0 0 76vw; max-width: 340px; scroll-snap-align: start; }
  .ficha-n { font-size: 11px; margin-bottom: 8px; }
  .fichas .foto { height: min(calc(76vw * 1.18), 400px); }
  .fichas figcaption { padding-top: 16px; }
  .ficha-t { font-size: 17px; }
  .ficha-d { width: auto; font-size: 14px; margin-top: 6px; }

  .dossier { height: auto; }
  .dossier .escena { padding: 88px 24px 96px; }
  .dossier .rotulo-s, .dossier h2, .dx-lista { position: static; width: auto; }
  .rotulo-s { font-size: 11px; }
  .dossier h2 { margin: 14px 0 40px; font-size: 26px; }
  .dx-lista, .dx-item .acc-btn { gap: 12px; }
  .dx-item { padding-top: 12px; }
  .dx-item .acc-btn { gap: 18px; }
  .dx-n { width: 22px; font-size: 12px; }
  .dx-t { font-size: 19px; }
  .dx-item .mas { font-size: 20px; }
  .dx-item .desp p { padding: 10px 0 2px 40px; font-size: 14px; }

  .pq-cab { left: 24px; top: 96px; }
  .pq-cab p { font-size: 20px; }
  .pq-cab .pq-num { margin-top: 16px; font-size: 12px; }
  .pq-tira article { left: calc(24px + 100vw * var(--k)); width: calc(100vw - 48px); padding-bottom: 104px; }
  .pq-tira h3 { font-size: 40px; }
  .pq-tira p { margin-top: 20px; font-size: 16px; }

  .sesiones { height: auto; }
  .sesiones .escena { padding: 72px 24px 88px; }
  .ses-linea, .ses-tit, .sesiones .rotulo-s, .ses-lista { position: static; width: auto; }
  .ses-linea { margin-bottom: 48px; }
  .ses-tit h2 { font-size: 34px; }
  .sesiones .rotulo-s { margin-top: 56px; }
  .ses-lista { margin-top: 20px; gap: 44px; }
  .ses-nom { font-size: 26px; }
  .ses-item .mas { font-size: 26px; }
  .ses-sub { margin-top: 10px; font-size: 17px; }
  .ses-det { padding-top: 16px; gap: 10px; }
  .ses-det p { font-size: 15px; }
  .ses-item a.fl { margin-top: 18px; font-size: 16px; }

  .testimonios { height: auto; }
  .testimonios .escena { padding: 40px 24px 96px; }
  .tc-nombres, .tc-citas { position: static; width: auto; height: auto; }
  .tc-nombres .rotulo-s { margin-bottom: 14px; }
  .tc-nombres button { gap: 14px; padding: 6px 0; font-size: 14px; align-self: flex-start; }
  .tc-citas { margin-top: 40px; display: grid; }
  .tc-cita { position: relative; grid-area: 1 / 1; padding-top: 6px; }
  .tc-cita blockquote p { font-size: 20px; }
  .tc-cita figcaption { margin-top: 18px; font-size: 12px; }

  .quien { height: auto; }
  .quien-foto { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .quien .escena { padding: 56px 24px 104px; }
  .quien-txt { position: static; width: auto; gap: 28px; }
  .quien-txt h2 { font-size: 34px; }
  .quien-txt p { width: auto; font-size: 18px; }
  .quien-txt a.fl { font-size: 16px; }

  .cierre-frase p { font-size: min(30px, 7.4vw); white-space: normal; padding: 0 24px; }
  .cierre-foto { width: 150px; height: 225px; margin: -112px 0 0 -75px; }
  .cierre-res { gap: 28px; padding: 0 24px 200px; }
  .cierre-res h2 { font-size: 22px; }
  .cierre-res a.fl + a.fl { margin-top: 16px; }
}