/* =========================================================
   LOTERÍA CARDS + PHOTO-FREE SECTIONS
   ========================================================= */
.lot-card{
  --lc:#d92b1f;
  container-type:inline-size;
  position:relative; aspect-ratio:5/8; border-radius:12px;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(90% 70% at 80% 100%, rgba(150,110,60,.18), transparent 70%),
    #f3ead9;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 24px 46px -18px rgba(0,0,0,.65), 0 4px 10px rgba(0,0,0,.35);
  color:#1e140d;
}
.lot-frame{ position:absolute; inset:6.5cqw; display:grid; grid-template-rows:1fr auto; border:max(2px, 1.6cqw) solid #1e140d; border-radius:3cqw; overflow:hidden; background:#f3ead9; }
.lot-art{
  position:relative; display:grid; place-items:center; overflow:hidden;
  background:
    repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,.13) 0 7deg, transparent 7deg 18deg),
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.22), transparent 62%),
    var(--lc);
  border-bottom:max(2px, 1.6cqw) solid #1e140d;
}
.lot-svg{ width:84%; height:auto; filter:drop-shadow(0 2cqw 0 rgba(0,0,0,.18)); }
.lot-no{
  position:absolute; top:4cqw; left:4cqw; z-index:1;
  min-width:17cqw; padding:1.4cqw 2.6cqw 1cqw; border-radius:2.4cqw;
  background:#f3ead9; border:max(1.5px, 1.1cqw) solid #1e140d;
  font-family:'Anton', sans-serif; font-size:max(10px, 9.5cqw); line-height:1; text-align:center;
}
.lot-name{ padding:3.6cqw 3cqw 3.2cqw; text-align:center; }
.lot-name span{ font-family:'Fraunces', serif; font-weight:700; font-size:max(11px, 12.5cqw); line-height:1; letter-spacing:.01em; white-space:nowrap; }

