/* ==========================================================================
   EL BUEN BURRO — Custom styles
   ========================================================================== */

:root {
  --masa: #F1E4C6;
  --masa-dark: #E8D2A1;
  --chile: #C8321E;
  --chile-dark: #8F2212;
  --mostaza: #E8B93C;
  --aguacate: #2D4A1F;
  --aguacate-light: #4A6B2F;
  --tinta: #1A0F0A;
  --rosa: #E6187D;
  --cielo: #6BA5B8;
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }
body { cursor: default; }

::selection { background: var(--chile); color: var(--masa); }

/* ==========================================================================
   GRAIN OVERLAY — paper texture feel
   ========================================================================== */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ==========================================================================
   BG PATTERNS
   ========================================================================== */
.bg-pattern {
  background-image:
    radial-gradient(circle at 1px 1px, var(--tinta) 1px, transparent 0),
    radial-gradient(circle at 40px 40px, var(--chile) 2px, transparent 0);
  background-size: 20px 20px, 80px 80px;
}

.bg-pattern-dark {
  background-image:
    radial-gradient(circle at 1px 1px, var(--masa) 1px, transparent 0);
  background-size: 18px 18px;
}

/* ==========================================================================
   TICKER MARQUEE
   ========================================================================== */
.ticker {
  display: inline-block;
  animation: ticker 35s linear infinite;
  padding-left: 100%;
}
.ticker span { margin-right: 2.5rem; }

.ticker-big {
  display: inline-block;
  animation: ticker 30s linear infinite;
  padding-left: 100%;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   SHADOWS — brutalist offset style
   ========================================================================== */
.shadow-brutal {
  box-shadow: 6px 6px 0 0 var(--tinta);
}
.shadow-brutal-lg {
  box-shadow: 12px 12px 0 0 var(--tinta);
}
.shadow-brutal-light {
  box-shadow: 10px 10px 0 0 var(--mostaza);
}

/* ==========================================================================
   NAV LINK
   ========================================================================== */
.nav-link {
  position: relative;
  padding: 2px 0;
  color: var(--tinta);
  transition: color .2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: var(--chile);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .35s cubic-bezier(.77,0,.18,1);
}
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: var(--chile);
  color: var(--masa);
  border: 2px solid var(--tinta);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  box-shadow: 4px 4px 0 0 var(--tinta);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--tinta);
  background: var(--chile-dark);
}
.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--tinta);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: transparent;
  color: var(--tinta);
  border: 2px solid var(--tinta);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}
.btn-ghost:hover {
  background: var(--tinta);
  color: var(--masa);
}

/* ==========================================================================
   HERO FLOATING
   ========================================================================== */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  50%      { transform: translateY(-8px) rotate(-14deg); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

/* ==========================================================================
   LOTERÍA CARD — product cards
   ========================================================================== */
.loteria-card {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--masa);
  border: 3px solid var(--tinta);
  box-shadow: 8px 8px 0 0 var(--tinta);
  transition: transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s cubic-bezier(.25,.8,.25,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.loteria-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--tinta);
  opacity: 0.4;
  pointer-events: none;
}
.loteria-card:hover {
  transform: translate(-4px, -6px) rotate(-1deg);
  box-shadow: 14px 14px 0 0 var(--tinta);
}
.loteria-card[data-theme="mostaza"] { background: var(--mostaza); }
.loteria-card[data-theme="chile"]   { background: var(--chile); color: var(--masa); }
.loteria-card[data-theme="aguacate"]{ background: var(--aguacate-light); color: var(--masa); }
.loteria-card[data-theme="rosa"]    { background: var(--rosa); color: var(--masa); }
.loteria-card[data-theme="tinta"]   { background: var(--tinta); color: var(--masa); }

.loteria-card[data-theme="chile"] .card-number,
.loteria-card[data-theme="aguacate"] .card-number,
.loteria-card[data-theme="rosa"] .card-number,
.loteria-card[data-theme="tinta"] .card-number {
  color: var(--mostaza);
}
.loteria-card[data-theme="chile"]::before,
.loteria-card[data-theme="aguacate"]::before,
.loteria-card[data-theme="rosa"]::before,
.loteria-card[data-theme="tinta"]::before {
  border-color: var(--masa);
  opacity: 0.3;
}

.card-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 1rem;
}

.card-illustration {
  align-self: flex-end;
  margin-bottom: 1rem;
  transition: transform .5s cubic-bezier(.2,.9,.3,1);
}
.loteria-card:hover .card-illustration {
  transform: rotate(-8deg) scale(1.08);
}

.card-title {
  font-family: 'Bagel Fat One', serif;
  font-size: clamp(1.75rem, 2.2vw, 2.1rem);
  line-height: 0.95;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.card-desc {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.9;
  flex: 1;
}

.card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 2px dashed currentColor;
  opacity: 1;
}

/* Price stamp */
.price-stamp {
  position: relative;
  background: var(--tinta);
  color: var(--mostaza);
  font-family: 'Bagel Fat One', serif;
  font-size: 1.5rem;
  padding: 0.4rem 0.85rem;
  border: 2px solid currentColor;
  transform: rotate(4deg);
  transition: transform .3s ease;
  line-height: 1;
  white-space: nowrap;
}
.loteria-card:hover .price-stamp {
  transform: rotate(-3deg) scale(1.05);
}
.loteria-card[data-theme="chile"] .price-stamp,
.loteria-card[data-theme="aguacate"] .price-stamp,
.loteria-card[data-theme="rosa"] .price-stamp,
.loteria-card[data-theme="tinta"] .price-stamp {
  background: var(--masa);
  color: var(--tinta);
}

