/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --navy:        #10253E;
  --navy-2:      #16324f;
  --navy-3:      #0A1826;
  --navy-4:      #06101c;
  --green:       #2EA55C;
  --green-2:     #45C878;
  --green-dark:  #05773B;
  --paper:       #FCFCF9;
  --paper-2:     #F3F1E9;
  --cream:       #F2EFE6;
  --ink:         #10253E;
  --ink-mute:    #5D646F;
  --line:        rgba(16,37,62,0.12);
  --line-dark:   rgba(242,239,230,0.12);
  --text-dark-bg: #EDEFEA;
  --text-dark-bg-mute: rgba(237,239,234,.62);

  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

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

  --container: 1220px;
  --nav-h: 78px;
}

/* =============================================================
   2. Reset & base — página clara por defecto a partir del hero
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; text-wrap: balance; line-height: 1.05; letter-spacing: -0.02em; }
ul { list-style: none; padding: 0; }
::selection { background: var(--green); color: #06210F; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse-dot, .founder-glow, .hero-scroll-cue span { animation: none !important; }
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--green); color: #06210F;
  z-index: 9999; border-radius: 8px; font-weight: 700;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.container-wide { max-width: 1440px; margin-inline: auto; padding-inline: 1.25rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-weight: 500; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark);
  padding-top: .9rem; position: relative;
}
.eyebrow::before {
  content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--green), transparent);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px 2px rgba(46,165,92,.5); }
.on-dark .eyebrow { color: var(--green-2); }
.eyebrow.is-light { color: var(--green-2); }

/* Section on light paper (default theme from the manifesto down) */
.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; color: var(--ink); }
.section.on-dark { color: var(--text-dark-bg); }
.section-head { max-width: 680px; margin-bottom: clamp(2.2rem, 5vw, 3.8rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-top: .7rem; color: var(--navy); }
.section.on-dark .section-head h2 { color: var(--paper); }
.section-head p { color: var(--ink-mute); margin-top: 1rem; font-size: 1.05rem; }
.section.on-dark .section-head p { color: var(--text-dark-bg-mute); }

/* dotted texture background, reusable (works on both themes via currentColor-ish opacity) */
.dotted-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(242,239,230,.14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 85%);
}
.dotted-bg.on-light { background-image: radial-gradient(rgba(16,37,62,.10) 1px, transparent 1px); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.6rem; border-radius: 10px; font-weight: 700; font-size: .92rem;
  font-family: var(--font-mono); letter-spacing: .01em;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--green); color: #06210F; box-shadow: 0 0 0 1px rgba(46,165,92,.5), 0 12px 30px -10px rgba(46,165,92,.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(46,165,92,.8), 0 18px 40px -10px rgba(46,165,92,.7); }
.btn-ghost { background: rgba(237,239,234,.04); color: var(--paper); border: 1.5px solid rgba(237,239,234,.22); }
.btn-ghost:hover { border-color: var(--green); color: var(--green-2); transform: translateY(-2px); }
.btn-outline-navy { background: transparent; color: var(--navy); border: 1.5px solid var(--line); font-family: var(--font-mono); }
.btn-outline-navy:hover { border-color: var(--navy); background: var(--navy); color: var(--paper); transform: translateY(-2px); }
.btn-block { width: 100%; }

/* =============================================================
   6. Nav (top) — always dark chrome, floats over light + dark
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.1rem 0;
  transition: background .35s var(--ease-out), box-shadow .35s var(--ease-out), padding .35s var(--ease-out), border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(6,16,28,.86); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom-color: rgba(237,239,234,.08); padding: .7rem 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-logo { display: flex; align-items: center; }
.nav-logo svg { height: 34px; width: auto; }
.nav-links { display: none; align-items: center; gap: 1.7rem; }
.nav-links > a { font-family: var(--font-mono); font-weight: 500; font-size: .8rem; letter-spacing: .02em; color: rgba(237,239,234,.72); position: relative; }
.nav-links > a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--green);
  transition: width .3s var(--ease-out);
}
.nav-links > a:hover { color: var(--paper); }
.nav-links > a:hover::after { width: 100%; }
.nav-cta { display: none; }
.nav-toggle { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav-toggle svg { stroke: var(--paper); }

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}
@media (min-width: 1140px) { .nav-links { gap: 2.1rem; } }

/* --- Producto dropdown (desktop: CSS-only hover/focus reveal) --- */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-weight: 500; font-size: .8rem; letter-spacing: .02em;
  color: rgba(237,239,234,.72); transition: color .3s var(--ease-out); padding: .3rem 0;
}
.nav-dropdown-trigger svg { transition: transform .3s var(--ease-out); }
.nav-dropdown:hover .nav-dropdown-trigger, .nav-dropdown:focus-within .nav-dropdown-trigger { color: var(--paper); }
.nav-dropdown:hover .nav-dropdown-trigger svg, .nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  /* top starts flush against the trigger (no dead gap the mouse can fall through);
     the visual breathing room is padding-top on the inner card instead, so the
     hoverable hit-area stays continuous all the way from trigger to menu. */
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 320px; padding-top: 1.1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease-out) .1s, visibility .18s .1s;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .2s var(--ease-out), visibility .2s;
}
.nav-dropdown-menu-inner {
  background: rgba(10,24,38,.98); border: 1px solid rgba(46,165,92,.25);
  border-radius: 16px; padding: .6rem; display: grid; gap: .15rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); backdrop-filter: blur(14px);
  transform: translateY(6px); transition: transform .22s var(--ease-out);
}
.nav-dropdown:hover .nav-dropdown-menu-inner, .nav-dropdown:focus-within .nav-dropdown-menu-inner { transform: translateY(0); }
.nav-dropdown-menu a { display: flex; align-items: center; gap: .8rem; padding: .65rem .7rem; border-radius: 10px; transition: background .2s ease; }
.nav-dropdown-menu a:hover { background: rgba(46,165,92,.12); }
.nav-dropdown-num { font-family: var(--font-mono); font-size: .72rem; color: var(--green-2); flex: none; }
.nav-dropdown-menu strong { display: block; font-family: var(--font-heading); font-size: .88rem; color: var(--paper); font-weight: 700; }
.nav-dropdown-menu em { display: block; font-style: normal; font-size: .72rem; color: rgba(237,239,234,.5); margin-top: .1rem; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--navy-4);
  display: flex; flex-direction: column;
  transform: translateY(-100%); transition: transform .45s var(--ease-out);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu-scroll {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1.3rem;
  padding: 6.5rem 2rem 3rem; max-width: 460px; width: 100%; margin-inline: auto;
}
.mobile-menu-scroll > a { color: var(--paper); font-size: 1.35rem; font-family: var(--font-heading); font-weight: 800; }
.mobile-menu .btn { margin-top: .6rem; }
.mobile-close { position: absolute; top: 1.4rem; right: 1.4rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.mobile-close svg { stroke: var(--paper); }

.mobile-dropdown-trigger {
  display: flex; align-items: center; justify-content: space-between;
  color: var(--paper); font-size: 1.35rem; font-family: var(--font-heading); font-weight: 800; width: 100%;
}
.mobile-dropdown-trigger svg { transition: transform .3s var(--ease-out); stroke: var(--green-2); }
.mobile-dropdown-trigger.is-open svg { transform: rotate(180deg); }
.mobile-dropdown-panel {
  display: grid; gap: .2rem; max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease-out);
  border-left: 2px solid rgba(46,165,92,.3); margin-top: -.6rem;
}
.mobile-dropdown-panel.is-open { max-height: 320px; margin-top: .2rem; }
.mobile-dropdown-panel a {
  padding: .65rem 0 .65rem 1.1rem; font-family: var(--font-mono); font-size: .95rem;
  color: rgba(237,239,234,.7);
}

