:root{
    --bg:#eee9df;
    --paper:#f8f4ec;
    --card:#f9f5ed;
    --text:#14110f;
    --muted:#77706a;
    --line:#8f887f;
    --soft-line:#d7d0c6;
    --accent:#221b17;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:"Montserrat", Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
}

img{
    max-width:100%;
    display:block;
}

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

h1,h2,h3,p{
    margin:0;
}

h1,h2,
.category-tile span,
.footer-title{
    font-family:"Cormorant Garamond", Georgia, serif;
    font-weight:500;
    letter-spacing:-.03em;
}

.hero{
    min-height:86vh;
    padding:26px clamp(20px, 6vw, 86px) 74px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
}

.nav{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
    max-width:1320px;
    margin:0 auto;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
}

.brand{
    width:120px;
}

.brand img{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:50%;
    border:1px solid var(--line);
    filter:none;
}

.nav-links{
    display:flex;
    justify-content:center;
    gap:44px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text);
}

.nav-links a:hover{
    text-decoration:underline;
    text-underline-offset:6px;
}

.hero-content{
    max-width:1320px;
    margin:72px auto 0;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:70px;
}

.eyebrow{
    display:inline-flex;
    margin-bottom:18px;
    color:var(--text);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

h1{
    font-size:clamp(4rem, 9vw, 8.6rem);
    line-height:.88;
    max-width:850px;
}

h2{
    font-size:clamp(3.2rem, 6vw, 5.4rem);
    line-height:.9;
}

.hero-text p,
.catalog-header p{
    max-width:560px;
    margin-top:26px;
    color:var(--muted);
    font-size:.92rem;
    line-height:1.9;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    margin-top:40px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:0 28px;
    border:1px solid var(--line);
    border-radius:0;
    cursor:pointer;
    background:transparent;
    color:var(--text);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:background .2s ease, color .2s ease;
}

.btn:hover{
    background:var(--text);
    color:var(--paper);
}

.btn-primary{
    background:var(--text);
    color:var(--paper);
    border-color:var(--text);
    box-shadow:none;
}

.btn-secondary{
    background:transparent;
    color:var(--text);
}

.hero-card{
    border-radius:0;
    padding:0;
    background:transparent;
    box-shadow:none;
    border:1px solid var(--line);
}

.hero-card img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:0;
    filter:saturate(.92) contrast(.96);
}

.section{
    max-width:1320px;
    margin:0 auto;
    padding:86px clamp(20px, 6vw, 86px);
}

.intro{
    text-align:left;
    border-bottom:1px solid var(--line);
}

.category-grid{
    display:flex;
    flex-wrap:wrap;
    gap:34px;
    margin-top:34px;
}

.category-tile,
.filter-btn{
    font:inherit;
    border:0;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
}

.category-tile{
    text-align:left;
    min-height:auto;
    padding:0;
    border-radius:0;
    box-shadow:none;
}

.category-tile span{
    display:block;
    font-family:"Montserrat", Arial, sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.category-tile small{
    display:none;
}

.category-tile.active,
.filter-btn.active{
    background:transparent;
    color:var(--text);
    border:0;
    text-decoration:underline;
    text-underline-offset:7px;
}

.catalog-header{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:34px;
    margin-bottom:26px;
}

.search-box{
    width:min(100%,390px);
}

#busqueda{
    width:100%;
    height:50px;
    border:0;
    border-bottom:1px solid var(--line);
    border-radius:0;
    padding:0;
    background:transparent;
    outline:none;
    font:inherit;
    font-size:.82rem;
    color:var(--text);
}

#busqueda::placeholder{
    color:var(--muted);
}

#busqueda:focus{
    border-color:var(--text);
    box-shadow:none;
}

.filters{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    margin:20px 0 54px;
}

.filter-btn{
    padding:0;
    border-radius:0;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px 24px;
    align-items:start;
}

.card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100%;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:0;
    overflow:hidden;
    box-shadow:none;
    transition:transform .2s ease, background .2s ease;
}

