/* Componentes de las páginas de landings.
   Nace del refresh de 2026-09: escalas, comparadores, líneas de tiempo y
   diagramas que sustituyeron a texto corrido y a rejillas de tarjetas iguales.
   Los tokens, el ritmo, las superficies, el movimiento y los componentes
   compartidos (.secuencia, .cita) viven en css/style.css.

   Va en un archivo por grupo, no en uno solo para todo el sitio: juntarlo
   medía 113 KB de CSS render-blocking en páginas que usan 18, y subió el LCP
   en las 16 páginas medidas. */

/* ===================================================================
   REFRESH 2026-09 — landings de masaje y página de Yasna
   Grupo "landings": masaje-descontracturante-valdivia.html,
   masaje-prenatal-valdivia.html, sobre-yasna.html

   Integrar AL FINAL de css/services.css (o como hoja propia cargada
   después de services.css): varias reglas de aquí tienen que ganar
   empates de especificidad contra los parches con !important que ya
   viven en services.css.

   Todo se apoya en los tokens que ya existen (--primary-color,
   --spacing-*, --theme-*, --mov-*, --ritmo-*). Ni un color a mano
   salvo donde el sistema lo obliga (banda de marca).
   Recordatorio: --white vale #1f2937 en tema oscuro; aquí se usa
   --theme-surface, que es lo mismo pero se lee como lo que es.
   =================================================================== */


/* -------------------------------------------------------------------
   0. Arreglo del sistema: la superficie "tibia" no llegaba al oscuro

   services.css:2437 declara
     [data-theme="dark"] section { background-color: inherit !important }
   y ese !important tumbaba la regla de superficie tibia del bloque
   REFRESH de style.css, que no lo lleva. En oscuro, "tibia" se veía
   exactamente igual que una sección sin superficie.
   ------------------------------------------------------------------- */
[data-theme="dark"] section[data-superficie="tibia"] {
  background-color: color-mix(in srgb, var(--theme-surface) 84%, var(--primary-color)) !important;
}


/* -------------------------------------------------------------------
   1. Hero de las landings de servicio

   .service-hero__subtitle, __price y __actions estaban en el HTML de
   las dos landings sin una sola regla en todo el sitio: el subtítulo
   salía a 1.152px de medida y los dos botones eran inline-block
   sueltos, pegados y de anchos distintos.
   (Hallazgos 1 y 13 del encargo.)
   ------------------------------------------------------------------- */
.service-hero .breadcrumb__nav {
  margin-bottom: var(--spacing-lg);
}

.service-hero .breadcrumb__list {
  font-size: var(--font-size-sm);
  font-weight: 400;
}

.service-hero__subtitle {
  margin-top: var(--spacing-md);
  max-width: 54ch;
  font-size: var(--font-size-lg);
  line-height: 1.65;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

.service-hero__price {
  margin-top: var(--spacing-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--spacing-sm);
  color: var(--theme-text-secondary);
  font-variant-numeric: tabular-nums;
}

.service-hero__price strong {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--theme-text-primary);
  line-height: 1.1;
}

.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

@media (max-width: 480px) {
  .service-hero__actions {
    flex-direction: column;
  }

  .service-hero__actions .btn {
    width: 100%;
  }
}

/* Cuando la ruta de navegación va en su propia banda (sobre-yasna),
   esa banda ya reserva el alto de la cabecera fija: los 120px de
   padding del hero se suman encima y son 120px de nada justo donde
   tiene que estar el CTA. En las landings la ruta va DENTRO del hero,
   así que ahí los 120px sí hacen falta y no se tocan. */
@media (max-width: 768px) {
  .breadcrumb {
    padding-top: 5.5rem;
  }

  .breadcrumb + .service-hero {
    padding-top: 1.5rem;
  }

  .service-hero .service-hero__description {
    margin-bottom: var(--spacing-lg);
  }
}


/* -------------------------------------------------------------------
   2. Ficha — tarjeta de contenido temada

   Sustituye a .benefit-card / .technique-card, que no existían en el
   CSS. No se reutiliza .technique-item porque tiene el fondo fijo en
   #f8f9fa: dentro de .massage-benefits (que también es #f8f9fa en
   claro) la tarjeta desaparece, y su versión oscura vive en un bloque
   de !important aparte. Esta se apoya solo en tokens de tema y
   funciona en claro y oscuro sin un solo override.
   ------------------------------------------------------------------- */
.fichas {
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.ficha {
  margin: 0;
  padding: var(--spacing-xl);
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-light);
  border-radius: var(--border-radius-lg);
}

.ficha__titulo {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-lg);
}

.ficha__texto {
  margin: 0;
  max-width: 46ch;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}


