/* Cambia el color de fondo del body (fondo general de la página) */
body {
    background: #000000 !important; 
}


/* ===== RBB Brito Hotel – Colores personalizados ===== */

/* Color corporativo principal */
:root {
  --primary: #97CADD;
}

/* Botón principal */
.btn-primary {
  background-color: #97CADD !important;
  border-color: #97CADD !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #003667 !important; /* tono más oscuro en hover */
  border-color: #003667 !important;
}

/* Botón outline */
.btn-outline-primary {
  color: #004483 !important;
  border-color: #004483 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #004483 !important;
  border-color: #004483 !important;
  color: #fff !important;
}

/* Badges */
.badge-primary {
  background-color: #004483 !important;
  color: #fff !important;
}

/* Íconos destacados (auditorios, about, roof info) */
.auditorios-list i,
.about-bullets i,
.roof-info .item i {
  color: #004483 !important;
}

/* ===== Overrides fuertes: botones al azul corporativo ===== */
a.btn.btn-primary,
button.btn.btn-primary,
input[type="submit"].btn.btn-primary,
.btn.btn-primary {
  background-color: #028ABE !important;
  border-color: #028ABE !important;
}

/* Hover/active/focus */
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
a.btn.btn-primary:active,
button.btn.btn-primary:hover,
button.btn.btn-primary:focus,
button.btn.btn-primary:active,
input[type="submit"].btn.btn-primary:hover,
input[type="submit"].btn.btn-primary:focus,
input[type="submit"].btn.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: #003667 !important;
  border-color: #003667 !important;
}

/* Outline primary */
a.btn.btn-outline-primary,
button.btn.btn-outline-primary,
.btn.btn-outline-primary {
  color: #fff !important;
  border-color: #004483 !important;
}
a.btn.btn-outline-primary:hover,
a.btn.btn-outline-primary:focus,
a.btn.btn-outline-primary:active,
button.btn.btn-outline-primary:hover,
button.btn.btn-outline-primary:focus,
button.btn.btn-outline-primary:active,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active {
  background-color: #5CE1E6 !important;
  border-color: #004483 !important;
  color: #fff !important;
}