/* ---------- HOME HERO: a hand of lotería cards ---------- */
.hero-lot{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:max(720px, calc(100svh - var(--banner-h)));
  margin-top:calc(var(--banner-h) * -1); padding-top:var(--banner-h);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(217,43,31,.42), transparent 70%),
    radial-gradient(55% 45% at 50% 38%, rgba(243,167,18,.16), transparent 70%),
    var(--ink);
}
.hl-sun{
  position:absolute; z-index:-1; left:50%; top:62%; width:max(1700px, 150vw); aspect-ratio:1; translate:-50% -50%;
  background:repeating-conic-gradient(from 0deg, rgba(243,167,18,.10) 0 5deg, transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle, #000 0 14%, rgba(0,0,0,.55) 30%, transparent 58%);
          mask:radial-gradient(circle, #000 0 14%, rgba(0,0,0,.55) 30%, transparent 58%);
  animation:hlSpin 140s linear infinite;
}
@keyframes hlSpin{ to{ rotate:360deg; } }
.hl-inner{ position:relative; z-index:3; padding:clamp(3.2rem, 7vh, 5.5rem) 5vw 0; display:flex; flex-direction:column; align-items:center; }
.hero-lot .eyebrow{ color:#6fe0d8; animation:heroIn .9s .1s both; }
.hero-lot .site-name-hero{
  font-size:clamp(4.6rem, 17vw, 13rem); line-height:.86; margin-top:.2rem;
  color:var(--cream);
  text-shadow:0 .06em 0 #c23b3b, 0 .12em 0 #6f2a63, 0 .2em 40px rgba(0,0,0,.6);
  animation:heroIn 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.hero-lot .hf-desc{ text-shadow:none; color:rgba(247,237,224,.86); margin:1.5rem auto 2rem; }
.hero-lot .hf-chip{ background-color:rgba(20,17,13,.7); }

.hl-hand{
  --px:0; --py:0; --cw:clamp(118px, 13.2vw, 212px);
  position:relative; z-index:2; flex:1 0 auto; width:100%; min-height:calc(var(--cw) * 1.08);
  margin-top:clamp(1.6rem, 4vh, 3rem);
}
.hl-card{
  position:absolute; left:50%; bottom:calc(var(--cw) * -.62); width:var(--cw);
  transform-origin:50% 120%;
  transform:translateX(-50%) translateX(calc(var(--x) + var(--px) * var(--k) * 26px)) translateY(calc(var(--y) + var(--py) * var(--k) * 14px)) rotate(var(--r));
  transition:transform .9s cubic-bezier(.2,.9,.25,1);
}
.hl-card > .lot-card{ transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.hl-card:hover > .lot-card{ transform:translateY(-16%); }
.hl-hand:not(.dealt) .hl-card{ transform:translateX(-50%) translateY(115%) rotate(0deg); transition:none; }
.hl-hand.dealt .hl-card{ transition-delay:calc(var(--i) * 90ms); }
.hl-hand.dealt.settled .hl-card{ transition-delay:0s; }
.hl-card:nth-child(1){ --i:0; --x:calc(var(--cw) * -1.9);  --y:calc(var(--cw) * .12);  --r:-21deg; --k:1.6; }
.hl-card:nth-child(2){ --i:1; --x:calc(var(--cw) * -.98); --y:calc(var(--cw) * -.14); --r:-10deg; --k:1.2; }
.hl-card:nth-child(3){ --i:2; --x:0px;                    --y:calc(var(--cw) * -.26); --r:0deg;   --k:.8; z-index:2; }
.hl-card:nth-child(4){ --i:3; --x:calc(var(--cw) * .98);  --y:calc(var(--cw) * -.14); --r:10deg;  --k:1.2; }
.hl-card:nth-child(5){ --i:4; --x:calc(var(--cw) * 1.9);  --y:calc(var(--cw) * .12);  --r:21deg;  --k:1.6; }
.hl-card:nth-child(1), .hl-card:nth-child(5){ z-index:0; }
.hl-card:nth-child(2), .hl-card:nth-child(4){ z-index:1; }
@media (max-width:760px){
  .hero-lot{ min-height:max(640px, 92svh); }
  .hl-hand{ --cw:clamp(104px, 31vw, 150px); }
  .hl-card:nth-child(1){ --x:calc(var(--cw) * -1.3); --r:-19deg; --y:calc(var(--cw) * .2); }
  .hl-card:nth-child(2){ --x:calc(var(--cw) * -.68); --r:-9deg; }
  .hl-card:nth-child(4){ --x:calc(var(--cw) * .68); --r:9deg; }
  .hl-card:nth-child(5){ --x:calc(var(--cw) * 1.3); --r:19deg; --y:calc(var(--cw) * .2); }
}
@media (prefers-reduced-motion: reduce){
  .hl-sun{ animation:none; }
  .hl-card, .hl-hand:not(.dealt) .hl-card{ transition:none; }
}

/* ---------- OUR STORY: two cards on the table ---------- */
.story-cards{ position:relative; width:min(100%, 440px); margin:0 auto; aspect-ratio:1 / 1.05; }
.story-cards > div{ position:absolute; }
.story-cards .sc-back{ width:52%; left:0; top:12%; rotate:-12deg; }
.story-cards .sc-front{ width:56%; right:2%; top:0; rotate:7deg; z-index:1; }
.story-cards .sc-stamp{
  z-index:2; right:-3%; top:-5%; width:clamp(104px, 28%, 128px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; text-align:center; rotate:14deg;
  background:var(--marigold); color:var(--ink); border:3px solid var(--ink); box-shadow:0 0 0 5px var(--marigold), 0 18px 34px rgba(0,0,0,.45);
  font-family:'Anton', sans-serif; font-size:.9rem; line-height:1.05; letter-spacing:.03em; text-transform:uppercase;
}
.story-cards .sc-stamp b{ display:block; font-size:1.45rem; font-weight:400; }
@media (max-width:860px){ .story-cards{ width:min(86%, 360px); } .story-cards .sc-stamp{ right:0; top:-6%; width:96px; font-size:.78rem; } .story-cards .sc-stamp b{ font-size:1.15rem; } }

/* ---------- CATERING BAND: talavera tile ---------- */
.cater-band.cb-tile{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f7ede0' stroke-opacity='.17' stroke-width='2'%3E%3Cpath d='M60 14c13 17 13 29 0 46c-13-17-13-29 0-46zM60 106c13-17 13-29 0-46c-13 17-13 29 0 46zM14 60c17-13 29-13 46 0c-17 13-29 13-46 0zM106 60c-17-13-29-13-46 0c17 13 29 13 46 0z'/%3E%3Ccircle cx='60' cy='60' r='7'/%3E%3Cpath d='M0 0h120v120H0z' stroke-opacity='.09'/%3E%3Cpath d='M0 18A18 18 0 0 0 18 0M102 0a18 18 0 0 0 18 18M120 102a18 18 0 0 0-18 18M18 120A18 18 0 0 0 0 102'/%3E%3C/g%3E%3Cg fill='%23f3a712' fill-opacity='.28'%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3Ccircle cx='0' cy='0' r='6'/%3E%3Ccircle cx='120' cy='0' r='6'/%3E%3Ccircle cx='0' cy='120' r='6'/%3E%3Ccircle cx='120' cy='120' r='6'/%3E%3C/g%3E%3C/svg%3E") center / 120px 120px,
    linear-gradient(135deg, #0d5a52 0%, #12958f 55%, #0f6f4f 100%);
  min-height:0; padding:clamp(4rem, 9vw, 7rem) 5vw;
}
.cater-band.cb-tile::after{ background:radial-gradient(60% 80% at 30% 50%, rgba(10,30,26,.65), transparent 75%); }
.cb-tile .cb-wrap{ position:relative; z-index:2; max-width:1150px; margin:0 auto; width:100%; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; text-align:left; }
.cb-tile .cb-inner{ max-width:560px; }
.cb-tile .cb-inner h2{ font-size:clamp(2.6rem, 6.4vw, 5rem); text-shadow:0 .07em 0 rgba(0,0,0,.25); }
.cb-tile .cb-inner p{ color:rgba(247,237,224,.92); }
.cb-deck{ position:relative; height:clamp(280px, 30vw, 380px); }
.cb-deck > div{ position:absolute; top:50%; left:50%; width:clamp(130px, 14vw, 190px); translate:-50% -50%; transition:rotate .5s cubic-bezier(.2,.8,.2,1), translate .5s cubic-bezier(.2,.8,.2,1); }
.cb-deck > div:nth-child(1){ rotate:-14deg; translate:-118% -46%; }
.cb-deck > div:nth-child(2){ rotate:3deg; z-index:1; translate:-50% -54%; }
.cb-deck > div:nth-child(3){ rotate:16deg; translate:16% -44%; }
.cater-band:hover .cb-deck > div:nth-child(1){ rotate:-19deg; translate:-128% -47%; }
.cater-band:hover .cb-deck > div:nth-child(3){ rotate:21deg; translate:26% -45%; }
@media (max-width:860px){
  .cb-tile .cb-wrap{ grid-template-columns:1fr; text-align:center; gap:1.5rem; }
  .cb-tile .cb-inner{ margin:0 auto; }
  .cb-deck{ height:240px; order:-1; }
  .cb-deck > div{ width:120px; }
}

/* ---------- CATERING PAGE: art panels instead of photos ---------- */
.cx-art{
  --lc:#d92b1f; position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='1.6'%3E%3Cpath d='M36 8c8 10 8 18 0 28c-8-10-8-18 0-28zM36 64c8-10 8-18 0-28c-8 10-8 18 0 28zM8 36c10-8 18-8 28 0c-10 8-18 8-28 0zM64 36c-10-8-18-8-28 0c10 8 18 8 28 0z'/%3E%3C/g%3E%3C/svg%3E") center / 72px 72px,
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.22), transparent 60%),
    var(--lc);
  border-bottom:1px solid var(--line);
}
.cx-art .lot-svg{ width:min(52%, 210px); transition:transform .9s cubic-bezier(.2,.8,.25,1); }
.cx-card:hover .cx-art .lot-svg{ transform:scale(1.08) rotate(-4deg); }

/* ---------- MENU BANNER without photos: a reel of dish cards ---------- */
.reel.reel-cards .reel-item{ width:clamp(118px, 11vw, 158px); aspect-ratio:auto; border:0; border-radius:0; box-shadow:none; background:none; overflow:visible; }
.reel.reel-cards .reel-track{ gap:18px; padding:14px 0 22px; }
.reel.reel-cards .reel-item:nth-child(odd) .lot-card{ rotate:-2.5deg; }
.reel.reel-cards .reel-item:nth-child(even) .lot-card{ rotate:2deg; }
.reel.reel-cards .lot-name span{ font-size:max(10px, 11cqw); white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.reel.reel-cards .lot-name{ min-height:30cqw; display:grid; place-items:center; }
@media (max-width:640px){ .reel.reel-cards .reel-item{ width:112px; } }