@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800&family=Playfair+Display:wght@400;600&display=swap');

:root {
  --cafe-luxury: #7d4924;
  --oro-luxury: #d4af37;
  --verde-relax: #a8c0a0;
  --blanco-soft: #fafaf7;
  --gris-texto: #555;
  --primary-color: #007bff;
  --success-color: #28a745;
  --light-bg: #f8f9fa;
}


/* -- 1. Definir la Fuente Base -- */

/* Esto aplica la fuente 'Montserrat' a todos los textos,
   a menos que un selector más específico la sobrescriba. */
body {
    /* La pila de fuentes debe ser Montserrat (la limpia), y luego una de respaldo */
    font-family: 'Montserrat', sans-serif !important; 
    font-weight: 400 !important;
    color: #333 !important; /* Asegurar un color de texto oscuro */
    

  /* background-color: var(--blanco-soft); */
  overflow-x: hidden;
  /* evita desplazamiento horizontal */
  padding-top: 40px;
  /* Ajusta según la altura de tu navbar */

 

}



/*dropdownheader*/


.dropdown-toggle::after {
    /* Asegura la transición suave para la rotación */
    transition: transform 0.25s ease-in-out !important; 
    /* Asegura que la flecha esté hacia abajo por defecto */
    transform: rotate(0deg) !important; 
}

/* 2. Estado DESPLEGADO (Flecha hacia arriba) */
/* Bootstrap establece aria-expanded="true" cuando el menú está abierto */
.dropdown-toggle[aria-expanded="true"]::after {
    /* Rota 180 grados para que apunte hacia arriba */
    transform: rotate(180deg) !important;
}


