/* =========================================================
   VARIABLES GLOBALES DE COLOR DE MARCA
   Define los colores corporativos reutilizables en todo el CSS
   ========================================================= */
:root {
  --brand-red: #ef3340;
  --brand-black: #2d2926;
  --brand-gray: #b1b3b3;
  --brand-white: #ffffff;
}

/* =========================================================
   FUENTE CORPORATIVA: Myriad Pro Regular (peso 400)
   Carga la versión normal de la tipografía desde los assets
   ========================================================= */
@font-face {
    font-family: 'Myriad Pro';
    src: url('../assets/fonts/MyriadPro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* =========================================================
   FUENTE CORPORATIVA: Myriad Pro Bold (peso 700)
   Carga la versión negrita de la tipografía desde los assets
   ========================================================= */
@font-face {
    font-family: 'Myriad Pro';
    src: url('../assets/fonts/Myriad_Pro_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* =========================================================
   ESTILOS BASE DEL BODY
   Aplica la fuente corporativa, elimina márgenes por defecto
   y establece colores base para toda la página
   ========================================================= */
body {
    margin: 0;
    font-family: 'Myriad Pro', Arial, sans-serif;
    color: var(--brand-black);
    background-color: var(--brand-white);
}

/* =========================================================
   ENLACES DE NAVEGACIÓN - PESO DE FUENTE
   ⚠️ DUPLICADO: Este bloque es completamente sobrescrito por el segundo
   bloque .nav-link (línea ~131). La propiedad font-weight: 800 queda
   ignorada porque la segunda regla define font-weight: bold y llega después.
   ========================================================= */
/* DUPLICADO — ver bloque .nav-link más abajo (~línea 131)
.nav-link {
    font-weight: 800;
} */


/* =========================================================
   HEADER PRINCIPAL (barra de navegación superior)
   Fijo en la parte superior de la pantalla, siempre visible
   al hacer scroll. Fondo oscuro con línea roja inferior.
   ========================================================= */
.main-header {
    height: 70px; /* <-- ALTO DE LA BARRA OSCURA — ajusta este número */
    overflow: visible; /* permite que el logo sea más alto que la barra */
    border-bottom: 3px solid var(--brand-red);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10000;
    background-color: rgba(45,41,38,0.98);
}

/* =========================================================
   CONTENEDOR INTERNO DEL HEADER
   Alinea logo y navegación en fila, centrado con ancho máximo
   ========================================================= */
.header-container {
    display: flex;
    align-items: flex-start; /* flex-start = arriba | center = centrado | flex-end = abajo */
    justify-content: space-between;
    max-width: 2500px;
    margin: 0 auto;
    padding: 0 20px; /* Ajustado para centrar verticalmente mejor */
}

/* =========================================================
   COMPENSACIÓN DEL HEADER FIJO
   Evita que el contenido quede oculto debajo del header.
   El padding-top debe ser igual o mayor al alto del header.
   ⚠️ PARCIALMENTE SIN USO: .site-main no existe en ningún archivo HTML.
   Solo aplica el selector <main>. Se puede simplificar a solo "main".
   ========================================================= */
main, .site-main /* UNUSED: .site-main no existe en el HTML */ {
    padding-top: 70px; /* <-- DEBE COINCIDIR con el height de .main-header */
}

/* =========================================================
   LOGO DEL HEADER
   Controla el tamaño de la imagen del logo sin deformarlo
   ========================================================= */
.logo img {
    height: 150px;
    width: auto;
    padding: 0px 0;
    margin-top: -40px; /* <-- AJUSTA ESTE NÚMERO: más negativo = sube más el logo */
}

/* Ocultar logo móvil por defecto (escritorio) */
.logo-mobile {
    display: none;
}

/* =========================================================
   POSICIÓN HORIZONTAL DEL BLOQUE DE NAVEGACIÓN
   margin-left negativo mueve todo el menú hacia la izquierda.
   margin-right: auto lo empuja hasta pegarlo al logo (izquierda máxima).
   ========================================================= */
.nav-menu {
    margin-left: -180px; /* <-- AJUSTA ESTE NÚMERO (más negativo = más a la izquierda) */
}

/* =========================================================
   LISTA DEL MENÚ DE NAVEGACIÓN
   Muestra los ítems en fila horizontal con espaciado entre ellos
   ========================================================= */
.nav-list {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 10;
    padding: 0;
}

/* =========================================================
   ESTILO DE CADA ENLACE DEL MENÚ
   Texto blanco, mayúsculas, sin subrayado. Define el aspecto
   de los links principales de la barra de navegación.
   ========================================================= */
.nav-link {
    color: var(--brand-white);
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 0;
    position: relative; /* Para posicionar el subrayado */
}

/* =========================================================
   ÍTEM DE NAVEGACIÓN CON DROPDOWN
   El padding/margin negativo crea un área de hover extendida
   hacia abajo para que el cursor pueda bajar al dropdown
   sin que se cierre accidentalmente.
   ========================================================= */
.nav-item {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: -15px;
}

/* =========================================================
   SUBRAYADO ANIMADO PARA ENLACES DEL MENÚ
   Crea una línea que aparece de izquierda a derecha al
   pasar el cursor sobre los enlaces principales.
   ========================================================= */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; /* Grosor del subrayado */
    bottom: 5px; /* Distancia desde el texto */
    left: 0;
    background-color: var(--brand-red); /* Color del subrayado (rojo-naranja de la paleta) */
    transition: width 0.3s ease-out;
}

.nav-item:hover .nav-link::after { width: 100%; }

/* =========================================================
   PUENTE INVISIBLE BAJO EL ÍTEM DEL MENÚ
   Elemento pseudo que cubre el espacio entre el link y el
   dropdown, manteniendo el estado :hover activo mientras
   el cursor se mueve hacia abajo.
   ========================================================= */
.nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    height: 24px;
    display: block;
    pointer-events: auto;
}

/* =========================================================
   CONTENIDO DEL DROPDOWN (menú desplegable)
   Oculto por defecto. Se posiciona debajo del ítem del menú
   con sombra y borde rojo superior. Se muestra con hover.
   ========================================================= */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--brand-white);
    min-width: 220px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    border-top: 3px solid var(--brand-red);
    /* REDUNDANTE: padding-top: 0 es el valor por defecto del navegador */
    /* padding-top: 0; */
    z-index: 9999;
}

