/* ==========================================================================
   Casa Danna — Hotel Boutique · Rediseño
   Paleta: cantera crema, rosa mexicano (fachada real), verde palma, latón envejecido
   Tipografía: Fraunces (display) + Work Sans (texto)
   ========================================================================== */

:root{
  --cream:        #F6EFE2;
  --paper:        #FBF7EF;
  --stucco:       #EDE2CC;
  --ink:          #241F18;
  --ink-soft:     #4A4235;
  --rosa:         #C22F5E;
  --rosa-d:       #8C2444;
  --palm:         #34452F;
  --palm-light:   #566B4C;
  --brass:        #A9813E;
  --line:         rgba(36,31,24,.14);
  --line-strong:  rgba(36,31,24,.28);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Work Sans", -apple-system, "Segoe UI", sans-serif;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; overflow-wrap:break-word; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; }
.container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.eyebrow{
  display:flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rosa);
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--rosa);
}
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.7em; border-radius:2px;
  font-family:var(--sans); font-weight:600; font-size:.92rem;
  letter-spacing:.02em; border:1px solid transparent; cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--rosa); color:var(--paper); }
.btn-primary:hover{ background:var(--rosa-d); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-light{ background:var(--paper); color:var(--ink); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,239,226,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .container{ max-width:none; }
.site-header .header-top{
  display:flex; align-items:center; flex-wrap:wrap; gap:24px;
  padding-block:12px;
}
.brand{ display:flex; align-items:center; gap:.7em; }
.brand-logo{ height:46px; width:auto; }
.brand-word{ font-family:var(--serif); font-size:1.15rem; letter-spacing:.02em; }
.brand-word small{ display:block; font-family:var(--sans); font-size:.58rem; letter-spacing:.3em; color:var(--ink-soft); font-weight:600; }

.main-nav{ display:flex; align-items:center; gap:2.2em; }
.main-nav ul{ display:flex; gap:2em; list-style:none; margin:0; padding:0; }
.main-nav a{
  font-size:.88rem; font-weight:600; letter-spacing:.02em;
  position:relative; padding-bottom:4px;
}
.main-nav a.is-active,.main-nav a:hover{ color:var(--rosa); }
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--rosa); transition:right .25s ease;
}
.main-nav a:hover::after,.main-nav a.is-active::after{ right:0; }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{ display:block; width:26px; height:2px; background:var(--ink); margin:5px 0; }

@media (max-width: 880px){
  .main-nav ul{
    position:fixed; inset:64px 0 0 0; background:var(--cream);
    flex-direction:column; gap:0; padding:20px var(--pad);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .main-nav ul li{ border-bottom:1px solid var(--line); }
  .main-nav ul a{ display:block; padding:16px 0; font-size:1.1rem; }
  .main-nav.is-open ul{ opacity:1; transform:none; pointer-events:auto; }
  .main-nav .btn{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; min-height:86vh; align-items:stretch;
}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(32px,6vw,80px) var(--pad);
}
.hero-copy h1{ font-size:clamp(2.4rem, 4.6vw, 4rem); max-width:14ch; }
.hero-copy .lede{ font-size:1.08rem; max-width:46ch; color:var(--ink-soft); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.4em; }
.hero-meta{
  display:flex; gap:2.4em; margin-top:3em; padding-top:1.6em; border-top:1px solid var(--line);
}
.hero-meta div strong{ display:block; font-family:var(--serif); font-size:1.3rem; }
.hero-meta div span{ font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }
.hero-media{
  position:relative; overflow:hidden;
  background-image:url("img/hero-colima-poster.jpg"); background-size:cover; background-position:center;
}
.hero-media img,.hero-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (prefers-reduced-motion: reduce){
  .hero-media video{ display:none; }
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(36,31,24,0) 55%, rgba(36,31,24,.35) 100%);
}
@media (max-width: 920px){
  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero-media{ order:-1; height:52vh; }
}

