/* =========================
   HEADER GLOBAL
   - Transparente al entrar.
   - Cristal grafito al hacer scroll.
   - Submenú integrado en Máquinas de coser.
========================= */

.site-header{
    position:fixed;
    inset:0 0 auto;
    z-index:9999;
    width:100%;
    color:#181b20;
    transition:
        background .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease,
        -webkit-backdrop-filter .35s ease;
}

/* Barra superior */

.topbar{
    min-height:38px;
    padding:8px 6%;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:24px;
    background:rgba(239,242,245,.72);
    border-bottom:1px solid rgba(255,255,255,.36);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    font-size:13px;
    transition:
        min-height .35s ease,
        padding .35s ease,
        opacity .35s ease,
        background .35s ease;
}

.topbar span:nth-child(2){
    text-align:center;
}

.topbar a{
    justify-self:end;
    color:inherit;
    text-decoration:none;
    font-weight:500;
}

/* Navegación */

.nav-wrap{
    width:100%;
    min-height:118px;
    padding:14px 6%;
    display:grid;
    grid-template-columns:minmax(230px,360px) 1fr;
    align-items:center;
    gap:32px;
    background:rgba(255,255,255,.18);
    border-bottom:1px solid rgba(255,255,255,.30);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    transition:
        min-height .35s ease,
        padding .35s ease,
        background .35s ease,
        border-color .35s ease,
        backdrop-filter .35s ease,
        -webkit-backdrop-filter .35s ease;
}

/* Scroll */

.site-header.scrolled{
    box-shadow:0 10px 28px rgba(0,0,0,.10);
}

.site-header.scrolled .topbar{
    min-height:0;
    height:0;
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
    opacity:0;
    border-bottom-color:transparent;
}

.site-header.scrolled .nav-wrap,
.site-header.menu-open .nav-wrap{
    min-height:74px;
    padding-top:8px;
    padding-bottom:8px;
    background:rgba(20,23,28,.26);
    border-bottom-color:rgba(255,255,255,.10);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

/* Logo */

.brand{
    display:flex;
    align-items:center;
    justify-self:start;
    width:min(100%,360px);
    height:92px;
    overflow:hidden;
    text-decoration:none;
    transition:
        width .35s ease,
        height .35s ease;
}

.brand-logo{
    display:block;
    width:100%;
    height:100%;
    max-width:360px;
    object-fit:contain;
    object-position:left center;
    transition:
        max-width .35s ease,
        transform .35s ease,
        filter .25s ease;
}

.site-header.scrolled .brand,
.site-header.menu-open .brand{
    width:min(100%,260px);
    height:58px;
}

.site-header.scrolled .brand-logo,
.site-header.menu-open .brand-logo{
    max-width:260px;
    filter:
        brightness(1.16)
        contrast(1.06)
        drop-shadow(0 2px 7px rgba(0,0,0,.30));
}

.brand-logo:hover{
    transform:scale(1.015);
}

/* Menú principal */

.main-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:28px;
    min-width:0;
}

.main-nav > a,
.nav-main-link{
    position:relative;
    color:#171a1f;
    text-decoration:none;
    text-transform:uppercase;
    font-size:14px;
    font-weight:500;
    letter-spacing:.045em;
    white-space:nowrap;
    transition:color .22s ease;
}

.main-nav > a::after,
.nav-main-link::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:1px;
    background:#8b0f1c;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .22s ease;
}

.main-nav > a:hover,
.nav-main-link:hover{
    color:#8b0f1c;
}

.main-nav > a:hover::after,
.nav-main-link:hover::after{
    transform:scaleX(1);
}

/* Texto sobre cristal oscuro */

.site-header.scrolled .main-nav > a,
.site-header.scrolled .nav-main-link,
.site-header.menu-open .main-nav > a,
.site-header.menu-open .nav-main-link{
    color:rgba(255,255,255,.94);
}

.site-header.scrolled .main-nav > a:hover,
.site-header.scrolled .nav-main-link:hover,
.site-header.menu-open .main-nav > a:hover,
.site-header.menu-open .nav-main-link:hover{
    color:#d7a4aa;
}

.site-header.scrolled .main-nav > a::after,
.site-header.scrolled .nav-main-link::after,
.site-header.menu-open .main-nav > a::after,
.site-header.menu-open .nav-main-link::after{
    background:#8b0f1c;
}

/* =========================
   DESPLEGABLE MÁQUINAS
========================= */

.nav-item{
    position:relative;
    display:flex;
    align-items:center;
}

.nav-item-dropdown{
    position:relative;
}

.nav-dropdown{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    z-index:10001;
    width:280px;
    padding:10px;
    background:rgba(24,27,32,.80);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 20px 45px rgba(0,0,0,.18);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,-8px);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}

.nav-dropdown a{
    display:block;
    padding:10px 12px;
    color:rgba(255,255,255,.90);
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:13px;
    text-decoration:none;
    text-transform:none;
    white-space:normal;
    transition:
        background .2s ease,
        color .2s ease;
}

.nav-dropdown a:last-child{
    border-bottom:0;
}

.nav-dropdown a:hover{
    background:rgba(139,15,28,.16);
    color:#ffffff;
}

.nav-dropdown a::after{
    display:none !important;
}

