:root {
            --color-principal: #82AB34; /* Azul oscuro */
            --color-secundario: #714c2f; /* Verde menta suave */
            --texto-oscuro: #333;
            --blanco: #ffffff;
            --link: blueviolet;
        }        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'playwrite';
        }
        body {
            line-height: 1.6;
            color: var(--texto-oscuro);
        }

        img {
            max-width: 100%;
            display: block;
            border-radius: 8px;
        }
        html {
            /* Esto hace que el scroll sea suave */
            scroll-behavior: smooth;
            
            /* AJUSTA ESTE VALOR: Debe ser igual (o un poco más) 
            a la altura de tu header. 
            Si tu header mide 80px, pon 80px o 100px */
            scroll-padding-top: 200px;
        }

/*--------- ENCABEZADO (HEADER) -----------*/
        header {
            background-image: linear-gradient(to right, #301c0e, #53341d, #714c2f);
            background-size: cover;   /* Cubre todo el header */
            background-position: center; /* Centra la imagen */
            background-repeat: no-repeat;           
            color: var(--blanco);
            padding: 1rem;
            text-align: center;
            position: sticky; /* Se queda fijo arriba al bajar */
            top: 0;
            z-index: 100;                  
        }
        .header-container{
            display: flex;
            flex-direction: row;
            align-items: center;/* Centra verticalmente */
            justify-content: center;/* Centra horizontalmente en la pantalla */
            gap: 0.3rem; /* Espacio entre el logo y el texto */
        }
        .logo{
            display: flex;
            justify-content: left; /* Centra horizontalmente */
            height: 6.5rem;  
            width: 10.5rem; /* Mantiene la proporción original del logo */ 
        }

        /* Este contenedor alinea la imagen y el texto horizontalmente */
        .header-title {
            display: flex;
            flex-direction: column;
            align-items: center;     /* Centra verticalmente */
            justify-content: center; /* Centra horizontalmente en la pantalla */
            gap: 0.1rem;               /* Espacio entre el logo y el texto */
            margin-bottom: 1rem;     /* Espacio antes del menú */            
        }
        .header-title h2 {
           font-size: 1.7rem;
           
            /* Degradado de Blanco sólido a Transparente (o gris claro) */
            background: linear-gradient(to bottom, #82AB34 30%, rgba(255, 255, 255, 0.2));
            
            /* Recorta el fondo con la forma del texto */
            -webkit-background-clip: text;
            background-clip: text;
            
            /* Hace el texto transparente para mostrar el degradado */
            color: transparent;
            
            /* Mantenemos una sombra para que se lea bien aunque se difumine */
            filter: drop-shadow(0px 8px 2px rgba(0, 0, 0, 0.8));
        }        

        /* Controla el tamaño del logo para que no se vea gigante */
        
        
        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 10px;
            flex-wrap: wrap;
            padding-bottom: 10px; /* Un poco de aire abajo */
        }

        nav a {
            background-color: #82AB34;
            background: linear-gradient(to bottom, #82AB34 30%, rgba(5, 207, 15, 0.2));
            color: var(--blanco);
            text-decoration: none;
            font-weight: bold;
            font-size: 0.9rem;
            padding: 5px 10px; /* Aumenta el área de toque del dedo */
            border-radius: 15px; /* Opcional: bordes suaves al pasar el dedo */
        }
        nav a:active {
            background-color: rgba(255,255,255,0.2);
        }
        nav a:hover {
            background-color: rgba(255,255,255,0.2);
        }
        .logo-header {
            
            display: flex;
            justify-content: center; /* Centra horizontalmente */            
        }
/*-----------ESTILO PARA TEXTO DE LAS SECCIONES-----------------*/      
        .section-title {
            text-align: center;
            color: var(--color-principal);
            margin-bottom: 0.5rem;
            font-size: 2rem;
            text-transform: uppercase;
        }  

        .section-subtitle {
            text-align: left;
            color: #666;
            margin-block: 1rem;
            font-style: italic;
        }
        .section-text {
            text-align: justify;
            color: var(--texto-oscuro);
            font-size: 1.1rem;            
            max-width: 800px; /* Ancho máximo para mejorar la legibilidad */
            margin: 0 auto; /* Centra el texto horizontalmente */         
        }
        /*-----------SECCIONES-----------------*/
        .sections{
            padding: 1rem;
        }
        .imagenes{
            display: flex;
            flex-direction: column;            
            max-width: 800px; /* Ancho máximo para mejorar la legibilidad */
            align-items: center; /* Centra verticalmente */             
            margin: 0 auto; /* Centra el texto horizontalmente */             
            gap: 2rem;             
        }