/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Backgrounds */
  --bg:        #0A0A0A;
  --bg-2:      #111009;
  --bg-3:      #181512;
  --bg-4:      #1E1A16;

  /* Text */
  --cream:     #EDE4D4;
  --cream-2:   #C8BBA8;
  --cream-3:   #7A7060;

  /* Gold / bronze accents */
  --gold:      #C9A227;
  --gold-2:    #B8935A;
  --gold-3:    #8A6D3B;
  --gold-dim:  rgba(201, 162, 39, 0.18);
  --gold-dim2: rgba(201, 162, 39, 0.08);

  /* Glass */
  --glass-bg:     rgba(255, 255, 255, 0.03);
  --glass-bg-2:   rgba(255, 255, 255, 0.055);
  --glass-border: rgba(201, 162, 39, 0.18);
  --glass-border-hover: rgba(201, 162, 39, 0.35);

  /* Typography */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Easings */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Layout */
  --gutter:   clamp(1.5rem, 5vw, 4rem);
  --nav-h:    70px;
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

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

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--cream-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.1; font-family: var(--serif); }
ul { list-style: none; padding: 0; }
em { font-style: normal; }

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =============================================================
   3. UTILITIES
   ============================================================= */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  padding: .6rem 1rem;
  background: var(--cream);
  color: var(--bg);
  z-index: 9999;
  border-radius: 4px;
  font-weight: 500;
  font-size: .875rem;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  max-width: 780px;
}

.text-center { text-align: center; }

/* =============================================================
   4. GRAIN OVERLAY
   ============================================================= */
.grain {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================
   5. KICKER — reused across all sections
   ============================================================= */
.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

/* =============================================================
   6. SECTION TITLE
   ============================================================= */
.section-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 500;
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}

.section-title em {
  color: var(--gold-2);
}

.title-accent {
  color: var(--gold-2);
}

/* =============================================================
   7. NAV
   ============================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-h);
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: var(--gold-dim);
}

.nav-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.01em;
  transition: color .25s;
}
.nav-logo:hover { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-link {
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--cream-2);
  transition: color .25s;
}
.nav-link:hover { color: var(--cream); }

.btn-nav {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: .5rem 1.25rem;
  border-radius: 2px;
  transition: background .25s, border-color .25s, color .25s;
  white-space: nowrap;
}
.btn-nav:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--cream);
}

/* Mobile nav */
@media (max-width: 719px) {
  .nav-links { display: none; }
}

/* =============================================================
   8. HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  display: flex;
  align-items: center;
  overflow: hidden;
}

@keyframes geoSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

.geo-svg {
  width: 100%;
  height: 100%;
}

.geo-svg-sm {
  width: 100%;
  height: 100%;
}

/* Radial vignette at edges */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, transparent 30%, rgba(10, 10, 10, 0.5) 100%),
    linear-gradient(to right, rgba(10,10,10,0.6) 0%, transparent 40%, transparent 60%, rgba(10,10,10,0.8) 100%),
    linear-gradient(to bottom, rgba(10,10,10,0.5) 0%, transparent 15%, transparent 85%, rgba(10,10,10,0.7) 100%);
}

.hero-layout {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
}

@media (min-width: 960px) {
  .hero-layout {
    grid-template-columns: 1fr 42%;
    gap: 4rem;
  }
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 6rem 3rem;
}

@media (min-width: 960px) {
  .hero-text {
    padding-block: 2rem;
  }
}

.hero-kicker {
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
  max-width: 16ch;
}

.hero-sub {
  font-size: clamp(.875rem, 1.5vw, 1rem);
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.75;
  max-width: 46ch;
  margin-bottom: 2.75rem;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(201,162,39,0.4);
  padding-bottom: .25rem;
  transition: color .25s, border-color .25s, gap .3s var(--ease-out);
}
.hero-cta:hover {
  color: var(--cream);
  border-color: rgba(201,162,39,0.7);
  gap: 1.25rem;
}

.hero-cta-arrow {
  display: inline-block;
  font-size: 1rem;
  transition: transform .3s var(--ease-out);
}
.hero-cta:hover .hero-cta-arrow { transform: translateY(4px); }

/* Hero entrance — staggered reveal, driven by the same .reveal/IntersectionObserver
   pattern used across the site (no JS rAF timing to get stuck mid-animation). */
.hero-kicker.reveal,
.hero-title.reveal,
.hero-sub.reveal,
.hero-cta.reveal {
  transition-duration: 0.8s;
}
.hero-kicker.reveal { transition-delay: 0.15s; }
.hero-title.reveal { transition-delay: 0.29s; }
.hero-sub.reveal { transition-delay: 0.43s; }
.hero-cta.reveal { transition-delay: 0.57s; }

