/* ============================================================
   RESET & TOKENS
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Paleta de base.png */
  --pink:    #FFD6E0;   /* Petal Frost */
  --lemon:   #FFEEA8;   /* Lemon */
  --palm:    #748E54;   /* Palm Leaf — color de la esterilla */
  --pumpkin: #ED7D3A;   /* Pumpkin Spice */
  --ice:     #B5E2FA;   /* Icy Blue */

  /* Rose de la Membresia. Los cuatro valores salen de los pixeles del mock que
     mando Fabi el 09-09 (sus paginas 5 a 7), no de un tono inventado:
     fondo, numero fantasma, chip de la frase manuscrita y tarjetas.
     --rose-bg es mas frio que --pink, asi que la Membresia se sigue leyendo
     como una seccion distinta del hero y de Testimonios. */
  --rose-bg:   #F9D8DF;
  --rose-num:  #F5CBD6;
  --rose-deep: #E9AABA;   /* el rosa fuerte de antes, reciclado como chip */
  --rose-card: #F8E9E7;

  /* Neutros */
  --cream:   #FFFCF5;   /* warm off-white */
  --ink:     #1A1A1A;   /* near-black */
  --muted:   #5a5a5a;   /* body secondary */
  --burgundy:#2A1815;   /* dark drama */

  /* Tipografía */
  --display: 'Fraunces', 'DM Serif Display', Georgia, serif;
  --body:    'Questrial', 'Helvetica Neue', Arial, sans-serif;
  --script:  'Caveat', 'Brush Script MT', cursive;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-height: 64px;
}

html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--body);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}

::selection { background: var(--pumpkin); color: var(--cream); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

body[data-lang="es"] .lang-en { display: none !important; }
body[data-lang="en"] .lang-es { display: none !important; }

/* ============================================================
   TIPOGRAFÍA — jerarquía Fraunces / Questrial / Caveat
   ============================================================ */
.handwritten {
  font-family: var(--script);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.005em;
  transform: rotate(-2deg);
  display: inline-block;
}
/* p.3 del 09-09: la pregunta de "Si estas aqui" va en verde */
.handwritten--palm { color: var(--palm); }
/* p.6: la frase de la membresia va cream sobre un chip, no suelta sobre el
   pastel, donde no se leeria. El chip usa el rosa fuerte de antes. */
.handwritten--chip {
  background: var(--rose-deep);
  padding: 0.45rem 1rem 0.6rem;
  border-radius: 14px;
  transform: rotate(-1.2deg);
}

.display {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 900;
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.display em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 90, 'wght' 700;
}

.display--md {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 900;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.display--md em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 90, 'wght' 900;
}

.display--sm {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 900;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.display--sm em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 90, 'wght' 700;
}

.explain {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 36em;
}

.body-copy {
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink);
  max-width: 34em;
}
.body-copy + .body-copy { margin-top: 1.1rem; }

/* Letra pequeña — condiciones, avisos, "3 dias de prueba" */
.fine-print {
  font-family: var(--body);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 34em;
}
/* Questrial es de un solo peso, asi que <strong> sale en negrita sintetica.
   Los arranques en negrita usan Fraunces 700 con esta clase. */
.lead-in {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 90, 'wght' 700;
  font-style: normal;
  color: var(--ink);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.container--narrow { max-width: 780px; margin: 0 auto; padding: 0 2rem; }

section { padding: 7rem 0; position: relative; overflow: hidden; }

.section-head { margin-bottom: 3rem; }
.section-head .handwritten { margin-bottom: 1.2rem; }
.section-head .display,
.section-head .display--md { margin-bottom: 1.25rem; }

/* Big decorative number behind titles */
.bignum {
  position: absolute;
  right: 2rem; top: 2rem;
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 900;
  font-size: clamp(8rem, 20vw, 18rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}
/* Despeja el .bignum de los titulares largos de 03 y 04 */
#becoming-her > .container > .section-head,
#uno-a-uno > .container > .section-head { padding-right: 3.5rem; }
/* Desde el 09-09 la cabecera de 01 y 02 es .section-hero, no .section-head:
   el que tiene que esquivar el numero grande es el texto de la derecha. */
#becoming-her > .container > .section-hero > .section-hero-text,
#uno-a-uno > .container > .section-hero > .section-hero-text { padding-right: 3.5rem; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger { transition-delay: calc(var(--i, 0) * 0.1s); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 252, 245, 0.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
  height: var(--nav-height);
}
.nav.visible { transform: translateY(0); }

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

.nav-brand {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lang-toggle {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--lemon);
  border: 1px solid var(--ink);
  padding: 0.4rem 0.95rem;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lang-toggle:hover { background: var(--pumpkin); color: var(--cream); transform: translateY(-1px); }

/* ============================================================
   HERO  (bg: Petal Frost)  — REDISEÑO v2: foto izquierda, texto derecha
   ============================================================ */
.hero {
  background: var(--pink);
  padding: 7rem 0 4rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Decorative color blobs */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.55;
  pointer-events: none;
}
.hero::before {
  width: 500px; height: 500px;
  background: var(--lemon);
  top: -180px; right: -140px;
}
.hero::after {
  width: 360px; height: 360px;
  background: var(--pumpkin);
  bottom: -140px; left: -100px;
  opacity: 0.35;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* texto izquierda más ancho, media (video) derecha */
  gap: 4.5rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero-greet {
  color: var(--palm);
}

.hero-headline {
  margin-top: 1rem;
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 70, 'wght' 900;
  font-size: clamp(2.4rem, 6.5vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-transform: uppercase;
}

.hero-subhead {
  margin-top: 1.4rem;
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 32em;
}

.hero-anchor {
  margin-top: 1.2rem;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 700;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 28em;
}
.hero-anchor em { color: var(--pumpkin); font-style: italic; }

.hero-pillars-line {
  display: inline-block;
  margin-top: 1.8rem;
  background: var(--lemon);
  border: 1px solid var(--ink);
  border-radius: 100px;
  padding: 0.55rem 1.3rem;
  font-family: var(--body);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Fila de botones — primario + secundario. Antes .hero-cta-row, que no se usaba.
   El espaciado va inline en cada uso, como en el resto del archivo. */
.btn-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.btn-row--center { justify-content: center; }

.hero-wordmark {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem;
}

/* Hero photo — bold rounded frame with palm-leaf accent */
.hero-photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-photo-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  overflow: hidden;
  background: var(--palm);
  box-shadow:
    10px 14px 0 var(--ink),
    0 30px 60px -30px rgba(0,0,0,0.3);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.hero-photo-card:hover {
  transform: translate(-3px, -3px);
  box-shadow:
    14px 18px 0 var(--ink),
    0 40px 70px -30px rgba(0,0,0,0.35);
}
.hero-photo-card :is(img, video) {
  width: 100%; height: 100%; object-fit: cover;
  /* El video es 9/16 dentro de un marco 3/4: se recorta arriba y abajo.
     El 30% sube el encuadre hacia la cara. Ajustar si se cambia el clip. */
  object-position: center 22%;
  display: block;
}

/* Sticker-style label on the photo */
.photo-sticker {
  position: absolute;
  top: -14px; left: -22px;
  background: var(--lemon);
  color: var(--ink);
  font-family: var(--script);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.4rem 0.95rem;
  border-radius: 100px;
  border: 1px solid var(--ink);
  transform: rotate(-8deg);
  z-index: 2;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  opacity: 0.6;
  z-index: 1;
}
.hero-scroll .chevron {
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  animation: scrollBounce 2.2s var(--ease) infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 0.4; }
  50%      { transform: rotate(45deg) translate(4px,4px); opacity: 0.9; }
}

/* ============================================================
   INTRO BLOCK (bg: cream)
   ============================================================ */
.intro {
  background: var(--cream);
  padding: 6rem 0;
  text-align: center;
}

.intro-kicker {
  margin-bottom: 1.4rem;
  color: var(--palm);
}

/* El titular de la intro va sobre crema, sin .block-* que le de color al em,
   asi que "otra tarea" se pinta aqui. Mismo naranja que el em del .intro-lead. */
.intro .display--md em { color: var(--pumpkin); }
/* Igual que arriba, para el "reconoces" de la seccion persona (p.3 del 09-09).
   Las dos van sobre cream, que no tiene .block-* que le de color al em. */
.persona .display--md em { color: var(--pumpkin); }

.intro-lead {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 400;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 700px;
  margin: 0 auto;
}
.intro-lead em {
  color: var(--pumpkin);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 500;
}

.intro-flow {
  margin-top: 2.5rem;
  font-family: var(--body);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.intro-flow .arrow {
  margin: 0 0.5rem;
  color: var(--pumpkin);
}

/* ============================================================
   PERSONA SECTION — "¿Te suena esto?"
   ============================================================ */
.persona {
  background: var(--cream);
  padding: 6rem 0 7rem;
  position: relative;
  overflow: hidden;
  border-top: 1px dashed rgba(26,26,26,0.1);
}
.persona::before {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: var(--lemon);
  filter: blur(90px);
  opacity: 0.45;
  top: -160px; right: -140px;
  pointer-events: none;
}
.persona::after {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: var(--ice);
  filter: blur(90px);
  opacity: 0.4;
  bottom: -160px; left: -120px;
  pointer-events: none;
}

.persona-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.persona-head {
  text-align: center;
  margin-bottom: 3.5rem;
}
.persona-head .handwritten { color: var(--palm); margin-bottom: 1rem; }

.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.persona-card {
  background: var(--cream);
  border: 1px solid rgba(26,26,26,0.18);
  border-radius: 18px;
  padding: 1.4rem 1.6rem 1.4rem 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.persona-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 8px 0 var(--ink);
  border-color: var(--ink);
}
.persona-bullet {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pumpkin);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.9rem;
  line-height: 1;
  margin-top: 0.15rem;
}
.persona-text {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
/* Punto 2 del 12-09: la flor va arriba y centrada, y el texto ocupa la caja
   entera. Antes era una fila con el check verde al lado, que le comia ancho. */
.persona-card.persona-card--final {
  grid-column: 1 / -1;
  background: var(--lemon);
  border-color: var(--ink);
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: 1.8rem 1.6rem;
}
.persona-final-body { width: 100%; }
.persona-flower {
  flex-shrink: 0;
  display: inline-flex;
  line-height: 0;
}
/* Algo mayor que el glifo que sustituye: una ilustracion con cara necesita mas
   tamano que un simbolo para leerse. */
.persona-flower img { display: block; width: 64px; height: auto; }
.persona-card.persona-card--final .persona-bullet {
  background: var(--palm);
  color: var(--cream);
  width: 36px; height: 36px;
  font-size: 1.1rem;
}
.persona-card.persona-card--final .persona-text-body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  margin-top: 0.6rem;
}
.persona-card.persona-card--final .persona-text {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 90, 'wght' 700;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
}

/* ============================================================
   COLOR-BLOCK SECTIONS
   ============================================================ */
.block { position: relative; }
/* Seccion 04: se quedo en un par de tarjetas, asi que respira menos. */
.block--compact { padding: 4.5rem 0; }
.block-palm    { background: var(--palm);    color: var(--cream); }
.block-lemon   { background: var(--lemon);   color: var(--ink); }
.block-ice     { background: var(--ice);     color: var(--ink); }
.block-pink    { background: var(--pink);    color: var(--ink); }

.block-palm .bignum { color: var(--cream); }
.block-lemon .bignum { color: var(--ink); }
.block-ice .bignum { color: var(--ink); }
.block-pink .bignum { color: var(--ink); }

.block-palm .handwritten { color: var(--lemon); }
.block-palm .display,
.block-palm .display--md,
.block-palm .display--sm { color: var(--cream); }
.block-palm .display em,
.block-palm .display--md em,
.block-palm .display--sm em { color: var(--lemon); }
.block-palm .explain { color: rgba(255,252,245, 0.85); }
.block-palm .body-copy { color: var(--cream); }

.block-lemon .handwritten { color: var(--palm); }
.block-lemon .display em,
.block-lemon .display--md em,
.block-lemon .display--sm em { color: var(--pumpkin); }

.block-ice .handwritten { color: var(--palm); }
.block-ice .display em,
.block-ice .display--md em,
.block-ice .display--sm em { color: var(--pumpkin); }

.block-pink .handwritten { color: var(--palm); }
.block-pink .display em,
.block-pink .display--md em,
.block-pink .display--sm em { color: var(--pumpkin); }

/* Rose block — Becoming HER. Fondo pastel desde el 09-09; antes era #F4A7B9.
   Aclarar el fondo obliga a rehacer el contraste: cream sobre pastel no se ve,
   asi que la manuscrita pasa a palm, y el em del titulo se queda cream pero con
   sombra, que es como lo maqueto Fabi. Ahora que el fondo es claro, pumpkin si
   funciona en el em de la entrada (antes quedaba demasiado cerca en valor). */
.block-rose   { background: var(--rose-bg); color: var(--ink); }
.block-rose .bignum { color: var(--rose-num); opacity: 0.8; }
.block-rose .handwritten { color: var(--palm); }
.block-rose .display em,
.block-rose .display--md em,
.block-rose .display--sm em {
  color: var(--cream);
  text-shadow: 2px 3px 0 rgba(26, 26, 26, 0.32);
}
.block-rose .explain { color: var(--muted); }
.block-rose .intro-lead em { color: var(--pumpkin); }
.block-rose .body-copy { color: var(--ink); }
/* Las tarjetas de esta seccion llevan el crema rosado del mock, no --cream */
.block-rose .event-card,
.block-rose .step-card { background: var(--rose-card); }
/* El chip va cream sobre --rose-deep, asi que aqui no aplica el palm de arriba */
.block-rose .handwritten--chip { color: var(--cream); }

/* Becoming HER — circular badge with CSS-only sunrise (no photo) */
.becoming-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}
.becoming-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 116%, #FFE6C2 0%, var(--cream) 56%);
  border: 2px solid var(--ink);
  box-shadow: 10px 14px 0 var(--ink);
  padding: 2.5rem;
  position: relative;
  transform: rotate(-4deg);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.becoming-badge:hover { transform: rotate(0deg) translate(-3px, -3px); box-shadow: 14px 18px 0 var(--ink); }
/* Rising sun: rayed ring (::before) around a warm disc (::after) */
.becoming-sun {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 0.55rem;
}
.becoming-sun::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--pumpkin) 0deg 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 25px, #000 26px);
  mask: radial-gradient(circle, transparent 25px, #000 26px);
  opacity: 0.9;
}
.becoming-sun::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #FFD27A, var(--pumpkin));
  border: 2px solid var(--ink);
}
.becoming-badge-num {
  font-family: var(--display);
  font-size: clamp(3.4rem, 9vw, 5.6rem);
  line-height: 0.9;
  color: var(--ink);
  font-weight: 300;
  font-style: italic;
}
.becoming-badge-label {
  font-family: var(--script);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--palm);
  margin-top: 0.1rem;
}
.becoming-badge-sub {
  font-family: var(--body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 0.85rem;
  line-height: 1.5;
  max-width: 210px;
}

/* Collabs section — neutral cream card before the closing */
.collabs {
  padding: 6.5rem 0;
  background: linear-gradient(180deg, var(--cream) 0%, #FAF3EE 100%);
  position: relative;
  overflow: hidden;
}
.collabs::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12% 18%, rgba(237, 125, 58, 0.07) 0%, transparent 38%),
                    radial-gradient(circle at 88% 82%, rgba(116, 142, 84, 0.07) 0%, transparent 42%);
  pointer-events: none;
}
.collabs .container { position: relative; z-index: 1; }
.collabs-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 3rem;
  text-align: center;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 28px;
  box-shadow: 12px 16px 0 var(--ink);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.collabs-card:hover { transform: translate(-3px, -3px); box-shadow: 16px 20px 0 var(--ink); }
