/* @font-face{ font-family: NombreFont; src: url(fonts/NombreFont-Bold.otf); } */
:root {
    --color-blue-hard: #003d92;
    --color-dark-gray: #5b5b5d;
    --color-blue: #1d71b9;

    /* NUEVOS COLORES SELLO IMPERIAL */
    --gold-primary: #b89255;
    --gold-light: #e5cb9b;
    --text-dark-premium: #1a1a1a;
    --text-muted-premium: #4a4a4a;
}
/*=============================================================================
GENERAL
=============================================================================*/
body {
    overflow-x: hidden;
    position: relative;
}

body {
    font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Playfair Display", serif;
}

html {
    overflow-x: hidden;
}
*::-moz-selection {
    background: var(--color-blue-hard);
    color: #fff;
    text-shadow: none;
}
*::selection {
    background: var(--color-blue-hard);
    color: #fff;
    text-shadow: none;
}
.bg-default {
    background-color: #eee;
    border: 1px solid #ddd;
}
.bg-default-02 {
    background-color: #ddd;
    border: 1px solid #ccc;
}
.text-black {
    color: #000;
}
.bg-cover-index {
    background-image: url("http://placehold.it/1920x1080");
}
/*=============================================================================
THANKS PAGE
=============================================================================*/
.thanks-page {
    height: 60vh;
}
.thanks-page img {
    width: 400px;
    max-width: 100%;
}

/*=============================================================================
NAVBAR (RESPONSIVO TOTAL: ESCRITORIO, TABLET Y CELULARES)
=============================================================================*/
.navbar {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}

/* Base transparente común para todos los dispositivos */
.navbar-transparent-premium {
    position: absolute;
    width: 100%;
    z-index: 1050;
    /* background: rgba(18, 18, 18, 0.4) !important; */
    background: transparent;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 90px;
    display: flex;
    align-items: center;
}

.img-logo-premium {
    width: 125px !important;
    height: auto !important;
    display: block;
}

.nav-search-svg {
    width: 17px !important;
    height: 17px !important;
    display: inline-block;
    object-fit: contain;
    transition: transform 0.2s ease;
}
.nav-search-svg:hover {
    transform: scale(1.08);
}

/* =============================================================================
   1. ESTILOS EXCLUSIVOS PARA MÓVILES Y TABLETS (Menos de 991px)
   Aquí el menú se guarda en el botón hamburguesa y se despliega verticalmente
============================================================================= */
@media (max-width: 991px) {
    .navbar-transparent-premium {
        height: auto;
    }
    /* Forzar que el menú colapsable se oculte y use estilos de bloque */
    .navbar-transparent-premium .navbar-collapse {
        position: absolute;
        top: 100px; /* Despliega justo abajo de la barra */
        left: 0;
        width: 100%;
        padding: 25px !important;
        background-color: #bfa36a !important; /* Fondo oscuro elegante */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        border-bottom: 2px solid #bfa36a;
        z-index: 1090;
    }

    /* Fuerza a los enlaces a ponerse uno abajo del otro en vertical */
    .navbar-transparent-premium .navbar-nav {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
    }

    .navbar-toggler {
    /* background-color: #bf9656!important; */
    background-color: #bfa36a !important;
}

    .navbar-transparent-premium .nav-item {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .navbar-transparent-premium .nav-link {
        color: #ffffff !important;
        font-size: 1rem !important;
        display: block !important;
        width: auto !important;
        padding: 8px 0 !important;
        text-align: center !important;
    }

    .navbar-transparent-premium .nav-link:hover {
        color: #ebdcb9 !important;
    }

    .navbar-transparent-premium .nav-item.d-flex.align-items-center {
        justify-content: center !important;
        width: 100% !important;
        margin-top: 5px;
    }

    .navbar-transparent-premium .nav-search-svg {
        width: 20px !important; /* Un poco más grande para mejor usabilidad táctil */
        height: 20px !important;
        filter: brightness(0) invert(1) !important; /* Forzar que sea blanca en el menú oscuro */
    }
}

/* =============================================================================
   2. ESTILOS EXCLUSIVOS PARA ESCRITORIO (992px en adelante)
   Aquí se muestra tu diseño original de Figma horizontal integrado en una sola línea
============================================================================= */
@media (min-width: 992px) {
    .navbar-container-compact {
        max-width: 1200px !important;
        margin: 0 auto !important;
        width: auto !important;
        height: 100%;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 60px;
    }

    .navbar-transparent-premium .navbar-collapse {
        flex-grow: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 100%;
    }

    .navbar-transparent-premium .navbar-nav {
        display: flex !important;
        flex-direction: row !important; /* En línea horizontal sólo en pantallas grandes */
        align-items: center !important;
        height: 100%;
        margin-left: 0 !important;
    }

    .navbar-transparent-premium .nav-item {
        display: flex !important;
        align-items: center !important;
        height: 100%;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .navbar-transparent-premium .nav-link {
        color: #ffffff !important;
        font-size: 0.9rem;
        font-weight: 400;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
        display: inline-flex !important;
        align-items: center !important;
        height: 100%;
        white-space: nowrap;
    }

    .navbar-transparent-premium .nav-link:hover {
        color: #ebdcb9 !important;
    }

    .navbar-transparent-premium .nav-item.active-custom .nav-link {
        color: #ebdcb9 !important;
        position: relative;
    }

    /* Línea dorada inferior indicadora de sección activa */
    .navbar-transparent-premium .nav-item.active-custom .nav-link::after {
        content: "";
        position: absolute;
        bottom: 20px;
        left: 5px;
        right: 5px;
        height: 2px;
        background-color: #bfa36a;
    }
}

/* =============================================================================
   3. VARIACIÓN PARA VISTAS SECUNDARIAS (Fondo claro y letras oscuras)
============================================================================= */

/* Encadenamos las clases para romper el !important del fondo oscuro corporativo */
.navbar-transparent-premium.navbar-light-premium {
    background: rgba(
        255,
        255,
        255,
        0.95
    ) !important; /* Blanco semi-transparente de Figma */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Forzamos el color de texto oscuro apuntando con la misma estructura que la base */
.navbar-transparent-premium.navbar-light-premium .nav-link {
    color: #121212 !important;
}

/* Efecto Hover para las páginas claras */
.navbar-transparent-premium.navbar-light-premium .nav-link:hover {
    color: #bfa36a !important;
}

/* Color del texto para el enlace activo en páginas claras */
.navbar-transparent-premium.navbar-light-premium
    .nav-item.active-custom
    .nav-link {
    color: #bfa36a !important;
}

/* Cambia la lupa a tono oscuro mediante filtro */
.navbar-light-premium .nav-search-svg {
    filter: invert(1) brightness(0.15) !important;
}

/* Soporte móvil para el despliegue del menú claro */
@media (max-width: 991px) {
    .navbar-transparent-premium.navbar-light-premium .navbar-collapse {
        background: #ffffff !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
        border-bottom: 2px solid #bfa36a;
    }
}

/* =============================================================================
   4. CONTROL DE LÍNEA INDICADORA ACTIVA EN CUALQUIER VARIACIÓN
============================================================================= */
@media (min-width: 992px) {
    /* IMPORTANTE: Forzamos el posicionamiento relativo en el enlace activo para que la línea sepa dónde alinearse */
    .navbar-transparent-premium.navbar-light-premium
        .nav-item.active-custom
        .nav-link {
        position: relative !important;
    }

    /* Dibujamos la línea dorada adaptada a la vista clara */
    .navbar-transparent-premium.navbar-light-premium
        .nav-item.active-custom
        .nav-link::after {
        content: "" !important;
        position: absolute !important;
        bottom: 20px !important;
        left: 5px !important;
        right: 5px !important;
        height: 2px !important;
        background-color: #bfa36a !important; /* Dorado institucional */
        display: block !important;
        z-index: 1100 !important;
    }
}

/*=============================================================================
HOME
=============================================================================*/
.hero-section-premium {
    /* 1. Degradado blanco traslúcido constante para que se distingan las letras perfectamente */
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.5) 0%,
            /* Pantalla de luz clara arriba */ rgba(255, 255, 255, 0.4) 50%,
            /* Mantiene el fondo claro tras las letras */
            rgba(255, 255, 255, 0.9) 85%,
            /* Se va preparando para la transición */ #ffffff 98%,
            /* Disuelve por completo la imagen sin dejar bordes */ #ffffff 100%
        ),
        /* 2. IMPORTANTE: Ajustamos la ruta para que suba una carpeta más si tu CSS está en /css/ */
        url("../../assets/images/img-home/img1-golden-streaks.png");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 160px;
    padding-bottom: 80px;
}

.hero-title-premium {
    font-family: "Cinzel", "Playfair Display", "Didot", serif;
    font-weight: 400;
    font-size: 2.8rem;
    line-height: 1.1;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.hero-text-premium {
    font-family: "Montserrat", "Inter", "sans-serif";
    font-size: 1.15rem;
    font-weight: 400;
    color: #3d3d43;
    line-height: 1.6;
    max-width: 650px;
}

/* Contenedor del grupo de botones */
.btn-gold-container-custom {
    display: inline-flex;
    align-items: center; /* ALINEA AMBOS BOTONES PERFECTAMENTE AL CENTRO VERTICAL */
    position: relative;
}

/* Botón "Contáctanos" Ovalado */
.btn-gold-oval {
    background-color: #bfa36a;
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 10px 20px;
    border-radius: 50px; /* Completamente redondeado/ovalado */
    border: none;
    text-decoration: none;
    z-index: 1;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
}

/* Botón Circular con la Flecha Centrada */
.btn-gold-circle-arrow {
    background-color: #ebdcb9;
    color: #bfa36a !important;
    width: 37px;
    height: 37px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-left: -12px;
    z-index: 2;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.01);
    transition: background-color 0.3s ease;
}

/* Control del tamaño exacto del SVG de la Flecha */
.btn-arrow-svg {
    width: 13px !important; /* Tamaño refinado para que luzca elegante dentro del círculo */
    height: 13px !important;
    display: block;
    object-fit: contain;
}

.btn-gold-container-custom:hover .btn-gold-oval {
    background-color: #ab9058;
}

.btn-gold-container-custom:hover .btn-gold-circle-arrow {
    background-color: #e2d0a6;
}

.indicator-line-home {
    display: inline-block;
    width: 40px;
    height: 1px;
    background-color: #121212;
    vertical-align: middle;
    position: relative;
}

.indicator-line-home::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 1px;
    background-color: #121212;
    transform: rotate(55deg);
    top: -5px;
    left: 31px;
}

