/* ============================================================
   Pamela Alarcón , Descubre tu estilo
   Tokens locked in Phase 0 (palette sampled from assets/1/1.png)
   ============================================================ */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-moda-latin-italic.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* palette, sampled from the hero still */
  --ivory: #F3EEE5;
  --ivory-deep: #E9E1D3;
  --champagne: #C7B39E;
  --taupe: #B5A08D;
  --charcoal: #1D1A16;
  --charcoal-soft: #292520;
  --gold: #B08D57;
  --gold-deep: #8F7245;
  --line-dark: rgba(29, 26, 22, 0.16);
  --line-light: rgba(243, 238, 229, 0.22);

  /* type */
  --serif: "Bodoni Moda", "Bodoni MT", Didot, serif;
  --grotesk: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* motion */
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slow: 1.1s;
  --dur-med: 0.65s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body {
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--grotesk);
  font-weight: 340;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

body.test-open { overflow: hidden; }

img, video { display: block; max-width: 100%; }

em { font-style: italic; }

::selection { background: var(--gold); color: var(--ivory); }

/* ---------- shared ---------- */

.cta-gold {
  appearance: none;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ivory);
  font-family: var(--grotesk);
  font-weight: 480;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1.1em 2.6em;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease-lux), color var(--dur-med) var(--ease-lux), border-color var(--dur-med) var(--ease-lux);
}
.cta-gold:hover, .cta-gold:focus-visible { background: transparent; color: var(--gold-deep); }
.proof .cta-gold:hover, .cierre .cta-gold:hover { color: var(--gold); }
.cta-gold:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.link-quiet {
  position: relative;
  display: inline-block;
  color: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.35em;
  transition: color var(--dur-med) var(--ease-lux);
}
.link-quiet::after { content: ""; position: absolute; inset: -0.85rem -0.35rem 0; }
.link-quiet:hover, .link-quiet:focus-visible { color: var(--gold-deep); }
.link-quiet-light:hover, .link-quiet-light:focus-visible { color: var(--champagne); }

.section-kicker, .proof-kicker {
  font-size: 0.6875rem;
  font-weight: 460;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.proof-kicker { color: var(--gold); }

.gold-rule {
  border: 0;
  border-top: 1px solid var(--gold);
  width: 3.5rem;
  margin: 1.6rem 0 2.4rem;
}

/* scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity var(--dur-slow) var(--ease-lux), transform var(--dur-slow) var(--ease-lux);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- header ---------- */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem clamp(1.25rem, 4vw, 3.5rem);
  transition: background var(--dur-med) var(--ease-lux), padding var(--dur-med) var(--ease-lux), box-shadow var(--dur-med) var(--ease-lux);
}
.site-head.is-scrolled {
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  box-shadow: 0 1px 0 var(--line-dark);
}

.brand {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.02rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
}

.head-cta {
  position: relative;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold);
  color: var(--charcoal);
  font-family: var(--grotesk);
  font-weight: 440;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 0 0.3em;
  cursor: pointer;
  transition: color var(--dur-med) var(--ease-lux);
}
/* widen the touch target to ~44px without shifting the underline */
.head-cta::after { content: ""; position: absolute; inset: -0.85rem -0.4rem -0.55rem; }
.head-cta:hover, .head-cta:focus-visible { color: var(--gold-deep); }

/* ---------- hero ----------
   The hero is a tall stack: the portrait video fills a region taller than the
   viewport. The first 100svh frames her face (headline over it); scrolling
   reveals the full seated figure, which dissolves into the proof strip via a
   progressive blur. */

.hero {
  position: relative;
  height: 212vh; /* fallback for browsers without svh (pre-iOS 15.4) */
  height: 212svh;
}

.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-still, .hero-still img, .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 42%;
}
.hero-video { opacity: 0; transition: opacity 1.6s var(--ease-lux); }
.hero-video.is-playing { opacity: 1; }

/* CSS Ken Burns fallback when no video is available */
.hero-media.kenburns .hero-still img {
  animation: kenburns 30s ease-in-out infinite alternate;
  transform-origin: 56% 20%;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.05) translate(-0.5%, 0.6%); }
}

