/**
 * ========================================================================
 * ARCHIVO: noir.css
 * PROYECTO: MOTELWEB.VIP
 * VERSIÓN: 2.1.0
 * FECHA DE PRODUCCIÓN: 2026-09-16
 * DESCRIPCIÓN: Template "Noir". Elegancia contemporánea: Jost geométrica,
 *              contraste moderado, minimalismo editorial.
 * ========================================================================
 */

:root {

    /* === COLORES DE MARCA === */
    --mw-color-primary: #B8935A;
    --mw-color-secondary: #8B7355;
    --mw-color-accent: #8B7355;
    --mw-color-border-gold: #3a2f1e;
    --mw-color-footer-bg: #050505;

    /* === TOKENS PERSONALIZABLES POR EL MOTEL (defaults de Noir) === */
    --mw-color-header-bg: transparent;
    --mw-color-menu-txt: #e8e4db;
    --mw-color-menu-icons: #B8935A;

    /* === FONDOS Y TEXTO === */
    --mw-color-bg: #050505;
    --mw-color-bg-alt: #0a0a0a;
    --mw-color-bg-soft: #0f0f0f;
    --mw-color-bg-card: #0d0d0d;
    --mw-color-text: #ffffff;
    --mw-color-text-muted: #8a8578;
    --mw-color-text-soft: #b5b0a3;
    --mw-color-border: #1f1f1f;
    --mw-color-border-soft: #2a2a2a;

    /* === TIPOGRAFÍA === */
    --mw-font-title: 'Jost', 'Urbanist', sans-serif;
    --mw-font-primary: 'Urbanist', sans-serif;

    --mw-font-weight-regular: 300;
    --mw-font-weight-semibold: 400;
    --mw-font-weight-bold: 500;
    --mw-font-weight-black: 700;

    /* === RADIOS === */
    --mw-radius-xs: 2px;
    --mw-radius-sm: 4px;
    --mw-radius-md: 6px;
    --mw-radius-lg: 8px;
    --mw-radius-xl: 12px;

    /* === SOMBRAS === */
    --mw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
    --mw-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.8);
    --mw-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.9);
    --mw-shadow-xl: 0 8px 40px rgba(0, 0, 0, 0.95);

    /* === OVERLAYS === */
    --mw-overlay-light: rgba(0, 0, 0, 0.5);
    --mw-overlay-medium: rgba(0, 0, 0, 0.7);
    --mw-overlay-heavy: rgba(0, 0, 0, 0.92);

    /* === FONDO DE PÁGINA (gradiente negro puro) === */
    --mw-color-page-bg: linear-gradient(to bottom, #0a0a0a 0%, #000000 100%);
    --mw-color-page-fallback: #050505;

    /* === TEXTOS SOBRE IMAGEN/VIDEO === */
    --mw-color-text-on-media: #ffffff;
    --mw-color-title-on-media: #ffffff;
    /* === Títulos personalizables === */
    --mw-color-title: var(--mw-color-text);
    --mw-color-cover-title: #ffffff;
}

/* ============================================================
   OVERRIDES ESPECÍFICOS
   ============================================================ */

body {
    /* Sin background-color — el gradiente lo aplica index.php con --mw-color-page-bg */
    color: var(--mw-color-text);
    font-weight: var(--mw-font-weight-regular);
    letter-spacing: 0.3px;
}

/* === TÍTULOS: Jost limpio, contemporáneo === */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--mw-font-title) !important;
    font-weight: var(--mw-font-weight-bold);
    letter-spacing: 0.5px;
    font-style: normal;
}

h1 {
    letter-spacing: 2px;
    font-weight: var(--mw-font-weight-regular);
}

/* === NOMBRE DEL MOTEL EN EL HERO (tratamiento especial) === */
.cover h1 {
    font-weight: 400 !important;
    letter-spacing: 3px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7) !important;
}

