/* ========================================
   ALVIS BROTHERS
   MIS ESTILOS — NUEVA ERA
   ======================================== */


/* ========================================
   CONFIGURACIÓN GENERAL
   ======================================== */

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #111;
    color: #fff;
    animation: entradaPagina 0.6s ease-out;
}


/* ========================================
   CONTENEDOR PRINCIPAL
   ======================================== */

#agrupar {
    width: min(1100px, 95%);
    margin: 30px auto;
}


/* ========================================
   CABECERA — NUEVA ERA
   ======================================== */

#cabecera {
    position: relative;
    min-height: 330px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 55px 25px 45px;
    text-align: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(212, 175, 55, 0.09),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #111111 55%,
            #080808 100%
        );

    border-bottom: 1px solid rgba(212, 175, 55, 0.45);
}

/* ========================================
   NOMBRE DE MARCA EN CABECERA
   ======================================== */

.nombre-marca {
    color: #D4AF37;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

/* ========================================
   MARCA EN DISPOSITIVOS MÓVILES
   ======================================== */

@media (max-width: 768px) {

    .nombre-marca {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

}


/* LÍNEA SUPERIOR */

#cabecera::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 140px;
    height: 2px;

    transform: translateX(-50%);

    background: #D4AF37;
}


/* HALO */

#cabecera::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.08),
            transparent 68%
        );

    pointer-events: none;
}


/* NOMBRE */

#cabecera h1 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #FFFFFF;

    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;

    letter-spacing: clamp(4px, 1vw, 9px);
    line-height: 1;

    text-transform: uppercase;
}


/* LOGO */

#imagen {
    position: relative;
    z-index: 2;

    margin: 30px auto 22px;
}

#imagen img {
    display: block;

    width: min(260px, 55vw);
    height: auto;

    margin: auto;

    filter:
        drop-shadow(
            0 12px 25px rgba(0, 0, 0, 0.65)
        );

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

#imagen img:hover {
    transform: scale(1.025);

    filter:
        drop-shadow(
            0 15px 35px rgba(212, 175, 55, 0.20)
        );
}


/* SUBTÍTULO */

#cabecera h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #D4AF37;

    font-size: clamp(0.75rem, 2vw, 1rem);
    font-weight: 500;

    letter-spacing: clamp(3px, 0.8vw, 5px);

    text-transform: uppercase;
}

#cabecera h2::after {
    content: "◆";

    display: block;

    margin-top: 18px;

    color: #D4AF37;

    font-size: 7px;
    opacity: 0.8;
}


/* ========================================
   MENÚ DE NAVEGACIÓN
   ======================================== */

#menu {
    position: relative;

    background-color: #080808;
    border-bottom: 1px solid #333;
}

#menu ul {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    list-style: none;
}

#menu li {
    position: relative;
}

#menu a {
    position: relative;

    display: block;

    padding: 20px 28px;

    color: #FFFFFF;
    text-decoration: none;

    font-size: 14px;
    font-weight: bold;

    letter-spacing: 1.5px;

    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}


/* LÍNEA DORADA */

#menu a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 8px;

    width: 0;
    height: 2px;

    background-color: #D4AF37;

    transform: translateX(-50%);

    transition: width 0.3s ease;
}


/* HOVER */

#menu a:hover {
    color: #D4AF37;
    background-color: #111;
}

#menu a:hover::after {
    width: 60%;
}


/* ENLACE ACTIVO */

#menu a.activo {
    color: #D4AF37;
}

#menu a.activo::after {
    width: 60%;
}


/* BOTÓN MENÚ */

#boton-menu {
    display: none;

    background: transparent;
    border: none;

    color: #FFFFFF;

    font-size: 1.8rem;

    cursor: pointer;

    padding: 5px;
}


/* ========================================
   HERO
   ======================================== */

#hero {
    position: relative;

    min-height: 720px;

    display: flex;

    justify-content: center;
    align-items: center;

    text-align: center;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.58)
        ),
        url("fondo-gym.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-bottom: 1px solid rgba(212, 175, 55, 0.55);
}


/* PROFUNDIDAD */

#hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(212, 175, 55, 0.10),
            transparent 45%
        );

    pointer-events: none;
}


/* LÍNEA DE IDENTIDAD */

#hero::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 50%;

    width: 110px;
    height: 2px;

    transform: translateX(-50%);

    background: #D4AF37;
}


/* CONTENIDO */
#hero .titulo-hero {
    font-size: 2rem;
    line-height: 1.2;
    margin: 20px 0;
}

.hero-contenido {
    position: relative;
    z-index: 2;

    width: min(850px, 90%);

    padding: 50px 30px;

    animation: aparecerHero 1.2s ease-out;
}


.titulo-hero {
        font-size: 1.6rem;
        line-height: 1.25;
        margin: 18px 0;
}

/* LOGO */

.hero-logo {
    margin-bottom: 30px;
}

.hero-logo img {
    display: block;

    width: min(150px, 40vw);
    height: auto;

    margin: 0 auto;

    filter:
        drop-shadow(
            0 15px 30px rgba(0, 0, 0, 0.75)
        );

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.hero-logo img:hover {
    transform: scale(1.025);

    filter:
        drop-shadow(
            0 18px 38px rgba(212, 175, 55, 0.25)
        );
}


/* TÍTULO */

.hero-contenido h2 {
    margin: 0 0 22px;

    color: #D4AF37;

    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 500;

    letter-spacing: 5px;

    text-transform: uppercase;
}


/* LEMA */

.hero-lema {
    margin: 0 auto 38px;

    color: #FFFFFF;

    font-size: clamp(0.8rem, 2vw, 1.15rem);

    letter-spacing: clamp(3px, 1vw, 6px);

    line-height: 1.7;
}

/* ========================================
   UBICACIÓN DEL CENTRO
   ======================================== */

.hero-ubicacion {
    color: #D4AF37;
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin: 12px 0 24px;
    text-transform: uppercase;
}

@media (max-width: 768px) {

    .hero-ubicacion {
        font-size: 0.85rem;
        letter-spacing: 1.5px;
        margin: 10px 0 20px;
    }

}

/* BOTONES */

.hero-botones {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 15px;

    flex-wrap: wrap;
}


/* BOTÓN PRINCIPAL */

.boton-hero {
    display: inline-block;

    padding: 15px 28px;

    border: 1px solid #D4AF37;

    background: #D4AF37;

    color: #000000;

    text-decoration: none;

    font-size: 0.75rem;
    font-weight: bold;

    letter-spacing: 2px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.boton-hero:hover {
    background: transparent;
    color: #D4AF37;

    transform: translateY(-3px);
}


/* BOTÓN SECUNDARIO */

.boton-hero-secundario {
    display: inline-block;

    padding: 15px 28px;

    border: 1px solid rgba(212, 175, 55, 0.75);

    background: rgba(0, 0, 0, 0.25);

    color: #D4AF37;

    text-decoration: none;

    font-size: 0.75rem;
    font-weight: bold;

    letter-spacing: 2px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.boton-hero-secundario:hover {
    background: #D4AF37;
    color: #000000;

    transform: translateY(-3px);
}


/* ========================================
   ANIMACIONES
   ======================================== */

@keyframes aparecerHero {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes entradaPagina {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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


/* ========================================
   PILARES DE ALVIS BROTHERS
   ======================================== */

#identidad {
    position: relative;

    padding: 120px 40px;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(212, 175, 55, 0.055),
            transparent 45%
        ),
        #0b0b0b;

    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

#identidad::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 80px;
    height: 1px;

    transform: translateX(-50%);

    background: #D4AF37;
}


/* TÍTULO */

.identidad-titulo {
    max-width: 720px;

    margin: 0 auto;
}

.identidad-titulo span {
    display: block;

    margin-bottom: 15px;

    color: #D4AF37;

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 4px;
}

.identidad-titulo h2 {
    margin: 0 0 18px;

    color: #FFFFFF;

    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;

    letter-spacing: 2px;
    line-height: 1.15;

    text-transform: uppercase;
}

.identidad-titulo p {
    max-width: 620px;

    margin: 0 auto;

    color: #888;

    line-height: 1.8;
}


/* TARJETAS */

.identidad-tarjetas {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    max-width: 1050px;

    margin: 65px auto 0;
}

.tarjeta-identidad {
    position: relative;

    min-height: 250px;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding: 45px 30px;

    background:
        linear-gradient(
            145deg,
            #171717,
            #101010
        );

    border: 1px solid #292929;

    overflow: hidden;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}


/* BRILLO */

.tarjeta-identidad::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 55, 0.55),
            transparent
        );

    opacity: 0;

    transition: opacity 0.4s ease;
}


