/* === VARIABLES === */
:root {
    --color-primary: #244F4E; /* Verde oscuro */
    --color-primary-dark: #1a3c34;
    --color-gold: #927D4F; /* Dorado */
    --color-gold-light: #d4b876;
    --font-main: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-main);
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

/* === SOLUCIÓN GLOBAL PARA EL ESPACIO BLANCO LATERAL === */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Esto es la clave: oculta lo que se salga horizontalmente */
    position: relative; /* Ayuda a estabilizar el contenedor */
}

/* === HEADER ELEGANTE (SIN LÍNEAS) === */
.elegant-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    padding: 15px 0;
    /* Degradado puro, SIN BORDES */
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
    transition: all 0.4s ease-in-out;
    border: none !important; /* Forzamos sin bordes */
}

    /* ESTADO SCROLLED (Oscuro y limpio) */
    .elegant-header.scrolled {
        /* ANTES: rgba(26, 60, 52, 0.98); -> Esto era el verde muy oscuro */
        /* AHORA: rgba(36, 79, 78, 0.95); -> Este es el RGB de #244F4E */
        background: rgba(36, 79, 78, 0.95);
        padding: 10px 0;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        backdrop-filter: blur(10px);
        border: none !important;
    }

.header-logo {
    height: 60px;
    transition: transform 0.3s, height 0.3s;
}

.elegant-header.scrolled .header-logo {
    height: 50px;
}

.header-logo:hover {
    transform: scale(1.05);
}

/* Enlaces del Menú */
.custom-link {
    color: rgba(255,255,255,0.9) !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    font-weight: 500;
    margin: 0 10px;
    position: relative;
    transition: all 0.3s;
}

    .custom-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        bottom: 5px;
        left: 0;
        background: var(--color-gold);
        transition: width 0.3s;
    }

    .custom-link:hover::after {
        width: 100%;
    }

    .custom-link:hover {
        color: var(--color-gold) !important;
    }

/* Botón Header */
.btn-gold-header {
    background: var(--color-gold);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s;
}

    .btn-gold-header:hover {
        background: white;
        color: var(--color-gold);
    }

/* Idioma */
.lang-selector {
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.lang-btn {
    opacity: 0.6;
    transition: 0.3s;
}

    .lang-btn:hover, .lang-btn.active {
        opacity: 1;
        color: var(--color-gold);
    }

/* === HERO SECTION CON VIDEO (AJUSTADO PARA "ALEJAR") === */
.hero-full {
    /* Mantiene compatibilidad con navegadores viejos */
    height: 100vh;
    /* LA CLAVE: Se ajusta dinámicamente si aparece/desaparece la barra del navegador */
    height: 100dvh;

    position: relative;
    /* CAMBIO CLAVE: En lugar de 100vh, usamos 85vh en escritorio.
       Esto hace que la caja sea menos alta, por lo que el video no necesita
       hacer tanto "zoom" para cubrirla. */
    min-height: 85vh;
    width: 100%;
    background: #1a3c34;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ESTILOS DEL VIDEO DE FONDO */
.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Centramos el video perfectamente */
    transform: translate(-50%, -50%);
    /* Aseguramos que cubra todo */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    /* Mantiene la proporción sin deformar */
    object-fit: cover;
    z-index: 0;
}

/* AJUSTE PARA MÓVIL (Aquí sí queremos 100% de altura para impacto) */
@media (max-width: 992px) {
    .hero-full {
        min-height: 100vh; /* En celular mantenemos pantalla completa */
    }
}

/* Ajustamos el overlay para que esté ENCIMA del video */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(36, 79, 78, 0.4); /* Filtro verde */
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2; /* Texto encima de todo */
    padding-top: 100px;
    padding-bottom: 50px;
}




/* ================================================================================================================================================= */