/* Photo just fades in, no slide */
.hero-photo.reveal {
  transform: none;
  transition: opacity 1s var(--ease-out) 0.1s;
}
.hero-photo.reveal.is-visible {
  transform: none;
}

/* Hero photo */
.hero-photo {
  position: relative;
  display: none;
}

@media (min-width: 960px) {
  .hero-photo {
    display: block;
    height: 80vh;
    max-height: 760px;
    border-radius: 2px;
    overflow: hidden;
  }
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: brightness(0.88) contrast(1.05);
}

/* Gold tint overlay on Daniel's photo */
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(180, 130, 40, 0.07);
  mix-blend-mode: color;
  pointer-events: none;
}

/* Vignette fade on all edges — photo dissolves into black background */
.hero-photo-frame {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, transparent 22%, transparent 52%, rgba(10,10,10,0.95) 100%),
    linear-gradient(to right, rgba(10,10,10,0.7) 0%, transparent 28%, transparent 68%, rgba(10,10,10,0.85) 100%);
  pointer-events: none;
}

/* Mobile hero photo — background treatment */
.hero-bg-mobile {
  display: none;
}

@media (max-width: 959px) {
  .hero {
    position: relative;
  }

  .hero-bg-mobile {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .hero-bg-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: brightness(0.75) contrast(1.05);
  }

  /* The asymmetric desktop vignette (built for the photo-on-the-right split)
     doesn't suit a full-bleed mobile background — replace it with the
     straightforward top-to-bottom fade below. */
  .hero-vignette {
    display: none;
  }

  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.7) 55%, rgba(10,10,10,0.9) 100%);
    z-index: 2;
    pointer-events: none;
  }
}

/* =============================================================
   9. SECTION BASE
   ============================================================= */
.section {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  overflow: hidden;
}

/* Section separator — hairline gold line */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(120px, 40%);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-2), transparent);
  opacity: 0.35;
}

/* =============================================================
   10. PROBLEMA SECTION
   ============================================================= */
.section-problema {
  background: var(--bg);
}

.lead-text {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.8;
  margin-bottom: 3rem;
}

.pain-list {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pain-list li {
  padding-left: 2rem;
  position: relative;
  font-size: clamp(.9375rem, 1.4vw, 1.0625rem);
  color: var(--cream-2);
  font-weight: 300;
  line-height: 1.65;
}

.pain-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.section-close {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--cream);
  font-weight: 400;
  line-height: 1.6;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 162, 39, 0.15);
}

/* =============================================================
   11. GLASS CARD
   ============================================================= */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  padding: 2rem 2rem 2.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color .35s var(--ease-out), background .35s;
}

@supports (backdrop-filter: blur(16px)) {
  .glass-card {
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
  }
}

.glass-card:hover {
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-2);
}

/* Subtle gold glow at top edge */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 5%, var(--gold-2) 50%, transparent 95%);
  opacity: 0.45;
}

/* =============================================================
   12. SERVICIO SECTION
   ============================================================= */
