/* 09 · A marca aparece onde a experiência acontece — o calendário do advento.
   Palco fixado em três faixas (.ex-inner): cabeçalho (título 7 colunas + frases 5), o calendário e o fecho.
   O calendário é UMA grade (.ex-cal): texto | painel(janela janela) | texto, duas fileiras — cada texto fica na
   fileira da sua janela, do lado de fora do painel. A largura da janela (--ww) vem da coluna (cqi da .ex-wrap) e,
   em tela baixa, do JS (--ww-fit, medido no refresh). Na parada de cada porta a janela vem para o centro do painel,
   ~2,2× (FLIP do JS no .ex-zoom): o mockup com a marca é lido grande. Tudo sob #experiencia. */
#experiencia .ex-stage { isolation: isolate; }

/* ---- ambiente: luz quente atrás do painel e a estrela do deck no canto (a regra única do núcleo) ---- */
#experiencia .ex-amb { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#experiencia .ex-warm { position: absolute; inset: 0;
  background:
    radial-gradient(46% 42% at 50% 64%, rgba(233, 162, 75, .14), rgba(233, 162, 75, 0) 70%),
    radial-gradient(80% 60% at 50% 110%, rgba(3, 12, 6, .55), rgba(3, 12, 6, 0) 70%); }
/* canto de baixo à esquerda, pequena o bastante para não chegar ao texto do ponto 3 nem ao fecho */
#experiencia .ex-star { --size: min(24vmin, 280px); opacity: .85; }

/* ---- as três faixas ---- */
#experiencia .ex-wrap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; justify-content: safe center;
  padding-top: calc(var(--top-safe) + clamp(6px, 1.4vh, 22px)); padding-bottom: clamp(22px, 2.6vh, 36px); container-type: inline-size; }
#experiencia .ex-inner { display: grid; row-gap: clamp(14px, 2.6vh, 34px); }
/* tela larga (1920, projetor): o calendário usa mais largura que a coluna padrão da peça */
@media (min-width: 1700px) { #experiencia .ex-wrap { max-width: calc(var(--maxw) * 1.18); } }

/* cabeçalho: título (7 colunas) e as duas frases (5), pelo pé */
#experiencia .ex-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
#experiencia .ex-title-wrap { grid-column: 1 / 8; container-type: inline-size; }
/* título pelo token do núcleo (.ch-title): "ONDE A EXPERIÊNCIA" (11,5 em) é a linha que não quebra */
#experiencia .ex-title { --title-em: 11.7; }
#experiencia .ex-t1, #experiencia .ex-t2 { display: block; width: fit-content; }
#experiencia .ex-t1 { color: var(--cream); }
#experiencia .ex-t2 { color: var(--gold); }
#experiencia .ex-intro { grid-column: 8 / 13; display: grid; gap: clamp(8px, 1.4vh, 16px); padding-bottom: .2em; }
#experiencia .ex-kicker { font-family: var(--f-body); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; line-height: 1.42;
  font-size: calc((clamp(14px, .38vw + 9.2px, 18px)) * var(--ts, 1)); color: var(--gold-2); text-wrap: pretty; }
#experiencia .ex-lede { font-size: calc((clamp(15px, .5vw + 9.4px, 19px)) * var(--ts, 1)); line-height: 1.5; max-width: 46ch; }

/* ---- o calendário ---- */
#experiencia .ex-cal {
  --gout: clamp(16px, 1.9vw, 34px);     /* texto ↔ painel */
  --pad: clamp(28px, 3vw, 54px);        /* margem lateral do painel: é onde as portas abertas encostam */
  --gin: clamp(12px, 1.2vw, 22px);      /* entre as janelas */
  --padt: clamp(30px, 4.4vh, 54px);     /* alto do painel: o festão de luzinhas e o laço */
  --rg: clamp(10px, 1.8vh, 24px);
  --padb: clamp(8px, 1.4vh, 18px);
  --ww: min(var(--ww-fit, 9999px), 23.5cqi);
  position: relative; display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) var(--gout) var(--pad) var(--ww) var(--gin) var(--ww) var(--pad) var(--gout) minmax(0, 1fr);
  grid-template-rows: var(--padt) auto var(--rg) auto var(--padb);
  grid-template-areas:
    ".  . . .  . .  . . .  "
    "t1 . . w1 . w2 . . t2"
    ".  . . .  . .  . . .  "
    "t3 . . w3 . w4 . . t4"
    ".  . . .  . .  . . .  ";
}
/* o painel: veludo vinho, moldura dourada dupla, estrelinhas douradas bem apagadas */
#experiencia .ex-board { grid-column: 3 / 8; grid-row: 1 / -1; align-self: stretch; position: relative; z-index: 0; border-radius: 14px; background: var(--velvet-wine);
  box-shadow: inset 0 0 0 1.5px rgba(247, 201, 120, .6), inset 0 0 0 6px rgba(60, 4, 6, .55), inset 0 0 0 7.5px rgba(233, 162, 75, .32), 0 0 0 1px rgba(20, 2, 4, .6), 0 22px 60px rgba(0, 0, 0, .5), 0 0 80px rgba(233, 162, 75, .08); }
