/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Tema hijo para el rediseño de MLB Consultores
 Author:         Tu Nombre
 Template:       Divi
 Version:        1.0.2
*/

/* Aquí irán todos los nuevos estilos inspirados en Vesta Abogados */

/* ----------------------------------------------------
   1. TIPOGRAFÍA GLOBAL
   ---------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_module_heading,
.et_pb_toggle_title,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.et_pb_module_header a,
.et_pb_module_heading a {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
    color: #222222 !important;
}

/* ----------------------------------------------------
   2. COLOR PRIMARIO MLB (#303947) Y ENLACES
   ---------------------------------------------------- */
a,
#top-menu a,
#mobile_menu a,
.mobile_nav a,
.et_pb_accent_color,
.et_pb_blurb_position {
    color: #303947 !important;
    text-decoration: none;
    transition: color 0.3s ease-in-out !important;
}

a:hover,
#top-menu a:hover,
#top-menu li.current-menu-item > a,
#mobile_menu a:hover,
#mobile_menu li.current-menu-item > a,
.mobile_nav a:hover {
    color: #1b212b !important; /* Variante más oscura para el hover */
}

/* ----------------------------------------------------
   3. BOTONES GLOBALES (.et_pb_button y similares)
   ---------------------------------------------------- */
.et_pb_button,
.et_pb_module .et_pb_button,
.et_pb_contact_submit {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #303947 !important;
    color: #303947 !important;
    border-radius: 0px !important;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 24px !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.et_pb_button:hover,
.et_pb_module .et_pb_button:hover,
.et_pb_contact_submit:hover {
    background: #303947 !important;
    background-color: #303947 !important;
    color: #ffffff !important;
    border-color: #303947 !important;
}

/* Suavizar transiciones de pseudo-elementos del botón (icono de DIVI) */
.et_pb_button::after,
.et_pb_module .et_pb_button::after {
    transition: all 0.3s ease !important;
}

/* ----------------------------------------------------
   4. LIMPIEZA Y ESPACIOS (.et_pb_section)
   ---------------------------------------------------- */
.et_pb_section {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

/* Limpieza de sombras y decoraciones sobrecargadas */
.et_pb_blurb,
.et_pb_text,
.et_pb_blurb_content,
.et_pb_module {
    box-shadow: none !important;
}

.et_pb_blurb,
.et_pb_text {
    border: none !important;
}

.et_pb_column_0 {
    padding-top: 5% !important;
}

/* ==========================================================================
   MLB HERO SECTION CUSTOM STYLING & ANIMATIONS
   ========================================================================== */

/* 1. Sección Hero (.et_pb_section_0) */
.et_pb_section_0 {
    background-size: cover;
    background-position: center right;
    padding: 8% 0 !important;
}

/* Textos del Hero a blanco para legibilidad sobre el fondo oscuro */
.et_pb_section_0 h1, 
.et_pb_section_0 .et_pb_text_inner p {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.et_pb_section_0 h1 {
    max-width: 750px !important;
    text-align: left !important;
    line-height: 1.45em !important;
}

.et_pb_section_0 h1 span {
    display: inline !important; 
    opacity: 0;
    animation-fill-mode: forwards;
    font-family: 'Inter', sans-serif !important;
}

/* Frases del titular */
.hero-punch-1,
.hero-punch-2 { 
    font-size: 44px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.45em !important;
}

.hero-punch-1 { animation: fadeIn 1s ease 1s forwards; }
.hero-punch-2 { animation: fadeIn 2s ease 7s forwards; }

/* Texto SEO: en bloque (salto de línea) y aparece al segundo 7 */
.et_pb_section_0 h1 .hero-seo {
    display: block !important; 
    margin-top: 20px !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.4em !important;
    animation: fadeIn 1s ease 9s forwards; 
}

/* Animación de aparición (compartida por todos los elementos) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 1. Ocultación inicial del menú */
#main-header, #top-header {
    opacity: 0;
    animation: fadeIn 1s ease 8s forwards;
}

/* ==========================================================================
   BOTONES DEL HERO: MONOCROMO ULTRA-MINIMALISTA & HOVER ESTABILIZADO
   ========================================================================== */

/* 1. Contenedor de Botones en Hero */
.mlb-hero-ctas {
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
    max-width: 620px !important;
    opacity: 0;
    animation-fill-mode: forwards;
    animation: fadeIn 1s ease 10s forwards;
}

/* 2. Estilos base de botones en Hero */
.mlb-hero-ctas .et_pb_button {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    line-height: 1.2em !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* Desactivar flechas de DIVI en hover */
.mlb-hero-ctas .et_pb_button::after, 
.mlb-hero-ctas .et_pb_button::before,
.mlb-hero-ctas .et_pb_button:hover::after {
    display: none !important;
    content: "" !important;
    opacity: 0 !important;
    width: 0 !important;
    margin-left: 0 !important;
}

/* Botón Principal (Blanco Sólido) */
.mlb-hero-ctas .et_pb_button_primary {
    background-color: #ffffff !important;
    color: #1c2d37 !important;
    border: 1px solid #ffffff !important;
}

.mlb-hero-ctas .et_pb_button_primary:hover {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

/* Botón Secundario (Línea Fina Translúcida) */
.mlb-hero-ctas .et_pb_button_secondary {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.mlb-hero-ctas .et_pb_button_secondary:hover {
    border-color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Control responsive para móvil */
@media (max-width: 767px) {
    .mlb-hero-ctas {
        flex-direction: column;
        width: 100%;
    }
    .mlb-hero-ctas .et_pb_button {
        text-align: center;
        width: 100%;
    }
}

/* ==========================================================================
   NUEVO MENÚ FLOTANTE MODERN: GLASSMORPHISM & BLUR
   ========================================================================== */

#main-header {
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
    max-width: 1400px !important;
    background-color: rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transition: all 0.4s ease-in-out !important;
}

.et_fixed_nav.et_show_nav #page-container {
    padding-top: 0px !important;
}

#main-header .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
}

#main-header.et-fixed-header {
    position: fixed !important;
    top: 10px !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 980px) {
    #main-header {
        width: 90% !important;
        top: 10px !important;
    }
}

/* Forzar altura 100% y recorte elegante */
.et_pb_image_0 {
    height: 100% !important; /* Fuerza la altura al 100% de su padre */
    overflow: hidden;
}

.et_pb_image_0 img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover; /* El secreto: recorta la foto manteniendo proporción sin deformar */
    object-position: center; /* Centra la imagen para que siempre se vea el equipo */
    transition: transform 0.6s ease;
}

