/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#2c2c2c;line-height:1.7;background:#fdfbf7}
img{max-width:100%;height:auto;display:block}
a{color:#8b4513;text-decoration:none;transition:color .3s}
a:hover{color:#a0522d}
ul,ol{list-style:none}

/* ===== SALE BANNER ===== */
.sale-banner{background:#1a1a1a;color:#fff;text-align:center;padding:10px 20px;position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;font-size:.95rem}
.sale-banner p{margin:0}
.sale-banner form{display:inline}
.sale-banner button{background:#c0392b;color:#fff;border:none;padding:8px 22px;border-radius:4px;cursor:pointer;font-weight:600;font-size:.9rem;transition:background .3s}
.sale-banner button:hover{background:#e74c3c}

/* ===== HEADER / NAV ===== */
.site-header{background:#fff;border-bottom:1px solid #e8e0d4;padding:0 20px}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:1.5rem;font-weight:700;color:#3e2723}
.logo span{color:#8b4513}
.main-nav ul{display:flex;gap:30px}
.main-nav a{font-size:.95rem;font-weight:500;color:#555;padding:4px 0;border-bottom:2px solid transparent;transition:all .3s}
.main-nav a:hover,.main-nav a.active{color:#8b4513;border-bottom-color:#8b4513}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:#3e2723}

/* ===== HERO ===== */
.hero{position:relative;height:520px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,.6));z-index:1}
.hero-content{position:relative;z-index:2;text-align:center;color:#fff;padding:0 20px;max-width:800px}
.hero-content h1{font-family:Georgia,serif;font-size:2.8rem;margin-bottom:15px;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.hero-content p{font-size:1.15rem;opacity:.92;max-width:600px;margin:0 auto 25px;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.hero-btn{display:inline-block;background:#8b4513;color:#fff;padding:13px 35px;border-radius:5px;font-weight:600;transition:background .3s}
.hero-btn:hover{background:#a0522d;color:#fff}

/* ===== SECTIONS ===== */
.section{padding:70px 20px}
.section-alt{background:#f5efe6}
.container{max-width:1200px;margin:0 auto}
.section-title{font-family:Georgia,serif;font-size:2rem;color:#3e2723;text-align:center;margin-bottom:15px}
.section-subtitle{text-align:center;color:#777;font-size:1.05rem;margin-bottom:45px;max-width:650px;margin-left:auto;margin-right:auto}

/* ===== CARDS GRID ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 3px 15px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.12)}
.card-img{width:100%;height:220px;object-fit:cover}
.card-body{padding:22px}
.card-body h3{font-family:Georgia,serif;font-size:1.2rem;color:#3e2723;margin-bottom:10px}
.card-body p{color:#666;font-size:.92rem;line-height:1.6;margin-bottom:15px}
.card-link{color:#8b4513;font-weight:600;font-size:.9rem}
.card-link:hover{text-decoration:underline}

/* ===== ABOUT / CHI SIAMO ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-img{border-radius:10px;object-fit:cover;width:100%;height:400px;box-shadow:0 5px 20px rgba(0,0,0,.1)}
.about-text h2{font-family:Georgia,serif;font-size:1.8rem;color:#3e2723;margin-bottom:15px}
.about-text p{color:#555;margin-bottom:15px}

/* ===== FEATURES / HIGHLIGHTS ===== */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.feature-icon{font-size:2.5rem;margin-bottom:15px}
.feature h3{font-family:Georgia,serif;font-size:1.15rem;color:#3e2723;margin-bottom:10px}
.feature p{color:#666;font-size:.9rem}

/* ===== BLOG LIST ===== */
.blog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px}
.blog-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 3px 15px rgba(0,0,0,.08);transition:transform .3s}
.blog-card:hover{transform:translateY(-4px)}
.blog-card-img{width:100%;height:220px;object-fit:cover}
.blog-card-body{padding:22px}
.blog-card-body .tag{display:inline-block;background:#f5efe6;color:#8b4513;font-size:.78rem;padding:4px 12px;border-radius:20px;margin-bottom:10px;font-weight:600}
.blog-card-body h3{font-family:Georgia,serif;font-size:1.15rem;color:#3e2723;margin-bottom:8px}
.blog-card-body h3 a{color:inherit}
.blog-card-body h3 a:hover{color:#8b4513}
.blog-card-body p{color:#666;font-size:.9rem;margin-bottom:12px}
.blog-card-body .read-more{color:#8b4513;font-weight:600;font-size:.88rem}

/* ===== ARTICLE ===== */
.article-hero{position:relative;height:380px;overflow:hidden;display:flex;align-items:flex-end}
.article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-hero .hero-overlay{background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}
.article-hero-content{position:relative;z-index:2;padding:30px;max-width:1200px;margin:0 auto;width:100%;color:#fff}
.article-hero-content h1{font-family:Georgia,serif;font-size:2.2rem;margin-bottom:8px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.article-meta{font-size:.88rem;opacity:.85}

.article-content{max-width:800px;margin:0 auto;padding:50px 20px}
.article-content h2{font-family:Georgia,serif;font-size:1.6rem;color:#3e2723;margin:35px 0 15px;padding-top:15px;border-top:1px solid #eee}
.article-content h2:first-of-type{border-top:none;padding-top:0}
.article-content h3{font-family:Georgia,serif;font-size:1.25rem;color:#5d4037;margin:25px 0 12px}
.article-content p{color:#444;margin-bottom:18px;font-size:1rem}
.article-content ul,.article-content ol{margin:0 0 18px 25px;color:#444}
.article-content li{margin-bottom:8px}
.article-content ul{list-style:disc}
.article-content ol{list-style:decimal}
.article-content img{border-radius:8px;margin:25px 0;box-shadow:0 3px 12px rgba(0,0,0,.1)}

/* ===== BREADCRUMBS ===== */
.breadcrumbs{padding:15px 20px;background:#f9f5ee;font-size:.85rem}
.breadcrumbs .container{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.breadcrumbs a{color:#8b4513}
.breadcrumbs span{color:#999}
.breadcrumbs .current{color:#555;font-weight:500}

/* ===== CONTACT ===== */
.contact-info{text-align:center;max-width:600px;margin:0 auto}
.contact-info .email-link{display:inline-flex;align-items:center;gap:10px;font-size:1.2rem;color:#8b4513;font-weight:600;margin-top:20px;padding:15px 30px;background:#f5efe6;border-radius:8px;transition:background .3s}
.contact-info .email-link:hover{background:#ebe2d3}
.contact-info p{color:#555;margin-bottom:12px;font-size:1.05rem}

/* ===== FOOTER ===== */
.site-footer{background:#2c1e13;color:#c4b5a5;padding:50px 20px 0}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer-col h4{color:#fff;font-family:Georgia,serif;font-size:1.05rem;margin-bottom:15px}
.footer-col p{font-size:.88rem;line-height:1.7;color:#a89888}
.footer-col ul li{margin-bottom:8px}
.footer-col a{color:#c4b5a5;font-size:.88rem;transition:color .3s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid #3e2f23;padding:20px 0;margin-top:40px;text-align:center}
.disclaimer{font-size:12px;color:#888;text-align:center;padding:10px 0;border-top:1px solid #3e2f23;margin-top:20px}

/* ===== CTA SECTION ===== */
.cta-section{background:#3e2723;color:#fff;text-align:center;padding:60px 20px}
.cta-section h2{font-family:Georgia,serif;font-size:1.8rem;margin-bottom:12px}
.cta-section p{opacity:.85;margin-bottom:25px;font-size:1.05rem}
.cta-btn{display:inline-block;background:#8b4513;color:#fff;padding:13px 35px;border-radius:5px;font-weight:600;transition:background .3s}
.cta-btn:hover{background:#a0522d}

/* ===== RESPONSIVE ===== */
@media(max-width:992px){
  .cards,.features{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:30px}
  .about-img{height:300px}
  .footer-inner{grid-template-columns:1fr 1fr}
  .hero-content h1{font-size:2.2rem}
}
@media(max-width:768px){
  .header-inner{height:60px}
  .main-nav{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:#fff;flex-direction:column;padding:80px 30px 30px;box-shadow:-5px 0 20px rgba(0,0,0,.1);transition:right .3s;z-index:999}
  .main-nav.open{right:0}
  .main-nav ul{flex-direction:column;gap:20px}
  .nav-toggle{display:block;z-index:1000}
  .nav-close{position:absolute;top:20px;right:20px;background:none;border:none;font-size:1.5rem;cursor:pointer;display:block;color:#3e2723}
  .cards,.features{grid-template-columns:1fr}
  .blog-list{grid-template-columns:1fr}
  .hero{height:400px}
  .hero-content h1{font-size:1.8rem}
  .hero-content p{font-size:1rem}
  .section{padding:50px 20px}
  .section-title{font-size:1.6rem}
  .footer-inner{grid-template-columns:1fr}
  .article-hero{height:280px}
  .article-hero-content h1{font-size:1.6rem}
}
@media(max-width:480px){
  .sale-banner{font-size:.82rem;padding:8px 12px;gap:8px}
  .sale-banner button{padding:6px 16px;font-size:.82rem}
  .hero{height:340px}
  .hero-content h1{font-size:1.5rem}
  .logo{font-size:1.2rem}
}