.dropdown-item-hover-color {
    /* Agregamos una transición para que el cambio de color sea suave */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.dropdown-menu .dropdown-item-hover-color:hover {
    /* Cambia el color del texto a blanco o un gris muy claro (legible) */
    color: #000000 !important; 
    font-weight: 500!important;
    
    /* Agrega un fondo gris oscuro sutil para que el texto claro sea legible */
    
}
@media (max-width: 991.98px) { /* Tamaño 'lg' hacia abajo (móvil/tablet) */
    .dropdown-item-hover-line {
        /* Asegura que no haya bordes ni transiciones en móvil si se mostraran por error */
        border-bottom: none !important; 
    }
}



.titulospage{
   font-family: 'Montserrat', sans-serif !important; 
   font-weight: 400 !important;
   color: #333 !important; /* Asegurar un color de texto oscuro */

}


/* hover boton blanco */

.botonblanco:hover{
    background-color: #000000!important;
    border: none!important;
    color: white;

}


/* 
listado de servicios nuevo */

/* ============================================== */
/* 1. ESTILOS DE HOVER Y ESTABILIZACIÓN */
/* ============================================== */

/* Estilo Base: Aplica cursor, transición y RESERVA DE ESPACIO SÓLO a la primera <p> */
.service-item-hover-scale p:first-of-type {
    cursor: pointer;
    transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
    
    /* RESERVA DE ESPACIO: Crucial para evitar que el texto en negrita mueva a sus vecinos. */
    min-width: 200px; 
    
    /* Asegura la limpieza contra transformaciones */
    transform: none !important; 
    box-shadow: none !important;
}

/* Estilo Base: Aplica transición y cursor a la <a> */
.service-item-hover-scale a {
    cursor: pointer;
    transition: font-weight 0.2s ease-in-out;
}

/* Hover UNIFICADO: Aplica Negrita cuando se hace hover sobre el CONTENEDOR padre */

/* 1. La primera <p> se pone en negrita */
.service-item-hover-scale:hover p:first-of-type {
    font-weight: bold !important;
    text-decoration: none !important; 
}

/* 2. La <a> se pone en negrita */
.service-item-hover-scale:hover a {
    font-weight: bold !important;
    text-decoration: none !important; 
}


/* ============================================== */
/* 2. ESTILOS DE LIMPIEZA Y ESPACIADO COMPACTO */
/* ============================================== */

/* Limpieza de Márgenes Internos */
.service-item-clean h5,
.service-item-clean p {
    margin-bottom: 0 !important;
}

/* Limpieza de Padding y Margen Externo del contenedor */
.service-item-clean {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Espacio entre los ítems: Mínimo (0) */
.service-item-clean:not(:last-child) {
    margin-bottom: 0; 
}

/* Reglas opcionales */
.tab-pane .service-item-hover-scale:last-child {
    border-bottom: none;
}
/* ============================================== */
/* 2. ESTILOS DE LIMPIEZA Y BOOTSTRAP */
/* ============================================== */

/* Limpieza de Márgenes Internos */
.service-item-clean h5,
.service-item-clean p {
    margin-bottom: 0 !important;
}

/* Limpieza de Padding y Margen Externo del contenedor */
.service-item-clean {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Espacio entre los ítems (excepto el último) */
.service-item-clean:not(:last-child) {
    margin-bottom: .5rem;
}

/* Si quieres que el último ítem no tenga borde */
.tab-pane .service-item-hover-scale:last-child {
    border-bottom: none;
}

/* Si tu clase service-item-clean tiene una línea, puedes necesitar añadir: */
/*
.service-item-hover-scale {
    border-bottom: 1px solid #ccc;  // Suponiendo el color original
}
.service-item-hover-scale:hover {
    border-bottom: none; // Elimina la línea al hacer hover
}
*/








/* -- 2. Sobrescribir para Títulos -- */

/* Ahora puedes aplicar 'Playfair Display' solo a los títulos o elementos que desees */
h1, h2, .main-title-clean {
    font-family: 'Playfair Display', serif !important; 
    font-weight: 600 !important;  
}

/* -- 3. Párrafos (por si acaso Bootstrap interfiere) -- */

/* Asegúrate de que los párrafos también usen Montserrat */
p {
    font-family: 'Montserrat', sans-serif !important; 
    line-height: 1.7 !important; /* Buena práctica de UX para legibilidad */
}



/* Estilos para definir visualmente la lista de servicios  galeria */
.service-item-clean {
    /* border-bottom: 0.5px solid #eee; Separador sutil entre servicios */
    /* transition: background-color 0.3s ease;
    padding-left: 10px;  */
}


/* Estilos para tabs servicios */










/* Estilo para el color de la línea divisoria */
.hrcolor {
    /* Por ejemplo, un color de marca y un grosor */
    border: 0;
    border-top: 3px solid #6c757d; /* Color gris oscuro de ejemplo */
    width: 100px; /* Ancho fijo para centrar y destacar */
    opacity: 1; /* Asegura que se vea el color definido */
    margin-left: auto;
    margin-right: auto;
}






/* ========================================================== */
/* DISEÑO DE GALERÍA COMPUESTA  */
/* ========================================================== */
/* 1. Altura de la imagen en Escritorio (lg y superior) */
/* Usamos una altura un poco más grande para el diseño de 3 columnas */
@media (min-width: 992px) {
    .image-gallery-wrapper-grid img {
        height: 250px; /* Altura estándar para las 3 columnas en desktop */
        object-fit: cover;
        width: 100%; /* Asegura que la imagen llena su columna */
    }
}

/* 2. Corrección de Altura para Móvil y Tablet (Hasta 991.98px) */
@media (max-width: 991.98px) {
    /* Esta regla afecta a la imagen principal que es la única visible */
    .image-gallery-wrapper-grid img {
        height: 300px; /* Altura más cómoda para móvil */
        max-height: 50vh; /* Opcional: Limita la altura a la mitad de la pantalla para evitar que sea muy alta */
        object-fit: cover;
    }
}




/* ========================================================== */
/* UNIFICADO: ESTILOS Y OPTIMIZACIÓN ACORDEÓN MÓVIL */
/* ========================================================== */

/* 1. ESTILOS BASE Y FUENTE: Contenedor Principal */
#mobile-accordion-container {
    /* Define la fuente para todo el acordeón */
    font-family: 'Montserrat', sans-serif !important;
    /* Elimina cualquier borde exterior del contenedor */
    border: none !important; 
}

/* 2. ELIMINACIÓN DE BORDES DIVISORIOS Y AJUSTES DE ESPACIADO DEL ÍTEM */
/* Consolida todas las reglas para eliminar bordes inferiores y ajustar el padding superior */
.list-group-item.pt-1, 
.accordion-flush .accordion-item {
    /* Elimina cualquier borde inferior de lista o acordeón (solución a la línea azul/negra) */
    border-bottom: none !important;
    border-color: transparent !important;
    /* Elimina el padding superior */
    padding-top: 0 !important;
}

/* 3. OPTIMIZACIÓN DE BOTÓN (HEADER) */
.accordion-header button.accordion-button {
    /* PADDING VERTICAL */
    padding-top: 0.75rem !important; 
    padding-bottom: 0.75rem !important; 
    /* Transición suave para HOVER */
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Asegura que el botón use la fuente del contenedor */
    font-family: inherit; 
}

/* A. TÍTULO DE LA CATEGORÍA (SPAN dentro del botón) */
.accordion-header .fw-light.fs-4 {
    color: var(--gris-texto) !important; 
    font-weight: 400 !important; /* Manteniendo el 400 que definiste en el original */
    letter-spacing: 0.5px !important;
    /* La fuente ya se define en el contenedor, se mantiene aquí por si acaso */
    font-family: 'Montserrat', sans-serif !important; 
    /* Asegura transición para el hover/abierto */
    transition: font-weight 0.2s ease;
}

/* B. HOVER SUTIL: Pasa el ratón (se aplica al SPAN) */
/* Selector para poner el texto del SPAN en negrita al hacer hover sobre el botón */
.accordion-header button.accordion-button:hover span {
    font-weight: 700 !important; 
    color: #020202 !important; 
}

/* C. ESTADO ABIERTO: El SPAN se pone en negrita al abrir */
.accordion-button:not(.collapsed) span {
    font-weight: 700 !important;
    color: #020202 !important; 
}

/* D. FOCUS SUTIL: Elimina el foco azul de Bootstrap */
.accordion-header button.accordion-button:focus {
    border: none !important;
    box-shadow: none !important; /* Quita el box-shadow azul */
    background-color: transparent !important;
}

/* 4. OPTIMIZACIÓN DE ESPACIADO: CONTENIDO DEL ACORDEÓN */
.accordion-body > div.p-3 {
    padding-top: 0.75rem !important; 
    padding-bottom: 0.75rem !important;
    font-family: Montserrat, sans-serif !important;
    line-height: 1.7 !important;
}

/* 5. OPTIMIZACIÓN DE SERVICIOS INTERNOS */
.accordion-body h5.fw-normal {
    font-weight: 500 !important; /* Seminegrita para subtítulos */
    font-size: 1rem !important; 
    color: #333333 !important; 
}

/* Asegura que los ítems internos tengan un espaciado uniforme y compacto */
.service-item-clean {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}


/* 1. Aplicar Montserrat a todos los elementos del acordeón móvil */
.montsefont{
    font-family: 'Montserrat', sans-serif !important; 
    /* Usamos !important solo si la fuente Playfair Display está siendo
       aplicada por un selector más específico que no podemos anular fácilmente. */
}

/* 2. Estilo para las categorías CERRADAS (colapsadas) */
.mobile-accordion-section .accordion-button.collapsed {
    color: #888; 
    font-weight: 400; /* Peso normal para texto inactivo */
    /* Aseguramos que la tipografía es Montserrat, si no se hereda correctamente */
    font-family: 'Montserrat', sans-serif; 
    
    background-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

/* 3. Estilo para las categorías ABIERTAS (seleccionadas) */
.mobile-accordion-section .accordion-button:not(.collapsed) {
    color: #000; 
    font-weight: 700; /* Negrita para resaltar */
    /* Aseguramos que la tipografía es Montserrat */
    font-family: 'Montserrat', sans-serif;
    
    background-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

/* Opcional: Si el H3 está causando problemas de herencia (aunque no debería) */
.mobile-accordion-section .accordion-header h3 {
    font-family: 'Montserrat', sans-serif !important;
}


/* CSS Correcto */
#mobile-accordion-container .accordion-button:not(.collapsed) span {
    font-weight: bold !important; /* O el peso de fuente que necesites (ej: 500, 600) */
}

/* Selector para el texto (<span>) dentro del botón que NO está colapsado */
#mobile-accordion-container .accordion-button:not(.collapsed) span {
    font-weight: bold !important;
}

/* Rotación para la flecha/toggle del acordeón */
.list-group-item.collapsed .dropdown-toggle {
    transition: transform 0.3s ease-in-out!important; /* Transición suave */
    transform: rotate(0deg); /* Estado inicial: cerrado */
}

.list-group-item:not(.collapsed) .dropdown-toggle {
    transition: transform 0.3s ease-in-out!important;
    transform: rotate(180deg); /* Estado activo: abierto, girado 180 grados */
}
/* 📱 Ajustes Específicos para Móvil (Opcional pero Recomendado) */
@media (max-width: 991.98px) { /* El punto de corte 'lg' de Bootstrap es 992px */
    .tab-content .tab-pane {
        padding: 0 5px; /* Quitar o reducir el padding lateral si lo tiene */
    }

    .service-item-clean {
        /* Darle una apariencia de lista jerárquica más fuerte en móvil */
        border-bottom: none!important; 
        border-left: none!important; /* Nuevo indicador visual */
        padding-left: 0.rem px; /* Espacio después del indicador */
        margin-bottom: 5px; /* Pequeño espacio entre items */
        display: flex; /* Asegura la correcta alineación */
        align-items: center;
    }
    
    .service-item-clean h5 {
        font-size: 1rem; /* Reducir el tamaño de fuente para móviles */
    }
}






/* --- ESTILOS DE TABS Y BOTONES de srvicios-- */

.listadomovil {
  border-bottom: none!important;
  
}


/* Esto es lo que necesitas agregar a tu CSS */
#mobile-accordion-container .accordion-button:not(.collapsed) span {
    /* Eliminamos el fw-light y aplicamos el estilo de fuente normal o negrita. */
    font-weight: 500 !important; /* Por ejemplo, para ponerlo 'fw-normal' (medium) */
}

/* Si quieres que sea completamente negrita */
#mobile-accordion-container .accordion-button:not(.collapsed) span {
    font-weight: bold !important; /* Esto es el equivalente a fw-bold */
}