/* === CAJA DE TEXTO HERO (GLASSMORPHISM REAL) === */
.content-box-hero {
    /* 1. Fondo Gradiente Muy Transparente */
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, /* Brillo blanco sutil arriba izq */
    rgba(36, 79, 78, 0.4) 100% /* Verde SuVisa muy suave abajo der */
    );
    /* 2. Desenfoque Potente (El efecto vidrio empañado) */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* Para que funcione en iPhone/Mac */
    /* 3. Bordes que simulan reflejo de luz (Borde superior e izquierdo más brillantes) */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    /* 4. Sombra profunda para despegarlo del fondo */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    /* Estructura */
    padding: 50px;
    border-radius: 25px; /* Bordes más redondeados y modernos */
    color: white;
    transition: transform 0.3s ease;
}

    /* Efecto al pasar el mouse (opcional, le da vida) */
    .content-box-hero:hover {
        transform: translateY(-5px); /* Se eleva un poquito */
        box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.4);
        border-top: 1px solid rgba(255, 255, 255, 0.6); /* Brilla más */
    }

/* Ajuste Móvil: Mantenemos el efecto cristal pero con menos relleno */
@media (max-width: 992px) {
    .content-box-hero {
        padding: 25px; /* Solo reducimos el espacio interno */
        /* USAMOS EL MISMO FONDO CRISTALINO QUE EN ESCRITORIO */
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, rgba(36, 79, 78, 0.45) 100% /* Un pelín más visible para contraste */
        );
        /* Mantenemos el desenfoque fuerte */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

/* === TIPOGRAFÍA HERO === */
.main-display {
    font-weight: 800; /* Un poco más grueso para impacto */
    /* TRUCO CLAVE: El tamaño se adapta entre 2rem (móvil) y 3.5rem (desktop) */
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Sombra suave para leer mejor sobre el vidrio */
}

.subtitle-badge {
    font-size: clamp(0.75rem, 1.5vw, 0.9rem); /* También adaptamos el subtítulo */
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 15px;
    display: block;
}

/* === AJUSTES DEL CONTENEDOR HERO === */
.hero-full {
    position: relative;
    /* CAMBIO: Usamos min-height en lugar de height fijo para que crezca si el texto es largo */
    min-height: 100vh;
    width: 100%;
    background: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=2074&auto=format&fit=crop') center/cover no-repeat;
    display: flex;
    align-items: center; /* Centrar verticalmente */
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Espacio arriba para el menú y abajo para que no toque el borde */
    padding-top: 100px;
    padding-bottom: 50px;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.9;
    margin-bottom: 30px;
}

.text-gold {
    color: var(--color-gold);
}




/* ================================================================================================================================================= */





/* === SECCIÓN SOBRE MÍ === */
.about-section {
    padding: 100px 0;
    background-color: white;
    position: relative;
}

.section-subtitle {
    color: var(--color-gold);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 15px;
}

.section-title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 2.2rem;
    margin-bottom: 30px;
    line-height: 1.2;
}

/* Texto de Susana: Más espaciado y legible */
.about-text p {
    color: #555;
    line-height: 1.8;
    font-size: 1rem;
    /* CAMBIO: De 'justify' a 'left' para evitar huecos feos */
    text-align: justify;
    margin-bottom: 20px; /* Espacio entre párrafos */
}

/* Marco Foto */
.photo-frame {
    position: relative;
    padding: 15px;
    border: 2px solid var(--color-gold);
    border-radius: 12px;
    background: white;
}

    .photo-frame::before {
        content: '';
        position: absolute;
        top: 25px;
        left: 25px;
        width: 100%;
        height: 100%;
        background: var(--color-primary);
        opacity: 0.1;
        z-index: -1;
        border-radius: 12px;
    }

