@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;600;700&display=swap");

/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background-color: #f7f7f7;
    line-height: 1.6;
}

/* UTILIDADES */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bg-dark {
    background-color: #1a1a1a;
}

.title-white {
    color: #fff;
}

/* TIPOGRAFÍA GENERAL (Todo en Montserrat, jugando con pesos y espaciado para estilo Lexus) */
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4em;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 300;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 50px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 3px;
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Semi-Bold */
    font-size: 1.4em;
    letter-spacing: 1px;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */
    letter-spacing: 0.5px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

/* ---------------------------------
   1. CABECERA Y NAVEGACIÓN
   --------------------------------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.main-header {
    background: rgba(26, 26, 26, 0.9);
    color: #fff;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.main-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.header-left-block, .header-right-block {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;
}

.header-left-block {
    justify-content: flex-start;
}

.header-right-block {
    justify-content: flex-end;
}

/* Enlace del Menú Principal ÚNICO */
.nav-principal {
    display: flex;
    align-items: center;
}
.menu-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-link:hover {
    color: #d4af37;
}

/* Enlaces de Contacto (ICONOS) */
.contact-links {
    display: flex;
    gap: 15px;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-links a {
    font-size: 1.2em;
    font-weight: 400;
    margin: 0;
}
.call-link:hover {
    color: #d4af37;
}

/* LOGO CENTRADO */
.logo-center-container {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.logo-center {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em;
    letter-spacing: 12px;
    font-weight: 200; /* Extra-Light */
    color: #d4af37;
    text-transform: uppercase;
}

.logo-info {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65em;
    font-weight: 300; /* Light */
    letter-spacing: 4px;
    margin-top: 2px;
    color: #ccc;
    text-transform: uppercase;
}


/* ---------------------------------
   2. SECCIÓN HERO (VIDEO DE FONDO YOUTUBE)
   --------------------------------- */
.hero-video {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    padding-top: 0;
}

/* Video Background */
.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100vw;
    height: 56.25vw;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.hero-video::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
        background: rgba(0, 0, 0, 0.35);  /* ← ANTES 0.75, mucho más claro */
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    color: #fff;
    max-width: 900px;
    margin-bottom: 0;
}

/* ESTILOS PARA LOS TITULARES EN EL HERO */
.hero-main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 5em;
    letter-spacing: 15px;
    text-transform: uppercase;
    font-weight: 300;      /* ← ANTES 100. Forzamos 300, fino y consistente */
    margin-bottom: 15px;
    line-height: 1.1;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.hero-sub-eslogan {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    font-weight: 300;
    color: #fff;
    text-transform: none;
    font-style: italic;
    letter-spacing: 1px;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


.btn-exclusivo {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid #d4af37;
    color: #d4af37;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 0.9em;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Montserrat', sans-serif;
}

.btn-exclusivo:hover {
    background-color: #d4af37;
    color: #1a1a1a;
}

/* ESTILO DE BOTONES DE TIENDA (VEHÍCULOS Y ACCESORIOS) */
.store-links-buttons {
    position: absolute;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 30px;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.store-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #d4af37;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: 1px solid #d4af37;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.store-btn:hover {
    background-color: #d4af37;
    color: #1a1a1a;
    border-color: #d4af37;
}


/* ---------------------------------
   3. SECCIONES DE CONTENIDO
   --------------------------------- */
section {
    padding: 80px 0;
}

/* --- MISIÓN / VALORES --- */
.mission-statement .grid-valores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.mission-statement h3 {
    margin-bottom: 15px;
    color: #d4af37;
}

/* --- SECCIÓN DE ESPECIALIZACIÓN (Fondo oscuro) --- */
.focus-section {
    color: #333;
}

.focus-section.bg-dark {
    color: #fff;
}

.focus-section.bg-dark h2, .focus-section.bg-dark h3 {
    color: #fff;
}

/* Contenedor de la cuadrícula de 2 columnas para la especialización */
.grid-especializacion-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* Espacio entre las columnas */
    align-items: flex-start; /* Alinea el contenido en la parte superior */
    padding-top: 20px;
}

.col-spec {
    padding: 30px; /* Espaciado interno para cada columna */
    background-color: rgba(0, 0, 0, 0.3); /* Un ligero sombreado para separarlas visualmente */
    height: 100%; /* Asegura que ambas columnas tengan la misma altura visual */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.col-spec h3 {
    margin-bottom: 15px;
    font-size: 1.6em; /* Un poco más grande para destacar */
    text-transform: uppercase;
    letter-spacing: 2px;
}

.col-spec p {
    margin-bottom: 20px;
    line-height: 1.7;
}


/* Botones en la sección oscura */
.btn-detalles {
    display: inline-block;
    margin-top: auto; /* Empuja el botón hacia abajo */
    padding: 10px 25px;
    background-color: #d4af37;
    color: #1a1a1a;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 3px;
    transition: background-color 0.3s;
    align-self: flex-start; /* Asegura que solo ocupe el espacio necesario */
}

.btn-detalles:hover {
    background-color: #e0b84c;
}


/* --- PROYECTOS RECIENTES - ESTILO CARRUSEL --- */
.recent-projects {
    background-color: #f7f7f7;
    position: relative; /* Necesario para posicionar los botones */
}

/* 1. Contenedor Principal (define el área visible) */
.carousel-container {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden; /* Oculta las tarjetas que están fuera de la vista */
    position: relative;
    padding: 0 40px; /* Espacio para los botones de navegación */
}

/* 2. Pista del Carrusel (contiene todas las tarjetas y se desliza) */
.carousel-track {
    display: flex;
    transition: transform 0.4s ease-in-out; /* Animación de desplazamiento */
}

/* 3. Estilo de cada Tarjeta/Proyecto dentro del carrusel */
.project-card {
    min-width: calc(100% / 3); /* Muestra 3 tarjetas a la vez (100%/3) */
    padding: 15px; /* Espacio entre las tarjetas */
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s;
    cursor: pointer;
}

.project-card a {
    display: block;
    height: 100%;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.project-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.project-card .card-info {
    padding: 20px;
}

.project-card h3 {
    margin-bottom: 10px;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}

/* 4. Botones de Navegación */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(212, 175, 55, 0.9); /* Dorado */
    color: #1a1a1a;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 10;
    border-radius: 4px;
    transition: background-color 0.3s;
    opacity: 0.8;
}

.carousel-btn:hover {
    background: #d4af37;
    opacity: 1;
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

/* --- YOUTUBE CALLOUT --- */
.youtube-callout {
    text-align: center;
    background-color: #eaeaea;
}

.youtube-callout p {
    margin-bottom: 30px;
    font-size: 1.1em;
}

.video-embed {
    max-width: 900px;
    margin: 0 auto;
    height: 450px;
}

.video-embed iframe {
    width: 100%;
    height: 100%;
}

/* ---------------------------------
   4. FOOTER
   --------------------------------- */
footer {
    background-color: #1a1a1a;
    color: #999;
    padding: 40px 0 20px;
    font-size: 0.9em;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    border-bottom: 1px solid #333;
    padding-bottom: 30px;
    margin-bottom: 20px;
}

footer h4 {
    color: #d4af37;
    /* AJUSTE OPCIONAL: Si el título estaba muy separado del primer enlace */
    margin-bottom: 10px; 
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
}

footer a {
    display: block;
    
    /* CAMBIO CLAVE 1: Eliminamos el margen entre enlaces adyacentes */
    margin-bottom: 0; 
    
    /* CAMBIO CLAVE 2: Usamos un padding mínimo para crear la separación deseada */
    padding-top: 2px; 
    padding-bottom: 2px;
    
    /* Opcional: Aseguramos que la altura de línea no esté creando espacio extra */
    line-height: 1.2; 
    
    color: #999;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}

footer a:hover {
    color: #fff;
}

.copyright {
    text-align: center;
    color: #666;
}

/* Media Queries para Móvil */
@media (max-width: 992px) {
    .header-left-block, .header-right-block {
        gap: 10px;
    }
    .menu-link {
        padding-right: 10px;
        letter-spacing: 1.5px;
    }
    .contact-links {
        padding-right: 10px;
    }
    .mission-statement .grid-valores {
        grid-template-columns: 1fr;
    }
    /* Estructura de 2 columnas en móvil */
    .grid-especializacion-2col {
        grid-template-columns: 1fr; /* Pasa a ser una sola columna */
        gap: 30px;
    }
}

@media (max-width: 768px) {
    /* Hero Section */
    .hero-main-title {
        font-size: 3em;
        letter-spacing: 5px;
        margin-bottom: 10px;
    }
    .hero-sub-eslogan {
        font-size: 1em;
        margin-bottom: 40px;
    }
    
    /* Header Structure */
    .main-header {
        padding: 10px 0;
    }
    .main-header-content {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .logo-center-container {
        position: static;
        transform: none;
        order: -1;
        width: 100%;
        margin-bottom: 10px;
    }
    .logo-center {
        font-size: 1.8em;
        letter-spacing: 5px;
    }
    
    /* Menú y Utilidades */
    .header-left-block {
        order: 1;
        flex: none;
        padding-right: 10px;
    }
    .header-right-block {
        order: 2;
        flex: none;
        padding-left: 10px;
    }
    .menu-link {
        border-right: none;
        padding-right: 15px;
    }

    /* Botones de Tienda en Móvil */
    .store-links-buttons {
        flex-direction: column;
        gap: 15px;
        bottom: 30px;
    }
    .store-btn {
        width: 80%;
        margin: 0 auto;
        font-size: 1.2em;
        letter-spacing: 2px;
    }
    
    /* Carrusel en Móvil */
    .project-card {
        min-width: 100%; /* Una tarjeta por vista en móvil */
    }
    .carousel-container {
        padding: 0; /* No necesitamos padding lateral */
    }
    .carousel-btn {
        padding: 10px 5px;
        font-size: 1.2em;
        left: 5px;
        right: 5px;
    }
    .prev-btn {
        left: 5px;
    }
    .next-btn {
        right: 5px;
    }
}
/* Footer compacto y uniforme */
footer{
  line-height: 1.28;                 /* único ritmo vertical (ajusta 1.24–1.32) */
}

.footer-grid > div{
  display: block;                     /* sin gaps internos automáticos */
}

/* Todos los ítems (menos el título) sin márgenes ni padding extra */
.footer-grid > div > *:not(h4){
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  display: block;
}

/* Enlaces igual que los <p> */
footer a{
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
  display: block;
}

/* Título con separación mínima */
footer h4{
  margin: 0 0 10px !important;
  line-height: 1.1;
}

/* Si usaste <br> dentro de <p> en “Contacto”, que no sume más espacio */
footer .footer-grid br{
  line-height: inherit;
}
/* ====== GULO HEADER & MENU ====== */
.gulo-header{position:sticky; top:0; z-index:1100; background:#000; color:#fff}
.gulo-topbar{display:grid; grid-template-columns:56px 1fr auto 1fr 56px; align-items:center; height:70px; padding:0 6px}
.gulo-burger{width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer}
.gulo-burger span{display:block; width:18px; height:2px; background:#fff; margin:2px 0}
.gulo-logo{grid-column:3/4; text-align:center; color:#fff; text-decoration:none; letter-spacing:8px; font-weight:700}
.gulo-top-actions-left, .gulo-top-actions-right{display:flex; align-items:center; gap:6px}
.gulo-top-actions-left{grid-column:2/3; justify-content:flex-start}
.gulo-top-actions-right{grid-column:4/5; justify-content:flex-end}
.gulo-icon{background:transparent; border:0; color:#fff; font-size:18px; cursor:pointer}

.gulo-searchbar{background:#0e0e0e; padding:8px 12px; border-top:1px solid rgba(255,255,255,.08)}
.gulo-searchbar form{display:flex; gap:8px}
.gulo-searchbar input{flex:1; padding:10px 12px; background:#1a1a1a; border:1px solid rgba(255,255,255,.15); color:#fff}
.gulo-searchbar button{padding:10px 14px; border:0; cursor:pointer}
.gulo-searchbar [type="submit"]{background:#d4af37; color:#111; font-weight:700}
.gulo-searchbar #guloSearchClose{background:#333; color:#fff}

.gulo-overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1198; opacity:0; transition:opacity .2s ease}
.gulo-overlay.open{opacity:1}
.gulo-noscroll{overflow:hidden}

/* Off-canvas */
.gulo-menu{position:fixed; inset:0 auto 0 0; width:min(440px, 92vw); background:#0f0f0f; color:#fff; z-index:1199; transform:translateX(-100%); transition:transform .2s ease; display:flex; flex-direction:column}
.gulo-menu.open{transform:translateX(0)}

.gulo-menu-head{display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 12px; border-bottom:1px solid rgba(255,255,255,.08)}
.gulo-close{background:transparent; border:0; color:#fff; font-size:20px; cursor:pointer}
.gulo-menu-icons{display:flex; align-items:center; gap:10px}
.gulo-lang{font-size:12px; letter-spacing:1px; opacity:.85}

.gulo-menu-body{flex:1; overflow:auto}
.gulo-list{list-style:none; margin:0; padding:0}
.gulo-list > li{border-bottom:1px solid rgba(255,255,255,.08)}
.gulo-list a, .gulo-acc-btn{display:flex; align-items:center; justify-content:space-between; width:100%; padding:18px 16px; color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:1px; font-weight:600}
.gulo-list a:hover, .gulo-acc-btn:hover{background:#141414}
.gulo-accordion .plus{margin-left:12px; opacity:.8}
.gulo-acc-panel{background:#0b0b0b}
.gulo-acc-panel ul{list-style:none; margin:0; padding:4px 0 12px}
.gulo-acc-panel li a{padding:12px 24px; text-transform:none; letter-spacing:.5px; font-weight:600; opacity:.95}

/* Parte inferior separada */
.gulo-menu-bottom{margin-top:auto; border-top:1px solid rgba(255,255,255,.12)}

/* Botones rápidos */
.gulo-menu-quick{display:flex; gap:10px; padding:12px; border-top:1px solid rgba(255,255,255,.08)}
.quick-btn{flex:1; text-align:center; padding:12px 14px; background:#d4af37; color:#111; font-weight:800; letter-spacing:1px; text-transform:uppercase; text-decoration:none}
.quick-btn.outline{background:transparent; color:#d4af37; border:2px solid #d4af37}

/* Responsive */
@media (max-width:720px){
  .gulo-topbar{grid-template-columns:56px 1fr auto 1fr 56px; height:64px}
  .gulo-logo{letter-spacing:6px}
  .gulo-menu{width:100vw}
}
/* ===== Off-canvas blanco, tipografía elegante, estilo Chelsea ===== */

/* Panel */
.gulo-ocm{
  position: fixed; inset: 0 auto 0 0;
  width: 420px; max-width: 86vw;
  background:#fff; color:#111;
  transform: translateX(-100%); transition: transform .35s ease;
  z-index: 2000; box-shadow: 10px 0 30px rgba(0,0,0,.15);
  display:flex; flex-direction:column;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.gulo-ocm.open{ transform: translateX(0); }

/* Overlay más elegante */
.gulo-ocm__overlay{
  position: fixed; inset:0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(1.5px); transition: opacity .3s ease;
  opacity:1; z-index:1995;
}
.gulo-ocm__overlay[hidden]{ opacity:0; pointer-events:none; }

/* Cabecera del panel */
.gulo-ocm__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid #ececec;
}
.gulo-ocm__close{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-size:22px; line-height:1; color:#111;
}
.gulo-ocm__lang{ font-size:.85rem; letter-spacing:.08em; color:#666; }

/* Cuerpo del menú */
.gulo-ocm__body{ overflow:auto; padding:6px 0 22px; }
.gulo-ocm__list{ list-style:none; margin:0; padding:0; }
.gulo-ocm__list > li{ border-bottom:1px solid #ececec; }

/* Enlaces de primer nivel */
.gulo-ocm__list > li > a,
.gulo-ocm__acc-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:18px 22px;
  color:#161616; text-decoration:none;
  text-transform:none; letter-spacing:.4px;
  font-weight:600; font-size:15.5px;
  background:#fff; border:0; cursor:pointer;
}

/* Indicador “+” del acordeón */
.gulo-ocm__acc-btn span{ display:none; } /* ocultamos el + del HTML */
.gulo-ocm__acc-btn::after{
  content:"+"; font-weight:600; color:#222; transition: transform .25s ease, opacity .25s ease;
}
.gulo-ocm__acc-btn[aria-expanded="true"]::after{
  transform: rotate(45deg); opacity:.8;
}

/* Panel desplegable */
.gulo-ocm__panel{ padding:8px 0 10px 0; background:#fafafa; border-top:1px solid #f1f1f1; }
.gulo-ocm__panel[hidden]{ display:none; }
.gulo-ocm__panel ul{ list-style:none; margin:0; padding:6px 12px 12px 22px; }
.gulo-ocm__panel li a{
  display:block; padding:10px 8px; color:#333; text-decoration:none;
  font-weight:500; letter-spacing:.2px; font-size:14.5px;
}
.gulo-ocm__panel li a:hover{ color:#000; }

/* Bloque inferior (Contacto) */
.gulo-ocm__bottom{ margin-top:16px; border-top:1px solid #ececec; }

/* Accesibilidad hover/focus */
.gulo-ocm__list > li > a:hover,
.gulo-ocm__acc-btn:hover{ background:#f8f8f8; }
.gulo-ocm__list > li > a:focus,
.gulo-ocm__acc-btn:focus{ outline:2px solid #111; outline-offset:-2px; }


/* ========================================================================= */
/* 2. ESTILOS DE CABECERA Y MENU OFFCANVAS (CHELSEA TRUCKS STYLE) */
/* ========================================================================= */

/* Esconder el header antiguo que ya no se usa, o si el nuevo bloque lo requiere */
header .container { display:none; }

/* === HEADER NUEVO (Estructura Flex) === */
.main-header { 
    background-color: #000; 
    padding: 15px 0;
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Asegura el ancho del contenedor */
    margin: 0 auto;
    padding: 0 20px;
}

/* === LOGO Y TEXTO === */
.logo-guloffroad { 
    display: flex; 
    align-items: center; 
    text-decoration: none; 
    color: #fff; 
    font-size: 16px;
    font-weight: 600;
}
.logo-guloffroad img { display: none; } /* Ocultar imagen si se usa texto */
.logo-desktop-text { margin-right: 5px; }
.logo-year { font-size: 12px; font-weight: 300; opacity: 0.7; }

/* === UTILIDADES Y BOTONES === */
.header-utility {
    display: flex;
    align-items: center;
}
.header-utility a {
    color: #fff;
    text-decoration: none;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
}
.header-utility a:hover { opacity: 0.8; }

/* === BOTÓN MENÚ === */
.menu-toggle {
    background: none;
    border: none;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none; /* Como es un link */
    padding: 5px 10px;
    font-size: 16px;
    letter-spacing: 1px;
}
.menu-toggle:hover {
    color: var(--gold, #FFC107);
}
/* ===== MENÚ OFF-CANVAS — CHELSEA CLEAN (único) ===== */

/* Capas: header < overlay < panel */
header { z-index: 1000; }
.menu-overlay { z-index: 10000; }
.mobile-menu-sidebar { z-index: 10001; }

/* Panel blanco, cerrado por defecto desde la izquierda */
.mobile-menu-sidebar{
  position: fixed; top: 0; left: 0; height: 100vh;
  width: 86vw; max-width: 340px;          /* si lo prefieres más fino, 280px */
  background: #fff !important; color: #111 !important;
  transform: translateX(-100%) !important; /* oculto */
  transition: transform .28s ease;
  overflow: auto; box-shadow: 5px 0 15px rgba(0,0,0,.20);
}
.mobile-menu-sidebar.active{ transform: translateX(0) !important; }

/* Oculta la franja superior que te muestra “Guloffroad + X” */
.sidebar-header{ display: none !important; }

/* Lista principal estilo Chelsea */
.main-menu-list{ list-style: none; margin: 0; padding: 0; }
.main-menu-list > li{ border-bottom: 1px solid #eee; }
.main-menu-list > li > a,
.main-menu-list > li.has-submenu > a{
  display: block; padding: 16px 22px;
  color: #222; background: #fff;
  font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.main-menu-list > li > a:hover{
    background: #fff;        /* blanco siempre */
    color: #FFC107;          /* amarillo Guloffroad */
}
/* Submenús plegables en blanco */
.has-submenu > .submenu{
  list-style: none; margin: 0; padding: 0; display: none; background: #fff;
}
.has-submenu.open > .submenu{ display: block; }
.submenu a{
  display: block; padding: 12px 28px;
  color: #444; font-weight: 500; text-transform: none;
  border-bottom: 1px solid #eee;
}
.submenu a:hover{
    background: #fff;
    color: #FFC107;
}

/* Chevron indicador */
.has-submenu > a{ position: relative; }
.has-submenu > a::after{
  content: "›"; position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-size: 18px; color: #999;
}
.has-submenu.open > a::after{ transform: translateY(-50%) rotate(-90deg); color:#666; }

/* Overlay solo para oscurecer el fondo (nunca por encima del panel) */
.menu-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.menu-overlay.active{ opacity: 1; pointer-events: auto; }

/* Header visible sobre el vídeo */
.main-header{
  background: rgba(26,26,26,.90) !important;
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
/* SOLO COLOR AMARILLO EN HOVER — SIN CAMBIAR FONDO */
.mobile-menu-sidebar .main-menu-list li > a:hover,
.mobile-menu-sidebar .submenu li > a:hover {
    color: #FFC107 !important;   /* Amarillo Guloffroad */
    background: none !important; /* Fondo SIEMPRE blanco */
}


/* Por si existe otra variante antigua de overlay en tu proyecto */
.mobile-menu-overlay[hidden]{ display: none !important; }