/* =============================================================
   RUTA AZUL · hoja de estilos principal
   Inés Olimpia Salazar · Psicóloga & Coach
   Estética: editorial serena — Fraunces + Inter
   Mobile-first (360px) → desktop con min-width.
   ============================================================= */

/* ---------- 1 · Tokens ---------- */
:root {
  --azul: #1f3a5f;          /* azul ruta — primario */
  --azul-deep: #152840;     /* azul nocturno — fondos profundos */
  --azul-soft: #3d5a7d;     /* azul medio */
  --crema: #f6f4ef;         /* fondo principal */
  --crema-warm: #ede9dd;    /* fondos secundarios cálidos */
  --dorado: #b8945f;        /* acento dorado seco */
  --dorado-deep: #8c6d40;   /* dorado profundo */
  --salvia: #cfe0d6;        /* verde salvia */
  --tinta: #1a1a1a;         /* texto principal */
  --tinta-soft: #5a5a5a;    /* texto secundario */
  --line: #d9d3c4;          /* líneas y bordes */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --max: 1240px;            /* contenedor general */
  --measure: 65ch;          /* línea de texto cómoda */
  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow-soft: 0 18px 40px -24px rgba(21, 40, 64, .35);
  --shadow-gold: 0 10px 30px -14px rgba(184, 148, 95, .5);
}

/* ---------- 2 · Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;        /* 17px */
  line-height: 1.6;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  color: var(--azul-deep);
}
h1 { letter-spacing: -.025em; }

p { margin: 0 0 1.1em; }
em, .italic { font-style: italic; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

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

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px; top: -120px;
  z-index: 2000;
  background: var(--azul-deep);
  color: var(--crema);
  padding: 12px 20px;
  border-radius: var(--radius);
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- 3 · Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 780px; }

.section { padding: 80px 0; }
.section--tight { padding: 56px 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dorado-deep);
  margin: 0 0 1rem;
}
.eyebrow--on-dark { color: var(--dorado); }

.h-display { font-size: clamp(2.5rem, 7vw, 6rem); line-height: 1.04; }
.h-section { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
.gold-italic { color: var(--dorado-deep); font-style: italic; }
.on-dark .gold-italic, .gold-italic--on-dark { color: var(--dorado); }

.lead { font-size: 1.15rem; color: var(--tinta-soft); max-width: 60ch; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Bloques oscuros */
.on-dark { background: var(--azul-deep); color: var(--crema); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--crema); }
.on-azul { background: var(--azul); color: var(--crema); }
.on-azul h1, .on-azul h2, .on-azul h3 { color: var(--crema); }

/* ---------- 4 · Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: 14px 28px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--azul); color: var(--crema); }
.btn--primary:hover { background: var(--azul-deep); box-shadow: var(--shadow-gold); }

.btn--cream { background: var(--crema); color: var(--azul-deep); }
.btn--cream:hover { box-shadow: var(--shadow-gold); }

.btn--gold { background: var(--dorado); color: #fff; }
.btn--gold:hover { background: var(--dorado-deep); box-shadow: var(--shadow-gold); }

.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: rgba(246, 244, 239, .08); }

.btn--block { width: 100%; }

/* Link con flecha + subrayado animado */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 500;
  text-decoration: none;
  color: var(--azul);
  position: relative;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: var(--dorado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow svg { transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--salvia); }

/* ---------- 5 · Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(246, 244, 239, .82);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(246, 244, 239, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -20px rgba(21, 40, 64, .6);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  text-decoration: none;
  color: var(--azul-deep);
  letter-spacing: -.01em;
}
.brand .brand-azul { font-style: italic; color: var(--dorado-deep); }
.brand svg { width: 22px; height: 22px; flex: none; }

.nav-links {
  display: none;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  text-decoration: none;
  font-size: .98rem;
  font-weight: 500;
  color: var(--tinta);
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--dorado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* Botón hamburguesa */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--azul-deep);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil desplegable */
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--crema);
}
.nav-menu-open .nav-mobile { display: flex; }
.nav-mobile a {
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--tinta);
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.nav-mobile a:last-child { border-bottom: none; }

