/* =============================================
   RESPONSIVE & BREAKPOINTS — WEPY.AI
   Estrategia mobile-first con min-width.
   Scroll padding global, contenedor responsive,
   y clases utilitarias de visibilidad.
   ============================================= */


/*
   ┌─────────────────────────────────────────────┐
   │  BREAKPOINTS DE REFERENCIA — WEPY.AI        │
   │  (Mobile-first: base → expandir con         │
   │   min-width en orden ascendente)            │
   ├─────────┬───────────┬──────────────────────┤
   │  Alias  │  Valor    │  Uso                 │
   ├─────────┼───────────┼──────────────────────┤
   │  sm     │  640px    │  Teléfonos grandes   │
   │  md     │  768px    │  Tablets             │
   │  lg     │  1024px   │  Desktop pequeño     │
   │  xl     │  1280px   │  Desktop estándar    │
   │  2xl    │  1440px   │  Desktop grande      │
   └─────────┴───────────┴──────────────────────┘
*/


/* =============================================
   SCROLL PADDING
   Compensa la altura del navbar fijo al saltar
   a secciones con ancla (#seccion).
   ============================================= */
:root {
  scroll-padding-top: var(--navbar-height-mobile);
}

@media (min-width: 1024px) {
  :root {
    scroll-padding-top: var(--navbar-height-desktop);
  }
}


/* =============================================
   CONTENEDOR GLOBAL
   ============================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* Padding lateral crece con el viewport */
@media (min-width: 640px) {
  :root { --container-px: 2rem; }
}

@media (min-width: 1280px) {
  :root { --container-px: 3rem; }
}


/* =============================================
   UTILIDADES DE VISIBILIDAD
   ============================================= */

/* Visible solo en móvil (< 1024px) */
.mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-only {
    display: none !important;
  }
}

/* Visible solo en escritorio (>= 1024px) */
.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }
}


/* =============================================
   UTILIDADES DE TEXTO RESPONSIVE
   ============================================= */

/* Ocultar texto visualmente pero mantener accesibilidad */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* =============================================
   AJUSTES GLOBALES RESPONSIVE
   Correcciones de layout que afectan a todo
   el sitio en distintos breakpoints.
   ============================================= */

/* Reducir padding de secciones en móvil */
@media (max-width: 639px) {
  section {
    padding-inline: var(--container-px);
  }
}