/* progressive blur: increasing backdrop-blur bands dissolve the video's lower
   edge, tinted to land on the charcoal proof strip below */
.hero-blur {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
}
.hero-blur > div { position: absolute; inset: 0; }
.hero-blur > div:nth-child(1) {
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
}
.hero-blur > div:nth-child(2) {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 44%);
          mask-image: linear-gradient(to bottom, transparent 20%, #000 44%);
}
.hero-blur > div:nth-child(3) {
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 66%);
          mask-image: linear-gradient(to bottom, transparent 40%, #000 66%);
}
.hero-blur > div:nth-child(4) {
  -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 62%, #000 88%);
          mask-image: linear-gradient(to bottom, transparent 62%, #000 88%);
}
.hero-blur-tint {
  background: linear-gradient(to bottom,
    rgba(29, 26, 22, 0) 26%,
    rgba(29, 26, 22, 0.4) 66%,
    rgba(29, 26, 22, 0.82) 88%,
    var(--charcoal) 100%);
}

/* headline legibility scrim, confined to the first viewport.
   Masked to fade to nothing at its own bottom edge so there is no seam where
   it meets the revealed video below the fold. */
.hero-scrim {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(135% 70% at 22% 108%, rgba(243, 238, 229, 0.8) 0%, rgba(243, 238, 229, 0.32) 42%, rgba(243, 238, 229, 0) 66%),
    linear-gradient(103deg, rgba(243, 238, 229, 0.42) 0%, rgba(243, 238, 229, 0) 42%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 96%);
}

.hero-copy {
  position: absolute;
  z-index: 3;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(5rem, 11vh, 8.5rem);
  max-width: 62rem;
}

.hero-title {
  font-family: var(--serif);
  font-weight: 640;
  font-size: clamp(3.4rem, 10.5vw, 8.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: inline-block; transform: translateY(110%); animation: riseup 1.3s var(--ease-lux) forwards; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.14s; }
@keyframes riseup { to { transform: none; } }

.hero-sub {
  max-width: 30rem;
  margin-top: 1.6rem;
  font-size: 1.0625rem;
  font-weight: 360;
  opacity: 0;
  animation: fadein 1.4s var(--ease-lux) 0.55s forwards;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
  opacity: 0;
  animation: fadein 1.4s var(--ease-lux) 0.8s forwards;
}
.cta-note { font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--charcoal-soft); opacity: 0.75; }

@keyframes fadein { to { opacity: 1; } }

.hero-scroll {
  position: absolute;
  z-index: 3;
  right: clamp(1.25rem, 4vw, 3.5rem);
  top: calc(100svh - 4.5rem - clamp(3rem, 7vh, 5.5rem));
  width: 1px;
  height: 4.5rem;
  background: var(--line-dark);
  overflow: hidden;
}
.hero-scroll span {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--gold);
  animation: scrollhint 2.6s var(--ease-lux) infinite;
}
@keyframes scrollhint {
  0% { transform: translateY(-110%); }
  60%, 100% { transform: translateY(280%); }
}

/* ---------- proof strip ---------- */

.proof {
  background: var(--charcoal);
  color: var(--ivory);
}
.proof-inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(5.5rem, 12vh, 9rem) clamp(1.25rem, 4vw, 3.5rem);
}
.proof-line {
  font-family: var(--serif);
  font-weight: 480;
  font-size: clamp(1.55rem, 3.6vw, 2.9rem);
  line-height: 1.32;
  max-width: 56rem;
}
.proof-line + .proof-line { margin-top: 1.1em; }
.proof-line em { color: var(--champagne); }

/* ---------- gallery (auto-scroll focus carousel) ---------- */

.gallery {
  background: var(--charcoal);
  color: var(--ivory);
  padding: clamp(4.5rem, 11vh, 8rem) 0 clamp(4.5rem, 11vh, 8rem);
  overflow: hidden;
}
.gallery-head {
  max-width: 82rem;
  margin: 0 auto clamp(2.4rem, 5vh, 4rem);
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}
.gallery-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.6vw, 3.8rem);
  line-height: 1.04;
  margin: 1rem 0 1rem;
}
.gallery-title em { color: var(--champagne); }
.gallery-sub { max-width: 34rem; opacity: 0.72; }

