/* ==========================================================================
   style.css · EL DISEÑO
   --------------------------------------------------------------------------
   Cómo están compuestas las piezas: navegación, portadas, secciones,
   botones, imágenes, listas, artículos, formularios y pie.
   Este archivo no define colores, fuentes ni tamaños propios: todo sale
   de variables.css. Tampoco anima nada: transiciones, hovers y revelados
   viven en animations.css.

   Índice
   1. Base           6. Imágenes          11. Recursos
   2. Estructura     7. Listas            12. Formularios
   3. Tipografía     8. Artículos         13. FAQ
   4. Navegación     9. Newsletter        14. Modal
   5. Portadas      10. Terapia           15. Pie
   ========================================================================== */


/* 1. BASE ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--space-xs) var(--space-sm); background: var(--color-cta); color: var(--color-cta-text); font-size: var(--text-sm); }
.skip-link:focus { left: var(--gutter); top: var(--space-2xs); }


/* 2. ESTRUCTURA ----------------------------------------------------------- */

.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--space-2xl); }
.section--spacious { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-xl); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--soft { background: var(--color-bg-soft); }
.section--dark { background: var(--color-bg-dark); color: var(--color-on-dark-muted); }
.section--accent { background: var(--color-bg-accent); color: var(--color-on-dark-muted); }
.section--dark :is(h1, h2, h3, .section-title, .editorial-quote, .feature__title, .step__title),
.section--accent :is(h1, h2, h3, .section-title, .editorial-quote, .feature__title, .step__title, .newsletter__title) { color: var(--color-on-dark); }
.section--dark .eyebrow, .section--accent .eyebrow { color: var(--color-on-dark-muted); }

/* Dentro de una sección oscura se reasignan los colores por función:
   cualquier componente que caiga aquí se adapta sin reglas propias. */
.section--dark, .section--accent {
  --color-text:    var(--color-on-dark-muted);
  --color-heading: var(--color-on-dark);
  --color-muted:   var(--color-on-dark-muted);
  --color-line:    var(--color-line-on-dark);
  --color-cta:     var(--color-on-dark);
  --border:        1px solid var(--color-line-on-dark);
}

.rule { border: 0; border-top: var(--border); margin: 0; }

/* Rejilla editorial de 12 columnas */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--column-gap);
  align-items: start;
}

/* Dos piezas lado a lado, siempre asimétricas */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); align-items: center; }
.split__text  { grid-column: 1 / span 5; }
.split__media { grid-column: 7 / -1; }
.split--reverse .split__text  { grid-column: 8 / -1; grid-row: 1; }
.split--reverse .split__media { grid-column: 1 / span 6; grid-row: 1; }
.split--top { align-items: start; }

/* Columnas con nombre para componer sin utilidades sueltas */
.col-lead   { grid-column: 1 / span 6; }
.col-side   { grid-column: 8 / -1; }
.col-wide   { grid-column: 1 / span 8; }
.col-offset { grid-column: 5 / -1; }
.col-label  { grid-column: 1 / span 3; }
/* Texto corrido en dos columnas iguales que arrancan en la misma línea */
.col-half         { grid-column: 1 / span 5; }
.col-half--second { grid-column: 7 / span 5; }

/* Continuación de una frase central */
.pause__after { padding-bottom: var(--space-2xl); }
.pause__after > .lead { margin-left: calc((100% / 12) * 6); max-width: 44ch; }
.pause__after > .feature-list { margin-top: var(--space-xl); }

@media (max-width: 860px) {
  .pause__after > .lead { margin-left: 0; }
  .grid > *, .split > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .split { row-gap: var(--space-xl); }
  .split--reverse .split__media { order: 2; }
}


/* 3. TIPOGRAFÍA ----------------------------------------------------------- */

h1, h2, h3, .display, .section-title, .editorial-quote {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--color-heading);
  margin: 0;
  font-variant-numeric: oldstyle-num;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2, .section-title { font-size: var(--text-2xl); line-height: 1.08; letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); letter-spacing: -0.01em; }
.display { font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.028em; }