.section-servicio {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* Section geo accent */
.section-geo-accent {
  position: absolute;
  right: -8%;
  bottom: -10%;
  width: min(500px, 60vw);
  height: min(500px, 60vw);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  animation: geoSpin 100s linear infinite reverse;
}

.send-block {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  background: rgba(201,162,39,0.04);
}

.send-block .meta-label {
  flex-shrink: 0;
}

.send-items {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.send-item {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--cream);
}

.send-sep {
  color: var(--gold);
  font-size: 1.25rem;
}

.block-label {
  margin-bottom: 1.75rem;
}

/* Analysis grid — 3 cards */
.analysis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  .analysis-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.analysis-card {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.analysis-number {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--gold-3);
  line-height: 1;
  margin-bottom: .25rem;
  opacity: 0.7;
}

.analysis-title {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.analysis-card p {
  font-size: .9375rem;
  color: var(--cream-2);
  font-weight: 300;
  line-height: 1.75;
}

/* What you receive */
.receive-block {
  margin-bottom: 2.5rem;
}

.receive-block .meta-label {
  display: block;
  margin-bottom: 1.25rem;
}

.receive-list {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.receive-list li {
  padding-left: 1.75rem;
  position: relative;
  font-size: .9375rem;
  color: var(--cream-2);
  font-weight: 300;
  line-height: 1.65;
}

.receive-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: .5rem;
  top: .55em;
}

/* What this is NOT */
.not-block {
  margin-bottom: 4rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
}

.not-block .meta-label {
  display: block;
  margin-bottom: 1rem;
}

.not-items {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

.not-items span {
  font-size: .8125rem;
  color: var(--cream-3);
  font-weight: 300;
  letter-spacing: 0.03em;
}

/* Video intro — título + texto que anteceden al vídeo demo */
.video-intro {
  margin-bottom: 2rem;
  max-width: 640px;
}

.video-intro .meta-label {
  margin-bottom: .875rem;
}

.video-intro-title {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.video-intro p {
  font-size: .9375rem;
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.75;
}

/* Deck slides — native slides rebuilding the original deck's own
   look (dark cover, full-bleed within the container) instead of an
   iframe that shrunk the same content past legibility on mobile.
   Content slides (bloques) will switch to the report's light
   "document page" style once slide 1's format is approved. */
.deck-slides {
  position: relative;
}

.deck-slide {
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

/* Fixed size across all 7 slides on desktop, matching the original
   deck's proportions, so they read as one consistent set instead of
   each growing to its own content height. Mobile drops the fixed
   ratio — same fix that solved the original iframe's legibility bug —
   so dense slides can simply grow tall and stack instead of cramming
   into a frame too short for them. */
@media (min-width: 720px) {
  .deck-slide {
    aspect-ratio: 16 / 9;
    padding: 3rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }

}

.deck-slide-eyebrow {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 1rem;
}

.deck-slide-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 3rem;
}

.deck-slide-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 719px) {
  .deck-slide-meta-grid {
    grid-template-columns: 1fr;
  }
}

.deck-slide-meta-item {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.deck-slide-meta-label {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--cream-3);
}

.deck-slide-meta-value {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--cream);
}

.deck-slide-meta-grid-2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 719px) {
  .deck-slide-meta-grid-2 {
    grid-template-columns: 1fr;
  }
}

.deck-slide-meta-text {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.65;
}

/* Only one slide visible at a time — plain show/hide, no transform
   math, so each slide's own height (esp. on mobile) never fights the
   others for layout space. */
.deck-slide {
  display: none;
}

.deck-slide.is-active {
  display: block;
}

@media (min-width: 720px) {
  .deck-slide.is-active {
    display: flex;
  }
}

/* Light "document page" variant — the report's own palette, for the
   slides that show real report content (blocks, criteria). */
.deck-slide-light {
  background: #F7F5F0;
  border-color: rgba(17,17,16,0.1);
}

.deck-slide-eyebrow-light {
  color: #8A6D3B;
  margin-bottom: .5rem;
}

.deck-slide-title-light {
  color: #111110;
}

.deck-slide-light .deck-slide-title {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin-bottom: .875rem;
}

.deck-slide-light .deck-slide-lead {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 400;
  color: #2C2C2A;
  line-height: 1.55;
  margin-bottom: 1rem;
  max-width: 66ch;
}

@media (min-width: 720px) {
  .deck-slide-light {
    padding: 1.75rem 4rem;
  }
}

/* Slide 2 — 3-block overview cards */
.deck-block-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 719px) {
  .deck-block-grid {
    grid-template-columns: 1fr;
  }
}

.deck-block-card {
  background: #FFFFFF;
  border: 1px solid rgba(17,17,16,0.08);
  border-top: 3px solid;
  border-radius: 3px;
  padding: .875rem 1rem;
}

.deck-block-card-1 { border-top-color: #1D4E6E; }
.deck-block-card-2 { border-top-color: #1D7A5F; }
.deck-block-card-3 { border-top-color: #B8620A; }

.deck-block-num {
  display: block;
  font-family: var(--serif);
  font-size: 1.375rem;
  color: rgba(17,17,16,0.28);
  margin-bottom: .625rem;
}

.deck-block-card h5 {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #111110;
  margin-bottom: .375rem;
}

.deck-block-peso {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #6B6B68;
}

/* Slide header — block numeral + title + peso tag, shared by the
   three block-detail slides (I / II / III) */
.deck-slide-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #111110;
}

.deck-slide-block-title {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 600;
  color: #111110;
}

.deck-slide-block-num {
  color: rgba(17,17,16,0.3);
  margin-right: .5rem;
}

.deck-slide-peso-tag {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #6B6B68;
}

/* Slide 3 — criteria columns */
.deck-criteria-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 719px) {
  .deck-criteria-columns {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.deck-criteria-col h6 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: #1D4E6E;
  padding-bottom: .5rem;
  margin-bottom: .625rem;
  border-bottom: 1px solid rgba(17,17,16,0.1);
}

.deck-criteria-col li {
  font-family: var(--sans);
  font-size: .875rem;
  color: #2C2C2A;
  line-height: 1.9;
}

.deck-criteria-col li::before {
  content: '· ';
  color: #8A6D3B;
}

/* Bottom bar shared by block-detail slides */
.deck-slide-footbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  background: #111110;
  border-radius: 3px;
}

.deck-slide-footbar span:first-child {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65);
}

.deck-slide-footbar-score {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
}

.deck-slide-footbar-score em {
  font-style: normal;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
}

