/* Responsive Styles for Mobile and Tablet */

/* Image Styles */
.image-tablet, .image-mobile {
  width: 100%;
  height: auto;
  border-radius: 24px;
  object-fit: cover;
  background: transparent;
  box-shadow: none;
  display: block; /* Ensure they behave as blocks */
}

/* Responsive Image Visibility Utilities - Defined AFTER specific styles to ensure hiding works */
.tablet-only, .mobile-only {
  display: none !important;
}

/* Hamburger Menu Button */
.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10001; /* Highest priority to be always visible */
  padding: 0;
  position: relative; /* Ensure z-index works */
}

.hamburger-menu span {
  width: 100%;
  height: 3px;
  background-color: white;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Hamburger Animation */
.hamburger-menu.active {
  position: fixed;
  top: 25px;
  right: 20px;
  z-index: 10002; /* Ensure it stays on top of the fixed menu and everything else */
}

.hamburger-menu.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu Styles */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* Remove padding from main container for full width */
  .node-1 {
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Navigation Bar Adjustments */
  .device-dk-tb {
    padding: 25px 20px; /* Adjusted padding to align with hamburger top */
    background: transparent; /* Transparent background */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: absolute; /* Overlay on hero */
    top: 0;
    left: 0;
    z-index: 10005; /* High z-index to stay above other content (form, buttons) */
    display: flex;
    justify-content: flex-start; /* Align logo to the left */
    align-items: center;
  }

  .hamburger-menu {
    display: flex; /* Show hamburger on tablet/mobile */
    position: fixed; /* Keep it fixed on scroll */
    top: 25px;
    right: 20px;
    z-index: 10010; /* Always on top */
    background: rgba(7, 26, 33, 0.6); /* Semi-transparent background for visibility */
    padding: 8px; /* Touch area */
    border-radius: 8px; /* Rounded corners */
    width: 46px; /* Adjusted touch target */
    height: 40px; /* Adjusted touch target */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
  }

  .hamburger-menu:hover {
    transform: scale(1.05);
  }

  .hamburger-menu:active {
    transform: scale(0.95);
  }

  /* Mobile Menu Overlay - Elegant Drawer Style */
  .pagelinks-361 {
    position: fixed;
    top: 0;
    right: -320px; /* Hide completely off-screen */
    width: 300px; /* Drawer width */
    max-width: 80vw; /* Responsive width */
    height: auto; /* Allow height to fit content */
    max-height: 85vh; /* Prevent full height coverage */
    overflow-y: auto; /* Scrollable content */
    background-color: rgba(7, 26, 33, 0.95); /* Deep dark blue, slightly transparent */
    backdrop-filter: blur(15px); /* Strong blur for elegance */
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
    align-items: center;
    gap: 20px; /* Reduce gap for compactness */
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth ease-out animation */
    z-index: 10000; /* Ensure menu is above all elements */
    padding-top: 80px; /* Reduced top padding */
    padding-bottom: 40px; /* Reduced bottom padding */
    box-shadow: -10px 10px 30px rgba(0,0,0,0.5); /* Deep shadow */
    border-left: 1px solid rgba(255,255,255,0.05); /* Subtle border */
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-bottom-left-radius: 60px; /* Large radius on bottom-left */
  }

  .pagelinks-361.active {
    right: 0;
    box-shadow: -10px 10px 30px rgba(0,0,0,0.5), 0 0 0 100vmax rgba(0, 0, 0, 0.5); /* Drop shadow + Dimming */
  }

  .pagelinks-361 a {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .pagelinks-361 a:hover {
    transform: translateX(5px);
    opacity: 0.8;
  }

  .pagelinks-361 a p span {
    font-size: 22px; /* Slightly smaller for elegance */
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* Hero Section Typography */
  .hero-section-2 {
    padding: 160px 20px 0 20px; /* Increased top padding to move text down */
    align-items: flex-start; /* Align to left */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    /* z-index removed to avoid trapping menu context */
  }

  .container-4 {
    flex-direction: column;
    align-items: flex-start; /* Align items to left */
    text-align: left; /* Text align left */
    gap: 16px;
    width: 100%;
    max-width: 100%;
  }

  .dk-h1 {
    font-size: 42px;
    line-height: 1.1;
    top: 0;
    text-align: left; /* Align left */
  }

  .dk-h4 {
    font-size: 18px;
    text-align: left; /* Align left */
    width: 100%;
  }

  /* Booking Form Responsive */
  .formulario-338 {
    width: 100%;
    max-width: 100%;
    padding: 24px;
    gap: 24px;
    height: auto;
    flex-direction: column;
    margin-top: 40px;
    background-color: rgba(7, 26, 33, 1); /* Match desktop color */
    border-radius: 24px;
    box-sizing: border-box;
    transform: translateY(30px); /* Partial overlap downwards */
    z-index: 10;
  }

  .formulario-339 {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns for inputs */
    gap: 12px;
    width: 100%;
  }

  .container-340, .container-343, .container-346, .container-349 {
    width: 100%;
    min-width: auto;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hero-select {
    width: 100%;
    background-color: transparent;
    border: none;
    color: white;
    padding: 0;
    font-size: 14px;
    font-family: var(--font-family-manrope);
    outline: none;
  }
  
  .hero-select option {
    background-color: #071A21;
    color: white;
  }
  
  .container-340 p, .container-343 p, .container-346 p, .container-349 p {
    margin: 0;
    font-size: 10px;
    opacity: 0.7;
  }

  #reserve-btn {
    width: auto; /* Don't stretch */
    align-self: center; /* Center in flex/grid container */
    justify-content: center;
    padding: 14px 32px; /* Consistent padding */
    margin: 8px auto 0; /* Center horizontally with auto margins */
    border-radius: 50px;
    gap: 12px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
    display: flex; /* Ensure flex for centering contents */
  }

  #reserve-btn:active {
    transform: scale(0.92) !important; /* More pronounced for mobile touch */
  }

  /* About Section Responsive */
  .nosotros-7 {
    flex-direction: column;
    padding: 110px 20px 60px 20px; /* Increased top padding to accommodate form overlap */
    gap: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
  }

  .container-8 {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  
  .container-8 .dk-h2, .container-8 .text-12, .container-8 .tagline-gold, .container-8 .body-xsm-semibold {
    text-align: center;
  }

  /* Container 9 specific alignment (Left aligned as requested) */
  .container-9 {
    align-self: flex-start !important;
    align-items: flex-start !important;
    width: 100%;
  }

  .container-9 .dk-h2, .container-9 .body-xsm-semibold {
    text-align: left !important;
  }

  /* Frame 116-38 specific alignment (Left aligned as requested) */
  .frame-116-38 {
    align-self: flex-start !important;
    align-items: flex-start !important;
    width: 100%;
  }

  .frame-116-38 .dk-h2, .frame-116-38 .body-xsm-semibold {
    text-align: left !important;
  }

  .images01-13 {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    position: relative;
    overflow: visible;
    /* aspect-ratio reset not needed as it was removed from styles.css */
  }
  
  /* Hide Desktop Images on Tablet/Mobile */
  .desktop-only {
    display: none !important;
  }
  
  /* Show Tablet Image */
  .tablet-only {
    display: block !important;
  }
  
  /* Hide Mobile Image (will be shown in mobile query) */
  .mobile-only {
    display: none !important;
  }

  /* Yacht Sections Responsive */
  .tipo-brisadelmar, .tipo-liveocean, .tipo-familyvoyage {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .frame-157-18 {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    padding: 0;
  }

  .c-1 {
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  /* Reverse order for alternating layouts so image is always first on mobile if desired, 
     or keep column to have image top then text bottom */
  /* Assuming DOM order is Image then Text for Brisa/Family, Text then Image for Live */
  
  /* For Brisa (Image Left) -> Image Top, Text Bottom */
  .tipo-brisadelmar .c-1, .tipo-familyvoyage .c-1 {
    flex-direction: column;
  }

  /* For Vale China (Text Left) -> Image Top, Text Bottom */
  .tipo-liveocean .c-1 {
    flex-direction: column-reverse; /* Assuming text is first in DOM for Vale China */
  }

  .frame-159-20, .frame-97-28 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .frame-159-20 {
    margin-bottom: 24px;
  }

  .frame-97-28 {
    padding: 24px 20px;
  }

  .dk-h2 {
    font-size: 32px; /* Smaller headings on mobile */
  }

  .dk-h3 {
    font-size: 28px;
  }

  /* Yacht Section Details Layout */
  
  /* 1. Header: Title + Button Stacked */
  .frame-99-37 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
  }

  /* Ensure intermediate containers are full width */
  .frame-156-36, .frame-101-46 {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Or stretch if needed, but width 100% usually enough */
  }

  /* Button Styling - Gold Background & Centered (not stretched) */
  #reserve-brisa-btn, #reserve-live-btn, #reserve-family-btn {
    background-color: #A18E6D !important; /* Gold */
    border-radius: 50px;
    padding: 14px 32px;
    width: auto; /* Don't stretch */
    align-self: flex-start; /* Align to the left on yacht cards, or center if needed */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    box-sizing: border-box;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
  }

  #reserve-brisa-btn:active, #reserve-live-btn:active, #reserve-family-btn:active {
    transform: scale(0.92) !important;
  }
  
  /* 2. Specs + Price (Reverse Order: Price Top, Specs Bottom) */
  .frame-117-47 {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
  }
  
  /* Price Styling */
  .frame-100-49 {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .frame-100-49 .dk-h3 span {
    color: #A18E6D !important; /* Gold Price */
    font-size: 32px;
  }

  /* Specs List Styling */
  ul.text-48 {
    padding-left: 20px;
    line-height: 1.6;
    margin-top: 0;
  }
  
  ul.text-48 li {
    margin-bottom: 8px;
  }

  /* 3. Includes & Packages (Cards) */
  .frame-119-52 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  /* Includes Card */
  .incluye-53 {
    border: 1px solid #529EB6; /* Cyan border */
    border-radius: 16px;
    padding: 16px;
    background-color: rgba(7, 26, 33, 0.85); /* Darker background */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Label on top, content below */
    align-items: flex-start;
    gap: 16px;
  }
  
  /* Label INCLUYE */
  .incluye-53 > p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
  }

  /* Icons Grid */
  .frame-111-55 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 16px 8px; /* Row gap 16px, Col gap 8px */
    margin-top: 0;
    width: 100%;
  }
  
  .frame-105-56, .frame-106-59, .frame-107-62, .frame-108-65, .frame-109-68, .frame-110-71 {
    display: flex;
    flex-direction: row; /* Icon left, text right */
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    text-align: left;
  }

  /* Resize icons for list view */
  .frame-105-56 img, .frame-106-59 img, .frame-107-62 img, .frame-108-65 img, .frame-109-68 img, .frame-110-71 img, .capitan-hat-72 img {
    width: 16px;
    height: auto;
    max-height: 16px;
    object-fit: contain;
  }
  
  /* Text size adjustment for mobile grid */
  .frame-105-56 p, .frame-106-59 p, .frame-107-62 p, .frame-108-65 p, .frame-109-68 p, .frame-110-71 p {
    font-size: 11px; /* Slightly larger text */
    line-height: 1.2;
    margin: 0;
  }
  
  /* Special handling for Capitan hat container if needed */
  .capitan-hat-72 {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  
  /* Packages Card */
  .incluye-77 {
    background-color: #05141A; /* Darker background */
    border-radius: 16px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Label on top, content below */
    align-items: flex-start;
    gap: 16px;
  }
  
  /* Label PAQUETES */
  .incluye-77 > p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
  }
  
  /* Packages List */
  .frame-118-79 {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    width: 100%;
  }
  
  .frame-90-80, .frame-91-84, .frame-92-88 {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center;
    align-items: center; /* Center text horizontally */
    border-bottom: 1px solid rgba(255,255,255,0.2); /* More visible border */
    padding: 12px 0;
    gap: 4px;
    width: 100%;
  }
  
  .frame-92-88 {
    border-bottom: none; /* No border for last item */
  }
  
  /* Hide desktop lines if they are images */
  .line-1-83, .line-2-87 {
    display: none;
  }
  
  /* Advantages Section */
  .ventajas-234 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .ventajas-container {
    display: flex;
    flex-direction: column;
    padding: 60px 20px;
    gap: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .ventajas-left, .ventajas-right {
    width: 100%;
    max-width: 100%;
  }

  .ventajas-right {
    order: -1; /* Move image to top */
    height: auto; /* Let image define height */
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0;
  }
  
  .ventajas-img-top, .ventajas-img-bottom {
    max-width: 80%;
    position: absolute;
  }
  
  .ventajas-img-top {
    top: 0;
    left: 10%;
    z-index: 2;
  }
  
  .ventajas-img-bottom {
    bottom: 0;
    right: 10%;
    z-index: 1;
  }

  .ventajas-button {
    width: auto; /* Don't stretch */
    align-self: center; /* Center in container */
    display: inline-flex;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 50px;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .ventajas-button:active {
    transform: scale(0.92) !important;
  }

  .ventajas-button svg {
    width: 20px !important;
    height: 20px !important;
  }

  .ventajas-button span {
    line-height: 1 !important;
  }

  /* Experiences Section */
  .experiencias-269 {
    padding: 60px 20px !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .container-274 {
    flex-direction: column;
    gap: 24px;
    padding: 0 20px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .experience-card {
    width: 100%;
    max-width: 400px; /* Prevent too wide cards */
  }

  /* Gallery Section */
  .gallery-286 {
    padding: 40px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .row-287, .container-288, .container-290, .container-294, .images08-296 {
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 0;
    padding: 0;
    margin: 0;
  }

  .images03-289, .images04-291, .images05-292, .images06-293, .images07-295, .image-297 {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-width: 100%;
    display: block;
  }

  /* CTA Section Responsive */
  .cta-footer-298 {
    padding: 60px 20px;
    gap: 32px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #reserve-royal-btn {
    width: auto; /* Don't stretch */
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 32px;
    border-radius: 50px;
    gap: 12px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #reserve-royal-btn:active {
    transform: scale(0.92) !important;
  }
  
  .container-299 {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  
  .container-299 h2, .container-299 h3, .container-299 .dk-h2, .container-299 .body-body-medium {
    text-align: center;
    width: 100%;
  }
  
  #reserve-royal-btn {
    width: auto;
    min-width: 280px;
    justify-content: center;
  }

  /* Footer Adjustments */
  .site-footer {
    padding: 40px 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 40px;
    width: 100%;
  }
  
  .footer-left {
    align-items: center;
    width: 100%;
  }
  
  .footer-title {
    text-align: center;
    font-size: 24px;
  }
  
  .footer-bottom-bar {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  
  .footer-legal-links {
    flex-direction: column;
    gap: 10px;
  }
  
  .divider {
    display: none;
  }

  /* Movement Sutil for all Reservation Buttons on Mobile */
  #reserve-btn:active, 
  #reserve-brisa-btn:active, 
  #reserve-live-btn:active, 
  #reserve-family-btn:active, 
  #reserve-royal-btn:active, 
  .ventajas-button:active,
  .footer-cta-btn:active {
    transform: scale(0.92) !important;
    transition: transform 0.1s ease-out !important; /* Faster response for touch */
  }

  /* Ensure all buttons have transitions defined */
  #reserve-btn, 
  #reserve-brisa-btn, 
  #reserve-live-btn, 
  #reserve-family-btn, 
  #reserve-royal-btn, 
  .ventajas-button,
  .footer-cta-btn {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    will-change: transform;
  }
}

/* Mobile Specific (max-width: 768px) */

@media (max-width: 479px) {
  /* Switch to Mobile Image */
  .tablet-only {
    display: none !important;
  }
  .mobile-only {
    display: block !important;
  }

  .dk-h1 {
    font-size: 32px;
  }
  
  .tagline-gold {
    font-size: 18px;
  }
  
  .frame-103-21 { /* Main yacht image */
     height: 350px;
     object-fit: cover;
     width: 100%;
     margin-top: 24px; /* Space above to separate from previous section */
  }
  
  .fotos-22 {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 8px; /* Space between main image and thumbnails */
    gap: 4px;
    z-index: 1; /* Lower z-index to prevent overlap with menu */
  }

  .fotos-22 img { /* Thumbnail images */
    width: 20%;
    height: 60px;
    object-fit: cover;
    flex-grow: 1;
  }

  /* CTA Section Responsive Mobile */
  .cta-footer-298 {
    padding: 40px 20px;
  }
  
  #reserve-royal-btn {
    width: 100%;
  }

}

/* Specific Adjustments for Landscape Mode (Mobile & Tablet) */
@media (max-width: 1024px) and (orientation: landscape) {
  .hero-section-2 {
    padding-top: 100px; /* Reduce top padding for better visibility */
    min-height: auto; /* Allow flexible height */
  }

  .nosotros-7 {
    padding-top: 60px; /* Reduce padding to avoid huge gaps */
  }
  
  .pagelinks-361 {
    padding-top: 80px; /* Less top padding for menu */
    gap: 20px; /* Tighter spacing */
  }
  
  .formulario-338 {
    margin-top: 20px; /* Less margin */
    transform: translateY(20px); /* Smaller overlap */
  }
  
  .frame-103-21 {
    height: 250px; /* Smaller main image in landscape */
  }
}