p { margin: 0 0 1.3em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: block;
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.lead { font-size: var(--text-md); font-weight: var(--weight-light); line-height: var(--leading-normal); max-width: var(--measure-narrow); }
.prose p { max-width: var(--measure); }
.prose--large p { font-size: var(--text-md); line-height: var(--leading-relaxed); font-weight: var(--weight-light); }
.small { font-size: var(--text-sm); line-height: 1.7; }
.muted { color: var(--color-muted); }

.section-heading { max-width: 56rem; margin-bottom: var(--space-xl); }
.section-heading .section-title + p, .section-heading .section-title + .lead { margin-top: var(--space-lg); }

/* Voz editorial: citas, manifiestos, frases centrales */
.editorial-quote {
  font-size: var(--text-xl);
  font-style: italic;
  line-height: 1.22;
  letter-spacing: var(--tracking-heading);
  max-width: 26ch;
  margin: 0;
  padding: 0;
  border: 0;
}
.editorial-quote--large { font-size: clamp(2.1rem, 4.8vw, 4.4rem); font-style: normal; line-height: 1.12; max-width: 22ch; }

.brand-dot { color: var(--color-accent); }


/* 4. NAVEGACIÓN ----------------------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; }
.site-header__inner {
  max-width: var(--max-width); margin-inline: auto;
  padding: var(--space-lg) var(--gutter);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg);
}
.site-header.is-scrolled .site-header__inner { padding-block: var(--space-sm); }

.brand { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.02em; color: var(--color-heading); text-decoration: none; white-space: nowrap; }

.site-nav { display: flex; align-items: baseline; gap: clamp(1.1rem, 2.2vw, 2.4rem); }
.nav-link {
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav-link[aria-current="page"] { color: var(--color-muted); }
.nav-link--cta { color: var(--color-cta); font-weight: var(--weight-medium); border-bottom-color: var(--color-cta); }

.nav-toggle { display: none; background: none; border: 0; padding: 0 var(--space-3xs); cursor: pointer; font-size: 1.35rem; line-height: 1; color: var(--color-heading); }

/* Sobre fondo oscuro la navegación cambia de tinta */
.site-header.is-on-dark :is(.brand, .nav-link, .nav-toggle) { color: var(--color-on-dark); }
.site-header.is-on-dark .nav-link--cta { border-bottom-color: var(--color-on-dark); }
.site-header.is-on-dark .nav-link[aria-current="page"] { color: var(--color-on-dark-muted); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 0 var(--gutter);
    background: var(--color-bg);
    border-bottom: var(--border);
    max-height: 0; overflow: hidden; visibility: hidden;
  }
  .site-nav.is-open { max-height: 32rem; padding-block: var(--space-sm) var(--space-lg); visibility: visible; }
  .site-nav .nav-link { font-size: 1.05rem; padding-block: var(--space-xs); border-bottom: 0; }
  .site-header.is-on-dark .site-nav { background: var(--color-bg-dark); }
}

/* Página de agendar: solo la marca arriba (también se abre dentro del modal) */
.page-top { max-width: var(--max-width); margin-inline: auto; padding: var(--space-lg) var(--gutter); }
.page-bottom-link { max-width: var(--max-width); margin-inline: auto; padding: var(--space-xl) var(--gutter) var(--space-2xl); font-size: var(--text-sm); }


/* 5. PORTADAS ------------------------------------------------------------- */

.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero__title { margin-bottom: var(--space-lg); }
.hero__lead { font-size: var(--text-md); font-weight: var(--weight-light); line-height: var(--leading-normal); max-width: var(--measure-narrow); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }

/* Texto a la izquierda, fotografía alta a la derecha que se corta con el borde */
.hero--split { min-height: calc(100svh - var(--header-height)); display: flex; align-items: center; padding-block: var(--space-lg) var(--space-2xl); }
.hero--split > .container { width: 100%; }
.hero--split .split__text { grid-column: 1 / span 6; }
.hero--split .split__media { grid-column: 8 / -1; }

/* Retrato en arco a la izquierda, texto a la derecha */
.hero--portrait .split__media { grid-column: 1 / span 5; }
.hero--portrait .split__text  { grid-column: 7 / -1; }
.hero--portrait h1 { margin-bottom: var(--space-lg); }
.hero--portrait p { max-width: 52ch; }

/* Solo tipografía */
.hero--text { padding-block: var(--space-2xl) var(--space-xl); }
.hero--text h1 { max-width: 18ch; }
.hero--text .hero__lead { margin-top: var(--space-lg); margin-left: auto; margin-right: 8%; }

@media (max-width: 860px) {
  .hero--split { min-height: 0; }
  .hero--text .hero__lead { margin-left: 0; }
}


/* 6. IMÁGENES ------------------------------------------------------------- */