/* NÚMERO */

.numero-identidad {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 25px;

    border: 1px solid rgba(212, 175, 55, 0.5);

    border-radius: 50%;

    color: #D4AF37;

    font-size: 0.7rem;
    font-weight: bold;

    letter-spacing: 2px;
}


/* TÍTULO */

.tarjeta-identidad h3 {
    margin: 0 0 15px;

    color: #FFFFFF;

    font-size: 1.15rem;

    letter-spacing: 4px;
}


/* DESCRIPCIÓN */

.tarjeta-identidad p {
    max-width: 260px;

    margin: 0;

    color: #777;

    line-height: 1.7;

    font-size: 0.9rem;
}


/* VISIBLE */

.tarjeta-identidad.visible {
    opacity: 1;
    transform: translateY(0);
}


/* HOVER */

.tarjeta-identidad:hover {
    border-color: rgba(212, 175, 55, 0.65);

    background:
        linear-gradient(
            145deg,
            #1a1a1a,
            #111111
        );
}

.tarjeta-identidad:hover::before {
    opacity: 1;
}


/* ========================================
   SERVICIOS
   ======================================== */

#servicios {
    background-color: #111111;

    padding: 90px 40px;

    border-bottom: 1px solid #333;

    text-align: center;
}


/* TÍTULO */

.servicios-titulo span {
    display: block;

    color: #D4AF37;

    font-size: 0.8rem;
    font-weight: bold;

    letter-spacing: 4px;

    margin-bottom: 12px;
}

.servicios-titulo h2 {
    color: #FFFFFF;

    font-size: 2.3rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 15px;
}

.servicios-titulo p {
    max-width: 700px;

    margin: 0 auto;

    color: #999999;

    line-height: 1.7;
}


/* GRID */

.servicios-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    max-width: 1000px;

    margin: 55px auto 0;
}


/* TARJETA */

.tarjeta-servicio {
    position: relative;

    background-color: #181818;

    border: 1px solid #2b2b2b;

    padding: 40px 28px;

    text-align: left;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
}


/* NÚMERO */

.numero-servicio {
    display: block;

    color: #D4AF37;

    font-size: 0.85rem;
    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 25px;
}


/* TÍTULO */

.tarjeta-servicio h3 {
    color: #FFFFFF;

    font-size: 1.15rem;

    letter-spacing: 2px;
    line-height: 1.4;

    margin-bottom: 18px;
}


/* TEXTO */

.tarjeta-servicio p {
    margin: 0;

    color: #888888;

    font-size: 0.9rem;

    line-height: 1.8;
}


/* LISTA */

.tarjeta-servicio ul {
    margin: 20px 0 0;

    padding-left: 20px;

    color: #888888;

    line-height: 2;
}

.tarjeta-servicio li {
    padding-left: 5px;
}

.tarjeta-servicio li::marker {
    color: #D4AF37;
}


/* HOVER */

.tarjeta-servicio:hover {
    transform: translateY(-7px);

    border-color: rgba(212, 175, 55, 0.7);

    background:
        linear-gradient(
            145deg,
            #1b1b1b,
            #111111
        );

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.25);
}

.tarjeta-servicio::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 1px;

    transform: translateX(-50%);

    background: #D4AF37;

    transition: width 0.4s ease;
}

.tarjeta-servicio:hover::before {
    width: 70%;
}


/* SERVICIO FUTURO */

.servicio-futuro {
    display: flex;

    flex-direction: column;
    justify-content: center;

    border-style: dashed;

    border-color: rgba(212, 175, 55, 0.25);

    opacity: 0.65;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        border-color 0.4s ease;
}

.servicio-futuro:hover {
    opacity: 1;

    border-color: rgba(212, 175, 55, 0.65);
}

.servicio-futuro .numero-servicio {
    font-size: 1.3rem;
}


/* SEPARADOR */

.servicios-separador {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    max-width: 1050px;

    margin: 55px auto 30px;
}

.servicios-separador span {
    color: #D4AF37;

    font-size: 0.65rem;
    font-weight: 600;

    letter-spacing: 4px;

    white-space: nowrap;
}

.servicios-linea {
    width: 70px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 55, 0.55)
        );
}


/* SERVICIO DESTACADO */

.servicio-amplio {
    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, 0.055),
            #151515
        );

    border-color:
        rgba(212, 175, 55, 0.28);
}

.etiqueta-servicio {
    display: inline-block;

    margin-bottom: 15px;

    color: #D4AF37;

    font-size: 0.6rem;
    font-weight: 600;

    letter-spacing: 3px;
}


/* CIERRE */

.servicios-cierre {
    position: relative;

    max-width: 850px;

    margin: 100px auto 20px;

    padding: 80px 30px;

    text-align: center;

    border-top: 1px solid rgba(212, 175, 55, 0.22);
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);

    overflow: hidden;
}

.servicios-cierre::before {
    content: "◆";

    position: absolute;

    top: -5px;
    left: 50%;

    transform: translateX(-50%);

    padding: 0 12px;

    background: #0b0b0b;

    color: #D4AF37;

    font-size: 7px;
}

.servicios-cierre > span {
    display: block;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 0.65rem;
    font-weight: 600;

    letter-spacing: 4px;
}

.servicios-cierre h2 {
    margin: 0 0 20px;

    color: #FFFFFF;

    font-size: clamp(1.8rem, 5vw, 2.8rem);

    letter-spacing: 2px;
}

.servicios-cierre p {
    max-width: 580px;

    margin: 0 auto 35px;

    color: #888888;

    line-height: 1.8;
}

