/*
Theme Name: Kadence Child
Template: kadence
Version: 3.0.1 - FIX FINAL (CACHE BUSTER)
*/

/* =========================================
   1. HEADER TRANSPARENTE Y LOGO
   ========================================= */
#masthead, .site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: 1000 !important;
}

/* Ajustar el logo */
.custom-logo-link img, .site-logo-img {
    max-width: 180px !important;
    height: auto !important;
}

/* Menú en blanco con sombra para leer sobre la foto */
.main-navigation a, .site-branding a, .menu-toggle {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* =========================================
   2. HERO GIGANTE (FOTO DE FONDO)
   ========================================= */
.mi-hero-principal {
    min-height: 0vh !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Oscurecer la foto (Overlay) */
.mi-hero-principal > .kt-row-layout-inner {
    background-size: cover !important;
    background-position: center center !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Corrección admin bar */
.admin-bar #masthead {
    top: 32px !important;
}

/* =========================================
   3. BUSCADOR (ESTATIK) - CONTENEDOR
   ========================================= */
.es-search {
    background: rgba(26, 32, 44, 0.85) !important;
    padding: 20px 25px !important;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-width: 1200px;
    margin: 0 auto !important;
}

.es-search form {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr auto !important;
    gap: 15px !important;
    align-items: center !important;
}

/* Ocultar elementos innecesarios */
.es-search h3, 
.es-search-more, 
.js-es-save-search,
.es-save-search-btn,
.es-field__label, 
.es-field-row label,
.select2-selection__clear,
.es-search__address .es-search__submit,
.es-search__address button {
    display: none !important;
}

/* Reset de márgenes */
.es-search__address, .es-field__es_category, .es-field__es_type, .es-field-row__range, .es-search__buttons {
    width: 100% !important; margin: 0 !important; padding: 0 !important;
}

/* =========================================
   4. INPUTS Y CAMPOS (GLOBAL)
   ========================================= */
:root { --es-input-height: 50px; }

.es-search input[type="text"],
.select2-container .select2-selection--single {
    height: var(--es-input-height) !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 4px !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    color: white !important; 
    padding-left: 40px !important; 
    line-height: var(--es-input-height) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent !important;
}

/* ICONOS SVG EN INPUTS */
.es-search input[type="text"] {
    background: rgba(255,255,255,0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat 12px center !important;
    padding-left: 40px !important;
}
.es-field__es_category .select2-selection--single {
    background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'%3E%3C/line%3E%3C/svg%3E") no-repeat 12px center !important;
}
.es-field__es_type .select2-selection--single {
    background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E") no-repeat 12px center !important;
}
.es-field-row__range { display: flex !important; gap: 5px !important; }
.es-field-row__range > div { width: 50% !important; }
.es-field__min_price .select2-selection--single {
    background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1' x2='12' y2='23'%3E%3C/line%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'%3E%3C/path%3E%3C/svg%3E") no-repeat 10px center !important;
}

/* Botón Buscar */
.es-search__buttons .es-btn--primary {
    height: var(--es-input-height) !important;
    background-color: #c49a6c !important;
    color: white !important;
    border: none !important;
    padding: 0 30px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    width: 100% !important;
}
.es-search__buttons {
    align-self: center !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Responsivo Buscador */
@media (max-width: 1024px) {
    .es-search form { grid-template-columns: 1fr 1fr !important; }
    .es-search__address, .es-field-row__range, .es-search__buttons { grid-column: span 2; }
}
@media (max-width: 600px) {
    .es-search form { display: flex !important; flex-direction: column !important; }
    .es-search { margin-top: 100px !important; }
}

/* =========================================
   5. TARJETAS DE PROPIEDADES
   ========================================= */
.es-listing {
    background-color: #2b303b !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.3s ease !important;
    position: static !important;
    transform: none !important;
}
.es-listing:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important;
    border-color: #c49a6c !important;
}
.es-listing__image, .es-listing__image__slider {
    border-bottom: 3px solid #c49a6c !important;
}
.es-listing__content {
    padding: 20px !important;
    background-color: #2b303b !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 1 !important;
}
.es-listing__content:hover { cursor: pointer !important; }

/* Textos Tarjeta */
.es-listing__title a {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 10px !important;
}
.es-listing__title a::after {
    content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important;
}
.es-listing__content .es-control__item--wishlist, .es-listing__content .es-btn__wishlist {
    position: relative !important; z-index: 10 !important; pointer-events: auto !important;
}
.es-price {
    color: #c49a6c !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    display: block !important;
    margin-bottom: 10px !important;
}
.es-address, .es-listing__meta { color: #a0aec0 !important; font-size: 13px !important; }
.es-listing__meta svg path { fill: #c49a6c !important; }
.es-excerpt, .es-listing__terms { display: none !important; }

/* Footer Tarjeta */
.es-listing__footer {
    background-color: #232830 !important;
    padding: 15px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    text-align: center !important;
}
.es-listing__footer::after {
    content: "VER DETALLES" !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.es-listing:hover .es-listing__footer::after { color: #c49a6c !important; }
.slick-arrow, .slick-dots { z-index: 50 !important; cursor: pointer !important; }

/* =========================================
   6. PÁGINA DE PROPIEDAD INDIVIDUAL (SINGLE)
   ========================================= */

/* Fondo oscuro general */
.single-properties .entry-content,
.single-properties .es-single,
.single-properties .es-property-section,
.single-properties .es-property-section__content,
.es-single-entity,
.es-main-entity {
    background-color: #1a202c !important;
    color: #cbd5e0 !important;
    border: none !important;
}

/* FORMULARIO: Matar fondo blanco */
.es-request-form,
.es-request-form.es-request-form--section {
    background: #232830 !important; /* Gris oscuro */
    background-color: #232830 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 25px !important;
    border-radius: 8px !important;
}

/* INPUTS DEL FORMULARIO */
.es-request-form input,
.es-request-form textarea,
.es-request-form select {
    background-color: #2d3748 !important;
    color: #ffffff !important;
    border: 1px solid #4a5568 !important;
}
::placeholder { color: rgba(255,255,255,0.5) !important; }

/* TEXTOS LEGIBLES (Color Hueso/Gris Claro) */
.es-field__label,
.es-property-field__label,
.es-property-field__value,
.es-entity-field__value,
.es-description,
.es-features__item,
.es-details__item,
.es-terms-text {
    color: #cbd5e0 !important;
}

/* TÍTULOS DORADOS */
h1.entry-title,
.es-price,
.es-property-section__title,
.es-single__header h1,
.single-properties h2,
.single-properties h3 {
    color: #c49a6c !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* LÍNEAS DIVISORIAS SUTILES */
.es-section__title {
    border-bottom: 1px solid rgba(196, 154, 108, 0.3) !important;
}
.es-section__title::after { display: none !important; }
.es-features__item, .es-details__item {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* ARREGLO DE LINKS (Estaban invisibles) */
.es-property-field__value a,
.es-description a,
.es-entity-field__value a {
    color: #c49a6c !important; /* Dorado */
    text-decoration: none !important;
    font-weight: bold !important;
}
.es-property-field__value a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* BOTÓN: SOLICITAR INFORMACIÓN (Dorado con letra oscura) */
a.es-btn--request-info,
.es-btn--request-info,
button.es-btn--primary {
    background-color: #c49a6c !important;
    color: #1a202c !important; /* TEXTO OSCURO PARA QUE SE LEA */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 4px !important;
}
a.es-btn--request-info:hover,
button.es-btn--primary:hover {
    background-color: #b08d55 !important;
    color: #ffffff !important;
}

/* BOTONES DE COMPARTIR/GUARDAR (Hacerlos visibles) */
.es-control__item a,
.es-control__item span,
.es-btn__wishlist,
.es-btn__label {
    color: #cbd5e0 !important;
    pointer-events: auto !important;
}

/* =================================================================
   OCULTAR LOGO EN MÓVILES (SOLO EN PÁGINA DE DETALLES DE PROPIEDAD)
   ================================================================= */
@media (max-width: 768px) {
    /* Solo aplica cuando el body tiene la clase .single-properties */
    body.single-properties .site-branding, 
    body.single-properties .custom-logo-link, 
    body.single-properties .custom-logo {
        display: none !important;
    }
}

/* Ocultar el título original de Estatik para usar el mío */
.es-single-title, .es-property-title {
    display: none !important;
}

/* =================================================================
   HERO SECTION INMERSIVO (SINGLE PROPERTY)
   ================================================================= */

/* 1. CONTENEDOR PRINCIPAL (La caja con la foto) */
.mi-hero-propiedad {
    position: relative;
    width: 100%;
    height: 85vh; /* Ocupa el 85% de la altura de la pantalla */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end; /* Texto abajo */
    justify-content: center; /* Centrado horizontalmente */
    margin-bottom: 40px;
    margin-top: -100px; /* TRUCO: Subimos el hero para que quede DETRÁS del header transparente */
    padding-top: 100px; /* Compensamos el subidon */
}

/* En móviles, que no sea tan alto */
@media (max-width: 768px) {
    .mi-hero-propiedad {
        height: 60vh;
        align-items: flex-end;
        justify-content: flex-start; /* Alineado a la izquierda en móvil */
    }
}

/* 2. OVERLAY (El degradado negro para que se lean las letras) */
.mi-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 60%, #1a202c 100%);
    z-index: 1;
}

/* 3. CONTENIDO (Texto) */
.mi-hero-contenido {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: 1100px;
    padding: 0 20px 60px 20px; /* Espacio desde abajo */
}

@media (max-width: 768px) {
    .mi-hero-contenido {
        text-align: left; /* En móvil alineado a izquierda */
        padding-bottom: 40px;
    }
}

/* 4. TIPOGRAFÍA DEL HERO */
/* Título */
h1.mi-titulo-hero {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

@media (max-width: 768px) {
    h1.mi-titulo-hero { font-size: 28px; }
}

/* Precio */
.mi-precio-hero .es-price {
    color: #c49a6c !important; /* DORADO */
    font-family: 'Montserrat', sans-serif;
    font-size: 36px !important;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
}

@media (max-width: 768px) {
    .mi-precio-hero .es-price { font-size: 26px !important; }
}

/* Etiquetas (Ref y Estado) */
.mi-hero-meta-top {
    margin-bottom: 15px;
}
.mi-etiqueta-estado, .mi-etiqueta-id {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(5px);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    margin-right: 10px;
    border: 1px solid rgba(255,255,255,0.2);
}
.mi-etiqueta-estado {
    background: #c49a6c; /* Fondo dorado para "Venta/Alquiler" */
    border-color: #c49a6c;
}

/* 5. OCULTAR EL TÍTULO/PRECIO ORIGINAL DE ESTATIK */
/* Como ya lo pusimos en el Hero, hay que esconder el que trae el plugin abajo para que no salga repetido */
.es-single-property-layout .es-title, 
.es-single-property-layout .es-price,
.es-single-property-layout .es-property-price,
.es-single-property-layout h1 {
    display: none !important;
}

/* =========================================
   6. SINGLE PROPERTY (SOLO PÁGINA INDIVIDUAL)
   ========================================= */

/* --- A. HERO (Título Izq / Precio Der / Badge) --- */
/* Solo aplica si existe la clase .mi-hero-propiedad (nuestro PHP) */
.mi-hero-propiedad {
    position: relative;
    width: 100%;
    height: 55vh;         /* Altura controlada */
    min-height: 450px;
    background-size: cover;
    background-position: center;
    margin-top: -100px;   /* Detrás del header */
    padding-top: 100px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 50px;
}

.mi-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, #1a202c 10%, rgba(26,32,44,0.7) 50%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}

.mi-hero-contenido {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 50px 20px;
    display: flex;
    justify-content: space-between; /* Magia: Título a un lado, precio al otro */
    align-items: flex-end;
    flex-wrap: wrap;
}

/* Lado Izquierdo: Badge y Título */
.mi-hero-info { 
    max-width: 65%; 
    text-align: left;
}

.mi-badge-status, .es-property-label {
    display: inline-block;
    background-color: #c49a6c;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif;
}

h1.mi-titulo-hero {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 42px !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.mi-hero-ubicacion {
    color: #a0aec0;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Lado Derecho: Precio */
.mi-hero-precio { 
    text-align: right; 
}
.mi-hero-precio .es-price {
    color: #c49a6c !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    background: transparent !important;
    line-height: 1 !important;
}

/* --- B. GRID (Contenido expandido sin Sidebar) --- */
.mi-contenedor-principal {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
    display: block; /* Fuerza a que ocupe todo el espacio disponible */
    position: relative;
    overflow: visible !important;
}

/* Ocultar el Sidebar por completo */
.mi-sidebar {
    display: none !important;
}

.mi-agente-card {
    background: #2b303b;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.mi-agente-titulo {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- C. LIMPIEZA (Matar Duplicados) --- */
/* Estas reglas solo afectan dentro de nuestras columnas nuevas */
.mi-columna-contenido .es-request-form,
.mi-columna-contenido .es-section--contact,
.mi-columna-contenido form {
    display: none !important; /* Oculta form repetido a la izquierda */
}

.mi-columna-contenido .es-title,
.mi-columna-contenido .es-price,
.mi-columna-contenido h1.es-property-title {
    display: none !important; /* Oculta título repetido */
}

/* --- D. MOBILE --- */
@media (max-width: 900px) {
    .mi-contenedor-principal {
        grid-template-columns: 1fr; /* Una sola columna */
        display: flex;
        flex-direction: column;
    }
    .mi-hero-propiedad { height: auto; min-height: 400px; }
    .mi-hero-contenido { flex-direction: column; align-items: flex-start; }
    .mi-hero-info { max-width: 100%; margin-bottom: 20px; }
    .mi-hero-precio { text-align: left; }
    h1.mi-titulo-hero { font-size: 32px !important; }
    .mi-sidebar { position: static; margin-top: 30px; }
	.mi-columna-contenido {
        width: 100% !important;
        min-width: 0 !important; /* REGLA VITAL: Evita que Flexbox colapse el ancho del Slider */
        overflow: hidden !important; /* Previene desbordamientos horizontales en Android */
    }
}

/* =========================================
   7. FIX LAYOUT FULL WIDTH & MENU (KADENCE)
   ========================================= */

/* 1. ROMPER LA CAJA DE KADENCE (Hacerlo Full Width) */
/* Esto elimina los márgenes blancos laterales del tema */
body.single-property .content-container,
body.single-property .entry-content-wrap,
body.single-property .entry-content,
body.single-property .site-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #1a202c !important; /* Fondo oscuro continuo */
}

/* 2. ARREGLAR EL MENÚ (Transparente sobre el Hero) */
/* Aseguramos que el header flote sobre todo */
.site-header, #masthead {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important; /* Sin fondo */
    border: none !important;
    box-shadow: none !important;
    z-index: 1000 !important;
}

/* Letras del menú en BLANCO para que se vean sobre la foto oscura */
.main-navigation a, 
.site-branding a, 
.menu-toggle {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); /* Sombra para legibilidad */
}

/* 3. AJUSTES FINALES AL HERO (Ya con full width activo) */
.mi-hero-propiedad {
    width: 100vw !important; /* Forzar ancho de ventana completo */
    margin-left: calc(-50vw + 50%); /* Truco CSS para salirse del contenedor si algo falla */
    margin-right: calc(-50vw + 50%);
    margin-top: -120px !important; /* Subir más para cubrir detrás del header */
    padding-top: 120px !important;
    height: 60vh !important;
}

/* 4. CONTENEDOR CENTRAL (Volver a centrar el contenido de abajo) */
/* Como rompimos la caja principal, ahora tenemos que centrar el grid manualmente */
.mi-contenedor-principal {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    background: transparent !important;
}

/* 5. FIX FINAL CATEGORÍAS */
/* Estilo para el badge que ahora sí debería salir */
.mi-badge-status {
    background-color: #c49a6c;
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 10px;
}

/* =========================================
   8. FORZAR ANCHO MÁXIMO (FULL WIDTH CONTENT)
   ========================================= */

/* 1. ROMPER LA CAJA DE KADENCE (Liberar el ancho) */
/* Aplicamos a todas las posibles clases contenedoras del tema */
body.single-properties .content-container,
body.single-properties .entry-content-wrap,
body.single-properties .entry-content,
body.single-properties .site-content,
article.entry {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: transparent !important; /* O usar #1a202c si queda blanco */
}

/* 2. ASEGURAR QUE NUESTRO GRID CONTROLE EL CENTRO */
/* El contenedor es full width, pero el texto no puede pegar en los bordes */
.mi-contenedor-principal {
    max-width: 1200px !important; /* Ancho estándar elegante */
    width: 100% !important;
    margin: 0 auto !important; /* Centrado automático */
    padding: 0 20px 80px 20px !important; /* Aire a los lados */
}

/* 3. PEQUEÑO AJUSTE AL HERO (Para que coincida con el nuevo ancho) */
/* Si usamos el truco de 100vw antes, ahora podemos relajarlo un poco */
.mi-hero-propiedad {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================
   9. CORRECCIONES FINALES (PIXEL PERFECT)
   ========================================= */

/* --- 1. ARREGLAR SIDEBAR CORTADO & ESTILO --- */
/* Le damos más espacio al contenedor para que el sticky tenga donde bajar */
.mi-contenedor-principal {
    padding-bottom: 150px !important; /* Aire extra abajo para que no pegue con el footer */
    align-items: flex-start !important; /* Evita que la columna se estire y rompa el sticky */
}

/* Como simplificaste el PHP, ahora le damos el estilo de "Tarjeta" al wrapper del shortcode */
.mi-sidebar .mi-formulario-wrapper {
    background-color: #2b303b !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    padding: 25px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    /* FIX CORTADO: */
    max-height: 85vh; /* Si la pantalla es chica, que no se salga */
    overflow-y: auto; /* Si es muy alto, que tenga scroll interno */
}

/* --- 2. ELIMINAR EL FORMULARIO DUPLICADO (ID) --- */
/* Selector nuclear por ID para borrar el de abajo */
.mi-columna-contenido #request_form,
#request_form {
    display: none !important;
}

/* --- 3. GALERÍA CON BORDES REDONDOS --- */
/* Aplicar a todas las imágenes dentro de la galería de Estatik */
.es-gallery__item img, 
.es-gallery img,
.slick-slide img {
    border-radius: 15px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

/* --- 4. META DATOS ENMARCADOS (Cajitas) --- */
/* Esto afecta a los iconos de camas, baños, etc. */
.es-property-fields__item, 
.es-details__item,
.es-feature-item {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Fondo grisecito */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borde sutil */
    border-radius: 8px !important; /* Bordes redondos */
    padding: 10px 15px !important; /* Aire interno */
    margin-bottom: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 10px !important;
    transition: 0.3s !important;
}

/* Hover bonito para las cajitas */
.es-property-fields__item:hover {
    background-color: rgba(196, 154, 108, 0.1) !important; /* Fondo dorado suave */
    border-color: #c49a6c !important;
}

/* Asegurar que el icono y el texto estén alineados */
.es-property-fields__item svg, 
.es-property-fields__item i {
    margin-right: 8px !important;
    fill: #c49a6c !important; /* Iconos dorados */
    color: #c49a6c !important;
}

/* --- FIX PARA FLECHAS DEL CARRUSEL EN MÓVIL --- */
.slick-arrow,
.slick-prev, 
.slick-next {
    z-index: 999 !important; /* Las pone muy por encima del enlace de la imagen */
    pointer-events: auto !important; /* Fuerza a que intercepten el clic del dedo/mouse */
}

/* Opcional: Agrandar un poco el área táctil en móviles para evitar tocar la foto por error */
@media (max-width: 900px) {
    .slick-prev, 
    .slick-next {
        width: 40px !important;
        height: 40px !important;
        background-color: rgba(26, 32, 44, 0.5) !important; /* Un fondito oscuro semi-transparente */
        border-radius: 50% !important; /* Redonditas */
    }
    
    /* Centrar bien el icono dentro del nuevo círculo */
    .slick-prev::before, 
    .slick-next::before {
        line-height: 40px !important;
    }
}

/* =========================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================= */
.mi-btn-whatsapp-flotante {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mi-btn-whatsapp-flotante:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.mi-btn-whatsapp-flotante svg {
    width: 35px;
    height: 35px;
    fill: #ffffff; /* Color blanco para el ícono */
}

/* Ajuste para móviles: hacerlo un poco más sutil */
@media (max-width: 768px) {
    .mi-btn-whatsapp-flotante {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    .mi-btn-whatsapp-flotante svg {
        width: 30px;
        height: 30px;
    }
}

/* =========================================
   FIX: SUPERPOSICIÓN DE LOGO Y BADGE EN ZOOM
   ========================================= */

/* 1. Cambiar altura fija por altura mínima para que el contenedor pueda expandirse */
.mi-hero-propiedad {
    height: auto !important; 
    min-height: 60vh !important; 
}

/* 2. Ponerle un "campo de fuerza" superior al contenido */
.mi-hero-contenido {
    margin-top: auto !important; /* Mantiene el contenido anclado abajo */
    padding-top: 160px !important; /* Espacio de seguridad INQUEBRANTABLE para el logo */
}

/* =========================================
   OCULTAR ENCABEZADO REPETIDO DE ESTATIK
   ========================================= */
.es-single__header {
    display: none !important;
}


/* =========================================
   ESTILO PARA EL PRECIO DE ALQUILER (SOLO EN EL HERO)
   ========================================= */
.mi-hero-precio .mi-precio-alquiler {
    color: #c49a6c !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6) !important;
    background: transparent !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Ajuste de tamaño para móviles (igual que el precio de venta) */
@media (max-width: 768px) {
    .mi-hero-precio .mi-precio-alquiler { 
        font-size: 26px !important; 
    }
}