/* --- style.css (Versión FINAL y CORREGIDA V3) --- */

/* Base Styles */
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#04192f;color:white;}
a{text-decoration:none; color: #ccc; transition: color 0.3s;}
a:hover{color: white;}

/* Header Styles */
.site-header{
    /* Fijo y sobre el contenido */
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:15px 40px; 
    background: #04192f; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.logo img{max-height:40px;height:auto;width:auto;display:block;}
.menu a{margin:0 18px;color:white;text-decoration:none;font-weight:500;white-space:nowrap; transition: color 0.3s;}
.lang-switch{background:#04192f;border:1px solid white;border-radius:25px;padding:8px 18px;color:white;cursor:pointer;white-space:nowrap;font-size:14px; transition: background 0.3s;}

/* Hero Section Styles (Landing Page) */
.hero{
    padding-top: 150px; 
    text-align:center;
    background:linear-gradient(180deg,#05254a,#04192f); 
    padding-bottom:100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 85vh; 
    position: relative; 
    z-index: 0; 
}
.hero-main {
    max-width: 180px;
    width: 100%; /* Asegura que ocupe el espacio definido */
    height: auto;
    margin-bottom: 30px;
    display: block; /* Evita problemas de alineación */
}

/* Fuerza a que el tamaño de fuente sea consistente */
html {
    -webkit-text-size-adjust: 100%; 
}
.hero-title, .hero-sub, .cta {
    position: relative;
    z-index: 10; 
    color: white; 
}
.hero-title{font-size:48px;font-weight:700;margin-bottom:15px;max-width:900px;padding:0 20px;}
.hero-sub{max-width:650px;margin:0 auto 40px;font-size:20px;opacity:0.85;padding:0 20px;line-height: 1.5;}
.cta{display:inline-block;background:white;color:#04192f;padding:12px 28px;border-radius:25px;font-weight:bold;text-decoration:none;transition: background 0.3s;}

/* Legal Pages and Contact Page (Main Content) */
.main-content {
    /* CLAVE: Ajuste a 120px para resolver el problema de corte en todas las páginas de contenido */
    padding-top: 120px; 
    padding-bottom: 50px;
    min-height: 70vh; 
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.container.narrow {
    max-width: 800px; 
}
.main-content h1 {
    font-size: 36px;
    color: #fff;
    margin-bottom: 20px;
    padding-top: 20px;
}
.main-content h2 {
    font-size: 24px;
    color: #ccc;
    margin-top: 30px;
    border-bottom: 1px solid #05254a;
    padding-bottom: 5px;
}
.main-content p, .main-content ul li {
    line-height: 1.6;
    color: #ccc;
    font-size: 16px;
}

/* --- Form Styles for contact.html --- */
.contact-form {
    margin-top: 30px;
    padding: 30px;
    background: #05254a;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: white;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #4a6fa5;
    border-radius: 4px;
    box-sizing: border-box;
    background: #10385e; 
    color: white; 
    font-size: 16px;
    resize: vertical; 
}

.contact-form textarea {
    min-height: 150px;
}

.contact-form .cta {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.privacy-note {
    font-size: 14px;
    color: #ccc;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.4;
}
.privacy-note a {
    color: #fff;
    text-decoration: underline;
}

/* Footer Styles (Unificado en todas las páginas) */
.site-footer {
    background: #04192f;
    color: #bbb;
    padding: 30px 40px;
    text-align: center;
    border-top: 1px solid #05254a;
    font-size: 14px;
}
.footer-title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    color: white;
}
.footer-content p {
    margin: 5px 0;
    line-height: 1.4;
}
.footer-copyright {
    margin-top: 20px !important;
    font-size: 12px;
    opacity: 0.7;
}

/* --- Media Queries (Responsive) --- */
@media (max-width: 768px) {
    .site-header {padding: 10px 20px; flex-wrap: wrap; justify-content: center; gap: 10px;}
    .logo {flex-basis: 100%; text-align: center; margin-bottom: 10px;}
    .menu {order: 3; flex-basis: 100%; display: flex; justify-content: center; margin-top: 5px;}
    .menu a {margin: 0 6px; font-size: 13px;}
    .lang-switch {order: 2; font-size: 12px; padding: 6px 14px;}
    
    /* Ajuste más grande en mobile para evitar el corte cuando el header se envuelve */
    .main-content {
        padding-top: 150px; 
    }
    
    .hero {padding-top: 180px; min-height: auto;}
    .hero-title {font-size: 32px;}
    .hero-sub {font-size: 16px;}
    .site-footer {padding: 20px;}
    .contact-form {padding: 20px;}
}
@media (max-width: 480px) {
    .menu a {display: block; margin: 5px 0;}
    .menu {display: block; text-align: center;}
}