/* ============================================================
   STRONG 50s · Módulo 1
   Estilo de la landing anterior (limpio, minimalista, cálido)
   con la guía de color de la cliente: nórdica, invernal, de tierra.
   Regla 70 · 20 · 10: claros / estructura / profundos.
============================================================ */

@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("../assets/fonts/archivo-black.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Bases claras y neutros */
  --nieve:      #F3F1EC;   /* fondo principal de toda la página */
  --lino:       #E6E0D6;   /* secciones alternas, tarjetas */
  --niebla:     #C5C6C9;   /* fondo detrás de fotos, líneas, bordes */
  --taupe:      #8C8077;   /* íconos, divisores (no texto largo) */
  --salvia:     #8E9C87;   /* detalles suaves */
  /* Profundos y un toque cálido */
  --medianoche: #1B1F2B;   /* texto principal, footer */
  --pino:       #2E3B33;   /* color firma: botones, bloques de impacto, titulares */
  --oliva:      #3E3D30;   /* texto secundario, hover de botones */
  --roble:      #8F6B4C;   /* un toquecito: línea fina, número grande */

  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mark: "Archivo Black", "Arial Black", sans-serif;

  --maxw: 1140px;
  --maxw-narrow: 760px;
  --radius: 8px;
  --section-y: 4rem;
  --topbar-h: 60px;

  --wa-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 0 0 1.51 5.26l-.999 3.648 3.978-1.607zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413z'/%3E%3C/svg%3E");
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 8px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--taupe) var(--nieve);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--medianoche);
  background: var(--nieve);
  line-height: 1.65;
  font-size: 1.125rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pino); color: var(--nieve); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--pino); outline-offset: 3px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--pino); color: var(--nieve);
  padding: 0.75rem 1.25rem; border-radius: var(--radius); font-weight: 500;
  transition: top 0.2s ease;
}
.skip:focus { top: 0.75rem; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.5rem; }
.container--narrow { max-width: var(--maxw-narrow); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--lino { background: var(--lino); }

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

/* ---------- Tipografía ---------- */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.title {
  font-weight: 300;
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  line-height: 1.22;
  color: var(--pino);
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  text-align: center;
}
.title--left { text-align: left; }

.lead {
  font-weight: 300;
  font-size: clamp(1.4rem, 3.8vw, 1.9rem);
  line-height: 1.3;
  color: var(--pino);
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  text-align: center;
}
.lead--left { text-align: left; }
/* Toque de Roble: una línea fina sobre la frase clave */
.lead--rule { padding-top: 1.5rem; margin-top: 2rem; background: linear-gradient(var(--roble), var(--roble)) left top / 3.5rem 2px no-repeat; }

.subhead {
  font-weight: 400;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  line-height: 1.35;
  color: var(--pino);
  margin: 2.5rem 0 1.5rem;
}

.body { margin: 0 0 1.25rem; }
.body--closing { font-weight: 400; }
.body strong { font-weight: 500; color: var(--pino); }
.container--narrow .body, .container--narrow .req__desc { max-width: 66ch; }
.container--narrow > .body, .center-block .body { margin-inline: auto; }
.req__desc { text-wrap: pretty; }

.note {
  font-size: 1.0625rem;
  color: var(--oliva);
  max-width: 60ch;
  margin: 2rem auto 0;
  text-align: center;
}
.aside { margin-top: 2.5rem; color: var(--oliva); }
.aside .body:last-child { margin-bottom: 0; }

/* ---------- Wordmark ---------- */
.wordmark {
  font-family: var(--font-mark);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--pino);
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}
.wordmark__accent { color: var(--salvia); }
.wordmark--sm { font-size: 1.25rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.wordmark--sm .wordmark__accent { margin-left: 0.3em; }
.wordmark--footer { font-size: 1.6rem; color: var(--nieve); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.1;
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  padding: 0.95rem 1.6rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.btn--primary { background: var(--pino); color: var(--nieve); }
.btn--primary:hover { background: var(--oliva); transform: translateY(-2px); }
.btn--light { background: var(--nieve); color: var(--pino); }
.btn--light:hover { background: var(--lino); transform: translateY(-2px); }
.btn--lg { min-height: 56px; padding: 1.1rem 2rem; font-size: 1.125rem; }
.btn--sm { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 1rem; }
.btn--outline { background: transparent; color: var(--pino); box-shadow: inset 0 0 0 1.5px var(--pino); }
.btn--outline:hover { background: var(--pino); color: var(--nieve); transform: translateY(-2px); }
.btn--light:focus-visible { outline-color: var(--nieve); }

.pricing__actions { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.pricing__actions .btn { width: 100%; max-width: 24rem; }

.icon-arrow { display: inline-flex; width: 1.15em; height: 1.15em; transition: transform 0.2s ease; }
.icon-arrow svg { width: 100%; height: 100%; }
.btn:hover .icon-arrow { transform: translateX(3px); }

.icon-wa {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--wa-mask) center / contain no-repeat;
  mask: var(--wa-mask) center / contain no-repeat;
}
.icon-wa--lg { width: 1.9rem; height: 1.9rem; }

/* ---------- Barra superior ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--topbar-h);
  background: rgba(243, 241, 236, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--niebla);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--topbar-h) + 2.5rem); padding-bottom: var(--section-y); }
.hero__grid { display: grid; gap: 2.5rem; }
.hero__wordmark { font-size: clamp(2.4rem, 11vw, 3.5rem); margin-bottom: 1.5rem; }
.hero__wordmark .wordmark__accent { margin-left: 0.18em; }
.hero__title {
  font-weight: 300;
  font-size: clamp(1.85rem, 6vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--pino);
  margin: 0 0 1.25rem;
}
.hero__subtitle { font-size: clamp(1.125rem, 2.6vw, 1.25rem); margin: 0 0 1.25rem; max-width: 52ch; }
.hero__tag { font-size: 1rem; letter-spacing: 0.02em; color: var(--oliva); font-weight: 500; margin: 0 0 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero__figure { position: relative; border-radius: 14px; overflow: hidden; margin: 0; background: var(--niebla); }
.hero__media .photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 12%; display: block; }
.hero__caption {
  position: absolute; bottom: 0; inset-inline: 0;
  padding: 3.5rem 1.5rem 1.4rem;
  background: linear-gradient(to top, rgba(27, 31, 43, 0.78) 0%, rgba(27, 31, 43, 0.35) 55%, transparent 100%);
  display: flex; flex-direction: column; gap: 0.2rem;
  color: #fff;
}
.hero__caption-name { font-weight: 500; font-size: 1.0625rem; line-height: 1.2; }
.hero__caption-cred { font-weight: 400; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; }

.photo { background: var(--niebla); }

/* ---------- Qué es: negaciones y pilares ---------- */
.negations {
  list-style: none; margin: 2.5rem 0 1.5rem; padding: 0;
  display: grid; gap: 1px;
  background: var(--niebla);
  border: 1px solid var(--niebla);
  border-radius: var(--radius);
  overflow: hidden;
}
.negation { background: var(--nieve); text-align: center; font-weight: 500; font-size: 1.125rem; color: var(--pino); padding: 1.25rem 1rem; }

.dimensions { list-style: none; margin: 2rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.dimension { background: var(--lino); color: var(--pino); font-weight: 500; text-align: center; padding: 1rem 0.5rem; border-radius: var(--radius); font-size: 1.0625rem; }

/* ---------- Infografía de los dos módulos ---------- */
.ruta { margin-top: 3rem; --ruta-gap: 3.5rem; --ruta-pad: 1.75rem; --ruta-out: 0.6rem; }
.ruta__grid { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--ruta-gap); }
.ruta__mod { position: relative; display: grid; background: var(--lino); border-radius: var(--radius); }
.ruta__top { padding: var(--ruta-pad) var(--ruta-pad) 1.5rem; }
.ruta__status { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ruta__tag { margin: 0; padding: 0.35rem 0.8rem; border-radius: var(--radius); background: var(--pino); color: var(--nieve); font-weight: 500; font-size: 1rem; line-height: 1.3; text-wrap: balance; }
.ruta__mod--soon .ruta__tag { background: var(--nieve); color: var(--oliva); }
.ruta__icon { flex: none; width: 2.5rem; height: 2.5rem; color: var(--taupe); }
.ruta__icon svg, .ruta__band-icon svg, .ruta__next svg { display: block; width: 100%; height: 100%; }
.ruta__head { display: flex; align-items: center; gap: 1.1rem; }
.ruta__num { font-family: var(--font-mark); font-size: clamp(3rem, 9vw, 4.25rem); line-height: 0.9; color: var(--taupe); }
.ruta__title { margin: 0; display: grid; gap: 0.15rem; }
.ruta__label { font-size: 1.0625rem; font-weight: 500; color: var(--oliva); }
.ruta__pillar { font-weight: 300; font-size: clamp(1.9rem, 5.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--pino); }
.ruta__band {
  position: relative;
  margin: 0 calc(var(--ruta-out) * -1);
  padding: 1rem calc(var(--ruta-pad) + var(--ruta-out));
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--pino);
  color: var(--nieve);
  font-size: 1.0625rem;
  line-height: 1.45;
  border-radius: 4px;
}
.ruta__band strong { font-weight: 500; }
.ruta__band-icon { flex: none; width: 1.9rem; height: 1.9rem; }
.ruta__bottom { padding: 1.5rem var(--ruta-pad) var(--ruta-pad); display: flex; flex-direction: column; }
.ruta__text { margin: 0 0 1.5rem; font-size: 1.0625rem; }
.ruta__meta { margin: auto 0 0; }
.ruta__meta > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--niebla); font-size: 1.0625rem; }
.ruta__meta > div:last-child { padding-bottom: 0; }
.ruta__meta dt { color: var(--oliva); }
.ruta__meta dd { margin: 0; font-weight: 500; color: var(--pino); text-align: right; }
.ruta__next { position: absolute; z-index: 1; width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: 50%; background: var(--nieve); color: var(--pino); border: 2px solid var(--pino); }
.ruta__next--h { display: none; }
.ruta__next--v { left: 50%; top: 100%; transform: translate(-50%, calc((var(--ruta-gap) - 2.75rem) / 2)) rotate(90deg); }
.ruta__mod:first-child::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: var(--ruta-gap); margin-left: -1.5px; background: var(--pino); }
.ruta__reglas { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0; }
.ruta__reglas li { padding: 1rem 0; border-top: 1px solid var(--niebla); font-size: 1.0625rem; }
.ruta__reglas li:last-child { border-bottom: 1px solid var(--niebla); }
.ruta__reglas strong { display: block; font-weight: 500; font-size: 1.2rem; color: var(--pino); margin-bottom: 0.2rem; }
.ruta__after { margin-top: 3rem; }

