/* --- 1. VARIABLES & RESET --- */
:root {
    --brand-blue: var(--brand, #1a2364);
    --brand-dark-blue: var(--brand, #1a2364);
    --brand-yellow: var(--brand2, #1ea3d8);
    --brand-red: var(--acento, #e6128a);
    --text-dark: #1a1a1a;
    --text-light: #f4f4f4;
    --shadow-sm: 0 5px 15px rgba(0,0,0,0.05);
    --shadow-lg: 0 20px 40px rgba(26, 35, 100, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Tipografías */
h1, h2, h3, h4, .logo-text, .btn {
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

a { text-decoration: none; transition: all 0.3s ease; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* Utilidades */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.text-blue { color: var(--brand-blue); }
.text-red { color: var(--brand-red); }
.text-yellow { color: var(--brand-yellow); }
.text-white { color: white; }
.bg-light { background-color: #f9f9f9; }
.bg-dark { background-color: var(--brand-dark-blue); color: white; }
.bg-gradient-red { background: linear-gradient(135deg, var(--brand-red), #a30e6a); }
.mt-20 { margin-top: 20px; }

/* --- 2. HEADER --- */
header {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    padding: 15px 0;
    background: rgba(0, 31, 92, 0.9); /* Azul semitransparente */
    backdrop-filter: blur(10px); /* Efecto vidrio */
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-container { display: flex; justify-content: space-between; align-items: center; }

.logo { color: white; font-size: 1.8rem; font-weight: bold; display: flex; gap: 10px; align-items: center; }
.logo i { color: var(--brand-yellow); }

.nav-menu { display: flex; gap: 25px; align-items: center; }
.nav-link { color: rgba(255,255,255,0.8); font-weight: 500; font-size: 0.9rem; text-transform: uppercase; }
.nav-link:hover { color: var(--brand-yellow); }

.hamburger { display: none; color: white; font-size: 1.5rem; cursor: pointer; }

/* Botones */
.btn {
    padding: 12px 30px; border-radius: 50px; font-weight: bold; font-size: 1rem;
    display: inline-block; cursor: pointer;
}
.btn-nav { background: var(--brand-yellow); color: var(--brand-blue); }
.btn-nav:hover { background: white; }

.btn-primary {
    background: var(--brand-yellow);
    color: var(--brand-blue);
    box-shadow: 0 0 20px rgba(30, 163, 216, 0.4);
    border: none;
}
.btn-primary:hover { transform: translateY(-3px); filter: brightness(1.06); box-shadow: 0 0 30px rgba(30, 163, 216, 0.6); }

.btn-outline { border: 2px solid white; color: white; margin-left: 15px; background: transparent; }
.btn-outline:hover { background: white; color: var(--brand-blue); }

/* --- 3. HERO (VIDEO + RETRASO 5S) --- */
.hero-section {
    height: 100vh; position: relative;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: white; overflow: hidden;
}

.video-wrapper, .video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
#bg-video { width: 100%; height: 100%; object-fit: cover; }
.video-overlay { background: rgba(66, 146, 244, 0); z-index: 1; }

/* ANIMACIÓN DE ENTRADA DEL TEXTO (LA CLAVE) */
.hero-content {
    position: relative; z-index: 2;
    opacity: 0; /* INVISIBLE AL INICIO */
    transform: translateY(30px);
}

.delayed-entry {
    animation: fadeInUp 1.5s ease forwards;
    animation-delay: 3s; /* AQUÍ ESTÁN LOS 5 SEGUNDOS DE ESPERA */
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

.hero-title { font-size: 4.5rem; line-height: 1; margin: 20px 0; text-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.highlight-yellow { color: var(--brand-yellow); }
.badge { background: var(--brand-red); display: inline-block; padding: 5px 15px; border-radius: 4px; font-weight: bold; letter-spacing: 2px; }

/* --- 4. SECCIONES (NOSOTROS / DISTANCIAS) --- */
/* --- FONDO LOCAL PARA SECCIÓN NOSOTROS --- */
#nosotros {
    position: relative;
    background: white;
}
.section-padding { padding: 80px 0; }
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.section-title { font-size: 3rem; color: var(--brand-dark-blue); margin-bottom: 15px; }
.rounded-img { border-radius: 20px; }
.shadow-lg { box-shadow: var(--shadow-lg); }

.feature-list li { margin: 15px 0; font-size: 1.1rem; display: flex; align-items: center; gap: 15px; }
.feature-list i { color: var(--brand-red); font-size: 1.2rem; }

/* Tarjetas */
#distancias {
    position: relative;
    /* 1. Capa blanca semitransparente para que el texto se lea */
    /* 2. La ruta a tu imagen local en la carpeta 'img' */
    background: linear-gradient(rgba(255, 255, 255, 0.336), rgb(255, 255, 255)),
    url('../img/sec1.png'); /* <--- ¡CAMBIA ESTO POR EL NOMBRE DE TU ARCHIVO! */
    
    background-size: cover;       /* Que cubra todo */
    background-position: center;  /* Que esté centrada */
   
}
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 50px; }

.card {
    background: white; border-radius: 15px; overflow: hidden;
    box-shadow: var(--shadow-sm); transition: 0.4s;
}
.card:hover { transform: translateY(-15px); box-shadow: var(--shadow-lg); }

.card-header { padding: 30px; text-align: center; color: white; font-size: 2.5rem; }
.bg-yellow { background: var(--brand-yellow); color: var(--brand-blue); }
.bg-blue { background: var(--brand-blue); }
.bg-red { background: var(--brand-red); }

.card-body { padding: 30px; }
.distance-title { font-size: 6rem; margin-bottom: 5px; color: var(--brand-dark-blue); }
.distance-type { display: block; font-weight: bold; color: #888; margin-bottom: 15px; text-transform: uppercase; font-size: 0.8rem; }
.btn-link { color: var(--brand-blue); font-weight: bold; margin-top: 15px; display: inline-block; }

/* --- 5. INFO & GALERIA --- */
/* --- GALERÍA BENTO (7 FOTOS) --- */

.gallery-bento {
    display: grid;
    /* Creamos 4 columnas iguales */
    grid-template-columns: repeat(4, 1fr);
    /* Altura automática de las filas (aprox 250px) */
    grid-auto-rows: 250px;
    gap: 15px; /* Espacio entre fotos */
}

.g-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px; /* Bordes redondeados modernos */
    cursor: pointer;
}

.g-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la foto llene el cuadro sin deformarse */
    transition: transform 0.5s ease;
}

/* EFECTO ZOOM AL PASAR MOUSE */
.g-item:hover img {
    transform: scale(1.1);
}

/* --- TAMAÑOS ESPECIALES --- */

/* La foto GRANDE (Ocupa 2 columnas y 2 filas) */
.g-big {
    grid-column: span 2;
    grid-row: span 2;
}

/* La foto ANCHA (Ocupa 2 columnas) */
.g-wide {
    grid-column: span 2;
}

/* --- OVERLAY DE TEXTO (Aparece al pasar mouse) --- */
.g-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    opacity: 0; /* Invisible al inicio */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    transition: 0.3s;
}

.g-item:hover .g-overlay {
    opacity: 1; /* Aparece al pasar mouse */
}

.g-overlay h5 {
    color: white;
    font-family: 'Knewave', system-ui;
    font-size: 1.5rem;
    margin-bottom: 0;
    transform: translateY(20px);
    transition: 0.3s;
}

.g-overlay p {
    color: var(--brand-yellow);
    font-size: 0.9rem;
    font-weight: bold;
    transform: translateY(20px);
    transition: 0.3s delay 0.1s;
}

/* Animación de subida del texto */
.g-item:hover h5, 
.g-item:hover p {
    transform: translateY(0);
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 768px) {
    .gallery-bento {
        grid-template-columns: 1fr; /* Una sola columna en celular */
        grid-auto-rows: 300px; /* Fotos más altas */
    }
    
    /* En móvil, todas ocupan 1 columna, quitamos los spans */
    .g-big, .g-wide {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* --- 6. TIMER & FOOTER --- */
.countdown-section { padding: 80px 0; color: white; }
.timer-container { display: flex; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.time-box { background: rgba(0,0,0,0.2); padding: 15px 25px; border-radius: 10px; backdrop-filter: blur(5px); }
.t-num { font-family: 'Bebas Neue'; font-size: 3rem; line-height: 1; }
.t-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

.main-footer { background: #0b0d17; color: #888; padding: 60px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; margin-bottom: 40px; }
.logo-text { color: white; font-size: 1.5rem; font-family: 'Bebas Neue'; display: block; margin-bottom: 10px; }
.social-links a { color: white; font-size: 1.5rem; margin-right: 15px; }
.social-links a:hover { color: var(--brand-yellow); }
.footer-links ul li { margin-bottom: 8px; }
.footer-links a { color: #888; } .footer-links a:hover { color: var(--brand-yellow); }

/* --- 7. ANIMACIONES DE SCROLL (REVEAL) --- */
.reveal-left, .reveal-right, .reveal-up { opacity: 0; transition: all 1s ease; }
.reveal-up { transform: translateY(50px); }
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }

.active { opacity: 1; transform: translate(0); }

/* Responsive */
@media (max-width: 768px) {
    .hero-title { font-size: 3rem; }
    .nav-menu {
        position: fixed; top: 0; right: -100%; width: 80%; height: 100vh;
        background: var(--brand-dark-blue); flex-direction: column;
        justify-content: center; transition: 0.4s; padding: 40px;
    }
    .nav-menu.open { right: 0; }
    .hamburger { display: block; z-index: 1001; }
    .grid-2-col, .info-grid, .gallery-grid, .footer-grid { grid-template-columns: 1fr; }
    .item-1 { grid-column: span 1; }
}
.imglogo{
    height: 55px;
}
#kit3d {
    position: relative;
    background: linear-gradient(rgba(10, 18, 48, 0.22), rgba(255, 255, 255, 0.58)),
    var(--bg-kit3d-image, none);
    
    background-size: cover;       /* Que cubra todo */
    background-position: center;  /* Que esté centrada */
    background-repeat: no-repeat;
   
}
/* --- GRID PARA 3 CAMISETAS --- */
/* --- ESTILO FUSIÓN (CLEAN + FLOTANTE) --- */

.fusion-section {
    background: white;
    padding: 80px 0;
    overflow: hidden;
}

.showcase-row {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Alinea las bases */
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.kit-unit {
    width: 320px;
    text-align: center;
    padding-bottom: 20px;
    position: relative;
    transition: transform 0.3s;
}

/* 1. LO DE ARRIBA (Títulos Grandes Estilo Clean) */
.kit-title {
    font-family: 'Knewave', system-ui;
    font-size: clamp(2.2rem, 4.2vw, 3.2rem);
    line-height: 0.9;
    color: #ffffff; /* Gris elegante */
    margin-bottom: 5px;
    transition: 0.3s;
}

.kit-subtitle {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 700;
    font-size: 0.78rem;
    color: #000000;
    margin-bottom: 14px;
}

/* Colores Hover */
.kit-unit:hover .kit-title { color:rgb(30, 163, 216); }
.kit-title.text-blue { color: #ffffff; } /* Empieza gris */
.kit-unit:hover .text-blue { color: var(--brand-blue); }
.kit-title.text-red { color: #ffffff; }
.kit-unit:hover .text-red { color: var(--brand-red); }


/* 2. LO DE ABAJO (Modelo Flotante + Tags) */
.viewer-fusion {
    width: 100%;
    height: 380px;
    outline: none;
    background: transparent;
    cursor: grab;
}
.viewer-fusion.is-hidden {
    display: none;
}

/* Animación de Flotación */
@keyframes floatUp {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.model-floating {
    animation: floatUp 5s ease-in-out infinite;
}
.float-reverse { animation-delay: 2.5s; }

/* Etiquetas Inferiores (Estilo Moderno) */
.bottom-tag {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #f0f0f0;
    color: #666;
    letter-spacing: 0.7px;
}
.tag-blue { background: rgba(26, 35, 100, 0.1); color: var(--brand-blue); }
.tag-red { background: rgba(230, 18, 138, 0.1); color: var(--brand-red); }


/* 3. BADGES GENERALES (Pequeños) */
.kit-features.dark-mode {
    gap: 10px;
    margin-top: 50px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}
.feature-badge-dark {
    background: #f4f4f4;
    color: var(--text-dark);
    padding: 6px 16px;
    font-size: 0.75rem;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid #ddd;
    display: flex; align-items: center; gap: 8px;
    transition: 0.3s;
}
.feature-badge-dark:hover {
    background: var(--brand-dark-blue);
    color: white;
    transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .showcase-row { flex-direction: column; align-items: center; }
    .kit-unit { border-bottom: 1px solid #eee; margin-bottom: 30px; }
    .kit-title { font-size: 4rem; }
}
/* --- ESTILO INFO PRO --- */

.info-pro-section {
    /* Fondo oscuro profundo con un toque de azul */
    background: linear-gradient(to right, #0a1230, #0d1638); 
    padding: 60px 0;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.info-pro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* TARJETA DE CRISTAL (Glassmorphism) */
.info-card {
    background: rgba(255, 255, 255, 0.03); /* Casi transparente */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
    padding: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    cursor: default;
}

/* Efecto Hover: Se ilumina y sube */
.info-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--brand-yellow);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* ICONO EN CÍRCULO */
.icon-box {
    background: rgba(30, 163, 216, 0.1); /* Amarillo muy suave */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-yellow);
    font-size: 1.5rem;
    flex-shrink: 0; /* Evita que se aplaste */
    transition: 0.3s;
}

.info-card:hover .icon-box {
    background: var(--brand-yellow);
    color: var(--brand-dark-blue);
    transform: scale(1.1) rotate(10deg);
}

/* TEXTOS */
.info-content {
    display: flex;
    flex-direction: column;
}

.info-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.5);
    font-weight: 700;
    margin-bottom: 5px;
}

.info-value {
    font-family: 'Knewave', system-ui; /* Tu fuente potente */
    font-size: 2rem;
    line-height: 1;
    color: white;
    margin: 0;
}

.info-value.text-yellow {
    color: var(--brand-yellow);
    text-shadow: 0 0 15px rgba(30, 163, 216, 0.3); /* Brillo neón */
}

.info-detail {
    color: #ccc;
    font-size: 0.9rem;
    margin: 5px 0 0 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .info-pro-grid {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: 15px;
    }
    .info-card {
        padding: 20px;
    }
}
.info-pro-section {
    position: relative;
    
    /* --- FONDO CON IMAGEN Y CAPA OSCURA --- */
    /* 1. El gradiente azul oscuro (overlay) para que el texto se lea */
    /* 2. La URL de la imagen (he puesto una nocturna de ciudad costera como ejemplo) */
    background: linear-gradient(rgba(0, 21, 64, 0.28), rgba(0, 31, 92, 0.66)),
                var(--bg-info-image, none);
    
    background-size: cover;       /* Cubre todo el espacio */
    background-position: center;  /* Centra la imagen */
    
    /* EFECTO PARALLAX (Opcional: hace que la imagen se quede quieta al bajar) */
    /* Si no te gusta el efecto, borra la siguiente línea */
    background-attachment: fixed; 

    padding: 80px 0; /* Un poco más de espacio vertical */
    border-top: 1px solid rgba(255,255,255,0.1);
}
#galeria{
    position: relative;
    /* 1. Capa blanca semitransparente para que el texto se lea */
    /* 2. La ruta a tu imagen local en la carpeta 'img' */
    background: linear-gradient(rgba(255, 255, 255, 0.53), rgba(255, 255, 255, 0.379)),
    url('../img/secropa.png'); /* <--- ¡CAMBIA ESTO POR EL NOMBRE DE TU ARCHIVO! */
    
    background-size: cover;       /* Que cubra todo */
    background-position: center;  /* Que esté centrada */
   
}
/* --- COUNTDOWN PRO (ESTILO ADRENALINA) --- */

.countdown-pro {
    position: relative;
    background: linear-gradient(rgba(230, 18, 138, 0.28), rgba(44, 8, 61, 0.62)),
                var(--bg-countdown-image, none);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax */
    padding: 100px 0;
    color: white;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .info-pro-section,
    .countdown-pro {
        background-attachment: scroll;
    }
}

.count-uptitle {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0.8;
    margin-bottom: 10px;
}

.count-title {
    font-size: 3.5rem;
    margin-bottom: 50px;
}

/* --- CAJAS DEL RELOJ --- */
.timer-display-pro {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

/* Diseño de cada cajita de tiempo */
.time-box {
    background: rgba(0, 0, 0, 0.2); /* Oscuro semitransparente */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 20px 30px;
    min-width: 140px;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

.time-box:hover {
    transform: translateY(-10px);
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--brand-yellow);
}

/* Los Números */
.t-num {
    font-family: 'Knewave', system-ui; /* Tu fuente potente */
    font-size: 4rem;
    line-height: 1;
    color: white;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Las etiquetas (Días, Hrs...) */
.t-label {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-top: 5px;
    color: var(--brand-yellow); /* Amarillo para contraste */
    font-weight: 700;
}

/* --- FOOTER DEL COUNTDOWN --- */
.count-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.kit-info {
    font-size: 0.9rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botón con latido rojo */
.btn-pulse-red {
    background: white;
    color: var(--brand-red);
    padding: 15px 40px;
    font-size: 1.2rem;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: pulse-white 2s infinite;
}

.btn-pulse-red:hover {
    background: var(--brand-yellow);
    color: var(--brand-dark-blue);
    transform: scale(1.05);
}

@keyframes pulse-white {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .timer-display-pro { gap: 15px; }
    .time-box { min-width: 90px; padding: 15px; }
    .t-num { font-size: 2.5rem; }
    .count-title { font-size: 2.5rem; }
}



/*botones de las camistas  aactualizacion  */
/* --- BOTONES DE GÉNERO --- */
.gender-toggle-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    margin-top: 15px;
}

.btn-gender {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 30px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-gender:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Estado Activo (El botón seleccionado) */
.btn-gender.active {
    background: var(--brand-yellow);
    color: var(--brand-dark-blue);
    border-color: var(--brand-yellow);
    box-shadow: 0 0 15px rgba(30, 163, 216, 0.4);
    transform: scale(1.05);
}
/* =========================================
   SECCIÓN BANNER FULL WIDTH
   ========================================= */
.banner-responsive-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Evita scroll horizontal si la imagen es muy grande */
    line-height: 0;   /* Elimina espacios blancos debajo de la imagen */
}

.banner-full-img {
    width: 100%;      /* Ocupa todo el ancho de la pantalla */
    height: auto;     /* Mantiene la proporción correcta automáticamente */
    display: block;
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
}

/* Estilo para el crédito del desarrollador */
.maker-link {
    color: inherit; /* Hereda el color del texto del footer */
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.maker-link:hover {
    color: var(--brand-yellow); /* Se pone amarillo al pasar el mouse */
    text-shadow: 0 0 10px rgba(30, 163, 216, 0.5);
}

@font-face {
    font-family: 'HitandRun';
    src: url('../img/HitandRun-Regular.ttf') format('truetype');
 
}

#logoMMRC {
    font-family: 'HitandRun', sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    text-decoration: none;
    display: flex;
    align-items: center;
   
}