.elementor-128 .elementor-element.elementor-element-7eee3ba{--display:flex;--position:absolute;--min-height:96px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;top:0px;--z-index:999;}.elementor-128 .elementor-element.elementor-element-7eee3ba:not(.elementor-motion-effects-element-type-background), .elementor-128 .elementor-element.elementor-element-7eee3ba > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00000000;}body:not(.rtl) .elementor-128 .elementor-element.elementor-element-7eee3ba{left:0px;}body.rtl .elementor-128 .elementor-element.elementor-element-7eee3ba{right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-128 .elementor-element.elementor-element-af286b5{padding:0px 90px 0px 20px;text-align:start;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-128 .elementor-element.elementor-element-4f979b0 .elementor-menu-toggle{margin:0 auto;}.elementor-128 .elementor-element.elementor-element-4f979b0 .elementor-nav-menu--main .elementor-item:hover, .elementor-128 .elementor-element.elementor-element-4f979b0 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-128 .elementor-element.elementor-element-4f979b0 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-128 .elementor-element.elementor-element-4f979b0 .elementor-nav-menu--main .elementor-item:focus{color:#0C99AE;fill:#0C99AE;}.elementor-128 .elementor-element.elementor-element-4f979b0 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#0C99AE;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-128 .elementor-element.elementor-element-043d782 .elementor-button{background-color:var( --e-global-color-secondary );fill:#FFFFFF;color:#FFFFFF;box-shadow:0px 10px 15px -3px rgba(0, 0, 0, 0.1);border-radius:50px 50px 50px 50px;padding:12px 32px 12px 32px;}.elementor-128 .elementor-element.elementor-element-043d782 .elementor-button:hover, .elementor-128 .elementor-element.elementor-element-043d782 .elementor-button:focus{background-color:#FE6F3B;}.elementor-128 .elementor-element.elementor-element-e9e5988{--display:flex;--position:absolute;--min-height:96px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;top:0px;--z-index:999;}.elementor-128 .elementor-element.elementor-element-e9e5988:not(.elementor-motion-effects-element-type-background), .elementor-128 .elementor-element.elementor-element-e9e5988 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00000000;}body:not(.rtl) .elementor-128 .elementor-element.elementor-element-e9e5988{left:0px;}body.rtl .elementor-128 .elementor-element.elementor-element-e9e5988{right:0px;}.elementor-128 .elementor-element.elementor-element-632cd8b{padding:0px 90px 0px 20px;text-align:start;}.elementor-128 .elementor-element.elementor-element-632cd8b.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-128 .elementor-element.elementor-element-6eb6125 .elementor-icon-wrapper{text-align:center;}.elementor-128 .elementor-element.elementor-element-6eb6125.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-128 .elementor-element.elementor-element-6eb6125.elementor-view-framed .elementor-icon, .elementor-128 .elementor-element.elementor-element-6eb6125.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-128 .elementor-element.elementor-element-6eb6125.elementor-view-framed .elementor-icon, .elementor-128 .elementor-element.elementor-element-6eb6125.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-128 .elementor-element.elementor-element-6eb6125 .elementor-icon{font-size:35px;}.elementor-128 .elementor-element.elementor-element-6eb6125 .elementor-icon svg{height:35px;}}@media(max-width:767px){.elementor-128 .elementor-element.elementor-element-632cd8b{width:var( --container-widget-width, 85px );max-width:85px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:85px;--container-widget-flex-grow:0;}.elementor-128 .elementor-element.elementor-element-632cd8b.elementor-element{--align-self:flex-start;}.elementor-128 .elementor-element.elementor-element-6eb6125 .elementor-icon{font-size:27px;}.elementor-128 .elementor-element.elementor-element-6eb6125 .elementor-icon svg{height:27px;}}/* Start custom CSS *//* ====================================================== AQUA BOAT CHARTERS — HEADER CSS Replica exacta del Navigation.tsx sin Crocoblock. IMPORTANTE: ab-header va en la SECCIÓN exterior, igual que st-header en SunnyTops. ====================================================== */ /* --------------------------------------------------- A. SECCIÓN HEADER (ab-header en el elemento exterior) Cuando Elementor activa sticky, agrega elementor-sticky--effects al MISMO elemento → los .elementor-128es .ab-header.elementor-sticky--effects coinciden correctamente. --------------------------------------------------- */ /* Transparente por defecto */ .ab-header { background-color: transparent !important; background-image: none !important; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* Al hacer scroll → bg-background/90 backdrop-blur-md border-b border-surface shadow-sm (mismo patrón que .st-header.elementor-sticky--effects en SunnyTops) */ .ab-header.elementor-sticky--effects { background-color: rgba(250, 250, 234, 0.90) !important; /* #FAFAEA/90 */ backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid #EFEFDF !important; /* border-surface */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */ } /* Altura dinámica del Container interior */ .ab-header .e-con, .ab-header .elementor-container { min-height: 96px !important; /* h-24 */ transition: min-height 0.3s ease !important; } .ab-header.elementor-sticky--effects .e-con, .ab-header.elementor-sticky--effects .elementor-container { min-height: 80px !important; /* h-20 */ } /* Logo: 108px arriba → 86px al scroll */ .ab-header .ab-logo img { width: 108px !important; height: 108px !important; object-fit: contain !important; transition: width 0.3s ease, height 0.3s ease !important; } .ab-header.elementor-sticky--effects .ab-logo img { width: 86px !important; height: 86px !important; } /* --------------------------------------------------- B. NAV MENU — Desktop font-bold text-sm uppercase tracking-widest text-white/drop-shadow-lg → text-on-surface hover:text-primary (#0C99AE) SIN underline animado (no está en el React original) --------------------------------------------------- */ .ab-main-menu .elementor-nav-menu > li > a.elementor-item { font-weight: 700 !important; /* font-bold */ font-size: 14px !important; /* text-sm */ text-transform: uppercase !important; /* uppercase */ letter-spacing: 0.1em !important; /* tracking-widest */ color: #ffffff !important; /* text-white */ filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) drop-shadow(0 2px 2px rgba(0,0,0,0.06)) !important; /* drop-shadow-lg */ transition: color 0.3s ease, filter 0.3s ease !important; /* transition-colors */ text-decoration: none !important; } /* Al hacer scroll: text-on-surface */ .ab-header.elementor-sticky--effects .ab-main-menu .elementor-nav-menu > li > a.elementor-item { color: #1B1C13 !important; /* text-on-surface */ filter: none !important; } /* hover:text-primary — aplica en cualquier estado */ .ab-main-menu .elementor-nav-menu > li > a.elementor-item:hover, .ab-main-menu .elementor-nav-menu > li > a.elementor-item-active { color: #0C99AE !important; /* text-primary */ filter: none !important; } /* Eliminar estilos por defecto de Elementor en links */ .ab-main-menu .elementor-nav-menu > li > a.elementor-item::before, .ab-main-menu .elementor-nav-menu > li > a.elementor-item::after { display: none !important; } /* --------------------------------------------------- C. BOTÓN BOOK NOW — btn-secondary estilo exacto bg-secondary text-white font-semibold py-3 px-8 rounded-full text-sm hover:scale-105 shadow-lg --------------------------------------------------- */ .ab-cta-btn.elementor-button-wrapper .elementor-button, .ab-cta-btn .elementor-button { background-color: #F96B37 !important; /* bg-secondary */ color: #ffffff !important; font-weight: 600 !important; /* font-semibold */ font-size: 14px !important; /* text-sm */ text-transform: uppercase !important; letter-spacing: 0.05em !important; border-radius: 9999px !important; /* rounded-full */ padding: 12px 32px !important; /* py-3 px-8 */ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important; /* shadow-lg */ transition: transform 0.3s ease, background-color 0.3s ease !important; border: none !important; } .ab-cta-btn.elementor-button-wrapper .elementor-button:hover, .ab-cta-btn .elementor-button:hover { background-color: #FE6F3B !important; /* hover:bg-secondary-dark */ transform: scale(1.05) !important; /* hover:scale-105 */ } /* --------------------------------------------------- D. HAMBURGUESA MÓVIL Inicial: p-3 rounded-full text-white drop-shadow-md bg-black/20 backdrop-blur-sm Al scroll: text-on-surface (SIN fondo — el React no tiene bg al scroll) --------------------------------------------------- */ /* Estado inicial (sobre hero transparente) */ .ab-mobile-toggle .elementor-icon, .ab-mobile-toggle .elementor-icon-list-icon { padding: 12px !important; /* p-3 */ border-radius: 9999px !important; /* rounded-full */ background-color: rgba(0,0,0,0.20) !important; /* bg-black/20 */ backdrop-filter: blur(4px) !important; /* backdrop-blur-sm */ -webkit-backdrop-filter: blur(4px) !important; transition: background-color 0.3s ease, color 0.3s ease !important; } .ab-mobile-toggle .elementor-icon i, .ab-mobile-toggle .elementor-icon svg { color: #ffffff !important; /* text-white */ fill: #ffffff !important; filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) drop-shadow(0 2px 2px rgba(0,0,0,0.06)) !important; /* drop-shadow-md */ transition: color 0.3s ease, filter 0.3s ease !important; } /* Al hacer scroll: solo cambia color — SIN fondo (igual que React: solo text-on-surface) */ .ab-header.elementor-sticky--effects .ab-mobile-toggle .elementor-icon { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ab-header.elementor-sticky--effects .ab-mobile-toggle .elementor-icon i, .ab-header.elementor-sticky--effects .ab-mobile-toggle .elementor-icon svg { color: #1B1C13 !important; /* text-on-surface */ fill: #1B1C13 !important; filter: none !important; } /* --------------------------------------------------- E. POPUP MENÚ MÓVIL Links: text-4xl sm:text-5xl font-black text-on-surface hover:text-primary tracking-tighter text-center Botón: w-full btn-secondary text-xl py-5 rounded-3xl font-black tracking-widest uppercase shadow-2xl --------------------------------------------------- */ /* Links del popup */ .ab-mobile-nav-link { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 36px !important; /* text-4xl */ font-weight: 900 !important; /* font-black */ color: #1B1C13 !important; /* text-on-surface */ text-align: center !important; letter-spacing: -0.025em !important; /* tracking-tighter */ display: block !important; transition: color 0.3s ease !important; text-decoration: none !important; } @media (min-width: 640px) { .ab-mobile-nav-link { font-size: 48px !important; } /* sm:text-5xl */ } .ab-mobile-nav-link:hover, .ab-mobile-nav-link:active { color: #0C99AE !important; /* hover:text-primary */ } /* Botón Book Your Boat del popup */ .ab-mobile-book-btn.elementor-button-wrapper .elementor-button, .ab-mobile-book-btn .elementor-button { background-color: #F96B37 !important; /* btn-secondary */ color: #ffffff !important; font-size: 20px !important; /* text-xl */ font-weight: 900 !important; /* font-black */ letter-spacing: 0.1em !important; /* tracking-widest */ text-transform: uppercase !important; padding-top: 20px !important; /* py-5 */ padding-bottom: 20px !important; border-radius: 24px !important; /* rounded-3xl */ width: 100% !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important; /* shadow-2xl */ transition: transform 0.3s ease !important; border: none !important; } .ab-mobile-book-btn.elementor-button-wrapper .elementor-button:active, .ab-mobile-book-btn .elementor-button:active { transform: scale(0.95) !important; /* active:scale-95 */ } /* --------------------------------------------------- F. PREVENIR SCROLL HORIZONTAL --------------------------------------------------- */ html, body { overflow-x: hidden !important; } /* hover + página activa — estado SCROLL */ .ab-header.elementor-sticky--effects .ab-main-menu .elementor-nav-menu > li > a.elementor-item:hover, .ab-header.elementor-sticky--effects .ab-main-menu .elementor-nav-menu > li > a.elementor-item-active { color: #0C99AE !important; filter: none !important; }/* End custom CSS */