/* ==========================================================================
   08-taxas.css — banda escura full-bleed + calculadora de vidro Pix/Boleto
   Ref: DESIGN_SPEC §4.6 (vidro) · §4.9 · §5.2 (6·10) · §8 (08 taxas) · BUILD_PLAN 08-taxas
        06 §2.4 (outline branco) · §2.6 (tabs) · §6.6 (mapa halftone) · 04 §6 (seta)
   Alvo 1440: banda y3868→4870 (1003px) + tira 64px
     H2 3988–4046 · p 4070–4126 · CTAs 4150–4198 · card x360–1080 y4238–4750 (720×513)
     seta x1291–1428 y4627–4749 · halftone: passo 16 × 12,5px, ponto 12 × 9px
     (o ponto da ref mede 12 × 10 com as caudas de antialiasing; 1px de diferença na altura,
      dentro do ruído — subir o `ry` só engrossaria a mancha, que já é 15% mais densa que a ref)
     mancha de terra dentro da banda: y+136 → y+800, x0–150 + x1080–1440 (medida a #284D4F)
   ========================================================================== */

/* ---------- 1. Banda escura (full-bleed, sem trilhos, sem raio) ---------- */
.taxas__band{position:relative;overflow:hidden;
  background:var(--c-dark-bg);color:var(--c-on-dark);
  padding:var(--taxas-py) var(--taxas-px)}

/* Textura de mapa-múndi em halftone: fica atrás de tudo, quase imperceptível.
   Enquadramento medido na referência (1440): o mapa é RECORTADO fora do centro —
   as Américas saem pela esquerda (América do Sul encostada em x0) e a Austrália
   entra no canto inferior direito (x≈1270–1440). Daí o deslocamento lateral fixo.
   Vertical: em ≥769 a mancha de terra vai de +136 a +800 dentro da banda (ref); quem faz esse
   enquadramento é o `transform` do <clipPath> no partial (translate(-120,78) scale(1,.913)).
   O `top:-78px` do mobile CANCELA aquele translate vertical: no mobile de referência os pontos
   começam colados no topo da banda (y0–100 tem a maior densidade), e sem isso ficavam 78px baixos.
   `max-width:none` anula o `img,svg{max-width:100%}` do reset — sem ele o SVG era espremido
   para a largura do viewport e o `slice` reescalava o padrão (era essa a origem dos pontos
   grandes demais no mobile e do recorte errado no desktop). 1 unidade = 1px em todo lugar. */
.taxas__map{position:absolute;left:50%;top:-78px;z-index:0;
  width:2586px;height:840px;max-width:none;
  transform:translateX(-50%) translateX(-452px);   /* <769: janela sobre a Eurásia, como no mobile de ref */
  opacity:.2;pointer-events:none}
.taxas__map ellipse{fill:var(--c-map-dot)}
@media (min-width:769px){
  .taxas__map{top:70px;transform:translateX(-50%) translateX(-247px)}
}

/* ---------- 2. Coluna interna ---------- */
.taxas__inner{position:relative;z-index:var(--z-content);
  width:100%;max-width:var(--taxas-max);margin-inline:auto;
  display:flex;flex-direction:column;gap:var(--sp-10)}

/* ---------- 3. Cabeçalho ---------- */
.taxas__head{position:relative;display:flex;flex-direction:column;gap:var(--sp-6);text-align:center}
.taxas__title{color:var(--c-on-dark)}
.taxas__hl{color:var(--c-lime)}
.taxas__p{max-width:600px;margin-inline:auto;
  font:400 var(--fs-16-18)/var(--lh-dark-p) var(--font-body);letter-spacing:normal;
  color:var(--c-on-dark-70)}

