@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,600;0,700;1,500&family=Lato:wght@400;500;600;700&display=swap');

:root{
  --terracotta:#a65c3a;
  --maroon:#5d2d2c;
  --text:#363636;
  --heading:#1a1a1a;
  --cream:#fff;
  --cream-2:#faf6f2;
  --border:#e7ded6;
  --radius:0px;
  --maxw:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Lato', sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.7;
  font-weight:500;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3{font-family:'Cormorant', serif;color:var(--heading);margin:0 0 .5rem;font-weight:700;}
h1{font-size:2.75rem;}
h2{font-size:2.2rem;}
h3{font-size:1.5rem;color:var(--maroon);font-weight:600;}
.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:.85rem;color:var(--maroon);font-weight:600;margin-bottom:.6rem;}
.center{text-align:center;}
.tagline{font-style:italic;color:var(--maroon);}
.btn{
  display:inline-block;padding:15px 40px;border-radius:var(--radius);
  font-weight:500;letter-spacing:3px;text-transform:uppercase;font-size:.8rem;
  cursor:pointer;border:2px solid var(--terracotta);transition:.25s;
}
.btn-primary{background:var(--terracotta);color:#fff;}
.btn-primary:hover{background:#8f4a2c;border-color:#8f4a2c;}
.btn-outline{border-color:var(--maroon);color:var(--maroon);background:transparent;}
.btn-outline:hover{background:var(--maroon);color:#fff;}
.btn-block{display:block;text-align:center;width:100%;}

/* TOPBAR */
.topbar{
  background:var(--terracotta);
  color:#fff;
  font-size:.9rem;
  display:flex;
  justify-content:space-between;
  padding:10px 20px;
  flex-wrap:wrap;
  gap:.5rem;
}
.topbar ul{display:flex;gap:1.2rem;flex-wrap:wrap;}
.topbar a:hover{opacity:.75;}

/* HEADER */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 2rem;
  background:#fff;
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--border);
}
.logo img{height:56px;}
.main-nav ul{display:flex;gap:1.8rem;}
.main-nav a{
  font-family:'Lato', sans-serif;font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:1px;color:var(--maroon);
  padding:.3rem 0;border-bottom:2px solid transparent;
}
.main-nav a:hover,.main-nav a.active{border-color:var(--terracotta);color:var(--terracotta);}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:28px;background:none;border:none;cursor:pointer;}
.menu-toggle span{display:block;height:3px;background:var(--maroon);border-radius:2px;}
.cart-link{position:relative;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--maroon);}
.cart-count{background:var(--terracotta);color:#fff;border-radius:50%;padding:.05rem .5rem;font-size:.75rem;margin-left:.4rem;}

/* HERO */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:640px;
  padding:0 60px;
  background:#fff url('images/header1.jpg') 0 -75px/cover no-repeat;
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  background:url('images/icono2.png') 0% 50%/contain no-repeat;
  opacity:.1;
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1350px;
  margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:120px 0;
}
.hero-eyebrow{color:var(--maroon);text-transform:uppercase;letter-spacing:4px;font-weight:600;font-size:.85rem;}
.hero-title{font-size:4rem;line-height:1.15;font-weight:700;min-height:2.3em;}
.rotate-word{display:block;transition:opacity .35s ease;}
.rotate-word.accent{color:var(--terracotta);}
.rotate-word.fade{opacity:0;}
.hero-text{max-width:420px;margin:1.4rem 0 2rem;}

/* SLIDERS */
.slider-track{
  display:flex;
  transition:transform .4s ease;
}
.slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:#fff;border:1px solid var(--border);border-radius:50%;
  width:42px;height:42px;cursor:pointer;font-size:1.1rem;z-index:5;
  color:var(--maroon);
}
.slider-btn.prev{left:.5rem;}
.slider-btn.next{right:.5rem;}

/* ABOUT */
.about{
  display:flex;
  gap:3.5rem;
  align-items:center;
  padding:4.5rem 6vw;
  flex-wrap:wrap;
  background:#fff;
}
.about-content{flex:1 1 420px;}