.gallery-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  cursor: grab;
  /* dragging must not start a text/image selection */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: pan-y;
}
.gallery-viewport.is-grabbing { cursor: grabbing; }

.gallery-track {
  display: flex;
  gap: clamp(0.9rem, 1.8vw, 1.9rem);
  width: max-content;
  will-change: transform;
  padding: 2.4rem 0; /* room for the focused item to scale up */
}

.gallery-item {
  --d: 1;
  position: relative;
  flex: 0 0 auto;
  height: clamp(20rem, 62vh, 40rem);
  transform: scale(calc(1.08 - 0.26 * var(--d)));
  filter: blur(calc(var(--d) * var(--d) * 8px)) brightness(calc(1 - 0.24 * var(--d))) saturate(calc(1 - 0.26 * var(--d)));
  opacity: calc(1 - 0.4 * var(--d));
  z-index: 1;
}
.gallery-item.is-focus { z-index: 2; }
.gallery-item img {
  height: 100%;
  width: auto;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  box-shadow: 0 2.2rem 4rem rgba(0, 0, 0, 0.5);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ---------- sobre ---------- */

.sobre {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: 82rem;
  margin: 0 auto;
  padding: clamp(5.5rem, 14vh, 10rem) clamp(1.25rem, 4vw, 3.5rem);
}

.sobre-media { position: relative; }
/* portrait slot placeholder: garment-detail crop, deliberately not a face (see ASSETS-NEEDED.md) */
.sobre-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 8;
  object-fit: cover;
  object-position: 50% 100%;
}
.sobre-caption {
  margin-top: 0.9rem;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}

.sobre-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 1.06;
  margin: 1.2rem 0 1.8rem;
}

.sobre-text p + p { margin-top: 1.1em; }
.sobre-text { max-width: 34rem; }

.sobre-lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 520;
  font-size: 1.45rem;
  color: var(--gold-deep);
}

.sobre-copy .cta-gold { margin-top: 2.2rem; }

/* ---------- guía ---------- */

.guia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--ivory-deep);
}
.guia-media { position: relative; overflow: hidden; }
.guia-media img { width: 100%; height: 100%; object-fit: cover; }

.guia-copy {
  padding: clamp(4rem, 10vh, 8rem) clamp(1.5rem, 5vw, 5.5rem);
  max-width: 40rem;
}

.guia-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.05;
  margin: 1.2rem 0 1.6rem;
}

.guia-intro { max-width: 32rem; }

.guia-list {
  list-style: none;
  margin: 2rem 0;
  max-width: 32rem;
}
.guia-list li {
  padding: 0.9em 0;
  border-top: 1px solid var(--line-dark);
}
.guia-list li:last-child { border-bottom: 1px solid var(--line-dark); }

.guia-price {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.3rem;
  margin-bottom: 2rem;
}

.guia-ctas {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}

/* ---------- cierre ---------- */

.cierre {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ivory);
  overflow: hidden;
}
.cierre-media { position: absolute; inset: 0; overflow: hidden; }
.cierre-still, .cierre-still img, .cierre-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a different part of the hero than the top: the quiet lower composition */
  object-position: 50% 92%;
}
.cierre-video { opacity: 0; transition: opacity 1.8s var(--ease-lux); }
.cierre-video.is-playing { opacity: 1; }
.cierre-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 46% at 50% 52%, rgba(29, 26, 22, 0.5) 0%, rgba(29, 26, 22, 0) 78%),
    linear-gradient(rgba(29, 26, 22, 0.36), rgba(29, 26, 22, 0.62));
}
.cierre-copy {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 14vh, 9rem) clamp(1.25rem, 4vw, 3.5rem);
  max-width: 56rem;
}
.cierre-line {
  font-family: var(--serif);
  font-weight: 540;
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  line-height: 1.14;
}
.cierre-line em { color: var(--champagne); }
.cierre-ctas {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}
.cierre .link-quiet { border-bottom-color: var(--champagne); }

/* ---------- footer ---------- */

