/* Tienda de Granja Rentable — REWORK visual (21-oct-2026).
   Capa de diseño sobre css/estilo.css: cabecera con el logo del canal,
   hero verde con medallón, tarjetas de producto modernas, filtros
   flotantes y ficha cuidada. No cambia clases ni ids: tienda.js manda. */

/* ---------- Cabecera: logo del canal bien visible ---------- */
.brand-mark img{ border-radius:50%; box-shadow:0 0 0 2px var(--gold), 0 4px 12px rgba(0,0,0,.25); }
.brand-name{ white-space:nowrap; }

/* ---------- Banda de confianza bajo la cabecera ---------- */
.t-banda{
  background:linear-gradient(90deg, var(--gd), var(--g) 55%, var(--gd));
  border-bottom:2px solid var(--gold);
}
.t-banda-in{
  display:flex; flex-wrap:wrap; gap:6px 26px; justify-content:center;
  padding-top:10px; padding-bottom:10px;
  font-size:.92rem; font-weight:700; color:#fff; text-align:center;
}
.t-banda-in span::before{ content:"✓ "; color:var(--gold); font-weight:900; }

/* ---------- Hero de la tienda ---------- */
.t-hero{
  margin:22px 0 6px; text-align:center; color:#fff;
  padding:34px 22px 28px; border-radius:24px;
  background:
    radial-gradient(560px 240px at 12% -10%, rgba(196,160,53,.28), transparent 60%),
    radial-gradient(700px 300px at 88% 0%, rgba(46,122,64,.55), transparent 60%),
    linear-gradient(150deg, var(--gd) 0%, var(--g) 70%, var(--gm) 100%);
  box-shadow:0 18px 42px rgba(15,61,28,.28);
}
.t-hero-logo{
  width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:3px solid var(--gold); box-shadow:0 10px 26px rgba(0,0,0,.35);
  background:#fff;
}
.t-hero-chip{
  display:table; margin:14px auto 0;
  background:var(--gold); color:var(--gold-ink);
  font-size:.8rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px;
}
.t-hero h1{
  margin:12px 0 8px; font-size:clamp(1.9rem, 4.6vw, 2.7rem);
  line-height:1.08; letter-spacing:-.02em; color:#fff;
}
.t-hero-lead{
  max-width:640px; margin:0 auto; color:#DDEEDF; font-size:1.05rem; line-height:1.55;
}
.t-hero-lead strong{ color:#fff; }
.t-pais-chip{
  display:inline-block; margin-top:16px; padding:7px 16px;
  border:1.5px solid rgba(255,255,255,.45); border-radius:999px;
  background:rgba(255,255,255,.12); backdrop-filter:blur(4px);
  font-size:.92rem; font-weight:800; color:#fff;
}
.t-pais-manual{
  margin:14px auto 0; display:flex; flex-wrap:wrap; gap:8px 10px;
  align-items:center; justify-content:center;
  font-size:.92rem; font-weight:700; color:#DDEEDF;
}
.t-pais-manual select{
  min-height:44px; padding:8px 36px 8px 14px; border-radius:999px;
  border:1.5px solid var(--gold); background:#fff; color:var(--gd);
  font:inherit; font-size:.95rem; font-weight:800; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.t-pais-manual select:focus{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- Franja de confianza (3 tarjetas) ---------- */
.t-confianza{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px; margin:20px 0 4px;
}
.t-confianza .mini{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px 16px 14px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.t-confianza .mini::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--g), var(--gold));
}
.t-confianza .mini strong{ display:block; color:var(--gd); margin-bottom:5px; font-size:1.02rem; }
.t-confianza .mini p{ margin:0; color:var(--muted); font-size:.93rem; line-height:1.5; }

/* ---------- Estado «llegando a tu país» ---------- */
.t-llegando{
  background:var(--gl); border:1.5px dashed var(--gm); border-radius:18px;
  padding:28px 22px; text-align:center; margin:22px 0;
}
.t-llegando h2{ margin-top:0; color:var(--gd); }
.t-llegando p{ color:var(--muted); max-width:560px; margin:0 auto 14px; }

/* ---------- Filtros flotantes: chips + buscador ---------- */
.t-filtros{
  position:sticky; top:10px; z-index:6;
  margin:22px 0 6px; padding:12px 14px;
  background:rgba(255,252,248,.94); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
}
.t-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.t-chip{
  appearance:none; cursor:pointer; min-height:40px;
  border:1.5px solid var(--line); border-radius:999px; background:#fff;
  padding:8px 16px; font:inherit; font-size:.92rem; font-weight:700; color:var(--gd);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.t-chip:hover{ border-color:var(--gm); transform:translateY(-1px); }
.t-chip[aria-pressed="true"]{
  background:var(--g); border-color:var(--g); color:#fff;
  box-shadow:0 6px 16px rgba(31,94,46,.35);
}
.t-buscar{ display:block; }
.t-buscar-etq{
  display:block; font-size:.82rem; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--gd); margin-bottom:5px;
}
.t-buscar input{
  width:100%; min-height:46px; padding:11px 14px;
  border:1.5px solid var(--line); border-radius:12px; background:#fff;
  font:inherit; font-size:1rem; color:var(--ink);
}
.t-buscar input:focus{ outline:2px solid var(--gm); outline-offset:1px; border-color:var(--gm); }
.t-resultados{ color:var(--muted); font-size:.95rem; margin:16px 0 2px; font-weight:600; }
.t-vacio{
  background:#fff; border:1.5px dashed var(--line); border-radius:16px;
  padding:26px 20px; text-align:center; margin:18px 0;
}
.t-vacio p{ color:var(--muted); margin:0 auto 10px; max-width:480px; }
.t-vacio strong{ color:var(--gd); }

/* ---------- Encabezados de categoría ---------- */
.t-cat{
  margin:34px 0 12px; font-size:1.45rem; color:var(--gd); letter-spacing:-.01em;
  display:flex; align-items:center; gap:12px;
}
.t-cat::after{ content:""; flex:1; height:2px; background:linear-gradient(90deg, var(--gold), transparent); border-radius:2px; }

/* ---------- Tarjetas de producto ---------- */
.pgrid{ gap:18px; }
.pcard{
  border-radius:20px; border:1px solid #E9E4D2;
  box-shadow:0 6px 20px rgba(15,61,28,.07);
  transition:transform .18s ease, box-shadow .18s ease;
}
.pcard:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(15,61,28,.16);
}
.pcard-media{
  position:relative; background:linear-gradient(160deg, #FBF9F2, #F1EEDF);
  aspect-ratio:1; overflow:hidden;
}
.pcard-media img{ width:100%; height:100%; object-fit:contain; padding:12px; transition:transform .25s ease; }
.pcard:hover .pcard-media img{ transform:scale(1.045); }
.t-badge{
  position:absolute; top:10px; left:10px; z-index:1;
  background:var(--gold); color:var(--gold-ink);
  font-size:.78rem; font-weight:800; letter-spacing:.02em;
  padding:5px 11px; border-radius:999px; box-shadow:0 3px 10px rgba(15,61,28,.25);
}
.pcard-body{ padding:14px 16px 16px; gap:4px; }
.pcard-cat{ font-size:.74rem; }
.pcard h3{ font-size:1.08rem; line-height:1.3; }
.t-desc{ color:var(--muted); font-size:.94rem; line-height:1.45; margin:2px 0; }
.t-stars{ color:var(--gold); letter-spacing:1px; }
.t-rating{ font-size:.9rem; color:var(--muted); margin:2px 0; }
.t-precio{ font-size:1.5rem; font-weight:850; color:var(--gd); margin:8px 0 2px; letter-spacing:-.01em; }
.t-precio-grande{ font-size:2.2rem; margin-top:0; }
.t-envio{
  display:inline-block; width:fit-content;
  background:var(--gl); color:var(--gd);
  font-size:.88rem; font-weight:700;
  padding:4px 11px; border-radius:999px; margin:4px 0 12px;
}
.t-nota-pais,.t-nota-foto{ font-size:.85rem; color:var(--muted); }
.pcard .btn{ border-radius:12px; }
.t-sin-foto{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; background:var(--gl); color:var(--muted);
  font-weight:700; font-size:.95rem; text-align:center; padding:12px;
}
.t-sin-foto-grande{ font-size:1.1rem; }

/* ---------- Ficha de producto ---------- */
.pdp-grid{ display:grid; gap:18px; align-items:start; }
@media (min-width: 840px){ .pdp-grid{ grid-template-columns:1.05fr .95fr; } }
.pdp-media{ border-radius:20px; box-shadow:var(--shadow); }
.pdp-buy{ border-radius:20px; padding:20px; }
.t-rating-ficha{ font-size:1rem; margin-bottom:14px; }
.t-garantia{
  margin-top:14px; font-size:.88rem; color:var(--muted); line-height:1.5;
  background:var(--gl); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px;
}

/* ---------- Cómo funciona tu pedido ---------- */
.t-como{ margin:36px 0 10px; }
.t-como h2{ color:var(--gd); margin-bottom:6px; }
.t-como > p{ color:var(--muted); max-width:640px; }
.t-pasos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px; margin-top:16px;
}
.t-pasos .mini{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px; box-shadow:var(--shadow);
}
.t-pasos .mini strong{ display:block; color:var(--gd); margin-bottom:5px; }
.t-pasos .mini p{ margin:0; color:var(--muted); font-size:.93rem; line-height:1.5; }
.t-paso-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6em; height:1.6em; margin-right:7px; border-radius:50%;
  background:var(--g); color:#fff; font-size:.85em; font-weight:800; vertical-align:baseline;
  box-shadow:0 3px 8px rgba(31,94,46,.35);
}