/* -------------------------------------------------------------------
   3. Zonas — mapa del cuerpo + señales (descontracturante)

   Las seis "señales" son seis ubicaciones anatómicas descritas con
   palabras. El dibujo las pone donde están.
   ------------------------------------------------------------------- */
.zonas-cuerpo {
  display: grid;
  gap: var(--spacing-2xl);
  align-items: start;
}

@media (min-width: 900px) {
  .zonas-cuerpo {
    grid-template-columns: minmax(17rem, 23rem) 1fr;
    gap: var(--spacing-3xl);
  }
}

.zonas-cuerpo__figura {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--spacing-md);
  color: var(--primary-color);
}

.zonas-cuerpo__dibujo {
  width: 100%;
  max-width: 22rem;
  height: auto;
}

.zonas-cuerpo__pie {
  max-width: 34ch;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

.zonas-cuerpo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-lg) var(--spacing-xl);
}

@media (min-width: 620px) {
  .zonas-cuerpo__lista {
    grid-template-columns: 1fr 1fr;
  }
}

.zonas-cuerpo__item {
  padding-inline-start: var(--spacing-lg);
  border-inline-start: 1px solid var(--theme-border-light);
}

.zonas-cuerpo__titulo {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-base);
  font-weight: 600;
}

.zonas-cuerpo__texto {
  margin: 0;
  max-width: 44ch;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}


/* -------------------------------------------------------------------
   4. Comparativa — descontracturante / relajante / terapéutico

   Antes eran tres .massage-card en las que el título de la primera
   envolvía a dos líneas y desplazaba precio y cuerpo respecto a las
   otras: una comparación que no alinea no se puede comparar.
   subgrid pone precio, duración, "para qué" y "elígelo si" en la
   misma línea base. Sin subgrid cada columna se apila igual, solo
   que sin alinear: se degrada, no se rompe.
   ------------------------------------------------------------------- */
.comparativa {
  display: grid;
  gap: var(--spacing-lg);
}

.comparativa__opcion {
  display: grid;
  align-content: start;
  gap: var(--spacing-md);
  margin: 0;
  padding: var(--spacing-xl);
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-light);
  border-radius: var(--border-radius-lg);
}

.comparativa__opcion--actual {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 7%, var(--theme-surface));
}

@media (min-width: 860px) {
  .comparativa {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto;
    gap: var(--spacing-lg);
  }

  .comparativa__opcion {
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
}

.comparativa__nombre {
  margin: 0;
  font-size: var(--font-size-xl);
  text-wrap: balance;
}

.comparativa__fila {
  margin: 0;
  display: grid;
  gap: var(--spacing-xs);
  align-content: start;
}

.comparativa__etiqueta {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
}

.comparativa__valor {
  color: var(--theme-text-primary);
  text-wrap: pretty;
}

.comparativa__valor--precio {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}

.comparativa__pie {
  margin-top: var(--spacing-xl);
  text-align: center;
}


/* -------------------------------------------------------------------
   5. Aviso — la contraindicación médica sale del patrón (prenatal)

   Los cuatro avisos de "Antes de reservar" tenían el mismo peso:
   la contraindicación médica real se leía igual que "cuéntame cómo va
   tu embarazo". El texto no cambia; cambia la jerarquía.
   ------------------------------------------------------------------- */
.aviso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: var(--spacing-xl);
  border: 1px solid color-mix(in srgb, var(--warning-color) 55%, transparent);
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--warning-color) 12%, var(--theme-surface));
}

.aviso__icono {
  grid-row: 1;
  width: 2rem;
  height: 2rem;
  color: var(--warning-color);
}

.aviso__titulo {
  grid-column: 2;
  margin: 0;
  font-size: var(--font-size-xl);
  align-self: center;
}

.aviso__texto {
  grid-column: 2;
  margin: 0;
  max-width: 62ch;
  color: var(--theme-text-primary);
  text-wrap: pretty;
}


/* -------------------------------------------------------------------
   6. Requisitos — lo que no es contraindicación, en lista compacta
   ------------------------------------------------------------------- */
/* Contenedor de "Antes de reservar": el aviso, la barra de semanas y
   los requisitos, con un solo ritmo entre ellos. */
.antes {
  display: grid;
  gap: var(--spacing-3xl);
}

.requisitos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-xl);
}

@media (min-width: 760px) {
  .requisitos {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
}

.requisito {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-xs) var(--spacing-md);
  align-items: start;
}

.requisito__icono {
  grid-row: 1;
  grid-column: 1;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  color: var(--primary-color);
}

.requisito__titulo {
  grid-row: 1;
  grid-column: 2;
  margin: 0;
  font-size: var(--font-size-base);
  align-self: center;
}

