@font-face {
    font-family: 'Carmen Sans';
    src: url('../fonts/carmen-sans-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Carmen Sans';
    src: url('../fonts/carmen-sans-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-primario: #B4122D;
    --color-primario-claro: #C21A36;
    --color-primario-oscuro: #8A0E1F;
    --color-secundario: #151515;
    --color-footer: #1D1127;
    --color-texto: #696A87;
    --color-acento: #C21A36;
    --color-blanco: #FFFFFF;
    --color-fondo-ligero: #F9F9F9;
    --fuente-corporativa: "Carmen Sans", sans-serif;
    --peso-regular: 400;
    --peso-negrita: 700;
    --ancho-maximo: 1200px;
    --transicion-estandar: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fuente-corporativa);
    font-weight: var(--peso-regular);
    color: var(--color-texto);
    line-height: 26px;
    background-color: var(--color-blanco);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fuente-corporativa);
    font-weight: var(--peso-negrita);
    color: var(--color-secundario);
    text-transform: uppercase;
    line-height: 1.1;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transicion-estandar);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--fuente-corporativa);
    font-weight: var(--peso-negrita);
    transition: var(--transicion-estandar);
}

main {
    position: relative;
    z-index: 1;
}

.boton-primario {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border: 1px solid var(--color-blanco);
    padding: 12px 24px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
}

.boton-primario:hover {
    background-color: var(--color-blanco);
    color: var(--color-primario);
    transform: translateY(-1px);
}

.boton-descarga {
    background-color: var(--color-blanco);
    color: var(--color-primario);
    padding: 13px 30px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: var(--peso-negrita);
    border-radius: 4px;
}

.boton-descarga:hover {
    color: var(--color-acento);
    box-shadow: 0px 0px 8px 0.2px white;
    transform: translateY(-10px);
}

