/* NEVERLAN 9.3.5 — carga visual estable global */
html.nv-page-loading {
  background: #050608;
}

html.nv-page-loading body {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.nv-page-ready body {
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.nv-page-ready body { transition: none; }
}

/* =========================================================
   NEVERLAN WEB 3.0 — ESTILOS OPTIMIZADOS
   Una sola capa de reglas. Los valores variables llegan desde config.js.
   ========================================================= */

:root {
  --home-image-width: 58vw;
  --home-content-width: 25vw;
  --home-paper: #f0eee9;
  --home-ink: #111111;
  --home-accent: #0078b8;
  --home-black: #050506;
  --home-panel-duration: 2600ms;
  --home-panel-easing: cubic-bezier(0.16, 1, 0.3, 1);

  --menu-width: 380px;
  --menu-background: #f0eee9;
  --menu-ink: #111111;
  --menu-letter-color: #111111;
  --menu-ornament-color: #a67c37;
  --menu-drawer-duration: 1150ms;
  --menu-drawer-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --menu-backdrop-duration: 900ms;
  --menu-item-duration: 250ms;
  --menu-fade-duration: 170ms;
  --menu-item-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --menu-offset-x: 58px;
  --menu-offset-y: 0px;

  --chapter-panel-width: 80svh;
  --mobile-reveal-distance: 28px;
  --mobile-reveal-duration: 520ms;
  --mobile-reveal-easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { scroll-behavior: auto; }
body {
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--home-black);
  color: var(--home-ink);
  font-family: var(--sans);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
img, svg { display: block; }

/* =========================================================
   HOME
   ========================================================= */

.home-site,
.home-hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--home-black);
}

.home-site {
  position: fixed;
  z-index: 0;
  inset: 0;
}

.home-visual {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--home-image-width);
  height: 100%;
  overflow: hidden;
  background: #141414;
}

.home-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: filter 700ms ease;
}

.home-content {
  position: absolute;
  z-index: 5;
  inset: 0 auto 0 var(--home-image-width);
  width: var(--home-content-width);
  background: transparent;
  transform: translate3d(calc(-1 * (var(--home-image-width) + var(--home-content-width))), 0, 0);
  transition: transform var(--home-panel-duration) var(--home-panel-easing);
  will-change: transform;
}

.home-content.is-visible { transform: translate3d(0, 0, 0); }