.susana-photo {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Footer Minimalista*/
.footer-minimal {
    /* ANTES: var(--color-primary-dark); */
    background: var(--color-primary); /* AHORA: #244F4E */
    padding: 30px 0;
    color: rgba(255,255,255,0.7); /* Un poco más brillante el texto */
    font-size: 0.8rem;
}

    .footer-minimal a {
        color: var(--color-gold);
        text-decoration: none;
    }

/* === RESPONSIVE (Móviles y Tablets) === */
@media (max-width: 992px) {
    /* En móvil, damos más espacio a los lados */
    .content-box-hero {
        padding: 30px 20px;
        margin-top: 20px; /* Separación del header */
    }

    /* Ajuste de botones para que no se vean gigantes */
    .btn-hero-primary, .btn-hero-secondary {
        width: 100%; /* Botones ancho completo en celular se ven mejor */
        text-align: center;
        margin-bottom: 10px;
    }

    .d-flex.gap-3 {
        gap: 0.5rem !important;
    }
    /* Menos espacio entre botones */
}


/* =========================================
   FIRMA "SU" - Estilos Personalizados
   ========================================= */

/* Estilo base (Escritorio) */
.signature-su {
    font-family: 'Great Vibes', cursive;
    font-size: 3.5rem; /* Tamaño grande para que destaque */
    color: var(--color-gold); /* O usa var(--color-primary) según prefiera ella */
    display: block; /* Para que quede en su propia línea o usa inline-block */
    margin-top: 20px;
    margin-right: 100px; /* La empujamos hacia la izquierda para que no toque el borde */
    transform: rotate(-5deg); /* Un leve giro para toque humano */
    opacity: 1; /* Le quitamos transparencia para que destaque más */
    text-align: right;
}


/* Ajuste para celulares (Pantallas menores a 992px) */
@media (max-width: 991px) {
    .signature-su {
        margin-top: 40px; /* Un poco más de aire arriba */
        margin-right: 50px; /* La empujamos hacia la izquierda para que no toque el borde */
        transform: rotate(-5deg); /* Un leve giro para toque humano */
        opacity: 1; /* Le quitamos transparencia para que destaque más */
        text-align: right;
        font-size: 4rem; /* Un pelín más grande para lucir en móvil */
    }
}



/* ================================================================================================================================================= */



/* === BOTÓN HAMBURGUESA (Mantiene la elegancia) === */
.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 30px;
    position: relative;
    z-index: 2000;
    padding: 0;
}

    .hamburger-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: white;
        position: absolute;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Rebote suave */
        border-radius: 2px;
        left: 0;
    }

        .hamburger-btn span:nth-child(1) {
            top: 0;
        }

        .hamburger-btn span:nth-child(2) {
            top: 14px;
            width: 70%;
            transition: opacity 0.2s;
        }
        /* Línea media más corta es muy chic */
        .hamburger-btn span:nth-child(3) {
            top: 28px;
        }

    /* Animación a X */
    .hamburger-btn.active span:nth-child(1) {
        top: 14px;
        transform: rotate(45deg);
        background-color: var(--color-gold);
    }

    .hamburger-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.active span:nth-child(3) {
        top: 14px;
        transform: rotate(-45deg);
        background-color: var(--color-gold);
    }


/* ========================================================================== */
/* === MENÚ MÓVIL "PRIMERA CLASE" (ELEGANCIA PURA) === */
/* ========================================================================== */

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* FONDO: Más transparencia (0.85) para ver sombras del video detrás */
    background: linear-gradient( 180deg, rgba(36, 79, 78, 0.85) 0%, rgba(20, 45, 40, 0.96) 100% );
    /* Desenfoque fuerte estilo vidrio esmerilado */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1500;
    /* Animación */
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* Contenedor */
.mobile-menu-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Reducimos un poco el gap para que se sienta más unido y elegante */
    gap: 25px;
}

/* === ENLACES (EL CAMBIO CLAVE) === */
.mobile-link {
    color: white;
    font-family: var(--font-main);
    /* AQUI ESTÁ EL SECRETO DE LA ELEGANCIA: */
    font-size: 1.8rem; /* Más pequeño y sofisticado (antes era 2.5rem) */
    font-weight: 300; /* Letra fina (Light) en vez de gruesa */
    text-transform: uppercase; /* Mayúsculas dan autoridad */
    letter-spacing: 3px; /* Espaciado entre letras (Kerning) de lujo */

    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    /* Animación de entrada */
    opacity: 0;
    transform: translateY(30px);
    -webkit-tap-highlight-color: transparent;
}

/* Animación cuando se abre */
.mobile-menu-overlay.active .mobile-link {
    opacity: 1;
    transform: translateY(0);
}

    /* Retrasos (Cascada) */
    .mobile-menu-overlay.active .mobile-link:nth-child(1) {
        transition-delay: 0.1s;
    }

    .mobile-menu-overlay.active .mobile-link:nth-child(2) {
        transition-delay: 0.15s;
    }

    .mobile-menu-overlay.active .mobile-link:nth-child(3) {
        transition-delay: 0.2s;
    }

    .mobile-menu-overlay.active .mobile-link:nth-child(4) {
        transition-delay: 0.25s;
    }

    .mobile-menu-overlay.active .mobile-link:nth-child(5) {
        transition-delay: 0.3s;
    }

