/* ============================================================
   AYM Design System — CSS variables, components & animations
   ============================================================ */

:root {
  --cream:        #F5EFE6;
  --bone:         #FAFAF7;
  --earth:        #6B4423;
  --earth-soft:   #806040;  /* oscurecido de #8B6B47: sobre crema pasa de 4,28:1 a ~5,0:1 (WCAG AA texto chico) */
  --coffee:       #A67B5B;
  --caramel:      #D4A574;
  --caramel-dark: #B8895A;
  --sage:         #5F7050;
  --sage-dark:    #6F8060;
  --terracotta:   #C97B5A;
  --peach:        #F4D5B3;
  --success:      #7A9B5E;
  --error:        #C0392B;
  --border:       #E8E2D5;
  --shadow:       0 4px 20px rgba(107, 68, 35, 0.08);
  --shadow-hover: 0 12px 32px rgba(107, 68, 35, 0.15);
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Baloo 2', system-ui, sans-serif;
  background-color: var(--cream);
  color: var(--earth);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--caramel);
  color: var(--earth);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: all 250ms var(--ease);
}
.btn-primary:hover {
  background-color: var(--caramel-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
  color: var(--earth);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary .btn-icon { transition: transform 250ms var(--ease); }
.btn-primary:hover .btn-icon { transform: translateX(4px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--earth);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.6875rem 1.75rem;
  border-radius: 9999px;
  border: 2px solid var(--earth);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: all 250ms var(--ease);
}
.btn-secondary:hover {
  background-color: var(--earth);
  color: var(--cream);
  transform: translateY(-2px);
  text-decoration: none;
}
.btn-secondary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--earth-soft);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.625rem 1rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 250ms var(--ease);
}
.btn-ghost:hover {
  color: var(--earth);
  background-color: rgba(107, 68, 35, 0.06);
}

/* ── Inputs ────────────────────────────────────────────────── */
.input-field {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 0.75rem;
  background-color: var(--bone);
  color: var(--earth);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  outline: none;
  transition: all 250ms var(--ease);
}
.input-field:focus {
  border-color: var(--coffee);
  box-shadow: 0 0 0 3px rgba(166, 123, 91, 0.12);
}
.input-field::placeholder { color: var(--earth-soft); opacity: 0.5; }

/* ── Product cards ─────────────────────────────────────────── */
.product-card {
  background: var(--bone);
  border-radius: 24px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
  position: relative;
  overflow: visible;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.product-card:hover .product-img {
  transform: scale(1.05);
}
.product-img {
  transition: transform 400ms var(--ease);
}

/* ── Skeleton loader ───────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bone) 25%, #ede8df 50%, var(--bone) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 12px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* ── Toast ─────────────────────────────────────────────────── */
.aym-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--bone);
  color: var(--earth);
  border-radius: 16px;
  padding: 0.875rem 1.25rem;
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--border);
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 320px;
  transform: translateX(calc(100% + 2.5rem));
  opacity: 0;
  transition: transform 350ms var(--ease), opacity 350ms ease;
  pointer-events: none;
}
.aym-toast.show {
  transform: translateX(0);
  opacity: 1;
}
.aym-toast-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--peach);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--earth);
}

/* ── Nav underline animation ───────────────────────────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  right: 50%;
  height: 2px;
  background-color: var(--caramel);
  border-radius: 2px;
  transition: left 250ms var(--ease), right 250ms var(--ease);
}
.nav-link:hover::after,
.nav-link.active::after {
  left: 1rem;
  right: 1rem;
}

/* ── Cart badge bounce ─────────────────────────────────────── */
@keyframes badge-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.4); }
  65%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.badge-bounce { animation: badge-bounce 0.42s var(--ease); }

