/* =========================================================
   Manduara Hotel & Suites
   Paleta calculada a partir de la ambientación real de las
   habitaciones: cabeceras de madera oscura, cojines terracota
   y mostaza, paredes crema y baldosa clara.
   ========================================================= */
:root{
  --crema:#F4EBDD;         /* baldosa / paredes de las habitaciones */
  --crema-2:#ECE0CB;
  --madera:#6E3F26;        /* cabeceras y mobiliario */
  --madera-oscura:#4A2A18;
  --terracota:#B23A2E;     /* cojines / acento pared recepción */
  --terracota-oscura:#8A2C22;
  --mostaza:#D9A441;       /* cojín amarillo */
  --tinta:#2B211B;         /* texto principal */
  --tinta-suave:#5C4E42;
  --blanco:#FFFDF8;
  --linea:rgba(43,33,27,0.14);
  --radius-a:2px;
  --radius-b:26px 4px 26px 4px;
  --radius-c:4px 26px 4px 26px;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:84px;}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:'Archivo',system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; object-fit:cover;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:500; margin:0; line-height:1.08; letter-spacing:-0.01em;}
h2{font-size:clamp(2rem,4vw,3rem); font-weight:400;}
h3{font-size:1.3rem;}
p{margin:0;}

.eyebrow{font-size:0.82rem; color:var(--terracota); font-weight:600; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; display:block;}

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
  border-radius:var(--radius-a); font-weight:600; font-size:0.95rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-family:'Archivo',sans-serif; transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn-primary{background:var(--terracota); color:var(--blanco);}
.btn-primary:hover{background:var(--terracota-oscura);}
.btn-ghost{border-color:var(--tinta); color:var(--tinta);}
.btn-ghost:hover{background:var(--tinta); color:var(--crema);}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--madera); outline-offset:3px;
}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,235,221,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:78px;}
.brand{font-family:'Fraunces',serif; font-size:1.25rem; text-decoration:none; color:var(--tinta);}
.brand{display:inline-flex; align-items:center;}
.brand img{height:52px; width:auto; display:block; object-fit:contain;}
.brand-footer img{height:64px;}
@media (max-width:680px){ .brand img{height:42px;} .brand-footer img{height:56px;} }
nav.links{display:flex; gap:32px; font-size:0.92rem; font-weight:500;}
nav.links a{text-decoration:none; color:var(--tinta-suave); position:relative;}
nav.links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--terracota);transition:width .25s ease;}
nav.links a:hover::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:18px;}
.menu-btn{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-btn span{display:block; width:24px; height:2px; background:var(--tinta); margin:5px 0;}
#mobileMenu{display:none; flex-direction:column; gap:0; padding:0 28px 20px;}
#mobileMenu a{padding:12px 0; border-top:1px solid var(--linea); text-decoration:none; color:var(--tinta);}
#mobileMenu a:last-child{border-bottom:1px solid var(--linea);}

/* Hero */
.hero{padding:60px 0 40px;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(2.4rem,5vw,3.9rem); font-weight:400;}
.hero h1 em{font-style:italic; color:var(--terracota);}
.hero-copy p.lede{margin-top:20px; max-width:46ch; font-size:1.05rem; color:var(--tinta-suave);}
.hero-actions{display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:30px; margin-top:44px; padding-top:24px; border-top:1px solid var(--linea);}
.stat b{display:block; font-family:'Fraunces',serif; font-size:1.6rem; font-weight:500;}
.stat span{font-size:0.8rem; color:var(--tinta-suave);}
.hero-visual{position:relative; border-radius:var(--radius-b); overflow:hidden; aspect-ratio:4/5;}
.hero-visual img{width:100%; height:100%;}
.hero-badge{
  position:absolute; left:-16px; bottom:30px; background:var(--blanco);
  border:1px solid var(--linea); padding:16px 20px; border-radius:var(--radius-c);
  box-shadow:0 18px 40px -18px rgba(43,33,27,.35); max-width:220px;
}
.hero-badge b{font-family:'Fraunces',serif; font-size:1rem; display:block;}
.hero-badge span{font-size:0.78rem; color:var(--tinta-suave);}

/* Section shell */
section{padding:92px 0;}
.section-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:50px;}
.section-head p{color:var(--tinta-suave); max-width:42ch; font-size:1rem;}

/* About */
#about{background:var(--crema-2);}
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.about-visual{border-radius:var(--radius-c); overflow:hidden; aspect-ratio:1/1.05;}
.about-visual img{width:100%; height:100%;}
.about-copy p{color:var(--tinta-suave); margin-bottom:16px; font-size:1rem;}
.feature-list{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
.feature-list li{display:flex; gap:10px; font-size:0.92rem; align-items:flex-start;}
.feature-list li svg{flex:none; width:17px; height:17px; margin-top:3px; color:var(--terracota);}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; gap:14px;}
.g-item{border-radius:var(--radius-a); overflow:hidden; cursor:zoom-in; position:relative;}
.g-item img{width:100%; height:100%; transition:transform .5s ease;}
.g-item:hover img{transform:scale(1.06);}
.g-cap{position:absolute; left:14px; bottom:12px; color:#fff; font-size:0.76rem; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.5); z-index:2;}
.g-item::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(43,33,27,.55), transparent 55%);}
.g1{grid-column:span 2; grid-row:span 3;}
.g2{grid-column:span 2; grid-row:span 2;}
.g3{grid-column:span 1; grid-row:span 2;}
.g4{grid-column:span 1; grid-row:span 2;}
.g5{grid-column:span 2; grid-row:span 2;}
.g6{grid-column:span 2; grid-row:span 3;}
.g7{grid-column:span 2; grid-row:span 2;}
.g8{grid-column:span 2; grid-row:span 2;}
.g9{grid-column:span 2; grid-row:span 2;}
.g10{grid-column:span 2; grid-row:span 2;}

