/* ==========================================================================
   MEDICINE WOMAN, Mother Wisdom
   Design system: "Earthy sacred elegance"
   ========================================================================== */

:root {
  /* Palette */
  --ivory: #F8F1E7;
  --white-warm: #FFFDF8;
  --sand: #E8D7C3;
  --terracotta: #B86F52;
  --terracotta-dark: #9C5A40;
  --cacao: #5B3A2E;
  --gold: #B8955A;
  --sage: #7D8A6A;
  --sage-dark: #63715350;
  --charcoal: #2F2926;
  --taupe: #7A665B;

  --bg: var(--ivory);
  --bg-alt: var(--white-warm);
  --line: rgba(91, 58, 46, 0.14);
  --shadow-soft: 0 20px 60px rgba(47, 41, 38, 0.10);
  --shadow-card: 0 10px 30px rgba(91, 58, 46, 0.10);

  /* Type */
  --font-display: "Cormorant Garamond", "Playfair Display", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-nav: "Montserrat", "Inter", -apple-system, "Segoe UI", sans-serif;

  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 8px;

  --container: 1280px;
  --nav-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden tiene que ganar siempre. Varias clases del sitio fijan
   su propio display (.eyebrow es inline-flex, por ejemplo) y eso pisa la
   regla del navegador, con lo que un bloque marcado hidden se seguia
   pintando: es lo que hacia salir dos kickers en el checkout. */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--cacao);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
p { margin: 0 0 1em; color: var(--charcoal); }
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 900px) { .container { padding-inline: 40px; } }

section { position: relative; }
.section-pad { padding-block: clamp(44px, 7vw, 96px); }
.section-pad-sm { padding-block: clamp(40px, 6vw, 72px); }

/* ---------- Utility ---------- */
.eyebrow {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--taupe);
  max-width: 62ch;
}
.center { text-align: center; margin-inline: auto; }
.text-sage { color: var(--sage); }
.divider {
  width: 64px;
  height: 2px;
  background: var(--gold);
  margin: 28px auto;
  border: 0;
}
.divider--left { margin-left: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--cacao);
  color: var(--white-warm);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-nav);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--terracotta);
  color: var(--white-warm);
  box-shadow: 0 12px 28px rgba(184,111,82,0.32);
}
.btn-primary:hover { background: var(--terracotta-dark); box-shadow: 0 16px 34px rgba(184,111,82,0.4); }
.btn-outline {
  background: transparent;
  color: var(--cacao);
  border-color: var(--cacao);
}
.btn-outline:hover { background: var(--cacao); color: var(--white-warm); }
.btn-ghost {
  background: transparent;
  color: var(--white-warm);
  border-color: rgba(255,253,248,0.55);
}
.btn-ghost:hover { background: rgba(255,253,248,0.14); border-color: var(--white-warm); }
.btn-sage {
  background: var(--sage);
  color: var(--white-warm);
}
.btn-sage:hover { background: #6b7758; }
/* Light secondary button — for lower-priority CTAs sitting on a dark
   background (e.g. individual course options next to the bundle CTA). */
.btn-light {
  background: var(--white-warm);
  color: var(--terracotta-dark);
  border-color: var(--terracotta);
  box-shadow: none;
}
.btn-light:hover { background: var(--sand); color: var(--cacao); border-color: var(--cacao); }
.btn-sm { padding: 12px 22px; font-size: 0.74rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(248,241,231,0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--ivory); }
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--nav-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 900px) { .nav-wrap { padding-inline: 40px; } }
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.03em;
  color: var(--cacao);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand .brand-sub {
  font-family: var(--font-nav);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-top: 3px;
}
.main-nav {
  display: none;
  align-items: center;
  gap: 30px;
}
.main-nav a {
  font-family: var(--font-nav);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--charcoal);
  position: relative;
  padding-block: 6px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--terracotta);
  transition: right .3s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { right: 0; }
.main-nav a[aria-current="page"] { color: var(--terracotta); }
@media (min-width: 1080px) { .main-nav { display: flex; } }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lang-switch a {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--taupe);
}
.lang-switch a[aria-current="true"] {
  background: var(--cacao);
  color: var(--white-warm);
}
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  align-items: center;
}
.nav-toggle span {
  width: 18px; height: 1.5px;
  background: var(--cacao);
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1080px) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  height: calc(100svh - var(--nav-h));
  background: var(--ivory);
  z-index: 190;
  padding: 32px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cacao);
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1080px) { .mobile-nav { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(72px, 12vw, 140px);
  padding-bottom: clamp(64px, 9vw, 110px);
  overflow: hidden;
  background: linear-gradient(180deg, var(--white-warm) 0%, var(--ivory) 100%);
}
.hero-organic {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 620px; height: 620px;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  background: radial-gradient(circle at 35% 30%, rgba(184,149,90,0.28), transparent 65%),
              radial-gradient(circle at 70% 70%, rgba(125,138,106,0.22), transparent 60%);
  filter: blur(4px);
  pointer-events: none;
}
.hero-organic--left {
  inset: auto auto -30% -14%;
  width: 520px; height: 520px;
  background: radial-gradient(circle at 40% 40%, rgba(184,111,82,0.18), transparent 65%);
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 900px; margin-inline: auto; }
.hero-kicker {
  font-family: var(--font-nav);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 22px;
}
.hero-title {
  margin-bottom: 20px;
  text-wrap: balance;
}
.hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--terracotta-dark);
  max-width: 46ch;
  margin: 0 auto 20px;
  text-wrap: balance;
}
.hero-support {
  font-size: 1.02rem;
  color: var(--taupe);
  max-width: 56ch;
  margin: 0 auto 34px;
}
.hero .btn-row { justify-content: center; }
.hero-ring {
  margin: 46px auto 0;
  width: 92px; height: 92px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}
.hero-ring::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* Page hero (interior pages) */
.page-hero {
  padding-top: clamp(64px, 10vw, 108px);
  padding-bottom: clamp(48px, 7vw, 80px);
  text-align: center;
  background: linear-gradient(180deg, var(--white-warm), var(--ivory));
  border-bottom: 1px solid var(--line);
}
.page-hero .lede { margin-inline: auto; text-align: center; }

/* ---------- Cards ---------- */
.card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow-card);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(184,149,90,0.4);
}
.card-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(184,149,90,0.16), rgba(125,138,106,0.1));
  margin-bottom: 20px;
}
.card-icon svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; }
.card-meta {
  font-family: var(--font-nav);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin-bottom: 10px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--taupe); font-size: 0.96rem; }

.grid {
  display: grid;
  gap: 28px;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- Section variants ---------- */
.section-alt { background: var(--white-warm); }
.section-sand { background: var(--sand); }
.section-cacao {
  background: var(--cacao);
  color: var(--white-warm);
}
.section-cacao h2, .section-cacao h3 { color: var(--white-warm); }
.section-cacao p { color: rgba(255,253,248,0.82); }
.section-cacao .eyebrow { color: var(--gold); }

/* ---------- What is Medicine Woman / intro block ---------- */
.intro-block {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.intro-block .lede { margin-inline: auto; font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--charcoal); }

/* ---------- Two paths ---------- */
.paths {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.path-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  overflow: hidden;
  color: var(--white-warm);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.path-card--women { background: linear-gradient(155deg, #B86F52 0%, #8f4f38 100%); }
.path-card--pro { background: linear-gradient(155deg, #5B3A2E 0%, #3c261e 100%); }
.path-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 260px; height: 260px;
  border-radius: 44% 56% 60% 40% / 45% 40% 60% 55%;
  background: rgba(255,253,248,0.12);
}
.path-card .eyebrow { color: var(--sand); }
.path-card h3 { color: var(--white-warm); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.path-card p { color: rgba(255,253,248,0.86); }

/* ---------- Founder ---------- */
/* Mobile/tablet order (explicit founder request): title, then photo, then
   full text — achieved with named grid areas rather than DOM order, so the
   text stays one accessible reading flow. Desktop keeps the original
   photo-left / copy-right composition: header and text share column 2,
   stacked, exactly as the single founder-copy block read before. */
.founder-block {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "photo" "text";
  align-items: start;
}
.founder-header { grid-area: header; }
.founder-portrait { grid-area: photo; }
.founder-text { grid-area: text; }
@media (min-width: 860px) {
  .founder-block {
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-areas: "photo header" "photo text";
    gap: 12px 48px;
    align-items: start;
  }
  .founder-header { align-self: end; }
}
.founder-portrait {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 20%, rgba(184,149,90,0.35), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(125,138,106,0.3), transparent 55%),
    linear-gradient(160deg, #e9d9c4, #cdb392);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
@media (min-width: 860px) { .founder-portrait { max-width: none; margin-inline: 0; } }
.founder-portrait .initials {
  font-family: var(--font-display);
  font-size: 4.5rem;
  color: var(--white-warm);
  opacity: 0.9;
  letter-spacing: 0.04em;
}
.founder-portrait::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,253,248,0.55);
  border-radius: calc(var(--radius-lg) - 6px);
  z-index: 2;
  pointer-events: none;
}
.founder-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.founder-photo.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .founder-photo { transition: none; }
}
/* Va dentro del último párrafo de la bio, así que tiene que leerse como una
   palabra más: hereda tipografía y tamaño del texto y sólo cambia el color y
   el subrayado. Sigue siendo <button> porque abre un modal, no navega. */
.founder-credentials-cta {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(156, 90, 64, 0.45);
  color: var(--terracotta-dark);
  cursor: pointer;
}
.founder-credentials-cta:hover { color: var(--cacao); text-decoration-color: currentColor; }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
}
.testimonial-mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--cacao);
  margin-bottom: 22px;
}
.testimonial-name {
  font-family: var(--font-nav);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--terracotta-dark);
}
.testimonial-meta {
  font-size: 0.82rem;
  color: var(--taupe);
}