.requisito__texto {
  grid-row: 2;
  grid-column: 2;
  margin: 0;
  max-width: 44ch;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}


/* -------------------------------------------------------------------
   7. Trimestres — la barra de las 40 semanas (prenatal)

   El dibujo es SVG (barra, marca de la semana 12, aspa y visto);
   las etiquetas son HTML de verdad, para que no encojan con el
   viewBox en un móvil de 360px.
   ------------------------------------------------------------------- */
.trimestres {
  margin: 0 auto;
  max-width: 34rem;
  display: grid;
  gap: var(--spacing-md);
  color: var(--primary-color);
}

.trimestres__barra {
  width: 100%;
  height: auto;
}

.trimestres__leyenda {
  display: grid;
  gap: var(--spacing-sm) var(--spacing-lg);
  margin: 0;
}

@media (min-width: 560px) {
  .trimestres__leyenda {
    grid-template-columns: 1fr 1fr;
  }
}

.trimestres__tramo {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}

.trimestres__tramo strong {
  display: block;
  font-size: var(--font-size-base);
  color: var(--theme-text-primary);
}

.trimestres__pie {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}


/* -------------------------------------------------------------------
   8. Postura — el esquema de la posición lateral (prenatal)

   Va sobre la banda de marca, así que el dibujo hereda el blanco
   fijo: --primary-color en oscuro es un lila pensado para texto sobre
   fondo oscuro y sobre el morado de la banda se caería.
   ------------------------------------------------------------------- */
.postura {
  display: grid;
  gap: var(--spacing-2xl);
  align-items: center;
}

@media (min-width: 900px) {
  .postura {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--spacing-3xl);
  }
}

.postura__figura {
  margin: 0;
  color: var(--primary-color);
}

section[data-superficie="marca"] .postura__figura,
[data-theme="dark"] section[data-superficie="marca"] .postura__figura {
  color: #ffffff;
}

.postura__dibujo {
  width: 100%;
  height: auto;
}

.postura__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-lg);
  counter-reset: cojin;
}

.postura__item {
  position: relative;
  counter-increment: cojin;
  padding-inline-start: 2.75rem;
}

.postura__item::before {
  content: counter(cojin);
  position: absolute;
  inset-inline-start: 0;
  top: 0.1rem;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: var(--border-radius-full);
  background: var(--primary-color);
  color: var(--theme-surface);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

section[data-superficie="marca"] .postura__item::before {
  background: #ffffff;
  color: #6d2f74;
}

.postura__titulo {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-lg);
}

.postura__texto {
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

/* "Nunca boca abajo" no es un cojín: es la regla. Va fuera de la lista. */
.postura__regla {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid currentColor;
  font-weight: 600;
}


/* -------------------------------------------------------------------
   9. Trayectoria — la línea de tiempo con los años a escala
   (sobre-yasna)

   Antes eran cuatro tarjetas iguales en fila: no se veía que entre
   2003 y 2020 hay 17 años y entre los tres últimos hitos solo tres.
   El salto hasta el siguiente hito se declara en el HTML con --hasta.
   ------------------------------------------------------------------- */
.trayectoria {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 44rem;
}

.trayectoria__hito {
  position: relative;
  padding-inline-start: 2.75rem;
  padding-block-end: clamp(2rem, calc(var(--hasta, 3) * 0.5rem), 7rem);
}

.trayectoria__hito:last-child {
  padding-block-end: 0;
}

.trayectoria__hito::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.5rem;
  top: 0.55rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--border-radius-full);
  background: var(--primary-color);
}

.trayectoria__hito:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 0.875rem;
  top: 1.75rem;
  bottom: 0.25rem;
  width: 2px;
  background: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.trayectoria__ano {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}

.trayectoria__titulo {
  margin: var(--spacing-xs) 0 var(--spacing-sm);
  font-size: var(--font-size-lg);
}

.trayectoria__texto {
  margin: 0;
  max-width: 58ch;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

.trayectoria__salto {
  position: absolute;
  inset-inline-start: 2.75rem;
  bottom: 0.4rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--theme-text-secondary);
  font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------------------
   10. Ajustes puntuales de sobre-yasna.html
   ------------------------------------------------------------------- */

/* El CTA del hero caía sobre los 900-1.000px en un móvil de 360:
   las tres cifras se apilaban en columna entre el párrafo y el botón.
   En móvil vuelven a fila y el botón sube por encima de ellas
   (el orden del HTML ya cambió). Selector doble para ganarle a
   services.css:1124, que tiene la misma especificidad. */
@media (max-width: 768px) {
  .service-hero .service-hero__stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-bottom: 0;
  }

  .service-hero .service-hero__stats .stat__number {
    font-size: var(--font-size-2xl);
  }

  .service-hero .service-hero__img {
    max-height: 150px;
    object-fit: cover;
    object-position: center 28%;
  }
}