/* Extras por si el tema pinta “primary” en más lugares */
.bg-primary { background-color: #004483 !important; }
.text-primary { color: #004483 !important; }
.border-primary { border-color: #004483 !important; }

/* Íconos/accentos */
.auditorios-list i,
.about-bullets i,
.roof-info .item i {
  color: #004483 !important;
}

/* ======== Overrides globales para reemplazar #d1002c por #004483 ======== */

/* Botones principales */
.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background-color: #004483 !important;
  border-color: #004483 !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #003667 !important;
  border-color: #003667 !important;
  color: #fff !important;
}

/* Botones outline */
.btn-outline-primary,
a.btn-outline-primary,
button.btn-outline-primary {
  border-color: #004483 !important;
  color: #004483 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #004483 !important;
  border-color: #004483 !important;
  color: #fff !important;
}

/* Fondos y textos que usaban primary */
.bg-primary { background-color: #004483 !important; }
.text-primary { color: #004483 !important; }
.border-primary { border-color: #004483 !important; }

/* Íconos/accentos */
.fa-play,
.auditorios-list i,
.about-bullets i,
.roof-info .item i,
.contact-section .icon span,
.ftco-footer .fa-chevron-right {
  color: #028ABE !important;
}

/* Campos de formulario (focus con azul) */
.form-control:focus {
  border-color: #004483 !important;
  box-shadow: 0 0 0 0.2rem rgba(0,68,131,.25) !important;
}

/* Links activos del navbar */
.navbar .nav-item.active .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #004483 !important;
}

/* Botón play del video */
.img-video span.fa-play {
  background: #004483 !important;
  color: #fff !important;
  border-radius: 50%;
  padding: 18px 22px;
  transition: background .3s ease;
}
.img-video span.fa-play:hover {
  background: #003667 !important;
}

/* ===== Contacto: iconos circulares y links ===== */

/* Círculos de los íconos (mapa, teléfono, mail, web) */
.contact-section .dbox .icon,
.dbox .icon {
  background-color: #004483 !important;   /* antes rojo */
  border-color: #004483 !important;
  color: #fff !important;                  /* color del ícono */
}

/* Algunas plantillas pintan el círculo en el <span> */
.contact-section .dbox .icon span,
.dbox .icon span {
  color: #fff !important;                  /* ícono blanco */
}

/* Texto/link a la derecha de los íconos */
.contact-section .dbox .text a {
  color: #004483 !important;               /* antes rojo */
  text-decoration: none;
}
.contact-section .dbox .text a:hover,
.contact-section .dbox .text a:focus {
  color: #003667 !important;
  text-decoration: underline;
}

/* Títulos “Dirección”, “Teléfono”, etc. si heredaban el rojo */
.contact-section .dbox .text span,
.contact-section .dbox .text strong {
  color: inherit; /* deja el color de texto normal */
}

/* ===== Link de crédito en el copyright (footer) ===== */
.ftco-footer .col-md-12.text-center a {
  color: #FFFFFF !important;     /* azul corporativo */
  font-weight: 600;
  text-decoration: none;
}
.ftco-footer .col-md-12.text-center a:hover {
  color: #003667 !important;     /* azul más oscuro en hover */
  text-decoration: underline;
}

/* ===== Botón de reproducción (video) ===== */
.img-video {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #004483 !important;   /* azul corporativo */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;           /* icono blanco */
  font-size: 26px;
  transition: background .3s ease, transform .3s ease;
}

.img-video:hover {
  background: #003667 !important;   /* azul más oscuro en hover */
  transform: scale(1.08);           /* pequeño zoom en hover */
}
/* Fondo azul del círculo */
.img-video {
  background: #004483 !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 80px; height: 80px; /* asegúrate de mantener proporción */
  font-size: 28px;
  position: relative;
  z-index: 2;
}

/* Pulso azul */
.img-video::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 68, 131, 0.6);
  animation: pulse-blue 2s infinite;
  z-index: 1;
}

@keyframes pulse-blue {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 68, 131, 0.6);
  }
  70% {
    box-shadow: 0 0 0 25px rgba(0, 68, 131, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 68, 131, 0);
  }
}

/* Ícono play blanco */
.img-video .fa-play {
  color: #fff !important;
  position: relative;
  z-index: 3;
}

/* --- Sobrescribir por completo la animación roja --- */
.img-video::before,
.img-video::after {
  all: unset; /* limpia todo lo heredado del app.min.css */
}

/* Redefinir solo el after para el pulso azul */
.img-video::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 68, 131, 0.6);
  animation: pulse-blue 2s infinite;
  z-index: 1;
}

/* Pulso azul */
@keyframes pulse-blue {
  0%   { box-shadow: 0 0 0 0 rgba(0, 68, 131, 0.6); }
  70%  { box-shadow: 0 0 0 25px rgba(0, 68, 131, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 68, 131, 0); }
}

/* Fondo circular e ícono */
.img-video {
  background: #004483 !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 80px; height: 80px;
  font-size: 28px;
  position: relative;
  z-index: 2;
}

.img-video .fa-play {
  color: #fff !important;
  position: relative;
  z-index: 3;
}
/* PLAY: color base del círculo */
.owl-carousel.home-slider .slider-item .slider-text .img-video{
  background:#004483 !important;
  -webkit-animation-name: playPulse !important;
          animation-name: playPulse !important;
}