@media (min-width: 920px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* ---------- 6 · Splash (Bloque 01) ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  background: var(--azul-deep);
  animation: splashOut .8s var(--ease) 2.2s forwards;
}
.splash__inner { text-align: center; }
.splash__logo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.4rem, 8vw, 4rem);
  color: var(--dorado);
  opacity: 0;
  animation: splashFade 1.4s var(--ease) .2s forwards;
}
.splash__bfly { width: 84px; height: 84px; margin: 0 auto 18px; }
.splash__bfly path { stroke: var(--dorado); }
@keyframes splashOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes splashFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* Si ya se vio en esta sesión, JS lo oculta al instante */
.splash--seen { display: none; }

/* ---------- 7 · Hero (Bloque 02) ---------- */
.hero {
  position: relative;
  padding: 48px 0 72px;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(207, 224, 214, .5), transparent 60%),
    radial-gradient(100% 80% at 10% 100%, rgba(237, 233, 221, .8), transparent 55%),
    var(--crema);
}
.hero__grid { display: grid; gap: 32px; }
.hero__title { font-size: clamp(2.8rem, 11vw, 5.4rem); margin-bottom: .35em; }
.hero__sub { font-size: 1.18rem; color: var(--tinta-soft); max-width: 32ch; margin-bottom: 2em; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }

.hero__visual { position: relative; }
.hero__visual figure { margin: 0; }
.hero__art {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--azul-deep);
}
.hero__quote {
  position: relative;
  margin-top: -28px;
  margin-left: auto;
  max-width: 280px;
  background: var(--crema);
  border: 1px solid var(--line);
  border-left: 3px solid var(--dorado);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--azul-deep);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 900px) {
  .hero { padding: 88px 0 110px; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px; }
  .hero__sub { font-size: 1.3rem; }
}

/* ---------- 8 · Marquee (Bloque 03) ---------- */
.marquee {
  background: var(--azul-deep);
  color: var(--crema);
  padding: 22px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: 0;
  will-change: transform;
  animation: marquee 38s linear infinite;
}
.marquee__track span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  padding: 0 .5em;
  color: var(--crema);
}
.marquee__track .dot { color: var(--dorado); padding: 0 .15em; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---------- 9 · Manifiesto (Bloque 04) ---------- */
.manifesto { text-align: center; }
.manifesto .wrap { padding-block: 96px; }
.manifesto__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4.5vw, 3.25rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 18ch;
  margin: 0 auto;
}
.manifesto__bfly { width: 64px; height: 64px; margin: 36px auto 0; }
.manifesto__bfly path { stroke: var(--dorado); }
.manifesto__rule {
  width: 56px; height: 2px;
  background: var(--dorado);
  border: none;
  margin: 28px auto 0;
}

/* ---------- 10 · Cards genéricas ---------- */
.grid { display: grid; gap: 24px; }
@media (min-width: 760px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--azul-deep);
  margin: 0 0 .6em;
}
.card__body { color: var(--tinta-soft); margin: 0; }

/* sección "para quién" */
.audience { background: var(--crema-warm); }

/* ---------- 11 · Método (Bloque 06) ---------- */
.method__intro { max-width: 60ch; margin: 0 auto 56px; text-align: center; color: var(--tinta-soft); }
.method__title { font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -.03em; }
.phases {
  display: grid;
  gap: 18px;
  counter-reset: phase;
}
@media (min-width: 700px) { .phases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .phases { grid-template-columns: repeat(3, 1fr); } }
.phase {
  position: relative;
  padding: 24px 22px;
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.phase__icon {
  display: block;
  width: 36px; height: 36px;
  margin-bottom: 14px;
  color: var(--dorado-deep);
  flex: none;
}
.phase__icon svg { display: block; width: 100%; height: 100%; }
.phase__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--dorado-deep);
  display: block;
  margin-bottom: 4px;
}
.phase h3 { font-size: 1.4rem; margin-bottom: .3em; }
.phase p { color: var(--tinta-soft); margin: 0; font-size: .98rem; }

