/* Componentes de las páginas de servicios.
   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 — páginas de servicios (masajes, faciales, depilación)
   Componentes nuevos + correcciones de los hallazgos del encargo
   "servicios". Pensado para integrarse AL FINAL de css/services.css
   (o al final de css/style.css): gana los empates de especificidad sin
   tener que subir selectores.

   Todo usa los tokens que ya existen. Recordatorio: --white vale
   #1f2937 en tema oscuro, así que nunca se usa sobre la banda de marca.
   =================================================================== */

/* -------------------------------------------------------------------
   1. Iconografía de trazo — reemplaza los emoji del sistema
   Un solo tamaño y un solo grosor para los 3 páginas. currentColor:
   funciona igual en claro, en oscuro y sobre la banda de marca.
   ------------------------------------------------------------------- */
.icono {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
}

.icono--grande {
  width: 2rem;
  height: 2rem;
  stroke-width: 1.5;
}

/* El sprite no se ve nunca: solo define los símbolos. */
.sprite-iconos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Dato con icono: duración, tipo de piel, zona. */
.dato {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* -------------------------------------------------------------------
   2. Jerarquía de títulos
   Antes los 7/6/8 h2 de cada página eran idénticos: 36px centrados. Sin
   diferencia de tamaño el ojo no encuentra dónde detenerse.
   ------------------------------------------------------------------- */
.section__title--principal {
  font-size: clamp(2.25rem, 1.55rem + 2.6vw, 2.75rem);
  line-height: 1.12;
}

.section__title--apoyo {
  font-size: var(--font-size-3xl);
}

.section__title--menor {
  font-size: var(--font-size-2xl);
  font-weight: 500;
}

/* .section__description llevaba margin:0 auto, así que en una cabecera
   alineada a la izquierda el texto quedaba centrado y el H2 no: eran dos
   ejes distintos separados por ~176px. */
.section__header:not(.section__header--center) .section__description,
.massage-men .section__description {
  margin-inline: 0;
}

/* -------------------------------------------------------------------
   3. El CTA del hero deja de estar a dos pantallas del inicio
   En móvil el orden era foto → categoría → H1 → párrafo largo → 3 stats
   apilados → botón: ~1.400px hasta la primera acción. Se reordena con
   CSS; el HTML mantiene el orden lógico para lectores de pantalla y
   para el foco.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
  .service-hero__text {
    display: flex;
    flex-direction: column;
  }

  .service-hero__title { order: 1; }
  .service-hero__text > .btn { order: 2; margin-bottom: var(--spacing-lg); }
  .service-hero__description { order: 3; }
  .service-hero__badges { order: 4; }
  .service-hero__stats { order: 5; margin-bottom: 0; }

  /* Tres stats en fila, no en columna: ocupaban 3 pantallazos de alto. */
  .service-hero__stats {
    flex-direction: row;
    gap: var(--spacing-md);
    justify-content: space-between;
  }

  .service-hero__stats .stat {
    flex: 1 1 0;
    min-width: 0;
  }

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

  .service-hero__stats .stat__label {
    font-size: var(--font-size-xs);
    line-height: 1.3;
  }
}

/* -------------------------------------------------------------------
   4. El pie de las tarjetas se ancla abajo
   Las tarjetas de una fila estiran al alto de la más larga, pero el
   precio y el botón quedaban a alturas distintas y sobraba blanco
   muerto debajo.
   ------------------------------------------------------------------- */
.massage-card,
.facial-card,
.waxing-card {
  display: flex;
  flex-direction: column;
}

.massage-card__content,
.facial-card__content,
.waxing-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.massage-card__footer,
.facial-card__footer,
.waxing-card__footer {
  margin-top: auto;
}

/* La rejilla de 350px dejaba 3 columnas en 1.152px y una tarjeta
   huérfana en la última fila. Con 260px caben 4 y las 8 cuadran. */