.home-content-inner {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: var(--home-paper);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  padding: 31vh clamp(42px, 3.2vw, 76px) 8vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-kicker {
  margin: 0 0 32px;
  color: var(--home-accent);
  font-size: clamp(.58rem, .62vw, .72rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.home-title {
  margin: 0;
  color: var(--home-ink);
  font-family: var(--serif);
  font-size: clamp(4rem, 5.2vw, 6.3rem);
  font-weight: 300;
  line-height: .80;
  letter-spacing: -.055em;
}

.home-text {
  margin: 46px 0 0;
  color: color-mix(in srgb, var(--home-ink) 74%, transparent);
  font-size: clamp(.82rem, .87vw, 1rem);
  font-weight: 300;
  line-height: 1.9;
}

.enter-button {
  --home-button-color: var(--home-ink);
  margin-top: 32px;
  padding: 16px 25px;
  border: 1px solid color-mix(in srgb, var(--home-ink) 26%, transparent);
  background: transparent;
  color: var(--home-button-color);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 420ms ease, color 420ms ease, border-color 420ms ease;
}

/* El negro solo aparece durante hover o mientras se mantiene pulsado. */
.enter-button:hover,
.enter-button:active {
  border-color: var(--home-ink);
  background: var(--home-ink);
  color: var(--home-paper);
}

/* El estado de reproducción cambia el texto, pero no deja el botón negro. */
.enter-button.is-playing:not(:hover):not(:active) {
  border-color: color-mix(in srgb, var(--home-ink) 42%, transparent);
  background: transparent;
  color: var(--home-button-color);
}

/* El foco de teclado se indica sin convertirlo en un bloque negro persistente. */
.enter-button:focus-visible {
  outline: 1px solid var(--home-ink);
  outline-offset: 4px;
}

body.has-entered .home-image {
  filter: saturate(1.04) contrast(1.02) brightness(1.02);
}

/* =========================================================
   CABECERA
   ========================================================= */

.site-header {
  position: fixed;
  z-index: 1500;
  inset: 0 0 auto;
  height: 92px;
  padding: 0 clamp(38px, 3.2vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  isolation: isolate;
}

.brand,
.menu-button { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  color: #f7f4ee;
  transition: color 420ms ease;
}

.brand-logo {
  width: 34px;
  height: 34px;
  opacity: .96;
  background: var(--brand-logo-color, #f7f4ee);
  -webkit-mask: var(--brand-logo-url) center / contain no-repeat;
  mask: var(--brand-logo-url) center / contain no-repeat;
  transition: background-color 420ms ease, opacity 420ms ease;
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: .27em;
}

.menu-button {
  margin-left: auto;
  padding: 12px 0 12px 18px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: transparent;
  color: #f7f4ee;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 420ms ease;
}

.menu-lines {
  width: 40px;
  display: grid;
  gap: 9px;
}

.menu-lines i {
  height: 1px;
  background: currentColor;
  transition: background-color 420ms ease;
}

body.gallery-over-menu .menu-button,
body.gallery-entering .menu-button { color: #2f2f2d; }

body.gallery-over-brand .brand,
body.gallery-full .brand { color: #262624; }

body.gallery-over-brand .brand-logo,
body.gallery-full .brand-logo {
  filter: none;
  opacity: .96;
}

/* =========================================================
   MENÚ LATERAL
   ========================================================= */

.menu-backdrop {
  position: fixed;
  z-index: 2000;
  inset: 0;
  background: rgba(0, 0, 0, .34);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--menu-backdrop-duration) ease,
    visibility 0s linear var(--menu-backdrop-duration);
}

.menu-drawer {
  position: fixed;
  z-index: 2100;
  inset: 0 0 0 auto;
  width: min(var(--menu-width), 92vw);
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--menu-background);
  color: var(--menu-ink);
  transform: translate3d(101%, 0, 0);
  transition: transform var(--menu-drawer-duration) var(--menu-drawer-easing);
  will-change: transform;
}

body.menu-open .menu-backdrop {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body.menu-open .menu-drawer { transform: translate3d(0, 0, 0); }

.menu-close {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--menu-ink);
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.menu-navigation {
  position: absolute;
  inset: 0;
  padding: 56px 14px 0;
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.menu-item {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  opacity: 0;
  transform: translate3d(var(--menu-offset-x), var(--menu-offset-y), 0);
  transition:
    opacity var(--menu-fade-duration) ease-out,
    transform var(--menu-item-duration) var(--menu-item-easing);
  will-change: opacity, transform;
}

.menu-item.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.menu-svg {
  width: min(96%, 360px);
  height: auto;
  max-height: 100%;
  overflow: visible;
}

.menu-svg > path:first-of-type { fill: var(--menu-letter-color) !important; }
.menu-svg > path:not(:first-of-type) { stroke: var(--menu-ornament-color) !important; }
.menu-svg > circle { fill: var(--menu-ornament-color) !important; }

.menu-item:hover { opacity: .68; }
.menu-item:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--menu-ornament-color) 42%, transparent);
  outline-offset: -3px;
}

/* =========================================================
   GALERÍA HORIZONTAL / CAPÍTULOS
   ========================================================= */

.chapter-scroll {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.chapter-sticky {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.chapter-track {
  width: max-content;
  height: 100%;
  display: flex;
  align-items: stretch;
  transform: translate3d(100vw, 0, 0);
  will-change: transform;
  pointer-events: auto;
}

.chapter-scene {
  --chapter-bg: #e4e4e0;
  --chapter-title-color: #111111;
  --chapter-ornament-color: #a67c37;
  --chapter-caption-color: #53504b;

  --d-top: 102px;
  --d-side: 34px;
  --d-bottom: 38px;
  --d-image-width: 100%;
  --d-image-x: 0px;
  --d-image-y: 0px;
  --d-svg-width: 72%;
  --d-title-x: 0px;
  --d-title-y: 0px;
  --d-caption-x: 0px;
  --d-caption-y: 0px;
  --d-gap: 20px;
  --d-caption-size: 8px;
  --d-caption-tracking: .20em;
  --d-zoom: 1.015;
  --d-hover-zoom: 1.045;
  --d-align-items: center;
  --d-text-align: center;

  flex: 0 0 var(--chapter-panel-width);
  width: var(--chapter-panel-width);
  height: 100vh;
  height: 100svh;
  background: var(--chapter-bg);
  border-right: 1px solid rgba(34, 34, 31, .09);
}

.chapter-card {
  width: 100%;
  height: 100%;
  padding: var(--d-top) var(--d-side) var(--d-bottom);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--chapter-bg);
  color: var(--home-ink);
  cursor: pointer;
}

.chapter-media {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--d-image-width);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  transform: translate3d(var(--d-image-x), var(--d-image-y), 0);
}

.chapter-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(var(--d-zoom));
  transition:
    transform 900ms cubic-bezier(.22, .61, .36, 1),
    filter 700ms ease;
  will-change: transform;
}

.chapter-copy {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: var(--d-align-items);
  text-align: var(--d-text-align);
}

.chapter-title-art,
.chapter-title-svg {
  width: var(--d-svg-width);
  height: auto;
  max-height: 100px;
  overflow: visible;
  object-fit: contain;
  transform: translate3d(var(--d-title-x), var(--d-title-y), 0);
}


.chapter-caption {
  margin-top: 7px;
  color: var(--chapter-caption-color);
  font-family: var(--sans);
  font-size: var(--d-caption-size);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--d-caption-tracking);
  text-align: var(--d-text-align);
  text-transform: uppercase;
  white-space: normal;
  transform: translate3d(var(--d-caption-x), var(--d-caption-y), 0);
}

.chapter-card:hover .chapter-photo,
.chapter-card:focus-visible .chapter-photo {
  transform: scale(var(--d-hover-zoom));
  filter: saturate(1.025) contrast(1.01);
}

.chapter-card:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--chapter-ornament-color) 72%, transparent);
  outline-offset: -1px;
}