/* PLAY: color del anillo de pulsación */
@-webkit-keyframes playPulse{
  0%   { -webkit-box-shadow:0 0 0 0 rgba(0,68,131,.4); }
  70%  { -webkit-box-shadow:0 0 0 30px rgba(0,68,131,0); }
  100% { -webkit-box-shadow:0 0 0 0 rgba(0,68,131,0); }
}
@keyframes playPulse{
  0%   { box-shadow:0 0 0 0 rgba(0,68,131,.4); }
  70%  { box-shadow:0 0 0 30px rgba(0,68,131,0); }
  100% { box-shadow:0 0 0 0 rgba(0,68,131,0); }
}



/* ===== Estilos para Títulos y Subtítulos del Carrusel ===== */

/* Estilo del título principal (BIENVENIDO septiembre) */
.carousel-title {
   font-family: 'Poppins', sans-serif !important; /* Usamos Bropella primero, luego Nunito Sans como fallback */
    font-size: clamp(2.5rem, 8vw, 5rem) !important; /* Tamaño responsivo */
    font-weight: normal !important; /* Bropella puede no tener 900 weight, so use normal */
    color: #FFFFFF !important;
  
    text-transform: uppercase; /* Si quieres que siempre esté en mayúsculas como el ejemplo */
    margin-bottom: 0.5rem !important; /* Ajuste el margen inferior */
    letter-spacing: 1px; /* Espaciado entre letras */
    /* Add extra specificity if still overridden */
    position: relative;
    z-index: 10; /* Ensure it's above other elements that might have higher z-index */
}

/* Estilo del subtítulo (¡La escapada perfecta te espera!) */
.carousel-subtitle {
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: clamp(1.1rem, 2vw, 1.7rem) !important; 
    font-weight: 500 !important; /* Negrita */
    color: #fff !important; /* Color blanco */
   
    margin-top: 0.5rem !important; /* Ajuste el margen superior */
    padding: 5px 15px; /* Pequeño padding para que la sombra se vea mejor */
    
    
    position: relative;
    z-index: 10;
}

/* Ajustes para el contenedor de texto en el carrusel para centrar */
/* This selector has good specificity; adding !important to display/align/justify */
.home-slider .slider-item .container .row.no-gutters.slider-text .col-md-12 .text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centra horizontalmente el texto */
    justify-content: center !important; /* Centra verticalmente el texto */
    height: 100% !important; /* Asegura que el contenedor ocupe toda la altura disponible */
    text-align: center !important; /* Centra el texto */
    width: 100% !important; /* Ensure it takes full width to center its content */
    margin: auto !important; /* May help with vertical centering depending on parent */
}

/* Asegurar que el botón "Reservar" también se centre */
.home-slider .slider-item .container .row.no-gutters.slider-text .col-md-12 .text .mb-0 {
    width: 100% !important;
    text-align: center !important;
    margin-top: 1.5rem !important; /* Espacio superior para el botón */
    position: relative;
    z-index: 10;
}

/* Aplicar la fuente Bropella a los títulos */
.carousel-title {
  font-family: 'Poppins', sans-serif !important;
  /* El !important puede ser necesario si app.min.css está forzando otra fuente */
  /* 4. ¡NUEVO! Grosor Negrita (Bold) */
  font-weight: 750 !important; 
}

/* 2. Aplica Nunito para el SUBTÍTULO */
.carousel-subtitle {
  /* Nunito Sans es la familia cargada en tu index.html */
  font-family: 'Nunito Sans', sans-serif !important;
}

/* Sobrescribe el color de fondo para la clase .bg-light */
.bg-light {
   
    background: #004483 !important; 
}
/* Fuerza el color de texto a blanco dentro de las secciones con fondo oscuro .bg-light */
.bg-light, 
.bg-light * {
    color: #FFFFFF !important;
}

/* Opcional: Si los enlaces también son difíciles de ver, cambia su color */
.bg-light a {
    color: #f7f7f7 !important; /* Un blanco ligeramente diferente para distinguirlos */
}

