/* =====================================================================
   Bodega Martina — sitio público (portada + catálogo)
   Paleta y tipografía tomadas del cartel real del local
   (assets/img/fondoimg.jpg): fondo mostaza, letras terracota, franja
   verde pino, contorno crema. No es la misma identidad que el panel
   Admin (grafito+marigold) — esta es la que ve el cliente.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Karla:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
  --marigold: #f2a91a;
  --marigold-deep: #d6890a;
  --terracotta: #c6401f;
  --terracotta-deep: #9e3016;
  --pine: #2e6b4c;
  --pine-deep: #1f4d37;
  --cream: #fbf2de;
  --cream-card: #fffdf7;
  --charcoal: #2b2013;
  --charcoal-muted: #7a6c55;
  --sky: #8fcbe0;
  --sky-deep: #3c7e96;
  --dustyrose: #b5646f;
  --plum: #7a4a63;
  --border: #e7d6ae;

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Karla', system-ui, sans-serif;

  --radius-sign: 14px;
  --radius-card: 18px;
  --shadow-card: 0 10px 24px rgba(43, 32, 19, 0.1);
  --shadow-lift: 0 16px 32px rgba(43, 32, 19, 0.16);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--pine);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------------
   Header compartido: wordmark + link discreto al panel Admin
   --------------------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--terracotta);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.wordmark span {
  color: var(--pine);
}

.staff-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--charcoal-muted);
  text-decoration: none;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.staff-link:hover {
  border-color: var(--pine);
  color: var(--pine);
}

/* ---------------------------------------------------------------------
   Firma visual: la "mini-señalética" — cada chip de categoría y cada
   cinta de oferta es una versión pequeña del cartel real del local
   (fondo mostaza, borde terracota grueso, ligera inclinación al pasar
   el mouse). Es el único elemento que se repite a propósito en toda
   la página, para que quede grabado.
   --------------------------------------------------------------------- */
.sign-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--terracotta-deep);
  background: var(--marigold);
  border: 2px solid var(--terracotta);
  border-radius: var(--radius-sign);
  padding: 9px 18px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--terracotta-deep);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.sign-chip:hover {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 0 6px 0 var(--terracotta-deep);
}

.sign-chip:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--terracotta-deep);
}

.sign-chip--ghost {
  background: transparent;
  color: var(--terracotta);
  box-shadow: none;
  border-style: dashed;
}

.sign-chip--ghost:hover {
  background: var(--marigold);
  color: var(--terracotta-deep);
  box-shadow: 0 4px 0 var(--terracotta-deep);
}

.sign-chip--active {
  background: var(--terracotta);
  border-color: var(--terracotta-deep);
  color: var(--cream);
  box-shadow: 0 4px 0 var(--terracotta-deep);
}

.sign-chip__icon {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Landing — hero tipo cartel colgante
   --------------------------------------------------------------------- */
.hero {
  padding: 24px 24px 72px;
  max-width: 1180px;
  margin: 0 auto;
}

.hero-board {
  position: relative;
  background: var(--marigold);
  border: 4px solid var(--terracotta);
  border-radius: 28px;
  padding: 56px 40px;
  text-align: center;
  transform: rotate(-0.6deg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.hero-board::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(198, 64, 31, 0.35);
  border-radius: 20px;
  pointer-events: none;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pine-deep);
  margin-bottom: 14px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: var(--terracotta);
  text-shadow: 2px 2px 0 var(--cream);
  line-height: 1.05;
  margin-bottom: 18px;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--terracotta-deep);
  font-weight: 500;
  max-width: 480px;
  margin: 0 auto 32px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.btn-primary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cream);
  background: var(--pine);
  border: none;
  border-radius: 999px;
  padding: 16px 34px;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--pine-deep);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--pine-deep);
}

.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--pine-deep);
}

.btn-whatsapp {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--pine-deep);
  background: var(--cream);
  border: 2px solid var(--pine);
  border-radius: 999px;
  padding: 14px 30px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.btn-whatsapp:hover {
  background: var(--pine);
  color: var(--cream);
}