.nav-categories-clean .nav-link {
    font-size: 1.1rem;
    font-weight: 500;
    color: #505050!important; 
    border: none;
    border-bottom: 3px solid transparent; 
    transition: all 0.3s;
    margin-right: 1.5rem;
    padding-left: 0;
    padding-right: 0;
}


.nav-categories-clean .nav-link.active {
    color: #000; 
    border-bottom-color: #000; 
}



/* ========================================================== */
/* RESPONSIVE: MÓVIL y escritorio tabs abajo linea================================ */

.service-item-clean {
    /* border-bottom: 0.5px solid #bdbdbd!important;  */
}

.explore-link-clean {
    font-size: 0.9rem;
    transition: color 0.3s;
}

.reserve-button-clean {
    padding: 0.8rem 1.8rem;
    font-weight: 600;
    border-radius: 0.5rem; 
}


/* ========================================================== */
/* RESPONSIVE: MÓVIL Y TABLET (< 992px) -> 1 IMAGEN */
/* ========================================================== */

@media (max-width: 991.98px) { 
    
    .mid-img-clean,
    .small-img-clean {
        display: none !important; 
    }
    
    .image-gallery-wrapper-clean {
        height: auto; 
        max-width: 350px; 
        margin: auto; 
        margin-bottom: 2rem;
    }
    
    .main-img-clean {
        position: relative; 
        width: 100%; 
        top: auto;
        left: auto;
        transform: none; 
    }
}





