/**
 * Theme Name:     Realty \\ Child
 * Author:         QWERTY
 * Template:       realty
 * Text Domain:	   realty-child
 * Description:    Premium Real Estate WordPress Theme.
 */

/* HEADER REALTY - VERSIÓN 2 (MÁS ESPECÍFICA) */
.navbar {
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%) !important;
}

/* MENÚ GRIS → NEGRO */
.navbar-nav > li > a,
.navbar-collapse .navbar-nav > li > a {
  color: #74746F !important;
  font-weight: 600 !important;
  font-family: 'Lato', sans-serif !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.current-menu-item > a,
.navbar-collapse .navbar-nav > li > a:hover {
  color: #000000 !important;
  background: rgba(216, 64, 64, 0.1) !important;
}

/* Teléfono - FORZAR ROJO */
.navbar-phone-number a,
.navbar-contact-details a,
.navbar-contact-details * {
  color: #D84040 !important;
}

/* Logo y brand */
.navbar-brand,
.navbar-brand a,
.navbar-brand span {
  color: #ffffff !important;
}

/* Hamburguesa móvil */
.navbar-toggle {
  background-color: #D84040 !important;
}

.navbar-toggle .icon-bar {
  background-color: #ffffff !important;
}

/* Tagline/description */
.tagline {
  color: #d0d0d0 !important;
}

/* Eliminar efectos raros del menú */
.navbar-nav > li {
  background: transparent !important;
}

.footer-banner {
    position: relative;
    text-align: center;
}

.footer-banner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Desktop */
.footer-contact {
    position: absolute;
    bottom: 0;
    right: 15%;
    transform: translateY(-50%);
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
}

.footer-contact a {
    color: #ffffff;
    text-decoration: none;
}

.footer-phone {
    font-size: 32px;
    font-weight: 700;
}

.footer-email {
    font-size: 28px;
    font-weight: 600;
}

/* Hover (optional) */
.footer-contact a:hover {
    text-decoration: underline;
}

/* 📱 Mobile */
@media (max-width: 768px) {

    .footer-contact {
        right: 50%;
        bottom: 0;
        transform: translate(50%, -50%);
        text-align: center;
        width: 90%;
    }

    .footer-phone {
        font-size: 22px;
    }

    .footer-email {
        font-size: 18px;
        word-break: break-word;
    }
}

/*  Small phones */
@media (max-width: 480px) {

    .footer-phone {
        font-size: 20px;
    }

    .footer-email {
        font-size: 16px;
    }
}

#footer {
  margin: 0 auto 0;
  background: rgba(0, 0, 0, 0.02);
  text-align: center;
}



.footer-contact-details{
    text-align:left;
}

/* =========================================
   HEADER BLANCO LIMPIO (ESTILO PROPUESTA 2)
   ========================================= */

