/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/
/* ==============================================
   LAS CASITAS PUERTO ARISTA - CUSTOM STYLES
   ============================================== */

/* --- Variables de Color (Referencia) ---
   Primario:   #227873
   Secundario: #073c45
   Acento/Bg:  #f6f2e1
*/

:root {
    --color-primary: #227873;
    --color-secondary: #073c45;
    --color-light-cream: #f6f2e1;
}

/* ==============================================
   1. ELEMENTOS GENERALES
   ============================================== */

::selection {
    background: var(--color-primary);
    color: #fff;
}

body {
    /* Opcional: si deseas un tono crema muy sutil en todo el fondo, 
       descomenta la siguiente línea. Si no, déjalo en blanco por defecto. */
    background-color: var(--color-light-cream);
}

a {
    color: var(--color-primary);
}

a:hover, a:focus {
    color: var(--color-secondary);
    text-decoration: none;
    outline: none;
}

/* Preloader */
#preloader {
    background-color: var(--color-light-cream);
}
#preloader [data-loader="circle-side"] {
    border-top-color: var(--color-primary);
}

/* ==============================================
   2. BOTONES Y FORMULARIOS
   ============================================== */

.btn_1,
a.btn_1 {
    background: var(--color-primary);
    color: #fff;
}

.btn_1:hover,
a.btn_1:hover {
    background: var(--color-secondary);
    color: #fff;
}

.btn_1.outline {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}

.btn_1.outline:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Formularios */
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: none;
}

.custom_select select:focus {
    border-color: var(--color-primary);
}

/* ==============================================
   3. ENCABEZADO Y NAVEGACIÓN
   ============================================== */

/* Menú lateral (Nav Panel) */
.nav_panel {
    background-color: #fff;
}

.nav_panel .sidebar-navigation ul li a:hover, 
.nav_panel .sidebar-navigation ul li.active a {
    color: var(--color-primary);
}

.nav_panel .phone_element a {
    color: var(--color-primary);
}

.nav_panel .phone_element a:hover {
    color: var(--color-secondary);
}

/* Hamburger Menu Icon */
.hamburger__inner, 
.hamburger__inner::before, 
.hamburger__inner::after {
    background-color: var(--color-secondary);
}

/* ==============================================
   4. SECCIONES Y CONTENIDO
   ============================================== */

/* Títulos */
.title h2,
.title h3 {
    color: var(--color-secondary);
}

.title small {
    color: var(--color-primary);
    font-weight: 600;
}

/* Texto destacado */
p.lead {
    color: var(--color-secondary);
}

/* Fondos específicos */
.pattern_2 {
    background-color: var(--color-light-cream) !important;
}

/* Habitaciones (Cards) */
.box_item_room .info .price,
.box_item_room_2 .info .price {
    color: var(--color-primary);
    font-weight: 700;
}

.box_item_room .info .cat_star i,
.box_item_room_2 .info .cat_star i {
    color: var(--color-primary);
}

.box_item_room .info h3 a:hover,
.box_item_room_2 .info h3 a:hover {
    color: var(--color-primary);
}

/* Iconos de Facilities */
.box_facilities_3 .info h3 {
    color: var(--color-secondary);
}

.box_contact i {
    color: var(--color-primary);
}

/* ==============================================
   5. FOOTER (PIE DE PÁGINA)
   ============================================== */

footer {
    background-color: var(--color-secondary);
    color: #fff;
}

footer .footer_bg .gradient_over {
    /* Capa oscura sobre la imagen del footer para legibilidad */
    background: rgba(7, 60, 69, 0.9); /* Usando el color secundario con opacidad */
}

footer h5 {
    color: var(--color-light-cream);
}

footer ul li a {
    color: rgba(255, 255, 255, 0.8);
}

footer ul li a:hover {
    color: var(--color-light-cream);
    opacity: 1;
}

footer .social ul li a {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

footer .social ul li a:hover {
    background-color: var(--color-primary);
}

#submit-newsletter {
    background-color: var(--color-primary);
}

#submit-newsletter:hover {
    background-color: var(--color-secondary);
}

/* ==============================================
   6. OTROS COMPONENTES
   ============================================== */

/* Botón "Scroll to Top" */
.progress-wrap {
    color: var(--color-primary);
}

.progress-wrap path {
    stroke: var(--color-primary);
}

/* Paginación */
.pagination__wrapper .pagination li a.active, 
.pagination__wrapper .pagination li a:hover {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Widgets Sidebar (Blog) */
.widget-title h4 {
    color: var(--color-secondary);
}

ul.cats li a:hover {
    color: var(--color-primary);
}

.tags a:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Reviews Progress Bar */
.progress-bar {
    background-color: var(--color-primary);
}