/* ============================================================
   AYM — Diseño v2 "vidriera flotante" (basado en DESIGN.md)
   Capa que se carga DESPUÉS de design-system.css y solo si existe
   el marcador ROOT_PATH/design-v2.on (hoy: solo en el equipo 192.168.1.55).
   Sin marcador = el sitio se ve exactamente como antes.

   Traducción de DESIGN.md a la paleta AyM:
     canvas gris frío  #f2f4f5 -> crema muy claro   #F7F3EC
     superficie        #ffffff -> blanco (cards, inputs, pills)
     tinta             #000000 -> marrón tierra     #3E2715 (texto) / #6B4423 (marca)
     gris secundario   #787574 -> tierra suave      #806040
     borde hairline    #ebebeb -> #EEE7DB
     acento único      violeta -> tierra #6B4423 (CTA principal + sombra teñida)
   ============================================================ */

:root {
  --cream:        #F7F3EC;           /* canvas */
  --bone:         #FFFFFF;           /* superficie */
  --border:       #EEE7DB;           /* hairline */
  --ink:          #3E2715;
  --accent:       #6B4423;
  --accent-wash:  #E9D6BF;
  --shadow:       rgba(62,39,21,.08) 0 4px 6px -1px, rgba(62,39,21,.08) 0 2px 4px -2px;
  --shadow-hover: rgba(62,39,21,.12) 0 12px 28px -6px, rgba(62,39,21,.08) 0 4px 8px -2px;
  --shadow-sm:    rgba(62,39,21,.06) 0 2px 8px 0;
  --shadow-lg:    rgba(62,39,21,.12) 0 4px 24px 0;
  --shadow-accent: rgba(107,68,35,.34) 0 4px 24px 0;
  --radius-card:  28px;
  --radius-img:   20px;
}

/* ── Tipografía: una sola familia, jerarquía por tracking, sin negritas pesadas ── */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--cream);
  color: var(--ink);
  font-size: 16px;
  letter-spacing: -0.011em;
}
h1, h2, h3, h4 { letter-spacing: -0.035em; color: var(--ink); }
h1 { letter-spacing: -0.045em; }
.font-bold, .font-extrabold, .font-black, b, strong { font-weight: 600 !important; }
.btn-primary, .btn-secondary, .btn-ghost, .cat-chip,
.promo-strip, input, select, textarea, button { font-family: inherit !important; }
.uppercase.tracking-wider, .uppercase.tracking-widest { letter-spacing: 0.06em !important; font-weight: 500 !important; }

/* ── Cinta superior: banda oscura sólida, fina ── */
.promo-strip { background: var(--ink); font-weight: 500; letter-spacing: -0.005em; }

/* ── Header flotante: superficie blanca, sin borde, sombra suave ── */
#site-header {
  background: rgba(255,255,255,.92) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Botones: pills. El CTA principal es el ÚNICO color saturado ── */
.btn-primary {
  background-color: var(--accent);
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background-color: var(--ink); color: #fff; box-shadow: var(--shadow-accent); }
.btn-secondary, .btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover, .btn-ghost:hover { background: #fff; color: var(--ink); border-color: var(--accent-wash); }

/* ── Tarjetas de producto: blancas, 28px, sin borde, "marco" de 8px alrededor de la foto ── */
.product-card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 8px 8px 16px;
  box-shadow: var(--shadow);
  border: none;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.product-card [style*="aspect-ratio:1/1"] { border-radius: var(--radius-img) !important; background: var(--cream) !important; }
.product-card > div:not([class*="relative"]):not(.card-link),
.product-card > .p-4, .product-card > .px-4 { padding-left: 8px; padding-right: 8px; }
.product-card .pc-title { font-weight: 600 !important; letter-spacing: -0.02em; font-size: 15px !important; color: var(--ink) !important; }
.product-card .pc-brand { color: var(--earth-soft) !important; font-weight: 400 !important; }
.product-card .btn-favorito { box-shadow: var(--shadow-sm) !important; }

/* ── Chips de categoría: pill blanca + hairline + sombra mínima ── */
.cat-chip {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 9999px !important;
  box-shadow: var(--shadow-sm);
  color: var(--ink) !important;
  font-weight: 500 !important;
}

/* ── Inputs: pills (textarea con 20px) ── */
.input-field, input[type="text"].input-field, input[type="email"], input[type="tel"], input[type="password"], select.input-field {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding-left: 1.1rem; padding-right: 1.1rem;
}
textarea.input-field, textarea { border-radius: 20px !important; }
.input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(107,68,35,.10); }

/* Buscador del nav (desktop popover + drawer mobile): pill con submit circular del acento */
#search-pop { background: #fff !important; border: 1px solid var(--border) !important; border-radius: 9999px !important; padding: 4px 4px 4px 14px !important; box-shadow: var(--shadow-lg) !important; }
#search-pop .btn-primary, form[action$="/productos"] .btn-primary { border-radius: 9999px; }

/* ── Tarjetas y bloques genéricos: blancas, 28px, sombra en vez de borde ── */
.feature-card, .filtros-card, .card, .perk {
  background: #fff !important;
  border: none !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow);
}
.rounded-2xl, .rounded-3xl { border-radius: var(--radius-card) !important; }
.rounded-xl { border-radius: var(--radius-img) !important; }
.shadow, .shadow-sm, .shadow-md { box-shadow: var(--shadow) !important; }
.border-border, .border-border\/40 { border-color: var(--border) !important; }

/* Badges / pills de estado: más planos */
.save-pill { font-weight: 500; }

/* ── Ritmo vertical más aireado entre secciones grandes ── */
main > section + section, body > section + section { margin-top: 1.5rem; }
@media (min-width: 768px) {
  main > section, body > section { padding-top: 4rem; padding-bottom: 4rem; }
  .hero-section { padding-top: 1rem !important; padding-bottom: 0 !important; }
}

/* ── Footer: banda oscura de la marca ── */
footer { background: var(--ink) !important; }
footer .footer-title { letter-spacing: 0.06em; font-weight: 600; }

/* ── Paginación ── */
.pagination a, .pagination span, #pager a, #pager span { border-radius: 9999px !important; }

/* ── Un solo acento: el CTA del catálogo pasa al tierra, sin flotar ── */
.cta-catalogo { background: var(--accent) !important; box-shadow: var(--shadow-accent) !important; animation: none !important; font-weight: 500 !important; }
.cta-catalogo:hover { background: var(--ink) !important; }

/* Botón redondo "+" del catálogo: mismo acento que el CTA, con la sombra teñida */
.add-to-cart[style*="var(--caramel)"] { background: var(--accent) !important; color: #fff !important; box-shadow: var(--shadow-accent); }
.add-to-cart[style*="var(--caramel)"] svg, .add-to-cart[style*="var(--caramel)"] i { color: #fff !important; }

/* ── Sin decoración: fuera las huellitas de fondo ── */
.paw-deco { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .product-card:hover { transform: none; }
}