/* Estilo para el título principal */
.titulo2 {
    color: #6a6c6d; /* Color oscuro para destacar */
    font-weight: 700;
    letter-spacing: 2px;
    /* Ajustes responsivos se pueden hacer con media queries aquí si es necesario */
}



/* Estilos para la segunda sección (Título grande) */
.titulogrande {
    /* Esta clase puede definir un fondo más notorio si 'bg-light' no es suficiente */
    /* background-color: #e9ecef !important;  Ejemplo de un fondo más oscuro */
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

/* Estilo para el título secundario dentro de la segunda sección */
.titulo-servicios {
    color: #000;
    font-weight: 300; /* Fuente más ligera para el subtítulo */
    text-transform: uppercase;
}

/* Media query de ejemplo para ajustar el título en móviles */
@media (max-width: 576px) {
    .titulo2.display-4 {
        font-size: 2rem; /* Reduce el tamaño en pantallas pequeñas */
    }
}





/* Sección  Packs Especiales */


subtitulo h2{
    margin-top: 2rem!important;
}

.custom-img-height {
    height: 300px; /* Altura fija para desktop/tablet */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
}

@media (max-width: 991.98px) {
    /* Ajuste para pantallas más pequeñas (móviles y tablets) */
    .custom-img-height {
        height: 250px;
    }
}

/* Estilo para el pack grande (superposición de texto) */
.large-card {
    position: relative; /* Necesario para posicionar el texto superpuesto */
}

.large-card .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Fondo semi-transparente para mejorar la legibilidad del texto blanco sobre la imagen */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    padding-top: 50px; /* Para que el gradiente tenga espacio */
}

.large-card .card-title {
    font-size: 1.5rem; /* Título más grande para el pack destacado */
}

/* Estilo para las tarjetas pequeñas (secciones de la derecha) */
.small-card .card-img-top,
.small-card .col-md-6:first-child img {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}
/* Asegura que la imagen en las tarjetas pequeñas ocupe todo el espacio de su columna */
.small-card .col-md-6:first-child img {
    width: 100%;
    /* Altura se maneja con custom-img-height, pero ajustamos el radio en el div */
}

/* En el diseño original, las tarjetas pequeñas son horizontales en desktop y verticales en móvil.
 * Esto se maneja con la clase Bootstrap 'row g-0' y 'col-md-6'.
 */
@media (max-width: 767.98px) {
    /* En móvil, las tarjetas pequeñas se vuelven verticales, la imagen arriba, el texto abajo */
    .small-card .col-md-6 {
        width: 100%;
    }
}







/* 1. SECCIÓN PRINCIPAL sbre mi */


/* 2. TIPOGRAFÍA Y TEXTO */
/* Título principal: Peso muy audaz (bold) y grande */
.nombre{
  font-size: 6vh!important;

}

/* Subtítulo: Color gris, tamaño estándar */
.subtitle-clean {
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: #495057 !important; /* Un gris oscuro, similar al de la imagen */
}

/* 3. BOTÓN (Estilo suave y redondeado) */
.btn-whatsapp-clean {
    /* Color de fondo muy claro, casi blanco/grisáceo */
    background-color: #f1f1f1 !important; 
    
    /* Borde sutil */
    border: 1px solid #e0e0e0 !important; 
    
    /* Color de texto gris oscuro */
    color: #212529 !important; 
    
    /* Relleno para que se vea grande y cómodo */
    padding: 0.75rem 1.5rem !important; 
    
    /* Borde redondeado (similar al de la imagen) */
    border-radius: 0.5rem !important; 
    
    /* Quitar cualquier sombra o estilo de Bootstrap */
    box-shadow: none !important; 
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
}

.btn-whatsapp-clean:hover {
    /* Pequeño cambio de color al pasar el ratón */
    background-color: #e5e5e5 !important;
    color: #212529 !important; 
}

/* 4. IMAGEN (Control de tamaño y aspecto visual) */
.photo-column-clean {
    /* En escritorio, aseguramos que la columna tenga padding interno */
    padding: 1rem !important; 
}

.image-wrapper-clean {
    /* Define la altura deseada. Puedes usar 'vh' para que sea relativo al viewport */
    /* O puedes usar un valor fijo en 'px' o 'rem' si la altura de tu galería es fija. */
    /* Aquí usamos una altura relativa para que se adapte mejor. Ajusta este valor. */
    height: 550px; /* Ejemplo de altura fija que puede coincidir con la galería */
    
    /* Importante: oculta cualquier parte de la imagen que sobresalga */
    overflow: hidden; 
}