#experiencia .ex-board::before { content: ''; position: absolute; inset: 8px; border-radius: 9px; opacity: .3; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23e9a24b'%3E%3Cpath d='M24 10C24.6 17 26.4 18.8 33 19.4C26.4 20 24.6 21.8 24 28.8C23.4 21.8 21.6 20 15 19.4C21.6 18.8 23.4 17 24 10Z'/%3E%3Cpath d='M72 56C72.4 60.4 73.6 61.6 78 62C73.6 62.4 72.4 63.6 72 68C71.6 63.6 70.4 62.4 66 62C70.4 61.6 71.6 60.4 72 56Z'/%3E%3Ccircle cx='66' cy='20' r='1.3'/%3E%3Ccircle cx='20' cy='70' r='1.3'/%3E%3Ccircle cx='48' cy='86' r='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 96px 96px; }
/* festão de luzinhas no alto do painel (NL.garland: coordenadas da caixa) */
#experiencia .ex-garland { position: absolute; left: 1.5%; right: 1.5%; top: -4px; height: calc(var(--padt) + 4px); z-index: 1; }
/* laço no alto, no meio do festão (NL.swing no invólucro) */
#experiencia .ex-bowhang { position: absolute; z-index: 2; left: 50%; top: calc(var(--padt) * -.62); width: clamp(64px, calc(var(--padt) * 2.2), 120px); margin-left: calc(clamp(64px, calc(var(--padt) * 2.2), 120px) / -2); }
#experiencia .ex-bow { width: 100%; height: auto; aspect-ratio: 240 / 170; max-width: none; overflow: visible; color: var(--red-2); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }

/* penumbra sobre as outras janelas enquanto uma está no centro (acima das janelas, abaixo da crescida; o JS acende) */
#experiencia .ex-dim { grid-column: 3 / 8; grid-row: 2 / 5; align-self: stretch; position: relative; z-index: 5; margin: -8px 8px; border-radius: 8px; opacity: 0; pointer-events: none;
  background: radial-gradient(90% 90% at 50% 50%, rgba(22, 2, 5, .5), rgba(22, 2, 5, .72)); }

/* ---- as janelas ---- */
#experiencia .ex-win--1 { grid-area: w1; } #experiencia .ex-win--2 { grid-area: w2; }
#experiencia .ex-win--3 { grid-area: w3; } #experiencia .ex-win--4 { grid-area: w4; }
/* a vaga na grade; o z-index sobe enquanto a janela está no centro (JS) */
#experiencia .ex-win { position: relative; z-index: 2; cursor: pointer; }
/* o que vai ao centro: a foto, a porta, a luz de trás e o crédito (FLIP: x/y/scale do JS) */
#experiencia .ex-zoom { position: relative; display: grid; gap: clamp(3px, .6vh, 7px); }
/* luz quente atrás da janela aberta (acende na abertura) */
#experiencia .ex-halo { position: absolute; left: -16%; right: -16%; top: -26%; aspect-ratio: 1.7; opacity: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .42), rgba(233, 162, 75, .14) 55%, rgba(233, 162, 75, 0)); }
/* a janela recortada no painel: moldura dourada fina + fundo escuro */
#experiencia .ex-view { position: relative; aspect-ratio: 3840 / 2143; overflow: hidden; border-radius: 3px; background: #0d2415; container-type: size;
  box-shadow: 0 0 0 1.5px rgba(247, 201, 120, .85), 0 0 0 4px rgba(40, 3, 5, .75), 0 6px 16px rgba(0, 0, 0, .5); }
#experiencia .ex-view::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 18px rgba(0, 0, 0, .5), inset 0 2px 6px rgba(0, 0, 0, .55); }
/* o mockup inteiro, recortado "cover" com zoom (--z) e ponto focal (--fx, --fy) — só em CSS; o NL.mock mede a figura */
#experiencia .ex-view .mock { position: absolute; margin: 0; --W: calc(100cqw * var(--z, 1)); width: var(--W); height: calc(var(--W) / 1.7919);
  left: clamp(100cqw - var(--W), 50cqw - var(--fx, .5) * var(--W), 0px); top: clamp(100cqh - var(--W) / 1.7919, 50cqh - var(--fy, .5) * var(--W) / 1.7919, 0px); }