/* Hamburguesa */

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(31,35,40,.18);
    background:rgba(255,255,255,.44);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    cursor:pointer;
}

.menu-toggle span{
    display:block;
    width:22px;
    height:2px;
    margin:5px auto;
    background:#1f2328;
    transition:transform .25s ease, opacity .25s ease;
}

.site-header.scrolled .menu-toggle span,
.site-header.menu-open .menu-toggle span{
    background:#fff;
}

/* Tablet */

@media(max-width:1100px){
    .nav-wrap{
        grid-template-columns:minmax(210px,290px) 1fr;
        gap:20px;
    }

    .brand{
        width:min(100%,290px);
        height:78px;
    }

    .brand-logo{
        max-width:290px;
    }

    .main-nav{
        gap:17px;
    }

    .main-nav > a,
    .nav-main-link{
        font-size:12px;
    }
}

/* Móvil */

@media(max-width:850px){

    .topbar{
        grid-template-columns:1fr auto;
        padding:8px 18px;
        gap:12px;
        font-size:12px;
    }

    .topbar span:nth-child(2){
        display:none;
    }

    .nav-wrap{
        position:relative;
        min-height:86px;
        padding:10px 18px;
        grid-template-columns:1fr auto;
        gap:12px;
        background:rgba(255,255,255,.34);
    }

    .brand{
        width:min(100%,230px);
        height:64px;
    }

    .brand-logo{
        max-width:230px;
    }

    .site-header.scrolled .brand,
    .site-header.menu-open .brand{
        width:min(100%,190px);
        height:48px;
    }

    .site-header.scrolled .brand-logo,
    .site-header.menu-open .brand-logo{
        max-width:190px;
    }

    .menu-toggle{
        display:block;
        z-index:3;
    }

    .main-nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        z-index:2;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px 18px 18px;
        background:rgba(24,27,32,.88);
        border-top:1px solid rgba(255,255,255,.10);
        border-bottom:1px solid rgba(255,255,255,.10);
        box-shadow:0 18px 40px rgba(0,0,0,.15);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
    }

    .site-header.menu-open .main-nav{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .main-nav > a,
    .nav-main-link{
        display:block;
        width:100%;
        padding:14px 4px;
        border-bottom:1px solid rgba(255,255,255,.10);
        color:#fff;
        font-size:14px;
    }

    .main-nav > a::after,
    .nav-main-link::after{
        display:none;
    }

    .nav-item{
        display:block;
    }

    .nav-dropdown{
        position:static;
        width:100%;
        padding:0 0 4px 14px;
        background:transparent;
        border:0;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;

        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
    }

    .nav-dropdown a{
        padding:9px 8px;
        color:rgba(255,255,255,.78);
        font-size:12px;
        background:transparent;
    }

    .site-header.menu-open .menu-toggle span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .site-header.menu-open .menu-toggle span:nth-child(2){
        opacity:0;
    }

    .site-header.menu-open .menu-toggle span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }
}

/* Móvil pequeño */

@media(max-width:520px){

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

    .topbar a{
        display:none;
    }

    .nav-wrap{
        padding:8px 14px;
    }

    .brand{
        width:min(100%,175px);
        height:52px;
    }

    .brand-logo{
        max-width:175px;
    }

    .site-header.scrolled .brand,
    .site-header.menu-open .brand{
        width:min(100%,150px);
        height:42px;
    }

    .site-header.scrolled .brand-logo,
    .site-header.menu-open .brand-logo{
        max-width:150px;
    }

    .menu-toggle{
        width:40px;
        height:40px;
    }
}


/* =========================================================
   BOTÓN GLOBAL "VOLVER"
   - Se inserta desde header.php en las páginas interiores.
   - Usa el historial real del navegador mediante history.back().
   - No altera la estructura ni el comportamiento del menú.
========================================================= */

.back-button{
    position:fixed;
    top:178px;
    left:24px;
    z-index:9998;

    width:44px;
    height:44px;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.44);
    border-radius:50%;
    background:rgba(31,35,40,.24);

    color:#fff;
    font:inherit;
    font-size:25px;
    font-weight:300;
    line-height:1;

    box-shadow:0 8px 24px rgba(0,0,0,.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    cursor:pointer;
    transition:
        top .35s ease,
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        color .22s ease;
}

/* Cuando el header se compacta, la flecha acompaña al nuevo tamaño. */
.site-header.scrolled .back-button,
.site-header.menu-open .back-button{
    top:88px;
    background:rgba(20,23,28,.42);
}

.back-button:hover{
    transform:translateX(-3px);
    background:rgba(139,15,28,.88);
    border-color:rgba(139,15,28,.92);
    color:#fff;
}

.back-button:focus-visible{
    outline:2px solid #8b0f1c;
    outline-offset:3px;
}

/* Tablet y móvil: se mantiene accesible sin interferir con el menú. */
@media(max-width:850px){
    .back-button{
        top:132px;
        left:14px;
        width:40px;
        height:40px;
        font-size:22px;
    }

    .site-header.scrolled .back-button,
    .site-header.menu-open .back-button{
        top:74px;
    }
}

@media(max-width:520px){
    .back-button{
        top:116px;
        left:12px;
        width:38px;
        height:38px;
        font-size:21px;
    }

    .site-header.scrolled .back-button,
    .site-header.menu-open .back-button{
        top:68px;
    }
}