/* Slide 4 — chapter example card */
.deck-example-card {
  background: #FFFFFF;
  border: 1px solid rgba(17,17,16,0.08);
  border-radius: 3px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}

.deck-example-tag {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #6B6B68;
  margin-bottom: 1rem;
}

.deck-example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1.5rem;
  align-items: center;
}

@media (max-width: 719px) {
  .deck-example-grid {
    grid-template-columns: 1fr;
  }
}

.deck-example-grid h6 {
  font-family: var(--serif);
  font-size: .875rem;
  font-weight: 600;
  color: #1D4E6E;
  margin-bottom: .375rem;
}

.deck-example-grid p {
  font-family: var(--sans);
  font-size: .875rem;
  color: #2C2C2A;
  line-height: 1.6;
}

.deck-example-score {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  color: #111110;
  white-space: nowrap;
}

.deck-example-score em {
  font-style: normal;
  font-size: 1rem;
  font-weight: 400;
  color: #6B6B68;
}

.deck-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.5rem;
}

.deck-inline-list li {
  font-family: var(--sans);
  font-size: .8125rem;
  color: #2C2C2A;
}

.deck-inline-list li::before {
  content: '◆ ';
  color: #8A6D3B;
  font-size: .625rem;
}

/* Slide 5 — sequence cards */
.deck-sequence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 719px) {
  .deck-sequence-grid {
    grid-template-columns: 1fr;
  }
}

.deck-sequence-card {
  background: #FFFFFF;
  border: 1px solid rgba(17,17,16,0.08);
  border-left: 3px solid #1D7A5F;
  border-radius: 3px;
  padding: 1.25rem;
}

.deck-sequence-card-move {
  border-left-color: #B8620A;
}

.deck-sequence-tag {
  display: block;
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #6B6B68;
  margin-bottom: .625rem;
}

.deck-sequence-card h6 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: #111110;
  margin-bottom: .5rem;
}

.deck-sequence-card p {
  font-family: var(--sans);
  font-size: .8125rem;
  color: #2C2C2A;
  line-height: 1.6;
}

/* Slide 6 — 8-criteria mini grid */
.deck-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(17,17,16,0.08);
  border: 1px solid rgba(17,17,16,0.08);
}

@media (max-width: 719px) {
  .deck-mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.deck-mini-card {
  background: #FFFFFF;
  padding: 1.25rem;
}

.deck-mini-card h6 {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  color: #111110;
  margin-bottom: .375rem;
}

.deck-mini-card p {
  font-family: var(--sans);
  font-size: .75rem;
  color: #6B6B68;
  line-height: 1.5;
}

/* Slide 7 — weighted score hero (dark) */
.deck-score-hero {
  padding: 2rem 0;
  margin-bottom: 1.5rem;
}

.deck-score-hero-num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.deck-score-hero-num em {
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--cream-3);
}

.deck-score-hero-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  margin-bottom: 1rem;
}

.deck-score-hero-1 { background: var(--gold); }
.deck-score-hero-2 { background: var(--gold-2); }
.deck-score-hero-3 { background: var(--gold-3); }

.deck-score-hero-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

.deck-score-hero-legend span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: var(--cream-3);
}

.deck-score-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.deck-slide-bands {
  font-size: .875rem;
  color: var(--cream-3);
  font-weight: 300;
  line-height: 1.8;
}

.deck-slide-bands strong {
  color: var(--gold);
  font-weight: 500;
}

/* Nav — arrows + dots below the slide frame */
.deck-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.deck-nav-arrow {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.125rem;
  transition: border-color .25s, background .25s, color .25s;
}

.deck-nav-arrow:hover {
  border-color: var(--gold);
  background: var(--gold-dim2);
  color: var(--cream);
}

.deck-nav-dots {
  display: flex;
  gap: .5rem;
}

.deck-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glass-border);
  transition: background .25s, transform .25s;
}

.deck-nav-dot.is-active {
  background: var(--gold);
  transform: scale(1.3);
}

/* Meta labels and values — reused pattern */
.meta-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

/* =============================================================
   13. PRICE CARDS
   ============================================================= */
.price-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  .price-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.25rem 2.25rem 2.5rem;
}

.price-card-alt {
  border-color: rgba(201, 162, 39, 0.32);
  background: rgba(201, 162, 39, 0.04);
}

.price-card-alt::before {
  opacity: 0.65;
}

.price-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  padding: .3rem .75rem;
  border-radius: 2px;
  align-self: flex-start;
  margin-bottom: -.25rem;
}

.price-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gold-dim);
}

.price-name {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.3;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
}

.price-amount {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  white-space: nowrap;
}

.price-currency {
  font-size: 1.25rem;
  font-weight: 400;
  margin-left: .1em;
}

.price-desc {
  font-size: .9375rem;
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.7;
  flex: 1;
}

