/* ==========================================================================
   RESPONSIVE.CSS
   Ajustes específicos por dispositivo: móvil pequeño, móvil grande,
   tablet, iPad, portátil y escritorio.
   Base del sistema = móvil pequeño (mobile-first).
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE — MÓVILES PEQUEÑOS (hasta ~379px)
   Prioriza una sola columna, densidad mínima, navegación esencial.
   -------------------------------------------------------------------------- */
:root {
  --container-padding: var(--space-4);
}

.main-nav {
  display: none;
}

/* Corrige un desbordamiento horizontal real en móvil: el logo completo
   más los dos botones de acceso no caben en el ancho disponible. Se
   oculta el texto del logo (queda solo la marca) hasta que hay más
   espacio, siguiendo el mismo criterio ya usado en el riel de
   navegación de la app para tablet. */
.header-inner {
  gap: var(--space-3);
}

.logo-text {
  display: none;
}

.header-actions {
  gap: var(--space-2);
}

.header-actions .btn {
  padding: 0.55rem 0.75rem;
  font-size: var(--text-xs);
}

.hero {
  padding-block: var(--space-8) var(--space-7);
  background-size: 32px 32px;
}

.hero-actions {
  flex-direction: column;
  align-items: stretch;
}

.hero-actions .btn {
  width: 100%;
}

.funciones-grid {
  grid-template-columns: 1fr;
}

.cta-final-inner {
  align-items: stretch;
}

.cta-final-inner .btn {
  width: 100%;
}

.auth-card {
  padding: var(--space-6) var(--space-4);
}

/* --------------------------------------------------------------------------
   MÓVILES GRANDES (380px – 639px)
   -------------------------------------------------------------------------- */
@media (min-width: 380px) {
  :root {
    --container-padding: var(--space-5);
  }

  .hero-actions {
    flex-direction: row;
    align-items: center;
  }

  .hero-actions .btn {
    width: auto;
  }

  .cta-final-inner .btn {
    width: auto;
  }
}

/* Uso en campo: teléfono en horizontal, poca altura de viewport. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero {
    padding-block: var(--space-6);
  }

  .section {
    padding-block: var(--space-7);
  }

  .auth-main {
    padding-block: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   TABLETS (640px – 767px)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .funciones-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .header-inner {
    gap: var(--space-5);
  }

  .logo-text {
    display: inline;
  }

  .header-actions {
    gap: var(--space-3);
  }

  .header-actions .btn {
    padding: 0.7rem 1.4rem;
    font-size: var(--text-sm);
  }

  .auth-card {
    padding: var(--space-7) var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   IPAD / TABLET GRANDE (768px – 1023px)
   Se recupera la navegación principal y aumenta la densidad útil.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
  }

  .main-nav {
    display: flex;
  }

  .hero-content {
    max-width: 34rem;
  }

  .pasos-lista {
    max-width: 38rem;
  }

  .cta-final-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   IPAD LANDSCAPE / PORTÁTIL PEQUEÑO (1024px – 1279px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .funciones-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero {
    padding-block: var(--space-10) var(--space-9);
  }

  .section {
    padding-block: var(--space-10);
  }
}

/* --------------------------------------------------------------------------
   PORTÁTIL / ESCRITORIO (1280px – 1439px)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --container-padding: var(--space-7);
  }

  .funciones-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .nav-list {
    gap: var(--space-7);
  }
}

/* --------------------------------------------------------------------------
   ESCRITORIO GRANDE (1440px en adelante)
   Mayor aire alrededor del contenido; el contenedor mantiene su ancho máximo.
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --container-padding: var(--space-8);
  }

  .hero-content {
    max-width: 38rem;
  }
}