/* ---------- 12 · Servicios (Bloque 07) ---------- */
.services { background: var(--crema-warm); }
.plan {
  display: flex;
  flex-direction: column;
  background: var(--crema);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
}
.plan--featured {
  background: var(--azul);
  color: var(--crema);
  border-color: var(--azul);
  box-shadow: var(--shadow-soft);
}
.plan--featured h3, .plan--featured .plan__price { color: var(--crema); }
.plan__tag {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.plan__tag--free { background: var(--salvia); color: var(--azul-deep); }
.plan__tag--star { background: var(--dorado); color: #fff; }
.plan__tag--single { background: var(--crema-warm); color: var(--tinta-soft); }
.plan h3 { font-size: 1.65rem; margin-bottom: .2em; }
.plan__meta { font-size: .92rem; color: var(--tinta-soft); margin-bottom: 14px; }
.plan--featured .plan__meta { color: var(--salvia); }
.plan__price { font-family: var(--serif); font-size: 2rem; font-weight: 300; margin-bottom: 4px; }
.plan__price small { font-size: .9rem; font-style: italic; color: var(--tinta-soft); }
.plan--featured .plan__price small { color: var(--salvia); }
.plan__list { margin: 18px 0 26px; display: grid; gap: 12px; }
.plan__list li {
  position: relative;
  padding-left: 28px;
  font-size: .97rem;
  line-height: 1.45;
}
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 18px; height: 18px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8945f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
}
.plan--featured .plan__list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe0d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
}
.plan .btn { margin-top: auto; }

/* ---------- 13 · Sobre Inés (Bloque 08) ---------- */
.about__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .about__grid { grid-template-columns: .85fr 1.15fr; gap: 60px; } }
.about__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--azul-deep);
}
.about__bio p { color: var(--tinta-soft); }
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 28px 0;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 600px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 300;
  color: var(--azul);
  line-height: 1;
}
.stat__label { font-size: .82rem; color: var(--tinta-soft); margin-top: 6px; }

/* ---------- 14 · Testimonios (Bloque 09) ---------- */
.testimonials .eyebrow { text-align: center; }
.testimonial {
  background: rgba(246, 244, 239, .05);
  border: 1px solid rgba(217, 211, 196, .22);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.testimonial__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--crema);
  margin: 0 0 1.2em;
}
.testimonial__who { font-size: .92rem; color: var(--salvia); }
.testimonial__who strong { display: block; font-weight: 600; color: var(--crema); }
.placeholder-note {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dorado);
  border: 1px dashed rgba(184, 148, 95, .5);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 18px;
}

/* ---------- 15 · Diario (Bloque 10) ---------- */
.post { display: flex; flex-direction: column; background: var(--crema); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.post__cover { aspect-ratio: 16 / 10; }
.post__cover svg { width: 100%; height: 100%; }
.post__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post__meta { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dorado-deep); margin-bottom: 12px; }
.post__meta span { color: var(--tinta-soft); }
.post h3 { font-size: 1.35rem; line-height: 1.2; margin-bottom: .5em; }
.post p { color: var(--tinta-soft); font-size: .96rem; margin-bottom: 1.2em; }
.post .link-arrow { margin-top: auto; }

