/* ============================================================
   PILAR — Salud & Estructura Corporal
   Lenguaje visual: el cuerpo como mapa. Una línea de meridiano
   recorre la página y va marcando los puntos (secciones) —
   es la única "columna vertebral" del pilar, no una decoración
   repetida. Tipografía Philosopher/Nunito compartida con el
   resto del sitio (ver base.css); aquí solo vive la paleta.
   ============================================================ */

body[data-pilar="salud"] {
  background: var(--salud-tint);
}

[data-pilar="salud"] .site-header {
  background: rgba(47, 61, 43, 0.96);
  border-bottom-color: #22301f;
  color: var(--sand);
}

[data-pilar="salud"] .wordmark span { color: var(--salud-deep); }
[data-pilar="salud"] .site-nav a[aria-current="page"] { border-bottom-color: var(--sand); }
[data-pilar="salud"] :focus-visible { outline-color: var(--salud-deep); }

[data-pilar="salud"] .btn-primary {
  background: var(--salud-deep);
  border-color: var(--salud-deep);
}
[data-pilar="salud"] .btn-primary:hover { background: #3c4b37; border-color: #3c4b37; }
[data-pilar="salud"] .btn-ghost:hover { background: #e3e9dc; }

/* --- hero --- */

.salud-hero {
  padding-block: var(--sp-6) var(--sp-5);
  position: relative;
}

.salud-hero .eyebrow-plain { color: var(--salud-deep); font-weight: 600; }

.salud-hero .lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* --- la línea de meridiano --- */

.meridiano {
  position: relative;
  padding-left: var(--sp-5);
}

.meridiano::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--salud-soft), var(--salud-deep) 60%, var(--salud-soft));
}

.meridiano-punto {
  position: relative;
  padding-bottom: var(--sp-5);
}

.meridiano-punto:last-child { padding-bottom: 0; }

.meridiano-punto::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-5) + 5px);
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--salud-deep);
  box-shadow: 0 0 0 4px var(--salud-tint), 0 0 0 5px var(--salud-soft);
}

.meridiano-punto h2 { margin-bottom: var(--sp-2); }
.meridiano-punto .measure { color: var(--ink-soft); }

/* --- enfoque: lista no numerada, en frase, no tarjetas SaaS --- */

.enfoque-lista {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: grid;
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.enfoque-lista li {
  border-left: 3px solid var(--salud-soft);
  padding-left: var(--sp-2);
}

.enfoque-lista strong { display: block; margin-bottom: 0.15rem; }

@media (max-width: 640px) {
  .enfoque-lista { grid-template-columns: 1fr; }
}

/* --- curso Esfera --- */

.curso-card {
  background: #fff;
  border: 1.5px solid #dfe6d7;
  border-radius: 4px;
  padding: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
}

.curso-card h3 { margin-bottom: 0.25rem; }

/* --- testimonios: cita simple, sin carrusel, sin estrellas --- */

.testimonio {
  border-left: 3px solid var(--salud-deep);
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-3);
  max-width: var(--measure);
}

.testimonio p { font-style: italic; }
.testimonio cite { display: block; margin-top: 0.4rem; font-style: normal; font-weight: 600; font-size: 1rem; color: var(--ink-soft); }

/* .cta-full toma sus colores del pilar Salud (ver .cta-full genérico en base.css) */
[data-pilar="salud"] .cta-full { background: var(--salud-deep); }

/* --- cita del creador del método: reutilizable en páginas de técnicas --- */

