:root {
  --ivory: #f8f2e8;
  --pearl: #ebe1d4;
  --champagne: #cdb692;
  --skin: #c4a08a;
  --espresso: #18110e;
  --taupe: #6d5e55;
  --soft-black: #0c0a09;
  --ease: cubic-bezier(.05, .85, .13, 1);
}

* {
  box-sizing: border-box;
}

html {
  height: auto;
  background: var(--ivory);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--espresso);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene {
  position: relative;
  overflow: hidden;
}

/* ── Type: serif titles + sans small caps (luxury skin) ── */
.loader-mark,
.mega-logo,
.manifesto-logo,
.footer-logo,
.hero-copy h1,
.manifesto h2,
.horizontal-heading h2,
.slide-copy span,
.slide-copy h3,
.step-number,
.step-text h3,
.process-intro h2,
.services-scene h2,
.service-item h3,
.footer h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--ivory);
  color: var(--espresso);
  transform-origin: top;
}

.loader-mark {
  font-size: clamp(4rem, 16vw, 15rem);
  font-style: italic;
  letter-spacing: .01em;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 2.2rem;
  color: var(--ivory);
  mix-blend-mode: difference;
}

.nav-logo {
  justify-self: start;
  font-size: .96rem;
  letter-spacing: .02em;
}

.nav-links {
  display: flex;
  gap: 1.8rem;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.menu-button {
  justify-self: end;
  width: 34px;
  height: 34px;
  display: grid;
  gap: 6px;
  align-content: center;
  border: 0;
  background: transparent;
}

.menu-button span {
  display: block;
  height: 1px;
  background: currentColor;
}

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  pointer-events: none;
  border-radius: 999px;
  background: var(--espresso);
  color: var(--ivory);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}

/* (old .hero-scene / .hero-cue overlay rules removed — V4 .hero-cue is the section) */

.mega-logo {
  position: absolute;
  left: -5vw;
  top: 2vh;
  font-size: clamp(8rem, 26vw, 30rem);
  line-height: .74;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--champagne);
  opacity: .5;
  white-space: nowrap;
  will-change: transform;
}

.hero-grid {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 31vw minmax(300px, 32vw) 31vw;
  align-items: center;
  gap: 2.2vw;
  padding: 7vh 2.8vw 4vh;
}

.hero-main-frame {
  position: relative;
  height: min(74vh, 760px);
  margin: 0;
  overflow: hidden;
  will-change: transform;
}

.hero-main-reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--ivory);
  transform-origin: top;
}

.hero-main-img {
  position: absolute;
  right: 50%;
  top: 0;
  width: 238%;
  max-width: none;
  transform: translate(50%, 40%);
  will-change: transform, width;
}

.hero-side-column {
  display: flex;
  flex-direction: column;
  gap: 3vh;
  opacity: 0;
  will-change: transform, opacity;
}

.side-photo {
  margin: 0;
  overflow: hidden;
}

.side-photo-tall {
  height: 56vh;
}

.side-photo-wide {
  height: 31vh;
}

.hero-copy {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 5vh;
  width: min(780px, 72vw);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.eyebrow,
.manifesto-kicker,
.horizontal-heading p,
.process-intro p,
.footer-content p {
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--taupe);
}

.hero-copy h1,
.manifesto h2,
.horizontal-heading h2,
.services-scene h2,
.footer h2 {
  margin: .4rem 0 0;
  font-size: clamp(2.8rem, 7vw, 7.5rem);
  line-height: 1.0;
  letter-spacing: -.01em;
}

.hero-note {
  max-width: 460px;
  margin: 1.2rem auto 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--taupe);
}

.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: .04em;
}

.line {
  display: block;
  will-change: transform, opacity;
}

.manifesto {
  min-height: 140vh;
  padding: 18vh 5vw;
  background: var(--pearl);
  color: var(--espresso);
}

.manifesto-inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}

.manifesto h2 {
  max-width: 15ch;
  color: var(--taupe);
}

.word {
  will-change: color;
}

.manifesto p {
  color: var(--taupe);
  line-height: 1.7;
}

.inline-image-block {
  display: grid;
  grid-template-columns: minmax(240px, 34vw) minmax(240px, 420px);
  gap: 5vw;
  align-items: end;
  margin-top: 12vh;
}

.image-mask-box {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.inline-image-block .image-mask-box {
  height: 46vh;
}

.mask-reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: var(--pearl);
  transform-origin: bottom;
}

.horizontal-scene .mask-reveal {
  background: var(--espresso);
}

.process-scene .mask-reveal {
  background: var(--ivory);
}

.manifesto-logo {
  position: absolute;
  right: 0;
  bottom: -16vh;
  color: var(--champagne);
  font-size: clamp(5rem, 15vw, 16rem);
  font-style: italic;
  letter-spacing: -.01em;
  opacity: .4;
  will-change: transform;
}

.horizontal-scene {
  height: 360vh;
  background: var(--espresso);
  color: var(--ivory);
}

.horizontal-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.horizontal-heading {
  position: absolute;
  z-index: 5;
  left: 4vw;
  top: 8vh;
  width: min(680px, 64vw);
}

.horizontal-heading p { color: var(--champagne); }
.horizontal-heading h2 { color: var(--ivory); }

.horizontal-track {
  height: 100%;
  display: flex;
  width: max-content;
  will-change: transform;
}

.horizontal-slide {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  padding: 22vh 4vw 7vh;
}

.slide-copy {
  position: relative;
  z-index: 4;
  width: min(420px, 36vw);
}

.slide-copy span,
.step-number {
  display: block;
  font-size: clamp(4rem, 12vw, 13rem);
  line-height: .75;
  font-style: italic;
  color: var(--champagne);
}

.slide-copy h3,
.step-text h3 {
  margin: 1rem 0;
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1.0;
  letter-spacing: -.01em;
}

.slide-copy p {
  color: rgba(248, 243, 236, .72);
  line-height: 1.65;
  max-width: 34ch;
}

.slide-copy a {
  display: inline-block;
  margin-top: 1.6rem;
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
  border-bottom: 1px solid rgba(214, 193, 165, .5);
  padding-bottom: 5px;
}

.slide-image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  will-change: transform;
}

.slide-image.large {
  right: 4vw;
  bottom: 8vh;
  width: 36vw;
  height: 70vh;
}

.slide-image.small {
  left: 42vw;
  top: 22vh;
  width: 25vw;
  height: 34vh;
}

.slide-image.small.is-low {
  top: auto;
  bottom: 13vh;
}

.process-scene {
  padding: 15vh 5vw 8vh;
  background: var(--ivory);
}

.process-intro {
  width: min(900px, 80vw);
  margin-bottom: 14vh;
}

.process-intro h2 {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1.0;
  margin-top: 1rem;
}

.step-text p {
  color: var(--taupe);
  line-height: 1.65;
  max-width: 34ch;
}

.process-step {
  position: relative;
  min-height: 96vh;
  display: grid;
  grid-template-columns: .7fr 1fr 1fr;
  align-items: center;
  gap: 4vw;
}

.process-step.is-reverse {
  grid-template-columns: 1fr 1fr .7fr;
}

.process-step.is-reverse .step-number {
  grid-column: 3;
}

.process-step.is-reverse .step-text {
  grid-column: 2;
  grid-row: 1;
}

.process-step.is-reverse .step-image {
  grid-column: 1;
  grid-row: 1;
}

.step-number {
  color: var(--champagne);
}

.step-image {
  height: 62vh;
}

.services-scene {
  min-height: 120vh;
  padding: 13vh 3vw 10vh;
  background: var(--champagne);
  color: var(--espresso);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2vw;
  margin-top: 9vh;
}

.service-item {
  display: block;
}

.service-item figure {
  height: 64vh;
  margin: 0;
  overflow: hidden;
}

.service-item img {
  transition: transform .9s var(--ease);
}

.service-item div {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-top: 1rem;
  transition: transform .55s var(--ease);
}

.service-item h3 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4.6rem);
  line-height: .95;
}

.service-item span {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition: .45s var(--ease);
}