.cabecera-principal {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(to bottom, var(--color-primario), var(--color-acento));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.contenedor-cabecera {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logotipo img {
    height: 50px;
    width: auto;
}

.seccion-hero {
    background: linear-gradient(180deg,
            rgba(208, 4, 4, 0.5) 0%,
            rgba(213, 6, 2, 0.3) 100%), url('../img/club-camara-hero.png') center/cover no-repeat;
    background-attachment: fixed;
    color: var(--color-blanco);
    text-align: center;
    padding: 80px 20px 0;
    min-height: 90dvh;
    min-width: 100dvw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-contenido {
    width: 100%;
    max-width: var(--ancho-maximo);
}

.hero-contenido h1 {
    font-size: 56px;
    color: var(--color-blanco);
    margin: 0 0 12px;
    text-transform: none;
    font-weight: var(--peso-negrita);
    line-height: 1.1;
}

.hero-contenido>p {
    font-size: 16px;
    color: var(--color-blanco);
    margin-bottom: 0;
}

.contenedor-metricas {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    background: linear-gradient(120deg, var(--color-primario-oscuro), var(--color-primario-claro));
    padding: 30px 40px;
    max-width: 900px;
    margin: 50px auto 0;
    width: 100%;
    border-radius: 4px;
}

.metrica {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.metrica-numero {
    display: block;
    font-weight: var(--peso-negrita);
    font-size: 42px;
    color: var(--color-blanco);
    line-height: 1;
}

.metrica-etiqueta {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: var(--peso-regular);
    color: var(--color-blanco);
    letter-spacing: 1px;
    margin-top: 4px;
}

.seccion-bienvenida {
    padding: 100px 20px 80px;
    text-align: center;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
}

.seccion-bienvenida .contenedor-texto h2 {
    color: var(--color-primario);
    font-size: 42px;
    margin-bottom: 8px;
    text-transform: none;
    font-weight: var(--peso-negrita);
}

.seccion-bienvenida .contenedor-texto p {
    font-size: 16px;
    font-weight: var(--peso-negrita);
    color: var(--color-secundario);
    text-transform: uppercase;
}

.galeria-mosaico {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.galeria-mosaico figure {
    overflow: hidden;
    height: 260px;
    margin: 0;
    position: relative;
    cursor: pointer;
}

.galeria-mosaico figure figcaption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--color-blanco);
    font-size: 20px;
    font-weight: var(--peso-negrita);
    font-family: var(--fuente-corporativa);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 2;
    pointer-events: none;
    text-align: center;
}

.galeria-mosaico figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}

.galeria-mosaico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.35s ease, transform 0.35s ease;
}

.galeria-mosaico figure:hover img {
    filter: grayscale(100%);
    transform: scale(1.04);
}

.galeria-mosaico figure:hover::after {
    opacity: 1;
}

.galeria-mosaico figure:hover figcaption {
    opacity: 1;
}

.banner-promocional {
    background: radial-gradient(circle at center, #f44646 0%, #B4122D 100%);
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.banner-contenido {
    width: 100%;
    max-width: 1000px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.banner-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.banner-texto h3 {
    font-size: 24px;
    color: var(--color-blanco);
    text-transform: none;
    font-weight: var(--peso-negrita);
    line-height: 1.2;
    margin-bottom: 24px;
}

.banner-texto h3 span {
    display: block;
    font-size: 48px;
    margin-top: 10px;
}

.banner-texto p {
    font-size: 13px;
    color: var(--color-blanco);
    margin-bottom: 30px;
}

.banner-imagen {
    flex: 0 0 400px;
    height: 400px;
}

.banner-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%);
}

.seccion-niveles {
    padding: 80px 20px;
    text-align: center;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
}

.seccion-niveles h2 {
    color: var(--color-primario);
    font-size: 36px;
    margin-bottom: 8px;
}

.seccion-niveles>p {
    font-size: 15px;
    color: var(--color-texto);
}

.rejilla-niveles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.nivel-tarjeta {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 3px solid transparent;
    transition: var(--transicion-estandar);
}

.nivel-tarjeta:hover {
    border-bottom-color: var(--color-primario);
}

.nivel-tarjeta img {
    max-width: 180px;
    height: auto;
    margin: 0 auto;
}

.banner-video {
    background: radial-gradient(circle at center, #f44646 0%, #B4122D 100%);
    padding: 100px 20px;
    color: var(--color-blanco);
    text-align: center;
}

.video-overlay {
    max-width: 700px;
    margin: 0 auto;
}

.banner-video h3 {
    color: var(--color-blanco);
    font-size: 34px;
    margin-bottom: 14px;
    text-transform: uppercase;
    line-height: 1.2;
}

.banner-video p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 30px;
}

.seccion-socios {
    padding: 80px 20px;
    text-align: center;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
}

.seccion-socios h4 {
    color: var(--color-primario);
    font-size: 36px;
    text-transform: none;
    font-weight: var(--peso-negrita);
    margin-bottom: 8px;
}

.seccion-socios>p {
    font-size: 15px;
    color: var(--color-texto);
    margin-bottom: 40px;
}

.categoria-socios {
    margin-bottom: 60px;
}

.categoria-socios h5 {
    font-size: 28px;
    color: var(--color-secundario);
    text-transform: capitalize;
    font-weight: var(--peso-negrita);
    letter-spacing: 1px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 30px;
    margin-top: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.contenedor-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 80dvw;
    margin: 0 auto;
}

.contenedor-logos--premium {
    grid-template-columns: repeat(4, 1fr);
}

.contenedor-logos--plus {
    grid-template-columns: repeat(5, 1fr);
}

.contenedor-logos--red {
    grid-template-columns: repeat(6, 1fr);
}

.logo-socio {
    border: 1px solid #EAEAEA;
    border-radius: 6px;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.logo-socio .cara-frontal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: var(--color-blanco);
    border-radius: 6px;
    transition: opacity 0.7s ease;
    z-index: 2;
}

.logo-socio .cara-frontal img {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
}

.logo-socio .cara-trasera {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #f44646 0%, #B4122D 100%);
    z-index: 1;
}

.logo-socio .cara-trasera span {
    color: var(--color-blanco);
    font-size: 15px;
    font-weight: 900;
    font-family: var(--fuente-corporativa);
    text-align: center;
    padding: 10px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.logo-socio:hover .cara-frontal {
    opacity: 0;
}

.llamada-accion-final {
    background: radial-gradient(circle at center, #f44646 0%, #B4122D 100%);
    color: var(--color-blanco);
    text-align: center;
    padding: 60px 40px;
    position: relative;
    z-index: 10;
    max-width: 860px;
    margin: 0 auto -80px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.llamada-accion-final h3 {
    color: var(--color-blanco);
    font-size: 28px;
    margin-bottom: 16px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.llamada-accion-final p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    max-width: 500px;
    margin: 0 auto 24px;
}

.pie-pagina {
    background-color: var(--color-footer);
    color: var(--color-blanco);
    padding: 120px 20px 0;
}

.footer-superior {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 60px;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding-bottom: 50px;
}

.footer-info img {
    height: 55px;
    width: auto;
    margin-bottom: 16px;
}

.footer-info p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 22px;
}

.footer-enlaces h6,
.footer-contacto h6 {
    font-size: 13px;
    color: var(--color-blanco);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-weight: var(--peso-negrita);
}

.footer-enlaces ul {
    list-style: none;
}

.footer-enlaces ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-enlaces ul li::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--color-primario);
    flex-shrink: 0;
}

.footer-enlaces a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s;
}

.footer-enlaces a:hover {
    color: var(--color-primario);
}

.footer-contacto address {
    font-style: normal;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 28px;
}

.footer-contacto address br {
    display: block;
    content: '';
    margin-bottom: 2px;
}

.footer-redes {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    max-width: var(--ancho-maximo);
    margin: 0 auto;
}

.footer-red-icono {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco);
    font-size: 14px;
    transition: background-color 0.2s;
    text-decoration: none;
}