.profile-img-clean {
    /* Asegura que la imagen ocupe todo el ancho y alto del contenedor */
  
    height: 100%;
    
    /* Clave para mantener el aspecto de la imagen sin distorsionarla, recortando si es necesario */
    object-fit: cover; 
    
    /* Si estás en un diseño Flexbox o Grid, asegúrate de que no haya un 'max-width' interrumpiendo */
    max-width: 100%;
}

/* Considera una Media Query para móviles si quieres que la imagen no sea tan alargada */
@media (max-width: 767.98px) {
    .image-wrapper-clean {
        height: 300px; /* Una altura más adecuada para la vista móvil */
    }
}










        /* ================================
           NAVBAR / HEADER
        ================================ */
        .navbar {
            background-color: #fff !important;
            padding: 0.75rem 0;
            font-family: 'Raleway', sans-serif !important;
            font-weight: 500;
        }

        /* Logo styling */
        .logoOriginal {
            width: 110px;
            height: auto;
            object-fit: contain;
            display: block;
            transition: all 0.3s ease;
        }

        /* Navigation links */
        .nav-link {
            color: #555 !important;
            font-size: 0.95rem;
            letter-spacing: 0.3px;
            font-weight: 500;
            text-transform: none;
            transition: color 0.3s ease;
        }

        .nav-link:hover {
            color: #000000!important;
        }

        /* Hamburger button spacing */
        .navbar-toggler {
            margin-right: 1rem;
        }

        /* Botón de acción */
        .btn-gold {
            background-color: var(--oro-luxury) !important;
            color: var(--blanco-soft) !important;
            font-weight: 600;
            padding: 0.4rem 1.1rem;
            border-radius: 50px;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            text-transform: none;
            border: none;
        }

        .btn-gold:hover {
            background-color: #ffffff !important;
            color: var(--oro-luxury)!important;
            stroke: var(--oro-luxury);
            transform: scale(1.05);
        }

        /* ================================
           SECCIÓN SUBTÍTULO
        ================================ */
        .milano-subtitul {
            padding: 30px 12px 60px 12px;
            margin-top: 0px;
            margin-bottom: 0px;
            width: 100%;
        }

        /* Contenedor interno con ancho máximo */
        .milano-subtitul-container {
            max-width: 1140px;
            margin: 0 auto;
            padding-left: 15px;
            padding-right: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
        }

        .milano-subtitul p {
            margin: 0;
            font-size: clamp(0.9rem, 1vw, 1rem);
            letter-spacing: 6px;
            font-weight: 300;
            text-transform: uppercase;
            color: #a4a4a4;
        }

        .milano-subtitul h2 {
            margin: 4px 0 0 0;
            font-size: clamp(1.3rem, 2vw, 1.6rem);
            letter-spacing: 10px;
            font-weight: 300;
            text-transform: uppercase;
            color: #585858;
        }

        /* ================================
           RESPONSIVE DESKTOP (lg+)
        ================================ */
        @media (min-width: 992px) {
            /* Center logo on desktop */
            .navbar-brand {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                z-index: 10;
            }
        }

        /* ================================
           RESPONSIVE TABLET (md)
        ================================ */
        @media (max-width: 991.98px) {
            .navbar {
                padding: 0.5rem 0;
            }

            .logoOriginal {
                width: 80px;
            }

            .milano-subtitul {
                margin-top: 50px;
            }

            .milano-subtitul p {
                font-size: 0.9rem;
                letter-spacing: 4px;
            }

            .milano-subtitul h2 {
                font-size: 1.1rem;
                letter-spacing: 6px;
            }
        }

        /* ================================
           RESPONSIVE MÓVIL (xs)
        ================================ */
        @media (max-width: 575.98px) {
            .navbar {
                padding: 0.5rem 0;
            }

            .logoOriginal {
                width: 65px;
            }

            .nav-link {
                font-size: 0.9rem;
            }

            .btn-gold {
                font-size: 0.85rem;
                padding: 0.35rem 0.9rem;
            }

            .milano-subtitul {
                margin-top: 40px;
                padding: 20px 12px 40px 12px;
            }

            .milano-subtitul p {
                font-size: 0.8rem;
                letter-spacing: 3px;
            }

            .milano-subtitul h2 {
                font-size: 1rem;
                letter-spacing: 5px;
            }
        }


















.hero {
    /* Imagen por defecto, idealmente para escritorio o tablets grandes */
    background: url('../img/homeversionpeq.webp') center center/cover no-repeat;
    height:70vh;
    position: relative;
    /* Asegura una transición suave si el navegador cambia de tamaño */
    transition: background-image 0.5s ease-in-out; 
}

/* Media Query para Dispositivos Móviles (ej: Pantallas de hasta 768px de ancho) */
@media (max-width: 768px) {
    .hero {
        /* Sobrescribe la imagen de fondo con la versión optimizada para móvil */
        background-image: url('../img/homemovil03.webp');
        
        /* Opcional: Ajustar la altura para móvil si 70vh es demasiado o muy poco */
        height: 60vh; 
        
        /* Opcional: Ajustar la posición o el cover si la imagen móvil lo requiere */
        background-position: center top; /* Ejemplo: centrar horizontalmente, anclar arriba */
    }
}

