/* ============================================================
   MAIN.CSS — Punto de entrada: importa todos los módulos CSS
   ============================================================ */

@import url('tokens.css');
@import url('reset.css');
@import url('animations.css');
@import url('layout.css');
@import url('components.css');

/* ── OVERRIDES FINALES Y RESPONSIVE ──────────────────────── */

/* Asegurar que el splash nunca tape el contenido real */
body.splash-active {
  overflow: hidden;
}

/* Smooth scroll para anclas */
html {
  scroll-padding-top: 80px;
}

/* Skip link de accesibilidad */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--sp-4);
  z-index: 9999;
  background: var(--c-amber);
  color: var(--c-navy);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  transition: top 0.2s;
}

.skip-link:focus {
  top: var(--sp-4);
}

/* Sección hero — ajuste de padding top para nav fijo */
.hero {
  padding-top: 80px;
}

/* Sección de servicios — número de sección en header */
.section-02-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Sección de convenios */
#convenios {
  padding-block: var(--section-py);
}

/* Formulario — sección */
#cita {
  background: var(--c-navy);
  border-top: 1px solid rgba(245, 240, 231, 0.05);
}

/* Responsive texto hero en móvil muy pequeño */
@media (max-width: 380px) {
  .hero-title {
    font-size: 3rem;
  }
  .hero-title-line2 {
    margin-left: 0;
    color: var(--c-cream);
    -webkit-text-stroke: none;
  }
}

/* Ajuste de galería en móvil */
@media (max-width: 480px) {
  .gallery-img-wrap {
    width: 200px;
    height: 145px;
  }
}

/* Acceso al formulario desde móvil */
@media (max-width: 600px) {
  .form-section-grid {
    gap: var(--sp-8);
  }
  .contact-panel {
    padding: var(--sp-6);
  }
  .convenios-content {
    padding: var(--sp-8) var(--sp-6);
  }
}