/* ============================================================
   SANTJAKOV — site.css (chrome + patrones compartidos)
   Extraído del <style> de index.html para reutilizar en las
   páginas internas (work.html, about.html) sin tocar el index.
   Deuda: cuando se valide, migrar el index a este archivo.
   ============================================================ */
    :root { --logo-ink: #e7e2d9; }   /* color del logotipo (crema) */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { background: var(--bg); }       /* fallback final si no hay WebGL */
    /* fondo animado: fijo, detrás de TODO el contenido */
    #bgFlow {
      position: fixed; inset: 0;
      width: 100%; height: 100%;
      z-index: -1;
      pointer-events: none;
      display: block;
    }
    body {
      background: transparent;            /* deja ver el fondo animado */
      color: var(--text);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }

    /* ============================================================
       PRELOADER / LOADING PAGE
       symbol in → name unfolds → lockup flies up & shrinks to top-center
       ============================================================ */
    .preloader {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    /* Dark curtain — fades out to reveal the hero */
    .preloader-bg {
      position: absolute;
      inset: 0;
      background: var(--brown-900);                 /* #1a130d sólido */
      transition: opacity 1000ms cubic-bezier(.65,0,.35,1) 150ms;
    }
    .preloader.done .preloader-bg { opacity: 0; }

    /* Lockup: mark + SANTJAKOV wordmark on one row.
       Base size == final NAV logo size. During intro it is scaled UP (centered),
       then on .done it scales back to 1 AND flies to the top-center. */
    .preloader-lockup {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0;
      transform: translateY(0) scale(2);            /* big & centered during intro */
      transform-origin: center center;
      transition:
        gap 700ms cubic-bezier(.65,0,.35,1),
        transform 1300ms cubic-bezier(.77,0,.18,1),
        opacity 350ms ease;
    }
    .preloader-lockup.with-name { gap: 9px; }

    /* Logo ink — white PNGs tinted to cream (#e7e2d9) via CSS mask */
    .ink-mark {
      width: 26px; height: 26px;                    /* base (nav) size; lockup scale enlarges it */
      background-color: var(--logo-ink);
      -webkit-mask: url(assets/img/logo-mark-white.png) no-repeat center / contain;
      mask: url(assets/img/logo-mark-white.png) no-repeat center / contain;
    }
    .ink-name {
      width: 110px; height: 11px;                    /* 522×52 → 10:1 */
      background-color: var(--logo-ink);
      -webkit-mask: url(assets/img/logo-text-white.png) no-repeat left center;
      mask: url(assets/img/logo-text-white.png) no-repeat left center;
      -webkit-mask-size: 110px 11px;
      mask-size: 110px 11px;
    }

    /* mark fades + scales in, blur clears */
    .preloader-mark {
      opacity: 0;
      transform: scale(0.7);
      filter: blur(6px);
      animation: markIn 900ms cubic-bezier(.2,.7,.2,1) 200ms forwards;
    }
    @keyframes markIn { to { opacity: 1; transform: scale(1); filter: blur(0); } }

    /* SANTJAKOV wordmark unfolds out from behind the mark (max-width wipe) */
    .preloader-name {
      max-width: 0;
      transition: max-width 900ms cubic-bezier(.65,0,.35,1);
    }
    .preloader-name.in { max-width: 110px; }

    /* DONE → fly up to top-center & shrink to nav size (scale 1) */
    .preloader.done .preloader-lockup {
      transform: translateY(calc(-50vh + 34px)) scale(1);
    }
    /* cross-fade out once it has landed */
    .preloader.handoff .preloader-lockup { opacity: 0; }

    @media (max-width: 768px) {
      .preloader-lockup { transform: translateY(0) scale(1.65); }
      .preloader.done .preloader-lockup { transform: translateY(calc(-50vh + 30px)) scale(1); }
      .preloader-name.in { max-width: 150px; }
    }

    /* ============================================================
       NAV — centered logo lands here (cross-faded from preloader)
       ============================================================ */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 68px;
      z-index: 120;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 9px;
      opacity: 0;                                   /* revealed at handoff */
      transition: opacity 350ms ease;
    }
    body.intro-handoff .nav-logo { opacity: 1; }
    body.intro-handoff.past-hero .nav-logo { opacity: 0; pointer-events: none; }  /* se va al dejar la hero */

    /* --- hamburguesa (3 líneas) esquina sup. derecha --- */
    .nav-burger {
      position: fixed;
      top: 26px; right: 28px;
      z-index: 140;
      width: 20px; height: 13px;                      /* más discreta */
      background: none; border: 0; padding: 0;
      cursor: pointer;
      display: flex; flex-direction: column; justify-content: space-between;
      opacity: 0;
      pointer-events: none;
      transition: opacity 450ms ease;
    }
    /* hamburguesa visible en todo momento (desde que termina el intro) */
    body.intro-handoff .nav-burger,
    body.menu-open .nav-burger { opacity: 1; pointer-events: auto; }
    .nav-burger span {
      display: block;
      height: 1px; width: 100%;                       /* más delgadas */
      background: rgba(231, 226, 217, 0.75);          /* tono más suave, como los labels */
      transition: transform 420ms cubic-bezier(.65,0,.35,1), opacity 300ms ease;
      transform-origin: center;
    }
    body.menu-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
    body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* --- indicador de sección, a un lado de la hamburguesa --- */
    .nav-section {
      position: fixed;
      top: 26px; right: 64px;
      z-index: 130;
      height: 13px; display: flex; align-items: center;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 450ms ease;
      pointer-events: none;
    }
    body.intro-handoff.past-hero .nav-section { opacity: 1; }

    /* --- CTA fijo abajo-izquierda: book a session --- */
    .book-cta {
      position: fixed;
      bottom: 24px; left: 28px;
      z-index: 130;
      color: var(--cream);
      text-decoration: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity 450ms ease;
    }
    body.intro-handoff.past-hero .book-cta { opacity: 1; pointer-events: auto; }
    body.footer-visible .book-cta { opacity: 0 !important; pointer-events: none !important; }

    /* sello fijo: posición y opacidad controladas por scroll (JS).
       Default abajo y oculto; sube al centro al terminar la filosofía. */
    .seal-fixed {
      position: fixed;
      left: 50%; top: 50%;
      width: 102px; height: auto;
      z-index: 50;                /* detrás de las imágenes de la galería (z-index 61) */
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, calc(-50% + 80vh));
      filter: drop-shadow(0 14px 34px rgba(0,0,0,0.5));
      will-change: transform, opacity, filter;
    }
    @media (max-width: 768px) { .seal-fixed { width: 77px; } }
    /* durante la transición a About (y mientras estás en About) el sello queda oculto:
       una vez que se apagó, no reaparece hasta regresar a la galería */
    body.seal-suppressed .seal-fixed { opacity: 0 !important; }
    /* encasillado: cuadro con esquinas ligeramente redondeadas */
    .book-cta {
      padding: 11px 18px;
      border: 1px solid rgba(231, 226, 217, 0.35);
      border-radius: 6px;
      transition: opacity 450ms ease, border-color 300ms ease, background-color 300ms ease;
    }
    .book-cta:hover {
      border-color: rgba(231, 226, 217, 0.8);
      background-color: rgba(231, 226, 217, 0.05);
    }

    /* --- overlay del menú --- */
    .menu-overlay {
      position: fixed;
      inset: 0;
      z-index: 135;
      background: var(--brown-900);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 600ms cubic-bezier(.65,0,.35,1), visibility 0s linear 600ms;
    }
    body.menu-open .menu-overlay {
      opacity: 1;
      visibility: visible;
      transition: opacity 600ms cubic-bezier(.65,0,.35,1);
    }
    .menu-list { list-style: none; margin: 0; padding: 0; text-align: center; }
    .menu-list a {
      display: block;
      font-family: var(--font-display);
      font-weight: 400;
      text-transform: uppercase;
      font-size: clamp(34px, 5.4vw, 72px);
      line-height: 1.32;
      color: var(--cream);
      text-decoration: none;
      opacity: 0;
      transform: translateY(26px);
      transition: color 300ms ease;
    }
    .menu-list a:hover { color: var(--taupe); font-style: italic; }
    body.menu-open .menu-list a { animation: lineIn 700ms cubic-bezier(.2,.7,.2,1) forwards; }
    body.menu-open .menu-list li:nth-child(1) a { animation-delay: 120ms; }
    body.menu-open .menu-list li:nth-child(2) a { animation-delay: 200ms; }
    body.menu-open .menu-list li:nth-child(3) a { animation-delay: 280ms; }
    body.menu-open .menu-list li:nth-child(4) a { animation-delay: 360ms; }
    .menu-foot {
      position: absolute;
      bottom: 28px; left: 0; right: 0;
      display: flex; justify-content: center; gap: 28px;
      color: var(--text-muted);
    }
    .menu-foot a { color: var(--text-muted); text-decoration: none; }
    .menu-foot a:hover { color: var(--cream); }
    @media (max-width: 768px) {
      #nav { height: 60px; }
    }

    /* ============================================================
       HERO — escultura 3D + frase poética encima (ref. LUXAM)
       Sticky stage: el scroll la desvanece con rotación.
       ============================================================ */
    /* SIN sticky: la hero mide exactamente 100vh y Philosophy llega
       inmediatamente después — cero pantalla vacía entre secciones */
    .hero-wrap { height: 100vh; position: relative; }
    .hero {
      position: relative;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;                        /* deja ver el fondo animado */
    }

    /* --- escultura: perspective stage + tilt + float --- */
    .sculpt-stage {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1100px;
    }
    .sculpt-tilt {
      transform:
        translateY(var(--scroll-y, 0px))
        rotateY(calc(var(--ry, 0deg) + var(--scroll-ry, 0deg)))
        rotateX(var(--rx, 0deg))
        scale(var(--scroll-s, 1));
      opacity: var(--scroll-o, 1);
      will-change: transform, opacity;
    }
    .sculpt-3d {
      width: min(78vh, 92vw);
      height: 78vh;
      cursor: grab;
      touch-action: pan-y;                /* permite scroll vertical en touch */
      opacity: 0;
      transform: scale(1.06) translateY(10px);
      filter: blur(8px);
      animation: sculptFloat 9s ease-in-out 2.6s infinite alternate;
    }
    .sculpt-3d:active { cursor: grabbing; }
    .sculpt-3d canvas { width: 100% !important; height: 100% !important; display: block; }
    /* móvil: imagen estática en lugar del video+WebGL */
    .sculpt-static { width: 100%; height: 100%; object-fit: contain; display: none; }
    body.is-mobile .sculpt-static { display: block; }
    body.is-mobile .sculpt-3d canvas:not(.sculpt-static) { display: none; }
    /* entra solo cuando el intro terminó Y el modelo 3D ya cargó */
    body.intro-handoff.model-ready .sculpt-3d {
      transition: opacity 1400ms cubic-bezier(.2,.7,.2,1) 250ms,
                  transform 1600ms cubic-bezier(.2,.7,.2,1) 250ms,
                  filter 1400ms cubic-bezier(.2,.7,.2,1) 250ms;
      opacity: 1;
      transform: scale(1) translateY(0);
      filter: blur(0);
    }
    @keyframes sculptFloat {
      from { translate: 0 0; }
      to   { translate: 0 -12px; }
    }

    /* --- frase display encima de la escultura --- */
    .hero-display {
      position: relative;
      z-index: 5;
      margin: 0;
      text-align: center;
      font-family: var(--font-display);
      font-weight: 400;                              /* normal — para The Seasons */
      text-transform: uppercase;
      color: var(--cream);
      font-size: clamp(42px, 8vw, 128px);
      line-height: 0.88;                               /* interlineado pegado */
      letter-spacing: 0.01em;
      text-shadow: 0 2px 26px rgba(0,0,0,0.5),
                   0 1px 8px rgba(0,0,0,0.35);         /* sombra sutil para resaltar */
      transform: translateY(var(--text-y, 0px));
      opacity: var(--text-o, 1);
      will-change: transform, opacity;
    }
    .hero-display .line {
      display: block;
      position: relative;
      opacity: 0;
      transform: translateY(36px);
    }
    .hero-display .line:nth-child(1) { left: -0.45em; }
    .hero-display .line:nth-child(2) { left:  0.40em; }
    .hero-display .line:nth-child(3) { left: -0.10em; }
    .hero-display .it { font-style: italic; }
    body.intro-handoff .hero-display .line {
      animation: lineIn 1100ms cubic-bezier(.2,.7,.2,1) forwards;
    }
    body.intro-handoff .hero-display .line:nth-child(1) { animation-delay: 1350ms; }
    body.intro-handoff .hero-display .line:nth-child(2) { animation-delay: 1500ms; }
    body.intro-handoff .hero-display .line:nth-child(3) { animation-delay: 1650ms; }
    @keyframes lineIn { to { opacity: 1; transform: translateY(0); } }

    /* --- velo de salida: degradado hacia café oscuro SOLO en la parte baja,
           el borde inferior queda transparente = costura invisible con philo --- */
    .hero-dim {
      position: absolute;
      inset: 0;
      z-index: 8;
      background: linear-gradient(to bottom,
        rgba(12, 11, 10, 0.55) 0%,
        rgba(12, 11, 10, 0.85) 55%,
        transparent 100%);
      opacity: 0;
      pointer-events: none;
    }

    /* --- scroll hint: círculo + flecha --- */
    .hero-hint {
      position: absolute;
      z-index: 6;
      bottom: 7vh;
      left: 50%;
      transform: translateX(-50%);
      width: 84px; height: 84px;
      border: 1px solid rgba(231, 226, 217, 0.32);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--cream);
      font-size: 18px;
      opacity: 0;
      transition: opacity 600ms ease;
    }
    body.intro-handoff .hero-hint { opacity: calc(var(--hint-o, 1) * 0.9); }
    .hero-hint .arr { animation: hintArr 2.2s ease-in-out infinite; }
    @keyframes hintArr {
      0%, 100% { transform: translateY(-3px); opacity: .9; }
      50%      { transform: translateY(5px);  opacity: .5; }
    }

    /* ============================================================
       PHILOSOPHY — frase word-by-word + relieve oscuro que emerge
       con el cursor + sello de cera al final
       ============================================================ */
    /* stage: da el recorrido de scroll; la sección se queda PEGADA al viewport */
    .philo-stage {
      position: relative;
      height: 190vh;            /* recorrido: entrada (blur→nítido) · sostener · salida (nítido→blur) */
      margin-top: -55vh;        /* solapa el inicio del pin con el final del hero: sin café muerto */
      background: transparent;
    }
    .philo {
      position: sticky;
      top: 0;
      height: 100vh;            /* fija al viewport: el contenido NO cambia de altura */
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;  /* el café lo da el body; deja ver el hero durante el solape */
    }
    .philo-bg {
      position: absolute; inset: 0;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 74%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 74%, transparent 100%);
    }
    .philo-bg canvas { width: 100% !important; height: 100% !important; display: block; }
    /* transición homogénea pegada a los negros en los bordes de la sección */
    .philo::before {
      content: '';
      display: none;            /* sin degradado de costura: café plano uniforme como el hero */
      position: absolute; inset: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(to bottom,
        transparent 0%,                  /* costura invisible: mismo café que la hero */
        rgba(12, 11, 10, 0.75) 10%,      /* el dip oscuro ocurre DENTRO de la sección */
        rgba(12, 11, 10, 0.30) 24%,
        transparent 38%,
        transparent 68%,
        rgba(12, 11, 10, 0.18) 84%,
        rgba(18, 17, 16, 0.55) 94%,
        var(--brown-900) 100%);          /* regresa al café sólido para la galería */
    }

    /* === aparición/desaparición SOLO con blur + opacity (pin) ===
       Controladas por el scroll del stage. Sin transform de posición:
       el contenido se mantiene FIJO y centrado, nunca cambia de altura. */
    .philo-bg,
    .philo-center {
      opacity: var(--philo-o, 0);
      filter: blur(var(--philo-blur, 20px));
      will-change: opacity, filter;
    }

    .philo-center {
      position: relative;
      z-index: 5;
      padding: 0 6vw;
      max-width: 1550px;        /* más ancho → la frase cae en ~5 líneas */
      text-align: center;
    }
    .philo-text {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 400;
      text-transform: uppercase;
      font-size: clamp(24px, 3.2vw, 48px);
      line-height: 1.22;
      letter-spacing: 0.015em;
      text-shadow: 0 2px 22px rgba(0,0,0,0.55);
    }
    .philo-strong { color: var(--cream); }                    /* primera mitad: crema */
    .philo-soft   { color: rgba(186, 178, 167, 0.82); }       /* cierre: taupe suave  */

    /* word-by-word reveal (misma mecánica del sitio anterior) */
    .word-fill {
      display: inline-block;
      opacity: 0;
      transform: translateX(36px);
      transition:
        opacity 800ms cubic-bezier(.2,.7,.2,1),
        transform 900ms cubic-bezier(.2,.7,.2,1);
      will-change: opacity, transform;
    }
    .word-fill.in { opacity: 1; transform: translateX(0); }

    /* sello de cera: se estampa al terminar la frase */
    .philo-seal {
      margin-top: 7vh;
      height: 128px;
      display: flex;
      justify-content: center;
    }
    .philo-seal img {
      height: 100%; width: auto;
      opacity: 0;
      transform: scale(1.1);
      filter: drop-shadow(0 10px 22px rgba(0,0,0,0.4));
    }
    .philo-seal.stamped img {
      /* asentamiento elegante: fade + ligera reducción, sin rebote ni giro */
      animation: sealStamp 1100ms cubic-bezier(.25, .8, .25, 1) forwards;
    }
    @keyframes sealStamp {
      from { opacity: 0; transform: scale(1.1); }
      to   { opacity: 1; transform: scale(1); }
    }
    @media (max-width: 768px) {
      .philo-text { font-size: clamp(20px, 5.6vw, 30px); }
      .philo-seal { height: 96px; margin-top: 5vh; }
    }

    /* ============================================================
       GALLERY — grid editorial con parallax (mecánica v1) sobre café
       sólido; el sello de cera viaja y se ancla al centro (ref. ottografie)
       ============================================================ */
    .gallery {
      position: relative;
      padding: 16vh 0 20vh;
      /* sin background: el café sólido del body es el fondo */
    }
    .g-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 4vh 2%;
      padding: 0 6vw;
      position: relative;
    }
    .g-item {
      position: relative;
      z-index: 61;                             /* SOLO las imágenes pasan sobre el sello (z50) */
      transform: translateY(var(--py, 0px));   /* parallax por imagen */
      will-change: transform;
      width: 100%;
      margin: 0;
    }
    .g-inner {
      position: relative;
      overflow: hidden;
      aspect-ratio: 3 / 4;
      opacity: 0;
      transform: translateY(90px) scale(0.94);
      transition:
        opacity 1200ms cubic-bezier(.2,.7,.2,1),
        transform 1300ms cubic-bezier(.2,.7,.2,1);
      will-change: transform, opacity;
    }
    .g-inner.tall { aspect-ratio: 2 / 3; }
    .g-inner.wide { aspect-ratio: 4 / 5; }
    .g-item.in .g-inner { opacity: 1; transform: translateY(0) scale(1); }
    .g-inner img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 1100ms cubic-bezier(.2,.7,.2,1);
    }
    .g-inner:hover img { transform: scale(1.05); }

    /* posiciones de celdas: mosaico editorial estilo vadersdye —
       imágenes grandes (≈35-42% del ancho), escalonadas, alternando lados,
       con amplio espacio negativo. Pueden cruzar el centro (el sello va detrás). */
    .cell-1  { grid-column: 1 / 6; }
    .cell-2  { grid-column: 8 / 12; margin-top: 15vh; }
    .cell-3  { grid-column: 3 / 7;  margin-top: 8vh; margin-left: 150px; }   /* Anubis 150px a la derecha */
    .cell-4  { grid-column: 8 / 13; }
    .cell-5  { grid-column: 1 / 5;  margin-top: 16vh; }
    .cell-6  { grid-column: 7 / 12; margin-top: 4vh; margin-left: -180px; }   /* Hannya 180px a la izquierda */
    .cell-7  { grid-column: 2 / 6;  margin-top: 13vh; }
    .cell-8  { grid-column: 8 / 13; }
    .cell-9  { grid-column: 1 / 6;  margin-top: 18vh; }
    .cell-10 { grid-column: 5 / 10; margin-top: 9vh; }

    /* frases apenas visibles: H1 uppercase serif, tono apenas más claro que el café */
    .g-phrase {
      margin: 9vh 0;
      padding: 0 6vw;
      font-family: var(--font-display);
      font-weight: 400;
      text-transform: uppercase;
      font-size: var(--t-h1);              /* H1 de la escala (64/48/36) */
      line-height: var(--lh-h1);
      letter-spacing: var(--ls-h1);
      color: rgba(244, 241, 236, 0.2);    /* más blancas y más visibles */
      pointer-events: none;
    }
    .g-phrase.left  { text-align: left; }
    .g-phrase.right { text-align: right; }

    /* el sello cuando viaja fijado al centro del viewport */
    .seal-pinned {
      position: fixed !important;
      top: 50vh; left: 50vw;
      transform: translate(-50%, -50%) scale(var(--seal-zoom, 1)) !important;
      animation: none !important;         /* el JS controla la opacidad durante el pin */
      height: 128px !important;           /* gana sobre el height:100% del estado en flujo */
      width: auto !important;
      z-index: 50;                        /* debajo de las imágenes (z60), sobre el fondo */
      margin: 0;
    }
    @media (max-width: 768px) {
      .g-grid { gap: 1.5vh 2%; padding: 0 5vw; }
      .g-grid .g-item { grid-column: span 12 !important; margin: 0 0 4vh !important; max-width: 78%; }
      .g-grid .g-item:nth-child(odd)  { margin-right: auto !important; }
      .g-grid .g-item:nth-child(even) { margin-left: auto !important; }
      .seal-pinned { height: 96px; }
    }

    /* ============================================================
       THE ARTIST — retrato de Santi full-bleed, texto editorial.
       Entra con el zoom-blur de la galería (ref. Sandhill/Pinterest)
       ============================================================ */
    .artist {
      position: relative;
      z-index: 70;
      min-height: 100vh;
      display: flex;
      align-items: flex-end;              /* texto centrado hacia abajo */
      justify-content: center;
      text-align: center;
      overflow: hidden;
      background: var(--bg);
      /* INVISIBLE hasta el takeover: nunca se asoma con el scroll.
         El fade café → foto sucede en el lugar, sin movimiento. */
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;     /* fade muy rápido → casi sin negro en el takeover */
    }
    .artist.shown { opacity: 1; pointer-events: auto; }
    .artist-bg {
      position: absolute;
      inset: 0;
    }
    .artist-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: 38% center;        /* la cara de Santi respira a la izquierda */
      filter: brightness(0.82) contrast(1.06);
    }
    /* velo para fundir bordes con el café y dar legibilidad al texto */
    .artist-bg::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(to bottom,
          var(--bg) 0%, transparent 16%,
          transparent 52%,
          rgba(18, 17, 16, 0.6) 78%,
          var(--bg) 100%);               /* aterriza sólido en el café de Book: sin costura */
    }
    .artist-content {
      position: relative;
      z-index: 5;
      margin: 0 auto 13vh;                 /* el bloque respira más arriba */
      width: min(880px, 92vw);
      padding: 0 4vw;
    }
    .artist-title {
      margin: 0;
      font-family: var(--font-display);   /* The Seasons (fallback Cormorant) */
      font-weight: 400;
      text-transform: uppercase;
      font-size: clamp(34px, 4.6vw, 72px);
      line-height: 0.98;
      letter-spacing: 0.02em;
      color: var(--cream);
      text-shadow: 0 2px 26px rgba(0,0,0,0.5);
    }
    .artist-poetic {
      margin: 18px auto 0;
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(16px, 1.4vw, 20px);  /* más chico, líneas más largas */
      line-height: 1.45;
      color: rgba(231, 226, 217, 0.85);
      max-width: 760px;
    }
    .artist-body {
      margin: 16px auto 0;
      color: var(--text-muted);
      font-size: var(--t-body-s);
      max-width: 660px;
    }
    /* reveal en cascada al entrar */
    .artist-content > * {
      opacity: 0;
      transform: translateY(26px);
    }
    .artist.in .artist-content > * {
      animation: lineIn 1000ms cubic-bezier(.2,.7,.2,1) forwards;
    }
    .artist.in .artist-content > *:nth-child(1) { animation-delay: 120ms; }
    .artist.in .artist-content > *:nth-child(2) { animation-delay: 280ms; }
    .artist.in .artist-content > *:nth-child(3) { animation-delay: 440ms; }

    /* ============================================================
       BOOK A SESSION — cierre minimal: título + texto breve + 2 CTAs
       ============================================================ */
    .book {
      position: relative;
      z-index: 70;                        /* mismo plano que artist: fluye después de él */
      min-height: 92vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: transparent;            /* deja ver el fondo animado */
      padding: 14vh 6vw;
    }
    /* velo superior: funde el inicio de Book con el café del final de About (sin corte) */
    .book::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 55vh;
      background: linear-gradient(to bottom, var(--bg) 0%, rgba(18,17,16,0.5) 38%, transparent 100%);
      pointer-events: none;
      z-index: 0;
    }
    .book-inner { position: relative; z-index: 1; transform: translateY(-120px); }   /* CTA 120px más arriba */
    .book-inner { max-width: 1040px; }
    .book-title {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 400;
      text-transform: uppercase;
      font-size: clamp(46px, 7vw, 112px);
      line-height: 0.96;
      letter-spacing: 0.015em;
      color: var(--cream);
    }
    /* link único bajo el título (estilo editorial: pequeño, subrayado) */
    .book-link {
      display: inline-block;
      margin-top: 40px;
      color: var(--cream);
      text-decoration: none;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(231, 226, 217, 0.38);
      opacity: 0;                        /* aparece tras la animación del título */
      transition: border-color 300ms ease;
    }
    .book-link:hover { border-color: var(--cream); }
    .book-desc {
      margin: 22px auto 0;
      color: var(--text-muted);
      max-width: 480px;
    }
    .book-actions {
      margin-top: 42px;
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .btn {
      display: inline-block;
      padding: 14px 26px;
      border-radius: 6px;
      text-decoration: none;
      transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
    }
    .btn-primary {
      background: var(--cream);
      color: #181613;
      border: 1px solid var(--cream);
    }
    .btn-primary:hover { background: transparent; color: var(--cream); }
    .btn-ghost {
      border: 1px solid rgba(231, 226, 217, 0.35);
      color: var(--cream);
      background: transparent;
    }
    .btn-ghost:hover {
      border-color: rgba(231, 226, 217, 0.8);
      background: rgba(231, 226, 217, 0.05);
    }
    /* entrada del CTA (estilo del video): el título SUBE línea por línea tras una máscara */
    .book-title .bl-mask { display: block; overflow: hidden; }
    .book-title .bl-in {
      display: block;
      transform: translateY(110%);
      transition: transform 950ms cubic-bezier(.16, .84, .3, 1);
      will-change: transform;
    }
    .book.in .bl-in { transform: translateY(0); }
    .book.in .bl-mask:nth-child(2) .bl-in { transition-delay: 130ms; }
    /* el botón aparece DESPUÉS del texto, solo con opacidad */
    .book.in .book-link { animation: bookBtnIn 500ms ease 850ms forwards; }   /* aparece antes y más rápido */
    @keyframes bookBtnIn { to { opacity: 1; } }

    /* ============================================================
       SHOP — carrusel editorial (ref. elyse-residence): imagen central
       con título serif encima, laterales asomándose, flechas
       ============================================================ */
    .shop {
      position: relative;
      z-index: 70;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: transparent;            /* deja ver el fondo animado */
      padding: 6vh 0 4vh;
      overflow: hidden;
    }
    .shop-stage {
      position: relative;
      width: 100%;
      height: 90vh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    /* riel deslizante (ref. elyse): las piezas viajan horizontalmente */
    .shop-track {
      display: flex;
      align-items: center;
      gap: 6vw;                             /* hueco café: aquí viven las flechas */
      transition: transform 850ms cubic-bezier(.65, 0, .35, 1);
      will-change: transform;
    }
    .shop-slide {
      position: relative;
      flex: 0 0 auto;
      width: 34vw;                          /* rectangular vertical */
      height: 60vh;
      overflow: hidden;
      cursor: pointer;
      filter: brightness(0.5);
      transition: height 850ms cubic-bezier(.65,0,.35,1), filter 850ms ease;
    }
    .shop-slide.active {
      height: 88vh;                         /* la activa: casi toda la pantalla */
      filter: brightness(0.92);
      cursor: default;
    }
    .shop-slide img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    /* SOLD OUT: cuadrito sobre la imagen activa */
    .sold-chip {
      position: absolute;
      top: 16px; left: 16px;
      background: var(--cream);
      color: #181613;
      padding: 7px 12px;
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 500ms ease 300ms;
    }
    .shop-slide.active .sold-chip { opacity: 1; }

    /* flechas */
    .shop-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 8;
      width: 46px; height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(231, 226, 217, 0.35);
      background: rgba(18, 17, 16, 0.35);
      color: var(--cream);
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 300ms ease, background-color 300ms ease;
    }
    .shop-arrow:hover { border-color: rgba(231,226,217,0.8); background: rgba(231,226,217,0.08); }
    /* flechas EN los huecos café, flanqueando la pieza activa */
    .shop-arrow.prev { left: calc(50% - 17vw - 3vw); transform: translate(-50%, -50%); }
    .shop-arrow.next { left: calc(50% + 17vw + 3vw); transform: translate(-50%, -50%); }

    .shop-arrow:disabled { opacity: 0.25; cursor: default; }
    .shop-arrow:disabled:hover { border-color: rgba(231,226,217,0.35); background: rgba(18,17,16,0.35); }

    /* ficha técnica de museo (crema #e7e2d9), en la esquina
       inferior derecha de la pieza activa */
    .shop-card {
      position: absolute;
      z-index: 6;
      bottom: 3vh;
      left: calc(50% + 17vw - 20px);
      transform: translateX(-100%);
      width: min(290px, 70vw);
      background: var(--cream);
      color: #181613;
      padding: 14px 16px 15px;
      border-radius: 3px;
      text-align: left;
      opacity: 0;
      transition: opacity 300ms ease;
    }
    .shop.in .shop-card { opacity: 1; transition: opacity 900ms ease 250ms; }
    .shop.in.switching .shop-card { opacity: 0; transition: opacity 300ms ease; }
    .card-title {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(15px, 1.4vw, 19px);
      line-height: 1.1;
      letter-spacing: 0.01em;
    }
    .card-desc {
      margin: 6px 0 0;
      font-family: var(--font-body);
      font-size: 11px;
      line-height: 1.55;
      color: rgba(24, 22, 19, 0.75);
    }
    .card-meta {
      margin: 7px 0 0;
      font-family: var(--font-body);
      font-size: 10.5px;
      line-height: 1.6;
      color: rgba(24, 22, 19, 0.6);
      font-style: italic;
    }
    .card-foot {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .card-price {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 12.5px;
    }
    .btn-dark {
      background: #181613;
      color: var(--cream);
      border: 1px solid #181613;
      padding: 7px 13px;
    }
    .btn-dark:hover { background: transparent; color: #181613; }
    /* reveal */
    .shop-reveal { opacity: 0; transform: translateY(24px); }
    .shop.in .shop-reveal { animation: lineIn 900ms cubic-bezier(.2,.7,.2,1) forwards; }

    /* ============================================================
       FOOTER — port del v1 (estilo Akermo): columnas + marca gigante
       centrada, en café profundo con la serif nueva
       ============================================================ */
    .footer {
      position: relative;
      z-index: 70;
      background: #0d0b0a;                /* casi-negro cálido — más profundo que la página, diferencia el footer */
      border-top: 1px solid var(--line);  /* divisor fino que marca el cierre de la página */
      padding: 8.4vh 6vw 30px;
    }
    .f-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 48px 40px;
      flex-wrap: wrap;
    }
    .f-logo { display: inline-flex; align-items: center; opacity: 0.9; transition: opacity 250ms ease; }
    .f-logo:hover { opacity: 1; }
    .f-logo .ink-mark { width: 34px; height: 34px; }
    .f-cols { display: flex; gap: clamp(40px, 7vw, 110px); flex-wrap: wrap; }
    .f-col { display: flex; flex-direction: column; gap: 13px; }
    .f-head { color: var(--text-muted); opacity: 0.55; margin: 0 0 5px; }
    .f-link {
      color: var(--cream);
      text-decoration: none;
      opacity: 0.82;
      font-size: 14px;
      transition: opacity 250ms ease;
    }
    .f-link:hover { opacity: 1; }
    .f-static { color: var(--text-muted); opacity: 0.7; font-size: 14px; }
    .f-mark {
      margin: calc(10vh + 100px) 0 5vh;
      white-space: nowrap;                      /* la frase en UNA sola línea */
      text-align: center;
      display: flex; justify-content: center;   /* centra aunque el texto sea más ancho que el área del footer */
      font-family: var(--font-display);
      font-weight: 400;
      text-transform: uppercase;
      font-size: clamp(16px, 5.6vw, 110px);     /* fallback; el JS la ajusta al 90% del ancho */
      line-height: 0.82;
      letter-spacing: -0.02em;                  /* interletrado más cerrado */
      color: var(--cream);
      opacity: 0;
      transform: translateY(44px);
    }
    .footer.in .f-mark { animation: lineIn 1200ms cubic-bezier(.2,.7,.2,1) 100ms forwards; }
    .f-copy { text-align: center; color: var(--text-muted); opacity: 0.55; margin: 0; }
    @media (max-width: 768px) {
      .f-top { flex-direction: column; gap: 40px; }
      .f-cols { gap: 40px; }
    }
    @media (max-width: 768px) {
      .shop-stage { height: 80vh; }
      .shop-slide { width: 72vw; height: 56vh; }
      .shop-slide.active { height: 78vh; }
      .shop-track { gap: 9vw; }
      .shop-arrow.prev { left: calc(50% - 36vw - 4.5vw); }
      .shop-arrow.next { left: calc(50% + 36vw + 4.5vw); }
      .shop-card { left: auto; right: 4vw; transform: none; bottom: 2vh; }
      .card-foot { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 768px) {
      .artist-content { margin: 0 auto 11vh; padding: 0 7vw; }
      .artist-bg img { object-position: 30% center; }
    }

    @media (max-width: 768px) {
      .hero-wrap, .hero { height: 100dvh; }    /* viewport visible real (sin barras iOS) → escultura+texto centrados */
      .sculpt-3d { width: 92vw; height: 56vh; }
      .hero-display { font-size: clamp(40px, 11.5vw, 80px); }
      .hero-hint { width: 64px; height: 64px; bottom: 5vh; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    }

/* ============================================================
   PAGE TRANSITION — velo rápido entre páginas (estilo loading, más ágil)
   ============================================================ */
    .page-veil { position: fixed; inset: 0; z-index: 1000; background: #0d0b0a;
      display: flex; align-items: center; justify-content: center;
      opacity: 1; pointer-events: none; transition: opacity 1150ms ease; }
    .page-veil .pv-mark { width: 32px; height: 32px; background-color: var(--cream);
      -webkit-mask: url(assets/img/logo-mark-white.png) no-repeat center / contain;
      mask: url(assets/img/logo-mark-white.png) no-repeat center / contain;
      opacity: 1; transform: scale(1);
      transition: opacity 1000ms ease, transform 1200ms cubic-bezier(.2,.7,.2,1); }
    .page-veil.cover { pointer-events: all; transition: opacity 760ms ease; }
    .page-veil.cover .pv-mark { opacity: 1; transform: scale(1); transition: opacity 640ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); }
    .page-veil.revealed { opacity: 0; }
    .page-veil.revealed .pv-mark { opacity: 0; }   /* el logo se desvanece suave (solo opacidad) */
    .page-veil.gone { display: none; }