/* css/styles.css — lenguaje visual de Armadera */
:root{
  --wood:#c89a5b; --wood-deep:#a9763a; --teal:#57bccb; --teal-deep:#3a9aa9;
  --yellow:#f5c518; --ink:#3a3a3a; --ink-soft:#6b6258;
  --cream:#faf4e9; --cream-deep:#f1e6d2; --paper:#fffdf8;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Outfit',sans-serif; color:var(--ink);
  background:linear-gradient(160deg,var(--cream) 0%,var(--cream-deep) 100%);
  min-height:100vh; line-height:1.6;
  display:flex; flex-direction:column;        /* footer pegado al fondo en páginas cortas */
}
body > main{ flex:1 0 auto; }
h1,h2,h3{ font-family:'Fraunces',serif; font-optical-sizing:auto; letter-spacing:-.015em; line-height:1.1; }
a{ color:var(--teal-deep); }
img{ max-width:100%; display:block; }
.container{ width:min(1100px,92%); margin:0 auto; }

/* Header / nav */
.site-header{ background:var(--paper); border-bottom:1px solid rgba(200,154,91,.25); position:sticky; top:0; z-index:50; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0; }
.site-header .logo{ flex:0 0 auto; }
.site-header .logo img{ height:100px; width:auto; }
.site-nav{ display:flex; gap:1.4rem; align-items:center; }
.site-nav a{ text-decoration:none; color:var(--ink); font-weight:500; }
.site-nav a:hover{ color:var(--teal-deep); }
@media(max-width:720px){
  .site-header .container{ flex-direction:column; gap:.5rem; padding:.6rem 0; }
  .site-header .logo img{ height:60px; }
  .site-nav{ gap:1rem; flex-wrap:wrap; justify-content:center; row-gap:.4rem; }
  .site-nav a{ font-size:.95rem; }
}
.cart-btn{ position:relative; background:none; border:none; cursor:pointer; font-size:1.4rem; }
.cart-badge{ position:absolute; top:-8px; right:-10px; background:var(--yellow); color:var(--ink);
  font-size:.7rem; font-weight:600; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 4px; }

/* Hero */
.hero{ text-align:center; padding:clamp(3rem,8vw,6rem) 0; }
.hero h1{ font-size:clamp(2.2rem,6vw,3.6rem); color:var(--ink); margin-bottom:1rem; }
.hero p{ color:var(--ink-soft); max-width:46ch; margin:0 auto 2rem; font-size:1.15rem; }
.btn{ display:inline-block; background:var(--teal); color:#fff; text-decoration:none; font-weight:600;
  padding:.8rem 1.6rem; border-radius:100px; border:none; cursor:pointer; transition:background .2s; }
.btn:hover{ background:var(--teal-deep); }
.btn-wood{ background:var(--wood); } .btn-wood:hover{ background:var(--wood-deep); }
.btn-lg{ font-size:1.1rem; padding:1rem 2.4rem; }
.center-cta{ text-align:center; margin-top:2.6rem; }

/* Section titles */
.section{ padding:clamp(2rem,5vw,3.5rem) 0; }
.section h2{ font-size:clamp(1.6rem,4vw,2.4rem); margin-bottom:1.5rem; color:var(--ink); }

/* Product grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.6rem; }
.card-product{ background:var(--paper); border:1px solid rgba(200,154,91,.25); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 14px 30px -22px rgba(120,90,40,.5); transition:transform .2s; }
.card-product:hover{ transform:translateY(-4px); }
.card-product a.cover{ display:block; aspect-ratio:1; background:var(--cream-deep); overflow:hidden; }
.card-product a.cover img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.card-product:hover a.cover img{ transform:scale(1.04); }
.card-product .body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.card-product h3{ font-size:1.05rem; line-height:1.25; min-height:2.6em; }
.card-product h3 a{ text-decoration:none; color:var(--ink); }
.card-product .age{ font-size:.82rem; color:var(--ink-soft); }
.card-product .price{ font-weight:600; color:var(--wood-deep); font-size:1.1rem; }
.card-product .price-consultar{ font-size:.98rem; }
.card-product .btn{ margin-top:auto; text-align:center; }
.out-of-stock{ opacity:.7; font-size:.85rem; color:var(--ink-soft); margin-top:auto; padding-top:.4rem; }

/* Product detail */
.product{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; padding:2.5rem 0; }
.product .info h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.6rem; }
.product .info .price{ font-size:1.6rem; color:var(--wood-deep); font-weight:600; margin:.4rem 0 1rem; }
.product .info .price-consultar{ font-size:1.2rem; }
.product .info .age{ color:var(--ink-soft); margin-bottom:1rem; }
.product .info .lead{ color:var(--ink); line-height:1.7; margin-bottom:1.4rem; }
.qty{ display:inline-flex; align-items:center; gap:.6rem; margin:1rem 0; }
.qty input{ width:64px; padding:.5rem; border:1px solid rgba(200,154,91,.4); border-radius:10px; font-size:1rem; text-align:center; }
@media(max-width:720px){ .product{ grid-template-columns:1fr; } }

