/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: var(--carbon);
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transform: scale(1.05);
  animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.12); }
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,28,28,0.3) 0%, rgba(28,28,28,0.5) 50%, rgba(28,28,28,0.85) 100%);
}

.hero-content {
  position: relative; z-index: 2;
  text-align: center; padding: 5rem 2rem 0; max-width: 850px;
}

.hero-stars { font-size: 0.75rem; letter-spacing: 0.25em; color: var(--amber-light); margin-bottom: 1.5rem; }
.hero h1 { color: white; margin-bottom: 1.2rem; font-weight: 500; }
.hero h1 em { font-style: italic; color: var(--amber-light); }
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.25rem); color: rgba(255,255,255,0.75); margin-bottom: 2.5rem; font-weight: 300; }

/* ─── BOOKING BAR — MotoPress wrapper ─── */
.booking-bar-wrapper {
  position: relative; z-index: 2;
  margin-top: 1rem;
  max-width: 800px; width: 90vw;
}

/* Estilos que envuelven y normalizan el output del shortcode */
.mphb-booking-bar,
.booking-bar {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Override inputs de MotoPress */
.mphb-booking-bar input,
.mphb-booking-bar select,
.booking-bar input,
.booking-bar select {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  padding: 0.7rem 0.9rem !important;
  color: white !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  outline: none !important;
  transition: border-color 0.3s !important;
  width: 100% !important;
}
.mphb-booking-bar input:focus,
.mphb-booking-bar select:focus,
.booking-bar input:focus,
.booking-bar select:focus {
  border-color: var(--amber) !important;
}
.mphb-booking-bar label,
.booking-bar label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.6) !important;
  display: block !important;
  margin-bottom: 0.35rem !important;
}
.mphb-booking-bar .mphb-booking-form-submit,
.mphb-booking-bar button[type="submit"],
.booking-bar .btn-amber {
  background: var(--amber) !important;
  color: white !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 2rem !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.3s, transform 0.3s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.mphb-booking-bar .mphb-booking-form-submit:hover,
.booking-bar .btn-amber:hover {
  background: var(--copper) !important;
  transform: translateY(-1px) !important;
}
.mphb-booking-bar .mphb-booking-form-field {
  flex: 1;
  min-width: 120px;
}
.mphb-booking-bar select option { color: var(--carbon); background: white; }

/* Fallback del booking bar cuando MotoPress no está activo */
.booking-bar .booking-field {
  flex: 1; min-width: 120px;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.booking-bar .booking-field input,
.booking-bar .booking-field select {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  color: white;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.booking-bar .booking-field input::placeholder { color: rgba(255,255,255,0.4); }
.booking-bar .booking-field select option { color: var(--carbon); background: white; }
.booking-bar .booking-field label {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.6);
}

.hero-trust {
  position: relative; z-index: 2;
  display: flex; gap: 2rem; margin-top: 1.5rem;
  justify-content: center; flex-wrap: wrap;
}
.hero-trust span {
  font-size: 0.78rem; color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: 0.4rem;
}
.hero-trust svg { width: 14px; height: 14px; stroke: var(--amber-light); fill: none; stroke-width: 2; }

/* ═══════════════════════════════════════
   POR QUÉ ELEGIRNOS
   ═══════════════════════════════════════ */
.why-section { background: var(--warm-white); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.why-card { text-align: center; padding: 2rem 1.5rem; border-radius: 8px; transition: all 0.4s ease; }
.why-card:hover { background: white; box-shadow: 0 8px 40px rgba(0,0,0,0.06); transform: translateY(-4px); }
.why-icon {
  width: 52px; height: 52px; margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--cream);
}
.why-icon svg { width: 24px; height: 24px; stroke: var(--selva); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.why-card h3 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.6rem; }
.why-card p { font-size: 0.9rem; color: var(--stone); line-height: 1.65; }

/* ═══════════════════════════════════════
   HABITACIONES — MotoPress [mphb_rooms]
   ═══════════════════════════════════════ */
.rooms-section { background: var(--cream); }

/* Wrapper que normaliza el output de [mphb_rooms] */
.mphb-rooms-wrapper .mphb-rooms,
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Override cards de MotoPress */
.mphb-rooms-wrapper .mphb-room,
.room-card {
  background: white; border-radius: 8px; overflow: hidden;
  transition: all 0.4s ease; position: relative;
}
.mphb-rooms-wrapper .mphb-room:hover,
.room-card:hover { box-shadow: 0 16px 50px rgba(0,0,0,0.1); transform: translateY(-6px); }

.mphb-rooms-wrapper .mphb-room-thumbnail,
.room-img { height: 260px; overflow: hidden; position: relative; }
.mphb-rooms-wrapper .mphb-room-thumbnail img,
.room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mphb-rooms-wrapper .mphb-room:hover .mphb-room-thumbnail img,
.room-card:hover .room-img img { transform: scale(1.06); }

.room-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--carbon-soft); color: white;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 3px;
}