.subtitulo {
    font-family: var(--mw-font-primary) !important;
    font-weight: var(--mw-font-weight-semibold);
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 0.85rem !important;
    color: var(--mw-color-text-muted) !important;
}

.subtitulo h2 {
    font-family: var(--mw-font-title) !important;
    font-size: 3rem !important;
    font-weight: var(--mw-font-weight-regular);
    letter-spacing: 1px;
    text-transform: none;
    font-style: normal;
    color: var(--mw-color-title, var(--mw-color-text)) !important;
}

.texto-modulo {
    font-weight: var(--mw-font-weight-regular);
    color: var(--mw-color-text);
    font-family: var(--mw-font-primary);
    letter-spacing: 0.3px;
}

/* === HEADER === */
.template-noir .title-bar {
    background-color: var(--mw-color-header-bg);
    /* border-bottom: 1px solid rgba(184, 147, 90, 0.15); */
    padding: 1.2rem 1rem;
}

.title-bar-title {
    letter-spacing: 3px;
    font-weight: var(--mw-font-weight-semibold);
    text-transform: uppercase;
    font-size: 0.95rem !important;
}

/* === RESERVA EXPRESS === */
.nxs-reserva-contenedor {
    background: rgba(5, 5, 5, 0.85) !important;
    border: 1px solid rgba(184, 147, 90, 0.4) !important;
    border-radius: 4px !important;
    backdrop-filter: blur(20px);
}

.btn-reserva-nxs {
    background: transparent !important;
    color: var(--mw-color-primary) !important;
    border: 1px solid var(--mw-color-primary) !important;
    border-radius: 2px !important;
    letter-spacing: 3px;
    font-weight: var(--mw-font-weight-semibold) !important;
    font-size: 0.7rem !important;
    padding: 10px 20px !important;
    transition: all 0.3s;
    text-transform: uppercase;
}

.btn-reserva-nxs:hover {
    background: var(--mw-color-primary) !important;
    color: #050505 !important;
}

/* === HABITACIONES === */
.card-habitacion-wrapper {
    background: rgba(5, 5, 5, 0.85) !important;
    border: 1px solid rgba(184, 147, 90, 0.15) !important;
    border-radius: 4px !important;
    transition: border-color 0.4s;
}

.card-habitacion-wrapper:hover {
    border-color: rgba(184, 147, 90, 0.6) !important;
}

.title-seccion {
    font-family: var(--mw-font-primary) !important;
    font-weight: var(--mw-font-weight-bold);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--mw-color-text);
}

.title-seccion span {
    font-family: var(--mw-font-title) !important;
    font-weight: var(--mw-font-weight-semibold);
    letter-spacing: 1px;
    text-transform: none;
    font-size: 1.3rem;
    font-style: normal;
}

.room-carousel-wrapper {
    border-radius: 4px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9) !important;
}

.carousel-arrow {
    background: rgba(5, 5, 5, 0.7) !important;
    border: 1px solid rgba(184, 147, 90, 0.4);
    color: var(--mw-color-primary) !important;
}

.carousel-arrow:hover {
    background: var(--mw-color-primary) !important;
    color: #050505 !important;
}