.collabs-kicker {
  display: inline-block;
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--pumpkin);
  margin-bottom: 1.2rem;
  letter-spacing: 0.02em;
}
.collabs-title {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
  font-weight: 300;
  margin-bottom: 1.5rem;
}
.collabs-title em {
  color: var(--pumpkin);
  font-style: italic;
}
.collabs-body {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.82;
  max-width: 540px;
  margin: 0 auto 2.2rem;
}
.collabs-cta { display: flex; justify-content: center; }

/* Two-col split layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.split.reverse .split-text  { order: 2; }
.split.reverse .split-media { order: 1; }

/* Alinea las dos columnas arriba en vez de centrarlas verticalmente */
.split--top { align-items: flex-start; }

/* Si la columna de media desaparece (fotos pendientes quitadas en _deploy),
   el texto ocupa el ancho completo en vez de dejar media pagina vacia. */
.split > .split-text:only-child {
  grid-column: 1 / -1;
  max-width: 62ch;
  margin: 0 auto;
}

.split-media {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Big photo card with offset frame — bold style */
.photo-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 10px 14px 0 var(--ink);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.photo-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 14px 18px 0 var(--ink);
}
.photo-card :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------
   MARCO "FOTO PENDIENTE"
   Modificador .is-pending sobre .photo-card / .hero-photo-card / .shot-tile.
   Para poner la foto real: borrar .is-pending y el div.photo-pending, y
   meter un <img> igual que en cualquier .photo-card.
   En el HTML estos bloques van envueltos en un par de comentarios marcadores
   (ver sync_deploy.py), que los quita al generar _deploy/index.html.
   ------------------------------------------------------------ */
:is(.photo-card, .hero-photo-card, .shot-tile).is-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background:
    repeating-linear-gradient(135deg, rgba(26,26,26,0.04) 0 10px, transparent 10px 22px),
    var(--cream);
  box-shadow: 6px 8px 0 rgba(26,26,26,0.16);
}
:is(.photo-card, .hero-photo-card, .shot-tile).is-pending:hover {
  transform: none;
  box-shadow: 6px 8px 0 rgba(26,26,26,0.16);
}
:is(.photo-card, .hero-photo-card, .shot-tile).is-pending::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(26,26,26,0.32);
  border-radius: 14px;
  pointer-events: none;
}
.photo-pending { position: relative; z-index: 1; text-align: center; max-width: 24ch; }
.photo-pending-mark {
  display: block;
  font-family: var(--script);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--palm);
  transform: rotate(-2deg);
}
.photo-pending-note {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--body);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.photo-pending-shot {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--body);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
}
.shot-tile .photo-pending-mark { font-size: 1.4rem; }
.shot-tile .photo-pending-shot { font-size: 0.78rem; margin-top: 0.5rem; }

/* Par de fotos dentro de una columna .split-media, con offset editorial */
.photo-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
  width: 100%;
}
/* max-width:none gana por especificidad a .photo-card{max-width:440px} y al
   override de @900, asi que el par siempre llena su columna. */
.photo-duo > .photo-card {
  aspect-ratio: 4 / 5;
  max-width: none;
  border-radius: 20px;
  box-shadow: 8px 10px 0 var(--ink);
}
.photo-duo > .photo-card:hover { box-shadow: 10px 12px 0 var(--ink); }
.photo-duo > .photo-card:nth-child(2) { margin-top: 2.5rem; }
/* Si solo queda una (la otra era pendiente y se quito), se centra */
.photo-duo > .photo-card:only-child {
  grid-column: 1 / -1;
  max-width: 380px;
  margin: 0 auto;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 1.05rem 2.2rem;
  border-radius: 100px;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  text-decoration: none;
  white-space: nowrap;
  background: var(--cream);
  color: var(--ink);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--ink);
}