.cita-metodo {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  max-width: var(--measure);
  background: var(--salud-tint);
  border-left: 3px solid var(--salud-deep);
  border-radius: 0 4px 4px 0;
}
.cita-metodo blockquote {
  margin: 0;
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink);
}
.cita-metodo figcaption {
  margin-top: var(--sp-1);
  font-size: 1rem;
  font-weight: 600;
  color: var(--salud-deep);
}
[data-pilar="salud"] .cta-full p { color: var(--salud-tint); }
[data-pilar="salud"] .cta-full .btn-primary { background: #fff; color: var(--salud-deep); border-color: #fff; }
[data-pilar="salud"] .cta-full .btn-primary:hover { background: var(--astro-copper-soft); border-color: var(--astro-copper-soft); color: var(--salud-deep); }

/* ============================================================
   Hero a sangre completa (como la home): imagen de fondo,
   degradado para contraste y contenido abajo.
   ============================================================ */

.salud-hero-full {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--salud-deep);
  color: #fff;
  padding-block: var(--sp-6);
}
.salud-hero-full > img,
.salud-hero-full > picture > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .45;
}
.salud-hero-full::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,21,18,.25), rgba(20,21,18,.82));
}
.salud-hero-full .container { position: relative; z-index: 2; }
.salud-hero-full h1 { color: #fff; max-width: 14ch; }
.salud-hero-full .lede { color: #f4f0e7; max-width: 46ch; font-size: 1.25rem; }
.salud-hero-full .eyebrow-plain { color: var(--salud-soft); }
.btn-ghost--light { color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost--light:hover { background: rgba(255,255,255,.14); }
/* La pizarra es muy clara: degradado más cerrado para que el texto respire. */
.formacion-hero-full::after {
  background: linear-gradient(180deg, rgba(20,21,18,.55), rgba(20,21,18,.9));
}

/* ============================================================
   V2 — inspirado en el minimalismo cálido tipo Sea Lights:
   titular serif enorme superpuesto a la fotografía, formas
   orgánicas suaves, mucho aire entre bloques.
   ============================================================ */

.salud-hero-v2 {
  position: relative;
  min-height: 82vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-6) var(--sp-5);
}

.salud-hero-v2 .media {
  position: relative;
  aspect-ratio: 3/4;
}

.salud-hero-v2 .container > div:first-child {
  padding-left: 20px;
  padding-right: 0;
}

.salud-hero-v2 .media img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 0 140px 0 140px;
}
.salud-hero-v2 .media::after {
  content: "";
  position: absolute;
  bottom: -28px; left: -28px;
  width: 65%; height: 55%;
  background: var(--salud-soft);
  opacity: 0.35;
  border-radius: 0 120px 0 120px;
  z-index: -1;
}

.salud-hero-v2 h1 {
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 860px) {
  .salud-hero-v2 { grid-template-columns: 1fr; }
  .salud-hero-v2 .container > div:first-child {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.pilar-quote-salud {
  font-family: 'Philosopher', sans-serif;
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--salud-deep);
  max-width: 20ch;
  margin: 0 auto var(--sp-4);
  text-align: center;
}

.meridiano-punto .meridiano-media {
  margin-top: var(--sp-2);
  max-width: 420px;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 0 60px 0 60px;
}
.meridiano-media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   TERAPIAS individuales — plantilla compartida por cada técnica
   ============================================================ */

.terapia-hero {
  position: relative;
  overflow-x: clip;
  min-height: 60vh;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: var(--sp-4);
  padding-block: 0 var(--sp-4);
}
.terapia-hero .media { position: relative; aspect-ratio: 4/5; }
.terapia-hero > div:first-child {
  padding-left: 40px;
  padding-right: 0;
}
.terapia-hero .media img { width:100%; height:100%; object-fit:cover; border-radius: 0 110px 0 110px; position: relative; }
/* Eco decorativo detrás de la imagen (gesto estilo spa) */
.terapia-hero .media::before {
  content: "";
  position: absolute;
  top: 28px;
  right: -20px;
  bottom: -28px;
  left: 28px;
  background: var(--salud-soft);
  border-radius: 0 110px 0 110px;
}
.terapia-hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
/* Entrada escalonada al cargar: texto primero, imagen después (la activa main.js) */
@keyframes terapiaFromLeft {
  from { opacity: 0; transform: translateX(-25%); }
  to { opacity: 1; transform: none; }
}
@keyframes terapiaFromRight {
  from { opacity: 0; transform: translateX(25%); }
  to { opacity: 1; transform: none; }
}
.terapia-hero.hero-anim > div:first-child { animation: terapiaFromLeft 0.8s ease both; }
.terapia-hero.hero-anim .media { animation: terapiaFromRight 0.8s ease 0.2s both; }
@media (prefers-reduced-motion: reduce) {
  .terapia-hero.hero-anim > div:first-child,
  .terapia-hero.hero-anim .media { animation: none; }
}
.terapia-hero .origen { font-size: 1rem; color: var(--salud-deep); font-weight:600; text-transform: uppercase; letter-spacing:0.03em; }
@media (max-width: 860px) {
  .terapia-hero { grid-template-columns: 1fr; overflow-x: clip; }
  .terapia-hero > div:first-child { padding-left: 20px; padding-right: 20px; }
  .terapia-hero .media::before { top: 12px; right: -8px; bottom: -12px; left: 12px; }
}

.terapia-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: #dfe6d7;
  border: 1px solid #dfe6d7;
  margin-block: var(--sp-4);
}
.terapia-datos > div { background: var(--salud-tint); padding: var(--sp-3); }
.terapia-datos .k { display:block; font-size: 1rem; color: var(--ink-soft); margin-bottom: 0.2rem; }
.terapia-datos .v { font-weight: 600; }
@media (max-width: 640px) { .terapia-datos { grid-template-columns: 1fr; } }

.beneficios-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.beneficios-list li { border-left: 3px solid var(--salud-soft); padding-left: var(--sp-2); }
@media (max-width: 640px) { .beneficios-list { grid-template-columns: 1fr; } }

.terapias-relacionadas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
}
.terapias-relacionadas a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid #dfe6d7;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
}
.terapias-relacionadas a:hover { border-color: var(--salud-deep); }