/* ── Section hero decorations ──────────────────────────────── */
.paw-deco {
  position: absolute;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

/* ── Hero en mobile: imagen más chica para que el texto entre "above the fold" ── */
@media (max-width: 1023px) {
  .hero-section { padding-top: 2.25rem !important; padding-bottom: 2rem !important; }
  .hero-grid    { gap: 1.75rem !important; }
  .hero-img-wrap { width: min(250px, 60vw) !important; }
  /* Globo y badge escalados acorde a la imagen chica */
  .hero-img-wrap .absolute p { font-size: 11px !important; }
}

/* ── Typography helpers ────────────────────────────────────── */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Misc ──────────────────────────────────────────────────── */
details summary::-webkit-details-marker { display: none; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--coffee); }

/* ── Marquee de destacados (se mueve de derecha a izquierda) ──── */
.marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 1.5rem; width: max-content; animation: marquee-scroll 32s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { flex: 0 0 230px; width: 230px; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Sticker de promoción/oferta (esquina superior derecha) ──── */
.promo-sticker {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #FF8A00 0%, #FF2D55 100%);
  color: #fff; box-shadow: 0 4px 12px rgba(255,45,85,0.45);
  font-weight: 800; line-height: 1; transform: rotate(8deg);
  animation: promo-pulse 1.8s ease-in-out infinite;
}
.promo-sticker .pct { font-size: 17px; }
.promo-sticker .arr { width: 13px; height: 13px; margin-top: 1px; stroke-width: 3; }
@keyframes promo-pulse { 0%,100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.1); } }

/* ── Combo / pack: ahorro vs comprar por separado ──────────── */
.combo-badge {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #FF8A00 0%, #FF2D55 100%);
  color: #fff; font-weight: 800; font-size: 11px; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 5px 10px 5px 8px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255,45,85,0.38);
  animation: combo-pulse 2.2s ease-in-out infinite;
}
.combo-badge svg { width: 13px; height: 13px; stroke-width: 2.5; }
@keyframes combo-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.save-strike {
  display: block; font-size: 12px; color: var(--earth-soft);
  text-decoration: line-through; margin-bottom: 1px;
}
.save-pill {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  background: rgba(122,155,94,0.16); color: var(--success);
  font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 999px;
  width: fit-content;
}
.save-pill svg { width: 13px; height: 13px; stroke-width: 2.4; }

@media (prefers-reduced-motion: reduce) {
  .combo-badge, .promo-sticker { animation: none; }
}

/* ── Cinta de oferta (estabilidad de layout / CLS) ─────────────
   Antes: el texto largo wrapeaba a 2 líneas con la fuente de fallback y volvía
   a 1 línea al cargar Baloo 2 → la página entera saltaba 18px a los ~3s (CLS 0.25).
   Ahora: alto FIJO, una sola línea, y en mobile se muestra la versión corta. */