.btn--pumpkin { background: var(--pumpkin); color: var(--cream); border-color: var(--ink); }
.btn--pumpkin:hover { background: var(--ink); color: var(--pumpkin); }

.btn--palm { background: var(--palm); color: var(--cream); border-color: var(--ink); }
.btn--palm:hover { background: var(--ink); color: var(--palm); }

.btn--ink { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--ink:hover { background: var(--cream); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

.btn-arrow { transition: transform 0.35s var(--ease); display: inline-block; }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Boton sin accion todavia (falta el link de pago). Se usa aria-disabled y NO
   disabled: disabled lo saca del orden de tabulacion y quien navega con lector
   de pantalla no llegaria a enterarse de que la oferta existe.
   pointer-events:none apaga de una vez todos los :hover de las variantes. */
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* ============================================================
   EVENT CARDS (sección Próximo Encuentro y popup)
   ============================================================ */
.events-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}
.events-list article:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 520px;
  width: 100%;
}

.event-card {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 1.6rem 1.7rem;
  box-shadow: 6px 8px 0 var(--ink);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.event-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 10px 0 var(--ink);
}

.event-pill {
  align-self: flex-start;
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  border: 1px solid var(--ink);
  margin-bottom: 1rem;
}
.event-pill.is-open    { background: var(--palm); color: var(--cream); border-color: var(--palm); }
.event-pill.is-soon    { background: var(--ice); color: var(--ink); }
.event-pill.is-best    { background: var(--pumpkin); color: var(--cream); border-color: var(--ink); }

.event-title {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 800;
  font-size: 1.4rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}
.event-when {
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.event-where,
.event-tag {
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
  line-height: 1.55;
}
.event-cta {
  margin-top: auto;
}
.event-cta .btn {
  padding: 0.75rem 1.4rem;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------
   TARJETAS DE PRECIO / OPCION — extienden .event-card
   ------------------------------------------------------------ */
.price-amount {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0.15rem 0 0.2rem;
}
.price-meta {
  font-family: var(--body);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 1rem;
}
.price-card.is-best {
  border-width: 2px;
  background: linear-gradient(180deg, var(--lemon) 0%, var(--cream) 62%);
  box-shadow: 10px 14px 0 var(--ink);
}
.price-card.is-best:hover { box-shadow: 12px 16px 0 var(--ink); }
.price-card .tag-row { margin-top: auto; padding-top: 1rem; }
.card-copy {
  font-family: var(--body);
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--ink);
}
.card-copy + .card-copy { margin-top: 0.75rem; }
.card-copy + .fit-list,
.fit-list + .fine-print { margin-top: 1rem; }

/* ============================================================
   FORM CARD — white rounded card on palm-green block
   ============================================================ */
.form-card {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  box-shadow: 10px 14px 0 var(--ink);
  border-radius: 24px;
  padding: 2.5rem;
  color: var(--ink);
}

.form-heading {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 800;
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.form-heading em {
  color: var(--pumpkin);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 700;
}

.form-sub {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

.field-group { display: flex; flex-direction: column; gap: 1.2rem; }

.field label {
  display: block;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.field input,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--ink);
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  transition: background 0.3s var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--lemon);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(26,26,26,0.4); }
.field textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.6;
  font-size: 1rem;   /* 16px: por debajo, iOS hace zoom al enfocar */
}

.row-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.form-actions { margin-top: 1.75rem; }

/* El campo de mensaje que sustituye al viejo enlace mailto. Nace oculto y se
   abre al pulsar; no se le pone `display` para que el atributo `hidden` siga
   mandando. */
.form-extra { margin-top: 1.2rem; }

/* Un boton que se lee como un enlace: abre el mensaje sin salir de la pagina.
   Hereda el subrayado naranja de .form-fallback a para no inventar otro estilo. */
.link-ish {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--pumpkin);
  padding: 0 0 1px;
  margin: 0 0.3rem 0 0;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.link-ish:hover { color: var(--pumpkin); }

/* El correo solo sale cuando el envio falla, asi que no compite con el
   formulario mientras todo va bien. */
.form-fallback--ultimo { border-top-style: solid; border-top-color: var(--pumpkin); }

/* El formulario de colaboraciones vive dentro de la tarjeta, no en una
   .form-card, asi que necesita su propio aire. */
.collabs-form { margin-top: 2rem; text-align: left; }
.collabs-form .row-two { margin-bottom: 1.2rem; }
/* Hijos DIRECTOS: si no, la regla alcanza tambien a los dos campos de dentro
   de .row-two y empuja el segundo 1,2rem hacia abajo, desalineando la fila. */
.collabs-form > .field + .field { margin-top: 1.2rem; }
.collabs-form .form-actions { display: flex; justify-content: center; }

.form-fallback {
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px dashed rgba(26,26,26,0.25);
  font-family: var(--body);
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.7;
}
.form-fallback a {
  color: var(--ink);
  font-weight: 400;
  border-bottom: 2px solid var(--pumpkin);
  padding-bottom: 1px;
  margin: 0 0.3rem;
  transition: color 0.3s var(--ease);
}
.form-fallback a:hover { color: var(--pumpkin); }

.form-status {
  margin-top: 1.2rem;
  padding: 0.9rem 1.15rem;
  background: var(--lemon);
  border: 1px solid var(--ink);
  border-radius: 10px;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  display: none;
  animation: fadeIn 0.5s var(--ease);
}
.form-status.visible { display: block; }
.form-status.error   { background: var(--pink); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ¿ES PARA TI? (dos columnas)
   ============================================================ */
.fit {
  background: var(--cream);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
.fit::before {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--ice);
  filter: blur(90px);
  opacity: 0.45;
  top: -150px; left: -120px;
  pointer-events: none;
}
.fit::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: var(--pumpkin);
  filter: blur(120px);
  opacity: 0.18;
  bottom: -180px; right: -120px;
  pointer-events: none;
}

.fit-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}
.fit-head { text-align: center; margin-bottom: 3.5rem; }
.fit-head .handwritten { color: var(--palm); margin-bottom: 1rem; }

.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 10px 14px 0 var(--ink);
}

.fit-col h3 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.fit-col.fit-yes h3 .fit-marker { background: var(--palm); }
.fit-col.fit-no  h3 .fit-marker { background: var(--pumpkin); }

.fit-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--cream);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.95rem;
}

.fit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}
.fit-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
}
.fit-list li::before {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  margin-top: 0.12rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
}
/* .fit-list li::before define la geometria pero no el content, asi que una
   .fit-list fuera de .fit-yes/.fit-no no dibuja nada. .fit-list--check da el
   check a las listas de Becoming HER y de "que cambia en tres meses". */
.fit-yes .fit-list li::before,
.fit-list--check li::before {
  content: '\2713';
  background-color: var(--palm);
}
.fit-no .fit-list li::before {
  content: '\2715';
  background-color: var(--pumpkin);
}

/* Variante con marcador "·" para las listas dentro de tarjetas */
.fit-list--dot { gap: 0.55rem; }
.fit-list--dot li { font-size: 0.95rem; }
.fit-list--dot li::before {
  content: '\00B7';
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--pumpkin);
  font-size: 1.6rem;
  line-height: 0.85;
  margin-top: 0;
}

.fit-cta {
  margin-top: 2.5rem;
  text-align: center;
}

/* ============================================================
   CAMINO DE 21 DIAS (membresia 01)
   Dos pasos, no una lista: es lo que separa "empiezas por aqui" de
   "y el dia 22 se abre todo lo demas".
   ============================================================ */
