*{box-sizing:border-box;}
:root{
  --cream:#F3F6F8; --sand:#E1E8EC; --terracotta:#5E82A6; --ocean:#33475A; --ink:#26333D; --stone:#748089;
  --line: rgba(38,51,61,0.14);
}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--cream); color:var(--ink); font-family:'Jost',sans-serif; font-size:17px; line-height:1.65;}
h1,h2,h3{font-family:'Playfair Display',serif; font-weight:500; line-height:1.15; margin:0 0 .4em;}
p{margin:0 0 1em; max-width:58ch;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
section{padding:46px 0;}
.center{text-align:center; margin-left:auto; margin-right:auto;}
.eyebrow{letter-spacing:.08em; font-size:.8rem; color:var(--terracotta); font-weight:600; text-transform:uppercase;}

header{position:sticky; top:0; background:var(--cream); z-index:50; border-bottom:1px solid var(--line);}
.header-inner{display:flex; align-items:center; justify-content:center; position:relative; padding:10px 24px; max-width:1080px; margin:0 auto;}
.logo{font-family:'Playfair Display',serif; font-style:italic; font-size:1.7rem; text-align:center; text-decoration:none; color:var(--ink); display:block;}
.logo small{display:block; font-family:'Jost',sans-serif; font-style:normal; font-size:.62rem; letter-spacing:.2em; color:var(--stone); margin-top:2px;}
.logo img{height:84px; width:auto; display:block;}
.burger{position:absolute; right:24px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:6px;}
.burger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0;}

.nav-overlay{position:fixed; inset:0; background:var(--ocean); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; z-index:100;}
.nav-overlay.open{opacity:1; pointer-events:auto;}
.nav-overlay .close{position:absolute; top:24px; right:28px; background:none; border:none; color:var(--cream); font-size:1.8rem; cursor:pointer;}
.nav-overlay nav{display:flex; flex-direction:column; gap:26px; text-align:center;}
.nav-overlay a{color:var(--cream); font-family:'Playfair Display',serif; font-size:1.8rem; text-decoration:none; font-style:italic;}
.nav-overlay a.wa{color:var(--terracotta);}
.nav-item{position:relative;}
.submenu{max-height:0; overflow:hidden; opacity:0; transition:max-height .25s ease, opacity .2s ease; display:flex; flex-direction:column; gap:14px;}
.nav-item:hover .submenu{max-height:160px; opacity:1; margin-top:14px;}
.submenu a{font-size:1.05rem; font-style:normal; color:var(--sand); opacity:.9;}
.submenu a:hover{color:var(--terracotta);}

