/* =====================================================================
   Especialidades ("Confira de perto minhas atuações")
   Um estúdio escuro, um holofote, um card grande por vez.
   Estados (data-state na seção): off (título + interruptor) → igniting
   (a luz pisca) → on (card no facho + controles) → shutting (desligando).
   Tudo fica dentro de .es: classes, variáveis e animações usam o prefixo
   es- para não colidir com o resto do site. O JS (especialidades.js)
   calcula a posição do estúdio e do card e grava em --es-sx/sy/sw/sh e
   --es-cx/cy/cw/ch. Ler especialidades/README.md antes de mexer.
   ===================================================================== */

.es{
  color-scheme: dark;
  --es-ink:#0A0705;
  --es-ink-2:#15100B;
  --es-gold:#D4AB5E;
  --es-gold-hi:#F2D79A;
  --es-gold-lo:#8B6A2F;
  --es-cream:#F1EADB;
  --es-smoke:rgba(241,234,219,.74);
  --es-mute:rgba(241,234,219,.44);
  --es-hair:rgba(212,171,94,.34);
  --es-rose:#E8B4A0;
  --es-rose-hi:#F8D9CA;
  --es-rose-lo:#8E5C4B;
  --es-chrome:linear-gradient(180deg,#F6F3EE 0%,#F2EEE8 32%,#E6E1D9 56%,#CFC7BA 80%,#AEA290 100%);
  --es-gold-metal:linear-gradient(180deg,#EBC67E 0%,#DFB669 42%,#CDA257 76%,#B08743 100%);
  --es-rose-metal:linear-gradient(180deg,#F8DBCD 0%,#EFC4AF 42%,#DDA78F 76%,#BC8570 100%);
  --es-title-shadow:drop-shadow(0 .04em .12em rgba(0,0,0,.38));
  --es-f-body:'Archivo','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --es-gutter:clamp(20px,4vw,56px);
  --es-ease-out:cubic-bezier(.16,1,.3,1);
  --es-header:var(--nav-h, 0px); /* altura da navbar fixa do site (nav/nav.css) */

  /* Palco: a seção ocupa a tela inteira. pinch-zoom continua liberado; pan-y deixa o swipe lateral para o JS.
     A altura mínima sobe nas telas largas e baixas (ver @media no fim): abaixo dela o card fica pequeno demais para o texto. */
  position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:var(--es-ink);isolation:isolate;touch-action:pan-y pinch-zoom;
  color:var(--es-cream);font-family:var(--es-f-body);-webkit-font-smoothing:antialiased;
}
.es,.es *,.es *::before,.es *::after{box-sizing:border-box}
.es-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- estúdio ---------- */
.es-scene{position:absolute;left:var(--es-sx,0px);top:var(--es-sy,0px);width:var(--es-sw,100%);height:var(--es-sh,100%);pointer-events:none;z-index:0}
.es-scene img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;user-select:none}
.es-scene-on{opacity:0;will-change:opacity}
/* desfoque leve nas laterais (estantes e pesos): o centro (holofote, card, poça de luz) fica nítido, como profundidade de campo.
   É um véu de backdrop-filter com máscara em gradiente: vale para as duas fotos (apagada e acesa) e para a piscada da luz. */
.es-blur{position:absolute;inset:0;-webkit-backdrop-filter:blur(var(--es-blur,1.3px));backdrop-filter:blur(var(--es-blur,1.3px));
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 24%,transparent 38%,transparent 62%,#000 76%,#000 100%);
          mask-image:linear-gradient(to right,#000 0,#000 24%,transparent 38%,transparent 62%,#000 76%,#000 100%)}
.es-bloom{position:absolute;left:49.9%;top:10.4%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,234,184,.75) 0%,rgba(242,205,128,.26) 14%,rgba(212,171,94,.08) 32%,transparent 56%);
  mix-blend-mode:screen;opacity:0;will-change:opacity}
.es-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 95% at 50% 42%,transparent 52%,rgba(10,7,5,.7) 100%),
    linear-gradient(to right,rgba(10,7,5,.8),rgba(10,7,5,.45) 18%,transparent 30%,transparent 70%,rgba(10,7,5,.45) 82%,rgba(10,7,5,.8)),
    linear-gradient(to bottom,rgba(10,7,5,.35),transparent 16%,transparent 78%,rgba(10,7,5,.8))}