.promo-strip {
  background: #6B4423;
  color: #F5EFE6;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.promo-strip--inline { margin: 0.5rem 0; }
.promo-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 0.5rem;
  height: 38px;          /* reserva el alto: pase lo que pase con la fuente, no salta */
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
.promo-strip strong { color: #F2C078; }
.promo-strip .ps-sep { opacity: .45; }
.promo-strip .promo-code {
  background: rgba(245, 239, 230, .16);
  border-radius: 6px;
  padding: 1px 7px;
  letter-spacing: 1px;
}
/* El <i> de lucide es inline (width/height no aplican) → reservamos la caja
   para que al convertirse en <svg> no empuje nada. */
.promo-strip-ico {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke-width: 2;
}
.promo-strip .ps-short { display: none; }
@media (max-width: 640px) {
  .promo-strip { font-size: 12px; }
  .promo-strip-inner { height: 34px; gap: 0 0.35rem; }
  .promo-strip .ps-long  { display: none; }
  .promo-strip .ps-short { display: inline; }
}

/* ── Tap targets: mínimo 44x44 (guía WCAG/Apple) ───────────────
   En mobile el 89% del tráfico tocaba botones de 32-36px → mis-taps y rebote. */
.add-to-cart {
  min-height: 44px;
}
/* Variante redonda del catálogo (era w-9 h-9 = 36px) */
.add-to-cart.w-9,
.add-to-cart.h-9 {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px;
}
.btn-favorito {
  width: 40px !important;
  height: 40px !important;
}
/* Radios/checkboxes de los filtros: eran 13x13, imposibles de acertar con el dedo */
.filtro-opcion input[type="radio"],
.filtro-opcion input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.filtro-opcion {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  cursor: pointer;
}
/* Botones de formulario/paginación a 44px de alto */
.btn-primary,
.btn-secondary { min-height: 44px; }
.pagination a,
.pagination span { min-width: 44px; min-height: 44px; }
/* Íconos del header (carrito, menú, buscador) */
#site-header .w-9,
#site-header .w-10 { width: 44px; height: 44px; }
.cat-chip { min-height: 44px; }

/* ── Logo del nav ──────────────────────────────────────────────
   96px de alto hacían un header sticky de ~120px que en mobile tapaba
   permanentemente el 14% de la pantalla. */
.logo-nav { height: 76px; width: auto; }
@media (max-width: 640px) {
  .logo-nav { height: 52px; }
  #site-header #header-inner { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Alineación de las tarjetas de producto ────────────────────
   Los títulos de 1 vs 2 líneas y la marca ausente corrían el precio hasta 20px
   dentro de la misma fila. Se reservan ambas alturas para que precio y botón
   queden a la misma altura en toda la grilla. */
.pc-title {
  min-height: 2.6em;   /* exactamente 2 líneas a line-height 1.3 */
}
.pc-brand {
  min-height: 1.15rem; /* la línea de marca se reserva aunque el producto no tenga */
}
/* Los combos y los productos con descuento traen una línea extra sobre el precio
   ("Por separado $X" / precio tachado). Se reserva SIEMPRE para que el precio
   grande caiga a la misma altura, tenga o no esa línea. */
.pc-pretag { min-height: 1.15rem; line-height: 1.15rem; }
.pc-pretag .save-strike { margin-bottom: 0; }

/* ── Tooltip (aclaración sin sacar al usuario de la página) ─────
   Aparece en hover Y en foco de teclado. En touch no hay hover: por eso el
   elemento sigue siendo un link a /faq#regalo con las condiciones completas. */
.has-tip { position: relative; }
.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  min-width: 180px;
  max-width: 260px;
  width: max-content;
  background: var(--earth);
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 12px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(107, 68, 35, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  z-index: 30;
}
.has-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--earth);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  z-index: 30;
}
.has-tip:focus-visible::after, .has-tip:focus-visible::before,
.has-tip:hover::after,        .has-tip:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Jerarquía del pie de página ───────────────────────────────
   Los títulos de columna eran text-xs/font-bold: MÁS CHICOS que los enlaces
   (text-sm) → no se leía la jerarquía. Ahora pesan más, con una barra de acento. */
.footer-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cream);
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  position: relative;
}
.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--caramel);
}

/* ── Micro-interacciones ───────────────────────────────────────
   Los :hover solo se aplican donde hay puntero real (`hover: hover`); en
   touch el hover se queda "pegado" tras tocar. Para mobile va el :active. */
@media (hover: hover) {
  .add-to-cart:hover      { transform: scale(1.06); }
  .btn-favorito:hover     { transform: scale(1.12); }
  .cat-chip:hover .perk-ico,
  .perk:hover .perk-ico   { transform: scale(1.06); }
  .footer-title:hover::after { width: 40px; }
}
.add-to-cart,
.btn-favorito,
.perk-ico,
.footer-title::after { transition: transform 250ms var(--ease), width 250ms var(--ease); }

/* Tarjetas de "Por qué elegirnos": el ícono respira al pasar por la tarjeta */
.feature-card { transition: transform 350ms var(--ease), box-shadow 350ms var(--ease); }
.feature-ico  { transition: transform 350ms var(--ease), background 350ms var(--ease); }
@media (hover: hover) {
  .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .feature-card:hover .feature-ico { transform: scale(1.08) rotate(-4deg); }
}

/* Feedback al tocar (mobile): el elemento "se hunde" un toque */
.product-card:active   { transform: scale(0.985); }
.btn-primary:active,
.btn-secondary:active  { transform: scale(0.97); }
.add-to-cart:active    { transform: scale(0.92); }
.btn-favorito:active   { transform: scale(0.88); }
.cat-chip:active       { transform: scale(0.95); }