.art{height:220px; border-radius:4px; background:linear-gradient(135deg,var(--sand),var(--terracotta) 140%); display:flex; align-items:center; justify-content:center; color:var(--cream); font-family:'Playfair Display',serif; font-style:italic; font-size:1rem; text-align:center; padding:12px;}
.hero{padding-top:36px;}
.hero .art{height:340px;}
.hero h1{font-size:2.3rem; margin-top:30px;}
.hero p.lede{color:var(--stone); font-size:1.08rem;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.card{background:#fff; border:1px solid var(--line); text-decoration:none; color:inherit; display:block;}
.card .art{height:190px; background:var(--sand); color:var(--ocean);}
.card .body{padding:26px;}
.card h3{font-size:1.4rem;}
.card p{color:var(--stone); font-size:.96rem;}
.card .link{display:inline-block; margin-top:8px; color:var(--terracotta); font-weight:600; font-size:.9rem;}

.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
.testi{background:#fff; border:1px solid var(--line); padding:24px;}
.testi p{font-style:italic; color:var(--ink); font-size:.96rem;}
.testi .who{color:var(--stone); font-size:.85rem; margin:0;}

.testi-viewport{position:relative; overflow:hidden; margin-top:24px; padding:6px 0;}
.testi-viewport::before, .testi-viewport::after{content:"";position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;}
.testi-viewport::before{left:0; background:linear-gradient(to right, var(--cream), transparent);}
.testi-viewport::after{right:0; background:linear-gradient(to left, var(--cream), transparent);}
.testi-track{display:flex; gap:22px; width:max-content; animation:testi-scroll 34s linear infinite;}
.testi-track:hover{animation-play-state:paused;}
.testi-track .testi{flex:0 0 280px; margin:0;}
@keyframes testi-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

section.alt{background:#FFFDF9;}

.map-row{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px; align-items:start;}
.map-card{background:#fff; border:1px solid var(--line); margin-top:0;}
.map-card iframe{width:100%; height:130px; border:0; display:block;}
.map-card .label{padding:12px 16px; font-family:'Playfair Display',serif; font-style:italic; color:var(--ocean); font-size:.95rem;}
.nearby{background:#fff; border:1px solid var(--line); padding:20px 22px;}
.nearby h3{font-size:1rem; margin-bottom:10px;}
.nearby ul{list-style:none; margin:0; padding:0;}
.nearby li{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line); font-size:.9rem; color:var(--stone);}
.nearby li:first-of-type{border-top:none;}
.nearby li b{color:var(--ink); font-weight:500;}
@media (max-width:760px){ .map-row{grid-template-columns:1fr;} }

.back-link{display:inline-block; margin-bottom:24px; color:var(--terracotta); text-decoration:none; font-weight:600; font-size:.9rem;}

.detail-hero .art{height:280px;}
.carousel{position:relative; height:340px; overflow:hidden; border-radius:4px; background:var(--sand);}
.carousel .slide{display:none; width:100%; height:100%; object-fit:cover;}
.carousel .slide.active{display:block;}
.car-btn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(27,38,33,.45); color:#fff; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1.3rem; line-height:1;}
.car-btn.prev{left:14px;} .car-btn.next{right:14px;}

.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:26px; align-items:stretch;}
.pkg{background:#fff; border:1px solid var(--line); padding:0; display:flex; flex-direction:column;}
.pkg .art{height:170px; border-radius:0;}
.pkg.best{border-color:var(--terracotta); border-width:2px;}
.pkg .badge{display:inline-block; background:var(--terracotta); color:var(--cream); font-size:.72rem; font-weight:700; letter-spacing:.05em; padding:3px 10px; border-radius:3px; margin-bottom:10px;}
.pkg h3{font-size:1.25rem;}
.pkg p{color:var(--stone); font-size:.94rem;}
.pkg-body{padding:26px; display:flex; flex-direction:column; flex:1;}
.pkg-body p{flex:1;}
.pkg-body a{margin-top:auto; align-self:flex-start;}

.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:16px;}
.info-grid ul{margin:0; padding-left:18px; color:var(--stone); font-size:.94rem;}
.info-grid li{margin-bottom:6px;}
.pack-block{border-top:1px solid var(--line); padding:22px 0;}
.pack-block h3{font-size:1.4rem;}
.pack-meta{display:flex; gap:20px; flex-wrap:wrap; margin:14px 0 20px; font-size:.9rem; color:var(--stone);}
.pack-meta b{color:var(--ink);}
.meta-row{display:flex; gap:24px; margin:20px 0; flex-wrap:wrap;}
.meta-row .item{border-left:3px solid var(--terracotta); padding-left:12px;}
.meta-row .item b{display:block; font-family:'Playfair Display',serif; font-size:1.2rem;}
.meta-row .item span{color:var(--stone); font-size:.85rem;}

.itin{margin-top:30px;}
.itin .day{display:grid; grid-template-columns:110px 1fr; gap:24px; padding:20px 0; border-top:1px solid var(--line);}
.itin .day:last-child{border-bottom:1px solid var(--line);}
.itin .day .label{font-family:'Playfair Display',serif; font-style:italic; color:var(--terracotta);}

footer#contact{background:var(--ocean); color:var(--cream); text-align:center; padding:46px 0 36px;}
footer#contact h2{color:var(--cream);}
footer#contact p{color:#D9E4E2; margin-left:auto; margin-right:auto;}
.wa-btn{display:inline-block; margin-top:18px; background:var(--terracotta); color:var(--cream); padding:14px 30px; border-radius:3px; text-decoration:none; font-weight:600;}
.copyright{text-align:center; font-size:.8rem; color:var(--stone); padding:16px 0; background:var(--cream);}

.wa-float{position:fixed; bottom:22px; right:22px; background:var(--terracotta); color:var(--cream); width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1.5rem; z-index:60; box-shadow:0 4px 14px rgba(0,0,0,.2);}

@media (max-width:760px){
  .grid-2, .grid-3, .testi-grid{grid-template-columns:1fr;}
  .hero h1{font-size:1.8rem;}
  section{padding:36px 0;}
  .itin .day{grid-template-columns:1fr; gap:4px;}
}

/* Bloques de barcos y habitaciones */
.boat-package-block {
  padding: 2rem;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.boat-header h3 {
  font-size: 1.6rem;
  margin-top: 0.5rem;
  color: #1f2937;
}
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 20px;
  background: #2563eb;
  color: #fff;
  text-transform: uppercase;
}
.badge-gold {
  background: #d97706;
}

/* Grilla de habitaciones */
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.room-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.room-image {
  position: relative;
  height: 200px;
}
.room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
}
.room-details {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.room-features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.room-features li {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 0.4rem;
}
.room-price-book {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f3f4f6;
  padding-top: 1rem;
}
.room-price .amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
}
.room-price .per {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Grid de Incluido / No Incluido */
.included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.included-card {
  background: #fafafa;
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid #eee;
}
.checklist, .crosslist {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.checklist li, .crosslist li {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
}
.checklist i { color: #10b981; }
.crosslist i { color: #ef4444; }
.crosslist i { color: #ef4444; }
/* LIGHTBOX / IMAGE MODAL CON FLECHAS */
.img-modal {
  display: none; 
  position: fixed; 
  z-index: 99999; 
  padding-top: 50px; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,0.9); 
}

.img-modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 85vh; 
  object-fit: contain; 
  border-radius: 4px;
}

.img-modal-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  z-index: 100000;
}

.img-modal-close:hover {
  color: #bbb;
  text-decoration: none;
}

/* Flechas laterales del modal */
.img-modal-prev,
.img-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  font-size: 50px;
  padding: 15px 25px;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 100000;
  border-radius: 4px;
}

.img-modal-prev:hover,
.img-modal-next:hover {
  background: rgba(0, 0, 0, 0.8);
}

.img-modal-prev { left: 20px; }
.img-modal-next { right: 20px; }

/* Ajustes para móviles */
@media (max-width: 768px) {
  .img-modal-prev, .img-modal-next {
    font-size: 30px;
    padding: 10px 15px;
  }
  .img-modal-prev { left: 5px; }
  .img-modal-next { right: 5px; }
}