/* Componentes de las páginas de comercial.
   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 — capa "comercial": precios.html
   Para integrar al final de css/style.css (después del bloque
   "REFRESH 2026-09"), que es donde gana los empates de especificidad.
   regalo-spa-valdivia.html no necesita nada de aquí: su CSS propio vive
   en el <style> de la página y ya está actualizado.
   =================================================================== */

/* --- El comodín de services.css borra las superficies en oscuro ------
   css/style.css:1267 ya se corrigió con :not([data-superficie]), pero
   css/services.css:2434 conserva la copia entera del comodín
   ([data-theme="dark"] section { background-color: inherit !important })
   y services.css carga DESPUÉS de style.css en las 21 páginas: en tema
   oscuro vuelve a borrar toda la alternancia de fondos.
   Medido: en precios.html sólo quedaban 2 fondos distintos en 9 secciones.
   Mientras services.css no se toque (lo edita otro agente), esto devuelve
   la superficie tibia. Al arreglar services.css, borrar este bloque. */
[data-theme="dark"] section[data-superficie="tibia"] {
  background-color: #241041 !important;
}

[data-theme="dark"] section[data-superficie="marca"] {
  background-color: #5b2d61 !important;
}

/* --- Hero de servicios: el texto primero en móvil --------------------
   services.css:1087 pone order:-1 a la foto en ≤992px, así que el primer
   viewport de 360x640 era header + migas + una imagen decorativa: ni el
   H1 ni el CTA. Esta clase lo devuelve al orden del documento. */
@media (max-width: 992px) {
  .service-hero--texto-primero .service-hero__image {
    order: 0;
  }
}

/* --- Cabecera de sección alineada a la izquierda ---------------------
   .section__description lleva margin: 0 auto (style.css:631), pensado
   para los headers centrados. En un header alineado a la izquierda el
   H2 queda a la izquierda y el párrafo centrado: se ve como un error de
   maquetación. Afecta a todo el sitio, no sólo a estas dos páginas. */
.section__header:not(.section__header--center) .section__description {
  margin-inline: 0;
}

/* --- Resumen de rangos ("de un vistazo") -----------------------------
   Antes del resumen, la página pasaba del hero a la primera de 18
   tarjetas idénticas sin ninguna vista de conjunto. Las tres barras
   están sobre la misma escala ($0 a $45.000) para que se comparen. */
.rangos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.rango {
  min-width: 0;
}

.rango__enlace {
  display: grid;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) 0;
  color: var(--theme-text-primary);
  text-decoration: none;
  border-block-start: 2px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
  transition: border-color var(--mov-control) var(--mov-salida);
}

.rango__enlace:hover,
.rango__enlace:focus-visible {
  border-block-start-color: var(--primary-color);
}

.rango__nombre {
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.rango__cifras {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}

.rango__conector {
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--theme-text-secondary);
}

/* preserveAspectRatio="none" + rects sin radio: la barra se estira en
   ancho sin deformar ningún trazo. */
.rango__barra {
  display: block;
  width: 100%;
  height: 12px;
  margin-block: var(--spacing-xs);
  color: var(--primary-color);
}

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