.service-item:hover img {
  transform: scale(1.08);
}

.service-item:hover div {
  transform: translateY(-12px);
}

.service-item:hover span {
  opacity: 1;
  transform: translateY(0);
}

.marquee-scene {
  height: 92vh;
  overflow: hidden;
  background: var(--ivory);
}

.marquee-track {
  height: 100%;
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}

.marquee-track img {
  width: 50vw;
  height: 92vh;
  object-fit: cover;
}

.marquee-scene:hover .marquee-track {
  animation-duration: 80s;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.footer {
  position: relative;
  min-height: 90vh;
  display: grid;
  place-items: center;
  padding: 10vh 5vw;
  background: var(--soft-black);
  color: var(--ivory);
  overflow: hidden;
}

.footer-logo {
  position: absolute;
  left: -8vw;
  bottom: -4vh;
  color: var(--champagne);
  opacity: .12;
  font-size: clamp(8rem, 28vw, 30rem);
  font-style: italic;
  letter-spacing: -.01em;
}

.footer-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
}

.footer-content p { color: var(--champagne); }
.footer h2 { color: var(--ivory); margin: 1rem 0 1.6rem; }

.footer-content a {
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ivory);
  border-bottom: 1px solid rgba(214, 193, 165, .5);
  padding-bottom: 5px;
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding: 12vh 5vw 8vh;
  }

  .hero-side-column {
    display: none;
  }

  .hero-main-frame {
    height: 64vh;
  }

  .hero-copy {
    width: 88vw;
  }

  .inline-image-block,
  .services-grid,
  .process-step,
  .process-step.is-reverse {
    grid-template-columns: 1fr;
  }

  .process-step.is-reverse .step-number,
  .process-step.is-reverse .step-text,
  .process-step.is-reverse .step-image {
    grid-column: auto;
    grid-row: auto;
  }

  .horizontal-scene {
    height: auto;
  }

  .horizontal-pin {
    height: auto;
  }

  .horizontal-track {
    display: block;
    width: 100%;
  }

  .horizontal-slide {
    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 24vh 5vw 8vh;
  }

  .slide-copy {
    width: 88vw;
  }

  .slide-image.large,
  .slide-image.small {
    position: relative;
    inset: auto;
    width: 100%;
    height: 54vh;
    margin-top: 2rem;
  }

  .marquee-track img {
    width: 82vw;
  }
}

/* ===================================================================
   EXTENSIÓN V2 — menu overlay, applause, testimonials, heads-up,
   locations, extended footer (luxury skin: usa las vars del :root)
   =================================================================== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: var(--espresso);
  color: var(--ivory);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.menu-overlay.is-open { pointer-events: auto; }

.menu-bg-word {
  position: absolute;
  left: -4vw;
  bottom: -8vh;
  color: rgba(248, 243, 236, .07);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(8rem, 25vw, 28rem);
  line-height: .75;
  letter-spacing: -.02em;
}

.menu-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .4rem;
  text-align: center;
}

.menu-link {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3.4rem, 9vw, 9rem);
  line-height: .95;
  letter-spacing: -.01em;
  opacity: 0;
  transform: translateY(60px);
  color: var(--ivory);
}

.menu-link:hover { color: var(--champagne); }

.menu-footer {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  justify-content: space-between;
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
}

.applause-scene {
  min-height: 110vh;
  padding: 16vh 5vw;
  background: var(--ivory);
  color: var(--espresso);
}

.applause-grid {
  position: relative;
  min-height: 78vh;
  display: grid;
  grid-template-columns: 1fr 34vw;
  gap: 6vw;
  align-items: center;
}

.applause-kicker {
  grid-column: 1 / -1;
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--taupe);
}

.applause-grid h2 {
  max-width: 980px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3.4rem, 7vw, 8rem);
  line-height: 1.0;
  letter-spacing: -.01em;
}

.applause-inline { height: 58vh; }

.applause-mark {
  position: absolute;
  right: 4vw;
  bottom: -12vh;
  color: var(--champagne);
  opacity: .28;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(6rem, 18vw, 20rem);
  line-height: .8;
  letter-spacing: -.01em;
}

.applause-scene .mask-reveal { background: var(--ivory); }

.beauty-said-scene {
  min-height: 115vh;
  display: grid;
  grid-template-columns: .85fr 1.1fr .85fr;
  gap: 4vw;
  align-items: center;
  padding: 12vh 5vw;
  background: var(--espresso);
  color: var(--ivory);
}

.beauty-left p,
.heads-up-header p,
.locations-copy p {
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.4rem;
}

.beauty-left h2,
.heads-up-header h2,
.locations-copy h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.8rem, 5.6vw, 6rem);
  line-height: 1.0;
  letter-spacing: -.01em;
}

.beauty-next {
  margin-top: 2.4rem;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(214, 193, 165, .6);
  border-radius: 50%;
  background: transparent;
  color: var(--champagne);
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: none;
}

.beauty-stage {
  position: relative;
  height: 74vh;
  overflow: hidden;
}

.beauty-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  transform: translateX(110%);
  z-index: 1;
}

.beauty-slide.is-active { transform: translateX(0); z-index: 2; }

.beauty-copy {
  position: relative;
  min-height: 50vh;
}

.beauty-text {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.beauty-text.is-active { opacity: 1; pointer-events: auto; }

.beauty-text span {
  color: var(--champagne);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(3.4rem, 8vw, 9rem);
  line-height: .8;
}

.beauty-text h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 1rem 0;
}

.beauty-text p { color: rgba(248, 243, 236, .7); }

.heads-up-scene {
  min-height: 110vh;
  padding: 16vh 5vw;
  background: var(--ivory);
  color: var(--espresso);
}

.heads-up-header {
  max-width: 920px;
  margin-bottom: 9vh;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4vw;
}

.article-card { display: block; }

.article-card figure {
  height: 52vh;
  margin: 0;
  overflow: hidden;
}

.article-card img { transition: transform 1s var(--ease); }
.article-card:hover img { transform: scale(1.06); }

.article-card div { padding-top: 1.4rem; }

.article-card span {
  color: var(--champagne);
  font-size: .68rem;
  letter-spacing: .24em;
}

.article-card h3 {
  margin: .6rem 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.01em;
}

.article-card p { color: var(--taupe); }

.locations-scene {
  min-height: 120vh;
  padding: 16vh 5vw;
  background: var(--pearl);
  color: var(--espresso);
}

.locations-copy {
  max-width: 920px;
  margin-bottom: 10vh;
}

.locations-list { display: grid; gap: 5vh; }

.location-card {
  display: grid;
  grid-template-columns: 1fr 36vw;
  gap: 5vw;
  align-items: center;
  padding-top: 5vh;
  border-top: 1px solid rgba(27, 21, 18, .18);
}

.location-card span {
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe);
}

.location-card h3 {
  margin: 1rem 0 .8rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 6.5rem);
  line-height: .96;
  letter-spacing: -.01em;
}

.location-card p { color: var(--taupe); }

.location-card a {
  display: block;
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--espresso);
}

.location-card a:hover { color: var(--taupe); }

.map-frame { height: 40vh; }

.locations-scene .mask-reveal { background: var(--pearl); }

.footer-accordion {
  margin-top: 9vh;
  border-top: 1px solid rgba(27, 21, 18, .18);
  border-bottom: 1px solid rgba(27, 21, 18, .18);
}

.accordion-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.accordion-sign { font-size: 1.2rem; color: var(--champagne); }

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}

.accordion-content p {
  overflow: hidden;
  margin: 0;
  color: var(--taupe);
  max-width: 46ch;
}

.footer-accordion.is-open .accordion-content {
  grid-template-rows: 1fr;
  padding-bottom: 1.6rem;
}

.footer-extended { min-height: 100vh; }

.footer-cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 1.6rem;
  border: 1px solid rgba(214, 193, 165, .6);
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--champagne);
}

.footer-bottom {
  position: absolute;
  left: 5vw;
  right: 5vw;
  bottom: 4vh;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--champagne);
}

.footer-bottom a:hover { color: var(--ivory); }

@media (max-width: 900px) {
  .applause-grid,
  .beauty-said-scene,
  .article-grid,
  .location-card {
    grid-template-columns: 1fr;
  }

  .beauty-stage { height: 62vh; }
  .article-card figure,
  .map-frame { height: 42vh; }

  .footer-bottom {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 4rem;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

/* ===================================================================
   V4 — escenas editoriales pinneadas (hero collage, applause poster,
   manifesto sculpture, horizontal cue, fall poster, process chapters,
   logo overlap, book ticker). Curtains + [data-lines].
   =================================================================== */
