/* Costa Caribe Tulum — design system, matched to the live site
   Palette: blush cream + warm taupe, near-black ink, single mustard-gold accent
   Type: Questrial (headlines, 96px/30px on the live site) + Wix Madefor Text (body) + Lora (accent serif, buttons/links) */

@import url('https://fonts.googleapis.com/css2?family=Questrial&family=Wix+Madefor+Text:wght@400;500;600&family=Lora:ital,wght@0,500;0,600;1,500&display=swap');

:root{
  --blush: #FBF0E8;
  --taupe: #DCCFC0;
  --taupe-deep: #CBBBA8;
  --ink: #241E19;
  --ink-soft: #6B6058;
  --mustard: #E8B316;
  --mustard-dark: #C89A0F;
  --line: rgba(36,30,25,0.16);
  --max: 1140px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--blush);
  color:var(--ink);
  font-family:'Wix Madefor Text', sans-serif;
  font-size:20px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:'Questrial', sans-serif;
  font-weight:400;
  line-height:1.08;
  margin:0 0 0.4em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.6rem, 7vw, 6rem);}
h2{font-size:clamp(1.6rem, 3vw, 1.875rem);}
h3{font-size:1.875rem;}
p{margin:0 0 1em; max-width:62ch;}
.eyebrow{
  font-family:'Lora', serif;
  font-style:italic;
  font-weight:500;
  color:var(--ink-soft);
  font-size:1.02rem;
  margin-bottom:0.6em;
  display:block;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.section{padding:96px 0;}
.section--tight{padding:60px 0;}

/* Header / nav */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(251,240,232,0.94);
  backdrop-filter:blur(6px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px; max-width:var(--max); margin:0 auto;
}
.wordmark{
  font-family:'Questrial', sans-serif; font-size:1.5rem; font-weight:400;
  text-decoration:none; color:var(--ink);
  display:flex; align-items:center; gap:16px;
}
.wordmark span{font-weight:500;}
.logo-img{height:200px; width:200px; display:block; border-radius:50%;}
.navlinks{display:flex; gap:34px; list-style:none; margin:0; padding:0; align-items:center;}
.navlinks a{text-decoration:none; font-size:0.98rem; color:var(--ink); transition:opacity .15s; opacity:0.72;}
.navlinks a:hover, .navlinks a.active{opacity:1;}
.nav-cta{
  font-family:'Lora', serif; font-weight:500; font-style:italic;
  opacity:1 !important; border-bottom:1px solid var(--ink);
  padding-bottom:2px;
}
.navtoggle{display:none;}

@media (max-width:860px){
  .logo-img{height:90px; width:90px;}
}

@media (max-width:860px){
  .navlinks{position:fixed; top:74px; left:0; right:0; height:calc(100vh - 74px); background:var(--blush); flex-direction:column;
    padding:32px 32px; gap:24px; transform:translateX(100%); transition:transform .2s ease; overflow-y:auto; z-index:39;}
  .navlinks.open{transform:translateX(0);}
  .navtoggle{display:block; background:none; border:none; font-size:1.6rem; color:var(--ink); cursor:pointer;}
}

/* Hero */
.hero{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:0; align-items:stretch;
  min-height:76vh;
}
.hero-copy{display:flex; flex-direction:column; justify-content:center; padding:60px 60px;}
.hero-copy p.lede{font-size:1.15rem; color:var(--ink-soft); max-width:46ch;}
.hero-cta-row{display:flex; gap:20px; flex-wrap:wrap; align-items:center; margin-top:24px;}
.hero-media{position:relative; overflow:hidden;}
.hero-media img{width:100%; height:100%; object-fit:cover;}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .hero-media{height:56vw;}
  .hero-copy{padding:48px 24px;}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 30px; font-weight:500; font-size:1rem;
  text-decoration:none; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-family:'Lora', serif;
}
.btn-primary{background:var(--mustard); color:var(--ink);}
.btn-primary:hover{background:var(--mustard-dark);}
.btn-ghost{background:transparent; border-color:var(--ink); color:var(--ink); border-radius:0; font-family:'Wix Madefor Text',sans-serif; padding:13px 0; border:none; border-bottom:1px solid var(--ink);}
.btn-ghost:hover{opacity:0.65;}