/* =============================================================
   7. Hero — full-bleed real photography, editorial poster type
   ============================================================= */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: var(--paper); overflow: clip; padding-top: 6.5rem; padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 30%; }
.hero-parallax-layer {
  position: absolute; top: -14%; left: -14%; width: 128%; height: 128%;
  background-size: cover; background-position: center 20%;
  will-change: transform; transform: translate3d(0,0,0) scale(1);
}
.hero-parallax-bg { background-image: url('assets/img/hero-vestuario-bg.webp'); filter: brightness(.94) saturate(1.05); }
.hero-parallax-fg { background-image: url('assets/img/hero-vestuario-fg.webp'); }
.hero-cursor-dot {
  position: fixed; width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 18px rgba(46,165,92,.6);
  pointer-events: none; transform: translate(-50%,-50%); z-index: 60; opacity: 0;
  transition: opacity .2s ease; will-change: left, top;
}
@media (hover: hover) and (pointer: fine) { .hero { cursor: none; } }
.hero-scrim {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(6,16,28,.32) 0%, rgba(6,16,28,.1) 28%, rgba(6,16,28,.58) 68%, rgba(6,16,28,.94) 100%),
    linear-gradient(100deg, rgba(6,16,28,.8) 0%, rgba(6,16,28,.3) 40%, rgba(6,16,28,0) 65%),
    linear-gradient(150deg, rgba(5,119,59,.16), transparent 45%);
}
.hero-inner { position: relative; z-index: 2; max-width: 600px; }
.hero-title {
  font-size: clamp(2.9rem, 7.4vw, 5.6rem); margin-top: 1.2rem; line-height: .98;
  text-transform: uppercase; letter-spacing: -0.01em;
}
.hero-title .accent { color: var(--green-2); }
.hero-sub { margin-top: 1.6rem; font-size: clamp(1.05rem, 2vw, 1.22rem); color: rgba(237,239,234,.8); max-width: 46ch; }
.hero-actions { margin-top: 2.3rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-note { margin-top: 1.9rem; display: flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .82rem; color: rgba(237,239,234,.55); }
.hero-note .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; flex: none; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,165,92,.55);} 50% { box-shadow: 0 0 0 9px rgba(46,165,92,0);} }

.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%); z-index: 2;
  width: 30px; height: 46px; border: 1.5px solid rgba(237,239,234,.4); border-radius: 999px;
  display: none; align-items: flex-start; justify-content: center; padding-top: 8px;
}
.hero-scroll-cue span { width: 4px; height: 8px; border-radius: 999px; background: var(--green-2); animation: scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue { 0% { opacity: 1; transform: translateY(0); } 70%,100% { opacity: 0; transform: translateY(14px); } }
@media (min-width: 720px) { .hero-scroll-cue { display: flex; } }

/* =============================================================
   8. El problema real — full-bleed photo, editorial title card
   ============================================================= */
.problema { position: relative; min-height: 74vh; display: flex; align-items: center; color: var(--paper); overflow: clip; padding-block: clamp(4rem, 10vw, 6rem); }
.problema-media { position: absolute; inset: 0; z-index: 0; }
.problema-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.problema-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(6,16,28,.82) 0%, rgba(6,16,28,.52) 48%, rgba(6,16,28,.2) 78%),
    linear-gradient(180deg, rgba(6,16,28,.25) 0%, transparent 30%, rgba(6,16,28,.45) 100%);
}
.problema-inner { position: relative; z-index: 1; }
.problema-lead {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-family: var(--font-heading); font-weight: 700;
  color: var(--paper); margin-top: .9rem; line-height: 1.24; max-width: 18ch;
}
.problema-support { margin-top: 1.4rem; max-width: 56ch; }
.problema-support p { color: rgba(237,239,234,.78); font-size: 1.02rem; }
.problema-support p + p { margin-top: .9rem; }

