* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  --background: #080808;
  --surface: #0d0d0d;
  --text: #f2eee5;
  --secondary: #aaa7a1;
  --line: rgba(255, 255, 255, 0.14);
  --header: rgba(8, 8, 8, 0.86);
  --cyan: #00a3c7;
  --classic-accent: #c5b28f;

  overflow-x: hidden;
  background: var(--background);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  transition: background 420ms ease, color 420ms ease;
}

body[data-experience="immersive"] {
  --background: #f2f1ec;
  --surface: #eae9e3;
  --text: #090909;
  --secondary: #686761;
  --line: rgba(0, 0, 0, 0.14);
  --header: rgba(242, 241, 236, 0.9);
  color-scheme: light;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

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


.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 500;
  padding: 12px 16px;
  background: var(--text);
  color: var(--background);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.kinetic-heading {
  width: min(100%, 1500px);
  max-width: 100%;
  margin: 0;
  font: inherit;
}

/* HEADER */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 20px clamp(24px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: var(--header);
  backdrop-filter: blur(18px);
}

.brand {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

body:not([data-experience="immersive"]) .brand,
body:not([data-experience="immersive"]) .main-nav a,
body:not([data-experience="immersive"]) .site-controls button,
body:not([data-experience="immersive"]) .experience-switch,
body:not([data-experience="immersive"]) .mobile-menu-open,
body:not([data-experience="immersive"]) .mobile-menu-brand {
  font-family: Georgia, "Times New Roman", serif;
}

.main-nav,
.site-controls {
  display: flex;
  align-items: center;
}

.main-nav {
  gap: 28px;
}

.site-controls {
  justify-content: flex-end;
  gap: 16px;
}

.main-nav a,
.site-controls button,
.experience-switch {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--secondary);
  font-size: 0.69rem;
  letter-spacing: 0.11em;
  white-space: nowrap;
  cursor: pointer;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.site-controls button:hover,
.site-controls button:focus-visible,
.experience-switch:hover,
.experience-switch:focus-visible {
  color: var(--text);
}

.mobile-menu-open {
  display: none;
}

/* MENÚ MÓVIL */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 28px;
  background: var(--background);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px);
  transition: opacity 350ms ease, visibility 350ms ease, transform 350ms ease;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.mobile-menu-brand {
  max-width: 170px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
}

.mobile-menu-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 2rem;
  font-weight: 300;
  line-height: 0.8;
  cursor: pointer;
}

.mobile-menu-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
}

.mobile-menu-nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 8px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 12vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

body[data-experience="immersive"] .mobile-menu-nav a {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: -0.07em;
}

.mobile-menu-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.mobile-menu-footer a,
.mobile-menu-footer button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--secondary);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* HERO — IDENTIDAD OFICIAL */

.intro-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(112px, 14vh, 150px) clamp(24px, 5vw, 82px) clamp(68px, 8vh, 100px);
  border-bottom: 1px solid var(--line);
  background: var(--background);
}

.intro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 0 66%,
      color-mix(in srgb, var(--text) 2%, transparent) 100%
    );
}

.brand-stage {
  position: relative;
  width: min(100%, 1500px);
  min-height: clamp(540px, 68vh, 760px);
  display: grid;
  align-content: center;
  justify-items: center;
}



.official-lockup {
  position: relative;
  z-index: 2;
  width: min(100%, 1450px);
  display: grid;
  justify-items: center;
  color: var(--text);
}

.official-wordmark {
  display: block;
  width: 100%;
  max-height: 330px;
  overflow: visible;
  color: var(--text);
}

.brand-letter {
  fill: currentColor;
  opacity: 0.12;
  transform-box: fill-box;
  transform-origin: center;
}

body:not([data-experience="immersive"]) .official-wordmark .brand-letter {
  transition: fill 260ms ease;
}

body:not([data-experience="immersive"]) .official-wordmark:hover .brand-letter {
  fill: var(--classic-accent);
}



.intro-copy {
  position: relative;
  width: min(100%, 1120px);
  min-height: clamp(116px, 15vh, 170px);
  margin-top: clamp(10px, 1.8vh, 24px);
  padding-top: clamp(18px, 2.2vh, 26px);
  border-top: 1px solid var(--line);
}

.intro-copy p {
  position: absolute;
  inset: clamp(18px, 2.2vh, 26px) auto auto 0;
  width: min(100%, 1080px);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  filter: blur(9px);
  transform: translate3d(0, 18px, 0);
}