.es-rose{position:absolute;inset:0;opacity:0;mix-blend-mode:color;pointer-events:none;
  background:radial-gradient(34% 64% at 49.9% 44%,rgba(236,138,128,.95),rgba(236,138,128,.35) 55%,transparent 78%)}
/* arte vertical do estúdio para celular e tablet em pé */
.es[data-scene="mob"] .es-bloom{left:49.7%;top:7.4%;width:92%}
.es[data-scene="mob"] .es-rose{background:radial-gradient(46% 56% at 49.7% 42%,rgba(236,138,128,.95),rgba(236,138,128,.35) 55%,transparent 78%)}

/* ---------- abertura da seção (luz apagada) ---------- */
.es-intro{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;text-align:center;
  gap:20px;padding-inline:var(--es-gutter);padding-top:6vh;
  transition:opacity .55s ease .12s,transform .8s var(--es-ease-out) .12s,filter .55s ease .12s}
.es-eyebrow{margin:0;display:inline-flex;align-items:center;gap:14px;font:600 11px/1 var(--es-f-body);letter-spacing:.38em;text-transform:uppercase;color:var(--es-gold)}
.es-eyebrow::before,.es-eyebrow::after{content:"";width:28px;height:1px;background:var(--es-hair)}
.es-intro-title{margin:0;display:grid;gap:.06em;font-style:italic;font-weight:900;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(34px,6.2vw,96px);line-height:.95;letter-spacing:-.012em;text-wrap:balance}
.es-intro-title span{display:block;padding:0 .08em;background:var(--es-chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:var(--es-title-shadow)}
.es-intro-title .es-gold{background-image:var(--es-gold-metal)}
.es-intro-sub{margin:0;max-width:34ch;font-size:clamp(14px,1.15vw,16px);line-height:1.6;color:var(--es-smoke)}
.es-switch-wrap{display:grid;justify-items:center;gap:28px;margin-top:14px}
.es-switch-label{font:600 11px/1 var(--es-f-body);letter-spacing:.38em;text-transform:uppercase;color:var(--es-cream)}

.es[data-state="igniting"] .es-intro,.es[data-state="on"] .es-intro,.es[data-state="shutting"] .es-intro{opacity:0;transform:translateY(-16px) scale(.985);filter:blur(6px);pointer-events:none}
.es[data-state="shutting"] .es-intro{transition-delay:0s}

/* ---------- interruptor (arte) ---------- */
.es-switch{appearance:none;border:0;padding:0;background:none;cursor:pointer;color:inherit;position:relative;display:block;
  width:clamp(92px,7.6vw,116px);aspect-ratio:360/538;border-radius:14%/9%;transition:transform .35s var(--es-ease-out)}
.es-sw-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;user-select:none;pointer-events:none}
.es-switch .es-sw-img:first-of-type{filter:drop-shadow(0 18px 28px rgba(0,0,0,.75))}
.es-sw-on{opacity:0;transition:opacity .08s linear}
.es .is-on > .es-sw-on,.es .is-on .es-sw-on{opacity:1}
.es-switch::before{content:"";position:absolute;left:50%;top:17%;width:120%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,196,104,.42),rgba(255,196,104,.1) 28%,transparent 56%);mix-blend-mode:screen;opacity:0;transition:opacity .3s}
.es-switch.is-on::before{opacity:1}
.es-switch::after{content:"";position:absolute;inset:-12px;border-radius:18px;border:1px solid rgba(212,171,94,.5);animation:es-invite 2.6s ease-out infinite;pointer-events:none}
.es-switch[aria-pressed="true"]::after{animation:none;opacity:0}
.es-switch:hover{transform:translateY(-3px)}
.es-switch:active{transform:scale(.97)}
.es-switch:focus-visible,.es-off-btn:focus-visible{outline:2px solid var(--es-gold);outline-offset:10px}
@keyframes es-invite{0%{opacity:.85;transform:scale(.97)}100%{opacity:0;transform:scale(1.18)}}

