/*boton up*/
.scrollup {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 50px;
    right: 1%;
    display: none;
    text-indent: -9999px;
    cursor: pointer;
}

/*boton up*/
/* ----------------------------------------------------- */
/* ESTILOS PARA LA IMAGEN CON RECORTE CENTRADO */
.card-image-wrapper {
    /* Dimensiones de la imagen según Figma */
    width: 329.33px;
    width: 100%;
    height: 250px;
    /* Aseguramos que la card no sea más ancha que la imagen */
    max-width: 100%;
    /* Se usa overflow: hidden; en .hotel-card para aplicar el border-radius */
}

.card-image {
    width: 100%;
    height: 100%;
    /* La clave para el recorte centrado y el "cover" */
    object-fit: cover;
    /* Se usa la clase de Bootstrap .rounded-top para el radio superior */
}

/* Variables y Estilos Generales */
/*
:root {
    --color-primary: #003954;
    
    --font-golos: 'Golos Text', sans-serif;
    --font-cal-sans: 'Cal Sans', sans-serif;
}
/*
body {
    background-color: #f8f9fa;
    
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}*/

/* ----------------------------------------------------- */
/* PASO 1: Inclusión de Cal Sans (Simulación con @font-face)
           ESTO ASUME QUE EL ARCHIVO 'CalSans-Regular.woff2' ESTÁ EN TU CARPETA 'fonts/'
        */