/* Migas / volver */
.crumbs{ padding:1.4rem 0 .2rem; }
.crumbs a{ text-decoration:none; color:var(--ink-soft); font-weight:500; }
.crumbs a:hover{ color:var(--teal-deep); }

/* Galería de producto */
.gallery{ position:sticky; top:90px; }
.gallery-main{ display:block; width:100%; padding:0; border:1px solid rgba(200,154,91,.25); background:var(--cream-deep);
  border-radius:24px; overflow:hidden; cursor:zoom-in; }
.gallery-main img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.thumbs{ display:flex; gap:.6rem; margin-top:.7rem; flex-wrap:wrap; }
.thumb{ width:64px; height:64px; padding:0; border:2px solid transparent; border-radius:12px; overflow:hidden; cursor:pointer; background:var(--cream-deep); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb.active{ border-color:var(--wood); }
@media(max-width:720px){ .gallery{ position:static; } }

/* Bloques de ficha (incluye / favorece) */
.spec-block{ margin:1.2rem 0; }
.spec-block h3{ font-family:'Outfit',sans-serif; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wood-deep); margin-bottom:.6rem; font-weight:600; }
.spec-block ul{ list-style:none; display:flex; flex-direction:column; gap:.35rem; }
.spec-block ul li{ position:relative; padding-left:1.3rem; color:var(--ink); }
.spec-block ul li::before{ content:""; position:absolute; left:0; top:.5em; width:0; height:0;
  border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--teal); }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ background:linear-gradient(180deg, rgba(245,197,24,.16), rgba(200,154,91,.14)); border:1px solid rgba(200,154,91,.35);
  color:var(--ink); font-size:.85rem; padding:.35rem .8rem; border-radius:100px; }
.spec{ color:var(--ink-soft); font-size:.92rem; margin:.5rem 0; }
.spec strong{ color:var(--ink); }
.made-note{ margin-top:1rem; font-size:.9rem; color:var(--ink-soft); background:var(--cream-deep);
  border-radius:12px; padding:.6rem .9rem; display:inline-block; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(40,36,30,.92); z-index:90; display:flex; align-items:center; justify-content:center; padding:2rem; }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; object-fit:contain; }
.lightbox button{ position:absolute; background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer;
  width:48px; height:48px; border-radius:50%; font-size:1.6rem; line-height:1; display:grid; place-items:center; transition:background .2s; }
.lightbox button:hover{ background:rgba(255,255,255,.25); }
.lb-close{ top:1.2rem; right:1.2rem; }
.lb-prev{ left:1.2rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.2rem; top:50%; transform:translateY(-50%); }