/* =========================================================
   DROPDOWN ACCESIBLE POR TECLADO (focus)
   Permite que el dropdown se abra al navegar con Tab,
   necesario para accesibilidad web.
   ========================================================= */
.nav-item:focus-within .dropdown-content {
    display: block;
}

/* =========================================================
   ENLACES DENTRO DEL DROPDOWN
   Estilo de cada opción de la lista desplegable:
   texto oscuro, padding generoso, bloque completo clickeable
   ========================================================= */
.dropdown-content a {
    color: var(--brand-black);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

/* =========================================================
   ICONOS DENTRO DE ENLACES DEL DROPDOWN
   Pequeñas imágenes que aparecen junto al texto de cada opción.
   Fondo rojo con esquinas redondeadas para resaltarlos.
   ========================================================= */
.dropdown-content a .menu-icon,
.dropdown-content a > .menu-icon {
    width: 40px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block;
    background-color: #eb0404;
    padding: 4px;
    border-radius: 6px;
    /* REDUNDANTE: box-shadow: none es el valor por defecto, no hace nada */
    /* box-shadow: none; */
}

/* =========================================================
   HOVER EN ENLACES DEL DROPDOWN
   Cambia el fondo a gris corporativo al pasar el cursor
   ========================================================= */
.dropdown-content a:hover {
    background-color: var(--brand-gray);
    /* REDUNDANTE: color: var(--brand-black) ya está definido en .dropdown-content a {},
       el hover no cambia el color, esta línea no tiene efecto visual */
    /* color: var(--brand-black); */
}

/* =========================================================
   MOSTRAR DROPDOWN AL PASAR EL CURSOR SOBRE EL ÍTEM
   Activa la visibilidad del menú desplegable con hover
   ========================================================= */
.nav-item:hover .dropdown-content {
    display: block;
}

/* =========================================================
   SECCIÓN HERO CON VIDEO DE FONDO
   Banner principal de la página: ocupa el 70% del alto de
   pantalla y centra el texto en la parte inferior.
   ========================================================= */
.video-hero {
    position: relative;
    height: 70vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 50px;
}

/* =========================================================
   CONTENEDOR DEL VIDEO DE FONDO
   Posiciona el video detrás de todo el contenido (z-index: -1)
   cubriendo todo el área del hero.
   ========================================================= */
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* =========================================================
   VIDEO DE FONDO (#bg-video)
   El video cubre toda el área sin distorsionarse,
   como un fondo de pantalla dinámico.
   ========================================================= */
#bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   OVERLAY DE TEXTO SOBRE EL VIDEO
   Centra el contenido textual encima del video de fondo
   ========================================================= */
.hero-overlay {
  /* --- Posicionamiento --- */
  position: relative;          /* relative: flujo normal | absolute: relativo al padre */
  width: 100%;                 /* ancho del overlay */
  height: auto;                /* alto automático según el contenido */
  z-index: 1;                  /* orden de apilamiento (encima del video) */

  /* --- Alineación del contenido --- */
  display: flex;               /* flex | block | grid */
  flex-direction: column;      /* column: apila verticalmente | row: horizontal */
  justify-content: center;     /* center | flex-start (arriba) | flex-end (abajo) */
  align-items: center;         /* center | flex-start (izq) | flex-end (der) */
  text-align: center;          /* center | left | right */

  /* --- Color y fondo --- */
  color: var(--brand-white);   /* color del texto */
  background-color: transparent; /* fondo del overlay: transparent | rgba(0,0,0,0.4) para oscurecer */

  /* --- Espaciado interno --- */
  padding: 0 20px;             /* padding vertical horizontal */
}

/* =========================================================
   TÍTULO H1 DE LA SECCIÓN HERO
   Ajusta aquí todas las propiedades tipográficas del título
   ========================================================= */
.hero-text h1 {
    font-size: 3.5rem;          /* tamaño del texto */
    font-weight: 700;           /* grosor: 100 (fino) - 900 (negrita) */
    font-family: inherit;       /* fuente: inherit usa la fuente global, o escribe una específica */
    font-style: normal;         /* normal | italic | oblique */
    text-transform: uppercase;  /* none | uppercase | lowercase | capitalize */
    letter-spacing: 0px;        /* espacio entre letras */
    line-height: 1.2;           /* altura de línea */
    color: inherit;             /* hereda el color del padre (.hero-overlay) */
    text-shadow: 3px 3px 15px rgba(0,0,0,0.8); /* sombra: x y desenfoque color */
    margin-bottom: 0px;        /* espacio inferior */
}

/* =========================================================
   CLASE DE COLOR ROJO CORPORATIVO
   Utilitaria para aplicar el rojo de marca a cualquier texto
   ========================================================= */
.text-red {
  color: var(--brand-red);
}

/* =========================================================
   BOTÓN ROJO PRINCIPAL (.btn-red)
   Botón de llamada a la acción con fondo rojo corporativo,
   bordes redondeados y transición suave al hover.
   ========================================================= */
.btn-red {
  background-color: var(--brand-red);
  color: white;
  padding: 12px 30px; /* arriba/abajo | izquierda/derecha — controla el tamaño interno */
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  font-size: 13px;    /* <-- tamaño del texto del botón */
  display: inline-block;
  transition: 0.3s;
}

/* =========================================================
   BOTÓN SECUNDARIO OUTLINE (.btn-outline)
   Botón con borde blanco y texto blanco para acciones secundarias
   en el header. Complementa al btn-red sin competir visualmente.
   ========================================================= */
.btn-outline {
  background-color: transparent;          /* sin relleno — efecto outline */
  color: white;                           /* texto blanco sobre header oscuro */
  padding: 10px 20px;                     /* ligeramente más compacto que btn-red */
  text-decoration: none;                  /* sin subrayado */
  font-weight: bold;                      /* mismo peso tipográfico que btn-red */
  border-radius: 4px;                     /* bordes redondeados igual que btn-red */
  font-size: 13px;                        /* tamaño coherente con btn-red */
  display: inline-block;                  /* comportamiento de bloque en línea */
  border: 2px solid white;               /* borde blanco que define el outline */
  transition: 0.3s;                       /* animación suave en hover */
}

.btn-outline:hover {
  background-color: white;                /* relleno blanco al pasar el cursor */
  color: var(--brand-red);               /* texto rojo corporativo en hover */
}

/* =========================================================
   CONTENEDOR DEL BOTÓN CONTACTO EN EL HEADER (.header-cta)
   Controla la posición vertical del botón dentro del header.
   ========================================================= */
.header-cta {
  display: flex;                          /* alinea los botones en fila */
  align-items: center;                    /* centrado vertical de ambos botones */
  gap: 10px;                              /* espacio entre btn-outline y btn-red */
  margin-top: 10px;                       /* <-- AJUSTA ESTE NÚMERO: sube o baja el botón dentro del header */
}

/* =========================================================
   CONTENEDOR DE TARJETAS DE MODELOS
   Fila flexible con salto de línea para mostrar múltiples
   tarjetas de modelos de moto.
   ========================================================= */
.model-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* =========================================================
   TARJETA DE MODELO DE MOTO (.model-card)
   Cada tarjeta muestra una imagen + nombre del modelo,
   alineados horizontalmente (icono a la izquierda).
   ========================================================= */
.model-card{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: flex-start;
    text-decoration:none;
    color:inherit;
    gap: 15px;
}

/* =========================================================
   IMAGEN DENTRO DE TARJETA DE MODELO
   Cuadrado de 48x48px con ajuste proporcional de la imagen
   ========================================================= */
.model-card img{
    width:48px;
    height:48px;
    object-fit:contain;
    display:block;
}

/* =========================================================
   NOMBRE DEL MODELO (icono :: nombre del modelo)
   Estiliza el texto que aparece a la derecha del icono del vehículo.
   ========================================================= */
.model-card span{
    margin-top: 0;
    text-align: left;
    /* Propiedades editables del texto */
    font-size: 16px;                       /* <-- Cambia el tamaño aquí */
    font-weight: 700;                      /* <-- Grosor (400 normal, 700 negrita) */
    font-family: 'Myriad Pro', sans-serif; /* <-- Cambia la fuente aquí */
    color: var(--brand-black);             /* <-- Cambia el color aquí */
    text-transform: uppercase;             /* <-- Opcional: transforma a mayúsculas */
    line-height: 1.2;                      /* <-- Altura de línea */
}

/* =========================================================
   IMAGEN DE LA SECCIÓN "ABOUT / NOSOTROS"
   Limita el ancho de la imagen y la centra horizontalmente
   ========================================================= */
.about-image img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    margin: 6px auto 0 auto;
}

/* =========================================================
   GRID DE LA SECCIÓN ABOUT
   ⚠️ SELECTOR INVÁLIDO: "container" no es una etiqueta HTML válida,
   por lo que este bloque nunca aplica a ningún elemento.
   Posiblemente se quiso escribir ".about-grid .container" o
   ".about-grid.container" (con punto).
   ========================================================= */
/* SELECTOR INVÁLIDO — "container" no es etiqueta HTML, nunca aplica
.about-grid container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
} */

/* =========================================================
   CONTENIDO PRINCIPAL DE LA SECCIÓN "NOSOTROS"
   Centra el texto, limita el ancho y aplica padding generoso.
   Usa la fuente corporativa a tamaño legible.
   ========================================================= */
.about-content.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Myriad Pro', Arial, sans-serif;
    font-size: 18px;
    color: var(--brand-black);
    text-align: center;
}