/* Efecto al Tocar (Sutil y Dorado) */
.mobile-link:active, .mobile-link:hover {
    color: var(--color-gold) !important;
    transform: scale(1.05) !important;
    /* Brillo suave, no agresivo */
    text-shadow: 0 0 15px rgba(146, 125, 79, 0.5);
    background: transparent;
}

/* Línea decorativa fina que aparece abajo */
.mobile-link::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width 0.3s;
    margin: 5px auto 0;
}

.mobile-link:active::after, .mobile-link:hover::after {
    width: 40px; /* Una línea pequeña y elegante */
}




/* ================================================================================================================================================= */




/* === SWITCH DE IDIOMA (CÁPSULA DE CRISTAL) === */
.lang-switch-wrapper {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1); /* Fondo sutil */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde fino */
    border-radius: 50px;
    padding: 4px; /* Espacio interno */
    backdrop-filter: blur(10px);
}

.lang-option {
    padding: 6px 14px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6); /* Color inactivo */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none; /* Evita que se seleccione el texto al hacer click */
}

    .lang-option:hover {
        color: white;
    }

    /* Estado Activo (La pastilla dorada) */
    .lang-option.active {
        background-color: var(--color-gold);
        color: white;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra suave */
        transform: scale(1.05);
    }

/* === LÓGICA DE VISIBILIDAD (DOBLE IDIOMA) === */

/* 1. Por defecto (Español): Ocultamos inglés */
.lang-en {
    display: none !important;
}

.lang-es {
    display: inline-block !important;
}

/* 2. Cuando el BODY tiene la clase 'lang-en-active' (Inglés Activado) */
body.lang-en-active .lang-es {
    display: none !important;
}

body.lang-en-active .lang-en {
    display: inline-block !important;
}
/* Muestra inglés */

/* === AJUSTE SWITCH MÓVIL (GRANDE Y TÁCTIL) === */
.mobile-switch-lg {
    /* Un poco más de espacio interno en el contenedor */
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borde un poco más visible en móvil */
}

    .mobile-switch-lg .lang-option {
        font-size: 1.2rem; /* Letra más grande (aprox 19px) */
        padding: 10px 30px; /* Botones anchos y cómodos para el dedo */
        font-weight: 600;
    }

        /* Ajuste fino para la pastilla activa en móvil */
        .mobile-switch-lg .lang-option.active {
            box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombra más pronunciada */
        }




/* ================================================================================================================================================= */


/* === INDICADOR SCROLL DOWN (MOUSE ANIMADO) === */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.8;
    transition: opacity 0.3s;
    cursor: pointer; /* Agrega esto para indicar que es un enlace */
}

/* Se oculta al bajar un poco para no estorbar */
.hero-full:hover .scroll-indicator {
    opacity: 1;
}

/* El Ratoncito */
.mouse {
    width: 26px;
    height: 42px;
    border: 2px solid white;
    border-radius: 20px;
    position: relative;
}

/* La Rueda del Ratón */
.wheel {
    width: 4px;
    height: 8px;
    background: white;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scrollWheel 2s infinite;
}

/* Flechas Base */
.arrow-scroll span {
    display: block;
    width: 10px; /* Tamaño normal en desktop */
    height: 10px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    margin: -4px auto; /* Para que estén juntitas */
    animation: scrollArrow 2s infinite;
}

    .arrow-scroll span:nth-child(2) {
        animation-delay: 0.2s;
    }

    .arrow-scroll span:nth-child(3) {
        animation-delay: 0.4s;
    }

/* ANIMACIONES */
@keyframes scrollWheel {
    0% {
        top: 6px;
        opacity: 1;
    }

    100% {
        top: 20px;
        opacity: 0;
    }
}

@keyframes scrollArrow {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-5px, -5px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(5px, 5px);
    }
}

/* Ocultar en móviles apaisados muy bajitos */
@media (max-height: 500px) {
    .scroll-indicator {
        display: none;
    }
}


/* ==============================================
   === VERSIÓN MÓVIL OPTIMIZADA (UX MEJORADA) === 
   ============================================== */