.mphb-rooms-wrapper .mphb-room-body,
.room-body { padding: 1.8rem; }
.mphb-rooms-wrapper .mphb-room h3,
.room-body h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.5rem; }

.room-meta { display: flex; gap: 1.2rem; margin-bottom: 1rem; font-size: 0.82rem; color: var(--stone); }
.room-meta span { display: flex; align-items: center; gap: 0.3rem; }
.room-meta svg { width: 15px; height: 15px; stroke: var(--stone-light); fill: none; stroke-width: 1.5; }

.room-features { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.room-features span { font-size: 0.88rem; color: var(--stone); display: flex; align-items: center; gap: 0.5rem; }
.room-features span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--selva); flex-shrink: 0; }

/* Override botón MotoPress */
.mphb-rooms-wrapper .mphb-room .mphb-book-button,
.mphb-rooms-wrapper .mphb-room .btn,
.room-card .btn {
  width: 100%; justify-content: center;
  background: var(--selva) !important; color: white !important;
  font-family: var(--font-body) !important; font-size: 0.875rem !important;
  font-weight: 600 !important; letter-spacing: 0.04em !important;
  text-transform: uppercase !important; padding: 0.9rem 2rem !important;
  border-radius: 4px !important; border: none !important;
  cursor: pointer !important; transition: all 0.3s ease !important;
  display: flex !important; align-items: center !important;
}
.mphb-rooms-wrapper .mphb-room .mphb-book-button:hover { background: var(--selva-deep) !important; transform: translateY(-1px) !important; }

/* ═══════════════════════════════════════
   SELVA IRYAPÚ
   ═══════════════════════════════════════ */
.selva-section { background: var(--carbon); color: white; position: relative; overflow: hidden; }
.selva-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.selva-gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; gap: 0.75rem; }
.selva-gallery .sg-1 { grid-row: 1 / 3; border-radius: 6px; overflow: hidden; }
.selva-gallery .sg-2, .selva-gallery .sg-3 { border-radius: 6px; overflow: hidden; }
.selva-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.selva-gallery img:hover { transform: scale(1.04); }
.selva-text .section-label { color: var(--amber-light); }
.selva-text h2 { color: white; margin-bottom: 1.2rem; }
.selva-text p { color: rgba(255,255,255,0.65); font-size: 1.02rem; margin-bottom: 1.5rem; line-height: 1.8; }
.selva-highlights { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem; }
.selva-highlights span { font-size: 0.82rem; padding: 0.45rem 1rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }

/* ═══════════════════════════════════════
   RECREACIÓN
   ═══════════════════════════════════════ */
.rec-section { background: var(--warm-white); }
.rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.rec-card { background: white; border-radius: 8px; overflow: hidden; transition: all 0.35s ease; }
.rec-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); transform: translateY(-4px); }
.rec-card-img { height: 180px; overflow: hidden; }
.rec-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.rec-card:hover .rec-card-img img { transform: scale(1.05); }
.rec-card-body { padding: 1.2rem 1.4rem; }
.rec-card-body h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0.4rem; }
.rec-card-body p { font-size: 0.85rem; color: var(--stone); line-height: 1.6; }

/* ═══════════════════════════════════════
   GASTRONOMÍA
   ═══════════════════════════════════════ */
.gastro-section { background: var(--cream); }
.gastro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.gastro-img { border-radius: 8px; overflow: hidden; height: 420px; }
.gastro-img img { width: 100%; height: 100%; object-fit: cover; }
.gastro-text h2 { margin-bottom: 1.5rem; }
.gastro-item { padding: 1.5rem 0; border-bottom: 1px solid var(--cream-dark); }
.gastro-item:first-child { padding-top: 0; }
.gastro-item:last-child { border-bottom: none; }
.gastro-item h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.3rem; }
.gastro-item .included { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--selva); margin-bottom: 0.4rem; display: inline-block; }
.gastro-item p { font-size: 0.92rem; color: var(--stone); line-height: 1.65; }

