/* css/chapters.css — Capítulos: paneles horizontales dentro del pin y capas de profundidad
   ---------------------------------------------------------------------------------------
   Mientras una sección está fijada, el scroll vertical desplaza sus paneles en horizontal
   (lo pilota js/main.js). Capas, de atrás adelante:
     escena 3D (quieta) · número gigante del capítulo (0,3×) · paneles: cajas redondeadas
     en una esquina (1×) · manchas de color en primer plano (1,6×) · progreso
   Variables que escribe main.js:
     sección  → --in (entrada 0..1), --out (salida 0..1)
     .chapter → --p (progreso de los paneles 0..1)
     .panel   → --v (lo presente que está el panel 0..1); opacity
   Tema por capítulo: data-theme="light" (texto oscuro) o "dark" (texto claro).        */

.stage--chapter {
  display: block;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.chapter {
  /* Geometría (escritorio): la caja activa va pegada a una esquina para dejar libre el
     centro de la escena 3D, que es la protagonista */
  --pw: clamp(300px, 30vw, 470px); /* ancho de la caja */
  --gap: 6vw;                      /* separación entre cajas */
  --edge: 3.5vw;                   /* margen hasta el borde de la pantalla */
  --x0: calc(100vw - var(--pw) - var(--edge));   /* borde izquierdo de la caja activa */
  --top: 104px;                    /* hueco de la cabecera */

  --grad: linear-gradient(100deg, #BE3C80 0%, #9F5FF0 52%, #489FDF 100%);
  --c-ink: #101820;
  --c-ink-2: rgba(16, 24, 32, .8);
  --c-line: rgba(16, 24, 32, .14);
  --c-box: rgba(255, 255, 255, .62);
  --c-box-line: rgba(255, 255, 255, .78);
  --c-num: rgba(159, 95, 240, .3);
  --c-accent: #BE3C80;
  --fade: calc(var(--in, 1) * (1 - var(--out, 0)));

  position: absolute;
  inset: 0;
  transform: translate3d(0, calc((1 - var(--in, 1)) * 5vh - var(--out, 0) * 5vh), 0);
  pointer-events: none;
}
/* La opacidad va en cada capa y no en .chapter: un padre con opacity < 1 anula el
   desenfoque (backdrop-filter) de las cajas. Por eso la pista de paneles tampoco la lleva:
   main.js multiplica la entrada/salida en la opacidad de cada caja. */
.chapter > :not(.chapter-track) { opacity: var(--fade); }
.stage--chapter[data-align="left"] .chapter { --x0: var(--edge); }

.chapter[data-theme="dark"] {
  --c-ink: #FFFFFF;
  --c-ink-2: rgba(244, 236, 255, .88);
  --c-line: rgba(255, 255, 255, .2);
  --c-box: rgba(16, 24, 32, .5);
  --c-box-line: rgba(255, 255, 255, .14);
  --c-num: rgba(255, 255, 255, .3);
  --c-accent: #F0D8FF;
}

/* --- Capa 1 · número del capítulo, gigante y en contorno ------------------------------ */
.chapter-back {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.chapter-num {
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-46%);
  font: 900 min(64vh, 40vw)/.8 var(--font-display);
  letter-spacing: -.07em;
  color: transparent;
  -webkit-text-stroke: 2px var(--c-num);
  user-select: none;
}
.stage--chapter[data-align="left"] .chapter-num { right: auto; left: 2vw; }

/* --- Capa 2 · paneles: cajas redondeadas en las esquinas ---------------------------------
   Por defecto abajo; con data-corner="top" en el <article> va arriba (según lo que tape). */
.chapter-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x0);
  display: flex;
  gap: var(--gap);
  will-change: transform;
}
.panel {
  flex: none;
  width: var(--pw);
  height: 100%;
  box-sizing: border-box;
  padding: var(--top) 0 6vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--c-ink);
}
.panel[data-corner="top"] { justify-content: flex-start; }   /* esquina superior, si la escena lo pide */
.panel-inner {
  opacity: 0;                   /* la pilota main.js (en .panel-inner para no anular el cristal) */
  padding: 2rem 2.2rem 2.1rem;
  border-radius: 26px;
  background: var(--c-box);
  border: 1px solid var(--c-box-line);
  box-shadow: 0 24px 60px rgba(16, 24, 32, .18);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.panel a, .panel button { pointer-events: auto; }

.panel-eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.4rem;
  font: 600 .78rem/1 var(--font-primary);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.panel-index {
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.panel-eyebrow::after {
  content: '';
  width: 2.4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  order: 1;
}
.panel-eyebrow > :last-child { order: 2; }

.panel-title {
  margin: 0 0 1.3rem;
  font: 800 clamp(1.9rem, 2.9vw, 3.2rem)/1.06 var(--font-display);
  letter-spacing: -.035em;
  color: var(--c-ink);
  text-wrap: balance;
}
.panel-title em { font-style: normal; }

/* Titulares que se descubren palabra a palabra (main.js las envuelve en .w) */
.panel-title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .14em .04em .1em 0;
  margin: -.14em -.04em -.1em 0;
}
.panel-title .w > span {
  --rv: clamp(0, calc(var(--v, 1) * 2.4 - var(--i, 0) * .14 - .3), 1);
  display: inline-block;
  transform: translate3d(0, calc((1 - var(--rv)) * 115%), 0);
}
.panel-title .w--accent > span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.panel-text {
  margin: 0;
  font: 400 clamp(.98rem, 1.05vw, 1.1rem)/1.62 var(--font-primary);
  color: var(--c-ink-2);
  opacity: clamp(0, calc(var(--v, 1) * 2 - .7), 1);
  transform: translate3d(0, calc((1 - var(--v, 1)) * 22px), 0);
}
.panel-text b { color: var(--c-ink); font-weight: 600; }

.panel-chips, .panel-list, .panel-actions, .panel-note {
  opacity: clamp(0, calc(var(--v, 1) * 2 - .9), 1);
  transform: translate3d(0, calc((1 - var(--v, 1)) * 30px), 0);
}

.panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.panel-chips li {
  padding: .5rem .95rem;
  border-radius: 99px;
  font: 600 .8rem/1 var(--font-primary);
  color: var(--c-ink);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.chapter[data-theme="dark"] .panel-chips li {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
}

.panel-list {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  counter-reset: svc;
}
.panel-list li {
  counter-increment: svc;
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--c-line);
  font: 700 clamp(1.02rem, 1.45vw, 1.4rem)/1.25 var(--font-display);
  letter-spacing: -.01em;
}
.panel-list li::before {
  content: counter(svc, decimal-leading-zero);
  font: 700 .72rem/1 var(--font-primary);
  letter-spacing: .08em;
  color: var(--c-accent);
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.8rem;
}
.panel-actions .section-button { box-shadow: none; }
.panel-actions .section-button.primary {
  background: var(--grad);
  background-size: 160% 100%;
  transition: background-position .5s ease, transform .3s ease;
}
.panel-actions .section-button.primary:hover { background-position: 100% 0; }
.panel-actions .section-button.primary::after { content: '↗'; margin-left: .5rem; }
/* Botones con degradado: el borde es transparente, así que el fondo debe empezar bajo el
   borde y no repetirse. Si no, asoma 1px del otro extremo del degradado en el lateral. */
.section-button.primary, .section-button.primary:hover,
.section-button.secondary, .section-button.secondary:hover,
.panel-actions .section-button.primary, .panel-actions .section-button.primary:hover,
.footer-actions .section-button.primary, .footer-actions .section-button.primary:hover {
  background-origin: border-box;
  background-repeat: no-repeat;
}
.section-button.ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.section-button.ghost:hover { border-color: var(--c-ink); }
.panel-note {
  margin: 1rem 0 0;
  font-size: .8rem;
  color: var(--c-ink-2);
}

/* Variante destacada: para los conceptos clave donde queremos enfocar la atención
   (borde con el degradado de marca y algo más de presencia) */
.panel--glass .panel-inner {
  background:
    linear-gradient(var(--c-box), var(--c-box)) padding-box,
    linear-gradient(135deg, rgba(190, 60, 128, .9), rgba(159, 95, 240, .7), rgba(72, 159, 223, .9)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 30px 80px rgba(16, 24, 32, .28);
}

/* --- Capa 4 · manchas de color en primer plano (sin filter: blur, que es caro) -------- */
.chapter-front {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.fx {
  position: absolute;
  width: var(--s, 20vmax);
  height: var(--s, 20vmax);
  margin: calc(var(--s, 20vmax) / -2) 0 0 calc(var(--s, 20vmax) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
}
.fx--rose     { --c: rgba(190, 60, 128, .42); }
.fx--purple   { --c: rgba(159, 95, 240, .36); }
.fx--blue     { --c: rgba(72, 159, 223, .34); }
.fx--lavender { --c: rgba(240, 216, 255, .6); }
.fx--spark {
  --s: 10px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}

/* --- Progreso y pista --------------------------------------------------------------------- */
.chapter-ui {
  position: absolute;
  left: var(--edge);
  bottom: 6vh;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  color: var(--c-ink);
}
.chapter-progress {
  display: flex;
  align-items: center;
  gap: .75rem;
  font: 700 .75rem/1 var(--font-primary);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.stage--chapter[data-align="left"] .chapter-ui { left: auto; right: var(--edge); }
.cp-total { opacity: .45; }
.cp-bar {
  position: relative;
  width: 7rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-line);
  overflow: hidden;
}
.cp-bar i {
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}
.chapter-hint {
  font: 600 .75rem/1 var(--font-primary);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: clamp(0, calc(.75 - var(--p, 0) * 3), .75);
}
.chapter-hint::after {
  content: '→';
  display: inline-block;
  margin-left: .5rem;
  animation: hint-nudge 1.4s ease-in-out infinite;
}
@keyframes hint-nudge { 50% { transform: translateX(5px); } }

/* --- Pie --------------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  padding: 7rem 7vw 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  color: rgba(255, 255, 255, .78);
  font: 400 .82rem/1.5 var(--font-primary);
  background: linear-gradient(to top, rgba(16, 24, 32, .88), rgba(16, 24, 32, 0));
}
/* Cierre: botones a la izquierda y logo a la derecha (en móvil, apilados y centrados) */
.footer-end {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.4rem;
}
.footer-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.footer-actions .section-button { box-shadow: none; box-sizing: border-box; }
.footer-actions .section-button.primary {
  background: linear-gradient(100deg, #BE3C80 0%, #9F5FF0 52%, #489FDF 100%) border-box no-repeat;
  background-size: 160% 100%;
  transition: background-position .5s ease, transform .3s ease;
}
.footer-actions .section-button.primary:hover { background-position: 100% 0; }
.footer-actions .section-button.primary::after { content: '↗'; margin-left: .5rem; }
.footer-actions .section-button.ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.footer-actions .section-button.ghost:hover { border-color: #fff; }
.footer-logo {
  display: block;
  width: clamp(180px, 20vw, 300px);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35));
}
@media (max-width: 768px), (orientation: portrait) {
  .site-footer { padding-top: 4rem; justify-content: center; text-align: center; }
  .footer-end { flex-direction: column-reverse; align-items: center; gap: 1.8rem; margin-bottom: 2rem; }
  .footer-logo { width: min(68vw, 280px); }
  .footer-actions { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
  .footer-actions .section-button { width: 100%; display: inline-flex; }
  .footer-links { justify-content: center; }
}
.footer-wink { margin: 0; font-style: italic; color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* --- Selector de idioma (cabecera) -------------------------------------------------------- */
.header-actions { display: flex; align-items: center; gap: .6rem; }
.lang-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .15);
}
.lang-switch button {
  padding: .38rem .62rem;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font: 600 .72rem/1 var(--font-primary);
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lang-switch button:hover { color: #fff; }
.lang-switch button[aria-pressed="true"] { background: #fff; color: #c73c6a; }
@media (max-width: 480px) {
  .header-actions { gap: .35rem; }
  .lang-switch button { padding: .34rem .42rem; font-size: .66rem; letter-spacing: .04em; }
}

/* Intro: palabra destacada y consejos según el tipo de entrada */
.intro-card h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #BE3C80, #9F5FF0 52%, #489FDF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.is-touch .only-pointer { display: none; }

/* --- Tableta y móvil en vertical: un panel por pantalla, texto abajo y la escena arriba ---- */
@media (max-width: 900px) and (orientation: portrait), (max-width: 560px) {
  .chapter, .stage--chapter[data-align="left"] .chapter {
    --pw: 88vw;
    --gap: 8vw;
    --edge: 6vw;
    --x0: 6vw;
    --top: 84px;
  }
  .panel, .panel[data-corner="top"] { justify-content: flex-end; padding-bottom: calc(5vh + 2.4rem); }
  .panel-inner { padding: 1.4rem 1.4rem 1.5rem; border-radius: 22px; }
  .chapter-num, .stage--chapter[data-align="left"] .chapter-num {
    left: auto;
    right: -2vw;
    top: 26%;
    font-size: min(46vh, 70vw);
  }
  .panel-title { font-size: clamp(1.7rem, 7.4vw, 2.6rem); margin-bottom: .8rem; }
  .panel-text { font-size: .98rem; line-height: 1.6; }
  .panel-eyebrow { margin-bottom: 1rem; }
  .panel-actions .section-button { width: auto; display: inline-flex; }
  .chapter-ui, .stage--chapter[data-align="left"] .chapter-ui { left: var(--edge); right: auto; bottom: max(3vh, env(safe-area-inset-bottom)); }
  .chapter-hint { display: none; }
  .fx--hide-sm { display: none; }
}

/* Móvil en horizontal (pantallas bajas): texto a la derecha, escena a la izquierda */
@media (max-height: 560px) {
  .chapter { --top: 58px; --pw: 44vw; --gap: 5vw; --edge: 3vw; }
  .panel { padding-bottom: 4vh; }
  .panel-inner { padding: 1rem 1.3rem 1.1rem; border-radius: 18px; }
  .panel-title { font-size: clamp(1.4rem, 3.6vw, 2.2rem); margin-bottom: .6rem; }
  .panel-text { font-size: .85rem; line-height: 1.45; }
  .panel-eyebrow { margin-bottom: .6rem; }
  .panel-list li { padding: .3rem 0; font-size: .95rem; }
  .panel-chips { margin-top: .8rem; }
  .panel-actions { margin-top: 1rem; }
  .chapter-ui { bottom: 3vh; }
}

/* Táctil: sin desenfoque de fondo (backdrop-filter sobre WebGL es muy caro en móvil) */
@media (hover: none) and (pointer: coarse) {
  .chapter { --c-box: rgba(255, 255, 255, .9); }
  .chapter[data-theme="dark"] { --c-box: rgba(16, 24, 32, .84); }
  .panel-inner, .panel-chips li {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .panel-chips li { background: rgba(16, 24, 32, .06); border-color: rgba(16, 24, 32, .1); }
  .chapter[data-theme="dark"] .panel-chips li { background: rgba(255, 255, 255, .1); }
}

@media (prefers-reduced-motion: reduce) {
  .panel-title .w > span { transform: none; }
  .panel-text, .panel-chips, .panel-list, .panel-actions, .panel-note { transform: none; }
  .chapter-hint::after { animation: none; }
}

/* --- Pista "Interactúa": orbitar con el ratón (la muestra main.js una vez) --------------
   Mismo lenguaje que la pista de la intro: trazo blanco con brillo. Va sobre una píldora
   oscura translúcida para leerse también sobre la habitación, que es clara. */
.orbit-hint {
  position: fixed;
  left: 50%;
  bottom: 9vh;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.05rem 1.6rem .9rem;
  border-radius: 26px;
  background: rgba(16, 24, 32, .34);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, 14px, 0) scale(.96);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.orbit-hint.is-on { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
.oh-stage { position: relative; width: 150px; height: 74px; }
.oh-stage svg {
  position: absolute;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55));
}
.oh-arc { left: 0; top: 0; width: 150px; opacity: .55; }
.oh-arc path:first-child { stroke-dasharray: 4 7; animation: oh-flow 1.2s linear infinite; }
.oh-mouse { left: 61px; top: 18px; width: 28px; height: 42px; animation: oh-drag 2.8s ease-in-out infinite; }
.oh-mouse rect { fill: rgba(255, 255, 255, .12); }
.oh-seam { opacity: .4; stroke-width: 1.6; }
.oh-btn { fill: #fff; stroke: none; opacity: 0; animation: oh-press 2.8s ease-in-out infinite; }
.oh-label {
  margin: 0;
  font: 700 .74rem/1 var(--font-primary);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 255, 255, .45);
}
@keyframes oh-drag {
  0%, 12%   { transform: translateX(0); }
  38%       { transform: translateX(-26px) rotate(-6deg); }
  66%       { transform: translateX(26px) rotate(6deg); }
  88%, 100% { transform: translateX(0); }
}
@keyframes oh-press {
  0%, 8%    { opacity: 0; }
  13%, 84%  { opacity: .95; }
  90%, 100% { opacity: 0; }
}
@keyframes oh-flow { to { stroke-dashoffset: -22; } }
html.is-touch .orbit-hint { display: none; }
@media (prefers-reduced-motion: reduce) {
  .oh-mouse, .oh-btn, .oh-arc path:first-child { animation: none; }
  .oh-btn { opacity: .95; }
}

/* Huevo de pascua: el cursor cambia sobre el monitor apagado (js/easter-egg.js) */
html.is-egg-hover, html.is-egg-hover body { cursor: pointer; }

/* --- Parallax con el cursor (js/camera-fx.js escribe --mx / --my en <html>, -1..1) --------
   Se usa la propiedad `translate`, que se suma al `transform` del scroll horizontal. El fondo
   se mueve poco, las cajas algo más y las manchas del primer plano, lo que más. */
.chapter-back  { translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -7px); }
.chapter-track { translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -10px); }
.chapter-front { translate: calc(var(--mx, 0) * -46px) calc(var(--my, 0) * -28px); }