.image-block {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--color-image-frame);
  background-image: var(--texture-grain);
}
/* La imagen es más alta que su marco para poder desplazarse sin dejar huecos */
.image-block > img {
  position: absolute; left: 0; top: -24px;
  width: 100%; height: calc(100% + 48px);
  object-fit: cover;
}
.image-block--tall   { aspect-ratio: 2 / 3; }
.image-block--wide   { aspect-ratio: 16 / 10; }
.image-block--pano   { aspect-ratio: 21 / 9; }
.image-block--square { aspect-ratio: 1 / 1; }
.image-block--arch   { border-radius: var(--radius-arch) var(--radius-arch) 0 0; }
.image-block--bleed-right { margin-right: calc(-1 * var(--gutter)); }
.image-block--bleed-left  { margin-left: calc(-1 * var(--gutter)); }

.image-caption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }


/* 7. LISTAS --------------------------------------------------------------- */

/* Elementos numerados sin recuadros: solo un filete arriba */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--column-gap); }
.feature-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature { border-top: var(--border); padding-top: var(--space-md); }
.section--dark .feature, .section--accent .feature { border-top: var(--border-dark); }
.feature__num { display: block; margin-bottom: var(--space-sm); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; color: var(--color-muted); font-variant-numeric: oldstyle-num; }
.section--dark .feature__num, .section--accent .feature__num { color: var(--color-on-dark-muted); }
.feature__icon { width: 1.6rem; height: 1.6rem; margin-bottom: var(--space-sm); color: var(--color-muted); }
.section--dark .feature__icon, .section--accent .feature__icon { color: var(--color-on-dark-muted); }
.feature__icon svg { width: 100%; height: 100%; }
.feature__title { margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-heading); }
.feature__text { margin: 0; font-size: var(--text-sm); line-height: 1.7; }
@media (max-width: 1000px) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .feature-list, .feature-list--two { grid-template-columns: 1fr; } }

/* Datos prácticos: presentes y secundarios */
.data-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--column-gap); margin: 0; }
.data-item { border-top: var(--border); padding-top: var(--space-sm); }
.data-item__label { margin: 0 0 var(--space-3xs); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.data-item__value { margin: 0; font-size: var(--text-base); color: var(--color-heading); }
.data-item__note { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); line-height: 1.6; }
@media (max-width: 860px) { .data-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .data-list { grid-template-columns: 1fr; } }

/* Etiquetas en línea, separadas por un punto medio */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) 0; margin: var(--space-lg) 0; padding: 0; list-style: none; }
.tag { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.tag + .tag::before { content: '·'; margin-inline: var(--space-xs); color: var(--color-accent); }

/* Nota con filete lateral */
.note { margin: var(--space-lg) 0; padding-left: var(--space-md); border-left: 1px solid var(--color-accent); font-size: var(--text-sm); line-height: 1.7; max-width: 52ch; }

/* Pasos del proceso */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--column-gap); }
.step { border-top: var(--border-dark); padding-top: var(--space-md); }
.step__num { display: block; margin-bottom: var(--space-sm); font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--color-on-dark); font-variant-numeric: oldstyle-num; }
.step__title { margin: 0 0 var(--space-2xs); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1.4; }
.step__text { margin: 0; font-size: var(--text-sm); line-height: 1.7; }
.step__text .text-link { color: var(--color-on-dark); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }


/* 8. ARTÍCULOS ------------------------------------------------------------ */

/* Índice de artículos: número, categoría, título en Quaaykop */
.article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--column-gap); border-top: var(--border); }
.article-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-card {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: var(--border);
  text-decoration: none;
  color: inherit;
}
.article-list--three .article-card { grid-template-columns: 1fr; }
.article-card__num { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; color: var(--color-muted); font-variant-numeric: oldstyle-num; }
.article-card__category { margin: 0 0 var(--space-2xs); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.article-card__title { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-heading); text-wrap: balance; }
.article-card__excerpt { margin: 0 0 var(--space-sm); font-size: var(--text-sm); line-height: 1.7; max-width: 48ch; }
.article-card__more { font-size: var(--text-sm); color: var(--color-cta); font-weight: var(--weight-medium); }
.article-card__arrow { display: inline-block; }
@media (max-width: 860px) { .article-list, .article-list--three { grid-template-columns: 1fr; } }

/* Artículo individual */
.article__header { padding-block: var(--space-2xl) var(--space-xl); }
.article__header h1 { max-width: 20ch; margin-top: var(--space-md); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.article__meta .eyebrow { margin: 0; }
.article__body { padding-bottom: var(--space-2xl); }
.article__body p { max-width: 62ch; margin-left: calc((100% / 12) * 3); font-size: var(--text-md); font-weight: var(--weight-light); line-height: var(--leading-relaxed); }
.article__body p:first-child::first-letter { font-family: var(--font-display); font-size: 3.4em; float: left; line-height: 0.82; margin: 0.08em 0.1em 0 0; color: var(--color-heading); }
.article__body h2 { max-width: 62ch; margin: var(--space-xl) 0 var(--space-md) calc((100% / 12) * 3); font-size: var(--text-lg); line-height: var(--leading-snug); }
@media (max-width: 860px) { .article__body p, .article__body h2 { margin-left: 0; } }

.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--column-gap); border-top: var(--border); border-bottom: var(--border); }
.article-nav a { display: block; padding-block: var(--space-lg); text-decoration: none; font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-heading); }
.article-nav a.next { text-align: right; }
.article-nav .dir { display: block; margin-bottom: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
@media (max-width: 640px) { .article-nav { grid-template-columns: 1fr; } .article-nav a.next { text-align: left; border-top: var(--border); } }

.back-link { padding-block: var(--space-lg) var(--space-2xl); font-size: var(--text-sm); }


/* 9. NEWSLETTER ----------------------------------------------------------- */

.newsletter__form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); max-width: 34rem; }
.newsletter__input {
  flex: 1 1 16rem;
  padding: var(--space-xs) 0;
  font: inherit; font-size: var(--text-base);
  color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid currentColor; border-radius: var(--radius);
}
.newsletter__input::placeholder { color: var(--color-placeholder); opacity: 1; }
.section--dark .newsletter__input, .section--accent .newsletter__input { color: var(--color-on-dark); border-bottom-color: var(--color-line-on-dark); }
.section--dark .newsletter__input::placeholder, .section--accent .newsletter__input::placeholder { color: var(--color-on-dark-muted); }
.newsletter__kicker { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.newsletter__msg { min-height: 1.4em; margin-top: var(--space-xs); font-size: var(--text-sm); }
.newsletter__msg.is-success { color: var(--color-on-dark); }
.newsletter__msg.is-error { color: var(--color-on-dark); font-style: italic; }
.section--soft .newsletter__msg.is-success, .newsletter--light .newsletter__msg.is-success { color: var(--color-cta); }
.section--soft .newsletter__msg.is-error, .newsletter--light .newsletter__msg.is-error { color: var(--color-accent-text); }


/* 10. TERAPIA ------------------------------------------------------------- */

/* Para quién es / quizás no es el momento */
.criteria { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); }
.criteria__col { grid-column: span 5; }
.criteria__col + .criteria__col { grid-column: 7 / span 5; }
.criteria__label { margin: 0 0 var(--space-md); font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; color: var(--color-heading); }
.criteria__col--no .criteria__label { color: var(--color-muted); }
.criteria__item { display: grid; grid-template-columns: 1.2rem 1fr; align-items: baseline; padding-block: var(--space-sm); border-top: var(--border); }
.criteria__mark { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-cta); transform: translateY(-0.1em); }
.criteria__col--no .criteria__mark { background: transparent; border: 1px solid var(--color-muted); }
.criteria__text { margin: 0; font-size: var(--text-base); }
@media (max-width: 860px) { .criteria__col, .criteria__col + .criteria__col { grid-column: 1 / -1; } .criteria__col + .criteria__col { margin-top: var(--space-xl); } }

/* Modalidad */
.mode-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--column-gap); }
.mode { border-top: var(--border); padding-top: var(--space-md); }
.mode__icon { font-size: var(--text-lg); line-height: 1; color: var(--color-accent); margin-bottom: var(--space-sm); }
.mode__title { margin: 0 0 var(--space-2xs); font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-heading); }
.mode__text { margin: 0; font-size: var(--text-sm); line-height: 1.7; }
@media (max-width: 560px) { .mode-list { grid-template-columns: 1fr; } }

