/* ==========================================================================
   EMIGÊ — Calculadora de Pegada Fashion (estilos específicos)
   Importa os tokens do emige.css; aqui só entra o que é da calculadora.
   ========================================================================== */

/* O atributo hidden precisa vencer qualquer display definido por classe
   (.hero é display:grid, .res-email é grid etc.) */
#pegada-app [hidden] { display: none !important; }

/* ---- QUIZ ---------------------------------------------------------------- */
.quiz__wrap { max-width: 640px; margin-inline: auto; display: grid; gap: var(--space-2); }
.quiz__progress {
  height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--concreto) 18%, transparent);
  overflow: hidden;
}
.quiz__bar {
  height: 100%; width: 0; background: var(--terracota); border-radius: 999px;
  transition: width var(--dur) var(--ease-out);
}
.quiz__pergunta {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 5.4vw, 1.9rem); line-height: 1.15;
  outline: none;
}
.quiz__opcoes { display: grid; gap: .7rem; margin-top: var(--space-1); }
.quiz-opcao {
  min-height: var(--tap);
  padding: .9rem 1.2rem;
  text-align: left;
  font-size: var(--fs-body); font-weight: 500;
  background: var(--offwhite);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.quiz-opcao:hover, .quiz-opcao:focus-visible {
  border-color: var(--terracota); color: var(--terracota);
  background: color-mix(in srgb, var(--terracota) 6%, var(--offwhite));
}
.quiz-opcao[aria-pressed="true"] {
  border-color: var(--terracota); background: var(--terracota); color: var(--offwhite);
}
.quiz__voltar {
  background: none; border: 0; cursor: pointer; justify-self: start;
  padding: .5rem 0; min-height: var(--tap);
}

/* ---- RESULTADO ------------------------------------------------------------ */
.resultado .wrap { max-width: 760px; display: grid; gap: var(--space-5); }

.res-persona-bloco { display: grid; justify-items: center; text-align: center; gap: var(--space-2); }
.res-persona { font-size: var(--fs-h1); }
.res-ponte { font-size: var(--fs-lead); color: var(--concreto); }
.res-copy { max-width: 46ch; }
.res-contexto { max-width: 46ch; color: var(--concreto); }

/* Tag de papelão com o motif do site, balançando de leve */
.res-tag { display: grid; justify-items: center; }
.res-tag__string { width: 1.5px; height: 26px; background: var(--concreto); }
.res-tag__body {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem;
  width: 152px; height: 260px;
  padding: 48px 14px 20px;
  background: var(--green);
  border-radius: 76px 76px 8px 8px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
  filter: drop-shadow(0 6px 10px rgba(43,32,28,.16));
  transform-origin: 50% -26px;
  animation: tag-balanca 3.4s ease-in-out infinite;
}
.res-tag__outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.res-tag__outline path { fill: none; stroke: var(--terracota); stroke-width: 1.5; }
.res-tag__outline circle { fill: var(--offwhite); stroke: var(--musgo); stroke-width: 1.5; }
.res-tag__emoji { font-size: 2.4rem; line-height: 1; }
.res-tag__pct {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; line-height: 1.2; color: var(--terracota-ink);
  max-width: 12ch;
}
@keyframes tag-balanca {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(2.2deg); }
}

/* Números com count-up */
.res-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); text-align: center; }
.res-num { display: grid; gap: .4rem; justify-items: center; }
.res-num__valor {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 8vw, 2.9rem); line-height: 1;
  color: var(--terracota);
  font-variant-numeric: tabular-nums;
}
.res-economia {
  display: grid; gap: var(--space-2); justify-items: center;
  background: var(--green); color: var(--musgo);
  border-radius: var(--radius); padding: var(--space-4) var(--space-3);
}
.res-economia .legenda { color: var(--musgo); }
.res-economia .res-num__valor { color: var(--terracota-ink); }
.res-economia .res-numeros { width: 100%; }