.intro-copy__eyebrow {
  color: var(--secondary);
  font-size: clamp(0.7rem, 0.9vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.22em;
}

.intro-copy__statement {
  max-width: 920px;
  font-size: clamp(1.3rem, 2.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.intro-copy__claim {
  max-width: 1120px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 3.7vw, 4.35rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

body[data-experience="immersive"] .intro-copy__claim {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: -0.065em;
}

.scroll-cue {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--secondary);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.scroll-cue i {
  display: block;
  width: 38px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: cue-line 1.8s ease-in-out infinite;
}

/* INTRO CINÉTICA: solo transform y opacity */

.brand-stage.is-running .brand-letter {
  animation: official-letter 980ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(100ms + (var(--i) * 105ms));
}

body[data-experience="immersive"] .official-lockup {
  transform-origin: center;
  transform-style: preserve-3d;
}

body[data-experience="immersive"] .brand-letter:nth-child(1) {
  --dyn-x: -48vw;
  --dyn-y: -24vh;
  --dyn-r: -24deg;
  --dyn-scale: 0.72;
  --cross-x: 8vw;
  --cross-y: 3vh;
  --cross-r: 8deg;
  --settle-x: -5px;
  --settle-y: 2px;
  --settle-r: -1deg;
  --dyn-delay: 0ms;
}

body[data-experience="immersive"] .brand-letter:nth-child(2) {
  --dyn-x: 30vw;
  --dyn-y: 34vh;
  --dyn-r: 18deg;
  --dyn-scale: 0.78;
  --cross-x: -7vw;
  --cross-y: -4vh;
  --cross-r: -6deg;
  --settle-x: 4px;
  --settle-y: -2px;
  --settle-r: 0.8deg;
  --dyn-delay: 120ms;
}

body[data-experience="immersive"] .brand-letter:nth-child(3) {
  --dyn-x: -8vw;
  --dyn-y: -44vh;
  --dyn-r: -14deg;
  --dyn-scale: 0.66;
  --cross-x: 5vw;
  --cross-y: 8vh;
  --cross-r: 5deg;
  --settle-x: -3px;
  --settle-y: 3px;
  --settle-r: -0.6deg;
  --dyn-delay: 50ms;
}

body[data-experience="immersive"] .brand-letter:nth-child(4) {
  --dyn-x: 14vw;
  --dyn-y: 46vh;
  --dyn-r: 20deg;
  --dyn-scale: 0.7;
  --cross-x: -5vw;
  --cross-y: -8vh;
  --cross-r: -7deg;
  --settle-x: 3px;
  --settle-y: -3px;
  --settle-r: 0.7deg;
  --dyn-delay: 150ms;
}

body[data-experience="immersive"] .brand-letter:nth-child(5) {
  --dyn-x: 42vw;
  --dyn-y: -26vh;
  --dyn-r: -20deg;
  --dyn-scale: 0.76;
  --cross-x: -8vw;
  --cross-y: 4vh;
  --cross-r: 6deg;
  --settle-x: 4px;
  --settle-y: 2px;
  --settle-r: 0.8deg;
  --dyn-delay: 80ms;
}

body[data-experience="immersive"] .brand-letter:nth-child(6) {
  --dyn-x: -40vw;
  --dyn-y: 20vh;
  --dyn-r: 16deg;
  --dyn-scale: 0.74;
  --cross-x: 9vw;
  --cross-y: -3vh;
  --cross-r: -5deg;
  --settle-x: -4px;
  --settle-y: -2px;
  --settle-r: -0.7deg;
  --dyn-delay: 180ms;
}

body[data-experience="immersive"] .brand-stage.is-running .brand-letter {
  animation:
    official-letter-dynamic
    1380ms
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
  animation-delay: var(--dyn-delay);
}

body[data-experience="immersive"] .brand-stage.is-running .official-lockup {
  animation:
    dynamic-lockup-impact
    680ms
    cubic-bezier(0.16, 1, 0.3, 1)
    1080ms
    both;
}


.brand-stage.is-running .intro-copy__eyebrow {
  animation: copy-phase 1.55s ease 1.8s both;
}

.brand-stage.is-running .intro-copy__statement {
  animation: copy-phase 1.9s ease 3.05s both;
}

.brand-stage.is-running .intro-copy__claim {
  animation: copy-final 820ms cubic-bezier(0.22, 1, 0.36, 1) 4.75s both;
}






@keyframes official-letter {
  from {
    opacity: 0.12;
    filter: blur(7px);
    transform: translate3d(var(--x), 34px, 0) rotate(var(--angle)) scale(0.94);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

@keyframes official-letter-dynamic {
  0% {
    opacity: 0;
    fill: var(--cyan);
    filter: blur(7px);
    transform:
      translate3d(var(--dyn-x), var(--dyn-y), 0)
      rotate(var(--dyn-r))
      scale(var(--dyn-scale));
  }

  38% {
    opacity: 1;
    fill: var(--cyan);
    filter: blur(1.2px);
    transform:
      translate3d(var(--cross-x), var(--cross-y), 0)
      rotate(var(--cross-r))
      scale(1.13);
  }

  68% {
    opacity: 1;
    fill: currentColor;
    filter: blur(0);
    transform:
      translate3d(var(--settle-x), var(--settle-y), 0)
      rotate(var(--settle-r))
      scale(0.985);
  }

  84% {
    opacity: 1;
    fill: currentColor;
    transform:
      translate3d(0, -2px, 0)
      rotate(0)
      scale(1.026);
  }

  100% {
    opacity: 1;
    fill: currentColor;
    filter: blur(0);
    transform:
      translate3d(0, 0, 0)
      rotate(0)
      scale(1);
  }
}

@keyframes dynamic-lockup-impact {
  0% {
    transform: perspective(1100px) rotateX(0) rotateY(0) scale(1);
  }

  34% {
    transform: perspective(1100px) rotateX(1.4deg) rotateY(-1.8deg) scale(0.982);
  }

  66% {
    transform: perspective(1100px) rotateX(-0.8deg) rotateY(1deg) scale(1.022);
  }

  100% {
    transform: perspective(1100px) rotateX(0) rotateY(0) scale(1);
  }
}


@keyframes copy-phase {
  0% {
    opacity: 0;
    visibility: visible;
    filter: blur(9px);
    transform: translate3d(0, 18px, 0);
  }
  20%, 72% {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    filter: blur(6px);
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes copy-final {
  from {
    opacity: 0;
    visibility: visible;
    filter: blur(9px);
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}


@keyframes cue-line {
  0%, 100% { transform: scaleX(0.35); opacity: 0.45; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* TÍTULOS CON SCROLL-DRIVEN ANIMATION */

.kinetic-section {
  min-height: 82svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(42px, 6vw, 96px);
  border-top: 1px solid var(--line);
  background: var(--background);
  color: var(--text);
}

body[data-experience="immersive"] .kinetic-section:nth-of-type(even) {
  align-items: flex-start;
}

.kinetic-title {
  display: block;
  max-width: 100%;
  font-size: clamp(3.2rem, 9.8vw, 10.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.085em;
  text-wrap: balance;
  transform-origin: left center;
}

body:not([data-experience="immersive"]) .kinetic-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.07em;
}

body:not([data-experience="immersive"]) .kinetic-title:hover,
body:not([data-experience="immersive"]) .kinetic-title:focus-visible {
  color: var(--classic-accent);
}

body[data-experience="immersive"] .kinetic-title:hover,
body[data-experience="immersive"] .kinetic-title:focus-visible {
  color: var(--cyan);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kinetic-title {
      animation: title-scroll-classic linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }

    body[data-experience="immersive"] .kinetic-title {
      animation-name: title-scroll-dynamic;
    }

    body[data-experience="immersive"] .kinetic-section:nth-of-type(even) .kinetic-title {
      --scroll-x-dynamic: -14vw;
      --scroll-skew: 4deg;
    }

    body[data-experience="immersive"] .kinetic-section:nth-of-type(odd) .kinetic-title {
      --scroll-x-dynamic: 14vw;
      --scroll-skew: -4deg;
    }
  }
}

@keyframes title-scroll-classic {
  from {
    opacity: 0.22;
    transform: translate3d(0, 32px, 0) scale(0.985);
    letter-spacing: -0.055em;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    letter-spacing: -0.07em;
  }
}

@keyframes title-scroll-dynamic {
  from {
    opacity: 0.22;
    filter: blur(7px);
    transform: translate3d(var(--scroll-x-dynamic, 14vw), 42px, 0) skewX(var(--scroll-skew, -4deg)) scaleX(0.88);
    letter-spacing: 0.015em;
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) skewX(0) scaleX(1);
    letter-spacing: -0.085em;
  }
}





/* CLASSIC — RETÍCULA ORDENADA */

body:not([data-experience="immersive"]) .kinetic-section {
  min-height: 82svh;
  align-items: flex-end;
}

body:not([data-experience="immersive"]) .kinetic-title {
  width: min(100%, 1500px);
  margin: 0;
  transform-origin: left bottom;
}


/* =========================================================
   DYNAMIC — POINTER FIELD
   Interacción ligera, sin librerías y sin alterar el layout.
   ========================================================= */

.cursor-reactive-wordmark {
  contain: paint;
}

body[data-experience="immersive"] .brand-stage.is-pointer-ready .official-lockup {
  animation: none !important;
  transform:
    perspective(1200px)
    rotateX(var(--pointer-tilt-x, 0deg))
    rotateY(var(--pointer-tilt-y, 0deg))
    scale(var(--pointer-lockup-scale, 1));
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

body[data-experience="immersive"] .brand-stage.is-pointer-ready .brand-letter {
  animation: none !important;
  opacity: 1;
  filter: none;
  transform: none;

  translate:
    var(--pointer-letter-x, 0px)
    var(--pointer-letter-y, 0px);
  rotate: var(--pointer-letter-rotate, 0deg);
  scale: var(--pointer-letter-scale, 1);

  transition:
    translate 145ms linear,
    rotate 180ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 180ms cubic-bezier(0.22, 1, 0.36, 1),
    fill 160ms ease;

  will-change:
    translate,
    rotate,
    scale;
}

body[data-experience="immersive"] .brand-stage.is-pointer-ready .brand-letter.is-cursor-near {
  fill: color-mix(in srgb, currentColor 54%, var(--cyan) 46%);
}

body[data-experience="immersive"] .brand-stage.is-pointer-ready .brand-letter.is-cursor-hot {
  fill: var(--cyan);
}

/* Títulos: movimiento magnético y eco vectorial.
   El duplicado es absoluto, así que no genera CLS. */

.kinetic-title {
  position: relative;
  isolation: isolate;
}

body[data-experience="immersive"] .kinetic-title {
  translate:
    var(--title-pointer-x, 0px)
    var(--title-pointer-y, 0px);
  rotate: var(--title-pointer-rotate, 0deg);
  scale: var(--title-pointer-scale, 1);

  transition:
    translate 170ms cubic-bezier(0.22, 1, 0.36, 1),
    rotate 210ms cubic-bezier(0.22, 1, 0.36, 1),
    scale 210ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-experience="immersive"] .kinetic-title::before {
  content: attr(data-kinetic-label);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  color: transparent;
  -webkit-text-stroke:
    1px
    color-mix(in srgb, var(--text) 42%, transparent);
  text-stroke:
    1px
    color-mix(in srgb, var(--text) 42%, transparent);

  opacity: 0;
  transform:
    translate3d(
      var(--title-echo-x, 0px),
      var(--title-echo-y, 0px),
      0
    )
    skewX(var(--title-echo-skew, 0deg));

  transition:
    opacity 180ms ease,
    transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-experience="immersive"] .kinetic-title.is-pointer-active::before,
body[data-experience="immersive"] .kinetic-title:hover::before,
body[data-experience="immersive"] .kinetic-title:focus-visible::before {
  opacity: 0.34;
}

/* Una línea cinética muy fina acompaña el scroll.
   No añade imágenes, halos ni elementos circulares. */

body[data-experience="immersive"] .kinetic-section {
  position: relative;
}

body[data-experience="immersive"] .kinetic-section::after {
  content: "";
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  bottom: clamp(24px, 3vw, 48px);

  width: clamp(56px, 8vw, 128px);
  height: 1px;

  background: currentColor;
  opacity: 0.18;
  transform-origin: right center;
  transform: scaleX(0.22);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body[data-experience="immersive"] .kinetic-section::after {
      animation: dynamic-section-rule linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 52%;
    }
  }
}

@keyframes dynamic-section-rule {
  from {
    opacity: 0.08;
    transform: scaleX(0.18);
  }

  62% {
    opacity: 0.42;
    transform: scaleX(1);
  }

  to {
    opacity: 0.18;
    transform: scaleX(0.48);
  }
}

@media (pointer: coarse) {
  body[data-experience="immersive"] .kinetic-title::before {
    display: none;
  }
}


/* RESPONSIVE */

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .main-nav,
  .site-controls {
    display: none;
  }

  .mobile-menu-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    cursor: pointer;
  }

  .brand-stage {
    min-height: clamp(500px, 69vh, 690px);
  }
}

@media (max-width: 700px) {
  .site-header {
    min-height: 68px;
    grid-template-columns: 1fr auto;
    padding: 16px 18px;
  }

  .brand {
    max-width: 135px;
    font-size: 0.66rem;
    line-height: 1.15;
  }


  .intro-hero {
    min-height: 100svh;
    padding: 96px 18px 48px;
  }

  .brand-stage {
    min-height: 610px;
    align-content: center;
  }

  .official-wordmark {
    width: 106%;
    max-width: none;
  }

  .intro-copy {
    min-height: 180px;
    margin-top: 24px;
  }

  .intro-copy__statement {
    font-size: clamp(1.35rem, 6.8vw, 2rem);
  }

  .intro-copy__claim {
    font-size: clamp(1.55rem, 7.8vw, 2.35rem);
  }

  .scroll-cue {
    right: 18px;
    bottom: 18px;
  }

  .kinetic-section {
    min-height: 62svh;
    padding: 34px 20px;
  }

  .kinetic-title {
    font-size: clamp(3rem, 15vw, 5.8rem);
    line-height: 0.88;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .mobile-menu,
  body {
    transition: none;
  }

  .brand-letter,
  .official-lockup,
  .kinetic-title {
    opacity: 1;
    filter: none;
    transform: none;
    translate: none;
    rotate: none;
    scale: none;
    animation: none !important;
  }

  .kinetic-title::before,
  .kinetic-section::after {
    display: none !important;
  }

  .intro-copy {
    min-height: 0;
    display: grid;
    gap: 16px;
  }

  .intro-copy p {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none;
    transform: none;
    animation: none !important;
  }

  .scroll-cue i {
    animation: none;
  }
}


/* CLASSIC EXPERIENCES — puerta única desde la home */
.classic-experiences-entry {
  min-height: 64svh;
  display: flex;
  align-items: flex-end;
  padding: clamp(42px, 6vw, 96px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--background);
  color: var(--text);
}
.classic-experiences-entry__link {
  width: min(100%, 1500px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(20px, 4vw, 64px);
}
.classic-experiences-entry__meta {
  grid-column: 1 / -1;
  color: var(--classic-accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.classic-experiences-entry__title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 10.8vw, 11.5rem);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.075em;
  transition: color 260ms ease, transform 420ms cubic-bezier(.22,1,.36,1);
}
.classic-experiences-entry__action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  white-space: nowrap;
}
.classic-experiences-entry__action i {
  width: 52px;
  height: 1px;
  background: var(--classic-accent);
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(.22,1,.36,1);
}
.classic-experiences-entry__link:hover .classic-experiences-entry__title,
.classic-experiences-entry__link:focus-visible .classic-experiences-entry__title {
  color: var(--classic-accent);
  transform: translate3d(10px,0,0);
}
.classic-experiences-entry__link:hover .classic-experiences-entry__action i,
.classic-experiences-entry__link:focus-visible .classic-experiences-entry__action i { transform: scaleX(1.5); }
body[data-experience="immersive"] .classic-experiences-entry { display: none; }
@media (max-width: 760px) {
  .classic-experiences-entry { min-height: 52svh; padding: 36px 20px; }
  .classic-experiences-entry__link { grid-template-columns: 1fr; gap: 24px; }
  .classic-experiences-entry__title { font-size: clamp(3rem, 16vw, 5.6rem); }
  .classic-experiences-entry__action { padding-bottom: 0; }
}


/* V13 — DYNAMIC EXPERIENCES GATEWAY */
.dynamic-experiences-entry{display:none;min-height:62svh;padding:clamp(56px,7.5vw,106px) clamp(34px,8vw,132px);background:#f3f1ea;color:#0b0b0b;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12)}
body[data-experience="immersive"] .dynamic-experiences-entry{display:block}
.dynamic-experiences-entry__link{min-height:inherit;display:grid;grid-template-columns:1fr minmax(280px,1.45fr) auto;gap:32px;align-items:end}
.dynamic-experiences-entry__meta,.dynamic-experiences-entry__action{font-size:.68rem;font-weight:700;letter-spacing:.17em;color:#007f95}
.dynamic-experiences-entry__title{margin:0;font-family:Arial,Helvetica,sans-serif;font-size:clamp(4rem,8.4vw,9.4rem);font-weight:900;line-height:.80;letter-spacing:-.07em;text-transform:uppercase}
.dynamic-experiences-entry__action{display:flex;align-items:center;gap:18px;padding-bottom:10px}.dynamic-experiences-entry__action i{display:block;width:64px;height:1px;background:currentColor;transition:transform .3s;transform-origin:left}
.dynamic-experiences-entry__link:hover .dynamic-experiences-entry__title{color:#00a8c6}.dynamic-experiences-entry__link:hover .dynamic-experiences-entry__action i{transform:scaleX(1.5)}
@media(max-width:800px){.dynamic-experiences-entry{min-height:52svh;padding:42px 24px}.dynamic-experiences-entry__link{grid-template-columns:1fr;gap:24px}.dynamic-experiences-entry__title{font-size:clamp(3rem,16vw,5.6rem)}}