/* ─── Loew-Bold — self-hosted (agregar archivo en /public/assets/fonts/) ──── */
@font-face {
  font-family: 'Loew';
  src: url('/assets/fonts/Loew-Bold.woff2') format('woff2'),
       url('/assets/fonts/Loew-Bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── HGI Neuquén — Design Tokens ──────────────────────────────────────────── */

:root {
  /* Colores de marca */
  --color-primary:   #A5323C;   /* Burgundy patagónico */
  --color-secondary: #1C1C1E;   /* Negro sofisticado */
  --color-accent:    #C9975E;   /* Dorado cálido */
  --color-bg:        #FAFAF8;   /* Blanco cálido */
  --color-text:      #2C2C2C;   /* Texto cuerpo */
  --color-muted:     #6B6B6B;   /* Texto secundario */
  --color-border:    #E8E4DE;   /* Bordes suaves */

  /* Tipografía HGI */
  --font-heading: 'Montserrat', 'Loew', 'Source Sans 3', sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', sans-serif;

  /* Espaciado */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

/* ─── Overrides Bootstrap con colores HGI ───────────────────────────────────── */

/* Fondo general */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  color: var(--color-secondary);
}

/* Botones primarios */
.axil-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 24px !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
  white-space: nowrap !important;
}

.btn-primary,
.axil-btn.btn-fill-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.axil-btn.btn-fill-primary:hover {
  background-color: #8a2832 !important;
  border-color: #8a2832 !important;
}

/* Botones outline */
.btn-outline-primary {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

/* Color primario en textos y accents */
.text-primary    { color: var(--color-primary) !important; }
.text-accent     { color: var(--color-accent) !important; }
.bg-primary      { background-color: var(--color-primary) !important; }
.bg-accent       { background-color: var(--color-accent) !important; }
.bg-dark         { background-color: var(--color-secondary) !important; }

/* Links */
a { color: var(--color-primary); }
a:hover { color: #8a2832; }

/* ─── Overrides app.css del template con paleta HGI ───────────────────────── */

/* Header — sin override de fondo: el template usa posición absolute (transparente) por defecto */

/* Hero */
.hero-section .banner-content .title {
  font-family: var(--font-heading) !important;
}

/* Secciones */
.section-title .title {
  font-family: var(--font-heading) !important;
  color: var(--color-secondary) !important;
}

/* Cards de habitaciones / paquetes */
.room-card:hover .room-price,
.package-card .price {
  color: var(--color-primary) !important;
}

/* Footer */
footer,
.footer-area {
  background-color: transparent !important;
  border-top: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

footer a:hover {
  color: var(--color-accent) !important;
}

/* ─── Preloader — fondo blanco, logo con badge burgundy ───────────────────── */
#preloader {
  background-color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.hide {
  opacity: 0;
  visibility: hidden;
}

.hgi-preloader {
  text-align: center;
}

.hgi-preloader__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), #8a2832);
  padding: 20px 32px;
  border-radius: 0 24px 0 24px;
  box-shadow: 0 4px 20px rgba(165, 50, 60, 0.25);
  animation: hgi-preloader-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hgi-preloader__logo img {
  height: 60px;
  width: auto;
  opacity: 0;
  animation: hgi-logo-fade 0.8s 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes hgi-preloader-in {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hgi-logo-fade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Decoraciones */
.axil-separator,
hr {
  border-color: var(--color-border);
}

/* ─── bg-shape — teñir de burgundy ────────────────────────────────────────── */

/* Shapes como <img> — PNGs ya recoloreados a burgundy via script */
img[src*="bg-shape"],
img[src*="bgShape"],
.bottom-shape img,
.corner-shape {
  opacity: 1 !important;
}

/* Shapes como background-image — recoloreados via script a burgundy */

/* Hero booking: quitar el shape exterior duplicado (booking-bg-shape.png)
   Solo se mantiene el inner shape (booking-shape.png en .info) */
.hero-banner .booking .booking-detail {
  background: none !important;
}

/* ─── Secciones con fondo gris → burgundy ─────────────────────────────────── */

/* Fondo burgundy en todas las secciones que usaban #F1F5F8 */
.rooms .content,
.suite-room .content,
.activities .content,
.testimonial .content,
.gallery .content,
.amenities .amenities-wrapper,
.room-detail .room-detail-wrapper,
.about .journey-sec-wrapper,
.story_1 .story_1-content,
.story_2 .story_content-2,
.team-sec .team-wrapper,
.restaurant-sec .restaurant-wrapper,
.restaurant-menu .menu-wrapper,
.blog-grid .blog-grid-wrapper,
.blog-detail-sec .blog-detail-wrapper {
  background: var(--color-primary) !important;
}

/* Títulos de sección → blanco cuando están sobre fondo burgundy */
.rooms .content .sec-heading .light-black,
.rooms .content .sec-heading .sec-text,
.rooms .content .sec-heading h2,
.suite-room .content .sec-heading .light-black,
.suite-room .content .sec-heading .sec-text,
.suite-room .content .sec-heading h2,
.activities .content .sec-heading .light-black,
.activities .content .sec-heading .sec-text,
.activities .content .sec-heading h2,
.testimonial .content .sec-heading .light-black,
.testimonial .content .sec-heading .sec-text,
.testimonial .content .sec-heading h2,
.gallery .content .sec-heading .light-black,
.gallery .content .sec-heading .sec-text,
.gallery .content .sec-heading h2 {
  color: #F1F5F8 !important;
}

/* Secciones cuyo .sec-heading está FUERA de .content (hermano anterior) */
.rooms .sec-heading .light-black,
.rooms .sec-heading .sec-text,
.rooms .sec-heading h2,
.suite-room .sec-heading .light-black,
.suite-room .sec-heading .sec-text,
.suite-room .sec-heading h2,
.suite-room .sec-heading p,
.activities .sec-heading .light-black,
.activities .sec-heading .sec-text,
.activities .sec-heading h2,
.testimonial .sec-heading .light-black,
.testimonial .sec-heading .sec-text,
.testimonial .sec-heading h2,
.gallery .sec-heading .light-black,
.gallery .sec-heading .sec-text,
.gallery .sec-heading h2 {
  color: #F1F5F8 !important;
}

/* Bullet point eliminado — se oculta globalmente en la sección de tipografía */

/* ─── Tipografía — Overrides de clases del template ────────────────────────── */

/* Override global: eliminar Lato y Open Sans del template, usar Montserrat/Source Sans 3 */
* {
  font-family: inherit;
}

/* Títulos y headings → Montserrat */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.h-111, .h-69, .h-56, .h-40, .h-31, .h-24, .h-18,
.sec-title,
.card-title, .room-title, .slide-title,
.banner-content h1, .banner-content h4,
[class*="heading"] {
  font-family: 'Montserrat', sans-serif !important;
}

/* Subtítulos de sección (ALOJAMIENTO, OPINIONES, etc.) → cursiva elegante */
.sec-heading .sec-text,
.sec-heading p.h-18 {
  font-family: 'Montserrat', sans-serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
}

/* Eliminar bullet point (::before) de los subtítulos */
.sec-heading .sec-text::before,
.sec-heading p::before {
  display: none !important;
}

/* Cuerpo de texto → Source Sans 3 */
body, p, a, span, li, input, textarea, select, button, label,
.card-content, .card-desc, .room-desc, .date_label,
.fw-400, .fw-500, .fw-600 {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif !important;
}

/* ─── Botones del template — Override de color ──────────────────────────────── */

/* El template usa #978667 (dorado genérico) — reemplazar por Burgundy HGI */
/* Incluye la cadena específica del hero booking para ganar sobre app.css línea 3712 */
.cus-btn,
.hero-banner .booking .cus-btn,
.hero-banner .booking .booking-detail .info .detail .cus-btn {
  background: #fff !important;
  color: var(--color-primary) !important;
  overflow: hidden !important;
}

.cus-btn span {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

.cus-btn span samp {
  color: var(--color-primary) !important;
  width: 100% !important;
  text-align: center !important;
}

/* Paquetes — botón Reservar → burgundy con texto blanco */
.suite-room .cus-btn {
  background: var(--color-primary) !important;
  color: #fff !important;
}
.suite-room .cus-btn span samp {
  color: #fff !important;
}
.suite-room .cus-btn:hover {
  background: #8a2832 !important;
}

.cus-btn:hover,
.hero-banner .booking .cus-btn:hover,
.hero-banner .booking .booking-detail .info .detail .cus-btn:hover {
  background: #f5f5f5 !important;
  box-shadow: 0px 0px 20px 1px rgba(165, 50, 60, 0.3) !important;
}

/* Color de accent en íconos y estrellas */
.color-primary,
.fa-star-sharp {
  color: var(--color-accent) !important;
}

/* ─── Hero — overlay oscuro sobre las imágenes ───────────────────────────── */
.hero-banner .slide__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
}

.hero-banner .slide__content {
  z-index: 2 !important;
  position: relative !important;
}

/* ─── Fix hero — todos los textos en blanco, ancho limitado ──────────────── */
.hero-banner .slide__content--headings {
  max-width: 60% !important;
}

.hero-banner .banner-content h1,
.hero-banner .banner-content h2,
.hero-banner .banner-content h4,
.hero-banner .banner-content .title,
.hero-banner .slide__content h1,
.hero-banner .slide__content h4,
.hero-banner .slide__content .h-111,
.hero-banner .slide__content .h-56,
.hero-banner .slide__content--headings h1,
.hero-banner .slide__content--headings h4,
.hero-banner .slide__content--headings .light-black {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  font-family: 'Montserrat', sans-serif !important;
}

@media (max-width: 768px) {
  .hero-banner .slide__content--headings {
    max-width: 90% !important;
  }
}

/* ─── Footer — textos blancos ─────────────────────────────────────────────── */
footer a,
.footer-area a {
  color: #fff !important;
}

footer a:hover,
.footer-area a:hover {
  color: var(--color-accent) !important;
}

footer .h-18,
footer .h-24,
footer p,
footer li,
footer span,
footer .light-black,
footer .dark-gray,
.footer-area .light-black,
.footer-area .dark-gray {
  color: #fff !important;
}

footer .icon-detail i {
  color: var(--color-accent) !important;
}

/* ─── Paquetes — sección superpuesta al video, sin fondo en el heading ───── */
.suite-room {
  background: transparent !important;
}

.suite-room .content {
  background-color: var(--color-primary) !important;
}

.suite-room .room-content {
  background-color: var(--color-primary) !important;
}

/* ─── Logo badge — fondo burgundy, bordes curvos ─────────────────────────── */

header,
header .logo,
.home-header,
.header-inner_pages {
  overflow: visible !important;
}

.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), #8a2832);
  padding: 12px 20px;
  border-radius: 0 16px 0 16px;
  box-shadow: 0 2px 8px rgba(165, 50, 60, 0.3);
}

footer .footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ─── Actividades y Servicios — tarjetas ───────────────────────────────────── */

/* Restaurante (primer card): imagen sin radius en el lado derecho (lado interior) */
.activitie-card:not(.sec):not(.right) .card-image {
  border-radius: 3.125vw 0 0 3.125vw !important;
}

/* Experiencias Patagónicas (card .right): imagen sin radius en el lado izquierdo (lado interior) */
.activitie-card.right .card-image {
  border-radius: 0 3.125vw 3.125vw 0 !important;
}

/* Alineación izquierda */
.activitie-card .card-content {
  text-align: left !important;
}

/* Título: agrandado con separador Burgundy */
.activitie-card .card-title {
  font-family: var(--font-heading) !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: var(--color-secondary) !important;
  border-bottom: 2px solid var(--color-primary) !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
  line-height: 1.25 !important;
}

/* Lista — selectores reforzados para ganar sobre app.css */
.activitie-card .card-content .card-desc-list,
.activitie-card .card-desc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

.activitie-card .card-content .card-desc-list li,
.activitie-card .card-desc-list li {
  position: relative !important;
  padding-left: 22px !important;
  margin-bottom: 10px !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--color-secondary) !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

.activitie-card .card-content .card-desc-list li::before,
.activitie-card .card-desc-list li::before {
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: var(--color-primary) !important;
  font-size: 1.2rem !important;
  line-height: 1.55 !important;
  font-weight: 900 !important;
}

/* CTA button dentro del card del Spa */
.activitie-card.sec .card-cta {
  padding: 24px 0 4px 0 !important;
  text-align: left !important;
}

.activitie-card.sec {
  overflow: visible !important;
}

.btn-spa-cta,
.btn-spa-cta:link,
.btn-spa-cta:visited {
  display: inline-block !important;
  background: #fff !important;
  color: var(--color-primary) !important;
  border: none !important;
}

.btn-spa-cta:hover {
  background: #f5f5f5 !important;
  color: var(--color-primary) !important;
}

/* ─── Botón Reservar header — bordes redondeados, sin fondo negro ─────────── */
header .nav-logo .logo-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.axil-btn.btn-fill-primary {
  border-radius: 0 12px 0 12px !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ─── Rooms — imágenes uniformes y precio arriba izquierda ────────────────── */
.rooms .card-item .card-image {
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
}

.rooms .card-item .card-image img.card-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.rooms .card-item .card-price {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: #fff !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm) !important;
  z-index: 2 !important;
}

.rooms .card-item .card-price .price {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

.rooms .card-item .card-price .light-bold {
  font-size: 0.8rem !important;
  color: var(--color-muted) !important;
}

.rooms .card-item .card-image {
  position: relative !important;
}

/* Botón "Ver todas las habitaciones" */
.rooms .btn-block .cus-btn {
  padding: 24px 64px !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
}

/* Espaciado sección habitaciones — igual que el resto */
.rooms .card-block {
  margin-bottom: 24px !important;
}

/* ─── Galería — imágenes 30% más pequeñas ────────────────────────────────── */
.gallery .content .image-container img {
  width: 70% !important;
  display: block;
  margin: 0 auto;
}
.gallery .content .images .gallery-img img {
  width: 4.12vw !important;
  height: 4.12vw !important;
}

/* ─── Paquetes — imágenes uniformes y grandes ────────────────────────────── */
.suite-room .slide__img img.room_image {
  width: 100% !important;
  height: 550px !important;
  object-fit: cover !important;
}

@media (max-width: 768px) {
  .suite-room .slide__img img.room_image {
    height: 350px !important;
  }
}