/* Variables de color y medidas */
:root {
  --fondo: #eef6fb;
  --blanco: #ffffff;
  --marino: #16224a;
  --marino-suave: #24365e;
  --turquesa: #12b5a5;
  --coral: #ff6b5e;
  --texto: #2b3440;
  --texto-suave: #5b6b7c;
  --borde: #d7e5ee;
  --radio: 16px;
  --sombra: 0 6px 18px rgba(22, 34, 74, .10);
}

/* Estilos base */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: var(--fondo); color: var(--texto); line-height: 1.55; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: var(--marino); }
h1, h2, h3 { color: var(--marino); margin: 0 0 .5rem; }
.seccion { max-width: 1140px; margin: 0 auto; padding: 2.4rem 1.2rem; }
.seccion-intro { color: var(--texto-suave); }
.fondo-suave { background: #e3f0f7; border-radius: var(--radio); }

/* Botones */
.btn { display: inline-block; padding: .65rem 1.2rem; border-radius: 999px; font-weight: 600; }
.btn-principal { background: var(--marino); color: #fff; }
.btn-coral { background: var(--coral); color: #fff; }
.btn-claro { background: transparent; border: 2px solid var(--marino); color: var(--marino); }
.btn:hover { opacity: .9; }

/* Encabezado fijo */
.header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem; padding: .6rem 1.2rem; background: var(--blanco); box-shadow: var(--sombra); }
.logo { display: flex; align-items: center; gap: .55rem; }
.logo-texto { display: flex; flex-direction: column; font-weight: 800; font-size: 1.25rem; color: var(--marino); line-height: 1.1; }
.logo-texto small { font-weight: 500; font-size: .68rem; color: var(--turquesa); }
.nav { display: flex; gap: 1rem; margin-left: auto; }
.nav a { font-weight: 600; color: var(--texto); padding: .3rem .1rem; }
.nav a.activo, .nav a:hover { color: var(--turquesa); }
.header-acciones { display: flex; gap: .6rem; }
.btn-menu { display: none; margin-left: auto; font-size: 1.5rem; background: none; border: none; cursor: pointer; color: var(--marino); }

/* Galería principal */
.slider { position: relative; overflow: hidden; max-width: 1140px; margin: 1.2rem auto 0; border-radius: var(--radio); box-shadow: var(--sombra); }
.slides { display: flex; transition: transform .6s ease; }
.slide { min-width: 100%; position: relative; }
.slide img { width: 100%; height: 380px; object-fit: cover; }
.slide-texto { position: absolute; left: 2rem; bottom: 2rem; max-width: 480px; background: rgba(255,255,255,.92); padding: 1.2rem 1.4rem; border-radius: var(--radio); }
.slide-texto p { color: var(--texto-suave); margin: .2rem 0 1rem; }
.flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(22,34,74,.75); color: #fff; font-size: 1.5rem; cursor: pointer; }
.flecha-izq { left: .8rem; }
.flecha-der { right: .8rem; }
.puntos { position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%); display: flex; gap: .45rem; }
.puntos button { width: 11px; height: 11px; border-radius: 50%; border: none; background: rgba(255,255,255,.7); cursor: pointer; }
.puntos button.activo { background: var(--coral); }

/* Buscador */
.buscador { max-width: 760px; margin: 2rem auto 0; padding: 0 1.2rem; text-align: center; }
.buscador label { font-size: 1.25rem; font-weight: 700; color: var(--marino); }
.buscador input { width: 100%; margin-top: .7rem; padding: .9rem 1.1rem; font-size: 1rem; border: 2px solid var(--borde); border-radius: 999px; outline: none; }
.buscador input:focus { border-color: var(--turquesa); }
.buscador-ayuda { color: var(--texto-suave); font-size: .9rem; }

/* Accesos rápidos */
.accesos { max-width: 1140px; margin: 1.6rem auto 0; padding: 0 1.2rem; }
.accesos-lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.accesos-lista li { display: flex; }
.accesos-lista .tarjeta-acceso { width: 100%; }
.tarjeta-acceso { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.2rem; display: flex; flex-direction: column; gap: .25rem; color: var(--texto); }
.tarjeta-acceso span { font-size: 1.8rem; }
.tarjeta-acceso small { color: var(--texto-suave); }
.tarjeta-acceso:hover { transform: translateY(-3px); }

/* Tarjetas */
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; list-style: none; padding: 0; }
.rejilla > li { min-width: 0; display: flex; }
.rejilla > li > article { width: 100%; }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.2rem; }
.tarjeta p { color: var(--texto-suave); margin: .2rem 0 .8rem; }
.tarjeta-foto img, .tarjeta-noticia img { width: 100%; height: 170px; object-fit: cover; border-radius: 10px; margin-bottom: .8rem; }
.etiqueta { font-size: .8rem; font-weight: 700; color: var(--turquesa); text-transform: uppercase; }
.ver-mas { font-weight: 700; color: var(--turquesa); }
.tip-dia { background: var(--blanco); border-left: 6px solid var(--turquesa); border-radius: var(--radio); padding: 1rem 1.2rem; box-shadow: var(--sombra); }
.sin-resultados { color: var(--coral); font-weight: 600; }