.btn-reserva-vip {
    background: transparent !important;
    color: var(--mw-color-primary) !important;
    border: 1px solid var(--mw-color-primary) !important;
    border-radius: 2px !important;
    letter-spacing: 3px;
    font-weight: var(--mw-font-weight-semibold) !important;
    padding: 12px 20px !important;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.btn-reserva-vip:hover {
    background: var(--mw-color-primary) !important;
    color: #050505 !important;
    transform: none !important;
}

/* === GALERÍA MOSAICO === */
/* Noir redefine los DEFAULTS (cuando el motel elige "Auto"),
   NO bloquea las opciones que el motel elija. */

.template-noir .vip-gallery-wrapper.galeria-gap-auto {
    --galeria-gap: 3px;
}

.template-noir .vip-gallery-wrapper.galeria-radius-auto {
    --galeria-radius: 0;
}

/* Efecto hover: Noir prefiere desaturar en vez de zoom */
.template-noir .vip-gallery-wrapper .thumbnail-box:hover .thumbnail-media {
    transform: scale(1.03);
    filter: brightness(0.85);
}

/* Overlay "ver más" con color propio de Noir */
.template-noir .vip-gallery-more-overlay {
    background: rgba(5, 5, 5, 0.85);
    font-weight: var(--mw-font-weight-regular);
    letter-spacing: 3px;
}

/* === SERVICIOS === */
.item-service {
    text-shadow: none;
}

.item-service img {
    filter: brightness(0.9) sepia(0.15);
    transition: filter 0.3s;
}

.item-service:hover img {
    filter: brightness(1) sepia(0);
}

.item-service p {
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: var(--mw-font-weight-regular) !important;
    font-size: 0.65rem !important;
    color: var(--mw-color-text);
}

/* === DECO / CELEBRACIONES === */
.nxs-deco-item>div {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(184, 147, 90, 0.1);
    border-radius: 4px;
}

/* === UBICACIÓN === */
.btn-nav-vip {
    background: rgba(5, 5, 5, 0.9) !important;
    border: 1px solid rgba(184, 147, 90, 0.3) !important;
    border-radius: 2px !important;
    letter-spacing: 3px;
    font-weight: var(--mw-font-weight-semibold) !important;
    font-size: 0.7rem !important;
    padding: 14px 20px !important;
    text-transform: uppercase;
}

.btn-nav-vip:hover {
    background: rgba(184, 147, 90, 0.08) !important;
    border-color: var(--mw-color-primary) !important;
    transform: translateX(5px) !important;
    box-shadow: none !important;
}

.btn-nav-vip i {
    color: var(--mw-color-primary) !important;
}

/* === FOOTER === */
footer {
    background-color: var(--mw-color-footer-bg);
    border-top: 1px solid rgba(184, 147, 90, 0.15);
}

footer .innerfooter {
    border-top: 1px solid rgba(184, 147, 90, 0.08);
}

.newfooter {
    color: var(--mw-color-text-soft);
}

.newfooter b {
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: var(--mw-font-weight-semibold);
    color: var(--mw-color-primary);
    font-family: var(--mw-font-primary);
}

.img-perfil-footer {
    border-color: rgba(184, 147, 90, 0.4) !important;
    border-width: 1px !important;
    filter: grayscale(0.3);
}

/* === OFFCANVAS === */
.off-canvas#my-info {
    background: #050505;
    border-right: 1px solid rgba(184, 147, 90, 0.15);
}

.off-canvas .menu a {
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* === BOTONES GENERALES === */
.button {
    border-radius: 2px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: var(--mw-font-weight-semibold);
    background: var(--mw-color-primary);
    color: #050505;
}

.button:hover {
    background: #cba570;
    color: #050505;
}

/* === CALLOUT === */
.callout {
    background: rgba(5, 5, 5, 0.7);
    border: 1px solid rgba(184, 147, 90, 0.15);
    border-radius: 4px;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: rgba(184, 147, 90, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mw-color-primary);
}

/* ============================================================
   PORTADA (HERO) — Defaults de Noir
   ============================================================ */

/* Cuando el motel NO ha elegido alineación, Noir propone izquierda */
.template-noir .cover.align-auto h1,
.template-noir .cover.align-auto .texto-modulo {
    text-align: left;
}

/* La reserva express también va a la izquierda por defecto */
.template-noir .cover.reserva-align-auto .nxs-reserva-contenedor {
    margin-left: 0;
    margin-right: auto;
}

/* Título del motel en portada — tratamiento editorial */
.template-noir .cover .cover-titulo {
    font-family: var(--mw-font-title) !important;
    font-weight: 400 !important;
    letter-spacing: 3px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7) !important;
}

.template-noir .cover .cover-subtitulo {
    font-weight: var(--mw-font-weight-regular);
    letter-spacing: 0.3px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}