.boton-servicios {
    display: inline-block;

    padding: 15px 30px;

    border: 1px solid #D4AF37;

    background: transparent;

    color: #D4AF37;

    text-decoration: none;

    font-size: 0.7rem;
    font-weight: bold;

    letter-spacing: 2px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.boton-servicios:hover {
    background: #D4AF37;
    color: #000000;

    transform: translateY(-3px);
}


/* ========================================
   INFORMACIÓN / NOSOTROS
   ======================================== */

#informacion {
    background-color: #0b0b0b;

    padding: 90px 40px;

    text-align: center;

    border-bottom: 1px solid #333;
}


/* TÍTULO */

.informacion-titulo span {
    display: block;

    color: #D4AF37;

    font-size: 0.8rem;
    font-weight: bold;

    letter-spacing: 4px;

    margin-bottom: 12px;
}

.informacion-titulo h2 {
    color: #FFFFFF;

    font-size: 2.3rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 15px;
}

.informacion-titulo p {
    max-width: 700px;

    margin: 0 auto;

    color: #999999;

    line-height: 1.7;
}


/* CONTENIDO */

.informacion-contenido {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    max-width: 950px;

    margin: 55px auto 0;
}


/* BLOQUES */

.bloque-informacion {
    padding: 45px 35px;

    background-color: #151515;

    border: 1px solid #292929;

    text-align: left;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}

.bloque-informacion:hover {
    border-color: #D4AF37;

    transform: translateY(-5px);
}

.numero-informacion {
    display: block;

    color: #D4AF37;

    font-size: 0.85rem;
    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 25px;
}

.bloque-informacion h3 {
    color: #FFFFFF;

    font-size: 1.25rem;

    letter-spacing: 3px;

    margin-bottom: 20px;
}

.bloque-informacion p {
    color: #999999;

    line-height: 1.8;

    margin: 0;
}


/* PRINCIPIO */

.principio-informacion {
    max-width: 950px;

    margin: 25px auto 0;

    padding: 35px;

    border: 1px solid #292929;

    background-color: #111111;
}

.principio-informacion span {
    display: block;

    color: #D4AF37;

    font-size: 0.75rem;

    letter-spacing: 4px;

    margin-bottom: 15px;
}

.principio-informacion h3 {
    color: #FFFFFF;

    font-size: 1rem;

    letter-spacing: 3px;

    margin: 0;
}


/* ========================================
   INFORMACIÓN — BLOQUES AMPLIADOS
   ======================================== */

.historia-alvis,
.contenido-entrenamiento,
.participaciones-alvis,
.redes-alvis,
.cierre-informacion {
    position: relative;
}

.historia-alvis,
.contenido-entrenamiento,
.participaciones-alvis,
.redes-alvis {
    max-width: 1100px;

    margin: 0 auto 30px;

    padding: 90px 30px;
}


/* LÍNEAS SUPERIORES */

.historia-alvis::before,
.contenido-entrenamiento::before,
.participaciones-alvis::before,
.redes-alvis::before {
    content: "";

    position: absolute;

    top: 0;

    left: 30px;
    right: 30px;

    height: 1px;

    background: rgba(212, 175, 55, 0.25);
}


/* DETALLES CENTRALES */

.historia-alvis::after,
.contenido-entrenamiento::after,
.participaciones-alvis::after,
.redes-alvis::after {
    content: "◆";

    position: absolute;

    bottom: -7px;
    left: 50%;

    transform: translateX(-50%);

    padding: 0 12px;

    background: #000;

    color: #D4AF37;

    font-size: 7px;
}


/* TÍTULOS */

.historia-titulo,
.contenido-entrenamiento > header,
.participaciones-alvis > header,
.redes-alvis > header {
    max-width: 750px;

    margin: 0 auto 55px;

    text-align: center;
}

.historia-titulo span,
.contenido-entrenamiento > header span,
.participaciones-alvis > header span,
.redes-alvis > header span {
    display: block;

    margin-bottom: 12px;

    color: #D4AF37;

    font-size: 0.75rem;

    letter-spacing: 3px;
}

.historia-titulo h2,
.contenido-entrenamiento > header h2,
.participaciones-alvis > header h2,
.redes-alvis > header h2 {
    margin-bottom: 18px;
}

.historia-titulo p,
.contenido-entrenamiento > header p,
.participaciones-alvis > header p,
.redes-alvis > header p {
    line-height: 1.8;
}


/* HISTORIA */

.historia-texto {
    max-width: 800px;

    margin: 0 auto 55px;
}

.historia-texto p {
    margin-bottom: 20px;

    line-height: 1.8;
}


/* ========================================
   GALERÍA HISTORIA
   ======================================== */

.galeria-alvis {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}

.foto-historia {
    position: relative;

    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(212, 175, 55, 0.18);

    background: #111;
}

.foto-historia img {
    width: 100%;
    height: 360px;

    display: block;

    object-fit: cover;

    filter: saturate(0.85);

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}

.foto-historia:hover img {
    transform: scale(1.04);

    filter: saturate(1);
}

.foto-historia figcaption {
    padding: 15px 18px;

    font-size: 0.75rem;

    letter-spacing: 2px;
}



/* ========================================
   SIGNIFICADO DEL SÍMBOLO — NUEVA ERA
======================================== */

.simbolo-alvis {
  position: relative;
  max-width: 1100px;
  margin: 30px auto;
  padding: 90px 30px 100px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(212,175,55,0.08),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      #0d0d0d 0%,
      #111111 55%,
      #0b0b0b 100%
    );

  border-top: 1px solid #D4AF37;
  border-bottom: 1px solid #292929;

  overflow: hidden;
}


/* Línea superior */

.simbolo-alvis::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 140px;
  height: 2px;

  background: #D4AF37;

  transform: translateX(-50%);
}


/* Diamante */

.simbolo-alvis::after {
  content: "◆";

  position: absolute;
  bottom: 25px;
  left: 50%;

  color: #D4AF37;
  font-size: 10px;

  transform: translateX(-50%);
}


/* TÍTULO */

.simbolo-titulo {
  max-width: 850px;
  margin: 0 auto 65px;
  text-align: center;
}

.simbolo-titulo span {
  display: block;
  margin-bottom: 14px;

  color: #D4AF37;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 4px;
}

.simbolo-titulo h2 {
  margin-bottom: 22px;

  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.simbolo-titulo p {
  color: #999999;
  font-size: 1rem;
  line-height: 1.8;
}


/* CONTENIDO */

.simbolo-contenido {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: 65px;

  align-items: center;

  max-width: 1000px;
  margin: 0 auto;
}


/* LOGO */

.simbolo-imagen {
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 380px;

  padding: 35px;

  background:
    radial-gradient(
      circle,
      rgba(212,175,55,0.08),
      transparent 65%
    ),
    #0a0a0a;

  border: 1px solid #292929;

  position: relative;
}

.simbolo-imagen::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 65px;
  height: 1px;

  background: #D4AF37;
}

.simbolo-imagen img {
  width: min(300px, 80%);
  height: auto;

  filter:
    drop-shadow(0 0 20px rgba(212,175,55,0.15));
}


/* TEXTO */

.simbolo-texto {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.simbolo-texto p {
  color: #b5b5b5;

  font-size: 1rem;
  line-height: 1.85;
}

.simbolo-texto strong {
  color: #ffffff;
  font-weight: 600;
}


/* PRINCIPIO */

.simbolo-principio {
  max-width: 850px;

  margin: 80px auto 0;
  padding: 50px 45px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      #171717,
      #0d0d0d
    );

  border: 1px solid #292929;

  position: relative;
}

