/* /tienda/assets/style.css — Herrería La Roseta · Tienda
   Sistema visual coherente con el home (cobre, rose, grafito, Cinzel, Montserrat)
*/

/* =========================
   TOKENS
========================= */
:root{
  --cobre-base:#B97A57;
  --cobre-medio:#C98B66;
  --cobre-luz:#D9A27C;
  --cobre-sombra:#8E5E43;

  --rose-base:#D884A0;
  --rose-luz:#E6A9BC;

  --grafito-base:#58544F;
  --grafito:#2F2F2F;
  --grafito-2:#2C2C2C;

  --surface-0:#F6F3F5;
  --surface-1:#F4F1F4;
  --surface-2:#F1EDEE;
  --surface-3:#FBFAFB;

  --text-1:rgba(31,31,31,.94);
  --text-2:rgba(31,31,31,.74);
  --text-3:rgba(31,31,31,.60);

  --text-inv-1:rgba(244,241,244,.96);
  --text-inv-2:rgba(244,241,244,.82);

  --line:rgba(31,31,31,.10);
  --line-2:rgba(31,31,31,.16);

  --radius-1:14px;
  --radius-2:18px;
  --radius-3:22px;

  --shadow-1:0 12px 32px rgba(0,0,0,.08);
  --shadow-2:0 18px 50px rgba(0,0,0,.10);

  --container:1120px;
  --header-h:78px;

  --grad-metal-cobre-rose: linear-gradient(
    135deg,
    rgba(0,0,0,.18) 0%,
    var(--cobre-sombra) 10%,
    var(--cobre-base) 42%,
    var(--cobre-luz) 62%,
    rgba(216,132,160,.42) 74%,
    var(--cobre-base) 100%
  );

  --grad-metal-rose: linear-gradient(
    135deg,
    rgba(216,132,160,.62) 0%,
    rgba(230,169,188,.42) 30%,
    rgba(217,162,124,.30) 56%,
    rgba(185,122,87,.22) 72%,
    rgba(31,31,31,.14) 100%
  );

  --bg-grafito-strong:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(circle at 82% 88%, rgba(0,0,0,.34), transparent 60%),
    linear-gradient(180deg, rgba(44,44,44,.98), rgba(27,27,27,.98));

  --bg-grafito-header-footer:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.075), transparent 60%),
    radial-gradient(circle at 82% 86%, rgba(0,0,0,.22), transparent 62%),
    linear-gradient(180deg, var(--grafito-base), rgba(63,59,55,.98));

  --bg-paper-premium:
    radial-gradient(circle at 18% 12%, rgba(185,122,87,.055), transparent 58%),
    radial-gradient(circle at 82% 86%, rgba(0,0,0,.035), transparent 62%),
    radial-gradient(circle at 54% 44%, rgba(216,132,160,.030), transparent 64%),
    linear-gradient(180deg, var(--surface-0), var(--surface-1));

  --focus-ring:0 0 0 4px rgba(185,122,87,.16);
}

/* =========================
   RESET / BASE
========================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.65;
  color:var(--text-1);
  background: var(--bg-paper-premium);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================
   HEADER
========================= */
.tienda-header{
  position:sticky;
  top:0;
  z-index:1200;

  background: var(--bg-grafito-header-footer);
  color: var(--text-inv-1);

  border-bottom:1px solid rgba(185,122,87,.26);
  box-shadow:0 22px 60px rgba(0,0,0,.38);
}

.tienda-header-inner{
  width:min(var(--container), 92vw);
  margin:0 auto;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.tienda-logo{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-decoration:none;
}
.tienda-logo:hover{ text-decoration:none; }

.tienda-logo-mark{
  font-family:'Cinzel','Playfair Display',serif;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:16px;
  line-height:1;
  color:var(--cobre-luz);
  background:var(--grad-metal-cobre-rose);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 10px 22px rgba(0,0,0,.42);
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .tienda-logo-mark{
    background:none;
    -webkit-text-fill-color:initial;
    color:var(--cobre-luz);
    text-shadow:none;
  }
}

.tienda-logo small{
  display:block;
  color:rgba(244,241,244,.66);
  font-size:11px;
  letter-spacing:.06em;
  margin-top:3px;
  font-weight:600;
}

.tienda-nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.tienda-nav-link{
  color:rgba(244,241,244,.88);
  font-weight:700;
  font-size:14px;
  text-decoration:none;
}
.tienda-nav-link:hover{ color:#fff; text-decoration:none; }

.tienda-cart{
  position:relative;
  background:rgba(185,122,87,.20);
  border:1px solid rgba(185,122,87,.40);
  border-radius:12px;
  padding:8px 14px;
  color:var(--cobre-luz);
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  transition:filter .12s ease, transform .12s ease;
}
.tienda-cart:hover{
  filter:brightness(1.08);
  text-decoration:none;
}
.tienda-cart-badge{
  display:inline-block;
  background:var(--cobre-base);
  color:#fff;
  font-size:11px;
  font-weight:900;
  border-radius:999px;
  padding:2px 7px;
  margin-left:6px;
  min-width:20px;
  text-align:center;
}

/* =========================
   MAIN
========================= */
.tienda-main{
  width:min(var(--container), 92vw);
  margin:0 auto;
  padding:22px 0;
}

.tienda-section{
  background:transparent;
}
.tienda-section-inner{
  border-radius:var(--radius-3);
  padding:28px;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(252,251,252,.98), rgba(244,241,244,.92)) padding-box,
    var(--grad-metal-rose) border-box;

  box-shadow:var(--shadow-2);
}

/* =========================
   HEADER DEL BLOQUE
========================= */
.tienda-head{
  text-align:center;
  max-width:640px;
  margin:0 auto;
}

.tienda-back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--cobre-base);
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  margin-bottom:18px;
}
.tienda-back-link:hover{
  filter:brightness(1.08);
  text-decoration:underline;
}