/* Flujogramas */
.flujo { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1rem 0; }
.flujo li { background: var(--marino); color: #fff; padding: .7rem 1rem; border-radius: 999px; font-weight: 600; }
.flujo li:not(:last-child)::after { content: " →"; color: var(--turquesa); }

/* Fuentes consultadas */
.fuentes { line-height: 1.7; }
.fuentes a { color: var(--marino); text-decoration: underline; }
.credito-foto { color: var(--texto-suave); font-size: .9rem; }

/* Pie de página */
.footer { background: var(--marino); color: #dbe6f2; text-align: center; padding: 2.2rem 1.2rem; margin-top: 2rem; }
.footer-logo { font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0; }
.footer-eslogan { color: var(--turquesa); font-style: italic; margin: .2rem 0 1rem; }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.footer-nav a { color: #dbe6f2; }
.aviso { font-size: .9rem; opacity: .85; max-width: 680px; margin: 0 auto .5rem; }
.creditos { font-size: .85rem; opacity: .7; margin: 0; }

/* TV y pantallas grandes: 1440px o más */
@media (min-width: 1440px) {
  .seccion, .slider, .accesos { max-width: 1320px; } /* Más ancho útil en TV y monitores grandes */
  .slide img { height: 460px; } /* Galería más alta en pantallas grandes */
  body { font-size: 1.05rem; } /* Texto ligeramente mayor para leer desde lejos */
}

/* Laptop y tableta horizontal: 1024px o menos */
@media (max-width: 1024px) {
  .rejilla-4 { grid-template-columns: repeat(2, 1fr); } /* Tips en 2 columnas */
  .slide img { height: 340px; } /* Galería un poco más baja */
  .nav { gap: .7rem; } /* Menú más compacto */
}

/* Tableta vertical: 900px o menos */
@media (max-width: 900px) {
  .btn-menu { display: block; } /* Muestra el botón hamburguesa */
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--blanco); flex-direction: column; padding: 1rem 1.2rem; box-shadow: var(--sombra); } /* Menú desplegable oculto */
  .nav.abierto { display: flex; } /* Muestra el menú al abrirlo */
  .header-acciones { display: none; } /* Oculta los botones del encabezado */
  .accesos-lista { grid-template-columns: 1fr 1fr; } /* Accesos en 2 columnas */
  .rejilla { grid-template-columns: 1fr 1fr; } /* Tarjetas en 2 columnas */
  .slide img { height: 300px; }
  .slide-texto { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; } /* Texto de la galería a todo el ancho */
}

/* Tableta pequeña y celular grande: 768px o menos */
@media (max-width: 768px) {
  .seccion { padding: 1.8rem 1rem; } /* Menos aire lateral */
  .slide img { height: 280px; }
  .slide-texto { padding: 1rem; }
  .tarjeta-foto img, .tarjeta-noticia img { height: 150px; }
  .header { padding: .5rem 1rem; }
}

/* Celular: 600px o menos */
@media (max-width: 600px) {
  .accesos-lista { grid-template-columns: 1fr; } /* Todo apilado en una columna */
  .rejilla, .rejilla-4 { grid-template-columns: 1fr; } /* Tarjetas apiladas */
  .flujo { flex-direction: column; } /* Flujograma vertical */
  .flujo li:not(:last-child)::after { content: " ↓"; } /* Flecha hacia abajo */
  .slide img { height: 260px; }
  .btn { width: 100%; text-align: center; } /* Botones a todo el ancho */
  .flecha { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* Celular pequeño: 400px o menos */
@media (max-width: 400px) {
  .logo-texto { font-size: 1.05rem; } /* Nombre más compacto */
  .logo-texto small { font-size: .6rem; }
  .seccion { padding: 1.4rem .8rem; }
  .slide img { height: 230px; }
  .slide-texto { padding: .8rem; }
  .buscador label { font-size: 1.1rem; }
}

/* Celular en horizontal: pantalla baja */
@media (orientation: landscape) and (max-height: 500px) {
  .slide img { height: 240px; } /* Galería baja para que quepa el texto */
  .slide-texto { bottom: .8rem; }
}

/* Accesibilidad: reduce el movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .slides { transition: none; } /* Sin desplazamiento animado */
  .tarjeta-acceso:hover { transform: none; }
}

/* Impresión: solo el contenido, sin navegación */
@media print {
  .header-acciones, .btn-menu, .flecha, .puntos { display: none; }
  .slider { box-shadow: none; }
}