/* ============================================================
   LANDING — Carnicería Merche
   Implementación de «Landing Carniceria.dc.html» (claude.ai/design).
   Usa los tokens del design system (css/styles.css).
   Variantes resueltas: hero = "mostrador" · sección asado visible.
   ============================================================ */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone-50);
  color: var(--ink-900);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--meat-600); text-decoration: none; }
a:hover { color: var(--meat-700); }
img { display: block; }

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

/* --- Barra superior --- */
.topbar {
  background: var(--ink-900);
  color: var(--cream-100);
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
}

/* --- Cabecera fija --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bone-50) 93%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .bar {
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header .brand { display: flex; align-items: center; color: var(--ink-900); }
.site-header .brand img { height: 88px; width: auto; }
.site-header nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.site-header nav a {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink-700);
  transition: color var(--dur) var(--ease-out);
}
.site-header nav a:hover { color: var(--meat-600); }

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: var(--fw-semibold) 1rem/1 var(--font-signage);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: 18px 26px;
  border-radius: var(--radius-sm, 6px);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn-sm { padding: 16px 24px; }

.btn-brand { background: var(--meat-600); color: var(--bone-50); }
.btn-brand:hover { background: var(--meat-700); color: var(--bone-50); }

.btn-whatsapp { background: var(--whatsapp); color: #06251A; }
.btn-whatsapp:hover { background: var(--whatsapp-deep); color: #06251A; }

.btn-ghost-light { border: 1px solid color-mix(in srgb, var(--cream-100) 45%, transparent); color: var(--cream-100); }
.btn-ghost-light:hover { background: color-mix(in srgb, var(--cream-100) 12%, transparent); color: var(--cream-100); }

.btn-outline-ink { border: 1px solid var(--ink-800); color: var(--ink-900); }
.btn-outline-ink:hover { background: var(--ink-900); color: var(--cream-100); }

.btn-header {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: 12px 18px;
  box-shadow: var(--shadow-soft);
}

/* --- Tipos comunes --- */
.eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--meat-600);
}
.eyebrow-dark { color: var(--ochre-300); }

.heading {
  margin: 0;
  font: var(--fw-bold) clamp(2rem, 3.6vw, 2.9rem)/1.08 var(--font-display);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

/* --- Hero (variante mostrador) --- */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  background: var(--ink-900);
  overflow: hidden;
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.hero .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink-900) 62%, transparent) 0%,
    color-mix(in srgb, var(--ink-900) 34%, transparent) 40%,
    var(--ink-900) 100%);
}
.hero .content {
  position: relative;
  padding-top: 120px;
  padding-bottom: 72px;
  width: 100%;
  display: grid;
  gap: 26px;
}
.hero h1 {
  margin: 0;
  font: var(--fw-bold) clamp(2.5rem, 6vw, 4.4rem)/1.03 var(--font-display);
  letter-spacing: var(--ls-tight);
  color: var(--cream-100);
  max-width: 20ch;
  text-wrap: balance;
}
.hero .lead {
  margin: 0;
  font: var(--type-lead);
  color: color-mix(in srgb, var(--cream-100) 84%, transparent);
  max-width: 56ch;
  text-wrap: pretty;
}
.hero .tagline {
  margin: 0;
  font: var(--fw-semibold) 1.125rem/1.3 var(--font-signage);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ochre-300);
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .actions .note {
  font: var(--type-small);
  color: color-mix(in srgb, var(--cream-100) 70%, transparent);
  margin-left: 6px;
}

/* --- Cinta de claims --- */
.ticker { background: var(--ink-900); color: var(--cream-100); }
.ticker .row {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}
.ticker .dot { color: var(--meat-400); }

