/* Componentes de las páginas de remate.
   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. */

/* ===================================================================
   REMATE 2026-09 — grupo: index, primera-vez, spa-domicilio, promociones

   Capa nueva, va DESPUÉS del bloque "REFRESH 2026-09" de css/style.css.
   Todo usa los tokens que ya existen. Recordatorio: --white vale #1f2937
   en tema oscuro, así que aquí no se usa nunca como "blanco".
   =================================================================== */

/* Dos acentos propios de esta capa. El morado de marca (#c084e8) sobre las
   superficies oscuras del sitio se queda en 3,8:1 y el verde de éxito sobre
   las superficies tibias claras en 3,7:1: medido con axe, no supuesto. */
:root {
  --acento-remate: var(--primary-color);
  --exito-remate: color-mix(in srgb, var(--success-color) 78%, #000000);
}

[data-theme="dark"] {
  --acento-remate: #d8b4fe;
  --exito-remate: var(--success-color);
}

/* -------------------------------------------------------------------
   1. Arreglos de una línea que ya estaban diagnosticados
   ------------------------------------------------------------------- */

/* El párrafo de la cabecera se centraba solo (margin: 0 auto) aunque el
   titular estuviera a la izquierda: título en x=145 y párrafo en x=420.
   Solo se centra si el encabezado entero está centrado. */
.section__header:not(.section__header--center) .section__description {
  margin-inline: 0;
}

/* Rejilla informativa de CUATRO tarjetas: con auto-fit minmax(300px)
   entraban 3 por fila y la cuarta quedaba huérfana con dos tercios de
   fila vacíos. Con :has() el arreglo solo alcanza a las rejillas de 4. */
@media (min-width: 992px) {
  .info-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* En móvil la foto decorativa del hero se ponía ANTES del texto
   (services.css: .service-hero__image { order: -1 }), así que el primer
   viewport no tenía ni H1 ni CTA: solo header, migas y una imagen. Todo
   esto va acotado a las dos páginas de este grupo para no pisar el
   trabajo de los demás agentes. */
@media (max-width: 992px) {
  #hero-primera-vez .service-hero__image,
  #hero-promociones .service-hero__image,
  #hero-domicilio .service-hero__image {
    order: 0;
  }

  /* Y las tres cifras, que se apilaban en tres filas, bajan del botón:
     primero el CTA, después la prueba social. */
  #hero-primera-vez .service-hero__text,
  #hero-promociones .service-hero__text,
  #hero-domicilio .service-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #hero-primera-vez .service-hero__stats,
  #hero-promociones .service-hero__stats,
  #hero-domicilio .service-hero__stats {
    order: 1;
    width: 100%;
  }
}

/* La píldora sobre el titular es la misma etiqueta que el refresh quitó de
   las 45 cabeceras de sección: dice lo que el H1 ya dice y roba la altura
   que necesita el CTA. Aquí baja a una línea de texto. */
#hero-primera-vez .service-hero__category,
#hero-promociones .service-hero__category,
#hero-domicilio .service-hero__category {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--acento-remate);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

/* Index: en móvil la foto del hero iba antes del título y empujaba
   "Reservar Ahora" a ~795 px, muy por debajo del pliegue. */
@media (max-width: 768px) {
  #inicio .hero__image {
    order: 1;
  }

  #inicio .hero__text {
    order: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #inicio .hero__stats {
    order: 1;
    width: 100%;
  }
}

/* -------------------------------------------------------------------
   2. Iconos SVG
   Sustituyen a los emoji. Trazo de 1,75px y currentColor: el icono se
   tiñe del color del texto que lo acompaña, así que funciona en los dos
   temas sin una sola regla de tema.
   ------------------------------------------------------------------- */
.simbolo {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  color: var(--acento-remate);
}

.simbolo--grande {
  width: 2.5rem;
  height: 2.5rem;
}

/* -------------------------------------------------------------------
   3. Barras — comparaciones con datos ya publicados
   Duraciones, precio + traslado, precio suelto vs precio de pack.
   Cada cifra sigue siendo texto: la barra es refuerzo, no el único
   portador del dato.
   ------------------------------------------------------------------- */
.barras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-lg);
  max-width: 46rem;
}

.barra {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.35rem var(--spacing-md);
}

.barra__etiqueta {
  font-weight: 600;
  text-wrap: balance;
}

.barra__valor {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--acento-remate);
  white-space: nowrap;
}

.barra__pista {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  overflow: hidden;
}

.barra__tramo {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--desde, 0) * 1%);
  width: calc((var(--hasta) - var(--desde, 0)) * 1%);
  background: var(--primary-color);
}

