.elementor-124 .elementor-element.elementor-element-5273705{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}@media(min-width:768px){.elementor-124 .elementor-element.elementor-element-5273705{--width:1200px;}}/* Start custom CSS for html, class: .elementor-element-239a8a8 *//* ============================================================
   1. VARIABLES Y FUNDAMENTOS (Identidad del Bufete)
   ============================================================ */
:root {
    --azul-medianoche: #1B263B;
    --azul-cobalto: #415A77;
    --oro-viejo: #A68A64;
    --gris-piedra: #E0E1DD;
    --blanco-hueso: #F8F9FA;
    --blanco-puro: #ffffff;
    --transicion: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bufete-wrapper {
    font-family: 'Open Sans', sans-serif;
    color: var(--azul-medianoche);
    line-height: 1.8;
    width: 100% !important;
}

.bufete-wrapper h1, .bufete-wrapper h2, .bufete-wrapper h3 {
    font-family: 'Lora', serif !important;
}

/* Contenedor Maestro: Asegura el centrado y espaciado Premium */
.section-padding {
    padding: 100px 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Visibilidad de Seguridad (Evita bloques en blanco) */
.reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ============================================================
   2. PÁGINA SOBRE NOSOTROS (Estadísticas y Trayectoria)
   ============================================================ */

/* FORZAR 4 COLUMNAS HORIZONTALES (Blindado) */
div.bufete-wrapper section.stats-section div.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 40px auto 0 !important;
}

.stat-number {
    display: block !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    color: var(--oro-viejo) !important;
    line-height: 1 !important;
}

/* Línea del Tiempo */
.timeline {
    border-left: 2px solid var(--oro-viejo);
    padding-left: 40px;
    text-align: left;
}

/* ============================================================
   3. PÁGINA DE CONTACTO (Split Screen y Formulario)
   ============================================================ */

.contact-container {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 80px !important;
    text-align: left !important;
    padding: 0 20px 100px !important;
}

/* Columna de Información */
.contact-info .info-block { margin-bottom: 40px; }
.contact-info h3 { font-size: 1.4rem; color: var(--azul-medianoche); }
.contact-info a { color: var(--oro-viejo); font-weight: 700; text-decoration: none; }

/* Mapa Estático Premium */
.map-placeholder {
    position: relative;
    border: 1px solid var(--gris-piedra);
    overflow: hidden;
    margin-top: 20px;
}
.static-map { width: 100%; transition: var(--transicion); display: block; }
.map-placeholder:hover .static-map { transform: scale(1.05); }
.map-overlay {
    position: absolute; bottom: 0; width: 100%;
    background: rgba(27, 38, 59, 0.85); color: white;
    padding: 10px; text-align: center; font-size: 0.8rem;
}

/* Área del Formulario */
.contact-form-area {
    background-color: var(--azul-medianoche) !important; /* Fondo oscuro */
    padding: 60px !important;
    border: 1px solid var(--azul-cobalto) !important; /* Borde sutil más oscuro */
    box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important; /* Sombra más profunda */
    color: white !important; /* Texto general blanco */
}

.form-header h3,
.form-header p {
    color: white !important;
}

.form-footer-privacy {
    border-top: 1px solid var(--azul-cobalto) !important;
    color: rgba(255,255,255,0.7) !important; /* Blanco con un poco de transparencia */
}

div.wpforms-container .wpforms-form label.wpforms-field-label {
    color: white !important;
    font-weight: 600 !important;
}

/* Campos de texto (Inputs y Selects) */
div.wpforms-container .wpforms-form input[type=text],
div.wpforms-container .wpforms-form input[type=email],
div.wpforms-container .wpforms-form select,
div.wpforms-container .wpforms-form textarea {
    background-color: var(--blanco-hueso) !important; /* Fondo claro para escribir */
    border: 2px solid var(--azul-cobalto) !important;
    color: var(--azul-medianoche) !important; /* Texto al escribir oscuro */
    border-radius: 2px !important;
}

/* Al hacer clic en un campo */
div.wpforms-container .wpforms-form input:focus,
div.wpforms-container .wpforms-form select:focus,
div.wpforms-container .wpforms-form textarea:focus {
    border-color: var(--oro-viejo) !important; /* Resalte dorado al escribir */
}

/* BOTÓN WPFORMS EN ORO VIEJO (Blindado) */
div.wpforms-container .wpforms-form button[type=submit] {
    background-color: var(--oro-viejo) !important;
    color: #ffffff !important;
    font-family: 'Lora', serif !important;
    padding: 15px 40px !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    transition: var(--transicion) !important;
}

div.wpforms-container .wpforms-form button[type=submit]:hover {
    background-color: var(--azul-medianoche) !important;
}

/* ============================================================
   4. COMPONENTES EXTRA (Badges y CTA)
   ============================================================ */

/* Expertise Badges al pie */
.trust-badges-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding: 40px 20px;
    background: var(--blanco-hueso);
}
.badge-item { font-weight: 700; font-size: 0.9rem; color: var(--azul-medianoche); }

/* Botón CTA Dorado Centrado */
.btn-oro {
    background-color: var(--oro-viejo) !important;
    color: white !important;
    padding: 18px 40px !important;
    font-weight: 700;
    display: inline-block !important;
    margin-top: 20px !important;
    text-decoration: none;
}

/* ============================================================
   5. RESPONSIVE (Móvil y Tablets)
   ============================================================ */
@media (max-width: 900px) {
    .contact-container { grid-template-columns: 1fr !important; gap: 50px !important; }
    div.bufete-wrapper section.stats-section div.stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .contact-form-area { padding: 40px 20px !important; }
}

@media (max-width: 600px) {
    div.bufete-wrapper section.stats-section div.stats-grid { grid-template-columns: 1fr !important; }
    .stat-number { font-size: 2.5rem !important; }
}/* End custom CSS */