@font-face {
    font-family: 'Cal Sans';
    /* En un proyecto real, cambia 'url(...)' a la ubicación de tu archivo */

    src: url('../fonts/CalSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------- */
/* Estilos específicos basados en Figma */

/* Estilo para el contenedor principal de la tarjeta (Rectangle 24 + Frame 1000006553) */
.hotel-card {
    background: #FFFFFF;
    /* width: 319px; height: 696px; (Bootstrap lo hace flexible, usamos max-width) */
    max-width: 319px;
    max-width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Sombra sutil para destacar */
    border-radius: 8px;
    /* Opcional, Figma no lo especifica pero mejora la estética */
}

/* Estilo del título principal (Reserva tu hotel...) */
.cal-sans-title {
    font-family: var(--font-cal-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 33.35px;
    /* Convertido a px */
    line-height: 1.3;
    /* Ajustamos para una mejor lectura, aunque Figma dice 43px/33.35px = 1.28 */
    color: var(--color-primary);
    /* En móvil, usamos una unidad relativa como 'vw' o ajustamos el tamaño */
    font-size: clamp(28px, 6vw, 33.35px);
}

/* Estilo del subtítulo (Desde la búsqueda...) */
.golos-subtitle {
    font-family: var(--font-golos);
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: var(--color-primary);
}

/* Estilo del botón CTA (Descubre más) */
.cta-button {
    /* box-sizing: border-box; ya viene por defecto */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    /* Padding ya definido por Bootstrap, pero lo forzamos */
    gap: 10px;
    width: 100%;
    /* Toma el ancho del contenedor */
    height: 56px;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    color: var(--color-primary);
    background-color: transparent;
    text-decoration: none;
    transition: all 0.2s;
}

.cta-button:hover {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

.cta-button-text {
    font-family: var(--font-golos);
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
}


/* ======================================================= */
/* ESTILOS DEL HEADER/NAVBAR ADAPTADO */
/* ======================================================= */

.breadcrumb-item+.breadcrumb-item::before {
    content: "›";
    color: #6c757d;
    margin: 0 0.4rem;
}

.breadcrumb-item a:hover {
    color: #0d6efd;
}

nav[aria-label="breadcrumb"] {
    background-color: #f6f8fc;
    border-radius: 12px;
}

/* ======================================================= */
/* ESTILOS DEL HEADER/NAVBAR ADAPTADO */
/* ======================================================= */
.navbar-custom {
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Sombra sutil */
    /* Quitar el padding fijo superior e inferior para usar solo el padding de los enlaces */
    padding-top: 0;
    padding-bottom: 0;    
}

/* Estilo de los enlaces de navegación */
.nav-link-custom {
    color: #003954 !important;
    /* Azul oscuro para los enlaces inactivos */
    font-weight: 600;
    /* SemiBold */
    padding-bottom: 0.75rem !important;
    padding-top: 0.75rem !important;
    position: relative;
    margin-right: 0.5rem;
    /* Espaciado más compacto */
}

/* Estilo del enlace activo (con la línea roja) */
.nav-link-custom.active {
    color: #003954 !important;
    /* El texto activo se mantiene azul oscuro */
}

.nav-link-custom.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    /* Ancho de la línea roja */
    height: 3px;
    background-color: #dc3545;
    /* Color rojo */
    border-radius: 5px;
}

/* Ajuste para el tamaño del logo */
.navbar-brand img {
    height: 80px;
    /* Reducir de 80px a 40px para que se vea como en la maqueta */
    width: auto;
}

/* Estilos del botón Iniciar Sesión (para cuando no hay sesión) */
.btn-iniciar-sesion {
    background-color: #003954;
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem;
}

/* ======================================================= */
/* ESTILOS DEL DROPDOWN DEL USUARIO */
/* ======================================================= */

.user-dropdown-menu {
    width: 250px;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0 !important;
}

/* Contenedor del nombre/email */
.dropdown-header-content {
    padding: 1rem 1rem 0.5rem 1rem;
}

/* Estilos específicos de los elementos del menú */
.dropdown-item-custom {
    padding: 0.5rem 1rem;
    color: #003954 !important;
    /* Texto azul oscuro para los enlaces del menú */
    font-weight: 400;
}

/* Estilo para el botón dentro del dropdown (el que tiene la imagen de usuario) */
.btn-user-img {
    background-color: #003954;
    /* Fondo azul oscuro */
    border-color: #003954;
    padding: 0.5rem;
    /* Ajustar padding si se usa un icono/imagen */
    border-radius: 0.5rem;
}

.btn-user-img img {
    height: 30px;
    /* Ajustar el tamaño de la imagen de login/perfil */
}

/* ======================================================= */
/* ESTILOS DE LA NUEVA SECCIÓN HERO */
/* ======================================================= */
.hero-section {
    position: relative;
    /* Reemplaza esta URL con la imagen real de fondo */
    background-image: url('../../ftp/imagenes/cubaplaza-hero.webp');
    background-size: cover;
    background-position: center;
    height: 70vh;
    /* Altura de la sección (70% del viewport) */
    min-height: 550px;
    color: white;
    display: flex;
    align-items: flex-end;
    /* Alinear el contenido a la parte inferior */
    padding-bottom: 3rem;
}

.tt-hero {
    position: absolute;
    top: -150px !important;
}


/* Superposición de color (Overlay) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* El color exacto con transparencia (similar al de la imagen) */
    background-color: rgba(30, 30, 30, 0.4);
}

/* Títulos del Hero */
.hero-title {
    font-size: 3.5rem;
    /* Tamaño de letra grande */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 2rem;
}

/* Contenedor del Buscador */
.search-bar-container {
    position: absolute;
    bottom: 60px;
    /* Sube la barra de búsqueda para superponerla */
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    /* Ancho del buscador */
    max-width: 1100px;
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Sombra para destacarla */
    padding: 0.5rem;
}

/* Estilos de los campos de entrada */
.search-input-group {
    border: none;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    /* Fondo gris claro */
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1rem;
    color: #495057;
}

.search-input-group i {
    margin-right: 0.75rem;
    color: #6c757d;
}

/* Estilo para los inputs de texto/fecha */
.search-input-group input {
    border: none;
    background: none;
    flex-grow: 1;
    padding: 0;
    font-weight: 600;
}

.search-input-group input:focus {
    outline: none;
    box-shadow: none;
}

/* Botón de Buscar */
.btn-search {
    background-color: #dc3545;
    /* Rojo vibrante */
    color: white;
    font-weight: 700;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search:hover {
    background-color: #c82333;
    color: white;
}

/* ======================================================= */
/* ESTILOS DEL DROPDOWN DEL USUARIO (simulando el menú) */
/* ======================================================= */

/* Estilo para el contenedor del menú desplegable */
.user-dropdown {
    width: 250px;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Títulos del menú (Hola, Juan) */
.dropdown-header-custom h6 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #003954;
    margin-bottom: 0;
}

.dropdown-header-custom p {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Línea divisoria simulada */
.dropdown-divider-custom {
    border-top: 1px solid #e9ecef;
    margin: 0.5rem 0;
}

/* Enlaces del menú */
.dropdown-item-custom {
    font-weight: 400;
    padding: 0.5rem 1rem;
}

/* ======================================================= */
/* ESTILOS DE LA NUEVA SECCIÓN (Destinos Inigualables) */
/* ======================================================= */

.destinos-section {
    background-color: white;
    padding: 3rem 0;
}

/* Menú lateral de redes sociales */
.social-sidebar {
    background-color: #003954;
    width: 60px;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 0.5rem;

    /* CAMBIO CLAVE: Usa 'fixed' para que permanezca en la misma posición del viewport */
    position: fixed;

    left: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Asegura que el menú esté por encima del contenido */
    z-index: 1000;

    /* También asegúrate de que el display: none; para móviles esté manejado por una media query si lo quieres mostrar en desktop */
}

/* Regla para mostrarlo solo en pantallas medianas o más grandes (Desktop) */
@media (min-width: 768px) {
    .social-sidebar {
        display: flex !important;
        /* Asegura que se muestre en desktop */
    }
}

.social-sidebar a {
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 0.5rem 0;
    display: block;
}

/* Títulos de la sección */
.destinos-overline {
    color: #003954;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.destinos-main-title {
    color: #003954;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

/* Flechas de navegación del carrusel */
.destinos-nav-arrow {
    width: 45px;
    height: 45px;
    border: 1px solid #dee2e6;
    /* Borde gris claro */
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #003954;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.destinos-nav-arrow:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

/* Contenedor de las tarjetas de destino (scroll horizontal) */
.destinos-scroll-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1rem;
    margin-left: -15px;
    /* Ajuste para el padding del container */
    margin-right: -15px;
    /* Ajuste para el padding del container */
    scroll-snap-type: x mandatory;
    /* Para un scroll más suave */
}

.destinos-card-wrapper {
    flex: 0 0 auto;
    width: 280px;
    /* Ancho fijo de cada tarjeta */
    margin-right: 1.5rem;
    scroll-snap-align: start;
    /* Para el scroll snap */
}

/* Estilos de la tarjeta de destino */
.card-destino {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0px 16px 34px 0px rgba(56, 100, 171, 0.15);
    /* Sombra de Figma */
    position: relative;
    /* Para posicionar el texto "La Habana" y el botón */
    height: 100%;
    /* Para que todas tengan la misma altura */
}

.card-destino img {
    width: 100%;
    height: 350px;
    /* Altura de la imagen */
    object-fit: cover;
    border-radius: 1rem;
}

/* Texto superpuesto "La Habana" */
.card-destino .location-overlay {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    /* Sombra para el texto */
}

/* Botón "Descubre más" */
.btn-descubre {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    /* Fondo semi-transparente */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.6);
    /* Borde blanco semi-transparente */
    border-radius: 0.5rem;

    /* MODIFICACIONES PARA EL ANCHO */
    width: 80%;
    /* Esto hará que el botón ocupe el 80% del ancho de su contenedor padre */
    max-width: 200px;
    /* Opcional: Establecer un ancho máximo para que no se haga demasiado grande */

    padding: 0.75rem 0;
    /* Padding vertical, el horizontal ya no es tan crítico con width */
    /* text-align: center; (ya es por defecto para botones) */

    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-descubre:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

/* ======================================================= */
/*Estilos de la sección anterior (Beneficios)*/
/* ======================================================= */
.gogocuba-title {
    color: #003954;
}

/* Estilos para las tarjetas y la sombra de Figma */
.card-custom {
    border: none;
    border-radius: 1rem;
    padding: 1.5rem;
    height: 100%;
    /* Sombra aplicada de Figma */
    box-shadow: 0px 16px 34px 0px rgba(56, 100, 171, 0.15);
}

/* Estilo para el contenedor del SVG */
.icon-svg-container {
    width: 100%;
    max-width: 120px;
    height: auto;
    margin-bottom: 1rem;
}

.icon-svg-container svg {
    width: 100%;
    height: auto;
    color: #003954;
    /* Color azul para los trazos del SVG */
}

/* Color específico para el título de la tarjeta */
.card-title-color {
    color: #003954;
    /* La tipografía del título probablemente es más grande y en negrita */
    font-family: 'Golos Text', sans-serif;
    font-weight: 700;
    /* Asumiendo que el título es un poco más audaz */
}

/* 3. Estilos de Tipografía del Párrafo (según tus especificaciones de Figma) */
.card-text-color {
    color: #6c757d;
    font-family: 'Golos Text', sans-serif;
    /* font-weight: 600 corresponde a SemiBold */
    font-weight: 600;
    /* font-size: 16.63px */
    font-size: 16.63px;
    /* line-height: 100% */
    line-height: 1;
    /* 100% de line-height se traduce a un valor de 1 en CSS */
    /* letter-spacing: 0% - valor por defecto, no es necesario declararlo */
}

/* ======================================================= */
/* ESTILOS DE LA NUEVA SECCIÓN (Botón de Suerte) */
/* ======================================================= */

/* Fondo azul oscuro, similar al del diseño */
.cta-section {
    background-color: #0d324d;
    /* Un azul marino oscuro aproximado */
    padding: 4rem 0;
    /* Espaciado vertical */
    color: white;
    font-family: 'Golos Text', sans-serif;
}

.cta-title {
    font-size: 2.5rem;
    /* Tamaño de letra grande para el título */
    font-weight: 700;
    /* Negrita */
    margin-bottom: 0.5rem;
}

.cta-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* Estilo del botón: Borde blanco, texto blanco, fondo transparente */
.btn-outline-custom {
    color: white;
    border-color: white;
    border-radius: 0.5rem;
    /* Bordes redondeados */
    padding: 0.75rem 2rem;
    font-weight: 600;
    /* SemiBold */
    transition: all 0.3s ease;
}

.btn-outline-custom:hover {
    background-color: white;
    color: #0d324d;
    /* Invierte los colores al pasar el ratón */
    border-color: white;
}

/* Estilos de la sección anterior (Beneficios) - Omitidos por brevedad */

/* ======================================================= */
/* ESTILOS DE LA NUEVA SECCIÓN (Hoteles) */
/* ======================================================= */

/* Estilo para el título principal */
.hotel-section-title {
    color: #003954;
    /* Azul oscuro */
    font-size: 2.5rem;
    font-weight: 700;
}

/* Estilo para el subtítulo */
.hotel-section-subtitle {
    color: #003954;
    font-size: 1.1rem;
    font-weight: 400;
}

/* Contenedor que permite el desplazamiento horizontal */
.horizontal-scroll-container {
    display: flex;
    overflow-x: auto;
    /* Habilita el desplazamiento horizontal */
    overflow-y: hidden;
    padding-bottom: 1rem;
    /* Espacio para la barra de desplazamiento */
    margin-left: -15px;
    /* Compensa el padding del container */
    margin-right: -15px;
    /* Compensa el padding del container */
}

/* Estilo para cada tarjeta dentro del desplazamiento */
.hotel-card-wrapper {
    flex: 0 0 auto;
    /* Importante: Evita que las tarjetas se estiren */
    width: 300px;
    /* Ancho fijo para cada tarjeta (ajustar según necesidad) */
    margin-right: 1.5rem;
    /* Espacio entre tarjetas */
}

.card-hotel {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    /* Asegura que la imagen tenga bordes redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    width: 100%;
}

.card-hotel img {
    border-radius: 1rem;
    object-fit: cover;
    height: 200px;
    /* Altura fija para la imagen */
}

/* Estilos específicos de texto de la tarjeta */
.text-location {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0.2rem;
}

.text-price {
    font-size: 1.25rem;
    font-weight: 700;
    /* Negrita */
    color: #003954;
}

/* Estilo del botón 'Reservar' con borde */
.btn-reservar {
    border-color: #003954;
    /* Color azul */
    color: #003954;
    font-weight: 600;
    border-radius: 0.5rem;
    width: 100%;
}

/* Estilos de las flechas de navegación (simuladas con Bootstrap Icons) */
.nav-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #003954;
    cursor: pointer;
    transition: background-color 0.2s;
}

.nav-arrow:hover {
    background-color: #f8f9fa;
}

/* Estilos del Título Principal */
.collection-main-title {
    color: #003954;
    /* Color azul oscuro de los títulos */
    font-size: 2.5rem;
    font-weight: 700;
}

/* Estilos del Subtítulo */
.collection-subtitle {
    color: #003954;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 3rem;
    /* Espacio antes de las tarjetas */
}

/* Estilo para las tarjetas de colección */
.card-collection {
    border: none;
    border-radius: 1rem;
    box-shadow: 0px 16px 34px 0px rgba(56, 100, 171, 0.05);
    /* Sombra más suave o la de Figma si lo deseas */
    padding: 0.5rem;
    /* Pequeño padding interno */
    text-align: center;
    height: 100%;
}

/* Contenedor gris de la imagen */
.image-placeholder {
    background-color: #e0e0e0;
    /* Color gris claro */
    border-radius: 0.75rem;
    /* Bordes ligeramente redondeados */
    height: 150px;
    /* Altura para el placeholder de la imagen */
    width: 100%;
    margin-bottom: 1rem;
}

/* Título de la tarjeta de colección */
.card-collection-title {
    color: #003954;
    font-weight: 600;
    /* SemiBold */
    font-size: 1.1rem;
    padding-bottom: 0.5rem;
}

/* Clase para centrar el encabezado */
.text-center-desktop {
    text-align: center !important;
}

/* ======================================================= */
/* ESTILOS DEL FOOTER */
/* ======================================================= */
.main-footer {
    background-color: white;
    /* Color de fondo blanco o gris muy claro */
    color: #495057;
    /* Texto gris para el cuerpo del footer */
    padding-top: 3rem;
}

.footer-heading {
    color: #444444;
    /* Título en negro o azul oscuro */
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
    /* Un poco de espaciado para las mayúsculas */
    text-transform: uppercase;
}

.footer-link,
.footer-contact-item {
    list-style: none;
    padding: 0;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 400;
    /* Texto normal */
}

.footer-link a,
.footer-contact-item a {
    color: inherit;
    text-decoration: none;
}

.footer-contact-item i {
    margin-right: 0.5rem;
    color: #007bff;
    /* Color azul para los iconos */
}

/* Estilos de la parte inferior (Derechos y Redes Sociales) */
.footer-bottom {
    border-top: 1px solid #e9ecef;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 0.85rem;
    color: #6c757d;
}

.footer-bottom a {
    color: inherit;
    text-decoration: none;
    margin-right: 1rem;
}

.social-icons a {
    font-size: 1.1rem;
    margin-left: 1rem;
    color: #003954;
    /* Color azul oscuro para los iconos */
}

/* MEDIA QUERY: A PARTIR DE 768px (Tabletas y Desktop) */
@media screen and (max-width: 768px) {
    .tt-hero {
        display: none;
        background-color: #007bff;
    }
}