/* Definir paleta de colores rojizos usando Open Props */
        :root {
          --brand-primary: var(--red-6);
          --brand-primary-dark: var(--red-8);
          --brand-secondary: var(--red-4);
          --brand-accent: var(--orange-5);
          --brand-light-bg: var(--red-0);
          --brand-text-on-light: var(--gray-8);
          --brand-text-on-dark: var(--gray-1);
          --brand-heading-color: var(--red-7);

          /* Sobrescribir algunas props globales si es necesario */
          --font-sans: "Inter", sans-serif; /* Usar una fuente limpia */
          --link-color: var(--brand-primary-dark);
      }

      /* Estilos generales del body */
      body {
          font-family: var(--font-sans);
          color: var(--brand-text-on-light);
          line-height: var(--font-lineheight-3);
          background-color: var(--gray-0); /* Fondo principal claro */
          margin: 0;
      }

      /* Contenedor principal para centrar contenido */
      .container {
          max-width: var(--size-xl); /* Ancho máximo del contenido */
          margin-inline: auto; /* Centrar horizontalmente */
          padding-inline: var(--size-5); /* Espaciado lateral */
      }

      /* Encabezado */
      .main-header {
          background-color: var(--gray-0);
          padding-block: var(--size-4);
          border-bottom: var(--border-size-1) solid var(--gray-2);
      }

      .main-header .container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap; /* Para pantallas pequeñas */
      }

      .logo {
          font-size: var(--font-size-4);
          font-weight: var(--font-weight-7);
          color: var(--brand-primary-dark);
          text-decoration: none;
      }

      .main-nav ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          gap: var(--size-5); /* Espacio entre enlaces */
          flex-wrap: wrap; /* Para pantallas pequeñas */
      }

      .main-nav a {
          text-decoration: none;
          color: var(--brand-text-on-light);
          font-weight: var(--font-weight-5);
          transition: color 0.2s ease;
      }

      .main-nav a:hover,
      .main-nav a:focus {
          color: var(--brand-primary);
      }

      @media (max-width: 768px){
        .main-nav{
            display: none;
        }
      }
        
      /* Sección Hero (similar a la imagen) */
      .hero-section {
          background-color: var(--brand-light-bg); /* Fondo rojo muy claro */
          padding-block: var(--size-9);
          text-align: center;
          position: relative; /* Para el elemento decorativo */
          overflow: hidden; /* Para que el círculo no se salga */
      }

      .hero-section h1 {
          color: var(--brand-heading-color);
          font-size: var(--font-size-fluid-3);
          font-weight: var(--font-weight-8);
          max-width: var(--size-lg);
          margin-inline: auto;
          margin-bottom: var(--size-4);
      }

      .hero-section p {
          font-size: var(--font-size-fluid-1);
          color: var(--brand-text-on-light);
          max-width: var(--size-md);
          margin-inline: auto;
      }

      /* Elemento decorativo circular (emulando la imagen) */
      .hero-decoration {
          position: absolute;
          top: 50%;
          right: 5%;
          transform: translateY(-50%);
          width: var(--size-13);
          height: var(--size-13);
          border-radius: 50%;
          border: var(--size-3) solid transparent; /* Borde grueso */
          /* Usar conic-gradient para múltiples colores */
          background: conic-gradient(
              var(--brand-primary) 0deg 120deg,
              var(--brand-accent) 120deg 240deg,
              var(--brand-secondary) 240deg 360deg
          ) border-box; /* Aplicar gradiente al borde */
          mask: radial-gradient(transparent calc(50% - var(--size-3)), white 50%); /* Crear el anillo */
          opacity: 0.7;
          display: none; /* Oculto por defecto */
      }

      /* Mostrar decoración en pantallas más grandes */
      @media (min-width: 768px) {
          .hero-decoration {
              display: block;
          }
          .hero-section {
               text-align: left; /* Alinear texto a la izquierda en pantallas grandes */
          }
           .hero-section .container {
              position: relative; /* Para posicionar texto respecto a la decoración */
              z-index: 1;
          }
           .hero-section h1, .hero-section p {
               margin-inline: 0; /* Quitar centrado automático */
               max-width: 60%; /* Limitar ancho para dejar espacio */
          }
          p {
            padding: 0 2rem;
            font-size: 1.2rem;
          }
          ul {
            margin: 0 4rem;
            font-size: 1.1rem;
          }
          #description {
            padding: 0;
          }
      }


      /* Secciones de contenido */
      .content-section {
          padding-block: var(--size-8);
      }

      .content-section h2 {
          color: var(--brand-heading-color);
          font-size: var(--font-size-fluid-2);
          font-weight: var(--font-weight-7);
          margin-bottom: var(--size-6);
          text-align: center; /* Centrar títulos de sección */
          border-bottom: var(--border-size-2) solid var(--brand-secondary);
          padding-bottom: var(--size-3);
          display: inline-block; /* Para que el borde no ocupe todo el ancho */
          position: relative;
          left: 50%;
          transform: translateX(-50%);
      }

       .content-section h3 {
          color: var(--brand-primary-dark);
          font-size: var(--font-size-fluid-1);
          font-weight: var(--font-weight-6);
          margin-top: var(--size-6);
          margin-bottom: var(--size-3);
       }

      .content-section ul {
          list-style: none; /* Quitar viñetas por defecto */
          padding-left: 0;
      }

      .content-section ul li {
          position: relative;
          padding-left: var(--size-5); /* Espacio para el icono/viñeta */
          margin-bottom: var(--size-3);
      }

      /* Viñeta personalizada con color de marca */
      .content-section ul li::before {
          content: '✓'; /* O usar un icono SVG */
          position: absolute;
          left: 0;
          top: 2px; /* Ajuste vertical */
          color: var(--brand-primary);
          font-weight: var(--font-weight-7);
      }

      /* Sección Parallax */
      .parallax-section {
          /* Imagen de fondo (reemplazar con una adecuada) */
          background-image: url('https://placehold.co/1920x800/BF4040/FFFFFF?text=Impacto+Social');
          background-attachment: fixed; /* Efecto Parallax */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          padding-block: var(--size-11);
          color: var(--brand-text-on-dark);
          text-align: center;
          position: relative; /* Para el overlay */
      }

      /* Overlay oscuro para mejorar legibilidad del texto */
      .parallax-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.5); /* Overlay semitransparente */
          z-index: 1;
      }

      .parallax-section .container {
          position: relative; /* Para que el contenido esté sobre el overlay */
          z-index: 2;
      }

      .parallax-section h2 {
          font-size: var(--font-size-fluid-3);
          font-weight: var(--font-weight-8);
          margin-bottom: var(--size-3);
          color: var(--gray-0); /* Texto blanco sobre fondo oscuro */
          border: none; /* Sin borde en parallax */
          text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
      }
       .parallax-section p {
          font-size: var(--font-size-fluid-1);
          font-weight: var(--font-weight-4);
          max-width: var(--size-lg);
          margin-inline: auto;
          color: var(--gray-1); /* Texto gris claro */
       }

      /* Estilos específicos para diferentes secciones parallax */
      #parallax-1 { background-image: url('desarrollo.jpeg'); }
      #parallax-2 { background-image: url('procesos.jpeg'); }
      #parallax-3 { background-image: url('manos.png'); }


      /* Sección de Alianzas */
      .alliances-section {
          background-color: var(--brand-light-bg); /* Fondo rojo claro */
      }

        /* Footer */
        .main-footer {
            background-color: var(--gray-8); /* Fondo oscuro */
            color: var(--gray-3);
            padding-block: var(--size-6);
            text-align: center;
            font-size: var(--font-size-0);
            margin-top: auto; /* Empuja el footer hacia abajo */
        }

        .main-footer .container {
            display: flex;
            flex-direction: column; /* Apilar elementos verticalmente */
            gap: var(--size-4); /* Espacio entre elementos del footer */
        }

        .footer-contact p {
            margin-block: var(--size-1); /* Espacio vertical pequeño entre líneas de contacto */
            line-height: var(--font-lineheight-2);
        }

        .footer-contact a {
            color: var(--gray-1); /* Enlaces claros */
            text-decoration: none; /* Quitar subrayado por defecto */
            transition: color 0.2s ease;
        }
         .footer-contact a:hover {
            color: var(--brand-secondary); /* Color al pasar el mouse */
            text-decoration: underline; /* Subrayado al pasar el mouse */
        }

        .footer-credits p {
            margin: 0; /* Quitar margen por defecto de párrafos en créditos */
        }
        .footer-credits a {
            color: var(--gray-1);
            text-decoration: underline;
        }
        .footer-credits a:hover {
            color: var(--brand-secondary);
        }