/* =====================================================
   CLUB DE SOCIOS BRUNNEMANN
===================================================== */

:root{

    --gold:#c89c4c;
    --gold-hover:#b98832;
    --black:#050505;
    --paper:#f5efe4;
    --white:#ffffff;

}

/* =====================================================
   RESET
===================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--black);
    color:var(--white);
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

.container{

    width:92%;
    max-width:1400px;
    margin:auto;

}

/* =====================================================
   HEADER
===================================================== */

.header{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    padding:25px 0;

}

.header-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo img{

    height:95px;
    width:auto;

}

.header-actions{

    display:flex;

    align-items:center;

    gap:18px;

}

.social-icon{

    width:42px;
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}

.social-icon:hover{

    transform:translateY(-3px);

}

.social-icon img{

    width:24px;
    height:24px;

}

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

.club-hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.75)
    ),
    url('assets/vaso-personalizado.webp');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    padding:180px 0 120px;

    position:relative;

}

.club-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.15) 100%
    );

}

.club-hero .container{

    position:relative;

    z-index:2;

}

.club-hero-content{

    max-width:650px;

}

.club-tag{

    display:inline-block;

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:20px;

}

.club-hero-content h1{

    font-size:5.5rem;

    font-weight:800;

    line-height:.95;

    color:#fff;

    margin-bottom:30px;

}

.club-hero-content p{

    color:rgba(255,255,255,.85);

    font-size:19px;

    line-height:1.8;

    max-width:560px;

    margin-bottom:35px;

}

.club-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border:1px solid var(--gold);

    color:var(--gold);

    font-weight:700;

    letter-spacing:1px;

    transition:.3s;

}

.club-btn:hover{

    background:var(--gold);

    color:var(--black);

}

/* =====================================================
   ETIQUETAS
===================================================== */

.club-section-tag{

    display:inline-block;

    color:var(--gold);

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:20px;

}

.club-section-tag.center{

    display:block;

    text-align:center;

}
/* =====================================================
   EXPERIENCIA
===================================================== */

.club-experience{

    background:
    url('assets/paper-texture.webp');

    background-size:cover;

    padding:110px 0;

}

.club-experience-grid{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    gap:80px;

    align-items:center;

}

.club-experience-content{

    max-width:560px;

}

.club-experience h2{

    color:#111;

    font-size:3rem;

    font-weight:700;

    line-height:1.15;

    margin-bottom:25px;

}

.club-experience p{

    color:#333;

    font-size:17px;

    line-height:1.9;

    margin-bottom:18px;

}

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

.club-gallery{

    display:grid;

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

    gap:18px;

}

.club-gallery img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border:1px solid rgba(200,156,76,.15);

    transition:.35s;

    background:#fff;

}

.club-gallery img:hover{

    transform:scale(1.03);

}

.club-gallery img:nth-child(1){

    border-top-left-radius:12px;

}

.club-gallery img:nth-child(2){

    border-top-right-radius:12px;

}

.club-gallery img:nth-child(3){

    border-bottom-left-radius:12px;

}

.club-gallery img:nth-child(4){

    border-bottom-right-radius:12px;

}

/* =====================================================
   SEPARADOR VISUAL
===================================================== */

.club-experience::after{

    content:"";

    display:block;

    width:120px;

    height:2px;

    background:var(--gold);

    margin:80px auto 0;

    opacity:.5;

}
/* =====================================================
   BENEFICIOS
===================================================== */

.club-benefits{

    background:#050505;

    padding:110px 0;

}

.section-title{

    text-align:center;

    font-size:3.2rem;

    font-weight:700;

    color:#fff;

    margin-bottom:70px;

}

.benefits-grid{

    display:grid;

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

    gap:30px;

}

.benefit-card{

    background:
    rgba(255,255,255,.03);

    border:
    1px solid rgba(200,156,76,.20);

    padding:45px 35px;

    text-align:center;

    transition:.35s;

    position:relative;

}

.benefit-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

}

.benefit-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    border:
    1px solid rgba(200,156,76,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--gold);

    font-size:36px;

}

.benefit-card h3{

    color:var(--gold);

    font-size:28px;

    font-weight:700;

    margin-bottom:18px;

    line-height:1.2;

}

.benefit-price{

    color:var(--gold);

    font-size:48px;

    font-weight:800;

    margin-bottom:18px;

    line-height:1;

}

.benefit-card p{

    color:rgba(255,255,255,.80);

    font-size:16px;

    line-height:1.8;

}

/* =====================================================
   DESTACADO CENTRAL
===================================================== */

.benefit-card:nth-child(2){

    border-color:rgba(200,156,76,.35);

    background:
    rgba(255,255,255,.04);

}