/* El tramo de traslado es el mismo en los cuatro servicios: se dibuja
   con otra densidad para que se vea que es siempre la misma franja. */
.barra__tramo--traslado {
  background: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

/* Lo que cuesta por separado: gris, para que el morado sea el ahorro. */
.barra__tramo--suelto {
  background: color-mix(in srgb, currentColor 32%, transparent);
}

/* El extra de la consulta inicial no es una duración más: es un añadido.
   Se dibuja perfilado, no macizo. */
.barra__tramo--extra {
  background: none;
  border: 2px dashed var(--primary-color);
  border-radius: 999px;
}

/* Par de barras (precio suelto / precio de pack) dentro de un mismo ítem */
.barra--par {
  display: block;
}

.barra--par .barra__etiqueta {
  display: block;
}

.barra--par .barra__pista {
  width: 100%;
  margin-block: 0.4rem 0.2rem;
}

.barra--par .barra__valor {
  display: block;
  font-size: var(--font-size-sm);
}

.barra--par .barra__valor--suelto {
  color: var(--theme-text-secondary);
  font-weight: 400;
}

.barra__ahorro {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--exito-remate) 42%, transparent);
  color: var(--exito-remate);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.barras__leyenda {
  list-style: none;
  margin: var(--spacing-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}

.barras__leyenda li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.barras__muestra {
  width: 1.1rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--primary-color);
}

.barras__muestra--traslado {
  background: color-mix(in srgb, var(--primary-color) 45%, transparent);
}

/* -------------------------------------------------------------------
   4. Semana — la tira de días
   Responde "¿cuándo voy?" con el horario ya publicado y marca los días
   que tienen oferta. Sustituye a tres párrafos de prosa.
   ------------------------------------------------------------------- */
.semana {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--spacing-sm);
}

.semana__dia {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--spacing-md) var(--spacing-sm);
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  text-align: center;
}

.semana__nombre {
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.semana__horario {
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.semana__oferta {
  margin-top: auto;
  padding-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

/* El domingo no se apaga bajando la opacidad: eso arruina el contraste. Se
   marca con el borde punteado y con la palabra "Cerrado". */
.semana__nota {
  margin-top: var(--spacing-lg);
  max-width: 62ch;
}

.semana__dia--cerrado {
  background: none;
  border-style: dashed;
}

/* Dentro de la banda de marca el fondo fijo manda. Aclarar el morado con
   blanco translúcido dejaba el texto blanco en 3,6:1 (medido): las
   superficies se hacen OSCURECIENDO, que sube el contraste en vez de
   bajarlo. Y nunca con --white, que en tema oscuro vale #1f2937. */
section[data-superficie="marca"] .semana__dia {
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

section[data-superficie="marca"] .semana__dia--oferta {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.7);
}

section[data-superficie="marca"] .semana__nota {
  margin-top: var(--spacing-lg);
  max-width: 62ch;
}

.semana__dia--cerrado {
  background: none;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.45);
}

section[data-superficie="marca"] .barra__valor,
section[data-superficie="marca"] .barra__etiqueta,
section[data-superficie="marca"] .semana__nombre,
section[data-superficie="marca"] .semana__horario,
section[data-superficie="marca"] .semana__oferta,
section[data-superficie="marca"] .simbolo {
  color: #ffffff;
}

/* -------------------------------------------------------------------
   5. Reparto — "lo que lleva ella / lo que pones tú"
   La asimetría (cinco cosas contra dos) es el argumento de venta, así
   que las dos columnas no son iguales a propósito.
   ------------------------------------------------------------------- */
.reparto {
  display: grid;
  gap: var(--spacing-2xl);
}

@media (min-width: 900px) {
  .reparto {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }
}

.reparto__titulo {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--theme-border);
}

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

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

.reparto__item h4 {
  margin: 0 0 0.15rem;
  font-size: var(--font-size-base);
}

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

.reparto__tuyo {
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--primary-color) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.reparto__tuyo .reparto__titulo {
  border-bottom-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* -------------------------------------------------------------------
   6. Zonas de cobertura
   Eran siete bloques con la misma frase repetida cinco veces. Ahora la
   tarifa se dice una vez por grupo y los sectores son una lista.
   ------------------------------------------------------------------- */
.zonas-mapa {
  display: grid;
  gap: var(--spacing-xl);
}

@media (min-width: 720px) {
  .zonas-mapa {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}

.zonas-mapa__grupo {
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--theme-border);
}

.zonas-mapa__tarifa {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
  font-weight: 700;
  color: var(--acento-remate);
  font-variant-numeric: tabular-nums;
}

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

.zonas-mapa__lista li {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.zonas-mapa__nota {
  margin: var(--spacing-md) 0 0;
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}

/* -------------------------------------------------------------------
   7. FAQ agrupado
   Doce filas idénticas seguidas ocupaban el 18% del index y no había
   dónde apoyar la vista. Tres grupos con encabezado propio y dos
   columnas en escritorio: la misma información en la mitad del alto.
   ------------------------------------------------------------------- */
.faq__grupos {
  display: grid;
  gap: var(--spacing-2xl);
  max-width: 1000px;
  margin-inline: auto;
  align-items: start;
}

@media (min-width: 900px) {
  .faq__grupos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spacing-xl);
  }

  /* El grupo del medio es el más largo: ocupa la segunda columna entera
     y los otros dos se apilan en la primera. */
  .faq__grupo--largo {
    grid-row: span 2;
  }
}

.faq__grupo-titulo {
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acento-remate);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 28%, transparent);
}