/* =============================================================
   9. Product sections — 4 independent modules, alternating photo
      + content, editorial catalog style
   ============================================================= */
.product-section:nth-of-type(odd) { background: var(--paper); }
.product-section:nth-of-type(even) { background: var(--cream); }
.product-grid { display: grid; gap: 2.6rem; align-items: center; }
@media (min-width: 900px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .product-section.is-reverse .product-grid { direction: rtl; }
  .product-section.is-reverse .product-grid > * { direction: ltr; }
}
.product-media { position: relative; }
.product-media img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 40px 70px -30px rgba(16,37,62,.35); }
.product-media-phone { display: flex; flex-direction: column; align-items: center; }
.product-media-phone .phone-frame { margin-top: .4rem; }
.product-num {
  position: absolute; top: -1.6rem; left: -.4rem; z-index: 0;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(4rem, 8vw, 6rem);
  color: var(--navy); opacity: .08; line-height: 1; pointer-events: none;
}
.product-media-phone .product-num { position: static; margin-bottom: -1.5rem; align-self: flex-start; }
.product-content { position: relative; z-index: 1; }
.product-content h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--navy); margin-top: .7rem; }
.product-content .pillar-tag { display: inline-block; margin-top: .7rem; }
.product-lead { color: var(--ink-mute); margin-top: 1.1rem; font-size: 1.08rem; max-width: 46ch; }
.product-features { margin-top: 1.3rem; display: grid; gap: .65rem; }
.product-features li { position: relative; padding-left: 1.5rem; color: var(--ink-mute); font-size: .96rem; }
.product-features li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 3px; background: var(--green); transform: rotate(45deg); }
.product-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.6rem; font-family: var(--font-mono); font-weight: 700; font-size: .88rem; color: var(--green-dark); }
.product-link span { transition: transform .3s var(--ease-out); }
.product-link:hover span { transform: translateX(4px); }

.pillar-tag { display: inline-block; margin-top: .5rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; position: relative; z-index: 1; }

/* =============================================================
   10. Stats / Key facts — light band
   ============================================================= */
.stats { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 3rem; }
.stat-grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); position: relative; z-index: 1; }
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-item { text-align: center; }
.stat-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--navy); }
.stat-label { margin-top: .4rem; font-family: var(--font-mono); font-size: .78rem; color: var(--green-dark); letter-spacing: .02em; }
.stat-item.is-wink .stat-num { color: var(--ink-mute); }
.stats-note { text-align: center; margin-top: 1.8rem; font-family: var(--font-mono); font-size: .78rem; font-style: italic; color: var(--ink-mute); position: relative; z-index: 1; }

/* =============================================================
   11. Why CoachBase — 6 reason grid, light
   ============================================================= */
.why { background: var(--paper); }
.why-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-card { border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; background: var(--cream); transition: border-color .35s ease, transform .35s var(--ease-out); }
.why-card:hover { border-color: rgba(46,165,92,.5); transform: translateY(-4px); }
.why-num { font-family: var(--font-mono); font-size: .78rem; color: var(--green-dark); }
.why-card h3 { font-size: 1.05rem; margin-top: .6rem; color: var(--navy); }
.why-card p { color: var(--ink-mute); font-size: .92rem; margin-top: .55rem; }

/* =============================================================
   11b. Testimonials — light, quote cards
   ============================================================= */
