/* base.css – Tema “shop pro”, accesible y mobile-first
   (Variables, reset, helpers + PDP mejorado con galería y columna de compra)
*/

/* ===== Variables ===== */
:root{
  --clr-bg:#F4E8C9;
  --clr-bg-2:#FFF8E8;
  --clr-surface:#FFFFFF;
  --clr-text:#2A2A2A;

  --clr-primary:#D8891E;
  --clr-primary-700:#B16A0A;

  --clr-accent:#2B6F3A;
  --clr-accent-700:#1E4F2F;

  --clr-muted:#6B7280;
  --clr-border:rgba(0,0,0,.10);

  --radius:14px;
  --radius-sm:10px;
  --shadow-xs:0 2px 8px rgba(0,0,0,.06);
  --shadow:0 8px 24px rgba(0,0,0,.12);
  --shadow-lg:0 16px 40px rgba(0,0,0,.12);

  --font-ui: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;

  --elev: cubic-bezier(.2,.8,.2,1);
}

/* ===== Dark mode opcional ===== */
.theme-dark{
  --clr-bg:#181A1B;
  --clr-bg-2:#141617;
  --clr-surface:#1F2325;
  --clr-text:#EAEDEE;
  --clr-primary:#E29A3B;
  --clr-primary-700:#C97E1E;
  --clr-accent:#5FB377;
  --clr-accent-700:#3E8A56;
  --clr-muted:#A0A7AE;
  --clr-border:rgba(255,255,255,.12);
}

/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}

/* ===== Body / Tipografía ===== */
body{
  font-family:var(--font-ui);
  color:var(--clr-text);
  background:linear-gradient(180deg,var(--clr-bg),var(--clr-bg-2));
  min-height:100vh;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{ font-family:var(--font-display); letter-spacing:.3px; margin:0 0 var(--space-3) 0; }
p{ margin:0 0 var(--space-4) 0; color:var(--clr-text) }
a{ color:var(--clr-accent-700); text-underline-offset:2px }

/* ===== Contenedor ===== */
.container{ width:min(1120px, 92%); margin:0 auto }

/* ===== Botones ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.25rem; border-radius:999px; cursor:pointer; border:0;
  background:var(--clr-accent); color:#fff; font-weight:700; letter-spacing:.2px;
  box-shadow:var(--shadow-xs);
  transition:transform .15s var(--elev), box-shadow .2s var(--elev), background .2s var(--elev), outline-color .2s;
  outline:2px solid transparent; outline-offset:2px;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); background:var(--clr-accent-700) }
.btn:active{ transform:translateY(0); box-shadow:var(--shadow-xs) }
.btn:focus-visible{ outline-color: color-mix(in srgb, var(--clr-accent), transparent 55%) }
.btn--primary{ background:var(--clr-primary) }
.btn--primary:hover{ background:var(--clr-primary-700) }
.btn--ghost{ background:transparent; color:var(--clr-text); border:1px solid var(--clr-border) }
.btn--ghost:hover{ background:rgba(0,0,0,.04) }
.theme-dark .btn--ghost:hover{ background:rgba(255,255,255,.06) }

/* ===== Badges / Cards ===== */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--clr-primary); color:#fff;
  padding:.3rem .65rem; border-radius:999px; font-size:.8rem; font-weight:700; box-shadow:var(--shadow-xs);
}
.card{
  background:var(--clr-surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:var(--space-4); overflow:hidden; border:1px solid var(--clr-border);
}
.card--soft{ box-shadow:var(--shadow-xs) }

/* ===== Header / Nav ===== */
.header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--clr-bg), var(--clr-surface) 25%);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--clr-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0 }
.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--clr-text) }
.brand img{ width:42px; height:42px }
.nav{ display:flex; gap:.25rem }
.nav a{ text-decoration:none; color:var(--clr-text); padding:.5rem .9rem; border-radius:10px; font-weight:600 }
.nav a:hover{ background:rgba(0,0,0,.05) }
.theme-dark .nav a:hover{ background:rgba(255,255,255,.06) }
.nav a.active{ color:var(--clr-accent); font-weight:800 }

/* ===== Secciones y grillas ===== */
.section{ padding:var(--space-8) 0 }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); gap:1.2rem }

/* Product card */
.product-card{ width:256px; max-width:256px; margin:0 auto; padding:0; border:1px solid var(--clr-border); border-radius:var(--radius); box-shadow:var(--shadow-xs); background:var(--clr-surface); transition:transform .15s var(--elev), box-shadow .2s var(--elev) }
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.product-card img{ width:100%; height:auto; object-fit:cover; border-radius:12px 12px 0 0 }
.product-card .product-body{ padding:1rem }
.price{ font-size:1.2rem; font-weight:800; color:var(--clr-primary-700) }

/* ===== Footer ===== */
footer{ margin-top:auto; padding:2rem 0; color:#555 }

/* ===== Helpers ===== */
.center{text-align:center}

/* ===== Responsive ===== */
@media (max-width: 900px){ .hero:not(.hero--acacia){ grid-template-columns: 1fr } }
@media (max-width: 420px){ .product-card{ width:220px; max-width:220px } }

/* ===== PDP (Product Detail Page) ===== */
.pdp{ display:grid; grid-template-columns:1fr; gap:1.2rem }
@media (min-width: 960px){
  .pdp{ grid-template-columns: 1.05fr .95fr; align-items:start }
}
.pdp-gallery{
  background:var(--clr-surface); border:1px solid var(--clr-border);
  border-radius:var(--radius); padding:.75rem; box-shadow:var(--shadow);
}
.pdp-hero{
  width:100%;
  aspect-ratio:3/4;
  object-fit:contain;           /* evita imagen gigante */
  border-radius:var(--radius);
  max-height:68vh;              /* límite en pantallas grandes */
}
.pdp-title{ margin:.2rem 0 .5rem 0 }
.pdp-short{ color:var(--clr-muted) }
.pdp-specs dt{ font-weight:800; margin-top:.6rem }
.pdp-specs dd{ margin:0 0 .4rem 0 }

/* Miniaturas */
.thumbs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr));
  gap:.5rem; margin-top:.75rem;
}
.thumbs img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid var(--clr-border); border-radius:10px; cursor:pointer;
  transition:transform .12s var(--elev), box-shadow .12s var(--elev), border-color .12s;
}
.thumbs img:hover{ transform:translateY(-2px); box-shadow:var(--shadow-xs) }
.thumbs img.is-active{ border-color: color-mix(in srgb, var(--clr-accent), transparent 35%); box-shadow:var(--shadow-xs) }

/* Envío */
.ship-card{ background:var(--clr-surface); border:1px solid var(--clr-border); border-radius:12px; padding:1rem; box-shadow:var(--shadow-xs) }
.ship-grid{ display:grid; grid-template-columns:1fr; gap:.6rem }
@media (min-width: 560px){ .ship-grid{ grid-template-columns:1fr 1fr } }
.ship-actions{ display:flex; align-items:center; gap:.6rem; margin-top:.5rem }
.ship-result{ margin-top:.6rem; font-size:.95rem }
.ship-table{ width:100%; border-collapse:collapse; margin-top:.4rem }
.ship-table th, .ship-table td{ border-top:1px solid var(--clr-border); padding:.45rem .25rem }
.ship-table .num{ text-align:right; white-space:nowrap }
.muted{ color:var(--clr-muted) }
.error{ color:#b00020; font-weight:700 }