:root {
   --background: 0 0% 100%;
   --foreground: 0 0% 20%;
   --card: 0 0% 100%;
   --card-foreground: 0 0% 20%;
   --popover: 0 0% 100%;
   --popover-foreground: 0 0% 20%;
   --primary: 210 100% 56%;
   --primary-foreground: 0 0% 100%;
   --secondary: 187 54% 54%;
   --secondary-foreground: 0 0% 100%;
   --muted: 200 30% 97%;
   --muted-foreground: 210 11% 43%;
   --accent: 39 100% 50%;
   --accent-foreground: 210 40% 16%;
   --destructive: 0 75% 45%;
   --destructive-foreground: 0 0% 100%;
   --border: 200 22% 90%;
   --input: 200 22% 86%;
   --ring: 210 100% 56%;
   --radius: .85rem;
   --ink: #153449;
   --paper: #f4f8fa;
   --orange: #ffa500;
   --turquoise: #48bac9;
   --whatsapp: #32cd32;
 }

 .dark {
   --background: 211 33% 10%;
   --foreground: 205 22% 91%;
   --card: 211 29% 15%;
   --card-foreground: 205 22% 91%;
   --popover: 211 29% 15%;
   --popover-foreground: 205 22% 91%;
   --muted: 211 29% 13%;
   --muted-foreground: 205 15% 72%;
   --border: 210 22% 25%;
   --input: 210 22% 29%;
   --ink: #e1eff6;
   --paper: #152331;
 }

 * {
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
   scroll-padding-top: 140px;
 }

 body {
   margin: 0;
   font-family: 'Open Sans', sans-serif;
   color: hsl(var(--foreground));
   background: hsl(var(--background));
   overflow-x: clip;
 }

 button,
 input,
 select,
 textarea {
   font: inherit;
 }

 a {
   color: inherit;
   text-decoration: none;
 }

 button,
 a,
 input,
 select,
 textarea,
 summary {
   -webkit-tap-highlight-color: transparent;
 }

 button {
   cursor: pointer;
 }

 button:disabled {
   cursor: wait;
   opacity: .65;
 }

 :focus-visible {
   outline: 3px solid hsl(var(--primary));
   outline-offset: 4px;
 }

 h1,
 h2,
 h3,
 p,
 figure {
   margin: 0;
 }

 h2 {
   font-size: clamp(28px, 3vw, 40px);
   line-height: 1.25;
   font-weight: 700;
   letter-spacing: -1.3px;
   color: var(--ink);
 }

 h3 {
   font-size: 18px;
   font-weight: 700;
   color: var(--ink);
 }

 p {
   line-height: 1.8;
   color: hsl(var(--muted-foreground));
   font-size: 14px;
 }

 img {
   display: block;
   object-fit: cover;
 }

 .wide {
   width: min(1200px, calc(100% - 88px));
   margin-inline: auto;
 }

 .section {
   padding-block: 90px;
 }

 .eyebrow {
   display: block;
   font-size: 10px;
   letter-spacing: 2.4px;
   font-weight: 700;
   color: #19899a;
   margin-bottom: 14px;
 }

 .dark .eyebrow {
   color: var(--turquoise);
 }

 .button {
   min-height: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 13px 22px;
   border-radius: 7px;
   font-size: 13px;
   font-weight: 700;
   border: 1px solid transparent;
   transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
 }

 .button:hover {
   transform: translateY(-2px);
   box-shadow: 0 5px 15px #15344918;
 }

 .button:active {
   transform: scale(.98);
 }

 .primary {
   background: hsl(var(--primary));
   color: white;
 }

 .orange {
   background: var(--orange);
   color: #24313a;
 }

 .orange:hover {
   background: #ffb72e;
 }

 .whatsapp {
   background: var(--whatsapp);
   color: #103615;
 }

 .text-link {
   display: inline-flex;
   gap: 12px;
   align-items: center;
   font-size: 13px;
   font-weight: 700;
   color: #167fbd;
   padding-block: 10px;
 }

 .dark .text-link {
   color: #70c7ff;
 }

 .text-link:hover {
   text-decoration: underline;
 }

 .site-header {
   position: sticky;
   top: 0;
   z-index: 30;
   background: hsl(var(--background));
   box-shadow: 0 2px 16px #1534490a;
 }

 .topbar {
   background: var(--paper);
   border-bottom: 1px solid hsl(var(--border));
   font-size: 10px;
   color: hsl(var(--muted-foreground));
 }

 .topbar .wide {
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-height: 30px;
 }

 .topbar a {
   display: flex;
   align-items: center;
   gap: 7px;
 }

 .nav-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 98px;
   gap: 25px;
 }

 .logo-crop {
   position: relative;
   display: block;
   width: 155px;
   height: 96px;
   overflow: hidden;
   background: white;
   flex-shrink: 0;
   border-radius: 4px;
 }

 .logo-crop img {
   position: absolute;
   width: 225px;
   height: auto;
   left: -39px;
   top: -43px;
 }

 .nav-links {
   display: flex;
   align-items: center;
   gap: 29px;
 }

 .nav-links a {
   font-size: 12px;
   font-weight: 600;
   transition: color .2s;
 }

 .nav-links a:hover {
   color: hsl(var(--primary));
 }

 .nav-actions {
   display: flex;
   gap: 14px;
   align-items: center;
 }

 .icon-button {
   border: 0;
   background: transparent;
   color: var(--ink);
   width: 44px;
   height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
 }

 .icon-button:hover {
   background: hsl(var(--muted));
 }

 .advisor {
   background: hsl(var(--primary));
   color: white;
   font-size: 11px;
   padding-inline: 17px;
   min-height: 43px;
 }

 .mobile-menu {
   display: none;
 }

 .hero {
   position: relative;
   min-height: calc(100dvh - 128px);
   max-height: 950px;
   background: #123b4b;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 90px 24px 105px;
   color: white;
 }

 .hero-image,
 .hero-video,
 .hero-shade {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
 }

 .hero-image,
 .hero-video {
   object-fit: cover;
   object-position: center 55%;
 }

 .hero-shade {
   background: linear-gradient(180deg, rgba(4, 39, 55, .24), rgba(5, 36, 53, .46) 45%, rgba(4, 32, 46, .70));
 }

 .hero-gallery { position:absolute; inset:0; overflow:hidden; }
 .hero-gallery-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; animation:heroGallery 16s infinite; }
 .hero-gallery-image--family { animation-delay:0s; }
 .hero-gallery-image--resort { animation-delay:8s; }
 @keyframes heroGallery { 0%,4% {opacity:0;transform:scale(1)} 8%,24% {opacity:1} 29%,100% {opacity:0;transform:scale(1.05)} }

 .airplane-lane {
   position: absolute;
   z-index: 1;
   top: clamp(88px, 15vh, 160px);
   left: 50%;
   width: min(58vw, 620px);
   height: 64px;
   transform: translateX(-50%);
   overflow: hidden;
   pointer-events: none;
   /* El degradado evita que el avión aparezca o desaparezca de golpe. */
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
 }

 .airplane-loop {
   position: absolute;
   top: 4px;
   left: -96px;
   width: 76px;
   height: auto;
   opacity: .9;
   /* Se conserva el icono original; sólo se suaviza su recorrido. */
   will-change: left, transform, opacity;
   animation: airplane-glide 18s cubic-bezier(.45, .05, .55, .95) infinite;
 }

 @keyframes airplane-glide {
   0% {
     left: -96px;
     opacity: 0;
     transform: translateY(4px) rotate(-2deg);
   }

   10% {
     opacity: .9;
   }

   50% {
     transform: translateY(-3px) rotate(-1deg);
   }

   90% {
     opacity: .9;
   }

   100% {
     left: calc(100% + 96px);
     opacity: 0;
     transform: translateY(3px) rotate(-2deg);
   }
 }

 .hero-content {
   position: relative;
   text-align: center;
   max-width: 820px;
 }

 .canoa1 {
   width: 100px;
   display: block;
   position: relative;
   z-index: 2;
   margin: 0 auto 22px;
   pointer-events: none;
   animation: boatMove 5s linear infinite;
 }

 @keyframes boatMove {
   0% {
     transform: translateX(-115px);
   }

   100% {
     transform: translateX(115px);
   }
 }

 .hero h1 {
   font-size: clamp(40px, 5.8vw, 76px);
   line-height: 1.12;
   font-weight: 700;
   letter-spacing: -2.8px;
   text-shadow: 0 2px 24px #16364820;
 }

 .hero h1 span {
   position: relative;
   color: #ffb732;
 }

 .hero h1 span::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -6px;
   height: 3px;
   width: 95%;
   transform: rotate(-3deg);
   background: #ffb732;
 }

 .hero-content>p {
   color: #f4fbfe;
   max-width: 610px;
   margin: 28px auto 0;
   font-size: 15px;
   line-height: 1.85;
 }

 .hero-buttons {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin-top: 31px;
 }

 .hero-buttons .button {
   min-height: 52px;
   padding-inline: 26px;
 }

 .glass {
   background: #ffffff10;
   border-color: #ffffff90;
   color: white;
   backdrop-filter: blur(5px);
 }

 .glass:hover {
   background: #ffffff25;
 }

 .hero-trust {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   color: #e7f6fa;
   font-size: 10px;
   line-height: 1.7;
   margin-top: 25px;
 }

 .hero-trust svg {
   color: var(--turquoise);
 }

 .hero-bottom {
   position: absolute;
   bottom: 28px;
   left: 0;
   right: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #f2f8fb;
   font-size: 10px;
 }

 .hero-bottom>span,
 .hero-bottom a {
   display: flex;
   align-items: center;
   gap: 7px;
 }

 .hero-bottom a {
   letter-spacing: 1.5px;
   font-size: 9px;
 }

 .hero-brand {
   font-size: 10px;
 }

 .floating-whatsapp {
   position: fixed;
   right: 24px;
   bottom: 24px;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   background: var(--whatsapp);
   color: #103615;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 5px 24px #123d3935;
   z-index: 35;
   border: 3px solid white;
   transition: transform .2s;
 }

 .floating-whatsapp:hover {
   transform: scale(1.08);
 }

 .travel-services {
   position: relative;
   z-index: 2;
   background: #fff;
   padding: 22px 0;
   border-bottom: 1px solid rgba(15, 45, 61, .08);
 }

 .travel-services-inner {
   display: flex;
   align-items: center;
   gap: clamp(28px, 5vw, 70px);
 }

 .travel-services-heading {
   flex: 0 0 auto;
 }

 .travel-services-heading .eyebrow {
   color: #2faec2;
   margin-bottom: 6px;
   display: block;
 }

 .travel-services-heading h2 {
   color: #0f2d3d;
   font-size: clamp(21px, 2.15vw, 29px);
   line-height: 1.15;
   letter-spacing: -1px;
 }

 .travel-services-list {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   flex: 1;
   align-items: stretch;
 }

 .travel-service-item {
   min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 7px;
   padding: 4px 10px;
   color: #0f2d3d;
   font-size: 12px;
   font-weight: 700;
   text-align: center;
   border-left: 1px solid rgba(15, 45, 61, .12);
   transition: color .2s ease, transform .2s ease;
 }

 .travel-service-item:first-child {
   border-left: 0;
 }

 .travel-service-icon {
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
   color: #178da5;
   border-radius: 50%;
   background: #e9f7f8;
   transition: background-color .2s ease, color .2s ease;
 }

 .travel-service-item:hover,
 .travel-service-item:focus-visible {
   color: #d88900;
   transform: translateY(-2px);
 }

 .travel-service-item:hover .travel-service-icon,
 .travel-service-item:focus-visible .travel-service-icon {
   color: #fff;
   background: #f5a400;
 }

 .travel-service-item:focus-visible {
   outline: 2px solid #178da5;
   outline-offset: 3px;
   border-radius: 4px;
 }

 .section-heading {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 25px;
   margin-bottom: 30px;
 }

 .section-heading p,
 .center-heading p {
   margin-top: 13px;
 }

 .center-heading {
   text-align: center;
   margin: 0 auto 44px;
   max-width: 720px;
 }

 .filters {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 29px;
 }

 .filters button {
   border: 1px solid hsl(var(--border));
   border-radius: 6px;
   padding: 10px 13px;
   background: transparent;
   color: hsl(var(--muted-foreground));
   font-size: 10px;
   transition: background .2s;
   min-height: 38px;
 }

 .filters .selected {
   background: var(--ink);
   color: hsl(var(--background));
   border-color: var(--ink);
 }

 .destination-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 19px;
 }

 .destination {
   position: relative;
   height: 358px;
   border-radius: 12px;
   overflow: hidden;
   background: #2a5762;
   color: white;
 }

 .destination>img {
   width: 100%;
   height: 100%;
   transition: transform .3s ease;
 }

 .destination:hover>img {
   transform: scale(1.045);
 }

 .destination-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, #183b4520 20%, #082b459c 72%, #082b45e8);
 }

 .destination-tag {
   position: absolute;
   left: 18px;
   top: 18px;
   font-size: 9px;
   padding: 6px 10px;
   border-radius: 4px;
   background: #ffffffef;
   color: #204355;
 }

 .destination-copy {
   position: absolute;
   bottom: 23px;
   left: 21px;
   right: 21px;
 }

 .destination-copy>span {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 9px;
   opacity: .85;
 }

 .destination h3 {
   color: white;
   font-size: 22px;
   line-height: 1.3;
   margin: 9px 0 18px;
   letter-spacing: -.6px;
 }

 .destination a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 13px;
   border-top: 1px solid #ffffff40;
   font-size: 10px;
   font-weight: 600;
 }

 .services-section {
   background: var(--paper);
 }

 .service-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: 35px;
   row-gap: 0;
 }

 .service {
   display: flex;
   gap: 17px;
   padding: 27px 0;
   border-bottom: 1px solid hsl(var(--border));
 }

 .service>svg {
   color: #198eaf;
   flex-shrink: 0;
   margin-top: 3px;
 }

 .service h3 {
   font-size: 14px;
   margin-bottom: 8px;
 }

 .service p {
   font-size: 12px;
   line-height: 1.8;
 }

 .service a {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-size: 10px;
   font-weight: 700;
   color: #157ebb;
   margin-top: 10px;
   min-height: 28px;
 }

 .dark .service a {
   color: #70c7ff;
 }

 .about {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 75px;
   align-items: center;
 }

 .about-image {
   position: relative;
   padding-bottom: 28px;
 }

 .about-image>img {
   width: 100%;
   height: 430px;
   border-radius: 13px;
 }

 .about-stamp {
   position: absolute;
   bottom: 0;
   right: -20px;
   display: flex;
   gap: 15px;
   align-items: center;
   padding: 23px 29px;
   border-radius: 8px;
   box-shadow: 0 8px 35px #173b4917;
   background: hsl(var(--card));
   color: var(--ink);
   font-size: 13px;
   line-height: 1.7;
 }

 .about-stamp svg {
   color: #199db0;
 }

 .about h2 {
   margin-bottom: 24px;
 }

 .about p+p {
   margin-top: 12px;
 }

 .check-list {
   list-style: none;
   padding: 0;
   display: grid;
   gap: 12px;
   font-size: 12px;
   margin: 24px 0 18px;
 }

 .check-list li {
   display: flex;
   align-items: center;
   gap: 11px;
 }

 .check-list svg {
   color: #198fa1;
 }

 .reservation-section {
   background: #11394c;
   color: white;
   padding: 80px 0;
 }

 .reservation-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center;
 }

 .reservation-intro .eyebrow {
   color: #76cfda;
 }

 .reservation-intro h2 {
   color: white;
   font-size: clamp(30px, 3.5vw, 44px);
   margin-bottom: 23px;
 }

 .reservation-intro>p {
   color: #bed3df;
   max-width: 395px;
   margin-bottom: 30px;
 }

 .reservation-note {
   display: flex;
   align-items: center;
   gap: 15px;
   max-width: 380px;
   margin: 26px 0;
 }

 .reservation-note svg {
   color: #69c6d4;
   flex-shrink: 0;
 }

 .reservation-note p {
   font-size: 11px;
   color: #bbd3df;
 }

 .online-note {
   border-top: 1px solid #ffffff25;
   padding-top: 23px;
   max-width: 415px;
 }

 .online-note h3 {
   color: white;
   font-size: 14px;
   margin-bottom: 9px;
 }

 .online-note p {
   color: #bbd3df;
   font-size: 11px;
 }

 .online-note>span {
   display: block;
   color: #97d9e5;
   font-size: 10px;
   line-height: 1.7;
   margin-top: 10px;
 }

 .form-panel {
   background: hsl(var(--card));
   color: hsl(var(--card-foreground));
   padding: 34px;
   border-radius: 13px;
   box-shadow: 0 15px 50px #0d294817;
 }

 .form-panel>h3 {
   font-size: 23px;
   letter-spacing: -.7px;
   margin-bottom: 6px;
 }

 .form-panel>p {
   font-size: 12px;
   margin-bottom: 25px;
 }

 .form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 .form-grid label {
   display: flex;
   flex-direction: column;
   gap: 7px;
   font-size: 10px;
   font-weight: 600;
 }

 .full {
   grid-column: 1/-1;
 }

 .form-grid input,
 .form-grid select,
 .form-grid textarea {
   width: 100%;
   background: hsl(var(--background));
   border: 1px solid hsl(var(--input));
   color: hsl(var(--foreground));
   border-radius: 5px;
   padding: 11px 12px;
   font-size: 11px;
   min-height: 42px;
   font-weight: 400;
 }

 .form-grid textarea {
   resize: vertical;
 }

 .form-grid input::placeholder,
 .form-grid textarea::placeholder {
   color: hsl(var(--muted-foreground));
 }

 .consent {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   margin: 18px 0;
   font-size: 9px;
   color: hsl(var(--muted-foreground));
   line-height: 1.7;
 }

 .consent input {
   width: 16px;
   height: 16px;
   margin-top: 2px;
   accent-color: hsl(var(--primary));
   flex-shrink: 0;
 }

 .consent a,
 .form-note a {
   text-decoration: underline;
 }

 .submit {
   width: 100%;
   border: 0;
 }

 .form-note {
   text-align: center;
   font-size: 9px;
   margin-top: 12px;
 }

 .form-error {
   color: #d94141;
   font-size: 12px;
   margin-bottom: 12px;
 }

 .form-success {
   min-height: 350px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   justify-content: center;
   gap: 18px;
 }

 .form-success svg {
   color: #219d76;
 }

 .spin {
   animation: spin 1s linear infinite;
 }

 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }

 .experiences {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
 }

 .experience {
   border: 1px solid hsl(var(--border));
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 20px #15404b05;
 }

 .experience-image {
   height: 220px;
   position: relative;
   overflow: hidden;
 }

 .experience-image img {
   width: 100%;
   height: 100%;
   transition: transform .3s;
 }

 .experience:hover img {
   transform: scale(1.04);
 }

 .experience-image>span {
   position: absolute;
   top: 17px;
   left: 17px;
   font-size: 9px;
   padding: 7px 12px;
   border-radius: 4px;
   background: white;
   color: #244558;
   font-weight: 600;
 }

 .experience-body {
   padding: 24px;
 }

 .experience-body .eyebrow {
   font-size: 9px;
   margin-bottom: 8px;
 }

 .experience h3 {
   font-size: 20px;
   margin-bottom: 11px;
 }

 .experience p {
   font-size: 12px;
   margin-bottom: 12px;
 }

 .experience .text-link {
   font-size: 11px;
 }

 .benefits-section {
   background: var(--paper);
 }

 .benefits-list {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
   text-align: center;
 }

 .benefits-list>div {
   padding: 13px 7px;
 }

 .benefits-list svg {
   margin: 0 auto 15px;
   color: #208fb4;
 }

 .benefits-list h3 {
   font-size: 13px;
   line-height: 1.6;
   margin-bottom: 7px;
 }

 .benefits-list p {
   font-size: 11px;
 }

 .process {
   margin-top: 60px;
   padding-top: 45px;
   border-top: 1px solid hsl(var(--border));
 }

 .process h2 {
   font-size: 29px;
 }

 .process ol {
   list-style: none;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 30px;
   margin: 35px 0 0;
 }

 .process li {
   position: relative;
 }

 .process li:not(:last-child)::after {
   content: '';
   position: absolute;
   left: 52px;
   top: 22px;
   width: calc(100% - 55px);
   border-top: 1px dashed #91b8c7;
 }

 .process li>span {
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #9ec6d2;
   background: hsl(var(--background));
   color: #1982ad;
   border-radius: 50%;
   width: 45px;
   height: 45px;
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 16px;
 }

 .process h3 {
   font-size: 12px;
   line-height: 1.6;
   max-width: 165px;
 }

 .gallery-section {
   padding-bottom: 45px;
 }

 .gallery {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 10px;
   padding-inline: 24px;
 }

 .gallery figure {
   position: relative;
   height: 210px;
   overflow: hidden;
   border-radius: 8px;
 }

 .gallery img {
   width: 100%;
   height: 100%;
   transition: transform .3s;
 }

 .gallery figure:hover img {
   transform: scale(1.05);
 }

 .gallery figcaption {
   position: absolute;
   inset: auto 0 0;
   padding: 30px 14px 13px;
   background: linear-gradient(transparent, #123341cc);
   color: white;
   font-size: 10px;
   font-weight: 600;
 }

 .faq {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: 80px;
 }

 .faq>div>p {
   margin: 20px 0;
   max-width: 300px;
 }

 .faq-list details {
   border-bottom: 1px solid hsl(var(--border));
 }

 .faq-list summary {
   padding: 20px 0;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
   list-style: none;
 }

 .faq-list summary::-webkit-details-marker {
   display: none;
 }

 .faq-list summary svg {
   flex-shrink: 0;
   color: #2295bf;
   transition: transform .2s;
 }

 .faq-list details[open] summary svg {
   transform: rotate(45deg);
 }

 .faq-list details p {
   padding-bottom: 20px;
   font-size: 12px;
   margin: 0;
   max-width: none;
 }

 .contact-section {
   background: var(--paper);
 }

 .contact-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 90px;
 }

 .contact-layout h2 {
   margin-bottom: 18px;
 }

 .contact-details {
   display: grid;
   gap: 22px;
   margin: 30px 0;
 }

 .contact-details>a,
 .contact-details>div {
   display: flex;
   align-items: flex-start;
   gap: 17px;
   font-size: 12px;
   line-height: 1.8;
 }

 .contact-details svg {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   margin-top: 3px;
   color: #208bab;
 }

 .contact-details small {
   display: block;
   font-size: 8px;
   font-weight: 700;
   letter-spacing: 1.4px;
   color: hsl(var(--muted-foreground));
   margin-bottom: 4px;
 }

 .contact-details a:hover {
   color: hsl(var(--primary));
 }

 .contact-buttons {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .social {
   border: 1px solid hsl(var(--border));
 }

 .social-placeholder {
   display: flex;
   width: 35px;
   height: 35px;
   align-items: center;
   justify-content: center;
   border: 1px dashed hsl(var(--border));
   border-radius: 7px;
   color: hsl(var(--muted-foreground));
 }

 .map {
   width: 100%;
   border: 0;
   height: 245px;
   border-radius: 12px;
   margin-top: 50px;
 }

 .privacy {
   margin-top: 28px;
   font-size: 11px;
 }

 .privacy summary {
   cursor: pointer;
   padding-block: 10px;
 }

 .privacy p {
   font-size: 11px;
   margin-top: 12px;
 }

 .site-footer {
   background: #0f2d3d;
   color: #d7e6ed;
   padding: 50px 0 20px;
 }

 .footer-main {
   display: grid;
   grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
   gap: 30px;
 }

 .footer-main h2 {
   font-size: 23px;
   color: white;
   letter-spacing: -.6px;
   margin-bottom: 9px;
 }

 .footer-main h2 span {
   display: block;
   font-size: 11px;
   color: #7ecdda;
   font-weight: 500;
   margin-top: 4px;
   letter-spacing: 1px;
 }

 .footer-main h3 {
   color: white;
   font-size: 11px;
   margin-bottom: 15px;
 }

 .footer-main a {
   font-size: 10px;
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 12px;
 }

 .footer-main a:hover {
   color: #6ad1e1;
 }

 .footer-main p {
   font-size: 10px;
   color: #9db9c6;
   margin-bottom: 15px;
 }

 .footer-bottom {
   border-top: 1px solid #ffffff1a;
   display: flex;
   justify-content: space-between;
   gap: 20px;
   font-size: 8px;
   color: #9eb8c4;
   margin-top: 32px;
   padding-top: 20px;
 }

 @media (prefers-reduced-motion:no-preference) {
   .reveal-pending {
     opacity: 0;
     transform: translateY(18px);
   }

   .reveal-visible {
     opacity: 1;
     transform: none;
     transition: opacity .55s ease-out, transform .55s ease-out;
   }
 }

 @media (max-width:1100px) {
   .wide {
     width: calc(100% - 56px);
   }

   .nav-links {
     gap: 19px;
   }

   .nav-row {
     gap: 14px;
   }

   .advisor {
     font-size: 10px;
     padding-inline: 12px;
   }

   .nav-actions {
     gap: 4px;
   }

   .about,
   .reservation-layout,
   .contact-layout,
   .faq {
     gap: 40px;
   }

   .hero h1 {
     font-size: 64px;
   }

   .destination h3 {
     font-size: 19px;
   }

   .destination {
     height: 320px;
   }

   .gallery {
     grid-template-columns: repeat(4, 1fr);
   }

   .gallery figure {
     height: 200px;
   }
 }

 @media (max-width:800px) {
   html {
     scroll-padding-top: 95px;
   }

   .wide {
     width: calc(100% - 40px);
   }

   .section {
     padding-block: 60px;
   }

   .topbar .wide>span,
   .hours {
     display: none;
   }

   .topbar .wide {
     justify-content: center;
     min-height: 26px;
   }

   .nav-row {
     height: 74px;
   }

   .logo-crop {
     width: 126px;
     height: 71px;
   }

   .logo-crop img {
     width: 185px;
     left: -32px;
     top: -42px;
   }

   .mobile-menu {
     display: flex;
   }

   .nav-links {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: hsl(var(--background));
     padding: 20px;
     box-shadow: 0 10px 20px #16374a18;
   }

   .nav-links.is-open {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     gap: 0;
   }

   .nav-links a {
     padding: 13px;
   }

   .advisor {
     min-height: 42px;
     font-size: 10px;
     padding: 10px;
     gap: 5px;
   }

   .hero {
     min-height: calc(100dvh - 100px);
     padding: 78px 20px 100px;
   }

   .hero h1 {
     font-size: 52px;
     letter-spacing: -2px;
   }

   .hero-content>p {
     font-size: 13px;
     max-width: 520px;
   }

   .hero-brand {
     display: none !important;
   }

   .hero-bottom {
     font-size: 9px;
   }

   .hero-bottom a {
     font-size: 8px;
     letter-spacing: 1px;
   }

   .destination-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
   }

   .destination {
     height: 350px;
   }

   .service-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 0 25px;
   }

   .about {
     gap: 30px;
   }

   .about-image>img {
     height: 420px;
   }

   .about-stamp {
     right: 0;
     padding: 18px;
     font-size: 11px;
   }

   .about h2 {
     font-size: 29px;
   }

   .about p {
     font-size: 12px;
   }

   .reservation-layout {
     gap: 30px;
   }

   .form-panel {
     padding: 25px;
   }

   .reservation-intro h2 {
     font-size: 31px;
   }

   .experiences {
     gap: 15px;
   }

   .experience-image {
     height: 180px;
   }

   .experience-body {
     padding: 18px;
   }

   .experience h3 {
     font-size: 17px;
   }

   .benefits-list {
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }

   .contact-layout {
     gap: 30px;
   }

   .footer-main {
     grid-template-columns: repeat(2, 1fr);
     row-gap: 35px;
   }
 }

 @media (max-width:600px) {
   .wide {
     width: calc(100% - 36px);
   }

   .nav-actions {
     gap: 1px;
   }

   .advisor {
     font-size: 0;
     width: 42px;
     padding: 0;
   }

   .advisor svg {
     width: 20px;
     height: 20px;
   }

   .hero {
     padding: 70px 18px 100px;
   }

   .hero h1 {
     font-size: 43px;
     line-height: 1.2;
     letter-spacing: -1.8px;
   }

   .hero-eyebrow {
     font-size: 8px;
     letter-spacing: 2px;
     margin-bottom: 22px;
   }

   .hero-content>p {
     font-size: 12px;
     line-height: 1.9;
     margin-top: 23px;
   }

   .hero-buttons {
     gap: 10px;
     margin-top: 25px;
   }

   .hero-buttons .button {
     padding: 12px 14px;
     font-size: 11px;
     min-height: 49px;
     gap: 7px;
   }

   .hero-trust {
     font-size: 9px;
   }

   .hero-bottom {
     bottom: 25px;
   }

   .hero-bottom a {
     max-width: 125px;
     text-align: right;
     font-size: 7px;
     line-height: 1.7;
   }

   .hero-bottom>span {
     font-size: 8px;
   }

   .floating-whatsapp {
     width: 53px;
     height: 53px;
     right: 16px;
     bottom: 16px;
   }

   .section-heading {
     align-items: flex-start;
     flex-direction: column;
     gap: 9px;
   }

   h2 {
     font-size: 29px;
     letter-spacing: -1px;
   }

   .eyebrow {
     font-size: 8px;
     letter-spacing: 1.8px;
   }

   .section-heading p,
   .center-heading p {
     font-size: 12px;
   }

   .filters {
     flex-wrap: nowrap;
     overflow-x: auto;
     margin-right: -18px;
     padding-right: 18px;
     padding-bottom: 8px;
   }

   .filters button {
     white-space: nowrap;
     min-height: 44px;
   }

   .destination {
     height: 285px;
   }

   .destination-tag {
     left: 12px;
     top: 12px;
     font-size: 8px;
     padding: 5px 7px;
   }

   .destination-copy {
     left: 14px;
     right: 14px;
     bottom: 18px;
   }

   .destination-copy>span {
     font-size: 8px;
     line-height: 1.5;
   }

   .destination h3 {
     font-size: 18px;
     margin: 8px 0 15px;
   }

   .destination a {
     font-size: 9px;
     min-height: 36px;
   }

   .service-grid {
     grid-template-columns: 1fr;
   }

   .service {
     padding: 22px 0;
   }

   .service h3 {
     font-size: 15px;
   }

   .service a {
     min-height: 35px;
   }

   .about,
   .reservation-layout,
   .faq,
   .contact-layout {
     grid-template-columns: 1fr;
     gap: 38px;
   }

   .about-image>img {
     height: 330px;
   }

   .about-image {
     padding-bottom: 22px;
   }

   .about-stamp {
     right: 12px;
   }

   .about h2 {
     font-size: 31px;
   }

   .reservation-section {
     padding: 58px 0;
   }

   .reservation-intro h2 {
     font-size: 35px;
   }

   .reservation-intro>p {
     font-size: 13px;
   }

   .form-panel {
     padding: 25px 21px;
   }

   .form-grid {
     gap: 15px 12px;
   }

   .form-grid input,
   .form-grid select,
   .form-grid textarea {
     font-size: 12px;
     min-height: 46px;
     padding: 10px;
   }

   .form-grid label {
     font-size: 10px;
   }

   .consent {
     font-size: 10px;
   }

   .form-note {
     font-size: 10px;
   }

   .experiences {
     grid-template-columns: 1fr;
     gap: 24px;
   }

   .experience-image {
     height: 230px;
   }

   .experience-body {
     padding: 25px;
   }

   .experience h3 {
     font-size: 23px;
   }

   .experience p {
     font-size: 13px;
   }

   .benefits-list {
     grid-template-columns: repeat(2, 1fr);
     gap: 22px 15px;
   }

   .benefits-list h3 {
     font-size: 12px;
   }

   .process ol {
     grid-template-columns: 1fr;
     gap: 23px;
   }

   .process li {
     display: flex;
     gap: 18px;
     align-items: center;
   }

   .process li>span {
     margin: 0;
     flex-shrink: 0;
   }

   .process h3 {
     max-width: none;
     font-size: 13px;
   }

   .process li:not(:last-child)::after {
     left: 22px;
     top: 48px;
     width: 0;
     height: 17px;
     border-top: 0;
     border-left: 1px dashed #91b8c7;
   }

   .gallery {
     display: flex;
     overflow-x: auto;
     padding: 0 18px 10px;
     gap: 13px;
     scroll-snap-type: x mandatory;
   }

   .gallery figure {
     flex: 0 0 190px;
     height: 240px;
     scroll-snap-align: center;
   }

   .gallery figcaption {
     font-size: 11px;
   }

   .center-heading {
     padding-inline: 18px;
     margin-bottom: 30px;
   }

   .faq-list summary {
     font-size: 12px;
     min-height: 62px;
   }

   .contact-layout .form-panel {
     margin-top: 5px;
   }

   .map {
     height: 220px;
   }

   .footer-main {
     gap: 30px 20px;
   }

   .footer-main>div:first-child {
     grid-column: 1/-1;
   }

   .footer-main h2 span {
     display: inline;
     margin-left: 7px;
   }

   .footer-main a {
     font-size: 11px;
     min-height: 24px;
   }

   .footer-main>div:last-child {
     grid-column: 1/-1;
   }

   .footer-bottom {
     flex-direction: column;
     gap: 12px;
     padding-right: 45px;
     font-size: 9px;
   }
 }

 @media (prefers-reduced-motion:reduce) {
   html {
     scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
     transition: none !important;
     animation: none !important;
   }
 }

 /* Utilidades que antes aportaba Tailwind/preflight */
 html,
 body {
   min-height: 100%
 }

 ul,
 ol {
   margin: 0
 }

 img {
   max-width: 100%
 }

 .sr-only {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
   margin: -1px !important;
   overflow: hidden !important;
   clip: rect(0, 0, 0, 0) !important;
   white-space: nowrap !important;
   border: 0 !important
 }

 .sr-only:focus {
   position: fixed !important;
   left: 16px !important;
   top: 16px !important;
   width: auto !important;
   height: auto !important;
   padding: 10px 14px !important;
   margin: 0 !important;
   overflow: visible !important;
   clip: auto !important;
   white-space: normal !important;
   background: white !important;
   color: #153449 !important;
   z-index: 100 !important;
   border-radius: 6px !important
 }

 .nav-links a[aria-current="page"] {
   color: hsl(var(--primary))
 }

 .page-main {
   min-height: calc(100dvh - 128px)
 }

 .page-main>.section:first-child {
   padding-top: 80px
 }

 .travel-title {
   font-size: clamp(32px, 4vw, 50px);
   line-height: 1.2;
   letter-spacing: -1.5px;
   margin-bottom: 20px;
   color: var(--ink)
 }

 .travel-copy p+p {
   margin-top: 12px
 }

 .travel-copy .button {
   margin-top: 8px
 }

 .inline-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center
 }

 .brand-svg {
   width: 20px;
   height: 20px;
   display: block;
   fill: currentColor
 }

 .page-kicker {
   padding-top: 34px
 }

 .page-kicker .text-link {
   margin-bottom: 4px
 }

 .empty-note {
   padding: 18px 20px;
   border: 1px dashed hsl(var(--border));
   border-radius: 8px;
   font-size: 12px;
   color: hsl(var(--muted-foreground));
   background: hsl(var(--card))
 }

 .booking-search-wrapper {
   width: min(100%, 1080px);
   height: 230px;
   margin: 30px auto 0;
   overflow: hidden;
   background: #fff;
   border: 1px solid rgba(255, 255, 255, .45);
   border-radius: 12px;
   box-shadow: 0 14px 32px rgba(3, 28, 43, .22)
 }

 .booking-search-wrapper iframe,
 .partner-embed iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: 0
 }

 .partner-section {
   background: hsl(var(--background))
 }

 .partner-section--soft {
   background: #f2f8fa
 }

 .partner-section .center-heading {
   max-width: 680px;
   margin: 0 auto 32px;
   text-align: center
 }

 .partner-section .center-heading p {
   margin-inline: auto
 }

 .partner-embed {
   overflow: hidden;
   background: #fff;
   border: 1px solid hsl(var(--border));
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(15, 45, 61, .08)
 }

 .partner-embed--tall {
   height: 900px
 }

 .partner-embed--offers {
   width: min(100%, 1000px);
   height: 420px;
   margin-inline: auto
 }

 .partner-embed--activities {
   height: 680px
 }

 @media(max-width:800px) {
   .page-main {
     min-height: calc(100dvh - 100px)
   }

   .page-main>.section:first-child {
     padding-top: 55px
   }
 }

 @media(max-width:800px) {
   .hero {
     max-height: none;
     padding-bottom: 108px
   }

   .booking-search-wrapper {
     height: 500px;
     margin-top: 24px
   }

   .partner-embed--tall {
     height: 820px
   }

   .partner-embed--offers {
     height: 420px
   }

   .partner-embed--activities {
     height: 620px
   }

   .partner-section .center-heading {
     margin-bottom: 24px
   }
 }

 /* Ajuste de legibilidad y cabecera */
 .topbar {
   display: none
 }

 html {
   scroll-padding-top: 108px
 }

 .nav-row {
   height: 98px
 }

 .page-main {
   min-height: calc(100dvh - 98px)
 }

 .hero {
   min-height: calc(100dvh - 98px)
 }

 p {
   font-size: 16px;
   line-height: 1.75
 }

 h3 {
   font-size: 20px
 }

 .eyebrow {
   font-size: 12px;
   letter-spacing: 2px
 }

 .button,
 .text-link {
   font-size: 14px
 }

 .nav-links a {
   font-size: 14px
 }

 .advisor {
   font-size: 13px
 }

 .hero-content>p {
   font-size: 17px
 }

 .hero-trust {
   font-size: 12px
 }

 .hero-bottom {
   font-size: 12px
 }

 .hero-bottom a {
   font-size: 11px
 }

 .filters button {
   font-size: 13px;
   min-height: 42px
 }

 .destination-tag,
 .destination-copy>span {
   font-size: 11px
 }

 .destination a {
   font-size: 12px
 }

 .service h3 {
   font-size: 18px
 }

 .service p,
 .experience p,
 .benefits-list p,
 .faq-list details p {
   font-size: 15px
 }

 .service a,
 .experience .text-link,
 .check-list,
 .contact-details>a,
 .contact-details>div {
   font-size: 14px
 }

 .form-grid label {
   font-size: 12px
 }

 .form-grid input,
 .form-grid select,
 .form-grid textarea {
   font-size: 14px;
   min-height: 46px
 }

 .consent,
 .form-note {
   font-size: 11px
 }

 .footer-main h3,
 .footer-main h2 span {
   font-size: 13px
 }

 .footer-main a,
 .footer-main p {
   font-size: 13px
 }

 .footer-bottom {
   font-size: 11px
 }

 @media(max-width:800px) {
   html {
     scroll-padding-top: 82px
   }

   .nav-row {
     height: 74px
   }

   .page-main {
     min-height: calc(100dvh - 74px)
   }

   .hero {
     min-height: calc(100dvh - 74px)
   }

   .nav-links a {
     font-size: 15px
   }

   .advisor {
     display: none
   }

   .hero-content>p {
     font-size: 15px
   }

   .hero-trust {
     font-size: 11px
   }

   .hero-bottom {
     font-size: 10px
   }

   .hero-bottom a {
     font-size: 9px
   }

   .service p,
   .experience p,
   .benefits-list p,
   .faq-list details p {
     font-size: 14px
   }

   .footer-main a,
   .footer-main p {
     font-size: 12px
   }
 }

 @media(max-width:600px) {
   p {
     font-size: 15px
   }

   .eyebrow {
     font-size: 10px
   }

   .hero-content>p {
     font-size: 14px
   }

   .hero-trust {
     font-size: 10px
   }

   .hero-bottom>span {
     font-size: 9px
   }

   .hero-bottom a {
     font-size: 8px
   }

   .filters button {
     font-size: 12px
   }

   .destination-tag,
   .destination-copy>span {
     font-size: 10px
   }

   .destination a {
     font-size: 11px
   }

   .service h3 {
     font-size: 18px
   }

   .service p,
   .experience p,
   .benefits-list p,
   .faq-list details p {
     font-size: 14px
   }

   .service a,
   .experience .text-link {
     font-size: 13px
   }

   .footer-main h3,
   .footer-main h2 span {
     font-size: 12px
   }

   .footer-main a,
   .footer-main p {
     font-size: 12px
   }

   .footer-bottom {
     font-size: 10px
   }
 }

 /* Logo local: assets/logo.png. Se adapta al menú fijo sin recortes ni fondo. */
 .logo-crop {
   position: static;
   display: flex;
   align-items: center;
   width: 220px;
   height: 90px;
   flex-shrink: 0;
   overflow: visible;
   background: transparent;
   border-radius: 0
 }

 .logo-crop img {
   position: static;
   display: block;
   width: 100%;
   height: 100%;
   max-height: 90px;
   object-fit: contain;
   object-position: left center
 }

 .logo-crop img.is-missing {
   display: none
 }

 .logo-crop:has(img.is-missing)::after {
   content: 'Maletalibre\A By Fraveo';
   white-space: pre-line;
   color: var(--ink);
   font-size: 17px;
   font-weight: 800;
   line-height: 1.05;
   letter-spacing: -.5px
 }

 @media(max-width:800px) {
   .logo-crop {
     width: 158px;
     height: 70px
   }

   .logo-crop img {
     width: 100%;
     height: 100%;
     max-height: 70px
   }
 }

 /* Ajustes específicos para pantallas pequeñas */
 @media(max-width:600px) {
   .partner-embed {
     border-radius: 8px
   }

   .booking-search-wrapper {
     height: clamp(430px, 135vw, 500px);
     border-radius: 10px
   }

   .partner-embed--tall {
     height: clamp(680px, 220vw, 820px)
   }

   .partner-embed--offers {
     width: 100%;
     height: 420px
   }

   .partner-embed--activities {
     height: clamp(560px, 180vw, 620px)
   }
 }

 @media(max-width:480px) {
   .hero {
     flex-direction: column;
     align-items: center;
     padding-bottom: 44px
   }

   .hero-bottom {
     position: relative;
     bottom: auto;
     width: calc(100% - 36px);
     margin-top: 26px;
     gap: 14px;
     justify-content: space-between
   }

   .hero-bottom a {
     max-width: 145px
   }

   .destination-grid {
     grid-template-columns: 1fr;
     gap: 18px
   }

   .destination {
     height: 340px
   }

   .form-grid {
     grid-template-columns: 1fr
   }

   .full {
     grid-column: auto
   }

   .contact-buttons {
     flex-wrap: wrap
   }
 }

 /* El buscador externo se carga sólo al abrirlo, para mantener el hero limpio. */
 .booking-search-panel {
   width: min(100%, 760px);
   margin: 26px auto 0;
   position: relative;
   z-index: 2
 }

 .booking-search-panel summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 14px 18px;
   background: rgba(255, 255, 255, .16);
   border: 1px solid rgba(255, 255, 255, .55);
   border-radius: 8px;
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   list-style: none
 }

 .booking-search-panel summary::-webkit-details-marker {
   display: none
 }

 .booking-search-panel summary span {
   display: inline-flex;
   align-items: center;
   gap: 9px
 }

 .booking-search-panel[open] summary {
   border-radius: 8px 8px 0 0;
   background: rgba(255, 255, 255, .24)
 }

 .booking-search-panel[open] summary>i:last-child {
   transform: rotate(180deg)
 }

 .booking-search-panel .booking-search-wrapper {
   margin: 0;
   width: 100%;
   border-radius: 0 0 10px 10px;
   box-shadow: 0 14px 32px rgba(3, 28, 43, .22)
 }

 .booking-search-help {
   margin-top: 10px !important;
   color: #eef8fb !important;
   font-size: 12px !important
 }

 @media(max-width:600px) {
   .booking-search-panel {
     margin-top: 22px
   }

   .booking-search-panel summary {
     font-size: 13px;
     padding: 13px 15px
   }

   .booking-search-panel .booking-search-wrapper {
     height: clamp(430px, 135vw, 500px)
   }
 }


 /* Enlaces oficiales a redes sociales del footer */
 .footer-social {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 11px;
   margin-top: 17px;
 }

 .footer-main .footer-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 41px;
   height: 41px;
   min-height: 41px;
   margin: 0;
   border: 1px solid rgba(255, 255, 255, .30);
   border-radius: 50%;
   color: #fff;
   font-size: 18px;
   text-decoration: none;
   transition: background-color .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
 }

 .footer-main .footer-social a:hover,
 .footer-main .footer-social a:focus-visible {
   background: #6ad1e1;
   color: #0f2d3d;
   border-color: #6ad1e1;
   transform: translateY(-2px);
 }

 .footer-main .footer-social a:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 3px;
 }

 @media(prefers-reduced-motion:reduce) {
   .footer-main .footer-social a {
     transition: none;
   }
 }

 /* Páginas legales e identidad institucional */
 .legal-page h1 {
   font-size: clamp(2.2rem, 5vw, 3.8rem);
   line-height: 1.12;
   margin: 14px 0
 }

 .legal-page .legal-intro {
   margin-bottom: 30px;
   opacity: .7
 }

 .legal-content {
   max-width: 920px;
   background: #fff;
   border: 1px solid rgba(22, 50, 60, .10);
   box-shadow: 0 15px 44px rgba(14, 38, 53, .05);
   border-radius: 18px;
   padding: clamp(22px, 4vw, 52px)
 }

 .legal-content h3 {
   font-size: 1.2rem;
   line-height: 1.35;
   margin: 32px 0 11px;
   color: #183e50
 }

 .legal-content p {
   line-height: 1.85;
   margin: 0 0 15px;
   overflow-wrap: anywhere
 }

 .identity-section {
   padding-top: 55px;
   padding-bottom: 55px
 }

 .identity-section h2 {
   font-size: clamp(2rem, 4vw, 3.2rem);
   margin: 12px 0 24px
 }

 .identity-story {
   max-width: 850px
 }

 .identity-story p,
 .identity-panel p {
   line-height: 1.85;
   margin: 0 0 16px
 }

 .identity-lead {
   font-size: 1.35rem;
   font-weight: 700
 }

 .identity-duo {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px
 }

 .identity-panel {
   background: #f3f9fa;
   padding: clamp(25px, 4vw, 46px);
   border-radius: 18px
 }

 .values-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px
 }

 .value-item {
   background: #f3f9fa;
   border: 1px solid rgba(22, 50, 60, .08);
   border-radius: 14px;
   padding: 23px;
   font-weight: 600;
   line-height: 1.5
 }

 .footer-bottom {
   flex-wrap: wrap;
   gap: 12px 22px
 }

 .footer-bottom a:hover {
   text-decoration: underline
 }

 @media(max-width:740px) {

   .identity-duo,
   .values-grid {
     grid-template-columns: 1fr
   }

   .legal-content {
     border-radius: 12px
   }

   .identity-section {
     padding-top: 35px;
     padding-bottom: 35px
   }
 }

 /* Franja de servicios de la página de inicio. */
 @media(max-width:900px) {
   .travel-services-inner {
     align-items: flex-start;
     flex-direction: column;
     gap: 18px
   }

   .travel-services-list {
     width: 100%
   }
 }

 @media(max-width:600px) {
   .travel-services {
     padding: 24px 0 20px
   }

   .travel-services-heading h2 {
     font-size: 24px
   }

   .travel-services-list {
     grid-template-columns: repeat(3, minmax(0, 1fr));
     row-gap: 17px
   }

   .travel-service-item {
     font-size: 12px;
     padding: 2px 4px;
     border-left: 0
   }

   .travel-service-icon {
     width: 38px;
     height: 38px
   }
 }

 @media(prefers-reduced-motion:reduce) {

   .travel-service-item,
   .travel-service-icon {
     transition: none
   }
 }


 /* Premium institutional redesign */
 .identity-story-section,
 .identity-purpose-section,
 .values-section {
   position: relative
 }

 .identity-story-section {
   padding-top: 65px
 }

 .identity-shell {
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #0f3041 0%, #173f55 45%, #1b6274 100%);
   border-radius: 34px;
   padding: clamp(28px, 4vw, 56px);
   box-shadow: 0 30px 70px rgba(10, 37, 50, .18)
 }

 .identity-shell::before,
 .identity-shell::after {
   content: "";
   position: absolute;
   border-radius: 999px;
   filter: blur(2px);
   opacity: .4;
   pointer-events: none
 }

 .identity-shell::before {
   width: 260px;
   height: 260px;
   right: -60px;
   top: -90px;
   background: radial-gradient(circle, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 72%)
 }

 .identity-shell::after {
   width: 220px;
   height: 220px;
   left: -60px;
   bottom: -70px;
   background: radial-gradient(circle, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 72%)
 }

 .identity-grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: minmax(0, 1.55fr) minmax(300px, .95fr);
   gap: 30px;
   align-items: stretch
 }

 .identity-copy {
   color: rgba(255, 255, 255, .9)
 }

 .identity-story-section .eyebrow {
   color: #98def2
 }

 .identity-copy h2 {
   color: #fff;
   font-size: clamp(2.5rem, 4.5vw, 4.25rem);
   margin-bottom: 14px;
   letter-spacing: -.04em
 }

 .identity-copy .identity-lead {
   font-size: 1.42rem;
   color: #fff;
   margin-bottom: 18px
 }

 .identity-copy p {
   line-height: 1.95;
   margin: 0 0 16px;
   color: rgba(255, 255, 255, .82)
 }

 .identity-aside {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px
 }

 .identity-stat-card {
   background: rgba(255, 255, 255, .11);
   border: 1px solid rgba(255, 255, 255, .18);
   backdrop-filter: blur(10px);
   border-radius: 24px;
   padding: 24px 22px;
   color: #fff;
   box-shadow: 0 16px 30px rgba(6, 19, 28, .12)
 }

 .identity-stat-icon {
   width: 56px;
   height: 56px;
   border-radius: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #ffffff 0%, #b9edf6 100%);
   color: #0f4154;
   font-size: 1.3rem;
   box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
   margin-bottom: 16px
 }

 .identity-stat-card h3 {
   color: #fff;
   font-size: 1.15rem;
   margin: 0 0 10px;
   letter-spacing: -.02em
 }

 .identity-stat-card p {
   margin: 0;
   color: rgba(255, 255, 255, .78);
   line-height: 1.8
 }

 .identity-purpose-section .center-heading,
 .values-section .center-heading {
   text-align: center;
   max-width: 860px;
   margin: 0 auto 36px;
   display: flex;
   flex-direction: column;
   align-items: center
 }

 .identity-purpose-section .center-heading p,
 .values-section .center-heading p {
   max-width: 700px
 }

 .premium-duo {
   gap: 26px
 }

 .premium-panel {
   position: relative;
   overflow: hidden;
   padding: 34px 32px 34px;
   border-radius: 28px;
   background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(240, 247, 249, .96));
   border: 1px solid rgba(20, 59, 79, .10);
   box-shadow: 0 22px 45px rgba(15, 42, 58, .10);
   min-height: 100%
 }

 .premium-panel::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   height: 5px;
   background: linear-gradient(90deg, #169db2, #47c8d7, #0f3041)
 }

 .panel-icon {
   width: 64px;
   height: 64px;
   border-radius: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #dff5fb, #f4fcfe);
   color: #0f4d62;
   font-size: 1.4rem;
   box-shadow: 0 18px 30px rgba(18, 84, 103, .12);
   margin-bottom: 16px
 }

 .premium-panel h2 {
   margin: 10px 0 18px;
   font-size: clamp(2.2rem, 3.2vw, 3.15rem)
 }

 .premium-panel p {
   font-size: 1.02rem;
   line-height: 1.95;
   color: #436373
 }

 .mission-panel {
   background: linear-gradient(180deg, #ffffff, #eef7fa)
 }

 .vision-panel {
   background: linear-gradient(180deg, #f9fdff, #edf6f8)
 }

 .premium-values-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px
 }

 .premium-value-item {
   padding: 28px 20px;
   border-radius: 24px;
   background: linear-gradient(180deg, #ffffff 0%, #f4f9fb 100%);
   border: 1px solid rgba(22, 50, 60, .09);
   box-shadow: 0 18px 36px rgba(16, 41, 56, .08);
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   min-height: 100%
 }

 .premium-value-item .value-icon {
   width: 68px;
   height: 68px;
   border-radius: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #dff5fb, #ffffff);
   color: #1191a4;
   font-size: 1.45rem;
   box-shadow: 0 18px 34px rgba(21, 111, 128, .12);
   margin-bottom: 18px
 }

 .premium-value-item h3 {
   font-size: 1.15rem;
   margin: 0 0 8px;
   color: #14384d;
   letter-spacing: -.02em
 }

 .premium-value-item p {
   margin: 0;
   color: #5b7482;
   line-height: 1.75;
   font-weight: 600
 }

 @media(max-width:1100px) {
   .identity-grid {
     grid-template-columns: 1fr
   }

   .identity-aside {
     grid-template-columns: repeat(3, minmax(0, 1fr))
   }

   .premium-values-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr))
   }
 }

 @media(max-width:820px) {
   .identity-shell {
     border-radius: 26px;
     padding: 26px
   }

   .identity-copy h2 {
     font-size: clamp(2.3rem, 7vw, 3.5rem)
   }

   .identity-aside {
     grid-template-columns: 1fr
   }

   .premium-values-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .premium-panel {
     padding: 28px 24px;
     border-radius: 24px
   }
 }

 @media(max-width:560px) {
   .identity-story-section {
     padding-top: 38px
   }

   .identity-copy .identity-lead {
     font-size: 1.16rem
   }

   .premium-values-grid {
     grid-template-columns: 1fr
   }

   .premium-value-item {
     padding: 24px 18px
   }

   .premium-panel h2 {
     font-size: 2.2rem
   }

   .panel-icon,
   .premium-value-item .value-icon,
   .identity-stat-icon {
     width: 58px;
     height: 58px;
     border-radius: 18px
   }
 }


 /* Maletalibre: restrained premium motion on About only */
 body:has(.identity-story-section) main.page-main {
   position: relative;
   isolation: isolate;
   overflow: hidden
 }

 .identity-ambient {
   position: absolute;
   z-index: -1;
   inset: 55rem -10% auto;
   pointer-events: none;
   height: 1550px;
   overflow: hidden
 }

 .identity-ambient span {
   position: absolute;
   display: block;
   width: clamp(260px, 39vw, 600px);
   aspect-ratio: 1;
   border-radius: 50%;
   filter: blur(75px);
   opacity: .19;
   transform: translate3d(0, 0, 0);
   will-change: transform;
   animation: maleta-drift 20s ease-in-out infinite alternate
 }

 .identity-ambient span:nth-child(1) {
   top: 0;
   left: -5%;
   background: #36b6d4
 }

 .identity-ambient span:nth-child(2) {
   top: 33%;
   right: -10%;
   background: #74b8e7;
   animation-delay: -9s;
   animation-duration: 25s
 }

 .identity-ambient span:nth-child(3) {
   bottom: 5%;
   left: 24%;
   background: #83dfd1;
   animation-delay: -5s;
   animation-duration: 23s
 }

 @keyframes maleta-drift {
   from {
     transform: translate3d(-24px, -14px, 0) scale(.93)
   }

   to {
     transform: translate3d(55px, 40px, 0) scale(1.12)
   }
 }

 .identity-shell {
   isolation: isolate
 }

 .identity-shimmer {
   position: absolute;
   z-index: -1;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(110deg, transparent 15%, rgba(165, 237, 248, .10) 43%, transparent 65%);
   background-size: 220% 100%;
   animation: maleta-shimmer 15s ease-in-out infinite
 }

 @keyframes maleta-shimmer {

   0%,
   20% {
     background-position: 150% 0
   }

   65%,
   100% {
     background-position: -150% 0
   }
 }

 .identity-shell:after {
   content: "";
   position: absolute;
   left: 8%;
   bottom: 0;
   width: 48%;
   height: 3px;
   border-radius: 5px;
   background: linear-gradient(90deg, transparent, #97e3e9, transparent);
   transform-origin: left;
   animation: maleta-line 8s ease-in-out infinite;
   opacity: .72
 }

 @keyframes maleta-line {

   0%,
   100% {
     transform: scaleX(.3);
     opacity: .3
   }

   50% {
     transform: scaleX(1);
     opacity: .9
   }
 }

 .identity-stat-card,
 .premium-panel,
 .premium-value-item,
 .value-icon,
 .panel-icon {
   transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease
 }

 @media(hover:hover) and (pointer:fine) {
   .identity-stat-card:hover {
     transform: translateY(-6px);
     background: rgba(255, 255, 255, .15);
     border-color: rgba(255, 255, 255, .38)
   }

   .premium-panel:hover {
     transform: translateY(-8px);
     box-shadow: 0 32px 65px rgba(15, 42, 58, .16);
     border-color: rgba(22, 158, 178, .25)
   }

   .premium-value-item:hover {
     transform: translateY(-7px);
     border-color: rgba(22, 158, 178, .32);
     box-shadow: 0 25px 43px rgba(16, 41, 56, .14)
   }

   .premium-value-item:hover .value-icon,
   .premium-panel:hover .panel-icon {
     transform: translateY(-3px) scale(1.045)
   }
 }

 .identity-motion-item {
   transition: opacity .75s ease, transform .75s cubic-bezier(.2, .8, .2, 1)
 }

 .identity-motion-item.motion-before {
   opacity: 0;
   transform: translateY(28px)
 }

 .identity-motion-item.motion-in {
   opacity: 1;
   transform: translateY(0)
 }

 .premium-values-grid .premium-value-item:nth-child(2) {
   transition-delay: 70ms
 }

 .premium-values-grid .premium-value-item:nth-child(3) {
   transition-delay: 120ms
 }

 .premium-values-grid .premium-value-item:nth-child(4) {
   transition-delay: 170ms
 }

 @media(max-width:700px) {
   .identity-ambient {
     inset: 35rem -45% auto;
     height: 1650px
   }

   .identity-ambient span {
     filter: blur(60px);
     opacity: .13
   }

   .premium-panel:hover,
   .premium-value-item:hover {
     transform: none
   }
 }

 @media(prefers-reduced-motion:reduce) {

   .identity-ambient span,
   .identity-shimmer,
   .identity-shell:after {
     animation: none !important
   }

   .identity-motion-item,
   .identity-stat-card,
   .premium-panel,
   .premium-value-item,
   .value-icon,
   .panel-icon {
     transition: none !important;
     animation: none !important;
     transform: none !important;
     opacity: 1 !important
   }
 }

 /* Guías de servicios e información útil. */
 .guide-hero {
   position: relative;
   min-height: 440px;
   display: flex;
   align-items: flex-end;
   color: #fff;
   overflow: hidden;
   background: #0f2d3d
 }

 .guide-hero-image,
 .guide-hero-overlay {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%
 }

 .guide-hero-image {
   object-fit: cover;
   object-position: center
 }

 .guide-hero-overlay {
   background: linear-gradient(90deg, rgba(5, 31, 43, .87), rgba(5, 31, 43, .54) 58%, rgba(5, 31, 43, .22))
 }

 .guide-hero-content {
   position: relative;
   padding-top: 105px;
   padding-bottom: 62px;
   max-width: 1160px
 }

 .guide-back {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 38px;
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   opacity: .94
 }

 .guide-back:hover {
   text-decoration: underline
 }

 .guide-hero .eyebrow {
   color: #9fe7ef;
   margin-bottom: 12px
 }

 .guide-hero h1 {
   max-width: 720px;
   font-size: clamp(37px, 5vw, 66px);
   line-height: 1.08;
   letter-spacing: -.045em;
   margin: 0 0 18px
 }

 .guide-hero p {
   max-width: 650px;
   margin: 0;
   color: #f3fafc;
   font-size: 18px;
   line-height: 1.75
 }

 .guide-content {
   background: #f5fafb
 }

 .guide-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr);
   gap: clamp(32px, 6vw, 88px);
   align-items: start
 }

 .guide-layout h2 {
   font-size: clamp(29px, 3.4vw, 43px);
   line-height: 1.15;
   letter-spacing: -.04em;
   color: #14384d;
   margin: 10px 0 18px
 }

 .guide-intro {
   max-width: 720px;
   color: #4f6c7a;
   margin: 0 0 28px
 }

 .guide-tips {
   display: grid;
   gap: 12px
 }

 .guide-tip {
   display: grid;
   grid-template-columns: 45px 1fr;
   gap: 15px;
   align-items: center;
   padding: 18px 20px;
   background: #fff;
   border: 1px solid rgba(20, 56, 77, .1);
   border-radius: 14px;
   box-shadow: 0 10px 28px rgba(12, 45, 60, .05)
 }

 .guide-tip span {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #e6f7f8;
   color: #188ca1;
   font-size: 12px;
   font-weight: 800
 }

 .guide-tip p {
   margin: 0;
   color: #315566;
   font-size: 15px;
   line-height: 1.55
 }

 .guide-help-card {
   position: sticky;
   top: 118px;
   padding: 30px;
   background: #123b4b;
   color: #fff;
   border-radius: 20px;
   box-shadow: 0 22px 45px rgba(9, 39, 53, .16)
 }

 .guide-help-card>svg {
   color: #73dce8;
   margin-bottom: 18px
 }

 .guide-help-card h2 {
   color: #fff;
   font-size: 25px;
   margin: 0 0 12px
 }

 .guide-help-card p {
   font-size: 14px;
   line-height: 1.75;
   color: #d6edf1;
   margin: 0 0 23px
 }

 .guide-help-card .button {
   width: 100%;
   justify-content: center;
   font-size: 13px
 }

 /* Las tres tarjetas de Nuestra historia comparten exactamente la misma entrada. */
 .identity-aside .identity-stat-card {
   animation: story-card-in .7s cubic-bezier(.2, .8, .2, 1) both
 }

 .identity-aside .identity-stat-card:nth-child(2),
 .identity-aside .identity-stat-card:nth-child(3) {
   animation-delay: 0s
 }

 @keyframes story-card-in {
   from {
     opacity: 0;
     transform: translateY(28px)
   }

   to {
     opacity: 1;
     transform: translateY(0)
   }
 }

 @media(max-width:820px) {
   .guide-hero {
     min-height: 390px
   }

   .guide-layout {
     grid-template-columns: 1fr
   }

   .guide-help-card {
     position: static
   }

   .guide-hero-content {
     padding-top: 92px;
     padding-bottom: 48px
   }
 }

 @media(max-width:600px) {
   .guide-hero {
     min-height: 410px
   }

   .guide-hero-content {
     padding-top: 86px;
     padding-bottom: 38px
   }

   .guide-back {
     margin-bottom: 28px;
     font-size: 12px
   }

   .guide-hero h1 {
     font-size: 39px
   }

   .guide-hero p {
     font-size: 15px
   }

   .guide-tip {
     padding: 16px
   }

   .guide-tip p {
     font-size: 14px
   }

   .guide-help-card {
     padding: 25px 21px
   }
 }

 @media(prefers-reduced-motion:reduce) {
   .identity-aside .identity-stat-card {
     animation: none !important
   }
 }

 @media(prefers-reduced-motion:reduce) {

   .canoa1,
   .airplane-loop {
     animation: none;
     transform: none
   }

   .airplane-loop {
     left: 50%;
     margin-left: -38px
   }
 }

 /* El detalle se mantiene proporcionado y separado del titular en pantallas pequeñas. */
 @media(max-width:800px) {
   .airplane-lane {
     top: clamp(94px, 14vh, 132px);
     width: min(74vw, 540px);
     height: 56px;
   }

   .airplane-loop {
     top: 4px;
     width: 64px;
   }
 }

 @media(max-width:600px) {
   .airplane-lane {
     top: clamp(76px, 12vh, 104px);
     width: 82vw;
     height: 52px;
   }

   .airplane-loop {
     width: 56px;
   }
 }

 /* Centra la última fila de tres valores en pantallas de escritorio. */
 @media(min-width:1101px) {
   .premium-values-grid {
     grid-template-columns: repeat(12, minmax(0, 1fr))
   }

   .premium-values-grid .premium-value-item {
     grid-column: span 3
   }

   .premium-values-grid .premium-value-item:nth-child(5) {
     grid-column: 2 / span 3
   }
 }