@media (max-width: 991px) {

    /* 1. Ocultar ratón */
    .mouse {
        display: none;
    }

    /* 2. Posicionamiento "A prueba de barras de navegación" */
    .scroll-indicator {
        /* Usamos % en lugar de px para adaptarnos a pantallas largas/cortas */
        bottom: 12%;
        opacity: 1;
        gap: 0;
        pointer-events: auto;
        cursor: pointer; /* Para indicar que es clicable */
    }

    /* 3. Flechas robustas y con alto contraste */
    .arrow-scroll span {
        width: 18px;
        height: 18px;
        border-bottom: 3px solid white;
        border-right: 3px solid white;
        margin: -8px auto;
        /* Sombra fuerte para asegurar lectura sobre cualquier foto */
        filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.8));
    }
}

/* Ajuste específico para pantallas muy cortas (Móviles en horizontal) */
@media (max-height: 550px) {
    .scroll-indicator {
        display: none;
    }
    /* Mejor ocultarlo que tapar el texto */
}


/* Si la pantalla es muy bajita (ej: celular girado), mejor ocultamos las flechas para que no estorben */
@media (max-height: 500px) {
    .scroll-indicator {
        display: none !important;
    }
}


/* ================================================================================================================================================= */



/* ========================================================================== */
/* === FOOTER DE LUJO (ESTILO AIRLINE) === */
/* ========================================================================== */

.luxury-footer {
    background-color: var(--color-primary); /* #244F4E */
    color: rgba(255, 255, 255, 0.8);
    padding: 80px 0 30px; /* Mucho espacio arriba (aire) */
    position: relative;
    font-size: 0.95rem;
}

/* Marca y Logo */
.footer-logo {
    height: 50px; /* Tamaño del favicon/logo */
    opacity: 0.9;
}

.footer-desc {
    font-weight: 300;
    line-height: 1.6;
    max-width: 300px; /* Evita que el texto se estire mucho */
    margin-bottom: 20px;
}

.location-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

/* Títulos de Columna */
.footer-title {
    color: white;
    font-family: var(--font-main);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

    /* Pequeña línea dorada bajo el título */
    .footer-title::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 2px;
        background: var(--color-gold);
        bottom: -8px;
        left: 0;
    }

/* Enlaces (Links) */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a, .contact-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 300;
}

    .footer-links a:hover, .contact-link:hover {
        color: var(--color-gold);
        padding-left: 5px; /* Pequeño desplazamiento a la derecha */
    }

/* --- BOTONES SOCIALES (GLASS) --- */
.social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: rgba(255, 255, 255, 0.05); /* Cristal muy sutil */
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Rebote */
}

    .social-btn:hover {
        background: var(--color-gold);
        border-color: var(--color-gold);
        color: white;
        transform: translateY(-5px); /* Se eleva */
        box-shadow: 0 5px 15px rgba(146, 125, 79, 0.4); /* Resplandor dorado */
    }

/* Barra Inferior */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.kw-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

    .kw-link:hover {
        color: #00e0ff; /* Un guiño sutil al cian de tecnología/código */
        text-shadow: 0 0 10px rgba(0, 224, 255, 0.5);
    }




/* ================================================================================================================================================= */



/* === SECCIÓN SERVICIOS (FLIP CARDS) === */
.services-section {
    padding: 100px 0;
    background-color: #f8f9fa; /* Fondo gris muy suave para que las tarjetas resalten */
}

/* CONTENEDOR DE LA TARJETA (Define el espacio 3D) */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 510px; /* Altura fija para que todas sean iguales */
    perspective: 1000px; /* La magia del 3D */
    cursor: pointer;
}

/* EL CUERPO QUE GIRA */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Giro con rebote suave */
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 20px;
}

/* EFECTO HOVER: AL PASAR EL MOUSE, GIRA */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* CARAS DE LA TARJETA (Comunes) */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Oculta la cara de atrás */
    backface-visibility: hidden;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- FRENTE (VERDE ELEGANTE) --- */
.flip-card-front {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
}



.custom-service-icon {
    width: 100px;
    height: 100px;
    /* Si tus SVG son de color negro y quieres forzarlos a ser blancos o dorados, me avisas, 
       pero idealmente tus SVG ya deberían tener el color que deseas */
}