/* Primary CTA button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .875rem 1.75rem;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 2px;
  transition: background .3s var(--ease-out), color .3s, border-color .3s, transform .2s var(--ease-out);
  text-align: center;
  line-height: 1.4;
}

.btn-primary:hover {
  background: var(--gold);
  color: var(--bg);
  transform: translateY(-1px);
}

.btn-primary-alt {
  background: linear-gradient(135deg, rgba(201,162,39,0.15), rgba(184,147,90,0.1));
  border-color: var(--gold);
}

.btn-primary-alt:hover {
  background: var(--gold);
  color: var(--bg);
}

/* =============================================================
   14. FLUJO SECTION
   ============================================================= */
.section-flujo {
  background: var(--bg-2);
}

.flujo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3.5rem;
  position: relative;
}

@media (min-width: 720px) {
  .flujo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

.flujo-step {
  position: relative;
  padding: 1.75rem 1.5rem 1.75rem;
  border-left: 1px solid var(--gold-dim);
}

@media (min-width: 720px) {
  .flujo-step:nth-child(3),
  .flujo-step:nth-child(4) {
    padding-top: 2.5rem;
    border-top: 1px solid var(--gold-dim);
  }
}

.step-num {
  font-family: var(--serif);
  font-size: 3.25rem;
  font-weight: 400;
  color: var(--gold-3);
  line-height: 1;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.step-title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: .75rem;
  line-height: 1.35;
}

.step-title em {
  color: var(--cream-2);
  font-size: .9375rem;
}

.flujo-step p {
  font-size: .9rem;
  color: var(--cream-2);
  font-weight: 300;
  line-height: 1.7;
}

/* Bonus panel */
.flujo-bonus {
  position: relative;
  padding: 2.5rem 3rem;
  overflow: visible;
}

.flujo-bonus-inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.flujo-bonus-inner .kicker {
  margin-bottom: 1rem;
}

.flujo-bonus-title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.flujo-bonus p:last-child {
  font-size: .9375rem;
  color: var(--cream-2);
  font-weight: 300;
  line-height: 1.75;
}

.flujo-bonus-geo {
  position: absolute;
  right: -2rem;
  top: 50%;
  transform: translateY(-50%);
  width: min(200px, 30vw);
  height: min(200px, 30vw);
  pointer-events: none;
  opacity: 0.5;
  animation: geoSpin 60s linear infinite;
}

.flujo-bonus-geo svg {
  width: 100%;
  height: 100%;
}

/* =============================================================
   15. TRANSFORMACIÓN SECTION
   ============================================================= */
.section-transform {
  background: var(--bg-3);
  position: relative;
}

.transform-geo-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 90vw);
  height: min(600px, 90vw);
  pointer-events: none;
  z-index: 0;
  animation: geoSpin 120s linear infinite reverse;
}

.section-transform .container {
  position: relative;
  z-index: 1;
}

.transform-text {
  font-size: clamp(1rem, 1.7vw, 1.1875rem);
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.85;
  margin-bottom: 1.75rem;
}

.transform-close {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 500;
  color: var(--gold-2);
  line-height: 1.5;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(201,162,39,0.15);
  max-width: 26ch;
  margin-inline: auto;
}

/* =============================================================
   15b. SOBRE MÍ SECTION
   ============================================================= */
.section-about {
  background: var(--bg-3);
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 960px) {
  .about-layout {
    grid-template-columns: 42% 1fr;
    gap: 4rem;
  }
}

/* Photo — same treatment as author photos, but borderless and fused into the background */
/* Aspect ratio matches the source photo (667x1024) to avoid excess cropping */
.about-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
}

@media (min-width: 960px) {
  .about-photo {
    max-height: 620px;
  }
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Blurred edges — dissolves the photo into the section background */
.about-photo-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg-3) 0%, transparent 18%, transparent 82%, var(--bg-3) 100%),
    linear-gradient(to right, var(--bg-3) 0%, transparent 22%, transparent 65%, var(--bg-3) 100%);
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-text {
  font-size: .9375rem;
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.8;
}

/* =============================================================
   16. CREDIBILIDAD SECTION
   ============================================================= */
.section-cred {
  background: var(--bg);
}

.authors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

@media (min-width: 720px) {
  .authors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .authors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Author card layout — liquid glass, same treatment as the CTA price cards */
.author-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  gap: 0;
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(40px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  border-radius: 16px !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset,
    0 20px 60px rgba(0, 0, 0, 0.25);
}

.author-card::before {
  display: none !important;
}

/* Photo wrap */
.author-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  flex-shrink: 0;
}

.author-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%) contrast(1.15) brightness(0.85);
  transition: filter .5s var(--ease-out), transform .5s var(--ease-out);
}

