:root {
  --primary: #b7410e;   /* rojo ladrillo / terracota */
  --secondary: #2c1810; /* café oscuro profundo */
  --background: #3b1f1f; /* terracota oscuro de fondo */
  --light: #fdf6f0;     /* beige claro */
  --muted: #d1b7a1;     /* beige apagado */
  --card-bg: #4a2c2a;   /* marrón rojizo para tarjetas */
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Lato', sans-serif;
  background: var(--background);
  color: var(--light);
  line-height: 1.6;
}

/* Header */
header {
  position: fixed; top:0; width:100%;
  background: rgba(44,24,16,0.95);
  padding: 16px 40px; display:flex; justify-content:space-between; align-items:center;
  z-index:1000; box-shadow:0 2px 12px rgba(0,0,0,0.6);
}
.logo {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight:700; color: var(--primary); text-decoration:none;
}
nav ul { list-style:none; display:flex; gap:24px; flex-wrap:wrap; }
nav a { color: var(--light); text-decoration:none; font-weight:500; }
nav a:hover { color: var(--primary); }

/* Hero */
.hero {
  height:100vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background: linear-gradient(rgba(44,24,16,0.85), rgba(44,24,16,0.85)), url('https://picsum.photos/1920/1080?terracotta') no-repeat center/cover;
  padding:20px;
}
.hero-content h1 { font-size:3rem; color:var(--primary); margin-bottom:12px; }
.hero-content p { font-size:1.2rem; max-width:800px; margin:0 auto 24px; color:var(--muted); }
.cta-button {
  display:inline-block; padding:14px 32px; background:var(--primary); color:var(--light); border-radius:50px; text-decoration:none; font-weight:700;
}
.cta-button:hover { background:#d3541f; }

/* Sections */
.section { padding:100px 20px; max-width:1200px; margin:0 auto; }
.section h2 { text-align:center; font-size:2rem; color:var(--primary); margin-bottom:36px; }

/* Rooms */
.rooms-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap:32px; }
.room-card { background: var(--card-bg); border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.6); transition:transform .3s; }
.room-card:hover { transform: translateY(-6px); }
.room-image { height:200px; display:flex; align-items:center; justify-content:center; font-size:3rem; background: var(--secondary); color: var(--primary); }
.room-content { padding:20px; }
.room-content h3 { margin-bottom:10px; }
.room-price { color: var(--primary); font-weight:700; margin-bottom:10px; }
.book-btn { width:100%; padding:12px; background:var(--primary); color:var(--light); border:none; border-radius:8px; font-weight:600; cursor:pointer; }
.book-btn:hover { background:#d3541f; }

/* Services */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.service-card { background:var(--card-bg); border-radius:12px; padding:24px; text-align:center; box-shadow:0 6px 15px rgba(0,0,0,0.6); }
.service-icon { font-size:2.5rem; margin-bottom:12px; color:var(--primary); }

/* Forms */
.contact-form { background:var(--card-bg); padding:28px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.6); }
.form-group { margin-bottom:16px; }
label { display:block; margin-bottom:6px; font-weight:600; }
input, textarea {
  width:100%; padding:12px; border:none; border-radius:8px;
  background: var(--secondary); color:var(--light);
}
input:focus, textarea:focus { outline:2px solid var(--primary); }
.submit-btn { width:100%; padding:14px; border:none; border-radius:8px; font-weight:700; background:var(--primary); color:var(--light); cursor:pointer; }
.submit-btn:hover { background:#d3541f; }

/* FAQ */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { background:var(--card-bg); padding:16px 20px; border-radius:10px; margin-bottom:12px; }
.faq-item summary { cursor:pointer; font-weight:600; }
.faq-item p { margin-top:10px; color:var(--muted); }

/* Map */
.map-wrapper iframe { width:100%; height:360px; border:0; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.6); }

/* Booking Panel */
.booking-icon {
  position:fixed; top:50%; right:20px; transform:translateY(-50%);
  background:var(--primary); color:var(--light); width:50px; height:50px;
  display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,0.6);
}
.booking-panel {
  position:fixed; top:0; right:-420px; width:380px; height:100%; background:var(--secondary);
  color:var(--light); box-shadow:-6px 0 20px rgba(0,0,0,0.6); padding:24px; transition:right .3s; z-index:1100;
}
.booking-panel.active { right:0; }
.close-booking { background:none; border:none; color:var(--light); font-size:20px; cursor:pointer; }

/* Footer */
footer { background:var(--secondary); padding:60px 20px; margin-top:80px; }
.footer-content { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.footer-section h3 { color:var(--primary); margin-bottom:12px; }
.footer-section a, .footer-section p { color:var(--muted); text-decoration:none; }
.footer-section a:hover { color:var(--primary); }
.footer-bottom { text-align:center; margin-top:30px; color:var(--muted); border-top:1px solid var(--card-bg); padding-top:14px; }

/* === Carrusel (Portafolio) === */
.carousel {
  position: relative;
  max-width: 100%;
  margin: 2rem auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-track img {
  width: 100%;
  flex-shrink: 0;
  object-fit: cover;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 50%;
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-btn:hover {
  background: rgba(0,0,0,0.7);
}

/* Responsive */
@media(max-width:1024px){
  .hero-content h1 { font-size:2.5rem; }
  .section { padding:80px 16px; }
  .carousel { max-width: 90%; }
}

@media(max-width:768px){
  header { padding:14px 20px; flex-wrap:wrap; }
  nav ul { gap:14px; font-size:0.9rem; }
  .hero { padding: 20px; }
  .hero-content h1 { font-size:2rem; }
  .hero-content p { font-size:1rem; }
  .booking-panel { width:100%; right:-100%; }
  .carousel-btn { font-size:1.5rem; padding:0.3rem 0.6rem; }
}

@media(max-width:480px){
  .hero-content h1 { font-size:1.6rem; }
  .hero-content p { font-size:0.9rem; }
  nav ul { flex-direction:column; gap:8px; }
  .cta-button { padding:10px 20px; font-size:0.9rem; }
  .carousel { max-width: 100%; border-radius: 8px; }
}