/* 2. VARIABLES & PALETA */ :root { --lai-font-main: 'IM Fell French Canon SC', serif; --lai-font-heading: 'IM Fell French Canon SC', serif; --lai-font-body: 'IM Fell French Canon SC', serif; --lai-blue: #0D3B66; --lai-blue-dark: #0A2B4A; --lai-gold: #C89A4B; --lai-gold-light: #E2C465; --lai-gold-gradient: linear-gradient(135deg, #E7D086 0%, #E2C465 35%, #F0D992 60%, #D8BC57 100%); --lai-cream: #F8F5F2; --lai-white: #FFFFFF; --lai-border: #E0D6C8; --lai-text: #444444; --lai-text-light: #666666; --lai-radius: 12px; --lai-radius-pill: 50px; --lai-shadow: 0 8px 20px rgba(0,0,0,0.08); --lai-shadow-hover: 0 14px 30px rgba(0,0,0,0.12); --lai-shadow-gold: 0 6px 14px rgba(226,196,101,0.35); } /* 3. TIPOGRAFÍA GLOBAL */ body, h1, h2, h3, h4, h5, h6, p, a, li, input, select, textarea, button, .lai-portal-container, .lai-card-title, .lai-btn, .ast-container, .site-content, .entry-title, .widget-title, span:not(.dashicons):not(.ast-icon):not(.fa):not(.fas):not(.far):not(.fab) { font-family: 'IM Fell French Canon SC', serif !important; } body, p { line-height: 1.8; color: var(--lai-text); font-size: 16px; } h1, h2, h3, h4, h5 { color: var(--lai-blue); font-weight: 400; letter-spacing: -0.5px; } /* ============================================================ 4. HEADER FLOTANTE (LOGO ARRIBA / MENÚ ABAJO) ============================================================ */ .site-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 1000 !important; background: transparent !important; border-bottom: none solid rgba(255,255,255,0.15) !important; padding-top: 15px !important; padding-bottom: 15px !important; height: auto !important; } .main-header-bar, .ast-primary-header-bar, .main-header-bar-wrap { background: transparent !important; } /* COLUMNA VERTICAL: Logo Arriba, Menú Abajo */ .main-header-bar-wrap { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; width: 100% !important; } .site-branding { margin-right: 0 !important; margin-bottom: 40px !important; /* Espacio entre Logo y Menú */ text-align: center !important; z-index: 1002; } .site-branding .site-title a { font-size: 47px !important; color: #ffffff !important; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } /* ETIQUETA NEGRA/BLANCA PARA SUBTÍTULO */ .site-branding .site-description { color: #000000 !important; font-size: 12px !important; letter-spacing: 4px !important; font-weight: 800 !important; text-transform: uppercase; background-color: rgba(255, 255, 255, 0.7) !important; padding: 5px 20px !important; border-radius: 50px !important; display: inline-block !important; margin-top: 10px !important; backdrop-filter: blur(4px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .main-header-bar-navigation { margin-left: 0 !important; width: 100%; display: flex; justify-content: center; z-index: 1002; } /* ESTILOS MENÚ (Transparent -> Blue/Gold Hover) */ .main-header-menu .menu-item a { background: transparent; border: 1px solid transparent; } .main-header-menu > .menu-item > a { color: #ffffff !important; font-weight: 700 !important; font-size: 18px !important; text-transform: uppercase !important; letter-spacing: 1px; padding: 10px 20px !important; border-radius: var(--lai-radius) !important; transition: all 0.4s ease !important; margin: 0 5px !important; text-shadow: 0 2px 5px rgba(0,0,0,0.3); } .main-header-menu > .menu-item > a:hover { background-color: var(--lai-blue) !important; /* Fondo Azul Oscuro */ color: var(--lai-gold) !important; /* Texto Dorado */ transform: translateY(-3px); text-shadow: none; box-shadow: 0 5px 15px rgba(13, 59, 102, 0.4); border-color: var(--lai-gold) !important; } /* ============================================================ CORRECCIÓN: LOGO VISIBLE EN HOME ============================================================ */ /* 3. FORZAR VISIBILIDAD DEL LOGO (IMAGEN) */ body.home .site-branding .site-logo-img, body.home .site-branding .custom-logo-link, body.home .site-branding img { display: block !important; visibility: visible !important; opacity: 1 !important; max-width: 250px; /* Ajusta este tamaño si el logo sale muy grande */ height: auto; margin: 0 auto; /* Centrarlo */ } /* 4. Asegurar que el contenedor del branding tenga espacio */ body.home .site-branding { display: block !important; min-height: 100px; /* Reserva espacio para el logo */ opacity: 1 !important; visibility: visible !important; } /* OCULTAR DESCRIPCIÓN EN MÓVILES */ @media (max-width: 900px) { /* 2. Forzar título en una sola línea */ .site-branding .site-title a { font-size: 20px !important; white-space: nowrap !important; /* Prohíbe que el texto baje a otra línea */ overflow: hidden !important; /* Oculta lo que se salga del contenedor */ text-overflow: ellipsis !important; /* Pone "..." si el texto es muy largo */ display: block !important; max-width: 100% !important; } .site-branding { max-width: 100% !important; overflow: hidden !important; } } /* ============================================================ 5. ESPACIADO INTELIGENTE (COLCHÓN) ============================================================ */ /* 1. Regla para Escritorio (Pantallas grandes) */ .site-content { padding-top: 200px !important; } .entry-header { display: none !important; } /* 2. Home con padding */ body.home .site-content { padding-top: 250px !important; } /* 3. AJUSTE GLOBAL PARA MÓVILES (Reducir el espacio) */ @media (max-width: 768px) { .site-content { padding-top: 150px !important; } } /* --- EXCEPCIÓN: SOLO PARA GALERÍA (Tus IDs específicos) --- */ body.page-id-80 .site-content, body.page-id-2300 .site-content { padding-top: 300px !important; } /* --- AJUSTE MÓVIL PARA LAS EXCEPCIONES (Galería en celular) --- */ @media (max-width: 768px) { body.page-id-80 .site-content, body.page-id-2300 .site-content { padding-top: 150px !important; } } /* ============================================================ 6. SECCIÓN HERO (CONFIGURACIÓN HOME) ============================================================ */ .lai-hero-section { position: relative; height: 100vh !important; min-height: 900px !important; width: 100vw !important; margin-left: calc(-50vw + 50%); top: 0; padding: 0 !important; margin-top: 0 !important; overflow: hidden; z-index: 1; } .lai-hero-section img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } .lai-hero-overlay { position: absolute; top: 32% !important; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; z-index: 2; width: 90%; max-width: 1000px; margin-top: 0 !important; } .lai-hero-overlay h1 { font-size: clamp(35px, 5vw, 4.5rem) !important; line-height: 1.1; color: #fff; letter-spacing: -1px; margin-bottom: 150px !important; } .lai-hero-desc { color: #ffffff; font-size: 27px !important; line-height: 1.5; max-width: 900px; margin: 0 auto; margin-bottom: 200px !important; text-shadow: 0 3px 12px rgba(0,0,0,0.9); font-weight: 400; } /* ============================================================ 6.1 FIX: BOTÓN HERO (OPCIONES DE RESERVA) ============================================================ */ .lai-hero-overlay .lai-btn-outline { display: inline-block !important; background-color: #ffffff !important; /* Fondo blanco */ color: #000000 !important; /* Texto negro */ padding: 15px 40px !important; /* Espacio interno para que no quede apretado */ font-size: 18px !important; font-weight: bold !important; text-decoration: none !important; border-radius: 50px !important; /* El truco para que NO sea cuadrado (estilo píldora) */ border: 2px solid #ffffff !important; /* Borde blanco para mantener la estructura */ box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; /* Sombra suave para que resalte del fondo */ transition: all 0.3s ease !important; /* Animación suave al pasar el mouse */ letter-spacing: 0.5px !important; } /* Efecto al pasar el mouse (Hover: Invertir colores) */ .lai-hero-overlay .lai-btn-outline:hover { background-color: #000000 !important; /* Fondo cambia a negro */ color: #ffffff !important; /* Texto cambia a blanco */ border-color: #000000 !important; /* Borde cambia a negro */ transform: translateY(-3px) !important; /* Pequeño salto hacia arriba muy elegante */ } /* ============================================================ 7. WIDGET DE BÚSQUEDA ============================================================ */ .lai-search-widget { background: var(--lai-cream); border: 1px solid var(--lai-border); border-radius: var(--lai-radius); padding: 24px; box-shadow: var(--lai-shadow); max-width: 1100px; margin: 100px auto 60px auto !important; position: relative; z-index: 10; border-bottom: 4px solid var(--lai-gold); } .lai-search-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } .lai-field-group { flex: 1 1 180px; display: flex; flex-direction: column; } .lai-field-group.lay-field-small { flex: 0 1 110px; min-width: 100px; } .lai-field-group label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lai-text-light); margin-bottom: 6px; } .lai-search-form input, .lai-search-form select { width: 100%; height: 48px; padding: 0 16px; border-radius: var(--lai-radius-pill); border: 1px solid #CCC2B5; background: #FFF; font-size: 14px; outline: none; transition: all 0.2s; } .lai-search-form input:focus { border-color: var(--lai-blue); box-shadow: 0 0 0 2px rgba(13, 59, 102, 0.1); } .lai-search-btn { width: 100%; height: 48px; background: var(--lai-gold-gradient); color: #0D0D0D; font-weight: 700; text-transform: uppercase; font-size: 14px; border: none; border-radius: var(--lai-radius-pill); cursor: pointer; box-shadow: var(--lai-shadow-gold); transition: transform 0.2s; } .lai-search-btn:hover { transform: translateY(-2px); } #lai-search-error { margin-top: 15px; padding: 12px; background: #ffebee; color: #c62828; border-radius: 6px; font-size: 13px; display: none; border-left: 4px solid #c62828; } /* AJUSTE WIDGET BÚSQUEDA (MÓVIL: TODO AL 50%) */ @media (max-width: 768px) { .lai-search-widget { padding: 15px !important; margin-left: 10px !important; margin-right: 10px !important; width: auto !important; border-radius: 16px !important; } body.home .lai-search-widget { margin-top: 140px !important; margin-bottom: 40px !important; } .lai-search-form { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; align-items: flex-end !important; } .lai-field-group, .lai-field-group.lay-field-small { flex: 0 0 calc(50% - 5px) !important; width: calc(50% - 5px) !important; min-width: 0 !important; margin-bottom: 0 !important; } .lai-search-form input, .lai-search-form select { width: 100% !important; height: 44px !important; font-size: 13px !important; padding: 0 10px !important; border-radius: 50px !important; } .lai-search-btn { width: 100% !important; height: 44px !important; margin-top: 5px !important; flex: 0 0 100% !important; border-radius: 50px !important; } .lai-field-group label { margin-bottom: 3px !important; font-size: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; } } /* ============================================================ 8. GRID DE RESULTADOS ============================================================ */ .lai-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px; } .lai-room-item { background: var(--lai-white); border: 1px solid var(--lai-border); border-radius: var(--lai-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; box-shadow: var(--lai-shadow); } .lai-room-item:hover { transform: translateY(-5px); box-shadow: var(--lai-shadow-hover); border-color: var(--lai-gold); } .lai-room-item.lai-selected-room { border: 2px solid var(--lai-gold); background: #fffdf5; } .lai-room-item.is-occupied { opacity: 0.6; filter: grayscale(0.9); pointer-events: none; } .lai-room-img { position: relative; height: 240px; overflow: hidden; background: #f0f0f0; } .lai-room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .lai-room-item:hover .lai-room-img img { transform: scale(1.05); } .lai-badge-occupied { position: absolute; top: 10px; right: 10px; background: #d32f2f; color: white; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: bold; } .lai-room-content { padding: 24px; flex: 1; display: flex; flex-direction: column; } .lai-room-title { margin: 0 0 12px 0; font-size: 22px; line-height: 1.2; } .lai-room-title a { text-decoration: none; color: var(--lai-blue); transition: color 0.2s; } .lai-room-title a:hover { color: var(--lai-gold); } .lai-room-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 13px; color: var(--lai-text-light); } .lai-pax-tag { background: #e3f2fd; color: #1565c0; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; } .lai-rate-table { background: transparent; padding: 0; margin-bottom: 15px; border: none; } .lai-rate-row { display: flex; justify-content: space-between; font-size: 14px; padding: 0; color: #666; border: none; } .lai-rate-row.is-active-rate { color: var(--lai-blue); font-weight: 800; background: #f0f7ff; margin: 0; padding: 12px 15px; border-radius: 8px; border: 1px solid #cce5ff; } .lai-room-price-summary { margin-bottom: 15px; text-align: right; } .lai-total-price { font-size: 24px; font-weight: 700; color: var(--lai-gold); display: block; } .lai-btn-book { width: 100%; padding: 14px; margin-top: auto; background: var(--lai-blue); color: #fff; font-weight: bold; border: none; border-radius: var(--lai-radius-pill); cursor: pointer; text-transform: uppercase; transition: all 0.3s; box-shadow: 0 4px 10px rgba(13, 59, 102, 0.2); } .lai-btn-book:hover:not(:disabled) { background: var(--lai-blue-dark); transform: translateY(-2px); } .lai-btn-book:disabled { background: #e0e0e0; color: #888; cursor: default; } /* ============================================================ 9. CHECKOUT & FORMULARIOS ============================================================ */ .lai-section-header { display: flex; align-items: center; margin: 30px 0 20px 0; } .lai-section-header h2 { color: #ffffff !important; font-size: 24px; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.3); font-family: 'IM Fell French Canon SC', serif; } .lai-section-header .step-num { background: #C89A4B; color: #000; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 15px; font-size: 16px; box-shadow: 0 0 10px rgba(200, 154, 75, 0.4); } .lai-country-select-wrapper { position: relative; width: 140px; font-size: 14px; z-index: 100; } .lai-country-trigger { background: #fff; border: 1px solid #ddd; padding: 10px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; height: 48px; box-sizing: border-box; transition: all 0.3s; } .lai-country-trigger:hover { border-color: #bbb; } .lai-country-dropdown { display: none; position: absolute; top: 100%; left: 0; width: 280px; max-height: 250px; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); z-index: 9999; margin-top: 5px; overflow: hidden; } .lai-search-box { padding: 10px; border-bottom: 1px solid #eee; background: #f9f9f9; position: sticky; top: 0; z-index: 10; } .lai-search-box input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; height: 36px; margin: 0; } .lai-country-list { max-height: 200px; overflow-y: auto; list-style: none; padding: 0; margin: 0; } .lai-country-option { padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.2s; border-bottom: 1px solid #f5f5f5; } .lai-country-option:last-child { border-bottom: none; } .lai-country-option:hover { background: #eef2ff; } .lai-country-option .c-flag { font-size: 18px; } .lai-country-option .c-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #333; } .lai-country-option .c-code { color: #888; font-weight: bold; font-size: 12px; } .lai-payment-methods-grid { display: grid; gap: 20px; } .lai-payment-card { display: block; background: #fff; border: 2px solid #e0e0e0; border-radius: 12px; padding: 25px; padding-right: 60px; /* Espacio reservado para el círculo de selección */ cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .lai-payment-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); } /* FIX 3: Hacemos visibles los radio buttons para mejorar la experiencia de usuario */ .lai-payment-card input[type="radio"] { display: block !important; position: absolute; right: 25px; top: 28px; width: 22px; height: 22px; accent-color: #C89A4B; /* Pinta el radio button de dorado al hacer clic (Navegadores modernos) */ cursor: pointer; } .lai-payment-card.bold-option { border-color: #e0e0e0; } .lai-payment-card.bold-option.selected { border-color: #C89A4B; background: linear-gradient(to right, #fff, #fffaed); box-shadow: 0 0 20px rgba(200, 154, 75, 0.2); } .lai-payment-card:not(.bold-option).selected { border-color: #0D3B66; background: #f0f7ff; } .pay-card-header { font-weight: 700; color: #0D3B66; font-size: 18px; display: flex; align-items: center; margin-bottom: 10px; } .pay-card-header .dashicons { font-size: 24px; width: 24px; height: 24px; margin-right: 10px; color: #C89A4B; } .lai-badge-gold { background: #27ae60; color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 20px; margin-left: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 5px rgba(39, 174, 96, 0.3); } .pulse-anim { animation: pulse-green 2s infinite; } @keyframes pulse-green { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(39, 174, 96, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); } } .pay-card-desc { font-size: 13px; color: #666; margin: 0; padding-left: 34px; line-height: 1.4; } .lai-checkout-wrapper { max-width: 1100px; margin: 40px auto; color: var(--lai-text); } .lai-checkout-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; } .lai-card-boutique { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .lai-form-row { display: flex; gap: 20px; margin-bottom: 20px; } .lai-form-group { flex: 1; margin-bottom: 15px; } .lai-form-group label { color: #555; font-weight: 700; display: block; font-size: 12px; text-transform: uppercase; margin-bottom: 6px; } .lai-form-group input, .lai-form-group select, .lai-form-group textarea { width: 100%; border: 1px solid #ddd; height: 48px; padding: 0 15px; border-radius: 6px; font-size: 15px; background: #fafafa; transition: all 0.3s; } .lai-form-group input:focus, .lai-form-group select:focus { border-color: #0D3B66; box-shadow: 0 0 0 3px rgba(13, 59, 102, 0.1); background: #fff; outline: none; } .lai-form-group textarea { height: auto; padding: 15px; } .lai-time-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .time-chip span { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; cursor: pointer; background: #fff; color: #666; transition: all 0.2s; font-weight: 600; min-height: 46px; line-height: 1.2; } .time-chip span small { font-size: 9px; opacity: 0.8; margin-top: 2px; text-transform: uppercase; } .time-chip input { display: none; } .time-chip input:checked + span { background: #0D3B66; color: #fff; border-color: #0D3B66; } /* FIX 1: Alineación del resumen con el formulario izquierdo en Escritorio */ #lai-sticky-summary { background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); border-top: 5px solid #C89A4B; position: sticky; top: 100px; /* Espacio para que no choque con la barra superior al hacer scroll */ margin-top: 78px; /* Empuja el cuadro hacia abajo para alinear perfectamente */ } .lai-summary-title { margin-top: 0; color: #0D3B66; font-size: 18px; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 20px; } .lai-dates-timeline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .d-num { display: block; font-size: 24px; font-weight: 900; color: #0D3B66; line-height: 1; } .d-month { font-size: 12px; font-weight: bold; color: #C89A4B; text-transform: uppercase; } .d-label { font-size: 10px; color: #999; font-weight: 700; letter-spacing: 1px; display: block; margin-bottom: 2px; } .nights-badge { background: #f5f5f5; padding: 2px 8px; font-size: 10px; border-radius: 10px; color: #777; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; } .date-line { flex: 1; height: 1px; background: #e0e0e0; margin: 0 15px; position: relative; top: 5px; } .lai-financials .fin-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: #555; } .total-row { font-size: 18px; color: #0D3B66; font-weight: 900; border-top: 2px solid #0D3B66; padding-top: 15px; } .lai-summary-divider { height: 1px; background: #eee; margin: 20px 0; } .lai-btn-finish-checkout { width: 100%; background: linear-gradient(135deg, #0D3B66 0%, #051b2e 100%); color: #fff; border: none; padding: 16px; border-radius: 50px; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.3s; margin-top: 15px; box-shadow: 0 5px 15px rgba(13, 59, 102, 0.3); text-transform: uppercase; letter-spacing: 1px; } .lai-btn-finish-checkout:hover:not(:disabled) { background: linear-gradient(135deg, #C89A4B 0%, #a37c3b 100%); color: #000; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200, 154, 75, 0.3); } /* FIX 2: Responsive Checkout (El resumen va de último en móviles) */ @media (max-width: 900px) { .lai-checkout-grid { grid-template-columns: 1fr; } /* Eliminamos el order:-1 para que fluya hacia abajo */ #lai-sticky-summary { position: static; margin-top: 0; margin-bottom: 30px; } .lai-form-row { flex-direction: column; gap: 15px; } } @media (max-width: 768px) { .lai-checkout-grid { grid-template-columns: 1fr; } /* Eliminamos la regla .lai-col-sidebar { order: -1; } para respetar el orden natural */ .main-header-bar-wrap { flex-direction: row !important; justify-content: space-between !important; padding: 10px 15px !important; } .site-branding { margin-bottom: 0 !important; text-align: left !important; } .main-header-bar-navigation { width: auto !important; margin-left: auto !important; } .lai-hero-section { height: 60vh !important; min-height: 600px !important; margin-top: -100px; padding-top: 100px; } .lai-hero-overlay h1 { font-size: 32px !important; margin-bottom: 20px !important; } .lai-hero-overlay { top: 50%; margin-top: 40px !important; } .lai-hero-desc { font-size: 18px !important; margin-bottom: 30px !important; } .lai-btn-outline { padding: 15px 40px !important; font-size: 18px !important; } body .lai-bundle-bar { bottom: 10px; } .lai-bundle-content { flex-direction: column; min-width: 0; width: 92%; border-radius: 24px; padding: 16px 20px; } .lai-bundle-main-text { flex-direction: column; gap: 4px; text-align: center; } .lai-sep { display: none; } .navigation.post-navigation .nav-links { flex-direction: column; gap: 15px; } .nav-previous, .nav-next { max-width: 100%; text-align: center; } .nav-next { margin-left: 0; justify-content: center; } .nav-previous a, .nav-next a { align-items: center; text-align: center; } } /* ============================================================ 10. LOADER & EXTRAS ============================================================ */ #lai-loader { background: var(--lai-blue); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s ease; gap: 20px; } .lai-loader-brand { font-size: 24px; color: var(--lai-gold); text-transform: uppercase; letter-spacing: 3px; animation: textFade 2s infinite alternate; } .lai-loader-circle { width: 50px; height: 50px; border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--lai-gold); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes textFade { from { opacity: 0.7; } to { opacity: 1; } } .lai-mini-room { background: #fdfdfd; border: 1px solid #f0f0f0; border-left: 3px solid var(--lai-blue); padding: 15px; margin-bottom: 15px; border-radius: 8px; display: flex; flex-direction: column; gap: 5px; } .lai-mini-room strong { color: var(--lai-blue); font-size: 16px; display: block; } .lai-mini-room small { display: inline-block; background: var(--lai-gold); color: #fff; font-size: 10px; text-transform: uppercase; font-weight: 700; padding: 3px 10px; border-radius: 20px; width: fit-content; } .lai-mini-room .room-date-price { display: flex; justify-content: space-between; font-size: 13px; color: #777; margin-top: 5px; border-top: 1px dashed #eee; padding-top: 8px; } .lai-financials .discount-row { background-color: #e8f5e9; color: #2e7d32; padding: 10px 15px; border-radius: 8px; margin: 10px 0; font-weight: bold; border: 1px dashed #a5d6a7; animation: discountPulse 2s infinite ease-in-out; } @keyframes discountPulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } .lai-financials .discount-row span:last-child { font-size: 15px; background: #fff; padding: 2px 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .lai-financials .total-row { border-top: 2px solid var(--lai-blue); padding-top: 15px; margin-top: 10px; font-family: var(--lai-font-heading); color: var(--lai-blue); font-size: 20px; align-items: center; } .lai-financials .total-row span:last-child { font-size: 26px; font-weight: 700; } .lai-room-calendar-layout { background: #fff; border: 1px solid #e0d6c8; border-radius: 12px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); max-width: 600px; margin: 20px auto; } .lai-room-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #f8f5f2; padding-bottom: 15px; } .lai-room-calendar-title { margin: 0; color: var(--lai-blue); font-size: 20px; text-transform: capitalize; } .lai-room-calendar-nav-btn { text-decoration: none; background: #f4f4f4; color: var(--lai-blue); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; } .lai-room-calendar-table { width: 100%; border-collapse: separate; border-spacing: 4px; } .lai-room-calendar-table th { text-align: center; font-size: 11px; text-transform: uppercase; color: #999; padding-bottom: 10px; } .lai-room-calendar-day { height: 60px; width: 14%; text-align: center; border: 1px solid #f0f0f0; border-radius: 6px; font-size: 14px; color: #333; position: relative; } .day-num { display: block; font-weight: bold; margin-bottom: 2px; } .lai-room-calendar-day.is-free { background: #fff; border-color: #e0e0e0; color: var(--lai-blue); } .lai-room-calendar-day.is-busy { background: #ffebee; color: #c62828; border-color: #ffcdd2; opacity: 0.6; text-decoration: line-through; } .lai-room-calendar-day.is-blocked { background: #f5f5f5; color: #ccc; border-color: transparent; } .lai-room-calendar-hoverprice-text { display: block; font-size: 10px; color: var(--lai-gold); font-weight: bold; } .navigation.post-navigation .nav-subtitle, .navigation.post-navigation .ast-post-nav-lbl, .navigation.post-navigation .meta-nav { display: none !important; } .navigation.post-navigation { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--lai-border); width: 100%; } .navigation.post-navigation .nav-links { display: flex; justify-content: space-between; width: 100%; } .nav-previous, .nav-next { flex: 1; max-width: 48%; } .nav-next { margin-left: auto; text-align: right; display: flex; justify-content: flex-end; } .navigation.post-navigation a { display: flex; flex-direction: column; justify-content: center; padding: 20px 30px; background: #fff; border: 1px solid var(--lai-border); border-radius: var(--lai-radius); text-decoration: none; width: 100%; box-shadow: var(--lai-shadow); font-size: 18px; color: var(--lai-blue); font-weight: 600; line-height: 1.3; } .navigation.post-navigation a span { color: inherit; font-family: inherit; font-size: inherit; } .nav-previous a { align-items: flex-start; text-align: left; } .nav-previous a::before { content: "Anterior"; font-size: 10px; color: var(--lai-gold); letter-spacing: 2px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; } .nav-next a { align-items: flex-end; text-align: right; } .nav-next a::after { content: "Siguiente"; font-size: 10px; color: var(--lai-gold); letter-spacing: 2px; font-weight: 800; margin-bottom: 5px; display: block; order: -1; } .navigation.post-navigation a:hover { transform: translateY(-5px); border-color: var(--lai-gold); box-shadow: var(--lai-shadow-hover); } /* BUNDLE BAR */ body .lai-bundle-bar { position: fixed !important; bottom: 0 !important; left: 0; right: 0; z-index: 99999; display: none; justify-content: center; pointer-events: none; padding-bottom: 30px; background: transparent !important; } body .lai-bundle-bar[style*="display: flex"] { animation: laiFloatUp 0.6s forwards !important; } body .lai-bundle-content { pointer-events: auto; background: #0D3B66 !important; color: #FFFFFF !important; padding: 12px 30px !important; border-radius: 100px !important; box-shadow: 0 15px 45px rgba(0,0,0,0.3) !important; display: flex !important; align-items: center !important; gap: 25px !important; min-width: 600px; max-width: 90%; border: 1px solid rgba(255,255,255,0.15) !important; } .lai-bundle-main-text { display: flex !important; align-items: center !important; gap: 15px !important; } .lai-bundle-count, .lai-bundle-gs-count, .lai-bundle-total { color: var(--lai-gold-light) !important; font-weight: 900 !important; } .lai-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.2); display: inline-block; } .lai-clear-link { color: #ffAB91 !important; font-size: 11px; cursor: pointer; border-bottom: 1px dotted; margin-left: 10px; } .lai-btn-finish { background: var(--lai-gold-gradient) !important; color: #000 !important; padding: 10px 25px !important; border-radius: 50px !important; font-weight: 800 !important; text-decoration: none !important; font-size: 13px !important; text-transform: uppercase !important; } .lai-btn-finish.lai-disabled { background: #4a5d71 !important; color: rgba(255,255,255,0.5) !important; cursor: not-allowed !important; pointer-events: none !important; } @keyframes laiFloatUp { 0% { opacity: 0; transform: translateY(100px); } 100% { opacity: 1; transform: translateY(-30px); } } /* ICONOS */ .dashicons, .dashicons-before:before, .lai-search-widget .dashicons, .lai-results-grid .dashicons, .lai-bundle-bar .dashicons, .lai-checkout-wrapper .dashicons, .lai-portal-container .dashicons, .lai-room-calendar-layout .dashicons, .lai-carousel-hero .dashicons, .lai-card .dashicons, .lai-room-meta .dashicons, .lai-amenities-list .dashicons { font-family: "dashicons" !important; font-weight: 400 !important; display: inline-block !important; line-height: 1 !important; text-transform: none !important; } [class*="ast-icon-"], .fa, .fas, .far, .fab { font-family: inherit !important; } .ast-icon { font-family: 'Astra' !important; } .fas, .fa { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; } .lai-room-calendar-nav-btn, .nav-arrow, .lai-nav-btn { font-family: Arial, sans-serif !important; font-weight: bold !important; } input[type="checkbox"], input[type="radio"] { font-family: sans-serif !important; } /* ============================================================ 11. PÁGINA: CAFÉ FREDDIE (ESTILO BOXED + DARK MODE) Aplica por ID (39, 2304) y por Slug (cafe-freddie, cafe) ============================================================ */ /* 1. SELECTORES DE PÁGINA (MUY ROBUSTOS) */ body.page-id-39, body.page-id-2304, body.slug-cafe-freddie, body[class*="cafe-freddie"], body.slug-cafe { margin: 0 !important; padding: 0 !important; width: 100% !important; min-height: 100% !important; overflow-x: hidden !important; background-color: #0A2B4A !important; /* El Azul Oscuro de Fondo */ } /* 2. OCULTAR HEADER, FOOTER Y ADMIN BAR (SOLO EN ESTAS PÁGINAS) */ body.page-id-39 #wpadminbar, body.page-id-2304 #wpadminbar, body[class*="cafe-freddie"] #wpadminbar, body.slug-cafe #wpadminbar, body.page-id-39 .site-header, body.page-id-2304 .site-header, body[class*="cafe-freddie"] .site-header, body.slug-cafe .site-header, body.page-id-39 .site-footer, body.page-id-2304 .site-footer, body[class*="cafe-freddie"] .site-footer, body.slug-cafe .site-footer, body.page-id-39 #colophon, body.page-id-2304 #colophon, body[class*="cafe-freddie"] #colophon, body.slug-cafe #colophon, body.page-id-39 .ast-mobile-header-wrap-container, body[class*="cafe-freddie"] .ast-mobile-header-wrap-container, body.slug-cafe .ast-mobile-header-wrap-container { display: none !important; } /* 3. RESET DE MÁRGENES HTML */ body.page-id-39 html, body.page-id-2304 html, body[class*="cafe-freddie"] html, body.slug-cafe html { margin-top: 0 !important; } /* 4. CONTENEDOR PRINCIPAL FLOTANTE - CRUCIAL PARA SEO VISIBLE */ .lai-cafe-wrapper { position: relative; width: 94% !important; max-width: 1800px; margin: 0 auto !important; min-height: 100vh; z-index: 100; /* Fondo azul (no negro) para que coincida con las secciones internas y no asome negro alrededor del bloque SEO (más angosto, 950px). */ background-color: #0A2B4A; box-shadow: 0 0 50px rgba(0,0,0,0.5); overflow: visible !important; height: auto !important; } /* 5. HERO CARRUSEL (SOLUCIÓN BUG VISUAL) */ .lai-hero-carousel-container { position: relative; width: 100% !important; height: 100vh !important; /* FIX: Quitamos overflow hidden global para no cortar el resto */ /* overflow: hidden; <--- ELIMINADO */ background: #000; margin: 0 !important; display: block; } /* Recorte interno para las imágenes */ .lai-hero-track-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .lai-hero-track { display: flex; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; } .lai-hero-slide { min-width: 100% !important; width: 100% !important; height: 100%; flex-shrink: 0; position: relative; } .lai-hero-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block; margin: 0 !important; border: none !important; } .lai-hero-gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.3)); z-index: 2; pointer-events: none; } /* 6. TEXTOS Y TIPOGRAFÍA HERO */ .lai-hero-content-layer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10; width: 90%; max-width: 900px; } .lai-cafe-title { font-family: 'Parisienne', cursive !important; font-weight: 400 !important; font-size: clamp(60px, 12vw, 140px); color: #fff; margin: 0; line-height: 1.1; text-shadow: 4px 4px 0 #000, 0 0 30px rgba(0,0,0,0.9) !important; } .lai-cafe-subtitle { font-family: 'Parisienne', cursive !important; font-weight: 400 !important; display: block; color: #FFD700 !important; font-size: clamp(24px, 5vw, 35px); margin-bottom: 10px; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0,0,0,1) !important; } .lai-cafe-intro { font-family: 'IM Fell French Canon', serif !important; font-size: 34px !important; line-height: 1.1 !important; font-weight: 400 !important; color: #E8E8E8 !important; margin: 30px 0 40px 0; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 15px rgba(0,0,0,1) !important; background: radial-gradient(closest-side, rgba(0,0,0,0.6), transparent); padding: 20px; border-radius: 30px; } /* Flechas Navegación */ .lai-hero-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.3); color: #fff; border: 1px solid rgba(255,255,255,0.5); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 20px; z-index: 20; transition: all 0.5s; display: flex; align-items: center; justify-content: center; } .lai-hero-btn:hover { background: #C89A4B; color: #000; border-color: #C89A4B; } .prev-btn { left: 15px; } .next-btn { right: 15px; } /* 7. CONTACTO Y MAPA (APILADOS) */ .lai-cafe-contact-section { display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #0A2B4A; color: #fff; border-top: 5px solid #C89A4B; position: relative; z-index: 5; } /* CONTENIDO SEO (Para que se vea bien en Café Freddie) */ .lai-seo-container { position: relative; z-index: 20; background-color: #0A2B4A; } .lai-cafe-contact-info { width: 100% !important; max-width: 100% !important; padding: 80px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-sizing: border-box; } .lai-cafe-map { width: 100% !important; max-width: 100% !important; position: relative; height: 500px !important; margin: 0 !important; padding: 0 !important; background: #0A2B4A; } .lai-cafe-map iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: none !important; } /* Estilos de Texto Contacto */ .lai-cafe-contact-info h3 { font-family: 'Parisienne', cursive !important; color: #C89A4B; font-size: 55px; margin-bottom: 25px; } .lai-cafe-hours { font-size: 16px; color: #ccc; margin-bottom: 35px; line-height: 1.8; } .lai-cafe-social { display: flex; gap: 15px; margin-bottom: 40px; justify-content: center; } .lai-cafe-social a { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border: 1px solid #C89A4B; border-radius: 50%; color: #C89A4B; transition: 0.3s; font-size: 18px; } .lai-cafe-social a:hover { background: #C89A4B; color: #000; } .lai-cafe-direct-contact p { margin-bottom: 15px; font-size: 15px; color: #eee; display: flex; align-items: center; justify-content: center; } .lai-cafe-direct-contact i { color: #C89A4B; margin-right: 15px; font-size: 18px; } /* Ajustes Móviles */ @media (max-width: 768px) { .lai-cafe-wrapper { width: 95% !important; } .lai-cafe-contact-info { padding: 60px 20px; } .lai-cafe-map { height: 400px !important; } .lai-cafe-intro { font-size: 24px !important; } .prev-btn, .next-btn { display: flex !important; width: 40px !important; height: 40px !important; font-size: 16px !important; } .prev-btn { left: 10px !important; } .next-btn { right: 10px !important; } .lai-btn-group { flex-direction: column; align-items: center; } } /* ============================================================ 12. BOTONES CAFÉ ============================================================ */ .lai-btn-group { display: flex; justify-content: center; gap: 25px; margin-top: 35px; flex-wrap: wrap; } /* BOTÓN: ENCUÉNTRANOS AQUÍ */ .lai-btn-outline { display: inline-flex !important; justify-content: center !important; align-items: center !important; padding: 15px 40px; background-color: rgba(0, 0, 0, 0.7) !important; border: 2px solid #fff !important; color: #fff !important; font-weight: 700 !important; text-transform: uppercase; text-decoration: none; transition: 0.3s; font-family: 'Helvetica Neue', sans-serif; text-align: center; line-height: 1 !important; } .lai-btn-outline:hover { background-color: #fff !important; color: #000 !important; } /* BOTÓN: IR A HOTEL */ .lai-btn-hotel { display: inline-flex !important; justify-content: center !important; align-items: center !important; padding: 15px 40px; background-color: rgba(10, 43, 74, 0.9) !important; border: 2px solid #C89A4B !important; color: #C89A4B !important; font-weight: 700 !important; text-transform: uppercase; text-decoration: none; transition: 0.3s; font-family: 'Helvetica Neue', sans-serif; text-align: center; line-height: 1 !important; } .lai-btn-hotel:hover { background-color: #C89A4B !important; color: #000 !important; } /* Botón "Ver Menú" del café (migrado desde CSS inline de la página) */ .lai-btn-group a { text-decoration: none !important; } .lai-btn-menu { background-color: #C89A4B; color: #ffffff; padding: 12px 28px; font-size: 16px; font-weight: 600; border: 2px solid #C89A4B; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; text-decoration: none !important; } .lai-btn-menu:hover { background-color: #A67D3A; border-color: #A67D3A; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); color: #ffffff; } /* Ajuste botones en móvil */ @media (max-width: 768px) { .lai-btn-hotel, .lai-btn-outline { width: 100%; max-width: 300px; font-size: 14px !important; padding: 15px 20px !important; height: auto; } } /* ============================================================ 14. PÁGINA: UBICACIÓN Y ATRACCIONES (CON FIX MÓVIL INTEGRADO) ============================================================ */ .fa-whatsapp:before { content: "\f232" !important; font-family: "Font Awesome 5 Brands" !important; } .fab { font-family: "Font Awesome 5 Brands" !important; } .fas, .fa { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; } .lai-location-wrapper { display: flex; flex-wrap: wrap; width: 100%; background-color: #0A2B4A; box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin-top: 100px !important; } .lai-loc-info { flex: 1 1 400px; padding: 60px 40px; color: #fff; border-right: 4px solid #C89A4B; box-sizing: border-box; } .lai-loc-subtitle { font-family: 'IM Fell French Canon SC', serif !important; color: #C89A4B !important; font-size: 28px; margin-bottom: 15px; line-height: 1.2; letter-spacing: 1px; } .lai-loc-title { font-family: 'IM Fell French Canon SC', serif !important; font-size: 48px; line-height: 1.1; margin-bottom: 30px; color: #ffffff !important; text-shadow: 2px 2px 0 #000 !important; } .lai-loc-desc { font-family: 'IM Fell French Canon SC', serif !important; font-size: 22px; line-height: 1.4; color: #E8E8E8 !important; margin-bottom: 40px; } .lai-contact-list { list-style: none; padding: 0; margin: 0 0 35px 0; } .lai-contact-list li { font-family: 'IM Fell French Canon SC', serif !important; font-size: 20px; margin-bottom: 15px; display: flex; align-items: center; color: #ccc; } .lai-contact-list i { color: #C89A4B; width: 30px; font-size: 20px; text-align: center; margin-right: 15px; } .lai-contact-list a { color: inherit !important; text-decoration: none !important; border: none !important; transition: 0.3s; } .lai-contact-list a:hover { color: #C89A4B !important; } .lai-btn-gold { display: inline-block; padding: 12px 30px; border: 2px solid #C89A4B; color: #C89A4B; text-transform: uppercase; font-family: 'Helvetica Neue', sans-serif !important; font-weight: 700; text-decoration: none; transition: 0.3s; font-size: 14px; letter-spacing: 2px; } .lai-btn-gold:hover { background-color: #C89A4B; color: #000; } .lai-loc-map { flex: 1 1 400px; position: relative; min-height: 550px; background: #000; } .lai-loc-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; filter: contrast(1.1) grayscale(0.2); } /* Fix de Títulos en la sección SEO ("Cómo llegar...") */ .lai-seo-container h3 { color: #3498db !important; font-weight: bold !important; text-shadow: none !important; } .lai-seo-container h4 { color: #000000 !important; font-weight: bold !important; text-shadow: none !important; } .lai-attractions-section { width: 100%; background-color: #08243e; padding: 80px 40px; box-sizing: border-box; color: #fff; overflow: hidden; } .lai-section-title { font-family: 'IM Fell French Canon SC', serif !important; font-size: 42px; color: #C89A4B !important; text-align: center; margin-bottom: 60px; text-shadow: 2px 2px 0 #000 !important; border-bottom: 1px solid rgba(200, 154, 75, 0.3); padding-bottom: 20px; display: block; width: 100%; } .lai-attractions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 60px; max-width: 1400px; margin: 0 auto; } .lai-category-card { margin-bottom: 20px; } .lai-cat-header { display: flex; align-items: center; margin-bottom: 25px; border-bottom: 2px solid #C89A4B; padding-bottom: 10px; } .lai-cat-icon { font-size: 24px; color: #C89A4B !important; margin-right: 15px; } .lai-cat-title { font-family: 'IM Fell French Canon SC', serif !important; font-size: 26px; color: #ffffff !important; margin: 0; text-shadow: 1px 1px 0 #000 !important; } .lai-places-list { list-style: none; padding: 0; margin: 0; } .lai-place-item { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); } .lai-place-item:last-child { border-bottom: none; } .lai-item-highlight { border: 1px solid #C89A4B; background: rgba(200, 154, 75, 0.1); padding: 15px; border-radius: 4px; position: relative; margin-top: 10px; } .lai-item-highlight::after { content: "★ RECOMENDADO"; position: absolute; top: -10px; right: 10px; background: #C89A4B; color: #000; font-size: 10px; font-weight: bold; padding: 2px 6px; font-family: sans-serif; } .lai-place-name { font-family: 'IM Fell French Canon SC', serif !important; font-size: 20px; color: #C89A4B !important; display: block; margin-bottom: 4px; font-weight: bold !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important; } .lai-place-dist { font-family: 'Helvetica Neue', sans-serif !important; font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 8px; } .lai-place-desc { font-family: 'Helvetica Neue', sans-serif !important; font-size: 15px; color: #E8E8E8 !important; line-height: 1.5; font-weight: 400; } @media (max-width: 800px) { .lai-location-wrapper { margin-top: 50px !important; } .lai-loc-info { border-right: none; text-align: center; padding: 40px 20px; } /* FIX DE TAMAÑOS MÓVILES PARA QUE NO SE VEA APRETADO */ .lai-loc-subtitle { font-size: 22px !important; margin-bottom: 10px !important; } .lai-loc-title { font-size: 32px !important; line-height: 1.2 !important; margin-bottom: 20px !important; } .lai-loc-desc { font-size: 18px !important; } /* FIX DE TAMAÑOS MÓVILES PARA LAS ATRACCIONES Y SEO */ .lai-seo-container h3 { font-size: 24px !important; line-height: 1.3 !important; } .lai-seo-container h4 { font-size: 18px !important; } .lai-cat-title { font-size: 22px !important; } .lai-place-name { font-size: 18px !important; } .lai-contact-list li { justify-content: center; font-size: 16px !important; } .lai-loc-map { min-height: 350px; } .lai-section-title { font-size: 32px; } .lai-attractions-section { padding: 40px 0; } /* CARRUSEL DE TARJETAS MÓVIL */ .lai-attractions-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 10px 25px 30px 25px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lai-attractions-grid::-webkit-scrollbar { display: none; } .lai-category-card { flex: 0 0 85%; width: 85%; scroll-snap-align: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(200, 154, 75, 0.2); border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .lai-cat-header { border-bottom: 1px solid rgba(200, 154, 75, 0.5); } } /* ============================================================ 15. PÁGINA: GALERÍA (ESTILOS INTEGRADOS) ============================================================ */ /* 1. HERO SUPERIOR */ .lai-gal-hero { position: relative; width: 100%; height: 85vh !important; min-height: 500px; overflow: hidden; background: transparent !important; margin-top: 0 !important; margin-bottom: 50px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .lai-gal-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; background-color: transparent !important; will-change: opacity; } .lai-gal-slide img, .lai-hero-img-element { width: 100% !important; height: 100% !important; object-fit: cover !important; /* Mantiene la proporción */ object-position: center center !important; /* Centra la imagen */ display: block; } .lai-gal-slide.active { opacity: 1; } .lai-hero-text-layer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 30; width: 100%; max-width: 1400px; pointer-events: none; padding: 0 20px; } .lai-hero-sub-title { font-family: 'IM Fell French Canon', serif; font-weight: 400; font-size: clamp(14px, 2.5vw, 28px); color: #FFF; margin: 0; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; text-shadow: 0 3px 12px rgba(0,0,0,0.7); display: block; width: 100%; } .lai-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.4); width: 60px; height: 60px; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 40; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; padding: 0; } .lai-nav-arrow:hover { background: #C89A4B !important; border-color: #C89A4B !important; color: #000 !important; transform: translateY(-50%) scale(1.1); box-shadow: 0 0 20px rgba(200, 154, 75, 0.6); } .nav-prev { left: 30px; } .nav-next { right: 30px; } /* FIX DE LIMPIEZA GLOBAL: ELIMINAR BOTONES FANTASMA */ .lai-gal-hero button { display: none !important; border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; } .lai-gal-hero .lai-nav-arrow { display: flex !important; position: absolute !important; } .lai-gal-hero .lai-nav-arrow:focus, .lai-gal-hero .lai-nav-arrow:active { outline: none !important; border: 1px solid rgba(255,255,255,0.5) !important; } /* 2. GRID DE FOTOS (MOSAICO BENTO) */ .lai-gallery-section { padding: 40px 20px 60px 20px; max-width: 1400px; margin: 0 auto; overflow: hidden; background-color: #0A2B4A; text-align: center;} .lai-gal-section-title { text-align: center; font-family: "IM Fell French Canon SC", serif; font-size: clamp(24px, 5vw, 42px) !important; color: #E7D086 !important; margin-bottom: 40px; letter-spacing: 2px; position: relative; display: inline-block; width: 100%; text-shadow: 0 2px 10px rgba(0,0,0,0.8); } .lai-mosaic-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; grid-auto-flow: dense; gap: 15px; max-width: 1400px; margin: 0 auto; } .lai-mosaic-item { position: relative; overflow: hidden; cursor: pointer; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; width: 100%; height: 100%; } .lai-mosaic-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; transition: transform 0.5s ease; display: block; } .lai-mosaic-item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); z-index: 2; } .lai-mosaic-item:hover img { transform: scale(1.1); } /* Clases PC */ .lai-wide { grid-column: span 2; } .lai-tall { grid-row: span 2; } .lai-big { grid-column: span 2; grid-row: span 2; } .lai-section-separator { text-align: center; margin: 60px 0; display: flex; align-items: center; justify-content: center; gap: 20px; opacity: 1; } .lai-sep-line { height: 1px; width: 150px; background: linear-gradient(90deg, transparent, #E7D086, transparent) !important; } .lai-sep-icon { color: #E7D086 !important; font-size: 24px; text-shadow: 0 0 10px rgba(231, 208, 134, 0.5); } /* 3. LIGHTBOX */ .lai-lightbox { display: none; position: fixed !important; z-index: 2147483647 !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; background-color: #000 !important; align-items: center; justify-content: center; flex-direction: column; } .lai-lb-content { max-width: 90vw; max-height: 85vh; box-shadow: 0 0 50px rgba(0,0,0,1); object-fit: contain; border-radius: 12px; } .lai-lb-close { position: absolute; top: 30px; right: 30px; color: #fff; font-size: 50px; cursor: pointer; font-weight: bold; z-index: 10002; } .lai-lb-nav { color: #fff; font-size: 60px; cursor: pointer; padding: 0 30px; user-select: none; z-index: 10002; } .lai-lb-caption { color: #ccc; margin-top: 20px; font-family: "IM Fell French Canon SC", serif; letter-spacing: 2px; font-size: 18px; } /* 4. MÓVIL: GALERÍA CON SCROLL HORIZONTAL (TIPO INSTAGRAM) */ .lai-gal-more-container { display: none; } @media (max-width: 768px) { .lai-gal-hero { height: 60vh !important; margin-top: 0 !important; } .lai-nav-arrow { display: flex !important; width: 40px !important; height: 40px !important; font-size: 16px !important; } .nav-prev { left: 10px !important; } .nav-next { right: 10px !important; } .lai-hero-sub-title { letter-spacing: 0.1em; font-size: 18px; } .lai-gallery-section { padding: 40px 0 60px 20px; } .lai-mosaic-grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 15px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 20px; padding-right: 20px; scrollbar-width: none; -ms-overflow-style: none; } .lai-mosaic-grid::-webkit-scrollbar { display: none; } .lai-mosaic-item { flex: 0 0 85% !important; width: 85% !important; height: 280px !important; grid-column: auto !important; grid-row: auto !important; scroll-snap-align: center; display: block !important; margin: 0 !important; border-radius: 12px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; } .lai-mosaic-item img { border-radius: 12px !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } } /* ============================================================ 16. FIX: CABECERA MÓVIL (BOTONES LADO A LADO) ============================================================ */ @media (max-width: 921px) { /* 1. Limpieza total de fondos ocultos de Astra */ .ast-above-header-bar, .ast-builder-menu-2, .ast-builder-layout-element, .ast-mobile-header-content, .site-header-above-section-left, .site-header-above-section-right, .ast-main-header-bar-alignment { background: transparent !important; border: none !important; box-shadow: none !important; } /* 2. EL TRUCO MAGISTRAL: Juntar la columna izquierda y derecha */ .ast-mobile-header-wrap .ast-builder-grid-row-has-sides { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; /* Empuja TODO a la derecha */ align-items: center !important; width: 100% !important; } /* 3. Evitamos que las columnas ocupen todo el ancho y se separen */ .ast-mobile-header-wrap .site-header-above-section-left, .ast-mobile-header-wrap .site-header-above-section-right { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* 4. Espacio exacto entre el Idioma (izq) y el Menú (der) */ .ast-mobile-header-wrap .site-header-above-section-left { margin-right: 12px !important; } /* 5. Círculo del Menú Hamburguesa impecable */ .menu-toggle.main-header-menu-toggle { background: #ffffff !important; width: 45px !important; height: 45px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; padding: 0 !important; border: none !important; } .ast-mobile-svg { fill: #000000 !important; width: 22px !important; } /* ======================================================= NUEVO: FIX DEL MENÚ DESPLEGABLE (POPUP AZUL) ======================================================= */ /* Pintamos TODO el contenedor del popup de azul oscuro */ .ast-mobile-popup-inner, .ast-mobile-popup-wrapper, .ast-mobile-popup-content, .ast-mobile-popup-header { background-color: var(--lai-blue-dark) !important; /* #0A2B4A */ border: none !important; } /* Aseguramos que la lista y enlaces no tengan fondos extraños */ .ast-builder-menu-mobile .main-navigation, .ast-builder-menu-mobile, .ast-mobile-popup-drawer { background-color: transparent !important; } /* Estilo de la X de cerrar (Dorado para que contraste con el azul) */ .ast-mobile-popup-header .ast-close-svg { fill: var(--lai-gold) !important; } /* ======================================================= CENTRAR TEXTOS DEL MENÚ DESPLEGABLE MÓVIL ======================================================= */ .ast-mobile-popup-content .main-header-menu .menu-item > a { text-align: center !important; justify-content: center !important; /* Vital para centrar en Astra */ display: flex !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ============================================================ 17. FOOTER LUXURY (CENTRADO + JUSTIFICADO) ============================================================ */ .site-footer { display: none !important; } /* ========================================================================= FOOTER DELUXE — editorial elegante (27-jun-2026) ========================================================================= */ .lai-footer-section.lai-footer-deluxe { background: linear-gradient(180deg, #0D3B66 0%, #0a2e50 100%); color: #fff; padding: 32px 0 18px 0; border-top: 2px solid #C89A4B; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%; position: relative; z-index: 50; } .lai-footer-deluxe .lai-footer-inner { width: 92%; max-width: 1200px; margin: 0 auto; } /* --- Encabezado de marca (compacto) --- */ .lai-footer-brand { text-align: center; margin-bottom: 24px; } .lai-footer-tagline { display: block; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #C89A4B; font-weight: 600; } .lai-footer-divider { display: block; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #C89A4B, transparent); margin: 14px auto 0 auto; } /* --- Columnas editoriales --- */ .lai-footer-cols { display: grid; grid-template-columns: 1.5fr 1.3fr 1fr; gap: 24px 50px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.08); align-items: start; } .lai-fcol-title { font-family: 'IM Fell French Canon SC', serif; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: #C89A4B; margin: 0 0 12px 0; font-weight: 600; } /* Enlaces de contacto */ .lai-fcol-link { display: flex; align-items: center; gap: 11px; color: #d8dde3; text-decoration: none; font-size: 14px; padding: 5px 0; transition: color 0.25s ease; line-height: 1.35; } .lai-fcol-link i { color: #C89A4B; width: 16px; text-align: center; font-size: 14px; flex-shrink: 0; } .lai-fcol-link:hover { color: #fff; } .lai-fcol-link:hover i { color: #e0b76a; } /* Navegación — 2 columnas para no estirar el footer a lo alto */ .lai-fcol-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; } .lai-fcol-nav a { color: #c2c9d2; text-decoration: none; font-size: 14px; padding: 5px 0; transition: color 0.25s, padding-left 0.25s; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; } .lai-fcol-nav a:hover { color: #C89A4B; padding-left: 6px; } /* Recepción / horarios */ .lai-fcol-time { display: block; color: #d8dde3; font-size: 14px; padding: 4px 0; letter-spacing: 0.5px; } .lai-fcol-time::before { content: '\f017'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #C89A4B; margin-right: 10px; font-size: 12px; } /* CTA */ .lai-footer-cta { margin-top: 16px; background: transparent; border: 1px solid #C89A4B; color: #C89A4B; padding: 11px 26px; border-radius: 50px; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; } .lai-footer-cta:hover { background: #C89A4B; color: #0D3B66; box-shadow: 0 6px 20px rgba(200,154,75,0.3); } /* Redes */ .lai-footer-socials { display: flex; gap: 12px; margin-top: 16px; } .lai-footer-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; color: #d8dde3; font-size: 15px; transition: all 0.3s ease; text-decoration: none; } .lai-footer-socials a:hover { border-color: #C89A4B; color: #C89A4B; transform: translateY(-3px); } /* Copyright */ .lai-footer-deluxe .lai-footer-bottom { text-align: center; padding-top: 16px; color: rgba(255,255,255,0.45); font-size: 12px; letter-spacing: 0.5px; } /* --- Responsive footer deluxe --- */ /* Tablet/laptop: 3 columnas pero más juntas, aprovechando el ancho */ @media (max-width: 860px) { .lai-footer-cols { grid-template-columns: 1.4fr 1.2fr 1fr; gap: 20px 30px; } .lai-footer-deluxe { padding-top: 28px; } } /* Móvil ancho/tablet vertical: 2 columnas (contacto+navegación arriba, recepción centrada) */ @media (max-width: 620px) { .lai-footer-cols { grid-template-columns: 1fr 1fr; gap: 22px 24px; text-align: left; } /* La 3ª columna (Recepción) ocupa todo el ancho y se centra */ .lai-fcol:nth-child(3) { grid-column: 1 / -1; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 18px; } .lai-fcol:nth-child(3) .lai-fcol-time { display: inline-block; margin: 0 12px; } .lai-footer-socials { justify-content: center; } .lai-footer-cta { margin-top: 14px; } } /* Móvil estrecho: todo más compacto sin perder legibilidad */ @media (max-width: 420px) { .lai-footer-deluxe { padding: 24px 0 16px 0; } .lai-footer-brand { margin-bottom: 18px; } .lai-footer-tagline { font-size: 10px; letter-spacing: 2px; } .lai-footer-divider { margin-top: 12px; } .lai-footer-cols { gap: 18px 18px; } .lai-fcol-title { margin-bottom: 9px; font-size: 12px; } .lai-fcol-link { font-size: 13px; padding: 4px 0; gap: 8px; } .lai-fcol-nav a { font-size: 13px; padding: 4px 0; } .lai-fcol-time { font-size: 13px; } .lai-footer-deluxe .lai-footer-bottom { padding-top: 14px; font-size: 11px; } } /* MODAL */ .lai-modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:99999; backdrop-filter:blur(3px); display:flex; justify-content:center; align-items:center; visibility:hidden; opacity:0; transition:0.3s; } .lai-modal-overlay.show { visibility:visible; opacity:1; } .lai-modal-bubble { background:#fff; padding:20px; border-radius:10px; width:90%; max-width:320px; position:relative; border-top:4px solid #C89A4B; box-shadow:0 10px 40px rgba(0,0,0,0.5); } .lai-modal-close { position:absolute; top:5px; right:10px; font-size:20px; cursor:pointer; color:#999; } .lai-luxury-form input, .lai-luxury-form textarea { width:100%; padding:8px; border:1px solid #ddd; border-radius:4px; font-size:12px; box-sizing:border-box; } /* (responsive del footer deluxe ya incluido arriba en su propio bloque) */ /* ============================================================ 18. BANNER DE COOKIES (CONSENTIMIENTO) ============================================================ */ .lai-cookie-banner { position: fixed; bottom: -200px; left: 0; width: 100%; background-color: rgba(10, 43, 74, 0.95); border-top: 3px solid #C89A4B; color: #fff; padding: 20px 40px; z-index: 9999999; box-shadow: 0 -10px 30px rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; transition: bottom 0.8s cubic-bezier(0.19, 1, 0.22, 1); backdrop-filter: blur(5px); } .lai-cookie-banner.lai-show-cookies { bottom: 0; } .lai-cookie-content { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; gap: 30px; } .lai-cookie-text { font-family: 'Helvetica Neue', sans-serif; font-size: 14px; line-height: 1.4; color: #e0e0e0; } .lai-cookie-text a { color: #C89A4B; text-decoration: underline; } .lai-cookie-actions { display: flex; gap: 15px; flex-shrink: 0; } .lai-btn-cookie { padding: 10px 25px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.3s; font-family: 'Helvetica Neue', sans-serif; letter-spacing: 1px; } .lai-btn-accept { background: #C89A4B; color: #000; border: 2px solid #C89A4B; } .lai-btn-accept:hover { background: #fff; border-color: #fff; } @media (max-width: 768px) { .lai-cookie-banner { padding: 20px; } .lai-cookie-content { flex-direction: column; text-align: center; gap: 15px; } .lai-cookie-text { font-size: 13px; } .lai-cookie-actions { width: 100%; justify-content: center; } .lai-btn-cookie { width: 100%; max-width: 200px; text-align: center; } } /* ============================================================ 19.FIX FINAL: MOSTRAR FLECHAS EN MÓVIL (GALERÍA) ============================================================ */ @media (max-width: 768px) { .lai-gal-hero button, .lai-gal-hero .nav-prev, .lai-gal-hero .nav-next, .lai-gal-hero .lai-nav-arrow { display: flex !important; opacity: 1 !important; pointer-events: auto !important; border: 1px solid rgba(255,255,255,0.4) !important; } } /* ============================================================ 20. FIX: IDIOMA (CÍRCULO BLANCO ESCRITORIO Y MÓVIL) ============================================================ */ /* IMPORTANTE: Esto ya no está dentro de @media, así que aplica a ESCRITORIO también */ /* 1. Limpieza de listas de WordPress/Polylang */ .lang-item, ul#ast-hf-menu-2, ul#ast-hf-menu-2-mobile { background: transparent !important; border: none !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } /* 2. Círculo del idioma (Gemelo del Menú Hamburguesa) */ .site-header .lang-item > a { background: #ffffff !important; color: #000000 !important; width: 45px !important; height: 45px !important; border-radius: 50% !important; border: none !important; box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; font-size: 16px !important; font-weight: bold !important; text-transform: none !important; /* Muestra 'Es' y 'En' */ display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; line-height: 1 !important; padding: 0 !important; transition: all 0.3s ease !important; } /* 3. Efecto Hover (Pasar el ratón en escritorio) */ .site-header .lang-item > a:hover { background: var(--lai-gold) !important; color: #000000 !important; transform: scale(1.05) !important; /* Un pequeñísimo salto al pasar el mouse */ } /* ============================================================ RESALTADO VIP: DESAYUNO INCLUIDO ============================================================ */ .lai-amenity-highlight { background: #fffdf5 !important; /* Fondo crema suave */ border: 1px solid #C89A4B !important; /* Borde dorado */ box-shadow: 0 4px 10px rgba(200, 154, 75, 0.15) !important; } .lai-amenity-highlight i { color: #C89A4B !important; /* Ícono de taza en dorado */ } .lai-amenity-highlight span { color: #0D3B66 !important; font-weight: 800 !important; /* Letra más gruesa para que llame la atención */ } /* ========================================================================= CONSOLIDACIÓN CSS — Fase A (27-jun-2026) CSS migrado desde bloques