/* 07 · Entrada gratuita — manhã clara na passarela da arena (s-acesso). Um ingresso de papel na coluna da
   esquerda; o carimbo "Entrada gratuita" bate nele e os cinco dias são validados um a um. Depois a frase dos
   dias dá lugar aos quatro compromissos de acessibilidade, e a foto se aproxima da família que chega.
   Tudo medido pela coluna (o ingresso é container: cqi). */
#acesso .eg-stage { background: #22404f; }
#acesso .eg-fallback { position: absolute; inset: 0; background: linear-gradient(180deg, #7fa9bd 0%, #bcd3da 34%, #d9e2e5 46%, #2f6f7d 47%, #1e5b6a 58%, #e9dcc4 59%, #d8c9ad 100%); }
/* origem do zoom alta (25%): o zoom de assentamento empurra o fundo para baixo, e o figurante que anda atrás da
   família fica escondido pelo ingresso em vez de aparecer por cima dele, na altura do picote */
#acesso .eg-photo { position: absolute; inset: 0; overflow: hidden; transform-origin: 0% 25%; will-change: transform; }
/* a família está no terço direito; em tela 16:10 a capa corta os lados do 16:9 */
#acesso .eg-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--eg-pos, 28% 55%); transform-origin: var(--eg-focus, 60% 62%); will-change: transform; }

#acesso .eg-scrim { z-index: 2; background: linear-gradient(90deg, rgba(10, 24, 34, .9) 0%, rgba(10, 24, 34, .78) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .3), rgba(16, 38, 51, .34) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .44), rgba(16, 38, 51, 0) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .56)); }
#acesso .scrim--t { z-index: 2; }
#acesso .eg-scrim-b { z-index: 2; background: linear-gradient(0deg, rgba(10, 24, 34, .72) 0%, rgba(10, 24, 34, 0) 24%); }
#acesso .eg-wrap { position: relative; z-index: 3; }
#acesso .eg-lay { height: 100%; align-items: center; padding-top: var(--hud-h); padding-bottom: clamp(20px, 4vh, 44px); }
#acesso .eg-panel { display: grid; gap: clamp(12px, 1.9vh, 22px); align-content: center; will-change: transform; }
/* o rótulo pinta por cima do véu curto do ingresso (::before, que sobe até a altura dele; o drop-shadow do
   ingresso cria contexto próprio e, sem isto, o véu .82 apagava o pêssego do rótulo) */
#acesso .eg-k { position: relative; z-index: 1; }

/* ---------- o ingresso ---------- */
#acesso .eg-ticket-wrap { position: relative; filter: drop-shadow(0 18px 34px rgba(4, 10, 15, .5)) drop-shadow(0 2px 5px rgba(4, 10, 15, .35)); will-change: transform; }
/* véu curto logo acima do ingresso (atrás dele): apaga quem anda no fundo da foto na altura da borda de cima e
   do picote (o semicírculo vazado deixa ver o que está atrás). Some antes da borda direita, longe da família. */
#acesso .eg-ticket-wrap::before { content: ''; position: absolute; z-index: -1; left: -24px; right: 0; bottom: calc(100% - 24px); height: clamp(90px, 13vh, 150px); pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 24, 34, .82) 0%, rgba(10, 24, 34, .82) 22%, rgba(10, 24, 34, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 84%, transparent 100%); }
#acesso .eg-ticket {
  --stub: 20%;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); padding: 0; container-type: inline-size;
  box-shadow: none; border: 0;
  /* picote: dois semicírculos na linha do canhoto */
  -webkit-mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat;
}
#acesso .eg-ticket::after { display: none; }
#acesso .eg-ticket__main { display: grid; gap: 2.6cqi; padding: 4.2cqi 4.4cqi 4cqi; min-width: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(242, 151, 109, .1), transparent 60%); }
#acesso .eg-ticket__k { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; }
#acesso .eg-ticket .stamp { color: var(--ink-text-2); }
#acesso .eg-ticket__place { font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-text-3); }
#acesso .eg-ticket__ev { display: grid; font-family: var(--f-display); font-stretch: 118%; font-weight: 900; text-transform: uppercase; font-size: min(calc(3.5cqi * var(--ts, 1)), 3.85cqi); line-height: 1.1; letter-spacing: -.004em; color: var(--navy); }
#acesso .eg-ticket__ev span { color: var(--clay); }
/* a faixa de validação: onde o carimbo cai (em branco até ele bater) */
#acesso .eg-zone { position: relative; height: 24cqi; border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgba(16, 38, 51, .045) 0 1px, transparent 1px 7px); box-shadow: inset 0 0 0 1px rgba(16, 38, 51, .08); }
#acesso .eg-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4cqi; }
#acesso .eg-days li { position: relative; display: grid; justify-items: center; gap: 2px; padding: 1.3cqi 0 1.1cqi; border-radius: 8px; background: var(--sand-2); box-shadow: inset 0 0 0 1px var(--ink-line); }
#acesso .eg-days span { font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-text-2); }
#acesso .eg-days b { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: min(calc(4.6cqi * var(--ts, 1)), 5.06cqi); line-height: 1; letter-spacing: -.02em; color: var(--navy); padding-top: .06em; }
#acesso .eg-punch { position: absolute; right: -7px; top: -9px; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--clay); color: var(--sand); box-shadow: 0 2px 6px rgba(16, 38, 51, .3); }

