/* =============================================================
   FOUP — patch de UI + Identidade da Marca (Manual de Marca FOUP)
   Paleta oficial: Prussian #023047 · Teal #219EBC · Sky #4AB3FF
                   Amber #FFB703 · Orange #FB8500
   Tipografia oficial: Poppins
============================================================= */

/* ---------- Tokens da marca (sobrescreve foup.css) ---------- */
:root{
  --primary:#FB8500;          --primary-2:#e07600;        --primary-soft:rgba(251,133,0,.13);
  --secondary:#219EBC;        --secondary-2:#1a7f99;      --secondary-soft:rgba(33,158,188,.12);
  --accent-yellow:#FFB703;    --accent-sky:#4AB3FF;
  --ink:#0E2A38;              --ink-soft:#5b7280;         --ink-mute:#9aaeb7;
  --foup-navy:#023047;        --foup-navy-2:#011f2e;      --foup-orange:#FB8500;  --foup-yellow:#FFB703;
  --line:#E1E7EA;             --line-strong:#C6D2D7;      --bg-soft:#F4F7F8;      --bg-alt:#EAF1F3;
  --danger:#C0392B;           --success:#2A9D8F;
  --ff-display:'Poppins','Urbanist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --start-overlay:linear-gradient(180deg,rgba(2,48,71,.52) 0%,rgba(2,48,71,.26) 38%,rgba(1,31,46,.82) 100%);
  --brand-strip:linear-gradient(90deg,var(--secondary) 0%,var(--accent-sky) 30%,var(--accent-yellow) 65%,var(--primary) 100%);
}

/* ---------- Acessibilidade ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Tipografia ---------- */
body{font-family:var(--ff-body);}
.hero-title,.foup-intro h2,.review-card h3,.func-card .body b,.success-wrap h1,.success-card h1{font-family:var(--ff-display);letter-spacing:-.018em;}

/* ---------- Faixa cromática da marca ---------- */
.foup-header{background:var(--foup-navy);}
.foup-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand-strip);}

/* ---------- Header / logotipo FOUP ---------- */
/* Cabeçalho padrão em todo o fluxo: marca FOUP (PNG branco) */
.foup-logo{align-items:center;gap:0;}
.foup-logo img{height:clamp(22px,4.6vw,28px);width:auto;aspect-ratio:806 / 226;display:block;}
.foup-lang a.active{background:var(--primary);}
/* Cabeçalho na tela de sucesso: apenas a marca FOUP (PNG branco), centralizada */
.foup-header.is-success{justify-content:center;}
.foup-header.is-success .foup-lang{display:none;}

/* ---------- HOME / Tela inicial — arte única (png.png) + CTA ----------
   Conteúdo: apenas a arte da home (png.png) e o botão logo abaixo, centrados.
   A imagem nunca é cortada nem distorcida (height/width auto + max-width/
   max-height fluidos) e se adapta de telões a celulares deitados. Fundo:
   foto da sede (home-bg.jpg) com overlay da marca. */
.start-wrap{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:var(--foup-navy-2);color:var(--white);overflow:hidden;}
.start-wrap .start-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(1.05) contrast(1.04);}
.start-wrap .start-overlay{position:absolute;inset:0;background:var(--start-overlay);}
.start-wrap .start-overlay::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--brand-strip);opacity:.95;}

