/* ==========================================
   STYLOS EN BRONCE - HOME PREMIUM
========================================== */

:root{

    --primary:#B8873A;
    --primary-dark:#8B6332;

    --heading:#1F1F1F;
    --text:#5F5F5F;

    --white:#FFFFFF;

    --bg:#FAF8F5;
    --bg-alt:#F3EFE8;
    --bg-soft:#F7F5F2;

    --border:#E7E0D7;

    --footer:#1C1C1C;

    --radius:14px;

    --shadow:0 20px 60px rgba(0,0,0,.08);

    --transition:.35s ease;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:Inter,sans-serif;

}

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

.hero{

    position:relative;

    min-height:100vh;

    padding-top:90px;

    background-image:url('../images/hero.jpg');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    align-items:center;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(250,248,245,.92) 0%,
        rgba(250,248,245,.55) 40%,
        rgba(250,248,245,.10) 100%
    );

}

.hero-content{

    position:relative;

    z-index:2;

    width:1320px;

    max-width:100%;

    margin:auto;

    padding:0 40px;

}

.hero-tag{

    display:inline-block;

    letter-spacing:4px;

    text-transform:uppercase;

    color:var(--primary);

    font-size:13px;

    font-weight:600;

    margin-bottom:22px;

}

.hero h1{

    font-family:'Playfair Display',serif;

    font-size:90px;

    line-height:1;

    color:var(--heading);

    max-width:700px;

    margin-bottom:35px;

}

.hero p{

    max-width:560px;

    font-size:21px;

    line-height:1.9;

    color:var(--text);

    margin-bottom:50px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}