.testimonials { background: var(--paper); border-top: 1px solid var(--line); position: relative; }
.testimonial-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; position: relative; z-index: 1; }
@media (min-width: 780px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
.testimonial-card {
  border: 1px solid var(--line); border-radius: 18px; padding: 1.7rem;
  background: var(--cream); display: flex; flex-direction: column; margin: 0;
  transition: border-color .35s ease, transform .35s var(--ease-out);
}
.testimonial-card:hover { border-color: rgba(46,165,92,.5); transform: translateY(-4px); }
.testimonial-stars { display: flex; gap: .18rem; color: var(--green); }
.testimonial-stars svg { width: 15px; height: 15px; }
.testimonial-card blockquote { margin: .9rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--navy); }
.testimonial-card figcaption {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
}
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--paper);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading);
  font-weight: 800; font-size: .82rem; flex: none;
}
.testimonial-who { display: flex; flex-direction: column; min-width: 0; }
.testimonial-who strong { font-family: var(--font-heading); font-size: .92rem; color: var(--navy); }
.testimonial-who em { font-style: normal; font-size: .8rem; color: var(--ink-mute); margin-top: .1rem; }
.testimonial-uses {
  font-family: var(--font-mono); font-size: .7rem; color: var(--green-dark); background: rgba(46,165,92,.12);
  padding: .3rem .6rem; border-radius: 999px; white-space: nowrap; justify-self: end;
}
@media (max-width: 480px) {
  .testimonial-card figcaption { grid-template-columns: auto 1fr; }
  .testimonial-uses { grid-column: 1 / -1; justify-self: start; margin-top: .3rem; }
}

/* =============================================================
   12. Methodology — light, navy/green numbered steps
   ============================================================= */
.method { background: var(--cream); border-top: 1px solid var(--line); }
.method-layout { display: grid; gap: 2.4rem; position: relative; z-index: 1; }
@media (min-width: 960px) { .method-layout { grid-template-columns: .82fr 1.18fr; gap: 3.4rem; align-items: start; } }
.method-media { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 70px -30px rgba(16,37,62,.32); }
.method-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 960px) { .method-media { position: sticky; top: calc(var(--nav-h) + 2rem); } }
.method-steps { display: grid; gap: 1.4rem; }
.method-step { position: relative; padding: 1.6rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.method-num {
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--green-2);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem;
  margin-bottom: 1rem;
}
.method-step h3 { font-size: 1.05rem; color: var(--navy); }
.method-step p { color: var(--ink-mute); margin-top: .6rem; font-size: .92rem; }

/* =============================================================
   13. Founder note — dark accent band
   ============================================================= */
.founder { background: var(--navy); color: var(--paper); position: relative; overflow: clip; }
.founder-glow { position: absolute; inset: -30% -10% -30% -10%; background: radial-gradient(35% 45% at 85% 30%, rgba(46,165,92,.28), transparent 70%); filter: blur(60px); pointer-events: none; animation: heroDrift 20s ease-in-out infinite; }
@keyframes heroDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-2%, 2%) scale(1.06); }
}
.founder-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; color: #06210F; flex: none; }
.founder-bio-signoff strong { display: block; font-size: .95rem; }
.founder-bio-signoff span { display: block; font-family: var(--font-mono); font-size: .8rem; color: rgba(237,239,234,.6); }

/* =============================================================
   14. Pricing — light, highlighted plan carries the navy detail
   ============================================================= */
.pricing { background: var(--paper); }
.price-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; position: relative; z-index: 1; }
@media (min-width: 960px) { .price-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.price-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: 22px; padding: 2rem;
  display: flex; flex-direction: column; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s ease;
  color: var(--navy);
}
.price-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(16,37,62,.25); }
.price-card.is-highlight { background: var(--navy); color: var(--paper); border-color: var(--navy); position: relative; }
.price-card.is-highlight .price-desc { color: rgba(237,239,234,.7); }
.price-card.is-highlight .price-amount .period { color: rgba(237,239,234,.6); }
.price-badge { position: absolute; top: -13px; left: 2rem; background: var(--green); color: #06210F; font-family: var(--font-mono); font-size: .7rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; letter-spacing: .03em; }
.price-card h3 { font-size: 1.15rem; }
.price-amount { display: flex; align-items: baseline; gap: .4rem; margin-top: 1rem; }
.price-amount .num { font-family: var(--font-heading); font-weight: 800; font-size: 2.4rem; }
.price-amount .period { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-mute); }
.price-desc { color: var(--ink-mute); margin-top: .6rem; font-size: .92rem; }
.price-features { margin-top: 1.4rem; display: grid; gap: .6rem; flex: 1; }
.price-features li { display: flex; gap: .6rem; font-size: .9rem; align-items: flex-start; }
.price-features li svg { flex: none; width: 18px; height: 18px; stroke: var(--green-dark); margin-top: .1rem; }
.price-card.is-highlight .price-features li svg { stroke: var(--green-2); }
.price-card .btn { margin-top: 1.6rem; }