.chapter-scene[data-desktop-layout="image-first"] .chapter-media { order: 1; }
.chapter-scene[data-desktop-layout="image-first"] .chapter-copy {
  order: 2;
  padding-top: var(--d-gap);
}
.chapter-scene[data-desktop-layout="title-first"] .chapter-copy {
  order: 1;
  padding-bottom: var(--d-gap);
}
.chapter-scene[data-desktop-layout="title-first"] .chapter-media {
  order: 2;
  margin-top: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) and (min-width: 761px) {
  :root {
    --home-image-width: 58vw;
    --home-content-width: 30vw;
  }
  .home-content-inner { padding-left: 34px; padding-right: 28px; }
  .home-title { font-size: clamp(3.6rem, 6vw, 5.2rem); }
  .home-text { font-size: .82rem; }
}

@media (max-width: 760px) {
  :root {
    --m-top: 72px;
    --m-side: 16px;
    --m-bottom: 22px;
  }

  html, body {
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    overflow-y: auto;
    background: #ecebe7;
  }

  .home-site {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100svh;
  }

  .home-hero {
    width: 100%;
    height: auto;
    min-height: 100svh;
    overflow: visible;
    background: var(--home-paper);
  }

  .home-visual {
    position: relative;
    width: 100%;
    height: 55svh;
  }

  .home-content {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 45svh;
    transform: translate3d(-100%, 0, 0);
  }

  .home-content-inner { padding: 58px 28px 70px; }
  .home-title { font-size: clamp(4rem, 17vw, 6rem); }

  .site-header {
    height: 68px;
    padding: 0 18px;
  }

  .brand { gap: 12px; min-width: 0; }
  .brand-logo {
    width: 30px;
    height: 30px;
    min-width: 30px;
    filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, .22));
  }
  .brand-name {
    font-size: .96rem;
    letter-spacing: .20em;
    white-space: nowrap;
  }

  .menu-button {
    gap: 10px;
    padding-left: 12px;
    color: #343434;
    font-size: .82rem;
  }
  .menu-lines { width: 27px; gap: 7px; }

  .menu-drawer { width: min(var(--menu-width), 86vw); }
  .menu-close {
    top: 8px;
    right: 14px;
    width: 42px;
    height: 42px;
    font-size: 2rem;
  }
  .menu-navigation {
    height: 100svh;
    padding: 54px 10px 10px;
  }
  .menu-svg {
    width: min(82%, 285px);
    max-width: 285px;
    max-height: 11.5svh;
  }

  .chapter-scroll {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 16px 0 34px;
    overflow: visible;
    background: #ecebe7;
    pointer-events: auto;
  }

  .chapter-sticky {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .chapter-track {
    width: 100%;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transform: none !important;
    will-change: auto;
  }

  .chapter-scene {
    --m-top: 72px;
    --m-side: 16px;
    --m-bottom: 22px;
    --m-image-width: 100%;
    --m-image-x: 0px;
    --m-image-y: 0px;
    --m-svg-width: 76%;
    --m-title-x: 0px;
    --m-title-y: 0px;
    --m-caption-x: 0px;
    --m-caption-y: 0px;
    --m-gap: 16px;
    --m-caption-size: 8px;
    --m-caption-tracking: .13em;
    --m-zoom: 1.01;
    --m-align-items: center;
    --m-text-align: center;

    flex: 0 0 auto;
    width: calc(100vw - 18px);
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0 auto;
    border-right: 0;
    border-bottom: 1px solid rgba(34, 34, 31, .08);
    opacity: 0;
    transform: translate3d(var(--mobile-reveal-distance), 0, 0);
    transition:
      opacity 420ms ease-out,
      transform var(--mobile-reveal-duration) var(--mobile-reveal-easing);
  }

  .chapter-scene.is-mobile-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .chapter-card {
    width: 100%;
    height: 100%;
    padding: var(--m-top) var(--m-side) var(--m-bottom);
  }

  .chapter-media {
    width: var(--m-image-width);
    transform: translate3d(var(--m-image-x), var(--m-image-y), 0);
  }

  .chapter-photo,
  .chapter-card:hover .chapter-photo,
  .chapter-card:focus-visible .chapter-photo {
    transform: scale(var(--m-zoom));
    filter: none;
  }

  .chapter-copy {
    align-items: var(--m-align-items);
    text-align: var(--m-text-align);
  }

  .chapter-title-art,
  .chapter-title-svg {
    width: var(--m-svg-width);
    max-height: 74px;
    transform: translate3d(var(--m-title-x), var(--m-title-y), 0);
  }

  .chapter-caption {
    margin-top: 6px;
    font-size: var(--m-caption-size);
    letter-spacing: var(--m-caption-tracking);
    text-align: var(--m-text-align);
    transform: translate3d(var(--m-caption-x), var(--m-caption-y), 0);
  }

  .chapter-scene[data-mobile-layout="image-first"] .chapter-media { order: 1; }
  .chapter-scene[data-mobile-layout="image-first"] .chapter-copy {
    order: 2;
    padding-top: var(--m-gap);
  }
  .chapter-scene[data-mobile-layout="title-first"] .chapter-copy {
    order: 1;
    padding-bottom: var(--m-gap);
  }
  .chapter-scene[data-mobile-layout="title-first"] .chapter-media {
    order: 2;
    margin-top: 0;
  }

  body.gallery-mobile-active .brand,
  body.gallery-mobile-active .menu-button { color: #2d2d2a; }
  body.gallery-mobile-active .brand-logo {
    filter: none;
    opacity: .96;
  }
}

@media (max-width: 420px) {
  .brand-name { font-size: .84rem; letter-spacing: .16em; }
  .menu-button > span:first-child { display: none; }
  .menu-drawer { width: min(var(--menu-width), 88vw); }
  .menu-navigation { padding-top: 50px; padding-bottom: 8px; }
  .menu-svg {
    width: min(78%, 255px);
    max-width: 255px;
    max-height: 10.8svh;
  }
  .chapter-scroll { padding-top: 12px; }
  .chapter-scene { width: calc(100vw - 14px); }
  .chapter-card { --m-side: 14px; }
  .chapter-title-art,
  .chapter-title-svg { max-height: 66px; }
}

@media (max-width: 760px) and (max-height: 680px) {
  .menu-navigation { padding-top: 46px; padding-bottom: 6px; }
  .menu-close { top: 4px; }
  .menu-svg {
    width: min(72%, 235px);
    max-width: 235px;
    max-height: 9.8svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .home-content { transform: translate3d(0, 0, 0); }
  .chapter-scene { opacity: 1; transform: none; }
  .chapter-photo { transform: none !important; }
}

/* =========================================================
   V33 — UNIVERSOS Y COMPONENTES DINÁMICOS
   ========================================================= */

.menu-navigation {
  --menu-row-min: 88px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(166,124,55,.42) transparent;
}

.menu-navigation::-webkit-scrollbar { width: 7px; }
.menu-navigation::-webkit-scrollbar-track { background: transparent; }
.menu-navigation::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(166,124,55,.42);
}

.menu-artwork {
  width: min(var(--menu-item-width, 96%), 360px);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate3d(var(--menu-item-x, 0px), var(--menu-item-y, 0px), 0);
}

.menu-artwork .menu-svg {
  width: 100%;
  max-width: none;
  max-height: 100%;
}


.menu-item .menu-svg > path:first-of-type {
  fill: var(--menu-item-letter-color, var(--menu-letter-color)) !important;
  stroke: none !important;
}

.menu-item .menu-svg > path:not(:first-of-type) {
  stroke: var(--menu-item-ornament-color, var(--menu-ornament-color)) !important;
}

.menu-item .menu-svg > circle {
  fill: var(--menu-item-ornament-color, var(--menu-ornament-color)) !important;
  stroke: none !important;
}

.chapter-media.is-missing-image {
  min-height: 1px;
  border: 1px solid rgba(17,17,17,.10);
  background:
    linear-gradient(135deg, rgba(17,17,17,.025), rgba(17,17,17,.065));
}

.chapter-media.is-missing-image::before {
  content: "IMAGEN PENDIENTE";
  color: rgba(17,17,17,.38);
  font-family: var(--sans);
  font-size: clamp(.52rem, .65vw, .68rem);
  letter-spacing: .24em;
}

.chapter-caption[hidden] { display: none !important; }

@media (max-width: 760px) {
  .menu-navigation { --menu-row-min: 72px; }
  .menu-artwork { width: min(var(--menu-item-width, 82%), 285px); }
}


/* =========================================================
   V34 — NORMALIZACIÓN DE TAMAÑO DE SVG
   El tamaño depende únicamente del editor y nunca del tamaño
   intrínseco o de una clase heredada del SVG original.
   ========================================================= */
.menu-artwork > svg,
.menu-artwork > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: visible;
}