/* Motor visible y acceso a contratación disponible en todas las páginas. */

.topbar .online-availability {display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.14);padding:4px 12px;font-weight:700;white-space:nowrap;}
.tour-examples {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 32px;}
.tour-example {padding:28px;background:hsl(var(--card));color:hsl(var(--foreground));border:1px solid hsl(var(--border));border-radius:14px;}
.tour-example>svg {color:#f70759;margin-bottom:14px;}
.tour-example h3 {font-size:20px;margin-bottom:12px;}
.tour-example p {font-size:14px;margin-bottom:20px;}
.partner-embed--activities {height:auto;overflow:visible;}
.partner-embed--activities .civitatis-iframe {width:100%;height:1900px;min-height:680px;border:0;}
@media(max-width:800px){.tour-examples{grid-template-columns:1fr;}.partner-embed--activities .civitatis-iframe{height:4800px;}.topbar .wide{flex-wrap:wrap;gap:6px;}}
@media(max-width:480px){.booking-direct{scroll-margin-top:150px;}.topbar .online-availability{font-size:11px;}}

/* Presentación compacta del mismo iframe, inspirada en el buscador azul. */
.booking-direct {
  width:100%; padding:30px clamp(16px,4vw,64px);
  background:linear-gradient(115deg,#24477b 0%,#162f5e 52%,#0c1c3c 100%);
  color:#fff; scroll-margin-top:130px;
}
.booking-direct-shell {width:100%; max-width:1200px; margin-inline:auto;}
.booking-direct-heading {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;}
.booking-direct-heading>span {display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:700;}
.booking-direct-heading .booking-direct-availability {font-size:12px; font-weight:600; padding:7px 12px; border:1px solid #ffffff30; border-radius:999px;}
.booking-direct-viewport {height:390px; width:100%; max-width:1200px; margin-inline:auto; border-radius:12px; border:1px solid #ffffff50; background:#fff; overflow:hidden; box-shadow:0 12px 30px #030e2530;}
.booking-direct-viewport iframe {display:block; width:100%; height:100%; border:0;}
.booking-direct-actions {display:flex; justify-content:flex-end; align-items:center; gap:24px; margin-top:12px;}
.booking-direct-fallback,.booking-size-toggle {display:inline-flex; align-items:center; gap:7px; padding:5px 0; color:#fff; font:inherit; font-size:12px; line-height:1.5; background:none; border:0; cursor:pointer;}
.booking-direct-fallback:hover,.booking-size-toggle:hover {text-decoration:underline;}
.booking-direct-fallback:focus-visible,.booking-size-toggle:focus-visible {outline:2px solid #fff; outline-offset:5px; border-radius:2px;}
@media(max-width:800px){
  .booking-direct{padding:20px 14px;}
  .booking-direct-heading{flex-wrap:wrap; gap:10px;}
  .booking-direct-heading>span{font-size:16px;}
  .booking-direct-viewport{height:375px;}
}
@media(max-width:480px){
  .booking-direct{scroll-margin-top:150px;}
  .booking-direct-viewport{height:355px;}
  .booking-direct-actions{justify-content:space-between; gap:12px; flex-wrap:wrap;}
  .booking-direct-heading .booking-direct-availability{font-size:11px;}
}
@media(prefers-reduced-motion:reduce){.hero-gallery-image{animation:none}.hero-gallery-image--family{opacity:1}}

/* Responsive navigation, touch controls and content reflow. */
:root { --header-height: 98px; }
html { scroll-padding-top: calc(var(--header-height) + 16px); }
.nav-row { gap: 18px; }
.nav-actions { flex-shrink: 0; gap: 8px; }
.nav-social { display: flex; align-items: center; gap: 8px; }
.nav-social .icon-button { flex: 0 0 44px; }
.nav-whatsapp { color: #128c4a; }
.nav-facebook { color: #1877f2; }
.dark .nav-whatsapp { color: #65e59b; }
.dark .nav-facebook { color: #7eb6ff; }
.advisor { white-space: normal; min-height: 44px; }
.nav-actions svg { flex-shrink: 0; }
.partner-embed--national { width: min(100%, 367px); height: 355px; border: 0; }
.partner-embed--national { overflow: auto; }
.partner-embed--national iframe { width: 367px; height: 355px; max-width: none; }
.partner-embed--national.is-scaled { position: relative; height: auto; aspect-ratio: 367 / 355; overflow: hidden; }
.partner-embed--national.is-scaled iframe { position: absolute; inset: 0; transform: scale(var(--widget-scale, 1)); transform-origin: top left; }
.widget-fallback { text-align: center; margin-top: 12px; }
.booking-direct.is-expanded .booking-direct-viewport { height: min(900px, 80dvh); min-height: 355px; }
main, .wide > *, .form-grid > *, .footer-main > *, .contact-layout > *,
.reservation-layout > *, .about > *, .faq > *, .guide-layout > * { min-width: 0; }
.footer-main a, .contact-details, .travel-copy, .guide-tip p,
.identity-copy, .premium-panel { overflow-wrap: anywhere; }
input, select, textarea { max-width: 100%; min-width: 0; }
.button { max-width: 100%; text-align: center; }
.form-grid input, .form-grid select, .form-grid textarea { font-size: 16px; }
.floating-whatsapp { bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 1201px) {
  .logo-crop { width: 175px; }
  .nav-links { gap: 20px; }
}
@media (max-width: 1200px) {
  .nav-row { height: 82px; }
  .logo-crop { width: 175px; height: 78px; }
  .mobile-menu { display: inline-flex; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: hsl(var(--background)); padding: 12px max(20px, env(safe-area-inset-left));
    box-shadow: 0 10px 20px #16374a18; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
  .nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 13px; min-height: 46px; }
  .nav-actions .advisor { display: inline-flex; width: auto; font-size: 13px; padding: 10px 14px; gap: 8px; }
  .guide-help-card { top: calc(var(--header-height) + 16px); }
}
@media (max-width: 700px) {
  .nav-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px;
    height: auto; min-height: 120px; gap: 4px 8px; padding-block: 4px 10px; }
  .logo-crop { width: min(158px, 100%); height: 58px; grid-column: 1; grid-row: 1; }
  .logo-crop img { max-height: 58px; }
  .nav-actions { display: contents; }
  .theme-toggle { grid-column: 2; grid-row: 1; }
  .mobile-menu { grid-column: 3; grid-row: 1; }
  .nav-actions .advisor { grid-column: 1; grid-row: 2; font-size: 12px; padding: 10px 8px; gap: 6px; }
  .nav-social { grid-column: 2 / 4; grid-row: 2; }
  .hero, .page-main { min-height: calc(100dvh - var(--header-height)); }
  .filters { margin-right: 0; padding-right: 0; }
  .filters button, .destination a, .service a, .footer-main a,
  .footer-bottom a, .text-link, .booking-size-toggle, .booking-direct-fallback { min-height: 44px; }
  .footer-main a { display: flex; align-items: center; }
  .form-grid label { font-size: 13px; }
  .form-note, .consent { font-size: 12px; }
  .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .gallery figure { min-width: 0; height: 240px; }
}
@media (max-width: 380px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .benefits-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }