/* ============================================================
   YOGA & MINDFULNESS LOS ALMENDROS · páginas de artículo
   Se carga DESPUÉS de css/style.css y solo en los tres artículos
   del blog. Aquí va únicamente lo que style.css no tiene: cuerpo de
   texto largo, fichas de juegos y posturas, cajas destacadas, tablas
   y el cierre del artículo.

   Todo se apoya en las variables y en las clases que ya existen
   (--serif, --sans, --forest, --cream, .section, .pagehero, .btn,
   .card, .decor). Ni una paleta nueva ni una tipografía nueva.

   Aviso técnico heredado de style.css: las ilustraciones JPG vienen
   sobre blanco y se integran con mix-blend-mode: multiply. Cualquier
   ancestro suyo que cree contexto de apilamiento (transform, filter,
   z-index) tiene que llevar fondo opaco propio, o reaparece la caja
   blanca. Por eso .art__cuerpo lleva background: var(--cream).
   ============================================================ */

:root {
  /* Medida de lectura: la misma que usan las páginas legales (.legal),
     para que un artículo y un aviso legal se lean igual de anchos. */
  --medida: 38rem;
}

/* Texto que solo lee un lector de pantalla. Lo necesita la primera
   celda de la tabla comparativa, que en pantalla va vacía. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   1. Cabecera del artículo
   ============================================================ */

/* La cabecera se centra sobre la misma columna que el cuerpo:
   un titular pegado al margen izquierdo y un texto centrado
   debajo se leen como dos páginas distintas. */
.pagehero--art {
  max-width: calc(var(--medida) + var(--pad) * 2);
  margin-inline: auto;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.pagehero--art .section__title { font-size: var(--step-4); }

/* ---------- Migas de pan ---------- */
.crumbs {
  font-size: var(--step--1);
  color: var(--forest-soft);
  margin-bottom: var(--space-s);
}
.crumbs ol {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.15rem 0.5rem;
  padding: 0; margin: 0;
}
.crumbs li { display: flex; align-items: baseline; gap: 0.5rem; }
.crumbs li + li::before {
  content: "›";
  color: var(--sage-ink);
}
.crumbs a {
  color: var(--forest);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--forest-rgb) / 0.3);
  text-underline-offset: 0.18em;
  padding-block: 0.3rem;
  transition: text-decoration-color var(--dur-2) linear;
}
.crumbs a:hover { text-decoration-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--forest-soft); display: inline-block; padding-block: 0.3rem; }

/* ---------- Autoría, fecha y minutos ---------- */
.art__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem 0.75rem;
  margin-top: var(--space-s);
  font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.art__meta span + span::before {
  content: "·";
  margin-right: 0.75rem;
  color: rgb(var(--ink-rgb) / 0.35);
}
/* Al partirse en tres líneas, el punto medio se quedaba abriendo
   línea, que es justo donde no significa nada. */
@media (max-width: 640px) {
  .art__meta { gap: 0.2rem 0.9rem; letter-spacing: 0.1em; }
  .art__meta span + span::before { display: none; }
}

/* ============================================================
   2. Cuerpo del artículo
   ============================================================ */

/* La cabecera ya ha abierto la página: el cuerpo no vuelve a abrirla */
.articulo { position: relative; padding-top: clamp(1rem, 3vw, 2.25rem); }

/* Sin z-index a propósito: en cuanto esta columna crea contexto de
   apilamiento, las ilustraciones botánicas que cuelgan a su derecha
   se quedan sin fondo con el que multiplicar y reaparece la caja
   blanca del JPG. Se quedan por detrás con z-index negativo. */
.art__cuerpo {
  position: relative;
  max-width: var(--medida);
  margin-inline: auto;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink);
}
/* Un solo ritmo vertical para todo el texto, también dentro de las
   cajas: el margen lo pone siempre el elemento que llega, nunca el
   que se va, y así no hay márgenes que se solapen. */
.art__cuerpo > * + *,
.art__entrada > * + *,
.destacado > * + *,
.aviso > * + *,
.ficha > * + *,
.faq__item > * + *,
.art__cta > * + * { margin-top: var(--space-s); }
.art__cuerpo strong { font-weight: 700; color: var(--forest); }