/* === NUEVO: Ajuste óptico solo para el ícono de renovación === */
/* Esto sobrescribe el tamaño anterior solo para este elemento */
.icon-renewal-adjust {
    width: 110px; /* Le damos 10px extra para que se vea equilibrado */
    height: 110px;
    /* Si sientes que 65px es mucho, prueba con 62px. Si es poco, prueba con 68px */
}

.card-title {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.card-desc {
    font-size: 0.95rem;
    opacity: 0.9;
    line-height: 1.6;
}

/* --- REVERSO (BLANCO TIPO ITINERARIO) --- */
.flip-card-back {
    background-color: white;
    color: #333;
    transform: rotateY(180deg); /* Ya está girada por defecto */
    border: 2px solid var(--color-gold); /* Borde dorado premium */
    align-items: flex-start; /* Alineado a la izquierda para leer lista */
    justify-content: space-between; /* CAMBIO: Esto empuja el título arriba y botón abajo */
}

.back-title {
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
    border-bottom: 1px dashed #ccc; /* Línea punteada tipo ticket */
    padding-bottom: 10px;
}

/* Lista de Servicios (Subsecciones) */
.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 0.9rem;
    text-align: left;
}

    .service-list li {
        margin-bottom: 12px;
    }

    .service-list strong {
        color: var(--color-gold);
        display: block;
        margin-bottom: 2px;
    }

    /* REEMPLAZA TU BLOQUE .service-list ul CON ESTO: */
    .service-list ul {
        list-style: none; /* Quitamos la viñeta por defecto que da problemas */
        padding-left: 0; /* Quitamos el margen izquierdo por defecto */
        margin-top: 5px;
    }

        /* NUEVO: Estilo para cada ítem de la lista */
        .service-list ul li {
            display: flex; /* Usamos flexbox para alinear */
            align-items: flex-start; /* ESTO ES LA CLAVE: Alinea el punto ARRIBA, no al centro */
            gap: 10px; /* Espacio entre el punto y el texto */
            color: #666; /* Tu color original */
            font-size: 0.85rem; /* Tu tamaño original */
            margin-bottom: 5px;
            text-align: left;
            line-height: 1.4; /* Mejora la lectura en textos de dos líneas */
        }

            /* NUEVO: Dibujamos el puntito manualmente */
            .service-list ul li::before {
                content: "";
                display: block;
                min-width: 6px; /* Tamaño del círculo */
                height: 6px;
                border: 1.5px solid var(--color-gold); /* Usamos tu color dorado para el borde */
                border-radius: 50%; /* Lo hace redondo */
                margin-top: 5px; /* Ajuste fino para alinearlo con el texto */
                flex-shrink: 0; /* Evita que el punto se aplaste */
            }

/* RESPONSIVE: En móviles, podríamos querer que giren al clic en vez de hover, 
   pero el CSS :hover suele funcionar al tocar en la mayoría de móviles modernos. 
   Para asegurar, añadimos una clase 'active' con JS si fuera necesario, 
   pero probemos primero con CSS puro. */



/* ========================================================================== */
/* === BOTÓN DESPEGUE PRO (Con Lógica Móvil) === */
/* ========================================================================== */

.btn-takeoff {
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: white;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

    /* Configuración base de los iconos */
    .btn-takeoff i {
        display: inline-block !important;
        transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease !important;
    }

    /* === ESTADO HOVER (DESKTOP) === */
    .btn-takeoff:hover {
        background-color: white !important;
        color: var(--color-primary) !important;
        border-color: white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

        /* Animación de Vuelo Mejorada: Más lejos y fading */
        .btn-takeoff:hover .icon-desktop {
            transform: translate(15px, -15px) rotate(-45deg) scale(0.8) !important; /* Vuela lejos */
            opacity: 0; /* Se desvanece en las nubes */
        }

/* === LÓGICA RESPONSIVE (CAMBIO DE ICONO) === */

/* Por defecto (PC): Ocultamos el icono móvil */
.icon-mobile {
    display: none !important;
}

/* En Pantallas Pequeñas (Tablets y Celulares) */
@media (max-width: 992px) {

    /* Mostramos la manita */
    .icon-mobile {
        display: inline-block !important;
        animation: tapHint 1.5s infinite; /* Pequeña animación para llamar la atención */
    }
}

/* Animación sutil para la manita en el celular */
@keyframes tapHint {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
    /* Palpita */
    100% {
        transform: scale(1);
    }
}




/* ================================================================================================================================================= */



/* ========================================================================== */
/* === SECCIÓN DE ANUNCIOS (EMBASSY NEWS) === */
/* ========================================================================== */

.announcements-section {
    /* Fondo oscuro para contraste y seriedad */
    background-color: #1a252f;
    padding: 80px 0;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Badge "En Vivo" Mejorado (Neon Style) */
.alert-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 107, 107, 0.1); /* Fondo muy sutil */
    color: #ff6b6b;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid rgba(255, 107, 107, 0.4);
    /* El brillo mágico */
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.2);
    backdrop-filter: blur(5px);
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background-color: #ff6b6b;
    border-radius: 50%;
    margin-right: 10px;
    animation: pulseRed 1.5s infinite;
}