/* =============================================================
   15. FAQ — light
   ============================================================= */
.faq { background: var(--paper); border-top: 1px solid var(--line); }
.faq-list { max-width: 780px; margin-inline: auto; display: grid; gap: .8rem; position: relative; z-index: 1; }
.faq-item { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--cream); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; text-align: left; font-weight: 700; font-family: var(--font-heading); font-size: 1rem; color: var(--navy); }
.faq-q .plus { flex: none; width: 22px; height: 22px; position: relative; }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; background: var(--navy); border-radius: 2px; transition: transform .3s var(--ease-out); }
.faq-q .plus::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.faq-q .plus::after { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.faq-item.is-open .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out); }
.faq-a-inner { padding: 0 1.4rem 1.2rem; color: var(--ink-mute); font-size: .95rem; }
.faq-item.is-open .faq-a { max-height: 240px; }

/* =============================================================
   16. Final CTA — dark accent band
   ============================================================= */
.cta-final { background: var(--navy); color: var(--paper); position: relative; overflow: clip; text-align: center; }
.cta-final-media { position: absolute; inset: 0; z-index: 0; }
.cta-final-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.cta-final-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,16,28,.88) 0%, rgba(6,16,28,.78) 45%, rgba(6,16,28,.92) 100%); }
.cta-final .container { position: relative; z-index: 1; }
.cta-final .section-head { margin-inline: auto; }
.cta-form { max-width: 460px; margin: 2rem auto 0; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
.cta-form input { flex: 1 1 240px; padding: .9rem 1.1rem; border-radius: 10px; border: 1px solid rgba(237,239,234,.22); background: rgba(237,239,234,.06); color: var(--paper); font-size: .95rem; font-family: var(--font-mono); }
.cta-form input::placeholder { color: rgba(237,239,234,.45); }
.cta-note { margin-top: 1rem; font-family: var(--font-mono); font-size: .8rem; color: rgba(237,239,234,.45); position: relative; z-index: 1; }
.form-success { display: none; margin-top: 1.2rem; color: var(--green-2); font-weight: 700; position: relative; z-index: 1; }
.form-success.is-shown { display: block; }

/* =============================================================
   17. Footer — dark, standard convention
   ============================================================= */
.footer { background: var(--navy-4); color: rgba(237,239,234,.6); padding-block: 3rem 2rem; border-top: 1px solid rgba(237,239,234,.08); }
.footer-top { display: flex; flex-direction: column; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(237,239,234,.08); }
.footer-brand p { max-width: 320px; margin-top: .8rem; font-size: .9rem; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.footer-social-link {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(237,239,234,.18); color: rgba(237,239,234,.65);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.footer-social-link:hover { color: var(--green-2); border-color: rgba(46,165,92,.4); background: rgba(46,165,92,.1); }
.footer-cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(2, 1fr); }
.footer-col h4 { color: var(--paper); font-family: var(--font-mono); font-size: .8rem; margin-bottom: .8rem; letter-spacing: .03em; }
.footer-col ul { display: grid; gap: .55rem; font-size: .88rem; }
.footer-col a:hover { color: var(--green-2); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; font-family: var(--font-mono); font-size: .78rem; }
@media (min-width: 960px) {
  .footer-top { flex-direction: row; justify-content: space-between; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); min-width: 480px; }
}

/* =============================================================
   18. Responsive nudges
   ============================================================= */
@media (min-width: 540px)  { .hero-actions { flex-wrap: nowrap; } }
@media (min-width: 1280px) { .section { padding-block: 7.5rem; } }

/* =============================================================
   20. Inclusion band — para quién es
   ============================================================= */
.inclusion { background: var(--cream); padding-block: clamp(2.6rem, 5vw, 4rem); text-align: center; }
.inclusion .section-head { margin-bottom: 1.4rem; }
.inclusion-pills { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; position: relative; z-index: 1; }
.inclusion-pill {
  font-family: var(--font-mono); font-size: .8rem; padding: .55rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--navy); background: var(--paper);
}