.author-card:hover .author-photo-wrap img {
  filter: grayscale(90%) contrast(1.1) brightness(0.9);
  transform: scale(1.04);
}

/* Ana's photo has more headroom in the source — shift the crop down
   so it isn't mostly empty shelf, and less of her is cut off below. */
.author-photo-wrap img[src="foto-ana-mateos.webp"] {
  object-position: center 45%;
}

/* Gold tint overlay */
.author-photo-gold {
  position: absolute;
  inset: 0;
  background: rgba(180, 130, 40, 0.18);
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity .5s;
}

/* Radial vignette — dissolves disparate backgrounds */
.author-photo-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(10, 10, 10, 0.5) 75%,
    rgba(10, 10, 10, 0.85) 100%
  );
  pointer-events: none;
}

/* Author body */
.author-body {
  padding: 1.5rem 1.75rem 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.author-name {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Meta grid — kicker+value pairs, one below the other so it breathes */
.author-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.meta-item-full {
  flex-basis: 100%;
}

.meta-value {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 400;
  color: var(--cream-2);
}

/* "Ver historia" link — cue that more info opens in the modal */
.author-story-link {
  align-self: flex-start;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--gold);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: .875rem;
  margin-top: auto;
  width: 100%;
  text-align: left;
  transition: color .25s, gap .25s var(--ease-out);
}

.author-story-link:hover {
  color: var(--cream);
}

/* =============================================================
   16b. FAQ SECTION
   ============================================================= */
.section-faq {
  background: var(--bg-2);
}

.faq-intro {
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.8;
  max-width: 56ch;
  margin-inline: auto;
}

.faq-list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  padding: 0;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding: 1.5rem 1.75rem;
}

.faq-question span:first-child {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.faq-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
  transition: transform .35s var(--ease-out), border-color .25s, background .25s;
}

.faq-question:hover .faq-icon {
  border-color: var(--gold);
  background: var(--gold-dim2);
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  padding: 0 1.75rem;
}

.faq-item.is-open .faq-answer-inner {
  padding: 0 1.75rem 1.75rem;
}

.faq-answer-inner p {
  font-size: .9375rem;
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.faq-answer-inner p:last-child {
  margin-bottom: 0;
}

.faq-answer-inner strong {
  color: var(--cream);
  font-weight: 500;
}

/* =============================================================
   17. CTA FINAL SECTION
   ============================================================= */
.section-cta {
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Daniel photo as large accent background */
.cta-photo-bg {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52%;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 719px) {
  .cta-photo-bg {
    display: none;
  }
}

.cta-photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 15%;
  filter: brightness(0.6) grayscale(10%);
}

.cta-photo-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #0A0A0A 0%, rgba(10,10,10,0.92) 20%, rgba(10,10,10,0.5) 50%, transparent 80%),
    linear-gradient(to bottom, #0A0A0A 0%, transparent 8%, transparent 92%, #0A0A0A 100%);
}

.cta-container {
  position: relative;
  z-index: 1;
}

.cta-content {
  max-width: 780px;
}

.cta-intro {
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.8;
  margin-bottom: 3rem;
  max-width: 52ch;
}

/* padding override handled in the main block below */

.cta-note {
  font-size: .875rem;
  font-weight: 300;
  color: var(--cream-3);
  margin-top: 2rem;
  line-height: 1.7;
  max-width: 56ch;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* =============================================================
   18. FOOTER
   ============================================================= */
.footer {
  background: var(--bg);
  border-top: 1px solid rgba(201,162,39,0.12);
  padding-block: 3rem 3.5rem;
}

.footer-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}

.footer-brand {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.01em;
}

.footer-tagline {
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}

.footer-email {
  font-size: .8125rem;
  font-weight: 300;
  color: var(--cream-3);
  letter-spacing: 0.02em;
  margin-bottom: .5rem;
  transition: color .25s;
}

.footer-email:hover,
.footer-email:focus-visible {
  color: var(--gold);
}

.footer-copy {
  font-size: .8125rem;
  font-weight: 300;
  color: var(--cream-3);
  letter-spacing: 0.02em;
}

/* =============================================================
   19. REVEAL ANIMATIONS
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Defensive: reveal with data-split must never stay invisible */
.reveal[data-split] {
  opacity: 1;
  transform: none;
}

/* Stagger delay for grid children */
.analysis-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.analysis-grid .reveal:nth-child(3) { transition-delay: 0.2s; }

.authors-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.authors-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.authors-grid .reveal:nth-child(4) { transition-delay: 0.08s; }
.authors-grid .reveal:nth-child(5) { transition-delay: 0.16s; }
.authors-grid .reveal:nth-child(6) { transition-delay: 0.24s; }

.flujo-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.flujo-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.flujo-grid .reveal:nth-child(4) { transition-delay: 0.3s; }

.price-cards .reveal:nth-child(2) { transition-delay: 0.1s; }

/* =============================================================
   20. RESPONSIVE OVERRIDES
   ============================================================= */

/* Section title sizes on mobile */
@media (max-width: 539px) {
  .hero-title { font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .section-title { font-size: clamp(1.75rem, 7vw, 2.25rem); }

  .pain-list li { font-size: .9rem; }

  .glass-card { padding: 1.5rem; }

  .author-body { padding: 1.25rem 1.25rem 1.5rem; }

  .price-card { padding: 1.75rem 1.5rem 2rem; }

  .flujo-bonus { padding: 1.75rem 1.5rem; }

  .flujo-bonus-geo { display: none; }

  .not-items { flex-direction: column; gap: .375rem; }
}

@media (min-width: 540px) and (max-width: 719px) {
  .authors-grid { grid-template-columns: repeat(2, 1fr); }
  .price-cards { grid-template-columns: 1fr; }
}

/* =============================================================
   21. PROBLEMA — image absolutely positioned behind text
   ============================================================= */
.section-problema {
  position: relative;
  overflow: hidden;
}

/* Image sits behind text, left-aligned, contained size */
.problema-bg {
  position: absolute;
  left: clamp(1rem, 8%, 6rem);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(420px, 60%, 760px);
  z-index: 0;
  pointer-events: none;
}

.problema-bg img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.5;
}

/* Fade all edges so image dissolves into background */
.problema-bg-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.2) 0%, transparent 40%, var(--bg) 88%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 15%, transparent 85%, var(--bg) 100%),
    linear-gradient(to left, rgba(10,10,10,0.1) 0%, transparent 30%);
}