.herotitle {
  color: var(--blanco-soft);
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  overflow: hidden;
  border-right: 3px solid var(--blanco-soft);
  white-space: nowrap;
  font-size: 2.5rem;
  /* tamaño base en escritorio */
}
/* Pantallas medianas (tablets) */
@media (max-width: 992px) {
  .herotitle {
    font-size: 1.5rem;
    letter-spacing: 4px;
  }
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 576px) {
  .herotitle {
    font-size: 1rem;
    letter-spacing: 2px;
  }
}

.hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Cursor parpadeante */
@keyframes blink {

  0%,
  50%,
  100% {
    border-color: var(--blanco-soft);
  }

  25%,
  75% {
    border-color: transparent;
  }
}

.herotitle {
  animation: blink 1s infinite;
}




.hero-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 3;
  position: relative;
}

.hero-logo-wrapper img {
  width: 80vw;
  /* ocupa 70% del ancho de la pantalla */
  max-width: 600px;
  /* límite superior en pantallas grandes */
  min-width: 250px;
  /* nunca más pequeño que esto */
  height: auto;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.3));
}

.hero-logo-wrapper img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.5));
}

/* 📱 Ajustes responsive */
@media (max-width: 992px) {
  .hero-logo-wrapper img {
    width: 65vw;
    max-width: 480px;
  }
}

@media (max-width: 768px) {
  .hero-logo-wrapper img {
    width: 70vw;
    max-width: 400px;
  }
}

@media (max-width: 576px) {
  .hero-logo-wrapper img {
    width: 80vw;
    max-width: 320px;
  }
}






/* Botón del hero */
.btn-outline-aura {
    background-color: #eeeeee2c;
  color: var(--blanco-soft) !important;
  border: 1px solid var(--blanco-soft) !important;
  padding: 0.75rem 2rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 30px;
  transition: all 0.3s ease;
  font-size: 1rem;
  /* tamaño base del botón */
}

.botones-aura {
  margin-top: 2vh;
  display: flex;
  justify-content: center;
  /* centra horizontalmente */
  align-items: center;
  gap: 1rem;
  /* espacio entre botones */
  flex-wrap: wrap;
  /* permite que bajen si no hay espacio */
}


.botones-aura :hover {
  background-color: var(--blanco-soft);
  color: var(--oro-luxury) !important;
}





.btn-outline-custom {
  border: 1px solid var(--verde-relax);
  background: transparent;
  color: #555;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 30;
  margin-top: 1.5rem;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-outline-custom:hover {
  background-color: var(--verde-relax);
  color: var(--blanco-soft);

}

.media-container video,
.media-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}



.logoOriginal {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}



.btn-gold {
  color: var(--oro-luxury);
  border: 0.5px solid var(--oro-luxury);
  background-color: transparent;
  border-radius: 30px;
  padding: 0.5rem 1.5rem;
  /* más compacto que hero */
  font-size: 0.95rem;
  /* ligeramente más pequeño */
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background-color: var(--oro-luxury);
  color: var(--blanco-soft);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}


.cliente {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 600;
}





#servizi {
  background-color: #ffffff!important;

  color: #555;
  margin-bottom: 2px;

 
  
  font-weight: 600;
}






 







.botones-card {
    /* 1. Habilita Flexbox */
    display: flex; 
    
    /* 2. Alinea los botones a la derecha */
    justify-content: flex-end; 
    
    /* 3. Añade un espacio entre los botones (opcional, pero mejora la estética) */
    gap: 10px; 
    
    /* 4. Asegura que no haya padding residual de Bootstrap que estorbe */
    padding-left: 0;
    padding-right: 0;
}

.boton-pequeno {
    /* Reduce el ancho de los botones */
    width: 150px; /* Puedes ajustar este valor */
    
    /* Opcional: ajusta el padding si quieres que sean menos altos */
    padding: 6px 10px;
    
    /* Fuerza que el texto no se rompa si el ancho es muy pequeño */
    white-space: nowrap; 
}








/* 1. Estilos generales de la sección */
.about-me-v2 {
  
    background-color: #f8f9fa;
} 

/* 2. Etiqueta de sección */
.section-tag .text-primary {
    /* Define tu color primario (ej. el color de tu marca) */
    color: var(--gris-texto) !important; /* Sustituye por tu color de marca */
    letter-spacing: 0.15em;
    font-weight: 600;
}

/* 3. Resaltado de especialidad (Nuevo bloque de credibilidad) */
.specialty-highlight {
    /* Usar un color secundario para el borde o un tono neutro */
    border-color: #ced4da !important; /* Color neutro para el borde */
    background-color: #f8f9fa; /* Fondo ligeramente diferente para destacar */
}

/* 4. Columna de la foto */
.photo-column-v2 {
    /* Añadimos un poco más de margen inferior en móvil si no estamos usando g-5 de row */
    margin-bottom: 2rem;
}

/* 5. Contenedor de la imagen y efecto decorativo */
.image-wrapper-v2 {
    /* Permite posicionar el elemento decorativo en relación a la imagen */
    max-width: 85%; /* Ajuste sutil del tamaño */
}

