@import url("https://db.onlinewebfonts.com/c/b592736c06bab787133131c6a6d8992d?family=LTCGoudyHeavyfaceOT");

::selection {
    background-color: #2c346b !important; /* Tu color azul marino */
    color: #ffffff !important;            /* Letras blancas */
}

/* Compatibilidad con Firefox */
::-moz-selection {
    background-color: #2c346b !important;
    color: #ffffff !important;
}

/* --- PROTECCIÓN DE IMÁGENES --- */
img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* --- ESTILOS GENERALES Y FONDO IDÉNTICO GLOBAL --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
    font-family: "early-sans-variable", sans-serif;
}

body { 
    background-color: #111;
    overflow-x: hidden;
}

/* --- FONDO ESTÁTICO MULTIPÁGINA --- */
.fixed-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* CORREGIDO: usa la altura real visible en iOS (con o sin barra de Safari) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/fondo/IMG_6191.png');
    background-size: cover;
    background-position: center;
    z-index: -1; 
    pointer-events: none; 
}

body.modal-open {
    overflow: hidden;
}

.hero, .nosotros-container, .contacto-wrapper {
    background: transparent !important;
}

/* --- HEADER Y NAVBAR --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    padding: 0 10%;
    background: #fffbed;
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Milky Vintage', sans-serif;
    font-weight: 900;
    font-size: 32px;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
    letter-spacing: 2px;
}

.header .logo {
    font-size: 2.9rem !important;
    font-weight: 900 !important;  
    letter-spacing: 3px !important;
    text-transform: uppercase;
}

.nav-logo {
    height: 40px;
    width: auto;
}

.navbar a {
    font-size: 16px;
    font-weight: bold;
    color: #111;
    text-decoration: none;
    text-transform: uppercase;
    margin-left: 40px;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

.navbar a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #2c346b;
    transition: width 0.3s ease;
}

.navbar a:hover {
    color: #2c346b;
}

.navbar a:hover::after {
    width: 100%;
}

/* --- HERO --- */
.hero {
    height: 100vh;
    height: 100dvh; /* CORREGIDO: altura real visible en iOS, evita saltos al aparecer/ocultarse la barra de Safari */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 70px; /* CORREGIDO: deja hueco para la pestaña inferior y evita que tape el logo */
    background: transparent !important; 
}