/* ---------- Journal cards ---------- */
.journal-card { display: flex; flex-direction: column; }
.journal-thumb {
  aspect-ratio: 16/10;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  background: linear-gradient(150deg, var(--sand), #f2e6d4);
  position: relative;
  overflow: hidden;
}
.journal-thumb::after {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 180px; height: 180px;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  background: rgba(125,138,106,0.25);
}
.journal-thumb.tone-sage { background: linear-gradient(150deg, #dfe3d6, #c9d1bb); }
.journal-thumb.tone-terracotta { background: linear-gradient(150deg, #e8cdbe, #d9ab93); }
.journal-thumb.tone-gold { background: linear-gradient(150deg, #ecdcbb, #dcc186); }
.journal-cat {
  font-family: var(--font-nav);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin-bottom: 8px;
}

/* ---------- CTA final ---------- */
.cta-final {
  background: var(--cacao);
  color: var(--white-warm);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 80px) clamp(24px, 6vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 340px; height: 340px;
  border-radius: 44% 56% 60% 40% / 45% 40% 60% 55%;
  background: rgba(184,149,90,0.18);
}
.cta-final h2 { color: var(--white-warm); }
.cta-final p { color: rgba(255,253,248,0.82); max-width: 56ch; margin-inline: auto; }
.cta-final .btn-row { justify-content: center; margin-top: 26px; }

/* ---------- Filters (courses) ---------- */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 44px;
}
.filter-chip {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--taupe);
  background: var(--white-warm);
}
.filter-chip[aria-pressed="true"] { background: var(--terracotta); color: var(--white-warm); border-color: var(--terracotta); }

/* ---------- Course detail ---------- */
.course-hero {
  background: linear-gradient(180deg, var(--white-warm), var(--ivory));
  padding-top: clamp(64px, 10vw, 108px);
  padding-bottom: clamp(40px, 6vw, 64px);
  border-bottom: 1px solid var(--line);
}
.course-hero-grid {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) { .course-hero-grid { grid-template-columns: 1.3fr 0.9fr; } }
.course-fact-card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-card);
}
.course-fact-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.course-fact { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; border-bottom: 1px dashed var(--line); padding-bottom: 12px; }
.course-fact strong { color: var(--cacao); font-family: var(--font-nav); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.course-fact span { color: var(--taupe); text-align: right; }

.module-list { display: flex; flex-direction: column; gap: 16px; }
.module-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px;
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.module-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  min-width: 2.4ch;
}
.dot-list li {
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.includes-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.includes-item { display: flex; gap: 12px; align-items: flex-start; }
.includes-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage); margin-top: 8px; flex-shrink: 0;
}

.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--cacao);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.faq-q .plus { font-size: 1.4rem; color: var(--gold); transition: transform .3s ease; flex-shrink: 0; }
.faq-item[data-open="true"] .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-item[data-open="true"] .faq-a { max-height: 400px; }
.faq-a p { padding-bottom: 22px; color: var(--taupe); }

.disclaimer-box {
  background: var(--sand);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  font-size: 0.88rem;
  color: var(--taupe);
  margin-block: 12px;
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-card);
}
.form-row { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
label {
  display: block;
  font-family: var(--font-nav);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cacao);
  margin-bottom: 8px;
}
input, select, textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--ivory);
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--charcoal);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,149,90,0.18);
}
textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 0.82rem; color: var(--taupe); margin-top: 14px; }
.form-success {
  display: none;
  background: var(--sage);
  color: var(--white-warm);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 0.92rem;
}
.form-success.is-visible { display: block; }

/* ---------- Learning areas grid ---------- */
.area-card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.area-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.area-num { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); }
.area-link { font-family: var(--font-nav); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--terracotta-dark); margin-top: auto; }

/* ---------- Community ---------- */
.circle-stat {
  text-align: center;
  padding: 22px;
}
.circle-stat .num { font-family: var(--font-display); font-size: 2.6rem; color: var(--terracotta-dark); display: block; }
.circle-stat .label { font-family: var(--font-nav); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--cacao);
  color: rgba(255,253,248,0.86);
  padding-block: 64px 32px;
}
.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--white-warm);
  margin-bottom: 10px;
}
.footer-tagline { font-size: 0.9rem; color: rgba(255,253,248,0.68); max-width: 32ch; }
.footer-heading {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 0.9rem; color: rgba(255,253,248,0.8); }
.footer-links a:hover { color: var(--gold); }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,253,248,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg { width: 15px; height: 15px; stroke: var(--white-warm); fill: none; }
.footer-newsletter { display: flex; gap: 8px; margin-top: 6px; }
.footer-newsletter input {
  background: rgba(255,253,248,0.08);
  border: 1px solid rgba(255,253,248,0.24);
  color: var(--white-warm);
}
.footer-newsletter input::placeholder { color: rgba(255,253,248,0.5); }
.footer-newsletter button {
  background: var(--gold);
  color: var(--cacao);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 18px;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.footer-disclaimer {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,253,248,0.16);
  font-size: 0.78rem;
  color: rgba(255,253,248,0.55);
  max-width: 90ch;
}
.footer-bottom {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255,253,248,0.5);
}
.footer-bottom a { color: rgba(255,253,248,0.6); }
.footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* ---------- Language selector (root) ---------- */
.lang-gate {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
  padding: 32px;
  text-align: center;
}
.lang-gate-card { max-width: 520px; }
.lang-gate .btn-row { justify-content: center; margin-top: 32px; }

/* ==========================================================================
   Mock flow: checkout → payment confirmed → account → login → dashboard →
   private course view → lesson player. All simulated, no real backend.
   ========================================================================== */

/* ---------- "Acceso al curso" (header) — static link to login.html ---------- */
.account-link {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--cacao);
  font-family: var(--font-nav);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.account-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }
.account-link:hover { background: var(--cacao); color: var(--white-warm); border-color: var(--cacao); }
@media (min-width: 1080px) { .account-link { display: inline-flex; } }
.mobile-nav-account {
  margin-top: 14px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-nav) !important;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--terracotta-dark) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  padding: 14px 20px !important;
}
.mobile-nav-account svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

/* ---------- Minimal header / footer (checkout, account, login) ---------- */
.site-header--minimal .nav-wrap--minimal {
  justify-content: space-between;
}
.minimal-header-back {
  font-family: var(--font-nav);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--taupe);
}
.minimal-header-back:hover { color: var(--terracotta-dark); }
.site-footer--minimal {
  padding-block: 32px;
  background: transparent;
  color: var(--taupe);
  border-top: 1px solid var(--line);
}
.footer-disclaimer--minimal {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  color: var(--taupe);
  font-size: 0.8rem;
  max-width: 80ch;
}
.footer-bottom-minimal { margin-top: 14px; font-size: 0.78rem; color: var(--taupe); }

/* ---------- Demo badge ---------- */
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-nav);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sage);
  border: 1px solid var(--sage);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 20px;
}
.demo-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }

/* ---------- Price (demo) block ---------- */
.price-block {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  text-align: center;
  max-width: 460px;
  margin-inline: auto;
}
.price-amount {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--cacao);
  margin: 8px 0;
}
.price-note { font-size: 0.86rem; color: var(--taupe); margin-bottom: 14px; }
.price-tag {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  border: 1px dashed var(--gold);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ---------- Checkout ---------- */
.checkout-grid {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 960px) { .checkout-grid { grid-template-columns: 1.3fr 0.9fr; } }
.payment-options { display: grid; gap: 12px; margin-bottom: 8px; }
.payment-option {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.payment-option:has(input:checked) { border-color: var(--terracotta); background: rgba(184,111,82,0.06); }
.payment-option input { width: auto; accent-color: var(--terracotta); }
.payment-option span { font-family: var(--font-nav); font-size: 0.86rem; font-weight: 600; color: var(--cacao); }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.checkbox-row input { width: auto; margin-top: 4px; accent-color: var(--terracotta); }
.checkbox-row label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.86rem; color: var(--charcoal); font-weight: 400; }
.summary-card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 110px;
}
.summary-course { font-family: var(--font-display); font-size: 1.3rem; color: var(--cacao); margin-bottom: 4px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; padding-block: 10px; border-bottom: 1px dashed var(--line); }
.summary-row strong { color: var(--taupe); font-weight: 600; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.summary-total .amount { font-family: var(--font-display); font-size: 1.4rem; color: var(--terracotta-dark); }

/* ---------- Confirmation screen ---------- */
.confirm-shell {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 60px;
}
.confirm-card { max-width: 560px; text-align: center; }
.confirm-ring {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--white-warm);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 28px;
  box-shadow: 0 16px 34px rgba(125,138,106,0.32);
}
.confirm-ring svg { width: 34px; height: 34px; stroke-width: 2.4; }
.confirm-course-pill {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cacao);
  background: var(--sand);
  border-radius: 999px;
  padding: 8px 18px;
  margin: 18px 0 28px;
}

/* ---------- Auth shell (create account / login) ---------- */
.auth-shell {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 60px;
}
.auth-card { width: 100%; max-width: 460px; }
.auth-card .form-card { text-align: left; }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; font-size: 0.86rem; }
.auth-links a { color: var(--terracotta-dark); font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }
.field-error { color: var(--terracotta-dark); font-size: 0.82rem; margin-top: -10px; margin-bottom: 14px; display: none; }
.field-error.is-visible { display: block; }

/* ---------- Dashboard (My Learning Space) ---------- */
.dashboard-hero {
  padding-top: clamp(56px, 8vw, 88px);
  padding-bottom: clamp(32px, 5vw, 48px);
  background: linear-gradient(180deg, var(--white-warm), var(--ivory));
  border-bottom: 1px solid var(--line);
}
.course-progress-card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.course-progress-thumb {
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--sand), #f2e6d4);
  position: relative;
  overflow: hidden;
}
.course-progress-thumb::after {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 160px; height: 160px;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  background: rgba(184,111,82,0.22);
}
.status-pill {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-nav);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--white-warm);
  background: var(--sage);
  border-radius: 999px;
  padding: 5px 12px;
}
.progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--sand);
  overflow: hidden;
}
.progress-fill { height: 100%; background: var(--terracotta); border-radius: 999px; transition: width .4s ease; }
.progress-meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--taupe); }
.last-lesson { font-size: 0.84rem; color: var(--taupe); }
.empty-state {
  text-align: center;
  padding: 64px 24px;
  background: var(--white-warm);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}
.dashboard-secondary {
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.profile-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; padding-block: 10px; border-bottom: 1px dashed rgba(91,58,46,0.18); }
.profile-row strong { color: var(--cacao); font-family: var(--font-nav); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.history-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.history-item { display: flex; justify-content: space-between; gap: 12px; font-size: 0.84rem; color: var(--taupe); padding-block: 8px; border-bottom: 1px dashed rgba(91,58,46,0.14); }
.history-item .status { color: var(--sage); font-weight: 600; }

/* ---------- Resource cards ---------- */
.resource-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.resource-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
}
.resource-card .card-icon { margin-bottom: 0; width: 44px; height: 44px; flex-shrink: 0; }
.resource-card .card-icon svg { width: 20px; height: 20px; }
.resource-card-title { font-family: var(--font-nav); font-size: 0.86rem; font-weight: 600; color: var(--cacao); margin-bottom: 6px; }
.resource-preview-btn {
  font-family: var(--font-nav);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--taupe);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: not-allowed;
}

/* ---------- Private course view ---------- */
.space-header {
  padding-top: clamp(56px, 8vw, 88px);
  padding-bottom: clamp(28px, 4vw, 40px);
  background: linear-gradient(180deg, var(--white-warm), var(--ivory));
  border-bottom: 1px solid var(--line);
}
.breadcrumb-mock { font-family: var(--font-nav); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); font-weight: 600; margin-bottom: 14px; }
.space-progress-row { display: flex; align-items: center; gap: 16px; margin-top: 22px; max-width: 520px; }
.space-progress-row .progress-track { flex: 1; }
.module-group { margin-bottom: 28px; }
.module-group-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--cacao); margin-bottom: 14px; }
.lesson-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  margin-bottom: 10px;
  background: var(--white-warm);
}
a.lesson-row { transition: border-color .2s ease, background .2s ease; }
a.lesson-row:hover { border-color: var(--terracotta); background: rgba(184,111,82,0.05); }
.lesson-row.is-locked { opacity: 0.55; background: transparent; }
.lesson-row-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--sand); color: var(--cacao); }
.lesson-row-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.lesson-row.is-complete .lesson-row-icon { background: var(--sage); color: var(--white-warm); }
.lesson-row-title { font-size: 0.92rem; color: var(--charcoal); flex: 1; }
.lesson-row-tag { font-family: var(--font-nav); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--terracotta-dark); }
.curriculum-note { font-size: 0.84rem; color: var(--taupe); font-style: italic; margin-top: 4px; }
.discreet-disclaimer { font-size: 0.78rem; color: var(--taupe); border-top: 1px solid var(--line); padding-top: 20px; margin-top: 32px; }