/* ═══════════════════════════════════════
   GUÍA CATARATAS
   ═══════════════════════════════════════ */
.guide-section { background: var(--warm-white); position: relative; }
.guide-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 300px; background: linear-gradient(180deg, var(--cream) 0%, var(--warm-white) 100%); }
.guide-section .container { position: relative; }
.guide-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; margin-bottom: 3rem; }
.guide-info h2 { margin-bottom: 1rem; }
.guide-info p { font-size: 1rem; color: var(--stone); line-height: 1.75; margin-bottom: 1.5rem; }
.guide-tip { background: white; border-radius: 8px; padding: 1.5rem; border-left: 3px solid var(--selva); margin-bottom: 1.5rem; }
.guide-tip p { font-size: 0.9rem; margin-bottom: 0; }
.guide-tip strong { color: var(--selva-deep); }
.guide-img { border-radius: 8px; overflow: hidden; height: 380px; }
.guide-img img { width: 100%; height: 100%; object-fit: cover; }
.itineraries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.itin-card { background: white; border-radius: 8px; padding: 2rem; transition: all 0.35s ease; border: 1px solid transparent; }
.itin-card:hover { border-color: var(--selva); box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.itin-days { font-family: var(--font-display); font-size: 2.8rem; font-weight: 600; color: var(--selva); line-height: 1; margin-bottom: 0.3rem; }
.itin-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.itin-card ul { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.itin-card li { font-size: 0.88rem; color: var(--stone); padding-left: 1.2rem; position: relative; }
.itin-card li::before { content: '→'; position: absolute; left: 0; color: var(--amber); font-size: 0.8rem; }

/* ═══════════════════════════════════════
   TRASLADOS
   ═══════════════════════════════════════ */
.transfers-section { background: var(--carbon-soft); color: white; }
.transfers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.transfer-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 2rem; transition: all 0.35s ease; }
.transfer-card:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); }
.transfer-card svg { width: 32px; height: 32px; stroke: var(--amber-light); fill: none; stroke-width: 1.5; margin-bottom: 1rem; }
.transfer-card h3 { font-family: var(--font-display); font-size: 1.25rem; color: white; margin-bottom: 0.5rem; }
.transfer-card p { font-size: 0.88rem; color: rgba(255,255,255,0.6); line-height: 1.65; }
.transfers-cta { text-align: center; margin-top: 2.5rem; }

/* ═══════════════════════════════════════
   UBICACIÓN
   ═══════════════════════════════════════ */
.location-section { background: var(--warm-white); }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.map-wrapper { border-radius: 8px; overflow: hidden; height: 400px; background: var(--cream); }
.map-wrapper iframe { width: 100%; height: 100%; border: 0; }
.distance-list { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2rem; }
.distance-item { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem; background: white; border-radius: 8px; transition: box-shadow 0.3s; }
.distance-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.distance-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.distance-icon svg { width: 20px; height: 20px; stroke: var(--selva); fill: none; stroke-width: 1.5; }
.distance-info h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.15rem; }
.distance-info p { font-size: 0.85rem; color: var(--stone); }
.howto-title { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 1rem; }
.howto-options { display: flex; flex-direction: column; gap: 0.8rem; }
.howto-option { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; color: var(--stone); }
.howto-option strong { color: var(--carbon); min-width: 70px; }

/* ═══════════════════════════════════════
   RESEÑAS (demo marcadas)
   ═══════════════════════════════════════ */
