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

.hero{
    padding:25px 0 45px;
}

.hero-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:25px;
    margin-bottom:25px;
}


/*==================================================
SLIDER
==================================================*/

.hero-slider{
    position:relative;
    overflow:hidden;

    height:430px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #0D47A1 0%,
        #1F5EFF 55%,
        #4B7BFF 100%
    );

    box-shadow:0 25px 60px rgba(31,94,255,.22);
}

.hero-slider::before{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    top:-180px;
    left:-120px;

    border-radius:50%;

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

    filter:blur(8px);

}

.hero-slider::after{

    content:"";

    position:absolute;

    width:240px;
    height:240px;

    bottom:-120px;
    right:-80px;

    border-radius:50%;

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

}


/*==================================================
CONTENIDO
==================================================*/

.hero-slide{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:40px 45px;

}

.hero-content{

    width:42%;

    position:relative;

    z-index:5;

    margin-top:-10px;

}

.hero-badge{

    display:inline-flex;

    padding:8px 18px;

    border-radius:40px;

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

    color:#FFF;

    font-size:12px;

    font-weight:600;

    letter-spacing:.8px;

    margin-bottom:18px;

    backdrop-filter:blur(8px);

}

.hero-content h1{

    font-size:44px;

    line-height:1.05;

    font-weight:700;

    color:#FFF;

    margin-bottom:18px;

}

.hero-content p{

    font-size:16px;

    line-height:1.7;

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

    margin-bottom:28px;

}


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

.hero-buttons{

    display:flex;

    gap:14px;

}

.btn-primary{

    background:#FFF;

    color:#1F5EFF;

    border-radius:12px;

    font-weight:600;

    transition:.35s;

    padding:15px 34px;

    min-width:150px;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.btn-outline{

    border:2px solid rgba(255,255,255,.35);

    color:#FFF;

    padding:14px 28px;

    border-radius:12px;

    transition:.35s;

}

.btn-outline:hover{

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

}


/*==================================================
IMAGEN
==================================================*/

.hero-image{

    width:58%;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    position:relative;

}

.hero-image::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:80px;

    top:80px;

    border-radius:50%;

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

    filter:blur(45px);

}

.hero-image img{

    width:108%;

    max-width:500px;

    position:relative;

    z-index:5;

    margin-bottom:-12px;

    filter:drop-shadow(0 25px 35px rgba(0,0,0,.30));

    transition:.45s;

}

.hero-slider:hover .hero-image img{

    transform:translateY(-6px);

}


/*==================================================
CARDS DERECHA
==================================================*/

.hero-side{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.hero-card{

    position:relative;

    overflow:hidden;

    display:block;

    border-radius:20px;

    text-decoration:none;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    transition:.35s;

    background:#111;

}

.hero-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.hero-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.72),
        rgba(0,0,0,.20),
        transparent
    );

    z-index:1;

}

.hero-card div{

    position:absolute;

    left:22px;

    right:22px;

    bottom:20px;

    z-index:2;

    color:#FFF;

}

.hero-card small{

    display:block;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:6px;

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

}

.hero-card h3{

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

}

.hero-arrow{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    font-weight:600;

}

.hero-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.hero-card:hover img{

    transform:scale(1.07);

}

.hero-card:hover .hero-arrow i{

    transform:translateX(5px);

}

.hero-card-small{

    height:140px;

}

.hero-card-large{

    height:145px;

}


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

.hero-benefits{

    display:grid;

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

    gap:18px;

}

.benefit{

    background:#FFF;

    border-radius:18px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:14px;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

    transition:.3s;

}

.benefit:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(0,0,0,.10);

}

.benefit i{

    color:var(--primary);

    font-size:22px;

}

.benefit strong{

    display:block;

    font-size:14px;

    color:var(--text);

}

.benefit span{

    font-size:13px;

    color:var(--text-light);

}


/* ==================================================
HERO MOBILE FIX
================================================== */

