/* ==========================================================
   Hogar & Cocina — estilos (recreación de hogarcocina.es)
   Los colores principales están aquí arriba, en :root
   ========================================================== */
:root {
  --background: 36 44% 96%;
  --foreground: 24 24% 13%;
  --card: 0 0% 100%;
  --primary: 14 66% 42%;          /* terracota (botones y precios) */
  --primary-foreground: 36 44% 97%;
  --secondary: 40 92% 52%;        /* amarillo/ámbar (detalles) */
  --secondary-foreground: 24 24% 13%;
  --muted: 36 30% 91%;
  --muted-foreground: 26 12% 38%;
  --destructive: 0 84% 60%;       /* rojo de "Ahorra X%" */
  --border: 30 24% 84%;
  --radius: .75rem;
  --header-bg: 24 26% 10%;
  --footer-bg: 24 26% 10%;
  --footer-text: 36 14% 68%;
  --footer-accent: 40 92% 52%;
  --zinc-50: #fafafa; --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a;
  --zinc-700: #3f3f46; --zinc-800: #27272a; --zinc-900: #18181b;
}

*, *::before, *::after { box-sizing: border-box; border: 0 solid hsl(var(--border)); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; line-height: 1.5; overflow-x: clip;
  font-family: "Nunito Sans", sans-serif;
  background-color: hsl(var(--background)); color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; cursor: pointer; padding: 0; }
svg.icon { width: 1rem; height: 1rem; flex-shrink: 0; }

.font-display { font-family: Lora, serif; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.container { width: 100%; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px)  { .container { max-width: 640px; padding: 0 1.5rem; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; padding: 0 2rem; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap; border-radius: calc(var(--radius) - 2px); font-size: .875rem; line-height: 1.25rem;
  font-weight: 600; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: all .2s;
}
.btn:hover { background: hsl(var(--primary) / .9); }
.btn:active { transform: scale(.98); }
.btn-lg { height: 2.5rem; padding: 0 2rem; }
.btn-md { height: 2.25rem; padding: .5rem 1rem; }
.btn svg { width: 1rem; height: 1rem; }

/* ---------- Cabecera ---------- */
.header {
  position: sticky; top: 0; z-index: 50; width: 100%;
  border-bottom: 1px solid rgb(255 255 255 / .1);
  background: hsl(var(--header-bg)); color: var(--zinc-50);
  box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}
.header-row { display: flex; height: 4rem; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo span { font-family: Lora, serif; font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--zinc-50); }
.logo .amp { color: hsl(var(--secondary)); }
.nav { display: none; flex: 1; justify-content: center; align-items: center; gap: 1.5rem; padding: 0 1rem; overflow-x: auto; }
.nav a { font-size: .875rem; font-weight: 500; white-space: nowrap; transition: color .15s; }
.nav a:hover, .nav a.active { color: hsl(var(--secondary)); }
.header-tools { display: none; align-items: center; gap: .75rem; flex-shrink: 0; }
.menu-toggle { display: block; padding: .5rem; margin-right: -.5rem; color: var(--zinc-300); }
.menu-toggle:hover { color: var(--zinc-50); }
.menu-toggle svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 768px) {
  .nav, .header-tools { display: flex; }
  .menu-toggle { display: none; }
}

.selector { position: relative; }
.selector-button {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: var(--radius);
  border: 1px solid var(--zinc-700); background: var(--zinc-900); padding: .5rem .75rem;
  font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--zinc-300); transition: all .2s;
}
.selector-button:hover { background: var(--zinc-800); color: var(--zinc-50); }
.selector-button .chev { transition: transform .2s; }
.selector.open .chev { transform: rotate(180deg); }
.selector-dropdown {
  display: none; position: absolute; right: 0; z-index: 50; margin-top: .5rem; width: 12rem; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--zinc-700); background: var(--zinc-900);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
.selector.open .selector-dropdown { display: block; }
.selector-option { display: flex; width: 100%; align-items: center; padding: .625rem 1rem; text-align: left; font-size: .875rem; color: var(--zinc-300); }
.selector-option:hover { background: var(--zinc-800); color: var(--zinc-50); }
.selector-option.active { background: var(--zinc-800); font-weight: 600; color: hsl(var(--secondary)); }

.mobile-menu { display: none; border-top: 1px solid rgb(255 255 255 / .1); padding: 1rem 0; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: .5rem 0; font-size: .875rem; font-weight: 500; }
.mobile-menu a.active { color: hsl(var(--secondary)); }
.mobile-menu .header-tools { display: flex; margin-top: .75rem; }
@media (min-width: 768px) { .mobile-menu, .mobile-menu.open { display: none; } }