/* ---------- Lesson player ---------- */
.lesson-shell { min-height: 100svh; display: flex; flex-direction: column; background: var(--ivory); }
/* La marca de la barra de leccion. Alto fijo y ancho automatico para que
   el lockup no empuje al resto de la barra; en movil se esconde, donde el
   espacio lo necesitan el titulo del curso y el boton de sesiones. */
.lesson-topbar-brand { display: none; flex: 0 0 auto; line-height: 0; }
.lesson-topbar-brand img { display: block; height: 30px; width: auto; }
@media (min-width: 900px) { .lesson-topbar-brand { display: block; } }
.lesson-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(248,241,231,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.lesson-topbar-back { font-family: var(--font-nav); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cacao); display: flex; align-items: center; gap: 8px; }
.lesson-topbar-course { font-family: var(--font-display); font-size: 1.05rem; color: var(--cacao); text-align: center; flex: 1; }
.lesson-topbar-progress { font-family: var(--font-nav); font-size: 0.72rem; color: var(--taupe); font-weight: 600; white-space: nowrap; }
.lesson-mobile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cacao);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--white-warm);
}
@media (min-width: 960px) { .lesson-mobile-toggle { display: none; } }

.lesson-body { display: flex; flex: 1; min-height: 0; }
.lesson-sidebar {
  width: 320px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  background: var(--white-warm);
  padding: 24px;
  overflow-y: auto;
}
.lesson-sidebar-module { font-family: var(--font-nav); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); font-weight: 700; margin: 22px 0 10px; }
.lesson-sidebar-module:first-child { margin-top: 0; }
.lesson-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  color: var(--charcoal);
}
a.lesson-sidebar-item:hover { background: var(--ivory); }
.lesson-sidebar-item.is-active { background: var(--sand); font-weight: 600; color: var(--cacao); }
.lesson-sidebar-item.is-locked { color: var(--taupe); opacity: 0.6; }
.lesson-sidebar-icon { width: 20px; height: 20px; border-radius: 50%; background: var(--sand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lesson-sidebar-icon svg { width: 10px; height: 10px; stroke: var(--cacao); fill: none; }
.lesson-sidebar-item.is-complete .lesson-sidebar-icon { background: var(--sage); }
.lesson-sidebar-item.is-complete .lesson-sidebar-icon svg { stroke: var(--white-warm); }

.lesson-main { flex: 1; min-width: 0; overflow-y: auto; padding: clamp(20px, 4vw, 48px); }
.lesson-main-inner { max-width: 820px; margin-inline: auto; }
.video-frame {
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 25% 20%, rgba(184,149,90,0.35), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(125,138,106,0.28), transparent 55%),
    linear-gradient(150deg, var(--cacao), #3c2620);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 8px;
}
.video-frame-play {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255,253,248,0.16);
  border: 1px solid rgba(255,253,248,0.5);
  display: flex; align-items: center; justify-content: center;
  color: var(--white-warm);
}
.video-frame-play svg { width: 26px; height: 26px; }
.video-frame-caption { font-family: var(--font-nav); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,253,248,0.7); font-weight: 600; }
.lesson-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.notes-textarea { min-height: 130px; }
.lesson-nav-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lesson-nav-side { display: flex; flex-direction: column; gap: 6px; }
.btn-complete[aria-pressed="true"] { background: var(--sage); box-shadow: none; }
.btn-complete[aria-pressed="true"]:hover { background: #6b7758; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.42; pointer-events: none; }
.lesson-nav-note { font-size: 0.72rem; color: var(--taupe); }

@media (max-width: 959px) {
  .lesson-body { flex-direction: column; }
  .lesson-sidebar {
    position: fixed;
    inset: 0;
    top: 65px;
    width: 100%;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  .lesson-sidebar.is-open { transform: translateX(0); }
  .lesson-topbar-course { display: none; }
}

/* ==========================================================================
   One-page site: nav CTA, benefit lists, temario grid, package/upsell blocks
   ========================================================================== */

/* Anchor targets should clear the sticky header (native + smooth-scroll both
   respect scroll-margin, so no JS path-matching is needed for home+"#id" links). */
section[id] { scroll-margin-top: var(--nav-h); }

.nav-cta { display: none; white-space: nowrap; }
@media (min-width: 900px) { .nav-cta { display: inline-flex; } }

/* ---------- Benefit list ("Esto es para ti si...") ---------- */
.benefit-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.benefit-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.98rem; }
.benefit-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sage);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.benefit-check svg { width: 11px; height: 11px; stroke: var(--white-warm); stroke-width: 3; fill: none; }

/* ---------- Temario grid (numbered curriculum cards) ---------- */
.temario-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.temario-card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 20px 18px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.temario-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(184,149,90,0.4); }
.temario-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); display: block; margin-bottom: 6px; }
.temario-title { font-size: 0.94rem; color: var(--charcoal); margin: 0; }

/* ---------- Package Completo (bundle) ---------- */
.package-card {
  position: relative;
  max-width: 640px;
  margin: 40px auto 0;
  background: var(--white-warm);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 48px);
  box-shadow: var(--shadow-soft);
}
.package-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--cacao);
  font-family: var(--font-nav);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.package-card .includes-item p { color: var(--charcoal); }
.package-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.package-price-old { font-size: 1.1rem; color: var(--taupe); text-decoration: line-through; }
.package-price-new { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--terracotta-dark); font-weight: 600; }
.individual-prices {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 640px;
  margin: 28px auto 0;
}
.individual-price-card {
  background: rgba(255,253,248,0.08);
  border: 1px solid rgba(255,253,248,0.2);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.individual-price-card .card-meta { color: var(--sand); margin-bottom: 0; }
.individual-price-card .package-price-old { color: rgba(255,253,248,0.55); }
.individual-price-card .package-price-new { font-size: 1.4rem; color: var(--white-warm); }
.individual-price-card .btn-light { margin-top: 6px; }
.individual-eyebrow {
  margin-top: 40px;
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
}
.package-strategic-phrase {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cacao);
  text-align: center;
  margin: 14px 0 0;
}

/* ---------- Upsell banner (checkout pages) ---------- */
.upsell-banner {
  background: var(--sand);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.upsell-banner p { margin: 0 0 6px; max-width: 50ch; color: var(--charcoal); }
.upsell-banner p:last-child { margin-bottom: 0; }
.upsell-banner-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--cacao); font-weight: 600; }

/* ---------- Cross-sell (dashboard + course space) ---------- */
.cross-sell-card { background: var(--sand); text-align: center; }
.cross-sell-card h3 { margin-bottom: 16px; }
.access-until { font-size: 0.8rem; color: var(--taupe); margin: 6px 0 0; }

/* ---------- Checkout summary: strike-through original price ---------- */
.summary-row .strike { text-decoration: line-through; color: var(--taupe); }

/* ---------- Footer: compact 3-column + "Próximamente" ---------- */
.footer-grid--compact { grid-template-columns: 1.6fr 1fr 1.2fr; }
@media (max-width: 860px) { .footer-grid--compact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid--compact { grid-template-columns: 1fr; } }
.footer-soon { display: block; font-size: 0.9rem; color: rgba(255,253,248,0.45); }

/* ==========================================================================
   Sprint 4: compact hero, temario, book covers, testimonial carousel,
   newsletter, decorative flowers, subtle scroll rail
   ========================================================================== */

/* ---------- Compact hero (title only — kicker/subtitle removed) ---------- */
.hero--compact { padding-top: clamp(44px, 7vw, 84px); padding-bottom: clamp(28px, 4vw, 48px); }
.hero-title--compact {
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  line-height: 1.16;
  max-width: min(1040px, 90vw);
  margin-inline: auto;
}
@media (max-width: 640px) {
  .hero-title--compact {
    font-size: clamp(1.3rem, 5.6vw, 1.6rem);
    line-height: 1.2;
    max-width: 97vw;
  }
}
/* ---------- Wider intro reading column ---------- */
.intro-block--wide { max-width: 900px; }

/* ---------- Compact temario — one box, CSS columns, never stacked cards ---------- */
.temario-compact {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 4px 28px;
  max-width: 900px;
  margin-inline: auto;
  box-shadow: var(--shadow-card);
  column-count: 1;
}
@media (min-width: 720px) { .temario-compact { column-count: 2; column-gap: 40px; } }

/* S15.4A.10 B — el recuadro blanco del temario como contenedor de las fotos.

   Hasta S15.4A.9 esto era una sola imagen en un background-image del ::before.
   Ahora las fotos son varias y se relevan dentro del propio recuadro, asi que
   viven en una capa con <img> de verdad (.temario-fondo): cada una trae su
   srcset y el navegador baja el ancho que toca.

   La capa va en posicion absoluta porque el recuadro usa column-count: un hijo
   en flujo se repartiria entre las dos columnas. Y lleva overflow propio para
   que las fotos queden recortadas por el redondeo del recuadro, no asomando
   por las esquinas.

   El apilado, de abajo arriba: blanco del recuadro, foto atenuada, capa de
   leche, filas del temario. */
.temario-compact--con-fondo { position: relative; isolation: isolate; }
.temario-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.temario-fondo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover y no contain: el recuadro cambia mucho de forma segun el ancho de
     pantalla (1.89 en escritorio, 1.48 en tableta, 0.33 en movil) y con contain
     quedarian franjas vacias. cover recorta, pero NO deforma nunca: la
     proporcion de la foto se respeta siempre. */
  object-fit: cover;
  /* Un poco por encima del centro: en las verticales del lote la figura esta
     en el tercio superior, y al recortar a un recuadro apaisado el centro
     geometrico se comeria la cabeza. */
  object-position: center 40%;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}
/* La opacidad de reposo la pone el dato en site-data, no el CSS: asi se puede
   recalibrar sin tocar la hoja de estilos. */
.temario-fondo > img.is-active { opacity: var(--temario-fondo-op, 0.3); }
/* Capa de leche por encima de las fotos y por debajo del texto. Es la que
   sostiene la legibilidad: las fotos pueden subir de opacidad sin que el
   temario pierda contraste, porque este velo las devuelve hacia el blanco del
   recuadro. Va dentro de la capa de fondo para heredar su recorte. */
.temario-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,253,248,0.55);
}
/* Relevo lento: 1.8 s de fundido cada 11 s. Sin saltos y sin cambiar la altura
   del recuadro, porque las fotos no estan en el flujo. */
@media (prefers-reduced-motion: reduce) {
  .temario-fondo > img { transition: none; }
}
.temario-compact--con-fondo .temario-row { position: relative; z-index: 1; }
.temario-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px dashed var(--line);
  break-inside: avoid;
}
.temario-num { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); flex-shrink: 0; min-width: 2ch; }
.temario-title { font-size: 0.92rem; color: var(--charcoal); flex: 1; }