/* Spice chile icons */
.spice-level {
  display: flex;
  align-items: center;
  gap: 2px;
}
.chile-icon {
  display: inline-block;
  width: 14px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18' fill='%23C8321E' stroke='%231A0F0A' stroke-width='1'><path d='M7 1 Q 5 2 6 4 L 6 5 Q 2 6 2 11 Q 2 16 7 17 Q 12 16 12 11 Q 12 6 8 5 L 8 4 Q 9 2 7 1 Z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.chile-icon.off {
  opacity: 0.2;
  filter: grayscale(1);
}
.loteria-card[data-theme="chile"] .chile-icon,
.loteria-card[data-theme="aguacate"] .chile-icon,
.loteria-card[data-theme="rosa"] .chile-icon,
.loteria-card[data-theme="tinta"] .chile-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18' fill='%23E8B93C' stroke='%23F1E4C6' stroke-width='1'><path d='M7 1 Q 5 2 6 4 L 6 5 Q 2 6 2 11 Q 2 16 7 17 Q 12 16 12 11 Q 12 6 8 5 L 8 4 Q 9 2 7 1 Z'/></svg>");
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-item {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--tinta);
  background: var(--masa-dark);
  transition: transform .4s cubic-bezier(.25,.8,.25,1);
}
.gallery-item:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 0 var(--tinta);
}
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.25,.8,.25,1), filter .4s ease;
  filter: saturate(1.05) contrast(1.05);
}
.gallery-item:hover .gallery-img {
  transform: scale(1.08);
  filter: saturate(1.2) contrast(1.1);
}
.gallery-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: var(--masa);
  color: var(--tinta);
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 2px solid var(--tinta);
  transform: rotate(-1deg);
  transition: transform .3s ease;
}
.gallery-item:hover .gallery-caption {
  transform: rotate(-3deg) translateY(-2px);
}

/* ==========================================================================
   TESTIMONIAL CARDS
   ========================================================================== */
.testimonial-card {
  position: relative;
  background: var(--masa);
  border: 3px solid var(--tinta);
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: 6px 6px 0 0 var(--tinta);
  transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--tinta);
  opacity: 0.3;
  pointer-events: none;
}
.testimonial-card:hover {
  transform: translate(-3px, -4px) rotate(0) !important;
  box-shadow: 10px 10px 0 0 var(--tinta);
}

/* ==========================================================================
   TICKET (ubicación)
   ========================================================================== */
.ticket {
  position: relative;
  background: var(--masa);
  border: 3px solid var(--tinta);
  box-shadow: 10px 10px 0 0 var(--mostaza);
}
.ticket-perf {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  background-image: radial-gradient(circle at 10px 10px, var(--tinta) 6px, transparent 6.5px);
  background-size: 20px 20px;
  background-repeat: repeat-x;
  background-position: -10px center;
  pointer-events: none;
}
.ticket-perf-top    { top: -11px; }
.ticket-perf-bottom { bottom: -11px; }

/* ==========================================================================
   WHATSAPP CTA BUTTON
   ========================================================================== */
.wa-button {
  display: block;
  background: var(--masa);
  color: var(--tinta);
  border: 3px solid var(--masa);
  padding: 0;
  box-shadow: 10px 10px 0 0 var(--mostaza);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-button:hover {
  transform: translate(-4px, -4px);
  box-shadow: 14px 14px 0 0 var(--mostaza);
}
.wa-button:active {
  transform: translate(3px, 3px);
  box-shadow: 4px 4px 0 0 var(--mostaza);
}
.wa-button-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.5rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(26,15,10,.04) 12px 13px),
    var(--masa);
}

/* ==========================================================================
   FLOATING WHATSAPP FAB
   ========================================================================== */
.fab-whatsapp {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  width: 60px;
  height: 60px;
  background: var(--aguacate-light);
  color: var(--masa);
  border: 3px solid var(--tinta);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 0 var(--tinta);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fab-whatsapp:hover {
  transform: translate(-2px, -2px) scale(1.05);
  box-shadow: 6px 6px 0 0 var(--tinta);
}
.fab-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--aguacate-light);
  opacity: 0.6;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: .6; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.25,.8,.25,1), transform .8s cubic-bezier(.25,.8,.25,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero reveals kick-in on load */
@keyframes heroFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
section#top .reveal {
  animation: heroFade .9s cubic-bezier(.25,.8,.25,1) backwards;
  opacity: 1;
  transform: none;
  transition: none;
}

/* ==========================================================================
   RESPONSIVE TUNING
   ========================================================================== */
@media (max-width: 768px) {
  .shadow-brutal-lg { box-shadow: 8px 8px 0 0 var(--tinta); }
  .wa-button-inner { padding: 1.25rem 1rem; gap: .75rem; }
  .fab-whatsapp { width: 52px; height: 52px; bottom: 1rem; right: 1rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker, .ticker-big { animation: none; }
}