/* ---------- 16 · Lead magnet (Bloque 11) ---------- */
.lead-magnet { background: var(--crema-warm); border-top: 4px solid var(--dorado); }
.lead-magnet__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 820px) { .lead-magnet__grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.lead-magnet h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.lead-magnet p { color: var(--tinta-soft); max-width: 46ch; }

.form { display: grid; gap: 14px; }
.form__field { display: grid; gap: 6px; }
.form__field label { font-size: .85rem; font-weight: 500; color: var(--tinta); }
.form input, .form textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--tinta);
  background: var(--crema);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  min-height: 48px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--dorado);
  box-shadow: 0 0 0 3px rgba(184, 148, 95, .22);
}
.form__hint { font-size: .8rem; color: var(--tinta-soft); margin: 4px 0 0; }
.form__error { font-size: .85rem; color: #9a3b2e; margin: 4px 0 0; min-height: 1.1em; }

/* ---------- 17 · CTA final (Bloque 12) ---------- */
.cta-final { text-align: center; }
.cta-final .wrap { padding-block: 96px; }
.cta-final h2 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); max-width: 20ch; margin-inline: auto; }
.cta-final p { color: var(--salvia); max-width: 52ch; margin: 1em auto 2em; }
.cta-final__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ---------- 18 · Footer (Bloque 13) ---------- */
.site-footer { background: var(--azul-deep); color: var(--crema); }
.site-footer .wrap { padding-block: 64px 32px; }
.footer__grid { display: grid; gap: 36px; }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.footer__brand .brand { color: var(--crema); font-size: 1.5rem; }
.footer__brand .brand .brand-azul { color: var(--dorado); }
.footer__tagline { color: var(--salvia); max-width: 30ch; margin-top: 14px; font-size: .95rem; }
.footer__addr { font-style: normal; color: rgba(246,244,239,.6); font-size: .85rem; margin-top: 14px; }
.footer h4 { font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado); margin-bottom: 16px; }
.footer__col a { display: inline-block; text-decoration: none; color: rgba(246,244,239,.82); padding: 5px 0; font-size: .96rem; transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--crema); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  justify-content: space-between; align-items: center;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(217,211,196,.18);
  font-size: .85rem; color: rgba(246,244,239,.6);
}
.footer__bottom em { font-style: italic; color: var(--dorado); }

/* ---------- 19 · WhatsApp FAB ---------- */
.fab {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 800;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background-color: #25d366;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath d='M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.2 1.6 6L4 29l8.2-1.6c1.7.9 3.7 1.4 5.7 1.4h.1C24.6 28.8 30 23.4 30 16.8 30 9.6 24.6 3 16 3zm0 23.5c-1.8 0-3.5-.5-5-1.4l-.4-.2-4.9.9.9-4.7-.3-.4C5.4 18.7 5 16.9 5 15c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 11.5-9 11.5zm5.5-7.9c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.2-.6-.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 53%;
  border-radius: 50%;
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fab:hover { transform: translateY(-3px) scale(1.04); }
/* El icono va como imagen de fondo (robusto). Ocultamos el SVG interno para no duplicar. */
.fab svg { display: none; }

/* ---------- 20 · Páginas internas (legales / gracias) ---------- */
.page-hero { background: var(--azul-deep); color: var(--crema); padding: 72px 0 56px; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.page-hero p { color: var(--salvia); margin: 0; }
.doc { padding: 64px 0 96px; }
.doc .wrap { max-width: 820px; }
.doc h2 { font-size: 1.5rem; margin-top: 2em; color: var(--azul-deep); }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--tinta); }
.doc ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1.1em; }
.doc ul li { margin-bottom: .4em; }
.doc a { color: var(--azul); text-decoration: underline; text-decoration-color: var(--dorado); text-underline-offset: 3px; }

/* Página gracias */
.thanks { min-height: 70vh; display: grid; place-items: center; text-align: center; background:
  radial-gradient(120% 90% at 50% 0%, rgba(207,224,214,.45), transparent 60%), var(--crema); }
.thanks__bfly { width: 96px; height: 96px; margin: 0 auto 28px; }
.thanks__bfly path { stroke: var(--dorado); }
.thanks h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.thanks p { color: var(--tinta-soft); max-width: 46ch; margin: 0 auto 2em; }

/* ---------- 21 · Scroll-reveal (content-first) ---------- */
/* Por defecto TODO es visible. La animación solo se aplica cuando el body
   tiene .js-ready (JS cargó) y respeta reduced-motion. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 22 · Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .splash { display: none !important; }
  .js-ready .reveal { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
}

/* ============================================================
   ADDENDUM — pivote mobile-first + más impacto visual
   ============================================================ */