/* ---------- Book-cover "collection" section ---------- */
.book-collection { display: flex; justify-content: center; margin: 36px 0 32px; }
.book-cover {
  width: 160px;
  aspect-ratio: 2/3;
  border-radius: 6px 14px 14px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
  color: var(--white-warm);
  box-shadow: 0 18px 40px rgba(47,41,38,0.28);
  position: relative;
}
.book-cover::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,253,248,0.4);
  border-radius: 4px 10px 10px 4px;
}
.book-cover--nacimiento {
  background: linear-gradient(155deg, var(--terracotta) 0%, var(--cacao) 100%);
  transform: rotate(-4deg) translateX(6px);
  z-index: 2;
}
.book-cover--yoga {
  background: linear-gradient(155deg, var(--sage) 0%, #4f5a40 100%);
  transform: rotate(4deg) translateX(-6px);
  z-index: 1;
}
.book-cover-icon svg { width: 30px; height: 30px; stroke: var(--white-warm); fill: none; opacity: 0.9; }
.book-cover-title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; }
@media (max-width: 560px) {
  .book-cover { width: 124px; }
  .book-cover--nacimiento { transform: rotate(-3deg) translateX(4px); }
  .book-cover--yoga { transform: rotate(3deg) translateX(-4px); }
}

/* ---------- Testimonial carousel (horizontal scroll-snap, all breakpoints) ---------- */
.testimonial-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.testimonial-card--carousel { flex: 0 0 auto; width: min(320px, 82vw); scroll-snap-align: start; }

/* ---------- Newsletter (compact form card) ---------- */
.form-card--compact { padding: clamp(22px, 3vw, 30px); }

/* ---------- Social icons (contact + footer) ---------- */
.contact-social, .footer-social { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.footer-social { justify-content: flex-start; }
.contact-social a, .footer-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--cacao);
}
.footer-social a { border-color: rgba(255,253,248,0.3); color: var(--white-warm); }
.contact-social svg, .footer-social svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

#quien-te-guia { position: relative; overflow: hidden; }

/* ---------- Subtle scroll "growth" rail (desktop only, decorative, injected by main.js) ---------- */
.growth-rail {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 3px;
  height: 160px;
  border-radius: 999px;
  background-color: rgba(184,149,90,0.18);
  background-image: radial-gradient(circle, rgba(125,138,106,0.55) 1.4px, transparent 1.6px);
  background-size: 100% 33.33%;
  background-repeat: repeat-y;
  background-position: center;
  z-index: 150;
  pointer-events: none;
  display: none;
}
.growth-rail-fill {
  width: 100%;
  height: calc(var(--scroll-progress, 0) * 100%);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--sage));
}
@media (min-width: 1080px) { .growth-rail { display: block; } }

/* ---------- Decorative botanical/feminine silhouettes ---------- */
/* Large, thin-line editorial silhouettes used sparingly (5 zones max) as a
   soft visual thread between sections. Never literal clip-art: faint,
   single-stroke, faded at the edges so they read as an ambient detail. */
.deco { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain; z-index: 0; }

.deco--branch {
  width: 200px; height: 540px;
  right: -36px; bottom: -110px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 520'%3E%3Cg fill='none' stroke='%23C98868' stroke-width='1'%3E%3Cpath d='M70 8 C64 110 76 230 68 350 C63 420 73 470 70 512'/%3E%3Cpath d='M70 58 C50 48 34 52 24 38'/%3E%3Cpath d='M70 58 C90 48 106 52 116 38'/%3E%3Ccircle cx='22' cy='36' r='7'/%3E%3Ccircle cx='118' cy='36' r='7'/%3E%3Cpath d='M69 148 C50 138 37 143 27 128'/%3E%3Ccircle cx='25' cy='126' r='6'/%3E%3Cpath d='M70 238 C90 228 102 233 112 218'/%3E%3Ccircle cx='114' cy='216' r='6'/%3E%3Cpath d='M68 336 C48 326 35 331 25 316'/%3E%3Ccircle cx='23' cy='314' r='5'/%3E%3Cpath d='M70 424 C90 414 100 419 110 404'/%3E%3Ccircle cx='112' cy='402' r='5'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 78%, transparent);
  opacity: 0.16;
}

.deco--leaf {
  width: 190px; height: 460px;
  left: -34px; top: -50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 460'%3E%3Cg fill='none' stroke='%237D8A6A' stroke-width='1'%3E%3Cpath d='M60 6 C48 100 66 200 52 300 C44 360 58 410 60 452'/%3E%3Cpath d='M60 70 C40 62 28 70 16 60 C28 78 40 84 58 92'/%3E%3Cpath d='M58 160 C80 150 92 158 106 146 C92 166 78 172 58 178'/%3E%3Cpath d='M54 260 C34 252 22 260 10 250 C22 268 34 274 52 280'/%3E%3Cpath d='M58 350 C80 340 92 348 106 336 C92 356 78 362 58 368'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: linear-gradient(to bottom, transparent, black 16%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 16%, black 82%, transparent);
  opacity: 0.15;
}

/* .deco--curve se eliminó por completo: era el adorno de la esquina superior
   derecha de "¿Quién te guía?", el último que quedaba de esa familia.
   Antes se había retirado su variante .deco--light del Paquete Completo. */

.deco--wave {
  width: 220px; height: 190px;
  left: -28px; bottom: -18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 200'%3E%3Cg fill='none' stroke='%23A98F6C' stroke-width='1'%3E%3Cpath d='M4 150 C50 90 90 190 140 120 C180 66 210 130 256 70'/%3E%3Ccircle cx='50' cy='104' r='3'/%3E%3Ccircle cx='140' cy='120' r='3'/%3E%3Ccircle cx='210' cy='96' r='3'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.16;
}
.deco--wave.deco--light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 200'%3E%3Cg fill='none' stroke='%23EFE1C6' stroke-width='1'%3E%3Cpath d='M4 150 C50 90 90 190 140 120 C180 66 210 130 256 70'/%3E%3Ccircle cx='50' cy='104' r='3'/%3E%3Ccircle cx='140' cy='120' r='3'/%3E%3Ccircle cx='210' cy='96' r='3'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.2;
}

@media (max-width: 768px) {
  .deco--branch, .deco--leaf { width: 110px; opacity: 0.1; }
  .deco--wave { width: 140px; height: 120px; opacity: 0.12; }
}
@media (max-width: 480px) {
  .deco { display: none; }
}

/* ---------- Credentials modal ("Ver formación y experiencia") ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(47, 41, 38, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 500;
}
.modal-overlay[hidden] { display: none; }
.modal-panel {
  position: relative;
  background: var(--white-warm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  max-width: 720px;
  width: 100%;
  max-height: min(84vh, 820px);
  overflow-y: auto;
  padding: clamp(28px, 4vw, 48px);
}
.modal-close {
  position: sticky;
  float: right;
  top: 0;
  margin: -8px -8px 0 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white-warm);
  color: var(--cacao);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: var(--sand); }
.modal-body h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 8px;
  padding-right: 40px;
}
.modal-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--terracotta-dark);
  margin-bottom: 18px;
}
.modal-body h4 {
  font-size: 1.05rem;
  margin: 28px 0 12px;
  color: var(--cacao);
}
.modal-list {
  display: grid;
  gap: 10px;
  padding-left: 1.3em;
  color: var(--taupe);
  font-size: 0.94rem;
  line-height: 1.5;
}
.modal-list li { padding-left: 4px; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 640px) {
  /* En pantalla estrecha una etiqueta larga no puede seguir en una sola
     linea: el nowrap de .btn gana al width:100% y el texto se sale del
     contenedor, que body recorta con overflow-x. Aqui se deja envolver. */
  .btn { width: 100%; max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .lang-gate .btn-row { flex-direction: row; }
  .footer-newsletter { flex-direction: column; }
  .package-price-row { flex-direction: column; gap: 4px; }
  .nav-cta { display: none; }
  .modal-panel { padding: 24px 20px; max-height: 88vh; }
}

/* ==========================================================================
   Sprint 7: logo real, hero con imágenes cambiantes, gráficos florales y
   lunares, carrusel de testimonios con flechas, videos testimoniales,
   newsletter en dos columnas y fondo ambiental de contacto.
   ========================================================================== */

/* ---------- Marca: logo real en navbar y footer ---------- */
.brand { display: flex; align-items: center; gap: 0; }
.brand-logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: min(280px, 52vw);
  object-fit: contain;
}
.brand-logo--minimal { height: 46px; }
@media (max-width: 1079px) { .brand-logo { height: 44px; } }
@media (max-width: 560px)  { .brand-logo { height: 38px; max-width: 46vw; } }

.footer-brand-link { display: inline-block; }
/* El pie es el momento de marca y tiene sitio de sobra, asi que el logo va
   mas grande que en la cabecera: con el lockup nuevo la linea MOTHER WISDOM
   pasa de 6.6 a 8.4 px, que es la diferencia entre intuirla y leerla. */
.footer-logo {
  display: block;
  height: 76px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  margin-bottom: 14px;
}
@media (max-width: 560px) { .footer-logo { height: 50px; } }

/* ---------- Hero con fondo de imágenes cambiantes ---------- */
.hero--media {
  min-height: clamp(400px, 58vh, 600px);
  display: flex;
  align-items: center;
  background: var(--ivory);
}
.hero-slideshow { position: absolute; inset: 0; overflow: hidden; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
/* Velo cálido: protege el texto en el centro y deja respirar la foto al borde. */
/* El velo aclara la foto lo justo para que el texto se lea. Sprint 12: la
   Dra. pedía ver mejor las imágenes, así que baja de 0.93/0.70 a 0.72/0.42.
   Sigue siendo un degradado radial —más cubierto en el centro, donde va el
   texto, y más limpio en los bordes, donde sólo hay foto— porque bajar todo
   por igual dejaría el titular ilegible sobre las zonas claras. */
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    /* S15.4A.4 — tercera bajada. La foto que abre el ciclo (madre besando a su
       bebe) tiene una luminancia media de 168 sobre 255: es palida de origen y
       bajo un velo fuerte se quedaba en casi nada. El contraste del titular lo
       sostiene el halo local de .hero-inner::before, no este velo general. */
    radial-gradient(ellipse at 50% 46%, rgba(248,241,231,0.28) 0%, rgba(248,241,231,0.16) 46%, rgba(248,241,231,0.06) 100%),
    linear-gradient(180deg, rgba(255,253,248,0.20), rgba(91,58,46,0.05));
}
/* Un halo suave detrás del bloque de texto: permite aclarar menos la foto
   entera y aun así mantener el contraste donde de verdad hace falta. */
