/* Mejoras sobre el clon de Webflow (29/10/2026). Se carga después del CSS de Webflow.
   Cada bloque dice qué hallazgo de _ux-review/REVIEW.md resuelve. */

/* #5 Carruseles del celular/tablet: sin barra de scroll visible y con frenado en cada tarjeta.
   La tarjeta siguiente asomada ya indica que se desliza. */
@media (max-width: 991px) {
  .sessions-sticky, .instructors-wrapper, .reviews-wrapper, .plans-wrapper {
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .sessions-sticky::-webkit-scrollbar, .instructors-wrapper::-webkit-scrollbar,
  .reviews-wrapper::-webkit-scrollbar, .plans-wrapper::-webkit-scrollbar { display: none; }
  .sessions-item, .instructors-item, .reviews-item, .plans-item { scroll-snap-align: start; }
}

/* #6 Planes en escritorio: las 3 tarjetas entran sin cortarse (antes 3 × 27rem desbordaban). */
@media (min-width: 992px) {
  .plans-item { min-width: 0; }
  .plans-wrapper { overflow: visible; }
}

/* #7 Preguntas frecuentes entre 992 y 1199 px: sin corrimiento lateral de la página. */
@media (min-width: 992px) and (max-width: 1199px) {
  .reviews-list { min-width: 0; }
  .review h3 { font-size: 1.75rem; }
}

/* #10 El header fijo no tapa el título al llegar por el link "Beneficios". */
#beneficios { scroll-margin-top: 120px; }

/* #15 Beneficios: cada viñeta en su propia línea (venían como texto corrido). */
.session-card-description { white-space: pre-line; }

/* Títulos sin una palabra sola en la última línea. */
h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* #18 Contraste suave: respuestas de preguntas frecuentes y textos grises (#949191 → #6b6868, ~5:1). */
.color-gray-200 { color: #6b6868; }

/* #20 Puntos del slider: área de toque de 44 px sin cambiar su tamaño visible. */
.w-slider-dot::after { content: ""; position: absolute; inset: -14px -4px; }

/* Foco visible al navegar con teclado (Webflow lo apaga con outline:none). */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #2b2729;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px #fff;
}

/* Scroll suave en los links del menú, salvo para quien pide menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* #16 Menú abierto en pantallas bajas (iPhone SE con barras de Safari, ~553 px): que entre completo,
   con Contacto y las redes a la vista. En pantallas más altas queda como el original. */
@media (max-width: 991px) and (max-height: 700px) {
  .header-navigation { padding-top: 6rem; padding-bottom: 1rem; grid-row-gap: 1rem; overflow-y: auto; }
  .header-list { grid-row-gap: 1rem; }
  .navigation-link { font-size: 2rem; }
  .header-item.header-button-wrapper { margin-top: .5rem; }
  .header-socials.tablet-visible { padding-top: 1.25rem; }
}