.path {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1.25rem;
  max-width: 980px;
  margin: 0 auto;
}
.path-step {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  padding: 2rem 1.9rem;
  box-shadow: 10px 14px 0 var(--ink);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.path-step:hover { transform: translate(-3px, -3px); box-shadow: 14px 18px 0 var(--ink); }
.path-day {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.1rem;
}
.path-title {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 800;
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.path-copy {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}
.path-link {
  align-self: center;
  font-size: 2rem;
  color: var(--cream);
  opacity: 0.9;
}

/* ============================================================
   LO QUE PASA CADA SEMANA (membresia 01)
   ============================================================ */
.inside-kicker { text-align: center; margin: 3.5rem 0 1.6rem; }
.inside-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 1060px;
  margin: 0 auto;
}
.inside-card {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  padding: 1.8rem 1.6rem;
  box-shadow: 8px 10px 0 var(--ink);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.inside-card:hover { transform: translate(-3px, -3px); box-shadow: 12px 14px 0 var(--ink); }
.inside-mark {
  display: block;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--pumpkin);
  margin-bottom: 0.9rem;
}
.inside-title {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 800;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.inside-copy {
  font-family: var(--body);
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ============================================================
   LO QUE ME CUENTAN (1:1 · 02.c)
   Las mismas siete frases que antes eran una lista con checks.
   ============================================================ */
.change-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 3rem;
}
.change-card {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 1.4rem 1.3rem;
  box-shadow: 7px 9px 0 var(--ink);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.change-card:hover { transform: translate(-3px, -3px); box-shadow: 11px 13px 0 var(--ink); }
/* Son 7 en una reja de 3: la huerfana se centra en lugar de colgar a la izquierda */
.change-grid > .change-card:last-child:nth-child(3n + 1) { grid-column: 2 / 3; }
/* .change-mark (la flecha verde) se quito el 12-09 a peticion de Fabi. */
.change-copy {
  font-family: var(--body);
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink);
}

.pull-quote {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 400;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
  max-width: 34em;
  margin: 3rem auto 0;
}
.pull-quote em {
  color: var(--pumpkin);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 500;
}

/* Aviso de alcance: lo que este acompanamiento no es. Se lee, no se esconde,
   pero tampoco compite con la oferta. */
.notice {
  max-width: 46em;
  margin: 3rem auto 0;
  background: var(--cream);
  border: 1.5px dashed var(--ink);
  border-radius: 20px;
  padding: 1.6rem 1.8rem;
}
.notice-mark { display: block; color: var(--palm); margin-bottom: 0.5rem; }
.notice-copy {
  font-family: var(--body);
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ============================================================
   TESTIMONIALS CAROUSEL (bg: Petal Frost)
   ============================================================ */
.testimonials {
  background: var(--pink);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
.testimonials::before {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: var(--ice);
  filter: blur(80px);
  opacity: 0.6;
  top: -150px; left: -140px;
  pointer-events: none;
}

.testimonials-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
  text-align: center;
}

.testimonials-header {
  margin-bottom: 3.5rem;
}

.tm-carousel {
  position: relative;
  min-height: 300px;
}

.tm-track {
  position: relative;
  min-height: 260px;
}

.tm-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}
.tm-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

.tm-quote-mark {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 900;
  font-size: 5rem;
  line-height: 0.7;
  color: var(--pumpkin);
  margin-bottom: 0.5rem;
}

.tm-quote {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 400;
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 760px;
  margin: 0 auto;
}

.tm-controls {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}

.tm-arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
  font-family: var(--body);
}
.tm-arrow:hover { background: var(--pumpkin); color: var(--cream); transform: translateY(-2px); }

.tm-dots {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.tm-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.tm-dot.active { background: var(--ink); transform: scale(1.15); }

/* Etiqueta de origen dentro de un testimonio (ej. "1:1 · tres meses") */
.tm-slide .tm-tag {
  margin: 1.1rem 0 0;
  background: var(--cream);
}

/* ------------------------------------------------------------
   CAPTURAS DE TESTIMONIOS
   Va FUERA de #tmCarousel a proposito: dentro, el hover sobre una captura
   dispararia el "mouseenter -> stop" del carrusel, y el IntersectionObserver
   (threshold 0.35) nunca se cumpliria en un carrusel ~900px mas alto que la
   pantalla de un movil, asi que el autoplay no arrancaria nunca.
   Ojo: no declarar display aqui, o el atributo hidden deja de funcionar.
   ------------------------------------------------------------ */
.shots { margin-top: 4rem; }
/* La reja de capturas paso a ser un carrusel. La pista scrollea con snap y
   las flechas mueven una tarjeta; no hay .active que mantener, la posicion la
   dice el propio scrollLeft. */
.shots-carousel { position: relative; }
.shots-carousel:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 20px; }
.shots-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2.2rem) / 3);
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
  /* Sin esto la reja estira todos los tiles a la misma altura y se pierde la
     proporcion de cada captura, que es justo lo que las hace legibles.
     Centrados y no arriba: la fila mide lo que el tile mas alto, asi que con
     start los cortos dejaban un hueco muerto debajo. */
  align-items: center;
}
.shots-track::-webkit-scrollbar { display: none; }
.shots-track > .shot-tile { scroll-snap-align: start; }
.shots-controls { margin-top: 1.6rem; }
.shot-tile {
  position: relative;
  /* Cada tile lleva su proporcion en --ratio (la del propio archivo). Los
     pantallazos van de 1.07 a 4.79 de ancho/alto: con un recorte uniforme el
     texto se corta, y el texto es lo unico que aportan. Ancho fijo y alto
     natural dejan la letra al mismo tamano en todas. */
  aspect-ratio: var(--ratio, 4 / 5);
  border-radius: 18px;
  overflow: hidden;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  box-shadow: 6px 8px 0 var(--ink);
}
.shot-tile :is(img, video) {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ============================================================
   ABOUT FABI (bg: pink) — historia personal
   ============================================================ */
.about {
  background: var(--pink);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
.about::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: var(--lemon);
  filter: blur(110px);
  opacity: 0.45;
  top: -180px; right: -140px;
  pointer-events: none;
}

/* Sobre Fabi — alinear la foto con el inicio del texto y darle más presencia */
.about .split {
  align-items: flex-start;
  gap: 4.5rem;
}
.about .split-media {
  margin-top: 0.65rem; /* compensa la altura del handwritten kicker para alinear ópticamente con el H2 */
}
.about .photo-card {
  max-width: 540px;
  box-shadow: 14px 18px 0 var(--ink);
}
.about .photo-card:hover {
  box-shadow: 18px 22px 0 var(--ink);
}

/* .about .photo-card (max-width 540px) va despues en la hoja y le ganaria a
   .photo-duo > .photo-card, asi que dentro del duo hay que ser mas especifico */
.about .photo-duo > .photo-card {
  max-width: none;
  box-shadow: 8px 10px 0 var(--ink);
}
.about .photo-duo > .photo-card:hover { box-shadow: 10px 12px 0 var(--ink); }

.about-tags,
.tag-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.about-tags { margin-top: 1.5rem; }
.tag-row { margin: 0.25rem 0 1rem; }
/* .tag estaba anidada en .about-tags, asi que no servia en ningun otro sitio */
.tag {
  font-family: var(--body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.95rem;
  border-radius: 100px;
  border: 1px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
}
.tag.is-accent { background: var(--lemon); }
.tag.is-strong { background: var(--palm); color: var(--cream); border-color: var(--palm); }

/* ============================================================
   CLOSING (gradient + photo cluster)
   ============================================================ */
.closing {
  padding: 8rem 0 6rem;
  background: linear-gradient(135deg, var(--pink) 0%, var(--lemon) 45%, var(--ice) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: var(--pumpkin);
  filter: blur(120px);
  opacity: 0.25;
  top: -250px; right: -200px;
  pointer-events: none;
}

.closing-quote {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 90, 'wght' 400;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 32em;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-wrap: balance;
}
.closing-quote em {
  font-style: italic;
  color: var(--palm);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 500;
}

/* El clip del hero, otra vez en el cierre. Mismo marco que la foto que habia. */
.closing-video {
  max-width: 300px;
  margin: 3rem auto 0;
}
.closing-video .photo-card { aspect-ratio: 3 / 4; }
.closing-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Antes la firma venia detras de un parrafo con su propio margen; ahora va
   pegada al video, asi que el aire lo pone ella. */
.closing-video + .closing-signature { margin-top: 2.4rem; }

.closing-signature {
  font-family: var(--script);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: 0.02em;
  transform: rotate(-2deg);
  display: inline-block;
  position: relative;
  z-index: 1;
}

/* ============================================================
   FOOTER (dark burgundy)
   ============================================================ */
.footer {
  background: var(--burgundy);
  color: var(--cream);
  padding: 3rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background:
    repeating-linear-gradient(90deg,
      var(--pink) 0 40px,
      var(--lemon) 40px 80px,
      var(--palm) 80px 120px,
      var(--pumpkin) 120px 160px,
      var(--ice) 160px 200px);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.footer-brand {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.footer-center {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-social {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--body);
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.footer-social:hover { opacity: 1; color: var(--pumpkin); }
.footer-social svg { width: 18px; height: 18px; }

.lang-toggle--footer {
  background: transparent;
  border-color: rgba(255,252,245, 0.3);
  color: var(--cream);
}
.lang-toggle--footer:hover {
  background: var(--pumpkin);
  border-color: var(--pumpkin);
  color: var(--cream);
}

.footer-copyright {
  font-family: var(--body);
  font-size: 0.78rem;
  color: rgba(255,252,245, 0.6);
  text-align: right;
}

/* ============================================================
   POPUP DE EVENTOS — minimal y femenino, colores sutiles
   ============================================================ */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(31, 22, 20, 0.42);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.popup-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.popup-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(213, 200, 230, 0.18) 0%, transparent 55%),
    radial-gradient(110% 70% at 0% 100%, rgba(247, 199, 196, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, #FBF1EE 100%);
  border: 1px solid rgba(31, 22, 20, 0.10);
  border-radius: 32px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 22px 48px rgba(31, 22, 20, 0.14),
    0 6px 16px rgba(31, 22, 20, 0.06);
  padding: 2.6rem 2.2rem 2.2rem;
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.popup-overlay.visible .popup-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.popup-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(31, 22, 20, 0.18);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s var(--ease),
              border-color 0.3s var(--ease);
  z-index: 2;
}
.popup-close:hover {
  background: var(--cream);
  border-color: var(--ink);
  transform: rotate(90deg);
}

.popup-kicker {
  font-family: var(--script);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--pumpkin);
  letter-spacing: 0.005em;
  display: inline-block;
  margin-bottom: 0.4rem;
  opacity: 0.85;
}
.popup-title {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 500;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin-bottom: 1.8rem;
}
.popup-title em {
  color: var(--pumpkin);
  font-style: italic;
  font-weight: 400;
}

.popup-copy {
  font-family: var(--body);
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.popup-card .form-card { padding: 0; border: 0; box-shadow: none; background: none; }
.popup-card .field-group { gap: 0.9rem; }
.popup-card .form-actions { margin-top: 1.2rem; }

.popup-events {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Override event-card styling inside the popup (softer, more feminine) */
.popup-events .event-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(247, 199, 196, 0.10) 100%);
  border: 1px solid rgba(31, 22, 20, 0.08);
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(31, 22, 20, 0.06);
  padding: 1.5rem 1.6rem;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.popup-events .event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(31, 22, 20, 0.10);
}
.popup-events .event-pill {
  border: none;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  padding: 0.35rem 0.85rem;
  margin-bottom: 0.85rem;
}
.popup-events .event-pill.is-open {
  background: rgba(123, 138, 96, 0.14);
  color: var(--palm);
  border-color: transparent;
}
.popup-events .event-pill.is-soon {
  background: rgba(213, 200, 230, 0.40);
  color: var(--ink);
}
.popup-events .event-title {
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 500;
  font-size: 1.3rem;
  letter-spacing: -0.012em;
}
.popup-events .event-cta .btn {
  border-radius: 100px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* Hero: foto al final, texto centrado */
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .hero-photo-wrap { order: 1; }
  .hero-text { order: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-headline { text-align: center; }
  .hero-subhead, .hero-anchor { margin-left: auto; margin-right: auto; max-width: 30em; }
  .hero-photo-card { max-width: 320px; }

  /* Split: por defecto texto primero, media al final.
     Modificador .split--media-first invierte el orden. */
  .split { grid-template-columns: 1fr; gap: 3rem; }
  .split .split-text  { order: 0; }
  .split .split-media { order: 1; }
  .split.split--media-first .split-text  { order: 1; }
  .split.split--media-first .split-media { order: 0; }

  .photo-card { max-width: 340px; }
  .bignum { font-size: clamp(5rem, 15vw, 10rem); top: 1rem; right: 1rem; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-copyright { text-align: center; }
  .events-list { grid-template-columns: 1fr; }
  .persona-grid { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 2rem 1.5rem; }
  .shots-track { grid-auto-columns: calc((100% - 1.1rem) / 2); }

  /* Los pasos del camino se apilan y la flecha gira hacia abajo */
  .path { grid-template-columns: 1fr; gap: 1rem; }
  .path-link { transform: rotate(90deg); justify-self: center; }
  .inside-grid { grid-template-columns: 1fr; }
  .change-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .change-grid > .change-card:last-child:nth-child(3n + 1) { grid-column: auto; }

  /* Centrar heads y body-copy en las secciones donde el media va al final */
  #encuentro .section-head,
  #becoming-her .section-head,
  #uno-a-uno .section-head { text-align: center; }
  #becoming-her > .container > .section-head,
  #uno-a-uno > .container > .section-head { padding-right: 0; }
  #encuentro .body-copy,
  #becoming-her .body-copy,
  #becoming-her .explain,
  #uno-a-uno .body-copy,
  #uno-a-uno .explain {
    text-align: center;
    max-width: 32em;
    margin-left: auto;
    margin-right: auto;
  }
  /* CTA del 1:1 centrado en mobile */
  #uno-a-uno .split-text > .reveal:last-child { text-align: center; }
}

@media (max-width: 768px) {
  section { padding: 5rem 0; }
  .hero { padding: 3rem 0 2.5rem; min-height: auto; }
  .intro, .testimonials, .persona, .about, .fit { padding: 5rem 0; }
  .closing { padding: 5rem 0 4rem; }
  .container, .container--narrow { padding: 0 1.25rem; }
  .form-card { padding: 1.75rem 1.3rem; }
  .change-grid { grid-template-columns: 1fr; }
  .path-step { padding: 1.6rem 1.4rem; }
  .notice { padding: 1.4rem 1.4rem; }
  .row-two { grid-template-columns: 1fr; }
  .hero-scroll { display: none; }
  .tm-quote { font-size: 1.15rem; }
  .tm-quote-mark { font-size: 3.5rem; }
  .price-amount { font-size: 1.8rem; }
  .popup-card { padding: 2.2rem 1.5rem 1.6rem; border-radius: 26px; }
  .popup-title { font-size: 1.85rem; margin-bottom: 1.4rem; }
  .popup-kicker { font-size: 1.25rem; }
  .popup-events .event-card { padding: 1.3rem 1.3rem; }
  .popup-events .event-title { font-size: 1.18rem; }

  /* Touch targets generosos */
  .btn { min-height: 48px; }
  .form-card input,
  .form-card button,
  .form-card textarea { min-height: 48px; font-size: 16px; }

  /* Footer sutil */
  .footer-center { gap: 1rem; }
  .footer-social { font-size: 0.78rem; letter-spacing: 0.12em; }

  /* Cerrar el aire entre title-block y body en mobile */
  .section-head { margin-bottom: 2rem; }
}

@media (max-width: 480px) {
  .display { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .display--md { font-size: clamp(2rem, 9vw, 2.6rem); }
  .display--sm { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .shots-track { grid-auto-columns: 78%; }
  .closing-quote { font-size: clamp(1.2rem, 5vw, 1.55rem); }
  .btn { padding: 0.95rem 1.7rem; font-size: 0.85rem; }
  .hero-headline { font-size: clamp(2.2rem, 11vw, 3rem); }

  /* Hero anchor en una sola linea (con balance fallback en pantallas ultra-narrow) */
  .hero-anchor {
    font-size: clamp(0.85rem, 3.9vw, 1rem);
    line-height: 1.4;
    letter-spacing: -0.005em;
    max-width: 100%;
    text-wrap: balance;
  }

  /* Intro flow en una sola linea */
  .intro-flow { font-size: 0.62rem; letter-spacing: 0.12em; }
  .intro-flow .arrow { margin: 0 0.35rem; }

  /* Hero pill compacto y con wrap balanceado */
  .hero-pillars-line {
    font-size: 0.78rem;
    padding: 0.5rem 1.05rem;
    letter-spacing: 0.01em;
    text-wrap: balance;
    max-width: 92%;
  }

  /* Persona cards */
  .persona-card { padding: 1.25rem 1.3rem; }
  .persona-text { font-size: 0.95rem; line-height: 1.55; }
  .persona-card.persona-card--final .persona-text { font-size: 1.05rem; }

  /* Es para ti */
  .fit-grid { padding: 1.75rem 1.25rem; gap: 2rem; }
  .fit-col h3 { font-size: 1.25rem; }
  .fit-list li { font-size: 0.95rem; }

  /* Cierre */
  .closing-quote { line-height: 1.35; }
  .closing-signature { font-size: 1.4rem; }

  /* Becoming HER badge — mobile */
  .becoming-badge { max-width: 240px; padding: 1.6rem; box-shadow: 7px 10px 0 var(--ink); }
  .becoming-badge-label { font-size: 1.3rem; }
  .becoming-badge-sub { font-size: 0.72rem; margin-top: 0.6rem; }

  /* Collabs — mobile */
  .collabs { padding: 4rem 0; }
  .collabs-card { padding: 2.5rem 1.5rem; border-radius: 22px; box-shadow: 8px 10px 0 var(--ink); }
  .collabs-kicker { font-size: 1.3rem; }
  .collabs-body { font-size: 0.98rem; }

  /* Botones apilados a ancho completo */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: center; white-space: normal; text-align: center; }

  /* Par de fotos: una columna y formato apaisado, para no alargar la pagina */
  .photo-duo { grid-template-columns: 1fr; }
  .photo-duo > .photo-card { aspect-ratio: 4 / 3; }
  .photo-duo > .photo-card:nth-child(2) { margin-top: 0; }

  /* Precios y capturas */
  .price-amount { font-size: 1.65rem; }
  .photo-pending-shot { font-size: 0.82rem; }

  /* Bignum más sutil */
  .bignum { font-size: clamp(4rem, 18vw, 6rem); top: 0.5rem; right: 0.5rem; opacity: 0.18; }
}

@media (max-width: 380px) {
  .popup-card { padding: 1.85rem 1.2rem 1.4rem; border-radius: 22px; }
  .popup-title { font-size: 1.6rem; }
  .popup-events .event-card { padding: 1.15rem 1.1rem; border-radius: 18px; }
}

/* ============================================================
   RONDA 09-09 — componentes nuevos
   Todo lo de aqui abajo sale del PDF de cambios del 09-09. Va al final a
   proposito: son reglas nuevas y asi ganan por orden sin pelearse con las
   media queries de arriba, que no tocan ninguno de estos selectores.
   ============================================================ */

/* ---- Barra superior con enlaces (p.15) --------------------------------
   Antes la barra solo llevaba la marca y el boton de idioma. En movil no
   caben marca + 5 enlaces + boton en una fila, asi que la fila de enlaces
   scrollea en horizontal con la barra oculta: el mismo recurso que ya usan
   los carruseles, y la misma forma de pildora que .lang-toggle y .tag.
   Sin hamburguesa y sin JS nuevo. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0 0.75rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--body);
  font-size: 0.84rem;
  color: var(--ink);
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav-links a:hover { background: var(--lemon); border-color: var(--ink); }
.nav-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Que el ancla no aterrice debajo de la barra fija */
#intro, #tu-historia, #becoming-her, #uno-a-uno, #es-para-ti,
#testimonios, #miniatura, #encuentro, #sobre-fabi, #collabs {
  scroll-margin-top: calc(var(--nav-height) + 12px);
}

/* ---- CTA del hero mas grande y con latido (p.2) ----------------------
   El latido va sobre la sombra, no sobre un scale: en una pildora de radio
   100 el scale se ve barato. Se para al pasar por encima para no pelearse
   con la sombra dura de .btn:hover. */
.btn--lg { padding: 1.25rem 2.7rem; font-size: 1.02rem; }
.btn--pulse { animation: btn-pulse 2.6s var(--ease) infinite; }
.btn--pulse:hover, .btn--pulse:focus-visible { animation: none; }
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 125, 58, 0.5); }
  55%      { box-shadow: 0 0 0 15px rgba(237, 125, 58, 0); }
}

/* ---- Cabecera a dos columnas de las secciones 01 y 02 (p.5, p.9) ----- */
.section-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* El video vertical es mucho mas alto que su texto: centrado, el hueco se
   reparte arriba y abajo en vez de caer todo debajo del parrafo. */
.section-hero--tall { align-items: center; }
.section-hero-media, .section-hero-text { min-width: 0; }
/* .explain e .intro-lead vienen centrados por sus estilos de seccion;
   dentro de la cabecera van alineados a la izquierda con el titulo. */
.section-hero-text .explain,
.section-hero-text .intro-lead,
.section-hero-text .body-copy { margin-left: 0; margin-right: 0; text-align: left; }
.section-hero-text .explain { font-size: 1.22rem; color: var(--ink); max-width: 30em; }
.section-hero-media .photo-card { max-width: none; }

/* ---- Los tres pasos de la membresia (p.6) ----------------------------
   01 y 02 son una secuencia de verdad (dias 1 a 21, dia 22); el 03 es el
   ritmo semanal. Reusa .path-day/.path-title/.path-copy y .inside-* para
   no duplicar tipografia. */
.steps { display: grid; gap: 1.2rem; align-content: start; }
.step-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.3rem;
  align-items: start;
  padding: 1.7rem 1.6rem;
  border-radius: 22px;
  border: 1.5px solid var(--ink);
  box-shadow: 8px 10px 0 var(--ink);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.step-card:hover { transform: translate(-3px, -3px); box-shadow: 12px 14px 0 var(--ink); }
.step-num {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144, 'wght' 400;
  font-size: 2.8rem;
  line-height: 0.9;
  color: var(--pumpkin);
  opacity: 0.85;
  user-select: none;
}
.step-body { min-width: 0; }
.step-body .path-title { margin-top: 0.35rem; }
.step-list { list-style: none; display: grid; gap: 0.95rem; margin-top: 1.1rem; }
.step-list > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}
.step-list .inside-mark { margin-top: 0.3rem; }
.step-list .inside-title { font-size: 1rem; }
.step-list .inside-copy { margin-top: 0.2rem; }

/* ---- La lista de extras, ahora a todo el ancho (p.7) ----------------- */
.extras-list { max-width: 64em; margin-inline: auto; }
@media (min-width: 780px) {
  .extras-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.6rem; row-gap: 0.95rem; }
}

/* ---- Fila de precios de tres, con el video (p.7) --------------------- */
/* Dos columnas: la estrecha lleva los dos planes apilados, la ancha el video.
   Asi el video (16/9) crece de verdad, que es lo que pidio Fabi. */
/* Sin align-items:start las dos columnas miden lo mismo de alto, que es lo que
   pidio Fabi: con start, la del video quedaba 122 px mas corta y ese hueco se
   leia como si faltara un trozo. */
.events-list--video { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
.price-stack { display: grid; gap: 1.5rem; align-content: start; }
/* Las dos tarjetas de plan, del mismo tamano entre ellas pero mas compactas que
   antes, que es lo que deja sitio a la tercera. */
.price-stack .event-card { display: flex; flex-direction: column; padding: 1.45rem 1.5rem; }
.price-stack .event-card .tag-row { margin-top: auto; }
.price-stack .price-amount { font-size: 1.75rem; }
.price-stack .card-copy { font-size: 0.92rem; }
.events-list--video .card-video { display: flex; flex-direction: column; }
/* El marco se queda en 16/9: no se agranda para rellenar porque el video lleva
   subtitulos quemados de lado a lado y recortarlo con cover se los comeria. El
   contenido fluye desde arriba y el sobrante de alto cae al fondo de la tarjeta,
   donde se lee como margen. Centrarlo con margin:auto dejaba un agujero justo
   debajo del titulo, que quedaba peor que el desnivel original. */
.card-video-frame {
  aspect-ratio: 16 / 9;
  margin: 1.1rem 0 1.2rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background: var(--ink);
}
.card-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Videos verticales del 1:1 (p.9, p.11) --------------------------- */
.photo-card.photo-card--vertical { aspect-ratio: 9 / 16; max-width: 340px; margin-inline: auto; }
.photo-duo--stack { grid-template-columns: 1fr; gap: 1.5rem; justify-items: center; }
.photo-duo--stack > .photo-card { aspect-ratio: auto; }
.photo-duo--stack > .photo-card:nth-child(2) { margin-top: 0; }
.photo-duo--stack > .photo-card:not(.photo-card--vertical) { aspect-ratio: 4 / 3; max-width: 360px; }

/* ---- Los splits que llevan un carrusel dentro -----------------------
   .split usa 1fr 1fr, y 1fr es minmax(auto, 1fr): el minimo es el min-content
   del hijo. Al meter un carrusel en .split-text su min-content se disparo y se
   comio la otra columna, que quedaba calculada en 0px, asi que el video del
   testimonio desaparecia de la pagina sin ningun error. minmax(0, 1fr) permite
   que la columna de texto encoja, y el min-width:0 hace lo propio con el hijo. */
/* Va dentro de un min-width a proposito: lleva un #id, y sin la guarda le
   ganaba por especificidad al `.split { grid-template-columns: 1fr }` de la
   media query de 768, dejando las dos columnas en movil y desbordando la
   pagina (que con overflow-x:hidden recorta en vez de avisar). */
@media (min-width: 769px) {
  /* El 1:1 se queda a dos columnas. La Membresia pasa a una sola desde el
     12-09: el copy y la frase manuscrita ocupan todo el ancho, paralelos a la
     cabecera de arriba, y debajo van el carrusel y los tres pasos. */
  #uno-a-uno .split--top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #becoming-her .split--top { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}
#becoming-her .split--top > *,
#uno-a-uno .split--top > * { min-width: 0; }

/* ---- Variantes de carrusel ------------------------------------------
   Las capturas de "Voces" van de dos en dos y no de tres: a tres, un
   pantallazo de 800px de ancho se renderiza al 37% y la letra se pierde.
   El de la plataforma y el de las frases si van de tres. */
.shots--platform { margin-top: 0; }
.shots--platform .shots-track { grid-auto-columns: 74%; }
.shots--platform .shots-controls { margin-top: 1rem; }
/* Las portadas ya traen su propio color de fondo a sangre, asi que el crema del
   tile no se ve y el borde es lo que las separa entre si. */
.shots--platform .shot-tile { background: var(--ink); }
/* Va dentro de la columna de texto del split, que es media pagina: de dos en
   dos, si no las frases quedan en tarjetas demasiado estrechas. */
.shots--change { margin-top: 2.2rem; }
.shots--change .shots-track { align-items: stretch; grid-auto-columns: calc((100% - 1.1rem) / 2); }
.shots--change .shots-controls { margin-top: 1.1rem; }
.shots--change .change-card { height: 100%; scroll-snap-align: start; }
#shotsTrack { grid-auto-columns: calc((100% - 1.1rem) / 2); }

/* ---- La practica: textos mas grandes (p.13) -------------------------
   .explain y .body-copy son globales, asi que el aumento va con alcance
   #miniatura. El max-width baja en paralelo para que la linea no pase de
   unos 70 caracteres al crecer la letra. */
#miniatura .handwritten { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
#miniatura .explain     { font-size: 1.3rem; line-height: 1.6; max-width: 28em; }
#miniatura .body-copy   { font-size: 1.2rem; line-height: 1.8; max-width: 30em; }

/* ---- Responsive de lo nuevo ----------------------------------------- */
@media (max-width: 900px) {
  .section-hero, .section-hero--tall { grid-template-columns: 1fr; }
  .section-hero-media { max-width: 420px; margin-inline: auto; }
  #becoming-her > .container > .section-hero > .section-hero-text,
  #uno-a-uno > .container > .section-hero > .section-hero-text { padding-right: 0; }
  .events-list--video { grid-template-columns: 1fr; }
  .shots--platform .shots-track { grid-auto-columns: 78%; }
}
@media (max-width: 768px) {
  .nav-inner { padding: 0 1rem; }
  .nav-brand { font-size: 1.05rem; flex-shrink: 0; }
  .nav-links { margin: 0 0.4rem; }
  .step-card { padding: 1.4rem 1.2rem; gap: 1rem; }
  .step-num { font-size: 2.2rem; }
}
@media (max-width: 480px) {
  #shotsTrack { grid-auto-columns: 86%; }
  .shots--platform .shots-track { grid-auto-columns: 88%; }
  .btn--lg { padding: 1.05rem 1.9rem; font-size: 0.92rem; }
  #miniatura .explain   { font-size: 1.15rem; }
  #miniatura .body-copy { font-size: 1.08rem; }
  .photo-duo--stack > .photo-card:not(.photo-card--vertical) { aspect-ratio: 4 / 3; }
}

/* ---- Suelo de calidad: nada de movimiento si no lo quieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn--pulse { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .step-card, .btn, .photo-card { transition: none; }
  .hero-scroll { animation: none; }
}


/* ============================================================
   RONDA 12-09
   ============================================================ */

/* ---- Punto 6: sangrado desigual en movil ---------------------------
   El contenedor es simetrico (20px a cada lado bajo 768px), pero cada
   tarjeta pinta una sombra dura HACIA LA DERECHA y fuera de su caja, asi
   que el sangrado derecho se lee como 20px menos la sombra mientras el
   izquierdo se queda entero. section{overflow:hidden} recorta lo que
   sobra, asi que no hay scroll: solo se ve torcido.
   Reservar el ancho de la sombra iguala los dos lados sin tocar el diseno.
   El margen de cada regla es exactamente el desplazamiento X de su sombra. */
@media (max-width: 768px) {
  .event-card                      { margin-right: 6px; }
  .persona-card                    { margin-right: 6px; }
  .step-card                       { margin-right: 8px; }
  .fit-grid,
  .form-card,
  .price-card.is-best              { margin-right: 10px; }
  .collabs-card                    { margin-right: 12px; }
  /* .notice no lleva sombra, solo borde discontinuo: no necesita reserva. */
}

/* ---- Punto 6: el final de las tarjetas del 1:1 ---------------------
   .btn lleva white-space:nowrap y nunca se relaja para .event-cta, asi que
   "Escribeme y agendamos la llamada" no podia partir y empujaba contra el
   borde de la tarjeta. Y la letra pequena de debajo solo tenia un margen
   puesto a mano en el HTML, asi que los tres bloques grises se juntaban. */
@media (max-width: 768px) {
  .event-cta .btn {
    white-space: normal;
    text-align: center;
    justify-content: center;
    width: 100%;
    line-height: 1.35;
  }
  .event-cta { padding-top: 0.4rem; }
  .event-cta .fine-print { margin-top: 0.9rem !important; }
  .fit-list + .fine-print,
  .fine-print + .fine-print { margin-top: 0.8rem; }
}

/* ---- Punto 9: el carrusel de frases del 1:1 ------------------------
   Sin la flecha, la tarjeta ya no necesita ser una fila. */
.change-card { display: block; }

/* La tarjeta de la derecha salia cortada por dos motivos a la vez: la pista no
   reservaba sitio a la sombra de 7px, que cae fuera del overflow, y
   #changeTrack no recibia ninguna regla en 768 ni en 480, asi que se quedaba
   a 2 por vista hasta en un movil de 320px. */
/* el relleno lo lleva .shots-track por los cuatro lados desde el 12-09 */
@media (max-width: 768px) {
  /* 94% y no 88%: a 88% asomaba texto de la tarjeta siguiente cortado a media
     letra, que es justo lo que Fabi leyo como "se ve cortada". A 94% solo asoma
     el borde redondeado, que dice que hay mas sin cortar nada legible. */
  .shots--change .shots-track { grid-auto-columns: 94%; }
}

/* ---- Punto 3: menu de movil ----------------------------------------
   En escritorio no existe: los cinco enlaces siguen en linea como hasta ahora.
   El boton usa la misma pildora con borde ink que .lang-toggle, para que la
   barra no gane un lenguaje nuevo, y va etiquetado con la palabra "Menu"
   ademas del icono, porque el problema era justo de descubrimiento. */
.nav-menu-btn { display: none; }

@media (max-width: 768px) {
  .nav-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 0.5rem;
    font-family: var(--body);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--ink);
    padding: 0.42rem 0.85rem;
    border-radius: 100px;
    cursor: pointer;
    min-height: 40px;
  }
  .nav-menu-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .nav-menu-bars { display: inline-flex; flex-direction: column; gap: 3px; width: 14px; }
  .nav-menu-bars i {
    display: block; height: 1.5px; width: 100%;
    background: var(--ink); border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
  }
  /* Las tres lineas se cruzan en aspa cuando el panel esta abierto. */
  .nav-menu-btn[aria-expanded="true"] .nav-menu-bars i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .nav-menu-btn[aria-expanded="true"] .nav-menu-bars i:nth-child(2) { opacity: 0; }
  .nav-menu-btn[aria-expanded="true"] .nav-menu-bars i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

  /* El panel cuelga por debajo de la barra sin cambiar su altura: .nav es
     position:fixed, asi que ya hace de bloque contenedor. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
    background: var(--cream);
    border-bottom: 1px solid rgba(26, 26, 26, 0.12);
    box-shadow: 0 14px 24px -18px rgba(26, 26, 26, 0.55);
    padding: 0.4rem 1rem 0.8rem;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li + li { border-top: 1px solid rgba(26, 26, 26, 0.10); }
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 0.98rem;
    padding: 0.5rem 0.4rem;
    border-radius: 12px;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-bars i { transition: none; }
}

/* ---- Punto 11: un solo carrusel en Testimonios ---------------------
   Las citas eran un crossfade con posicion absoluta, que existia porque van
   de una linea a unas 180 palabras. Al pasar a la pista, la tarjeta de texto
   necesita ancho propio y alto natural, como ya hacen las capturas. */
.tm-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: auto;
  padding: 1.9rem 1.6rem;
  text-align: center;
  background: var(--cream);
}
.tm-tile .tm-quote-mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 0.6;
  color: var(--pumpkin);
  margin-bottom: 0.9rem;
}
.tm-tile .tm-quote {
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 90, 'wght' 400;
  font-size: clamp(1.02rem, 1.15vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
  /* Sin tope de altura a proposito: acotarlas cortaba dos testimonios a media
     frase, y un testimonio cortado se lee como un fallo. La fila mide lo que
     el tile mas alto, y las capturas ya varian igual. */
}
.shots--voces .shots-track { grid-auto-columns: calc((100% - 1.1rem) / 2); }
.shots--voces .shots-controls { margin-top: 1.6rem; }

/* Con 31 tiles la fila de puntos ocupaba tres lineas: contador en su lugar. */
.tm-counter {
  font-family: var(--body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  min-width: 5.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .shots--voces .shots-track { grid-auto-columns: 94%; }
  .tm-tile { padding: 1.6rem 1.3rem; }
  .tm-tile .tm-quote { font-size: 0.98rem; }
}

/* ---- Punto 6 (12-09): "Becoming HER" en el cuerpo ------------------
   Questrial tiene un solo peso, asi que la negrita de verdad pasa por cambiar
   a Fraunces, igual que hace .lead-in. */
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 90, 'wght' 700;
  font-style: italic;
}

/* ---- Punto 4 (12-09): la pildora del menu, igual que la del idioma --
   .nav-menu-btn llevaba min-height:40px, y eso era todo lo que la hacia mas
   alta. Se igualan los cinco valores que las diferenciaban. */
@media (max-width: 768px) {
  .nav-menu-btn {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    padding: 0.4rem 0.95rem;
    min-height: 0;
    gap: 0.45rem;
    position: relative;
  }
  /* La pildora se ve igual que la de idioma, pero el area que responde al dedo
     sigue siendo comoda: el pseudo-elemento la extiende sin pintarse. */
  .nav-menu-btn::after {
    content: '';
    position: absolute;
    inset: -8px -6px;
  }
  .nav-menu-bars { width: 13px; gap: 2.5px; }
}

/* ---- Punto 8 (12-09): aire y boton en las tarjetas del 1:1 ---------
   El padding-top de .event-cta se quedo corto, y el boton seguia siendo un
   flex con gap, asi que al partir de linea la flecha quedaba suelta a la
   derecha y despegada de la ultima palabra. */
@media (max-width: 768px) {
  .event-cta { padding-top: 1.1rem; }
  .event-cta .fine-print { margin-top: 1rem !important; }
  .fit-list + .fine-print { margin-top: 1.3rem; }
  .fine-print + .fine-print { margin-top: 0.9rem; }

  .event-cta .btn {
    display: block;          /* deja de ser flex: la flecha fluye con el texto */
    padding: 1rem 1.5rem;
    line-height: 1.45;
    font-size: 0.88rem;
    /* Reparte las lineas para que la flecha no se quede sola en la ultima. */
    text-wrap: balance;
  }
  .event-cta .btn .btn-arrow { display: inline; margin-left: 0.45rem; }
  /* En tactil el translateY del hover deja el boton movido despues del toque. */
  .event-cta .btn:hover { transform: none; }
}

/* ---- Punto 9 (12-09): tarjetas centradas y sin recortes ------------
   Dos cosas a la vez. Una: scroll-snap-align:start pegaba la tarjeta a la
   izquierda y dejaba todo el asomo a la derecha. Con relleno simetrico y
   scroll-padding a juego, la posicion de snap queda centrada y el calculo de
   indices del JS sigue valiendo tal cual.
   Dos: overflow-x:auto obliga a que el eje Y tambien recorte (CSS no permite
   visible en un eje y auto en el otro), asi que la sombra dura se cortaba
   arriba y a los lados. El relleno por los cuatro lados le da sitio. */
.shots-track {
  --peek: 16px;
  padding-inline: var(--peek);
  scroll-padding-inline: var(--peek);
  padding-block: 12px 16px;
  overflow-y: hidden;
}

@media (max-width: 768px) {
  /* Una tarjeta centrada y entera. El asomo de la siguiente se retira: era
     justo lo que se leia como "se ve cortada", y las flechas y el contador ya
     dicen que hay mas. */
  .shots--change .shots-track,
  .shots--voces .shots-track,
  .shots--platform .shots-track,
  #shotsTrack { grid-auto-columns: 100%; }
}

/* ---- Punto 11 (12-09): el espacio muerto del carrusel de Voces -----
   Una rejilla de una sola fila mide lo que su elemento mas alto, y el
   testimonio largo pasa de 1.500px en movil: el resto de diapositivas
   quedaban flotando en ese vacio. La altura la fija el JS segun la
   diapositiva activa; aqui solo va la transicion. */
.shots--voces .shots-track { transition: height 0.35s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .shots--voces .shots-track { transition: none; }
}


/* ============================================================
   RONDA 12-09 (segunda vuelta)
   ============================================================ */

/* ---- Flechas a los lados, estilo Instagram -------------------------
   Antes vivian debajo, en la fila de controles, asi que se movian en
   vertical cada vez que el carrusel cambiaba de alto. Ahora van ancladas
   a los lados de la tarjeta y no se mueven nunca. */
.tm-arrow--side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  background: rgba(255, 252, 245, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px -3px rgba(26, 26, 26, 0.45);
}
.tm-arrow--prev { left: 2px; }
.tm-arrow--next { right: 2px; }

/* Atenuadas mientras no se usan, a color pleno al pasar por encima, al
   enfocarlas con el teclado o al tocarlas (en tactil no hay hover, por eso
   :active). La transicion de .tm-arrow no incluye opacity, se anade aqui. */
.tm-arrow--side {
  opacity: 0.55;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              transform 0.3s var(--ease), opacity 0.25s var(--ease);
}
.tm-arrow--side:hover,
.tm-arrow--side:focus-visible,
.tm-arrow--side:active { opacity: 1; }
/* El translateY(-2px) de .tm-arrow:hover se cargaria el centrado vertical. */
.tm-arrow--side:hover { transform: translateY(-50%) scale(1.06); }

/* ---- Que la flecha no se coma el contenido (12-09) -----------------
   La flecha ocupa 42px mas 2px de margen desde el borde, asi que el texto de
   las tarjetas necesita 48px libres a cada lado o queda por debajo. */
.tm-tile,
.shots--change .change-card { padding-inline: 3.1rem; }

@media (min-width: 769px) {
  /* En Voces si hay sitio fuera de la tarjeta (560px dentro de un contenedor
     mas ancho), asi que ahi las flechas salen del todo y no hace falta
     reservar nada por dentro. */
  .shots--voces .tm-arrow--prev { left: -58px; }
  .shots--voces .tm-arrow--next { right: -58px; }
  .shots--voces .tm-tile { padding-inline: 2rem; }
}
/* La fila de abajo ya solo lleva puntos o contador, asi que se centra sola. */
.shots-controls { display: flex; justify-content: center; }

/* ---- Que no asome el vecino ----------------------------------------
   Con relleno de 16px y hueco de 1.1rem, la tarjeta anterior queda a -1.6px
   del borde, pero su sombra dura de 7px si entraba: ese era el trocito negro
   feo de la izquierda. Separando las tarjetas 2rem, la sombra cae fuera. */
.shots-track { gap: 2rem; }

/* ---- Punto 9: el texto, centrado tambien en vertical ---------------
   .shots--change .change-card lleva height:100% para que todas midan igual,
   asi que el texto se quedaba pegado arriba en las tarjetas cortas. */
.shots--change .change-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* ---- Voces: una tarjeta por vista tambien en escritorio ------------
   A dos por vista, el alto de la pista lo fija la diapositiva activa (lo
   necesita el testimonio largo), asi que la vecina mas alta se recortaba
   arriba y abajo: eso era lo que se veia mal en la web de escritorio.
   Con una sola por vista el alto siempre es el correcto. */
/* El ancho lo limita el CONTENEDOR, no la pista. Intentarlo con relleno en
   porcentaje no vale: el porcentaje del padding se resuelve contra el bloque
   contenedor y el del gap contra la propia caja de contenido, asi que el hueco
   nunca llegaba a superar al relleno y la tarjeta vecina se colaba dentro,
   recortada por arriba y por abajo. Limitando el contenedor, la vecina queda
   sencillamente fuera del area visible. */
.shots--voces .shots-carousel { max-width: 560px; margin-inline: auto; }
.shots--voces .shots-track { grid-auto-columns: 100%; }
}