/* Mapa */
.map-block { border-top: var(--border); }
.map-block__header { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); padding-block: var(--space-md); }
.map-block__title { grid-column: 1 / span 5; margin: 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-heading); }
.map-block__note { grid-column: 7 / -1; margin: 0; font-size: var(--text-sm); }
.map-block__header .tag-list { grid-column: 7 / -1; margin: var(--space-2xs) 0 0; }
.map-block__frame { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border: 0; filter: grayscale(.35) sepia(.12); }
.map-block__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-md); border-bottom: var(--border); }
.map-block__footer p { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 860px) { .map-block__header > * { grid-column: 1 / -1 !important; } .map-block__frame { aspect-ratio: 4 / 3; }
  /* La misma nota aparece al pie del mapa: en móvil basta con una */
  .map-block__note { display: none; } }


/* 11. RECURSOS ------------------------------------------------------------ */

/* Los tres caminos: imagen arriba, texto abajo */
.path-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--column-gap); }
.path-card { display: block; text-decoration: none; color: inherit; }
.path-card .image-block { aspect-ratio: 4 / 5; margin-bottom: var(--space-md); }
.path-card__num { display: block; margin-bottom: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; color: var(--color-muted); font-variant-numeric: oldstyle-num; }
.path-card__label { margin: 0 0 var(--space-2xs); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.path-card__title { margin: 0 0 var(--space-xs); }
.path-card__text { margin: 0 0 var(--space-sm); font-size: var(--text-sm); line-height: 1.7; }
.path-card__meta { display: inline; margin: 0; font-size: var(--text-sm); color: var(--color-cta); font-weight: var(--weight-medium); }
.path-card__arrow { display: inline-block; margin-left: var(--space-2xs); color: var(--color-cta); }
@media (max-width: 860px) { .path-list { grid-template-columns: 1fr; row-gap: var(--space-xl); } .path-card .image-block { aspect-ratio: 16 / 10; } }

/* Introducción de cada nivel */
.level-intro { margin-bottom: var(--space-xl); }
.level-intro .split__media .image-block { aspect-ratio: 16 / 10; }

/* Tarjetas de recurso: texto sobre filete, sin cajas */
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--column-gap); border-top: var(--border); }
.resource-card { display: flex; flex-direction: column; padding-block: var(--space-lg) var(--space-xl); border-bottom: var(--border); text-decoration: none; color: inherit; }
/* Una sola línea de datos arriba: qué es, cuánto dura, si ya está disponible */
.resource-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); margin: 0 0 var(--space-sm); }
.resource-card__format { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.resource-card__status { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); border: var(--border); border-radius: 999px; padding: 0.15em 0.75em; }
/* Muestra de una entrada del diccionario */
.resource-card__sample { margin: var(--space-md) 0 0; padding-left: var(--space-sm); border-left: 1px solid var(--color-accent); }
.resource-card__word { margin: 0; font-family: var(--font-display); font-style: italic; font-size: var(--text-md); color: var(--color-heading); }
.resource-card__def { margin: var(--space-3xs, 0.25rem) 0 0; font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }
.resource-card__type { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-cta); }
.resource-card:not(.resource-card--locked) > .resource-card__type { margin-bottom: var(--space-sm); }
.resource-card__title { margin: 0 0 var(--space-xs); }
.resource-card__text { margin: 0; font-size: var(--text-sm); line-height: 1.7; max-width: 42ch; }
.resource-card__quote { margin: var(--space-sm) 0 0; font-family: var(--font-display); font-style: italic; font-size: var(--text-base); line-height: 1.5; color: var(--color-muted); max-width: 40ch; }
.resource-card.is-soon { cursor: default; }
.resource-card.is-soon .resource-card__type { color: var(--color-muted); }
/* Indica que la tarjeta se abre; queda siempre al pie para que las filas se lean alineadas */
.resource-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin: auto 0 0; padding-top: var(--space-lg); }
.resource-card__foot::after { content: "abrir →"; margin-left: auto; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-cta); }
.resource-card.is-soon .resource-card__title { color: var(--color-muted); }
.resource-grid .resource-card:not(:nth-child(3n+1)) { padding-left: 0; }
@media (max-width: 1000px) { .resource-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .resource-grid { grid-template-columns: 1fr; } }

/* Nivel 3, sobre fondo oscuro */
.section--dark .resource-grid, .section--dark .resource-card { border-color: var(--color-line-on-dark); }
.resource-card--locked { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-sm); }
.resource-card__lock { font-size: 1rem; line-height: 1.6; }
.section--dark .resource-card__type { color: var(--color-on-dark-muted); }
.section--dark .resource-card__title { color: var(--color-on-dark); }

.level-cta { display: inline-block; margin-top: var(--space-md); }
.level-cta.is-disabled { color: var(--color-muted); border-color: var(--color-line); cursor: default; }