.hero--media .hero-inner::before {
  content: "";
  position: absolute;
  inset: -28px -22px;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(248,241,231,0.84) 0%, rgba(248,241,231,0.52) 58%, rgba(248,241,231,0) 100%);
  pointer-events: none;
}
.hero--media .hero-inner { position: relative; z-index: 2; width: 100%; }
.hero--media .hero-title--compact { color: var(--cacao); }
@media (max-width: 640px) {
  /* El CTA principal debe verse a primera vista en móvil. */
  .hero--media { min-height: auto; padding-top: 30px; padding-bottom: 30px; }
  /* S15.4A.10 — fuera el recuadro del hero en móvil.

     Lo que la Dra. ve como un recuadro opaco es el halo elíptico de
     .hero--media .hero-inner::before. En escritorio pasa desapercibido, pero
     en móvil el bloque de texto ocupa el 82% del alto del hero: el halo cubre
     casi toda la foto y se le ven los bordes. Aquí se retira.

     Lo que lo sustituye no es otra caja, sino una cuenta. El bloque de texto
     del hero móvil son tres piezas con necesidades distintas, medidas en el
     navegador como porcentaje del alto del hero:

       h1            9% - 49%   cacao sobre la foto      necesita velo
       btn-primary  55% - 71%   marfil sobre terracota   se defiende solo
       btn-outline  76% - 91%   cacao sobre la foto      necesita algo

     Velar del 9% al 91% para cubrir las dos puntas sería volver al recuadro
     por otra vía. Así que el velo se concentra arriba, donde está el titular,
     y el botón de contorno se resuelve por su cuenta con un relleno propio:
     es un objeto pequeño y no le quita foto a nadie. Entre los dos queda el
     40% inferior del hero con el velo casi a cero, que es donde la fotografía
     se ve de verdad. Sin bordes laterales, además, no hay recuadro que mirar.

     Los dos números están medidos, no elegidos: se compusieron las quince
     fotos del carrusel con el velo encima, a 375, 390 y 430 px, y se buscó la
     franja peor de cada una. 0.72 de meseta deja el titular en 4.88 en el peor
     caso (hero-n04 a 430 px) y 0.72 de relleno deja el botón en 5.66 (hero-n08
     a 430 px). El mínimo que cumplía el 4.5 era 0.70 en los dos; se sube a
     0.72 para no ir justo. */
  .hero--media .hero-inner::before { display: none; }
  .hero-veil {
    background:
      linear-gradient(180deg,
        rgba(248,241,231,0.60) 0%,
        rgba(248,241,231,0.72) 5%,
        rgba(248,241,231,0.72) 54%,
        rgba(248,241,231,0.16) 64%,
        rgba(248,241,231,0.08) 100%);
  }
  /* Relleno del botón de contorno, que en el hero queda ya fuera del velo.
     Marfil translúcido: se sigue viendo la foto a través, pero el cacao de la
     etiqueta y del borde recupera contraste sobre cualquiera de las quince. */
  .hero--media .btn-outline { background: rgba(255,253,248,0.72); }
  /* Un halo muy ceñido a las letras, no una caja. Ayuda donde el degradado ya
     ha cedido y el texto aún no ha terminado. */
  .hero--media .hero-title--compact,
  .hero--media .hero-title {
    text-shadow: 0 1px 10px rgba(248,241,231,0.85), 0 0 3px rgba(248,241,231,0.7);
  }
  .hero--media .hero-lede, .hero--media .hero-sub {
    text-shadow: 0 1px 8px rgba(248,241,231,0.8);
  }
}

/* ---------- Tercera sección: Esto es para ti si tú… con imagen ---------- */
.para-ti-grid {
  display: grid;
  gap: 28px;
  max-width: 980px;
  margin: 36px auto 0;
  align-items: start;
}
@media (min-width: 880px) {
  .para-ti-grid { grid-template-columns: 360px 1fr; gap: 52px; align-items: center; }
}
.para-ti-figure { margin: 0; }
.para-ti-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 360px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* S15.4 — fuera el arco. Lo pidio la Dra. el 01/10: marco minimalista,
     sin perder lo calido. El radio baja a una esquina apenas insinuada y
     el peso lo lleva ahora un filete interior en marfil, que separa la
     foto del fondo sin encerrarla en una forma. */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
/* El filete va en el contenedor y no en la imagen: asi se dibuja ENCIMA
   de la foto, por dentro del borde, y no ensancha la caja. */
.para-ti-figure { position: relative; }
.para-ti-marco {
  position: relative;
  display: block;
  max-width: 360px;
  margin-inline: auto;
}
.para-ti-marco::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,253,248,0.55);
  border-radius: calc(var(--radius-md) - 4px);
  pointer-events: none;
  z-index: 2;
}

/* Soporte para varias imagenes con relevo suave.

   Hoy hay una sola foto aprobada para esta seccion, asi que el carrusel
   se comporta como una figura normal. Cuando la Dra. envie las demas,
   basta con anadirlas a PARA_TI_IMAGES en site-data: el marcado y este
   CSS ya las relevan sin tocar nada mas.

   El efecto NO es el del hero. Alli el relevo es un fundido plano; aqui
   la imagen que entra sube unos pixeles y se asienta con un punto de
   escala, que es mas pausado y no compite con la portada. */
.para-ti-marco--carrusel { display: grid; }
.para-ti-marco--carrusel > img {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px) scale(1.015);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.22,.8,.26,1);
}
.para-ti-marco--carrusel > img.is-active {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .para-ti-marco--carrusel > img { transition: none; transform: none; }
}
.para-ti-list .benefit-list { margin-top: 0; }

/* ---------- Títulos con ornamentos (rosas / lunas) ---------- */
.title-ornamented {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 2.5vw, 32px);
  max-width: 1100px;
  margin-inline: auto;
}
.title-ornamented > h2 { grid-column: 2; margin-bottom: 0; }

/* S15.4A.4 — segunda vuelta sobre la nitidez.

   Lo que de verdad las emborronaba no era la opacidad: el asset se generaba
   ampliando x2.83 un escaneo de 230x366. Eso se arreglo en el pipeline. Aqui
   solo se les da algo mas de presencia (0.58 -> 0.70) y se acota el ancho a
   168 px, que es lo que mide el master nuevo: pedirle mas seria volver a
   ampliarlo, esta vez en el navegador.

   El multiply se queda: es lo que las funde con el fondo arena en vez de
   dejarlas pegadas encima como una calcomania. */
.title-rosa {
  width: clamp(104px, 13vw, 168px);
  height: auto;
  opacity: 0.70;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.title-rosa--left { justify-self: end; }
.title-rosa--right { justify-self: start; transform: scaleX(-1); }

.title-lunas {
  width: clamp(84px, 11vw, 150px);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}
.title-lunas--left { justify-self: end; }
.title-lunas--right { justify-self: start; transform: scaleX(-1); }

/* Móvil: versión simplificada — un solo ornamento, centrado sobre el título. */
@media (max-width: 719px) {
  .title-ornamented { grid-template-columns: 1fr; gap: 10px; justify-items: center; }
  .title-ornamented > h2 { grid-column: 1; }
  .title-rosa--right, .title-lunas--right { display: none; }
  .title-rosa--left { width: 92px; justify-self: center; opacity: 0.58; }
  .title-lunas--left { width: 132px; justify-self: center; }
}

/* ---------- Rosas en distintos estadios (zona café vino) ---------- */
/* Sprint 8.1 — las rosas de esta zona se retiraron a petición del cliente.
   En su lugar, profundidad con luz: dos focos cálidos muy tenues sobre el
   café vino para que el bloque no quede plano ni cargado. */
#paquete-completo {
  background-image:
    radial-gradient(ellipse 70% 55% at 18% 12%, rgba(184, 149, 90, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 50% at 88% 92%, rgba(184, 111, 82, 0.18), transparent 72%);
}

/* ---------- Portadas de programas: gráfico sobre el título ---------- */
/* Portadas definitivas (01/10). El arte anterior era un icono cuadrado de
   58x58; estas son siluetas verticales, asi que manda el ALTO y el ancho lo
   deduce la proporcion. Sin esto, `width:58px` las dejaba como una tira
   delgadisima. El tope de ancho evita que la mas ancha de las dos se coma
   el relleno del libro. */
.book-cover-art {
  height: 104px;
  width: auto;
  max-width: 76px;
  object-fit: contain;
  display: block;
  opacity: 0.95;
}
@media (max-width: 560px) { .book-cover-art { height: 80px; max-width: 58px; } }

/* ---------- Carrusel de testimonios: flechas + puntos ---------- */
.carousel-shell { position: relative; margin-top: 36px; }
.carousel-shell .testimonial-carousel { margin-top: 0; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .carousel-shell .testimonial-carousel { scroll-behavior: auto; }
}
.carousel-shell .testimonial-carousel:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
.carousel-arrow {
  position: absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white-warm);
  color: var(--cacao);
  box-shadow: 0 6px 18px rgba(47,41,38,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.carousel-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carousel-arrow:hover { background: var(--terracotta); color: var(--white-warm); border-color: var(--terracotta); }
.carousel-arrow:disabled { opacity: 0.32; cursor: default; }
.carousel-arrow:disabled:hover { background: var(--white-warm); color: var(--cacao); border-color: var(--line); }
/* Escritorio: las flechas viven en una canaleta propia, nunca sobre el texto. */
@media (min-width: 901px) {
  .carousel-shell { padding-inline: 58px; }
  .carousel-arrow--prev { left: 0; }
  .carousel-arrow--next { right: 0; }
}
/* Móvil y tablet: fila de control bajo el carrusel — objetivos táctiles
   grandes y sin tapar el testimonio. */
@media (max-width: 900px) {
  .carousel-shell {
    display: grid;
    grid-template-areas: "track track track" "prev dots next";
    grid-template-columns: auto 1fr auto;
    row-gap: 14px;
  }
  .carousel-shell .testimonial-carousel { grid-area: track; }
  .carousel-arrow {
    position: static;
    transform: none;
    grid-area: prev;
    width: 48px;
    height: 48px;
  }
  .carousel-arrow--next { grid-area: next; }
  .carousel-dots { grid-area: dots; margin-top: 0; align-self: center; }
}
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(91,58,46,0.24);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.carousel-dot.is-active { width: 22px; background: var(--terracotta); }

/* ---------- Videos testimoniales ---------- */
.video-testimonials { margin-top: 52px; }
.video-testimonials h3 { margin-bottom: 6px; }
.video-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  max-width: 1040px;
  margin: 28px auto 0;
}
@media (min-width: 680px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
/* El acomodo de los cuatro testimonios, S15.4A.12.

   La composicion anterior se diseño para TRES videos: el vertical al centro y
   un horizontal a cada lado, como pidio la Dra. el 10/09/2026. Al entrar el
   cuarto en S15.4A.11 esa regla dejo de cuadrar: en escritorio la primera fila
   salia horizontal + VERTICAL + horizontal y el segundo horizontal se quedaba
   solo abajo a la izquierda. La Dra. pide ahora lo contrario, y para cuatro:

     [ horizontal ] [ horizontal ] [ horizontal ]
     [            ] [  VERTICAL  ] [            ]

   Se resuelve colocando UNA sola tarjeta —la vertical— en su celda exacta y
   dejando que las otras tres se autocoloquen. El cursor de autocolocacion no
   retrocede: pone la 1 en fila 1 columna 1, la 2 en la columna 2, salta la
   vertical porque ya tiene sitio propio, y la 4 cae en la columna 3. Las tres
   horizontales quedan arriba y la vertical justo debajo de la segunda.

   Aqui no hay reglas de `order`, y es deliberado: `order` cambia lo que se ve
   pero no lo que oye un lector de pantalla ni el orden del tabulador. El orden
   lo pone el dato, en TESTIMONIAL_VIDEOS, y asi el del documento y el visual
   dicen lo mismo. Reordenar la fila es reordenar esa lista; este bloque no se
   toca. (En S15.4A.15 se reordeno asi, sin tocar una linea de CSS.)

   Vuelve el `align-items: start` general. El `center` de antes existia para
   que los horizontales no quedaran escalonados junto a un vertical mas alto;
   ahora la vertical tiene fila propia y la de arriba son tres tarjetas de la
   misma altura.

   Nota para quien venga despues: estas dos reglas dan por hecho TRES
   horizontales y UNA vertical, que es la composicion que hay. Si algun dia se
   anade un quinto video habra que volver aqui. */
@media (min-width: 680px) and (max-width: 1039px) {
  /* Tableta, dos columnas. Con tres horizontales el numero es impar y siempre
     sobraria un hueco; la vertical lo ocupa. Asi: arriba la 1 y la 2, abajo la
     4 y la vertical a su derecha, sin celdas muertas y sin nada pegado a un
     borde. */
  .video-card--vertical { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1040px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
  .video-card--vertical { grid-column: 2; grid-row: 2; }
}
.video-card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 14px 6px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.video-card-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--cacao);
}
/* Testimonio vertical (Jennifer Sandoval, 480x848).
   El master es de movil y lleva subtitulos quemados en la franja inferior:
   forzarlo al 16/9 de los otros dos lo deformaria, y recortar una banda 16/9
   se comeria justo esos subtitulos. La tarjeta se adapta al video.

   width:auto + max-height es lo que impide la deformacion: el alto manda y el
   ancho lo deduce el aspect-ratio. El tope de 420 px evita que la tarjeta se
   dispare (a 9/16 sin tope medieria 537 px en la retícula de 3 columnas) y
   deja el video en ~236 px de ancho, suficiente para leer los subtitulos. */
.video-card-player--vertical {
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: 100%;
  max-height: 420px;
  margin-inline: auto;
  object-fit: contain;
}
/* Sin esto la retícula estira las dos tarjetas horizontales hasta la altura de
   la vertical y les deja un hueco muerto debajo del pie de foto. */
.video-grid { align-items: start; }
/* En una sola columna el ancho ya no compite con nadie: se deja crecer. */
@media (max-width: 679px) {
  .video-card-player--vertical { max-height: min(70vh, 560px); }
}

.video-card-caption {
  font-size: 0.9rem;
  color: var(--taupe);
  margin: 12px 4px 10px;
  line-height: 1.5;
}
.video-card--placeholder {
  background: transparent;
  border-style: dashed;
  border-color: rgba(91,58,46,0.24);
  box-shadow: none;
  justify-content: center;
}
.video-card-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 16px;
}
.video-card-placeholder p { margin: 0; font-size: 0.92rem; color: var(--taupe); }
.video-card-placeholder-icon svg { width: 30px; height: 30px; fill: var(--gold); opacity: 0.6; }

