/* =============================
   GLOBAL.CSS
   Se aplica a TODAS las páginas
   ============================= */

/* Reset básico para uniformidad */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fuente y estilo general */
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background-color: #fff;
  color: #333;
}

/* Encabezados */
h1, h2, h3, h4, h5 {
  font-weight: bold;
  color: #222;
}

/* Enlaces */
a {
  text-decoration: none;
  color: #0066cc;
}
a:hover {
  color: #004080;
}

/* Imágenes responsivas */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* navegación #004080; borre este codigo porque me greaba una recla de sombra background */
nav {
  background:
  padding: 10px 0;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
}
nav ul li {
  margin: 0 15px;
}
nav ul li a {
  color: #fff;
  font-weight: bold;
}

/* Footer */
footer {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  margin-top: 30px;
}

/* =============================
   RESPONSIVE
   ============================= */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: center;
  }
  .container {
    width: 95%;
  }
}

/* ——— desde aui agrague otra linea al css  Reset para móviles: sin scroll lateral ——— */
html, body { width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }

/* ——— Medios responsivos ——— */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; display: block; }

/* ——— Contenedores y secciones ——— */
.container, .wrap, main, section, header, footer { max-width: 100%; }
section, .hero, .banner { max-width: 100vw; overflow-x: hidden; }

/* ——— Grids y columnas ——— */
.row { display: flex; flex-wrap: wrap; }
.col { flex: 1 1 0; min-width: 0; } /* evita desbordes */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 1024px){ .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .grid { grid-template-columns: 1fr; } }

/* ——— Tablas y textos largos ——— */
table { width: 100%; display: block; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-wrap: break-word; }
.long-text, a { word-break: break-word; }

/* ——— Iframes responsivos (YouTube, mapas) ——— */
.embed { position: relative; width: 100%; aspect-ratio: 16/9; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ——— “Culpables” comunes de scroll horizontal ——— */
/* Si tienes algo con width fijo, neutralízalo: */
[class*="container"], .container, .content, .hero, .banner {
  width: 100%; /* NO width:1200px */
  max-width: 1200px; /* si quieres límite */
  margin-inline: auto;
  padding-inline: 16px;
}
/* Evita márgenes negativos que empujan el layout */
[class*="row"], .row { margin-inline: 0 !important; }