.indicator-line-home-testimonial {
    display: inline-block;
    width: 40px;
    height: 1px;
    background-color: #ffffff;
    vertical-align: middle;
    position: relative;
}

.indicator-line-home-testimonial::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 1px;
    background-color: #ffffff;
    transform: rotate(55deg);
    top: -5px;
    left: 31px;
}

.section-indicator-testimonio {
    font-family: serif; /* O la tipografía serif elegante de tu cabecera */
    font-size: 1.25rem;
    color: #ffffff;
    font-weight: 600;
}

.texto-diferente {
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
}
/*=============================================================================
SECCIÓN 2: INTEGRACIÓN INFINITA CON GRADIENTE DESVANECIDO (RÉPLICA FIGMA)
=============================================================================*/
.premium-about-section {
    position: relative;
    /* El fondo empieza blanco, se mantiene blanco hasta el 40% y se desvanece al dorado suave al final */
    /* background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 40%,
        rgba(184, 146, 85, 0.15) 75%,
        rgba(184, 146, 85, 0.4) 100%
    ) !important; */
    padding-bottom: 120px;
    margin-top: -1px; /* Acoplamiento matemático perfecto para eliminar líneas de render */
    z-index: 20;
}

/* --- Slider de Marcas en Fondo Blanco Limpio --- */
.brands-slider-fullwidth {
    background-color: #ffffff; /* Forzamos fondo blanco impecable arriba */
    padding: 35px 0;
    overflow: hidden;
    position: relative;
    width: 100% !important;
    display: flex;
    align-items: center;
}

.brands-slider-track {
    display: flex;
    width: max-content;
    gap: 40px; /* Reducido un poco para que no se separen tanto en pantallas comunes */
    animation: scrollBrandsInfinite 32s linear infinite;
}

.brand-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    border: 1px solid #f0f0f0; /* Bordes de tarjetas más sutiles */
    border-radius: 6px;
    padding: 12px 20px;
    background-color: #ffffff;
}

.brand-slide img {
    max-width: 90%;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.8; /* Un poco más visibles como en Figma */
    transition: all 0.3s ease;
}

/* NUEVO AJUSTE: Forzar que el logo blanco se convierta a negro absoluto */
.brand-slide img[src*="monceau.png"] {
    filter: brightness(0) !important;
    opacity: 0.8; /* Ajusta la opacidad para que tenga el mismo tono grisáceo que los demás logos */
}

@keyframes scrollBrandsInfinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Contenedor del contenido interno */
.section-content-wrapper {
    padding-top: 70px !important;
}

/* --- Bloque de Textos con Colores Oscuros (Sobre Fondo Claro) --- */
.about-text-block {
    padding-right: 30px;
}

.about-decorative-line {
    width: 35px;
    height: 1px;
    background-color: #1a1a1a; /* Línea oscura */
    margin-right: 12px;
    display: inline-block;
}