.res-analogias { display: grid; gap: .5rem; text-align: center; justify-items: center; }
.res-analogias p { color: var(--concreto); max-width: 52ch; }

/* Bloco "evita" + linha de comparação da pegada (hierarquia reduzida) */
#bloco-evita { display: grid; gap: var(--space-2); }
.res-comparar {
  text-align: center; justify-self: center;
  font-size: var(--fs-legenda); color: var(--concreto); max-width: 52ch;
}

/* Barra comparativa (contrafactual quando há economia).
   Rótulo ACIMA da barra: não quebra em 3 linhas no mobile 360px. */
.res-comparativo { display: grid; gap: 1.1rem; }
.res-barra-item { display: grid; gap: .45rem; }
.res-barra-linha { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; }
.res-barra {
  height: 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--concreto) 12%, transparent);
  overflow: hidden;
}
.res-barra__fill {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--concreto);
  transition: width 1.2s var(--ease-out);
}
.res-barra__fill--voce { background: var(--terracota); }
.res-comparativo .legenda { margin-top: .3rem; }

/* Cards + share */
.res-cards { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.res-formatos { display: inline-flex; gap: .5rem; }
.res-formato {
  min-height: 44px; padding: .5rem 1.1rem;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--offwhite); color: var(--concreto);
  border: 1.5px solid var(--line-strong); border-radius: 999px; cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.res-formato[aria-pressed="true"] { border-color: var(--terracota); color: var(--terracota); }
.cards-galeria {
  display: flex; gap: var(--space-2);
  width: 100%;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-1);
  scrollbar-width: thin; scrollbar-color: var(--terracota) transparent;
}
.card-thumb {
  flex: none; scroll-snap-align: center;
  width: min(200px, 56vw);
  padding: 0; background: none; cursor: pointer;
  border: 2.5px solid transparent; border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card-thumb:hover { transform: translateY(-3px); }
.card-thumb[aria-pressed="true"] { border-color: var(--terracota); }
.card-thumb canvas { display: block; width: 100%; height: auto; }

/* CTAs pós-resultado */
.res-ctas { display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.res-ctas__botoes { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

.res-email {
  display: grid; gap: var(--space-2); justify-items: center; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3);
}
.res-email p { max-width: 40ch; }

.res-rodape {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: center;
  max-width: none;
}
.res-refazer { background: none; border: 0; cursor: pointer; padding: .5rem 0; min-height: var(--tap); }

/* ---- COMO CALCULAMOS ------------------------------------------------------ */
.metodo-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-legenda); }
.metodo-tabela caption { text-align: left; padding-bottom: .8rem; font-family: var(--font-mono); font-size: var(--fs-rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--concreto); }
.metodo-tabela th, .metodo-tabela td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.metodo-tabela th { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--concreto); font-weight: 400; }
.metodo-tabela td:nth-child(2), .metodo-tabela td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.metodo-scroll { overflow-x: auto; }

/* ---- REDUCED MOTION -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .quiz__bar, .res-barra__fill, .quiz-opcao, .card-thumb, .res-formato { transition: none; }
  .res-tag__body { animation: none; transform: none; }
}

/* ---- LIGHTBOX DOS CARDS ---------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; gap: var(--space-2);
  grid-template-rows: 1fr auto;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(22, 19, 15, .93);
  touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-height: min(76vh, 76svh); max-width: min(92vw, 480px);
  width: auto; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  align-self: center;
}
.lightbox__close {
  position: absolute; top: clamp(.8rem, 3vw, 1.4rem); right: clamp(.8rem, 3vw, 1.4rem);
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--offwhite); border-radius: 999px;
}
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__close:hover { background: rgba(250, 249, 242, .12); }
.lightbox__acoes { display: grid; gap: .6rem; justify-items: center; padding-bottom: .4rem; }
.lightbox__contador { color: rgba(250, 249, 242, .75); }

@media (max-width: 560px) {
  .res-numeros { grid-template-columns: 1fr; gap: var(--space-2); }
}