.start-wrap .start-content{position:relative;z-index:2;width:min(1040px,100%);min-height:100%;padding:calc(clamp(24px,5vh,48px) + env(safe-area-inset-top)) var(--pad-x) calc(clamp(24px,5vh,48px) + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(22px,5vh,44px);overflow-y:auto;}

.start-wrap .start-png{display:block;width:auto;height:auto;max-width:min(900px,92vw);max-height:min(64vh,660px);object-fit:contain;filter:drop-shadow(0 16px 38px rgba(0,0,0,.42));}

.start-wrap .btn-start{min-width:min(420px,86vw);justify-content:center;min-height:54px;font-size:15px;letter-spacing:.03em;}

.app.is-start .start-wrap{display:flex;}
.app.is-start .foup-header,.app.is-start .foup-rail,.app.is-start .foup-hero,.app.is-start .foup-intro,.app.is-start .foup-main,.app.is-start .foup-foot,.app.is-start #toast,.app.is-start #foup-loading{display:none!important;}

@media (orientation:portrait){
  .start-wrap .start-bg{object-position:50% 50%;}
  .start-wrap .start-png{max-width:94vw;max-height:58vh;}
}
@media (max-width:640px){
  .start-wrap .start-content{gap:clamp(18px,4vh,30px);}
  .start-wrap .start-png{max-width:94vw;max-height:54vh;}
  .start-wrap .btn-start{width:100%;min-width:0;}
}
@media (max-height:560px) and (orientation:landscape){
  .start-wrap .start-content{gap:14px;}
  .start-wrap .start-png{max-height:62vh;max-width:min(60vw,640px);}
}

/* ---------- Hero / banner por etapa ---------- */
.hero-bottom,.hero-step{display:block!important;}    /* reativa título e indicador da etapa */
/* O banner é exibido na sua proporção nativa (1800×744): em telas comuns e
   móveis aparece inteiro, sem corte; em telas muito largas/baixas a altura é
   limitada e o browser recorta de forma centralizada (object-fit:cover). */
.foup-hero{background:var(--foup-navy);height:auto;aspect-ratio:1800 / 744;max-height:min(56vh,460px);}
.foup-hero>img{filter:saturate(1.05) contrast(1.05);object-position:center center;}
.hero-overlay{background:linear-gradient(to top,rgba(2,48,71,.94) 0%,rgba(2,48,71,.62) 30%,rgba(2,48,71,.22) 62%,rgba(2,48,71,.05) 100%);padding:clamp(18px,3vw,26px) 0 clamp(20px,3vw,30px);}
.hero-inner{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 var(--pad-x);flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:14px;}
.foup-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--brand-strip);z-index:3;}
.hero-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hero-step{font-family:var(--ff-numeric);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.hero-tag{font-family:var(--ff-numeric);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:5px 13px;border:1px solid rgba(255,255,255,.32);border-radius:var(--r-pill);background:rgba(2,48,71,.34);backdrop-filter:blur(5px);color:#fff;}
.hero-bottom{max-width:660px;}
.hero-title{margin:0 0 8px;font-family:var(--ff-display);font-weight:600;font-size:clamp(20px,2.9vw,32px);line-height:1.22;letter-spacing:-.018em;color:#fff;text-shadow:0 2px 18px rgba(0,12,20,.5);}
.hero-credit{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.64);line-height:1.65;}
@media (max-width:880px){.hero-title{font-size:clamp(18px,4.6vw,24px);}}
@media (max-width:520px){.hero-credit{letter-spacing:.1em;}}
/* Banner "limpo": peça gráfica completa — sem texto sobreposto, recorte
   central para boa adaptação em web/mobile. */
.foup-hero.is-clean>img{object-position:center center;}
.foup-hero.is-clean .hero-inner{display:none;}
.foup-hero.is-clean .hero-overlay{background:linear-gradient(to top,rgba(2,48,71,.16) 0%,rgba(2,48,71,.03) 18%,transparent 34%);}
#foup-hero[data-hstep="3"].is-clean>img{object-position:center 46%;}

/* ---------- Trilho de etapas (acima do banner) alinhado à coluna ---------- */
.foup-rail{justify-content:safe center;padding-left:max(var(--pad-x),calc((100% - var(--content-max)) / 2 + var(--pad-x)));padding-right:max(var(--pad-x),calc((100% - var(--content-max)) / 2 + var(--pad-x)));}

/* ---------- Etapas: número e barras de destaque ---------- */
.foup-intro-num{color:var(--primary);}
.foup-intro-num::before{background:var(--brand-strip);}
.review-card{border-left-color:var(--primary);}
.lgpd{border-left-color:var(--secondary);}
.rail-item.done .num{background:var(--secondary);border-color:var(--secondary);}
.rail-item.active .num{background:var(--primary);border-color:var(--primary);}

/* ---------- Inputs / foco com a cor da marca ---------- */
.input:focus,.select:focus,.textarea:focus{border-color:var(--secondary);box-shadow:0 0 0 4px var(--secondary-soft);}
.radio-card.selected,.radio-card:has(input:checked),.func-card.selected,.func-card:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.upload .icon{background:var(--foup-navy);color:var(--accent-yellow);}
.upload:hover{border-color:var(--secondary);}
.upload.has-file,.upload.has-file .icon{border-color:var(--success);}
.upload.has-file .icon{background:var(--success);color:#fff;}

/* ---------- Botões ---------- */
.btn-primary{background:var(--primary);border-color:var(--primary);box-shadow:0 8px 20px rgba(251,133,0,.3);}
.btn-primary:hover{background:var(--primary-2);border-color:var(--primary-2);box-shadow:0 12px 26px rgba(251,133,0,.38);}
.btn-success{background:var(--secondary);border-color:var(--secondary);box-shadow:0 8px 20px rgba(33,158,188,.3);}
.btn-success:hover{background:var(--secondary-2);border-color:var(--secondary-2);}

/* ---------- Tela de sucesso ---------- */
.success-wrap .passport-card{display:none!important;}
.success-wrap{padding-bottom:calc(32px + env(safe-area-inset-bottom));}
.success-card{--pad:clamp(18px,5vw,32px);max-width:560px;margin:0 auto;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:0 var(--pad) clamp(22px,5vw,32px);text-align:center;overflow:hidden;}
.success-card::before{content:"";display:block;height:5px;background:var(--brand-strip);margin:0 calc(-1 * var(--pad)) clamp(24px,6vw,34px);}
.success-card .seal{display:none!important;}
.success-card .success-emblem{margin:0 auto clamp(12px,3.4vw,18px);text-align:center;}
.success-card .success-emblem img{height:clamp(54px,15vw,84px);width:auto;aspect-ratio:662 / 305;display:inline-block;}
.success-card h1{margin:0 0 10px;}
.success-card .success-lead{font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:440px;margin:0 auto 22px;}
.success-card .success-steps{list-style:none;padding:0;margin:0 auto 22px;max-width:430px;display:grid;gap:11px;text-align:left;}
.success-card .success-steps li{font-size:13.5px;line-height:1.6;color:var(--ink);padding-left:14px;border-left:2px solid var(--primary-soft);}
.success-card .success-img{position:relative;margin:4px calc(-1 * var(--pad)) 18px;}
.success-card .success-img::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--brand-strip);}
.success-card .success-img img{width:100%;height:clamp(120px,28vw,170px);object-fit:cover;display:block;}
.success-card .success-foot{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:0;}
.success-card .success-foot a{color:var(--secondary);border-bottom:1px solid currentColor;}

/* ---------- Restrição alimentar: detalhe condicional ---------- */
.field.restricao-det{transition:opacity .2s var(--ease);}
.field.restricao-det[hidden]{display:none!important;}

/* ---------- Toast ---------- */
.toast{display:block!important;position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 12px);transform:translateX(-50%);z-index:140;max-width:min(560px,calc(100vw - 24px));width:max-content;opacity:0!important;pointer-events:none;background:var(--foup-navy);}
.toast.is-on{opacity:1!important;pointer-events:auto;}
.toast.error{background:var(--danger);}
.toast.success{background:var(--success);}