@media (min-width: 993px) {
  .waxing-grid {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

/* -------------------------------------------------------------------
   5. Bloque de beneficios: la foto dejaba de ser media página
   1fr 1fr daba 540px de foto decorativa y apretaba el texto en dos
   columnas de 170px donde una frase se partía en cuatro líneas.
   ------------------------------------------------------------------- */
@media (min-width: 993px) {
  .benefits-content,
  .care-content {
    grid-template-columns: 1.45fr 1fr;
    gap: var(--spacing-2xl);
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
}

.benefit-icon {
  min-width: 0;
  color: var(--primary-color);
}

/* -------------------------------------------------------------------
   6. El botón de WhatsApp del cierre deja de ser morado sobre morado
   .cta usa --gradient-primary, que arranca en --primary-color, y
   .btn--secondary pintaba texto y borde con ese mismo color: 1:1 de
   contraste en el arranque del degradado. Es la acción que más
   convierte del negocio.
   ------------------------------------------------------------------- */
.cta .btn--secondary,
[data-theme="dark"] .cta .btn--secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.14);
}

.cta .btn--secondary:hover,
.cta .btn--secondary:focus-visible,
[data-theme="dark"] .cta .btn--secondary:hover,
[data-theme="dark"] .cta .btn--secondary:focus-visible {
  color: #4a1f50;
  background: #ffffff;
  border-color: #ffffff;
}

.cta .btn--secondary:focus-visible {
  outline-color: #ffffff;
}

/* Los tres argumentos comerciales más fuertes iban en la línea más
   chica y más apagada de la página. */
.cta__guarantee {
  font-size: var(--font-size-base);
  opacity: 1;
}

.cta__guarantee a {
  color: #ffffff;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* -------------------------------------------------------------------
   7. Escala de intensidad (masajes)
   El comparador que faltaba: los 6 masajes ordenados por la variable
   con la que realmente se elige. Los datos son los de las tarjetas de
   abajo, ni uno inventado.
   ------------------------------------------------------------------- */
.escala {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
  padding: 0;
  list-style: none;
}

.escala__nivel {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 32%, transparent);
  color: var(--primary-color);
  font-weight: 600;
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

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

.escala__enlace {
  display: block;
  font-weight: 600;
  text-decoration: none;
}

.escala__enlace:hover,
.escala__enlace:focus-visible {
  text-decoration: underline;
}

.escala__cifras {
  display: block;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------
   8. Diagrama de decisión (masajes para hombres)
   El párrafo más útil de la página eran 3 motivos de consulta metidos
   en prosa corrida. Aquí cada rama es síntoma → masaje → minutos y
   precio.
   ------------------------------------------------------------------- */
.decision {
  list-style: none;
  padding: 0;
  margin: var(--spacing-2xl) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--spacing-2xl);
}

.decision__rama {
  display: grid;
  gap: var(--spacing-sm);
  justify-items: start;
}

.decision__icono {
  color: var(--primary-color);
}

.decision__sintoma {
  font-size: var(--font-size-lg);
  margin: 0;
}

.decision__flecha {
  color: color-mix(in srgb, var(--primary-color) 55%, transparent);
}

.decision__respuesta {
  margin: 0;
  font-weight: 600;
}

.decision__cifras {
  display: block;
  font-weight: 400;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------
   9. Regla de semanas (faciales) y barras comparativas (depilación)
   Mismo mecanismo: una barra a escala real. El dato se ve, no se lee.
   El relleno es scaleX, o sea transform: no provoca layout.
   ------------------------------------------------------------------- */
.regla {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--spacing-xl);
}

.regla__fila {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr auto;
  align-items: center;
  gap: var(--spacing-md);
}

.regla__piel {
  margin: 0;
  font-size: var(--font-size-lg);
}

.regla__barra {
  height: 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color) 16%, transparent);
  position: relative;
  overflow: hidden;
}

.regla__relleno,
.duelo__relleno {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--primary-color);
  transform: scaleX(var(--valor, 1));
  transform-origin: left;
  transition: transform 760ms var(--mov-salida);
  transition-delay: calc((var(--mov-escalon, 0) * var(--mov-escalon-ms)) + 140ms);
}

/* .mov-oculto solo existe cuando el JS de movimiento está activo; sin él la
   barra nace con su largo real. Ojo: el JS suma .mov-dentro pero no quita
   .mov-oculto, así que sin el :not() la barra se quedaba vacía para siempre. */
.mov-oculto:not(.mov-dentro) .regla__relleno,
.mov-oculto:not(.mov-dentro) .duelo__relleno {
  transform: scaleX(0);
}

.regla__valor {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.regla__nota {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  max-width: 62ch;
}

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

  .regla__piel {
    grid-column: 1 / -1;
  }
}

/* Duelo: cera contra afeitado, a escala de días. */
.duelo {
  display: grid;
  gap: var(--spacing-xl);
  max-width: 48rem;
  margin: 0 0 var(--spacing-3xl);
  padding: 0;
  list-style: none;
}

.duelo__fila {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr auto;
  align-items: center;
  gap: var(--spacing-md);
}

.duelo__que {
  margin: 0;
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.duelo__que .icono {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--primary-color);
}

.duelo__barra {
  height: 1.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
  position: relative;
  overflow: hidden;
}

.duelo__fila--corta .duelo__relleno {
  background: var(--theme-text-secondary);
}

.duelo__valor {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.duelo__escala {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
}

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

  .duelo__que {
    grid-column: 1 / -1;
  }
}

/* Tabla de criterios enfrentados. Sustituye a dos listas paralelas de
   viñetas ✅/❌ dentro de dos cajas blancas iguales. */
.criterios {
  width: 100%;
  max-width: 48rem;
  margin: 0;
  border-collapse: collapse;
  text-align: left;
}

.criterios caption {
  text-align: left;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  padding-bottom: var(--spacing-sm);
}

.criterios th,
.criterios td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--theme-border-light);
  vertical-align: top;
}

.criterios thead th {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--theme-text-secondary);
}

.criterios tbody th {
  font-weight: 500;
  color: var(--theme-text-secondary);
  width: 34%;
}

.criterios td:first-of-type {
  font-weight: 600;
  color: var(--primary-color);
}

/* En tema oscuro --primary-color (#c084e8) sobre la superficie elevada de la
   tabla da 4,13:1, justo bajo el minimo AA. La correccion global vive en
   style.css, pero este archivo carga despues y con la misma especificidad,
   asi que la excepcion tiene que estar aqui. Medido: 5,6:1. */
[data-theme="dark"] .criterios td:first-of-type {
  color: var(--lila-sobre-superficie, #d3a5ee);
}

@media (max-width: 520px) {
  .criterios th,
  .criterios td {
    padding: var(--spacing-sm) var(--spacing-xs);
    font-size: var(--font-size-sm);
  }
}

/* -------------------------------------------------------------------
   10. Zonas y precios de un vistazo (depilación)
   Antes: zona, duración y precio atomizados en 10 tarjetas repartidas
   en ~3.000px de scroll. Aquí la misma información, en una pasada.
   ------------------------------------------------------------------- */
.zonas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-3xl);
}

.zonas__titulo {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 32%, transparent);
  color: var(--primary-color);
}

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

.zonas__fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--spacing-xs) var(--spacing-md);
  padding-block: var(--spacing-sm);
  border-bottom: 1px solid var(--theme-border-light);
}

.zonas__zona {
  font-weight: 600;
  text-decoration: none;
  grid-column: 1;
  grid-row: 1;
}

.zonas__zona:hover,
.zonas__zona:focus-visible {
  text-decoration: underline;
}

/* En el HTML el orden es zona, precio, minutos, que es como se lee en voz
   alta. En pantalla los minutos van al medio, así los precios quedan
   alineados en una sola columna a la derecha. */
.zonas__min {
  grid-column: 2;
  grid-row: 1;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.zonas__precio {
  grid-column: 3;
  grid-row: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .zonas__fila {
    grid-template-columns: 1fr auto;
  }

  .zonas__zona { grid-column: 1; grid-row: 1; }
  .zonas__precio { grid-column: 2; grid-row: 1; }
  .zonas__min { grid-column: 1; grid-row: 2; }
}

/* El bloque de técnicas dejó de ser tres tarjetas grises: va sobre la
   banda de marca, así que hay que quitarle el disfraz de tarjeta. */
section[data-superficie="marca"] .technique-item {
  background: none;
  box-shadow: none;
  padding: 0;
  text-align: left;
}

section[data-superficie="marca"] .technique-icon {
  color: #ffffff;
}

/* La secuencia sobre marca ya está resuelta en style.css; aquí solo el
   enlace, que heredaba el morado del tema. */
section[data-superficie="marca"] a {
  color: #ffffff;
}

/* -------------------------------------------------------------------
   12. Protocolo facial: el detalle por tratamiento, plegado
   Sacamos 42 pasos de dentro de 6 tarjetas. Lo que cada tratamiento
   añade sobre el protocolo común va aquí, y se abre solo si interesa.
   ------------------------------------------------------------------- */
.detalle-protocolo {
  margin-top: var(--spacing-2xl);
  max-width: 62ch;
}

.detalle-protocolo > summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--spacing-sm) 0;
}

.detalle-protocolo > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.detalle-protocolo dl {
  margin: var(--spacing-md) 0 0;
  display: grid;
  gap: var(--spacing-md);
}

.detalle-protocolo dt {
  font-weight: 600;
}

.detalle-protocolo dd {
  margin: 0;
}

/* -------------------------------------------------------------------
   13. Cobertura a domicilio (masajes)
   La cobertura vivía en una subordinada del párrafo del hero y el
   recargo, 400 líneas más abajo dentro de una FAQ cerrada.
   ------------------------------------------------------------------- */
.cobertura {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), auto));
  gap: var(--spacing-lg) var(--spacing-2xl);
  align-items: center;
  margin-top: var(--spacing-xl);
}

.cobertura__sectores {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  font-weight: 600;
}

.cobertura__sectores li {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.cobertura__recargo {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cobertura__recargo small {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 400;
}

/* -------------------------------------------------------------------
   14. Franja de primera visita (depilación)
   "Primera vez descuento 20%" estaba en la línea más apagada del cierre
   y no enlazaba a la página donde está desarrollado.
   ------------------------------------------------------------------- */
.franja-primera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
  border-radius: var(--border-radius-lg);
}

.franja-primera p {
  margin: 0;
  flex: 1 1 18rem;
}

.franja-primera strong {
  color: var(--primary-color);
}