#experiencia .ex-view .mock.has-missing { background: radial-gradient(60% 60% at 50% 40%, #2a4a30, #0d2415); }
/* a sombra da porta sobre a foto (some enquanto ela abre) */
#experiencia .ex-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(3, 8, 5, .72), rgba(3, 8, 5, .28) 50%, rgba(3, 8, 5, .06)); }
#experiencia .ex-win--r .ex-shade { background: linear-gradient(270deg, rgba(3, 8, 5, .72), rgba(3, 8, 5, .28) 50%, rgba(3, 8, 5, .06)); }
/* o clarão de dentro quando a porta abre */
#experiencia .ex-glow { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(70% 90% at var(--gx, 20%) 50%, rgba(255, 248, 226, .95), rgba(255, 214, 140, .55) 40%, rgba(233, 162, 75, 0) 80%); }
#experiencia .ex-win--r .ex-glow { --gx: 80%; }

/* dobradiça: a perspectiva nasce na borda da dobradiça — aberta a ~96°, a porta vira uma fresta do lado de fora */
#experiencia .ex-hinge { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 3840 / 2143; z-index: 5; pointer-events: none; perspective: calc(var(--ww) * 5.5); perspective-origin: 0% 50%; }
#experiencia .ex-win--r .ex-hinge { perspective-origin: 100% 50%; }
#experiencia .ex-door { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0% 50%; }
#experiencia .ex-win--r .ex-door { transform-origin: 100% 50%; }
#experiencia .ex-door__f, #experiencia .ex-door__b { position: absolute; inset: 0; border-radius: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* frente: papel cartão creme com estrelinhas, moldura dourada dupla, o número e a argolinha de puxar */
#experiencia .ex-door__f { display: grid; place-items: center; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23c98a3a' fill-opacity='.42'%3E%3Cpath d='M16 6C16.4 10.6 17.4 11.6 22 12C17.4 12.4 16.4 13.4 16 18C15.6 13.4 14.6 12.4 10 12C14.6 11.6 15.6 10.6 16 6Z'/%3E%3Cpath d='M48 38C48.3 41.2 49 41.9 52.2 42.2C49 42.5 48.3 43.2 48 46.4C47.7 43.2 47 42.5 43.8 42.2C47 41.9 47.7 41.2 48 38Z'/%3E%3Ccircle cx='46' cy='14' r='1'/%3E%3Ccircle cx='14' cy='46' r='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--ww) * .2) auto,
    radial-gradient(130% 100% at 30% 12%, #fffaf1, #f5e8cf 66%, #ead6b1);
  box-shadow: inset 0 0 0 1px rgba(185, 119, 44, .45), inset 0 0 26px rgba(150, 100, 40, .2); }