/* ---------- 23 · Cifras grandes (Bloque 03B) ---------- */
.big-stats {
  background: var(--crema);
  padding: 72px 0 80px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.big-stats__intro { margin-bottom: 48px; }
.big-stats__grid {
  display: grid;
  gap: 56px;
}
@media (min-width: 760px) {
  .big-stats { padding: 96px 0 104px; }
  .big-stats__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .big-stats__intro { margin-bottom: 60px; }
}
.big-stat { text-align: center; position: relative; }
.big-stat::before {
  content: "";
  display: block;
  width: 36px; height: 1px;
  background: var(--dorado);
  margin: 0 auto 18px;
  opacity: .7;
}
.big-stat:first-child::before { display: none; }
@media (min-width: 760px) {
  .big-stat::before { display: none; }
  .big-stat + .big-stat { border-left: 1px solid var(--line); }
}
.big-stat__num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(5.2rem, 22vw, 11rem);
  line-height: .9;
  color: var(--azul);
  letter-spacing: -.045em;
}
.big-stat__num--word {
  font-size: clamp(2rem, 9vw, 4.6rem);
  font-style: italic;
  letter-spacing: -.025em;
  background: linear-gradient(120deg, var(--azul) 0%, var(--dorado) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: .2em 0;
}
.big-stat__suffix {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.8vw, 1.5rem);
  color: var(--dorado-deep);
  margin-top: 8px;
}
.big-stat__label {
  display: block;
  font-size: .92rem;
  color: var(--tinta-soft);
  line-height: 1.45;
  margin-top: 16px;
  letter-spacing: .015em;
}

/* ---------- 24 · TUPOTENCIAX teatral ---------- */
.method__title--theater {
  font-size: clamp(2.8rem, 14vw, 8rem);
  letter-spacing: -.04em;
  margin: .1em 0 .3em;
  background: linear-gradient(120deg, var(--azul-deep) 0%, var(--azul) 40%, var(--dorado) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* ---------- 25 · Mini-CTA entre secciones ---------- */
.mini-cta {
  background: var(--crema);
  padding: 48px 0;
}
@media (min-width: 760px) { .mini-cta { padding: 64px 0; } }
.mini-cta__text {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.3;
  color: var(--azul-deep);
  letter-spacing: -.015em;
  margin: 0 auto .8em;
  max-width: 24ch;
}
.link-arrow--gold {
  color: var(--dorado-deep);
  font-size: 1.02rem;
  font-weight: 500;
}
.link-arrow--gold::after { background: var(--dorado); }

/* ---------- 26 · CTA sticky móvil ---------- */
.mobile-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 850;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.mobile-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mobile-cta .btn {
  box-shadow: 0 16px 40px -10px rgba(31, 58, 95, .55);
  font-size: 1.02rem;
  padding: 16px 24px;
  min-height: 56px;
  letter-spacing: .005em;
}
@media (min-width: 760px) { .mobile-cta { display: none; } }

/* (El posicionamiento móvil del FAB se define más abajo, en la sección 38) */

/* ---------- 27 · Stats sobre Inés más grandes ---------- */
.stat__num { font-size: clamp(2.3rem, 8vw, 3rem); }
.stat__label { font-size: .82rem; }

/* ---------- 28 · Testimonios con snap horizontal en móvil ---------- */
@media (max-width: 759px) {
  .testimonials .grid--3 {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 4px 24px 16px;
    margin-inline: -24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .testimonials .grid--3::-webkit-scrollbar { display: none; }
  .testimonial {
    flex: 0 0 84%;
    scroll-snap-align: center;
    padding: 28px 24px;
  }
  .testimonial__quote { font-size: 1.18rem; }
}

/* ---------- 29 · Más respiración entre secciones en móvil ---------- */
@media (max-width: 759px) {
  .section { padding: 64px 0; }
  .manifesto .wrap { padding-block: 72px; }
  .cta-final .wrap { padding-block: 72px; }
  .hero__visual { margin-top: 8px; }
  .hero__quote { font-size: .96rem; max-width: 100%; }
}

/* ---------- 30 · Hero más teatral en móvil ---------- */
@media (max-width: 759px) {
  .hero__title { line-height: 1.02; letter-spacing: -.03em; }
  .hero__sub { font-size: 1.12rem; }
}

/* ---------- 31 · Cards y phase más cuidadas en móvil ---------- */
@media (max-width: 759px) {
  .card__quote { font-size: 1.2rem; }
  .phase { padding: 22px 20px; }
  .phase h3 { font-size: 1.3rem; }
  .plan { padding: 30px 26px; }
  .plan h3 { font-size: 1.5rem; }
}

/* ---------- 32 · Imagen contextual en cada fase del método ---------- */
.phase__cover {
  margin: -24px -22px 20px;
  aspect-ratio: 16 / 9;
  background: var(--azul-soft);
  overflow: hidden;
}
.phase__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.phase:hover .phase__cover img { transform: scale(1.03); }

/* ---------- 33 · Asegurar que las imágenes hero/sobre llenan su contenedor ---------- */
.hero__art img,
.about__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.post__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.post:hover .post__cover img { transform: scale(1.03); }

/* ---------- 34 · Bloque Contacto (Bloque 11B) ---------- */
.contact { background: var(--crema); }
.contact__grid { display: grid; gap: 40px; }
@media (min-width: 820px) {
  .contact__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}
.contact__intro h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: .4em; }
.contact__intro p { color: var(--tinta-soft); max-width: 46ch; }
.contact__ways {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}
.contact__ways li {
  position: relative;
  padding-left: 24px;
  font-size: .98rem;
  color: var(--tinta);
  line-height: 1.5;
}
.contact__ways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dorado);
}
.contact__ways strong { color: var(--azul-deep); font-weight: 500; }
.contact__ways a { color: var(--azul); text-decoration: underline; text-decoration-color: var(--dorado); text-underline-offset: 3px; }