/* ---------- Margens laterais — gutter consistente em todo o fluxo (mobile) ----------
   Gutter único (header, trilho, banner, intro, etapas, rodapé) e com bem mais
   respiro no mobile/tablet — o conteúdo das etapas deixa de encostar nos cantos. */
@media (max-width:880px){
  :root{ --pad-x: clamp(22px, 6vw, 28px); }
}
@media (max-width:520px){
  .foup-rail{ padding-left: var(--pad-x); padding-right: var(--pad-x); gap: 6px; }
}

/* ---------- Acessibilidade: respeitar prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* =============================================================
   FOUP — Patch 2026-05-13: quebras de texto + popover DDI
   -----------------------------------------------------------------
   Endereça observações da revisão visual:
   1. Labels uppercase quebravam feio em col-4 estreito (PT/ES/EN).
   2. Popover do combobox DDI abria estourando o .field em mobile e
      em telas curtas ficava parcialmente coberto pelo footer sticky.
   3. .review-grid dd quebrava e-mails no meio de palavras.
   4. .phone tinha coluna DDI estreita (72px) que apertava o
      "+55 ▾" com bandeira.
============================================================= */

/* ---------- Labels: quebras suaves e legíveis ---------- */
.field > label:not([class]) {
  line-height: 1.25;
  /* Permite hifenização em traduções longas (ES "Nombre del contacto
     de emergencia", PT "Telefone de emergência"). */
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Evita quebra no meio de palavras curtas mas permite entre palavras. */
  overflow-wrap: break-word;
  word-break: normal;
}

