/* =========================================================
   INDEX - MÁQUINAS DE COSER
========================================================= */

body{
    position:relative;
    background:
        linear-gradient(rgba(235,238,240,.34),rgba(235,238,240,.34)),
        url('../images/home.webp') center center / cover fixed no-repeat;
}

.hero{
    position:relative;
    min-height:620px;
    overflow:hidden;
    background:#eef0f2;
    border-bottom:1px solid rgba(139,15,28,.10);
}

.hero-slider{
    position:absolute;
    inset:0;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1.4s ease;
}

.hero-slide.active{
    opacity:1;
}

.hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.72) brightness(1.02);
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.93) 0%,
            rgba(255,255,255,.80) 34%,
            rgba(255,255,255,.22) 68%,
            rgba(139,15,28,.06) 100%
        );
}

.hero-content{
    position:relative;
    z-index:2;
    width:min(1180px,92%);
    max-width:690px;
    margin-left:calc((100% - min(1180px,92%))/2);
    padding-top:190px;
    padding-bottom:90px;
}

.hero-kicker{
    margin-bottom:14px;
    color:#8b0f1c;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.24em;
}

.hero h1{
    font-size:clamp(42px,5.8vw,74px);
    line-height:1.03;
    font-weight:400;
    letter-spacing:.01em;
    text-transform:uppercase;
}

.hero h1 span{
    display:block;
    margin-top:8px;
    color:#7d848c;
    font-size:.52em;
    line-height:1.2;
    letter-spacing:.04em;
}

.hero p{
    max-width:600px;
    margin:24px 0 30px;
    color:#23272c;
    font-size:18px;
}

.hero-actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

/* Beneficios */