.contact__form-wrap {
  background: var(--crema-warm);
  padding: 28px 28px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.contact__form-wrap .form__field { margin-bottom: 4px; }
@media (max-width: 600px) {
  .contact__form-wrap { padding: 24px 22px 28px; }
}

/* ---------- 35 · Botón WhatsApp dentro del bloque contacto ---------- */
.contact__wa {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.contact__wa-text {
  font-size: .94rem;
  color: var(--tinta-soft);
  margin: 0 0 14px;
}

/* ---------- 36 · Estilo de artículos del diario (páginas internas) ---------- */
.article { padding-block: 64px 80px; }
.article .wrap { max-width: 720px; }
.article p { font-size: 1.08rem; line-height: 1.72; color: var(--tinta); margin: 0 0 1.4em; }
.article h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--azul-deep);
  margin: 2em 0 .8em;
}
.article ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1.6em; }
.article ul li { margin-bottom: .6em; line-height: 1.6; color: var(--tinta); }
.article strong { color: var(--azul-deep); font-weight: 500; }
.article em { color: var(--tinta); }
.article__pull {
  border-left: 3px solid var(--dorado);
  padding: 8px 0 8px 22px;
  margin: 2.2em 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem !important;
  line-height: 1.4;
  color: var(--azul-deep) !important;
}
.article__cta {
  margin-top: 3em;
  padding-top: 2em;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}