.chapter-copy > .chapter-title-svg,
.chapter-copy > .chapter-title-art {
  display: block;
  width: var(--d-svg-width) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto;
  overflow: visible;
}

@media (max-width: 760px) {
  .chapter-copy > .chapter-title-svg,
  .chapter-copy > .chapter-title-art {
    width: var(--m-svg-width) !important;
  }
}

/* =========================================================
   NEVERLAN STUDIO V1 — ocultar barra visual de scroll en Home
   Mantiene el desplazamiento con rueda, trackpad, teclado y táctil.
   ========================================================= */
@media (min-width: 761px) {
  html,
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

/* Neverlan Studio 0.10 — ocultar barra visual del recorrido horizontal */
@media (min-width: 761px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* =========================================================
   NEVERLAN WEB 4.0 — HOME MÓVIL INTEGRADA
   Base: sendrosMOVILOK. Solo se activa hasta 760 px.
   La Home de escritorio y el resto de la web permanecen intactos.
   ========================================================= */

.mobile-home-layer { display: none; }

@media (max-width: 760px) {
  .home-site,
  .home-hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    background: #050505;
  }

  .home-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0b0b0b;
    transform: translateX(-102%);
    animation: neverlanMobileImageReveal 2.4s cubic-bezier(.2,.8,.2,1) .2s forwards;
  }

  .home-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 43% center;
    filter: brightness(.82) saturate(.88);
    transform: scale(1.045);
    animation: neverlanMobileImageSettle 5s cubic-bezier(.2,.8,.2,1) .2s forwards;
  }

  .home-visual::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.01) 29%,
        rgba(0,0,0,.12) 55%,
        rgba(0,0,0,.78) 100%),
      linear-gradient(90deg, rgba(0,0,0,.12), transparent 48%);
  }

  /* El panel blanco de escritorio no participa en la composición móvil. */
  .home-content { display: none; }

  .mobile-home-layer {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: flex;
    min-height: 100svh;
    padding: 0 24px 24px;
    color: #f2eee8;
    pointer-events: none;
  }

  .mobile-home-grain {
    position: absolute;
    inset: 0;
    opacity: .032;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  }

  .mobile-home-content {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: auto;
    margin-bottom: 6vh;
    padding: 0 4px;
    text-align: center;
    pointer-events: auto;
  }

  .mobile-home-eyebrow {
    margin: 0 0 16px;
    color: #c6a56a;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  .mobile-home-title {
    margin: 0;
    color: #f2eee8;
    font-family: var(--serif);
    font-size: clamp(48px, 15vw, 72px);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -.025em;
  }

  .mobile-home-line {
    display: block;
    width: 56px;
    height: 1px;
    margin: 24px auto 20px;
    background: #c6a56a;
  }

  .mobile-home-poem {
    margin: 0;
    color: #c2bbb1;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.48;
  }

  .mobile-enter-link {
    width: min(250px, 78%);
    height: 54px;
    margin: 28px auto 0;
    border: 1px solid rgba(198,165,106,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    color: var(--home-button-color, #f2eee8);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
    transition: background .4s ease, color .4s ease, border-color .4s ease;
  }

  .mobile-enter-link b {
    font-size: 17px;
    font-weight: 300;
    transition: transform .4s ease;
  }

  .mobile-enter-link:active,
  .mobile-enter-link:focus-visible {
    border-color: #f2eee8;
    background: #f2eee8;
    color: #111;
  }

  .mobile-enter-link:active b,
  .mobile-enter-link:focus-visible b { transform: translateX(5px); }

  .mobile-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: neverlanMobileReveal .9s ease forwards;
  }
  .mobile-r1 { animation-delay: 2.05s; }
  .mobile-r2 { animation-delay: 2.25s; }
  .mobile-r3 { animation-delay: 2.45s; }
  .mobile-r4 { animation-delay: 2.65s; }
  .mobile-r5 { animation-delay: 2.9s; }

  /* Cabecera actual de Neverlan sobre la fotografía. */
  .site-header.home-header {
    z-index: 1500;
    height: 82px;
    padding: 0 24px;
    opacity: 0;
    animation: neverlanMobileHeaderFade 1.2s ease .35s forwards;
  }

  .home-header .brand {
    gap: 13px;
    color: #f7f4ee;
  }

  .home-header .brand-logo {
    width: 30px;
    height: 30px;
    min-width: 30px;
    filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.22));
  }

  .home-header .brand-name {
    display: inline;
    color: #f7f4ee;
    font-size: .96rem;
    letter-spacing: .20em;
  }

  .home-header .menu-button {
    color: #f7f4ee;
  }

  body.gallery-mobile-active .home-header .brand,
  body.gallery-mobile-active .home-header .menu-button { color: #2d2d2a; }

  body.gallery-mobile-active .home-header .brand-logo {
    filter: none;
    opacity: .96;
  }
}