.profile-img-v2 {
    /* Asegurar que la sombra sea profunda y que la imagen destaque */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    transition: transform 0.3s ease-in-out;
}

.profile-img-v2:hover {
    /* Pequeño efecto hover para hacerlo interactivo (UX) */
    transform: translateY(-5px);
}

/* 6. Elemento decorativo (Círculo superpuesto) */
.decorative-element-v2 {
    width: 150px;
    height: 150px;
    background-color: rgba(206, 212, 218, 0.5); /* Tono suave o de marca */
    z-index: -1; /* Detrás de la imagen */
    bottom: -20px;
    left: -20px;
    /* En pantallas grandes, muévelo a una esquina sutil */
    right: auto;
}

/* Media Query para pantallas pequeñas: Ocultar el elemento decorativo si es necesario */
@media (max-width: 767.98px) {
    .decorative-element-v2 {
        display: none;
    }
    .photo-column-v2 {
        /* Asegurar que el texto esté alineado a la izquierda como es habitual */
        text-align: left !important;
    }
}

/* 7. Estilos para el texto de la cita final */
.final-quote-v2 {
    border-left: 3px solid #252424;
    padding-left: 1rem;
}

botonprimario {
    /* 1. Fondo transparente */
    background-color: transparent !important;
    
    /* 2. Borde (Outline): 2px sólido, negro/gris (el color #444 que especificaste) */
    border: 2px solid #444 !important; 
    /* Se sustituye 'stroke: 1px' por 'border: 2px solid #444' */
    
    /* 3. Color del texto (para que coincida con el borde) */
    color: #444 !important;
    
    /* 4. Radio de las esquinas */
    border-radius: 2px !important;
    
    /* Opcional: padding mínimo para que no se vea vacío */
    padding: 0.5rem 1.5rem !important; 
    
    /* Opcional: Transición suave para el efecto hover (mejor UX) */
    transition: all 0.3s ease !important;
}






.testimoni {
  background-color:  #ffffff !important;
  


.newsletter {
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.newsletter h2 {
  font-weight: 700;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: #000;
}

.newsletter p {
  color: #555;
  font-size: 1rem;
  max-width: 450px;
}

.newsletter .form-control {
  border: 2px solid #000;
  border-radius: 0;
  padding: 0.8rem 1rem;
  font-size: 1rem;
}

.newsletter .form-control:focus {
  box-shadow: none;
  border-color: #000;
}

.newsletter .btn-dark {
  border-radius: 0;
  padding: 0.8rem 2rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.newsletter .btn-dark:hover {
  background-color: #333;
}

/* Imagen lado derecho */
.newsletter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #1d2eed;
  /* Azul de fondo */
}

/* ===== Responsivo ===== */
@media (max-width: 767.98px) {
  .newsletter .row {
    flex-direction: column-reverse;
  }

  .newsletter img {
    border-radius: 1rem 1rem 0 0;
  }
}













/* 🔹 Navegación superior estilo spa */
.nav2 li {
  font-family: 'Helvetica Neue', sans-serif !important;
  color: #78a48b !important;
  font-weight: 500;
  transition: all 0.3s ease;
  text-transform: capitalize;
  padding-bottom: 0.5rem;
  font-size: large !important;
}

.nav-link.active,
.nav-link:hover {
  color: #000000 !important;
  border-bottom: 2px solid #000000;
}





.titulogrande {


  background-color: var(--blanco-soft) !important;
}

.titulo-servicios {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500;
  color: var(--verde-relax);

  font-size: 9rem;
  letter-spacing: 4px;

  margin-bottom: 1rem;

}


/* Ajuste para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
  .titulo-servicios {
    font-size: 2.5rem;
    /* tamaño más legible en móvil */
    letter-spacing: 2px;
    /* reduce el espaciado para que no se vea raro */
    line-height: 1.2;
  }
}







.titulogrande2 {


  background-color: var(--blanco-soft) !important;
}

.titulogrande2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500;
  color: var(--gris-texto);

  font-size: 2rem;
  letter-spacing: 2px;

  margin-bottom: 0.1rem;

}


/* Ajuste para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
  .titulogrande2 {
    font-size: 2.5rem;
    /* tamaño más legible en móvil */
    letter-spacing: 2px;
    /* reduce el espaciado para que no se vea raro */
    line-height: 1.2;
  }
}


/**logominimalista*/
.seccion-logo {
  background-color: #b9b9b9 !important;
  /* fondo claro, minimalista */
  padding: 5rem 0;
  /* espacio amplio */
}

/* Logo de la marca */
.logo-marca {
  max-width: 250px;
  /* tamaño máximo en escritorio */
  width: 100%;
  /* se adapta al contenedor */
  height: auto;
  /* mantiene proporción */
  transition: transform 0.3s ease;
}

/* Efecto al pasar el mouse */
.logo-marca:hover {
  transform: scale(1.05);
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .logo-marca {
    max-width: 180px;
    /* reduce tamaño en móvil */
  }
}