#experiencia .ex-door__f::before { content: ''; position: absolute; inset: 7.5% 5%; border: 1.5px solid rgba(201, 138, 58, .95); border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(255, 250, 240, .85), 0 0 0 4.5px rgba(201, 138, 58, .5); }
#experiencia .ex-door__n { position: relative; font-family: var(--f-display); font-weight: 600; font-size: calc(var(--ww) * .3); line-height: 1; padding-top: .14em; color: var(--wine);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 0 18px rgba(233, 162, 75, .35); }
#experiencia .ex-door__star { position: absolute; top: 14%; right: 9%; width: 13%; height: auto; aspect-ratio: 1; max-width: none; overflow: visible; --star8-c: var(--red); --star8-core: #3a0508; }
#experiencia .ex-win--r .ex-door__star { right: auto; left: 9%; }
#experiencia .ex-door__knob { position: absolute; top: 50%; right: 3.2%; width: 5%; aspect-ratio: 1; margin-top: -2.5%; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff2cf, #e9a24b 46%, #8a5418); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
#experiencia .ex-win--r .ex-door__knob { right: auto; left: 3.2%; }
/* verso: o avesso do papel (visto de lado quando a porta está aberta) */
#experiencia .ex-door__b { transform: rotateY(180deg);
  background: linear-gradient(90deg, #cdb58c, #eadbbd 38%, #f3e7cf 62%, #dcc6a0); box-shadow: inset 0 0 0 1px rgba(185, 119, 44, .4); }

/* crédito embaixo de cada janela, do lado oposto à porta aberta; no zoom ele faz a contra-escala (fica no corpo
   de crédito, preso ao canto da foto) */
#experiencia .ex-credit { font-family: var(--f-body); font-weight: 500; font-size: var(--credit-fs); letter-spacing: .03em; line-height: 1.25; color: rgba(255, 244, 226, .95); text-shadow: 0 1px 2px rgba(20, 2, 4, .6); text-align: right; white-space: nowrap; transform-origin: 100% 0; }
#experiencia .ex-win--r .ex-credit { text-align: left; transform-origin: 0 0; }

/* ---- os textos dos pontos, do lado de fora do painel ---- */
#experiencia .ex-pt--1 { grid-area: t1; } #experiencia .ex-pt--2 { grid-area: t2; }
#experiencia .ex-pt--3 { grid-area: t3; } #experiencia .ex-pt--4 { grid-area: t4; }
#experiencia .ex-pt { position: relative; z-index: 2; align-self: center; display: grid; gap: clamp(6px, 1vh, 12px); min-width: 0; }
#experiencia .ex-pt--1, #experiencia .ex-pt--3 { justify-items: end; text-align: right; }
#experiencia .ex-pt__h { display: flex; align-items: center; gap: .5em; color: var(--gold-2); white-space: nowrap; }
#experiencia .ex-pt--1 .ex-pt__h, #experiencia .ex-pt--3 .ex-pt__h { flex-direction: row-reverse; }
#experiencia .ex-pt__n { display: inline-grid; place-items: center; flex: none; width: 1.62em; height: 1.62em; border-radius: 50%; padding-top: .12em;
  font-size: .82em; font-weight: 700; color: var(--wine); background: radial-gradient(circle at 35% 30%, #fffaf1, #f1dfbd); box-shadow: 0 0 0 1.5px var(--gold), 0 0 14px rgba(247, 201, 120, .35); }
#experiencia .ex-pt__t { font-size: calc((clamp(14.5px, .42vw + 9.4px, 18px)) * var(--ts, 1)); line-height: 1.45; color: var(--text-2); max-width: 32ch; }

/* ---- fecho ---- */
#experiencia .ex-close { display: flex; align-items: center; justify-content: center; gap: .9em; text-align: center;
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; line-height: 1.3;
  font-size: calc((clamp(15px, .62vw + 7.4px, 23px)) * var(--ts, 1)); color: var(--gold-2); }
#experiencia .ex-close__t { padding-top: .12em; text-wrap: balance; max-width: 62em; }
#experiencia .ex-close__s { --size: .9em; flex: none; }

/* ---- em pé (tablet 1024 × 1366): as janelas duas a duas na largura cheia da coluna; os quatro textos embaixo do
   painel, cada um sob a coluna da sua janela (o zoom cobre o miolo do painel, não os textos) ---- */
@media (orientation: portrait) {
  #experiencia .ex-star { display: none; }            /* em pé o fecho ocupa a largura toda: não há canto livre */
  #experiencia .ex-inner { row-gap: clamp(14px, 1.7vh, 24px); }
  #experiencia .ex-head { row-gap: 14px; }
  #experiencia .ex-title-wrap { grid-column: 1 / -1; }
  /* em pé o título corre numa frase só e quebra em duas linhas ("A MARCA APARECE ONDE A" = 14,5 em) */
  #experiencia .ex-title { --title-em: 14.8; }
  #experiencia .ex-t1, #experiencia .ex-t2 { display: inline; }
  #experiencia .ex-intro { grid-column: 1 / -1; }
  #experiencia .ex-lede { max-width: 62ch; }
  #experiencia .ex-cal {
    --pad: clamp(24px, 4vw, 44px); --gin: clamp(14px, 2.2vw, 24px); --rg: 20px; --padb: 18px; --tg: 18px; --trg: 16px;
    --ww: min(var(--ww-fit, 9999px), calc((100cqi - 2 * var(--pad) - var(--gin)) / 2));
    justify-content: center;
    grid-template-columns: var(--pad) var(--ww) var(--gin) var(--ww) var(--pad);
    grid-template-rows: var(--padt) auto var(--rg) auto var(--padb) var(--tg) auto var(--trg) auto;
    grid-template-areas:
      ". .  . .  ."
      ". w1 . w2 ."
      ". .  . .  ."
      ". w3 . w4 ."
      ". .  . .  ."
      ". .  . .  ."
      ". t1 . t2 ."
      ". .  . .  ."
      ". t3 . t4 .";
  }
  #experiencia .ex-board { grid-column: 1 / -1; grid-row: 1 / 6; }
  #experiencia .ex-dim { grid-column: 1 / -1; }
  #experiencia .ex-pt { align-self: start; }
  #experiencia .ex-pt--1, #experiencia .ex-pt--3 { justify-items: start; text-align: left; }
  #experiencia .ex-pt--1 .ex-pt__h, #experiencia .ex-pt--3 .ex-pt__h { flex-direction: row; }
  #experiencia .ex-pt__t { max-width: none; font-size: calc(15px * var(--ts, 1)); }
}

/* sem movimento: a timeline já leva tudo ao estado final (portas abertas na grade, textos no lugar) */