/**
 * ESTILOS COMUNES PARA TODAS LAS PÁGINAS INTERNAS
 * Base CSS que se aplica a todas las subpáginas del sitio
 */

/* ============================================================================
   LAYOUT GENERAL
   ============================================================================ */

#contenido-principal {
  min-height: auto;
}

/* Hero Sections - Estilo base */
.hero-section,
.hero-atencion,
.hero-quienes-somos,
.hero-programas,
.hero-normatividad,
.hero-noticias,
.hero-comunidad,
.hero-multimedios,
.hero-contacto {
  background: linear-gradient(135deg, #0b6c3a 0%, #0a5a30 100%);
  color: white;
  padding: 4rem 0 3rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.hero-section::before,
.hero-atencion::before,
.hero-quienes-somos::before,
.hero-programas::before,
.hero-normatividad::before,
.hero-noticias::before,
.hero-comunidad::before,
.hero-multimedios::before,
.hero-contacto::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.05)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
  background-size: cover;
  opacity: 0.3;
}

.hero-content,
.hero-section .container,
.hero-atencion .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

.hero-section h1,
.hero-atencion h1,
.hero-quienes-somos h1,
.hero-programas h1,
.hero-normatividad h1,
.hero-noticias h1,
.hero-comunidad h1,
.hero-multimedios h1,
.hero-contacto h1 {
  font-size: 2.75rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  line-height: 1.2;
}

.hero-section p,
.hero-atencion p,
.hero-quienes-somos p,
.hero-programas p,
.hero-normatividad p,
.hero-noticias p,
.hero-comunidad p,
.hero-multimedios p,
.hero-contacto p {
  font-size: 1.2rem;
  opacity: 0.95;
  font-weight: 300;
  margin: 0;
}

/* ============================================================================
   SECCIONES DE CONTENIDO
   ============================================================================ */

.content-section,
.seccion-atencion,
.seccion-quienes-somos,
.seccion-programas,
.seccion-normatividad,
.seccion-noticias,
.seccion-comunidad,
.seccion-multimedios,
.seccion-contacto {
  padding: 4rem 0;
  background: #f8f9fa;
}

.content-section .container,
.seccion-atencion .container,
.seccion-quienes-somos .container,
.seccion-programas .container,
.seccion-normatividad .container,
.seccion-noticias .container,
.seccion-comunidad .container,
.seccion-multimedios .container,
.seccion-contacto .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Secciones con fondo blanco alternadas */
.content-section.bg-white,
.seccion-white {
  background: white;
}

/* ============================================================================
   GRIDS DE TARJETAS
   ============================================================================ */

.cards-grid,
.atencion-grid,
.programas-grid,
.noticias-grid,
.recursos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Tarjetas base */
.card,
.atencion-card,
.programa-card,
.noticia-card,
.recurso-card {
  background: white;
  border-radius: 12px;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card:hover,
.atencion-card:hover,
.programa-card:hover,
.noticia-card:hover,
.recurso-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(11, 108, 58, 0.15);
  border-color: #0b6c3a;
}

/* Iconos en tarjetas */
.card-icon,
.atencion-icon,
.programa-icon,
.noticia-icon,
.recurso-icon {
  color: #0b6c3a;
  margin-bottom: 1.5rem;
  text-align: center;
}

.card-icon svg,
.atencion-icon svg,
.programa-icon svg,
.noticia-icon svg,
.recurso-icon svg {
  width: 64px;
  height: 64px;
}

/* Títulos en tarjetas */
.card h3,
.atencion-card h3,
.programa-card h3,
.noticia-card h3,
.recurso-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Texto en tarjetas */
.card p,
.atencion-card p,
.programa-card p,
.noticia-card p,
.recurso-card p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

/* ============================================================================
   BOTONES
   ============================================================================ */

.btn,
.btn-primary,
.btn-atencion,
.btn-programa,
.btn-noticia,
.btn-recurso {
  display: inline-block;
  background: linear-gradient(135deg, #0b6c3a 0%, #0a5a30 100%);
  color: white;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(11, 108, 58, 0.2);
  border: none;
  cursor: pointer;
  text-align: center;
}

.btn:hover,
.btn-primary:hover,
.btn-atencion:hover,
.btn-programa:hover,
.btn-noticia:hover,
.btn-recurso:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 108, 58, 0.3);
  background: linear-gradient(135deg, #0a5a30 0%, #084721 100%);
}

.btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #5a6268 0%, #4e555b 100%);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-outline {
  background: transparent;
  border: 2px solid #0b6c3a;
  color: #0b6c3a;
  box-shadow: none;
}

.btn-outline:hover {
  background: #0b6c3a;
  color: white;
}