/* Cambia el color de fondo de los badges de la sección "canoa-badges" */
.badge-canoa {
    /* Fondo: Reemplaza con tu color deseado */
    background-color: #028ABE !important; /* Ejemplo: Naranja/Ámbar */
    /* Texto: Si el nuevo fondo es oscuro, mantén el texto blanco */
    color: #FFFFFF !important; 
    /* Borde: Haz que el borde coincida con el nuevo color */
    border-color: #028ABE !important; 
}

/* Anula el color de texto blanco solo para las tarjetas de la canoa, forzando un color oscuro */
.canoa-cards .card-body,
.canoa-cards .card-body * {
    color: #606062 !important; /* Color de texto oscuro para buen contraste con fondo claro */
}

/* Asigna un color distintivo a los títulos de las tarjetas de comida (h4) */
.canoa-cards .card-body h4 {
    color: #004483 !important; /* El color azul que estás usando */
}

/* --- Fix: Formato Horizontal (16:9) y Marco Blanco para Imágenes de Habitación --- */

/* 1. Marco Blanco (Borde) */
/* Aplica el marco directamente al elemento de la imagen (a.img) */
.portfolio-wrap .col-md-5 a.img {
    /* Define el grosor y color del borde */
    border: 10px solid #FFFFFF !important; 
    /* Añade una ligera sombra para el efecto de fotografía */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; 
    /* Asegura que la imagen de fondo cubra el espacio */
    background-size: cover !important; 
    background-position: center center !important;
}

/* 2. Forzar Formato Horizontal (Aspect Ratio Hack) */
/* El hack de padding-bottom se aplica directamente al elemento que tiene el fondo (a.img) */
.portfolio-wrap .col-md-5 a.img {
    /* Altura forzada a 0 */
    height: 0 !important;
    /* 56.25% de padding-bottom = relación de aspecto 16:9 (Horizontal) */
    padding-bottom: 75% !important; 
    /* Posicionamiento necesario para que el hack funcione */
    position: relative !important; 
    /* Asegura que se comporte como un bloque */
    display: block !important;
}

/* 3. Evitar que la columna contenedora fuerce una altura vertical (solo en desktop) */
/* Anula reglas de min-height o flexbox height que vienen de app.min.css */
@media (min-width: 768px) {
    .portfolio-wrap .col-md-5 {
        height: auto !important; 
        min-height: 0 !important;
        /* Asegura que el padding-bottom de la columna no interfiera si existe */
        padding-bottom: 0 !important; 
    }
}

/* --- 1. FONDO AZUL PARA SECCIONES SIN IMAGEN --- */
/* Esta regla aplica el fondo azul a la mayoría de las secciones */
.ftco-section {
    background-color: #011C4B  !important; 
}



/* --- 2. COLOR DE TEXTO BLANCO EN TODAS LAS SECCIONES --- */
/* Hace que todo el texto dentro de las secciones de contenido sea blanco */
.ftco-section, 
.ftco-section *,
.bg-light,
.bg-light * {
    color: #FFFFFF !important;
}

/* Asegura que los enlaces y los títulos también sean blancos */
.ftco-section a,
.bg-light a,
.ftco-section h1, .ftco-section h2, .ftco-section h3, .ftco-section h4, .ftco-section h5, .ftco-section h6,
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6 {
    color: #FFFFFF !important;
}

/* --- 3. EXCEPCIÓN: Tarjetas de Comida (La Canoa) --- */
/* Mantiene las tarjetas (que tienen fondo blanco) con texto oscuro para que se lean */
.canoa-cards .card-body {
    background-color: #FFFFFF !important; /* Fondo blanco para la tarjeta */
}
.canoa-cards .card-body *,
.canoa-cards .card-body p {
    color: #333333 !important; /* Texto oscuro para la descripción */
}
.canoa-cards .card-body h4 {
    color: #028ABE !important; /* Títulos h4 en azul (el color corporativo) */
}

/* Logo del footer */
.footer-logo {
  max-height: 80px;   /* ajusta el tamaño a tu gusto */
  width: auto;
  margin-bottom: 15px;  /* espacio debajo del logo */
  display: block;
}