.scene { position: relative; min-height: 100vh; overflow: hidden; }

.image-curtain {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  background: var(--ivory);
  transform-origin: top;
}

[data-lines] .line-mask { display: block; overflow: hidden; }
[data-lines] .line { display: block; }

.hero-cue {
  height: 100vh;
  background: var(--espresso);
  color: var(--ivory);
}

.hero-bg-word {
  position: absolute;
  left: -7vw;
  top: 3vh;
  z-index: 1;
  color: rgba(248, 242, 232, .08);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(10rem, 30vw, 34rem);
  line-height: .7;
  font-style: italic;
  letter-spacing: -.09em;
  white-space: nowrap;
}

.hero-top-script {
  position: absolute;
  left: 50%;
  top: 8vh;
  z-index: 4;
  transform: translateX(-50%);
  color: var(--champagne);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(4rem, 9vw, 10rem);
  font-style: italic;
  line-height: .7;
  letter-spacing: -.08em;
}

.hero-main {
  position: absolute;
  left: 50%;
  top: 14vh;
  z-index: 3;
  width: min(34vw, 620px);
  height: 72vh;
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
  transform-origin: center bottom;   /* se expande desde abajo */
}

.hero-stream {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 24vw;
  display: grid;
  gap: 3vh;
}

.hero-stream-left { left: 3vw; }
.hero-stream-right { right: 3vw; }

.hero-stream figure { height: 34vh; margin: 0; overflow: hidden; }
.hero-stream figure:nth-child(2) { height: 48vh; }

.hero-title {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  z-index: 6;
  width: min(900px, 78vw);
  transform: translateX(-50%);
  text-align: center;
}

.hero-title p {
  margin: 0 0 1rem;
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--champagne);
}

.hero-title h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(4rem, 9vw, 11rem);
  line-height: .82;
  letter-spacing: -.04em;
}

.applause-poster { height: 100vh; background: var(--ivory); color: var(--espresso); }

.applause-nav-logo {
  position: absolute;
  top: 2.5vh;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  color: var(--champagne);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-style: italic;
  line-height: .7;
}

.applause-script {
  position: absolute;
  top: 18vh;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  color: var(--champagne);
  opacity: .55;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(9rem, 20vw, 23rem);
  font-style: italic;
  line-height: .7;
  letter-spacing: -.09em;
}

.applause-the,
.applause-word {
  position: absolute;
  z-index: 3;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(5rem, 13vw, 15rem);
  line-height: .82;
  font-weight: 400;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.applause-the { left: 20vw; top: 42vh; }
.applause-word { right: 4vw; bottom: 14vh; }

.applause-eye {
  position: absolute;
  left: 41vw;
  top: 42vh;
  z-index: 4;
  width: 19vw;
  min-width: 280px;
  height: 14vh;
  margin: 0;
  overflow: hidden;
}

.applause-small {
  position: absolute;
  left: 5vw;
  bottom: 5vh;
  width: 260px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--taupe);
}

.manifesto-sculpture { height: 130vh; background: var(--pearl); color: var(--espresso); }

.manifesto-line {
  position: absolute;
  z-index: 3;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(4rem, 9.5vw, 11rem);
  line-height: .86;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.m-line-1 { left: 5vw; top: 20vh; }
.m-line-2 { right: 8vw; top: 38vh; }
.m-line-3 { left: 15vw; top: 57vh; }
.m-line-4 { right: 5vw; top: 75vh; }

.manifesto-inline-img {
  position: absolute;
  left: 48vw;
  top: 33vh;
  z-index: 4;
  width: 22vw;
  height: 16vh;
  margin: 0;
  overflow: hidden;
}

.manifesto-ghost {
  position: absolute;
  left: -4vw;
  bottom: -8vh;
  z-index: 1;
  color: rgba(24, 17, 14, .06);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(12rem, 28vw, 32rem);
  font-style: italic;
  line-height: .72;
}

.horizontal-cue { height: 360vh; background: var(--espresso); color: var(--ivory); }

.horizontal-fixed { height: 100vh; overflow: hidden; }

.horizontal-label {
  position: absolute;
  left: 4vw;
  top: 5vh;
  z-index: 6;
  color: var(--champagne);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.horizontal-track { height: 100%; display: flex; width: max-content; }

.h-slide { position: relative; width: 100vw; height: 100vh; flex: 0 0 100vw; }

.h-copy { position: absolute; left: 5vw; bottom: 8vh; z-index: 5; width: 36vw; }

.h-copy span {
  color: var(--champagne);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(4rem, 10vw, 12rem);
  line-height: .75;
}

.h-copy h2 {
  margin: .3rem 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3.4rem, 7vw, 8.5rem);
  line-height: .84;
  letter-spacing: -.03em;
}

.h-copy p { max-width: 32ch; color: rgba(248, 242, 232, .7); line-height: 1.6; }

.h-img { position: absolute; margin: 0; overflow: hidden; }
.h-img-large { right: 6vw; top: 12vh; width: 38vw; height: 76vh; }
.h-img-small { left: 45vw; bottom: 10vh; z-index: 4; width: 22vw; height: 28vh; }

.fall-poster { height: 100vh; background: var(--ivory); color: var(--espresso); }

.fall-giant-script {
  position: absolute;
  left: 4vw;
  top: -16vh;
  z-index: 1;
  color: var(--champagne);
  opacity: .5;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(14rem, 35vw, 40rem);
  font-style: italic;
  line-height: .7;
  letter-spacing: -.1em;
}

.fall-main-img {
  position: absolute;
  left: 50%;
  top: 15vh;
  z-index: 3;
  width: 63vw;
  height: 72vh;
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
}

.fall-left-text,
.fall-right-text {
  position: absolute;
  z-index: 5;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(4rem, 8vw, 9rem);
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.fall-left-text { left: 7vw; top: 53vh; }
.fall-left-text span { display: block; }
.fall-left-text span:nth-child(2) { transform: translateX(5vw); }
.fall-right-text { right: 4vw; bottom: 8vh; }

.process-chapters { background: var(--pearl); color: var(--espresso); }

.process-title { min-height: 90vh; display: grid; align-content: center; padding: 0 5vw; }

.process-title p {
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.4rem;
}

.process-title h2 {
  max-width: 980px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(4rem, 10vw, 12rem);
  line-height: .84;
  letter-spacing: -.04em;
}

.process-chapter {
  position: relative;
  height: 120vh;
  overflow: hidden;
  border-top: 1px solid rgba(24, 17, 14, .14);
}

.chapter-index {
  position: absolute;
  left: 4vw;
  top: 10vh;
  z-index: 3;
  color: var(--champagne);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(7rem, 15vw, 17rem);
  line-height: .75;
}

.chapter-title {
  position: absolute;
  left: 20vw;
  top: 32vh;
  z-index: 5;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(4rem, 10vw, 12rem);
  line-height: .82;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.process-chapter p {
  position: absolute;
  right: 6vw;
  bottom: 15vh;
  z-index: 5;
  width: 280px;
  line-height: 1.55;
  color: var(--taupe);
}

.chapter-img { position: absolute; margin: 0; overflow: hidden; }
.chapter-img-a { right: 8vw; top: 18vh; width: 36vw; height: 64vh; z-index: 2; }
.chapter-img-b { left: 10vw; bottom: 14vh; width: 22vw; height: 30vh; z-index: 4; }

.process-chapter.is-inverted { background: var(--espresso); color: var(--ivory); }
.process-chapter.is-inverted p { color: rgba(248, 242, 232, .7); }

.logo-overlap { height: 120vh; background: var(--ivory); color: var(--espresso); }

.overlap-logo {
  position: absolute;
  left: 8vw;
  top: 18vh;
  z-index: 1;
  color: var(--champagne);
  opacity: .5;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(12rem, 27vw, 32rem);
  line-height: .72;
  letter-spacing: -.09em;
}

.overlap-main {
  position: absolute;
  left: 50%;
  top: 20vh;
  z-index: 2;
  width: 42vw;
  height: 70vh;
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
}

.overlap-detail {
  position: absolute;
  right: 8vw;
  bottom: 18vh;
  z-index: 4;
  width: 22vw;
  height: 30vh;
  margin: 0;
  overflow: hidden;
}

.overlap-copy { position: absolute; left: 5vw; bottom: 12vh; z-index: 5; width: 36vw; }

.overlap-copy p {
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1rem;
}

.overlap-copy h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 7rem);
  line-height: .9;
  letter-spacing: -.03em;
}

.book-ticker-scene {
  min-height: 70vh;
  display: grid;
  align-content: center;
  gap: 6vh;
  background: var(--espresso);
  color: var(--ivory);
}

.ticker-heading { padding: 0 5vw; }

.ticker-heading p {
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.4rem;
}

.ticker-heading h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(5rem, 13vw, 16rem);
  line-height: .8;
  letter-spacing: -.04em;
}