/* ============================================================================
   TÍTULOS DE SECCIÓN
   ============================================================================ */

.section-title,
h2.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  padding-bottom: 1rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #0b6c3a 0%, #0a5a30 100%);
  border-radius: 2px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Tablet: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section,
  .hero-atencion,
  .hero-quienes-somos,
  .hero-programas,
  .hero-normatividad,
  .hero-noticias,
  .hero-comunidad,
  .hero-multimedios,
  .hero-contacto {
    padding: 3.5rem 0 2.5rem;
  }

  .hero-section h1,
  .hero-atencion h1,
  .hero-quienes-somos h1,
  .hero-programas h1,
  .hero-normatividad h1,
  .hero-noticias h1,
  .hero-comunidad h1,
  .hero-multimedios h1,
  .hero-contacto h1 {
    font-size: 2.5rem;
  }

  .hero-section p,
  .hero-atencion p,
  .hero-quienes-somos p,
  .hero-programas p,
  .hero-normatividad p,
  .hero-noticias p,
  .hero-comunidad p,
  .hero-multimedios p,
  .hero-contacto p {
    font-size: 1.1rem;
  }

  .content-section,
  .seccion-atencion,
  .seccion-quienes-somos,
  .seccion-programas,
  .seccion-normatividad,
  .seccion-noticias,
  .seccion-comunidad,
  .seccion-multimedios,
  .seccion-contacto {
    padding: 3rem 0;
  }

  .cards-grid,
  .atencion-grid,
  .programas-grid,
  .noticias-grid,
  .recursos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  .card,
  .atencion-card,
  .programa-card,
  .noticia-card,
  .recurso-card {
    padding: 2.25rem 1.75rem;
  }

  .section-title,
  h2.section-title {
    font-size: 1.85rem;
  }
}

/* Mobile: < 768px */
@media (max-width: 768px) {
  .hero-section,
  .hero-atencion,
  .hero-quienes-somos,
  .hero-programas,
  .hero-normatividad,
  .hero-noticias,
  .hero-comunidad,
  .hero-multimedios,
  .hero-contacto {
    padding: 3rem 0 2rem;
  }

  .hero-section h1,
  .hero-atencion h1,
  .hero-quienes-somos h1,
  .hero-programas h1,
  .hero-normatividad h1,
  .hero-noticias h1,
  .hero-comunidad h1,
  .hero-multimedios h1,
  .hero-contacto h1 {
    font-size: 2rem;
  }

  .hero-section p,
  .hero-atencion p,
  .hero-quienes-somos p,
  .hero-programas p,
  .hero-normatividad p,
  .hero-noticias p,
  .hero-comunidad p,
  .hero-multimedios p,
  .hero-contacto p {
    font-size: 1rem;
  }

  .hero-content,
  .hero-section .container,
  .hero-atencion .container {
    padding: 0 1rem;
  }

  .content-section,
  .seccion-atencion,
  .seccion-quienes-somos,
  .seccion-programas,
  .seccion-normatividad,
  .seccion-noticias,
  .seccion-comunidad,
  .seccion-multimedios,
  .seccion-contacto {
    padding: 2.5rem 0;
  }

  .content-section .container,
  .seccion-atencion .container,
  .seccion-quienes-somos .container,
  .seccion-programas .container,
  .seccion-normatividad .container,
  .seccion-noticias .container,
  .seccion-comunidad .container,
  .seccion-multimedios .container,
  .seccion-contacto .container {
    padding: 0 1rem;
  }

  .cards-grid,
  .atencion-grid,
  .programas-grid,
  .noticias-grid,
  .recursos-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .card,
  .atencion-card,
  .programa-card,
  .noticia-card,
  .recurso-card {
    padding: 2rem 1.5rem;
  }

  .section-title,
  h2.section-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .card h3,
  .atencion-card h3,
  .programa-card h3,
  .noticia-card h3,
  .recurso-card h3 {
    font-size: 1.15rem;
  }

  .btn,
  .btn-primary,
  .btn-atencion,
  .btn-programa,
  .btn-noticia,
  .btn-recurso {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    min-height: 44px; /* Touch target mínimo */
    width: 100%;
  }

  .hero-section h1,
  .hero-atencion h1,
  .hero-quienes-somos h1,
  .hero-programas h1,
  .hero-normatividad h1,
  .hero-noticias h1,
  .hero-comunidad h1,
  .hero-multimedios h1,
  .hero-contacto h1 {
    font-size: 1.75rem;
  }

  .section-title,
  h2.section-title {
    font-size: 1.5rem;
  }
}

/* Asegurar que las imágenes sean responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Asegurar que los contenedores no se desborden */
.container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}