/* ABOUT MEDIA — square Ken-Burns style slideshow (matches real site) */
.about-media{
  position:relative;
  flex:1 1 420px;
  min-width:0;
  max-width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
}
.about-media .slide-viewport{width:100%;height:100%;overflow:hidden;}
.about-media .slider-track{height:100%;transition:transform .6s ease;}
.about-media .slide{flex:0 0 100%;position:relative;height:100%;overflow:hidden;}
.about-media .slide img{
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 8s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{transform:scale(1);}
  to{transform:scale(1.12);}
}
.about-media .slide-caption{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  color:#fff;font-family:'Cormorant',serif;font-size:1.4rem;font-weight:600;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.about-media .slider-btn{
  width:36px;height:36px;background:rgba(255,255,255,.85);border:none;
}
.about-media .slider-btn.prev{left:1rem;}
.about-media .slider-btn.next{right:1rem;}
.about-media .slider-dots{
  position:absolute;bottom:.6rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.4rem;margin:0;z-index:3;
}
.about-media .slider-dots button{
  width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.6);
  cursor:pointer;padding:0;
}
.about-media .slider-dots button.active{background:#fff;}

/* MATERIALS */
.materials{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  padding:3.5rem 6vw;
  text-align:center;
  background:var(--cream-2);
}
.material-item h3{color:var(--maroon);font-size:1.3rem;}
.material-item p{margin:0;}

/* PRODUCT GRID */
.shop-preview{padding:4.5rem 6vw;}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:2.5rem 2rem;
  margin-top:2.5rem;
}
.product-card{
  display:flex;flex-direction:column;text-align:center;
}
.product-card img{height:260px;width:100%;object-fit:contain;background:var(--cream-2);margin-bottom:1rem;}
.product-card .info{display:flex;flex-direction:column;align-items:center;}
.product-card h4{margin:0 0 .4rem;font-size:1.3rem;font-family:'Cormorant',serif;color:var(--heading);}
.product-card .price{color:#777;font-weight:400;margin:0 0 1rem;font-family:'Lato',sans-serif;}
.product-card button{
  width:100%;background:var(--terracotta);color:#fff;border:none;
  padding:.9rem;cursor:pointer;font-weight:500;text-transform:uppercase;
  letter-spacing:2px;font-size:.75rem;
}
.product-card button:hover{background:var(--maroon);}

/* PAGE BANNER (inner pages) */
.page-banner{
  position:relative;
  min-height:384px;
  display:flex;align-items:center;
  padding:0 20px;
  background:url('images/banner-nosotros.jpg') 50% 50%/cover no-repeat;
}
.page-banner::before{
  content:'';
  position:absolute;inset:0;
  background:rgba(0,0,0,.68);
  opacity:.4;
}
.page-banner h1{
  position:relative;z-index:1;
  max-width:1350px;margin:0 auto;width:100%;
  color:#fff;font-size:4rem;
}

/* STORY (Nosotros) */
.story{
  padding:100px 20px;
  background:#fff url('images/bg-03.jpg') 50% 50%/cover no-repeat;
}
.story-inner{
  max-width:1350px;margin:0 auto;
  display:flex;gap:80px;align-items:stretch;
}
.story-text{flex:1 1 635px;min-width:0;}
.story-text h2{font-size:3.2rem;margin-bottom:1.5rem;}
.story-text h3{
  font-family:'Cormorant',serif;font-size:1.9rem;
  color:var(--heading);margin:2rem 0 .8rem;
}
.story-text p{margin:0 0 1.2rem;}
.story-text .btn{margin-top:1rem;}
.gem-list{margin:1.2rem 0 1.8rem;}
.gem-list li{display:flex;gap:.8rem;margin-bottom:1rem;align-items:flex-start;}
.gem-icon{flex:0 0 auto;line-height:1;padding-top:.35rem;}
.gem-icon svg{width:14px;height:14px;fill:var(--terracotta);display:block;}
.story-media{
  flex:0 1 635px;min-width:0;
  background:url('images/nosotros1.jpg') 50% 50%/cover no-repeat;
}

/* CONTACT CTA */
.contact-cta{
  padding:120px 20px;
  background:#fff url('images/bg-06.jpg') 50% 50%/cover no-repeat;
  color:var(--text);
}
.contact-cta-inner{
  max-width:1350px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:80px;
}
.contact-cta-text{flex:1 1 762px;}
.contact-cta h2{color:var(--heading);font-size:3.2rem;margin-bottom:1.2rem;}
.contact-cta p{max-width:680px;margin:0 0 2rem;}
.contact-cta-media{
  flex:0 1 508px;
  min-width:0;
  aspect-ratio:508/600;
  background:url('images/h1.jpg') 50% 0/cover no-repeat;
}

/* FOOTER */
.footer-main{
  position:relative;
  background:var(--terracotta);
  color:#fff;
  padding:5rem 20px;
  overflow:hidden;
}
.footer-main::before{
  content:'';
  position:absolute;inset:0;
  background:url('images/footer-flower.png') 50% 50%/cover no-repeat;
  opacity:.07;
  pointer-events:none;
}
.footer-inner{
  position:relative;
  z-index:1;
  max-width:1350px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.6fr 1fr;
  gap:3rem;
  align-items:start;
  font-size:.95rem;
}
.site-footer h3{
  margin-bottom:1rem;color:#fff;
  font-family:'Cormorant',serif;font-size:1.5rem;font-weight:700;
}
.footer-col p{margin:0 0 1rem;}
.footer-col ul li{margin-bottom:.5rem;}
.footer-col a:hover{opacity:.75;}
.footer-contact{text-align:right;}
.footer-about{text-align:center;}
.footer-logo{width:200px;margin:0 auto 1.2rem;}

.payment-list{display:flex;gap:.6rem;margin-top:1.2rem;}
.payment-list svg{width:22px;height:22px;fill:#fff;opacity:.85;}

.social-list{display:flex;justify-content:center;gap:1.2rem;margin-top:1.4rem;}
.social-list svg{width:22px;height:22px;fill:#fff;}
.social-list a:hover svg{opacity:.75;}

.footer-bottom{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:1.2rem;
  padding:1.6rem 1rem;
  background:#fff;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:.78rem;
  font-weight:600;
  color:var(--maroon);
}
.footer-bottom a:hover{color:var(--terracotta);}
.footer-bottom .sep{display:flex;}
.footer-bottom .sep svg{width:5px;height:5px;fill:var(--terracotta);}

/* CART DRAWER */
.cart-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150;
}
.cart-overlay.open{display:block;}
.cart-drawer{
  position:fixed;top:0;right:-380px;width:360px;height:100%;
  background:#fff;z-index:160;box-shadow:-4px 0 20px rgba(0,0,0,.15);
  display:flex;flex-direction:column;transition:right .3s ease;
}
.cart-drawer.open{right:0;}
.cart-drawer-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem;border-bottom:1px solid var(--border);
}
.cart-drawer-header h3{margin:0;}
.cart-drawer-header button{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--maroon);}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.2rem;}
.cart-item{display:flex;gap:.8rem;margin-bottom:1rem;align-items:center;}
.cart-item img{width:56px;height:56px;object-fit:cover;}
.cart-item .ci-info{flex:1;font-size:.85rem;}
.cart-item .remove{background:none;border:none;color:#c33;cursor:pointer;font-size:.85rem;padding:0;}
.cart-footer{padding:1.2rem;border-top:1px solid var(--border);}
.cart-total{font-weight:bold;margin-bottom:1rem;}

/* CHAT BUBBLE */
.chat-bubble{
  position:fixed;bottom:1.5rem;right:1.5rem;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;font-size:1.4rem;
  border:none;cursor:pointer;z-index:120;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.chat-dialog{
  display:none;position:fixed;bottom:6rem;right:1.5rem;width:270px;
  background:#fff;padding:1.2rem;border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:120;
}
.chat-dialog.open{display:block;}
.chat-close{position:absolute;top:.4rem;right:.7rem;background:none;border:none;font-size:1.3rem;cursor:pointer;}

/* LEGAL PAGE */
.legal{padding:4rem 6vw;max-width:800px;margin:0 auto;}
.legal h1{font-size:2.2rem;}
.legal h2{color:var(--maroon);font-size:1.5rem;margin-top:2rem;}

/* CONTACT PAGE */
.contact-page{padding:4.5rem 6vw;display:flex;gap:3rem;flex-wrap:wrap;}
.contact-info,.contact-form{flex:1 1 340px;}
.contact-form form{display:flex;flex-direction:column;gap:1rem;background:var(--cream-2);padding:2.5rem;border:1px solid var(--border);}
.contact-form label{font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--maroon);}
.contact-form input,.contact-form textarea{
  padding:.8rem;border:1px solid var(--border);font-family:inherit;font-size:.95rem;background:#fff;
}
.contact-info ul{margin-top:1rem;}
.contact-info li{margin-bottom:.9rem;}
.form-msg{display:none;background:#e6f4ea;color:#276c3c;padding:.8rem 1rem;margin-top:1rem;}

/* RESPONSIVE */
@media(max-width:900px){
  .materials{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr;text-align:center;gap:2.5rem;}
  .footer-contact{text-align:center;}
  .payment-list{justify-content:center;}
}
@media(max-width:768px){
  .topbar{display:none;}
  .main-nav{
    position:fixed;top:74px;left:0;width:100%;background:#fff;
    overflow:hidden;box-shadow:0 8px 16px rgba(0,0,0,.08);
    transform:scaleY(0);transform-origin:top;opacity:0;
    transition:transform .3s ease,opacity .3s ease;
    pointer-events:none;
  }
  .main-nav.open{transform:scaleY(1);opacity:1;pointer-events:auto;}
  .main-nav ul{flex-direction:column;padding:1rem 2rem;gap:1rem;}
  .menu-toggle{display:flex;}
  .about{flex-direction:column;}
  .about-media{width:100%;flex-basis:auto;}
  .page-banner{min-height:220px;padding:0 1.5rem;}
  .page-banner h1{font-size:2.4rem;}
  .story{padding:3.5rem 1.5rem;}
  .story-inner{flex-direction:column;gap:2.5rem;}
  .story-text h2{font-size:2.4rem;}
  .story-media{flex-basis:auto;width:100%;aspect-ratio:635/916;max-height:520px;}
  .contact-cta{padding:3.5rem 1.5rem;text-align:center;}
  .contact-cta-inner{flex-direction:column;gap:2.5rem;}
  .contact-cta h2{font-size:2.4rem;}
  .contact-cta p{margin-inline:auto;}
  .contact-cta-media{flex-basis:auto;width:100%;max-width:420px;margin:0 auto;}
  .footer-main{padding:3rem 1.5rem;}
  .footer-bottom{gap:.8rem;font-size:.7rem;}
  .hero{
    text-align:center;
    padding:0 1.5rem;
    min-height:auto;
    background-image:none;
    background-color:#fff;
  }
  .hero-content{align-items:center;padding:3.5rem 0;}
  .hero-title{font-size:2.6rem;}
  .hero-text{margin-inline:auto;}
}