/* --- Secciones a dos columnas --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

#nosotros { padding-top: 96px; padding-bottom: 96px; }
#nosotros .copy { display: grid; gap: 20px; }
#nosotros p { margin: 0; font: var(--type-body); color: var(--ink-600); text-wrap: pretty; }
#nosotros .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  margin-top: 4px;
}
#nosotros .stats > div { display: grid; gap: 6px; }
#nosotros .stats .num { font: var(--fw-bold) 2rem/1 var(--font-signage); color: var(--meat-600); }
#nosotros .stats .lbl { font: var(--type-small); color: var(--ink-500); }

.collage { display: grid; gap: 12px; }
.collage .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.collage img { width: 100%; object-fit: cover; border-radius: var(--radius-md, 8px); }
#nosotros .collage > img { height: 320px; }
#nosotros .collage .pair img { height: 190px; }

/* --- Mapa (sección Visítanos) --- */
.map {
  width: 100%;
  height: 460px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- El mostrador --- */
.section-cream {
  background: var(--cream-100);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
#mostrador .inner { padding-top: 92px; padding-bottom: 92px; }
.section-head { display: grid; gap: 14px; max-width: 52ch; margin-bottom: 44px; }
.section-head p { margin: 0; font: var(--type-body); color: var(--ink-500); text-wrap: pretty; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.card {
  background: var(--bone-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card img { width: 100%; height: 190px; object-fit: cover; }
.card .body { padding: 22px; display: grid; gap: 8px; }
.card .cat {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--meat-600);
}
.card h3 { margin: 0; font: var(--type-h3); }
.card p { margin: 0; font: var(--type-small); color: var(--ink-500); text-wrap: pretty; }

/* --- Servicios --- */
#servicios { padding-top: 96px; padding-bottom: 96px; }
#servicios .section-head { max-width: 46ch; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.feature {
  display: grid;
  gap: 12px;
  align-content: start;
  background: var(--kraft-100);
  border-radius: var(--radius-md, 8px);
  padding: 26px;
}
.feature h3 { margin: 0; font: var(--type-h3); }
.feature p { margin: 0; font: var(--type-small); color: var(--ink-600); text-wrap: pretty; }

/* --- Proveedores --- */
.providers { background: var(--ink-900); color: var(--cream-100); }
.providers .inner { padding-top: 72px; padding-bottom: 72px; display: grid; gap: 36px; }
.providers .head { display: grid; gap: 12px; max-width: 52ch; }
.providers h2 {
  margin: 0;
  font: var(--fw-bold) clamp(1.7rem, 3vw, 2.3rem)/1.1 var(--font-display);
  letter-spacing: var(--ls-tight);
  color: var(--cream-100);
}
.providers .head p {
  margin: 0;
  font: var(--type-body);
  color: color-mix(in srgb, var(--cream-100) 72%, transparent);
  text-wrap: pretty;
}
.providers .logos {
  list-style: none;
  margin: 0;
  padding: 30px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--cream-100) 14%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 36px 64px;
  align-items: center;
}
.providers .logos li { display: flex; }
.providers .logos img {
  /* versiones en blanco pre-renderizadas (img/proveedores/*-blanco.png):
     el filtro CSS fallaba con logos de fondo interior opaco como el de ElPozo */
  height: 52px;
  width: auto;
  opacity: 0.82;
  transition: opacity var(--dur) var(--ease-out);
}
.providers .logos li:hover img { opacity: 1; }
.providers .logos img.logo-tall { height: 84px; }

/* --- Banda asado --- */
.asado {
  position: relative;
  background: var(--ink-900);
  color: var(--cream-100);
  overflow: hidden;
}
.asado > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.asado .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--ink-900) 8%,
    color-mix(in srgb, var(--ink-900) 62%, transparent) 68%,
    color-mix(in srgb, var(--ink-900) 22%, transparent) 100%);
}
.asado .content {
  position: relative;
  padding-top: 88px;
  padding-bottom: 88px;
  display: grid;
  gap: 20px;
}
.asado h2 {
  margin: 0;
  font: var(--fw-bold) clamp(1.9rem, 3.6vw, 2.8rem)/1.1 var(--font-display);
  letter-spacing: var(--ls-tight);
  color: var(--cream-100);
  max-width: 26ch;
  text-wrap: balance;
}
.asado .lead {
  margin: 0;
  font: var(--type-lead);
  color: color-mix(in srgb, var(--cream-100) 80%, transparent);
  max-width: 54ch;
  text-wrap: pretty;
}
.asado .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* --- Visítanos --- */
#visitanos { background: var(--cream-100); border-top: 1px solid var(--hairline); }
#visitanos .inner { padding-top: 92px; padding-bottom: 92px; }
#visitanos .copy { display: grid; gap: 24px; }
.info-list { display: grid; gap: 18px; border-top: 1px solid var(--hairline); padding-top: 22px; }
.info-list > div { display: grid; gap: 4px; }
.info-list .lbl {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--ink-500);
}
.info-list .val { font: var(--type-body); color: var(--ink-900); }
.info-list a.val { color: var(--meat-600); }
#visitanos .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Pie --- */
.site-footer { background: var(--ink-900); color: color-mix(in srgb, var(--cream-100) 72%, transparent); }
.site-footer .inner {
  padding-top: 52px;
  padding-bottom: 52px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  justify-content: space-between;
}
.site-footer .brand { display: flex; align-items: center; gap: 18px; }
.site-footer .brand img { height: 76px; width: auto; }
.site-footer .brand .txt { display: grid; gap: 8px; }
.site-footer .brand .kicker {
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--meat-300);
}
.site-footer .brand .tagline {
  font: var(--fw-semibold) 1.0625rem/1.3 var(--font-signage);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--cream-100);
}
.site-footer .brand .addr { font: var(--type-small); }
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.site-footer nav a { color: var(--cream-100); transition: color var(--dur) var(--ease-out); }
.site-footer nav a:hover { color: var(--ochre-300); }