.book-ticker {
  display: flex;
  width: max-content;
  gap: 2rem;
  color: var(--champagne);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(2.5rem, 5vw, 6rem);
  white-space: nowrap;
  text-transform: uppercase;
  animation: tickerMove 22s linear infinite;
}

.book-ticker span:nth-child(even) { color: var(--ivory); }

@keyframes tickerMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .hero-stream { display: none; }
  .hero-main { width: 70vw; height: 56vh; }
  .applause-the { left: 6vw; top: 30vh; }
  .applause-word { right: 6vw; bottom: 20vh; }
  .applause-eye { left: 8vw; top: 52vh; width: 60vw; }
  .manifesto-line { font-size: clamp(2.6rem, 11vw, 4rem); white-space: normal; }
  .m-line-1 { left: 5vw; top: 14vh; }
  .m-line-2 { right: 5vw; top: 34vh; }
  .m-line-3 { left: 5vw; top: 52vh; }
  .m-line-4 { right: 5vw; top: 72vh; }
  .manifesto-inline-img { left: auto; right: 5vw; top: 24vh; width: 40vw; }
  .horizontal-cue { height: auto; }
  .horizontal-fixed { height: auto; }
  .horizontal-track { flex-direction: column; width: 100%; }
  .h-slide { width: 100%; height: auto; min-height: 100vh; padding: 20vh 5vw; }
  .h-copy { position: relative; left: auto; bottom: auto; width: 100%; }
  .h-img-large, .h-img-small { position: relative; inset: auto; width: 100%; height: 50vh; margin-top: 2rem; }
  .fall-main-img { width: 86vw; height: 54vh; }
  .fall-left-text { top: 24vh; }
  .fall-right-text { bottom: 10vh; }
  .chapter-title { left: 5vw; top: 42vh; }
  .chapter-img-a { right: 5vw; top: 10vh; width: 60vw; height: 40vh; }
  .chapter-img-b { left: 6vw; bottom: 8vh; width: 40vw; height: 24vh; }
  .process-chapter p { right: 5vw; bottom: 6vh; width: 60vw; }
  .overlap-main { width: 80vw; }
  .overlap-detail { width: 44vw; }
  .overlap-copy { width: 80vw; }
}

/* ===================================================================
   V5 — flujo global (grano/viñeta/palabra) + puentes de transición
   =================================================================== */
.global-flow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.flow-grain {
  position: absolute;
  inset: -20%;
  opacity: .045;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(24, 17, 14, .6) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(24, 17, 14, .35) 0 1px, transparent 1px);
  background-size: 36px 36px, 54px 54px;
}

.flow-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, transparent 0 46%, rgba(24, 17, 14, .06) 100%);
  opacity: .7;
}

.flow-bg-word {
  position: absolute;
  left: -8vw;
  bottom: -10vh;
  color: rgba(205, 182, 146, .16);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(12rem, 30vw, 34rem);
  line-height: .7;
  letter-spacing: -.1em;
  white-space: nowrap;
}

/* Content sits above the fixed flow layer (do NOT touch navbar/menu/loader
   position — they must stay fixed; their z-index already clears the flow). */
main { position: relative; z-index: 1; }
.scene { z-index: 1; }

.scene-bridge {
  position: relative;
  z-index: 1;
  height: 45vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.bridge-cream-to-dark {
  background: linear-gradient(to bottom, var(--ivory), var(--espresso));
  color: var(--champagne);
}

.bridge-word {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(4rem, 14vw, 16rem);
  font-style: italic;
  line-height: .75;
  letter-spacing: -.07em;
  opacity: .5;
  white-space: nowrap;
}

/* ===================================================================
   PLACEHOLDER — fotos fuera; solo el cuadro/formato vacío.
   (Temporal: quitar este bloque cuando entren las fotos reales.)
   =================================================================== */
main img { opacity: 0 !important; }

main figure {
  background: rgba(205, 182, 146, .16);          /* champagne tint */
  box-shadow: inset 0 0 0 1px rgba(109, 94, 85, .28);
}

/* Los frames sobre fondo oscuro (hero, horizontal, fall/dark chapters)
   necesitan un tinte más claro para leerse como caja vacía. */
.hero-cue figure,
.horizontal-cue figure,
.process-chapter.is-inverted figure {
  background: rgba(248, 242, 232, .08);
  box-shadow: inset 0 0 0 1px rgba(248, 242, 232, .18);
}

/* ===================================================================
   MANIFESTO — text sculpture por capas (parallax + z-index)
   =================================================================== */
.manifesto-scene {
  min-height: 100vh;
  background: var(--pearl);
  color: var(--espresso);
  position: relative;
  overflow: hidden;
  display: block;
}

.mf-kicker {
  position: absolute;
  top: 12vh;
  left: 7vw;
  z-index: 5;
  margin: 0;
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--taupe);
}

.mf-ghost {
  position: absolute;
  left: -3vw;
  bottom: -8vh;
  z-index: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14rem, 34vw, 40rem);
  line-height: .7;
  letter-spacing: -.06em;
  color: rgba(205, 182, 146, .22);
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

.mf-line-a {
  position: absolute;
  top: 20vh;
  left: 7vw;
  z-index: 3;
  width: min(40ch, 44vw);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  line-height: 1.18;
  color: var(--taupe);
  will-change: transform;
}

.mf-band {
  position: absolute;
  top: 30vh;
  right: 5vw;
  z-index: 1;
  width: 40vw;
  height: 40vh;
  margin: 0;
  overflow: hidden;
  will-change: transform;
}
.mf-band img { width: 100%; height: 100%; object-fit: cover; }

.mf-line-b {
  position: absolute;
  left: 7vw;
  bottom: 13vh;
  z-index: 2;
  margin: 0;
  width: min(20ch, 68vw);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3rem, 6.4vw, 7rem);
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--espresso);
  will-change: transform;
}
.mf-line-b em { font-style: italic; color: var(--taupe); }

.manifesto-scene .image-curtain { background: var(--pearl); }
.manifesto-scene .line-mask { overflow: hidden; }

@media (max-width: 900px) {
  .manifesto-scene { min-height: auto; padding: 16vh 6vw 12vh; }
  .mf-ghost { font-size: 46vw; bottom: 2vh; }
  .mf-kicker { position: static; margin-bottom: 3vh; }
  .mf-line-a { position: static; width: auto; margin-bottom: 4vh; }
  .mf-band { position: static; width: 100%; height: 44vh; margin: 4vh 0; }
  .mf-line-b { position: static; width: auto; font-size: clamp(2.4rem, 11vw, 4rem); }
}

/* ===================================================================
   PALETTE FLIP → todo claro (crema / beige / blanco), tipografía negra.
   Se quita el difuminado (gradiente) de los bridges y los fondos marrones.
   =================================================================== */