/* Cart slide-over */
.cart-overlay{ position:fixed; inset:0; background:rgba(58,58,58,.35); opacity:0; pointer-events:none; transition:opacity .25s; z-index:60; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-panel{ position:fixed; top:0; right:0; height:100%; width:min(380px,90%); background:var(--paper);
  box-shadow:-20px 0 60px -30px rgba(58,58,58,.5); transform:translateX(100%); transition:transform .25s; z-index:70;
  display:flex; flex-direction:column; }
.cart-panel.open{ transform:none; }
.cart-panel header{ display:flex; justify-content:space-between; align-items:center; padding:1.2rem; border-bottom:1px solid rgba(200,154,91,.25); }
.cart-panel .lines{ flex:1; overflow-y:auto; padding:1rem 1.2rem; display:flex; flex-direction:column; gap:1rem; }
.cart-line{ display:grid; grid-template-columns:1fr auto; gap:.3rem; border-bottom:1px solid rgba(200,154,91,.15); padding-bottom:.8rem; }
.cart-line .name{ font-weight:500; }
.cart-line .meta{ font-size:.85rem; color:var(--ink-soft); display:flex; gap:.6rem; align-items:center; }
.cart-line .remove{ background:none; border:none; color:var(--wood-deep); cursor:pointer; font-size:.8rem; }
.cart-panel footer{ padding:1.2rem; border-top:1px solid rgba(200,154,91,.25); }
.cart-total{ display:flex; justify-content:space-between; font-weight:600; font-size:1.15rem; margin-bottom:1rem; }
.cart-empty{ color:var(--ink-soft); text-align:center; margin-top:2rem; }

/* Forms */
.form{ display:flex; flex-direction:column; gap:1rem; max-width:480px; }
.form label{ display:flex; flex-direction:column; gap:.3rem; font-weight:500; }
.form input,.form textarea{ padding:.7rem; border:1px solid rgba(200,154,91,.4); border-radius:12px; font-family:inherit; font-size:1rem; }

/* Footer */
.site-footer{ background:var(--paper); border-top:1px solid rgba(200,154,91,.25); margin-top:3rem; padding:2.2rem 0; color:var(--ink-soft); }
.site-footer .container{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; }
.site-footer a{ color:var(--teal-deep); text-decoration:none; }

/* States */
.notice{ text-align:center; padding:4rem 0; }
.notice h1{ font-size:2rem; margin-bottom:1rem; }

/* ---- Carrito: encabezado y controles ---- */
.cart-panel header h3{ font-size:1.35rem; }
.cart-close{ background:none; border:none; cursor:pointer; color:var(--ink-soft);
  font-size:.9rem; font-weight:500; padding:.35rem .6rem; border-radius:9px;
  display:inline-flex; align-items:center; gap:.35rem; transition:background .2s,color .2s; }
.cart-close:hover{ background:var(--cream-deep); color:var(--ink); }
.cart-line .meta{ gap:.55rem; }
.step{ width:27px; height:27px; border:1px solid rgba(200,154,91,.5); background:var(--paper);
  color:var(--ink); border-radius:8px; cursor:pointer; font-size:1.05rem; line-height:1;
  display:inline-grid; place-items:center; transition:background .15s,border-color .15s; }
.step:hover{ background:var(--cream-deep); border-color:var(--wood); }
.qty-num{ min-width:20px; text-align:center; font-weight:600; }
.link-rm{ background:none; border:none; color:var(--wood-deep); cursor:pointer;
  font-size:.78rem; text-decoration:underline; margin-left:.15rem; }
.link-rm:hover{ color:var(--ink); }

/* ---- Franja de valores (home) ---- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.value{ background:var(--paper); border:1px solid rgba(200,154,91,.25); border-radius:18px;
  padding:1.8rem 1.4rem; text-align:center; box-shadow:0 14px 30px -26px rgba(120,90,40,.5); }
.value .ic{ width:50px; height:50px; margin:0 auto .9rem; display:grid; place-items:center;
  border-radius:14px; background:var(--cream-deep); font-size:1.5rem; }
.value h3{ font-size:1.12rem; margin-bottom:.35rem; }
.value p{ color:var(--ink-soft); font-size:.95rem; line-height:1.5; }
@media(max-width:720px){ .values{ grid-template-columns:1fr; } }

/* ---- Banda CTA ---- */
.cta{ background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color:#fff;
  border-radius:28px; padding:clamp(2.2rem,5vw,3.4rem); text-align:center; margin:1rem 0; }
.cta h2{ color:#fff; font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:.6rem; }
.cta p{ color:rgba(255,255,255,.92); max-width:48ch; margin:0 auto 1.6rem; }
.cta .btn{ background:#fff; color:var(--teal-deep); }
.cta .btn:hover{ background:var(--cream); }

/* ---- Piezas interactivas que se ensamblan (hero) ---- */
.hero{ position:relative; overflow:hidden; min-height:clamp(500px, 76vh, 680px);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1rem,3vh,2rem) 0 clamp(7.5rem,17vh,10.5rem); }
.hero > .container{ position:relative; z-index:2; pointer-events:none; }
.hero > .container .btn{ pointer-events:auto; }
.pieces-layer{ position:absolute; inset:0; z-index:1; }
.slot{ position:absolute; z-index:0; pointer-events:none; opacity:.5; transition:opacity .25s; }
.slot.filled{ opacity:0; }
.piece{ position:absolute; z-index:1; cursor:grab; touch-action:none;
  filter:drop-shadow(0 10px 16px rgba(120,90,40,.22));
  transition:left .18s ease, top .18s ease, filter .2s; }
.piece.dragging{ cursor:grabbing; transition:none; filter:drop-shadow(0 16px 22px rgba(120,90,40,.35)); z-index:5; }
.piece.placed{ cursor:default; }
.pieces-reset{ position:absolute; z-index:3; bottom:1rem; right:1rem;
  background:var(--paper); border:1px solid rgba(200,154,91,.4); color:var(--wood-deep);
  font-family:inherit; font-size:.8rem; font-weight:500; padding:.4rem .85rem; border-radius:100px;
  cursor:pointer; opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .3s, transform .3s, background .2s; }
.hero.armado .pieces-reset{ opacity:1; transform:none; pointer-events:auto; }
.pieces-reset:hover{ background:var(--cream-deep); }
@media (prefers-reduced-motion: reduce){ .piece{ transition:none; } }