.simbolo-principio::before {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;

  width: 100px;
  height: 1px;

  background: #D4AF37;

  transform: translateX(-50%);
}

.simbolo-principio span {
  display: block;
  margin-bottom: 22px;

  color: #D4AF37;

  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 4px;
}

.simbolo-principio h3 {
  margin-bottom: 28px;

  color: #ffffff;

  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.5;
  letter-spacing: 1px;
}

.simbolo-principio p {
  max-width: 700px;
  margin: 0 auto;

  color: #999999;

  font-size: 0.95rem;
  line-height: 1.8;
}


/* FIRMA */

.simbolo-firma {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: 55px;

  text-align: center;
}

.simbolo-firma strong {
  color: #D4AF37;

  font-size: 1rem;
  letter-spacing: 5px;
}

.simbolo-firma span {
  margin-top: 12px;

  color: #777777;

  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 1px;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 768px) {

  .simbolo-alvis {
    padding: 70px 20px 80px;
    margin-bottom: 15px;
  }

  .simbolo-titulo {
    margin-bottom: 45px;
  }

  .simbolo-titulo h2 {
    font-size: 1.8rem;
  }

  .simbolo-contenido {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .simbolo-imagen {
    min-height: 300px;
  }

  .simbolo-imagen img {
    width: min(250px, 75%);
  }

  .simbolo-principio {
    margin-top: 55px;
    padding: 40px 25px;
  }

  .simbolo-principio h3 {
    font-size: 1.5rem;
  }

}


@media (max-width: 600px) {

  .simbolo-alvis {
    padding: 70px 20px 80px;
  }

  .simbolo-titulo span {
    letter-spacing: 3px;
  }

  .simbolo-titulo h2 {
    font-size: 1.7rem;
  }

  .simbolo-imagen {
    min-height: 270px;
    padding: 25px;
  }

  .simbolo-texto {
    gap: 18px;
  }

  .simbolo-texto p {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .simbolo-principio {
    padding: 35px 20px;
  }

  .simbolo-firma strong {
    letter-spacing: 3px;
  }

}

/* ========================================
   ENTRENAMIENTO
   ======================================== */

.entrenamiento-destacado {
    display: grid;

    grid-template-columns: 1.5fr 0.8fr;

    gap: 50px;

    padding: 50px;

    border: 1px solid rgba(212, 175, 55, 0.25);

    background:
        linear-gradient(
            135deg,
            rgba(212, 175, 55, 0.06),
            rgba(255, 255, 255, 0.015)
        );
}

.entrenamiento-info {
    display: flex;

    flex-direction: column;

    justify-content: center;
}

.entrenamiento-info > span {
    color: #D4AF37;

    font-size: 0.7rem;

    letter-spacing: 3px;
}

.entrenamiento-info h3 {
    margin: 15px 0;

    font-size: clamp(1.6rem, 4vw, 2.4rem);

    line-height: 1.2;
}

.entrenamiento-info > p {
    max-width: 650px;

    line-height: 1.8;
}

.entrenamiento-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}

.entrenamiento-meta span {
    padding: 8px 12px;

    border: 1px solid rgba(212, 175, 55, 0.25);

    color: #D4AF37;

    font-size: 0.65rem;

    letter-spacing: 2px;
}

.entrenamiento-acceso {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px;

    border-left: 1px solid rgba(212, 175, 55, 0.18);
}

.entrenamiento-icono {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 20px;

    border: 1px solid #D4AF37;

    border-radius: 50%;

    color: #D4AF37;

    font-size: 1.2rem;
}

.entrenamiento-acceso p {
    max-width: 250px;

    line-height: 1.7;

    font-size: 0.85rem;

    margin-bottom: 25px;
}


/* BOTÓN INFORMACIÓN */

.boton-informacion {
    display: inline-block;

    padding: 15px 25px;

    border: 1px solid #D4AF37;

    background: transparent;

    color: #D4AF37;

    text-decoration: none;

    white-space: nowrap;

    transition: 0.3s ease;
}

.boton-informacion:hover {
    background: #D4AF37;

    color: #000;

    transform: translateY(-3px);
}


/* ========================================
   PARTICIPACIONES
   ======================================== */

.participaciones-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.participaciones-grid article {
    position: relative;

    min-height: 220px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    padding: 35px;

    box-sizing: border-box;

    border: 1px solid rgba(212, 175, 55, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.15);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.participaciones-grid article:hover {
    transform: translateY(-5px);

    border-color: rgba(212, 175, 55, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, 0.08),
            rgba(255, 255, 255, 0.02)
        );
}

.participaciones-grid article::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #D4AF37;

    transition: width 0.35s ease;
}

.participaciones-grid article:hover::after {
    width: 100%;
}

.participaciones-grid span {
    display: block;

    margin-bottom: 20px;

    color: #D4AF37;

    font-family: monospace;

    font-size: 0.7rem;

    letter-spacing: 2px;
}

.participaciones-grid article h3 {
    margin-bottom: 15px;

    color: #FFFFFF;

    font-size: 1.35rem;

    letter-spacing: 1px;
}

.participaciones-grid article p {
    margin-top: auto;

    padding-top: 25px;

    line-height: 1.7;
}


/* ========================================
   GALERÍA PARTICIPACIONES
   ======================================== */

.galeria-participaciones {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-auto-rows: 190px;

    gap: 18px;

    margin-top: 55px;
}

.foto-participacion {
    position: relative;

    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(212, 175, 55, 0.18);

    background: #111;
}

.foto-participacion img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter: saturate(0.85);

    cursor: zoom-in;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}

.foto-participacion:hover img {
    transform: scale(1.05);

    filter: saturate(1);
}

.foto-participacion figcaption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 35px 18px 16px;

    background:
        linear-gradient(
            transparent,
            rgba(0, 0, 0, 0.9)
        );

    color: #D4AF37;

    font-size: 0.7rem;
    font-weight: bold;

    letter-spacing: 3px;
}


/* FOTOGRAFÍAS DESTACADAS */

.foto-participacion:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.foto-participacion:nth-child(2) {
    grid-row: span 2;
}

.foto-participacion:nth-child(9) {
    grid-column: span 2;
}

.foto-participacion:nth-child(13) {
    grid-column: span 2;
    grid-row: span 2;
}


/* ========================================
   REDES SOCIALES
   ======================================== */

.redes-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.red-social {
    position: relative;

    display: block;

    padding: 35px;

    overflow: hidden;

    border: 1px solid rgba(212, 175, 55, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.015)
        );

    color: inherit;

    text-decoration: none;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.red-social:hover {
    transform: translateY(-5px);

    border-color: rgba(212, 175, 55, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, 0.08),
            rgba(255, 255, 255, 0.02)
        );
}

.red-social::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 70px;
    height: 70px;

    border-left: 1px solid rgba(212, 175, 55, 0.12);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);

    opacity: 0.5;
}

.red-social::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #D4AF37;

    transition: width 0.35s ease;
}

.red-social:hover::after {
    width: 100%;
}

.red-social span {
    display: block;

    margin-bottom: 20px;

    color: #D4AF37;

    font-size: 0.8rem;

    letter-spacing: 2px;
}

