/* ==========================================================================
   assets/css/landing.css
   Versión Final Unificada: Simetría, Centrado y Diseño Minimalista
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Montserrat', sans-serif;
    color: #303030;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden; 
    background-color: #2a2a2a; 
}

.landing-container {
    display: flex;
    height: 100%; 
    width: 100%;
    overflow: hidden; 
}

/* ==========================================================================
   MITAD IZQUIERDA (60%)
   ========================================================================== */
.left-panel {
    width: 60%;
    height: 100%;
    background-color: #FFFFFF;
    padding: 0 6vw 0 5vw; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    position: relative;
}

/* LOGO: Alineado en altura con botones superiores (5vh) */
.logo-container {
    position: absolute;
    top: 5vh; 
    height: clamp(30px, 6vh, 48px); 
}

.logo-container svg {
    height: 100%;
    width: auto;
}

/* TEXTOS CENTRALES */
h1.main-title {
    font-weight: 600;
    font-size: clamp(1.8rem, 4vh, 32pt); 
    color: #303030;
    letter-spacing: 0.075em;
    margin-bottom: 1.5vh;
    line-height: 1.1;
}

p.main-description {
    font-weight: 500;
    font-size: clamp(1.1rem, 2.5vh, 22pt);
    color: #303030;
    margin-bottom: 6vh; 
    line-height: 1.3;
}

.users-columns {
    display: flex;
    gap: 3vw;
}

.user-col h2 {
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.4rem, 3vh, 24pt);
    margin-bottom: 1.5vh;
}

.user-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8vh; 
}

.user-list li {
    background-color: #F9F9F9;
    padding: 1.2vh 1.5vw;
    font-size: clamp(0.9rem, 1.8vh, 16pt);
    font-weight: 400;
    border-radius: 0; /* Esquinas en punta */
}

/* SECCIÓN INFERIOR IZQUIERDA: Alineada con botón gestor derecho (5vh) */
.bottom-section {
    position: absolute;
    bottom: 5vh; 
    left: 5vw;
    right: 6vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1vw;
    font-size: clamp(1rem, 2.2vh, 18pt);
}

.contact-item svg {
    height: clamp(16px, 2.5vh, 24px); 
    width: auto;
    fill: #303030;
}

.btn-register {
    background-color: #303030;
    color: #FFFFFF;
    font-weight: 500;
    font-size: clamp(1rem, 2.2vh, 18pt);
    text-transform: uppercase;
    padding: 1.5vh 3vw;
    border: none;
    text-decoration: none;
    border-radius: 0; /* Esquinas en punta */
    transition: background 0.3s;
}

.btn-register:hover { background-color: #1a1a1a; }

/* ==========================================================================
   MITAD DERECHA (40%)
   ========================================================================== */
.right-panel {
    width: 40%;
    height: 100%;
    background-image: 
        linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, transparent 25%),
        linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 25%),
        url('../img/fondo-landing-escritorio.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centrado horizontal de todo el bloque central */
}

/* BOTONES SUPERIORES: Centrados y alineados con logo (5vh) */
.top-nav {
    position: absolute;
    top: 5vh; 
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1.5vw;
    z-index: 10;
}

.btn-login {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    padding: 1.2vh 2vw;
    font-size: clamp(0.7rem, 1.4vh, 12pt);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: background 0.3s;
}

.btn-login:hover { background: rgba(255, 255, 255, 0.15); }

.btn-register-solid {
    background-color: #FFFFFF;
    color: #303030; 
    padding: 1.2vh 2vw;
    font-size: clamp(0.7rem, 1.4vh, 12pt);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: background 0.3s;
}

.btn-register-solid:hover { background-color: #f0f0f0; }

/* CAJA NEWSLETTER RE-DISEÑADA */
.newsletter-box {
    background-color: #FFFFFF;
    padding: 5vh 3vw;
    width: 90%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0; /* Esquinas en punta */
}

.newsletter-box h3 {
    color: #303030;
    font-size: clamp(1rem, 2vh, 16pt);
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 4vh;
    text-transform: uppercase;
}

.newsletter-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.newsletter-form input,
.newsletter-form select {
    width: 100%;
    padding: 1.8vh 1.2vw;
    border: 1px solid #E0E0E0;
    background-color: #FBFBFB;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #303030;
    outline: none;
    border-radius: 0; /* Esquinas en punta */
    transition: all 0.3s ease;
}

.newsletter-form input:focus,
.newsletter-form select:focus {
    border-color: #303030;
    background-color: #FFFFFF;
}

/* Flecha personalizada para el select */
.newsletter-form select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23303030'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1vw center;
    background-size: 1.5rem;
}

.newsletter-form button {
    margin-top: 1vh;
    background-color: #303030;
    color: #FFFFFF;
    border: none;
    padding: 2vh;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    cursor: pointer;
    border-radius: 0; /* Esquinas en punta */
    transition: all 0.3s ease;
}

.newsletter-form button:hover {
    background-color: #1a1a1a;
    letter-spacing: 0.25em;
}

/* BOTÓN INFERIOR: GESTOR CENTRADO Y ALINEADO CON CONTACTO (5vh) */
.bottom-badge {
    position: absolute;
    bottom: 5vh; 
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-gestor {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    background: transparent;
    padding: 1.5vh 3vw;
    font-size: clamp(0.8rem, 1.8vh, 14pt);
    text-transform: uppercase;
    letter-spacing: 0.25em; 
    text-decoration: none;
    border-radius: 0; /* Esquinas en punta */
    transition: background 0.3s;
}

.btn-gestor:hover { background: rgba(255, 255, 255, 0.15); }

/* ==========================================================================
   RESPONSIVE MÓVIL
   ========================================================================== */
@media (max-width: 768px) {
    body, html { height: auto; overflow-y: auto; }
    .landing-container { flex-direction: column; }
    .left-panel, .right-panel { width: 100%; height: auto; min-height: 100dvh; }
    
    .logo-container, .bottom-section, .top-nav, .bottom-badge {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        margin-bottom: 5vh;
    }
    .left-panel { padding: 5vh 6vw; }
    .bottom-section { flex-direction: column; align-items: flex-start; gap: 4vh; }
}