html, body { background: var(--ivory); color: var(--espresso); }

/* ── Escenas que estaban en marrón → claras ── */
.hero-cue          { background: var(--ivory); color: var(--espresso); }
.horizontal-cue    { background: var(--pearl); color: var(--espresso); }
.beauty-said-scene { background: var(--pearl); color: var(--espresso); }
.book-ticker-scene { background: var(--ivory); color: var(--espresso); }
.process-chapters  { background: var(--ivory); }
.process-chapter.is-inverted { background: var(--pearl); color: var(--espresso); }
.footer            { background: var(--pearl); color: var(--espresso); }
.menu-overlay      { background: var(--ivory); color: var(--espresso); }

/* ── Bridges: sin difuminado (fondo sólido claro) ── */
.bridge-cream-to-dark { background: var(--ivory); color: var(--taupe); }
.bridge-word { color: var(--taupe); opacity: .38; }

/* ── Palabras/scripts gigantes de fondo ── */
.hero-bg-word  { color: rgba(24, 17, 14, .05); }
.hero-top-script { color: var(--espresso); }
.footer-logo   { color: rgba(205, 182, 146, .38); }
.menu-bg-word  { color: rgba(24, 17, 14, .05); }

/* ── Títulos que eran claros sobre oscuro → negro/espresso ── */
.hero-title h1,
.horizontal-heading h2,
.h-copy h2,
.beauty-left h2,
.beauty-text h3,
.ticker-heading h2,
.footer h2,
.menu-link { color: var(--espresso); }

/* ── Kickers / small caps → taupe ── */
.hero-title p,
.horizontal-label,
.horizontal-heading p,
.beauty-left p,
.ticker-heading p,
.footer-content p,
.menu-footer { color: var(--taupe); }

/* ── Párrafos que eran ivory translúcido → taupe ── */
.h-copy p,
.beauty-text p,
.process-chapter.is-inverted p { color: var(--taupe); }

/* ── Números / acentos grandes decorativos ── */
.h-copy span,
.beauty-text span,
.chapter-index { color: var(--champagne); }

/* ── Links / botones de detalle ── */
.h-copy a       { color: var(--taupe); border-bottom-color: rgba(109, 94, 85, .4); }
.beauty-next    { color: var(--espresso); border-color: rgba(109, 94, 85, .5); }
.footer-cta     { color: var(--espresso); border-color: rgba(109, 94, 85, .5); }
.footer-bottom  { color: var(--taupe); }
.footer-bottom a:hover { color: var(--espresso); }

/* ── Ticker: espresso + champagne (antes ivory, invisible sobre claro) ── */
.book-ticker { color: var(--espresso); }
.book-ticker span:nth-child(even) { color: var(--champagne); }

/* ── Cortinas de imagen igualan el nuevo fondo ── */
.hero-cue .image-curtain { background: var(--ivory); }
.horizontal-cue .image-curtain,
.horizontal-cue .mask-reveal { background: var(--pearl); }

/* ── Placeholders de foto en escenas ahora claras → tinte champagne ── */
.hero-cue figure,
.horizontal-cue figure,
.process-chapter.is-inverted figure {
  background: rgba(205, 182, 146, .16);
  box-shadow: inset 0 0 0 1px rgba(109, 94, 85, .28);
}

/* Fix: los spans internos de títulos partidos (SplitType) no deben heredar
   el estilo del número/acento (.h-copy span / .beauty-text span). */
.h-copy h2 span,
.beauty-text h3 span,
.horizontal-heading h2 span {
  color: inherit;
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* ── Proceso: marcos en forma de ARCO (parte superior curva) ── */
.process-chapter .chapter-img {
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;
}
.process-chapter .chapter-img .image-curtain {
  border-radius: inherit;
}

/* ── Arcos más alargados/esbeltos (no anchos ni aplastados) ── */
.process-chapter .chapter-img-a {
  width: 24vw;
  height: 78vh;
  top: 11vh;
  border-radius: 12vw 12vw 0 0;   /* cúpula semicircular sobre cuerpo alto */
}
.process-chapter .chapter-img-b {
  width: 16vw;
  height: 52vh;
  border-radius: 8vw 8vw 0 0;
}

/* ── Arcos: proporción de foto NORMAL (retrato ~3:4) con cúpula de arco ── */
.process-chapter .chapter-img-a {
  width: 28vw;
  height: 60vh;
  top: 16vh;
  border-radius: 14vw 14vw 0 0;
}
.process-chapter .chapter-img-b {
  width: 21vw;
  height: 46vh;
  border-radius: 10.5vw 10.5vw 0 0;
}

/* ===================================================================
   APARTADO DE PRECIOS — overlay full-screen (se abre con "Precios")
   =================================================================== */
.price-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--ivory);
  color: var(--espresso);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}
.price-overlay.is-open { pointer-events: auto; }

.price-close {
  position: fixed;
  top: 2.2vh;
  right: clamp(1.4rem, 4vw, 3.4rem);
  z-index: 3;
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--espresso);
  background: none;
  border: 0;
  cursor: pointer;
}

.price-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.price-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16vh clamp(1.6rem, 6vw, 6rem) 12vh;
}

.price-head { margin-bottom: 9vh; }
.price-head p {
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 1.2rem;
}
.price-head h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .98;
  letter-spacing: -.02em;
}

.price-group { margin-bottom: 8vh; }
.price-group__title {
  margin: 0 0 3rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(24, 17, 14, .16);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 3rem);
  color: var(--taupe);
}

.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 5vw;
}

.price-item { max-width: 40ch; }
.price-item__top {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .7rem;
}
.price-item__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1.05;
  color: var(--espresso);
  flex: 1;
}
.price-item__price {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 2rem);
  color: var(--champagne);
  white-space: nowrap;
}
.price-item__desc {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--taupe);
}

.price-cta {
  display: inline-block;
  margin-top: 4vh;
  padding: 1.1rem 2.2rem;
  border: 1px solid rgba(109, 94, 85, .5);
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--espresso);
  transition: background .5s var(--ease), color .5s var(--ease);
}
.price-cta:hover { background: var(--espresso); color: var(--ivory); }

@media (max-width: 820px) {
  .price-list { grid-template-columns: 1fr; gap: 3.4rem; }
  .price-item { max-width: none; }
  .price-inner { padding-top: 14vh; }
}

/* ===================================================================
   BOOKING — servicios seleccionables + calendario/horario
   =================================================================== */
.price-hint {
  margin: 1.6rem 0 0;
  font-size: .82rem;
  color: var(--taupe);
}

/* Item seleccionable */
.price-item {
  cursor: pointer;
  padding: 1rem 1.2rem 1.1rem 0;
  border-radius: 4px;
  transition: background .3s var(--ease);
}
.price-item:hover { background: rgba(205, 182, 146, .12); }
.price-item:hover .price-item__name { color: var(--champagne); }
.price-item__name { transition: color .3s var(--ease); }
.price-item__top::after {
  content: "→";
  color: var(--champagne);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.price-item:hover .price-item__top::after { opacity: 1; transform: translateX(0); }

/* ── Vista reserva ── */
.booking-back {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 3.5rem;
}
.booking-back:hover { color: var(--espresso); }

.booking-selected {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding-bottom: 2rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid rgba(24, 17, 14, .16);
}
.booking-service-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}
.booking-service-price {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 2rem);
  color: var(--champagne);
}

.booking-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}
.cal-month {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  letter-spacing: .01em;
  text-transform: capitalize;
}
.cal-nav {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(109, 94, 85, .4);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--espresso);
  transition: background .3s, color .3s;
}
.cal-nav:hover { background: var(--espresso); color: var(--ivory); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--taupe);
  padding-bottom: .8rem;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: 50%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem;
  color: var(--espresso);
  cursor: pointer;
  transition: background .25s, color .25s;
}
.cal-day.cal-empty { pointer-events: none; }
.cal-day:not(.is-disabled):not(.cal-empty):hover { background: rgba(205, 182, 146, .3); }
.cal-day.is-disabled { color: rgba(109, 94, 85, .3); cursor: default; }
.cal-day.is-selected { background: var(--espresso); color: var(--ivory); }
.cal-note {
  margin: 1.6rem 0 0;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe);
}