/* Efecto de presencia al pasar el ratón */
.et_pb_image_0:hover img {
    transform: scale(1.05); /* Zoom sutil muy premium */
}

/* AJUSTES RESPONSIVE PARA EL HERO */
@media (max-width: 767px) {
    /* 1. Ajuste de tamaño del H1 para que no se desborde */
    .et_pb_section_0 h1 .hero-punch-1,
    .et_pb_section_0 h1 .hero-punch-2 {
        font-size: 30px !important; /* Reducimos de 44px a 30px en móvil */
        line-height: 1.3em !important;
        display: block !important; /* Forzamos bloque para mejor control en vertical */
        margin-bottom: 10px !important;
    }
    .et_pb_column_0{
        margin-top: 20%;
    }

    /* 2. Ajuste del texto SEO */
    .et_pb_section_0 h1 .hero-seo {
        font-size: 14px !important; /* Un poco más pequeño para que no coma pantalla */
        margin-top: 15px !important;
    }

    /* 3. Asegurar que el bloque de botones sea usable con el pulgar */
    .mlb-hero-ctas {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .mlb-hero-ctas .et_pb_button {
        width: 100% !important; /* Botones a pantalla completa en móvil */
        text-align: center !important;
        max-width: 284px;
    }
    .et_pb_section_0 {
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) !important; /* Capa oscura extra */
    }
}

/* --- Estilización del formulario de contacto --- */

/* 1. Campos de entrada (Input y Textarea) */
.et_pb_contact_form_container .input, 
.et_pb_contact_form_container textarea {
    background-color: #f4f4f4 !important; /* Un gris muy claro y suave */
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 15px !important;
    font-size: 16px !important;
    transition: all 0.3s ease;
}

/* Efecto al hacer clic en los campos */
.et_pb_contact_form_container .input:focus, 
.et_pb_contact_form_container textarea:focus {
    border-color: #2f4858 !important; /* Color corporativo */
    background-color: #ffffff !important;
}

/* 2. Botón Enviar (Estilo Hero) */
.et_pb_contact_submit.et_pb_button {
    background-color: #2f4858 !important; /* Azul oscuro corporativo */
    color: #ffffff !important;
    border: 2px solid #2f4858 !important;
    border-radius: 4px !important;
    padding: 12px 35px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background 0.3s ease, color 0.3s ease;
}

.et_pb_contact_submit.et_pb_button:hover {
    background-color: transparent !important;
    color: #2f4858 !important;
}

/* 3. Ajustes de Captcha y Botón en móvil */
.et_contact_bottom_container {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 20px !important;
}

/* Responsive: Ajustar formulario en móvil */
@media (max-width: 767px) {
    .et_pb_contact_field_half {
        width: 100% !important;
        margin-right: 0 !important;
    }
    
    .et_contact_bottom_container {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .et_pb_contact_right {
        text-align: center !important;
        margin-bottom: 15px;
    }
    
    .et_pb_contact_submit {
        width: 100% !important;
    }
}

/* --- Estilización refinada del formulario --- */

/* 1. Reducir tamaño del placeholder */
.et_pb_contact_form_container .input::placeholder, 
.et_pb_contact_form_container textarea::placeholder {
    font-size: 13px !important; /* Más pequeño y elegante */
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* 2. Botón estilo "Hero" (Estructura de borde fino y tracking) */
.et_pb_contact_submit.et_pb_button {
    background-color: #2f4858 !important; /* Color actual */
    color: #ffffff !important;
    border: 2px solid #2f4858 !important;
    border-radius: 0px !important; /* Quitamos redondeado para que sea estilo "caja" */
    padding: 12px 30px !important; 
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important; /* Separación de letras para ese look premium */
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Efecto hover refinado */
.et_pb_contact_submit.et_pb_button:hover {
    background-color: transparent !important;
    color: #2f4858 !important;
    border: 2px solid #2f4858 !important;
}

/* 3. Ajuste de los campos para que se vean más "leves" */
.et_pb_contact_form_container .input, 
.et_pb_contact_form_container textarea {
    font-size: 14px !important; /* Fuente más pequeña para que el placeholder se vea mejor */
    padding: 12px !important;
}