/* Herramientas de Nivel 3 */
.tool-intro { margin-bottom: var(--space-xl); }
.tool-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); padding-block: var(--space-md); border-top: var(--border); }
.tool-group__label { grid-column: 1 / span 4; margin: 0; padding-top: var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.tool-group__list { grid-column: 5 / -1; }
.tool-link { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding-block: var(--space-xs); text-decoration: none; color: var(--color-heading); font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); }
.tool-link + .tool-link { border-top: 1px dashed var(--color-line); }
.tool-link__tag { margin-left: var(--space-xs); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); vertical-align: middle; }
.tool-link__arrow { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-cta); }
.tool-drive { margin-top: var(--space-xl); }
@media (max-width: 860px) { .tool-group > * { grid-column: 1 / -1; } }


/* 12. FORMULARIOS --------------------------------------------------------- */

/* Página de dos columnas: contexto y formulario */
.page-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); align-items: start; }
.page-layout__aside { grid-column: 1 / span 5; }
.page-layout__main  { grid-column: 7 / -1; }
.page-layout__aside h1 { font-size: var(--text-2xl); line-height: 1.08; margin-bottom: var(--space-lg); }
@media (max-width: 860px) { .page-layout > * { grid-column: 1 / -1; } .page-layout__main { margin-top: var(--space-xl); } }

.page-single { max-width: 46rem; }
.page-single h1 { font-size: var(--text-2xl); line-height: 1.08; margin-bottom: var(--space-lg); }

.aside-note { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--border); }
.aside-note p { margin: 0 0 var(--space-2xs); font-size: var(--text-sm); }

.form-block__intro { max-width: 40rem; margin-bottom: var(--space-xl); }
.form-block__intro h2 { margin-bottom: var(--space-md); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--column-gap); }
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.field__label { margin-bottom: var(--space-2xs); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); }
.field__help { margin: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.input, .select, .textarea {
  width: 100%;
  padding: var(--space-xs) 0;
  font: inherit; font-size: var(--text-base); line-height: var(--leading-normal);
  color: var(--color-text);
  background: transparent;
  border: 0; border-bottom: var(--border); border-radius: var(--radius);
  appearance: none; -webkit-appearance: none;
}
.select {
  padding-right: 1.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.textarea { min-height: 7rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-placeholder); opacity: 1; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-bottom-color: var(--color-accent); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.form-actions { margin-top: var(--space-xl); }
.form-note { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-muted); max-width: 52ch; }
.form-error { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-accent-text); max-width: 52ch; }

/* Disponibilidad horaria (los botones los genera formulario-proceso.js) */
.dias-grid { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.dia-btn, .franja-btn {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  background: transparent;
  border: var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.dia-btn { min-width: 3.4rem; }
.dia-btn.activo, .franja-btn.activo { background: var(--color-cta); border-color: var(--color-cta); color: var(--color-cta-text); }
.horarios-title { margin: var(--space-sm) 0 var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.dia-horarios { display: grid; grid-template-columns: 3.4rem 1fr; align-items: center; gap: var(--space-sm); padding-block: var(--space-2xs); }
.dia-horarios-nombre { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.franjas-grid { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.time-option { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--color-line); }
.time-option__toggle { display: grid; grid-template-columns: 1.2rem 1fr; gap: var(--space-xs); cursor: pointer; }
.time-option__toggle input { margin-top: 0.35rem; accent-color: var(--color-cta); }
.time-option__title { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.time-option__text { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.time-option .input { max-width: 12rem; margin-top: var(--space-sm); }

.availability-summary { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-bg-soft); }
.availability-summary__label { margin: 0 0 var(--space-3xs); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.availability-summary__text { margin: 0; font-size: var(--text-sm); }

/* Mensaje de éxito */
.success-state { padding-block: var(--space-xl); }
.success-state__mark { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-cta); margin-bottom: var(--space-md); }
.success-state__title { margin-bottom: var(--space-sm); }
.success-state__text { color: var(--color-muted); }

/* Acceso con código */
.lock-form { margin-top: var(--space-xl); max-width: 26rem; }
.lock-form .input { margin-bottom: var(--space-sm); }
.lock-form .form-error { margin: 0 0 var(--space-sm); display: none; }
.lock-form .form-error.show { display: block; }


/* 13. FAQ ----------------------------------------------------------------- */

.faq-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); padding-block: var(--space-xl); border-top: var(--border); }
.faq-group__label { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--header-height) + var(--space-lg)); margin: 0; }
.faq-group__items { grid-column: 5 / -1; }
.faq-item { border-bottom: var(--border); }
.faq-item:first-child { border-top: var(--border); }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md);
  padding: var(--space-md) 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-heading);
}
.faq-question__icon { flex: none; font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-light); color: var(--color-accent-text); }
.faq-answer { display: none; padding-bottom: var(--space-lg); max-width: 60ch; white-space: pre-line; font-size: var(--text-base); line-height: var(--leading-relaxed); }
.faq-answer.visible { display: block; }
@media (max-width: 860px) { .faq-group > * { grid-column: 1 / -1; } .faq-group__label { position: static; margin-bottom: var(--space-md); } }

