html { scroll-behavior: smooth; }
:root { --primary-color: #9E9C2F; --light-green-bg: #f5f5ea; --text-color: #333; --white: #fff; --border-color: #4f4e18; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: var(--light-green-bg); color: var(--text-color); min-height: 100vh; }

/* --- Navbar and Global Nav Styles --- */
.navbar { width: 100%; background-color: #5f5e1c; padding: 15px 5%; box-shadow: 0 2px 10px #5f5e1c; position: sticky; top: 0; z-index: 999; box-sizing: border-box; }
.nav-container { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.nav-logo { color: var(--white); text-decoration: none; font-weight: bold; font-size: 1.5em; }
.nav-links { display: flex; align-items: center; }
.nav-links > * { margin: 0 15px; } 
.nav-links a { color: var(--white); text-decoration: none; font-weight: 600; transition: opacity 0.3s ease; }
.nav-links a:hover { opacity: 0.8; }
.hamburger-menu { display: none; cursor: pointer; z-index: 1001; }
.hamburger-menu .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--white); transition: all 0.3s ease-in-out; }
.dropdown, .language-switcher { position: relative; display: inline-block; }
.dropbtn { cursor: pointer; }
.dropdown-content { display: none; position: absolute; background-color: #4f4e18; min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border-radius: 4px; overflow: hidden; }
.dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; margin: 0 !important; transition: background-color 0.3s ease; }
.dropdown-content a:hover { background-color: var(--primary-color); opacity: 1 !important; }
.dropdown:hover .dropdown-content, .language-switcher:hover .dropdown-content { display: block; }
.language-switcher .dropdown-content { right: 0; left: auto; min-width: 140px; }
.overlay { height: 100vh; width: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 998; display: none; transition: all 0.3s ease-in-out; }
.overlay.active { display: block; }

/* --- Footer Styles --- */
.footer { 
    background-color: #5f5e1c; 
    color: var(--white); 
    padding: 40px 5%; 
    box-sizing: border-box; 
}
.footer-container { 
    display: flex; 
    justify-content: space-around; 
    max-width: 1200px; 
    margin: 0 auto; 
    flex-wrap: wrap; 
    text-align: left;
}
.footer-logo { 
    font-size: 1.8em; 
    font-weight: 700; 
    margin-bottom: 20px; 
    width: 100%; 
    text-align: center; 
}
.footer-contact, .footer-links, .footer-social { 
    flex: 1 1 30%; 
    max-width: 300px; 
    min-width: 250px; 
    margin-bottom: 20px; 
} 
/* Reglas de listas y elementos del footer (contacto y navegación) */
.footer-contact ul, .footer-links ul, .footer-social ul { 
    list-style: none; 
    padding: 0; 
}
.footer-contact li, .footer-links li, .footer-social li { 
    margin-bottom: 10px; 
    display: flex; 
    align-items: flex-start; /* Alinea el texto con la parte superior del icono */
}
.footer-contact a, .footer-contact span, .footer-links a, .footer-social a { 
    color: var(--white); 
    text-decoration: none; 
    transition: opacity 0.3s ease; 
    line-height: 1.4;
}
.footer-contact a:hover, .footer-links a:hover, .footer-social a:hover { 
    opacity: 0.8; 
    color: var(--primary-color);
}

/* --- ESTILOS DE ÍCONOS SVG (General y Social) --- */
.footer-contact svg, .footer-social svg { 
    fill: var(--white); 
    stroke: currentColor; 
    width: 20px !important; /* FIJA el tamaño en 20x20px */
    height: 20px !important; /* FIJA el tamaño en 20x20px */
    margin-right: 10px; 
    flex-shrink: 0; 
    margin-top: 2px; /* Pequeño ajuste vertical para mejor alineación */
}

/* --- ESTILOS DE IMAGEN (Si decides usar el PNG) --- */
.footer-social .footer-icon-img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex-shrink: 0; 
    margin-top: 2px;
}

/* --- Estilos de la línea de Copyright --- */
.footer-copy { 
    width: 100%; 
    text-align: center; 
    border-top: 1px solid #777; 
    padding-top: 20px; 
    margin-top: 20px; 
    font-size: 0.8em; 
}

/* --- Media Queries --- */
@media (max-width: 768px) {
    /* Nav Mobile */
    .nav-links { position: fixed; left: -100%; top: 0; flex-direction: column; background-color: #4f4e18; width: 70%; max-width: 300px; height: 100vh; text-align: center; transition: 0.3s ease-in-out; padding-top: 4rem; box-shadow: 5px 0 15px rgba(0,0,0,0.2); }
    .nav-links.active { left: 0; }
    .nav-links > * { margin: 1.2rem 0; }
    .nav-links a { font-size: 1.2rem; }
    .dropdown-content, .language-switcher .dropdown-content { position: static; display: block; background-color: rgba(0,0,0,0.2); box-shadow: none; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
    .dropdown-content a, .language-switcher .dropdown-content a { color: #ccc; padding: 12px; text-align: center; font-size: 1rem; }
    .hamburger-menu { display: block; }
    .hamburger-menu.active .bar:nth-child(2) { opacity: 0; }
    .hamburger-menu.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger-menu.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    /* Footer Mobile */
    .footer-container { flex-direction: column; }
    .footer-contact, .footer-links, .footer-social { min-width: 100%; }
}