/* =========================================================
   GRID PRINCIPAL DE LA SECCIÓN ABOUT
   Organiza imagen y textos en columna centrada
   ========================================================= */
.about-grid {
  display: flex;               /* flex | grid | block */
  flex-direction: column;      /* column: apila verticalmente | row: horizontal */
  align-items: center;         /* center | flex-start | flex-end */
  gap: 30px;                   /* espacio entre imagen y bloques de texto */
  width: 100%;                 /* ancho del contenedor */
}

/* =========================================================
   IMAGEN DE LA SECCIÓN ABOUT
   Controla el tamaño y apariencia de la imagen 1997.jpeg
   ========================================================= */
.about-grid-image {
  width: 95vw;                 /* casi todo el ancho de la pantalla */
  max-width: 1400px;           /* límite superior en pantallas muy grandes */
  overflow: hidden;            /* oculta lo que sobresalga */
  border-radius: 0px;          /* esquinas redondeadas: 0 = sin redondeo */
}

.about-grid-image img {
  width: 100%;                 /* la imagen ocupa todo el contenedor */
  height: auto;                /* alto automático para mantener proporción */
  min-height: 500px;           /* alto mínimo para que las imágenes se vean más grandes */
  object-fit: cover;           /* cover | contain | fill */
  display: block;              /* elimina espacio inferior del inline */
  opacity: 1;                  /* transparencia: 0 (invisible) - 1 (opaco) */
}