@media (max-width: 420px) {
  .mobile-home-layer { padding-inline: 20px; }
  .mobile-home-content { margin-bottom: 4.5vh; }
  .mobile-home-title { font-size: clamp(46px, 14.2vw, 64px); }
  .mobile-home-poem { font-size: 17px; }
  .home-header .brand-name { font-size: .84rem; letter-spacing: .16em; }
}

@media (max-width: 760px) and (max-height: 680px) {
  .mobile-home-content { margin-bottom: 2.5vh; }
  .mobile-home-eyebrow { margin-bottom: 10px; }
  .mobile-home-title { font-size: clamp(42px, 12vw, 58px); }
  .mobile-home-line { margin: 17px auto 14px; }
  .mobile-home-poem { font-size: 16px; line-height: 1.42; }
  .mobile-enter-link { height: 48px; margin-top: 19px; }
}

@keyframes neverlanMobileImageReveal { to { transform: translateX(0); } }
@keyframes neverlanMobileImageSettle { to { transform: scale(1); } }
@keyframes neverlanMobileHeaderFade { to { opacity: 1; } }
@keyframes neverlanMobileReveal { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .mobile-reveal,
  .site-header.home-header,
  .home-visual,
  .home-image {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* Neverlan Web 4.1 · identidad editable */
.brand-logo { flex: 0 0 auto; }
.brand-name, .home-kicker, .home-title, .home-text, .enter-button,
.mobile-home-eyebrow, .mobile-home-title, .mobile-home-poem, .mobile-enter-link {
  transition: color .35s ease, opacity .35s ease;
}
.mobile-enter-link { appearance:none; -webkit-appearance:none; background:transparent; border:0; cursor:pointer; }
.is-config-hidden { display:none !important; }


/* =========================================================
   V5.3.1 — TEXTO REAL + TRAZO ORNAMENTAL
   ========================================================= */
.menu-wordmark,
.chapter-wordmark {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.menu-wordmark-label,
.chapter-wordmark-label {
  position: relative;
  z-index: 2;
  color: var(--menu-item-letter-color, var(--menu-letter-color, #111));
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  line-height: .86;
  letter-spacing: .035em;
  white-space: nowrap;
}

.menu-wordmark-label {
  font-size: clamp(2.15rem, 4.2vw, 4.3rem);
}

.chapter-wordmark-label {
  color: var(--chapter-title-color, #111);
  font-size: clamp(4rem, 9vw, 9rem);
}

.menu-wordmark-trace,
.chapter-wordmark-trace {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(-1.2rem, -1.4vw, -.45rem);
  object-fit: contain;
  pointer-events: none;
}

.menu-wordmark-trace {
  max-height: 60px;
  filter: var(--menu-trace-filter, none);
}

.chapter-wordmark-trace {
  max-height: 110px;
}

.site-header,
.site-header .brand-name,
.site-header .brand-logo,
.site-header .menu-button,
.site-header .menu-lines i {
  transition: color .38s ease, background-color .38s ease, opacity .38s ease;
}

@media (max-width: 760px) {
  .menu-wordmark-label { font-size: clamp(1.8rem, 10vw, 3.25rem); }
  .menu-wordmark-trace { max-height: 48px; margin-top: -.65rem; }
  .chapter-wordmark-label { font-size: clamp(3.4rem, 18vw, 6rem); }
  .chapter-wordmark-trace { max-height: 72px; }
}


/* INLINE TITLE SVGS */
.nv-inline-title-svg{display:block;width:100%;height:auto;overflow:visible;color:var(--inline-word-color,currentColor);--inline-trace-color:var(--gold,#a67c37)}
.nv-inline-title-svg .nv-svg-word{fill:currentColor !important;stroke:none !important;}
.nv-inline-title-svg .nv-svg-trace-stroke{fill:none !important;stroke:var(--inline-trace-color) !important;}
.nv-inline-title-svg .nv-svg-trace-fill{fill:var(--inline-trace-color) !important;stroke:none !important;}


.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;}


/* MENÚ ÚNICO · SVG ORIGINAL COMPLETO EN TODAS LAS PÁGINAS */
.menu-artwork > .menu-svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 1;
  max-width: none !important;
  max-height: none !important;
  overflow: visible;
}
.menu-artwork > .menu-svg > path:first-of-type {
  fill: var(--menu-item-letter-color, var(--menu-letter-color, #111111)) !important;
  stroke: none !important;
}
.menu-artwork > .menu-svg > path:not(:first-of-type) {
  stroke: var(--menu-item-ornament-color, var(--menu-ornament-color, #a67c37)) !important;
}
.menu-artwork > .menu-svg > circle {
  fill: var(--menu-item-ornament-color, var(--menu-ornament-color, #a67c37)) !important;
  stroke: none !important;
}


/* NON-HOME MENU · MOBILE/DESKTOP UNIFIED */
body:not([data-page-id="home"]) .menu-wordmark,
body:not([data-page-id="home"]) .menu-wordmark-label,
body:not([data-page-id="home"]) .menu-wordmark-trace {
  display: none !important;
}

body:not([data-page-id="home"]) .menu-artwork {
  display: block;
  width: min(100%, 360px);
  height: auto;
  line-height: 0;
}

body:not([data-page-id="home"]) .menu-artwork > .menu-svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible;
}

@media (max-width: 760px) {
  body:not([data-page-id="home"]) .menu-artwork {
    width: min(76vw, 285px);
  }

  body:not([data-page-id="home"]) .menu-artwork > .menu-svg {
    width: 100% !important;
    height: auto !important;
  }
}


/* =========================================================
   V10.3 · MENÚ EDITABLE DESDE STUDIO
   Variables de distribución y tamaño, sin alterar los SVG.
   ========================================================= */
.menu-navigation {
  padding-top: var(--menu-padding-top, 56px);
  padding-bottom: var(--menu-padding-bottom, 0px);
  row-gap: var(--menu-gap, 0px);
  --menu-row-min: var(--menu-row-height, 88px);
}

body:not([data-page-id="home"]) .menu-artwork {
  width: min(var(--menu-item-width, 96%), 360px);
}

@media (max-width: 760px) {
  .menu-navigation {
    padding-top: var(--menu-padding-top, 50px);
    padding-bottom: var(--menu-padding-bottom, 8px);
    row-gap: var(--menu-gap, 0px);
    --menu-row-min: var(--menu-row-height, 72px);
  }

  body:not([data-page-id="home"]) .menu-artwork {
    width: min(var(--menu-item-width, 82%), 285px);
  }
}