.site-foot {
  background: var(--charcoal);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2.2rem clamp(1.25rem, 4vw, 3.5rem);
}
.foot-name {
  font-family: var(--serif);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.foot-links { display: flex; gap: 1.4rem 2rem; flex-wrap: wrap; }
.foot-links a {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--ivory);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
  transition: opacity var(--dur-med) var(--ease-lux), color var(--dur-med) var(--ease-lux);
}
.foot-links a:hover, .foot-links a:focus-visible { opacity: 1; color: var(--champagne); }

/* ============================================================
   TEST DE ESTILO , full-screen takeover
   ============================================================ */

.test-layer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--charcoal);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.7s var(--ease-lux);
}
/* the explicit display would otherwise defeat the hidden attribute,
   leaving an invisible layer over the page that swallows clicks */
.test-layer[hidden] { display: none; }
.test-layer.is-open { opacity: 1; }

.test-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-light);
  flex: none;
}
.test-brand {
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
}
.test-progress {
  font-family: var(--serif);
  font-weight: 520;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--champagne);
  font-variant-numeric: lining-nums;
}
.test-close {
  position: relative;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold);
  color: var(--ivory);
  font-family: var(--grotesk);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.25em;
  cursor: pointer;
  transition: color var(--dur-med) var(--ease-lux);
}
.test-close::after { content: ""; position: absolute; inset: -0.9rem -0.6rem -0.6rem; }
.test-close:hover, .test-close:focus-visible { color: var(--champagne); }

.test-back {
  position: absolute;
  left: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.5rem, 5vh, 3rem);
  z-index: 5;
  appearance: none;
  background: none;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  color: var(--ivory);
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color var(--dur-med) var(--ease-lux), color var(--dur-med) var(--ease-lux);
}
.test-back:hover, .test-back:focus-visible { border-color: var(--gold); color: var(--champagne); }

.test-viewport {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.test-screen {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1.25rem, 5vw, 3.5rem);
  animation: screenin 0.8s var(--ease-lux);
}
@keyframes screenin {
  from { opacity: 0; transform: translateY(1.6rem); }
  to   { opacity: 1; transform: none; }
}
.test-screen.leaving {
  animation: screenout 0.4s var(--ease-lux) forwards;
}
@keyframes screenout {
  to { opacity: 0; transform: translateY(-1.2rem); }
}

/* intro */
.test-intro { text-align: center; max-width: 46rem; margin: 0 auto; }
.test-intro-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.6rem;
}
.test-intro-title {
  font-family: var(--serif);
  font-weight: 620;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.02;
  margin-bottom: 1.8rem;
}
.test-intro-text { opacity: 0.88; max-width: 38rem; margin: 0 auto 2.4rem; }
.test-intro-note { font-size: 0.8125rem; opacity: 0.6; margin-top: 1.1rem; letter-spacing: 0.06em; }

