/* =========================================================================
   Creaciones Añilco — Identidad visual "mercado local artesanal"
   Inspirada en el logo pirograbado sobre tronco: madera, grabado, greca.
   ========================================================================= */

:root {
  --madera:        #9B6B43;  /* café roble */
  --madera-clara:  #C89968;  /* madera iluminada */
  --pirograbado:   #2E1E17;  /* líneas grabadas / texto */
  --dorado:        #DDA76A;  /* luz crepúsculo / acentos */
  --bosque:        #2A3E26;  /* verde follaje */
  --crema:         #F4EBDD;  /* fondo cálido tipo papel */
  --crema-oscura:  #E8D9C3;  /* superficie */
  --humo:          #6E6B7B;  /* texto secundario */

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
}

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

body {
  font-family: var(--sans);
  color: var(--pirograbado);
  /* Fondo con textura sutil de vetas de madera mediante gradientes */
  background-color: var(--crema);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(155,107,67,0.03) 0px,
      rgba(155,107,67,0.03) 2px,
      transparent 2px,
      transparent 7px);
  line-height: 1.65;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; color: var(--pirograbado); }

a { color: var(--madera); text-decoration: none; }
a:hover { color: var(--dorado); }

/* ---- Greca mapuche como borde decorativo (motivo del logo) ---- */
.greca {
  height: 22px;
  background-image:
    repeating-linear-gradient(45deg, var(--pirograbado) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(-45deg, var(--pirograbado) 0 3px, transparent 3px 8px);
  background-size: 16px 16px;
  opacity: 0.35;
  margin: 0;
}

/* ---- Cabecera ---- */
.site-header {
  background:
    linear-gradient(rgba(42,62,38,0.92), rgba(42,62,38,0.92));
  color: var(--crema);
  padding: 1.2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-header a { color: var(--crema); }
.brand {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand small {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dorado);
  margin-top: 4px;
}
.nav a { margin-left: 1.4rem; font-weight: 500; font-size: 0.95rem; }
.nav a.carrito-link {
  background: var(--dorado);
  color: var(--pirograbado);
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-weight: 600;
}

/* ---- Hero portada: mercado local ---- */
.hero {
  background:
    linear-gradient(rgba(46,30,23,0.55), rgba(46,30,23,0.75)),
    linear-gradient(135deg, var(--madera), var(--bosque));
  color: var(--crema);
  padding: 5rem 2rem;
  text-align: center;
}
.hero h1 { font-size: 3rem; margin-bottom: 0.5rem; color: var(--crema); }
.hero .sello {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.75rem;
  color: var(--dorado);
  margin-bottom: 1rem;
}
.hero p { font-size: 1.15rem; max-width: 600px; margin: 0 auto; opacity: 0.95; }

/* ---- Contenedor ---- */
.contenedor { max-width: 1150px; margin: 0 auto; padding: 3rem 2rem; }
.seccion-titulo { text-align: center; margin-bottom: 0.5rem; font-size: 2rem; }
.seccion-bajada { text-align: center; color: var(--humo); margin-bottom: 2.5rem; }

/* ---- Tarjetas de sección (las categorías como "puestos del mercado") ---- */
.grid { display: grid; gap: 1.8rem; }
.grid-secciones { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.puesto {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, var(--madera), var(--pirograbado));
  color: var(--crema);
  box-shadow: 0 6px 18px rgba(46,30,23,0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  border: 3px solid var(--madera-clara);
}
.puesto:hover { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(46,30,23,0.35); }
.puesto .puesto-info { padding: 1.4rem; width: 100%; background: linear-gradient(transparent, rgba(46,30,23,0.85)); }
.puesto h3 { color: var(--crema); font-size: 1.5rem; margin-bottom: 0.2rem; }
.puesto span { font-size: 0.85rem; color: var(--dorado); }

/* ---- Tarjetas de producto ---- */
.grid-productos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card {
  background: var(--crema-oscura);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(46,30,23,0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(46,30,23,0.2); }
.card img { width: 100%; height: 200px; object-fit: cover; background: var(--madera); }
.card .card-body { padding: 1rem 1.1rem 1.3rem; }
.card h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.card .precio { color: var(--madera); font-weight: 700; font-size: 1.2rem; font-family: var(--sans); }
.card .sin-foto {
  height: 200px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--madera), var(--pirograbado));
  color: var(--dorado); font-family: var(--serif); font-size: 1.3rem;
}

/* ---- Botones ---- */
.btn {
  display: inline-block;
  background: var(--dorado);
  color: var(--pirograbado);
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  font-size: 1rem;
}
.btn:hover { background: var(--madera); color: var(--crema); }
.btn-bosque { background: var(--bosque); color: var(--crema); }
.btn-bosque:hover { background: var(--pirograbado); }

/* ---- Footer ---- */
.site-footer { background: var(--pirograbado); color: var(--crema-oscura); padding: 2.5rem 2rem; text-align: center; }
.site-footer .brand-foot { font-family: var(--serif); font-size: 1.4rem; color: var(--dorado); margin-bottom: 0.4rem; }
.site-footer small { color: var(--humo); }

/* ---- Accesibilidad ---- */
a:focus, button:focus, .btn:focus { outline: 3px solid var(--dorado); outline-offset: 2px; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .site-header { flex-direction: column; text-align: center; }
  .nav a { margin: 0 0.5rem; }
  .hero { padding: 3.5rem 1.5rem; }
  .hero h1 { font-size: 2.2rem; }
  .contenedor { padding: 2rem 1.2rem; }
}