.about-subtitle-tag {
    font-family: "Montserrat", sans-serif;
    color: #1a1a1a; /* Texto oscuro */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.about-main-title {
    font-family: "Cinzel", "Playfair Display", serif;
    color: #1a1a1a; /* Título negro sofisticado */
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.about-description-text {
    font-family: "Montserrat", sans-serif;
    color: #3d3d43; /* Gris oscuro premium */
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Viñetas */
.about-features-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.about-features-list li {
    font-family: "Montserrat", sans-serif;
    color: #3d3d43;
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
}

/* Puntos de lista dorados */
.about-features-list li::before {
    content: "•";
    color: var(--gold-primary); /* Tus viñetas heredan tu dorado */
    font-size: 1.3rem;
    position: absolute;
    left: 0;
    top: -2px;
}

/* --- Reducción y Control de la Imagen Derecha --- */
.about-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.about-side-img {
    max-width: 85%; /* REDUCIDA UN POCO COMO SOLICITASTE PARA QUE QUEDE PERFECTA */
    height: auto;
    object-fit: contain; /* Cambiado a contain para respetar la proporción del brazo sin rellenar a la fuerza */
    display: block;
    margin: 0 auto;
}

/* --- Adaptación Responsiva --- */
@media (max-width: 991px) {
    .premium-about-section {
        padding-bottom: 60px;
    }

    .about-text-block {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .about-main-title {
        font-size: 2.2rem;
    }

    .about-side-img {
        max-width: 100%; /* En móviles sí toma el espacio completo útil */
    }
}

/*=============================================================================
SECCIÓN 3: NUESTROS SERVICIOS (ESTILO INTERACTIVO FIGMA)
=============================================================================*/
.premium-services-section {
    position: relative;
    background: url("../../assets/images/img-home/golden-waves-background.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-bottom: 140px;
    margin-top: -50px; /* Traslape controlado para matar bordes duros */
    z-index: 25;
}

/* Efecto de desvanecimiento superior (Difumina la entrada) */
.premium-services-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}

/* Efecto de desvanecimiento inferior (Difumina la salida a la siguiente sección) */
.premium-services-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}

/* --- Encabezados --- */
.services-subtitle-container {
    position: relative;
    z-index: 30;
}

.services-decorative-line {
    width: 35px;
    height: 1px;
    background-color: #1a1a1a;
    margin-right: 12px;
    display: inline-block;
}

.services-subtitle-tag {
    font-family: "Montserrat", sans-serif;
    color: #1a1a1a;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.services-main-title {
    font-family: "Cinzel", "Playfair Display", serif;
    color: #1a1a1a;
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 10px;
    position: relative;
    z-index: 30;
}

/* --- Pestañas de Servicios (Tabs) --- */
.services-list-group {
    position: relative;
    z-index: 30;
}

.service-item-tab {
    background-color: #ffffff;
    padding: 14px 24px;
    border-radius: 0 50px 50px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.service-tab-text {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
}

.service-tab-circle-arrow {
    background-color: #333333; /* Círculo oscuro para la flecha */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-tab-arrow {
    width: 12px;
    height: 12px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Convierte el SVG dorado a blanco para el fondo oscuro */
}

/* Estado de Pestaña Activa (Custodia en tu ejemplo) */
.service-item-tab.active-tab {
    background-color: #ebdcb9 !important;
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(184, 146, 85, 0.1);
}

.service-item-tab.active-tab .service-tab-text {
    font-weight: 700;
}

.service-item-tab:hover:not(.active-tab) {
    background-color: #f7f5f0;
    transform: translateX(6px);
}

/* --- Tarjeta de Detalle Derecha --- */
.service-detail-card {
    background-color: #ffffff;
    border-radius: 4px;
    padding: 30px;
    max-width: 480px;
    width: 100%;
    position: relative;
    z-index: 30;
}

.service-detail-image-box {
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.service-detail-img {
    height: 260px;
    object-fit: cover;
    display: block;
}

.service-detail-title {
    font-family: "Cinzel", "Playfair Display", serif;
    color: #1a1a1a;
    font-size: 1.4rem;
    font-weight: 600;
}

.service-detail-description {
    font-family: "Montserrat", sans-serif;
    color: #5b5b5d;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* --- Botón "Quiero saber más" --- */
.btn-service-more-container {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.btn-service-more-main {
    background-color: #bfa36a;
    color: #ffffff !important;
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0 24px;
    border-radius: 50px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 1;
    transition: background-color 0.3s ease;
}

.btn-service-more-circle-arrow {
    background-color: #ab9058;
    width: 38px;
    height: 38px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-left: -12px;
    z-index: 2;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease;
}

.service-more-arrow-svg {
    width: 12px;
    height: 12px;
    display: block;
    object-fit: contain;
}

.btn-service-more-container:hover .btn-service-more-main {
    background-color: #ab9058;
}
.btn-service-more-container:hover .btn-service-more-circle-arrow {
    /* background-color: #e2d0a6; */
    background-color: #ab9058;
}



.header-servicios-premium {
    display: flex;
    align-items: stretch; /* Estira todas las columnas a la altura de la más alta */
}

.header-box-title {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el "(oro y metales)" abajo del todo */
    height: 100%;
}

.text-subtitle-muted {
    color: #1a1a1a;
    font-family: "Montserrat", sans-serif;
    margin-top: 8px;
    display: block;
}

.about-title-premium {
    font-family: "Cinzel", "Playfair Display", serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.1;
}

.header-box-text {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 25px;
}

.header-box-arrow {
    display: flex;
    align-items: center;
    height: 100%;
}

.texto-info {
    text-align: end;
}

/* --- Estilos para el Encabezado de la Sección (Fila de 3 elementos) --- */
.about-title-premium {
    font-family: "Cinzel", "Playfair Display", serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    text-align: end;
}

.about-text-premium {
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    color: #333333;
    line-height: 1.6;
}

/* Flecha dorada superior derecha del bloque */
.section-arrow-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.section-arrow-trigger .arrow-icon {
    font-size: 2.5rem;
    color: #c5a872; /* Color dorado/ocre de tus capturas */
    line-height: 1;
}

.section-arrow-trigger:hover {
    transform: translate(3px, -3px);
}

/* --- Estilos de las 4 Cards Ovals/Glass --- */
.card-servicio-figma {
    /* background: rgba(255, 255, 255, 0.45); */
    /* border: 1px solid rgba(255, 255, 255, 0.7); */
    background: transparent;
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-servicio-figma:hover {
    transform: translateY(-5px);
}

.card-figma-img-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 0px;
}

.card-figma-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-figma-body {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center; /* Textos centrados como en tus primeras capturas */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.card-servicio-figma:hover .card-figma-body {
    background: rgba(255, 255, 255, 0.85); /* Más opaco en hover */
    box-shadow: 0 8px 20px rgba(184, 146, 85, 0.1);
}

.card-figma-title {
    font-family: "Cinzel", "Playfair Display", serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.3;
}

.card-figma-text {
    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem;
    color: #4a4a4a;
    line-height: 1.5;
    margin: 0;
}

/* --- Botón Ovalado "VER MÁS" --- */
.card-figma-footer {
    display: flex;
    justify-content: end;
    padding-top: 15px;
    background: transparent;
}

.btn-figma-ver-mas {
    background-color: #c5a872; /* Color exacto del botón de las cards figma */
    color: #ffffff !important;
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 8px 22px;
    border-radius: 50px; /* Botón tipo cápsula */
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-figma-ver-mas:hover {
    background-color: #b3955f;
    transform: scale(1.03);
}

/*=============================================================================
SECCIÓN 4: CREDIBILIDAD ESTILO MAPA ORGANAL FIGMA (RÉPLICA EXACTA)
=============================================================================*/
.premium-credibility-section {
    position: relative;
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #BF9656 20%,
        #ffffff 50%
    ) !important;
    padding: 80px 0 100px 0;
    z-index: 20;
    overflow: hidden;
    min-height: 800px; /* Reducido para evitar el exceso de alto de la sección */
    display: flex;
    align-items: center;
}

/* --- Imágenes de Fondo en los Extremos --- */
.credibility-bg-image {
    position: absolute;
    width: 300px;
    height: 300px;
    overflow: hidden;
    z-index: 21;
}
.credibility-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-top-left {
    top: 60px;
    left: -40px;
    border-radius: 0 50% 50% 0;
}
.img-bottom-left {
    bottom: 60px;
    left: -40px;
    border-radius: 0 50% 50% 0;
}
.img-top-right {
    top: 60px;
    right: -40px;
    border-radius: 50% 0 0 50%;
}
.img-bottom-right {
    bottom: 60px;
    right: -40px;
    border-radius: 50% 0 0 50%;
}

.credibility-content-container {
    z-index: 25;
}

.credibility-decorative-line {
    width: 30px;
    height: 1px;
    background-color: #1a1a1a;
    margin: 0 12px;
    display: inline-block;
}
.credibility-subtitle-tag {
    font-family: "Montserrat", sans-serif;
    color: #1a1a1a;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.credibility-main-title {
    font-family: "Cinzel", "Playfair Display", serif;
    color: #1a1a1a;
    font-size: 2.8rem;
    font-weight: 400;
    margin-top: 5px;
}

/* Margen controlado para la separación del título */
.row-body-offset {
    margin-top: 60px !important;
    position: relative;
}

/* --- CÍRCULO CENTRAL --- */
/* --- CÍRCULO CENTRAL (CORRECCIÓN DE BORDE DOBLE FIGMA MATCH) --- */
.credibility-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; /* Tamaño optimizado */
    height: 300px;
    background-color: #bfa36a; /* Fondo café principal */

    /* CAMBIO CLAVE: Borde grueso exterior con el color crema de Figma */
    border: 8px solid #ebdcb9;
    border-radius: 50%;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 45px;
}
.circle-inner-text {
    font-family: "Montserrat", sans-serif;
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    font-weight: 500;
}

/* --- TARJETAS BLANCAS CON EL ANCHO CORRECTO DE FIGMA --- */
.credibility-card-wrapper {
    position: relative;
    width: 100%;
    max-width: 310px; /* Incrementado para que coincida con el ancho visual de Figma */
    z-index: 30;
}

/* Altura y separación vertical optimizada (fija el alto excesivo del bug anterior) */
.row-gap-custom-left,
.row-gap-custom-right {
    gap: 90px !important;
}

.col-lg-4:first-of-type .credibility-card-wrapper {
    margin-left: auto;
    margin-right: 10px;
}
.col-lg-4:last-of-type .credibility-card-wrapper {
    margin-right: auto;
    margin-left: 10px;
}

.credibility-card {
    background-color: #F6F5F0;
    padding: 22px 24px;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(ebdcb9, 0.5);
    position: relative;
    z-index: 28;
    text-align: center;
}
.credibility-card-title {
    font-family: "Cinzel", "Playfair Display", serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.credibility-card-text {
    font-family: "Montserrat", sans-serif;
    color: #5b5b5d;
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

/* --- NÚMEROS NEGROS FLOTANTES (POSICIÓN FIJA ARRIBA / ABAJO) --- */
.credibility-num-badge {
    position: absolute;
    background-color: #000000;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    z-index: 40;
}

/* --- CONECTORES ANGULARES LIMPIOS A 45 GRADOS --- */
.credibility-card-wrapper::before {
    content: "";
    position: absolute;
    border: 1px solid #ebdcb9;
    z-index: 22;
    pointer-events: none;
}
/* Nodo terminal dorado */
.credibility-card-wrapper::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 2px solid #bfa36a;
    border-radius: 50%;
    z-index: 36;
}

/* =============================================================================
   UBICACIÓN DE BADGES Y RECTAS POR CUADRANTE (MÁXIMA PRECISIÓN)
============================================================================= */

/* --- CUADRANTE 01: TOP LEFT (01 arriba de la tarjeta) --- */
.wrapper-t1 .credibility-num-badge {
    top: -45px;
    right: 5px;
}
.wrapper-t1::before {
    top: -28px;
    right: -100px;
    width: 82px;
    height: 50px;
    border-left: none;
    border-bottom: none;
    /* Genera el quiebre diagonal limpio a 45° en la esquina */
    transform: skewX(45deg);
}
.wrapper-t1::after {
    top: 20px;
    right: -132px;
}

/* --- CUADRANTE 02: TOP RIGHT (02 arriba de la tarjeta) --- */
.wrapper-t2 .credibility-num-badge {
    top: -60px;
    left: 40px;
}
.wrapper-t2::before {
    top: -40px;
    left: -65px;
    width: 82px;
    height: 50px;
    border-right: none;
    border-bottom: none;
    transform: skewX(-45deg);
}
.wrapper-t2::after {
    top: 10px;
    left: -99px;
}

/* --- CUADRANTE 03: BOTTOM LEFT (03 abajo de la tarjeta) --- */
.wrapper-t3 .credibility-num-badge {
    bottom: -45px;
    right: 10px;
}
.wrapper-t3::before {
    bottom: -28px;
    right: -80px;
    width: 82px;
    height: 50px;
    border-left: none;
    border-top: none;
    transform: skewX(-45deg);
}
.wrapper-t3::after {
    bottom: 20px;
    right: -113px;
}

/* --- CUADRANTE 04: BOTTOM RIGHT (04 abajo de la tarjeta) --- */
.wrapper-t4 .credibility-num-badge {
    bottom: -45px;
    left: 40px;
}
.wrapper-t4::before {
    bottom: -28px;
    left: -65px;
    width: 82px;
    height: 50px;
    border-right: none;
    border-top: none;
    transform: skewX(45deg);
}
.wrapper-t4::after {
    bottom: 20px;
    left: -99px;
}

/* --- RESPONSIVO --- */
@media (max-width: 991px) {
    .premium-credibility-section {
        padding: 60px 0;
        min-height: auto;
    }
    .row-body-offset {
        margin-top: 30px !important;
    }
    .credibility-bg-image,
    .credibility-center-circle {
        display: none !important;
    }
    .credibility-card-wrapper::before,
    .credibility-card-wrapper::after {
        display: none !important;
    }
    .credibility-card-wrapper {
        max-width: 100% !important;
        margin: 0 !important;
    }
    .row-gap-custom-left,
    .row-gap-custom-right {
        gap: 30px !important;
    }
    .credibility-num-badge {
        top: -15px !important;
        left: 20px !important;
        bottom: auto !important;
        right: auto !important;
    }
}

/*=============================================================================
SECCIÓN 5: BANNER DE TRANSICIÓN DORADO COBERTURA TOTAL
=============================================================================*/
.premium-gold-banner-section {
    height: 300px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.premium-gold-banner-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
        26,
        26,
        26,
        0.45
    ); /* Oscurece sutilmente las pepitas */
}
.gold-banner-title {
    font-family: "Cinzel", "Playfair Display", serif;
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.4;
    position: relative;
    z-index: 10;
}

/*=============================================================================
SECCIÓN 6: TESTIMONIALES (RÉPLICA EXACTA DE FIGMA)
=============================================================================*/
.premium-testimonials-section {
    background: linear-gradient(to bottom, #bfa36a 0%, #9e834a 100%) !important;
    padding: 55px 0 55px 0;
    overflow: hidden; /* El corte general se hace aquí, protegiendo los laterales del navegador */
    position: relative;
}

.testimonials-decorative-line {
    width: 30px;
    height: 1px;
    background-color: #ffffff;
    margin: 0 12px;
    display: inline-block;
}
.testimonials-subtitle-tag {
    font-family: "Montserrat", sans-serif;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: start !important;
}
.testimonials-main-title {
    font-family: "Playfair Display", serif;
    color: #ffffff;
    font-size: 36px;
    font-weight: 400;
    margin-top: 5px;
    text-align: center;
}

/* =============================================================================
   ESTRUCTURA DEL CAROUSEL (FORZAR ALINEACIÓN HORIZONTAL - NO EN BLOQUE)
============================================================================= */
.testimonialsSwiper {
    padding: 60px 0 !important;
    overflow: visible !important; /* CAMBIADO DE HIDDEN A VISIBLE: Clave para que se asomen las tarjetas laterales */
    width: 100%;
}

/* Este contenedor de Swiper DEBE ser un flexbox horizontal obligatorio */
.testimonialsSwiper .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important; /* Fuerza a las tarjetas a ponerse una al lado de la otra */
    flex-wrap: nowrap !important; /* Evita que se bajen si no caben */
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Cada slider individual mantiene su tamaño fijo en la fila */
/* Busca esta regla en tu CSS y asegúrate de dejarla así: */
.testimonialsSwiper .swiper-slide {
    flex-shrink: 0 !important;
    width: 380px !important; /* Cambiado para forzar el tamaño real */
    height: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

/* =============================================================================
   --- TARJETAS CON LA PESTAÑA REAL DE FIGMA HACIA AFUERA ---
============================================================================= */
.testimonial-premium-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background-color: #fbf9f6;
    padding: 35px 30px 30px 30px;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin-top: 45px;
    transition:
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* Dibujamos la pestaña asimétrica que sobresale hacia arriba */
.testimonial-premium-card::before {
    content: "";
    position: absolute;
    top: -45px;
    left: -0.5px; /* Evita microgaps de renderizado */
    width: calc(100% + 1px);
    height: 47px;
    background-color: #fbf9f6;
    /* clip-path: polygon(0% 100%, 55% 100%, 75% 0%, 100% 0%, 100% 100%); */
    clip-path: polygon(0 0, 75% 77%, 100% 0, 100% 98%, 0 100%, 0% 50%);
    z-index: 1; /* Pasa al frente para unirse limpiamente */
}

/* Sincronizamos el fondo si la tarjeta del centro se vuelve blanca */
.card-featured {
    background-color: #ffffff !important;
    transform: scale(1.06); /* Escala suave y limpia del figma original */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16);
}

.card-featured::before {
    background-color: #ffffff !important;
}

/* Ajuste del contenedor del Corazón Doradito para que se alinee sobre la pestaña */
.badge-heart-container {
    position: absolute;
    top: -40px;
    right: 75px;
    z-index: 25; /* Elevado por encima del clip-path */
}

.heart-circle {
    width: 44px;
    height: 44px;
    background-color: #bfa36a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.heart-circle img {
    width: 30px;
    height: 30px;
}

.card-featured .heart-circle {
    border-color: #ffffff;
}

/* Contenido de texto interno */
.testimonial-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.testimonial-stars {
    color: #1a1a1a;
    font-size: 0.9rem;
    letter-spacing: 3px;
    margin-bottom: 15px;
}
.testimonial-quote {
    font-family: "Montserrat", sans-serif;
    color: #3a3a3a;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 25px;
    font-weight: 400;
}

/* Footer Alineado de la Carta */
.testimonial-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
}
.testimonial-author-name {
    font-family: "Cinzel", "Playfair Display", serif;
    color: #bfa36a;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.testimonial-author-role {
    font-family: "Montserrat", sans-serif;
    color: #7a7a7a;
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
}

/* Comillas gigantes */
.quote-mark {
    font-family: "Cinzel", serif;
    color: #ebdcb9;
    font-size: 4rem;
    line-height: 0.5;
    user-select: none;
    font-weight: 900;
}

/* --- RESPONSIVO --- */
@media (max-width: 768px) {
    .testimonial-premium-card {
        max-width: 310px;
    }
    .card-featured {
        transform: scale(1);
    }
    .testimonialsSwiper .swiper-slide {
        width: 310px !important;
    }
}

/*=============================================================================
SECCIÓN 7: CONTÁCTANOS (RÉPLICA EXACTA FIGMA CON DOBLE FONDO)
=============================================================================*/
.premium-contact-section {
    background-color: #ffffff;
    padding: 100px 0 140px 0;
    overflow: hidden;
}
.contact-decorative-line {
    width: 35px;
    height: 1px;
    background-color: #1a1a1a;
    margin-right: 12px;
    display: inline-block;
}
.contact-subtitle-tag {
    font-family: "Montserrat", sans-serif;
    color: #1a1a1a;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.contact-main-title {
    font-family: "Cinzel", "Playfair Display", serif;
    color: #1a1a1a;
    font-size: 2.8rem;
    font-weight: 400;
}
.contact-description-text {
    font-family: "Montserrat", sans-serif;
    color: #5b5b5d;
    font-size: 1rem;
    line-height: 1.6;
}

.btn-service-more-container-contacto {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 20;
}

.btn-service-more-circle-arrow-contacto {
    background-color: white;
    width: 38px;
    height: 38px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-left: -12px;
    z-index: 2;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease;
    border: 1px solid #e2d0a6;
}

.btn-service-more-container:hover .btn-service-more-circle-arrow-contacto {
    /* background-color: #e2d0a6; */
    background-color: white;
}

/* --- CONTENEDOR DE LA IMAGEN (AUMENTADO PARA INVADIR EL CENTRO) --- */
.contact-image-wrapper-composite {
    width: 140%;
    margin-top: -10px;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.contact-image-wrapper-composite .composite-img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- NUEVO: MARCO BLANCO CONTENEDOR (HACE EL TRASLAPE SOBRE LA IMAGEN) --- */
.contact-form-bg-wrapper {
    background-color: #ffffff; /* Fondo blanco intermedio */
    padding: 15px; /* Genera el margen blanco perimetral exacto de Figma */
    position: relative;
    z-index: 25;

    /* El margen negativo se pasa aquí para desplazar todo el cuadro compuesto */
    margin-left: -60px;
    margin-top: -10px;
}

/* --- TARJETA DEL FORMULARIO OSCURO --- */
.contact-form-card {
    background-color: #121212;
    /* padding: 30px; */
    padding: 20px 35px;
    border-radius: 0px;
    box-shadow: none; /* Quitamos la sombra aquí para usar la del contenedor blanco */
}

.form-control-custom {
    background-color: #222222 !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    /* padding: 14px 16px; */
    padding: 16px 18px;
    border-radius: 4px;
    width: 100%;
}
.form-control-custom:focus {
    border-color: #BF9656 !important;
    box-shadow: none !important;
}
.rows-textarea {
    resize: none;
}

.btn-form-submit-premium {
    background-color: #BF9656;
    color: #ffffff;
    width: 100%;
    border: none;
    padding: 16px;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    transition: background-color 0.3s ease;
}
.btn-form-submit-premium:hover {
    background-color: #ab9058;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 991px) {
    .contact-image-wrapper-composite {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .contact-form-bg-wrapper {
        margin-left: 0;
        padding: 15px; /* Más compacto en pantallas pequeñas */
    }
    .contact-form-card {
        padding: 30px 20px;
    }
}
/*=============================================================================
RESPONSIVIDAD SECCIONES FINALES
=============================================================================*/
@media (max-width: 991px) {
    .credibility-center-circle {
        display: none;
    }
    .cuadrante-row-wrapper {
        text-align: center;
    }
    .image-center-column {
        flex-direction: row !important;
        justify-content: center;
    }
    .credibility-mobile-text-card {
        background-color: #ebdcb9;
        padding: 15px;
        border-radius: 4px;
        font-size: 0.9rem;
    }
    .gold-banner-title {
        font-size: 1.5rem;
    }
    .card-featured {
        transform: none;
    }
    .contact-form-card {
        padding: 25px;
    }
}

/*=============================================================================
US
=============================================================================*/
/*============================Primera Seccion=============================*/
.bg-head-title {
    background-color: #f6f5f3;
    padding-top: 130px;
    padding-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.head-title {
    font-weight: 400;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: 0%;
    margin-bottom: 20px;
}

.breadcrumb-box {
    background-color: #bf9656;
    color: #ffffff;
    padding: 8px 30px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Separación entre las palabras y la flecha */
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0%;
    width: fit-content;
}

/* Variables globales para la sección (facilita la edición de colores) */
:root {
    --gold-color: #ba925a;
    --text-dark: #121414;
    --text-muted: #86898C;
    --bg-light: #f8f6f2;
}

.about-section {
    /* AQUÍ CONTROLAS LA IMAGEN DE FONDO */
    --bg-url: url("/assets/images/img-us/gold-lines.png");
    --bg-size: 120%; /* Aumenta o disminuye para hacerla más grande o pequeña */
    --bg-x: center;  /* Mueve a la izquierda (ej. -50px, 10%) o derecha */
    --bg-y: center; /* Mueve arriba (ej. -20px) o abajo */
    --bg-opacity: 0.06; /* 6% */

    position: relative;
    padding: 80px 0 100px 0;
    overflow: hidden;
}

.about-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: var(--bg-url);
    background-size: var(--bg-size);
    background-position: var(--bg-x) var(--bg-y);
    background-repeat: no-repeat;

    opacity: var(--bg-opacity);
    pointer-events: none;
}

.about-section > * {
    position: relative;
    z-index: 1;
}

.z-index-1 {
    z-index: 1;
}

.cards-about-us {
    position: relative;
    left: -80px;
    width: calc(100% + 100px);
    z-index: 10;
    background-color: #F6F5F0;
    padding: 25px 20px;
}

.cards-about-us p {
    font-weight: 500;
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    margin-top: 15px;
}

.circle-us-icon {
    border: 1px solid #0000001A;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

/* Contenedor de la Imagen y el Badge */
.about-image-wrapper {
    position: relative;
    padding-right: 20px;
}

.about-main-img {
    width: 105%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.si-logo {
    position: absolute;
    width: 40%;
    height: auto;
    bottom: -63px;
    left: -75px;
}

.experience-badge {
    position: absolute;
    top: 30px;
    left: -30px;
    background-color: #BF9656;
    color: #fff;
    padding: 45px 40px 25px 30px;
    /* Puntos:
       1. Arriba-Izq (0 10%)
       2. Punto de la flecha (85% 20%)
       3. Arriba-Der (100% 0%)
       4. Abajo-Der (100% 100%)
       5. Abajo-Izq (0 100%)
    */
    clip-path: polygon(0 10%, 75% 20%, 100% 10%, 100% 100%, 0 100%);

    z-index: 2;
    box-shadow: 0 10px 20px rgba(186, 146, 90, 0.3);
}

.experience-badge .badge-number {
    display: block;
    margin-bottom: 10px;
    font-family: 'Inter';
    font-weight: 500;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 0%;

}

.experience-badge .badge-text {
    display: block;
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0%;
}

/* Textos de la Derecha */
.about-content {
    padding-left: 20px;
}

.about-subtitle {
    color: var(--text-dark);
    margin-bottom: 35px;
    display: flex;
    align-items: end;
    font-family: 'Playfair Display';
    font-weight: 700;
    font-size: 32px;
    line-height: 18px;
    letter-spacing: 0%;
    text-transform: uppercase;
}

.about-subtitle .line {
    width: 80px;
    height: 2px;
    background-color: var(--text-dark);
    margin-right: 20px;
    position: relative;
}

.about-subtitle .line::after {
    content: '';
    position: absolute;

    width: 18px;
    height: 2px;

    background-color: var(--text-dark);

    right: -3.59px;
    top: -7px;

    transform: rotate(55deg);
}

.about-title {
    font-family: "Playfair Display", serif;
    font-size: 57px;
    color: var(--text-dark);
    margin-bottom: 25px;
    font-weight: 500;
    line-height: 63px;
    letter-spacing: 0%;
}

.about-text {
    color: var(--text-muted);
    margin-bottom: 20px;
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0%;
    text-align: justify;

}

/* Lista */
.about-list {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.about-list li {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.about-list li i {
    color: var(--gold-color);
    margin-right: 10px;
    font-size: 1.1rem;
}

/* Botón */
.btn-gold {
    display: inline-block;
    background-color: var(--gold-color);
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-gold i {
    margin-left: 8px;
}

.btn-gold:hover {
    background-color: #a37f4d; /* Dorado más oscuro */
    color: #fff;
    transform: translateY(-2px);
}

/* Tarjeta Inferior Superpuesta */
.features-card {
    background-color: var(--bg-light);
    padding: 40px;
    margin-top: -60px; /* Esto hace que se superponga sobre la imagen */
    position: relative;
    z-index: 3;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Puedes alinear el ancho para que coincida con el texto de la derecha usando margins si es necesario */
    width: 85%;
    margin-left: auto; /* Lo empuja hacia la derecha como en el diseño */
}

.feature-item {
    padding: 0 15px;
}

.feature-icon {
    color: var(--gold-color);
    font-size: 2rem;
    margin-bottom: 15px;
}

.feature-item h4 {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-weight: 600;
}

.feature-item p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

.us-btn-contact .btn-gold-container-custom .btn-gold-oval {
    background-color: #BF9656;
}

.us-btn-contact .btn-gold-container-custom .btn-gold-circle-arrow {
    background-color: #BF9656;
}

/* Responsividad */
@media (max-width: 991px) {
    .features-card {
        width: 100%;
        margin-top: 30px; /* Quita la superposición en pantallas pequeñas */
    }
    .about-content {
        padding-left: 0;
        margin-top: 40px;
    }
}

/*============================Segunda Seccion=============================*/
.our-motivation-section {
    background:
        linear-gradient(
            rgba(42,42,42,0.75),
            rgba(42,42,42,0.75)
        ),
        url('/assets/images/img-us/our-motivation.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding-top: 50px;
    padding-bottom: 50px;
}

.custom-width {
    width: 58%;
    margin: 0 auto;
}

.our-motivation-titles {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}

.our-title-row{
    display: flex;
    align-items: end;
}

.our-motivation-titles .line {
    width: 80px;
    height: 2px;
    background-color: white;
    margin-right: 20px;
    position: relative;
}

.our-motivation-titles .line::after {
    content: '';
    position: absolute;

    width: 18px;
    height: 2px;

    background-color: white;

    right: -3.59px;
    top: -7px;

    transform: rotate(55deg);
}

.our-motivation-titles h4 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 32px;
    line-height: 18px;
    letter-spacing: 0%;
}

.our-motivation-titles h3 {
    font-weight: 400;
    font-size: 57px;
    line-height: 63px;
    letter-spacing: 0%;
    text-align: center;
}

.our-motivation-text {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    padding-inline: 70px;
}

.our-motivation-text img {
    width: 100px;
    height: auto;
}

.our-mot-text-1 {
    font-weight: 400;
    font-size: 36px;
    line-height: 28px;
    letter-spacing: 0%;
    vertical-align: middle;
}

.our-mot-text-2 {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0%;
    text-align: center;
}

/*============================Tercera Seccion=============================*/
.section-subtitle {
    color: var(--text-dark, #222);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    align-items: end;
    font-family: 'Playfair Display';
    font-weight: 700;
    font-style: Bold;
    font-size: 32px;
    line-height: 18px;
    letter-spacing: 0%;
}

.section-subtitle .line {
    width: 80px;
    height: 2px;
    background-color: black;
    margin-right: 20px;
    position: relative;
}

.section-subtitle .line::after {
    content: '';
    position: absolute;

    width: 18px;
    height: 2px;

    background-color: black;

    right: -3.59px;
    top: -7px;

    transform: rotate(55deg);
}

.section-title {
    font-family: 'Playfair Display', serif;
    color: var(--text-dark, #222);
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 57px;
    line-height: 63px;
    letter-spacing: 0%;
}

/* Lista de Valores */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.value-item {
    background-color: var(--bg-light, #F6F5F0);
    padding: 30px; /* Espacio interior del cuadro beige */
    display: block; /* Muy importante: quitamos flexbox para usar float */
    transition: all 0.3s ease;
}

/* El truco del "corte" */
.value-number-wrapper {
    float: left; /* Flotamos el elemento a la izquierda */
    background-color: #ffffff; /* IMPORTANTE: Debe ser del mismo color que el fondo de tu página (blanco) */
    padding: 0 15px 15px 0; /* Esto crea la "línea" en blanco a la derecha y abajo del cuadro dorado */

    /* Con los márgenes negativos, jalamos el cuadro hacia la esquina exacta.
       Deben coincidir con el padding del .value-item */
    margin-top: -30px;
    margin-left: -30px;
    margin-right: 15px; /* Separación con el texto de la derecha */
}

.value-number {
    background-color: #F6F5F0;
    color: var(--text-dark, #222);
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* El contenedor del texto */
.value-text {
    overflow: hidden; /* Esto obliga al texto a mantenerse en una columna recta, sin meterse debajo del cuadro dorado */
}

.value-text h4 {
    color: #121414;
    margin-bottom: 10px;
    font-family: 'Inter';
    font-weight: 500;
    font-size: 23px;
    line-height: 28px;
    letter-spacing: 0%;
}

.value-text p {
    color: #86898C;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0%;
}

/* Efecto Hover / Activo */
.value-item:hover .value-number,
.value-item.active .value-number {
    background-color: var(--gold-color, #BA925A);
    color: #ffffff;
}

/* Efecto de Imágenes Recortadas (Clip-Path) */
.values-images-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.image-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Corte de la imagen superior: baja en diagonal y luego sube en la esquina */
.img-top {
    /* Puntos:
       1. Arriba-Izq (0 0)
       2. Arriba-Der (100% 0)
       3. Abajo-Der (100% 80% - aquí sube)
       4. Punto de la flecha (85% 100% - el punto más bajo)
       5. Abajo-Izq (0 90% - empieza un poco más alto para que baje en diagonal)
    */
    clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 100%, 0 90%);
    z-index: 2;
}

/* Corte de la imagen inferior: copia la forma de la flecha de arriba */
.img-bottom {
    /* Puntos:
       1. Arriba-Izq (0 10%)
       2. Punto de la flecha (85% 20%)
       3. Arriba-Der (100% 0%)
       4. Abajo-Der (100% 100%)
       5. Abajo-Izq (0 100%)
    */
    clip-path: polygon(0 10%, 75% 20%, 100% 10%, 100% 100%, 0 100%);

    /* Con este margen negativo "jalamos" la imagen hacia arriba para que embone
       con la de arriba. Modifica este porcentaje si quieres que la línea blanca
       del medio se vea más gruesa o más delgadita */
    margin-top: -50px;
    z-index: 1;
}

/* Ajustes para móviles */
@media (max-width: 991px) {
    .values-content {
        padding-right: 0;
    }
    .section-title {
        font-size: 2.2rem;
    }
    .values-images-wrapper {
        margin-top: 40px;
    }
}

/*============================Cuarta Seccion=============================*/
.faq-section {
    position: relative;
    padding: 200px 0;
    overflow: hidden;
}

.faq-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url('/assets/images/img-us/abstract-golden.jpg');
    background-size: cover;
    background-position: center;

    opacity: .35;

    filter: blur(4px);
    transform: scale(1.05);

    z-index: -2;
}

/* Gradiente de Figma */
.faq-section::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(191, 150, 86, 0) 0%,
        rgba(191, 150, 86, 0.69) 31.73%,
        rgba(191, 150, 86, 0.69) 56.25%,
        rgba(191, 150, 86, 0) 100%
    );

    z-index: -1;
}

.faq-section .fade-white {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background:
        linear-gradient(
            to bottom,
            white 0%,
            transparent 35%
        ),
        linear-gradient(
            to top,
            white 0%,
            transparent 35%
        );
}

.faq-section .blur-layer{
    position: absolute;
    inset: 0;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    z-index: -2;
}

.faq-subtitle {
    display: flex;
    align-items: end;
    justify-content: center;
    color: #2E3034;
    text-transform: uppercase;
    font-family: 'Inter';
    font-weight: 500;
    font-size: 14px;
    line-height: 12px;
    letter-spacing: 0%;
}

.faq-subtitle .line {
    width: 60px;
    height: 2px;
    background-color: #121414;
    margin-right: 20px;
    position: relative;
}

.faq-subtitle .line::after {
    content: '';
    position: absolute;

    width: 12px;
    height: 1.5px;

    background-color: #121414;

    right: -3.4px;
    top: -5px;

    transform: rotate(55deg);
}

.faq-title {
    margin-top: 20px;
    color: #ffffff;
    font-weight: 500;
    font-size: 57px;
    line-height: 63px;
    letter-spacing: 0%;
    text-align: center;

}

.custom-faq .accordion-item {
    border: none;
    margin-bottom: 12px;
    background: #fff;
}

.custom-faq .accordion-button {
    padding: 15px 50px;
    background: rgba(246, 245, 240, 1);
    color: #121414;
    box-shadow: none;
    font-family: 'Inter';
    font-weight: 500;
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;

}

.custom-faq .accordion-button:not(.collapsed) {
    background: rgba(246, 245, 240, 1);
    color: #333;
    box-shadow: none;
}

.custom-faq .accordion-button:focus {
    box-shadow: none;
}

.custom-faq .accordion-body {
    color: #86898C;
    background-color: rgba(246, 245, 240, 1);
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0%;
    vertical-align: middle;
    padding: 30px 50px;
}

.faq-contact-box {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 60px;

    padding: 20px 25px;

    background: rgba(246, 245, 240, 1);
;
}

.faq-contact-box small {
    color: #86898C;
    display: block;
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0%;
}

.faq-contact-box h6 {
    margin: 0;
    font-family: 'Inter';
    font-weight: 500;
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;
}

.faq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 28px;

    background: #bf9656;
    color: white;

    border-radius: 40px;

    text-decoration: none;
    transition: .3s;
}

.faq-btn:hover {
    background: #a57b3c;
    color: white;
}

/*=============================================================================
SERVICIO INDIVIDUAL
=============================================================================*/
.ind-service-section {
    background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, #e59f2f4b 69.23%);
}

/* Navegación (Pestañas) */
.service-navigation-container {
    width: 100%;
}

/* Estilos de los 3 Títulos Principales */
.category-titles .category-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 400;
    color: #121414;
    text-decoration: none;
    letter-spacing: 0%;
    line-height: 48px;
    transition: color 0.3s ease;
    text-align: center;
}

.category-titles .category-title:hover,
.category-titles .category-title.active {
    color: #BF9656;
}

.service-tabs {
    justify-content: center;

    overflow-x: auto; /* Habilita el scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Hace el scroll más suave en celulares */
    padding-bottom: 5px; /* Un poco de espacio inferior para la barra de scroll */
}
/* (Opcional) Estilizar la barra de scroll para que combine con tus colores */
.service-tabs::-webkit-scrollbar {
    height: 6px;
}
.service-tabs::-webkit-scrollbar-track {
    background: transparent;
}
.service-tabs::-webkit-scrollbar-thumb {
    background: #e4d0b0;
    border-radius: 10px;
}

.tab-btn {
    background-color: #F3E5C8;
    color: #121212;
    border: none;
    padding: 14px 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-family: 'Playfair Display';
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0%;
    text-decoration: none;

    /* Agregamos esto para el scroll */
    white-space: nowrap; /* Evita que el texto del botón se rompa en dos líneas */
    flex-shrink: 0; /* Evita que el botón se haga pequeñito para caber en la pantalla */
}

.tab-btn:hover {
    background-color: #e4d0b0;
    color: #121212;
}

.tab-btn.active {
    background-color: #BF9656; /* Dorado oscuro / activo */
    color: #ffffff;
}

.tab-divider {
    border: 0;
    border-top: 3px solid #BF9656;
    opacity: 0.4;
    margin-top: 1.5rem;
}

.service-image-wrapper{
    height: 840px;
    overflow: hidden;
}

/* Textos Generales */
.service-title {
    color: #121414;
    font-family: 'Inter';
    font-weight: 500;
    font-size: 31px;
    line-height: 40px;
    letter-spacing: 0%;
    margin-bottom: 35px;
}

.service-description {
    color: #86898C;
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0%;
    text-align: justify;
}

.features-title {
    color: #121C27;
    font-family: 'Inter';
    font-weight: 500;
    font-size: 31px;
    line-height: 40px;
    letter-spacing: 0%;
    margin-top: 30px;
}

/* Imagen principal */
.service-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 400px; /* Asegura que no se haga pequeña en pantallas anchas */
    border-radius: 2px;
}

/* Tarjeta Blanca de Características */
.features-service-card {
    border-radius: 5px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.03); /* Sombra muy sutil */
    padding: 50px 25px 50px 25px;
}

.gold-circle {
    width: 55px;
    height: 55px;
    background-color: #BF9656;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gold-circle img {
    width: 24px;   /* Ajusta según el tamaño del icono */
    height: 24px;
}

.feature-heading {
    font-family: 'Playfair Display';
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #121414;
    margin-bottom: 15px;
}

.feature-text {
    color: #86898C;
    margin-bottom: 0;
    font-family: 'Inter';
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 5px;
}

.ind-serv-title1 {
    color: #121414;
    margin-bottom: 35px;
    display: flex;
    align-items: end;
    font-family: 'Playfair Display';
    font-weight: 700;
    font-size: 32px;
    line-height: 18px;
    letter-spacing: 0%;
    text-transform: uppercase;
}

.ind-serv-title1 .line {
    width: 80px;
    height: 2px;
    background-color: #BF9656;
    margin-right: 20px;
    position: relative;
}

.ind-serv-title1 .line::after {
    content: '';
    position: absolute;

    width: 18px;
    height: 2px;

    background-color: #BF9656;

    right: -3.59px;
    top: -7px;

    transform: rotate(55deg);
}

.ind-serv-title2 {
    font-weight: 400;
    font-size: 70px;
    letter-spacing: 0%;
    margin-bottom: 40px;
}

.service-img-wrapper {
    position: relative;
    height: 450px;
    display: flex;
    overflow: hidden;
}

.service-img-wrapper img {
    width: 100%;
    object-fit: cover;
}

/* Degradado y Texto sobre la imagen */
.service-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px 30px;
    color: #ffffff;
    backdrop-filter: blur(6px);
    background: #00000026;
}

.service-img-overlay h3 {
    font-family: 'Playfair Display', serif;
    margin: 0;
    font-weight: 600;
    font-size: 25px;
    /* line-height: 40px; */
    letter-spacing: 0%;
}

.service-img-overlay p {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0%;
}

.mb-custom {
    padding-bottom: 100px !important;
}

/* Contenedor Flex de todas las pestañas */
.service-tabs2 {
    display: flex;
    gap: 25px;
    height: 100%;
    min-height: 400px;
}

/* El contenedor principal de cada pestaña */
.serv-tab-container {
    flex: 1;
    position: relative;
    z-index: 1; /* Crea un contexto de apilamiento seguro */
    /* IMPORTANTE: Quitamos el background-color de aquí */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 30px;
    text-decoration: none;
}

/* ¡AQUÍ ESTÁ LA MAGIA DE LA TRANSPARENCIA REAL!
  Usamos un pseudo-elemento para el fondo y lo "recortamos" con clip-path
*/
.serv-tab-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F4F3EE; /* Color base inactivo */

    /* clip-path dibuja la "L" invertida.
       El 75px sale de sumar los 65px de la flecha + 10px del espacio transparente */
    clip-path: polygon(0 0, calc(100% - 75px) 0, calc(100% - 75px) 75px, 100% 75px, 100% 100%, 0 100%);

    z-index: -1; /* Lo mandamos al fondo del texto */
    transition: all 0.3s ease;
}

/* El cuadrito de la flecha */
.tab-header {
    position: absolute;
    top: 0;
    right: 0;
    width: 65px;
    height: 65px;
    background-color: #F4F3EE;

    /* ¡Ya no hay bordes falsos! El espacio vacío lo genera el clip-path de arriba */

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #121414;
    transition: all 0.3s ease;
}

/* --- ESTADOS ACTIVO Y HOVER --- */
/* Cambiamos el color del fondo recortado (::before) */
.serv-tab-container.active::before,
.serv-tab-container:hover::before {
    background-color: #BF9656;
}

/* Cambiamos el color del cuadrito de la flecha */
.serv-tab-container.active .tab-header,
.serv-tab-container:hover .tab-header {
    background-color: #BF9656;
    color: #ffffff;
}

/* Formateo del texto vertical */
.tab-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    white-space: nowrap;
    color: #000000;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0%;
}

.serv-tab-container.active .tab-text,
.serv-tab-container:hover .tab-text {
    color: #ffffff;
}

/* Textos inferiores */
.ind-serv-subtitle {
    font-family: 'Inter';
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    line-height: 26px;
    letter-spacing: 0%;
    text-align: justify;
    color: #000000;
}

.serv-text-section p {
    color: #000000;
    font-family: 'Inter';
    font-weight: 400;
    font-size: 24px;
    line-height: 26px;
    letter-spacing: 0%;
    text-align: justify;
}

/* Responsive: Ajustes para móviles */
@media (max-width: 768px) {
    .tab-btn {
        flex-basis: 100%; /* Botones de bloque en móvil */
        margin-bottom: 5px;
    }

    .service-img {
        min-height: 250px;
    }
}

/*=============================================================================
SERVICIOS
=============================================================================*/
.bg-head-title-servicios {
    background: rgba(
        248,
        248,
        248,
        0.95
    ) !important; /* #F8F8F8 al 95% de opacidad */
    padding-top: 130px;
    padding-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-section-servicios {
    /* CONTROL DE LA IMAGEN DE FONDO CORPORATIVA */
    --bg-url: url("/assets/images/img-servicios/waves-flowing-background-servicios.png");
    --bg-size: cover;
    --bg-x: center;
    --bg-y: center;

    position: relative;
    padding: 80px 0 100px 0;
    overflow: hidden;
    background-color: #ffffff; /* Asegura contraste si la imagen tiene transparencias */
}

.about-section-servicios::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-url);
    background-size: var(--bg-size);
    background-position: var(--bg-x) var(--bg-y);
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* Capa 2: Efecto Difuminado / Degradado (Blanco -> Transparente -> Blanco) */
.about-section-servicios::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0) 70%,
        #ffffff 100%
    );
    pointer-events: none;
    z-index: 1; /* Queda sobre la imagen de ondas pero bajo las tarjetas */
}

/* Forzar que el contenedor de las tarjetas quede por encima de los difuminados */
.about-section-servicios .container {
    position: relative;
    z-index: 2;
}

/* Indicador de Sección estilo Flecha/Línea de Figma */
.section-indicator {
    font-family: serif; /* O la tipografía serif elegante de tu cabecera */
    font-size: 1.25rem;
    color: #121212;
    font-weight: 600;
}
.indicator-line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background-color: #121212;
    vertical-align: middle;
}

.indicator-line::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 1px;
    background-color: #121212;
    top: 34px;
    transform: rotate(55deg);
    left: 43px;
}

/* =============================================================================
   NUEVO ESTILO DE BANNERS EN ROW (FIGMA)
============================================================================= */

/* Título intermedio centrado */
.titulo-soluciones-integrales {
    font-family: serif; /* O la fuente Serif elegante de tu sitio */
    font-size: 2.5rem;
    font-weight: 400;
    color: #121212;
}

/* Contenedor principal de cada fila (Se comporta como un link completo) */
.banner-servicio-row {
    display: flex;
    flex-direction: column; /* Móviles por defecto arriba/abajo */
    text-decoration: none !important;
    color: inherit;
    background-color: #fcfbfa; /* Fondo beige muy sutil */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 0px;
    overflow: visible; /* Permitir que el botón sobresalga si es necesario */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner-servicio-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(191, 163, 106, 0.15);
}

/* Contenedor de la imagen */
.banner-img-wrapper {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.banner-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.banner-servicio-row:hover .banner-img-wrapper img {
    transform: scale(1.03);
}

/* Contenedor del contenido/texto */
.banner-content-wrapper {
    width: 100%;
    padding: 30px;
    position: relative;
    background-color: #fcfbfa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    clip-path: polygon(76% 14%, 100% 0, 100% 99%, 0 100%, 0 0);
    z-index: 2;
}

.banner-title {
    font-family: serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #121212;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.banner-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555555;
    margin: 0;
    max-width: 85%; /* Dejar espacio para el botón a la derecha */
}

/* Botón Circular Dorado Flotante */
.floating-circle-btn {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #bfa36a; /* Color dorado corporativo */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1.5rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 99;
    box-shadow: 0 4px 15px rgba(191, 163, 106, 0.3);
    bottom: calc(100% - 280px);
    right: 21%;
}

.floating-circle-btn img {
    width: 25px;
    height: 25px;
}

.banner-servicio-row:hover .floating-circle-btn {
    background-color: #a38752; /* Oscurece un poco al hover */
    transform: scale(1.05);
}

/* =============================================================================
   MEDIA QUERY: Transformación a Formato Escritorio (Imagen arriba, Texto abajo con Corte)
============================================================================= */
@media (min-width: 768px) {
    .banner-servicio-row {
        flex-direction: column; /* Mantenemos la estructura vertical de bloques pero agrandamos elementos */
    }

    .banner-img-wrapper {
        height: 320px; /* Ajuste de altura de imagen en pantallas grandes */
    }

    /* Aquí creamos el efecto de línea diagonal asimétrica (Corte hacia arriba/abajo) */
    .banner-content-wrapper {
        padding: 50px 60px 50px 60px;
        margin-top: -40px; /* Sube el contenedor de texto para encimar la imagen */
        padding-top: 70px; /* Compensación del espacio del recorte */
    }

    .floating-circle-btn {
        bottom: calc(100% - 340px); /* Compensa los 320px de la imagen + la inclinación */
        right: 21%;
    }
}

/*=============================================================================
CONTACTO
=============================================================================*/
.contact-card {
    background: #fff;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    height: 100%;
}

.icon-circle {
    width: 95px;
    height: 95px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background-color: #B6542A1A;

    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.contact-card h3 {
    margin-bottom: 20px;
    color: #121212;
    font-family: 'Inter';
    font-weight: 500;
    font-size: 23px;
    line-height: 28px;
    letter-spacing: 0%;
}

.contact-card p {
    color: #BF9656;
    font-family: 'Inter';
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0%;
    text-align: center;

}


/*=============================================================================
AVISO DE PRIVACIDAD
=============================================================================*/
.bg-gradient-privacy {
    /* Combinamos un tono inicial blanco/crema muy suave (#F9F9F9 / #D9D9D9 suavizado)
       hacia el tono dorado/café claro (#BF9656) al final */
    background: linear-gradient(180deg, rgba(217, 217, 217, 0.25) 0%, rgba(191, 150, 86, 0.35) 100%), #FFFFFF;
    color: #000000;
}

.text-privacy {
    color: #000000;
    font-family: inherit;
    line-height: 1.6;
}

/* Formato de listas ordenadas (1.- 2.-) como en las imágenes */
.privacy-list {
    list-style-type: none;
    counter-reset: privacy-counter;
}

.privacy-list > li {
    counter-increment: privacy-counter;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.5rem;
}

.privacy-list > li::before {
    content: counter(privacy-counter) ".- ";
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Ajustes de enlaces largos para móviles */
.text-break {
    word-break: break-word;
    color: inherit;
}

.bg-head-title-privacy {
    /* background: rgba(
        248,
        248,
        248,
        0.95
    ) !important; */
     background: linear-gradient(180deg, rgba(248, 248, 248, 0.95) 0%, rgba(196, 196, 196, 0.15) 100%), rgba(248, 248, 248, 0.95) !important;
    padding-top: 130px;
    padding-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.titulo-privacy {
    font-family: Poppins;
    font-weight: 700;
    font-size: 24px;
}

a {
    text-decoration: none !important;
}
/*=============================================================================
FOOTER
=============================================================================*/
.premium-footer {
    background-color: #292b2e !important; /* El color grafito exacto de tu figma */
    padding: 80px 0 0 0;
    position: relative;
    z-index: 30;
}

.footer-content-container {
    padding-bottom: 60px;
}

/* --- Columna 1: Logo --- */
.footer-logo-wrapper {
    max-width: 220px;
}
.footer-logo-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* --- Títulos de Columnas --- */
.footer-column-title {
    font-family: "Montserrat", sans-serif;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 25px;
    letter-spacing: 0.3px;
}

/* --- Textos de Contenido --- */
.footer-description-text {
    font-family: "Montserrat", sans-serif;
    color: #b3b4b6; /* Gris claro legible de Figma */
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 400;
}

.footer-contact-info {
    font-family: "Montserrat", sans-serif;
    color: #b3b4b6;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- Insignias / Badges --- */
.footer-badge-img {
    height: 48px; /* Altura controlada para las certificaciones */
    width: auto;
    object-fit: contain;
}

/* --- Redes Sociales --- */
.footer-subtitle-socials {
    font-family: "Montserrat", sans-serif;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
}

.social-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.95rem;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.social-icon-circle img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: filter 0.3s ease; /* Transición suave para el cambio de color */
}

/* Círculos blancos (Facebook, X, Linkedin) */
.icon-white {
    background-color: #ffffff;
    color: #292b2e !important;
}

/* Círculo dorado (Instagram) */
.icon-gold {
    background-color: #ffffff;
    color: #292b2e !important;
}

.social-icon-circle:hover {
    background-color: #bfa36a !important;
    transform: translateY(-3px);
}

.social-icon-circle:hover img {
    filter: brightness(0) invert(1) !important;
}

.social-icon-circle img[alt*="Instagram"] {
    filter: brightness(0) saturate(100%) invert(14%) sepia(8%) saturate(302%) hue-rotate(182deg) brightness(96%) contrast(89%);
}

.social-icon-circle:hover img,
.social-icon-circle:hover img[alt*="Instagram"] {
    filter: brightness(0) invert(1) !important;
}

/* --- Enlaces de Canales Directos (Email y Teléfono) --- */
.footer-direct-channels {
    display: flex;
    flex-direction: column;
}

.footer-channel-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #b3b4b6 !important;
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-channel-link .channel-icon {
    color: #bfa36a; /* Iconos de sobre y teléfono en color oro */
    font-size: 1rem;
}

.footer-channel-link:hover {
    color: #ffffff !important;
}

/* --- BARRA INFERIOR COPYRIGHT --- */
.footer-copyright-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* Línea divisoria muy sutil */
    padding: 25px 0;
    margin-top: 20px;
}

.copyright-text {
    font-family: "Montserrat", sans-serif;
    color: #707275; /* Gris más opaco */
    font-size: 0.85rem;
    margin: 0;
    font-weight: 400;
}

/* --- RESPONSIVO --- */
@media (max-width: 991px) {
    .premium-footer {
        padding: 60px 0 0 0;
        text-align: center;
    }
    .footer-logo-wrapper {
        margin: 0 auto;
    }
    .footer-badges-container,
    .footer-social-icons {
        justify-content: center;
    }
    .footer-direct-channels {
        align-items: center;
        margin-top: 10px;
    }
}
/*=============================================================================
BLOG
=============================================================================*/
.blog-play-container {
    height: auto !important;
}
.bg-widget-cover.bg-mh {
    background-image: url("http://placehold.it/1920x500.png?text=1920x500.jpg");
    height: 500px;
}
.bg-widget-cover {
    background-position: center;
    background-size: cover;
}
.play-container {
    position: relative;
    height: 100%;
}
.play-container:hover .play-ico {
    opacity: 1;
    cursor: pointer;
}
.play-container:hover {
    cursor: pointer;
}
.play-ico {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    z-index: 1;
    opacity: 0.5;
}
.img-blog {
    min-height: 800px;
    background-image: url("../img/Blog/header.jpg");
    background-position: center;
    background-size: cover;
}
.container-blog {
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 100px;
    padding-bottom: 100px;
    width: 100%;
}
.i-text {
    background: #e2dede;
    border: none;
    border-radius: 10px;
    color: #757575;
    text-align: center;
    font-size: 12px;
    padding: 10px 40px;
    margin-right: 10px;
}
.bolder {
    font-weight: bolder !important;
}
.hr-blog {
    max-width: 15%;
    border: 1px solid #e2dede;
    -webkit-box-shadow: 0px 2px 3px #e2e2e2;
    box-shadow: 0px 2px 3px #e2e2e2;
}
.text-intblog {
    width: 100%;
    position: absolute;
    bottom: 10px;
}
.btn-blog {
    width: 100%;
    background: black;
    border: none;
    font-weight: 100;
    font-family: sans-serif;
    color: #fff;
}
.btn-blog2 {
    background: black;
    border: none;
    font-weight: 100;
    font-family: sans-serif;
    color: #fff;
}
.btn-blog3 {
    background: black;
    border: 1px solid #fff;
    font-weight: 100;
    font-family: sans-serif;
    color: #fff;
    padding: 6px 50px;
    font-size: 16px;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.btn-blog3:hover {
    color: #000;
    background-color: #fff;
    text-decoration: none;
}
.text-initblogf {
    position: absolute;
    top: 30%;
    left: 30%;
}
.img-finalblog {
    background-image: url("../img/Blog/footer.jpg");
    background-position: center;
    background-size: cover;
}
.custom-dropdown > li > .dropdown-menu,
.dropdown-child {
    background-color: #333;
}
.dropdown-child > a {
    color: #fff;
}
.custom-dropdown > li > .dropdown-menu > .nav-link:hover,
.custom-dropdown > li > .dropdown-menu > .dropdown-item:hover,
.dropdown-child > a:hover {
    background-color: #222;
}
.dropdown-child > a:hover {
    color: #fff;
}
/*=============================================================================
MEDIA
=============================================================================*/
/* 1920 x 1080 */
@media (max-width: 1920px) {
}

/* 1600 x 900*/
@media (max-width: 1600px) {
}

/* 1440 x 900 */
@media (max-width: 1440px) {
    .si-logo {
        width: 37%;
        bottom: -43px;
        left: -55px;
    }
}

/* 1280 x 800 */
@media (max-width: 1280px) {
    .custom-width {
        width: 70%;
    }
}

/* 990 x 1000 */
@media (max-width: 990px) {
    .header-box-arrow {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
        margin-top: 20px; /* Separación prudente con el párrafo de arriba */
    }

    .about-title-premium {
        font-size: 26px !important;
    }
    .section-indicator {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 14px !important;
    }

    .indicator-line {
        position: relative;
    }

    .indicator-line::after {
        top: 50% !important;
        left: auto !important;
        right: -4px !important;
        transform: translateY(-50%) rotate(55deg) !important;
        margin-top: -4px;
    }

    .premium-services-section {
        padding-top: 60px;
        padding-bottom: 60px;
        margin-top: 0;
    }

    .services-main-title {
        font-size: 2rem;
    }
    .service-detail-card {
        max-width: 100%; /* Toma ancho completo útil en móviles */
    }

    .service-item-tab {
        border-radius: 50px; /* En móviles todas ovaladas para mejor tap space */
    }

    .service-detail-img {
        height: 240px;
    }

    .hero-title-premium {
        font-size: 2.5rem;
    }

    .cards-about-us {
        left: 11px;
        width: 100%;
        padding: 25px 20px;
    }

    .custom-width {
        width: 70%;
        margin: 0 auto;
    }

    .our-title-row{
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .our-motivation-titles h4 {
        font-size: 34px;
        line-height: 32px;
    }

    .our-motivation-text {
        margin-bottom: 30px;
    }

    .service-image-wrapper{
        height: 400px;
    }

    .service-tabs {
        justify-content: start;
    }

    .category-titles .category-title {
        font-size: 30px;
        line-height: 38px;
    }

    .si-logo {
        width: 33%;
        bottom: -63px;
        left: -75px;
    }

    /* Cambiamos la dirección para que se apilen uno debajo del otro */
    .service-tabs2 {
        flex-direction: column;
        min-height: auto; /* Quitamos la altura mínima de 400px */
        gap: 10px; /* Reducimos un poco la separación */
    }

    /* Transformamos el contenedor en un botón horizontal estándar */
    .serv-tab-container {
        flex-direction: row-reverse; /* Ponemos la flecha a la derecha y el texto a la izquierda */
        justify-content: space-between; /* Separamos texto y flecha a los extremos */
        align-items: center;
        padding: 15px 25px; /* Damos espacio interior */
    }

    /* Quitamos el recorte (clip-path) porque en horizontal ya no se ve bien,
       y le ponemos el fondo directamente al pseudo-elemento como rectángulo completo */
    .serv-tab-container::before {
        clip-path: none;
    }

    /* Ajustamos el cuadrito de la flecha */
    .tab-header {
        position: relative; /* Quitamos el position absolute */
        width: 45px; /* Lo hacemos un poco más pequeño para móvil */
        height: 45px;
        background-color: transparent; /* El fondo lo da el contenedor principal ahora */
    }

    /* Devolvemos el texto a su estado horizontal natural */
    .tab-text {
        writing-mode: horizontal-tb; /* Texto horizontal */
        transform: none; /* Quitamos la rotación */
        white-space: normal; /* Permitimos que el texto baje de línea si es muy largo */
        font-size: 18px;
    }

    /* Opcional: Ajustes para el estado activo en móvil para que se vea limpio */
    .serv-tab-container.active .tab-header,
    .serv-tab-container:hover .tab-header {
        background-color: transparent;
        color: #ffffff; /* La flecha se vuelve blanca junto con el texto */
    }
}

/* 767 x 414 */
@media (max-width: 767px) {
    .indicator-line::after {
        top: 50% !important;
        left: auto !important;
        right: -4px !important;
    }

    .about-section-servicios {
        padding: 80px 0 30px 0 !important;
    }
    .about-text-premium {
        text-align: center;
    }
    .texto-info{
        text-align: center;
    }
    .about-title-premium {
        text-align: center !important;
    }

    .header-servicios-premium {
        display: block; /* Volver al comportamiento normal en celulares */
    }
    .header-box-text {
        border-left: none;
        padding-left: 0;
        margin-top: 15px;
    }

    .hero-section-premium {
        min-height: auto;
        padding-top: 120px;
        padding-bottom: 60px;
    }
    .hero-title-premium {
        font-size: 2rem;
    }

    .cards-about-us p {
        margin-bottom: 20px;
    }

    .about-subtitle {
        font-size: 28px;
    }

    .about-title {
        font-size: 50px;
    }

    .custom-width {
        width: 100%;
        margin: 0 auto;
    }

    .our-motivation-titles h4 {
        font-size: 26px;
        line-height: 32px;
    }

    .our-motivation-titles h3 {
        font-size: 45px;
    }

    .section-subtitle {
        margin-bottom: 20px;
        font-size: 32px;
        line-height: 38px;
        letter-spacing: 0%;
    }

    .section-title {
        margin-bottom: 30px;
        font-weight: 500;
        line-height: 38px;
        letter-spacing: 0%;
    }

    .head-title {
        font-size: 42px;
        margin-bottom: 20px;
        text-align: center;
    }

    .service-image-wrapper{
        height: 300px;
    }

    .service-title {
        font-size: 26px;
    }

    .features-title {
        font-size: 26px;
    }

    .category-titles .category-title {
        font-size: 24px;
        line-height: 32px;
    }

    .si-logo {
        width: 25%;
        bottom: 0px;
        left: 0px;
    }
}

/* 576 x 320 */
@media (max-width: 576px) {
}

/* 375 x 320 */
@media (max-width: 375px) {
}
/*
	@media( max-width: 1920px ) {}
	@media( max-width: 1600px ) {}
	@media( max-width: 1440px ) {}
	@media( max-width: 1366px ) {}
	@media( max-width: 1280px ) {}
	@media( max-width: 1024px ) {}
	@media( max-width: 736px ) {}
	@media( max-width: 667px ) {}
	@media( max-width: 640px ) {}
	@media( max-width: 568px ) {}
*/

.fondo-img {
    background-color: #efddb7;
    height: calc(100vh - 110px);
}
.image-carousel {
    height: calc(100vh - 200px);
    width: auto;
}
@media (max-width: 736px) {
    .image-carousel {
        /* height: calc(100vh - 180px); */
        width: 100%;
        height: initial;
    }
}