/* ---------- Sección con fondo ambiental (newsletter / suscripción) ---------- */
/* S15.4 — la Dra. pidio el 01/10 "ajustar tamano del video" para que luzca
   mas la pancita. El video llena la seccion, asi que darle alto es darle
   cuadro: con `cover` sobre una seccion baja se recortaba casi todo el
   encuadre vertical. El min-height se expresa en vw para que crezca con el
   ancho en vez de estirarse en movil. */
.section-media { position: relative; overflow: hidden; min-height: min(42vw, 560px); display: grid; align-items: center; }
@media (max-width: 720px) { .section-media { min-height: auto; } }
.section-media-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  z-index: 0;
}
.section-media-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El foco es la pansita, no el rostro. Sin esto, `cover` recorta desde el
     centro y en móvil el encuadre acababa subiendo a la cara.

     S15.4 — "mover video a la izquierda para que luzca mas la pancita".
     El vientre esta a un 55% del ancho del master, es decir a la derecha
     del eje. Subir la X desplaza el contenido hacia la izquierda, con lo
     que la pancita se acerca al centro del cuadro. 55% -> 64%. */
  object-position: 64% 52%;
  display: block;
}
/* El poster comparte encuadre con el video: si no, al cargar se ve un salto. */
.section-media-bg { background-position: 64% 52%; }
@media (max-width: 900px) {
  /* Cuanto más estrecha la sección, más se recorta a lo ancho: se centra un
     poco más para que el vientre no se salga por el lado. */
  .section-media-bg video { object-position: 60% 50%; }
  .section-media-bg { background-position: 60% 50%; }
}
/* Velo marfil/cacao: el fondo se insinúa, nunca compite con el formulario. */
/* Sprint 15.3B — segunda bajada. La Dra. pidió el 16/09/2026 "aumentar el
   brillo de las imágenes de la web". El velo general baja otro escalón y la
   legibilidad la sostienen los dos halos locales (.newsletter-copy::before,
   ya al 0.94, y la tarjeta opaca del formulario), que no se tocan. */
/* Sprint 8.1 — el velo pasó de ~0.90 a ~0.50-0.62 efectivo para que el bosque
   se vea. La legibilidad ya no depende de tapar todo el video: el texto lleva
   su propio halo (.newsletter-copy) y el formulario su tarjeta opaca. */
.section-media-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(248,241,231,0.38) 0%, rgba(248,241,231,0.20) 62%, rgba(248,241,231,0.32) 100%),
    linear-gradient(180deg, rgba(184,111,82,0.04), rgba(91,58,46,0.04));
}
/* Los bordes se funden con las secciones marfil de arriba y abajo. */
.section-media-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248,241,231,0.42) 0%, transparent 18%, transparent 82%, rgba(248,241,231,0.42) 100%);
}
.section-media .container { position: relative; z-index: 2; }

/* ---------- Newsletter en dos columnas ---------- */
.newsletter-block {
  display: grid;
  gap: 28px;
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}
/* Halo marfil detrás del texto: permite bajar el velo general sin perder
   contraste. Va en un pseudo-elemento para no alterar la retícula, y la
   sección recorta con overflow:hidden, así que no genera desbordamiento. */
.newsletter-copy { position: relative; }
.newsletter-copy::before {
  content: "";
  position: absolute;
  inset: -30px -34px;
  z-index: -1;
  pointer-events: none;
  /* S15.4 — "reducir intensidad del sombreado blanco bajo el texto". Baja
     de 0.94 a 0.78 en el centro. Por debajo de ahi el titular empieza a
     pelearse con las hojas del fondo, que es justo lo que este halo evita. */
  background: radial-gradient(ellipse 70% 58% at 50% 50%,
    rgba(248,241,231,0.78) 0%,
    rgba(248,241,231,0.52) 50%,
    rgba(248,241,231,0) 80%);
}
.newsletter-copy h2 { margin-bottom: 12px; text-wrap: balance; }
.newsletter-support { color: var(--taupe); font-size: 0.98rem; margin: 0; }
@media (min-width: 900px) {
  .newsletter-block {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 56px;
    align-items: center;
    text-align: left;
  }
  /* La frase deja de correr en una sola línea larga: se acomoda en columna. */
  .newsletter-copy h2 { max-width: 26ch; font-size: clamp(1.55rem, 2.4vw, 2.05rem); }
  .newsletter-copy .eyebrow { text-align: left; }
  .newsletter-support { max-width: 34ch; }
}
.newsletter-form { margin-top: 0; }
.btn-wide {
  width: 100%;
  white-space: normal;
  line-height: 1.3;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
}

/* ---------- Contacto: gráfico de útero con bebé y flores al fondo ---------- */
.section-contacto { position: relative; overflow: hidden; }
/* Rosas de fondo de CONTACTO.
   Son las MISMAS láminas vintage que flanquean el título de PROGRAMAS, con el
   mismo mix-blend-mode: multiply, así que pertenecen al mismo sistema gráfico.
   Dos diferencias, porque aquí son fondo y no acompañamiento de un título: la
   opacidad baja de 0.42 a 0.2, y se anclan a los márgenes.

   El bloque centra el contenido en 640 px y las rosas se quedan fuera de esa
   columna, para no pasar por detrás del título ni del subtítulo — el único
   texto que va directamente sobre el fondo, porque el formulario tiene su
   propia tarjeta opaca. La sección recorta con overflow: hidden, así que
   pueden sangrar por los lados sin ensanchar la página. */
/* S15.4A.4 — mas presencia, sin saturar: 0.30 -> 0.40. Por encima de ahi la
   rosa empieza a competir con el formulario, que es lo que esta seccion tiene
   que hacer leer primero.

   El ancho baja de 345 a 320 px para no ampliar el asset en el navegador: el
   master de esta rosa da 451 px de ancho util y se genera a 451. */
.contacto-rosa {
  position: absolute;
  width: clamp(200px, 24vw, 320px);
  height: auto;
  opacity: 0.40;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.contacto-rosa--left { left: -3%; bottom: -8%; }
.contacto-rosa--right { right: -3%; top: -10%; transform: scaleX(-1); }

/* Por debajo de 900 px la columna de texto casi toca los bordes: las rosas se
   encogen y se retiran un poco más hacia fuera. */
@media (max-width: 900px) {
  .contacto-rosa { width: clamp(158px, 27vw, 232px); opacity: 0.34; }
  .contacto-rosa--left { left: -8%; }
  .contacto-rosa--right { right: -8%; }
}

/* En móvil el formulario ocupa todo el ancho. Se deja una sola rosa, abajo y
   muy tenue: dos serían ruido y el título quedaría en medio de las dos. */
@media (max-width: 719px) {
  .contacto-rosa--right { display: none; }
  .contacto-rosa--left { width: 172px; left: -14%; bottom: -4%; opacity: 0.14; }
}

/* ---------- Corrección de contraste dentro de la tarjeta del paquete ----------
   .package-card es una tarjeta marfil dentro de la sección café vino, así que
   las reglas de texto claro de .section-cacao dejaban la frase estratégica
   invisible. Se le devuelve el color de la marca.

   Aquí había además una corrección para el segundo botón de la tarjeta, que
   ya no existe: se quedó con el naranja solo. */
.package-card .package-strategic-phrase { color: var(--cacao); }

/* ==========================================================================
   Sprint 8: materiales descargables del portal privado
   ========================================================================== */

.material-grid-intro {
  color: var(--taupe);
  font-size: 0.95rem;
  margin: 0 0 22px;
  max-width: 60ch;
}
.material-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .material-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .material-grid { grid-template-columns: repeat(3, 1fr); } }

.material-card {
  display: flex;
  gap: 16px;
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  align-items: flex-start;
}
/* El Plan de Parto es el material que la Dra. señala como el más importante. */
.material-card--destacado {
  border-color: rgba(184, 111, 82, 0.42);
  box-shadow: var(--shadow-card);
}
.material-card .card-icon {
  margin-bottom: 0;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.material-card .card-icon svg { width: 19px; height: 19px; }
.material-card-body { flex: 1; min-width: 0; }
.material-card-title {
  font-family: var(--font-nav);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cacao);
  margin: 0 0 5px;
  line-height: 1.35;
}
.material-card-desc {
  font-size: 0.86rem;
  color: var(--taupe);
  line-height: 1.5;
  margin: 0 0 14px;
}
.material-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.material-card-actions .btn { width: auto; }