.booking-label {
  margin: 0 0 1.4rem;
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe);
}
.times-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
}
.time-slot {
  padding: .85rem;
  border: 1px solid rgba(109, 94, 85, .3);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: .9rem;
  letter-spacing: .06em;
  color: var(--espresso);
  transition: background .25s, color .25s, border-color .25s;
}
.time-slot:hover { border-color: var(--champagne); }
.time-slot.is-selected { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }

.booking-confirm {
  display: inline-block;
  margin-top: 4vh;
  padding: 1.1rem 2.4rem;
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  background: rgba(24, 17, 14, .12);
  color: var(--taupe);
  pointer-events: none;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.booking-confirm.is-ready {
  background: var(--espresso);
  color: var(--ivory);
  pointer-events: auto;
}

@media (max-width: 820px) {
  .booking-cols { grid-template-columns: 1fr; gap: 3.5rem; }
}

/* ── Apartado CURSO ── */
.course-lead {
  margin: 2.2rem 0 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--taupe);
}
.course-block { margin-bottom: 7vh; }
.course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.course-list li { display: flex; gap: 1.6rem; align-items: baseline; max-width: 52ch; }
.course-list li span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--champagne);
  min-width: 2ch;
}
.course-list li p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  line-height: 1.3;
  color: var(--espresso);
}
.course-list--plain li p { font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.course-list--plain li::before {
  content: "—";
  color: var(--champagne);
  margin-right: .2rem;
}
.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3.5rem;
  padding-top: 3rem;
  margin-bottom: 2vh;
  border-top: 1px solid rgba(24, 17, 14, .16);
}
.course-meta__item span {
  display: block;
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: .7rem;
}
.course-meta__item p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  color: var(--espresso);
}

/* ── Applause: ojo pegado a "TU", misma fila (estructura original) ── */
.applause-eye {
  left: 37vw;      /* justo después de TU, pegado sin pisarlo */
  top: 45vh;
  height: 13vh;
}


/* ===================================================================
   FIDELIDAD — "Gianis Club" · dashboard rewards (más aire)
   =================================================================== */
.loyalty-overlay {
  --club-gold: #a9843e;
  --club-gold-2: #c6a25f;
  --club-ink: #2b2117;
  --club-sub: #8a7963;
  --club-line: rgba(43, 33, 23, .12);
  --club-soft: #efe6d4;
  --club-card: #fdfaf3;
  background: #f7f1e5;
  color: var(--club-ink);
}
.loyalty-inner {
  max-width: 1440px;
  padding-top: 9vh;
  padding-bottom: 16vh;
  padding-left: clamp(1.2rem, 2.6vw, 2.8rem);
  padding-right: clamp(1.2rem, 2.6vw, 2.8rem);
}

/* ── Topbar ── */
.club-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 3rem;
  margin-bottom: 9vh;
}
.club-brand { display: flex; flex-direction: column; line-height: 1; }
.club-brand__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: .01em;
  color: var(--club-ink);
}
.club-brand__sub {
  margin-top: .7rem;
  font-size: .6rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--club-gold);
}
.club-nav { display: flex; gap: 3.4rem; }
.club-nav a {
  font-size: .88rem;
  letter-spacing: .02em;
  color: var(--club-ink);
  opacity: .82;
  transition: opacity .3s, color .3s;
}
.club-nav a:hover { opacity: 1; color: var(--club-gold); }
.club-pill {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.6rem;
  border: 1px solid rgba(169, 132, 62, .5);
  border-radius: 999px;
  font-size: .95rem;
  color: var(--club-gold);
  white-space: nowrap;
}
.club-pill svg { width: 17px; height: 17px; }

/* ── Hero + saldo ── */
.club-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  margin-bottom: 12vh;
}
.club-hero__intro h2 {
  margin: 0 0 2.4rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(3rem, 5.5vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--club-ink);
}
.club-hero__intro h2 em { font-style: inherit; color: inherit; }
.club-hero__intro p {
  margin: 0 0 3.4rem;
  max-width: 36ch;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--club-sub);
}
.club-btn {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 1.25rem 2.3rem;
  border-radius: 14px;
  background: linear-gradient(160deg, #b78f47, #9a7531);
  color: #fdf8ee;
  font-size: .84rem;
  letter-spacing: .1em;
  box-shadow: 0 20px 38px -20px rgba(154, 117, 49, .8);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.club-btn span { transition: transform .35s var(--ease); }
.club-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 44px -20px rgba(154, 117, 49, .9); }
.club-btn:hover span { transform: translateX(4px); }

/* Tarjeta de saldo */
.club-balance {
  padding: clamp(2.6rem, 3.6vw, 3.6rem);
  border: 1px solid var(--club-line);
  border-radius: 26px;
  background: transparent;
}
.club-balance__top {
  display: flex;
  align-items: stretch;
  gap: clamp(2rem, 3.5vw, 3.6rem);
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}
.club-balance__col { flex: 1; }
.club-balance__sep { display: none; }
.club-label {
  display: block;
  margin-bottom: 1.6rem;
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--club-sub);
}
.club-balance__value {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(3rem, 4.6vw, 4.2rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--club-ink);
}
.club-balance__value span {
  font-family: "Inter", sans-serif;
  font-size: .95rem;
  letter-spacing: .01em;
  color: var(--club-sub);
  margin-left: .6rem;
}
.club-balance__status {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  color: var(--club-ink);
}
.club-balance__status svg { width: 24px; height: 24px; color: var(--club-gold); }

.club-progress p {
  margin: 0 0 1.4rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--club-sub);
}
.club-progress p strong { color: var(--club-gold); font-weight: 600; }
.club-bar {
  height: 12px;
  border-radius: 999px;
  background: #eadfca;
  overflow: hidden;
}
.club-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c6a25f, #a9843e);
}
.club-bar__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 1.1rem;
  font-size: .78rem;
  color: var(--club-sub);
}

/* ── Tres paneles ── */
.club-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 0;
}
.club-card {
  padding: clamp(1.9rem, 2.2vw, 2.4rem);
  border: 1px solid var(--club-line);
  border-radius: 24px;
  background: transparent;
}
.club-card__head {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  margin-bottom: 3.4rem;
}
.club-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--club-soft);
  color: var(--club-gold);
}
.club-ico svg { width: 26px; height: 26px; }
.club-ico--sm { width: 44px; height: 44px; }
.club-ico--sm svg { width: 20px; height: 20px; }
.club-card__head h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.9vw, 1.75rem);
  line-height: 1.15;
  color: var(--club-ink);
}
.club-card__head h3 i { font-style: normal; color: var(--club-gold); margin-right: .4rem; }

/* Listas dentro de las cards */
.club-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--club-line);
  border-radius: 16px;
  overflow: hidden;
}
.club-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 1.2rem;
}
.club-list li + li { border-top: 1px solid var(--club-line); }
.club-list__name {
  flex: 1;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--club-ink);
}
.club-list__pts {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--club-gold);
  white-space: nowrap;
}
/* Descuentos: porcentaje grande a la izquierda */
.club-pct {
  flex: none;
  width: 3ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.9rem;
  color: var(--club-ink);
}
.club-list--disc li { padding: 1.85rem 1.6rem; }
.club-list--disc .club-list__name {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--club-sub);
}

/* Canje especial */
.club-card--special { display: flex; flex-direction: column; }
.club-locked {
  text-align: center;
  padding: 2.8rem 1.4rem 3rem;
  margin-bottom: 1.8rem;
  border: 1px solid var(--club-line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(169, 132, 62, .06), transparent);
}
.club-lock {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  background: var(--club-soft);
  color: var(--club-gold);
}
.club-lock svg { width: 32px; height: 32px; }
.club-locked h4 {
  margin: 0 0 .7rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.65rem;
  color: var(--club-ink);
}
.club-locked__state {
  margin: 0 0 .5rem;
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--club-gold);
}
.club-locked__req { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--club-sub); }
.club-list--redeem { border: 0; }
.club-list--redeem li { padding: 1.4rem 0; }
.club-list--redeem li:first-child { border-top: 1px solid var(--club-line); }