@media (max-width:767px){

    /* contenedor principal del hero */
    .hero-grid{
        display:grid;
        grid-template-columns:1fr !important;
        gap:16px;
    }

    /* banner principal */
    .hero-main{
        min-height:320px;
        border-radius:24px;
        padding:22px 20px;
        overflow:hidden;
    }

    .hero-main h1{
        font-size:2rem;
        line-height:1.05;
        margin-bottom:12px;
    }

    .hero-main p{
        font-size:1rem;
        max-width:100%;
    }

    /* imagen del producto dentro del hero */
    .hero-main img{
        width:140px;
        max-width:42%;
        height:auto;
        right:16px;
        bottom:12px;
    }

    /* columna lateral de promos */
    .hero-side{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
    }

    .hero-mini{
        min-height:132px;
        border-radius:20px;
        padding:16px 14px;
        overflow:hidden;
    }

    .hero-mini h3{
        font-size:1rem;
        line-height:1.15;
        margin-bottom:8px;
    }

    .hero-mini a{
        font-size:.9rem;
    }

    /* evita que las tarjetas se hagan ultra angostas */
    .hero-mini img{
        object-fit:cover;
    }

    /* barra de búsqueda */
    .search-wrapper{
        width:100%;
        margin-top:14px;
    }

    .search-wrapper input{
        font-size:16px; /* evita zoom en iPhone */
    }

    /* iconos superiores */
    .header-actions{
        gap:14px;
    }

}

/* ==================================================
HERO MOBILE FINAL - TECNOLOGÍA ISRAEL
Pegar al FINAL de assets/css/components/hero.css
================================================== */

@media (max-width:767px){

    /* HERO PRINCIPAL */

    .hero-slider{
        width:100%;
    }

    .hero-slide{
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-start !important;

        min-height:300px !important;

        padding:22px 22px 26px !important;

        border-radius:26px !important;

        gap:14px !important;

        overflow:hidden !important;

        position:relative !important;
    }

    .hero-content{
        width:100% !important;
        max-width:100% !important;
    }

    .hero-content h1{
        font-size:2.2rem !important;
        line-height:0.92 !important;
        margin-bottom:12px !important;
        max-width:62% !important;
    }

    .hero-content p{
        font-size:1rem !important;
        line-height:1.45 !important;
        max-width:58% !important;
        margin:0 !important;
    }

    /* ocultar botones en móvil */

    .hero-buttons{
        display:none !important;
    }

    /* IMAGEN DEL HERO */

    .hero-image{
        position:absolute !important;
        right:14px !important;
        bottom:16px !important;

        width:42% !important;
        max-width:150px !important;
    }

    .hero-image img{
        width:100% !important;
        height:auto !important;
        display:block !important;
    }

    /* TARJETAS LATERALES:
       UNA DEBAJO DE OTRA */

    .hero-side{
        display:flex !important;
        flex-direction:column !important;

        gap:14px !important;

        margin-top:16px !important;
    }

    .hero-card{
        width:100% !important;

        min-height:132px !important;

        border-radius:22px !important;

        padding:18px !important;

        overflow:hidden !important;
    }

    .hero-card h3{
        font-size:1.08rem !important;
        line-height:1.2 !important;
        margin-bottom:8px !important;
    }

    .hero-card small{
        font-size:.8rem !important;
    }

    .hero-arrow{
        font-size:.95rem !important;
    }

    /* BENEFICIOS:
       2 COLUMNAS + ÚLTIMO CENTRADO */

    .hero-benefits{
        display:grid !important;

        grid-template-columns:1fr 1fr !important;

        gap:14px !important;

        margin-top:20px !important;
    }

    .benefit{
        width:100% !important;

        min-height:120px !important;

        padding:18px 14px !important;

        border-radius:20px !important;

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

        text-align:center !important;
    }

    .benefit i{
        font-size:1.5rem !important;
        margin:0 0 10px 0 !important;
    }

    .benefit div{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:4px !important;
    }

    .benefit strong{
        font-size:.96rem !important;
        line-height:1.2 !important;
    }

    .benefit span{
        font-size:.86rem !important;
        line-height:1.35 !important;
    }

    /* última tarjeta centrada */

    .hero-benefits .benefit:last-child{
        grid-column:1 / -1 !important;

        max-width:260px !important;

        justify-self:center !important;
    }

}