/* ---------- Revisão (etapa 6): word-break sem cortar e-mails ---------- */
.review-grid dd {
  /* word-break:break-word legacy quebrava "fulano@example.com" no
     meio. overflow-wrap:anywhere quebra apenas se necessário e em
     pontos preferíveis. */
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ---------- .phone: garante espaço suficiente para "+55 ▾" ---------- */
.phone {
  /* Aumenta levemente a coluna do DDI para acomodar bandeira + +55 +
     caret sem encolher tipografia. Mantém 1fr para o telefone. */
  grid-template-columns: 92px 1fr;
  position: relative;        /* contém o popover absolutamente posicionado */
}
@media (max-width: 520px) {
  .phone {
    grid-template-columns: 88px 1fr;
  }
}

/* ============================================================
   EXPANSOR DE CÓDIGO DE PAÍS (DDI) — UX Apple-grade
   ============================================================
   Comportamento por breakpoint:
   - Web (≥768px): popover ancorado no .phone, cobre a linha do
     campo telefone+DDI sem vazar lateralmente. Sombra elevada,
     barra de busca sticky no topo, lista com hover claro.
   - Tablet (480–767px): mesmo popover mas com largura confortável.
   - Mobile (<480px): bottom-sheet full-width animada por baixo
     (HIG-style iOS), 70vh max-height, safe-area-inset-bottom.
============================================================ */

.phone { position: relative; }
.foup-cc-wrap { position: static !important; }

/* ---------- Botão DDI (visual base) ---------- */
.foup-cc-btn {
  /* Estado fechado: aparência de input. */
  border-radius: var(--r-sm, 8px) !important;
  background: var(--white, #fff);
  border: 1.5px solid var(--line, #E2E6EE);
  min-height: 44px;
  font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.foup-cc-btn:hover { border-color: var(--line-strong, #C9D0DD); }
.foup-cc-btn[aria-expanded="true"] {
  border-color: var(--primary, #FB8500);
  box-shadow: 0 0 0 4px var(--primary-soft, rgba(251,133,0,.13));
  transform: translateY(-1px);
}
.foup-cc-btn .cc-flag {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}
.foup-cc-btn .cc-dial {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.01em;
  min-width: 38px;
  text-align: center;
}
.foup-cc-btn .cc-caret {
  transition: transform .2s cubic-bezier(0.22,1,0.36,1);
}
.foup-cc-btn[aria-expanded="true"] .cc-caret {
  transform: rotate(180deg);
}

/* ---------- Popover (≥481px: desktop + tablet) ---------- */
.foup-cc-pop {
  z-index: 90 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  top: calc(100% + 8px) !important;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 44, 70, 0.04),
    0 8px 24px -8px rgba(0, 44, 70, 0.18),
    0 24px 48px -16px rgba(0, 44, 70, 0.22);
  border: 1px solid rgba(0, 44, 70, 0.08);
  background: #fff;
  padding: 8px;
  overflow: hidden;
}
.foup-cc-pop[data-open="1"] {
  animation: foup-cc-fade-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes foup-cc-fade-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Barra de busca sticky no topo */
.foup-cc-search {
  width: 100%;
  border: 1.5px solid var(--line, #E2E6EE);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  margin-bottom: 8px;
  background: var(--bg-soft, #F5F7FA);
  transition: all .15s ease;
}
.foup-cc-search:focus {
  outline: none;
  border-color: var(--primary, #FB8500);
  background: #fff;
  box-shadow: 0 0 0 4px var(--primary-soft, rgba(251,133,0,.13));
}

/* Lista de países */
.foup-cc-list {
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Scroll suave + scrollbar discreta */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 44, 70, 0.2) transparent;
}
.foup-cc-list::-webkit-scrollbar { width: 8px; }
.foup-cc-list::-webkit-scrollbar-thumb {
  background: rgba(0, 44, 70, 0.15);
  border-radius: 999px;
}
.foup-cc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .1s ease;
  font-size: 14px;
  color: var(--ink, #1F2A36);
}
.foup-cc-list li:hover,
.foup-cc-list li:focus-visible {
  background: var(--bg-soft, #F5F7FA);
  outline: none;
}
.foup-cc-list li[aria-selected="true"] {
  background: var(--primary-soft, rgba(251,133,0,.13));
  font-weight: 600;
}
.foup-cc-list li[aria-selected="true"]::after {
  content: "✓";
  margin-left: auto;
  color: var(--primary, #FB8500);
  font-weight: 700;
}
.foup-cc-list li .cc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.foup-cc-list li .cc-dial-sm {
  color: var(--ink-soft, #5C6877);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  flex: 0 0 auto;
}
.foup-cc-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-soft, #5C6877);
  font-size: 13px;
}

@media (min-width: 481px) and (max-width: 880px) {
  .foup-cc-pop { z-index: 95 !important; }
}

/* ============================================================
   MOBILE: bottom-sheet (HIG iOS)
   ============================================================ */
@media (max-width: 480px) {
  /* Backdrop semitransparente sob a sheet — body recebe o overlay
     via pseudo-elemento quando uma sheet está aberta. */
  body.foup-cc-sheet-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 31, 46, 0.4);
    backdrop-filter: blur(4px);
    z-index: 998;
    animation: foup-cc-backdrop-in 220ms ease both;
  }
  @keyframes foup-cc-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  body.foup-cc-sheet-open {
    overflow: hidden;
  }

  /* Popover transforma-se em bottom-sheet fixa */
  .foup-cc-pop {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom)) 16px !important;
    box-shadow: 0 -20px 60px -10px rgba(0, 44, 70, 0.3) !important;
    z-index: 999 !important;
    max-height: 75vh;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
  }
  .foup-cc-pop[data-open="1"] {
    animation: foup-cc-sheet-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes foup-cc-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Drag handle visual no topo da sheet */
  .foup-cc-pop::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(0, 44, 70, 0.18);
    border-radius: 999px;
    margin: 2px auto 12px;
    flex: 0 0 auto;
  }

  /* Barra de busca maior + ainda sticky */
  .foup-cc-search {
    font-size: 16px; /* iOS: <16px causa zoom no focus */
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  /* Lista cresce para preencher a sheet */
  .foup-cc-list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;  /* expande área de toque até as bordas */
    padding: 0 4px;
  }
  .foup-cc-list li {
    padding: 14px 12px;
    font-size: 15px;
    min-height: 48px; /* touch ≥44px */
  }
}

/* ---------- iPhone <420px ajuste fino do botão ---------- */
@media (max-width: 420px) {
  .phone { grid-template-columns: 80px 1fr; }
  .foup-cc-btn { padding: 9px 6px; gap: 4px; }
  .foup-cc-btn .cc-dial { font-size: 13px; min-width: 32px; }
  .foup-cc-btn .cc-flag { font-size: 16px; }
}

/* ---------- Botão DDI: aria-expanded + foco mais claro ---------- */
.foup-cc-btn .cc-dial {
  font-variant-numeric: tabular-nums;
  /* Garante consistência de largura entre +1 e +595. */
  min-width: 36px;
  text-align: center;
}

/* ---------- Datalist nativo (Instituição): hint a screen readers ---------- */
input[list] {
  /* Sem alteração visual; só remove autopreenchimento agressivo do
     password manager em campos com datalist. */
  -webkit-autofill-style: none;
}

/* ---------- Hero credit / step desc: respeita quebra natural ---------- */
.hero-credit,
section[data-step] p {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- Func-cards: title/desc com altura confortável ---------- */
.func-card .body b,
.func-card .body small {
  overflow-wrap: break-word;
}

/* ---------- LGPD aceite (etapa 6): texto respira ---------- */
.lgpd .accept span {
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* =============================================================
   FOUP — Patch 2026-05-13 (rev2): endurecimento contra quebras
   -----------------------------------------------------------------
   Em produção recebendo cadastros: minimizar risco de quebra visual
   em traduções longas (ES/EN), em mobile estreito e em telas de
   tablets onde col-3/col-4 ficam apertados.
============================================================= */

/* ---------- Radio-cards: cabe textos em ES sem estourar ---------- */
.radio-card {
  /* Era min-width:150px fixo. Em mobile pequeno ou texto longo
     ("Sí, voy a necesitar intérprete") isso forçava overflow. */
  min-width: 0;
  flex-basis: clamp(140px, 45%, 240px);
  /* Quebra suave de palavras compostas. */
  overflow-wrap: break-word;
  word-break: normal;
}
.radio-card span {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

/* ---------- Func-cards (etapa 5): título e descrição respiram ---------- */
.func-card .body {
  overflow: hidden;          /* contém quebras feias */
  min-width: 0;
}
.func-card .body b {
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.func-card .body small {
  line-height: 1.45;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- Upload (etapa 2): texto longo de aviso LGPD ---------- */
.upload .meta { min-width: 0; }
.upload .meta b,
.upload .meta small {
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.4;
}
@media (max-width: 520px) {
  .upload .meta small {
    /* Forçar quebra entre tokens separados por · */
    word-spacing: 0.05em;
  }
}

/* ---------- Stepper rail: nomes traduzidos longos não estouram ---------- */
.rail-item {
  /* "Identificación" / "Establecimiento" em ES não cabem em 100px. */
  max-width: 220px;
}
.rail-item .lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
@media (max-width: 880px) {
  .rail-item .lbl { max-width: 140px; }
}

/* ---------- Foot step-info: título da etapa pode ser longo ---------- */
.foup-foot .step-info {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.foup-foot .step-info b { white-space: nowrap; }
@media (max-width: 880px) {
  /* No mobile a foot vira coluna; permitir quebra entre palavras. */
  .foup-foot .step-info {
    white-space: normal;
    text-overflow: clip;
    line-height: 1.35;
  }
}

/* ---------- Hero title / banner: quebra confortável ---------- */
.hero-title {
  /* Permitir quebras suaves em "Florianópolis", "Internacional" etc. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-line-clamp: 3;
}
.hero-credit {
  /* Em mobile estreito, créditos longos podem estourar. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- Foup-intro: parágrafo descritivo da etapa ---------- */
.foup-intro h2,
.foup-intro p {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- Select / dropdown nativo: opções longas com ellipsis ---------- */
select.select option {
  /* Browser pode renderizar opções truncadas; deixamos title via JS para
     mostrar o texto completo se necessário. */
  white-space: normal;
}

/* ---------- LGPD aceite: link sem quebrar feio ---------- */
.lgpd .accept span a {
  word-break: normal;
  overflow-wrap: break-word;
}

/* ---------- Phone — em mobile <420px, ainda menos largura DDI ---------- */
@media (max-width: 420px) {
  .phone { grid-template-columns: 80px 1fr; }
  .foup-cc-btn { padding-left: 4px; padding-right: 4px; }
  .foup-cc-btn .cc-dial { font-size: 12px; }
}

/* ---------- Buttons: nunca quebrar o texto interno ---------- */
.btn {
  white-space: nowrap;
  /* Já tem; só reforçando — se traduções longas chegarem, prefere
     manter altura intacta e cortar com ellipsis. */
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ---------- Inputs/selects: corrigir quebra de placeholder longo ---------- */
.input::placeholder,
.select option { font-size: inherit; }

/* ---------- Success screen: nome longo do usuário ---------- */
.success-thanks,
.success-wrap h1,
.passport-card .pp-name {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- Etapa 6: dt/dd da revisão com altura confortável ---------- */
.review-grid > div { min-width: 0; }
.review-grid dt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-grid dd {
  /* Já tem overflow-wrap:anywhere herdado do patch anterior. */
  line-height: 1.4;
}

/* =============================================================
   FOUP — Patch 2026-05-13 (rev3): correções finas após observação
   -----------------------------------------------------------------
   Problemas observados em produção recebendo cadastros:
   1. Labels uppercase com hyphens:auto quebravam palavras em meio
      ("TELÉFO-NO DE EME-RGENCIA").
   2. Radio-cards com texto ES longo ("Sí, voy a necesitar")
      empilhavam input + texto em duas linhas.
   3. Stepper rail "..." aparecia mesmo com espaço para o nome inteiro.
   4. col-3 (Validade / País de emissão / Sigla) em tablet vertical
      ficava com label cortado.
============================================================= */

/* ---------- Labels: parar de hifenizar (uppercase + hyphens é feio) ---------- */
.field > label:not([class]) {
  hyphens: manual !important;       /* nunca quebrar palavras com hífen */
  -webkit-hyphens: manual !important;
  word-break: keep-all;             /* quebra só entre palavras, nunca dentro */
  overflow-wrap: normal;
  /* Em vez de uppercase forçado, manter capitalize natural seria mais
     legível em palavras longas — mas mantemos uppercase porque é parte
     do design system. Reduzimos a tracking para caber mais texto. */
  letter-spacing: 0.02em;           /* era .04em, mais apertado */
  text-transform: uppercase;
  line-height: 1.3;
  /* Permite até 2 linhas e quebra naturalmente nos espaços. */
}

/* ---------- Stepper rail: aumenta largura útil dos labels ---------- */
.rail-item .lbl {
  /* Era 180px desktop / 140px mobile com ellipsis. Aumentamos para
     caber palavras como "Identificación" inteiras. */
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 880px) {
  .rail-item .lbl { max-width: 200px; }
}
@media (max-width: 520px) {
  /* Em mobile pequeno o rail já esconde .lbl via foup.css base. */
  .rail-item .lbl { display: none; }
}

/* ---------- Radio-cards: forçar inline para textos longos em ES ---------- */
.radio-card {
  flex-wrap: nowrap;          /* nunca empilhar input acima do texto */
  align-items: center;
}
.radio-card span {
  /* Em ES "Sí, voy a necesitar intérprete" ainda cabe em 1 linha em
     desktop; em mobile aceita 2 linhas com line-height confortável. */
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}
@media (max-width: 520px) {
  /* No mobile estreito, deixa o card empilhar input em cima do texto
     SÓ se necessário (>=40 chars no span). Caso contrário, mantém
     inline. */
  .radio-card {
    flex-wrap: wrap;
    padding: 14px;
  }
  .radio-card span {
    flex: 1 1 100%;
    margin-top: 4px;
    font-size: 13.5px;
  }
}

/* ---------- col-3 / col-4 em tablet: dar mais espaço se label for longo ---------- */
@media (min-width: 521px) and (max-width: 880px) {
  /* "País de emissão", "País de la institución" em col-3 estourava.
     Forçamos col-3 a virar col-6 nesse breakpoint (já tem regra base
     dizendo col-3 → col-6, então aqui só garantimos respiro). */
  .field.col-3 > label:not([class]) {
    /* Permite até 2 linhas. */
    min-height: 2.6em;
    display: flex;
    align-items: flex-end;
  }
}

/* ---------- col-4 em tablet vertical com label longo (etapa 3) ---------- */
@media (min-width: 521px) and (max-width: 880px) {
  .field.col-4 > label:not([class]) {
    min-height: 2.6em;
    display: flex;
    align-items: flex-end;
  }
}

/* ---------- Foot step-info: garantir não estourar header sticky ---------- */
.foup-foot .step-info {
  flex: 1;
  min-width: 0;
}

/* ---------- Banner / hero: texto numa única linha bonita ---------- */
.hero-title {
  /* Em mobile a altura do hero é menor; texto longo de etapa pode
     stackar. Forçamos text-wrap balance para distribuir bem. */
  text-wrap: balance;
}

/* ---------- LGPD aceite: linha mais respirada ---------- */
.lgpd p,
.lgpd .accept span {
  line-height: 1.55;
}

/* ---------- Func-card (etapa 5 — funcao_foup): grid mais flexível ---------- */
.func-card {
  /* Em mobile com texto longo, dar mais respiro vertical. */
  align-items: center;
}
.func-card .body b {
  /* Texto da função (ex: "Equipe Organizadora") em col-6 ou 50/50
     pode estourar; permite quebra natural. */
  line-height: 1.25;
}

/* ---------- Modal de intake (Confirmar presença) ----------
   Discreto: card branco, sem brand-strip, sombra suave, backdrop
   pouco saturado. Modal de 2 etapas:
   1) pergunta de pré-cadastro Sympla;
   2) aviso de alta demanda (apenas para quem respondeu "não"). */
.intake-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(2,48,71,.50);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.intake-overlay.is-open{display:flex;animation:intake-fade .2s var(--ease);}
.intake-card{position:relative;width:100%;max-width:480px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:18px 28px 24px;outline:none;animation:intake-rise .25s var(--ease);}
.intake-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -6px 14px;}
.intake-close{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--ink-mute);background:transparent;border:none;cursor:pointer;transition:color .2s var(--ease),background .2s var(--ease);}
.intake-close:hover{background:var(--bg-soft);color:var(--ink);}
.intake-close:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
/* Lang switcher no card branco — override do estilo header (que é dark). */
.intake-lang{display:flex;gap:2px;align-items:center;padding:3px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-pill);}
.intake-lang a{font-family:var(--ff-body);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:4px 10px;border-radius:var(--r-pill);transition:all .2s var(--ease);text-decoration:none;cursor:pointer;}
.intake-lang a:hover:not(.active){color:var(--ink);background:rgba(0,0,0,.04);}
.intake-lang a.active{background:var(--foup-orange);color:var(--white);}
.intake-lang a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.intake-title{font-family:var(--ff-display);font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px;}
.intake-intro{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 0 14px;}
.intake-warning{font-size:13px;line-height:1.5;color:var(--ink);margin:0 0 20px;padding:11px 14px;border-left:3px solid var(--foup-orange);background:var(--primary-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;}
.intake-warning strong{font-weight:600;}
.intake-actions{display:flex;flex-direction:column;gap:8px;}
.intake-actions .btn{width:100%;white-space:normal;line-height:1.3;text-align:center;}
.intake-actions .btn-ghost{color:var(--ink);border-color:var(--line-strong);}
.intake-actions .btn-ghost:hover{color:var(--ink);background:var(--bg-soft);border-color:var(--foup-navy);}
.intake-step[hidden]{display:none;}
@keyframes intake-fade{from{opacity:0;}to{opacity:1;}}
@keyframes intake-rise{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
@media (max-width:480px){.intake-card{padding:16px 22px 20px;}.intake-title{font-size:17px;}.intake-actions .btn{font-size:13px;padding:11px 16px;}}
@media (prefers-reduced-motion:reduce){.intake-overlay.is-open,.intake-card{animation:none;}}