/* Guatemala County Fair theme (on top of app.css). Colors from the GCF 2026 decks/flyers. */
:root{
  --ink:#18181F; --ink-2:#2a2a35; --slate:#6b6575; --slate-2:#9d97a6; --line:#EADFCB; --line-2:#F3EADB;
  --bg:#FFF6E9; --paper:#fff;
  --cobalt:#F04E23; --cobalt-2:#d63e15; --cobalt-soft:#fde6dd;      /* primary action: fair red-orange */
  --citron:#F7B718; --citron-soft:#fef3d3;                           /* highlight: fair yellow */
  --gcf-teal:#10B3A3; --gcf-blue:#4C5FAD; --gcf-pink:#F3A0C8; --gcf-green:#21B26A; --gcf-orange:#E8782A;
  --head:"Figtree",system-ui,sans-serif; --body:"Figtree",system-ui,sans-serif; --mono:"Figtree",system-ui,sans-serif;
}
/* textile stripe (the multicolor band from the GCF materials) */
.stripe{height:8px;background:linear-gradient(90deg,#F04E23 0 11.1%,#F7B718 0 22.2%,#10B3A3 0 33.3%,#4C5FAD 0 44.4%,#21B26A 0 55.5%,#F3A0C8 0 66.6%,#E8782A 0 77.7%,#F04E23 0 88.8%,#F7B718 0)}
.top{background:#18181F;border-bottom:0;color:#fff}
.top .wrap{height:68px}
.brand img{height:46px}
.brand .tag{color:#F7B718;border-left-color:rgba(255,255,255,.18);font-weight:700;letter-spacing:.14em}
.top-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.demo-bar{background:#F7B718}
h1,h2,h3,h4{font-weight:900;letter-spacing:-.025em}
.mono,.eyebrow,.step-count,.tier .left,.tier-tag,.kpi span,.fx-welcome{font-weight:800;letter-spacing:.12em}
.hero{background:#18181F}
.hero::after{background:radial-gradient(circle,#F7B718 0 40%,#F04E23 41% 60%,transparent 61%)}
.hero .hero-tag{color:#F7B718}
.btn-citron{background:#F7B718;color:#18181F}
.btn-cobalt{box-shadow:0 8px 20px rgba(240,78,35,.28)}
.tier.featured{background:linear-gradient(160deg,#2a1640,#18181F 60%);box-shadow:0 0 0 2px #F7B718,0 20px 50px rgba(240,78,35,.25)}
.tier li::before{background-color:#F7B718}
.how .num{background:#F7B718}
.booked{background:radial-gradient(600px 200px at 50% 0,rgba(247,183,24,.35),transparent),#fff}
.step-dots i.on,.progress i{background:#F04E23}
.timer{background:#F7B718}
.agent-hero{background:radial-gradient(700px 260px at 90% 0,rgba(247,183,24,.3),transparent),linear-gradient(160deg,#2a1640,#18181F 60%)}
footer.foot{background:#18181F;color:#cfcbd6;border-top:0}
footer.foot .wrap{gap:16px}
footer.foot .powered{display:flex;align-items:center;gap:8px;color:#cfcbd6;text-decoration:none;font-size:13px}
footer.foot .powered img{height:18px;opacity:1}
/* portal: fair colors, logo instead of the rabbit */
.fx-portal{background:radial-gradient(circle at 50% 40%,#3a1f52 0%,#18181F 62%)}
.fx-rings span{border-color:#F7B718;box-shadow:0 0 40px rgba(247,183,24,.55),inset 0 0 40px rgba(247,183,24,.25)}
.fx-rings span:nth-child(2){border-color:#10B3A3;box-shadow:0 0 40px rgba(16,179,163,.55)}
.fx-rings span:nth-child(3){border-color:#F04E23;box-shadow:0 0 40px rgba(240,78,35,.5)}
.fx-rabbit{width:200px;margin:-56px 0 0 -100px;border-radius:16px;animation:wheelin 1.4s cubic-bezier(.3,1.4,.4,1) both}
@keyframes wheelin{0%{transform:scale(.2) rotate(-200deg);opacity:0}100%{transform:none;opacity:1}}
.fx-enter{background:#F7B718}
.fx-title{background:linear-gradient(90deg,#fff,#F7B718,#F04E23,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text}

/* ===================== Guatemala dressing ===================== */
:root{--gt-blue:#4997D0;--gt-red:#D7263D;--gt-green:#0B8A4E}
.stripe{height:14px;background:url(/img/gt/textile.svg) repeat-x center/auto 100%}
.gt-band{position:absolute;left:0;right:0;bottom:0;height:22px;background:url(/img/gt/textile.svg) repeat-x center/auto 100%;z-index:3}
body{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 30 L50 40 L40 50 L30 40Z' fill='none' stroke='%23EADFCB' stroke-width='1.2'/%3E%3C/svg%3E")}

/* entrance: dawn over the volcanoes, kites in the sky, a quetzal crossing */
.fx-portal{background:linear-gradient(180deg,#1a1440 0%,#5a2a6e 32%,#e0613a 62%,#f7b718 78%,#f9d27a 100%)}
.gt-sky{position:absolute;inset:0;overflow:hidden}
.gt-sun{position:absolute;left:50%;top:62%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,#fff3c4 0 30%,#ffd166 31% 52%,rgba(255,209,102,0) 70%);animation:sunrise 2.4s ease-out both}
@keyframes sunrise{from{transform:translateY(80px);opacity:.3}to{transform:none;opacity:1}}
.gt-kite{position:absolute;left:var(--x);top:var(--y);transform-origin:50% 0;animation:sway var(--t) ease-in-out var(--d) infinite alternate;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.gt-kite svg{display:block}
.gt-tail{position:absolute;left:50%;top:92%;width:2px;height:120px;background:linear-gradient(#fff,rgba(255,255,255,0));opacity:.7}
@keyframes sway{from{transform:rotate(calc(var(--r) - 6deg)) translateY(0)}to{transform:rotate(calc(var(--r) + 6deg)) translateY(-14px)}}
.gt-volcanoes{position:absolute;left:0;right:0;bottom:0;width:100%;height:34vh;z-index:2}
.gt-smoke circle{fill:rgba(255,255,255,.55);animation:puff 3.2s ease-out infinite}
.gt-smoke circle:nth-child(2){animation-delay:.5s}.gt-smoke circle:nth-child(3){animation-delay:1s}
@keyframes puff{0%{transform:translate(0,0) scale(.6);opacity:0}30%{opacity:.8}100%{transform:translate(18px,-30px) scale(1.4);opacity:0}}
.gt-flyby{position:absolute;top:18%;left:-200px;z-index:3;animation:flyby 6s 0.6s ease-in-out both}
@keyframes flyby{0%{transform:translate(0,0)}50%{transform:translate(60vw,-30px)}100%{transform:translate(120vw,10px)}}
.gt-quetzal .gt-wing{transform-origin:48px 56px;animation:flap .35s ease-in-out infinite alternate}
@keyframes flap{to{transform:rotate(-22deg)}}
.gt-portal-text{z-index:4;margin-top:0!important;padding-bottom:12vh}
.gt-portal-logo{width:min(78vw,380px);height:auto;margin:0 auto 10px;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.4);animation:wheelin 1.2s cubic-bezier(.3,1.4,.4,1) both}
.gt-portal-text .fx-welcome{font-size:clamp(20px,5vw,30px);letter-spacing:.02em;text-transform:none;color:#fff;font-weight:900;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.gt-portal-text .fx-sub{color:#fff;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.fx-portal .fx-rings,.fx-portal .fx-stars,.fx-portal .fx-rabbit{display:none}
.fx-enter{background:#fff;color:#18181F;box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* hero: kites over the fair photo, volcano skyline, woven band */
.hero{padding-bottom:calc(clamp(24px,5vw,56px) + 70px)}
.hero .gt-hero-kites{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hero .gt-hero-kites .gt-kite{opacity:.92}
.hero .gt-hero-kites .gt-tail{height:70px}
.hero .gt-volcanoes{height:90px;z-index:1;opacity:.95}
.hero .gt-band{z-index:2;height:16px}
.hero .sparks{display:none}
.hero-actions,.highlights,.hero h1,.hero p,.hero .hero-facts,#countdown{position:relative;z-index:2}
.hero-logo{height:96px}

/* quetzal occasionally crossing the event page */
.gt-cross{position:fixed;top:22%;left:-180px;z-index:20;pointer-events:none;animation:flyby 7s ease-in-out forwards}

/* loading: a spinning barrilete */
.spinner{width:64px;height:64px;border:0;border-radius:0;background:none;margin:70px auto;animation:spin 2.4s linear infinite}

/* booked: kites celebrate */
.booked{position:relative;overflow:hidden;background:linear-gradient(180deg,#e7f2fb,#fff 70%)}
.booked .gt-kites-mini{position:absolute;inset:0;pointer-events:none}
.booked .gt-kites-mini .gt-kite .gt-tail{height:50px}
.booked>*:not(.gt-kites-mini){position:relative;z-index:1}
.big-check-icon{background:var(--gt-green)}

/* map: Arco de Santa Catalina entrance */
.gt-arch text{pointer-events:none}

/* small touches */
.card,.big-choice,.todo,.extra{border-color:#EADFCB}
.section .h2::after,.page>section>.h2::after{content:"";display:block;width:72px;height:10px;margin-top:8px;background:url(/img/gt/textile.svg) repeat-x left/auto 100%;border-radius:3px}
.tier.featured{background:linear-gradient(160deg,#0B8A4E,#065c34 70%);box-shadow:0 0 0 3px #F7B718,0 20px 50px rgba(11,138,78,.35)}
.tier.featured .muted,.tier.featured .tier-tag{color:#d8f5e6}
footer.foot{background:#18181F url(/img/gt/textile-dark.svg) repeat-x top/auto 20px;padding-top:34px}
footer.foot .love{display:block;font-size:14px;color:#F7B718;font-weight:700;margin-top:4px}
.hero .gt-hero-kites{left:52%}
@media (max-width:700px){.hero .gt-hero-kites{left:40%;opacity:.8}}
.hero .gt-volcanoes{height:110px;opacity:1}
.hero .gt-volcanoes path:nth-child(2){opacity:.95}
.hero .gt-volcanoes{height:clamp(150px,24vw,230px)}
.hero{padding-bottom:calc(clamp(24px,5vw,56px) + 90px)}
/* the quetzal is drawn facing left; flip it so it faces the way it flies (left → right) */
.gt-flyby .gt-quetzal,.gt-cross .gt-quetzal{transform:scaleX(-1)}

/* booth types (no map yet) */
.type-card{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:#fff;border:2px solid #EADFCB;border-radius:var(--r);padding:16px}
.type-card .swatch{width:14px;height:56px;border-radius:7px;margin:0}
.type-card .info{flex:1;min-width:200px;display:grid;gap:3px}
.type-card .info b{font-size:19px}
.type-card .info p{margin:2px 0 4px;color:var(--slate);font-size:15px}
.type-card.off{opacity:.75}
.booth-group-food .h2{color:#b8460f}
.booth-group-general .h2{color:#3b4a92}
.inquire{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.inquire b{font-size:18px}
.type-card .pill{justify-self:start}

/* ---------- event page sections */
.lineup{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,170px);gap:14px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory}
.artist{scroll-snap-align:start;display:grid;gap:3px}
.artist .ph{position:relative;aspect-ratio:1;border-radius:18px;background:linear-gradient(150deg,#4C5FAD,#2a1640) center/cover;box-shadow:0 10px 24px rgba(24,24,31,.18);display:grid;place-items:center;overflow:hidden}
.artist .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:url(/img/gt/textile.svg) repeat-x center/auto 100%}
.artist .ini{font:900 46px var(--head);color:#F7B718;letter-spacing:-.02em}
.artist b{font-size:16px;line-height:1.2;margin-top:6px}
.artist span{font-size:13px;color:var(--slate)}
.artist small{font-size:10px;color:var(--slate-2)}
.artist.head{grid-column:span 2;grid-auto-columns:auto}
.artist.head .ph{background:radial-gradient(circle at 30% 20%,#F7B718,#F04E23 45%,#2a1640 100%) center/cover;box-shadow:0 0 0 3px #F7B718,0 14px 30px rgba(240,78,35,.35)}
.artist.head .ini{font-size:84px;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.3)}
.artist.head b{font-size:20px}
.artist .tag{position:absolute;top:10px;left:10px;background:#F7B718;color:#18181F;font:800 12px var(--body);padding:4px 10px;border-radius:999px}
.artist.more .ph{background:repeating-linear-gradient(45deg,#fff6e9 0 10px,#f3eadb 10px 20px);box-shadow:none;border:2px dashed #EADFCB}
.artist.more .ini{color:#F04E23}
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.zone{background:#fff;border:1.5px solid #EADFCB;border-radius:var(--r);padding:16px}
.zone .zi{font-size:30px;display:block;margin-bottom:6px}
.zone b{font-size:17px;display:block}
.zone p{margin:4px 0 0;color:var(--slate);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips span{background:#FFF6E9;border:1px solid #EADFCB;border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px}
.journey{list-style:none;padding:0;margin:0;display:grid;gap:0;counter-reset:j}
.journey li{counter-increment:j;position:relative;padding:0 0 22px 58px;display:grid;gap:2px}
.journey li::before{content:counter(j);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:#F7B718;color:#18181F;display:grid;place-items:center;font:900 18px var(--head);z-index:1}
.journey li::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:repeating-linear-gradient(#EADFCB 0 6px,transparent 6px 12px)}
.journey li:last-child::after{display:none}
.journey li:last-child::before{content:"🎡";background:#F04E23}
.journey b{font-size:18px;padding-top:7px}
.journey span{color:var(--slate)}
.faq{display:grid;gap:10px}
.faq details p{margin:10px 0 0;color:var(--ink-2);font-size:16px;line-height:1.5}
.ev-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;justify-content:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(24,24,31,.94);backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ev-cta.show{transform:none}
.ev-cta .btn{flex:1;max-width:320px;min-height:52px}
body:has(.ev-cta.show) .help-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
.lineup{align-items:start}
.artist.head{grid-row:span 1}
.artist.head .ph{aspect-ratio:2/1.02}
.zones{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.zones{grid-template-columns:repeat(2,minmax(0,1fr))}}

.custom-card{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:linear-gradient(135deg,#2a1640,#18181F 70%);color:#fff;border-radius:var(--r-l);padding:22px;position:relative;overflow:hidden}
.custom-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:url(/img/gt/textile.svg) repeat-x center/auto 100%}
.custom-card .cc-icon{font-size:44px}
.custom-card .t{flex:1;min-width:240px}
.custom-card h3{font-size:24px;color:#F7B718}
.custom-card p{margin:6px 0 0;color:#e2deea;font-size:16px}