/* ---------- Portada (hero) ---------- */
.hero { padding: 4rem 0 3.5rem; position: relative; overflow: hidden; }
@media (min-width: 768px) { .hero { padding: 6rem 0 5rem; } }
.hero-text { max-width: 48rem; margin: 0 auto; text-align: center; }
.pill {
  display: inline-flex; align-items: center; gap: .5rem; background: hsl(var(--secondary) / .5);
  color: hsl(var(--secondary-foreground)); padding: .375rem 1rem; border-radius: 9999px;
  font-size: .875rem; line-height: 1.25rem; font-weight: 600; margin-bottom: 1.5rem;
}
.hero h1 { font-family: Lora, serif; font-size: 2.25rem; line-height: 1.25; font-weight: 700; margin-bottom: 1.5rem; }
@media (min-width: 768px)  { .hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3.75rem; } }
.hero-lead { font-size: 1.125rem; line-height: 1.625; color: hsl(var(--muted-foreground)); max-width: 65ch; margin: 0 auto 2rem; }
@media (min-width: 768px) { .hero-lead { font-size: 1.25rem; } }
.hero-figure { margin: 3rem auto 0; max-width: 64rem; }
@media (min-width: 768px) { .hero-figure { margin-top: 4rem; } }
.hero-frame { border-radius: 1rem; overflow: hidden; border: 1px solid hsl(var(--border)); box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); }
.hero-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-caption { text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)); margin-top: .75rem; font-style: italic; }

/* ---------- Ventajas ---------- */
.features { padding: 2.5rem 0; border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card) / .6); }
.features-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
.feature { display: flex; align-items: flex-start; gap: 1rem; }
.feature-icon { background: hsl(var(--primary) / .1); padding: .75rem; border-radius: .75rem; flex-shrink: 0; color: hsl(var(--primary)); }
.feature-icon svg { width: 1.5rem; height: 1.5rem; display: block; }
.feature h3 { font-family: Lora, serif; font-weight: 600; margin-bottom: .25rem; }
.feature p { font-size: .875rem; line-height: 1.625; color: hsl(var(--muted-foreground)); }

/* ---------- Productos ---------- */
.products { padding: 4rem 0; }
.section-title { font-size: 1.5rem; line-height: 1.375; font-weight: 600; margin-bottom: 2rem; }
@media (min-width: 768px) { .section-title { font-size: 1.875rem; } }
.grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; cursor: pointer;
  border-radius: .75rem; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--card));
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); transition: all .3s;
}
.card:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); transform: translateY(-.25rem); }
.card-badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 10; background: hsl(var(--destructive)); color: #fafafa;
  padding: .25rem .625rem; border-radius: calc(var(--radius) - 2px); font-size: .875rem; line-height: 1.25rem;
  font-weight: 700; letter-spacing: .025em; box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}