.ftco-footer {
  background: #00112E !important;
}

.ftco-section .degree-left-footer:after,
.ftco-section .degree-left-footer:before {
  background: #00112E !important;
}

/* Cambia el color del efecto de esquina derecha (degree-right) */
.hero-wrap.degree-right:after {
    /* Aquí se define el color. Usa el color que quieres, por ejemplo, el azul corporativo */
    background: #011C4B !important; 
    /* Si tienes una regla para ::before también, debes incluirla: */
    /* background: #028ABE !important; */
}

/* Nota: En algunos temas, el pseudoelemento puede ser ::before */
.hero-wrap.degree-right:before {
    background: #011C4B !important; 
}

/* Cambia el color del elemento .degree-left */
.degree-left {
    background: #011C4B !important; 
}

/* Si .degree-left usa un pseudoelemento, también cámbialo para mayor seguridad: */
.degree-left:after, 
.degree-left:before {
    background: #011C4B !important; 
}

/* Sobrescribe el color del separador superior/inferior en las secciones .bg-light */
.bg-light::after,
.bg-light::before {
    background: #00112E !important; 
}

/* Sobrescribe el color del separador inferior del degree-left dentro de las secciones */
.ftco-section .degree-left:after,
.ftco-section .degree-left:before {
    background: #00112E !important; 
}

/* Fuerza el color de texto oscuro solo dentro del bloque de información .roof-info */
.roof-info,
.roof-info * {
    color: #333333 !important; /* Gris oscuro para el texto normal */
}

/* Fuerza el color oscuro para los iconos (que son la <i>) */
.roof-info i {
    color: #028ABE !important; /* Opcional: Podrías usar el color corporativo azul para los iconos */
}

/* Fuerza el color oscuro para el texto en negrita (<strong>) */
.roof-info strong {
    color: #333333 !important;
}

/* --- EXCEPCIÓN: Tarjetas de Roof (Mantiene fondo claro y texto oscuro) --- */

/* 1. Fondo de la tarjeta a Blanco */
.roof-cards .card-body {
    background-color: #FFFFFF !important; 
}

/* 2. Texto de la descripción (párrafos) a color oscuro */
.roof-cards .card-body *,
.roof-cards .card-body p {
    color: #333333 !important; /* Gris oscuro para el texto normal */
}

/* 3. Títulos (h4) a color azul corporativo para que resalten */
.roof-cards .card-body h4 {
    color: #028ABE !important; 
}

/* --- EXCEPCIÓN: Tarjetas de Estadísticas (.about-stats) --- */

/* Asegura que todos los elementos de texto dentro de las estadísticas sean oscuros */
.about-stats, 
.about-stats * {
    color: #333333 !important; /* Gris oscuro para el texto normal */
}

/* Opcional: Hace que el número de estadística resalte con el color corporativo azul */
.about-stats .stat-number {
    color: #028ABE !important; 
}

/* --- Fix: Formato Vertical para la imagen de la sección "Acerca de" --- */

/* 1. Aplicar el Aspect Ratio Hack Vertical (1:1.05) */
.about-hero-photo.img {
    /* Altura forzada a 0 */
    height: 0 !important;
    /* 105.5% de padding-bottom = relación de aspecto 1:1.05 (Ligeramente Vertical) */
    padding-bottom: 105.5% !important; 
    /* Posicionamiento necesario para que el hack funcione */
    position: relative !important; 
    /* Asegura que la imagen cubra todo el espacio */
    background-size: cover !important;
    background-position: center center !important;
}

/* 2. Asegurar que la columna contenedora no interfiera (solo en desktop) */
/* Es importante para anular cualquier 'min-height' del tema */
@media (min-width: 992px) { /* La clase col-md-6 aplica a partir de 992px */
    .ftco-animate .col-md-6:last-child {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important; 
    }
}