/* =========================================================
   RESET REAL DEL NAVEGADOR
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* altura REAL del documento */
html{
  height:100%;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}


/* layout vertical estable */
body{
  min-height:100%;
  display:flex;
  flex-direction:column;

  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
  color:#1f2937;
  background:#ffffff;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}


/* el contenido ocupa el espacio disponible */
.site-main{
  flex:1 0 auto;
}

/* el footer nunca flota */
footer{
  margin-top:auto;
}


/* Evita imágenes deformadas */
img,
picture,
video,
canvas,
svg{
  display:block;
  max-width:100%;
}

/* Inputs consistentes */
input,
button,
textarea,
select{
  font:inherit;
  color:inherit;
}

/* Links */
a{
  text-decoration:none;
  color:inherit;
}

/* Listas limpias */
ul,ol{
  list-style:none;
}

/* =========================================================
   ESTRUCTURA DEL DOCUMENTO (CRÍTICO PARA FOOTER)
   ========================================================= */

/* el contenido real vive aquí */
main{
  flex:1 0 auto;
  width:100%;
}

/* el footer siempre abajo */
footer{
  margin-top:auto;
}

/* evita scroll horizontal fantasma */
body{
  overflow-x:hidden;
}

/* =========================================================
   CONTENEDORES GENERALES
   ========================================================= */

.container,
.wrapper{
  width:min(1200px,100%);
  margin-inline:auto;
  padding-inline:20px;
}

.text-center{
  text-align:center;
}

/* =========================================================
   TIPOGRAFÍA BASE
   ========================================================= */

section{
  padding:80px 20px;
}

.subtitle{
  font-size:14px;
  color:#0284c7;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
}

section h2{
  font-size:clamp(28px,4vw,36px);
  margin-bottom:20px;
}

section p{
  max-width:800px;
  margin:0 auto 40px auto;
  color:#475569;
  font-size:clamp(14px,2vw,16px);
}

/* =========================================================
   BOTONES BASE DEL SISTEMA
   ========================================================= */

.btn-primary{
  display:inline-block;
  padding:12px 26px;
  background:#0f172a;
  color:#fff;
  border-radius:10px;
  font-weight:600;
  transition:background .25s ease, transform .2s ease;
}

.btn-primary:hover{
  background:#020617;
  transform:translateY(-2px);
}

.btn-secondary{
  display:inline-block;
  padding:12px 26px;
  border:2px solid #fff;
  color:#fff;
  border-radius:10px;
  font-weight:600;
  transition:all .25s ease;
}

.btn-secondary:hover{
  background:#fff;
  color:#020617;
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}
.devtools-lock *{
  visibility:hidden !important;
}

.devtools-lock,
.devtools-lock *{
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  user-select:none !important;
  pointer-events:auto;
}

/* =========================================================
   ACCESIBILIDAD (GLOBAL REAL)
   ========================================================= */
   
   /* 🔹 SECCIÓN 9 — ANIMACIONES */
   /* @keyframes navDrop {
     from {
       opacity: 0;
       transform: translateY(-8px) scale(.98);
     }
   
     to {
       opacity: 1;
       transform: translateY(0) scale(1);
     }
   }

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
} */