/* ---------- Encabezados ----------
   El filete dorado sobre cada H2 es el mismo recurso que abre
   "Quién soy" en la portada: marca el cambio de capítulo sin
   necesidad de una etiqueta más. */
.art__cuerpo h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-3); line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--forest);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-s);
  text-wrap: balance;
}
.art__cuerpo h2::before {
  content: "";
  display: block; width: 2.5rem; height: 1px;
  background: var(--gold);
  margin-bottom: var(--space-m);
}
.art__cuerpo h3 {
  font-family: var(--serif); font-weight: 400;
  font-variation-settings: "SOFT" 25, "WONK" 0;
  font-size: var(--step-2); line-height: 1.25;
  color: var(--forest);
  margin-top: var(--space-l);
  margin-bottom: var(--space-2xs);
  text-wrap: balance;
}
.art__cuerpo h2 + h3, .art__cuerpo h2 + * > h3:first-child { margin-top: var(--space-m); }

/* ---------- Enlaces de texto ----------
   Mismo subrayado que .legal a en style.css: dentro del texto los
   enlaces de esta web se ven igual en todas las páginas. */
.art__cuerpo a:not(.btn) {
  color: var(--forest);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--forest-rgb) / 0.35);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--dur-2) linear, color var(--dur-2) linear;
}
.art__cuerpo a:not(.btn):hover { text-decoration-color: currentColor; }

/* ---------- Listas ---------- */
.art__cuerpo ul { list-style: none; padding-left: 0; }
.art__cuerpo ul > li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: var(--space-2xs);
}
/* La viñeta es la hoja del logotipo, como en .classes__chips */
.art__cuerpo ul > li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 0.55em; height: 0.55em;
  background-color: var(--sage-ink);
  -webkit-mask: var(--hoja) center / contain no-repeat;
          mask: var(--hoja) center / contain no-repeat;
}
/* Los pasos numerados llevan cifra en serif, que es la voz de la marca */
.art__cuerpo ol {
  list-style: none;
  counter-reset: paso;
  padding-left: 0;
}
.art__cuerpo ol > li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: var(--space-2xs);
}
.art__cuerpo ol > li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 0.18em;
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--gold-ink);
  font-family: var(--serif); font-style: italic;
  font-size: var(--step--1); line-height: 1;
}

/* ============================================================
   3. Entradilla y cajas destacadas
   ============================================================ */

/* La entradilla ya responde a la pregunta del título: se separa
   para que se pueda leer sola, sin el resto del artículo. */
.art__entrada {
  background: var(--cream-deep);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.2rem, 3.5vw, 1.9rem);
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-2); line-height: 1.45;
  letter-spacing: -0.004em;
  color: var(--forest);
}

/* Una frase del propio artículo, sacada a tamaño de cita. Se usa una
   vez por página y solo cuando esa frase es la idea entera. */
.lema {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--forest);
  margin-top: var(--space-m);
  text-wrap: balance;
}

/* Bloque de apoyo: reglas, planes, listas de preparación */
.destacado {
  background: var(--cream-deep);
  border-radius: var(--r-m);
  padding: clamp(1.3rem, 4vw, 2rem) clamp(1.3rem, 4vw, 2.2rem);
  margin-top: var(--space-l);
}

/* Bloque de prudencia: seguridad y límites de la práctica.
   Es el único uso del acento de amapola en la página. */
.aviso {
  background: rgb(var(--blush-rgb) / 0.38);
  border-left: 3px solid var(--clay);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: clamp(1.3rem, 4vw, 1.9rem) clamp(1.3rem, 4vw, 2rem);
  margin-top: var(--space-l);
}
.aviso strong { color: var(--clay); }

/* Dentro de una caja, el filete dorado del H2 sobra: la caja ya
   separa el bloque del resto del texto. */
.destacado > :first-child,
.aviso > :first-child { margin-top: 0; }
.destacado h2::before,
.aviso h2::before { display: none; }
.destacado h2, .aviso h2 { font-size: var(--step-2); }