/* --- Páginas legales --- */
.site-header .back {
  margin-left: auto;
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink-700);
  transition: color var(--dur) var(--ease-out);
}
.site-header .back:hover { color: var(--meat-600); }

.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 96px;
}
.legal-main h1 {
  margin: 0 0 10px;
  font: var(--fw-bold) clamp(2rem, 4vw, 2.8rem)/1.1 var(--font-display);
  letter-spacing: var(--ls-tight);
}
.legal-main .updated { margin: 0 0 40px; font: var(--type-small); color: var(--ink-500); }
.legal-main h2 { margin: 40px 0 12px; font: var(--type-h3); }
.legal-main p, .legal-main li { font: var(--type-body); color: var(--ink-600); text-wrap: pretty; }
.legal-main p { margin: 0 0 14px; }
.legal-main ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }
.legal-main strong { color: var(--ink-900); }
.legal-main .datos {
  background: var(--cream-100);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 8px);
  padding: 22px 24px;
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}
.legal-main .datos div { font: var(--type-body); color: var(--ink-600); }

/* --- Enlaces legales del pie --- */
.site-footer .legal-links {
  border-top: 1px solid color-mix(in srgb, var(--cream-100) 14%, transparent);
  padding: 18px 24px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: center;
  font: var(--type-small);
}
.site-footer .legal-links a { color: color-mix(in srgb, var(--cream-100) 72%, transparent); transition: color var(--dur) var(--ease-out); }
.site-footer .legal-links a:hover { color: var(--ochre-300); }

/* --- Responsive --- */
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  #nosotros, #servicios { padding-top: 64px; padding-bottom: 64px; }
  #mostrador .inner, #visitanos .inner { padding-top: 64px; padding-bottom: 64px; }
  .hero .content { padding-top: 88px; padding-bottom: 56px; }
  .map { height: 340px; }
  .providers .inner { padding-top: 56px; padding-bottom: 56px; }
  .providers .logos { gap: 28px 40px; }
  .providers .logos img { height: 44px; }
  .providers .logos img.logo-tall { height: 68px; }
}

@media (max-width: 760px) {
  /* Cabecera compacta: logo + CTA en la primera fila, nav deslizable debajo */
  .site-header .bar { flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
  .site-header .brand img { height: 56px; }
  .site-header .btn-header { margin-left: auto; padding: 11px 14px; }
  .site-header nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { white-space: nowrap; padding: 4px 0; }

  .btn { padding: 15px 20px; }

  .hero { min-height: 540px; }
  .hero .content { padding-top: 64px; padding-bottom: 44px; gap: 18px; }
  .hero .actions .note { margin-left: 0; flex-basis: 100%; }

  .ticker .row { gap: 8px 14px; padding-top: 16px; padding-bottom: 16px; }

  .asado .content { padding-top: 56px; padding-bottom: 56px; }

  .site-footer .inner { padding-top: 40px; padding-bottom: 36px; gap: 22px; }
  .site-footer .brand { flex-wrap: wrap; gap: 14px; }
  .site-footer .brand img { height: 60px; }
}

@media (max-width: 480px) {
  .topbar { font-size: 0.75rem; letter-spacing: var(--ls-wide); padding: 8px 12px; }
  .topbar .hide-sm { display: none; }

  .container { padding-left: 18px; padding-right: 18px; }

  /* CTAs a ancho completo: objetivo táctil grande y sin filas desiguales */
  .hero .actions .btn,
  .asado .actions .btn,
  #visitanos .actions .btn { width: 100%; justify-content: center; }

  #nosotros .stats { gap: 18px 28px; }
  #nosotros .collage > img { height: 240px; }
  #nosotros .collage .pair img { height: 150px; }
  .card img { height: 170px; }
  .map { height: 300px; }
  .providers .logos { gap: 22px 32px; }
}