/* Franja verde tipo la de abajo del cartel real */
.hero-strip {
  background: var(--pine);
  border-radius: 999px;
  padding: 12px 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 620px;
  margin: 0 auto;
}

.hero-strip span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hero-strip span + span::before {
  content: '·';
  margin-right: 10px;
  opacity: .6;
}

/* Categorías rápidas */
.quick-categories {
  padding: 8px 24px 64px;
  max-width: 1180px;
  margin: 0 auto;
}

.quick-categories h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--charcoal);
  text-align: center;
  margin-bottom: 24px;
}

.category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.site-footer {
  border-top: 2px solid var(--border);
  padding: 28px 24px 40px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--charcoal-muted);
}

.site-footer a {
  color: var(--pine-deep);
  font-weight: 700;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   Catálogo
   --------------------------------------------------------------------- */
.catalog-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cream);
  border-bottom: 2px solid var(--border);
  padding: 16px 0;
}

.catalog-topbar-row {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  flex-wrap: wrap;
}

.catalog-back {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--terracotta);
  text-decoration: none;
  font-size: 1.1rem;
  flex: none;
}

.search-field {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}

.search-field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 18px 12px 42px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--cream-card);
  color: var(--charcoal);
}

.search-field input:focus {
  border-color: var(--pine);
  outline: none;
}

.search-field svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--charcoal-muted);
  pointer-events: none;
}

.category-scroll {
  max-width: 1180px;
  margin: 14px auto 0;
  padding: 0 24px 4px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.category-scroll .sign-chip {
  flex: none;
  padding: 7px 16px;
  font-size: 0.85rem;
}

.result-count {
  max-width: 1180px;
  margin: 18px auto 4px;
  padding: 0 24px;
  font-size: 0.88rem;
  color: var(--charcoal-muted);
  font-weight: 500;
}

.product-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px 80px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.product-card {
  background: var(--cream-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  position: relative;
  animation: card-in .4s var(--ease) both;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-media {
  aspect-ratio: 4 / 3;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-monogram {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--cream);
}

.promo-ribbon {
  position: absolute;
  top: 10px;
  left: -6px;
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 5px 14px 5px 18px;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.promo-ribbon::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  border-style: solid;
  border-width: 0 6px 6px 0;
  border-color: transparent var(--terracotta-deep) transparent transparent;
}

.product-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--charcoal);
  min-height: 2.5em;
  overflow-y: auto;
  line-height: 1.3;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.tag--modalidad {
  background: rgba(46, 107, 76, 0.12);
  color: var(--pine-deep);
}

.tag--ubicacion {
  background: rgba(143, 203, 224, 0.28);
  color: #235066;
}

.product-footer {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.product-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--terracotta);
}

.product-price small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--charcoal-muted);
  text-transform: none;
}

.product-promo-price {
  font-size: 0.78rem;
  color: var(--pine-deep);
  font-weight: 700;
}

.empty-state, .error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--charcoal-muted);
}

.empty-state .sign-chip, .error-state .sign-chip {
  margin-top: 16px;
}

.empty-state h3, .error-state h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.skeleton-card {
  background: var(--cream-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.skeleton-media, .skeleton-line {
  background: linear-gradient(90deg, var(--border) 25%, #f3e8c9 37%, var(--border) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton-media {
  aspect-ratio: 4/3;
}

.skeleton-line {
  height: 12px;
  margin: 16px 18px;
  border-radius: 6px;
}

.skeleton-line.short { width: 50%; }

@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-board { padding: 40px 22px; }
  .hero-title { font-size: clamp(2rem, 10vw, 2.8rem); }
  .catalog-topbar-row { gap: 10px; }
  .catalog-back { font-size: 1.4rem; }
  .catalog-back .catalog-back-label { display: none; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .product-body { padding: 12px 14px 14px; }
}