@keyframes pulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
    }
}

/* --- TARJETA DE NOTICIA --- */
.official-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    /* Borde izquierdo dorado para indicar "Oficial Su Visa" */
    border-left: 5px solid var(--color-gold);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin: 10px; /* Espacio para la sombra */
    position: relative; /* Necesario para ubicar la barra */
    overflow: hidden; /* Para que la barra no se salga de las esquinas redondeadas */
}

/* Definimos la animación */
@keyframes loadBar {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.official-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: var(--color-primary);
    width: 0%;
    z-index: 10;
}

/* Cuando el slide está activo, la barra avanza usando keyframes */
.carousel-item.active .official-card::after {
    animation: loadBar 7s linear forwards; /* 5s = mismo tiempo que el HTML */
}

/* === EL TRUCO DE MAGIA: PAUSA AL HOVER === */
/* Si el usuario pone el mouse sobre el carrusel, la barra se congela */
.carousel:hover .carousel-item.active .official-card::after {
    animation-play-state: paused;
}

.card-header-news {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.news-date {
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
}

.source-badge {
    background: #e8f5e9; /* Verde muy claro */
    color: #2e7d32;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.news-title {
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 15px;
}

.news-body {
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.news-footer {
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.official-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

    .official-link:hover {
        text-decoration: underline;
        color: var(--color-gold);
    }

/* --- CONTROLES CARRUSEL PERSONALIZADOS --- */
.carousel-control-prev, .carousel-control-next {
    width: 50px;
    opacity: 1; /* Siempre visibles */
}

.control-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.2);
}

    .control-icon:hover {
        background: var(--color-gold);
        color: white;
    }

/* Ajuste para que las flechas no se encimen al texto en móviles */
@media (max-width: 992px) {
    .carousel-control-prev {
        left: -15px;
    }

    .carousel-control-next {
        right: -15px;
    }

    .official-card {
        padding: 20px;
    }
}





/* ================================================================================================================================================= */





/* ======================================================
   SECCIÓN FUTURE OFFERINGS (PRÓXIMAMENTE)
   ====================================================== */

.future-section {
    padding: 100px 0;
    background-color: #F4F1EA; /* Tu beige base */
    /* === AJUSTE DE TEXTURA === */
    background-image:
    /* CAPA 1: Bajamos la opacidad del 0.92 al 0.80 para que se vea el fondo */
    linear-gradient(rgba(244, 241, 234, 0.8), rgba(244, 241, 234, 0.8)),
    /* CAPA 2: La imagen del mapa */
    url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/World_map_blank_without_borders.svg/2000px-World_map_blank_without_borders.svg.png');
    /* CAMBIO IMPORTANTE: 'contain' asegura que se vea todo el mapa, no solo un pedazo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: normal;
}

    /* Ajuste de Títulos para que resalten sobre el beige */
    .future-section .section-title {
        color: var(--color-primary) !important; /* El título en Verde Marca */
    }

    .future-section .text-white-50,
    .future-section .text-muted {
        color: #665 !important; /* Un gris cálido para el texto descriptivo */
    }

/* LA TARJETA CONTENEDORA */
.future-card {
    position: relative;
    height: 400px; /* Altura vertical elegante */
    border-radius: 15px;
    overflow: hidden; /* Clave para que la imagen no se salga al hacer zoom */
    cursor: default;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

/* IMAGEN DE FONDO */
.card-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease; /* Zoom suave al hacer hover */
}

/* EL EFECTO ZOOM */
.future-card:hover .card-bg {
    transform: scale(1.1);
}

/* CAPA OSCURA (OVERLAY) */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado: transparente arriba, oscuro abajo */
    background: linear-gradient(to bottom, rgba(0, 51, 102, 0.3), rgba(0, 30, 60, 0.95));
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Texto abajo */
    padding: 25px;
    transition: background 0.5s ease;
}

/* Al hacer hover, oscurecemos un poco más para leer el texto extra */
.future-card:hover .card-overlay {
    background: linear-gradient(to bottom, rgba(0, 51, 102, 0.5), rgba(0, 30, 60, 0.98));
}

/* CONTENIDO DE LA TARJETA */
.card-content {
    color: white;
    transform: translateY(60px); /* Empujamos el texto abajo para ocultar la descripción */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Animación fluida */
}

/* Al hover, el texto sube */
.future-card:hover .card-content {
    transform: translateY(0);
}

/* ICONO SUPERIOR */
.icon-box {
    font-size: 2rem;
    color: var(--color-gold);
    margin-bottom: 10px;
    transition: transform 0.5s;
}

.future-card:hover .icon-box {
    transform: scale(0.8) translateY(-10px); /* Se hace un pelín pequeño y sube */
}

/* TÍTULO */
.future-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* DETALLES OCULTOS (Descripción + Badge) */
.hover-details {
    opacity: 0; /* Invisible al inicio */
    transition: opacity 0.5s ease 0.1s; /* Retardo ligero para efecto cascada */
}

.future-card:hover .hover-details {
    opacity: 1; /* Visible al hover */
}

.hover-details p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.8);
}