.emergency-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--column-gap); margin: var(--space-md) 0; white-space: normal; }
.emergency { border-top: var(--border); padding-top: var(--space-xs); }
.emergency__name { margin: 0 0 var(--space-3xs); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); color: var(--color-heading); }
.emergency__detail { margin: 0; font-size: var(--text-sm); line-height: 1.7; }
.emergency__note { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 560px) { .emergency-list { grid-template-columns: 1fr; } }


/* 14. MODAL --------------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--space-md); background: rgba(var(--rgb-chocolate), .62); }
.modal.activo { display: flex; }
.modal__box { position: relative; width: min(760px, 100%); height: min(88svh, 900px); background: var(--color-bg); }
.modal__frame { width: 100%; height: 100%; border: 0; }
.modal__close { position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 1; width: 2.4rem; height: 2.4rem; background: var(--color-bg); border: var(--border); cursor: pointer; }


/* 15. BOTONES ------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 1.1rem 2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.button-primary { background: var(--color-cta); border-color: var(--color-cta); color: var(--color-cta-text); }
.button-secondary { background: transparent; border-color: var(--color-line); color: var(--color-heading); }
.button:disabled { opacity: .6; cursor: progress; }
.section--dark .button-primary, .section--accent .button-primary { background: var(--color-on-dark); border-color: var(--color-on-dark); color: var(--color-bg-dark); }
.section--dark .button-secondary, .section--accent .button-secondary { border-color: var(--color-line-on-dark); color: var(--color-on-dark); }
.button__arrow { display: inline-block; margin-left: var(--space-xs); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }

/* Enlace de texto con filete */
.text-link {
  display: inline;
  padding: 0 0 1px;
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--color-cta);
  text-decoration: none;
  background: none; border: 0; border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.section--dark .text-link, .section--accent .text-link { color: var(--color-on-dark); }


/* 16. CIERRES ------------------------------------------------------------- */

.closing .split__text h2 { margin-bottom: var(--space-lg); }
.closing--center { text-align: left; }
.closing--center .editorial-quote { max-width: 20ch; }
.col-offset.editorial-quote { max-width: 34ch; }


/* 17. PIE ----------------------------------------------------------------- */

.footer { position: relative; padding-block: var(--space-xl) var(--space-lg); border-top: var(--border); background-color: var(--color-bg); } /* fondo propio: el cambio de color de fondo al hacer scroll no lo alcanza */
.footer__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--column-gap); row-gap: var(--space-lg); align-items: baseline; }
.footer__brand { grid-column: 1 / span 5; margin: 0; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.02em; color: var(--color-heading); }
.footer__links { grid-column: 7 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.footer__links a { font-size: var(--text-sm); text-decoration: none; }
.footer__legal { grid-column: 1 / -1; margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: var(--border); font-size: var(--text-xs); letter-spacing: 0.05em; color: var(--color-muted); max-width: none; }
@media (max-width: 860px) { .footer__inner > * { grid-column: 1 / -1; } }


/* 18. AJUSTES DE COMPOSICIÓN ---------------------------------------------- */

/* Separaciones internas de las columnas de texto */
.split__text > .section-title, .split__text > h1, .split__text > h2 { margin-bottom: var(--space-lg); }
.split__text > .editorial-quote { margin-bottom: var(--space-lg); }
.split__text > .prose + p { margin-top: var(--space-md); }
.hero__name { font-style: italic; }
.form-grid--spaced { margin-top: var(--space-xl); }
.resource-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-intro { max-width: 52ch; margin-bottom: var(--space-lg); color: var(--color-muted); }
.faq-group__label.eyebrow { margin: 0; }
.closing .button-row { margin-top: var(--space-lg); }

/* Trayectoria: meta a la izquierda, título y detalle a la derecha */
.entry-list { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.entry { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-sm); padding-block: var(--space-sm); border-top: var(--border); }
.entry:last-child { border-bottom: var(--border); }
.entry__meta { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); padding-top: 0.35em; }
.entry__title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--color-heading); }
.entry__text { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 600px) { .resource-grid--four { grid-template-columns: 1fr; } }