.red-social h3 {
    margin-bottom: 15px;

    transition: letter-spacing 0.3s ease;
}

.red-social:hover h3 {
    letter-spacing: 1.5px;
}

.red-social p {
    line-height: 1.7;

    margin-bottom: 25px;
}

.red-social strong {
    display: inline-block;

    color: #D4AF37;

    font-size: 0.75rem;

    letter-spacing: 2px;

    transition: transform 0.3s ease;
}

.red-social:hover strong {
    transform: translateX(6px);
}


/* ========================================
   CIERRE INFORMACIÓN
   ======================================== */

.cierre-informacion {
    max-width: 1000px;

    margin: 40px auto 0;

    padding: 110px 30px;

    text-align: center;

    border-top: 1px solid rgba(212, 175, 55, 0.25);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.cierre-informacion::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 50%;

    width: 70px;
    height: 2px;

    transform: translateX(-50%);

    background: #D4AF37;
}

.cierre-informacion span {
    display: block;

    margin-bottom: 20px;

    color: #D4AF37;

    font-size: 0.75rem;

    letter-spacing: 4px;
}

.cierre-informacion h2 {
    max-width: 750px;

    margin: 0 auto 25px;

    font-size: 1.7rem;

    letter-spacing: 2px;

    line-height: 1.4;
}

.cierre-informacion p {
    max-width: 650px;

    margin: 0 auto 35px;

    line-height: 1.8;
}


/* ========================================
   VISOR DE FOTOGRAFÍAS
   ======================================== */

.visor-fotos {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 30px;

    background: rgba(0, 0, 0, 0.92);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.visor-fotos.activo {
    opacity: 1;
    visibility: visible;
}

#imagen-visor {
    max-width: 90%;
    max-height: 85vh;

    object-fit: contain;

    border: 1px solid rgba(212, 175, 55, 0.45);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.7);

    transform: scale(0.96);

    transition: transform 0.35s ease;
}

.visor-fotos.activo #imagen-visor {
    transform: scale(1);
}

#cerrar-visor {
    position: absolute;

    top: 25px;
    right: 30px;

    width: 45px;
    height: 45px;

    border: 1px solid rgba(212, 175, 55, 0.6);

    background: rgba(0, 0, 0, 0.5);

    color: #D4AF37;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

#cerrar-visor:hover {
    background: #D4AF37;
    color: #000;
}

.foto-ampliable {
    cursor: zoom-in;
}


/* ========================================
   TRANSICIÓN HACIA SERVICIOS
   ======================================== */

.transicion-servicios {
    position: relative;

    min-height: 380px;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding: 80px 25px;

    text-align: center;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #0b0b0b,
            #111111,
            #0b0b0b
        );
}

.transicion-servicios::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 90px;
    height: 1px;

    transform: translateX(-50%);

    background: #D4AF37;
}

.transicion-servicios::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.05),
            transparent 68%
        );

    pointer-events: none;
}

.transicion-servicios span {
    position: relative;
    z-index: 2;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 4px;
}

.transicion-servicios h2 {
    position: relative;
    z-index: 2;

    max-width: 700px;

    margin: 0 0 20px;

    color: #FFFFFF;

    font-size: clamp(2rem, 5vw, 3.2rem);

    line-height: 1.15;

    letter-spacing: 2px;
}

.transicion-servicios p {
    position: relative;
    z-index: 2;

    max-width: 600px;

    margin: 0 0 35px;

    color: #888;

    line-height: 1.8;
}

.boton-transicion {
    position: relative;
    z-index: 2;

    display: inline-block;

    padding: 15px 28px;

    border: 1px solid #D4AF37;

    color: #D4AF37;

    background: transparent;

    text-decoration: none;

    font-size: 0.72rem;
    font-weight: bold;

    letter-spacing: 2px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.boton-transicion:hover {
    background: #D4AF37;
    color: #000000;

    transform: translateY(-3px);
}


/* ========================================
   PRODUCTOS
   ======================================== */

#productos {
    background-color: #0b0b0b;

    padding: 90px 40px;

    text-align: center;

    border-bottom: 1px solid #333;
}


/* TÍTULO */

.productos-titulo span {
    display: block;

    color: #D4AF37;

    font-size: 0.8rem;
    font-weight: bold;

    letter-spacing: 4px;

    margin-bottom: 12px;
}

.productos-titulo h2 {
    color: #FFFFFF;

    font-size: 2.3rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 15px;
}

.productos-titulo p {
    max-width: 700px;

    margin: 0 auto;

    color: #999999;

    line-height: 1.7;
}


/* CATEGORÍAS */

.categorias-titulo {
    max-width: 700px;

    margin: 65px auto 0;

    text-align: center;
}

.categorias-titulo span {
    display: block;

    margin-bottom: 12px;

    color: #D4AF37;

    font-size: 0.65rem;
    font-weight: 600;

    letter-spacing: 4px;
}

.categorias-titulo h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(1.7rem, 4vw, 2.3rem);

    letter-spacing: 2px;

    text-transform: uppercase;
}

.categorias-productos {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    max-width: 1150px;

    margin: 65px auto 0;
}

.categoria-producto {
    position: relative;

    display: block;

    min-height: 360px;

    overflow: hidden;

    background-color: #151515;

    border: 1px solid #292929;

    color: #FFFFFF;

    text-decoration: none;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.categoria-producto:hover {
    transform: translateY(-7px);

    border-color: #D4AF37;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.35);
}

.categoria-imagen {
    position: absolute;

    inset: 0;

    overflow: hidden;
}

.categoria-imagen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.7s ease;
}

.categoria-imagen::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.55) 45%,
            rgba(0, 0, 0, 0.12) 100%
        );
}

.categoria-producto:hover .categoria-imagen img {
    transform: scale(1.06);
}

.categoria-contenido {
    position: absolute;

    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 30px;
}

.categoria-contenido > span {
    display: block;

    margin-bottom: 10px;

    color: #D4AF37;

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 3px;
}

.categoria-contenido h3 {
    margin: 0 0 10px;

    color: #FFFFFF;

    font-size: 1.35rem;

    letter-spacing: 3px;
}

.categoria-contenido p {
    margin: 0 0 20px;

    color: #CCCCCC;

    font-size: 0.85rem;

    line-height: 1.6;
}

.categoria-contenido strong {
    display: inline-block;

    color: #D4AF37;

    font-size: 0.65rem;

    letter-spacing: 2px;

    transition: color 0.3s ease;
}

.categoria-producto:hover .categoria-contenido strong {
    color: #FFFFFF;
}


/* ========================================
   PRODUCTOS DESTACADOS
   ======================================== */

.productos-destacados {
    max-width: 1150px;

    margin: 110px auto 0;

    padding: 0 30px 100px;
}

.productos-destacados-titulo {
    position: relative;

    max-width: 700px;

    margin: 0 auto 55px;

    text-align: center;
}

.productos-destacados-titulo span {
    display: block;

    margin-bottom: 15px;

    color: #D4AF37;

    font-size: 0.65rem;
    font-weight: 600;

    letter-spacing: 4px;
}

.productos-destacados-titulo h2 {
    margin: 0 0 18px;

    color: #FFFFFF;

    font-size: clamp(2rem, 5vw, 3rem);

    letter-spacing: 2px;

    text-transform: uppercase;
}

