/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/* Add your own styles here: */

html, body {
    overflow-x: hidden !important;
    position: relative;
}

.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row-reverse;
}

.grecaptcha-badge {
    visibility: hidden;
}

/* CUSTOM STYLE */
/* ── Secciones ── */
/* ── #hero ── */
.hero-title em { font-style: italic; }
.hero-trust-divider { 
    width: 40px !important; 
    border: none !important; 
    height: 1px !important; 
    background-color: #F4D075 !important; 
    margin: 12px 0 !important; 
}

/* ========================================================
   1. CONTENEDOR PRINCIPAL DE LA BARRA (100% ANCHO Y REDONDEADO)
   ======================================================== */
.hero-search,
.hero-search-html form {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr auto !important;
    gap: 0 !important; /* Eliminamos el espacio entre campos */
    align-items: stretch !important;
    background: #F4F1EA !important; /* Fondo crema claro de la foto 2 */
    border-radius: 8px !important;  /* Redondeado de TODA la barra */
    overflow: hidden !important;   /* Recorta las esquinas del botón y los select */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid #E2D9CC !important;
    padding: 0 !important;
    margin: 30px 0 0 0 !important; /* Eliminado 'auto' lateral para no centrar/limitar */
    max-width: 100% !important;   /* AHORA OCUPA EL 100% DEL ANCHO */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ========================================================
   2. LIMPIEZA DE PADDING LATERAL DE CONTENEDORES WPBAKERY
   ======================================================== */
#buscador .vc_column-inner,
#buscador .wpb_wrapper,
#buscador .w-html {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ========================================================
   3. CAMPOS INTERNOS Y LÍNEAS DIVISORIAS
   ======================================================== */
.hero-search__field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    border-right: 1px solid #E2D9CC !important; /* Fina línea divisoria */
    background: transparent !important;
    margin: 0 !important;
}

/* Quitar línea al último campo antes del botón */
.hero-search__field:nth-last-child(2) {
    border-right: none !important;
}

/* ========================================================
   4. ETIQUETAS (LABELS) DORADAS
   ======================================================== */
.hero-search label,
.hero-search-html label,
.hero-search__field label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #C5A059 !important; /* Dorado idéntico a la Imagen 2 */
    margin-bottom: 2px !important;
}

/* ========================================================
   5. ELIMINAR LAS CAJAS BLANCAS DE LOS SELECTS
   ======================================================== */