/* ---- Escritorio: la Membresia se apila a todo el ancho (12-09) -----
   Fila 1: el copy y la frase. Fila 2: las portadas de la plataforma, de tres
   en tres. Fila 3: los tres pasos, uno al lado del otro. El 03 sale mas alto
   porque lleva cuatro vinetas, y asi se queda. */
@media (min-width: 769px) {
  /* Las tres, del mismo alto: con align-items:start la 03 sacaba media pantalla
     de diferencia y la fila quedaba dentada. */
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
  .steps .step-card { height: 100%; }
  /* El copy y la frase manuscrita ocupan el ancho, que es lo que los pone en
     paralelo con la cabecera de arriba. */
  #becoming-her .split--top .body-copy { max-width: 62em; }
  #becoming-her .split--top .handwritten--chip { display: block; }
  .shots--platform .shots-track { grid-auto-columns: calc((100% - 2.2rem) / 3); }
  /* Las dos tarjetas de plan estaban demasiado juntas. */
  .price-stack { gap: 2.2rem; }
}

/* ---- Escritorio: las dos tarjetas del 1:1 (12-09) ------------------
   Mismo aire arriba y abajo, y el boton centrado en las dos, que es lo que
   las hace leerse como un par y no como dos cosas distintas. */
@media (min-width: 769px) {
  #uno-a-uno .event-card { padding: 2.2rem 2.1rem; }
  #uno-a-uno .event-cta { padding-top: 1.6rem; text-align: center; }
  #uno-a-uno .event-cta .btn { margin-inline: auto; }
  #uno-a-uno .event-cta .fine-print { margin-inline: auto; text-align: center; max-width: 40em; }
  #uno-a-uno .card-copy + .card-copy { margin-top: 1rem; }
  #uno-a-uno .fit-list + .fine-print { margin-top: 1.4rem; }
  #uno-a-uno .fine-print + .fine-print { margin-top: 0.8rem; }
}