/* =========================================================
   FOOTER PRINCIPAL
   Barra inferior con fondo oscuro, texto blanco y
   línea roja superior. Usa la fuente corporativa.
   ========================================================= */
.main-footer {
    background-color: var(--brand-black);
    color: var(--brand-white);
    padding: 5px 0;
    border-top: 4px solid var(--brand-red);
    font-family: 'Myriad Pro', sans-serif;
}

/* =========================================================
   ENLACES LEGALES SUPERIORES
   Alineados a la derecha, texto gris
   ========================================================= */
.footer-top-links {
    text-align: right;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2px 10px;
    font-size: 0.8rem;
    color: var(--brand-gray);
}
.footer-top-links a {
    color: var(--brand-gray);
    text-decoration: none;
    margin-left: 10px;
}
.footer-top-links a:hover {
    color: var(--brand-white);
}

/* =========================================================
   CONTENEDOR INTERNO DEL FOOTER
   Distribuye las secciones del footer en fila con espacio
   entre ellas, centrado horizontalmente en la página.
   ========================================================= */
.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    text-align: center;
}

/* =========================================================
   SECCIÓN INDIVIDUAL DENTRO DEL FOOTER
   Cada columna (redes, dirección, legal) ocupa el mismo espacio
   ========================================================= */
.footer-section { flex: 1; }