.cursos-list {
  margin-top: var(--sp-2);
}
.curso-row {
  display:flex; flex-wrap:wrap; gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-2);
  border-bottom: 1px solid #dfe6d7;
}
.curso-row .curso-fecha { font-weight:600; color: var(--salud-deep); min-width: 8ch; }

/* ============================================================
   FORMACIÓN — calendario de cursos
   ============================================================ */

.formacion-list { margin-top: var(--sp-3); }
.formacion-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  padding-block: var(--sp-2);
  border-bottom: 1px solid #dfe6d7;
}
.formacion-row .formacion-fecha {
  font-weight: 700;
  color: var(--salud-deep);
  min-width: 11ch;
}
.formacion-row .formacion-nivel {
  font-size: 1rem;
  color: var(--ink-soft);
  border: 1px solid #dfe6d7;
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
}
.formacion-mes {
  margin-top: var(--sp-4);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--salud-deep);
}

/* ============================================================
   Grid de técnicas — tarjetas-enlace claramente clicables,
   para "Mis técnicas" en salud.html
   ============================================================ */

.tecnicas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin-top: var(--sp-3);
}

.tecnicas-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  background: #fff;
  border: 1.5px solid #dfe6d7;
  border-left: 4px solid var(--salud-soft);
  border-radius: 3px;
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tecnicas-grid a::after {
  content: "→";
  font-weight: 400;
  color: var(--salud-soft);
  transition: transform 0.15s ease, color 0.15s ease;
}

.tecnicas-grid a:hover,
.tecnicas-grid a:focus-visible {
  background: var(--salud-deep);
  border-color: var(--salud-deep);
  color: #fff;
  transform: translateX(3px);
}
.tecnicas-grid a:hover::after,
.tecnicas-grid a:focus-visible::after {
  color: #fff;
  transform: translateX(2px);
}

@media (max-width: 780px) {
  .tecnicas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .tecnicas-grid { grid-template-columns: 1fr; }
}

/* Dentro de un panel estrecho (columna junto a una imagen), 3
   columnas quedaban demasiado apretadas — siempre 2, sea cual
   sea el ancho de pantalla. */
.salud-panel .tecnicas-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 480px) {
  .salud-panel .tecnicas-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Catálogo de formaciones — formacion.html
   ============================================================ */

.oferta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.oferta-item {
  background: #fff;
  border: 1.5px solid #dfe6d7;
  border-left: 4px solid var(--salud-deep);
  border-radius: 3px;
  padding: var(--sp-3);
}

.oferta-item .oferta-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 0.5rem;
}

.oferta-item h3 { margin: 0; font-size: 1.1rem; }

.oferta-item p { font-size: 1rem; color: var(--ink-soft); margin: 0 0 0.6rem; }

.oferta-item a {
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--salud-deep);
}
.oferta-item a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .oferta-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Ajustes puntuales de layout para Formación y Sobre mí
   ============================================================ */

.formacion-fecha {
  font-weight: 700;
  color: var(--salud-deep);
  margin-top: 0.5rem;
}

.enfoque-lista--full { max-width: none; }


/* V3 — proceso horizontal/reticular: sustituye la lectura de timeline */
.salud-hero-v3 .container { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:var(--sp-5); align-items:center; }
.salud-hero-v3 .media { aspect-ratio:4/5; overflow:hidden; }
.salud-hero-v3 .media img { width:100%; height:100%; object-fit:cover; }
.salud-proceso-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--salud-soft); margin-top:var(--sp-4); border:1px solid var(--salud-soft); }
.salud-proceso-grid article { background:var(--salud-tint); padding:var(--sp-2); min-height:230px; }
.salud-proceso-grid span { font-family:var(--font-title); font-size:2rem; color:var(--salud-deep); }
.salud-proceso-grid h3 { margin:.6rem 0 .4rem; }
.salud-panels { background:#e3e9dc; }
.salud-panel { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); align-items:center; padding-block:var(--sp-5); border-bottom:1px solid #c8d1c1; }
.salud-panel--reverse > div:first-child { order:2; }
.salud-panel .media { aspect-ratio:4/3; overflow:hidden; }
.salud-panel .media img { width:100%; height:100%; object-fit:cover; }
@media(max-width:900px){.salud-hero-v3 .container,.salud-panel{grid-template-columns:1fr}.salud-proceso-grid{grid-template-columns:repeat(2,1fr)}.salud-panel--reverse > div:first-child{order:0}}
@media(max-width:600px){.salud-proceso-grid{grid-template-columns:1fr}.salud-proceso-grid article{min-height:0}}