/* ── Cómo sumar (ancho completo) ── */
.club-earn {
  margin-top: 2.4rem;
  padding: clamp(2.4rem, 3.4vw, 3.6rem);
  border: 1px solid var(--club-line);
  border-radius: 24px;
  background: transparent;
}
.club-earn__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 5rem;
}
.club-earn__grid li {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--club-line);
}
.club-earn__grid .club-list__name { flex: 1; font-size: 1rem; }

/* ── Cierre ── */
.club-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-top: 11vh;
  padding-top: 5vh;
  border-top: 1px solid var(--club-line);
}
.club-foot p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  line-height: 1.12;
  color: var(--club-ink);
}
.club-foot p em { font-style: italic; color: var(--club-gold); }

@media (max-width: 900px) {
  .club-hero { grid-template-columns: 1fr; margin-bottom: 8vh; }
  .club-cols { grid-template-columns: 1fr; }
  .club-earn__grid { grid-template-columns: 1fr; gap: 0; }
  .club-nav { display: none; }
}


/* ===================================================================
   FOOTER — cierre + info del negocio
   =================================================================== */
.footer-extended { min-height: 100vh; }
.footer-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(6vh, 10vh, 14vh);
}

/* ── Info del negocio ── */
.footer-info {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  text-align: left;
  padding-bottom: clamp(5vh, 8vh, 10vh);
  border-bottom: 1px solid rgba(24, 17, 14, .16);
}

/* Foto de la dueña (marco vacío por ahora) */
.foot-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  background:
    linear-gradient(160deg, rgba(205, 182, 146, .28), rgba(196, 160, 138, .16));
  box-shadow: inset 0 0 0 1px rgba(24, 17, 14, .12);
  display: flex;
  align-items: flex-end;
}
.foot-photo figcaption {
  padding: 1.4rem 1.5rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--espresso);
}
.foot-photo figcaption span {
  display: block;
  margin-top: .4rem;
  font-family: "Inter", sans-serif;
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--taupe);
}

.foot-eyebrow {
  margin: 0 0 1.4rem;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--taupe);
}
.foot-title {
  margin: 0 0 1.8rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--espresso);
}
.foot-lead {
  margin: 0 0 3rem;
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--taupe);
}

.foot-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem 3rem;
}
.foot-label {
  display: block;
  margin-bottom: .9rem;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--champagne);
}
.foot-meta__col p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--espresso);
}
.foot-meta__col a {
  color: var(--espresso);
  border-bottom: 1px solid rgba(24, 17, 14, .22);
  transition: border-color .3s, color .3s;
}
.foot-meta__col a:hover { color: var(--champagne); border-color: var(--champagne); }

/* ── Cierre / CTA ── */
.footer-outro { max-width: 900px; margin: 0 auto; text-align: center; }

/* ── Barra inferior ── */
.footer-inner .footer-bottom {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
  width: 100%;
  padding-top: clamp(4vh, 6vh, 7vh);
  border-top: 1px solid rgba(24, 17, 14, .16);
}
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 2.4rem; }
.footer-bottom__copy {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
}

@media (max-width: 900px) {
  .footer-info { grid-template-columns: 1fr; gap: 3rem; }
  .foot-photo { max-width: 340px; }
  .foot-meta { grid-template-columns: 1fr 1fr; }
  .footer-inner .footer-bottom { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .foot-meta { grid-template-columns: 1fr; }
}

/* ===================================================================
   FOTOS REVELADAS — selección (hero, fall, proceso). El resto sigue
   como marco vacío. Para revelar más secciones, sumar sus selectores.
   =================================================================== */
.hero-cue img,
.fall-poster img,
.process-chapters img,
.applause-poster img,
.manifesto-scene img,
.horizontal-cue img,
.logo-overlap img {
  opacity: 1 !important;
}
.hero-cue figure,
.fall-poster figure,
.process-chapters figure,
.applause-poster figure,
.manifesto-scene figure,
.horizontal-cue figure,
.logo-overlap figure {
  background: transparent;
  box-shadow: none;
}

/* ===================================================================
   SOBRE NÓS — retrato de la dueña (sección final antes del footer)
   Replica exacta del diseño principal, con tokens del blueprint.
   =================================================================== */
.about-scene {
  position: relative;
  background: var(--ivory);
  padding: 16vh 8vw 14vh;
  border-top: 1px solid rgba(24, 17, 14, .05);
  overflow: hidden;
}
.about-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 6vw;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.about-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0a0908;
  box-shadow: 0 40px 90px rgba(24, 17, 14, .14);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; }
.about-photo .stamp {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  font-family: "Inter", sans-serif;
  font-size: .55rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: rgba(248, 242, 232, .85);
  padding: .55rem .9rem;
  border: 1px solid rgba(248, 242, 232, .35);
  backdrop-filter: blur(6px);
}
.about-text { display: flex; flex-direction: column; gap: 2.5vh; }
.about-kicker {
  font-family: "Inter", sans-serif;
  font-size: .7rem;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--champagne);
}
.about-title {
  font-family: "Italiana", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: .005em;
  color: var(--espresso);
  margin: 0;
}
.about-lead {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--espresso);
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  line-height: 1.65;
  max-width: 32em;
  margin: 0;
}
.about-facts {
  list-style: none;
  padding: 3rem 0 0;
  margin: 1.5vh 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 3rem;
  border-top: 1px solid rgba(24, 17, 14, .10);
}
.about-facts li {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  color: var(--espresso);
  font-size: 1.2rem;
  line-height: 1.55;
}
.about-facts li b {
  display: block;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: .55rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: .4rem;
}
.about-actions { display: flex; gap: 2.4rem; margin-top: 2.5vh; flex-wrap: wrap; }
.about-actions a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--espresso);
  text-decoration: none;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--champagne);
  transition: color .4s ease, letter-spacing .4s ease;
}
.about-actions a .ico {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--champagne);
  transition: color .4s ease, transform .4s ease;
}
.about-actions a .ico svg { width: 100%; height: 100%; display: block; }
.about-actions a .arrow { color: var(--champagne); font-size: .9rem; margin-left: .15rem; transition: transform .4s ease; }
.about-actions a:hover { color: var(--champagne); letter-spacing: .5em; }
.about-actions a:hover .ico { transform: scale(1.1); }
.about-actions a:hover .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .about-scene { padding: 10vh 6vw; }
  .about-wrap { grid-template-columns: 1fr; gap: 5vh; }
  .about-photo { max-width: 340px; margin: 0 auto; }
  .about-facts { grid-template-columns: 1fr; }
}

/* ===================================================================
   MARCO DORADO FINO en imágenes — todas las secciones EXCEPTO
   hero y applause (que quedan sin borde, a pedido).
   inset box-shadow = línea fina que respeta el border-radius (arcos).
   =================================================================== */
/* Marco dorado brillante, fino y NÍTIDO — borde nativo del browser
   (antialias limpio, respeta el radio de los arcos), no lo tapa la foto
   porque el borde vive fuera del content-box. */
.about-photo { box-shadow: 0 40px 90px rgba(24, 17, 14, .14) !important; }
.hero-cue figure,
.applause-poster figure,
.fall-poster figure,
.process-chapters .chapter-img,
.manifesto-scene figure,
.horizontal-cue .h-img,
.logo-overlap figure,
.about-photo {
  box-sizing: border-box;
  border: 2px solid #e0b53c !important;
}

/* ===================================================================
   ACTO PRINCIPAL — hero WebGL dorado (de la web principal).
   Primera pantalla (100vh); al scrollear aparece el hero-cue actual.
   =================================================================== */
#webgl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  touch-action: pan-y;
}
#webgl.is-ready { opacity: 1; }

/* main = host de scroll transparente; no intercepta el mouse sobre el
   hero para que el canvas (detrás) reciba el pointer y el fluido reaccione. */