/* 1. Fondo Blanco Limpio */
header.navbar {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

/* Matar fondo azul/nubes del tema original */
header.navbar .navbar-header,
.navbar-collapse {
    background: transparent !important;
    background-image: none !important;
}

/* 2. Logo INEXUS (Negro) */
header.navbar .navbar-brand a,
header.navbar .navbar-brand span {
    color: #1a1a1a !important; /* Negro corporativo */
    font-weight: 800 !important;
    text-transform: uppercase;
}

/* 3. Menú (Gris Oscuro #74746F -> Hover Rojo) */
header.navbar .navbar-nav > li > a,
ul.nav.navbar-nav > li > a {
    color: #74746F !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 600 !important;
}

header.navbar .navbar-nav > li > a:hover,
header.navbar .navbar-nav > li.current-menu-item > a,
ul.nav.navbar-nav > li > a:hover {
    color: #D84040 !important; /* Rojo al pasar mouse */
    background: transparent !important;
}

/* 4. Teléfono (Rojo a la derecha) */
.navbar-contact-details .navbar-phone-number a {
    color: #D84040 !important;
    font-weight: 700;
    font-size: 15px;
}

/* 5. Icono "IX" Rojo (si existe en tu HTML) */
.logo-icon {
    background-color: #D84040;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
}
/* =========================================
   HEADER: LOGO Y MENÚ EN LA MISMA LÍNEA
   ========================================= */

@media (min-width: 992px) { /* Solo en escritorio (pantallas grandes) */

    /* 1. Convertir el contenedor principal en Flexbox */
    header.navbar .container {
        display: flex !important;
        align-items: center !important;      /* Centrado vertical perfecto */
        justify-content: space-between !important; /* Logo izquierda, Menú derecha */
        flex-wrap: nowrap !important;        /* Prohibido bajar de línea */
        position: relative !important;
        height: 100px; /* Ajusta esta altura si tu logo es muy alto */
    }

    /* 2. Ajustar el bloque del Logo */
    header.navbar .navbar-header {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0; /* Que no se aplaste */
    }

    header.navbar .navbar-brand {
        float: none !important;
        display: block !important;
        padding: 0 !important;
        height: auto !important;
        line-height: normal !important;
    }
    
    /* Asegurar que la imagen del logo no rompa nada */
    header.navbar .navbar-brand img {
        max-height: 60px; /* Altura máxima para que no empuje todo */
        width: auto;
        display: block;
    }

    /* 3. Ajustar el Menú para que flote a la derecha */
    header.navbar .navbar-collapse {
        float: none !important;
        display: block !important;
        width: auto !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    header.navbar .navbar-nav {
        float: none !important;
        margin: 0 !important;
        display: flex !important; /* Menú también flex */
        align-items: center !important;
    }

    /* Elementos de lista del menú */
    header.navbar .navbar-nav > li {
        float: none !important;
        display: block !important;
    }

    /* 4. Ocultar o mover elementos que estorban */
    header.navbar .clearfix, 
    header.navbar .navbar-contact-details {
        display: none !important; /* Si molestan, chau */
    }
}
/* FORZAR TAMAÑO REAL DEL LOGO */
header.navbar .navbar-brand {
    height: auto !important;
    padding: 0 !important;
    line-height: normal !important;
    width: auto !important;
    max-width: none !important; /* Quita límites de ancho del contenedor */
}

header.navbar .navbar-brand a {
    display: block !important;
}

header.navbar .navbar-brand img {
    width: auto !important;      /* Respeta la proporción */
    height: auto !important;     /* Respeta la proporción */
    max-height: 80px !important; /* Altura máxima deseada (ajústala si quieres más) */
    max-width: 300px !important; /* Permite que crezca hasta 300px de ancho */
    min-width: 200px !important; /* Fuerza un ancho mínimo para que no se vea enano */
}

/* Ajuste del contenedor padre para que quepa */
header.navbar .container {
    min-height: 100px !important; /* Asegura espacio vertical */
}

/* =========================================
   ARREGLO DE SUBMENÚS (DROPDOWNS)
   ========================================= */

/* 1. Ocultar submenús por defecto y posicionarlos */
header.navbar .navbar-nav > li {
    position: relative; /* Para que el submenú se posicione respecto a esto */
}

header.navbar .navbar-nav .sub-menu,
header.navbar .navbar-nav .children {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%; /* Justo debajo del botón padre */
    left: 0;
    z-index: 1000;
    min-width: 220px; /* Ancho mínimo decente */
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 10px 0;
    list-style: none !important;
    margin: 0;
    border-radius: 4px;
}

/* 2. Mostrar submenú al pasar el mouse (Hover) */
header.navbar .navbar-nav > li:hover > .sub-menu,
header.navbar .navbar-nav > li:hover > .children {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

/* 3. Estilo de los items del submenú */
header.navbar .navbar-nav .sub-menu li,
header.navbar .navbar-nav .children li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none !important; /* Quitar bullets/puntos */
}

/* Quitar el punto negro feo */
header.navbar .navbar-nav .sub-menu li::before,
header.navbar .navbar-nav .children li::before {
    content: none !important;
    display: none !important;
}

/* 4. Enlaces del submenú */
header.navbar .navbar-nav .sub-menu li a,
header.navbar .navbar-nav .children li a {
    display: block;
    padding: 10px 20px !important;
    color: #666666 !important;
    font-size: 13px;
    font-weight: 400 !important;
    text-transform: none;
    line-height: normal;
    border-bottom: 1px solid #f5f5f5;
    background: transparent !important;
    white-space: nowrap; /* Que no se corte el texto */
}

/* Hover en items del submenú */
header.navbar .navbar-nav .sub-menu li a:hover,
header.navbar .navbar-nav .children li a:hover {
    background-color: #f9f9f9 !important;
    color: #D84040 !important; /* Rojo corporativo */
    padding-left: 25px !important; /* Pequeña animación de desplazamiento */
    transition: all 0.2s ease;
}

/* Animación suave */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* =========================================
   INDICADOR DE SUBMENÚ (FLECHITA)
   ========================================= */

/* 1. Añadir espacio a la derecha para la flecha */
header.navbar .navbar-nav > li.menu-item-has-children > a,
header.navbar .navbar-nav > li.page_item_has_children > a {
    padding-right: 30px !important; /* Espacio extra */
    position: relative;
}

/* 2. Dibujar la flecha con CSS puro (Triángulo hacia abajo) */
header.navbar .navbar-nav > li.menu-item-has-children > a::after,
header.navbar .navbar-nav > li.page_item_has_children > a::after {
    content: '';
    display: block;
    width: 0; 
    height: 0; 
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #999; /* Color de la flecha (gris) */
    
    position: absolute;
    right: 12px;  /* Posición horizontal */
    top: 50%;     /* Centrado vertical */
    transform: translateY(-50%);
    pointer-events: none; /* Que no interfiera con el click */
    transition: transform 0.2s ease;
}

/* 3. Cambiar color y rotar flecha al hacer Hover */
header.navbar .navbar-nav > li.menu-item-has-children:hover > a::after,
header.navbar .navbar-nav > li.page_item_has_children:hover > a::after {
    border-top-color: #D84040; /* Flecha roja al pasar el mouse */
    transform: translateY(-50%) rotate(180deg); /* Girar flecha hacia arriba */
}
/* =========================================
   ARREGLO HEADER MÓVIL (Menor a 992px)
   ========================================= */

@media (max-width: 991px) {
    
    /* 1. Contenedor: Resetear Flex para que fluya natural o controlado */
    header.navbar .container {
        display: block !important; /* Volver a bloque normal */
        position: relative;
        padding-top: 10px;
        padding-bottom: 10px;
        height: auto !important; /* Altura automática */
    }

    /* 2. Cabecera Móvil (Logo + Hamburguesa) */
    header.navbar .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* Separados a los extremos */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* 3. Logo Móvil: Ajustar tamaño */
    header.navbar .navbar-brand {
        display: block !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        max-width: 70%; /* Que no choque con el botón */
    }

    header.navbar .navbar-brand img {
        max-height: 50px !important; /* Logo más chico en móvil */
        width: auto !important;
    }

    /* 4. Botón Hamburguesa: Posicionar bien a la derecha */
    header.navbar .navbar-toggle {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        background-color: #D84040 !important;
        border-radius: 4px;
        padding: 8px 10px;
    }

    /* 5. Contactos (Teléfono/Email): Ocultar o poner debajo pequeños */
    .navbar-contact-details {
        text-align: center !important;
        padding: 5px 0 !important;
        font-size: 12px !important;
        float: none !important;
        width: 100%;
        display: block; /* Cámbialo a 'none' si prefieres ocultarlos en móvil */
    }
    
    .navbar-contact-details .navbar-phone-number,
    .navbar-contact-details .navbar-email {
        display: inline-block;
        margin: 0 5px;
    }

    /* 6. Menú Desplegable (Al abrir hamburguesa) */
    header.navbar .navbar-collapse {
        border-top: 1px solid #eee !important;
        margin-top: 10px !important;
        background-color: #ffffff !important; /* Fondo blanco */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        padding: 0 !important;
        float: none !important;
        width: 100% !important;
    }

    /* Items del menú en móvil */
    header.navbar .navbar-nav {
        margin: 0 !important;
        float: none !important;
    }

    header.navbar .navbar-nav > li {
        display: block !important;
        float: none !important;
        border-bottom: 1px solid #f5f5f5;
    }

    header.navbar .navbar-nav > li > a {
        padding: 12px 15px !important;
        line-height: normal !important;
        color: #333 !important;
    }
    
    /* Submenús en móvil: que se muestren indentados */
    header.navbar .navbar-nav .sub-menu {
        position: static !important; /* Ya no flotantes */
        display: block !important;   /* Siempre visibles o controlados por JS */
        box-shadow: none !important;
        border: none !important;
        padding-left: 20px !important;
        background: #f9f9f9 !important;
    }
}
/* --- OCULTAR DATOS DE CONTACTO TOPBAR EN MÓVIL --- */
@media (max-width: 768px) {
    /* Ocultar el contenedor de teléfono y email en la cabecera */
    .navbar-contact-details, 
    .navbar-phone-number, 
    .navbar-email {
        display: none !important;
    }
    
    /* Ajustar márgenes para que el logo quede bien centrado/posicionado sin esos datos */
    header.navbar .navbar-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-top: 0 !important;
    }
}
/* CREDITOS FOOTER MODERNOS (PARA FONDO OSCURO) */
.footer-credits {
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: flex-end; /* Alineado a la derecha */
    gap: 12px; /* Espacio entre texto y logo */
    font-size: 13px;
    font-weight: 300;
    
    /* COLOR CLARO PARA FONDO OSCURO */
    color: #e0e0e0 !important; /* Gris muy claro, casi blanco */
}

/* El texto "© 2018..." */
.footer-credits .copyright {
    opacity: 0.7; /* Leve transparencia para elegancia */
}

/* El enlace "Desarrollado por" */
.footer-credits .developer-link {
    text-decoration: none;
    border: none;
    display: flex;
    color: #ffffff !important; /* Blanco puro para el link */
    font-weight: 400;
    transition: opacity 0.3s;
}

/* Logo QWERTY */
.footer-credits .developer-logo {
    height: 24px;
    width: auto;
    vertical-align: middle;
    filter: brightness(0) invert(1); /* TRUCO: Vuelve el logo blanco si es SVG/PNG oscuro */
    opacity: 0.8;
}

/* Hover effect */
.footer-credits:hover .developer-logo {
    opacity: 1;
    filter: none; /* (Opcional) Si quieres que recupere su color original al pasar mouse */
}

/* Móvil */
@media (max-width: 768px) {
    .footer-credits {
        justify-content: center;
        margin-top: 15px;
    }
}
/* =========================================
   ARREGLO VISUAL FOOTER FINAL
   ========================================= */

/* 1. ICONOS REDES SOCIALES (Blanco limpio + Hover Rojo) */
#footer .social i, 
#footer .social-transparent i,
footer .social i,
.widget .social i {
    color: #ffffff !important;      /* Icono blanco */
    font-size: 18px !important;     /* Tamaño decente */
    width: 36px !important;         /* Ancho del cuadrado */
    height: 36px !important;        /* Alto del cuadrado */
    line-height: 36px !important;   /* Centrado vertical */
    text-align: center;
    background-color: rgba(255,255,255,0.1) !important; /* Fondo suave */
    border-radius: 4px;             /* Bordes redondeados */
    margin: 0 5px;
    transition: all 0.3s ease;
}

/* Hover: Se ponen rojos al pasar el mouse */
#footer .social i:hover,
#footer .social-transparent i:hover,
footer .social i:hover {
    background-color: #D84040 !important; /* Rojo corporativo */
    color: #ffffff !important;
    transform: translateY(-3px); /* Pequeña animación hacia arriba */
}

/* Matar sombras internas raras del tema */
#footer .social i:after, 
#footer .social-transparent i:after {
    display: none !important;
}

