/* Pilates LifeStudio — global CSS entry. Imports only. */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/borders.css");
@import url("tokens/shadows.css");
@import url("tokens/motion.css");
@import url("tokens/layout.css");

/* Responsive — celular y tablet angosto. Redefinir los tokens de espaciado/tipografía
   aquí basta para que todo el sitio (hero, secciones, tarjetas) se achique en cascada,
   porque cada componente ya lee su tamaño con var(--...) en vez de valores fijos. */
@media (max-width: 720px) {
  :root {
    --gutter-page-lg: 20px;
    --gutter-page: 16px;
    --section-y: 48px;
    --size-display-xl: 38px;
    --size-display-lg: 30px;
    --size-display-md: 26px;
    --size-display-sm: 20px;
    --size-script-lg: 32px;
    --size-script: 24px;
    --space-9: 48px;
    --space-8: 32px;
    --space-7: 20px;
    --space-6: 18px;
  }
  /* Cuadrículas de dos/tres columnas y layouts "sidebar + contenido" pasan a una sola
     columna; .mob-stack se agrega a mano en cada div con gridTemplateColumns/flex fijo
     que necesita apilarse en vez de comprimirse. */
  /* minmax(0, 1fr) en vez de 1fr: una sola columna con 1fr todavía respeta el ancho
     mínimo de contenido de sus hijos (texto sin cortar, minWidth fijo, iframes) y se
     desborda del contenedor — minmax(0, ...) fuerza a que la columna respete el ancho
     real disponible. */
  .mob-stack { grid-template-columns: minmax(0, 1fr) !important; flex-direction: column !important; }
  .mob-stack > * { min-width: 0 !important; }

  /* Hero: la foto está recortada pensando en pantalla ancha (personas a la derecha,
     texto sobre fondo oscuro a la izquierda). En un celular angosto, "center" recorta
     casi puro fondo gris y deja a las personas fuera — se recorre el punto de anclaje
     hacia la derecha para que sigan visibles, y se reduce el padding vertical gigante. */
  .hero-bg { background-position: 80% 20% !important; padding: 64px 0 56px !important; }
  /* El degradado horizontal (oscuro a la izquierda, claro a la derecha) también asumía
     texto angosto sobre fondo ancho; en móvil el texto ocupa todo el ancho, así que hace
     falta oscurecer parejo para que el blanco siga siendo legible sobre la foto. */
  .hero-overlay { background: rgba(21,33,48,.6) !important; }
}

/* Evita que un elemento suelto más ancho que el viewport (imagen, tabla, iframe) fuerce
   scroll horizontal en toda la página — el contenido en sí ya es responsive. */
html, body { max-width: 100%; overflow-x: hidden; }