/* Text floats above image */
.problema-content {
  position: relative;
  z-index: 1;
}

/* On desktop: mirror hero grid so text aligns with hero photo column */
@media (min-width: 960px) {
  .problema-content {
    display: grid;
    grid-template-columns: 1fr 58%;
    gap: 2rem;
  }

  .problema-text-inner {
    grid-column: 2;
  }
}

/* =============================================================
   22. DELIVERY INFO + FORM
   ============================================================= */
.delivery-info {
  margin-top: 2.5rem;
  padding: 2rem 2.25rem;
}

.delivery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .delivery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.delivery-grid .meta-item {
  gap: .5rem;
}

.delivery-grid .meta-value {
  font-size: .9375rem;
  color: var(--cream-2);
  line-height: 1.65;
}

/* CTA — form + floating cards wrapper */
.cta-form-float {
  margin-top: 2rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .cta-form-float {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .price-cards-cta {
    grid-column: 1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    transform: none;
    align-self: auto;
    max-width: 680px;
  }
}

/* Apple-style liquid glass — reset ALL inherited styles */
/* True liquid glass — reset ALL inherited backgrounds/borders */
.price-cards-cta .price-card,
.price-cards-cta .price-card-alt {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(40px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-top-color: rgba(255, 255, 255, 0.4) !important;
  border-radius: 20px !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset,
    0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 1.5rem 1.25rem 1.75rem;
}

/* Remove ALL tinted pseudo-elements from CTA cards */
.price-cards-cta .price-card::before,
.price-cards-cta .price-card-alt::before {
  display: none !important;
}

/* Form card */
.submission-form {
  margin-top: 0;
  padding: 1.75rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.submission-form > .kicker {
  margin-bottom: .25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.form-group-full {
  grid-column: 1 / -1;
}

.form-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.form-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,162,39,0.2);
  border-radius: 2px;
  color: var(--cream);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 300;
  padding: .75rem 1rem;
  transition: border-color .25s, background .25s;
  outline: none;
  -webkit-appearance: none;
}

.form-input::placeholder {
  color: var(--cream-3);
  font-weight: 300;
}

.form-input:focus {
  border-color: rgba(201,162,39,0.55);
  background: rgba(255,255,255,0.06);
}

/* File upload */
.form-file-wrap {
  position: relative;
}

.form-file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  width: 100%;
}

.form-file-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(201,162,39,0.3);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: border-color .25s, background .25s;
}

.form-file-wrap:hover .form-file-label,
.form-file:focus + .form-file-label {
  border-color: rgba(201,162,39,0.6);
  background: rgba(255,255,255,0.06);
}

/* File selected — solid border + confirmation tone */
.form-file-wrap.has-file .form-file-label {
  border-style: solid;
  border-color: var(--gold);
  background: rgba(201,162,39,0.08);
}

.form-file-icon {
  font-size: 1.25rem;
  color: var(--gold);
  line-height: 1;
}