.taxas__ctas{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
@media (min-width:769px){
  .taxas__ctas{flex-direction:row;flex-wrap:wrap;justify-content:center}
}
.taxas__wpp svg{width:var(--icon-sm);height:var(--icon-sm);flex-shrink:0}

/* ---------- 4. Seta desenhada (só ≥1440 · D9) ----------
   Desenha UMA vez quando o card entra (`.is-visible` do reveal) e trava no traço completo
   (`forwards`). O loop `infinite` anterior deixava a seta invisível em ~30% de cada ciclo —
   por isso ela sumia dos screenshots. O comprimento real vem de `--len` (main.js lê
   getTotalLength() de todo path[data-draw]); os fallbacks são os valores medidos.
   `html:not(.js)` e `prefers-reduced-motion` já forçam stroke-dashoffset:0 em base.css
   com especificidade maior (`.arrow-doodle path`), então a seta nunca fica apagada. */
.taxas__arrow{display:none}
.arrow-doodle path{fill:none;stroke:var(--c-on-dark);stroke-width:5.31;stroke-linecap:round;stroke-linejoin:round}
.arrow-doodle__main{stroke-dasharray:var(--len,316);stroke-dashoffset:var(--len,316)}
.arrow-doodle__head{stroke-dasharray:var(--len,40);stroke-dashoffset:var(--len,40)}
.taxas__calc-wrap.is-visible ~ .taxas__arrow .arrow-doodle__main{animation:draw-main var(--dur-draw-main) var(--ease-in-out) forwards}
.taxas__calc-wrap.is-visible ~ .taxas__arrow .arrow-doodle__head{animation:draw-arrow var(--dur-draw-arrow) var(--ease-in-out) forwards}
@media (min-width:1440px){
  .taxas__arrow{display:block;position:absolute;right:-110px;bottom:0;pointer-events:none}
}

/* ---------- 5. Calculadora (card de vidro 720×513) ----------
   O wrapper existe só para separar a camada animada (opacity+transform do `.reveal`) da camada
   com `backdrop-filter` — sem geometria própria, o card continua sendo quem mede 720px. */
.taxas__calc-wrap{width:100%}
.taxas__calc{width:100%;max-width:var(--calc-max);margin-inline:auto;
  padding:var(--glass-pad);display:grid;gap:var(--sp-4)}

/* 5.1 Tabs Pix / Boleto (320×48 cada em 1440) */
.taxas__tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1);padding:var(--tabs-pad)}
.taxas__tab{padding:var(--tab-pad);border:0;border-radius:var(--r-cell);background:transparent;
  color:var(--c-on-dark-70);font:600 var(--fs-14-16)/1.5 var(--font-display);
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:color var(--dur-fast) var(--ease-default),background-color var(--dur-fast) var(--ease-default),transform 120ms ease-out}
.taxas__tab:active{transform:scale(var(--active-scale))}
@media (hover:hover){
  .taxas__tab:hover{color:var(--c-on-dark);background:var(--c-on-dark-hover-soft)}
}
.taxas__tab[aria-selected="true"]{background:var(--c-lime);color:var(--c-ink-900)}
.taxas__tab:focus-visible{outline:2px solid var(--c-lime);outline-offset:2px}

/* 5.2 Caixas internas */
.taxas__box{padding:var(--glass-inner-pad)}

/* 5.3 Campo do valor bruto — fidelidade: vão rótulo→valor 6px (era 8) e padding inferior −1px.
   Com isso + o gap das linhas de taxa o card volta a 513px (media 521 e empurrava
   09/10/11/12/13 em +7px). Medido em qa/previews/08-taxas-1440.png: borda a borda 371→883. */
.taxas__field{display:block;cursor:text;padding-bottom:calc(var(--glass-inner-pad) - 1px);
  transition:border-color var(--dur-fast) var(--ease-default)}
.taxas__field:focus-within{border-color:var(--c-lime)}
.taxas__label{display:block;margin-bottom:6px;
  font:600 var(--fs-small)/20px var(--font-display);color:var(--c-on-dark-70)}
.taxas__input-row{display:flex;align-items:baseline;gap:var(--sp-2)}
.taxas__prefix{font:700 var(--fs-calc-prefix)/1 var(--font-display);color:var(--c-on-dark-80)}
/* padding-block + margem negativa: alvo de toque de 44px (WCAG 2.5.8) sem mover um pixel de tinta */
.taxas__input{width:100%;min-width:0;padding:8px 0;margin-block:-8px;border:0;outline:0;background:transparent;
  color:var(--c-on-dark);font:700 var(--fs-calc-input)/1.2 var(--font-display)}
.taxas__input::placeholder{color:var(--c-on-dark-29)}

/* 5.4 Resultado */
.taxas__result{display:grid;gap:var(--sp-4)}
/* letter-spacing:normal é obrigatório: este h3 herdaria --ls-h3-section (-1.92px), calibrado para
   48px, e a 16-18px isso colapsa os espaços entre palavras ("Seuliquidono Pix"). */
.taxas__rtitle{font:600 var(--fs-16-18)/1.5 var(--font-display);letter-spacing:normal;color:var(--c-on-dark)}
.taxas__note{margin-top:2px;   /* caixa de resultado: 240px de fora a fora, como na referência */
  font:400 var(--fs-12-14)/var(--lh-relaxed) var(--font-display);color:var(--c-on-dark-50)}
.taxas__value{display:flex;align-items:baseline;gap:var(--sp-2);color:var(--c-lime)}
.taxas__value-prefix{font:700 var(--fs-calc-result-prefix)/1 var(--font-display)}
.taxas__net{font:700 var(--fs-calc-value)/1 var(--font-display);
  transition:opacity var(--dur-fast) var(--ease-default),filter var(--dur-fast) var(--ease-default)}
.calc__net.is-swapping{opacity:.6;filter:blur(2px)}

/* gap 5px (não 4+4): vão "Tarifa"→"Custo efetivo" de 15px, medido na referência */
.taxas__rows{display:grid;gap:5px;padding-top:var(--sp-3);
  border-top:1px solid var(--c-glass-divider);
  font-family:var(--font-display);font-size:var(--fs-small)}
.taxas__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);
  color:var(--c-on-dark-70);font-weight:var(--fw-medium)}
.taxas__row-v{font-weight:var(--fw-semibold);color:var(--c-on-dark)}
.taxas__eff{font-size:var(--fs-micro);color:var(--c-on-dark-50)}

/* ---------- 6. Reduced motion (base.css §7 não lista .taxas__tab:active) ---------- */
@media (prefers-reduced-motion: reduce){
  .taxas__tab:active{transform:none}
}