/* =========================================================
   POSICIÓN HORIZONTAL DE LOS ICONOS DE REDES SOCIALES
   margin-left negativo mueve los iconos hacia la IZQUIERDA.
   Empieza en -20px y baja el número para ir más a la izquierda:
     0px   → posición base (borde izquierdo del contenedor)
    -20px  → un poco a la izquierda
    -60px  → bastante a la izquierda
   ========================================================= */
.footer-section.social-links {
    margin-left: -50px; /* <-- AJUSTA ESTE NÚMERO (más negativo = más a la izquierda) */
}

/* =========================================================
   ENLACES DE REDES SOCIALES EN EL FOOTER
   Muestra los iconos sociales en fila con espacio entre ellos
   ========================================================= */
.social-links { display: flex; gap: 15px; justify-content: flex-start; }

/* =========================================================
   ICONOS DE REDES SOCIALES
   Tamaño fijo con transición para el efecto hover de escala.
   NOTA: Los archivos de FB/IG/YT/LI son imágenes horizontales (3095x1667px),
   no iconos cuadrados. Por eso se fuerza width+height con object-fit: contain
   para que se vean del mismo tamaño que tiktok.png (730x730px cuadrado).
   Solución definitiva: reemplazar esos 4 PNG por versiones cuadradas.
   ========================================================= */
.social-links img {
    width: 70px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.3s;
}

/* =========================================================
   HOVER EN ICONOS DE REDES SOCIALES
   Aumenta el icono un 20% al pasar el cursor encima
   ========================================================= */