.form-file-text {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 400;
  color: var(--cream-2);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-file-wrap.has-file .form-file-text {
  color: var(--cream);
  font-weight: 500;
}

/* Inline form note */
.form-inline-note {
  margin-top: .625rem;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 300;
  color: var(--cream-3);
  line-height: 1.65;
}

.form-inline-note strong {
  color: var(--cream-2);
  font-weight: 500;
}

/* Submit button */
.btn-submit {
  align-self: flex-start;
  padding: .9375rem 2rem;
  margin-top: .25rem;
  transition: opacity .25s, background .3s var(--ease-out), color .3s, border-color .3s, transform .2s var(--ease-out);
}

.btn-submit[disabled] {
  opacity: .6;
  cursor: default;
  pointer-events: none;
}

/* Form status message — success/error feedback after submit */
.form-status {
  display: none;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.6;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-success {
  color: var(--gold);
}

.form-status.is-error {
  color: #d98c8c;
}

/* =============================================================
   23. REDUCED MOTION — only gate intrusive animations
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .section-geo-accent,
  .transform-geo-bg,
  .flujo-bonus-geo {
    animation: none;
  }
}

/* =============================================================
   24. AUTHOR STORY MODAL — ficha ampliada del autor
   ============================================================= */
.author-modal-panel {
  display: none;
}

.author-modal-panel.is-active {
  display: grid;
}

.story-slide {
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 960px) {
  .story-slide {
    grid-template-columns: 42% 1fr;
    gap: 4rem;
    align-items: center;
  }
}

/* Photo column — hero-like treatment, merged into background */
.story-photo {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 5;
}

@media (min-width: 960px) {
  .story-photo {
    aspect-ratio: auto;
    height: 62vh;
    max-height: 640px;
  }
}

.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(85%) contrast(1.12) brightness(0.82);
}

.story-photo-gold {
  position: absolute;
  inset: 0;
  background: rgba(180, 130, 40, 0.14);
  mix-blend-mode: color;
  pointer-events: none;
}

.story-photo-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(17,16,9,0.4) 0%, transparent 20%, transparent 70%, var(--bg-2) 100%),
    linear-gradient(to right, rgba(17,16,9,0.5) 0%, transparent 25%, transparent 85%, rgba(17,16,9,0.35) 100%);
}

/* Body column */
.story-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

/* Desktop: real grid so the cover reserves its own space next to the
   header (meta + name) and can never overlap the paragraphs below,
   regardless of how tall a given cover image is. */
@media (min-width: 960px) {
  .story-body {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "header cover"
      "text   text";
    column-gap: 3rem;
    row-gap: 1.5rem;
  }
}

/* Header — groups the meta grid + name so they share one grid row with the cover */
.story-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 960px) {
  .story-header {
    grid-area: header;
  }
}

.story-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  order: 2;
}

@media (min-width: 960px) {
  .story-meta-grid { order: 0; }
}

.story-name {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.01em;
  order: 1;
}

@media (min-width: 960px) {
  .story-name { order: 0; }
}

.story-text {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

@media (min-width: 960px) {
  .story-text { grid-area: text; }
}

.story-text p {
  font-size: .9375rem;
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.8;
}

.story-text em {
  color: var(--gold-2);
  font-style: normal;
}

.story-turn {
  font-family: var(--serif);
  color: var(--gold-2) !important;
  font-size: 1.0625rem !important;
  font-style: normal;
}

.story-cover {
  align-self: flex-start;
  width: 110px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  border: 1px solid var(--glass-border);
}

@media (min-width: 960px) {
  .story-cover {
    grid-area: cover;
    justify-self: end;
    width: 150px;
    border: none;
    box-shadow: none;
    border-radius: 2px;
  }
}

/* Two covers side by side (e.g. an author with more than one published work) */
.story-cover-group {
  align-self: flex-start;
  display: flex;
  gap: .75rem;
}

.story-cover-item {
  width: 110px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  border: 1px solid var(--glass-border);
}

.story-cover-item img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 960px) {
  .story-cover-group {
    grid-area: cover;
    justify-self: end;
    gap: .625rem;
  }

  .story-cover-item {
    width: 110px;
    border: none;
    box-shadow: none;
  }
}

.story-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* Photo trigger — cue that the author photo opens a modal */
.author-photo-clickable {
  cursor: pointer;
}

/* Modal shell */
.author-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease-out);
}

.author-modal[hidden] {
  display: none;
}

.author-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.author-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 4, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.author-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 3rem 2.5rem;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}

.author-modal.is-open .author-modal-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .author-modal,
  .author-modal-dialog {
    transition: none;
  }
}

@media (max-width: 719px) {
  .author-modal-dialog {
    padding: 4.5rem 1.25rem 2rem;
    max-height: 92vh;
  }
}

.author-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1rem;
  transition: border-color .25s, background .25s, color .25s;
}

.author-modal-close:hover {
  border-color: var(--gold);
  background: var(--gold-dim2);
  color: var(--cream);
}