main { pointer-events: none; }
main > * { pointer-events: auto; }

.act-one {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  background: transparent;
  pointer-events: none;          /* el canvas fixed detrás recibe el mouse */
  overflow: hidden;
}
.act-one__scroll {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  z-index: 2;
  font-family: "Inter", sans-serif;
  font-size: .6rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: .7;
  pointer-events: none;
}


/* ===================================================================
   ENCUADRE de fotos nuevas (portrait alto en marco apaisado):
   subir el object-position para mostrar la mirada, no la boca/mentón.
   =================================================================== */
.fall-poster .fall-main-img img { object-position: center 38%; }
.logo-overlap .overlap-main img { object-position: center 32%; }
.logo-overlap .overlap-detail img { object-position: center 30%; }

/* Proceso: arcos grandes (portraits) — subir encuadre para mostrar la mirada. */
.process-chapters .chapter-img-a img { object-position: center 30%; }

/* ===================================================================
   RESERVA — campos de nombre/teléfono + mensajes + estados
   =================================================================== */
.booking-fields { display: grid; gap: .7rem; margin-top: 1.6rem; }
.booking-input {
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid rgba(24, 17, 14, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .5);
  font-family: "Inter", sans-serif;
  font-size: .95rem;
  color: var(--espresso);
}
.booking-input:focus { outline: none; border-color: var(--champagne); }
.booking-input::placeholder { color: var(--taupe); }

.times-loading {
  display: inline-block;
  font-size: .85rem;
  color: var(--taupe);
  padding: .4rem 0;
}

.booking-confirm { border: 0; cursor: pointer; font-family: "Inter", sans-serif; }
.booking-confirm[disabled] { cursor: default; }

.booking-msg {
  margin: 1.6rem 0 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--taupe);
}
.booking-msg.is-ok { color: #2e7d4f; }
.booking-msg.is-err { color: #b23b3b; }

/* ===================================================================
   Overlay abierto → bloquear scroll de la PÁGINA (evita doble barra).
   Sólo scrollea el contenido interno del overlay (.price-scroll).
   =================================================================== */
html.overlay-open,
html.overlay-open body { overflow: hidden !important; }

/* ===================================================================
   SERVICIOS — menú profesional (estilo hotelería / studio internacional)
   =================================================================== */
.price-meta {
  display: flex; flex-wrap: wrap; gap: 2.4rem 4rem;
  padding-bottom: 3.4rem; margin-bottom: 5vh;
  border-bottom: 1px solid rgba(24, 17, 14, .14);
}
.price-meta__i span {
  display: block; font-size: .56rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: .55rem;
}
.price-meta__i p { margin: 0; font-size: .95rem; color: var(--espresso); }

.price-group { margin-bottom: 7vh; }
.price-group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.3rem; margin-bottom: .6rem;
  border-bottom: 1px solid rgba(24, 17, 14, .22);
}
.price-group__title {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 300; font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--espresso);
}
.price-group__count { font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); }

.price-list { display: block !important; grid-template-columns: none !important; margin: 0; padding: 0; list-style: none; gap: 0 !important; }
.price-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  max-width: none; margin: 0; padding: 1.65rem 1.1rem;
  border-bottom: 1px solid rgba(24, 17, 14, .1); border-radius: 0; cursor: pointer;
  transition: background .35s var(--ease), padding-left .35s var(--ease);
}
.price-item:hover { background: rgba(205, 182, 146, .1); padding-left: 1.7rem; }
.price-item__main { flex: 1; max-width: 62ch; }
.price-item__name {
  margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.12; color: var(--espresso);
  transition: color .3s var(--ease);
}
.price-item:hover .price-item__name { color: var(--champagne); }
.price-item__desc { margin: .5rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--taupe); }
.price-item__aside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; text-align: right; }
.price-item__price {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.8rem); color: var(--champagne); white-space: nowrap;
}
.price-item__cue {
  font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.price-item:hover .price-item__cue { opacity: 1; transform: translateX(0); }
@media (max-width: 640px) { .price-item { flex-direction: column; gap: .8rem; } .price-item__aside { flex-direction: row; align-items: baseline; gap: 1rem; } }

/* ===================================================================
   CURSO — prospecto profesional (masterclass)
   =================================================================== */
.course-inner { max-width: 1120px; }
.course-lead { max-width: 60ch; }

.course-specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(24, 17, 14, .16); border-bottom: 1px solid rgba(24, 17, 14, .16);
  margin: 6vh 0 7vh;
}
.course-spec { padding: 2rem 2rem 2rem 0; border-right: 1px solid rgba(24, 17, 14, .1); }
.course-spec:last-child { border-right: 0; }
.course-spec span { display: block; font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne); margin-bottom: .8rem; }
.course-spec p { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; color: var(--espresso); }

.course-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.course-sec__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 1.3rem; margin-bottom: 1.4rem; border-bottom: 1px solid rgba(24, 17, 14, .22); }
.course-sec__label { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--espresso); }
.course-sec__count { font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); }

.course-modules { list-style: none; margin: 0; padding: 0; }
.course-module { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start; padding: 1.9rem 0; border-bottom: 1px solid rgba(24, 17, 14, .1); }
.course-module__n { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 300; font-size: 1.7rem; line-height: 1; color: var(--champagne); }
.course-module__body h4 { margin: 0 0 .4rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--espresso); }
.course-module__body p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--taupe); }

.course-aside { display: flex; flex-direction: column; gap: 3rem; }
.course-includes .course-sec__label { display: block; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid rgba(24, 17, 14, .22); }
.course-includes ul { list-style: none; margin: 0; padding: 0; }
.course-includes li { position: relative; padding: .85rem 0 .85rem 1.5rem; font-size: .96rem; color: var(--espresso); border-bottom: 1px solid rgba(24, 17, 14, .08); }
.course-includes li::before { content: ""; position: absolute; left: 0; top: 1.3rem; width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); }

.course-cta { padding: 2.2rem; border: 1px solid rgba(24, 17, 14, .16); border-radius: 16px; background: var(--pearl); }
.course-cta__note { margin: 0 0 1.6rem; font-size: .9rem; line-height: 1.6; color: var(--taupe); }
.course-cta .price-cta { margin-top: 0; }

@media (max-width: 820px) {
  .course-specs { grid-template-columns: 1fr 1fr; }
  .course-spec { border-right: 0; padding: 1.5rem 0; border-bottom: 1px solid rgba(24, 17, 14, .1); }
  .course-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   FIX header Servicios: la bajada NO va en mayúsculas/tracking (frase larga).
   =================================================================== */
.price-head .price-hint {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
  max-width: 46ch;
  margin-top: 1.8rem !important;
  color: var(--taupe);
}
.price-head h2 { margin-bottom: .4rem; }
.price-meta { margin-bottom: 3vh; padding-bottom: 3vh; }

/* ===================================================================
   SERVICIOS — OPCIÓN A elegida: carta de hotel (2 columnas, líder punteado)
   Sobrescribe el menú de una sola columna anterior.
   =================================================================== */
.price-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2.8rem 4.6rem !important;
}
.price-item {
  display: block !important;
  max-width: none; margin: 0; padding: .4rem 0 !important;
  border: 0 !important; background: none !important; cursor: pointer;
  transition: none;
}
.price-item:hover { background: none !important; padding-left: 0 !important; }
.price-item__line { display: flex; align-items: baseline; }
.price-item__name {
  margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.65rem); line-height: 1.1; color: var(--espresso);
  white-space: nowrap; transition: color .3s var(--ease);
}
.price-item:hover .price-item__name { color: #b98d3e; }
.price-item__dots {
  flex: 1; min-width: 1.4rem; margin: 0 .9rem;
  border-bottom: 1.5px dotted rgba(24, 17, 14, .3);
  transform: translateY(-.28em);
}
.price-item__price {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: #b98d3e; white-space: nowrap;
}
.price-item__desc { margin: .5rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--taupe); max-width: 44ch; }
@media (max-width: 780px) { .price-list { grid-template-columns: 1fr !important; } }