/* ---- "Es para ti": las vinetas alineadas entre columnas (12-09) ----
   Las dos listas eran independientes, asi que un texto de dos lineas a la
   izquierda descuadraba todos los iconos de la derecha. Con subgrid las dos
   comparten las mismas filas y los checks y las equis quedan a la misma
   altura. display:contents se lleva la semantica de lista, y por eso el ul
   lleva role="list" en el HTML. */
@media (min-width: 769px) {
  .fit-grid { grid-template-rows: auto repeat(8, auto); }
  .fit-col { display: grid; grid-row: span 9; grid-template-rows: subgrid; gap: 0; }
  .fit-col h3 { margin-bottom: 0; padding-bottom: 1.4rem; }
  .fit-col .fit-list { display: contents; }
  .fit-col .fit-list li { padding-bottom: 0.95rem; align-items: start; }
}

/* ---- Movil: la flecha pisa lo menos posible (12-09) ----------------
   A 400px no hay sitio fisico fuera de la tarjeta (solo 16px de relleno),
   asi que no se puede sacar del todo como en escritorio. Se reduce y se pega
   al borde para que el solape baje de 24px a 13px, y con la opacidad al 55%
   deja ver lo que hay debajo. Es el mismo comportamiento que Instagram. */
@media (max-width: 768px) {
  .tm-arrow--side { width: 34px; height: 34px; font-size: 1rem; }
  .tm-arrow--prev { left: -1px; }
  .tm-arrow--next { right: -1px; }
  .tm-tile,
  .shots--change .change-card { padding-inline: 2.6rem; }
}