/* FORZAR FOOTER FULL WIDTH */

/* 1. Resetear ancho del footer principal */
#footer, #footer-bottom, .site-footer {
    width: 100vw !important;       /* 100% del ancho de la ventana */
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important; /* Truco para romper contenedores padres */
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Evitar scroll horizontal indeseado */
}

/* 2. Asegurar que el contenido interno siga centrado */
#footer .container, 
#footer-bottom .container {
    width: 100% !important;
    max-width: 1170px !important; /* Ancho estándar de Bootstrap */
    margin: 0 auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* 3. Parche específico para evitar scroll horizontal en móviles */
body {
    overflow-x: hidden;
}

/* --- ESTILOS PÁGINA CONTACTO --- */

/* Estilizando los campos del Contact Form 7 */
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fdfdfd;
    transition: all 0.3s ease;
    font-size: 15px;
}

.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
    border-color: #D84040; /* Rojo Inexus al hacer clic */
    box-shadow: 0 0 5px rgba(216, 64, 64, 0.2);
    outline: none;
}

/* ARREGLO BOTÓN CENTRADO */
input.wpcf7-submit {
    background-color: #D84040 !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    
    /* CLAVE PARA CENTRAR TEXTO */
    display: inline-block !important;
    height: auto !important;       /* Evita alturas fijas que desalinean */
    line-height: normal !important; /* Resetea la altura de línea */
    padding: 15px 40px !important; /* Padding igual arriba/abajo centra el texto */
    vertical-align: middle !important;
    
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    margin-top: 10px;
}


input.wpcf7-submit:hover {
    background-color: #b03030 !important; /* Rojo oscuro al pasar mouse */
    transform: translateY(-1px); /* Efecto sutil de elevación */
}


/* Ajustes responsive para las columnas */
@media (max-width: 768px) {
    .contact-page-container .row {
        flex-direction: column;
    }
    .contact-page-container .col-md-5,
    .contact-page-container .col-md-7 {
        width: 100% !important;
        padding: 0 !important;
    }
    .contact-page-container .col-md-5 {
        margin-bottom: 40px;
    }
}