.card-image { aspect-ratio: 4 / 3; overflow: hidden; background: hsl(var(--muted)); position: relative; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-image img { transform: scale(1.05); }
.card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card-title {
  font-size: 1.125rem; line-height: 1.375; font-weight: 700; margin-bottom: .5rem; text-wrap: balance; max-height: calc(1.375em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-desc {
  font-size: .875rem; line-height: 1.625; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; flex: 1; max-height: calc(1.625em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-prices { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; gap: .25rem; }
.price-old { font-size: .875rem; color: hsl(var(--muted-foreground)); text-decoration: line-through; font-weight: 500; }
.price { font-size: 1.5rem; line-height: 2rem; font-weight: 800; color: hsl(var(--primary)); letter-spacing: -.025em; }
.card .btn { width: 100%; margin-top: 1.25rem; }
.price-time { font-size: .75rem; color: hsl(var(--muted-foreground)); }
.price.muted { font-size: 1.05rem; color: hsl(var(--muted-foreground)); font-weight: 700; }
.card-badge.agotado { background: hsl(24 10% 40%); }
.card.is-agotado .card-image img { filter: grayscale(.6); opacity: .8; }
.btn.btn-soft { background: hsl(var(--muted)); color: hsl(var(--foreground)); box-shadow: none; }
.btn.btn-soft:hover { background: hsl(36 30% 86%); }
.price-note { margin-top: 1.5rem; font-size: .8rem; line-height: 1.5; color: hsl(var(--muted-foreground)); max-width: 70ch; }
.empty { color: hsl(var(--muted-foreground)); }

/* ---------- Página de categoría ---------- */
.cat-hero { padding: 4rem 0; background: linear-gradient(to bottom, hsl(var(--primary) / .05), hsl(var(--background))); border-bottom: 1px solid hsl(var(--border) / .5); }
@media (min-width: 768px) { .cat-hero { padding: 5rem 0; } }
.cat-hero h1 { font-family: Lora, serif; font-size: 2.25rem; line-height: 1.25; font-weight: 700; margin-bottom: 1rem; }
@media (min-width: 768px) { .cat-hero h1 { font-size: 3rem; } }
.cat-hero p { font-size: 1.125rem; line-height: 1.625; color: hsl(var(--muted-foreground)); }

/* ---------- Pie de página ---------- */
.footer { border-top: 1px solid var(--zinc-800); background: hsl(var(--footer-bg)); color: hsl(var(--footer-text)); }
.footer-inner { padding-top: 3rem; padding-bottom: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 768px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } .footer-brand { grid-column: span 2; } }
.footer-grid > div > * + * { margin-top: 1rem; }
.footer-brand p { max-width: 24rem; line-height: 1.625; color: var(--zinc-400); }
.footer-brand .logo .amp { color: hsl(var(--footer-accent)); }
.footer h3 { font-size: 1rem; font-weight: 600; color: var(--zinc-50); letter-spacing: .025em; }
.footer li + li { margin-top: .75rem; }
.footer li a { color: var(--zinc-400); transition: color .15s; }
.footer li a:hover { color: hsl(var(--secondary)); }
.footer-bottom { padding-top: 2rem; border-top: 1px solid rgb(39 39 42 / .5); display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; } }
.footer-bottom p { font-size: .875rem; color: var(--zinc-500); }

/* ---------- Política de privacidad ---------- */
.legal { padding: 3rem 0 4rem; }
.legal .container { max-width: 56rem; }
.legal-head { margin-bottom: 2.5rem; text-align: center; }
@media (min-width: 768px) { .legal-head { text-align: left; } }
.legal-icon { display: inline-flex; padding: .75rem; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border-radius: .75rem; margin-bottom: 1.5rem; }
.legal-icon svg { width: 2rem; height: 2rem; }
.legal-head h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; letter-spacing: -.025em; margin-bottom: 1rem; }
@media (min-width: 768px) { .legal-head h1 { font-size: 3rem; line-height: 1; } }
.legal-head p { color: hsl(var(--muted-foreground)); font-size: 1.125rem; }
.legal-card { border-radius: .75rem; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--card)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); overflow: hidden; }
.legal-body { padding: 1.5rem; }
@media (min-width: 768px) { .legal-body { padding: 2.5rem; } }
.legal-body > hr { border: 0; height: 1px; background: hsl(var(--border)); margin: 3rem 0; }
.legal h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.legal h2 .bar { width: .375rem; height: 1.5rem; background: hsl(var(--primary)); border-radius: 9999px; display: inline-block; }
.prose { color: hsl(var(--muted-foreground)); line-height: 1.625; }
.prose > * + * { margin-top: 1rem; }
.prose strong { color: hsl(var(--foreground)); font-weight: 600; }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose li + li { margin-top: .5rem; }
.note { font-weight: 500; color: hsl(var(--foreground)); padding: 1rem; background: hsl(var(--muted)); border-radius: .5rem; border: 1px solid hsl(var(--border) / .5); }
.two-cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1rem; }
@media (min-width: 768px) { .two-cols { grid-template-columns: repeat(2, 1fr); } }
.two-cols > div { background: hsl(var(--background)); padding: 1.25rem; border-radius: .75rem; border: 1px solid hsl(var(--border)); }
.two-cols h4 { font-weight: 600; color: hsl(var(--foreground)); margin-bottom: .5rem; }
.two-cols ul { font-size: .875rem; }
.two-cols li + li { margin-top: .25rem; }
.contact-box { background: hsl(var(--muted)); padding: 1.5rem; border-radius: .75rem; border: 1px solid hsl(var(--border) / .5); }
.contact-box p { color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }
.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: .5rem 1rem; font-size: .875rem; font-weight: 500;
  border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(36 28% 88%); background: hsl(var(--background));
  box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: background .15s;
}
.btn-outline:hover { background: hsl(84 24% 36%); color: hsl(var(--primary-foreground)); }