.social-links img:hover { transform: scale(1.2); }

/* =========================================================
   TEXTO DE DIRECCIÓN EN EL FOOTER
   Reduce el margen vertical y el tamaño de fuente
   ========================================================= */
.address p { margin: 2px 0; font-size: 0.9rem; }

/* =========================================================
   TEXTO LEGAL EN EL FOOTER
   Fuente pequeña, color gris, alineado a la derecha
   ========================================================= */
.legal p { font-size: 0.8rem; color: var(--brand-gray); text-align: right; margin: 0; }

/* =========================================================
   FOOTER RESPONSIVO (pantallas <= 768px)
   En móvil, apila las secciones verticalmente y centra todo
   ========================================================= */
@media (max-width: 768px) {
    .footer-container { flex-direction: column; gap: 30px; }
    .footer-top-links { text-align: center; }
    
    /* Resetear márgenes y centrar iconos */
    .footer-section.social-links { margin-left: 0; justify-content: center; }
    
    /* Centrar textos legales explícitamente */
    .legal p { text-align: center; }
    
    /* Alineación general */
    .footer-section { text-align: center; width: 100%; }
}

/* =========================================================
   ESTILOS RESPONSIVE DEL HEADER (Menú Móvil)
   ========================================================= */

/* Botón Hamburguesa (Oculto en escritorio) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    z-index: 10001;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--brand-white);
    border-radius: 2px;
    transition: 0.3s;
}

/* Animación del botón al estar activo */
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* Media Query para Tablets y Móviles */
@media (max-width: 992px) {
    .menu-toggle { display: flex; }
    
    .header-container { align-items: center; height: 100%; }

    /* Intercambiar logos en móvil */
    .logo-desktop { display: none; }
    .logo-mobile { display: block; }

    /* Ajuste del Logo en móvil para que no se salga */
    .logo img {
        height: 50px;
        margin-top: 0;
        padding: 10px 0;
    }

    /* Menú lateral desplegable */
    .nav-menu {
        position: fixed;
        top: 70px; /* Altura del header */
        left: -100%; /* Oculto a la izquierda */
        width: 100%;
        height: calc(100vh - 70px);
        background-color: rgba(45,41,38,0.98);
        flex-direction: column;
        transition: 0.3s ease-in-out;
        margin-left: 0; /* Reset del margen negativo de escritorio */
        overflow-y: auto;
        padding-top: 20px;
    }

    .nav-menu.active { left: 0; } /* Mostrar menú */

    .nav-list {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .nav-item {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .nav-item::after { display: none; } /* Quitar puente hover */

    .nav-link { display: block; padding: 20px; font-size: 18px; }

    /* Dropdowns en móvil */
    .dropdown-content {
        position: static;
        display: none;
        width: 100%;
        background-color: rgba(0,0,0,0.3);
        box-shadow: none;
        border-top: none;
    }
    .nav-item.active-dropdown .dropdown-content { display: block; }
    .dropdown-content a { color: var(--brand-white); padding-left: 0; }
    
    /* Ocultar botón CTA del header en móvil (usar menú o whatsapp) */
    .header-cta { display: none; }
}

/* =========================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Posición fija en la esquina inferior derecha, siempre visible.
   Tiene animación de latido para llamar la atención del usuario.
   ========================================================= */
.btn-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 65px;
    z-index: 1000;
    animation: latido 1.5s infinite;
}

/* =========================================================
   IMAGEN DENTRO DEL BOTÓN DE WHATSAPP
   La imagen ocupa el 100% del contenedor del botón
   ========================================================= */
.btn-whatsapp img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   ANIMACIÓN DE LATIDO (@keyframes latido)
   Simula un pulso cardíaco: escala el elemento hacia arriba
   y vuelve a su tamaño original, repitiendo el ciclo.
   Usada por el botón de WhatsApp.
   ========================================================= */
@keyframes latido {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.2); }
  30%  { transform: scale(1); }
  45%  { transform: scale(1.15); }
  60%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* =========================================================
   HOVER EN BOTÓN DE WHATSAPP
   Pausa la animación de latido y aplica una ligera escala
   cuando el usuario pasa el cursor sobre el botón.
   ========================================================= */