/* ---------- 37 · Círculo WhatsApp dentro del bloque contacto ---------- */
.wa-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.wa-circle:hover { transform: translateY(-3px) scale(1.04); background: #1ebe5a; box-shadow: 0 16px 36px -10px rgba(37, 211, 102, .7); }
.wa-circle--contact { width: 68px; height: 68px; }
.wa-circle--contact svg { width: 34px; height: 34px; }

/* ---------- 38 · FAB WhatsApp ahora más grande (+30%) ---------- */
.fab { width: 88px; height: 88px; right: 22px; bottom: 22px; }
.fab svg { width: 47px; height: 47px; }

/* En móvil: el FAB siempre visible abajo-derecha; solo sube cuando aparece la CTA sticky */
@media (max-width: 759px) {
  .fab { width: 75px; height: 75px; right: 16px; bottom: 20px; }
  .fab svg { width: 39px; height: 39px; }
  /* La .mobile-cta precede al .fab en el DOM: al activarse, elevamos el FAB para no solaparse */
  .mobile-cta.is-visible ~ .fab { bottom: 100px; }
}

/* ---------- 39 · Botón pill WhatsApp (círculo + extensión con texto) ---------- */
.wa-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 76px;
  padding-right: 32px;
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 32px -10px rgba(37, 211, 102, .55);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.wa-pill:hover {
  transform: translateY(-3px);
  background: #1ebe5a;
  box-shadow: 0 18px 38px -10px rgba(37, 211, 102, .7);
}
.wa-pill__icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.wa-pill__icon svg {
  width: 38px;
  height: 38px;
  display: block;
}
.wa-pill__label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -.005em;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .wa-pill { height: 64px; padding-right: 22px; gap: 10px; }
  .wa-pill__icon { width: 64px; height: 64px; }
  .wa-pill__icon svg { width: 32px; height: 32px; }
  .wa-pill__label { font-size: .98rem; }
}

/* ---------- 40 · Crédito Aetheris en footer ---------- */
.footer__aetheris {
  color: var(--dorado);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.footer__aetheris:hover {
  color: #d6b27a;
  border-bottom-color: var(--dorado);
}

/* ============================================================
   41. TRAYECTORIA / MENTORES
   ============================================================ */
.trajectory{background:linear-gradient(180deg,var(--cream,#f5efe6) 0%,#fbf7ef 100%);}
.trajectory .section-lead{max-width:760px;margin:18px auto 0;color:var(--ink-soft,#3a4555);font-size:1.05rem;line-height:1.7;}
.trajectory__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:64px;}
.mentor{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 18px 50px -22px rgba(31,58,95,.18);display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;}
.mentor:hover{transform:translateY(-6px);box-shadow:0 28px 70px -22px rgba(31,58,95,.28);}
.mentor__photo{aspect-ratio:3/4;overflow:hidden;background:#1f3a5f;}
.mentor__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.mentor:hover .mentor__photo img{transform:scale(1.03);}
.mentor__photo--abstract{display:flex;align-items:center;justify-content:center;}
.mentor__photo--abstract svg{width:100%;height:100%;display:block;}
.mentor__body{padding:28px 26px 32px;flex:1;display:flex;flex-direction:column;gap:10px;}
.mentor__name{font-family:'Fraunces',serif;font-size:1.45rem;font-weight:300;color:#1f3a5f;line-height:1.15;margin:0;}
.mentor__title{font-size:.86rem;color:#6b5640;margin:0;letter-spacing:.02em;}
.mentor__title em{font-family:'Fraunces',serif;font-style:italic;color:#b8945f;font-weight:400;}
.mentor__text{color:var(--ink-soft,#3a4555);font-size:.95rem;line-height:1.65;margin:6px 0 0;}
.trajectory__note{max-width:680px;margin:56px auto 0;color:#6b5640;font-family:'Fraunces',serif;font-style:italic;font-size:1.05rem;line-height:1.6;}

@media (max-width:880px){
  .trajectory__grid{grid-template-columns:1fr;gap:28px;margin-top:48px;}
  .mentor__body{padding:24px 22px 28px;}
}

/* ============================================================
   42. Phase cover con SVG (Fase 04 — Transformacion)
   ============================================================ */
.phase__cover--art{aspect-ratio:600/340;overflow:hidden;background:#1f3a5f;}
.phase__cover--art svg{width:100%;height:100%;display:block;}