/* =============================================================
   21. Phone frame — captura real
   ============================================================= */
.phone-frame {
  position: relative; margin: 0 auto; max-width: 210px; border-radius: 26px;
  background: var(--navy-4); padding: 9px 9px 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
.phone-frame::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 4px; border-radius: 4px; background: rgba(237,239,234,.25);
}
.phone-frame img { border-radius: 18px; width: 100%; display: block; margin-top: 13px; }
.phone-frame-caption { text-align: center; font-family: var(--font-mono); font-size: .66rem; color: var(--green-dark); margin-top: .7rem; }

.pillar-tag.is-live { color: var(--green-dark); }
.pillar-tag.is-soon { color: var(--ink-mute); }

/* =============================================================
   24. Quién soy — bio editorial con retrato real
   ============================================================= */
.founder-bio { display: grid; gap: 3rem; align-items: center; position: relative; z-index: 1; }
@media (min-width: 960px) { .founder-bio { grid-template-columns: .85fr 1.15fr; } }
.founder-photo-wrap { display: flex; justify-content: center; }
.founder-photo-frame { position: relative; width: 100%; max-width: 360px; }
.founder-photo-frame::before {
  content: ""; position: absolute; top: 16px; left: 16px; right: -16px; bottom: -16px;
  border: 2px solid rgba(46,165,92,.55); border-radius: 18px; z-index: 0;
}
.founder-photo-frame img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.6); filter: grayscale(.12) contrast(1.06);
}
.founder-bio-text h1, .founder-bio-text h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); color: var(--paper); margin-top: .7rem; margin-bottom: 1.3rem; }
.founder-bio-text p.support { color: rgba(237,239,234,.82); margin-top: 1rem; font-size: 1.02rem; max-width: 62ch; }
.founder-bio-signoff { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; }

/* 26. Foto de fondo — banda de inclusión */
.inclusion { position: relative; overflow: hidden; isolation: isolate; }
.inclusion-photo { position: absolute; inset: 0; z-index: 0; }
.inclusion-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.inclusion-photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, var(--cream) 0%, rgba(242,239,230,.93) 12%, rgba(242,239,230,.93) 88%, var(--cream) 100%); }
.inclusion .container { position: relative; z-index: 1; }

/* =============================================================
   27. Page transitions — logo overlay between pages
   CSS-only intro reveal on every load (no JS dependency: if JS
   fails, the overlay still fades away on its own). JS only adds
   the branded "exit" animation before navigating to another page.
   ============================================================= */
.page-transition {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-4);
  opacity: 1;
  animation: pageIntroReveal .85s var(--ease-out) .1s forwards;
}
.page-transition.is-entering {
  animation: none; opacity: 1; pointer-events: auto;
  transition: opacity .1s linear;
}
@keyframes pageIntroReveal {
  0% { opacity: 1; visibility: visible; }
  99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
.page-transition-mark {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  transform: scale(.86); opacity: 0;
  animation: pageMarkIn .6s var(--ease-out) .12s forwards;
}
.page-transition.is-entering .page-transition-mark {
  animation: pageMarkPulse 1s var(--ease-soft) infinite;
  transform: none; opacity: 1;
}
@keyframes pageMarkIn { to { transform: none; opacity: 1; } }
@keyframes pageMarkPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .7; } }
.page-transition-badge {
  width: 56px; height: 56px; border-radius: 15px; background: var(--paper);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.page-transition-badge span {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: var(--navy);
}
.page-transition-badge::after {
  content: ""; position: absolute; bottom: -5px; right: -5px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--green); border: 2px solid var(--navy-4);
}
.page-transition-word { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(237,239,234,.55); }
@media (prefers-reduced-motion: reduce) {
  .page-transition, .page-transition-mark { animation: none !important; opacity: 0 !important; visibility: hidden !important; }
}