@media (max-width: 576px) {
  .logo-marca {
    max-width: 140px;
    /* aún más pequeño para móviles pequeños */
  }
}

.revista .main-article,
.revista .sub-article {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.revista .main-article img,
.revista .sub-article img {
    width: 100%;
    height: auto;
    display: block;
}





/* ================================
           FOOTER STYLES
        ================================ */


/* ========================================================== */
/* ESTILO FOOTER: MONTSERRAT MODERNO (Minimalista Oscuro, Sin Variables) */
/* ========================================================== */

.footer-montserrat-modern {
    background-color: #dddddd!important; /* Fondo Gris Oscuro */
    color: #4d4d4d !important; /* Color de texto Gris Claro */
    padding: 4rem 0 2rem !important; 
    font-family: 'Montserrat', sans-serif !important;
}

/* --- TÍTULOS --- */
.footer-montserrat-modern .footer-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #808080; /* Títulos en Naranja Suave (Acento) */
    text-transform: uppercase;
    letter-spacing: 3px; 
    margin-bottom: 1.5rem;
}

/* --- BRAND TAGLINE (Texto en el medio) --- */
.footer-montserrat-modern .brand-tagline {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 1px;
    color: #ffffff;
}

/* --- ENLACES DE CONTACTO Y DESARROLLADOR --- */
.footer-montserrat-modern .contact-link,
.footer-montserrat-modern .developer-link {
    font-size: 0.95rem;
    color: #f8f9fa;
    transition: color 0.3s ease;
    font-weight: 500;
}

.footer-montserrat-modern .contact-link:hover,
.footer-montserrat-modern .developer-link:hover {
    color: #5c5c5c; /* Hover en Naranja Suave */
}

.footer-montserrat-modern .contact-link i {
    color: #616161; /* Íconos en Naranja Suave */
    font-size: 1.1rem;
}

/* --- BOTONES SOCIALES (Estilo cuadrado y plano) --- */
.footer-montserrat-modern .social-links {
    gap: 1rem;
}

.footer-montserrat-modern .social-link {
    width: 40px;
    height: 40px;
    border-radius: 4px; 
    background: transparent;
    color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 1.4rem; 
    transition: all 0.3s ease;
}

.footer-montserrat-modern .social-link:hover {
    background: #424242;
    color: #343a40; /* Texto oscuro en hover para contraste */
    border-color: #535150;
}

/* --- COPYRIGHT Y DESARROLLO --- */
.footer-montserrat-modern .copyright-text,
.footer-montserrat-modern .development-text {
    font-size: 0.85rem; 
    color: rgba(255, 255, 255, 0.6); 
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.footer-montserrat-modern .development-text i {
    color: #3a3a3a; /* Corazón en acento */
}

/* --- RESPONSIVE AJUSTES --- */
@media (max-width: 991.98px) {
    .footer-montserrat-modern .contact-links {
        align-items: center !important; 
    }
}




.service-title{
    font-size: 1.15rem!important;;
}





/* Se eliminaron los media queries duplicados y redundantes. */

/* ================================
           INLINE STYLES MOVED TO CSS
        ================================ */

/* Experiencias section text max-width */
.experiencias-text-max-width {
    max-width: 700px;
}

/* Service detail page specific styles */
.service-title-main {
    color: var(--cafe-luxury);
    font-family: 'Playfair Display', serif;
}

.service-lead-text {
    color: var(--gris-texto);
    font-family: 'Cormorant Garamond', serif;
}

.highlight-gold {
    color: var(--oro-luxury);
}



.process-icon-color {
    color: var(--oro-luxury);
}

.process-text {
    color: var(--gris-texto);
    font-family: 'Cormorant Garamond', serif;
}

/* Related services styling */
.related-service-icon {
    color: var(--oro-luxury);
}



.related-service-text {
    color: var(--gris-texto);
    font-family: 'Cormorant Garamond', serif;
}

.related-service-btn {
    border-color: var(--oro-luxury);
    color: var(--oro-luxury);
    border-radius: 20px;
    font-weight: 500;
}
  



/* tetsimonio  */

/* Oculta la barra de desplazamiento para Chrome, Safari y Opera */
.scroll-hidden::-webkit-scrollbar {
    display: none;
}

/* Oculta la barra de desplazamiento para IE, Edge y Firefox */
.scroll-hidden {
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
}







/* Pagina privacidad  */

   
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--colore-sfondo);
    color: var(--colore-testo);
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background-color: var(--colore-primario);
    color: white;
    padding: 20px 40px;
    width: 100%;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2em;
}

main {
    width: 90%;
    max-width: 800px;
    padding: 20px;
}

section {
    background: white;
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--colore-primario); /* Tocco minimalista */
}

h2 {
    color: var(--colore-primario);
    border-bottom: 1px solid var(--colore-separatore);
    padding-bottom: 10px;
    margin-top: 0;
}

ul, ol {
    padding-left: 20px;
}

li {
    margin-bottom: 8px;
}

footer {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    font-size: 0.8em;
    color: #777;
    border-top: 1px solid var(--colore-separatore);
}

/* Stili per l'enfasi */
p strong, ul strong {
    font-weight: bold;
    color: var(--colore-primario);
}