/* ---------- Booking bar (estilo Ace Hotel: en la misma barra que el logo) ---------- */
.booking-bar-form{
  flex:1 1 460px; min-width:260px; border:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:stretch;
}
.bb-field{
  padding:9px 20px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:center;
}
.bb-field label{
  font-family:var(--sans); font-size:.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--brass); margin-bottom:.25em;
}
.bb-field input, .bb-field select{
  border:0; padding:0; border-radius:0; background:transparent;
  font-family:var(--sans); font-size:.85rem; color:var(--ink); width:100%;
}
.bb-field input:focus, .bb-field select:focus{ outline:none; }
.bb-submit{
  border-radius:0; padding:0 28px; display:flex; align-items:center; justify-content:center;
  letter-spacing:.06em; text-transform:uppercase; font-size:.78rem;
}
@media (max-width:880px){
  .booking-bar-form{ grid-template-columns:1fr 1fr; flex-basis:100%; }
  .bb-field{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .bb-submit{ grid-column:1 / -1; padding:12px; }
}

.header-mobile-cta{ display:none; }
@media (max-width:600px){
  .site-header .header-top{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  }
  .brand{ grid-column:2; justify-self:center; }
  .booking-bar-form{ display:none; }
  .header-mobile-cta{
    display:inline-flex; grid-column:3; justify-self:end;
    padding:10px 18px; font-size:.78rem;
  }
}

/* ---------- Section framing ---------- */
section{ padding-block:clamp(64px, 9vw, 120px); }
.section-head{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end;
  margin-bottom:3rem;
}
.section-head h2{ font-size:clamp(1.9rem,3vw,2.8rem); max-width:12ch; }
.section-head .desc{ color:var(--ink-soft); font-size:1rem; max-width:44ch; }
@media (max-width:760px){ .section-head{ grid-template-columns:1fr; } }

.bg-stucco{ background:var(--stucco); }
.bg-ink{ background:var(--ink); color:var(--paper); }
.bg-ink h2,.bg-ink h3{ color:var(--paper); }
.bg-ink .eyebrow{ color:#E9A0BD; }
.bg-ink .eyebrow::before{ background:#E9A0BD; }
.bg-ink p{ color:#D8D2C6; }

/* ---------- About / split ---------- */
.split{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,64px); align-items:center;
}
.split.reverse{ grid-template-columns:1.15fr .85fr; }
.split.reverse .split-media{ order:2; }
.split-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split-copy .stat-row{ display:flex; gap:2.2em; margin-top:2em; }
.split-copy .stat-row div strong{ display:block; font-family:var(--serif); font-size:1.6rem; color:var(--rosa); }
.split-copy .stat-row div span{ font-size:.8rem; color:var(--ink-soft); }
@media (max-width:820px){
  .split,.split.reverse{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
}

/* ---------- Cards / rooms ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:920px){ .grid-3{ grid-template-columns:1fr; } }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (max-width:920px){ .grid-2{ grid-template-columns:1fr; } }
.card{
  background:var(--paper); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.card-media{ aspect-ratio:4/3; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-media img{ transform:scale(1.05); }
.card-body{ padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.card-body h3{ font-size:1.25rem; }
.card-body .tag{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--brass); font-weight:700;
  margin-bottom:.5em;
}
.card-body .price{ margin-top:auto; padding-top:1em; border-top:1px solid var(--line); font-family:var(--serif); font-size:1.05rem; color:var(--rosa); }

.notice{
  border:1px dashed var(--line-strong); background:var(--stucco);
  padding:14px 18px; font-size:.85rem; color:var(--ink-soft); margin-top:28px;
}
.notice strong{ color:var(--rosa-d); }

/* ---------- Amenities list ---------- */
.amenities{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px 28px; list-style:none; padding:0; margin:0; }
.amenities li{ display:flex; flex-direction:column; align-items:flex-start; gap:1em; }
.amenity-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; flex:none;
  border:1px solid var(--line-strong); color:var(--brass);
  transition:border-color .25s ease, color .25s ease, transform .25s ease;
}
.amenity-icon svg{ width:22px; height:22px; }
.amenities li:hover .amenity-icon{ border-color:var(--rosa); color:var(--rosa); transform:translateY(-3px); }
.amenity-text{ font-size:.92rem; line-height:1.45; }
@media (max-width:920px){ .amenities{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .amenities{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .amenities{ grid-template-columns:1fr; } }

/* ---------- Testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:980px){ .quotes{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .quotes{ grid-template-columns:1fr; } }
.quote{ border-left:2px solid var(--rosa); padding-left:22px; }
.quote p{ font-family:var(--serif); font-size:1.1rem; line-height:1.4; }
.quote cite{ font-style:normal; font-size:.82rem; color:var(--ink-soft); letter-spacing:.03em; }

/* ---------- Cross-promo banner ---------- */
.promo{
  display:grid; grid-template-columns:1fr 1fr; min-height:60vh;
}
.promo-media{ position:relative; }
.promo-media img{ width:100%; height:100%; object-fit:cover; }
.promo-copy{ display:flex; flex-direction:column; justify-content:center; padding:var(--pad); }
@media (max-width:820px){ .promo{ grid-template-columns:1fr; } .promo-media{ min-height:280px; } }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:20px 0; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--serif); font-size:1.1rem; color:var(--ink);
}
.faq-q .icon{ font-size:1.3rem; color:var(--rosa); transition:transform .25s ease; }
.faq-item.is-open .faq-q .icon{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.is-open .faq-a{ max-height:320px; }
.faq-a p{ padding-bottom:20px; color:var(--ink-soft); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
label{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:.5em; }
input,textarea,select{
  width:100%; padding:.85em 1em; font-family:var(--sans); font-size:.95rem;
  background:var(--paper); border:1px solid var(--line-strong); color:var(--ink); border-radius:2px;
}
input:focus,textarea:focus,select:focus{ outline:2px solid var(--rosa); outline-offset:1px; }
textarea{ resize:vertical; min-height:120px; }
.form-status{ margin-top:14px; font-size:.88rem; }
.form-status[data-state="ok"]{ color:var(--palm); }
.form-status[data-state="err"]{ color:var(--rosa-d); }
.disponibilidad-status{ margin-top:10px; font-size:.85rem; min-height:1.2em; }
.disponibilidad-status[data-state="ok"]{ color:var(--palm); }
.disponibilidad-status[data-state="err"]{ color:var(--rosa-d); }
.disponibilidad-status[data-state="checking"]{ color:var(--ink-soft); }

.total-estimado{
  margin-top:14px; padding:14px 18px; font-size:.92rem; color:var(--ink-soft);
  background:var(--stucco); border-left:3px solid var(--rosa); display:none;
}
.total-estimado.is-visible{ display:block; }
.total-estimado strong{ font-family:var(--serif); font-size:1.25rem; color:var(--rosa); font-weight:600; }

/* ---------- Contact info blocks ---------- */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:2.4em; }
@media (max-width:820px){ .info-grid{ grid-template-columns:1fr; } }
.info-card{ border-top:2px solid var(--rosa); padding-top:16px; }
.info-card h4{ font-size:1rem; font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.contact-line{ display:inline-flex; align-items:center; gap:.5em; }
.contact-line svg{ flex:none; }

.map-embed{ border:1px solid var(--line); filter:saturate(.85); }
.map-embed iframe{ width:100%; height:380px; border:0; display:block; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#DDD6C8; padding-block:64px 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.footer-grid h5{ font-family:var(--sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:#B79E77; margin-bottom:1.1em; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:.6em; font-size:.92rem; overflow-wrap:break-word; }
.footer-grid a:hover{ color:#fff; }
.social-links a{ display:inline-flex; align-items:center; gap:.55em; }
.social-links svg{ flex:none; }
.footer-bottom{
  max-width:var(--maxw); margin:48px auto 0; padding-inline:var(--pad);
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.78rem; color:#9A9081;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(36,31,24,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 10px 22px rgba(36,31,24,.32); }
@media (max-width:600px){
  .whatsapp-float{ right:16px; bottom:16px; width:50px; height:50px; }
  .whatsapp-float svg{ width:26px; height:26px; }
}

/* ---------- Utility reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  position:relative; min-height:46vh; display:flex; align-items:flex-end;
  color:var(--paper);
}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.page-hero::before{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,31,24,.15), rgba(36,31,24,.75)); z-index:1;
}
.page-hero-inner{ position:relative; z-index:2; padding:var(--pad); width:100%; }
.page-hero-inner .eyebrow{ color:#EFAAC4; }
.page-hero-inner .eyebrow::before{ background:#EFAAC4; }
.page-hero-inner h1{ color:var(--paper); font-size:clamp(2.2rem,4.4vw,3.6rem); max-width:16ch; }

.crumbs{ font-size:.82rem; color:#D8D2C6; margin-bottom:1em; }
.crumbs a:hover{ color:#fff; }

/* ---------- Pop up de confirmación de solicitud ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(36,31,24,.6);
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  background:var(--paper); max-width:520px; width:100%; padding:44px 36px 36px; text-align:center;
  border-top:4px solid var(--rosa); border-radius:2px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.modal-box h2{ font-family:var(--serif); font-size:clamp(1.8rem,5vw,2.4rem); margin:0 0 16px; color:var(--palm); }
.modal-box p{ font-size:1.15rem; line-height:1.55; color:var(--ink); margin:0 0 28px; }
.modal-box .btn{ min-width:180px; cursor:pointer; }

/* ---------- Aviso de reservas pausadas ---------- */
.pausa-aviso{
  margin-bottom:22px; padding:16px 18px; background:#fff3e0; border-left:4px solid var(--rosa);
  color:var(--ink); font-size:1rem; line-height:1.5;
}
.pausa-aviso[hidden]{ display:none; }
.pausa-aviso a{ color:var(--rosa-d); font-weight:600; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }