/* ============================================================
   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; }

    /* ---- Foco visible para navegacion por teclado ----
       :focus-visible SOLO se activa con teclado (o navegacion por voz), no al
       hacer clic con el raton, asi que no ensucia el uso normal. Sin esto no
       hay forma de saber donde estas parado al tabular. */
    :focus-visible {
      outline: 2px solid var(--cream, #e7e2d9);
      outline-offset: 3px;
      border-radius: 2px;
    }
    /* los campos del formulario llevan su propio tratamiento (borde inferior),
       asi que aqui el outline va pegado al campo y no flotando */
    input:focus-visible, textarea:focus-visible, select:focus-visible {
      outline-offset: 1px;
    }
    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;
      flex-direction: column;   /* apila la lista principal y la secundaria */
      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(28px, 4.2vw, 56px);
      line-height: 1.7;
      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; }
    body.menu-open .menu-list li:nth-child(5) a { animation-delay: 440ms; }

    .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; }

      /* --- barra superior en móvil: hamburguesa · SANTJAKOV · Book ---
         Los tres son `position:fixed` independientes, así que se alinean
         anclándolos a la MISMA línea (top:30px = centro de la barra de 60px)
         y subiéndolos media altura con translateY(-50%). Así quedan a la
         misma altura sin depender de cuánto mida cada uno. */
      .nav-burger { top: 30px; left: 28px; right: auto; transform: translateY(-50%); }
      .book-cta {
        top: 30px; right: 28px; bottom: auto; left: auto;
        transform: translateY(-50%);
        padding: 8px 14px;                 /* más compacto: tiene que caber en la barra */
        font-size: 10px;
      }
      /* el indicador de sección vivía justo donde ahora va el Book */
      .nav-section { display: none; }
      /* en teléfono arriba solo van hamburguesa y Book: el logo no aparece nunca,
         tampoco en la hero */
      .nav-logo { display: none; }

      /* El Book se queda visible TODO el rato (en escritorio solo aparece tras la
         hero y se apaga en el footer). El logo NO: conserva su comportamiento
         original — se ve en la hero, como identidad de la primera pantalla, y se
         retira al dejarla. Arriba quedan la hamburguesa y el Book.
         (Al abrir el menú el Book se oculta solo: el overlay va en z-index 135
         y el botón en 130, así que queda detrás.) */
      body.intro-handoff .book-cta { opacity: 1; pointer-events: auto; }
      body.footer-visible .book-cta { opacity: 1 !important; pointer-events: auto !important; }

      /* menú: centrado al viewport VISIBLE (dvh evita que la barra de Safari lo empuje abajo) */
      .menu-overlay { height: 100dvh; bottom: auto; }
      /* menú: ítems más grandes y con aire vertical */
      .menu-list a { font-size: 40px; line-height: 1.7; }
      /* pie del menú: que quepa centrado sin cortarse en los bordes */
      .menu-foot { flex-wrap: wrap; justify-content: center; gap: 7px 14px; padding: 0 24px;
        bottom: 34px; font-size: 10px; letter-spacing: 0.16em; }
      /* fondo móvil: LISO y sólido. Forzamos el canvas visible con color plano
         (sin shader, sin gradiente) para garantizar un fondo uniforme #121110. */
      #bgFlow { display: block !important; background: var(--bg); }
      /* hero/philosophy: 100dvh = viewport visible real (sin contar barras de iOS) */
      .hero-wrap, .hero { height: 100dvh; }
      /* svh, NO dvh. Estas dos son `sticky`, y `dvh` cambia de valor mientras
         scrolleas en iOS (crece al esconderse la barra de Safari, encoge al
         volver). Al cambiar la altura, el contenido centrado se recoloca a
         media lectura: bajando se ve bien y subiendo se ve corrido.
         `svh` es la altura con la barra VISIBLE — un valor constante — así que
         nada se mueve, y el contenido nunca queda tapado por la barra.
         Si el navegador no entiende svh, cae solo al 100vh de la regla base. */
      .philo { height: 100svh; }
      .artist { height: 100svh; }

      /* Pin más corto en móvil: 180vh, o sea 80vh de scroll clavado (escritorio
         usa 230vh = 130vh clavados). Las animaciones no se tocan: calculan su
         progreso con (altura del stage − viewport) medido en vivo, así que se
         reproducen completas en el recorrido que haya. */
      .philo-stage  { height: 180vh; }
      .artist-stage { height: 180vh; }

      .sculpt-3d { width: 92vw; height: 56vh; }
      .hero-display { font-size: clamp(40px, 11.5vw, 80px); }
      .hero-hint { bottom: 5vh; }
    }

    /* ============================================================
       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 950ms cubic-bezier(.2,.7,.2,1) forwards;
    }
    body.intro-handoff .hero-display .line:nth-child(1) { animation-delay: 700ms; }
    body.intro-handoff .hero-display .line:nth-child(2) { animation-delay: 850ms; }
    body.intro-handoff .hero-display .line:nth-child(3) { animation-delay: 1000ms; }
    @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: "SCROLL" + línea vertical (mismo cue que el About) --- */
    .hero-hint {
      position: absolute;
      z-index: 6;
      bottom: 4vh;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: var(--text-muted);
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 600ms ease;
      will-change: opacity;
    }
    body.intro-handoff .hero-hint { opacity: calc(var(--hint-o, 1) * 0.9); }
    .hero-hint .line {
      width: 1px; height: 42px;
      background: linear-gradient(var(--taupe), transparent);
      animation: hintDrop 2.4s ease-in-out infinite;
    }
    @keyframes hintDrop {
      0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
      50%      { transform: scaleY(1);  opacity: 1;  transform-origin: top; }
    }

    /* ============================================================
       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: 230vh;            /* 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; }
    }

    /* ============================================================
       GALLERY CAROUSEL — carrusel infinito (mismo mecanismo que Shop):
       riel horizontal, pieza activa grande al centro, flechas en los
       huecos. Click en la activa → overlay de detalle (imagen + ficha).
       ============================================================ */
    .gallery-carousel {
      position: relative;
      z-index: 70;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      padding: 14vh 0 12vh;
      overflow: hidden;
    }
    .gc-stage {
      position: relative;
      z-index: 2;                      /* las piezas van SOBRE el degradado del piso */
      width: 100%;
      height: 96vh;                    /* 6vh mas que la pieza activa: sitio para el nombre en hover */
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    /* degradado del piso: funde el fondo de la galería con el café del artist
       (detrás de las piezas, no las oscurece) → sin costura entre secciones */
    /* Sin degradado en el piso de la galería.
       Era el parche contra la costura vieja, pero terminaba en café OPACO y al cruzar el
       borde de la sección reaparecía el fondo animado: ese salto ERA la línea divisoria.
       Ahora la transición la resuelve el pin de About (.artist-stage), que emerge a
       pantalla completa, así que la galería puede quedarse transparente de punta a punta. */
    .gc-track {
      display: flex;
      align-items: center;
      gap: 6vw;
      transition: transform 850ms cubic-bezier(.65, 0, .35, 1);
      will-change: transform;
    }
    .gc-slide {
      position: relative;
      flex: 0 0 auto;
      width: 34vw;
      height: 60vh;
      margin: 0;
      cursor: pointer;
      transition: height 850ms cubic-bezier(.65,0,.35,1);
    }
    /* El recorte y el brillo viven en el wrapper, NO en el figure: asi el nombre
       puede colgar por debajo (mismo reparto que .loop-item / .li-img en Work) y
       ademas no se le aplica el brightness de las piezas laterales. */
    .gc-slide .gc-img {
      width: 100%; height: 100%;
      overflow: hidden;
      filter: brightness(0.5);
      transition: filter 850ms ease;
    }
    /* nombre bajo la pieza, igual que .li-name en Work: la galeria del Home no
       abre ficha tecnica — esa vive solo en el pasillo 3D de Work — asi que el
       titulo en hover es toda la informacion que da. */
    .gc-name {
      position: absolute; left: 0; right: 0; bottom: -30px;
      text-align: center; font-family: var(--font-display);
      text-transform: uppercase; font-size: 13px; letter-spacing: 0.16em;
      color: var(--text-muted); opacity: 0; transition: opacity 400ms ease;
      pointer-events: none;
    }
    .gc-slide:hover .gc-name { opacity: 1; }

    .gc-slide.active {
      height: 86vh;
      cursor: default;                 /* la activa ya no abre ficha: sin cursor de acción */
    }
    .gc-slide.active .gc-img { filter: brightness(0.95); }
    .gc-slide img {
      width: 100%; height: 100%;
      object-fit: cover;
      pointer-events: none;            /* el click lo maneja el <figure> */
    }

    /* flechas (idénticas a Shop) */
    .gc-arrow {
      position: absolute;
      top: 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;
    }
    .gc-arrow:hover { border-color: rgba(231,226,217,0.8); background: rgba(231,226,217,0.08); }
    .gc-arrow.prev { left: calc(50% - 17vw - 3vw); transform: translate(-50%, -50%); }
    .gc-arrow.next { left: calc(50% + 17vw + 3vw); transform: translate(-50%, -50%); }

    /* link sutil (abajo derecha, sin recuadro): línea arriba, "Gallery ↗" debajo → Work */
    .gc-more {
      position: absolute;
      bottom: 5vh;
      right: 5vw;
      z-index: 9;
      display: inline-flex;
      flex-direction: column;
      align-items: stretch;
      gap: 9px;
      color: rgba(186, 178, 167, 0.55);
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      text-decoration: none;
      transition: color 350ms ease;
    }
    .gc-more-line {
      display: block;
      width: 100%; height: 1px;       /* la línea abarca justo el ancho de "Gallery ↗" */
      background: currentColor;
    }
    .gc-more-row {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .gc-more-arrow {
      flex: 0 0 auto;
      display: block;
      width: 15px; height: 15px;
      transition: transform 350ms cubic-bezier(.2,.7,.2,1);
    }
    .gc-more:hover { color: rgba(231, 226, 217, 0.9); }
    .gc-more:hover .gc-more-arrow { transform: translate(3px, -3px); }   /* se desplaza en diagonal ↗ */
    @media (max-width: 768px) {
      .gc-more { bottom: 3vh; right: 6vw; font-size: 10px; gap: 7px; }
      /* El botón va anclado al fondo de la sección (position:absolute). La sección
         pedía 100vh, pero en móvil el carrusel sólo mide 108vw: quedaba casi una
         pantalla de espacio muerto entre las fotos y el botón. Con `auto` la
         sección se ajusta a su contenido y el botón sube junto a las fotos; el
         aire que queda es el padding de 4vh de la regla base. */
      .gallery-carousel { min-height: auto; }
    }

    /* ---- overlay de detalle: imagen sola + ficha al lado + cerrar ---- */
    .gc-detail {
      position: fixed;
      inset: 0;
      z-index: 9999;                    /* modal: por encima de todo (incl. piezas 3D del Work, z~1000) */
      background: var(--bg);            /* sólido: nada se transparenta detrás (p. ej. la ficha del Shop) */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 500ms ease, visibility 0ms linear 500ms;
    }
    .gc-detail.open { opacity: 1; visibility: visible; transition: opacity 500ms ease; }
    .gc-detail-inner {
      display: flex;
      align-items: center;
      gap: 5vw;
      width: 90vw;
      max-width: 1180px;
      transform: translateY(16px);
      opacity: 0;
      transition: transform 650ms cubic-bezier(.2,.7,.2,1), opacity 650ms ease;
    }
    .gc-detail.open .gc-detail-inner { transform: translateY(0); opacity: 1; }
    .gc-detail-media { flex: 0 0 auto; }
    .gc-detail-media img {
      display: block;
      width: auto; height: auto;
      max-height: 82vh; max-width: 48vw;
      object-fit: contain;
    }
    .gc-detail-info {
      flex: 1 1 0; max-width: 440px;
      display: flex; flex-direction: column; align-items: flex-start;
      text-align: left;
    }
    .gc-detail-title {
      margin: 0 0 20px;
      font-family: var(--font-display);
      font-weight: 400;
      text-transform: uppercase;
      font-size: clamp(28px, 3.2vw, 46px);
      line-height: 1.04;
      letter-spacing: 0.02em;
      color: var(--cream);
    }
    .gc-detail-text {
      margin: 0;
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.75;
      color: rgba(231, 226, 217, 0.68);
    }
    /* línea sutil bajo la descripción */
    .gc-detail-rule {
      display: block;
      width: 100%; height: 1px;
      margin: 26px 0 22px;
      background: rgba(186, 178, 167, 0.22);
    }
    /* metadatos: pares "LABEL valor" en cuadrícula (medium/edition/size · o técnica) */
    .gc-detail-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 28px;
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .gc-detail-meta:empty { display: none; }
    .gc-spec { display: block; }
    .gc-spec-k { color: rgba(186, 178, 167, 0.55); margin-right: 8px; }
    .gc-spec-v { color: rgba(231, 226, 217, 0.9); }
    /* botón (estilo referencia): fondo crema suave, texto oscuro, mayúsculas */
    .gc-detail-btn {
      align-self: flex-start;
      margin-top: 30px;
      display: inline-block;
      padding: 15px 30px;
      background: var(--cream);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 2px;
      transition: background-color 300ms ease, transform 300ms ease;
    }
    .gc-detail-btn:hover { background: #f2eee6; }
    .gc-detail-close {
      position: fixed;
      top: 3vh; right: 3vw;
      z-index: 10000;
      width: 48px; height: 48px;
      border-radius: 50%;
      border: 1px solid rgba(231, 226, 217, 0.35);
      background: rgba(18, 17, 16, 0.4);
      color: var(--cream);
      font-size: 26px; line-height: 1;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 300ms ease, background-color 300ms ease;
    }
    .gc-detail-close:hover { border-color: rgba(231,226,217,0.85); background: rgba(231,226,217,0.08); }

    @media (max-width: 768px) {
      /* Las 10 fotos son 1080×1350, o sea 4:5 exacto. En vh el contenedor salía
         mucho más alto que esa proporción y `object-fit: cover` recortaba los
         lados (se comía los brazos de las piezas). En vw la altura queda atada
         al ancho: 72vw × 1.25 = 90vw es 4:5 clavado → la foto entra completa. */
      .gc-stage { height: 108vw; }
      .gc-slide { width: 72vw; height: 76vw; }
      .gc-slide.active { height: 90vw; }
      .gc-track { gap: 9vw; }
      .gc-arrow.prev { left: calc(50% - 36vw - 4.5vw); }
      .gc-arrow.next { left: calc(50% + 36vw + 4.5vw); }
      .gc-detail-inner { flex-direction: column; gap: 4vh; width: 88vw; text-align: center; }
      .gc-detail-media img { max-width: 88vw; max-height: 52vh; }
      .gc-detail-info { max-width: 88vw; }
    }

    /* ============================================================
       THE ARTIST — retrato de Santi full-bleed, texto editorial.
       Entra con el zoom-blur de la galería (ref. Sandhill/Pinterest)
       ============================================================ */
    /* stage: da el recorrido de scroll; About se queda PEGADA al viewport mientras
       la galería se va hacia arriba (mismo patrón que .philo-stage). */
    .artist-stage {
      position: relative;
      height: 230vh;            /* mismos valores que .philo-stage */
      margin-top: -55vh;        /* solapa el final de Work: el pin arranca antes de que se vaya */
      background: transparent;
    }
    .artist {
      position: sticky;
      top: 0;
      z-index: 70;
      height: 100vh;            /* fija al viewport: el contenido NO cambia de altura */
      display: flex;
      align-items: flex-end;              /* texto centrado hacia abajo */
      justify-content: center;
      text-align: center;
      overflow: hidden;
      background: transparent;  /* el café lo da el body; deja ver Work durante el solape */
    }

    /* === aparición SOLO con blur + opacity (pin) — igual que Philosophy ===
       La sección NO se desvanece como bloque: es transparente y lo que emerge es su
       CONTENIDO. Por eso no deja hueco (el fondo del sitio es continuo) ni cruza a Work
       como un rectángulo opaco. */
    .artist-bg,
    .artist-content {
      opacity: var(--artist-o, 0);
      filter: blur(var(--artist-blur, 20px));
      will-change: opacity, filter;
    }
    .artist-bg {
      position: absolute;
      inset: 0;
      /* difumina el borde INFERIOR de la foto: se disuelve en el fondo animado continuo
         en vez de cortarse en seco contra la textura de Book (esa era la línea divisoria). */
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 92%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 92%);
    }
    .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%,
          rgba(18, 17, 16, 0.72) 14%,
          transparent 32%,               /* fade superior más largo: la foto EMERGE del café (sin corte con la galería) */
          transparent 52%,
          rgba(18, 17, 16, 0.55) 80%,
          transparent 100%);             /* termina TRANSPARENTE: empalma con el fondo animado, sin borde sólido que corte */
    }
    .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; }
    .artist.in .artist-content > *:nth-child(4) { animation-delay: 620ms; }

    /* botón "About Me ↗": idéntico al de Gallery, pero centrado y en flujo
       (después del texto de The Artist), no anclado a una esquina */
    .artist-more {
      position: static;
      bottom: auto; right: auto;
      margin-top: 38px;
    }

    /* ============================================================
       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: 28vh 6vw calc(14vh + 200px);   /* la pila baja del centro; +200px abajo para separarla del footer */
    }
    /* 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;
      /* empieza TRANSPARENTE (no en café sólido): sin arranque sólido no hay borde contra
         la textura de arriba. El café solo se insinúa en el medio y vuelve a transparente. */
      background: linear-gradient(to bottom, transparent 0%, rgba(18,17,16,0.4) 32%, transparent 100%);
      pointer-events: none;
      z-index: 0;
    }
    /* pila centrada: eyebrow · título · descripción · keywords · botón · sello.
       Sin el translateY(-120px) de antes: ahora es un bloque de varias piezas centrado. */
    .book-inner { position: relative; z-index: 1; max-width: 1040px; text-align: center; }
    .book-eyebrow {
      margin: 0 0 22px;
      color: var(--text-muted);
      opacity: 0.7;
    }
    .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: solo layout/animación (el look lo da .btn) */
    .book-link {
      margin-top: 40px;
      opacity: 0;                        /* aparece tras la animación del título */
    }
    .book-desc {
      margin: 22px auto 0;
      color: var(--text-muted);
      max-width: 480px;
    }
    /* variante ancha: deja que el salto de línea manual mande, sin envolver de más */
    .book-desc-wide { max-width: 640px; }
    /* tres palabras clave, separadas por " / " (mismo recurso que la ref) */
    .book-keywords {
      margin: 34px 0 0;
      color: var(--text-muted);
      opacity: 0.8;
    }
    /* el sello, muy pequeño, cerrando la pila */
    .book-seal {
      display: block;
      width: 46px; height: auto;
      margin: 40px auto 0;
      opacity: 0;                        /* aparece con el botón, tras el título */
    }
    .book-actions {
      margin-top: 42px;
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }
    /* ── Botón · componente ÚNICO del sitio ──────────────────────────
       Todos los CTA usan .btn. Variantes de layout (margen, animación) se
       agregan con una clase extra (.book-link, .fc-acquire), nunca el look. */
    .btn {
      display: inline-block;
      font-family: var(--font-body);
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.24em;
      font-weight: var(--w-body);
      color: var(--ink);
      background: var(--cream);
      border: 1px solid var(--cream);
      border-radius: 6px;
      padding: 14px 26px;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 300ms ease, color 300ms ease;
    }
    .btn:hover { background: transparent; color: var(--cream); }
    /* mask-line blur: cada texto de Book SUBE tras una máscara y pasa de blur→nítido.
       Mecanismo del título original, ahora compartido por todos los textos de la sección. */
    .book .bl-mask { display: block; overflow: hidden; }
    .book .bl-in {
      display: block;
      transform: translateY(110%);
      filter: blur(8px);
      transition: transform 950ms cubic-bezier(.16, .84, .3, 1), filter 950ms cubic-bezier(.16, .84, .3, 1);
      will-change: transform, filter;
    }
    .book.in .bl-in { transform: translateY(0); filter: blur(0); }
    /* cascada: eyebrow · título (2 líneas) · descripción · keywords */
    .book.in .book-eyebrow  .bl-in { transition-delay: 0ms; }
    .book.in .book-title .bl-mask:nth-child(1) .bl-in { transition-delay: 120ms; }
    .book.in .book-title .bl-mask:nth-child(2) .bl-in { transition-delay: 240ms; }
    .book.in .book-desc     .bl-in { transition-delay: 360ms; }
    .book.in .book-keywords .bl-in { transition-delay: 480ms; }
    /* el botón aparece DESPUÉS del texto, solo con opacidad */
    .book.in .book-link,
    .book.in .book-seal { 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: pointer;                      /* la activa abre el detalle en grande */
    }
    .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: var(--ink);
      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: var(--ink);
      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;
    }
    /* 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: 6.5vh 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; }
    /* las 3 columnas participan DIRECTO en el reparto de .f-top (space-between) →
       Logo · Menu · Connect · Studio equidistantes, sin cargarse a la derecha */
    .f-cols { display: contents; }
    .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; }
    /* flecha externa del footer — mismo trazo que .gc-more-arrow, a escala del texto */
    .f-link-arrow {
      width: 0.72em; height: 0.72em;
      margin-left: 5px;
      display: inline-block;
      vertical-align: baseline;
      transform: translateY(0.06em);
    }
    .f-static { color: var(--text-muted); opacity: 0.7; font-size: 14px; }
    .f-mark {
      margin: calc(7vh + 60px) 0 4vh;
      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 { display: flex; gap: 40px; flex-wrap: wrap; }   /* en móvil las columnas se agrupan bajo el logo */
    }
    @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 { 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; }

    /* ============================================================
       MÓVIL — respiro inferior de Philosophy y The Artist
       Va AL FINAL del archivo a propósito: las definiciones base de
       `.artist-content` (margin: 0 auto 13vh) y `.philo` viven más abajo que el
       bloque @media principal, y como los media queries NO suman especificidad,
       una regla puesta arriba queda pisada por orden de aparición. Aquí gana.
       ============================================================ */
    @media (max-width: 768px) {
      /* The Artist ancla su contenido ABAJO (align-items: flex-end), así que el
         botón "About Me" queda pegado al borde inferior — justo donde entra la
         barra de Safari al scrollear hacia arriba, y lo tapa.
         `100lvh - 100svh` ES la altura de las barras del navegador: el viewport
         grande menos el pequeño. Sumada al respiro, el bloque se levanta
         exactamente lo que mide la barra en cualquier teléfono.
         Si el navegador no entiende lvh/svh, se queda con los 20vh. */
      .artist-content { margin-bottom: 3vh; margin-bottom: calc(3vh + (100lvh - 100svh)); }

      /* Philosophy centra su texto (align-items: center), no lo ancla abajo, y la
         sección ya mide `svh`: la barra de Safari nunca lo tapa, así que aquí NO
         hace falta compensarla. Este padding sólo corrige el centro óptico, que
         el nav fijo de 60px desplaza hacia abajo. */
      .philo { padding-bottom: 4vh; }
    }