/* ============================================================
   HOTEL BOUTIQUE MARGOT — Design tokens
   Palette: dusk ocean teal / warm sand / Acapulco sunset coral
   Type: Fraunces (display) + Public Sans (body) + IBM Plex Mono (data)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ocean-deep:#0F3D3E;
  --ocean-mid:#175457;
  --sand:#EFE4CE;
  --sand-light:#FBF8F2;
  --coral:#E4623F;
  --coral-dark:#C94E2E;
  --palm:#2F5233;
  --ink:#16221F;
  --ink-soft:#425048;
  --line:rgba(22,34,31,0.12);
  --line-light:rgba(251,248,242,0.22);

  --font-display:'Fraunces', serif;
  --font-body:'Public Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius:2px;
  --shadow-lift: 0 18px 40px -20px rgba(15,61,62,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--sand-light);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:600;letter-spacing:-0.01em;}
p{margin:0;line-height:1.6;}
button{font-family:var(--font-body);cursor:pointer;}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--coral);
}

.container{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--radius);border:1px solid transparent;
  font-weight:600;font-size:0.95rem;letter-spacing:0.01em;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  text-decoration:none;
}
.btn-primary{background:var(--coral);color:var(--sand-light);}
.btn-primary:hover{background:var(--coral-dark);transform:translateY(-1px);}
.btn-outline{background:transparent;border-color:var(--line-light);color:inherit;}
.btn-outline:hover{border-color:var(--coral);}
.btn-dark{background:var(--ocean-deep);color:var(--sand-light);}
.btn-dark:hover{background:#0a2c2d;}
.btn-block{width:100%;}
.btn:disabled{opacity:0.45;cursor:not-allowed;transform:none;}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(15,61,62,0.96);
  backdrop-filter:blur(6px);
  color:var(--sand-light);
  border-bottom:1px solid var(--line-light);
}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;height:78px;}
.brand{display:flex;flex-direction:column;font-family:var(--font-display);line-height:1;}
.brand strong{font-size:1.25rem;font-weight:600;}
.brand span{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:.2em;color:var(--coral);margin-top:4px;}
.nav-links{display:flex;gap:32px;font-size:0.92rem;list-style:none;margin:0;padding:0;}
.nav-links a{text-decoration:none;opacity:0.85;}
.nav-links a:hover{opacity:1;color:var(--coral);}
.nav-cta{display:flex;align-items:center;gap:18px;}
.nav-toggle{display:none;background:none;border:none;color:var(--sand-light);font-size:1.4rem;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;align-items:center;
  color:var(--sand-light);
  background:
    linear-gradient(180deg, rgba(10,30,31,0.55) 0%, rgba(8,24,25,0.86) 85%),
    url('../images/alberca-atardecer.jpg');
  background-size:cover;
  background-position:center 30%;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:130px;
  background:var(--sand-light);
  clip-path:path('M0,60 C 240,130 480,0 720,55 C 960,110 1200,20 1440,70 L1440,140 L0,140 Z');
  transform:scaleY(1);
}
.hero-inner{position:relative;z-index:2;padding:120px 0 170px;}
.hero .eyebrow{color:var(--sand);}
.hero h1{
  font-size:clamp(2.6rem, 5.6vw, 4.6rem);
  max-width:15ch;
  margin-top:18px;
  font-weight:500;
}
.hero h1 em{font-style:italic;color:var(--coral);}
.hero p.lede{max-width:46ch;margin-top:22px;font-size:1.12rem;color:rgba(251,248,242,0.86);}
.hero-actions{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- Floating booking bar ---------- */
.book-bar{
  position:relative;z-index:5;
  margin:-96px auto 0;
  max-width:1080px;
  background:var(--sand-light);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
  padding:26px;
  display:grid;
  grid-template-columns:1.1fr 1.1fr 1fr 1fr auto;
  gap:0;
  border:1px solid var(--line);
}
.book-bar .field{
  padding:6px 22px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;
}
.book-bar .field:last-of-type{border-right:none;}
.book-bar label{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.book-bar input,.book-bar select{
  border:none;background:none;font-family:var(--font-body);font-size:1rem;font-weight:600;color:var(--ink);padding:2px 0;
}
.book-bar .go{padding:0 6px 0 22px;display:flex;align-items:center;}
.book-bar .go .btn{width:100%;height:100%;}

/* ---------- Sections ---------- */
section{padding:110px 0;}
.section-head{max-width:640px;margin-bottom:56px;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-top:14px;font-weight:500;}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.05rem;}

.rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.room-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
}
.room-media{height:230px;background:linear-gradient(135deg,var(--ocean-mid),var(--ocean-deep));position:relative;overflow:hidden;}
.room-media img{width:100%;height:100%;object-fit:cover;display:block;}
.room-media .tag{position:absolute;top:16px;left:16px;background:var(--sand-light);color:var(--ink);font-family:var(--font-mono);font-size:0.68rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:2px;z-index:2;}
.room-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.room-body h3{font-size:1.3rem;}
.room-body p{color:var(--ink-soft);font-size:0.95rem;}
.room-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
.room-price{font-family:var(--font-mono);font-weight:600;}
.room-price small{display:block;font-family:var(--font-body);font-weight:400;color:var(--ink-soft);font-size:0.72rem;}

.tide{background:var(--ocean-deep);color:var(--sand-light);}
.tide .section-head p{color:rgba(251,248,242,0.75);}
.amenity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);}
.amenity{background:var(--ocean-deep);padding:32px 26px;}
.amenity .num{font-family:var(--font-mono);color:var(--coral);font-size:0.75rem;}
.amenity h4{margin-top:14px;font-size:1.05rem;font-weight:500;}
.amenity p{margin-top:8px;font-size:0.9rem;color:rgba(251,248,242,0.72);}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:180px;
  gap:10px;
}
.gallery-grid a{display:block;overflow:hidden;border-radius:2px;position:relative;}
.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.gallery-grid a:hover img{transform:scale(1.06);}
.gallery-grid .tall{grid-row:span 2;}
.gallery-grid .wide{grid-column:span 2;}

.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.location-card{background:#fff;border:1px solid var(--line);padding:32px;border-radius:var(--radius);}
.location-card p{margin-top:6px;}
.map-box{height:340px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.map-box iframe{width:100%;height:100%;border:0;}

footer{background:var(--ink);color:rgba(251,248,242,0.7);padding:60px 0 30px;font-size:0.9rem;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:30px;border-bottom:1px solid rgba(251,248,242,0.12);}
footer h4{color:var(--sand-light);font-size:0.95rem;margin-bottom:14px;font-weight:600;}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.foot-bottom{padding-top:22px;display:flex;justify-content:space-between;font-size:0.8rem;}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .book-bar{grid-template-columns:1fr 1fr;grid-auto-rows:auto;margin:-60px 16px 0;}
  .book-bar .field{border-right:none;border-bottom:1px solid var(--line);}
  .book-bar .go{grid-column:1/-1;padding:16px 0 0;}
  .rooms-grid{grid-template-columns:1fr;}
  .amenity-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:140px;}
  .gallery-grid .tall{grid-row:span 1;}
  .gallery-grid .wide{grid-column:span 2;}
  .location-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:70px 0;}
}

/* ============================================================
   BOOKING ENGINE (booking.html)
   ============================================================ */
.booking-shell{background:var(--sand-light);min-height:100vh;}
.booking-head{background:var(--ocean-deep);color:var(--sand-light);padding:26px 0;}
.booking-head .container{display:flex;justify-content:space-between;align-items:center;}

.steps{display:flex;gap:0;list-style:none;margin:0;padding:0;background:#fff;border-bottom:1px solid var(--line);}
.steps li{
  flex:1;text-align:center;padding:18px 10px;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:3px solid transparent;position:relative;
}
.steps li.active{color:var(--ink);border-color:var(--coral);font-weight:600;}
.steps li.done{color:var(--palm);}

.booking-body{max-width:920px;margin:0 auto;padding:56px 28px 120px;}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px;margin-bottom:24px;}
.panel h2{font-size:1.5rem;font-weight:500;margin-bottom:6px;}
.panel .hint{color:var(--ink-soft);font-size:0.92rem;margin-bottom:24px;}