.lightbox{position:fixed; inset:0; background:rgba(20,14,10,0.92); display:none; align-items:center; justify-content:center; z-index:200; padding:40px;}
.lightbox.open{display:flex;}
.lightbox img{width:auto; max-width:90vw; max-height:82vh; border-radius:8px;}
.lightbox-close{position:absolute; top:26px; right:30px; background:none; border:1px solid rgba(255,255,255,0.4); color:#fff; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.1rem;}
.lightbox-cap{position:absolute; bottom:30px; color:#fff; font-size:0.9rem;}

/* Rooms */
#rooms{background:var(--crema-2);}
.rooms-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.room-card{background:var(--blanco); border:1px solid var(--linea); overflow:hidden;}
.room-card:nth-child(3n+1){border-radius:var(--radius-b);}
.room-card:nth-child(3n+2){border-radius:var(--radius-a);}
.room-card:nth-child(3n){border-radius:var(--radius-c);}
.room-card .room-img{aspect-ratio:5/4; overflow:hidden;}
.room-card .room-img img{width:100%; height:100%;}
.room-body{padding:22px 24px 26px;}
.room-body h3{margin-bottom:10px;}
.room-body ul{margin:0; padding:0; list-style:none; display:grid; gap:6px;}
.room-body li{font-size:0.9rem; color:var(--tinta-suave); display:flex; gap:8px; align-items:flex-start;}
.room-body li::before{content:"—"; color:var(--terracota); flex:none;}

/* Amenities */
.amenities-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea);}
.amenity{background:var(--crema); padding:36px 24px;}
.amenity svg{width:28px; height:28px; color:var(--terracota); margin-bottom:16px;}
.amenity h4{font-size:1rem; font-weight:500; margin-bottom:6px;}
.amenity p{font-size:0.86rem; color:var(--tinta-suave);}

/* Contact */
#contact{background:var(--crema-2);}
.contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:56px;}
.contact-info p.lede{color:var(--tinta-suave); margin:16px 0 30px; max-width:38ch;}
.info-line{display:flex; gap:14px; padding:17px 0; border-top:1px solid var(--linea);}
.info-line:last-of-type{border-bottom:1px solid var(--linea);}
.info-line svg{flex:none; width:19px; height:19px; color:var(--terracota); margin-top:2px;}
.info-line b{display:block; font-size:0.9rem;}
.info-line span, .info-line a{font-size:0.86rem; color:var(--tinta-suave); text-decoration:none;}
.info-line a:hover{color:var(--terracota); text-decoration:underline;}
.map-embed{
  margin-top:26px; border-radius:var(--radius-a); overflow:hidden; position:relative;
  aspect-ratio:16/10; background:var(--crema); border:1px solid var(--linea);
}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.map-open{margin-top:12px; display:inline-flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:600; color:var(--terracota); text-decoration:none;}
.map-open:hover{color:var(--terracota-oscura); text-decoration:underline;}

form{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radius-b); padding:36px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:0.8rem; font-weight:600; margin-bottom:7px; color:var(--tinta-suave);}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--linea); background:transparent; color:var(--tinta);
  padding:12px 14px; border-radius:var(--radius-a); font-family:'Archivo',sans-serif; font-size:0.94rem;
}
.field textarea{resize:vertical; min-height:105px;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--terracota); outline:none;}
.form-note{font-size:0.78rem; color:var(--tinta-suave); margin-top:14px;}
.form-status{font-size:0.85rem; margin-top:14px; display:none;}
.form-status.show{display:block; color:var(--madera); font-weight:600;}
.form-status.show.error{color:var(--terracota-oscura);}

/* Footer */
footer{padding:52px 0 38px; border-top:1px solid var(--linea);}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;}
.footer-links{display:flex; gap:26px; font-size:0.86rem; color:var(--tinta-suave); flex-wrap:wrap;}
.footer-links a{text-decoration:none;}
.footer-bottom{margin-top:30px; padding-top:18px; border-top:1px solid var(--linea); font-size:0.76rem; color:var(--tinta-suave); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.footer-credit{margin-top:18px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:0.74rem; color:var(--tinta-suave); letter-spacing:0.02em;}
.footer-credit a{display:inline-flex; border-radius:6px; transition:transform .2s ease, opacity .2s ease;}
.footer-credit img{height:48px; width:auto; object-fit:contain;}
.footer-credit a:hover{transform:translateY(-2px); opacity:.85;}
.footer-credit a:focus-visible{outline:2px solid var(--terracota); outline-offset:3px;}

/* Responsive */
@media (max-width:980px){
  .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
  .section-head{grid-template-columns:1fr;}
  .rooms-grid{grid-template-columns:1fr 1fr;}
  .amenities-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .g1,.g6{grid-column:span 2; grid-row:span 2;}
}
@media (max-width:680px){
  nav.links{display:none;}
  .menu-btn{display:block;}
  .nav-cta .btn-ghost{display:none;}
  .rooms-grid{grid-template-columns:1fr;}
  .amenities-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .hero-stats{gap:20px; flex-wrap:wrap;}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:120px;}
  section{padding:60px 0;}
  .hero{padding:36px 0 16px;}
}