.productos-destacados-titulo p {
    margin: 0 auto;

    color: #888888;

    line-height: 1.8;
}


/* GRID DE PRODUCTOS */

#productos-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    max-width: 1000px;

    margin: 55px auto 0;
}


/* PLACEHOLDER */

.producto-placeholder {
    grid-column: 1 / -1;

    padding: 60px 30px;

    background-color: #151515;

    border: 1px dashed #333;
}

.producto-placeholder span {
    color: #D4AF37;

    font-size: 0.75rem;

    letter-spacing: 4px;
}

.producto-placeholder h3 {
    color: #FFFFFF;

    font-size: 1.3rem;

    letter-spacing: 3px;

    margin: 20px 0 15px;
}

.producto-placeholder p {
    color: #888888;

    line-height: 1.7;
}


/* PRODUCTO */

.producto {
    display: grid;

    grid-template-columns: 1fr 1fr;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #171717,
            #101010
        );

    border: 1px solid #292929;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.producto:hover {
    transform: translateY(-6px);

    border-color:
        rgba(212, 175, 55, 0.6);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.3);
}

.producto-imagen {
    min-height: 350px;

    overflow: hidden;
}

.producto-imagen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}

.producto:hover .producto-imagen img {
    transform: scale(1.04);
}

.producto-contenido {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 40px;
}

.producto-marca {
    display: block;

    margin-bottom: 12px;

    color: #D4AF37;

    font-size: 0.65rem;
    font-weight: bold;

    letter-spacing: 3px;
}

.producto-contenido h3 {
    margin: 0 0 18px;

    color: #FFFFFF;

    font-size: 1.25rem;

    letter-spacing: 2px;
}

.producto-contenido p {
    margin: 0 0 25px;

    color: #888888;

    line-height: 1.8;

    font-size: 0.9rem;
}

.producto-precio {
    margin-bottom: 25px;

    color: #FFFFFF;

    font-size: 1.4rem;
    font-weight: 700;
}

.producto-boton {
    display: inline-block;

    align-self: flex-start;

    padding: 13px 20px;

    border: 1px solid #D4AF37;

    background: transparent;

    color: #D4AF37;

    text-decoration: none;

    font-size: 0.65rem;
    font-weight: bold;

    letter-spacing: 2px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.producto-boton:hover {
    background: #D4AF37;

    color: #000000;

    transform: translateY(-3px);
}


/* CIERRE PRODUCTOS */

.productos-cierre {
    position: relative;

    max-width: 850px;

    margin: 20px auto 100px;

    padding: 80px 30px;

    text-align: center;

    border-top: 1px solid rgba(212, 175, 55, 0.22);
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);

    overflow: hidden;
}

.productos-cierre::before {
    content: "◆";

    position: absolute;

    top: -5px;
    left: 50%;

    transform: translateX(-50%);

    padding: 0 12px;

    background: #0b0b0b;

    color: #D4AF37;

    font-size: 7px;
}

.productos-cierre > span {
    display: block;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 0.65rem;
    font-weight: 600;

    letter-spacing: 4px;
}

.productos-cierre h2 {
    margin: 0 0 18px;

    color: #FFFFFF;

    font-size: clamp(1.8rem, 5vw, 2.7rem);

    letter-spacing: 2px;

    text-transform: uppercase;
}

.productos-cierre p {
    max-width: 550px;

    margin: 0 auto 35px;

    color: #888888;

    line-height: 1.8;
}

.boton-productos {
    display: inline-block;

    padding: 15px 28px;

    border: 1px solid #D4AF37;

    background: #D4AF37;

    color: #000000;

    text-decoration: none;

    font-size: 0.65rem;
    font-weight: bold;

    letter-spacing: 2px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.boton-productos:hover {
    background: transparent;

    color: #D4AF37;

    transform: translateY(-3px);
}


/* ========================================
   CONTACTO
   ======================================== */

#contacto {
    position: relative;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212, 175, 55, 0.08),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #0b0b0b 0%,
            #111111 55%,
            #0d0d0d 100%
        );

    padding: 100px 40px 110px;

    border-top: 1px solid #D4AF37;

    border-bottom: 1px solid #292929;

    overflow: hidden;
}

#contacto::before {
    content: "◆";

    position: absolute;

    top: 25px;
    left: 50%;

    transform: translateX(-50%);

    color: #D4AF37;

    font-size: 0.75rem;

    opacity: 0.7;
}


/* TÍTULO */

.contacto-titulo {
    text-align: center;

    max-width: 700px;

    margin: 0 auto 60px;
}

.contacto-titulo span {
    display: block;

    color: #D4AF37;

    font-size: 0.75rem;
    font-weight: bold;

    letter-spacing: 5px;

    margin-bottom: 15px;
}

.contacto-titulo h2 {
    position: relative;

    color: #FFFFFF;

    font-size: clamp(2rem, 4vw, 2.8rem);

    letter-spacing: 3px;

    text-transform: uppercase;

    margin: 0 0 18px;
}

.contacto-titulo h2::after {
    content: "";

    display: block;

    width: 55px;
    height: 1px;

    background-color: #D4AF37;

    margin: 18px auto 0;
}

.contacto-titulo p {
    color: #999999;

    line-height: 1.8;

    max-width: 600px;

    margin: 0 auto;
}


/* CONTENIDO */

.contacto-contenido {
    display: grid;

    grid-template-columns: 1.4fr 0.8fr;

    gap: 45px;

    max-width: 1050px;

    margin: 0 auto;
}


/* FORMULARIO */

#formulario-contacto {
    display: flex;

    flex-direction: column;

    gap: 22px;

    padding: 40px;

    background:
        linear-gradient(
            145deg,
            #171717,
            #101010
        );

    border: 1px solid #292929;

    position: relative;
}

#formulario-contacto::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 25px;

    width: 70px;
    height: 2px;

    background-color: #D4AF37;
}

