/* ============ Variables de marca ============ */
:root{
  --verde: #5FA829;
  --verde-fuerte: #4C8A20;
  --verde-oscuro: #0B8A4A;
  --naranja: #EE6C2A;
  --naranja-fuerte: #D95A1D;
  --amarillo: #F0B429;
  --azul-gris: #6A818B;
  --carbon: #26312B;
  --crema: #FFFAF0;
  --crema-2: #FFF3DE;
  --blanco: #FFFFFF;
  --borde: #ECE6D8;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(38,49,43,.06);
  --shadow-md: 0 10px 30px rgba(38,49,43,.10);
  --shadow-lg: 0 20px 50px rgba(38,49,43,.16);

  --header-h: 84px;
  --container: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Poppins', system-ui, sans-serif;
  color:var(--carbon);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{
  font-family:'Fredoka', 'Poppins', sans-serif;
  font-weight:600;
  line-height:1.15;
  margin:0;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  border-radius:var(--radius-pill);
  font-size:.8rem;
  font-weight:600;
}
.pill--verde{ background:#E9F5DC; color:var(--verde-fuerte); }
.pill--naranja{ background:#FCE6D8; color:var(--naranja-fuerte); }
.pill--amarillo{ background:#FCEECB; color:#9A7212; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius:var(--radius-pill);
  padding:14px 28px;
  font-weight:600;
  font-size:.95rem;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{
  background:var(--verde);
  color:var(--blanco);
  box-shadow:0 10px 24px rgba(95,168,41,.35);
}
.btn--primary:hover{ background:var(--verde-fuerte); box-shadow:0 12px 28px rgba(95,168,41,.45); transform:translateY(-2px); }
.btn--naranja{
  background:var(--naranja);
  color:var(--blanco);
  box-shadow:0 10px 24px rgba(238,108,42,.35);
}
.btn--naranja:hover{ background:var(--naranja-fuerte); transform:translateY(-2px); }
.btn--outline{
  background:transparent;
  color:var(--carbon);
  border:2px solid var(--borde);
}
.btn--outline:hover{ border-color:var(--verde); color:var(--verde-fuerte); }
.btn--full{ width:100%; }
.btn--sm{ padding:9px 18px; font-size:.85rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:40px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); color:var(--carbon); }
.section-head .eyebrow{
  display:block;
  color:var(--naranja-fuerte);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.section-head p{ color:var(--azul-gris); margin-top:10px; max-width:520px; }
.link-more{
  font-weight:600;
  color:var(--verde-fuerte);
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s;
}
.link-more:hover{ border-color:var(--verde-fuerte); }

/* ============ Header ============ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,250,240,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:52px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:32px; }
.main-nav a{
  font-weight:600;
  font-size:.95rem;
  color:var(--carbon);
  position:relative;
  padding:6px 0;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:3px; border-radius:3px;
  background:var(--verde);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); }
.main-nav a.active{ color:var(--verde-fuerte); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  position:relative;
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background:var(--blanco);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--carbon);
  transition:background .2s, transform .2s;
}
.icon-btn:hover{ background:var(--crema-2); transform:translateY(-1px); }
.icon-btn svg{ width:20px; height:20px; }
.cart-badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--naranja);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  min-width:19px; height:19px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--crema);
  padding:0 3px;
}
.search-wrap{
  display:flex; align-items:center; gap:8px;
  background:var(--blanco);
  border-radius:var(--radius-pill);
  padding:6px 6px 6px 18px;
  box-shadow:var(--shadow-sm);
  width:260px;
}
.search-wrap input{
  border:none; outline:none; flex:1;
  font-family:inherit; font-size:.9rem;
  background:transparent;
}
.search-wrap button{
  width:34px; height:34px; border-radius:50%;
  border:none; background:var(--verde); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.search-wrap svg{ width:16px; height:16px; }

.burger{
  display:none;
  width:44px; height:44px;
  border-radius:50%;
  border:none; background:var(--blanco); box-shadow:var(--shadow-sm);
  align-items:center; justify-content:center;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:20px; height:2px; background:var(--carbon);
  position:relative; transition:.2s;
}
.burger span::before{ position:absolute; top:-6px; }
.burger span::after{ position:absolute; top:6px; }

.mobile-nav{
  display:none;
  flex-direction:column;
  gap:2px;
  background:var(--blanco);
  border-top:1px solid var(--borde);
  padding:10px 24px 20px;
}
.mobile-nav a{
  padding:12px 4px;
  font-weight:600;
  border-bottom:1px solid var(--borde);
}
.mobile-nav .search-wrap{ width:100%; margin:10px 0; }
.site-header.nav-open .mobile-nav{ display:flex; }

@media (max-width: 980px){
  .main-nav, .header-actions .search-wrap{ display:none; }
  .burger{ display:flex; }
}

/* ============ Footer ============ */
.site-footer{
  background:var(--carbon);
  color:#D8E2DC;
  padding:64px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-grid h4{
  color:#fff;
  font-size:1rem;
  margin-bottom:18px;
}
.footer-grid img{ height:46px; margin-bottom:16px; }
.footer-grid p{ color:#AEC0B9; font-size:.9rem; line-height:1.6; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul a{ color:#D8E2DC; font-size:.92rem; transition:color .2s; }
.footer-grid ul a:hover{ color:var(--amarillo); }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.footer-social a:hover{ background:var(--verde); }
.footer-social svg{ width:17px; height:17px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0 0; font-size:.82rem; color:#93A69E; flex-wrap:wrap; gap:10px;
}
.footer-credit{
  margin-top:14px;
  padding:14px 0 22px;
  border-top:1px solid rgba(255,255,255,.12);
}
.op-row{ display:flex; align-items:center; gap:10px; }
.op-credit{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 16px 6px 8px;
  border-radius:100px;
  background:rgb(11,18,32);
  border:1px solid rgba(255,255,255,.08);
  font-size:.8rem; font-weight:700;
  text-decoration:none;
  transition:.25s;
  color:#fff !important;
}
.op-credit:hover{ background:rgb(19,32,51); border-color:rgba(40,183,216,.4); color:#fff !important; }
.op-credit svg{ flex-shrink:0; }
.op-whatsapp{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:rgb(11,18,32);
  border:1px solid rgba(255,255,255,.08);
  transition:.25s; flex-shrink:0;
  color:rgb(40,183,216) !important;
}
.op-whatsapp:hover{ background:rgb(19,32,51); border-color:rgba(40,183,216,.5); }
.op-whatsapp svg{ width:15px; height:15px; }
.admin-link{ color:#6B7D77; text-decoration:underline; font-size:.78rem; }
.admin-link:hover{ color:#93A69E; }
@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ============ Product placeholder art ============ */
.art{
  position:relative;
  border-radius:var(--radius-md);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-size:3rem;
}
.art::before{
  content:"";
  position:absolute; inset:-30%;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 55%);
}
.art span{ position:relative; z-index:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.art--verde{ background:linear-gradient(155deg,#DCF0C6,#B9E08D); }
.art--verde-oscuro{ background:linear-gradient(155deg,#CDEEDA,#8FD9AE); }
.art--naranja{ background:linear-gradient(155deg,#FBDBC3,#F3AE7C); }
.art--amarillo{ background:linear-gradient(155deg,#FBEAC0,#F0CE7D); }

/* ============ Product grid ============ */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
@media (max-width:1080px){ .product-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .product-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .product-grid{ grid-template-columns:1fr 1fr; gap:14px;} }

/* ============ Product card ============ */
.product-card{
  background:var(--blanco);
  border-radius:var(--radius-lg);
  padding:16px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, transform .25s ease;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
}
.product-card{ cursor:pointer; }
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.product-card .tag{
  position:absolute; top:26px; left:26px; z-index:2;
  padding:4px 12px; border-radius:var(--radius-pill);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.tag--nuevo{ background:var(--verde); color:#fff; }
.tag--top{ background:var(--amarillo); color:#5b4300; }
.product-card .cat-label{
  font-size:.75rem; font-weight:600; color:var(--azul-gris); text-transform:uppercase; letter-spacing:.04em;
}
.product-card h3{
  font-size:1.02rem; font-family:'Poppins',sans-serif; font-weight:600; color:var(--carbon);
}
.product-card .price-row{
  display:flex; align-items:center; justify-content:space-between; margin-top:auto;
}
.product-card .price{ font-family:'Fredoka',sans-serif; font-size:1.25rem; color:var(--verde-fuerte); font-weight:600; }
.add-btn{
  width:44px; height:44px; border-radius:50%;
  border:none; background:var(--carbon); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .2s;
}
.add-btn:hover{ background:var(--verde-fuerte); transform:scale(1.06); }
.add-btn svg{ width:19px; height:19px; }

.qty-stepper{
  display:flex; align-items:center; gap:10px;
  background:var(--crema-2); border-radius:var(--radius-pill);
  padding:6px 8px;
}
.qty-stepper button{
  width:28px; height:28px; border-radius:50%; border:none;
  background:#fff; box-shadow:var(--shadow-sm); font-weight:700; color:var(--carbon);
}
.qty-stepper span{ min-width:16px; text-align:center; font-weight:700; }

/* ============ Cart drawer ============ */
.overlay{
  position:fixed; inset:0; background:rgba(38,49,43,.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  z-index:90;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0; height:100%;
  width:min(420px,100%);
  background:var(--crema);
  z-index:95;
  transform:translateX(100%);
  transition:transform .3s ease;
  display:flex; flex-direction:column;
  box-shadow:-10px 0 40px rgba(0,0,0,.15);
}
.cart-drawer.show{ transform:translateX(0); }
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--borde);
}
.cart-head h3{ font-size:1.25rem; }
.cart-close{
  width:38px; height:38px; border-radius:50%; border:none; background:#fff; box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
}
.cart-items{ flex:1; overflow-y:auto; padding:16px 24px; display:flex; flex-direction:column; gap:14px; }
.cart-item{
  display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center;
  background:#fff; border-radius:var(--radius-md); padding:10px; box-shadow:var(--shadow-sm);
}
.cart-item .art{ aspect-ratio:1/1; width:64px; height:64px; border-radius:12px; font-size:1.6rem; }
.cart-item h4{ font-size:.92rem; font-weight:600; }
.cart-item .cat-label{ font-size:.7rem; }
.cart-item .row-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.cart-item .remove{ background:none; border:none; color:var(--azul-gris); font-size:.78rem; text-decoration:underline; padding:0; }
.cart-item .item-price{ font-weight:700; color:var(--verde-fuerte); }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--azul-gris); }
.cart-empty .art{ width:110px; height:110px; margin:0 auto 18px; font-size:2.6rem; }
.cart-foot{ padding:20px 24px 26px; border-top:1px solid var(--borde); background:#fff; }
.cart-foot .subtotal-row{ display:flex; justify-content:space-between; font-weight:600; margin-bottom:6px; }
.cart-foot .subtotal-row b{ font-family:'Fredoka',sans-serif; font-size:1.3rem; color:var(--verde-fuerte); }
.cart-foot small{ color:var(--azul-gris); display:block; margin-bottom:14px; }
.cart-foot .btn{ margin-top:8px; }

/* ============ Modal de producto ============ */
.product-modal{
  position:fixed;
  inset:0;
  z-index:96;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.product-modal.show{ opacity:1; pointer-events:auto; }
.modal-card{
  background:var(--crema);
  border-radius:var(--radius-lg);
  max-width:760px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  box-shadow:var(--shadow-lg);
  position:relative;
  transform:translateY(20px) scale(.98);
  transition:transform .25s ease;
}
.product-modal.show .modal-card{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:38px; height:38px; border-radius:50%; border:none;
  background:#fff; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
}
.modal-art{ border-radius:0; aspect-ratio:auto; height:100%; min-height:260px; font-size:5rem; }
.modal-body{ padding:32px; display:flex; flex-direction:column; gap:4px; }
.modal-body .tag{ align-self:flex-start; }
.modal-body .cat-label{ align-self:flex-start; }
.modal-title{ font-size:1.5rem; margin:8px 0 10px; }
.modal-price{ font-family:'Fredoka',sans-serif; font-size:1.6rem; color:var(--verde-fuerte); font-weight:600; margin-bottom:18px; }
.modal-sizes h4{ font-size:.88rem; text-transform:uppercase; letter-spacing:.04em; color:var(--azul-gris); margin-bottom:12px; }
.size-list{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.size-btn{
  min-width:48px; padding:10px 14px;
  border-radius:var(--radius-sm);
  border:2px solid var(--borde);
  background:#fff;
  font-weight:600; font-size:.88rem;
  color:var(--carbon);
  transition:.18s ease;
}
.size-btn:hover{ border-color:var(--verde); }
.size-btn.selected{ background:var(--verde); border-color:var(--verde); color:#fff; }
.size-hint{ font-size:.82rem; color:var(--azul-gris); margin-bottom:20px; }
.modal-qty-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; font-weight:600; }
@media (max-width:680px){
  .modal-card{ grid-template-columns:1fr; }
  .modal-art{ min-height:180px; }
}

/* ============ CTA final ============ */
.cta-final{ padding-top:20px; }
.cta-final-inner{
  text-align:center;
  background:var(--crema-2);
  border:2px dashed var(--amarillo);
  border-radius:var(--radius-lg);
  padding:60px 30px;
}
.cta-final-inner h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:12px; }
.cta-final-inner p{ color:var(--azul-gris); max-width:460px; margin:0 auto 26px; }

/* ============ Info de contacto ============ */
.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:28px;
}
.contact-info-item{
  display:flex; align-items:center; gap:12px;
  background:var(--blanco);
  border-radius:var(--radius-md);
  padding:16px 18px;
  box-shadow:var(--shadow-sm);
  font-size:.88rem;
  font-weight:600;
  color:var(--carbon);
  transition:transform .2s ease, box-shadow .2s ease;
}
a.contact-info-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); color:var(--verde-fuerte); }
.contact-info-item .info-ico{
  width:38px; height:38px; flex-shrink:0;
  border-radius:50%;
  background:var(--crema-2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
@media (max-width:900px){ .contact-info-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .contact-info-grid{ grid-template-columns:1fr; } }

/* ============ Mapa ============ */
.map-wrap{
  position:relative;
  margin-top:28px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  aspect-ratio:16/6;
  min-height:280px;
}
.map-wrap iframe{ position:absolute; inset:0; }
/* Tapa el link nativo "Abrir en Maps" que Google dibuja en esa misma esquina,
   para que solo se vea nuestro botón con el diseño de la web. */
.map-shield{
  position:absolute;
  top:0; left:0; z-index:4;
  width:min(260px, 70%);
  height:78px;
  background:linear-gradient(135deg, var(--crema) 0%, var(--crema) 60%, rgba(255,250,240,0) 100%);
  border-top-left-radius:var(--radius-lg);
  pointer-events:none;
}
.map-btn{
  position:absolute;
  top:16px; left:16px; z-index:5;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blanco);
  color:var(--carbon);
  padding:11px 18px;
  border-radius:var(--radius-pill);
  font-size:.85rem; font-weight:600;
  box-shadow:var(--shadow-md);
  transition:transform .2s ease, background .2s ease;
}
.map-btn:hover{ background:var(--verde); color:#fff; transform:translateY(-2px); }
.map-caption{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-top:16px;
  font-size:.92rem;
  color:var(--azul-gris);
}
@media (max-width:640px){
  .map-wrap{ aspect-ratio:3/4; min-height:340px; }
  .map-btn{ top:12px; left:12px; padding:9px 14px; font-size:.8rem; }
  .map-shield{ height:66px; }
}

/* ============ Botones flotantes de contacto ============ */
.floating-contact{
  position:fixed;
  right:20px; bottom:20px;
  display:flex; flex-direction:column; gap:12px;
  z-index:70;
}
.floating-contact a{
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:var(--shadow-lg);
  transition:transform .2s ease, box-shadow .2s ease;
}
.floating-contact a:hover{ transform:translateY(-3px) scale(1.06); }
.floating-contact a svg{ width:26px; height:26px; }
.fc-whatsapp{ background:#25D366; }
.fc-instagram{
  background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
@media (max-width:640px){
  .floating-contact{ right:14px; bottom:14px; gap:10px; }
  .floating-contact a{ width:50px; height:50px; }
  .floating-contact a svg{ width:23px; height:23px; }
}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px);
  background:var(--carbon); color:#fff; padding:12px 22px; border-radius:var(--radius-pill);
  font-size:.88rem; font-weight:600; z-index:99;
  opacity:0; pointer-events:none; transition:.25s ease;
  display:flex; align-items:center; gap:8px;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

@media (max-width:640px){
  .section{ padding:56px 0; }
}