/* calendar */
.cal-wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.cal-month{}
.cal-month-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.cal-month-head h3{font-size:1rem;font-weight:600;font-family:var(--font-body);}
.cal-nav{background:none;border:1px solid var(--line);width:32px;height:32px;border-radius:50%;font-size:1rem;line-height:1;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dow{text-align:center;font-family:var(--font-mono);font-size:0.62rem;color:var(--ink-soft);padding:6px 0;text-transform:uppercase;}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-size:0.88rem;cursor:pointer;border:1px solid transparent;
}
.cal-day.empty{cursor:default;}
.cal-day.past,.cal-day.closed{color:#c9c2b3;text-decoration:line-through;cursor:not-allowed;}
.cal-day:not(.empty):not(.past):not(.closed):hover{border-color:var(--coral);}
.cal-day.selected{background:var(--coral);color:#fff;}
.cal-day.in-range{background:rgba(228,98,63,0.16);border-radius:0;}
.cal-legend{display:flex;gap:18px;margin-top:18px;font-size:0.8rem;color:var(--ink-soft);flex-wrap:wrap;}
.cal-legend span{display:inline-flex;align-items:center;gap:6px;}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot.open{background:var(--sand);border:1px solid var(--line);}
.dot.sel{background:var(--coral);}
.dot.closed{background:#c9c2b3;}

.stay-summary{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
.stay-summary div{font-family:var(--font-mono);font-size:0.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;}
.stay-summary strong{display:block;font-family:var(--font-body);font-size:1.1rem;color:var(--ink);margin-top:4px;font-weight:600;text-transform:none;letter-spacing:0;}

.counter{display:flex;align-items:center;gap:14px;}
.counter button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:1.1rem;}
.counter span{font-weight:600;min-width:20px;text-align:center;}
.guest-counters{display:flex;gap:44px;margin-top:8px;}
.guest-counters .row{display:flex;flex-direction:column;gap:8px;}
.guest-counters label{font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;color:var(--ink-soft);}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6px;}
.form-grid .full{grid-column:1/-1;}
.form-grid label{display:block;font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:6px;}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;font-family:var(--font-body);font-size:0.95rem;background:var(--sand-light);
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{background:#fff;}

.pay-options{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.pay-option{
  border:1px solid var(--line);border-radius:2px;padding:18px 20px;display:flex;align-items:flex-start;gap:14px;cursor:pointer;
}
.pay-option.selected{border-color:var(--coral);background:rgba(228,98,63,0.05);}
.pay-option input{margin-top:4px;}
.pay-option .pay-label{font-weight:600;display:flex;align-items:center;gap:10px;}
.pay-option .pay-desc{color:var(--ink-soft);font-size:0.88rem;margin-top:4px;}
.pay-badge{font-family:var(--font-mono);font-size:0.6rem;text-transform:uppercase;letter-spacing:.06em;background:var(--sand);padding:3px 8px;border-radius:10px;}
.pay-detail{display:none;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);}
.pay-option.selected .pay-detail{display:block;}

.notice{background:var(--sand);border-left:3px solid var(--coral);padding:14px 18px;font-size:0.88rem;border-radius:2px;margin-top:16px;color:var(--ink-soft);}

.summary-line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:0.95rem;}
.summary-line.total{border-bottom:none;font-weight:700;font-size:1.15rem;padding-top:16px;}

.panel-actions{display:flex;justify-content:space-between;margin-top:8px;}

.confirm-box{text-align:center;padding:20px 0 10px;}
.confirm-code{
  font-family:var(--font-mono);font-size:1.8rem;letter-spacing:.06em;background:var(--ocean-deep);color:var(--sand-light);
  display:inline-block;padding:14px 26px;border-radius:2px;margin:18px 0;
}
.error-text{color:var(--coral-dark);font-size:0.85rem;margin-top:6px;display:none;}
.field-error input,.field-error select{border-color:var(--coral-dark);}
.field-error .error-text{display:block;}

@media (max-width:760px){
  .cal-wrap{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .guest-counters{gap:24px;flex-wrap:wrap;}
}