/* ---- Modal de captura tras un CTA (12-09) --------------------------
   Reusa .popup-overlay / .popup-card, que ya son accesibles. Solo cambia el
   ancho: aqui hay dos campos, no un formulario entero. */
.popup-card--slim { max-width: 460px; }
.popup-card--slim .field-label { margin-bottom: 0.35rem; }
.popup-card--slim .form-status:empty { display: none; }

/* ---- Aviso de cookies (12-09) --------------------------------------
   Barra abajo, no modal: no bloquea la lectura mientras se decide, y las dos
   opciones tienen el mismo peso y cuestan un clic cada una. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  background: var(--cream);
  border-top: 1.5px solid var(--ink);
  box-shadow: 0 -10px 30px -20px rgba(26, 26, 26, 0.7);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease);
}
.consent.visible { transform: translateY(0); }
.consent-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.1rem 2rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.consent-text { flex: 1; min-width: 0; }
.consent-text strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 0.3rem;
}
.consent-text p {
  font-family: var(--body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}
.consent-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink);
  border-bottom: 1.5px solid var(--pumpkin);
}
.consent-acciones { display: flex; gap: 0.7rem; flex-shrink: 0; }
.consent-acciones .btn { padding: 0.8rem 1.6rem; font-size: 0.85rem; }

@media (max-width: 768px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem 1.25rem 1.2rem; }
  .consent-acciones .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ---- Páginas legales (12-09) ---------------------------------------
   Lectura larga y sobria: una columna, línea corta y nada de decoración.
   Reusa el sistema tipográfico, no inventa uno nuevo. */
