:root{--accent:#00427A;--muted:#441313;--card-radius:14px}
*{box-sizing:border-box}body{font-family:Inter, system-ui, Arial, Helvetica, sans-serif;margin:0;color:#441313;background:#fff}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.site-header{position:sticky;top:0;background:white;border-bottom:1px solid #eee;z-index:60}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{margin-left:28px; height:36px}
.main-nav a{color:#441313;text-decoration:none;margin-left:18px;font-weight:600;font-size:14px; ; font-family: 'Playfair Display', serif; font-style: italic;}
.main-nav a:hover{color:var(--accent)}

.hero{margin-top:0}
.carousel{height:360px;position:relative;overflow:hidden;background:#eee}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s ease}
.slide.active{opacity:1}
.carousel-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:8px}
.carousel-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.7);box-shadow:0 1px 2px rgba(0,0,0,.2);cursor:pointer}
.carousel-dots button.active{background:var(--accent)}

.explore { padding: 0; text-align: center; background: #fafafa; }
.explore-img { width: calc(100% - 40px); height: auto; display: block; margin: 0 20px; }
.explore .container { padding: 20px 0; }
.explore-link { color: #441313; text-decoration: none; font-weight: bold; position: relative; font-family: 'Playfair Display', serif; font-style: italic; }
.explore-link::after { content: " →"; }

.section-title{text-align:center;margin:28px 0 18px;font-weight:bold;font-family:'Playfair Display',serif;font-style:italic}
.featured{padding:36px 0 60px;background:#fafafa}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:0 auto;padding:0 18px}
.card{background:white;border-radius:var(--card-radius);overflow:hidden;box-shadow:0 6px 18px rgba(20,20,20,.06);text-align:left;position:relative}
.card img{width:100%;height:auto;object-fit:contain;display:block}
.card h3{margin:12px 14px 6px;font-size:18px}
.card .tagline{margin:0 14px 0;color:var(--muted);font-size:14px}
.card .price{margin:0 14px 16px;color:#888;font-size:14px}
.badge{position:absolute;top:10px;left:10px;background:#ff4757;color:white;padding:4px 8px;font-size:12px;font-weight:bold;border-radius:20px;z-index:1;animation:glow 0.3s ease-in-out infinite alternate}

.products .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.products .card { width: 100%; display: flex; flex-direction: column; min-height: 400px; }
.products .card img { width: 100%; height: auto; object-fit: contain; display: block; }

.about h2, .contact h2, .goal-vision h2 { font-family: 'Playfair Display', serif; font-style: italic; }
.about .container, .contact .container, .goal-vision .container{max-width:820px;margin:10px 0 0}

.site-footer { background: white; color: #441313; padding: 20px 0; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer-logo { height: 50px; }
.footer-links { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer-nav { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.footer-nav a { font-weight: bold; color: #441313; text-decoration: none; font-family: 'Playfair Display', serif; font-style: italic; }
.social-links { display: flex; gap: 15px; }
.social-link { font-weight: bold; color: #441313; text-decoration: none; }
.social-icon { width: 32px; height: 32px; }
.floating-whatsapp { position: fixed; bottom: 20px; right: 20px; background: white; padding: 8px; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.whatsapp-link { display: block; text-decoration: none; }
.whatsapp-icon { width: 24px; height: 24px; }

.carousel {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aaa;
  cursor: pointer;
}

.carousel-dots .dot.active {
  background: #fff;
}

/* Landscape orientation - 4 articles per row */
@media (orientation: landscape) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Portrait orientation - 3 articles per row */
@media (orientation: portrait) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet and smaller screens - 2 articles per row */
@media (max-width: 900px) and (orientation: portrait) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile portrait - 1 article per row */
@media (max-width:700px){
  .carousel{height:220px}
  .card img{height:auto}
  .cards {
    grid-template-columns: 1fr;
  }
  .main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:white;
    flex-direction:column;
    padding:10px 0;
    box-shadow:0 2px 5px rgba(0,0,0,.1);
  }
  .main-nav.open{display:flex}
  .menu-toggle{
    display:block;
    position:absolute;
    top:10px;
    right:10px;
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 15px #ff4757;
  }
  to {
    box-shadow: 0 0 25px #ff4757, 0 0 35px #ff4757;
  }
}