/* ---------- interface com a luz acesa ---------- */
.es-ui{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .7s var(--es-ease-out);transition-delay:0s}
.es[data-state="on"] .es-ui{opacity:1;transform:none;transition-delay:var(--es-d,0s)}
.es-show{position:absolute;inset:0;z-index:6;pointer-events:none}
.es-show > *{pointer-events:auto}
.es[data-state="off"] .es-show > *,.es[data-state="igniting"] .es-show > *{pointer-events:none}

/* abaixo da navbar fixa do site (no pacote original: top 24px) */
.es-show-label{position:absolute;top:calc(var(--es-header) + 24px);left:var(--es-gutter);display:none}
.es-show-label.es-eyebrow::before{display:none}

.es-index{position:absolute;left:var(--es-gutter);top:50%;translate:0 -50%;display:none}
.es-index .es-eyebrow::before{display:none}
.es-index-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:2px}
.es-ix{appearance:none;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:12px;padding:9px 0;
  font:600 11.5px/1 var(--es-f-body);letter-spacing:.26em;text-transform:uppercase;color:var(--es-mute);transition:color .3s ease}
.es-ix-n{width:2.2ch;font-variant-numeric:tabular-nums;color:rgba(212,171,94,.45);transition:color .3s}
.es-ix-line{width:0;height:1px;background:var(--es-gold);transition:width .45s var(--es-ease-out)}
.es-ix:hover{color:var(--es-cream)}
.es-ix.is-active{color:var(--es-cream)}
.es-ix.is-active .es-ix-n{color:var(--es-gold)}
.es-ix.is-active .es-ix-line{width:26px}
.es-ix:focus-visible{outline:2px solid var(--es-gold);outline-offset:4px}
.es-ix-tag{padding:4px 7px 4px 8px;border:1px solid rgba(232,180,160,.55);font-size:8px;letter-spacing:.24em;color:var(--es-rose)}
.es-ix.is-special.is-active{color:var(--es-rose-hi)}
.es-ix.is-special.is-active .es-ix-n{color:var(--es-rose)}
.es-ix.is-special .es-ix-line{background:var(--es-rose)}

/* card */
.es-card{position:absolute;left:var(--es-cx);top:var(--es-cy);width:var(--es-cw);height:var(--es-ch);z-index:6;opacity:0;margin:0}
.es-card-tilt{position:absolute;inset:0;transform:perspective(1400px) rotateX(var(--es-rx,0deg)) rotateY(var(--es-ry,0deg));transition:transform .6s var(--es-ease-out)}
.es-card-frame{position:absolute;inset:0;padding:1.5px;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  background:linear-gradient(var(--es-fa,135deg),#5e4520 0%,#f3d894 22%,#a07c3d 40%,#fbe7b5 55%,#7d5e28 74%,#e2bd72 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.6)}
.es-card-inner{position:relative;width:100%;height:100%;overflow:hidden;background:var(--es-ink);
  clip-path:polygon(21.1px 0,100% 0,100% calc(100% - 21.1px),calc(100% - 21.1px) 100%,0 100%,0 21.1px)}
.es-card-art{position:absolute;inset:0}
.es-card-art img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.es-card-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent var(--es-fade,44%),rgba(10,7,5,.55) calc(var(--es-fade,44%) + 13%),rgba(10,7,5,.92) calc(var(--es-fade,44%) + 28%),var(--es-ink) calc(var(--es-fade,44%) + 42%))}
.es-card-art.is-placeholder{background:
    radial-gradient(42% 7% at 50% 49%,rgba(232,192,116,.42),transparent 72%),
    radial-gradient(70% 40% at 50% 0%,rgba(212,171,94,.16),transparent 70%),var(--es-ink)}
.es-card-art.is-placeholder::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;
  clip-path:polygon(43% 0,57% 0,84% 100%,16% 100%);
  background:linear-gradient(to bottom,rgba(246,214,150,.5),rgba(212,171,94,.12) 80%,transparent);filter:blur(10px)}
.es-ph-tag{position:absolute;left:50%;top:36%;translate:-50% -50%;padding:9px 14px;border:1px solid var(--es-hair);
  font:600 9.5px/1 var(--es-f-body);letter-spacing:.3em;text-transform:uppercase;color:var(--es-gold);background:rgba(10,7,5,.55);white-space:nowrap}