/* ============================================================
   4. Fichas: cada juego, cada postura
   Los seis juegos y las ocho posturas repiten siempre los mismos
   campos y en el mismo orden. Esa regularidad es lo que permite
   escanear el artículo, así que el maquetado la subraya en vez de
   disimularla: rótulo corto en versalitas y contenido debajo.
   ============================================================ */

.ficha { margin-top: var(--space-l); }
.ficha h3 { margin-top: 0; }
.ficha__campo { margin-top: var(--space-s); }
.ficha__campo > strong:first-child {
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.15rem;
}
.ficha__campo + ol { margin-top: 0; }

/* La frase para decirle al niño es lo más útil del artículo para
   quien lee con prisa: tiene que localizarse haciendo scroll. */
.decir {
  background: rgb(var(--gold-rgb) / 0.13);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 0.85rem 1.1rem;
  margin-top: var(--space-s);
  font-style: italic;
  color: var(--forest);
}
.decir strong {
  font-style: normal;
  font-family: var(--sans); font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-ink);
  display: block;
  margin-bottom: 0.15rem;
}

/* ============================================================
   5. Preguntas frecuentes
   ============================================================ */

.faq__item { margin-top: var(--space-l); }
.faq__item h3 { margin-top: 0; }
.faq__item > .aviso { margin-top: var(--space-s); }

/* ============================================================
   6. Tablas
   El contenedor tiene scroll propio: el cuerpo de la página no
   puede llegar nunca a tener scroll horizontal.
   ============================================================ */

/* En escritorio la tabla se sale de la columna de lectura por los dos
   lados: cuatro columnas dentro de 38 rem dejan dos palabras por línea.
   El sangrado nunca es mayor que el hueco que queda hasta el margen de
   la página, así que no puede generar scroll horizontal. */
.tabla {
  --sangrado: 0px;
  margin-top: var(--space-l);
  overflow-x: auto;
  border-radius: var(--r-m);
  box-shadow: var(--ring);
}
@media (min-width: 901px) {
  .tabla {
    --sangrado: max(0px, min(8vw, (100vw - var(--pad) * 2 - var(--medida)) / 2 - 12px));
    width: calc(100% + var(--sangrado) * 2);
    margin-inline: calc(var(--sangrado) * -1);
  }
}
.tabla:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
  line-height: 1.55;
  background: var(--cream);
}
.tabla caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--space-2xs);
  font-size: var(--step--1); font-style: italic;
  color: var(--forest-soft);
}
.tabla th, .tabla td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.1);
}
.tabla thead th {
  border-top: 0;
  background: var(--cream-deep);
  font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-ink);
  line-height: 1.4;
}
.tabla tbody th {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-0);
  color: var(--forest);
  white-space: nowrap;
}
.tabla td { color: var(--forest-soft); }
.tabla td:first-child {
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* Por debajo de escritorio la tabla se apila: cada fila pasa a ser un
   bloque con el nombre de la columna delante. Cuatro columnas en un
   móvil no se leen ni con lupa, y en una tablet tampoco. */
@media (max-width: 900px) {
  .tabla { overflow-x: visible; box-shadow: none; }
  .tabla table, .tabla tbody, .tabla tr, .tabla td, .tabla th { display: block; width: 100%; }
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla tr {
    background: var(--cream-deep);
    border-radius: var(--r-m);
    padding: 0.9rem 1.1rem;
    margin-bottom: var(--space-xs);
  }
  .tabla tbody th { border: 0; padding: 0 0 0.35rem; white-space: normal; font-size: var(--step-1); }
  .tabla td { border: 0; padding: 0.35rem 0 0; }
  .tabla td::before {
    content: attr(data-col);
    display: block;
    font-size: var(--step--2); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold-ink);
  }
}

/* ============================================================
   7. Imágenes
   ============================================================ */