/* BADGE "PRÓXIMAMENTE" */
.badge-soon {
    display: inline-block;
    padding: 6px 15px;
    background-color: var(--color-gold);
    color: var(--color-primary-dark);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 50px;
    letter-spacing: 1px;
}

/* Animación del avioncito en el badge */
.future-card:hover .badge-soon i {
    animation: flyPlane 1s infinite alternate;
}

@keyframes flyPlane {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(3px) translateY(-1px);
    }
}

/* AJUSTE MOBILE */
@media (max-width: 991px) {
    /* En móvil, mostramos el contenido siempre (sin hover) para mejor UX */
    .card-content {
        transform: translateY(0);
    }

    .hover-details {
        opacity: 1;
    }

    .future-card {
        height: auto; /* Altura flexible */
        min-height: 350px;
    }
}




/* ================================================================================================================================================= */



/* ========================================================================== */
/* === SECCIÓN COMUNIDAD (VERSIÓN GALERÍA PREMIUM) === */
/* ========================================================================== */

.community-elegant {
    padding: 100px 0 120px; /* Un poco más de padding abajo para separar del footer */
    /* Un color gris súper suave (casi blanco) para separar de la sección anterior */
    background-color: #faf9f6;
    position: relative;
}

.community-desc {
    max-width: 600px;
    color: #666;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* === BOTONES SOCIALES (ELEGANTES Y MINIMALISTAS) === */
.btn-social-elegant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: white;
}

/* Botón IG (Borde de color, se rellena al hover) */
.btn-ig-outline {
    border: 2px solid #e1306c;
    color: #e1306c;
}

    .btn-ig-outline:hover {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
        border-color: transparent;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(225, 48, 108, 0.2);
    }

/* Botón TikTok (Borde negro, se rellena al hover) */
.btn-tk-outline {
    border: 2px solid #000;
    color: #000;
}

    .btn-tk-outline:hover {
        background-color: #000;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    }

/* === CONTENEDOR DEL FEED (ESTILO ÁLBUM/TARJETA) === */
.gallery-wrapper {
    background: white;
    border-radius: 15px;
    /* Sombra amplia y suave para que parezca flotar sobre el fondo grisáceo */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    /* Un toque de lujo: Línea dorada en la parte superior */
    border-top: 4px solid var(--color-gold);
    margin-bottom: 30px; /* NUEVO: Da más aire antes del footer */
}

.gallery-header {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
}

.gallery-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.gallery-content {
    padding: 30px;
    min-height: 300px;
    background-color: #fafafa; /* Fondo interno apenas perceptible */
}

.pulsing-text {
    animation: pulseText 1.5s infinite;
}

@keyframes pulseText {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}