/* Direct-booking banner */
.direct-banner{
  background:var(--taupe); color:var(--ink);
  padding:14px 0; text-align:center; font-size:0.95rem;
}
.direct-banner strong{font-family:'Lora', serif; font-style:italic; font-weight:600;}

/* Grid + plain columns (no cards) */
.grid{display:grid; gap:0;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:820px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.tile{
  padding:8px 36px; text-align:center; border-left:1px solid var(--line);
}
.tile:first-child{border-left:none;}
@media (max-width:820px){
  .tile{border-left:none; border-top:1px solid var(--line); padding:32px 8px;}
  .tile:first-child{border-top:none;}
}
.tile-icon{font-size:1.6rem; margin-bottom:14px; opacity:0.7;}
.tile h3{margin-bottom:0.35em; font-size:1.875rem;}
.tile p{margin:0 auto; max-width:32ch;}

.room{border-top:1px solid var(--line); padding:34px 0; display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:center;}
.room img{width:100%; height:230px; object-fit:cover;}
@media (max-width:700px){.room{grid-template-columns:1fr;} .room img{height:auto;}}

/* Booking widget frame */
.booking-panel{
  background:#fff; border:1px solid var(--line);
  padding:40px; max-width:720px; margin:0 auto;
}
.booking-embed-slot{
  border:2px dashed var(--mustard-dark); background:rgba(232,179,22,0.06);
  padding:44px 24px; text-align:center; color:var(--ink-soft); font-size:0.95rem;
}
.perk-list{list-style:none; margin:22px 0; padding:0; display:grid; gap:11px;}
.perk-list li{display:flex; gap:10px; align-items:flex-start;}
.perk-list li::before{content:"—"; color:var(--ink-soft); flex-shrink:0;}

/* Reviews */
.review{border-top:1px solid var(--line); padding:26px 0;}
.review p{font-style:italic; color:var(--ink-soft); font-family:'Lora', serif; font-size:1.03rem;}
.review cite{font-style:normal; font-weight:500; color:var(--ink); display:block; margin-top:10px; font-family:'Wix Madefor Text',sans-serif; font-size:0.92rem;}

/* Newsletter capture */
.capture{
  background:var(--taupe); padding:64px 0;
}
.capture form{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; max-width:520px;}
.capture input[type=email]{
  flex:1; min-width:220px; padding:15px 18px; border:1px solid var(--ink);
  background:var(--blush); color:var(--ink); font-family:'Wix Madefor Text',sans-serif;
}
.capture input::placeholder{color:var(--ink-soft);}

/* Footer — matches live site: same background, hairline columns, no dark block */
footer.site{background:var(--blush); border-top:1px solid var(--line); padding:56px 0 30px;}
footer.site a{color:var(--ink); text-decoration:none; opacity:0.75;}
footer.site a:hover{opacity:1;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid > div{border-left:1px solid var(--line); padding-left:32px;}
.foot-grid > div:first-child{border-left:none; padding-left:0;}
@media (max-width:700px){.foot-grid > div{border-left:none; padding-left:0;}}
.foot-grid h3{color:var(--ink); font-size:0.95rem; font-weight:500; margin-bottom:12px;}
.foot-grid p{color:var(--ink-soft); font-size:0.95rem;}
.foot-bottom{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-size:0.85rem; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

.faq-item{border-top:1px solid var(--line); padding:24px 0;}
.faq-item h3{margin-bottom:8px; font-size:1.875rem;}

.article-table{width:100%; border-collapse:collapse; margin:28px 0; font-size:0.95rem;}
.article-table th{text-align:left; font-family:'Questrial',sans-serif; font-weight:400; font-size:1rem; padding:12px 16px; border-bottom:2px solid var(--ink); background:var(--taupe);}
.article-table td{padding:12px 16px; border-bottom:1px solid var(--line);}
.article-table tr:last-child td{border-bottom:none;}
@media (max-width:700px){.article-table{font-size:0.85rem;} .article-table th, .article-table td{padding:10px 8px;}}