.art__portada {
  position: relative;
  z-index: var(--z-content);
  max-width: 46rem;
  margin: 0 auto var(--space-xl);
  border-radius: var(--r-l);
  background: var(--cream);      /* fondo opaco propio: lo necesita el multiply */
}
.art__portada img {
  width: 100%; height: auto;
  border-radius: inherit;
  mix-blend-mode: multiply;
}
.art__portada figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--step--1); font-style: italic;
  color: var(--forest-soft);
  text-align: center;
}

/* Anclajes para las ilustraciones botánicas: un bloque de altura cero
   que solo sirve para colgar la decoración a la altura del texto que
   le toca. Fuera de la columna de lectura, nunca encima. */
.art__decor { position: relative; height: 0; margin-top: 0; }
.art__decor .decor { top: -3rem; z-index: -1; }
/* left/right/bottom en auto a propósito: cada modificador de .decor trae
   en style.css su propia esquina (el amapola se ancla a la izquierda, el
   almendro a la derecha) y, sin anularlas, la ilustración se colaba dentro
   de la columna de texto. */
.art__decor--der .decor {
  left: 100%; right: auto; bottom: auto;
  margin-left: clamp(1rem, 2vw, 2.5rem);
}
.art__decor--izq .decor {
  right: 100%; left: auto; bottom: auto;
  margin-right: clamp(1rem, 2vw, 2.5rem);
}

@media (max-width: 900px) {
  /* En móvil no hay margen lateral donde ponerlas sin invadir el texto */
  .art__decor { display: none; }
}

/* ============================================================
   8. Cierre del artículo
   ============================================================ */

/* La llamada final reutiliza el verde de la banda de contacto de la
   portada, pero encajado en la columna de lectura: el artículo se
   cierra dentro del artículo. */
.art__cta {
  --focus: var(--gold-soft);
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--r-l);
  padding: clamp(1.6rem, 5vw, 2.6rem);
  margin-top: var(--space-2xl);
}
.art__cta h2 {
  color: var(--cream);
  margin-top: 0;
  font-size: var(--step-3);
}
.art__cta h2::before { background: var(--gold-soft); }
.art__cta p { color: rgb(var(--cream-rgb) / 0.88); }
.art__cta a:not(.btn) {
  color: var(--sage-soft);
  text-decoration-color: rgb(var(--sage-rgb) / 0.6);
}
.art__cta a:not(.btn):hover { color: var(--cream); }
.art__cta .btn { margin-top: var(--space-m); }
.art__cta ::selection { background: var(--sage-soft); color: var(--forest); }

.art__firma {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(var(--ink-rgb) / 0.13);
  font-size: var(--step--1);
  color: var(--forest-soft);
}

/* ---------- Sigue leyendo ---------- */
.mas { background: var(--cream-deep); position: relative; }
.mas__head { max-width: 56rem; margin: 0 auto var(--head-gap); }
/* Un cierre, no un capítulo nuevo: el titular baja un escalón */
.mas .section__title { font-size: var(--step-3); margin-bottom: 0; }
.mas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  max-width: 56rem;
  margin: 0 auto;
}
.mas__grid .card__title a {
  color: inherit;
  text-decoration: none;
}
.mas__grid .card__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.mas__nota {
  max-width: 56rem;
  margin: var(--space-l) auto 0;
  font-size: var(--step--1);
  color: var(--forest-soft);
}
.mas__nota a {
  color: var(--forest);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--forest-rgb) / 0.35);
  text-underline-offset: 0.18em;
}
.mas__nota a:hover { text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .mas__grid { grid-template-columns: 1fr; max-width: 28rem; }
}

/* ============================================================
   9. Impresión
   Un artículo que se imprime para llevárselo al parque no necesita
   la caja verde ni las ilustraciones flotantes.
   ============================================================ */

@media print {
  .art__decor, .mas { display: none !important; }
  .art__cta { background: #fff !important; color: #000 !important; border: 1px solid #ccc; }
  .art__cta p, .art__cta h2 { color: #000 !important; }
  .art__cuerpo { max-width: none; font-size: 11pt; }
  .destacado, .aviso, .decir, .art__entrada { background: #fff !important; border: 1px solid #ccc; }
  .tabla tr, .art__cuerpo, .tabla table { background: #fff !important; }
}