.benefit-card:nth-child(2) .benefit-icon{

    border-color:var(--gold);

}

/* =====================================================
   SEPARADOR
===================================================== */

.club-benefits::after{

    content:"";

    display:block;

    width:120px;

    height:2px;

    background:var(--gold);

    margin:80px auto 0;

    opacity:.5;

}
/* =====================================================
   CTA FINAL
===================================================== */

.club-final{

    background:
    linear-gradient(
    rgba(0,0,0,.70),
    rgba(0,0,0,.75)
    ),
    url('assets/hero-desktop.webp');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    text-align:center;

    padding:140px 0;

}

.club-final h2{

    max-width:900px;

    margin:0 auto 40px;

    font-size:4.5rem;

    font-weight:800;

    line-height:1.15;

    color:#fff;

}

.club-final .club-btn{

    min-width:260px;

}

/* =====================================================
   FOOTER
===================================================== */

.footer-carta{

    width:100%;

    background:#050505;

    border-top:
    1px solid rgba(200,156,76,.15);

    padding:18px 20px;

}

.footer-content{

    text-align:center;

}

.footer-content h3{

    color:var(--gold);

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:4px;

}

.footer-content p{

    color:rgba(255,255,255,.75);

    font-size:12px;

    margin:0;

}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:992px){

    .club-hero{

        min-height:auto;

        padding:140px 0 90px;

        text-align:center;

    }

    .club-hero-content{

        margin:0 auto;

    }

    .club-hero-content h1{

        font-size:4rem;

    }

    .club-experience-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .club-experience-content{

        max-width:none;

        text-align:center;

    }

    .benefits-grid{

        grid-template-columns:1fr;

    }

    .club-final h2{

        font-size:3rem;

    }

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:576px){

    .header{

        padding:18px 0;

    }

    .header-container{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        gap:0;

    }

    .logo img{

        height:60px;

    }

    .header-actions{

        gap:12px;

    }

    .social-icon{

        width:36px;
        height:36px;

    }

    .social-icon img{

        width:22px;
        height:22px;

    }

    .club-hero{

        padding:110px 0 70px;

        background-position:65% center;

        text-align:center;

        min-height:90vh;

    }

    .club-hero::before{

        background:
        linear-gradient(
        180deg,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.45) 50%,
        rgba(0,0,0,.65) 100%
        );

    }

    .club-tag{

        font-size:11px;

        letter-spacing:3px;

    }

    .club-hero-content{

        max-width:100%;

    }

    .club-hero-content h1{

        font-size:2.4rem;

        line-height:1;

        margin-bottom:20px;

    }

    .club-hero-content p{

        font-size:16px;

        line-height:1.8;

        margin-bottom:30px;

    }

    .club-btn{

        width:100%;

    }

    .club-experience{

        padding:80px 0;

    }

    .club-experience h2{

        font-size:2rem;

        text-align:center;

    }

    .club-experience p{

        text-align:center;

        font-size:16px;

    }

    .club-gallery{

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

        gap:12px;

    }

    .section-title{

        font-size:2.2rem;

    }

    .benefit-card{

        padding:35px 25px;

    }

    .benefit-icon{

        width:75px;
        height:75px;

        font-size:30px;

    }

    .benefit-card h3{

        font-size:24px;

    }

    .benefit-price{

        font-size:34px;

    }

    .club-extra-card{

        padding:35px 25px;

    }

    .club-final{

        padding:90px 0;

    }

    .club-final h2{

        font-size:2.1rem;

        line-height:1.2;

    }

    .footer-content h3{

        font-size:12px;

    }

    .footer-content p{

        font-size:11px;

    }

}
/* =====================================================
   TABLET PEQUEÑA
===================================================== */

@media(max-width:768px){

    .club-hero{

        padding:120px 0 80px;

        text-align:center;

    }

    .club-hero-content{

        max-width:100%;

        margin:auto;

    }

    .club-hero-content h1{

        font-size:3rem;

        line-height:1;

    }

    .club-hero-content p{

        font-size:17px;

        max-width:650px;

        margin:0 auto 30px;

    }

    .club-hero-image{

        margin-top:20px;

    }

    .club-hero-image img{

        max-width:500px;

        margin:auto;

    }

    .club-experience{

        padding:90px 0;

    }

    .club-experience-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .club-experience-content{

        text-align:center;

        max-width:100%;

    }

    .club-experience h2{

        font-size:2.4rem;

    }

    .club-gallery{

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

        gap:15px;

    }

    .section-title{

        font-size:2.7rem;

    }

    .benefits-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .benefit-card{

        max-width:650px;

        margin:auto;

    }

    .club-final{

        padding:110px 0;

    }

    .club-final h2{

        font-size:2.8rem;

    }

}