.legal { background: var(--cream); padding: 7rem 0 5rem; }
.legal-inner { max-width: 760px; margin: 0 auto; padding: 0 2rem; }
.legal h2 {
  font-family: var(--display); font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 900;
  font-size: 1.45rem; line-height: 1.2;
  margin: 2.6rem 0 0.9rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  margin: 1.6rem 0 0.5rem;
}
.legal p, .legal li {
  font-family: var(--body); font-size: 0.98rem; line-height: 1.75; color: var(--ink);
}
.legal p + p { margin-top: 0.9rem; }
.legal ul, .legal ol { margin: 0.8rem 0 0.9rem 1.2rem; }
.legal li + li { margin-top: 0.45rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.1rem; font-size: 0.9rem; }
.legal th, .legal td {
  text-align: left; padding: 0.6rem 0.7rem;
  border-bottom: 1px solid rgba(26,26,26,0.14); vertical-align: top;
}
.legal th { font-family: var(--display); font-weight: 700; }
.legal .fecha { font-size: 0.85rem; color: var(--muted); margin-top: 2.6rem; }
.legal-volver { display: inline-block; margin-bottom: 2rem; font-size: 0.9rem; border-bottom: 1.5px solid var(--pumpkin); }

/* Enlaces legales en el pie */
.footer-legal { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.footer-legal a { font-family: var(--body); font-size: 0.82rem; color: rgba(255,252,245,0.72); }
.footer-legal a:hover { color: var(--cream); border-bottom: 1px solid var(--cream); }

@media (max-width: 768px) {
  .legal { padding: 5rem 0 3.5rem; }
  .legal-inner { padding: 0 1.25rem; }
}