.campo {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.campo label {
    color: #FFFFFF;

    font-size: 0.75rem;
    font-weight: bold;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.campo input,
.campo textarea {
    width: 100%;

    padding: 16px;

    background-color: #0d0d0d;

    border: 1px solid #303030;

    color: #FFFFFF;

    font-family: inherit;

    font-size: 0.95rem;

    outline: none;

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.campo textarea {
    resize: vertical;

    min-height: 150px;
}

.campo input:focus,
.campo textarea:focus {
    border-color: #D4AF37;

    background-color: #111111;

    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.15);
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: #5f5f5f;
}


/* BOTÓN CONTACTO */

.boton-contacto {
    align-self: flex-start;

    padding: 14px 28px;

    background-color: transparent;

    border: 1px solid #D4AF37;

    color: #D4AF37;

    font-weight: bold;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.boton-contacto:hover {
    background-color: #D4AF37;

    color: #000000;
}


/* INFORMACIÓN DE CONTACTO */

.contacto-info {
    padding: 35px;

    background-color: #151515;

    border: 1px solid #292929;
}

.contacto-info > span {
    color: #D4AF37;

    font-size: 0.75rem;

    letter-spacing: 4px;
}

.contacto-info h3 {
    color: #FFFFFF;

    font-size: 1.4rem;

    letter-spacing: 3px;

    margin: 18px 0 10px;
}

.contacto-info > p {
    color: #999999;

    line-height: 1.7;
}

.dato-contacto {
    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid #292929;
}

.dato-contacto strong {
    color: #D4AF37;

    font-size: 0.75rem;

    letter-spacing: 2px;
}

.dato-contacto p {
    color: #999999;

    margin-top: 8px;
}

.dato-contacto a {
    color: #999999;

    text-decoration: none;

    transition: color 0.3s ease;
}

.dato-contacto a:hover {
    color: #D4AF37;
}

/* ========================================
   UBICACIÓN — CONTACTO
   ======================================== */

.contacto-ubicacion {
    color: #D4AF37;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-top: 10px;
    text-transform: uppercase;
}


/* MENSAJE */

#mensaje-formulario {
    min-height: 20px;

    padding: 0;

    font-size: 0.85rem;

    line-height: 1.5;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.mensaje-error {
    color: #d4af37;

    margin-bottom: 15px;
}

.mensaje-exito {
    color: #ffffff;

    margin-bottom: 15px;
}


/* ========================================
   PIE DE PÁGINA
   ======================================== */

#pie {
    position: relative;

    padding: 85px 30px 30px;

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center top,
            rgba(212, 175, 55, 0.055),
            transparent 42%
        ),
        #050505;

    border-top: 1px solid rgba(212, 175, 55, 0.25);
}

#pie::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 100px;
    height: 1px;

    transform: translateX(-50%);

    background: #D4AF37;
}

.pie-contenido {
    max-width: 1000px;

    margin: 0 auto;
}

.pie-marca h2 {
    margin: 0 0 10px;

    color: #FFFFFF;

    font-size: clamp(1.4rem, 4vw, 1.8rem);

    letter-spacing: 5px;
}

.pie-marca p {
    margin: 0;

    color: #D4AF37;

    font-size: 0.7rem;

    letter-spacing: 4px;
}

.pie-navegacion {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 28px;

    margin: 45px 0 35px;
}

.pie-navegacion a {
    position: relative;

    color: #777777;

    text-decoration: none;

    font-size: 0.75rem;

    letter-spacing: 1.5px;

    transition: color 0.3s ease;
}

.pie-navegacion a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: #D4AF37;

    transition: width 0.3s ease;
}

.pie-navegacion a:hover {
    color: #D4AF37;
}

.pie-navegacion a:hover::after {
    width: 100%;
}

.pie-lema {
    margin: 0;

    color: #FFFFFF;

    font-size: 0.7rem;

    letter-spacing: 4px;

    opacity: 0.75;
}

.pie-linea {
    position: relative;

    width: 100%;
    height: 1px;

    margin: 40px 0 25px;

    background: #202020;
}

.pie-linea::after {
    content: "◆";

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    padding: 0 12px;

    background: #050505;

    color: #D4AF37;

    font-size: 6px;
}

#pie small {
    color: #555555;

    font-size: 0.7rem;

    letter-spacing: 0.5px;
}


/* ========================================
   RESPONSIVE — TABLET
   ======================================== */

@media (max-width: 900px) {

    /* IDENTIDAD */

    #identidad {
        padding: 95px 30px;
    }

    .identidad-tarjetas {
        grid-template-columns: 1fr;

        max-width: 550px;
    }

    .tarjeta-identidad {
        min-height: 210px;
    }


    /* SERVICIOS */

    .servicios-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 18px;
    }


    /* GALERÍA PARTICIPACIONES */

    .galeria-participaciones {
        grid-template-columns: repeat(2, 1fr);

        grid-auto-rows: 220px;
    }

    .foto-participacion:nth-child(1),
    .foto-participacion:nth-child(13) {
        grid-column: span 2;

        grid-row: span 2;
    }


    /* PRODUCTOS */

    .productos-destacados {
        padding-left: 25px;
        padding-right: 25px;
    }

    #productos-grid {
        grid-template-columns: 1fr;
    }


    /* CATEGORÍAS */

    .categorias-productos {
        grid-template-columns: repeat(2, 1fr);

        gap: 18px;
    }
}


/* ========================================
   RESPONSIVE — MÓVIL / TABLET PEQUEÑA
   ======================================== */