.faq__grupos .faq__container {
  max-width: none;
  margin: 0;
}

.faq__grupos .faq__item {
  margin-bottom: var(--spacing-md);
}

.faq__grupos .faq__question {
  padding: var(--spacing-md) var(--spacing-lg);
  gap: var(--spacing-md);
}

.faq__grupos .faq__answer {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}

/* -------------------------------------------------------------------
   8. Etiquetas
   Las viñetas con emoji de las tarjetas de servicio ("✨ Masaje sueco")
   eran cuatro líneas de alto cada una y el emoji competía con el precio.
   Como etiquetas en línea ocupan dos líneas y se leen de un vistazo.
   ------------------------------------------------------------------- */
.etiquetas {
  list-style: none;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.etiquetas li {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--theme-border);
  font-size: var(--font-size-sm);
  color: var(--theme-text-secondary);
}

/* -------------------------------------------------------------------
   9. Precios: antes y ahora
   El tachado iba con un color escrito en línea (#6b5a6e) que no
   reaccionaba al tema y en modo noche era ilegible. Y el precio nuevo
   pedía var(--color-primary), una variable que no existe en el sitio:
   se quedaba sin color. */
.precio--antes {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--theme-text-secondary);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.precio--ahora {
  color: var(--acento-remate);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------
   10. Index — la sección de servicios en móvil
   Tres tarjetas apiladas ocupaban 2.849 px, el 35% de la página, con la
   misma estructura repetida tres veces. La foto se recorta y las
   características pasan a etiquetas: la misma información, menos alto.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
  #servicios .service-card__image {
    height: 150px;
  }

  #servicios .service-card__content {
    padding: var(--spacing-lg);
  }

  #servicios .service-card__description {
    margin-bottom: var(--spacing-md);
  }

  /* Apiladas eran 2.849 px, cuatro pantallas y media de lo mismo antes de
     llegar a cualquier otra cosa. En fila con scroll-snap ocupan una. El
     recorte del 82% deja ver que hay más tarjetas a la derecha, y como
     cada tarjeta tiene su enlace la región sigue siendo alcanzable con el
     teclado sin añadir un tabindex que no lleva a ninguna parte. */
  #servicios .services__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--spacing-lg);
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }

  #servicios .service-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  /* En móvil la tarjeta ya viene centrada (css/style.css:1823): las
     etiquetas se alinean con ella en vez de quedar sueltas a la izquierda. */
  #servicios .etiquetas {
    justify-content: center;
  }
}

/* -------------------------------------------------------------------
   11. Secuencia dentro de una respuesta del FAQ
   Los siete pasos de la limpieza facial estaban en un párrafo. Dentro
   del acordeón la secuencia va compacta y siempre en vertical.
   ------------------------------------------------------------------- */
.secuencia--compacta {
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.secuencia--compacta .secuencia__paso {
  padding-inline-start: 2.75rem;
}

.secuencia--compacta .secuencia__paso::before {
  width: 1.85rem;
  height: 1.85rem;
  font-size: var(--font-size-sm);
}

.secuencia--compacta .secuencia__paso:not(:last-child)::after {
  inset-inline-start: 0.87rem;
  top: 1.85rem;
  bottom: calc(var(--spacing-md) * -1);
}

.secuencia--compacta .secuencia__titulo {
  font-size: var(--font-size-base);
  margin-bottom: 0;
}

/* -------------------------------------------------------------------
   12. Bloque de ahorro suelto (primera visita)
   ------------------------------------------------------------------- */
.ahorro-bloque {
  max-width: 46rem;
  margin: 0 auto var(--spacing-2xl);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
  background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

.ahorro-bloque__titulo {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-lg);
}