/* question */
.test-q { width: 100%; max-width: 44rem; margin: 0 auto; }
.test-q-num {
  font-family: var(--serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 1rem;
  font-variant-numeric: lining-nums;
}
.test-q-title {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(1.7rem, 4.2vw, 2.9rem);
  line-height: 1.14;
  margin-bottom: 2.2rem;
}
.test-options { list-style: none; }
.test-option {
  border-top: 1px solid var(--line-light);
}
.test-option:last-child { border-bottom: 1px solid var(--line-light); }
.test-option button {
  appearance: none;
  display: flex;
  align-items: baseline;
  gap: 1.3rem;
  width: 100%;
  background: none;
  border: 0;
  color: var(--ivory);
  font-family: var(--grotesk);
  font-weight: 340;
  font-size: clamp(0.98rem, 1.8vw, 1.125rem);
  line-height: 1.5;
  text-align: left;
  padding: 1.05em 0.4em;
  cursor: pointer;
  transition: color var(--dur-med) var(--ease-lux), padding-left var(--dur-med) var(--ease-lux), background var(--dur-med) var(--ease-lux);
}
.test-option .opt-letter {
  font-family: var(--serif);
  font-weight: 520;
  font-size: 0.9em;
  color: var(--gold);
  min-width: 1.4em;
  flex: none;
}
.test-option button:hover,
.test-option button:focus-visible,
.test-option button[aria-checked="true"] {
  color: var(--champagne);
  padding-left: 1.1em;
  background: rgba(243, 238, 229, 0.035);
}
.test-option button:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.test-option button.selected { color: var(--gold); }

/* result */
.test-result {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.result-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.result-name {
  font-family: var(--serif);
  font-weight: 660;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 0.98;
  margin-bottom: 1.6rem;
}
.result-name .amp { font-style: italic; font-weight: 480; color: var(--champagne); font-size: 0.55em; display: block; margin: 0.35em 0; }
.result-desc { opacity: 0.9; max-width: 34rem; }
.result-desc + .result-desc { margin-top: 0.9em; }
.result-dual-note {
  font-family: var(--serif);
  font-style: italic;
  color: var(--champagne);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.result-handoff {
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-light);
  max-width: 34rem;
}
.result-handoff-title {
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.35rem;
  margin-bottom: 0.8rem;
}
.result-handoff p { font-size: 0.98rem; opacity: 0.85; }
.result-price { margin-top: 0.9rem; font-family: var(--serif); font-size: 1.1rem; color: var(--champagne); }
.result-ctas {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.result-ctas .cta-gold { text-decoration: none; display: inline-block; }
.result-wa {
  margin-top: 2rem;
}
.result-wa p { font-size: 0.98rem; opacity: 0.85; margin-bottom: 0.7rem; }
.result-tertiary {
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
}
.result-tertiary button, .result-tertiary a {
  position: relative;
  appearance: none;
  background: none;
  border: 0;
  color: var(--ivory);
  opacity: 0.62;
  font-family: var(--grotesk);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line-light);
  padding-bottom: 0.3em;
  cursor: pointer;
  transition: opacity var(--dur-med) var(--ease-lux);
}
.result-tertiary button::after, .result-tertiary a::after { content: ""; position: absolute; inset: -0.8rem -0.3rem 0; }
.result-tertiary button:hover, .result-tertiary a:hover { opacity: 1; }

.result-media { position: relative; }
.result-media picture, .result-media img { width: 100%; height: auto; }
.result-media .result-img-caption {
  margin-top: 0.8rem;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* curtain reveal for the result */
.test-curtain {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.test-curtain.run {
  animation: curtain 1.5s var(--ease-lux) forwards;
}
@keyframes curtain {
  0%   { transform: scaleY(0); transform-origin: bottom; }
  45%  { transform: scaleY(1); transform-origin: bottom; }
  55%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}

/* ---------- responsive ---------- */

@media (max-width: 899px) {
  .sobre { grid-template-columns: 1fr; }
  .guia { grid-template-columns: 1fr; }
  .guia-media { max-height: 62vh; }
  .test-result { grid-template-columns: 1fr; gap: 2rem; }
  .result-media { max-width: 21rem; }
  .test-back { bottom: auto; top: 5.2rem; }
  .hero { height: 178vh; height: 178svh; }
  .hero-still, .hero-still img, .hero-video { object-position: 52% 22%; }
  .hero-blur { height: 34%; }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(3rem, 16vw, 4rem); }
  .foot-links { gap: 1rem 1.5rem; }
  .result-media { max-width: 17rem; }
  .test-brand { display: none; }
  .test-progress { font-size: 1rem; }
  /* keep the brand and CTA comfortably apart on narrow phones */
  .brand { font-size: 0.92rem; letter-spacing: 0.16em; }
  .head-cta { letter-spacing: 0.14em; }
}

@media (max-width: 360px) {
  .brand { font-size: 0.82rem; letter-spacing: 0.1em; }
  .head-cta { font-size: 0.7rem; letter-spacing: 0.1em; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: smooth; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-title .line > span { transform: none; animation: none; }
  .hero-sub, .hero-cta-row { opacity: 1; animation: none; }
  .hero-video { display: none; }
  .hero-media.kenburns .hero-still img { animation: none; }
  .hero-scroll span { animation: none; transform: translateY(60%); }
  .test-layer { transition: none; }
  .test-screen { animation: none; }
  .test-screen.leaving { animation: none; opacity: 0; }
  .test-curtain { display: none; }
  .cta-gold, .test-option button { transition: none; }
}