@media (max-width: 768px) {

    /* CABECERA */

    #cabecera {
        min-height: 280px;

        padding: 45px 20px 35px;
    }

    #cabecera h1 {
        letter-spacing: 4px;
    }

    #imagen {
        margin: 25px auto 18px;
    }

    #imagen img {
        width: min(210px, 58vw);
    }

    #cabecera h2 {
        letter-spacing: 3px;
    }


    /* MENÚ */

    #boton-menu {
        display: block;

        margin-left: auto;
    }

    #menu ul {
        display: none;

        flex-direction: column;

        width: 100%;

        padding: 25px 0;

        gap: 0;

        text-align: center;
    }

    #menu ul.menu-abierto {
        display: flex;
    }

    #menu li {
        width: 100%;
    }

    #menu li a {
        display: block;

        width: 100%;

        padding: 18px 10px;

        text-align: center;
    }


    /* IDENTIDAD */

    #identidad {
        padding: 60px 20px;
    }

    .identidad-titulo h2 {
        font-size: 1.7rem;
    }

    .identidad-tarjetas {
        grid-template-columns: 1fr;
    }


    /* INFORMACIÓN */

    #informacion {
        padding: 65px 20px;
    }

    .informacion-titulo h2 {
        font-size: 1.8rem;
    }

    .informacion-contenido {
        grid-template-columns: 1fr;
    }

    .bloque-informacion {
        padding: 35px 25px;
    }

    .principio-informacion {
        padding: 30px 20px;
    }


    /* CONTACTO */

    #contacto {
        padding: 65px 20px;
    }

    .contacto-titulo h2 {
        font-size: 1.8rem;
    }

    .contacto-contenido {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .boton-contacto {
        width: 100%;
    }


    /* PRODUCTOS */

    #productos {
        padding: 65px 20px;
    }

    .productos-titulo h2 {
        font-size: 1.8rem;
    }

    #productos-grid {
        grid-template-columns: 1fr;
    }

    .producto-contenido {
        padding: 20px;
    }


    /* INFORMACIÓN AMPLIADA */

    .historia-alvis,
    .contenido-entrenamiento,
    .participaciones-alvis,
    .redes-alvis {
        padding: 70px 20px;
    }

    .historia-titulo,
    .contenido-entrenamiento > header,
    .participaciones-alvis > header,
    .redes-alvis > header {
        margin-bottom: 40px;
    }

    .historia-titulo h2,
    .contenido-entrenamiento > header h2,
    .participaciones-alvis > header h2,
    .redes-alvis > header h2 {
        font-size: 1.8rem;

        line-height: 1.2;
    }

    .historia-titulo p,
    .contenido-entrenamiento > header p,
    .participaciones-alvis > header p,
    .redes-alvis > header p {
        font-size: 0.9rem;

        line-height: 1.7;
    }


    /* GALERÍA HISTORIA */

    .galeria-alvis {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .foto-historia img {
        height: 300px;
    }

    .foto-historia figcaption {
        padding: 12px 15px;

        font-size: 0.7rem;
    }


    /* ENTRENAMIENTO */

    .entrenamiento-destacado {
        grid-template-columns: 1fr;

        gap: 35px;

        padding: 30px 25px;
    }

    .entrenamiento-info h3 {
        font-size: 1.6rem;
    }

    .entrenamiento-acceso {
        border-left: none;

        border-top: 1px solid rgba(212, 175, 55, 0.18);

        padding: 35px 10px 10px;
    }

    .entrenamiento-meta {
        gap: 8px;
    }

    .entrenamiento-meta span {
        font-size: 0.6rem;

        padding: 7px 10px;
    }

    .boton-informacion {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }


    /* PARTICIPACIONES */

    .participaciones-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .participaciones-grid article {
        min-height: auto;

        padding: 28px 25px;
    }

    .participaciones-grid article p {
        margin-top: 0;

        padding-top: 10px;
    }


    /* REDES */

    .redes-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .red-social {
        padding: 28px 25px;
    }


    /* PRINCIPIO */

    .principio-informacion {
        padding: 60px 20px;

        text-align: center;
    }

    .principio-informacion h3 {
        font-size: 1rem;

        line-height: 1.7;
    }


    /* LÍNEAS */

    .historia-alvis::before,
    .contenido-entrenamiento::before,
    .participaciones-alvis::before,
    .redes-alvis::before {
        left: 20px;
        right: 20px;
    }


    /* VISOR */

    .visor-fotos {
        padding: 15px;
    }

    #imagen-visor {
        max-width: 96%;

        max-height: 80vh;
    }

    #cerrar-visor {
        top: 15px;
        right: 15px;

        width: 40px;
        height: 40px;

        font-size: 26px;
    }


    /* GALERÍA PARTICIPACIONES */

    .galeria-participaciones {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 40px;
    }

    .foto-participacion img {
        height: 300px;
    }

    .foto-participacion:nth-child(1),
    .foto-participacion:nth-child(2),
    .foto-participacion:nth-child(9),
    .foto-participacion:nth-child(13) {
        grid-column: span 1;

        grid-row: span 1;
    }


    /* INTERSTICIOS */

    .historia-alvis,
    .contenido-entrenamiento,
    .participaciones-alvis,
    .redes-alvis {
        margin-bottom: 15px;
    }

    .historia-alvis::after,
    .contenido-entrenamiento::after,
    .participaciones-alvis::after,
    .redes-alvis::after {
        font-size: 6px;
    }


    /* HERO */

    #hero {
        min-height: 650px;
    }

    .hero-contenido {
        width: 92%;

        padding: 40px 15px;
    }

    .hero-logo img {
        width: min(120px, 40vw);
    }

    .hero-contenido h2 {
        letter-spacing: 3px;

        font-size: 0.85rem;
    }

    .hero-lema {
        font-size: 0.75rem;

        letter-spacing: 3px;
    }

    .hero-botones {
        flex-direction: column;

        width: 100%;
    }

    .boton-hero,
    .boton-hero-secundario {
        width: min(280px, 90%);

        box-sizing: border-box;

        text-align: center;
    }


    /* SERVICIOS */

    #servicios {
        padding: 70px 20px;
    }

    .servicios-titulo h2 {
        font-size: 1.8rem;

        letter-spacing: 1px;
    }

    .servicios-titulo p {
        font-size: 0.9rem;
    }

    .tarjeta-servicio {
        padding: 32px 24px;
    }

    .tarjeta-servicio h3 {
        font-size: 1rem;

        letter-spacing: 2px;
    }

    .tarjeta-servicio p,
    .tarjeta-servicio ul {
        font-size: 0.85rem;
    }

    .servicios-separador {
        margin-top: 40px;

        gap: 12px;
    }

    .servicios-separador span {
        font-size: 0.6rem;

        letter-spacing: 3px;
    }

    .servicios-cierre {
        margin-top: 70px;

        padding: 65px 20px;
    }

    .servicios-cierre h2 {
        font-size: 1.8rem;
    }

    .servicios-cierre p {
        font-size: 0.9rem;
    }

    .boton-servicios {
        width: min(280px, 90%);

        box-sizing: border-box;
    }


    /* PRODUCTOS DESTACADOS */

    .productos-destacados {
        margin-top: 85px;

        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 70px;
    }

    .productos-destacados-titulo {
        margin-bottom: 40px;
    }

    .productos-destacados-titulo h2 {
        font-size: 1.8rem;
    }

    .producto {
        grid-template-columns: 1fr;
    }

    .producto-imagen {
        min-height: 320px;
    }

    .producto-contenido {
        padding: 30px 25px;
    }

    .producto-boton {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }


    /* CATEGORÍAS */

    .categorias-productos {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 45px;
    }

    .categoria-producto {
        min-height: 330px;
    }

    .categoria-contenido {
        padding: 25px;
    }

    .categoria-contenido h3 {
        font-size: 1.2rem;
    }

    .categoria-contenido p {
        font-size: 0.82rem;
    }


    /* CIERRE PRODUCTOS */

    .productos-cierre {
        margin: 0 auto 70px;

        padding: 65px 20px;
    }

    .productos-cierre h2 {
        font-size: 1.8rem;
    }

    .productos-cierre p {
        font-size: 0.9rem;
    }

    .boton-productos {
        width: min(300px, 90%);

        box-sizing: border-box;
    }


    /* PIE */

    #pie {
        padding: 70px 20px 25px;
    }

    .pie-navegacion {
        gap: 20px;

        margin: 40px 0 30px;
    }

    .pie-navegacion a {
        font-size: 0.7rem;
    }

    .pie-lema {
        font-size: 0.62rem;

        letter-spacing: 2.5px;

        line-height: 1.8;
    }

    #pie small {
        font-size: 0.65rem;
    }


    /* TRANSICIÓN */

    .transicion-servicios {
        min-height: 340px;

        padding: 70px 20px;
    }

    .transicion-servicios h2 {
        font-size: 1.9rem;
    }

    .transicion-servicios p {
        font-size: 0.9rem;
    }

    .boton-transicion {
        width: min(300px, 90%);

        box-sizing: border-box;

        text-align: center;
    }


    /* CIERRE INFORMACIÓN */

    .cierre-informacion {
        padding: 80px 20px;
    }

    .cierre-informacion h2 {
        font-size: 1.3rem;

        letter-spacing: 1px;
    }

    .cierre-informacion p {
        font-size: 0.9rem;
    }
}


/* ========================================
   RESPONSIVE — MÓVIL PEQUEÑO
   ======================================== */

@media (max-width: 600px) {

    #identidad {
        padding: 80px 20px;
    }

    .identidad-titulo h2 {
        font-size: 1.9rem;
    }

    .identidad-titulo p {
        font-size: 0.9rem;
    }

    .identidad-tarjetas {
        margin-top: 45px;
    }

    .tarjeta-identidad {
        min-height: 220px;

        padding: 35px 25px;
    }


    /* SERVICIOS */

    .servicios-titulo h2 {
        font-size: 1.8rem;
    }


    /* GALERÍA */

    .galeria-participaciones {
        grid-template-columns: 1fr;

        grid-auto-rows: 280px;

        gap: 12px;
    }


    /* PIE */

    .pie-navegacion {
        gap: 20px;
    }
}