/* Foco visible para teclado (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--caramel);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .add-to-cart, .btn-favorito, .perk-ico, .product-card,
  .btn-primary, .btn-secondary, .cat-chip { transition: none !important; }
  .add-to-cart:hover, .btn-favorito:hover, .product-card:active,
  .btn-primary:active, .add-to-cart:active, .btn-favorito:active,
  .cat-chip:active { transform: none !important; }
}

/* ── Fix: scroll horizontal entre 768 y 1023px (iPad vertical) ──
   El nav desktop + los botones de sesión se activan en `md:` (768px) pero no
   entran: sumaban ~960px y la página scrolleaba de costado. En ese rango
   usamos el drawer, igual que en mobile. (No se puede usar `lg:flex`/`lg:hidden`:
   no existen en el build purgado de Tailwind.) */
@media (min-width: 768px) and (max-width: 1023px) {
  #site-header nav.md\:flex,
  #site-header .hidden.md\:flex { display: none !important; }
  #site-header .md\:hidden      { display: flex !important; }
  .logo-nav { height: 60px; }
}

/* ── Filtros: sidebar fijo en desktop; en mobile el buscador queda visible
   y Categoría/Orden se colapsan bajo el botón "Filtros y orden". ───────── */
.filtros-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 16px;margin-bottom:14px;background:var(--cream);border:1px solid var(--border);border-radius:16px;
  font-weight:700;font-size:14px;color:var(--earth);cursor:pointer;user-select:none;}
.filtros-toggle::after{content:"";width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--earth-soft);border-bottom:2px solid var(--earth-soft);
  transform:rotate(45deg);transition:transform .2s;margin-right:4px;}
.filtros-card.filtros-open .filtros-toggle::after{transform:rotate(-135deg);}

/* Mobile / tablet: por debajo del breakpoint del sidebar */
@media (max-width:1023px){
  .filtros-label{display:none;}
  .filtros-collapsible{display:none;}
  .filtros-card.filtros-open .filtros-collapsible{display:block;margin-top:4px;}
}
/* Desktop: sidebar completo, sin botón, todo siempre visible */
@media (min-width:1024px){
  .filtros-toggle{display:none;}
  .filtros-collapsible{display:block !important;}
}

/* Spinner del scroll infinito */
@keyframes spin{to{transform:rotate(360deg);}}

/* ── CTA de WhatsApp en la ficha de producto ───────────────────────────── */
.wa-cta{background:#25D366;color:#fff;border-radius:9999px;padding:0.85rem 1rem;font-weight:700;
  font-size:15px;text-decoration:none;transition:filter .2s,transform .05s;box-shadow:0 4px 14px rgba(37,211,102,0.28);}
@media (hover:hover){ .wa-cta:hover{filter:brightness(1.05);} }
.wa-cta:active{transform:scale(0.98);}
.wa-cta svg{width:20px;height:20px;flex-shrink:0;}

/* ── CTA "Ver catálogo completo" (home): pill destacado + flotando ─────── */
.cta-catalogo{display:inline-flex;align-items:center;gap:8px;background:var(--terracotta);color:#fff;
  font-weight:700;font-size:14px;text-decoration:none;padding:0.6rem 1.15rem;border-radius:9999px;
  white-space:nowrap;box-shadow:0 8px 20px rgba(201,123,90,0.32);
  animation:catalogo-float 2.2s ease-in-out infinite;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);}
.cta-catalogo i,.cta-catalogo svg{width:18px;height:18px;stroke-width:2.5;}
@keyframes catalogo-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@media (hover:hover){
  .cta-catalogo:hover{background:var(--coffee);transform:translateY(-2px) scale(1.03);
    box-shadow:0 14px 28px rgba(201,123,90,0.42);animation-play-state:paused;}
}
.cta-catalogo:active{transform:scale(0.97);}
@media (prefers-reduced-motion:reduce){ .cta-catalogo{animation:none;} }