/* Tarjeta de audio (S15.4A.14) — el audio de la sesión 13 de Yoga.

   El reproductor nativo del navegador, no uno propio. Tres razones: ya sabe
   de teclado y de lector de pantalla, ya sabe pedir rangos para que la alumna
   pueda adelantar sin bajarse los 17 MB, y en el móvil se integra con los
   controles del sistema. Un reproductor de encargo tendría que ganarse esas
   tres cosas para empatar.

   Nace oculto porque no tiene src: la URL firmada caduca y se pide al pulsar
   "Escuchar audio". El botón se retira cuando el reproductor aparece, para
   que no queden dos controles diciendo lo mismo. */
.material-audio {
  display: block;
  width: 100%;
  margin-top: 12px;
  border-radius: 999px;
}
.material-audio[hidden] { display: none; }
/* El cromo del reproductor nativo es gris de serie. No se puede teñir por
   dentro, pero sí asentarlo sobre el marfil de la casa para que no parezca
   una pieza pegada de otro sitio. */
.material-card--audio .material-audio { background: var(--ivory); }
/* La duración, junto al título: dice de entrada si son tres minutos o veinte,
   que es lo primero que uno quiere saber antes de darle a escuchar. */
.material-card-duracion {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--taupe);
  letter-spacing: 0.04em;
  margin-left: 6px;
  white-space: nowrap;
}
.material-preview-btn {
  font-family: var(--font-nav);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--terracotta-dark);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.material-preview-btn:hover { color: var(--cacao); }

/* ---------- Modal de vista previa ---------- */
.modal-panel--viewer {
  max-width: 980px;
  width: min(980px, 94vw);
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Altura definida: deja que el visor sea el único que se estira y evita
     que el pie se monte sobre el PDF en pantallas bajas. */
  height: min(92vh, 900px);
  max-height: 92vh;
  overflow: hidden;
}
.material-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.material-modal-head h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--cacao);
}
.material-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.material-modal-actions .btn { width: auto; }
.modal-close--inline {
  position: static;
  flex-shrink: 0;
}
.material-viewer {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--sand);
  /* El iframe se ancla al contenedor: un height:100% sobre un item flex no
     resuelve de forma fiable y el visor se desbordaba. */
  position: relative;
}
.material-viewer iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.material-modal-note {
  margin: 0;
  padding: 11px 20px 14px;
  font-size: 0.78rem;
  color: var(--taupe);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.material-modal-note a { color: var(--terracotta-dark); }

@media (max-width: 640px) {
  .material-modal-head { flex-wrap: wrap; }
  .material-modal-head h3 { font-size: 1rem; width: 100%; order: -1; }
  .material-card-actions .btn { width: 100%; }
}

/* ===========================================================================
   Panel administrativo (sprint 10)
   ---------------------------------------------------------------------------
   Pantalla de trabajo, no de venta: se lee de un vistazo y se opera rápido.
   Reutiliza la paleta y las tipografías del sitio, sin introducir un lenguaje
   visual nuevo. Nada de esto toca el home.
   =========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.admin-shell { min-height: 60vh; }

.admin-top {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: flex-start; justify-content: space-between;
  padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.admin-top h1 { margin: 0 0 4px; }
.admin-top .lede { margin: 0; }
.admin-sesion { text-align: right; display: grid; gap: 8px; justify-items: end; }
.admin-sesion .card-meta { margin: 0; }

.admin-aviso {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(184, 149, 90, 0.08);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  color: var(--taupe);
}

.admin-bloque { margin-top: 34px; }
.admin-bloque h2 { margin: 0 0 4px; }
.admin-bloque h3 { margin: 30px 0 10px; font-size: 1.05rem; }
.admin-bloque .card-meta { margin: 0 0 14px; }

.admin-buscador { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-buscador input[type="search"] {
  flex: 1 1 260px; min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white-warm); color: var(--charcoal);
  font-family: var(--font-body); font-size: 0.95rem;
}

/* Las tablas pueden crecer más que el móvil: cada una se desplaza dentro de
   su propia caja para que la página nunca lo haga en horizontal. */
.admin-tabla-scroll { overflow-x: auto; }

.admin-tabla {
  width: 100%; border-collapse: collapse;
  font-size: 0.9rem; background: var(--white-warm);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden;
}
.admin-tabla th, .admin-tabla td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-tabla thead th {
  font-family: var(--font-nav); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--taupe);
  background: rgba(232, 215, 195, 0.32);
}
.admin-tabla tbody tr:last-child td { border-bottom: 0; }
.admin-tabla td { font-variant-numeric: tabular-nums; }

.admin-fila { cursor: pointer; transition: background 0.15s ease; }
.admin-fila:hover, .admin-fila:focus-visible {
  background: rgba(184, 111, 82, 0.07); outline: none;
}
.admin-fila:focus-visible { box-shadow: inset 0 0 0 2px var(--terracotta); }

.admin-estado { font-weight: 600; }
.admin-estado--active  { color: var(--sage); }
.admin-estado--expired { color: var(--taupe); }
.admin-estado--revoked { color: var(--terracotta-dark); }

.admin-vacio { color: var(--taupe); font-style: italic; margin: 14px 0 0; }

.admin-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; margin: 18px 0 0;
  padding: 18px; background: var(--white-warm);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.admin-datos dt {
  font-family: var(--font-nav); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--taupe); margin-bottom: 3px;
}
.admin-datos dd { margin: 0; color: var(--charcoal); }

.admin-acciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin-top: 30px; align-items: start;
}
.admin-accion {
  display: grid; gap: 10px; align-content: start;
  padding: 20px; background: var(--white-warm);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.admin-accion h3 { margin: 0; }
.admin-accion label {
  font-family: var(--font-nav); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--taupe);
}
.admin-accion select,
.admin-accion input[type="text"] {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--ivory); color: var(--charcoal);
  font-family: var(--font-body); font-size: 0.92rem;
}
.admin-accion .btn { justify-self: start; margin-top: 4px; }

.admin-mensaje {
  margin: 22px 0 0; padding: 12px 16px;
  border-radius: var(--radius-sm); font-size: 0.92rem;
  border-left: 3px solid var(--taupe); background: rgba(122, 102, 91, 0.08);
  color: var(--charcoal);
}
.admin-mensaje--ok    { border-left-color: var(--sage); background: rgba(125, 138, 106, 0.12); }
.admin-mensaje--error { border-left-color: var(--terracotta-dark); background: rgba(156, 90, 64, 0.10); }

.admin-negado { text-align: center; padding: 40px 0; }
.admin-negado h1 { margin-bottom: 10px; }

.btn-enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-nav); font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--terracotta-dark); text-decoration: underline;
}
.btn-enlace:hover { color: var(--cacao); }

@media (max-width: 640px) {
  .admin-top { flex-direction: column; }
  .admin-sesion { text-align: left; justify-items: start; }
  .admin-acciones { grid-template-columns: 1fr; }
}

/* Texto de ayuda del panel: son frases, no etiquetas. card-meta las pondría
   en mayúsculas y una instrucción de dos líneas en versales se lee a gritos. */
.admin-ayuda {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--taupe);
  text-transform: none;
  letter-spacing: 0;
}
.admin-sesion .admin-ayuda { margin: 0; }
.admin-sesion .admin-ayuda strong { color: var(--charcoal); font-weight: 600; }

/* Campo trampa de los formularios públicos.
   Misma técnica que .sr-only: recortado a 1px en lugar de empujado fuera con
   left:-9999px, que en este layout ensanchaba el documento y aparecía scroll
   horizontal en el home. Sigue en el DOM para quien rellena a ciegas, y con
   aria-hidden + tabindex=-1 ni un lector de pantalla ni el tabulador llegan. */
.trampa {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Sprint 13 · Área privada de la alumna
   ==========================================================================
   Panel, programa y sesión. El tono es el del resto del sitio —marfil, cacao,
   terracota, Cormorant para los títulos— y no el de un dashboard de SaaS: nada
   de tarjetas grises apiladas ni de métricas por todas partes. Lo que se
   repite es una lista larga y legible, porque lo que la alumna hace aquí es
   leer un temario y entrar a una sesión.
   ========================================================================== */

/* El contenido protegido nace cerrado y lo destapa mw-portal.js cuando
   Supabase confirma el acceso, o mock-auth.js en modo demo. Cerrado por
   defecto: si el JS no llega a ejecutarse, un área privada en blanco es mejor
   resultado que un área privada abierta. */
[data-portal-gated] { display: none; }
[data-portal-gated].is-open { display: block; }

/* ---------- Panel: rejilla de programas ---------- */
.portal-course-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 760px) { .portal-course-grid { grid-template-columns: repeat(2, 1fr); } }

.portal-course-card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.portal-course-kicker {
  font-family: var(--font-nav);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.portal-course-card h3 { margin: 0; }

.portal-progress { display: flex; flex-direction: column; gap: 8px; }
.portal-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--taupe);
}
.portal-access-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--taupe);
}
.portal-course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.dashboard-lede {
  max-width: 62ch;
  margin: 10px 0 0;
  color: var(--taupe);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ---------- Estado vacío ---------- */
/* Elegante y sin culpa: la mayoría de quien llega aquí acaba de inscribirse y
   está esperando la confirmación, no ha hecho nada mal. */
.portal-empty {
  border: 1px dashed rgba(91, 58, 46, 0.24);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  background: rgba(255, 253, 248, 0.6);
}
.portal-empty-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--gold);
  margin-bottom: 16px;
}
.portal-empty-icon svg { width: 20px; height: 20px; }
.portal-empty h3 { margin-bottom: 10px; }
.portal-empty p {
  max-width: 56ch;
  margin: 0 auto 24px;
  color: var(--taupe);
}

/* ---------- Acceso no disponible ---------- */
.portal-denied {
  max-width: 620px;
  margin: 72px auto;
  padding: 48px 32px;
  text-align: center;
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.portal-denied-icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ivory);
  color: var(--gold);
  margin-bottom: 18px;
}
.portal-denied-icon svg { width: 20px; height: 20px; }
.portal-denied h2 { margin-bottom: 12px; }
.portal-denied p {
  color: var(--taupe);
  max-width: 52ch;
  margin: 0 auto 24px;
}
.portal-denied-help {
  margin: 22px 0 0;
  font-size: 0.86rem;
}

/* ---------- Lista de sesiones ---------- */
/* Una fila por sesión, no una tarjeta: son 15 y 16, y en tarjetas la página se
   vuelve un muro. El número a la izquierda da el orden de un vistazo. */