/* ----- Móvil: la sección de recursos ----- */
@media (max-width: 860px) {
  /* Las fotos de los tres caminos ya aparecen en las tarjetas de arriba:
     repetirlas en cada nivel alarga la página sin aportar nada. */
  .level-intro .split__media { display: none; }
  .level-intro { row-gap: var(--space-md); }
  /* Cada camino: primero el número y el título, después la foto, y al final
     el texto con el enlace. Así no quedan dos fotos seguidas. */
  .path-card { display: flex; flex-direction: column; }
  .path-card__num { order: 1; margin-bottom: 0; font-size: var(--text-base); }
  .path-card__label { order: 2; margin-bottom: var(--space-2xs); }
  .path-card__title { order: 3; margin-bottom: var(--space-md); }
  .path-card .image-block { order: 4; aspect-ratio: 16 / 10; margin-bottom: var(--space-md); }
  .path-card__text { order: 5; }
  .path-card__meta { order: 6; }
  .path-card__meta::after { content: ' →'; margin-left: var(--space-2xs); }
  .path-card__arrow { display: none; }
  .path-list { row-gap: var(--space-lg); }
}
@media (max-width: 600px) {
  .resource-card { padding-block: var(--space-md) var(--space-lg); }
  .resource-card__foot { padding-top: var(--space-md); }
  .resource-card__sample { margin-top: var(--space-sm); }
  /* Menos aire entre secciones, para que la lista no quede tan lejos */
  .section { padding-block: var(--space-xl); }
  .section--spacious { padding-block: var(--space-2xl); }
}



/* 13. BOTÓN FLOTANTE DE WHATSAPP ------------------------------------------ */

.wa-float {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 80;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--color-cta); color: var(--color-cta-text);
  font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none;
  box-shadow: 0 6px 24px rgba(var(--rgb-chocolate), 0.18);
}
.wa-float__icon { width: 1.25rem; height: 1.25rem; flex: none; }
.wa-float:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 600px) {
  /* En móvil: círculo grande y cómodo de tocar, por encima de la barra del teléfono */
  .wa-float {
    right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 3.5rem; height: 3.5rem; padding: 0; justify-content: center;
    box-shadow: 0 4px 16px rgba(var(--rgb-chocolate), 0.28);
  }
  .wa-float__icon { width: 1.6rem; height: 1.6rem; }
  .wa-float__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* Espacio extra al final para que el botón no tape los enlaces del pie */
  .footer { padding-bottom: calc(var(--space-lg) + 4rem); }
}
@media print { .wa-float { display: none; } }

/* Sello de verificación de Psychology Today */
.verificacion { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--border); }
.verificacion__label { margin: 0 0 var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.sx-verified-seal { display: block; }


/* ----- Recursos: llegar rápido a la lista y volver al mismo lugar ----- */
/* Hero más bajo en Recursos para que los caminos y la lista aparezcan antes */
.hero--compact { min-height: 0; padding-block: var(--space-lg) var(--space-xl); }
.hero--compact .image-block { aspect-ratio: 4 / 3; }
/* Las fotos de cada nivel ya están en las tarjetas de los caminos: no se repiten */
.level-intro .split__media { display: none; }
.level-intro .split__text, .split--reverse.level-intro .split__text { grid-column: 1 / span 7; order: 0; }
.path-card .image-block { aspect-ratio: 3 / 2; }
/* Al llegar con un enlace a una sección o a un recurso, el menú fijo no lo tapa */
.resource-card[id] { scroll-margin-top: calc(var(--header-height) + var(--space-xl)); }
/* Las secciones ya traen mucho aire arriba: al saltar a ellas se come casi todo */
section[id] { scroll-margin-top: calc(var(--header-height) + var(--space-md) - var(--space-2xl)); }
@media (max-width: 860px) {
  .hero--compact .image-block { aspect-ratio: 16 / 9; }
  .path-card .image-block { aspect-ratio: 21 / 9; }
  section[id] { scroll-margin-top: calc(var(--header-height) - var(--space-md)); }
}