.card:hover{
    transform:translateY(-4px);
    background:#fbf8f1;
    box-shadow:none;
}

.card-img{
    height:370px;
    background:transparent;
    padding:42px 38px 22px;
}

.card-img img{
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:multiply;
}

.info{
    display:flex;
    flex-direction:column;
    gap:18px;
    flex:1;
    padding:8px 30px 0;
    text-align:center;
}

.info h3{
    font-size:.78rem;
    line-height:1.45;
    min-height:45px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.meta{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:auto;
}

.precio{
    width:100%;
    color:var(--text);
    font-size:1.25rem;
    font-weight:800;
    letter-spacing:-.04em;
}

.badge,
.badge-arabe,
.badge-splash{
    display:none;
}

.whatsapp-card{
    margin:22px -30px 0;
    min-height:58px;
    border-radius:0;
    border-top:1px solid var(--line);
    background:transparent;
    color:var(--text);
    font-size:.86rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    display:grid;
    grid-template-columns:1fr 86px;
    align-items:center;
    justify-content:center;
}

.whatsapp-card::after{
    content:"→";
    height:100%;
    border-left:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    font-weight:400;
}

.whatsapp-card:hover{
    background:var(--text);
    color:var(--paper);
}

.load-more-wrap{
    display:flex;
    justify-content:center;
    margin-top:58px;
}

.footer{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:stretch;
    gap:0;
    padding:0 clamp(20px, 6vw, 86px) 58px;
    background:var(--bg);
    color:var(--text);
}

.footer > div{
    padding:52px 34px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.footer > div + div{
    border-left:1px solid var(--line);
}

.footer-title{
    font-size:2.2rem;
    text-align:center;
}

.footer-text{
    margin-top:12px;
    color:var(--muted);
    font-size:.82rem;
    text-align:center;
}

.footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-content:start;
    gap:14px 28px;
}

.footer a{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    min-height:auto;
    padding:0;
    border:0;
    border-radius:0;
    color:var(--text);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.footer a:hover{
    background:transparent;
    text-decoration:underline;
    text-underline-offset:6px;
}

.empty{
    grid-column:1/-1;
    padding:50px;
    text-align:center;
    border:1px dashed var(--line);
    border-radius:0;
    color:var(--muted);
    background:transparent;
}

.horario-footer{
    text-align:left;
    line-height:1.8;
}

.horario-footer p{
    margin:2px 0;
    font-size:.82rem;
}

@media (max-width:980px){
    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hero-content{
        grid-template-columns:1fr;
    }

    .hero-card{
        max-width:520px;
    }
}

@media (max-width:780px){
    .hero{
        min-height:auto;
        padding-bottom:52px;
    }

    .nav{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .nav-links{
        display:none;
    }

    .hero-content,
    .catalog-header{
        grid-template-columns:1fr;
        display:grid;
    }

    .hero-content{
        margin-top:48px;
        gap:34px;
    }

    h1{
        font-size:clamp(3.4rem, 18vw, 5.5rem);
    }

    h2{
        font-size:clamp(3rem, 15vw, 4.6rem);
    }

    .category-grid{
        gap:20px 26px;
    }

    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }

    .card-img{
        height:260px;
        padding:28px 20px 12px;
    }

    .info{
        padding:8px 16px 0;
    }

    .info h3{
        font-size:.68rem;
        min-height:58px;
    }

    .precio{
        font-size:1.05rem;
    }

    .whatsapp-card{
        margin:18px -16px 0;
        min-height:50px;
        grid-template-columns:1fr 54px;
        font-size:.68rem;
    }

    .footer{
        grid-template-columns:1fr;
        padding-bottom:34px;
    }

    .footer > div + div{
        border-left:0;
        border-top:0;
    }

    .footer-links{
        grid-template-columns:1fr;
        justify-content:start;
    }

    .horario-footer{
        text-align:center;
    }
}

@media (max-width:470px){
    .section{
        padding:64px 18px;
    }

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

    .card-img{
        height:340px;
    }

    .hero-actions .btn{
        width:100%;
    }
}