@media (min-width: 880px) {
  .ruta__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: var(--ruta-gap); row-gap: 0; }
  .ruta__mod { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .ruta__band { border-radius: 0; }
  .ruta__mod:first-child .ruta__band { margin-right: calc(var(--ruta-gap) / -2); border-radius: 4px 0 0 4px; }
  .ruta__mod:last-child .ruta__band { margin-left: calc(var(--ruta-gap) / -2); padding-left: calc(var(--ruta-pad) + var(--ruta-gap) / 2); border-radius: 0 4px 4px 0; }
  .ruta__mod:first-child .ruta__band { padding-right: calc(var(--ruta-pad) + var(--ruta-gap) / 2); }
  .ruta__next--v, .ruta__mod:first-child::after { display: none; }
  .ruta__next--h { display: block; right: 0; top: 50%; transform: translate(50%, -50%); }
  .ruta__reglas { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .ruta__reglas li, .ruta__reglas li:last-child { border-bottom: 0; padding: 1.1rem 0 0; }
}

/* ---------- Los dos módulos, en "Qué es" ---------- */
.duo__intro { text-align: center; font-weight: 500; color: var(--pino); margin-top: 1.75rem; }
.duo { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1rem; }
.duo__mod { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; row-gap: 0.85rem; align-items: center; background: var(--nieve); border-radius: var(--radius); padding: 1.5rem; }
.duo__num { font-family: var(--font-mark); font-size: clamp(2.75rem, 9vw, 3.5rem); line-height: 0.9; color: var(--taupe); }
.duo__title { margin: 0; display: grid; gap: 0.15rem; font-weight: 400; }
.duo__label { font-size: 1.0625rem; font-weight: 500; color: var(--oliva); }
.duo__pillar { font-weight: 300; font-size: clamp(1.7rem, 5.5vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--pino); }
.duo__text { grid-column: 1 / -1; margin: 0; padding-top: 0.85rem; border-top: 1px solid var(--niebla); }
@media (min-width: 640px) {
  .duo { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .duo__mod { padding: 1.75rem; }
}

/* ---------- Tarjetas ---------- */
.cards { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.card {
  background: var(--lino);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.section--lino .card { background: var(--nieve); }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(27, 31, 43, 0.08); border-color: var(--niebla); }
.card__icon { display: block; color: var(--taupe); margin-bottom: 1rem; width: 2.25rem; height: 2.25rem; }
.card__icon svg { width: 100%; height: 100%; }
.card__title { font-weight: 500; font-size: 1.2rem; color: var(--pino); margin: 0 0 0.6rem; line-height: 1.3; }
.card__text { margin: 0; font-size: 1.0625rem; }
.card__when { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 500; color: var(--oliva); }
.card--soon { background: transparent; border: 1px dashed var(--taupe); }
.card--soon:hover { border-color: var(--taupe); }

/* ---------- Para quién ---------- */
.paraquien__grid { display: grid; gap: 2.5rem; margin-bottom: 1rem; align-items: center; }
.paraquien__media .photo { width: 100%; border-radius: 14px; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 15%; }
.paraquien__content .subhead { margin-top: 2rem; margin-bottom: 0; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; margin: 2rem auto; padding: 0; max-width: var(--maxw-narrow); display: grid; gap: 0.9rem; }
.checklist li { position: relative; padding-left: 2rem; font-size: 1.125rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.45rem;
  width: 1.2rem; height: 1.2rem;
  background-color: var(--pino);
  -webkit-mask: var(--check-mask) center / contain no-repeat;
  mask: var(--check-mask) center / contain no-repeat;
}
.checklist--center { max-width: 30rem; text-align: left; }
.cards + .container--narrow { margin-top: 3.5rem; }

/* ---------- Qué vamos a aprender ---------- */
.aprender__layout { display: grid; gap: 2.5rem; align-items: start; margin-top: 2.5rem; }
.aprender__media .photo { width: 100%; border-radius: 14px; object-fit: cover; object-position: center top; display: block; max-height: 80vh; }

.modules { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.module {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
  background: var(--lino);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.section--lino .module { background: var(--nieve); }
.module:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(27, 31, 43, 0.08); }
.module__num { font-family: var(--font-mark); font-size: 1.7rem; color: var(--taupe); line-height: 1; }
.modules--move .module__num { color: var(--roble); }
.module__when { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 500; color: var(--oliva); }
.module__title { font-weight: 500; font-size: 1.25rem; color: var(--pino); margin: 0 0 0.75rem; line-height: 1.3; }
.module__desc { margin: 0 0 1rem; font-size: 1.0625rem; }
.module__desc:last-child { margin-bottom: 0; }
.module__row { margin: 0 0 0.5rem; font-size: 1.0625rem; }
.module__row:last-child { margin-bottom: 0; }
.module__key { font-weight: 500; color: var(--pino); }
.aprender__layout .subhead { margin-top: 3rem; margin-bottom: 0.75rem; }
.aprender__layout .lead { margin: 2rem 0 0; }

/* ---------- Requisitos ---------- */
.reqs { margin: 2.5rem 0 0; padding: 0; }
.req { padding: 1.5rem 0; border-bottom: 1px solid var(--niebla); }
.req:first-child { border-top: 1px solid var(--niebla); }
.req__term { font-weight: 500; font-size: 1.2rem; color: var(--pino); margin-bottom: 0.4rem; }
.req__desc { margin: 0; }
.req__list { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.reqs + * { margin-top: 0; }
#empezar .subhead { margin: 2rem 0 0; }

/* ---------- Duración y tiempo ---------- */
.tiempo { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.tiempo .subhead { margin: 0 0 1rem; }
.tiempo__big { font-family: var(--font-mark); font-size: clamp(2.25rem, 8vw, 3rem); line-height: 1; color: var(--pino); margin: 0 0 1.5rem; }
.tiempo__dates { margin: 0; }
.tiempo__dates > div { padding: 1rem 0; border-top: 1px solid var(--niebla); }
.tiempo__dates > div:last-child { border-bottom: 1px solid var(--niebla); }
.tiempo__dates dt { font-weight: 500; color: var(--pino); }
.tiempo__dates dd { margin: 0.15rem 0 0; }
@media (min-width: 880px) { .tiempo { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } }

/* ---------- Inversión ---------- */
.pricing { text-align: center; }
.pricing .body { margin-inline: auto; max-width: 58ch; }
.pricing .lead { margin-bottom: 2rem; }
.price__label { margin: 0; font-weight: 500; color: var(--oliva); }
.price { font-family: var(--font-mark); font-size: clamp(3.25rem, 14vw, 5rem); color: var(--roble); line-height: 1; margin: 0.5rem 0 0.75rem; }
.price__cur { font-size: 0.35em; vertical-align: super; letter-spacing: 0.02em; color: var(--pino); }
.price__reg { margin: 0 0 1.75rem; font-size: 1.0625rem; color: var(--oliva); }
.includes-label { font-weight: 500; color: var(--pino); margin: 2rem 0 1rem; }
.pricing .checklist { margin-block: 1rem 2rem; }
.highlight {
  font-size: 1.125rem;
  color: var(--pino);
  background: var(--lino);
  border-radius: var(--radius);
  padding: 1.1rem 1.5rem;
  margin: 0 0 2rem;
  display: inline-block;
}
.highlight strong { font-weight: 500; }
.highlight--wide { display: block; max-width: var(--maxw-narrow); margin: 2rem auto 0; text-align: center; }

/* ---------- Quién soy ---------- */
.bio__grid { display: grid; gap: 2.5rem; }
.bio__media .photo { width: 100%; border-radius: 14px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.credentials { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.credentials li { position: relative; padding-left: 1.5rem; font-size: 1.0625rem; color: var(--pino); font-weight: 500; }
.credentials li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 7px; height: 7px; border-radius: 50%; background: var(--taupe); }

/* ---------- CTA final: bloque de impacto Verde Pino ---------- */
.final-cta {
  position: relative; isolation: isolate;
  background: var(--pino);
  padding-block: 6rem;
  text-align: center;
  overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../assets/images/liliana-press.jpg") center 18% / cover no-repeat;
  filter: grayscale(100%) brightness(0.45) contrast(1.05);
}
.final-cta__overlay { position: absolute; inset: 0; z-index: -1; background: rgba(46, 59, 51, 0.62); }
.final-cta__inner { position: relative; z-index: 1; }
.final-cta__text {
  font-weight: 300;
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  line-height: 1.25;
  color: var(--nieve);
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0 auto;
}

/* ---------- Footer ---------- */
.footer { background: var(--medianoche); color: var(--lino); padding-block: 3rem 5.5rem; text-align: center; }
.footer__inner { display: grid; gap: 0.75rem; }
.footer__line { margin: 0; font-size: 1.0625rem; }
.footer__copy { margin: 0; font-size: 1rem; color: var(--niebla); }
.footer__link { display: inline-flex; align-items: center; min-height: 44px; }
.footer :focus-visible { outline-color: var(--nieve); }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 90;
  width: 3.75rem; height: 3.75rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--pino); color: var(--nieve);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--nieve), 0 6px 20px rgba(27, 31, 43, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.wa-float:hover { transform: scale(1.06); background: var(--oliva); }

/* ---------- Aparición al hacer scroll (solo con JavaScript) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Tablet / escritorio ---------- */
@media (min-width: 700px) {
  :root { --section-y: 6rem; }
  .negations { grid-template-columns: repeat(3, 1fr); }
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .cards--5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  :root { --section-y: 7rem; }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 4rem; }
  .hero__media .photo { aspect-ratio: 3 / 4; }
  .paraquien__grid { grid-template-columns: 0.75fr 1.25fr; gap: 4rem; }
  .aprender__layout { grid-template-columns: 1fr 0.52fr; gap: 4rem; }
  .aprender__media { position: sticky; top: calc(var(--topbar-h) + 1.5rem); }
  .aprender__media .photo { max-height: calc(100vh - var(--topbar-h) - 3rem); }
  .cards--5 { grid-template-columns: repeat(6, 1fr); }
  .cards--5 .card { grid-column: span 2; }
  .cards--5 .card:nth-child(4) { grid-column: 2 / span 2; }
  .bio__grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 4rem; }
}

/* ---------- Cinta de fotos de comida (Módulo 1) ---------- */
.cinta {
  --cinta-size: clamp(190px, 46vw, 300px);
  --cinta-gap: 1rem;
  margin-top: 2.75rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.cinta__track {
  display: flex;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: cinta-move 75s linear infinite;
}
.cinta:hover .cinta__track { animation-play-state: paused; }
.cinta__item { flex: none; width: var(--cinta-size); margin-right: var(--cinta-gap); }
.cinta__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  background: var(--niebla);
}
@keyframes cinta-move {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (min-width: 700px) { .cinta { --cinta-gap: 1.25rem; margin-top: 3.5rem; } }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .module, .wa-float, .icon-arrow { transition: none; }
  .cinta { overflow-x: auto; }
  .cinta__track { animation: none; }
  .cinta__item[aria-hidden="true"] { display: none; }
}