.btn-whatsapp:hover {
    animation-play-state: paused;
    transform: scale(1.1);
    transition: 0.3s;
}

/* =========================================================
   BOTÓN DE DESCARGA DE CATÁLOGO (.btn-download)
   Botón rojo de acción para descargar archivos PDF u otros.
   Oscurece el fondo al hacer hover.
   ========================================================= */
.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #e30613;
    text-decoration: none;
    border-radius: 50%;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.btn-download svg {
    width: 28px;
    height: 28px;
    fill: white;
}
/* =========================================================
   HOVER EN BOTÓN DE DESCARGA
   Oscurece el fondo rojo al pasar el cursor
   ========================================================= */
.btn-download:hover {
    background-color: #b0050f;
}

/* =========================================================
   CLASES DE LAYOUT UTILITARIAS
   .grid-2: rejilla de 2 columnas iguales con espacio entre ellas
   .container: ancho máximo centrado con padding lateral
   .text-center: alineación central del texto
   ========================================================= */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.text-center { text-align: center; }

/* =========================================================
   CONTENEDOR PRINCIPAL DEL CARRUSEL DE IMÁGENES
   Posicionamiento relativo para que los botones de navegación
   se puedan ubicar absolutamente sobre él.
   ========================================================= */
.carrusel-wrapper {
    position: relative;      /* Permite posicionar elementos hijos absolutamente */
    width: 100%;             /* Ocupa todo el ancho disponible */
    max-width: 1000px;       /* Ancho máximo del carrusel */
    margin: 0 auto;          /* Centrado horizontal */
}

/* =========================================================
   ÁREA DE DESPLAZAMIENTO DEL CARRUSEL
   Fila horizontal con scroll snapping: cada slide ocupa
   exactamente el 100% del ancho y el scroll se detiene
   en cada una de forma magnética.
   ========================================================= */
.carrusel-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   OCULTAR SCROLLBAR DEL CARRUSEL (WebKit/Blink)
   Elimina la barra de desplazamiento horizontal visible,
   manteniendo la funcionalidad de scroll.
   ========================================================= */
.carrusel-slides::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   SLIDE INDIVIDUAL DEL CARRUSEL
   Cada slide ocupa el 100% del ancho del contenedor
   y centra su imagen interna.
   ========================================================= */
.slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* =========================================================
   IMAGEN DENTRO DE CADA SLIDE
   Ancho completo, proporcional, con bordes redondeados
   ========================================================= */
.slide img {
    width: 100%;             /* Ocupa todo el ancho del slide */
    height: 550px;           /* Alto fijo del carrusel */
    object-fit: cover;       /* Rellena el área recortando si es necesario, sin deformar */
    object-position: center; /* Centra el foco de la imagen */
    border-radius: 8px;      /* Bordes suavizados */
}

/* =========================================================
   BARRA DE NAVEGACIÓN DEL CARRUSEL (bolitas indicadoras)
   Fila de puntos circulares debajo del carrusel que indican
   la cantidad de slides y permiten navegar entre ellos.
   ========================================================= */
.carrusel-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

/* =========================================================
   PUNTO INDICADOR INDIVIDUAL DEL CARRUSEL
   Círculo gris de 12px que actúa como enlace de navegación
   ========================================================= */
.carrusel-nav a {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    transition: background 0.3s;
}

/* =========================================================
   HOVER EN PUNTO INDICADOR DEL CARRUSEL
   Cambia el color del punto a rojo Shineray al pasar el cursor
   ========================================================= */
.carrusel-nav a:hover {
    background-color: #e30613;
}

/* =========================================================
   SECCIÓN CONTENEDORA DE LA GALERÍA CON CARRUSEL
   Padding vertical y fondo gris claro para separar
   visualmente esta sección del resto de la página.
   ========================================================= */
.galeria-carrusel {
    padding: 60px 0;
    background-color: #f8f8f8;
}