.main-title {
    width: clamp(150px, 60vw, 400px);
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.main-title-logo {
    max-width: 250px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- PESTAÑA INTELIGENTE --- */
.tab-trigger {
    position: fixed;
    bottom: 0; 
    left: 50%;
    transform: translateX(-50%);
    background: #fffbedf2;
    padding: 12px 60px;
    border-radius: 20px 20px 0 0;
    cursor: pointer;
    z-index: 100006 !important;
    transition: bottom 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab-trigger.active {
    bottom: calc(100vh - 90px - 40px);
    bottom: calc(100dvh - 90px - 40px); /* CORREGIDO: usa la altura real visible para que la flecha no se pierda en Safari/iOS */
    border-radius: 0 0 20px 20px;
}

.tab-trigger .arrow {
    transition: transform 0.4s ease;
}

.tab-trigger.active .arrow {
    transform: rotate(180deg);
}

/* --- PANEL Y BOTONES --- */
.sliding-panel {
    position: fixed !important;
    top: 100%; /* Oculto abajo */
    left: 0;
    width: 100%;
    height: calc(100vh - 90px); 
    height: calc(100dvh - 90px); /* CORREGIDO: altura real visible en iOS */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    transition: top 0.6s cubic-bezier(0.77, 0, 0.175, 1);

    /* Imagen de fondo idéntica al Index */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('images/fondo/IMG_6198.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Alineación milimétrica al abrirse */
.sliding-panel.active {
    top: 90px !important;
}

/* Contenedor transparente para que no tape la imagen */
.panel-content {
    display: flex !important;
    width: 100% !important;
    height: 120px !important;
    background-color: transparent !important; 
    padding: 0 !important; /* Volvemos al padding cero para que los botones llenen el espacio */
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* TU ESTILO BASE ORIGINAL PARA LOS BOTONES */
.btn {
    flex: 1;
    height: 100%;
    font-size: 4rem; /* Tus letras gigantes originales */
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    background-color: #fffbed; /* Fondo beige original */
    color: #000000;
    border: none;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    outline: 5px solid transparent;
    outline-offset: -15px; /* Tu recuadro interno */
}

/* TU ANIMACIÓN Y EFECTO HOVER ORIGINAL */
.btn:hover {
    background-color: #f0ede0;
    outline: 5px solid #000000;
    padding-right: 8%; 
    transition: all 0.3s ease;
}

/* Botón de la izquierda (Carta) */
.btn-menu { 
    padding-left: 5%; 
}
.btn-menu:hover { 
    background-color: #f0ede0; 
    outline: 5px solid #000000; 
    padding-left: 10%; /* Desplazamiento de texto hacia la derecha original */
}

/* Botón de la derecha (Bebidas) */
.btn-carta { 
    padding-right: 5%; 
    justify-content: flex-end; 
}
.btn-carta:hover { 
    background-color: #f0ede0; 
    outline: 5px solid #000000; 
    padding-right: 10%; /* Desplazamiento de texto hacia la izquierda original */
}


/* --- RESEÑAS --- */
.reviews-section {
    position: relative;
    min-height: 90vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fffbed;
    text-align: center;
    overflow: hidden;
    padding: 100px 0;
}

.carousel-viewport {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    height: auto;
    min-height: 320px;
    display: flex;
    align-items: center;
}

.carousel-track {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.review-item {
    position: relative;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 15%;
}

.review-item.active {
    opacity: 1;
    visibility: visible !important;
    display: flex;
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.review-stars {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 35px;
    height: 40px;
    user-select: none; 
    -webkit-user-select: none; 
    pointer-events: none; 
}

.review-stars span {
    color: #2c346b;
    font-size: 2rem;
    display: inline-block;
}

.review-stars span:nth-child(1) { transform: translateY(15px) rotate(15deg); }
.review-stars span:nth-child(5) { transform: translateY(15px) rotate(-15deg); }
.review-stars span:nth-child(2) { transform: translateY(5px) rotate(5deg); }
.review-stars span:nth-child(4) { transform: translateY(5px) rotate(-5deg); }
.review-stars span:nth-child(3) { transform: translateY(-2px); }

.review-text-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px; 
}

.review-text {
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #111;
    line-height: 1.4;
}

.review-author {
    font-family: "LTCGoudyHeavyfaceOT", serif;
    letter-spacing: 4px;
    font-weight: bold;
    color: #2c346b;
}

.nav-btn {
    position: absolute;
    top: 55%; 
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 5rem;
    color: #111;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease, transform 0.3s ease;
    height: auto;
    display: flex;
    align-items: center;
}

.nav-btn:hover {
    color: #2c346b;
    transform: translateY(-50%) scale(1.1);
}

.prev { left: 4%; }
.next { right: 4%; }


/* --- SECCIÓN SOBRE NOSOTROS --- */
.nosotros-container {
    padding: 120px 10%;
    display: flex;
    align-items: center;
    gap: 8%;
    min-height: 90vh; 
    background: transparent !important; 
}

.nosotros-content {
    flex: 1;
}

.nosotros-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #bbb;
    margin-bottom: 20px;
}

.nosotros-gallery {
    flex: 1;
    display: flex;
    justify-content: center;
}

.history-carousel {
    width: 100%;
    max-width: 450px;
    height: 500px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.history-track {
    width: 100%;
    height: 100%;
    position: relative;
}

.history-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.history-img.active {
    opacity: 1;
}


/* --- SECCIÓN CONTACTO (Modificado subtítulo beige) --- */
/* --- SECCIÓN CONTACTO (IGUALADA AL INDEX / HERO) --- */
.contacto-wrapper {
    height: 100vh;
    height: 100dvh; /* Altura real completa idéntica al Index */
    padding: 90px 10% 0; /* 90px arriba para dejar hueco limpio al header */
    background: transparent !important; 
    text-align: center;
    box-sizing: border-box;
    
    /* Centrado vertical matemático de todo el contenido */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Escalado premium del título para móviles y escritorio */
.contacto-wrapper .section-title-premium {
    font-size: clamp(2rem, 4.5vw, 3.5rem); 
    margin-bottom: 2vh; /* Margen proporcional a la pantalla */
}

.contacto-grid {
    display: flex;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto; /* Eliminamos el margen superior fijo */
    text-align: left;
    width: 100%;
}

.contacto-block {
    flex: 1; 
    background: rgba(17, 17, 17, 0.75) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    padding: 40px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.contacto-block h3 {
    font-family: "early-sans-variable", sans-serif;
    color: #fffbed;
    text-transform: uppercase;
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.input-group input, .input-group textarea {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box;
}

.input-group input:focus, .input-group textarea:focus {
    border-color: #2c346b;
    background: rgba(255, 255, 255, 0.08);
}

.btn-submit {
    background-color: #e3e3e3;
    color: #111;
    border: none;
    padding: 15px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-submit:hover {
    background-color: #2c346b;
}

.review-block {
    display: flex;
    flex-direction: column;
    gap: 20px; 
    width: 100%;
    justify-content: space-between;
}

.info-subtitle {
    color: #888 !important; 
    margin: 0; 
    font-size: 0.95rem; 
    line-height: 1.5;         
    margin-bottom: 25px;
    text-transform: none; 
    font-weight: 500;
}

.google-review-card, .phone-card {
    flex: 1; 
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    gap: 25px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 30px;
    border-radius: 12px;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.google-card-icon, .card-icon {
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.04);
    width: 65px;
    height: 65px;
    min-width: 65px;         
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: #e3e3e3;
}

.google-card-icon *, .card-icon * {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.google-card-text, .card-text { text-align: left; }
.google-card-text h4, .card-text h4 { color: #fff; margin: 0 0 6px 0; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.5px; }
.google-card-text p, .card-text p { color: #888; margin: 0; font-size: 0.95rem; line-height: 1.5; }

.google-review-card:hover { 
    border-color: #2c346b !important; 
    background: rgba(44, 52, 107, 0.04) !important; 
    transform: translateY(-4px); 
    box-shadow: 0 12px 30px rgba(44, 52, 107, 0.15); 
}

.google-review-card:hover .google-card-icon { 
    background: #1c2242 !important; 
    color: #fffbed !important;      
    transform: scale(1.05) rotate(10deg) !important; 
}

.phone-card:hover { 
    border-color: #2c346b !important; 
    background: rgba(44, 52, 107, 0.04) !important; 
    transform: translateY(-4px); 
    box-shadow: 0 12px 30px rgba(44, 52, 107, 0.15); 
}

.phone-card:hover .card-icon { 
    background: #1c2242 !important; 
    color: #fffbed !important;      
    transform: scale(1.05) rotate(10deg) !important; 
}


/* --- FOOTER --- */
.footer {
    background-color: #fffbed;
    padding: 40px 10% 25px; 
    border-top: 2px solid #2c346b; 
    width: 100%;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px; 
    width: 100%;
}

.footer-left {
    text-align: left;
    flex: 1;
    min-width: 250px;
}

.footer-right {
    display: flex;
    gap: 50px;
    text-align: left; 
    flex: 2;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.footer-logo { 
    font-family: 'Milky Vintage', sans-serif;
    font-weight: 900;
    font-size: 2.2rem; 
    color: #111; 
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.footer-col {
    min-width: 170px;
}

.footer-col h4 { 
    color: #2c346b; 
    margin-bottom: 15px; 
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-col p { 
    line-height: 1.6; 
    color: #000000; 
    font-size: 0.95rem;
}

.footer-col a {
    color: #000000;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    transition: opacity 0.3s ease;
    opacity: 0.85;
    font-size: 0.95rem;
}

.footer-col a:hover {
    opacity: 1;
    text-decoration: underline;
}

.footer-bottom { 
    width: 100%;
    clear: both;
    text-align: center !important; 
    margin-top: 30px; 
    color: #555555; 
    font-size: 0.8rem; 
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
    padding-top: 15px;
    display: block !important;
}


/* --- MODAL DE LA CARTA --- */
/* ==========================================================================
   --- ESTILOS BASE DEL MODAL (FIX iOS: scroll fiable + sticky estable) ---
   El bug en iPhone (carta desplazada / botón "Cerrar" cayendo al fondo)
   venía de combinar position:fixed + overflow-y:scroll en el mismo
   elemento: en Safari iOS eso rompe el cálculo del position:sticky cada
   vez que la barra de direcciones se contrae/expande durante el scroll.
   Solución: el .modal-pdf ahora SOLO es el overlay de fondo (sin scroll
   propio), y quien hace scroll de verdad es .modal-scroll-area, un
   elemento normal (no fixed) donde el sticky sí funciona de forma fiable.
   ========================================================================== */
.modal-pdf {
    display: none; 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    
    /* OPTIMIZACIÓN: Quitamos el blur que ralentiza el scroll y usamos un fondo un poco más opaco */
    background-color: rgba(11, 11, 11, 0.96) !important;
    
    z-index: 999999 !important; 
    overflow: hidden !important; 
    box-sizing: border-box !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;

    /* Fuerza al móvil a usar la tarjeta gráfica (GPU) para suavizar el rendimiento */
    transform: translateZ(0);
    will-change: transform;
}

.modal-pdf.active {
    display: flex !important;
}

/* FIX: nuevo contenedor responsable del scroll real. Al no ser fixed,
   Safari lo trata como un bloque normal con scroll propio, así el
   sticky del botón "Cerrar" se queda anclado arriba de forma fiable y
   el JS puede resetear su scrollTop a 0 sin comportamientos raros. */
.modal-scroll-area {
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; /* scroll inercial suave en iOS */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 20px 40px !important;
    box-sizing: border-box !important;
    /* FIX iOS: refuerzo explícito, ya que ser el elemento con overflow
       real es justo donde iOS evalúa el long-press para seleccionar. */
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* Mientras la carta/bebidas está abierta, el header (y por tanto el menú
   hamburguesa) deja de poder recibir clics. Así, si el botón de cerrar
   coincide en pantalla con el icono del menú, el clic SOLO cierra el
   modal y nunca llega a abrir el menú. */
body:has(.modal-pdf.active) .header {
    pointer-events: none !important;
}

/* Contenedor relativo para las imágenes */
.modal-wrapper-dinamico {
    position: relative !important; 
    width: 100% !important;
    max-width: 530px !important; 
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important; 
    z-index: 1000000 !important;
    /* FIX iOS: último nivel de blindaje, justo donde viven las imágenes
       de la carta (lo que el usuario realmente toca al hacer scroll). */
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* FIX: el sticky ahora vive dentro de .modal-scroll-area (que sí tiene
   scroll real de tipo "normal flow"), en vez de dentro de un elemento
   fixed. Por eso se queda anclado de forma estable arriba en
   iPhone/Safari, en lugar de "caer" al fondo tras el primer scroll. */
.modal-header {
    position: -webkit-sticky !important; /* compatibilidad Safari/iOS */
    position: sticky !important;
    top: 0 !important;
    align-self: flex-end !important; /* lo mantiene anclado a la derecha dentro de la columna */
    margin-right: 0 !important;
    margin-bottom: 20px !important; /* hueco antes de la primera imagen de la carta */
    left: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 2000000 !important; /* z-index masivo para anular el menú hamburguesa inferior */
    flex-shrink: 0 !important; /* que no se encoja al apilarse con la carta */
    padding: 0 !important;
    touch-action: manipulation !important; /* FIX iOS: mismo aislamiento táctil que el botón */
}

/* Botón con menor protagonismo (texto y aspa discretos y legibles) */
.close-modal {
    background: rgba(28, 34, 66, 0.8) !important; /* Un punto más opaco para que no se transparente el menú de abajo */
    border: 1px solid rgba(255, 253, 237, 0.3) !important;
    outline: none !important;
    cursor: pointer !important;
    color: #fffbed !important; 
    font-size: 0.85rem !important; 
    font-weight: bold !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important; 
    border-radius: 30px !important; 
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transition: all 0.25s ease !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; 
    /* FIX iOS: aísla el botón de cualquier gesto táctil que pueda
       "filtrarse" hacia la imagen que queda debajo (selección de
       texto/imagen, long-press, zoom por doble toque). touch-action
       le dice al navegador que este elemento solo acepta un toque
       simple, sin gestos adicionales que delegar más abajo. */
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Ajuste del tamaño del aspa */
.close-modal .close-icon {
    font-size: 1.2rem !important; 
    line-height: 0 !important;
    margin-top: -1px !important;
}

.close-modal .close-text {
    display: inline !important; 
}

.close-modal:hover {
    color: #ffffff !important; 
    background: rgba(44, 52, 107, 0.9) !important; 
    border-color: #fffbed !important;
    transform: translateY(-1px) !important;
}

.carta-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    border-radius: 4px !important;
    
    /* OPTIMIZACIÓN DE RENDIMIENTO */
    /*rendering-intent: relative-colorimetric;*/
    image-rendering: -webkit-optimize-contrast;
    will-change: transform; /* Avisa al navegador que se va a mover con scroll */
}

/* Limpieza absoluta de pseudo-elementos conflictivos anteriores */
.close-modal::before, .close-modal::after,
.close-modal-fixed::before, .close-modal-fixed::after {
    display: none !important;
    content: none !important;
}

/* Personalización sutil del scroll lateral del modal */
.modal-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.modal-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.section-title-premium {
    font-family: "early-sans-variable", sans-serif;
    font-weight: 900;
    font-size: 3.5rem;
    text-transform: uppercase;
    color: #fffbed;
    margin-bottom: 40px;
    letter-spacing: 3px;
}

/* ==========================================================================
   --- MEDIA QUERIES GLOBALES REESTRUCTURADAS ---
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ESCRITORIOS MEDIANOS / PORTÁTILES Y TABLETS GRANDES (max-width: 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .header { 
        padding: 0 5%; 
    }
    .btn {
        font-size: 3rem; 
    }
    .section-title-premium {
        font-size: 2.8rem;
    }
}

/* --------------------------------------------------------------------------
   2. TRANSFORMACIÓN EXCLUSIVA DEL BOTÓN PARA MÓVILES (max-width: 1100px)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    /* Transformación al círculo azul marino premium */
    .close-modal {
        width: 46px !important;      
        height: 46px !important;
        background-color: #1c2242 !important; 
        border: 2px solid #fffbed !important; 
        border-radius: 50% !important; 
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
        text-shadow: none !important;
        padding: 0 !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Ocultamos el texto de forma limpia sin romper el aspa */
    .close-modal .close-text {
        display: none !important;
    }

    /* Centrado matemático de la X geométrica real dentro de la esfera */
    .close-modal .close-icon {
        font-size: 28px !important;
        color: #fffbed !important;
        font-family: Arial, sans-serif !important;
        font-weight: normal !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .close-modal:active {
        transform: scale(0.92) !important;
        background-color: #12162b !important;
    }
}

/* --------------------------------------------------------------------------
   3. TABLETS EN MODO HORIZONTAL (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .review-text { 
        font-size: 1.3rem; 
    }
    .prev { left: 1%; }
    .next { right: 1%; }
    
    .nosotros-container {
        flex-direction: column;
        gap: 40px;
        padding: 100px 5%;
    }
    .history-carousel {
        max-width: 100%;
        height: 450px;
    }
}

/* --------------------------------------------------------------------------
   4. ADAPTACIÓN EN DISPOSITIVOS MEDIANOS (max-width: 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .contacto-wrapper {
        height: auto !important; /* Rompe la pantalla completa en móvil para que no se corte el contenido */
        padding: 110px 6% 60px;
    }
    .contacto-grid {
        flex-direction: column;
        gap: 30px;
    }
}

/* --------------------------------------------------------------------------
   5. MÓVILES GRANDES Y VERTICALES (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero {
        padding-bottom: 90px; /* CORREGIDO: más margen en móvil para que la flecha nunca tape el logo */
    }
    .sliding-panel {
        height: calc(100vh - 76px); /* CORREGIDO: el header móvil mide 76px, no 90px */
        height: calc(100dvh - 76px);
    }
    .header { 
        display: flex !important; 
        flex-direction: row !important; 
        justify-content: space-between !important; 
        align-items: center; 
        height: 76px; 
        padding: 0 6%; 
        position: fixed; 
        top: 0; 
        width: 100%; 
        z-index: 10003; 
        background: #fffbed; 
    }

    /* Menú hamburguesa */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        cursor: pointer;
        z-index: 10005;
    }
    .menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #111;
        border-radius: 3px;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        transform-origin: left center;
    }
    .menu-toggle.open span:nth-child(1) { transform: rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; transform: scale(0); }
    .menu-toggle.open span:nth-child(3) { transform: rotate(-45deg); }
    
    .navbar { 
        display: none; /* <--- Quitamos el !important de aquí para evitar conflictos */
        position: absolute; 
        top: 76px; 
        left: 0; 
        width: 100%; 
        background: #fffbed; 
        flex-direction: column; 
        align-items: center; 
        padding: 30px 0; 
        box-shadow: 0 15px 25px rgba(0,0,0,0.1); 
        z-index: 10004; 
    }

    .navbar.mobile-active { 
        display: flex !important;
    }
    .navbar a { margin: 12px 0; font-size: 18px; }    
    /* Carrusel optimizado */
    .reviews-section { padding: 60px 0; }
    .carousel-container { width: 92% !important; margin: 0 auto !important; position: relative; }
    .carousel-viewport { min-height: 260px; }
    .review-item { padding: 0 8% !important; }
    .review-text { font-size: 1.15rem; line-height: 1.5; }
    .nav-btn { font-size: 3rem; top: 50%; }
    .prev { left: -10px; } 
    .next { right: -10px; }
    
    .sliding-panel.active { top: 76px !important; }
    .tab-trigger.active { bottom: calc(100vh - 76px - 40px); z-index: 100006 !important;}
    .tab-trigger.active { bottom: calc(100dvh - 76px - 40px); z-index: 100006 !important;} /* CORREGIDO: altura real visible en iOS */
    
    .btn { font-size: 2.5rem; outline-width: 4px; outline-offset: -12px; }
    .btn:hover { padding-right: 0%; } 
    .btn-menu:hover { padding-left: 5%; }
    .btn-carta:hover { padding-right: 5%; }

    /* ==========================================================================
       --- ALINEACIÓN TOTALMENTE VERTICAL DEL FOOTER ---
       ========================================================================== */
    .footer {
        padding: 50px 8% 30px !important;
    }

    .footer-container {
        flex-direction: column !important; 
        align-items: center !important;    
        text-align: center !important;      
        gap: 35px !important;              
    }

    .footer-left, .footer-right {
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 35px !important;
    }

    .footer-col {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;    
        text-align: center !important;
        margin: 0 !important;
    }

    .footer-col h4 {
        margin-bottom: 10px !important;
    }
}

/* --------------------------------------------------------------------------
   6. MÓVILES PEQUEÑOS / DISPOSITIVOS COMPACTOS (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .logo {
        font-size: 24px;
    }
    .section-title-premium {
        font-size: 1.9rem;
    }
    .review-text {
        font-size: 1rem;
    }
    .review-stars span {
        font-size: 1.5rem;
    }
    
    .panel-content {
        height: 100px !important;
    }
    .btn {
        font-size: 2rem;
        outline-width: 3px;
        outline-offset: -8px;
    }
    .contacto-block {
        padding: 25px 15px;
    }
}

/* --------------------------------------------------------------------------
   7. MÓVILES MUY PEQUEÑOS (max-width: 380px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .header {
        padding: 0 4%;
    }
    .logo {
        font-size: 20px;
    }
    .main-title-logo {
        max-width: 190px;
    }
    .section-title-premium {
        font-size: 1.6rem;
    }
    .btn {
        font-size: 1.5rem;
    }
    .tab-trigger {
        padding: 10px 40px;
    }
    .nav-btn {
        font-size: 2.3rem;
    }
    .contacto-block {
        padding: 20px 12px;
    }
}

/* --------------------------------------------------------------------------
   8. PANTALLAS BAJAS / MODO HORIZONTAL EN MÓVIL (max-height: 500px)
   Evita que el logo y la flecha de la pestaña inteligente se solapen
   cuando el alto visible es pequeño (móviles en horizontal, barras de
   navegador desplegadas, etc.)
   -------------------------------------------------------------------------- */
@media (max-height: 500px) {
    .main-title-logo {
        max-width: 150px;
    }
    .hero {
        padding-bottom: 60px;
    }
    .tab-trigger {
        padding: 8px 50px;
    }
    .tab-trigger .arrow {
        font-size: 0.85rem;
    }
}

/* --- FIX DEFINITIVO DE ZONAS DE TOQUE EN MÓVIL --- */
/* 1. Le damos a la flecha la máxima prioridad de capa */
#toggleTab {
    z-index: 999999 !important;
}

/* 2. Empujamos el contenido interno del panel hacia abajo */
/* Así, cuando el panel esté cerrado, los botones quedan lejos del alcance del dedo */
#slidingPanel {
    padding-top: 45px !important; 
}

/* 3. Forzamos a que los botones no se peguen arriba del todo */
#slidingPanel .panel-content {
    margin-top: 15px !important;
}

/* 3. Evitamos que los botones se peguen al borde superior del panel */
#slidingPanel .btn-carta, 
#slidingPanel .btn-menu,
#slidingPanel .open-panel-btn {
    margin-top: 10px !important;
}
/* Limpieza absoluta para asegurar que los botones reciban los clics */
#slidingPanel .btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}
#slidingPanel.panel-ready .btn {
    pointer-events: auto;
}