.portal-lesson-list {
  border-top: 1px solid var(--line);
  max-width: 820px;
}
.portal-lesson {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--charcoal);
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.portal-lesson:hover,
.portal-lesson:focus-visible {
  background: rgba(232, 215, 195, 0.28);
  padding-left: 14px;
}
.portal-lesson-num {
  font-family: var(--font-nav);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.portal-lesson-title { line-height: 1.45; }
.portal-lesson-state {
  font-family: var(--font-nav);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.portal-lesson.is-done .portal-lesson-num { color: var(--sage); }
.portal-lesson.is-done .portal-lesson-state {
  color: var(--sage);
  border-color: rgba(125, 138, 106, 0.5);
  background: rgba(125, 138, 106, 0.1);
}
@media (max-width: 560px) {
  .portal-lesson { grid-template-columns: auto 1fr; gap: 12px; }
  .portal-lesson-state { grid-column: 2; justify-self: start; }
}

/* ---------- Barra lateral de la sesión ---------- */
.lesson-sidebar-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
}
.lesson-sidebar-num {
  font-family: var(--font-nav);
  font-size: 0.68rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.lesson-sidebar-text { line-height: 1.4; }
/* La palomita sólo aparece cuando la sesión está hecha: un icono siempre
   visible en gris se lee como "deshabilitado", que es justo lo contrario. */
.lesson-sidebar-check { opacity: 0; color: var(--sage); }
.lesson-sidebar-check svg { width: 14px; height: 14px; }
.lesson-sidebar-item.is-done .lesson-sidebar-check { opacity: 1; }

/* ---------- Video pendiente ---------- */
/* No hay videos privados todavía. Se anuncia el hueco en vez de simular un
   reproductor que no va a responder al clic. */
.video-frame--pending {
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(155deg, rgba(232, 215, 195, 0.5), rgba(248, 241, 231, 0.9));
  border: 1px dashed rgba(91, 58, 46, 0.2);
}
.video-frame--pending .video-frame-note {
  font-size: 0.8rem;
  color: var(--taupe);
}

/* ---------- Marcar como completada ---------- */
.lesson-complete-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.btn-complete.is-done {
  background: var(--sage);
  border-color: var(--sage);
}
.lesson-complete-msg {
  font-size: 0.86rem;
  color: var(--terracotta-dark);
}

/* ---------- Zona de video de la sesión (sprint 13.2B) ---------- */
/* El contenedor manda: dentro va el aviso (sin video / cargando / error) o el
   reproductor, nunca los dos. El iframe lo inserta mw-portal.js sólo cuando
   Supabase ha confirmado el acceso, así que aquí no hay nada que ocultar —
   simplemente no existe hasta entonces. */
.video-zone { margin-bottom: 8px; }
.video-zone .video-frame { margin-bottom: 0; }

/* Marco del reproductor. aspect-ratio en el contenedor y el iframe encima:
   así el hueco reserva su altura antes de que Vimeo cargue y la página no
   pega un salto al aparecer el video. */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cacao);
  box-shadow: var(--shadow-soft);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mientras se prepara, el círculo de play late despacio: dice "esto está
   ocurriendo" sin meter un spinner ajeno al resto del sitio. */
.video-zone[data-estado="cargando"] .video-frame-play {
  animation: video-latido 1.6s ease-in-out infinite;
}
@keyframes video-latido {
  0%, 100% { opacity: 0.5; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .video-zone[data-estado="cargando"] .video-frame-play { animation: none; opacity: 0.75; }
}

/* En error el aviso deja de ser decorativo y el botón necesita aire. */
.video-zone[data-estado="error"] .video-frame-caption {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.86rem;
  max-width: 40ch;
  text-align: center;
  line-height: 1.5;
}
.video-zone [data-video-reintentar] { margin-top: 4px; }

/* [hidden] es sólo `display: none` con especificidad de elemento, así que
   cualquier clase que declare display lo pisa: .video-frame es flex y .btn es
   inline-flex, y los dos seguían viéndose con el atributo puesto. Se les gana
   por especificidad en vez de recurrir a !important. */
.video-frame[hidden],
.video-zone .btn[hidden] { display: none; }

/* ---------- Pantalla de adquisición (hotfix S13.1) ---------- */
/* Quien llega aquí tiene cuenta pero todavía no tiene programa. No ha hecho
   nada mal, así que el bloque no se comporta como un aviso de error: mantiene
   el marco punteado de "todavía no hay nada" y debajo ofrece las tres puertas
   de entrada, en el orden en que conviene leerlas. */
.portal-oferta {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin: 20px auto 0;
  max-width: 860px;
  text-align: left;
}
@media (min-width: 760px) { .portal-oferta { grid-template-columns: repeat(3, 1fr); } }

.portal-oferta-card {
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.portal-oferta-card h4 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  margin: 0;
  line-height: 1.2;
}
.portal-oferta-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--taupe);
  line-height: 1.55;
  flex: 1;
}
.portal-oferta-card .btn { margin-top: 6px; }

/* El paquete lleva la única marca de énfasis: un filete dorado arriba. Ni
   sombra ni escala — tres tarjetas compitiendo entre sí se leen como un
   comparador de precios, y esto es un primer paso, no una subasta. */
.portal-oferta-card--destacada {
  border-color: rgba(184, 149, 90, 0.55);
  box-shadow: 0 -3px 0 0 var(--gold) inset;
}

.portal-oferta-ayuda {
  margin: 26px auto 0;
  max-width: 52ch;
  font-size: 0.86rem;
  color: var(--taupe);
  line-height: 1.6;
}

/* Aviso de "no pudimos preparar este material", dentro de su propia tarjeta.
   Nace oculto y sólo aparece si la descarga firmada falla; con los PDF todavía
   públicos no llega a verse. En la tarjeta y no en un alert, para que la alumna
   no pierda de vista lo que estaba intentando descargar. */
.material-card-error {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--terracotta-dark);
}

/* ===========================================================================
   Panel · resumen, filtros y avance  (sprint 14)
   =========================================================================== */

/* Las cinco tarjetas del resumen. Se reparten el ancho que haya y no se
   estiran a lo alto: la cifra manda y el resto la explica. */
.admin-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin: 18px 0 10px;
}
.admin-tarjeta {
  padding: 18px 20px;
  background: var(--white-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.admin-tarjeta-cifra {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.05;
  color: var(--cacao);
  font-variant-numeric: tabular-nums;
}
.admin-tarjeta-titulo {
  margin: 6px 0 2px;
  font-family: var(--font-nav);
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
}
.admin-tarjeta-pie {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--taupe);
}

/* Filtros: una fila que se parte sola cuando no cabe. */
.admin-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin-bottom: 14px;
}
.admin-filtro { display: grid; gap: 4px; }
.admin-filtro label {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--taupe);
}
.admin-filtro select {
  padding: 9px 12px;
  min-width: 190px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white-warm);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.admin-filtro-limpiar { padding-bottom: 11px; }

/* Nueve columnas no caben en un móvil ni queriendo: la tabla se desplaza
   dentro de su caja, como las demás, y la página nunca lo hace. */
.admin-tabla--ancha { min-width: 940px; }

/* Un vencimiento que se acerca se nota sin tener que leer la fecha. */
.admin-pronto { color: var(--terracotta-dark); font-weight: 600; }

/* Avance por programa. Se pintan los dos aunque sólo tenga uno: saber que no
   ha tocado el otro es información, y una fila ausente no la da. */
.admin-avance {
  display: grid;
  gap: 14px;
  margin: 4px 0 0;
}
.admin-avance-fila {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr auto;
  align-items: center;
  gap: 14px;
}
.admin-avance-titulo {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--charcoal);
}
.admin-barra {
  height: 9px;
  border-radius: 99px;
  background: rgba(184, 149, 90, 0.18);
  overflow: hidden;
}
.admin-barra-relleno {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--sage);
  /* Sin transición: la barra no aparece, ya estaba. Animarla al pintar la
     ficha haría parecer que el dato llega tarde. */
}
.admin-avance-cifra {
  margin: 0;
  font-size: 0.84rem;
  color: var(--taupe);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .admin-avance-fila { grid-template-columns: 1fr; gap: 6px; }
  .admin-filtro select { min-width: 0; width: 100%; }
  .admin-filtro { width: 100%; }
}

/* Nota bajo el temario. Ocupa el sitio donde hasta el sprint 14.3 había una
   insignia en la primera sesión que anunciaba acceso sin inscripción. Ahora
   el temario se lee entero y esta línea dice cuándo se abren las sesiones,
   en vez de prometer una suelta. */
.temario-nota {
  margin: 14px auto 0;
  max-width: 58ch;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--taupe);
}

/* ===========================================================================
   Páginas legales  (sprint 15.2A)
   =========================================================================== */
/* Son cuatro documentos largos que se leen de arriba abajo. Lo único que
   necesitan es respirar: títulos que se distingan del cuerpo sin gritar, y
   párrafos con medida de lectura. El ancho ya lo fija el contenedor. */
.legal-doc h2 {
  margin: 34px 0 10px;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--cacao);
}
.legal-doc h2:first-of-type { margin-top: 8px; }
.legal-doc p {
  margin: 0 0 14px;
  line-height: 1.7;
}
.legal-actualizado {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-nav);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Los enlaces legales del pie mínimo — checkout, login, alta y las propias
   páginas legales. Discretos: están para quien los busque, no para competir
   con lo que la página pide hacer. */
.footer-legal-minimal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 14px 0 10px;
}
.footer-legal-minimal a {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--taupe);
  text-decoration: none;
}
.footer-legal-minimal a:hover { color: var(--terracotta-dark); text-decoration: underline; }


/* Aviso de guardado de las notas (S15.4, tarea Q). Discreto: dice lo justo
   para saber que quedo guardado, sin robarle sitio a la nota. */
.notes-msg {
  margin-top: 8px;
  min-height: 1.2em;
  font-family: var(--font-nav);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--taupe);
}
/* Mientras no ha cargado la nota guardada, el campo se ve en espera. */
.notes-textarea[disabled] { opacity: 0.6; cursor: progress; }


/* El marco suelto de Yoga (.yoga-figure) se retiro en S15.4A.4: flotaba por
   encima del recuadro de temas y salia deformado. La foto de esa seccion vive
   ahora dentro del recuadro, como fondo. */



/* Panel visual del portal (S15.4A.5) — sustituye al bloque "Recursos y guias".

   Sin padding: la foto llega a los bordes del recuadro, que es lo que lo
   convierte en un panel de imagen y no en una tarjeta con una foto dentro.
   El 4:3 lo fija aspect-ratio, asi que la caja no depende de que la imagen
   haya cargado y no hay salto de maquetacion. */
.dashboard-secondary--galeria {
  padding: 0;
  overflow: hidden;
}
.portal-galeria {
  display: grid;
  aspect-ratio: 4 / 3;
  border-radius: inherit;
  overflow: hidden;
}
.portal-galeria > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* El relevo: mismo gesto que en el sitio publico —entra subiendo y se asienta—
   para que portal y web se sientan la misma pieza. */
.portal-galeria--carrusel > img {
  opacity: 0;
  transform: translateY(10px) scale(1.012);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.22,.8,.26,1);
}
.portal-galeria--carrusel > img.is-active {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .portal-galeria--carrusel > img { transition: none; transform: none; }
}
/* En movil las dos tarjetas van apiladas: el panel se limita en alto para no
   empujar el resto de la pagina hacia abajo. */
@media (max-width: 719px) {
  .portal-galeria { aspect-ratio: 16 / 10; }
}