/* =============================================================
   28. Page header — compact dark band opening every sub-page
   ============================================================= */
.page-header {
  position: relative; overflow: clip; color: var(--paper);
  background: radial-gradient(120% 90% at 50% -20%, #1c3b5c 0%, var(--navy) 45%, var(--navy-4) 100%);
  padding-top: calc(var(--nav-h) + 3.2rem); padding-bottom: clamp(2.6rem, 6vw, 4rem);
}
.page-header-crumb { font-family: var(--font-mono); font-size: .76rem; color: rgba(237,239,234,.5); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; position: relative; z-index: 1; }
.page-header-crumb a { color: rgba(237,239,234,.8); }
.page-header-crumb a:hover { color: var(--green-2); }
.page-header h1 { font-size: clamp(2.2rem, 4.8vw, 3.5rem); margin-top: 1rem; max-width: 20ch; position: relative; z-index: 1; }
.page-header p { margin-top: 1.1rem; color: rgba(237,239,234,.78); font-size: 1.05rem; max-width: 58ch; position: relative; z-index: 1; }
.page-header .pillar-tag { position: relative; z-index: 1; }
.page-header .pillar-tag.is-live { color: var(--green-2); }
.page-header .pillar-tag.is-soon { color: rgba(237,239,234,.6); }

/* =============================================================
   29. Related products — cross-links between the 4 modules
   ============================================================= */
.related-products { background: var(--paper); border-top: 1px solid var(--line); }
.related-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-card { display: block; border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; background: var(--cream); transition: transform .35s var(--ease-out), border-color .3s ease, box-shadow .35s var(--ease-out); }
.related-card:hover { transform: translateY(-4px); border-color: rgba(46,165,92,.45); box-shadow: 0 26px 50px -26px rgba(16,37,62,.3); }
.related-card .eyebrow-mini { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--green-dark); text-transform: uppercase; letter-spacing: .05em; }
.related-card h3 { font-size: 1.08rem; color: var(--navy); margin-top: .55rem; }
.related-card p { color: var(--ink-mute); font-size: .88rem; margin-top: .5rem; }
.related-card .related-arrow { display: inline-flex; margin-top: .9rem; font-family: var(--font-mono); font-size: .8rem; color: var(--green-dark); font-weight: 700; }

/* =============================================================
   30. Teaser grid — home page product overview (4 clickable cards)
   ============================================================= */
.pillars { background: var(--cream); }
.teaser-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; position: relative; z-index: 1; }
@media (min-width: 640px) { .teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .teaser-grid { grid-template-columns: repeat(3, 1fr); } }
.teaser-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--paper); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s ease; }
.teaser-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -28px rgba(16,37,62,.3); border-color: rgba(46,165,92,.4); }
.teaser-card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.teaser-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.teaser-card:hover .teaser-card-media img { transform: scale(1.06); }
.teaser-card-body { padding: 1.3rem 1.3rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.teaser-card-body h3 { font-size: 1.12rem; color: var(--navy); margin-top: .5rem; }
.teaser-card-body p { color: var(--ink-mute); font-size: .88rem; margin-top: .5rem; flex: 1; }
.teaser-card-body .related-arrow { margin-top: 1rem; }

/* --- top-nav "current page" indicator --- */
.nav-links > a.is-current { color: var(--green-2); }
.nav-links > a.is-current::after { width: 100%; }
.nav-dropdown-menu a.is-current { background: rgba(46,165,92,.14); }
.nav-dropdown-menu a.is-current strong { color: var(--green-2); }