.footer-red-icono:hover {
    background-color: var(--color-primario);
}

.footer-inferior {
    padding: 20px 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    max-width: var(--ancho-maximo);
    margin: 0 auto;
}

.enlaces-legales {
    display: flex;
    gap: 30px;
}

.enlaces-legales a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
}

.enlaces-legales a:hover {
    color: var(--color-blanco);
}

@media (max-width: 1024px) {
    .cabecera-principal {
        padding: 5px 0;
    }

    .hero-contenido h1 {
        font-size: 42px;
    }

    .contenedor-metricas {
        padding: 20px 30px;
        gap: 15px;
    }

    .banner-contenido {
        flex-direction: column;
        text-align: center;
    }

    .banner-texto {
        padding: 40px 20px;
        align-items: center;
        order: 2;
    }

    .banner-imagen {
        order: 1;
        min-height: 300px;
        width: 100%;
        flex: none;
    }

    .banner-texto h3 {
        font-size: 26px;
    }

    .banner-texto h3 span {
        font-size: 38px;
    }

    .rejilla-niveles {
        gap: 20px;
    }

    .contenedor-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .footer-superior {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .contenedor-cabecera {
        padding: 10px 15px;
        flex-direction: column;
        gap: 10px;
    }

    .logotipo img {
        height: 40px;
    }

    .boton-primario,
    .boton-descarga {
        padding: 10px 16px;
        font-size: 12px;
    }

    .seccion-hero {
        padding: 40px 15px 0;
        min-height: auto;
    }

    .hero-contenido h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    .subtitulo-hero {
        font-size: 14px;
    }

    .contenedor-metricas {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 30px 0 40px;
        padding: 24px 20px;
    }

    .metrica-numero {
        font-size: 36px;
    }

    .metrica {
        align-items: center;
        text-align: center;
    }

    .seccion-bienvenida {
        padding: 60px 15px 50px;
    }

    .seccion-bienvenida .contenedor-texto h2 {
        font-size: 28px;
    }

    .galeria-mosaico {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .galeria-mosaico figure {
        height: 220px;
    }

    .banner-texto h3 {
        font-size: 22px;
    }

    .seccion-niveles {
        padding: 60px 15px;
    }

    .seccion-niveles h2 {
        font-size: 28px;
    }

    .rejilla-niveles {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 30px;
    }

    .nivel-tarjeta img {
        max-width: 140px;
    }

    .banner-video {
        padding: 60px 15px;
    }

    .banner-video h3 {
        font-size: 22px;
    }

    .seccion-socios {
        padding: 60px 15px;
    }

    .seccion-socios h4 {
        font-size: 28px;
    }

    .categoria-socios h5 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .contenedor-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .llamada-accion-final {
        padding: 40px 20px;
        margin: 0 15px -40px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .llamada-accion-final h3 {
        font-size: 20px;
    }

    .pie-pagina {
        padding-top: 80px;
    }

    .footer-superior {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    .footer-info img {
        margin: 0 auto 16px;
    }

    .footer-enlaces ul li {
        justify-content: center;
    }

    .footer-inferior {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .enlaces-legales {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .contenedor-cabecera {
        flex-direction: column;
        gap: 12px;
    }

    .hero-contenido h1 {
        font-size: 26px;
    }

    .boton-primario {
        width: 100%;
        text-align: center;
    }

    .contenedor-logos {
        grid-template-columns: repeat(2, 1fr);
    }

    .galeria-mosaico figure {
        height: 180px;
    }

    .banner-imagen {
        min-height: 200px;
    }

    .llamada-accion-final {
        margin: 0 10px -40px;
        padding: 30px 15px;
    }
}