:root {
    --azul-claro: #b7dff3;
    --azul-principal: #0077b6;
    --azul-oscuro: #023e8a;
    --azul-medio: #2196f3;
    --gris-suave: #f4f9fb;
    --blanco: #ffffff;
    --borde-suave: #d6e9f5;
    --sombra: 0 6px 20px rgba(0, 119, 182, 0.1);
    --sombra-fuerte: 0 6px 30px rgba(0, 119, 182, 0.15);
  }

  body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--gris-suave);
    color: #333;
  }

  .titulo-texto {
    color: var(--azul-principal);
  }

  .hero-header {
    background: url('../img/portada1.svg') center/cover no-repeat;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
  }

  @media (min-width: 768px) {
  .hero-header {
    background-position: center 75%;
  }
}

  .hero-text-container {
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    max-width: 420px;
    margin: auto;
  }

  .section-title {
    color: var(--azul-principal);
    font-weight: 700;
  }

  .bg-metrics {
    background-color: var(--azul-claro);
  }

  .metric-box {
    background: white;
    border: 8px solid var(--borde-suave);
    border-radius: 16px;
    box-shadow: var(--sombra);
    padding: 0.8rem;
    transition: transform 0.2s ease;
  }

  .metric-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte);
  }

  .metric-box h2 {
    font-size: 2rem;
    color: var(--azul-principal);
    font-weight: bold;
  }

  .metric-box p {
    font-weight: 600;
  }

  #resumen p {
    max-width: 600px;
  }

  #resumen p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #333;
}

#resumen ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#resumen ul li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 500;
  color: #023e8a;
}

#resumen ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--azul-principal);
  font-weight: bold;
}

  .pdf-card {
    background: var(--blanco);
    border: 2px solid var(--borde-suave);
    border-radius: 16px;
    padding: 2rem 1rem;
    transition: all 0.3s ease;
    box-shadow: var(--sombra);
  }

  .pdf-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte);
  }

  .pdf-card img {
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
  }

  .bg-pdf-section {
    background: linear-gradient(to bottom, #ffffff 0%, #dceefb 100%);
  }

  .contraportada-bg {
    background-image: url('../img/contraportada1.svg');
    background-size: cover;
    background-position: top center;
    min-height: 500px;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    width: 100%;
  }

  .resumen-superpuesto {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background-color: var(--azul-claro); /* fallback */
}

.resumen-superpuesto .img-fondo {
  background-image: url('../img/contraportada1.svg');
  background-size: cover;
  background-position: center;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.contenido-superpuesto {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 0;
}

.caja-texto {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: var(--sombra-fuerte);
  max-width: 720px;
  padding: 2rem;
}

a, #institucional p {
    color: var(--azul-principal);
    text-decoration: none;
    font-weight: bold;
  }

  #institucional p {
    text-align: left;
  }

@media (max-width: 767.98px) {
  .contenido-superpuesto {
    justify-content: center;
    padding: 2rem 1rem;
  }

  .caja-texto {
    width: 100%;
    padding: 1.5rem;
  }

  #institucional p {
    text-align: center;
  }
}

.logo-clima {
  max-height: 70px;
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  padding: 0 10px;
}



  footer {
    background: var(--azul-oscuro);
  }

  footer a {
    color: #b2dfdb;
  }

  footer a:hover {
    color: #e0f2f1;
    text-decoration: underline;
  }

  @keyframes scrollGradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.bg-metrics.animate-gradient {
  background: linear-gradient(60deg, #b7dff3 70%, #6ab4e2 100%);
  background-size: 200% 100%;
  animation: scrollGradient 1s ease forwards;
}