/* ============================================================ BFT SHARED SITE HEADER 2026-09-17 ============================================================ */ /* * ------------------------------------------------------------ * LEMA DEL LOGO * ------------------------------------------------------------ * * render_site_logo() ya entrega el texto correcto por idioma. * Aquí únicamente garantizamos que sea visible. */ #main-header .bft-logo-sub{ display:block !important; margin-top:2px !important; color:#626262 !important; -webkit-text-fill-color:#626262 !important; font-size:.48rem !important; font-weight:700 !important; line-height:1 !important; letter-spacing:.045em !important; text-transform:uppercase !important; white-space:nowrap !important; text-shadow:none !important; } /* * ------------------------------------------------------------ * BANDERAS * * Fallback independiente para que Contact / Legal / Privacy / * Cookies no dependan de frontend-phase2b.css. * ------------------------------------------------------------ */ #main-header .lang-flag-circle{ display:inline-block; width:20px; height:20px; min-width:20px; flex:0 0 20px; border-radius:50%; overflow:hidden; background-position:center; background-repeat:no-repeat; background-size:cover; box-shadow: 0 0 0 1px rgba(0,0,0,.10); } /* Spain */ #main-header .lang-flag-es{ background: linear-gradient( 180deg, #aa151b 0%, #aa151b 25%, #f1bf00 25%, #f1bf00 75%, #aa151b 75%, #aa151b 100% ); } /* Germany */ #main-header .lang-flag-de{ background: linear-gradient( 180deg, #000 0%, #000 33.33%, #dd0000 33.33%, #dd0000 66.66%, #ffce00 66.66%, #ffce00 100% ); } /* Italy */ #main-header .lang-flag-it{ background: linear-gradient( 90deg, #009246 0%, #009246 33.33%, #fff 33.33%, #fff 66.66%, #ce2b37 66.66%, #ce2b37 100% ); } /* United Kingdom */ #main-header .lang-flag-en{ background: linear-gradient( 33deg, transparent 43%, #fff 43%, #fff 57%, transparent 57% ), linear-gradient( -33deg, transparent 43%, #fff 43%, #fff 57%, transparent 57% ), linear-gradient( 90deg, transparent 40%, #fff 40%, #fff 60%, transparent 60% ), linear-gradient( 0deg, transparent 40%, #fff 40%, #fff 60%, transparent 60% ), linear-gradient( 90deg, transparent 46%, #c8102e 46%, #c8102e 54%, transparent 54% ), linear-gradient( 0deg, transparent 46%, #c8102e 46%, #c8102e 54%, transparent 54% ), #012169; } /* * ------------------------------------------------------------ * TABLET / MOBILE * ------------------------------------------------------------ */ @media (max-width:1099px){ #main-header .bft-logo-sub{ display:block !important; margin-top:2px !important; font-size: clamp( .34rem, .80vw, .43rem ) !important; line-height:1 !important; letter-spacing:.035em !important; white-space:nowrap !important; } } /* * En home-responsive-final.css había una regla antigua que * ocultaba el subtítulo <=620px. * Esta hoja se carga DESPUÉS y lo mantiene visible. */ @media (max-width:620px){ #main-header .bft-logo-sub{ display:block !important; margin-top:2px !important; font-size: clamp( .29rem, 1.18vw, .36rem ) !important; letter-spacing:.025em !important; line-height:1 !important; } #main-header .bft-logo-main{ font-size: clamp( .76rem, 3.7vw, .94rem ) !important; line-height:.92 !important; } } @media (max-width:430px){ #main-header .bft-logo-link, #main-header .nav-logo.bft-logo-link{ gap:4px !important; } #main-header .bft-logo-link::before, #main-header .nav-logo.bft-logo-link::before{ width:29px !important; height:29px !important; flex: 0 0 29px !important; } #main-header .bft-logo-main{ font-size: clamp( .70rem, 3.45vw, .84rem ) !important; } #main-header .bft-logo-sub{ font-size: clamp( .27rem, 1.05vw, .32rem ) !important; letter-spacing:.018em !important; } } @media (max-width:360px){ #main-header .bft-logo-main{ font-size:.68rem !important; } #main-header .bft-logo-sub{ font-size:.255rem !important; } } /* BFTSH_ISOLATED_HEADER_START */ /* * ============================================================ * BFT SHARED HEADER - ISOLATED MOBILE COMPONENT * * Estas clases bftsh-* pertenecen solamente a site-header.php. * Los tamaños usan px para no depender de la tipografía global * de Home, Contact, Legal, etc. * ============================================================ */ /* ------------------------------------------------------------ PHONE ------------------------------------------------------------ */ @media (max-width:620px){ html body #main-header.bft-shared-header .bftsh-nav{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; height:62px !important; min-height:62px !important; max-height:62px !important; margin:0 auto !important; padding:0 8px !important; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:5px !important; } /* -------------------------------- LOGO LINK -------------------------------- */ html body #main-header.bft-shared-header .bftsh-logo-link{ order:1 !important; box-sizing:border-box !important; flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:0 auto 0 0 !important; padding:0 !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:5px !important; overflow:visible !important; text-decoration:none !important; } /* León */ html body #main-header.bft-shared-header .bftsh-logo-link::before{ content:"" !important; display:block !important; box-sizing:border-box !important; width:32px !important; height:32px !important; min-width:32px !important; max-width:32px !important; flex:0 0 32px !important; margin:0 !important; background: url('/assets/img/logo/logo.svg') center center / contain no-repeat !important; } html body #main-header.bft-shared-header .bftsh-logo{ box-sizing:border-box !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; line-height:1 !important; } /* * BUDAPEST FREE TOUR * * 20px FIJOS. * Nada de rem, vw o clamp. */ html body #main-header.bft-shared-header .bftsh-logo-main, html body #main-header.bft-shared-header .bftsh-logo-word, html body #main-header.bft-shared-header .bftsh-logo-accent{ font-family:var(--bft-brand-font) !important; font-size:20px !important; font-weight:400 !important; line-height:.92 !important; letter-spacing:0 !important; white-space:nowrap !important; color:#111 !important; -webkit-text-fill-color:#111 !important; text-shadow:none !important; overflow:visible !important; text-overflow:clip !important; } /* * LEMA * * 8px FIJOS. */ html body #main-header.bft-shared-header .bftsh-logo-sub{ display:block !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:3px 0 0 !important; padding:0 !important; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size:8px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:.35px !important; text-transform:uppercase !important; white-space:nowrap !important; color:#626262 !important; -webkit-text-fill-color:#626262 !important; text-shadow:none !important; overflow:visible !important; text-overflow:clip !important; } /* -------------------------------- CONTROLES DERECHOS -------------------------------- */ html body #main-header.bft-shared-header .bftsh-right{ order:2 !important; flex:0 0 auto !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-end !important; gap:4px !important; } html body #main-header.bft-shared-header .bftsh-lang-selector{ display:none !important; } html body #main-header.bft-shared-header .bftsh-cta{ box-sizing:border-box !important; width:auto !important; max-width:none !important; min-height:36px !important; margin:0 !important; padding:7px 8px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:11px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; background:#111 !important; color:#fff !important; border:1px solid #111 !important; border-radius:3px !important; box-shadow:none !important; } html body #main-header.bft-shared-header .bftsh-mobile-lang-menu{ position:relative !important; display:block !important; flex:0 0 auto !important; margin:0 !important; padding:0 !important; } html body #main-header.bft-shared-header .bftsh-mobile-lang-toggle{ box-sizing:border-box !important; width:42px !important; min-width:42px !important; max-width:42px !important; height:36px !important; min-height:36px !important; margin:0 !important; padding:0 5px !important; font-size:11px !important; font-weight:700 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#fff !important; color:#111 !important; border:1px solid #c9c5bf !important; } html body #main-header.bft-shared-header .bftsh-toggle{ order:3 !important; box-sizing:border-box !important; flex:0 0 36px !important; width:36px !important; min-width:36px !important; max-width:36px !important; height:36px !important; min-height:36px !important; margin:0 !important; padding:6px !important; display:flex !important; align-items:center !important; justify-content:center !important; } } /* ------------------------------------------------------------ SMALL PHONE ------------------------------------------------------------ */ @media (max-width:430px){ html body #main-header.bft-shared-header .bftsh-nav{ padding-left:6px !important; padding-right:6px !important; gap:4px !important; } html body #main-header.bft-shared-header .bftsh-logo-link::before{ width:29px !important; height:29px !important; min-width:29px !important; max-width:29px !important; flex-basis:29px !important; } html body #main-header.bft-shared-header .bftsh-logo-main, html body #main-header.bft-shared-header .bftsh-logo-word, html body #main-header.bft-shared-header .bftsh-logo-accent{ font-size:17px !important; } html body #main-header.bft-shared-header .bftsh-logo-sub{ font-size:7px !important; letter-spacing:.25px !important; } html body #main-header.bft-shared-header .bftsh-cta{ padding-left:6px !important; padding-right:6px !important; font-size:10.5px !important; } html body #main-header.bft-shared-header .bftsh-mobile-lang-toggle{ width:40px !important; min-width:40px !important; max-width:40px !important; } html body #main-header.bft-shared-header .bftsh-toggle{ width:34px !important; min-width:34px !important; max-width:34px !important; flex-basis:34px !important; } } /* ------------------------------------------------------------ VERY SMALL PHONE ------------------------------------------------------------ */ @media (max-width:360px){ html body #main-header.bft-shared-header .bftsh-logo-main, html body #main-header.bft-shared-header .bftsh-logo-word, html body #main-header.bft-shared-header .bftsh-logo-accent{ font-size:14px !important; } html body #main-header.bft-shared-header .bftsh-logo-sub{ font-size:6px !important; letter-spacing:.15px !important; } } /* BFTSH_ISOLATED_HEADER_END */ /* ============================================================ BFT CURRENT LANGUAGE FLAG BUTTON Solo cambia el contenido del botón superior. El dropdown permanece intacto. ============================================================ */ @media (max-width:1099px){ html body #main-header.bft-shared-header .bftsh-mobile-lang-current{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:22px !important; height:22px !important; margin:0 !important; padding:0 !important; font-size:0 !important; line-height:0 !important; } html body #main-header.bft-shared-header .bftsh-current-lang-flag{ --flag-size:20px !important; display:inline-block !important; width:20px !important; height:20px !important; min-width:20px !important; min-height:20px !important; flex:0 0 20px !important; margin:0 !important; border-radius:50% !important; overflow:hidden !important; background-position:center !important; background-repeat:no-repeat !important; background-size:cover !important; box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.14) !important; } } /* ============================================================ BFT LANGUAGE BUTTON - MORE SPACE FLAG / CHEVRON ============================================================ */ @media (max-width:1099px){ html body #main-header.bft-shared-header .bftsh-mobile-lang-toggle{ gap:8px !important; } html body #main-header.bft-shared-header .bftsh-mobile-lang-chevron{ margin-left:2px !important; flex:0 0 auto !important; } } /* ============================================================ BFT LANGUAGE BUTTON - FINAL SPACING ============================================================ */ @media (max-width:1099px){ html body #main-header.bft-shared-header .bftsh-mobile-lang-toggle{ gap:8px !important; width:46px !important; min-width:46px !important; max-width:46px !important; } html body #main-header.bft-shared-header .bftsh-mobile-lang-chevron{ margin-left:0 !important; } } /* En teléfonos estrechos antes medía 40px. Le damos 2px adicionales a cada lado = 44px. */ @media (max-width:430px){ html body #main-header.bft-shared-header .bftsh-mobile-lang-toggle{ width:44px !important; min-width:44px !important; max-width:44px !important; } } /* BFTSH_MOBILE_DRAWER_REFINEMENT_START */ /* ============================================================ MOBILE DRAWER REFINEMENT - drawer un poco más angosto - fondo exterior tipo cristal - CTA negro dentro del menú ============================================================ */ @media (max-width:1099px){ body.bft-mobile-menu-open::before{ content:""; position:fixed; inset:0; z-index:9990; background:rgba(255,255,255,.10); backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%); } html body #main-header.bft-shared-header{ z-index:9996 !important; } html body #main-header.bft-shared-header .bftsh-links{ position:fixed !important; top:0 !important; right:0 !important; left:auto !important; bottom:0 !important; width:min(78vw, 520px) !important; max-width:520px !important; min-width:280px !important; height:100vh !important; padding:86px 30px 32px !important; overflow-y:auto !important; background:rgba(248,247,244,.96) !important; box-shadow:-12px 0 32px rgba(0,0,0,.16) !important; border-left:1px solid rgba(0,0,0,.06) !important; z-index:9995 !important; } html body #main-header.bft-shared-header .bftsh-links a{ position:relative; z-index:2; } html body #main-header.bft-shared-header .bftsh-mobile-menu-cta{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:52px !important; margin:24px 0 0 !important; padding:0 18px !important; background:#000 !important; color:#fff !important; border:1px solid #000 !important; border-radius:999px !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; text-decoration:none !important; box-shadow:none !important; } } @media (max-width:430px){ html body #main-header.bft-shared-header .bftsh-links{ width:min(80vw, 420px) !important; min-width:260px !important; padding:82px 24px 28px !important; } html body #main-header.bft-shared-header .bftsh-mobile-menu-cta{ min-height:50px !important; font-size:15px !important; } } /* BFTSH_MOBILE_DRAWER_REFINEMENT_END */ /* ============================================================ BFT MOBILE BACKDROP - HIDE ON DESKTOP ============================================================ */ /* El backdrop pertenece exclusivamente al menú móvil */ html body #main-header.bft-shared-header .bft-menu-backdrop{ display:none !important; } /* En tablet/móvil vuelve a estar disponible */ @media (max-width:1099px){ html body #main-header.bft-shared-header .bft-menu-backdrop{ display:block !important; } } /* BFT_DESKTOP_THIN_HEADER_START */ @media (min-width:1100px){ html body #main-header.bft-shared-header{ box-sizing:border-box !important; height:60px !important; min-height:60px !important; max-height:60px !important; padding-top:0 !important; padding-bottom:0 !important; } html body #main-header.bft-shared-header .nav-container, html body #main-header.bft-shared-header .bftsh-nav{ box-sizing:border-box !important; height:60px !important; min-height:60px !important; max-height:60px !important; padding-top:0 !important; padding-bottom:0 !important; } html body #main-header.bft-shared-header .bftsh-logo-link::before{ width:34px !important; height:34px !important; min-width:34px !important; flex-basis:34px !important; } html body #main-header.bft-shared-header .bftsh-logo-main{ font-size:18px !important; } html body #main-header.bft-shared-header .bftsh-logo-sub{ font-size:7px !important; margin-top:2px !important; } html body #main-header.bft-shared-header .bftsh-cta{ height:34px !important; min-height:34px !important; padding-top:0 !important; padding-bottom:0 !important; } } /* BFT_DESKTOP_THIN_HEADER_END */ /* BFT_MOBILE_CTA_DESKTOP_GUARD_START */ @media (min-width:1100px){ html body #main-header.bft-shared-header .bftsh-mobile-menu-cta{ display:none !important; } } /* BFT_MOBILE_CTA_DESKTOP_GUARD_END */ /* BFT_MOBILE_MENU_BRAND_START */ /* Nunca mostrar el logo duplicado en escritorio */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand{ display:none !important; } @media (max-width:1099px){ /* * Reducimos el padding superior antiguo del drawer. * Ahora el propio logo ocupa la cabecera visual. */ html body #main-header.bft-shared-header .bftsh-links{ padding-top:24px !important; } /* Contenedor del logo */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand{ display:block !important; width:100% !important; margin: 0 0 24px 0 !important; padding: 0 58px 20px 0 !important; border-bottom: 1px solid rgba(0,0,0,.10) !important; } /* * El logo es un link, pero NO debe heredar * el estilo gigante de los links del drawer. */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-link{ display:inline-flex !important; width:auto !important; max-width:100% !important; min-height:0 !important; margin:0 !important; padding:0 !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:9px !important; background:transparent !important; border:0 !important; border-radius:0 !important; text-align:left !important; text-decoration:none !important; box-shadow:none !important; } /* Quitar cualquier línea decorativa del menú */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-link::after{ display:none !important; content:none !important; } /* León */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-link::before{ display:block !important; width:42px !important; height:42px !important; min-width:42px !important; max-width:42px !important; flex:0 0 42px !important; margin:0 !important; } /* Caja del texto */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; width:auto !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:visible !important; } /* Budapest Free Tour */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-main{ display:block !important; font-family:'BFTBrand', sans-serif !important; font-size:20px !important; font-weight:400 !important; line-height:.92 !important; color:#111 !important; -webkit-text-fill-color:#111 !important; white-space:nowrap !important; margin:0 !important; padding:0 !important; } /* Guías húngaros locales */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-sub{ display:block !important; margin:3px 0 0 !important; padding:0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size:7px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:.35px !important; text-transform:uppercase !important; color:#626262 !important; -webkit-text-fill-color:#626262 !important; white-space:nowrap !important; } } @media (max-width:430px){ html body #main-header.bft-shared-header .bftsh-links{ padding-top:20px !important; } html body #main-header.bft-shared-header .bftsh-mobile-menu-brand{ margin-bottom:20px !important; padding-right:52px !important; padding-bottom:17px !important; } html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-link::before{ width:38px !important; height:38px !important; min-width:38px !important; max-width:38px !important; flex-basis:38px !important; } html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-main{ font-size:18px !important; } } /* BFT_MOBILE_MENU_BRAND_END */ /* BFT_MOBILE_MENU_VISUAL_POLISH_START */ @media (max-width:1099px){ /* ======================================================== DRAWER ======================================================== */ html body #main-header.bft-shared-header .bftsh-links{ padding: 18px 20px 28px !important; background: rgba(249,248,245,.985) !important; border-left: 1px solid rgba(0,0,0,.055) !important; box-shadow: -14px 0 34px rgba(0,0,0,.14) !important; } /* ======================================================== CABECERA INTERNA / LOGO ======================================================== */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand{ margin: 0 0 8px !important; padding: 2px 54px 16px 2px !important; border-bottom: 1px solid rgba(0,0,0,.075) !important; } html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-link{ gap:10px !important; } /* León un poco más grande */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-link::before{ width:46px !important; height:46px !important; min-width:46px !important; max-width:46px !important; flex-basis:46px !important; } /* Budapest Free Tour */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-main{ font-size:22px !important; line-height:.90 !important; } /* Guías húngaros locales */ html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-sub{ margin-top:3px !important; font-size:7.5px !important; letter-spacing:.38px !important; } /* ======================================================== ENLACES ======================================================== */ html body #main-header.bft-shared-header .bftsh-links > li:not(.bftsh-mobile-menu-brand){ width:100% !important; margin:0 !important; padding:0 !important; } html body #main-header.bft-shared-header .bftsh-links > li:not(.bftsh-mobile-menu-brand) > a{ box-sizing:border-box !important; display:flex !important; align-items:center !important; width:100% !important; min-height:0 !important; margin:0 !important; padding: 13px 2px !important; color:#181818 !important; background:transparent !important; border:0 !important; border-bottom: 1px solid rgba(0,0,0,.075) !important; border-radius:0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size:18.5px !important; font-weight:650 !important; line-height:1.15 !important; letter-spacing:-.015em !important; text-align:left !important; box-shadow:none !important; } html body #main-header.bft-shared-header .bftsh-links > li:not(.bftsh-mobile-menu-brand) > a:hover, html body #main-header.bft-shared-header .bftsh-links > li:not(.bftsh-mobile-menu-brand) > a:focus{ color:#000 !important; background:rgba(0,0,0,.025) !important; } /* ======================================================== BOTÓN RESERVAR ======================================================== */ html body #main-header.bft-shared-header .bftsh-mobile-menu-cta{ box-sizing:border-box !important; width:100% !important; min-height:46px !important; height:46px !important; margin: 20px 0 0 !important; padding: 0 18px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#090909 !important; color:#fff !important; border: 1px solid #090909 !important; border-radius:12px !important; font-size:14.5px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:0 !important; text-align:center !important; box-shadow:none !important; } html body #main-header.bft-shared-header .bftsh-mobile-menu-cta:hover{ background:#242424 !important; border-color:#242424 !important; color:#fff !important; } /* ======================================================== BOTÓN CERRAR ======================================================== */ body.bft-mobile-menu-open #main-header.bft-shared-header .bftsh-toggle, html.bft-menu-open #main-header.bft-shared-header .bftsh-toggle{ position:fixed !important; top:14px !important; right:14px !important; width:38px !important; height:38px !important; min-width:38px !important; max-width:38px !important; padding:8px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:#f3f2ef !important; border: 1px solid rgba(0,0,0,.14) !important; border-radius:8px !important; box-shadow: 0 1px 4px rgba(0,0,0,.07) !important; } /* * Quitar el foco rojo global al pulsar con ratón. */ body.bft-mobile-menu-open #main-header.bft-shared-header .bftsh-toggle:focus, html.bft-menu-open #main-header.bft-shared-header .bftsh-toggle:focus{ outline:none !important; } /* * Pero conservar foco accesible cuando se navega * realmente con teclado. */ body.bft-mobile-menu-open #main-header.bft-shared-header .bftsh-toggle:focus-visible, html.bft-menu-open #main-header.bft-shared-header .bftsh-toggle:focus-visible{ outline: 2px solid #111 !important; outline-offset:2px !important; } } /* ============================================================ TELÉFONOS PEQUEÑOS ============================================================ */ @media (max-width:430px){ html body #main-header.bft-shared-header .bftsh-links{ padding: 16px 18px 24px !important; } html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-link::before{ width:42px !important; height:42px !important; min-width:42px !important; max-width:42px !important; flex-basis:42px !important; } html body #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-main{ font-size:20px !important; } html body #main-header.bft-shared-header .bftsh-links > li:not(.bftsh-mobile-menu-brand) > a{ padding: 12px 2px !important; font-size:18px !important; } html body #main-header.bft-shared-header .bftsh-mobile-menu-cta{ height:44px !important; min-height:44px !important; margin-top:18px !important; font-size:14px !important; } } /* BFT_MOBILE_MENU_VISUAL_POLISH_END */ /* BFT_MOBILE_GLASS_HEADER_START */ /* ============================================================ MOBILE / TABLET HOME HEADER TOP: - vidrio transparente - texto blanco - superpuesto al hero SCROLL: - recupera el header crema actual ============================================================ */ @media (max-width:1099px){ /* -------------------------------------------------------- TRANSICIÓN BASE -------------------------------------------------------- */ html body #main-header.bft-shared-header{ transition: background-color .30s ease, border-color .30s ease, box-shadow .30s ease !important; } /* * ======================================================== * HOME EN LA PARTE SUPERIOR * Home es el único que comienza SIN .header-solid. * ======================================================== */ html body #main-header.bft-shared-header:not(.header-solid){ position:fixed !important; top:0 !important; right:0 !important; left:0 !important; width:100% !important; margin:0 !important; background: rgba(8,12,16,.20) !important; border-top:0 !important; border-bottom: 1px solid rgba(255,255,255,.16) !important; box-shadow: 0 8px 28px rgba(0,0,0,.08) !important; backdrop-filter: blur(18px) saturate(145%) !important; -webkit-backdrop-filter: blur(18px) saturate(145%) !important; z-index:9996 !important; } /* -------------------------------------------------------- LOGO BLANCO -------------------------------------------------------- */ html body #main-header.bft-shared-header:not(.header-solid) .bftsh-logo-main, html body #main-header.bft-shared-header:not(.header-solid) .bftsh-logo-word, html body #main-header.bft-shared-header:not(.header-solid) .bftsh-logo-accent{ color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.32) !important; } html body #main-header.bft-shared-header:not(.header-solid) .bftsh-logo-sub{ color: rgba(255,255,255,.86) !important; -webkit-text-fill-color: rgba(255,255,255,.86) !important; text-shadow: 0 1px 6px rgba(0,0,0,.35) !important; } /* León negro -> blanco */ html body #main-header.bft-shared-header:not(.header-solid) .bftsh-logo-link::before{ filter: brightness(0) invert(1) !important; } /* -------------------------------------------------------- HAMBURGUESA BLANCA -------------------------------------------------------- */ html body #main-header.bft-shared-header:not(.header-solid) .bftsh-toggle{ color:#fff !important; background: transparent !important; } html body #main-header.bft-shared-header:not(.header-solid) .bftsh-toggle span{ background:#fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.25) !important; } /* -------------------------------------------------------- SELECTOR DE IDIOMA - CRISTAL -------------------------------------------------------- */ html body #main-header.bft-shared-header:not(.header-solid) .bftsh-mobile-lang-toggle{ background: rgba(255,255,255,.12) !important; color:#fff !important; border: 1px solid rgba(255,255,255,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } html body #main-header.bft-shared-header:not(.header-solid) .bftsh-mobile-lang-chevron{ border-right-color:#fff !important; border-bottom-color:#fff !important; } /* -------------------------------------------------------- RESERVAR Mantener oscuro pero ligeramente transparente para combinar con el glass. -------------------------------------------------------- */ html body #main-header.bft-shared-header:not(.header-solid) .bftsh-cta{ background: rgba(5,5,5,.74) !important; color:#fff !important; border: 1px solid rgba(255,255,255,.30) !important; box-shadow: 0 4px 15px rgba(0,0,0,.14) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* * ======================================================== * DESPUÉS DEL SCROLL * Exactamente estilo claro actual. * ======================================================== */ html body #main-header.bft-shared-header.header-solid{ position:fixed !important; top:0 !important; right:0 !important; left:0 !important; width:100% !important; background: #f7f5f1 !important; border-top:0 !important; border-bottom: 1px solid rgba(0,0,0,.10) !important; box-shadow:none !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* Logo otra vez negro */ html body #main-header.bft-shared-header.header-solid .bftsh-logo-main, html body #main-header.bft-shared-header.header-solid .bftsh-logo-word, html body #main-header.bft-shared-header.header-solid .bftsh-logo-accent{ color:#111 !important; -webkit-text-fill-color:#111 !important; text-shadow:none !important; } html body #main-header.bft-shared-header.header-solid .bftsh-logo-sub{ color:#626262 !important; -webkit-text-fill-color:#626262 !important; text-shadow:none !important; } html body #main-header.bft-shared-header.header-solid .bftsh-logo-link::before{ filter:none !important; } /* Hamburger negro */ html body #main-header.bft-shared-header.header-solid .bftsh-toggle{ color:#111 !important; background: transparent !important; } html body #main-header.bft-shared-header.header-solid .bftsh-toggle span{ background:#111 !important; box-shadow:none !important; } /* Selector vuelve al blanco actual */ html body #main-header.bft-shared-header.header-solid .bftsh-mobile-lang-toggle{ background:#fff !important; color:#111 !important; border: 1px solid #c9c5bf !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html body #main-header.bft-shared-header.header-solid .bftsh-mobile-lang-chevron{ border-right-color:#111 !important; border-bottom-color:#111 !important; } /* Reservar vuelve exactamente a negro */ html body #main-header.bft-shared-header.header-solid .bftsh-cta{ background:#111 !important; color:#fff !important; border: 1px solid #111 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } } /* BFT_MOBILE_GLASS_HEADER_END */ /* BFT_MOBILE_GLASS_LOGO_FIX_START */ @media (max-width:1099px){ /* * Mantener el SVG original del león. * No invertir toda la imagen porque convierte el * círculo completo en blanco. */ html body #main-header.bft-shared-header:not(.header-solid) .bftsh-logo-link::before{ filter:none !important; opacity:1 !important; } html body #main-header.bft-shared-header.header-solid .bftsh-logo-link::before{ filter:none !important; opacity:1 !important; } } /* BFT_MOBILE_GLASS_LOGO_FIX_END */ /* BFT_MOBILE_GLASS_HAMBURGER_FIX_START */ @media (max-width:1099px){ /* Arriba del hero: hamburguesa blanca */ html body #main-header.bft-shared-header:not(.header-solid) #navToggle.nav-toggle.bftsh-toggle span{ background:#fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.30) !important; opacity:1 !important; } /* Después del scroll: hamburguesa negra */ html body #main-header.bft-shared-header.header-solid #navToggle.nav-toggle.bftsh-toggle span{ background:#111 !important; box-shadow:none !important; opacity:1 !important; } } /* BFT_MOBILE_GLASS_HAMBURGER_FIX_END */ /* BFT_OPEN_MENU_CONTRAST_FIX_START */ @media (max-width:1099px){ /* ======================================================== X DEL MENÚ SIEMPRE NEGRA SOBRE EL DRAWER CLARO ======================================================== */ html.bft-menu-open #main-header.bft-shared-header #navToggle.nav-toggle.bftsh-toggle, body.bft-mobile-menu-open #main-header.bft-shared-header #navToggle.nav-toggle.bftsh-toggle{ background:#f3f2ef !important; color:#111 !important; border: 1px solid rgba(0,0,0,.14) !important; box-shadow: 0 1px 4px rgba(0,0,0,.07) !important; } html.bft-menu-open #main-header.bft-shared-header #navToggle.nav-toggle.bftsh-toggle span, body.bft-mobile-menu-open #main-header.bft-shared-header #navToggle.nav-toggle.bftsh-toggle span{ background:#111 !important; box-shadow:none !important; opacity:1 !important; } /* ======================================================== LOGO INTERNO DEL DRAWER No debe heredar blanco del header glass. ======================================================== */ html.bft-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-main, html.bft-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-word, html.bft-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-accent, body.bft-mobile-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-main, body.bft-mobile-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-word, body.bft-mobile-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-accent{ color:#111 !important; -webkit-text-fill-color:#111 !important; text-shadow:none !important; } html.bft-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-sub, body.bft-mobile-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-sub{ color:#626262 !important; -webkit-text-fill-color:#626262 !important; text-shadow:none !important; } /* León del logo interno normal */ html.bft-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-link::before, body.bft-mobile-menu-open #main-header.bft-shared-header .bftsh-mobile-menu-brand .bftsh-logo-link::before{ filter:none !important; opacity:1 !important; } } /* BFT_OPEN_MENU_CONTRAST_FIX_END */ /* BFT_MOBILE_X_BLACK_FINAL_START */ @media (max-width:1099px){ /* * Cuando el menú está abierto, aria-expanded=true. * Esta regla gana incluso sobre el header glass. */ html body #main-header.bft-shared-header #navToggle.nav-toggle.bftsh-toggle[aria-expanded="true"]{ background:#f3f2ef !important; color:#111 !important; border:1px solid rgba(0,0,0,.20) !important; border-radius:8px !important; box-shadow: 0 1px 5px rgba(0,0,0,.12) !important; } html body #main-header.bft-shared-header #navToggle.nav-toggle.bftsh-toggle[aria-expanded="true"] span{ background:#111 !important; background-color:#111 !important; background-image:none !important; opacity:1 !important; filter:none !important; box-shadow:none !important; } /* Primera línea de la X */ html body #main-header.bft-shared-header #navToggle.nav-toggle.bftsh-toggle[aria-expanded="true"] span:nth-child(1){ background:#111 !important; transform: translateY(7px) rotate(45deg) !important; } /* Línea central desaparece */ html body #main-header.bft-shared-header #navToggle.nav-toggle.bftsh-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 !important; } /* Tercera línea de la X */ html body #main-header.bft-shared-header #navToggle.nav-toggle.bftsh-toggle[aria-expanded="true"] span:nth-child(3){ background:#111 !important; transform: translateY(-7px) rotate(-45deg) !important; } } /* BFT_MOBILE_X_BLACK_FINAL_END */ /* BFT_HEADER_LOGO_TITLE_BIGGER_START */ /* Solo el logo de la barra superior, en todos los tamaños de pantalla. */ html body #main-header.bft-shared-header .bftsh-nav > .bftsh-logo-link .bftsh-logo-main, html body #main-header.bft-shared-header .bftsh-nav > .bftsh-logo-link .bftsh-logo-word, html body #main-header.bft-shared-header .bftsh-nav > .bftsh-logo-link .bftsh-logo-accent{ font-size:27px !important; } /* Lema: mismo tamaño para todas las traducciones. */ html body #main-header.bft-shared-header .bftsh-nav > .bftsh-logo-link .bftsh-logo-sub{ font-size:8px !important; } /* BFT_HEADER_LOGO_TITLE_BIGGER_END */ /* BFT_BODY_TEXT_16PX_START */ /* Texto de lectura: escritorio, tablet y movil. */ html body .section-header p, html body #hero .hero-sub, html body #experience .exp-text p, html body #tours .tour-body > p, html body #tours .tour-meeting, html body #reviews .review-text, html body #faq .faq-answer, html body #faq .faq-answer p, html body #faq .faq-item summary, html body .cta-section p, html body :is( #experience, #tours, #route, #reviews, #faq, #booking, #cta ) :is(p, li, blockquote, dd), html body :is(main, .page-content) :is(p, li, blockquote, dd):not(:where( #main-header *, nav *, button *, [role="button"] *, .btn * )){ font-size:16px !important; line-height:1.6 !important; } /* Descripciones de las tarjetas: mismo tamaño y mas ancho disponible. */ html body #experience .exp-card__copy p{ font-size:16px !important; line-height:1.45 !important; max-width:100% !important; } /* BFT_BODY_TEXT_16PX_END */