#acesso .eg-ticket__stub { position: relative; display: grid; align-content: space-between; justify-items: center; gap: 10px; padding: 4.2cqi 2cqi 4cqi; text-align: center;
  background: linear-gradient(180deg, var(--navy), #0d202b); color: var(--sand); }
/* linha do picote */
#acesso .eg-ticket__stub::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; border-left: 2px dashed rgba(244, 239, 229, .35); }
#acesso .eg-ticket__emblem { width: 9cqi; height: 9cqi; }
#acesso .eg-ticket__stub p { display: grid; gap: 2px; font-family: var(--f-mono); font-size: calc(12px * var(--ts, 1)); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
#acesso .eg-ticket__stub b { font-family: var(--f-display); font-stretch: 125%; font-weight: 900; font-size: min(calc(3.6cqi * var(--ts, 1)), 3.96cqi); letter-spacing: 0; color: var(--sun); }
#acesso .eg-bars { display: block; width: 72%; height: 9cqi; opacity: .7;
  background: repeating-linear-gradient(90deg, var(--sand) 0 2px, transparent 2px 4px, var(--sand) 4px 5px, transparent 5px 8px, var(--sand) 8px 11px, transparent 11px 13px); }

/* o carimbo: tinta terracota, borda dupla, levemente gasto. O giro estático fica no invólucro (o GSAP anima o h2) */
#acesso .eg-stamp-wrap { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%) rotate(-5deg); pointer-events: none; }
#acesso .eg-stamp {
  display: grid; justify-items: center; padding: .2em .42em .14em; border: .075em solid currentColor; border-radius: .14em;
  box-shadow: inset 0 0 0 .05em #fbf8f2, inset 0 0 0 .1em currentColor;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; white-space: nowrap;
  font-size: min(calc(8.1cqi * var(--ts, 1)), 8.91cqi); line-height: .98; letter-spacing: -.005em; color: var(--clay);
  mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
}
#acesso .eg-stamp span { display: block; }
#acesso .eg-stamp span:first-child { font-size: .78em; letter-spacing: .06em; }

/* ---------- a casa de baixo: dias → compromissos ---------- */
#acesso .eg-cell { display: grid; }
#acesso .eg-cell > * { grid-area: 1 / 1; }
#acesso .eg-days-line { align-self: start; font-family: var(--f-display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: calc((clamp(24px, 2.3vw, 42px)) * var(--ts, 1)); line-height: 1.1; letter-spacing: -.004em; color: var(--sand); text-wrap: balance; }
#acesso .eg-access { display: grid; gap: clamp(10px, 1.6vh, 18px); }
#acesso .eg-access__h { display: grid; gap: 4px; }
#acesso .eg-access__t { font-family: var(--f-display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; font-size: calc((clamp(19px, 1.5vw, 28px)) * var(--ts, 1)); line-height: 1.12; color: var(--sand); text-shadow: 0 2px 14px rgba(10, 24, 34, .6); text-wrap: balance; }
/* os quatro compromissos: uma placa só, quatro colunas com fio entre elas */
#acesso .eg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; background: rgba(10, 24, 34, .84); }
#acesso .eg-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: clamp(12px, 1.8vh, 18px) clamp(14px, 1.3vw, 20px); }
#acesso .eg-item:nth-child(even) { border-left: 1px solid var(--line); }
#acesso .eg-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
#acesso .eg-item b { font-family: var(--f-display); font-stretch: 108%; font-weight: 800; text-transform: uppercase; font-size: calc((clamp(13px, .4vw + 9.4px, 16px)) * var(--ts, 1)); line-height: 1.18; letter-spacing: .05em; color: var(--sand); text-wrap: balance; }
/* o chip de ícone é o mesmo do 08 (.mc-ico): tamanho, preenchimento pêssego e anel */
#acesso .eg-ico { display: grid; place-items: center; flex: none; width: clamp(38px, 3vw, 48px); aspect-ratio: 1; border-radius: 50%; background: rgba(242, 151, 109, .14); box-shadow: inset 0 0 0 1.5px rgba(242, 151, 109, .5); color: var(--sun); }
#acesso .eg-ico svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

#acesso .eg-credit { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(16px, 3vh, 28px); }

/* ---------- movimento reduzido: estado final completo (ingresso carimbado + compromissos) ---------- */
.reduced #acesso .eg-days-line { display: none; }

/* ---------- tablet em pé ---------- */
@media (orientation: portrait) {
  /* a foto vira uma faixa no alto (a capa da tela inteira escondia a cadeira de rodas atrás do ingresso): a cena
     inteira cabe acima do texto, com a cadeira no terço de cima; os zooms giram em volta da família */
  #acesso .eg-fallback { background: linear-gradient(180deg, #7fa9bd 0%, #bcd3da 18%, #2f6f7d 30%, #17394b 42%, #0f2430 56%, #0c1d27 100%); }
  #acesso .eg-photo { transform-origin: 50% 24.5%; }
  #acesso .eg-photo img { top: -.7%; bottom: auto; height: 46%; object-position: var(--eg-pos-p, 60% 50%); transform-origin: 50% 55%;
    -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); }
  #acesso .eg-scrim { background: linear-gradient(180deg, rgba(10, 24, 34, 0) 0%, rgba(10, 24, 34, 0) 38%, rgba(10, 24, 34, .74) 47%, rgba(10, 24, 34, .9) 53%, rgba(10, 24, 34, .94) 100%); }
  #acesso .eg-ticket-wrap::before { display: none; }
  /* em pé o rótulo cai sobre o deck de madeira e a areia claros, acima do véu (1,05:1): plaqueta navy própria */
  #acesso .eg-k { justify-self: start; padding: 5px 12px 4px; border-radius: 999px; background: rgba(10, 24, 34, .86); text-shadow: none; }
  #acesso .eg-lay { align-items: end; padding-bottom: clamp(44px, 6vh, 80px); }
  #acesso .eg-panel { --span: 1 / -1; }
  #acesso .eg-ticket-wrap { width: min(100%, 640px); }
}