.hero-search select,
.hero-search-html select,
.hero-search__field select {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;           /* Quitamos bordes individuales */
    border-radius: 0 !important;      /* Quitamos redondeados individuales */
    background: transparent !important;/* Hacemos transparente el fondo blanco */
    color: #1C1A17 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    outline: none !important;
    box-shadow: none !important;
    height: auto !important;
    cursor: pointer !important;
    
    /* Ocultamos las flechas por defecto del sistema */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* ========================================================
   6. BOTÓN BUSCAR ACOPLADO (DERECHA)
   ======================================================== */
.hero__search-btn,
.hero-search__btn {
    background: #F7D57F !important; /* Amarillo/Dorado idéntico a la foto 2 */
    color: #FFFFFF !important;       /* Texto blanco */
    border: none !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0 40px !important;
    margin: 0 !important;
    border-radius: 0 !important;     /* El overflow del padre le da la curva final */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    transition: background 0.2s ease !important;
}

.hero__search-btn:hover,
.hero-search__btn:hover {
    background: #E2BF69 !important;
}

/* ========================================================
   7. RESPONSIVE (MÓVILES Y TABLETS)
   ======================================================== */
@media (max-width: 1024px) {
    .hero-search,
    .hero-search-html form {
        grid-template-columns: 1fr 1fr !important;
    }
    .hero-search__btn,
    .hero__search-btn {
        grid-column: 1 / -1 !important;
        padding: 16px !important;
    }
}

@media (max-width: 600px) {
    .hero-search,
    .hero-search-html form {
        grid-template-columns: 1fr !important;
    }
    .hero-search__field {
        border-right: none !important;
        border-bottom: 1px solid #E2D9CC !important;
    }
}

/* ── #quienes-somos ── */
.section-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #1C1A17; margin-bottom: 16px; }
.qs-slider-wp img { object-fit: cover; width: 100%; }

/* ── #servicios ── */
.servicio-card-main { position: relative; overflow: hidden; }
.servicio-card-main .vc_column-inner { height: 100%; }
.servicio-card-main .wpb_wrapper { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.servicio-card-main .wpb_wrapper > * { position: relative; z-index: 1; }
.servicio-card-main .servicio-card-main-bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.servicio-card-main .servicio-card-main-bg img { width: 100%; height: 100%; object-fit: cover; }
.servicio-card-main .servicio-card-main-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,0.05) 30%, rgba(17,17,17,0.8) 100%); }
.servicio-num { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; color: #B8855A; margin-bottom: 10px; }
.servicio-card-link.w-btn { background: none !important; border: none; padding: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #1C1A17; box-shadow: none; }
.servicio-card-link.w-btn:hover { color: #B8855A; background: none; }
.servicio-card-link--white.w-btn { color: rgba(255,255,255,0.85); }
.servicio-card-link--white.w-btn:hover { color: #ffffff; }

/* ── #equipo ── */
.equipo-section { position: relative; overflow: hidden; }
.equipo-card-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.equipo-card-langs { margin-top: 16px; }
.lang-badge { display: inline-block; padding: 4px 12px; margin: 0 6px 6px 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; font-size: 0.75rem; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── #acompanamiento ── */
.acomp-left-img { position: relative; overflow: hidden; }
.acomp-left-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,26,23,0) 55%, rgba(28,26,23,0.35) 100%); pointer-events: none; }
.acomp-step { border-top: 1px solid rgba(28,26,23,0.12); padding-top: 22px; margin-bottom: 6px; }
.acomp-step:first-child { border-top: 0; padding-top: 0; }

/* ── #zonas ── */
.zona-tile { position: relative; overflow: hidden; height: 220px; }
.zona-tile--featured { height: 464px; }
.zona-tile .w-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.zona-tile .w-image img { width: 100%; height: 100%; object-fit: cover; }
.zona-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%); z-index: 1; pointer-events: none; }
.zona-tile__label { position: absolute; left: 24px; bottom: 20px; z-index: 2; flex-direction: column; align-items: flex-start; gap: 2px; }
.zona-tile__label h3 { color: #fff; margin: 0; }
.zona-tile__label .w-text { color: rgba(255,255,255,0.75); font-size: 0.85rem; }
.zonas-header .w-btn { margin-top: 0; }
@media (max-width: 1024px) { .zona-tile--featured { height: 320px; } }
@media (max-width: 600px) { .zona-tile { height: 180px; } .zona-tile--featured { height: 240px; } }

/* ── #testimonios ── */
#testimonios .section-label { display: block; text-align: center; }
#testimonios .section-subtitle { max-width: 560px; margin: 0 auto; text-align: center; color: #7A7168; font-size: 1.1rem; }
.testimonial-card::before { content: "\201C"; font-family: 'Fraunces', serif; font-size: 56px; line-height: 1; color: #B8855A; display: block; margin-bottom: 12px; }
.testimonial-author { gap: 14px; margin-top: 24px; }
.testimonial-avatar { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #E8DFD2; color: #1C1A17; font-weight: 600; font-size: 14px; flex-shrink: 0; }

/* ── #cta-final ── */
.cta-final-row .l-section-overlay { background: linear-gradient(135deg, rgba(10,9,8,0.88) 0%, rgba(10,9,8,0.7) 100%); }
.btn-outline-white { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.5) !important; }
.btn-outline-white:hover { border-color: #fff !important; background: rgba(255,255,255,0.08) !important; }
.cta-final-row .w-iconbox-title a { color: #fff; }
.cta-final-row .w-iconbox-title a:hover { color: #B8855A; }

.hero-section .l-section-overlay { z-index: 0; }
.btn-outline-white .w-btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
.btn-outline-white .w-btn:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
.hero-trust-divider { position: relative; }
.hero-trust-divider::after { content: ''; position: absolute; top: 50%; left: 0; width: 40px; height: 1px; background: #B8855A; }

.equipo-section > .l-section-h { position: relative; z-index: 3; }
.equipo-grid-row { position: relative; z-index: 3; }
.equipo-card { overflow: hidden; }
.equipo-card__photo img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.equipo-card__langs { margin-top: 8px; }
.equipo-card__langs .lang-badge { display: inline-block; padding: 4px 12px; margin: 0 6px 6px 0; font-size: 12px; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; }

.acomp-left-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,26,23,0.45), rgba(28,26,23,0)); pointer-events: none; }
.acomp-step-num { font-family: 'Fraunces', serif; }

.testimonial-card { position: relative; height: 100%; }
.testimonial-card::before { content: '\201C'; font-family: Fraunces, serif; font-size: 64px; line-height: 1; color: #B8855A; display: block; margin-bottom: 12px; }
.testimonial-text { color: #1C1A17; }
.testimonial-author { margin-top: 24px; gap: 14px; }
.testimonial-avatar { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #E8DFD2; color: #1C1A17; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.testimonial-name { font-weight: 600; }
.testimonial-origin { font-size: 0.85rem; opacity: 0.6; }
.section-subtitle { margin-bottom: 0; }

.cta-final-row { background: linear-gradient(135deg, rgba(10,9,8,0.88) 0%, rgba(10,9,8,0.7) 100%); }
.btn-outline-white .w-btn, .btn-outline-white.w-btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
.btn-outline-white .w-btn:hover, .btn-outline-white.w-btn:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.cta-final-contact { gap: 2rem; }
.cta-final-contact .w-iconbox-title { font-size: 0.9rem; font-weight: 400; }
.cta-final-contact .w-iconbox-title a, .cta-final-contact .w-iconbox-title { color: rgba(255,255,255,0.85); }
.cta-final-contact .w-iconbox-icon { color: #B8855A; }

/* ======================================================
   PIE DE PÁGINA
   ====================================================== */

/* Redes Sociales */
.footer-social .w-socials-list { 
    justify-content: flex-start !important; /* Alineado a la izquierda */
}
.footer-social .w-socials-item-link { 
    color: #F4D075; 
}
.footer-social .w-socials-item-link:hover { 
    color: #ffffff; 
}

/* Items de Contacto */
.footer-contact-item { 
    color: rgba(255, 255, 255, 0.75) !important; 
}
.footer-contact-item .w-iconbox-icon { 
    color: #F4D075; 
}
.footer-contact-item a { 
    color: rgba(255, 255, 255, 0.75) !important; 
}
.footer-contact-item a:hover { 
    color: #F4D075 !important; 
}

/* Menú Principal del Footer */
.footer-menu .menu { 
    list-style: none; 
    margin: 0 !important; 
    padding: 0 !important; 
}
.footer-menu li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.footer-menu a { 
    color: rgba(255, 255, 255, 0.75) !important; 
    font-size: 15px; 
    line-height: 2.2; 
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: color 0.3s ease;
}
.footer-menu a:hover { 
    color: #F4D075 !important; 
}

/* Menú Legal (Políticas, cookies, etc.) */
.footer-legal-menu .menu { 
    display: flex !important; 
    justify-content: flex-start !important; /* Alineado a la izquierda */
    gap: 28px; 
    list-style: none; 
    margin: 0 !important; 
    padding: 0 !important; 
}
.footer-legal-menu a { 
    color: rgba(255, 255, 255, 0.75) !important; /* Color actualizado a 0.75 */
    font-size: 14px; 
    transition: color 0.3s ease;
}
.footer-legal-menu a:hover { 
    color: #F4D075 !important; 
}

/* ======================================================
   ALINEACIÓN ESTRICTA A LA IZQUIERDA DE ÍTEMS DE CONTACTO
   ====================================================== */

/* 1. Forzar contenedor del IconBox a la izquierda */
.footer-contact-item,
.footer-contact-item.align_center {
    justify-content: flex-start !important; /* Cambia el center por flex-start */
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* 2. Alinear el icono y el texto pegados al margen izquierdo */
.footer-contact-item .w-iconbox-icon {
    margin-left: 0 !important;
    margin-right: 12px !important; /* Espacio entre icono y texto */
}

/* 3. Limpiar residuos de margen en los textos/párrafos */
.footer-contact-item .w-iconbox-meta,
.footer-contact-item .w-iconbox-text,
.footer-contact-item .w-iconbox-text p {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Adaptación Responsive */
@media (max-width: 600px) { 
    .footer-social .w-socials-list, 
    .footer-legal-menu .menu { 
        justify-content: flex-start !important; 
    } 
}

/* ── Refinado #servicios ── */
.servicio-card-02::before { content: "02"; }
.servicio-card-03::before { content: "03"; }
.servicio-card-04::before { content: "04"; }
.servicio-card-05::before { content: "05"; }

.servicio-card-02::before,
.servicio-card-03::before,
.servicio-card-04::before,
.servicio-card-05::before {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 80px;
    font-weight: 700;
	font-family: "Playfair Display" !important;
    color: rgba(244, 208, 117, 0.3);
    line-height: 1;
    z-index: 1;
}

/* ======================================================
   REJILLA DE SERVICIOS - MODO ESCRITORIO (PC > 1024PX)
   ====================================================== */

@media (min-width: 1025px) {

    /* 1. Limpieza de fondos por defecto y sombras en la rejilla */
    .servicio-card,
    .servicio-card .vc_column-inner,
    .servicio-card [class*="us_custom_"] {
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }

    /* 2. TARJETAS SECUNDARIAS (430px de altura fija) */
    .servicio-card {
        flex: none !important; /* CLAVE: Desactiva el reparto porcentual que aplastaba las cajas */
        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;
        box-sizing: border-box !important;
    }

    /* 3. TARJETA PRINCIPAL IZQUIERDA (880px = 2 celdas de 430px + 20px espacio) */
    .servicio-card-main {
        flex: none !important;
        height: 880px !important;
        min-height: 880px !important;
        max-height: 880px !important;
        box-sizing: border-box !important;
    }

    /* 4. Borde de rejilla y paddings */
    .servicio-card .vc_column-inner {
        border: 1px solid rgba(224, 214, 198, 0.5) !important;
        padding: 35px 30px !important;
        box-sizing: border-box !important;
    }

    /* 5. Alinear contenido e interpretar el alto al 100% */
    .servicio-card > .vc_column-inner,
    .servicio-card .wpb_wrapper,
    .servicio-card-main > .vc_column-inner,
    .servicio-card-main .wpb_wrapper {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    /* 6. Empujar botones abajo del todo */
    .servicio-card .w-btn-wrapper,
    .servicio-card-main .w-btn-wrapper {
        margin-top: auto !important;
    }
}

/* ======================================================
   ESTILOS DE TEXTO Y HOVER (GLOBALES)
   ====================================================== */

/* Limpieza de texto e interacción con números */
.servicio-card h3,
.servicio-card p,
.servicio-card [class*="us_custom_"] {
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

.servicio-card h3 {
    padding-right: 55px !important; /* Espacio para el número Playfair de fondo */
    margin-bottom: 15px !important;
}

/* Transición de Hover suave en la caja */
.servicio-card,
.servicio-card .vc_column-inner,
.servicio-card [class*="us_custom_"] {
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Cambio de color de fondo al pasar el ratón */
.servicio-card:hover,
.servicio-card:hover .vc_column-inner,
.servicio-card:hover [class*="us_custom_"] {
    background-color: #E8DFD2 !important;
    background: #E8DFD2 !important;
}

/* Borde ligeramente más oscuro en Hover */
.servicio-card:hover > .vc_column-inner {
    border-color: #D6CABA !important;
}

/* ======================================================
   ELIMINAR BORDE Y FONDO DEL CONTENEDOR INTERNO DE COLUMNAS
   ====================================================== */

/* 1. Resetear el fondo y el borde de .vc_column-inner dentro de servicio-card */
.servicio-card > .vc_column-inner {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 2. Ocultar overlays/capas de fondo de WPBakery en el contenedor interno si los hubiere */
.servicio-card > .vc_column-inner > .vc_column-overlay {
    background: transparent !important;
    display: none !important;
}

/* Forzar el color dorado en cualquier etiqueta <em> del sitio */
em,
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em,
.vc_custom_heading em,
.wpb_text_column em {
    color: #F4D075 !important;
	font-style: italic !important;
	font-weight: 400 !important;
}

/* ======================================================
   1. CABECERA LATERAL FIJA DE 75PX (ESTRUCTURA VERTICAL)
   ====================================================== */
body.header_ver .l-header .l-subheader-cell.at_left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100vh !important;
    padding-top: 25px !important;
    padding-bottom: 35px !important;
    box-sizing: border-box !important;
}

/* Logo en la parte superior */
body.header_ver .l-header .ush_image_1 {
    margin: 0 !important;
}

/* Botón de hamburguesa centrado */
body.header_ver .l-header .ush_menu_1,
body.header_ver .l-header .w-nav-control {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: auto 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

/* Selector de Idiomas abajo */
body.header_ver .l-header .ush_text_1 {
    margin-bottom: 5px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

body.header_ver .l-header .ush_text_1 .w-text-value {
    color: #F4D075 !important; /* "ES" resaltado en dorado */
}

/* Ocultar la lista estándar del menú */
body.header_ver .l-header .w-nav-list.level_1:not(.us-menu-custom-open) {
    display: none !important;
}

/* ======================================================
   2. DESPLEGABLE OVERLAY FULLSCREEN (SEGÚN MAQUETA KOSTA95)
   ====================================================== */
body.header_ver .l-header .w-nav-list.level_1.us-menu-custom-open {
    display: flex !important;
    flex-direction: column !important; /* Obligamos a que sea una lista vertical */
    justify-content: flex-start !important; 
    flex-wrap: nowrap !important;
    position: fixed !important;
    top: 0 !important;
    left: 75px !important;
    width: calc(100vw - 75px) !important;
    height: 100vh !important;
    background-color: #171513 !important; /* Fondo oscuro exacto */
    padding: 80px 10% 60px 80px !important;
    box-sizing: border-box !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
}

/* Columna Izquierda: Lista de Enlaces principales */
body.header_ver .l-header .w-nav-list.level_1.us-menu-custom-open > .w-nav-item {
    display: block !important;
    width: 60% !important; /* Ocupa la parte izquierda */
    max-width: 550px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Tipografía de títulos del Menú principal */
body.header_ver .l-header .w-nav-list.level_1.us-menu-custom-open > .w-nav-item > .w-nav-anchor {
    font-family: 'Fraunces', 'Playfair Display', serif !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    color: #E8DFD2 !important;
    padding: 20px 0 !important;
    transition: color 0.3s ease !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

body.header_ver .l-header .w-nav-list.level_1.us-menu-custom-open > .w-nav-item > .w-nav-anchor:hover {
    color: #F4D075 !important;
}

/* Estilos para los submenús (ej. Servicios) para que empujen hacia abajo */
body.header_ver .l-header .w-nav-list.level_1.us-menu-custom-open .w-nav-list.level_2 {
    position: static !important; /* Rompe el absolutismo para empujar el contenido */
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 0 20px 20px !important; /* Sangría a la izquierda */
    border: none !important;
}

/* Solo se muestra si el elemento padre está abierto (.opened) */
body.header_ver .l-header .w-nav-list.level_1.us-menu-custom-open .w-nav-item.opened > .w-nav-list.level_2 {
    display: block !important;
}

/* Links de los submenús */
body.header_ver .l-header .w-nav-list.level_1.us-menu-custom-open .w-nav-item.level_2 > .w-nav-anchor {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 10px 0 !important;
    transition: color 0.3s ease !important;
}

body.header_ver .l-header .w-nav-list.level_1.us-menu-custom-open .w-nav-item.level_2 > .w-nav-anchor:hover {
    color: #E8DFD2 !important;
}

/* Columna Derecha Inyectada por CSS: Información de contacto */
body.header_ver .l-header .w-nav-list.level_1.us-menu-custom-open::after {
    content: "OFICINA\A Mar Adriático, 4 · Torre del Mar, 29740 · Málaga\A\A TELÉFONO\A +34 951 204 644\A\A EMAIL\A info@kosta95.com";
    white-space: pre-wrap;
    position: absolute !important; /* Clave: Lo sacamos del flujo para ponerlo a la derecha */
    top: 100px !important; /* Alineado a la altura de los enlaces */
    right: 10% !important; /* Pegado a la derecha */
    width: 30% !important;
    max-width: 350px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: 0.02em !important;
    pointer-events: auto !important;
}

/* Botón de Cierre X */
.w-nav-close-btn {
    position: fixed !important;
    top: 35px !important;
    right: 45px !important;
    font-size: 32px !important;
    color: #FAF8F3 !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    transition: color 0.2s ease !important;
}

.w-nav-close-btn:hover {
    color: #F4D075 !important;
}

/* ======================================================
   CORRECCIÓN SEGURA PARA ROYAL SLIDER (.qs-slider)
   ====================================================== */

/* 1. Altura estable para la columna del slider */
.qs-slider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 480px !important; /* Mantiene la altura visual sin colapsar */
    overflow: hidden !important;
    border-radius: 8px !important;
}

.qs-slider .w-slider-h,
.qs-slider .royalSlider {
    width: 100% !important;
    height: 100% !important;
}

/* 2. Ajuste de imágenes */
.qs-slider .rsContent img.rsImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. FLECHAS CIRCULARES BLANCAS */
.qs-slider .rsArrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    z-index: 25 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0.9 !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.qs-slider .rsArrow:hover {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.qs-slider .rsArrowLeft { left: 20px !important; }
.qs-slider .rsArrowRight { right: 20px !important; }

.qs-slider .rsArrowIcn {
    background: none !important;
    width: auto !important;
    height: auto !important;
}

.qs-slider .rsArrowLeft .rsArrowIcn::before {
    content: "←" !important;
    font-family: sans-serif !important;
    font-size: 18px !important;
    color: #1C1A17 !important;
    font-weight: bold !important;
}

.qs-slider .rsArrowRight .rsArrowIcn::before {
    content: "→" !important;
    font-family: sans-serif !important;
    font-size: 18px !important;
    color: #1C1A17 !important;
    font-weight: bold !important;
}

/* 4. BULLETS (PUNTOS) DENTRO DE LA IMAGEN ABAJO */
.qs-slider .rsNav.rsBullets {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 25 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 8px !important;
}

.qs-slider .rsNavItem.rsBullet {
    width: 8px !important;
    height: 8px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.qs-slider .rsNavItem.rsBullet span {
    display: none !important;
}

.qs-slider .rsNavItem.rsBullet.rsNavSelected {
    background: #ffffff !important;
    transform: scale(1.3) !important;
}

/* Aplicar alto total al wrapper de la columna de Quienes Somos */
#quienes-somos .vc_column-inner > .wpb_wrapper {
    height: 100% !important;
}

/* ======================================================
   GRID DE SERVICIOS (ESTRUCTURA EXACTA KOSTA95)
   ====================================================== */

/* 1. Igualar la altura general de la fila */
.g-cols.equal_height {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* ------------------------------------------------------
   TARJETA PRINCIPAL (01 - OBRA NUEVA)
   ------------------------------------------------------ */
.servicio-card-main {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.servicio-card-main > .vc_column-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 40px !important;
    box-sizing: border-box !important;
}

.servicio-card-main .wpb_wrapper {
    position: relative !important;
    z-index: 2 !important;
}

.servicio-card-main h3 {
    color: #ffffff !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 28px !important;
    margin-bottom: 15px !important;
}

.servicio-card-main p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

.servicio-card-main .btn-white .w-btn-label,
.servicio-card-main .w-btn {
    background: transparent !important;
    color: #ffffff !important;
    padding: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.servicio-card-main .w-btn:hover .w-btn-label {
    color: #F4D075 !important;
}

/* ------------------------------------------------------
   TARJETAS SECUNDARIAS (02 AL 05)
   ------------------------------------------------------ */
.servicio-card {
    position: relative !important;
    overflow: hidden !important;
    background-color: #FAF8F3 !important;
    padding: 35px 30px !important;
    border: 1px solid rgba(224, 214, 198, 0.5) !important;
    box-sizing: border-box !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.servicio-card .wpb_wrapper {
    position: relative !important;
    z-index: 2 !important;
}

.servicio-card h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 20px !important;
    color: #1C1A17 !important;
    margin-bottom: 12px !important;
    padding-right: 50px !important; /* Espacio para que el título no pise el número */
}

.servicio-card p {
    color: #5A524A !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

/* Botones dorados sutiles */
.servicio-card .w-btn {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.servicio-card .w-btn .w-btn-label {
    color: #F4D075 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.servicio-card .w-btn:hover .w-btn-label {
    color: #1C1A17 !important;
}

/* ------------------------------------------------------
   NÚMEROS EN PLAYFAIR DISPLAY DE FONDO
   ------------------------------------------------------ */
.servicio-card-02::before { content: "02"; }
.servicio-card-03::before { content: "03"; }
.servicio-card-04::before { content: "04"; }
.servicio-card-05::before { content: "05"; }

.servicio-card-02::before,
.servicio-card-03::before,
.servicio-card-04::before,
.servicio-card-05::before {
    position: absolute !important;
    top: 5px !important;
    right: 15px !important;
    font-size: 110px !important;
    font-weight: 700 !important;
    font-family: 'Playfair Display', serif !important;
    color: rgba(244, 208, 117, 0.25) !important; /* Tono dorado traslúcido exacto */
    line-height: 1 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* ======================================================
   CORRECCIÓN ESTRUCTURAL DE LA REJILLA DE SERVICIOS
   ====================================================== */

/* 1. Forzar a que las columnas principales de WPBakery ocupen todo el alto */
.g-cols > .vc_col-sm-3,
.g-cols > .vc_col-sm-3 > .vc_column-inner,
.g-cols > .vc_col-sm-3 > .vc_column-inner > .wpb_wrapper {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* 2. Repartir cada columna secundaria en 2 tarjetas de alto idéntico (50% cada una) */
.g-cols > .vc_col-sm-3 .servicio-card {
    flex: 1 1 50% !important;
    min-height: 50% !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* 3. Ajuste de paddings e interiores */
.servicio-card .vc_column-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

/* 4. Evitar que el texto invada el número gigante superior derecho */
.servicio-card h3 {
    padding-right: 60px !important;
}

/* ======================================================
   EFECTO ELEVACIÓN EN HOVER PARA TARJETAS DE PROPIEDADES
   ====================================================== */

/* 1. Preparar la tarjeta contenedora para la transición */
.w-grid-item.type-propiedad {
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform, box-shadow;
    border-radius: 8px; /* Opcional: mantiene esquinas pulidas si hay sombra */
}

/* 2. Efecto de elevación + sombra sutil al pasar el ratón */
.w-grid-item.type-propiedad:hover {
    transform: translateY(-8px) !important; /* Eleva la tarjeta 8px hacia arriba */
    box-shadow: 0 16px 32px rgba(28, 26, 23, 0.12) !important; /* Sombra suave y sofisticada */
}

/* ======================================================
   ZOOM INTERNO CONTENIDO EN LA FOTO DE LA PROPIEDAD
   ====================================================== */

/* 1. Recortar cualquier desbordamiento dentro de la caja de la imagen */
.w-grid-item.type-propiedad .w-image,
.w-grid-item.type-propiedad .w-image-h {
    overflow: hidden !important;
    border-radius: 6px 6px 0 0; /* Opcional: respeta el redondeado superior */
}

/* 2. Preparar la imagen para el zoom */
.w-grid-item.type-propiedad .w-image img {
    transition: transform 0.5s ease !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* 3. Hacer el zoom real (scale) dentro del contenedor recortado */
.w-grid-item.type-propiedad:hover .w-image img {
    transform: scale(1.06) !important; /* Zoom sutil del 6% */
}

/* ======================================================
   EMPUNJAR 1ª TARJETA A LA DERECHA CON MARGEN DE 50PX
   ====================================================== */

/* 1. Mover el contenedor completo a la derecha dentro de su columna en escritorio, tablet y móvil */
@media screen and (min-width: 600px) {
    .g-cols > .equipo-card:nth-child(1) .vc_column-inner {
        margin-left: auto !important;
        margin-right: 50px !important;
        box-sizing: border-box !important;
    }
}

/* 2. Mantener los textos leíbles alineados a la izquierda */
.g-cols > .equipo-card:nth-child(1) .equipo-card__body,
.g-cols > .equipo-card:nth-child(1) h3,
.g-cols > .equipo-card:nth-child(1) p,
.g-cols > .equipo-card:nth-child(1) .w-text {
    text-align: left !important;
}

/* 3. Ajustar los idiomas a su flujo natural */
.g-cols > .equipo-card:nth-child(1) .equipo-card__langs p {
    display: block !important;
    text-align: left !important;
}

/* ======================================================
   ELIMINAR PADDING EN LAS COLUMNAS DE EQUIPO
   ====================================================== */

.equipo-card,
.equipo-card > .vc_column-inner {
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ======================================================
   ALINEACIÓN DIFERENCIADA EN SECCIÓN ACOMPAÑAMIENTO (#ACOMPANAMIENTO)
   ====================================================== */

/* 1. Activar Flexbox a la altura completa en la fila principal */
#acompanamiento .g-cols {
    display: flex !important;
    align-items: stretch !important; /* Ambas columnas miden lo mismo de alto */
}

/* 2. Columna IZQUIERDA: Alineada abajo */
#acompanamiento .g-cols > .vc_col-sm-6:first-child > .vc_column-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Empuja el contenido al fondo */
    height: 100% !important;
}

/* 3. Columna DERECHA: Centrada verticalmente */
#acompanamiento .g-cols > .vc_col-sm-6:last-child > .vc_column-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centra la lista de pasos en el medio */
    height: 100% !important;
}

/* ======================================================
   HOVER EN PASO: CAMBIO DE FONDO DEL NÚMERO A #D4AD4F
   ====================================================== */

/* 1. Transición suave para el fondo del número */
.acomp-step .acomp-step-num {
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* 2. Cambiar el fondo al hacer hover en la fila completa (.acomp-step) */
.acomp-step:hover .acomp-step-num {
    background-color: #d4ad4f !important;
    background: #d4ad4f !important;
}

/* ======================================================
   FILA DE 7 COLUMNAS [id="7-columnas"]
   ====================================================== */

/* 1. Activar Flexbox sin salto de línea en el contenedor */
[id="7-columnas"].g-cols,
#\37-columnas {
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* 2. Forzar a cada una de las 7 columnas a ocupar exactamente el 14.28% */
[id="7-columnas"] > .wpb_column,
[id="7-columnas"] > .vc_col-sm-1 {
    width: 14.2857% !important;
    flex: 0 0 14.2857% !important;
    max-width: 14.2857% !important;
}

/* ======================================================
   ZOOM ULTRA-SUAVE DE FONDO CON TEXTO 100% ESTÁTICO
   ====================================================== */

/* 1. Marco rígido con bordes redondeados y corte de desbordamiento */
[id="7-columnas"] .wpb_column {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    cursor: pointer;
}

/* 2. Capa con la imagen de fondo: transición extendida a 0.7s para máxima suavidad */
[id="7-columnas"] .vc_column-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: 100% !important;
    border-radius: 8px !important;
    /* Transición progresiva más larga y fluida */
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: center center !important;
    will-change: transform;
}

/* 3. Capa de oscurecimiento suave */
[id="7-columnas"] .vc_column-overlay {
    border-radius: 8px !important;
    transition: background 0.6s ease !important;
    z-index: 1 !important;
}

/* 4. Contenedor de textos: fijo en primer plano */
[id="7-columnas"] .wpb_wrapper {
    position: relative !important;
    z-index: 2 !important;
    /* Cancelación inversa fluida del zoom para que el texto no se mueva 1px */
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform-origin: bottom center !important;
    will-change: transform;
}

/* ---------------- EFECTOS EN HOVER ---------------- */

/* Zoom sutil del 5% en la imagen de fondo (menos agresivo) */
[id="7-columnas"] .wpb_column:hover .vc_column-inner {
    transform: scale(1.05) !important;
}

/* Compensación matemática perfecta para mantener el texto inmóvil (1 / 1.05 = 0.952) */
[id="7-columnas"] .wpb_column:hover .wpb_wrapper {
    transform: scale(0.952) !important;
}

/* Oscurecido sutil progresivo */
[id="7-columnas"] .wpb_column:hover .vc_column-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%) !important;
}

@media (max-width:900px){

    /* Permitir el salto de línea */
    #\37-columnas.g-cols,
    [id="7-columnas"].g-cols{
        flex-wrap:wrap !important;
    }

    /* Dos columnas */
    #\37-columnas > .wpb_column,
    [id="7-columnas"] > .wpb_column{
        flex:0 0 calc(50% - 10px) !important;
        width:calc(50% - 10px) !important;
        max-width:calc(50% - 10px) !important;
    }

}

@media (max-width:600px){

    #\37-columnas > .wpb_column,
    [id="7-columnas"] > .wpb_column{
        flex:0 0 100% !important;
        width:100% !important;
        max-width:100% !important;
    }

}

/* ========================================================
   EFECTO HOVER PARA TARJETAS EN "tarjetas-lo-que-nos-mueve"
   ======================================================== */

/* 1. Transición base suave para las columnas/tarjetas de la fila */
.tarjetas-lo-que-nos-mueve .vc_column-inner {
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                border-color 0.35s ease !important;
    will-change: transform, box-shadow;
    border-radius: 8px !important;
    cursor: default;
}

/* 2. Efecto Hover: Eleva la tarjeta y proyecta sombra */
.tarjetas-lo-que-nos-mueve .wpb_column:hover .vc_column-inner {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 32px rgba(28, 26, 23, 0.12) !important;
    border-color: #F4D075 !important; /* Borde dorado al hacer hover */
}

/* 3. Cambio de color en el título (h4) al hacer hover */
.tarjetas-lo-que-nos-mueve .wpb_column:hover h4 {
    color: #B8855A !important;
    transition: color 0.3s ease !important;
}

.hero-search label,
.hero-search__field label {
    text-align: left !important;
}

/* ========================================================
   EFECTO ELEVARSE + ZOOM INTERNO EN IMAGEN
   ======================================================== */

/* 1. Máscara que recorta y se eleva (Contenedor .w-image-h) */
.img-efecto-zoom .w-image-h {
    display: block !important;
    overflow: hidden !important; /* MÁSCARA: Evita que el zoom se salga de los bordes */
    border-radius: 8px !important; /* Esquinas redondeadas */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform, box-shadow;
}

/* 2. EFECTO ELEVARSE: La caja sube 8px y proyecta sombra al hacer hover */
.img-efecto-zoom:hover .w-image-h {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 32px rgba(28, 26, 23, 0.18) !important;
}

/* 3. Fotografía interna */
.img-efecto-zoom img {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
    display: block !important;
    width: 100% !important;
}

/* 4. EFECTO ZOOM INTERNO: La foto crece dentro del marco recortado */
.img-efecto-zoom:hover img {
    transform: scale(1.08) !important; /* Zoom del 8% */
}

/* ======================================================
   LISTA CON TICKS DORADOS (SÓLO PARA .lista-ticks)
   ====================================================== */

/* 1. Limpiar el contenedor UL de reglas nativas */
.lista-ticks ul,
ul.lista-ticks {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-inline-start: 0 !important;
    margin-left: 0 !important;
}

/* 2. Estilar los elementos de la lista LI */
.lista-ticks ul li,
ul.lista-ticks li {
    list-style: none !important;
    list-style-type: none !important;
    position: relative !important;
    padding-left: 28px !important; /* Espacio para el icono */
    margin-bottom: 10px !important;
    line-height: 1.6 !important;
}

/* 3. Inyectar el Check Dorado (✓) */
.lista-ticks ul li::before,
ul.lista-ticks li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #F4D075 !important; /* Tono dorado del tema */
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

/* 4. Ocultar los spans vacíos dentro de la lista con ticks */
.lista-ticks ul li > span:empty,
ul.lista-ticks li > span:empty {
    display: none !important;
}

/* ======================================================
   IGUALAR ALTURA DE IMÁGENES EN PROPIEDADES Y BLOG
   ====================================================== */

/* 1. Forzar a la etiqueta <img> a fijar una altura estricta y recortar */
.prop-grid .usg_image_1 img,
.grid-entradas-blog .usg_image_1 img,
.layout_14638 .usg_image_1 img,
.layout_14760 .usg_image_1 img {
    height: 240px !important;            /* ALTURA FIJA EXACTA EN PÍXELES */
    max-height: 240px !important;
    min-height: 240px !important;
    width: 100% !important;
    object-fit: cover !important;        /* Recorta la foto proporcionalmente */
    object-position: center !important;  /* Centra el encuadre */
    display: block !important;
}

/* 2. Ajustar los contenedores envolventes para que no colapsen */
.prop-grid .usg_image_1,
.prop-grid .usg_image_1 .w-image-h,
.grid-entradas-blog .usg_image_1,
.grid-entradas-blog .usg_image_1 .w-image-h,
.layout_14638 .usg_image_1,
.layout_14638 .usg_image_1 .w-image-h {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}