.benefits{
    position:relative;
    z-index:3;
    background:rgba(255,255,255,.20);
    border-bottom:1px solid rgba(139,15,28,.08);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.benefits-grid{
    width:min(1180px,92%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.benefit{
    min-height:132px;
    padding:24px 20px;
    display:flex;
    gap:14px;
    align-items:flex-start;
    border-right:1px solid rgba(139,15,28,.09);
    background:rgba(255,255,255,.10);
    transition:
        background .25s ease,
        transform .25s ease;
}

.benefit:hover{
    background:rgba(255,255,255,.24);
    transform:translateY(-2px);
}

.benefit:last-child{
    border-right:0;
}

.benefit-icon{
    color:#8b0f1c;
    font-size:28px;
    line-height:1;
}

.benefit h3{
    margin-bottom:5px;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.benefit p{
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

/* Hub principal: navegación rápida */

.machine-hub{
    position:relative;
    padding:64px 0 72px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.machine-hub::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(135deg,rgba(255,255,255,.05),rgba(139,15,28,.025));
}

.machine-hub .container{
    position:relative;
    z-index:1;
}

.machine-title{
    margin-bottom:30px;
}

.machine-title span{
    color:#8b0f1c;
}

.machine-title p{
    max-width:620px;
    margin:10px auto 0;
    color:var(--muted);
    font-size:15px;
}

.machine-nav-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.machine-nav-card{
    position:relative;
    min-height:190px;
    padding:27px 24px 24px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.46);
    background:rgba(255,255,255,.20);
    box-shadow:
        0 18px 45px rgba(25,28,32,.07),
        inset 0 1px 0 rgba(255,255,255,.80);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.machine-nav-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,transparent,#8b0f1c,transparent);
    opacity:.55;
    transition:opacity .25s ease,height .25s ease;
}

.machine-nav-card:hover{
    background:rgba(255,255,255,.34);
    border-color:rgba(139,15,28,.24);
    box-shadow:
        0 20px 46px rgba(25,28,32,.10),
        0 8px 26px rgba(139,15,28,.045);
    transform:translateY(-4px);
}

.machine-nav-card:hover::before{
    height:3px;
    opacity:.9;
}

.machine-nav-card strong{
    margin-bottom:10px;
    font-size:17px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.045em;
}

.machine-nav-card span{
    color:var(--muted);
    font-size:14px;
    line-height:1.5;
}

.machine-nav-card small{
    margin-top:auto;
    padding-top:20px;
    color:#8b0f1c;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.machine-nav-card--service{
    background:
        linear-gradient(145deg,rgba(255,255,255,.21),rgba(139,15,28,.035));
}


/* CTA de contacto dentro del contenido */

.contact-cta{
    margin-top:28px;
    padding:10px 0 0;
    text-align:center;
    background:transparent;
    border:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.contact-cta-inner{
    max-width:760px;
}

.contact-cta h2{
    margin:0;
    color:#8b0f1c;
    font-size:clamp(26px,3vw,36px);
    font-weight:500;
    line-height:1.2;
}

.contact-cta p{
    max-width:580px;
    margin:14px auto 22px;
    color:#2f3439;
    font-size:15px;
    line-height:1.6;
}

.contact-cta-actions{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.contact-cta .btn{
    min-width:145px;
}

.contact-cta-primary{
    background:#8b0f1c;
    border-color:#8b0f1c;
    color:#fff;
}

.contact-cta-primary:hover{
    background:#6f0b16;
    border-color:#6f0b16;
}

.contact-cta-secondary{
    border-color:#8b0f1c;
    color:#8b0f1c;
    background:rgba(255,255,255,.06);
}

.contact-cta-secondary:hover{
    background:#8b0f1c;
    border-color:#8b0f1c;
    color:#fff;
}

@media(max-width:620px){
    .contact-cta{
    margin-top:28px;
    padding:10px 0 0;
    text-align:center;
    background:transparent;
    border:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

    .contact-cta p{
        font-size:14px;
    }
}

/* Responsive index */

@media(max-width:1000px){

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

    .hero-content{
        padding-top:165px;
    }
}

@media(max-width:900px){

    .hero{
        min-height:560px;
    }

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

    .benefit{
        border-bottom:1px solid rgba(139,15,28,.08);
    }
}

@media(max-width:700px){

    .hero::after{
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.95) 0%,
                rgba(255,255,255,.88) 62%,
                rgba(255,255,255,.44) 100%
            );
    }

    .hero-content{
        width:92%;
        max-width:none;
        margin:0 auto;
        padding-top:145px;
        padding-bottom:58px;
    }

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

    .hero p{
        font-size:16px;
    }
}

@media(max-width:620px){

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

    .benefit{
        min-height:auto;
        border-right:0;
    }

    .machine-hub{
        padding:48px 0 56px;
    }

    .machine-nav-grid{
        grid-template-columns:1fr;
    }

    .machine-nav-card{
        min-height:160px;
    }
}

/* =========================================================
   HOME DE ENTRADA
   Se conserva para no romper home.php.
========================================================= */

.intro{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#07090c;
}

.intro-background{
    position:absolute;
    inset:0;
    background:
        url('../images/home.webp')
        center center / cover no-repeat;
    transform:scale(1.03);
    animation:introZoom 14s ease-in-out infinite alternate;
}

.intro-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(4,6,10,.72),
            rgba(12,15,20,.50),
            rgba(4,6,10,.72)
        );
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

.intro-content{
    position:relative;
    z-index:2;
    width:min(92%,760px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:34px;
    padding:48px;
    text-align:center;
    background:rgba(8,10,14,.18);
    border:1px solid rgba(255,255,255,.13);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 28px 90px rgba(0,0,0,.30);
    animation:introAppear .9s ease both;
}

.intro-logo{
    display:block;
    width:min(100%,620px);
    max-height:430px;
    object-fit:contain;
    filter:
        drop-shadow(0 12px 32px rgba(0,0,0,.45))
        brightness(1.08);
}

.intro-button{
    min-width:170px;
    min-height:48px;
    padding:14px 30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.70);
    background:rgba(255,255,255,.08);
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.20em;
    font-size:13px;
    font-weight:600;
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.intro-button:hover{
    background:#fff;
    color:#07090c;
    border-color:#fff;
    transform:translateY(-2px);
}

@keyframes introAppear{
    from{
        opacity:0;
        transform:translateY(24px);
    }

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

@keyframes introZoom{
    from{
        transform:scale(1.03);
    }

    to{
        transform:scale(1.10);
    }
}

@media(max-width:700px){

    .intro-content{
        width:calc(100% - 32px);
        gap:26px;
        padding:34px 22px;
    }

    .intro-logo{
        width:100%;
        max-height:320px;
    }

    .intro-button{
        min-width:150px;
        min-height:46px;
    }
}

@media(max-width:430px){

    .intro-content{
        padding:28px 18px;
    }

    .intro-logo{
        max-height:260px;
    }
}

@media(prefers-reduced-motion:reduce){

    .intro-background,
    .intro-content{
        animation:none;
    }
}