.tienda-kicker{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--cobre-base);
  margin:0 0 12px;
}

.tienda-title{
  font-family:'Cinzel','Playfair Display',serif;
  font-weight:700;
  letter-spacing:.06em;
  font-size:clamp(1.55rem, 1.8vw, 2.0rem);
  line-height:1.15;
  color:var(--text-1);
  margin:0 0 10px;
}

.tienda-subtitle{
  color:var(--text-2);
  font-size:15px;
  line-height:1.65;
  max-width:540px;
  margin:0 auto;
}

/* =========================
   CATEGORIAS (cards grandes)
========================= */
.tienda-cat-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.tienda-cat-card{
  border-radius:var(--radius-2);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:block;

  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(251,250,251,.98), rgba(244,241,244,.94)) padding-box,
    linear-gradient(135deg, rgba(216,132,160,.44), rgba(185,122,87,.20)) border-box;

  box-shadow:0 10px 22px rgba(0,0,0,.075);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.tienda-cat-card:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.095);
  filter:brightness(1.02);
  text-decoration:none;
}

.tienda-cat-img{
  aspect-ratio:1/1;
  background:linear-gradient(135deg, rgba(216,132,160,.18), rgba(185,122,87,.10));
  overflow:hidden;
}
.tienda-cat-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tienda-cat-body{
  padding:14px 16px 16px;
  text-align:center;
}
.tienda-cat-title{
  font-weight:900;
  font-size:15px;
  line-height:1.12;
  color:var(--text-1);
  margin:0 0 4px;
}
.tienda-cat-meta{
  color:var(--text-3);
  font-weight:800;
  font-size:12.5px;
  line-height:1.2;
  margin:0;
}

/* =========================
   DIVISOR "Todos los productos"
========================= */
.tienda-divider{
  margin:32px 0 22px;
  text-align:center;
  position:relative;
}
.tienda-divider::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(185,122,87,.40), transparent);
}
.tienda-divider-text{
  position:relative;
  background:rgba(252,251,252,.98);
  padding:0 16px;
  font-family:'Cinzel','Playfair Display',serif;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-2);
  font-size:12px;
}

/* =========================
   GRID DE PRODUCTOS
========================= */
.tienda-product-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:22px;
}

.tienda-product-card{
  border-radius:var(--radius-1);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;

  border:1px solid var(--line);
  background:rgba(255,255,255,.7);

  box-shadow:0 6px 16px rgba(0,0,0,.05);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tienda-product-card:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  border-color:rgba(185,122,87,.40);
  text-decoration:none;
}

.tienda-product-img{
  aspect-ratio:1/1;
  background:linear-gradient(135deg, rgba(216,132,160,.10), rgba(185,122,87,.05));
  overflow:hidden;
  position:relative;
}
.tienda-product-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tienda-product-noimg{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(185,122,87,.5);
  font-size:11px;
  letter-spacing:.06em;
  font-weight:700;
  text-transform:uppercase;
}

.tienda-product-body{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.tienda-product-cat{
  font-size:10px;
  color:var(--cobre-base);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 6px;
}
.tienda-product-name{
  font-size:14px;
  font-weight:800;
  color:var(--text-1);
  margin:0 0 10px;
  line-height:1.25;
  flex:1;
}
.tienda-product-precio-bloque{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tienda-product-precio-anterior{
  font-size:12px;
  color:var(--text-3);
  text-decoration:line-through;
  font-weight:700;
}
.tienda-product-precio{
  font-size:16px;
  font-weight:900;
  color:var(--text-1);
  margin:0;
}
.tienda-product-plazo{
  font-size:11px;
  color:var(--text-3);
  font-weight:800;
  margin:6px 0 0;
}

/* =========================
   ESTADO VACIO
========================= */
.tienda-vacio{
  margin-top:24px;
  padding:32px;
  text-align:center;
  color:var(--text-2);
  font-weight:700;

  border-radius:var(--radius-2);
  border:1px dashed rgba(185,122,87,.40);
  background:rgba(185,122,87,.035);
}

/* =========================
   FOOTER
========================= */
.tienda-footer{
  margin-top:22px;
  background: var(--bg-grafito-header-footer);
  color: var(--text-inv-1);
  border-top:1px solid rgba(185,122,87,.14);
}
.tienda-footer-inner{
  width:min(var(--container), 92vw);
  margin:0 auto;
  padding:22px 0;
  text-align:center;
  font-size:13px;
  color:rgba(244,241,244,.74);
}
.tienda-footer-inner a{
  color:var(--cobre-luz);
  font-weight:800;
  text-decoration:none;
}
.tienda-footer-inner a:hover{
  text-decoration:underline;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:980px){
  .tienda-product-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:880px){
  :root{ --header-h:66px; }
  .tienda-logo-mark{ font-size:14px; letter-spacing:.08em; }
  .tienda-logo small{ font-size:10px; }
  .tienda-nav{ gap:12px; }
  .tienda-nav-link{ font-size:13px; }
  .tienda-section-inner{ padding:22px; }
  .tienda-cat-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .tienda-cat-img{
    aspect-ratio:16/9;
  }
}

@media (max-width:680px){
  .tienda-product-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .tienda-section-inner{ padding:18px; }
}

@media (max-width:380px){
  .tienda-product-grid{
    grid-template-columns:1fr;
  }
}