/* El resto de la presentación baja del CTA: sigue estando, deja de
   estorbar. */
.service-hero__nota {
  margin-top: var(--spacing-lg);
  max-width: 54ch;
  color: var(--theme-text-secondary);
  text-wrap: pretty;
}

/* El botón pasó por delante de las cifras en el HTML: aquí solo se
   recoloca el aire que services.css daba por hecho en el otro orden. */
.service-hero__text .service-hero__stats {
  margin: var(--spacing-xl) 0 0;
}

/* Cuatro testimonios en una rejilla de tres columnas dejaban el cuarto
   huérfano con dos tercios de fila en blanco. Dos columnas fijas: con
   cuatro citas no queda ninguna fila incompleta. */
@media (min-width: 820px) {
  .personal-testimonials .citas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personal-testimonials .cita {
    max-width: 46ch;
  }
}

/* La cita del componente no traía retrato; aquí sí vale, porque las
   cuatro clientas tienen foto real publicada. */
.cita__autora {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.cita__retrato {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--border-radius-full);
  object-fit: cover;
}

/* La misión de Yasna, sola en su banda de marca. */
.cita--destacada {
  max-width: 44ch;
  margin-inline: auto;
}

.cita--destacada .cita__texto {
  font-size: var(--font-size-2xl);
  line-height: 1.4;
  text-wrap: balance;
}

/* Especializaciones: tres .specialization-category que contenían UNA
   .spec-card cada una eran dos niveles de jerarquía para un solo
   elemento, y una tarjeta dentro de otra. Aplanado a una rejilla de
   tres tarjetas, la categoría pasa a ser una etiqueta pequeña debajo
   del nombre de la técnica. */
.specializations {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.spec-card {
  display: grid;
  align-content: start;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
  background: var(--theme-surface);
  border: 1px solid var(--theme-border-light);
  border-radius: var(--border-radius-lg);
}

.spec-card h3 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.spec-card .spec-categoria {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--theme-text-secondary);
}

.spec-card .spec-institution {
  margin: 0;
  color: var(--primary-color);
}

.spec-card .spec-techniques {
  margin-bottom: 0;
}

/* Valores y logros eran tarjetas de una línea. Una línea no necesita
   una caja. */
.philosophy-values,
.learning-achievements {
  display: grid;
  gap: var(--spacing-md);
}

.value-item,
.achievement-item {
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  padding-inline-start: var(--spacing-lg);
  border-inline-start: 1px solid var(--theme-border-light);
}

/* Piso de craft: nada de border-left de color de más de 1px. Estos dos
   traían 4px de morado macizo. */
.story-highlight,
.continuous-learning {
  border-left-width: 1px;
  border-left-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

/* El encabezado de formación era una rejilla 2fr/1fr donde la segunda
   columna eran las cifras repetidas del hero. Sin ellas, el encabezado
   es el mismo que el del resto del sitio. */
.philosophy-header.section__header--center {
  text-align: center;
}

/* La certificación principal ya no lleva ni etiqueta encima del
   titular ni los dos <div> decorativos del lateral. */
.featured-qualification .featured-content {
  width: 100%;
}

.qualification-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-xl);
}


/* -------------------------------------------------------------------
   11. El titular del CTA final

   style.css:221 da color:var(--dark-color) a todo h1-h6 como regla de
   elemento y le gana a la herencia de .cta. Las dos landings no
   llevaban .cta__title y su titular salía gris oscuro sobre el
   degradado morado. Además --font-size-4xl es fijo: a 360px
   "descontracturante" se partía a mitad de palabra.
   ------------------------------------------------------------------- */
.cta .cta__title {
  font-size: clamp(1.625rem, 1.05rem + 2.55vw, var(--font-size-4xl));
  text-wrap: balance;
}


/* -------------------------------------------------------------------
   12. Movimiento del trazo

   Solo donde el trazo ES el contenido: la barra de los trimestres y
   el eje de la camilla se dibujan al entrar. stroke-dashoffset, que
   no provoca layout. El estado inicial lo pone .mov-oculto, que
   aplica js/scroll-animations.js: sin JS y con movimiento reducido el
   trazo está entero desde el principio.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .mov-oculto .trazo {
    stroke-dasharray: var(--trazo, 400);
    stroke-dashoffset: var(--trazo, 400);
  }

  .mov-dentro .trazo {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--mov-salida) 120ms;
  }
}