.reviews-section { background: var(--cream); }
.reviews-demo-notice {
  text-align: center;
  margin-bottom: 2rem;
  padding: 0.6rem 1.2rem;
  background: rgba(196,129,61,0.08);
  border: 1px solid rgba(196,129,61,0.2);
  border-radius: 4px;
  display: inline-block;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber);
}
.reviews-demo-notice-wrap { text-align: center; }
.reviews-top { text-align: center; margin-bottom: 2.5rem; }
.rating-big { font-family: var(--font-display); font-size: 4rem; font-weight: 600; color: var(--selva-deep); line-height: 1; }
.rating-stars { display: flex; gap: 0.25rem; justify-content: center; margin: 0.5rem 0; }
.rating-stars svg { width: 20px; height: 20px; fill: var(--amber); stroke: none; }
.rating-source { font-size: 0.85rem; color: var(--stone); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review-card { background: white; border-radius: 8px; padding: 1.8rem; transition: all 0.35s ease; }
.review-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.06); transform: translateY(-3px); }
.review-quote { font-size: 0.92rem; color: var(--stone); line-height: 1.7; margin-bottom: 1.2rem; font-style: italic; position: relative; padding-left: 1.2rem; }
.review-quote::before { content: '"'; position: absolute; left: 0; top: -4px; font-family: var(--font-display); font-size: 2rem; color: var(--amber); line-height: 1; }
.review-author { font-size: 0.82rem; font-weight: 600; color: var(--carbon); }
.review-source { font-size: 0.75rem; color: var(--stone-light); }

/* ═══════════════════════════════════════
   FAQ
   ═══════════════════════════════════════ */
.faq-section { background: var(--warm-white); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--cream-dark); }
.faq-question {
  width: 100%; background: none; border: none; text-align: left;
  padding: 1.5rem 2.5rem 1.5rem 0;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  color: var(--carbon); cursor: pointer; position: relative; transition: color 0.3s;
}
.faq-question:hover { color: var(--selva); }
.faq-question::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 300; color: var(--stone-light); transition: transform 0.3s; }
.faq-item.open .faq-question::after { content: '−'; color: var(--selva); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-item.open .faq-answer { max-height: 300px; padding-bottom: 1.5rem; }
.faq-answer p { font-size: 0.92rem; color: var(--stone); line-height: 1.75; }

/* ═══════════════════════════════════════
   CTA FINAL
   ═══════════════════════════════════════ */
.cta-section {
  background: var(--carbon-soft); color: white;
  text-align: center; padding: 5rem 2rem;
  position: relative; overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}

.cta-bg img {
  width: 100%;
  height: 100%;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  z-index: 1;
}
.cta-section h2 { color: white; margin-bottom: 0.75rem; position: relative; z-index: 2; }
.cta-section p { color: rgba(255,255,255,0.7); font-size: 1.1rem; margin-bottom: 2rem; position: relative; z-index: 2; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }
.cta-buttons .btn-amber { font-size: 0.95rem; padding: 1rem 2.5rem; }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .mphb-rooms-wrapper .mphb-rooms,
  .rooms-grid { grid-template-columns: 1fr 1fr; }
  .rooms-grid > :last-child, .mphb-rooms-wrapper .mphb-rooms > .mphb-room:last-child { grid-column: 1 / -1; max-width: 500px; margin: 0 auto; }
  .rec-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .mphb-booking-bar, .booking-bar { gap: 0.8rem; padding: 1.2rem; display: grid;}
  .mphb-rooms-wrapper .mphb-rooms, .rooms-grid { grid-template-columns: 1fr; }
  .rooms-grid > :last-child { max-width: none; }
  .selva-grid, .gastro-grid, .guide-top, .location-grid { grid-template-columns: 1fr; }
  .selva-gallery { grid-template-rows: 180px 180px; }
  .rec-grid { grid-template-columns: 1fr; }
  .itineraries, .transfers-grid, .reviews-grid { grid-template-columns: 1fr; }
  .hero-trust { gap: 1rem; }
  .hero-content { padding-top: 6rem; }
  .gastro-img { height: 280px; }
  .guide-img { height: 260px; }
  .map-wrapper { height: 280px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 2rem; }
  .hero-trust { flex-direction: column; align-items: center; }
  .cta-buttons { flex-direction: column; align-items: center; }
}



/* Utilities created while converting inline styles to theme CSS */
.home-center-cta {
  text-align: center;
  margin-top: 2rem;
}

.gastro-link {
  margin-top: 1rem;
  padding: 0.6rem 1.5rem;
  font-size: 0.8rem;
}

.guide-official-btn {
  margin-top: 0.5rem;
}

.guide-mini-heading {
  margin-bottom: 2rem;
}

.guide-mini-heading h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.guide-card-btn {
  font-size: 0.78rem;
  padding: 0.6rem 1.2rem;
}

.home-title-light {
  color: white;
}

.rating-star--muted {
  opacity: 0.3;
}