/* El subrayado del enlace sale al pasar por encima, no antes. */
.rango__enlace:hover .rango__nombre,
.rango__enlace:focus-visible .rango__nombre {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Línea de tiempo -------------------------------------------------
   Hermana de .secuencia, pero el marcador es una hora y no un número de
   paso: son momentos hacia la sesión (−24 h, −4 h, 0 h), no pasos que se
   cuentan. Misma línea conectora y mismo comportamiento sin JS. */
.linea-tiempo {
  list-style: none;
  margin: 0 0 var(--spacing-3xl);
  padding: 0;
  display: grid;
  gap: var(--spacing-xl);
}

.linea-tiempo__hito {
  position: relative;
  padding-inline-start: 5.5rem;
}

.linea-tiempo__hora {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 4.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--border-radius-full);
  background: var(--primary-color);
  color: var(--white);
  font-weight: 700;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.linea-tiempo__hito--destino .linea-tiempo__hora {
  background: var(--accent-color);
}

.linea-tiempo__hito:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 2.06rem;
  top: 2.25rem;
  bottom: calc(var(--spacing-xl) * -1);
  width: 2px;
  background: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

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

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

@media (min-width: 900px) {
  .linea-tiempo {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .linea-tiempo__hito {
    padding-inline-start: 0;
    padding-block-start: 3.25rem;
  }

  .linea-tiempo__hito:not(:last-child)::after {
    inset-inline-start: 4.25rem;
    inset-inline-end: calc(var(--spacing-lg) * -1);
    top: 1.06rem;
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

/* --- Medios de pago --------------------------------------------------
   Eran cuatro viñetas con emoji del sistema, que se ven distintas en
   cada dispositivo. Ahora es una tira con iconos SVG en currentColor. */
.pagos {
  margin-bottom: var(--spacing-3xl);
}

.pagos__titulo {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

.pagos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
}

.pago {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--theme-text-primary);
}

.pago__icono {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--primary-color);
}

/* --- Tarjetas de información ----------------------------------------- */
.info-card .info-icon {
  display: block;
  margin-bottom: var(--spacing-lg);
  color: var(--primary-color);
}

.info-card .info-icon svg {
  width: 2.5rem;
  height: 2.5rem;
  margin-inline: auto;
}

.info-card__enlace {
  display: inline-block;
  margin-top: var(--spacing-lg);
  font-weight: 600;
  color: var(--primary-color);
}

/* --- Promociones: cada gancho con su enlace --------------------------
   Las cuatro tarjetas de la banda eran las únicas de la página sin nada
   en lo que hacer clic, justo donde el interés de compra es mayor. */
/* Las cuatro tarjetas alinean su botón abajo: con el botón pegado al
   último párrafo, cuatro alturas de texto distintas daban cuatro
   posiciones distintas de CTA. */
section[data-superficie="marca"] .promotion-card {
  display: flex;
}

section[data-superficie="marca"] .promotion-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  gap: var(--spacing-md);
}

/* El margin-bottom del gancho ya lo pone el gap. */
section[data-superficie="marca"] .promotion-content h3,
section[data-superficie="marca"] .promotion-discount,
section[data-superficie="marca"] .promotion-price,
section[data-superficie="marca"] .promotion-content p {
  margin-bottom: 0;
}

.promotion-cta {
  display: inline-block;
  align-self: center;
  margin-top: auto;
  padding: var(--spacing-sm) var(--spacing-lg);
  /* full daba una elipse cuando el texto se parte en dos líneas */
  border-radius: var(--border-radius-md);
  background: #ffffff;
  color: #6d2f74;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background var(--mov-control) var(--mov-salida);
}

.promotion-cta:hover,
.promotion-cta:focus-visible {
  background: #f0e6f2;
  color: #5b2555;
}

/* [data-theme="dark"] a (style.css:1674) pinta #d8b4fe sobre el botón
   blanco: 1,6:1 medido con axe. El botón lleva fondo propio y fijo, así
   que su texto también. */
[data-theme="dark"] a.promotion-cta {
  color: #6d2f74;
}

[data-theme="dark"] a.promotion-cta:hover,
[data-theme="dark"] a.promotion-cta:focus-visible {
  color: #5b2555;
}

/* El velo blanco sobre el morado dejaba el texto blanco en 2,2:1.
   Oscurecer en vez de aclarar sube el contraste y mantiene la capa. */
section[data-superficie="marca"] .promotion-card {
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: none;
}

section[data-superficie="marca"] .promotion-card:hover {
  background: rgba(0, 0, 0, 0.24);
}

section[data-superficie="marca"] .promotion-card.featured {
  background: rgba(0, 0, 0, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
}

section[data-superficie="marca"] .promotion-savings,
section[data-superficie="marca"] .promotion-validity {
  color: #e4cfeb;
}

/* --- Contraste del hover de .pricing-btn -----------------------------
   --secondary-color (#b391b8) con texto blanco da 2,7:1. Afecta también
   a masajes, faciales y depilación, que usan el mismo botón. */
.pricing-btn:hover,
.pricing-btn:focus-visible {
  background: #5b2555;
  color: #ffffff;
}

[data-theme="dark"] .pricing-btn:hover,
[data-theme="dark"] .pricing-btn:focus-visible {
  background: #e2c9f0;
  color: #2a1030;
}