.es-card-light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(90% 42% at 50% -8%,rgba(255,222,150,.2),transparent 70%)}
.es-card-shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(380px circle at var(--es-px,50%) var(--es-py,30%),rgba(255,232,180,.11),transparent 46%)}
.es-card:hover .es-card-shine{opacity:1}
.es-card-glint{position:absolute;inset:-10% -40%;pointer-events:none;mix-blend-mode:screen;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 42%,rgba(255,236,190,.26) 50%,transparent 58%)}
.es-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.es-card-count{flex:none;font:600 10.5px/1 var(--es-f-body);letter-spacing:.3em;color:var(--es-gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.es-card-count span{color:var(--es-mute)}
.es-card-badge{position:absolute;z-index:2;left:50%;top:-14px;translate:-50% 0;padding:9px 20px;white-space:nowrap;
  font:700 9.5px/1 var(--es-f-body);letter-spacing:.3em;text-transform:uppercase;color:#2a1712;
  background:linear-gradient(100deg,#B97E68,#F8D9CA 45%,#D9A08A 70%,#F2C2AC);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.es-card.is-special .es-card-frame{background:linear-gradient(var(--es-fa,135deg),#6b4237 0%,#f6cfba 22%,#b57e68 40%,#ffe6d8 55%,#8e5c4b 74%,#ecb79f 100%)}
.es-card.is-special .es-card-eyebrow,.es-card.is-special .es-card-count{color:var(--es-rose)}
.es-card.is-special .es-card-eyebrow::after{background:rgba(232,180,160,.4)}
.es-card.is-special .es-card-light{background:radial-gradient(90% 42% at 50% -8%,rgba(255,200,186,.2),transparent 70%)}
.es-card-body{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:12px;
  padding:0 clamp(20px,calc(var(--es-cw) * .08),34px) clamp(20px,calc(var(--es-cw) * .075),32px)}
.es-card-eyebrow{margin:0;display:flex;align-items:center;gap:12px;font:600 10.5px/1 var(--es-f-body);letter-spacing:.34em;text-transform:uppercase;color:var(--es-gold)}
.es-card-eyebrow::after{content:"";width:34px;height:1px;background:var(--es-hair)}
.es-card-title{margin:0;font-style:italic;font-weight:900;font-stretch:62%;text-transform:uppercase;
  font-size:clamp(28px,calc(var(--es-cw) * .108),54px);line-height:.92;letter-spacing:-.003em;text-wrap:balance;
  background:var(--es-chrome);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:var(--es-title-shadow)}
.es-card-title em{font-style:inherit;background:var(--es-gold-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.es-card.is-special .es-card-title em{background-image:var(--es-rose-metal)}
.es-card-text{margin:0;max-width:40ch;font-size:clamp(13px,calc(var(--es-cw) * .036),15.5px);line-height:1.55;color:var(--es-smoke)}
.es-card-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;margin-top:4px;padding:10px 0;
  font:700 10.5px/1 var(--es-f-body);letter-spacing:.32em;text-transform:uppercase;color:var(--es-cream);text-decoration:none;transition:color .3s}
.es-card-cta svg{width:34px;height:12px;transition:width .4s var(--es-ease-out)}
.es-card-cta:hover{color:var(--es-gold-hi)}
.es-card-cta:hover svg{width:48px}
.es-card-cta:focus-visible{outline:2px solid var(--es-gold);outline-offset:4px}

.es-card-pool{position:absolute;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:0;
  left:calc(var(--es-cx) - var(--es-cw) * .45);width:calc(var(--es-cw) * 1.9);top:calc(var(--es-cy) + var(--es-ch) - 48px);height:110px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(242,204,128,.34),transparent 72%)}
.es-card-shadow{position:absolute;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s ease;
  left:calc(var(--es-cx) - var(--es-cw) * .08);width:calc(var(--es-cw) * 1.16);top:calc(var(--es-cy) + var(--es-ch) - 14px);height:34px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75),transparent 72%)}
.es[data-state="on"] .es-card-shadow{opacity:1}
.es[data-special] .es-card-pool{background:radial-gradient(50% 50% at 50% 50%,rgba(242,178,160,.34),transparent 72%)}
.es-pg.is-special.is-active::before{background:var(--es-rose)}

/* setas */
.es-arrow{position:absolute;z-index:7;width:66px;height:46px;appearance:none;border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  top:calc(var(--es-cy) + var(--es-ch) / 2 - 23px);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:filter .3s,background .3s}
.es-arrow svg{width:26px;height:12px;position:relative}
.es-arrow--prev{left:calc(var(--es-cx) - 66px - 30px);background:var(--es-hair);color:var(--es-cream)}
.es-arrow--prev::before{content:"";position:absolute;inset:1px;clip-path:polygon(13.6px 0,100% 0,calc(100% - 13.6px) 100%,0 100%);background:rgba(15,11,8,.92);transition:background .3s}
.es-arrow--prev:hover{background:var(--es-gold)}
.es-arrow--prev svg{transform:rotate(180deg)}
.es-arrow--next{left:calc(var(--es-cx) + var(--es-cw) + 30px);background:var(--es-gold);color:var(--es-ink)}
.es-arrow--next:hover{background:var(--es-gold-hi)}
.es-arrow:focus-visible{outline:2px solid var(--es-gold-hi);outline-offset:4px}

.es-progress{position:absolute;z-index:7;left:50%;translate:-50% 0;top:calc(var(--es-cy) + var(--es-ch) + 26px);display:flex;align-items:center;gap:2px;height:46px}
.es-pg{appearance:none;background:none;border:0;padding:0;width:22px;height:30px;cursor:pointer;display:grid;place-items:center;transition:width .45s var(--es-ease-out)}
.es-pg::before{content:"";width:14px;height:2px;background:rgba(241,234,219,.26);transition:width .45s var(--es-ease-out),background .3s}
.es-pg:hover::before{background:rgba(241,234,219,.6)}
.es-pg.is-active{width:44px}
.es-pg.is-active::before{width:36px;background:var(--es-gold)}
.es-pg:focus-visible{outline:2px solid var(--es-gold);outline-offset:2px}

.es-off-btn{position:absolute;z-index:7;appearance:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--es-mute);
  display:flex;align-items:center;gap:14px;font:600 10.5px/1 var(--es-f-body);letter-spacing:.3em;text-transform:uppercase;transition:color .3s}
.es-off-btn:hover{color:var(--es-cream)}
.es-mini{position:relative;width:32px;aspect-ratio:360/538;flex:none}

/* desktop: índice à esquerda, interruptor à direita, setas ao lado do card */
/* Alturas mínimas: garantem card de ~300×450px ou mais, o tamanho em que o rótulo, o contador e o texto cabem
   sem invadir a arte (medido de 360 a 1920px de largura). Só valem em telas baixas; nas demais a seção = altura da tela. */
@media (min-width:1100px){
  .es{min-height:690px}
  .es-index{display:block}
  .es-off-btn{right:var(--es-gutter);top:50%;translate:0 -50%;flex-direction:column;gap:16px;text-align:center}
  .es-off-btn .es-mini{width:54px}
  .es-off-label{line-height:1.8}
}
@media (max-width:1099px){
  .es{min-height:760px}
  .es-show-label{display:inline-flex}
  .es-br-d{display:none}
  .es-off-btn{left:50%;translate:-50% 0;top:calc(var(--es-cy) + var(--es-ch) + 82px);white-space:nowrap}
}
/* celular: as setas descem para a linha do progresso */
@media (max-width:759px){
  .es{min-height:620px}
  .es-show-label{display:none}
  .es-intro-title{font-stretch:86%;font-size:clamp(30px,8.6vw,46px)}
  .es-arrow{top:calc(var(--es-cy) + var(--es-ch) + 26px);width:58px;height:42px}
  .es-arrow--prev{left:var(--es-gutter)}
  .es-arrow--next{left:auto;right:var(--es-gutter)}
  .es-progress{top:calc(var(--es-cy) + var(--es-ch) + 24px)}
  .es-pg{width:18px}.es-pg::before{width:10px}.es-pg.is-active{width:34px}.es-pg.is-active::before{width:26px}
}
@media (prefers-reduced-motion:reduce){
  .es-switch::after{animation:none}
  .es-card-tilt,.es-ui,.es-intro{transition-duration:.01s!important}
}