/* =========================================================
   AFILACIONESGUSTAVO
   INICIO - CSS LIMPIO
   El header vive únicamente en header.css
   ========================================================= */

*{
    box-sizing:border-box;
}

:root{
    --black:#050505;
    --black2:#090909;
    --red:#ef1736;
    --white:#f5f5f5;
    --gray:#999;
    --line:#292929;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    overflow-x:hidden;
    background:var(--black);
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}


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

.home-hero{
    width:100%;
    height:calc(100svh - 96px);
    min-height:calc(100svh - 96px);
    position:relative;
    overflow:hidden;
    background:var(--black);
}

.hero-background{
    position:absolute;
    inset:0;

    /*
       FOTO PRINCIPAL DEL INDEX.
       IMPORTANTE: usar una foto SIN texto incorporado.
    */
    background-image:
        linear-gradient(
            90deg,
            #050505 0%,
            rgba(5,5,5,.99) 18%,
            rgba(5,5,5,.94) 31%,
            rgba(5,5,5,.76) 43%,
            rgba(5,5,5,.42) 55%,
            rgba(5,5,5,.12) 66%,
            rgba(5,5,5,0) 78%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.02) 52%,
            rgba(0,0,0,.30) 100%
        ),
        url("assets/hero-afilado.png");

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

.hero-background::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    /* viñeta muy suave para integrar la foto con el negro */
    background:
        radial-gradient(
            ellipse at 78% 48%,
            rgba(255,255,255,.025) 0%,
            rgba(0,0,0,0) 44%
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,0) 52%,
            rgba(0,0,0,.08) 100%
        );
}

.hero-red-glow{
    width:760px;
    height:760px;
    position:absolute;
    top:50%;
    left:67%;
    transform:translate(-50%,-50%);
    background:
        radial-gradient(
            circle,
            rgba(239,23,54,.055),
            rgba(239,23,54,0) 68%
        );
    pointer-events:none;
}


/* =========================================================
   CONTENEDOR DEL HERO
   ========================================================= */

.hero-inner{
    width:100%;
    height:100%;
    position:relative;
    z-index:5;

    display:flex;
    align-items:center;

    margin:0;
    padding:
        0
        clamp(28px,4vw,78px);
}


/* =========================================================
   TEXTO IZQUIERDO
   Se conservan las medidas que ya estaban aprobadas.
   ========================================================= */

.hero-copy{
    width:min(700px,46vw);
    position:relative;
    z-index:10;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-bottom:25px;
}

.hero-eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    color:#777;
    font-size:9px;
    font-weight:900;
    letter-spacing:2px;
}

.hero-eyebrow span{
    width:34px;
    height:2px;
    display:block;
    background:var(--red);
}

.hero-copy h1{
    margin:0;
    font-size:clamp(54px,5.2vw,90px);
    font-weight:950;
    line-height:.88;
    letter-spacing:-4px;
    text-transform:uppercase;
}

.hero-copy h1 span{
    display:block;
}

.hero-line-white{
    color:#f4f4f4;
}

.hero-line-red{
    margin-top:10px;
    color:var(--red);
}

.hero-brand-name{
    margin-top:26px;
    color:#fff;
    font-size:18px;
    font-weight:900;
    letter-spacing:5px;
}

.hero-description{
    max-width:520px;
    margin:20px 0 0;
    color:#a3a3a3;
    font-size:14px;
    line-height:1.8;
}


/* =========================================================
   BOTONES
   ========================================================= */

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:31px;
}

.hero-button{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:0 23px;
    border-radius:3px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.6px;
    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.hero-button:hover{
    transform:translateY(-2px);
}

.hero-button-primary{
    min-width:175px;
    background:var(--red);
    color:#fff;
    border:1px solid var(--red);
}

.hero-button-primary:hover{
    background:#ff2142;
}

.button-arrow{
    font-size:18px;
}

.hero-button-whatsapp{
    min-width:215px;
    background:rgba(0,0,0,.25);
    color:#eee;
    border:1px solid #343434;
}

.hero-button-whatsapp:hover{
    border-color:#36c95a;
}

.whatsapp-dot{
    width:8px;
    height:8px;
    background:#34c759;
    border-radius:50%;
    box-shadow:0 0 12px rgba(52,199,89,.7);
}


/* =========================================================
   INFORMACIÓN INFERIOR
   ========================================================= */

.hero-info{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:42px;
}

.hero-info > span{
    width:1px;
    height:28px;
    background:#333;
}

.hero-info div{
    min-width:85px;
}

.hero-info strong{
    display:block;
    color:#ddd;
    font-size:9px;
    letter-spacing:1px;
}

.hero-info small{
    display:block;
    margin-top:5px;
    color:#666;
    font-size:9px;
}


/* =========================================================
   HERO VISUAL SIMPLE / PROFESIONAL
   La portada usa UNA sola foto de fondo.
   El mosaico anterior queda eliminado.
   ========================================================= */

.hero-visual{
    display:none;
}



/* =========================================================
   TEXTO DECORATIVO LATERAL
   Se oculta en esta versión para un hero más limpio.
   ========================================================= */

.hero-side-text{
    display:none;
}



/* =========================================================
   PROTECCIÓN VISUAL DE IMÁGENES
   ========================================================= */

img{
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
}


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

@media(max-width:1100px){

    .hero-inner{
        grid-template-columns:50% 50%;
    }

    .hero-copy h1{
        font-size:55px;
    }

}


@media(max-width:850px){

    .hero-background{
        background-image:
            linear-gradient(
                180deg,
                rgba(5,5,5,.10) 0%,
                rgba(5,5,5,.28) 38%,
                rgba(5,5,5,.82) 68%,
                #050505 100%
            ),
            url("assets/hero-afilado.png");

        background-position:68% center;
    }


    .home-hero{
        height:auto;
        min-height:calc(100svh - 88px);
    }

    .hero-inner{
        width:100%;
        min-height:calc(100svh - 88px);
        display:flex;
        align-items:flex-end;
        padding:0 18px;
    }

    .hero-copy{
        width:100%;
        min-height:auto;
        padding:360px 5px 70px;
    }

    .hero-copy h1{
        font-size:clamp(48px,15vw,70px);
        letter-spacing:-3px;
    }

    .hero-brand-name{
        font-size:13px;
        letter-spacing:3px;
    }

    .hero-description{
        max-width:90%;
        font-size:13px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-button{
        width:100%;
        max-width:310px;
    }

    .hero-info{
        gap:12px;
        flex-wrap:wrap;
    }

    .hero-side-text{
        display:none;
    }

}


@media(max-width:520px){

    .hero-copy{
        width:100%;
        min-height:auto;
        padding:300px 5px 60px;
    }

    .hero-copy h1{
        font-size:clamp(44px,14vw,62px);
    }

    .hero-description{
        max-width:100%;
    }

    .hero-info{
        margin-top:32px;
    }

}