/* ==========================================================================
   Cadastro de Convênios · Simed Saúde
   Paleta e tipografia do manual da marca. Azul profundo é o chão de
   autoridade, dourado é o selo: aparece pouco e só no que importa.
   ========================================================================== */

:root{
  --azul:        #0B1D3A;
  --azul-claro:  #14305c;
  --azul-fundo:  #071427;
  --dourado:     #C79A4A;
  --dourado-luz: #E3C489;
  --off:         #F5F4F1;
  --grafite:     #333333;
  --branco:      #FFFFFF;

  --papel:       #FFFFFF;
  --campo-fundo: #FBFAF7;
  --tinta:       #333333;
  --tinta-fraca: rgba(51,51,51,.60);
  --tinta-tenue: rgba(51,51,51,.42);
  --borda:       rgba(11,29,58,.14);
  --borda-forte: rgba(11,29,58,.28);

  --erro:     #A32820;
  --erro-luz: #FDF3F2;
  --alerta:   #8A6210;
  --alerta-luz:#FDF7EA;
  --certo:    #1B6B4A;
  --certo-luz:#F0F8F3;

  --titulo: "Poppins", "Segoe UI", sans-serif;
  --texto:  "Montserrat", "Segoe UI", sans-serif;

  --r-p: 8px;
  --r-m: 12px;
  --r-g: 18px;

  --sombra-papel: 0 1px 2px rgba(11,29,58,.05),
                  0 12px 28px -12px rgba(11,29,58,.14),
                  0 40px 80px -50px rgba(11,29,58,.30);
  --sombra-alta:  0 10px 24px -10px rgba(11,29,58,.34);

  --largura: 1080px;
  --transicao: 260ms cubic-bezier(.22,.72,.28,1);
}

/* A trama da marca: o símbolo repetido, do manual. Fica quase invisível de
   propósito, só dá textura ao azul chapado. */
:root{
  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='-72 -84 313 315'%3E%3Cmask id='m'%3E%3Crect width='169' height='147' fill='%23000'/%3E%3Ccircle cx='84' cy='61.5' r='84.5' fill='%23fff'/%3E%3Ccircle cx='84' cy='37.7' r='64.3' fill='%23000'/%3E%3Crect width='169' height='39' fill='%23000'/%3E%3Ccircle cx='11.1' cy='47.6' r='8.6' fill='%23fff'/%3E%3Ccircle cx='156.9' cy='47.6' r='8.6' fill='%23fff'/%3E%3C/mask%3E%3Crect width='169' height='147' fill='%23ffffff' mask='url(%23m)'/%3E%3Ccircle cx='84' cy='37' r='36.5' fill='%23C79A4A'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

/* O atributo hidden precisa vencer as regras de display abaixo: sem isto o
   botão de enviar aparece já no primeiro passo. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--texto);
  font-size:15.5px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--off);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;
}

img{ max-width:100%; height:auto; display:block; }

.faixa{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:24px; }

/* ==========================================================================
   Cabeçalho: papel timbrado
   ========================================================================== */
.cabecalho{
  position:relative;
  background:
    radial-gradient(120% 180% at 12% -40%, var(--azul-claro) 0%, transparent 62%),
    linear-gradient(175deg, var(--azul) 0%, var(--azul-fundo) 100%);
  border-bottom:2px solid var(--dourado);
  overflow:hidden;
  isolation:isolate;
}
.cabecalho__trama{
  position:absolute; inset:0;
  background-image:var(--trama);
  background-size:58px 58px;
  opacity:.05;
  z-index:-1;
  -webkit-mask-image:linear-gradient(100deg, #000 0%, transparent 68%);
          mask-image:linear-gradient(100deg, #000 0%, transparent 68%);
}
.cabecalho__conteudo{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:22px;
}
.cabecalho__marca img{ height:46px; width:auto; }
.cabecalho__selo{
  margin:0;
  font-family:var(--titulo);
  font-size:11px; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--dourado-luz);
  padding:7px 15px;
  border:1px solid rgba(199,154,74,.42);
  border-radius:999px;
  white-space:nowrap;
  background:rgba(199,154,74,.07);
}

/* ==========================================================================
   Título da página
   ========================================================================== */
.pagina{ flex:1; padding-block:52px 72px; }

.titulo{ max-width:640px; margin-bottom:44px; }
.titulo__sobre{
  margin:0 0 12px;
  font-family:var(--titulo);
  font-size:11.5px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--dourado);
  display:flex; align-items:center; gap:12px;
}
.titulo__sobre::after{
  content:""; flex:1; height:1px; max-width:70px;
  background:linear-gradient(90deg, var(--dourado), transparent);
}
.titulo__h1{
  margin:0 0 16px;
  font-family:var(--titulo);
  font-size:clamp(30px, 5vw, 46px);
  font-weight:700; line-height:1.08;
  letter-spacing:-.022em;
  color:var(--azul);
}
.titulo__texto{ margin:0; color:var(--tinta-fraca); font-size:16px; max-width:56ch; }

/* ==========================================================================
   Passos
   ========================================================================== */
.passos{ position:relative; margin-bottom:30px; }
.passos__lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  position:relative; z-index:2;
}
.passo{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }

.passo__no{
  --no: var(--branco);
  --tinta-no: var(--tinta-tenue);
  --anel: var(--borda);
  position:relative;
  width:46px; height:46px; padding:0;
  border-radius:50%;
  border:1.5px solid var(--anel);
  background:var(--no);
  color:var(--tinta-no);
  font-family:var(--titulo); font-size:16px; font-weight:600;
  display:grid; place-items:center;
  cursor:default;
  transition:background var(--transicao), border-color var(--transicao),
             color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.passo__numero, .passo__certo{ grid-area:1/1; transition:opacity 200ms, transform 200ms; }
.passo__certo{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6;
               stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.5); }

.passo__rotulo{
  font-family:var(--titulo);
  font-size:11.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-tenue);
  transition:color var(--transicao);
}

/* atual */
.passo[aria-current="step"] .passo__no{
  --no: var(--azul); --tinta-no: var(--branco); --anel: var(--azul);
  box-shadow:0 0 0 5px rgba(11,29,58,.09), var(--sombra-alta);
}
.passo[aria-current="step"] .passo__rotulo{ color:var(--azul); }

/* concluído */
.passo.passo--feito .passo__no{
  --no: var(--dourado); --tinta-no: var(--branco); --anel: var(--dourado);
  cursor:pointer;
}
.passo.passo--feito .passo__no:hover{ transform:translateY(-2px); box-shadow:var(--sombra-alta); }
.passo.passo--feito .passo__numero{ opacity:0; transform:scale(.5); }
.passo.passo--feito .passo__certo{ opacity:1; transform:scale(1); }
.passo.passo--feito .passo__rotulo{ color:var(--azul); }

.passo__no:focus-visible{ outline:2px solid var(--dourado); outline-offset:4px; }

/* trilho atrás dos números */
.passos__trilho{
  position:absolute; top:23px; left:12.5%; right:12.5%;
  height:2px; background:var(--borda); border-radius:2px; z-index:1;
}
.passos__enchimento{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--dourado), var(--dourado-luz));
  border-radius:2px;
  transition:width 460ms cubic-bezier(.22,.72,.28,1);
}

/* ==========================================================================
   Papel: o cartão do formulário
   ========================================================================== */
.papel{
  background:var(--papel);
  border:1px solid var(--borda);
  border-radius:var(--r-g);
  box-shadow:var(--sombra-papel);
  padding:38px 38px 26px;
  position:relative;
  overflow:hidden;
}
.papel::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg, var(--dourado) 0 104px, var(--azul) 104px);
}

.etapa{ display:none; }
.etapa--ativa{ display:block; animation:entrar 420ms cubic-bezier(.22,.72,.28,1) both; }
@keyframes entrar{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.etapa__topo{ margin-bottom:26px; }
.etapa__titulo{
  margin:0 0 6px;
  font-family:var(--titulo); font-size:22px; font-weight:600;
  letter-spacing:-.01em; color:var(--azul);
}
.etapa__ajuda{ margin:0; color:var(--tinta-fraca); font-size:14.5px; max-width:60ch; }

/* ==========================================================================
   Campos
   ========================================================================== */
.grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px 20px; }
.campo--quarto{ grid-column:span 1; }
.campo--metade{ grid-column:span 2; }
.campo--tres-quartos{ grid-column:span 3; }
.campo--inteiro{ grid-column:1 / -1; }

.campo{ display:flex; flex-direction:column; gap:7px; min-width:0; }

.campo label{
  font-family:var(--titulo);
  font-size:12px; font-weight:600;
  letter-spacing:.055em; text-transform:uppercase;
  color:var(--azul);
}
.obrigatorio{ color:var(--dourado); font-weight:700; }

.campo__caixa{ position:relative; display:flex; align-items:center; }
.campo__caixa > input{ width:100%; }

input[type="text"], input[type="tel"], input[type="email"], textarea{
  font-family:var(--texto);
  font-size:15px; font-weight:500;
  color:var(--tinta);
  background:var(--campo-fundo);
  border:1px solid var(--borda);
  border-radius:var(--r-m);
  padding:12px 14px;
  width:100%;
  transition:border-color 160ms, box-shadow 160ms, background 160ms;
  appearance:none;
}
textarea{ resize:vertical; min-height:88px; line-height:1.55; }

input::placeholder, textarea::placeholder{ color:var(--tinta-tenue); font-weight:400; }

input:hover:not(:focus), textarea:hover:not(:focus){ border-color:var(--borda-forte); }

input:focus, textarea:focus{
  outline:none;
  background:var(--branco);
  border-color:var(--azul);
  box-shadow:0 0 0 3.5px rgba(11,29,58,.10);
}

.entrada--caixa-alta{ text-transform:uppercase; letter-spacing:.08em; }

/* sufixo % */
.campo__caixa--sufixo > input{ padding-right:38px; }
.campo__sufixo{
  position:absolute; right:14px;
  font-family:var(--titulo); font-weight:600; font-size:14px;
  color:var(--tinta-tenue); pointer-events:none;
}

/* rodinha da consulta de CNPJ */
.campo__giro{ position:absolute; right:13px; display:grid; place-items:center; }
.campo__giro .giro{ width:20px; height:18px; color:var(--azul); animation:balancar 1.15s ease-in-out infinite; }
@keyframes balancar{
  0%,100%{ transform:rotate(-16deg); }
  50%    { transform:rotate(16deg); }
}

/* campo com erro */
.campo--erro input, .campo--erro textarea{
  border-color:var(--erro); background:var(--erro-luz);
}
.campo--erro input:focus, .campo--erro textarea:focus{ box-shadow:0 0 0 3.5px rgba(163,40,32,.14); }
.campo__erro{
  margin:0; font-size:12.5px; font-weight:500; color:var(--erro);
  display:none;
}
.campo--erro .campo__erro{ display:block; animation:entrar 200ms ease-out both; }

/* preenchido pela Receita: brilho dourado que passa uma vez */
@keyframes lustro{
  0%  { background-position:-140% 0; border-color:var(--dourado); }
  100%{ background-position:240% 0;  border-color:var(--borda); }
}
.campo--veio-da-receita input{
  background-image:linear-gradient(100deg, transparent 32%, rgba(199,154,74,.30) 50%, transparent 68%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  animation:lustro 1100ms cubic-bezier(.4,0,.2,1) both;
}

/* isca de robô */
.isca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ==========================================================================
   Avisos
   ========================================================================== */
.aviso{
  margin-top:22px;
  border-radius:var(--r-m);
  padding:14px 16px 14px 46px;
  position:relative;
  font-size:14px;
  border:1px solid transparent;
  animation:entrar 300ms ease-out both;
}
.aviso::before{
  content:""; position:absolute; left:17px; top:17px;
  width:16px; height:16px; border-radius:50%;
  background:currentColor; opacity:.9;
  -webkit-mask:var(--icone) center/contain no-repeat;
          mask:var(--icone) center/contain no-repeat;
}
.aviso strong{ font-weight:600; }
.aviso p{ margin:0; }
.aviso p + p{ margin-top:5px; }

.aviso--certo{
  background:var(--certo-luz); border-color:rgba(27,107,74,.24); color:var(--certo);
  --icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.aviso--alerta{
  background:var(--alerta-luz); border-color:rgba(138,98,16,.26); color:var(--alerta);
  --icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 6a1.2 1.2 0 011.2 1.3l-.4 5.2a.8.8 0 01-1.6 0l-.4-5.2A1.2 1.2 0 0112 8zm0 9.2a1.3 1.3 0 110 2.6 1.3 1.3 0 010-2.6z'/%3E%3C/svg%3E");
}
.aviso--erro{
  background:var(--erro-luz); border-color:rgba(163,40,32,.24); color:var(--erro);
  --icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 1a11 11 0 100 22 11 11 0 000-22zm0 5a1.2 1.2 0 011.2 1.3l-.4 6.2a.8.8 0 01-1.6 0l-.4-6.2A1.2 1.2 0 0112 6zm0 10.3a1.35 1.35 0 110 2.7 1.35 1.35 0 010-2.7z'/%3E%3C/svg%3E");
}
.aviso .aviso__corpo{ color:var(--tinta); }
.aviso--certo .aviso__corpo strong{ color:var(--azul); }

/* dados da empresa achados na Receita */
.aviso__dados{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin-top:8px; font-size:12.5px; color:var(--tinta-fraca);
}
.aviso__dados span{ display:inline-flex; gap:6px; }
.aviso__dados b{ font-weight:600; color:var(--tinta); }

/* ==========================================================================
   Conferência e aceite
   ========================================================================== */
.conferencia{
  margin:26px 0 22px;
  background:linear-gradient(180deg, rgba(245,244,241,.9), rgba(245,244,241,.5));
  border:1px solid var(--borda);
  border-left:3px solid var(--dourado);
  border-radius:var(--r-m);
  padding:18px 20px;
}
.conferencia__titulo{
  margin:0 0 12px;
  font-family:var(--titulo); font-size:11.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--azul);
}
.conferencia__lista{
  margin:0; display:flex; flex-wrap:wrap; gap:14px 34px;
}
.conferencia__lista > div{ min-width:120px; }
.conferencia__lista dt{
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-tenue); font-family:var(--titulo);
}
.conferencia__lista dd{ margin:2px 0 0; font-size:14px; font-weight:500; color:var(--azul); overflow-wrap:anywhere; }

.aceite{
  display:flex; align-items:flex-start; gap:13px;
  cursor:pointer;
  background:var(--campo-fundo);
  border:1px solid var(--borda);
  border-radius:var(--r-m);
  padding:15px 17px;
  transition:border-color 160ms, background 160ms;
  text-transform:none; letter-spacing:normal;
}
.aceite:hover{ border-color:var(--borda-forte); }
.aceite input{ position:absolute; opacity:0; width:0; height:0; }
.aceite__marca{
  flex:none; width:21px; height:21px; margin-top:1px;
  border:1.5px solid var(--borda-forte); border-radius:6px;
  background:var(--branco);
  display:grid; place-items:center;
  transition:background 160ms, border-color 160ms, transform 160ms;
}
.aceite__marca svg{ width:14px; height:14px; fill:none; stroke:var(--branco); stroke-width:3;
                    stroke-linecap:round; stroke-linejoin:round;
                    opacity:0; transform:scale(.4); transition:opacity 160ms, transform 200ms cubic-bezier(.3,1.4,.5,1); }
.aceite input:checked + .aceite__marca{ background:var(--azul); border-color:var(--azul); }
.aceite input:checked + .aceite__marca svg{ opacity:1; transform:scale(1); }
.aceite input:focus-visible + .aceite__marca{ outline:2px solid var(--dourado); outline-offset:3px; }
.aceite__texto{
  font-family:var(--texto); font-size:14.5px; font-weight:500;
  color:var(--tinta); text-transform:none; letter-spacing:normal; line-height:1.5;
}
.campo--erro .aceite{ border-color:var(--erro); background:var(--erro-luz); }

.elo{ color:var(--azul); text-decoration:underline; text-underline-offset:3px;
      text-decoration-color:var(--dourado); text-decoration-thickness:1.5px; font-weight:600; }
.elo:hover{ color:var(--dourado); }

/* ==========================================================================
   Navegação
   ========================================================================== */
.navegacao{
  display:flex; align-items:center; gap:16px;
  margin-top:32px; padding-top:22px;
  border-top:1px solid var(--borda);
}
.navegacao__contador{
  margin:0 auto 0 0; order:2;
  font-family:var(--titulo); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-tenue);
}
#voltar{ order:1; }
#avancar, #enviar{ order:3; }

.botao{
  font-family:var(--titulo); font-size:14.5px; font-weight:600;
  border-radius:999px;
  padding:13px 26px;
  border:1.5px solid transparent;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:background 180ms, color 180ms, border-color 180ms,
             transform 180ms, box-shadow 180ms;
  white-space:nowrap;
}
.botao__seta{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.4;
              stroke-linecap:round; stroke-linejoin:round; transition:transform 200ms; }
.botao:hover .botao__seta:not(.botao__seta--esq){ transform:translateX(3px); }
.botao:hover .botao__seta--esq{ transform:translateX(-3px); }

.botao--cheio{ background:var(--azul); color:var(--branco); box-shadow:var(--sombra-alta); }
.botao--cheio:hover{ background:var(--azul-claro); transform:translateY(-2px);
                     box-shadow:0 14px 30px -12px rgba(11,29,58,.5); }
.botao--cheio:active{ transform:translateY(0); }

.botao--enviar{ background:var(--dourado); color:var(--azul); }
.botao--enviar:hover{ background:var(--dourado-luz);
                      box-shadow:0 14px 30px -12px rgba(199,154,74,.7); }

.botao--fantasma{ background:transparent; color:var(--tinta-fraca); border-color:var(--borda); }
.botao--fantasma:hover{ color:var(--azul); border-color:var(--azul); background:rgba(11,29,58,.03); }

.botao:focus-visible{ outline:2px solid var(--dourado); outline-offset:3px; }
.botao[disabled]{ opacity:.6; cursor:progress; transform:none !important; }

.botao__giro{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(11,29,58,.28); border-top-color:var(--azul);
  animation:rodar .7s linear infinite;
  display:none;
}
@keyframes rodar{ to{ transform:rotate(360deg); } }
.botao--enviando .botao__giro{ display:block; }

/* ==========================================================================
   Recibo
   ========================================================================== */
.recibo{ text-align:center; padding:52px 38px 44px; animation:entrar 520ms cubic-bezier(.22,.72,.28,1) both; }
.recibo:focus{ outline:none; }
.recibo__selo{
  width:74px; height:64px; margin:0 auto 22px; color:var(--azul);
  animation:selar 720ms cubic-bezier(.3,1.3,.4,1) both 120ms;
}
.recibo__selo svg{ width:100%; height:100%; }
@keyframes selar{ from{ opacity:0; transform:scale(.55) translateY(10px); } to{ opacity:1; transform:none; } }

.recibo__sobre{
  margin:0 0 10px; font-family:var(--titulo);
  font-size:11.5px; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--dourado);
}
.recibo__titulo{
  margin:0 0 12px; font-family:var(--titulo);
  font-size:clamp(26px,4vw,36px); font-weight:700; letter-spacing:-.02em; color:var(--azul);
}
.recibo__texto{ margin:0 auto 26px; max-width:52ch; color:var(--tinta-fraca); font-size:16px; }
.recibo__nota{
  max-width:62ch; margin:0 auto 28px;
  background:var(--alerta-luz); border:1px solid rgba(138,98,16,.22);
  border-radius:var(--r-m); padding:16px 20px;
  text-align:left; font-size:14px; color:var(--tinta);
}
.recibo__nota p{ margin:0; }
.recibo__nota strong{ color:var(--alerta); font-weight:600; }
.recibo__resumo{
  margin:0; padding-top:24px; border-top:1px solid var(--borda);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:18px 40px; text-align:left;
}
.recibo__resumo > div{ min-width:120px; }
.recibo__resumo dt{
  font-family:var(--titulo); font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-tenue);
}
.recibo__resumo dd{ margin:3px 0 0; font-size:14.5px; font-weight:500; color:var(--azul); overflow-wrap:anywhere; }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.rodape{
  background:var(--azul); color:rgba(255,255,255,.68);
  border-top:2px solid var(--dourado);
  margin-top:auto;
}
.rodape__conteudo{ display:flex; align-items:center; gap:16px; padding-block:26px; }
.rodape__simbolo{ width:34px; height:30px; flex:none; color:var(--branco); }
.rodape__texto{ margin:0; font-size:13px; line-height:1.6; }
.rodape__miudo{ color:rgba(255,255,255,.44); font-size:12px; }

/* ==========================================================================
   Telas menores
   ========================================================================== */
@media (max-width:860px){
  .grade{ grid-template-columns:repeat(2,1fr); }
  .campo--quarto{ grid-column:span 1; }
  .campo--metade, .campo--tres-quartos{ grid-column:span 2; }
  .papel{ padding:30px 24px 24px; }
}

@media (max-width:620px){
  .faixa{ padding-inline:18px; }
  .pagina{ padding-block:36px 52px; }
  .cabecalho__marca img{ height:36px; }
  .cabecalho__selo{ display:none; }

  .grade{ grid-template-columns:1fr; }
  .campo--quarto, .campo--metade, .campo--tres-quartos{ grid-column:span 1; }

  .passo__no{ width:38px; height:38px; font-size:14px; }
  .passo__rotulo{ font-size:9.5px; letter-spacing:.08em; }
  .passos__trilho{ top:19px; }

  .papel{ padding:26px 20px 20px; border-radius:var(--r-m); }
  .recibo{ padding:40px 22px 32px; }

  .navegacao{ flex-wrap:wrap; }
  .navegacao__contador{ order:3; width:100%; text-align:center; margin:4px 0 0; }
  #voltar{ order:1; flex:1; }
  #avancar, #enviar{ order:2; flex:1.6; }
  .botao{ padding:13px 18px; }
}

/* ==========================================================================
   Quem pediu menos movimento
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

@media print{
  .passos,.navegacao,.cabecalho__trama{ display:none; }
  .papel{ box-shadow:none; border:1px solid #999; }
  body{ background:#fff; }
}

/* ==========================================================================
   Imagens da empresa: logomarca e fachada
   ========================================================================== */
.opcional{
  font-family:var(--texto); font-size:10.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-tenue);
  border:1px solid var(--borda); border-radius:999px;
  padding:2px 8px; margin-left:8px; vertical-align:middle;
}

.anexos{ margin-top:26px; padding-top:24px; border-top:1px solid var(--borda); }
.anexos__titulo{
  margin:0 0 4px; font-family:var(--titulo);
  font-size:12px; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  color:var(--azul);
}
.anexos__ajuda{ margin:0 0 16px; font-size:13.5px; color:var(--tinta-fraca); }
.anexos__grade{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.anexo{ position:relative; min-width:0; }
.anexo__entrada{
  position:absolute; width:1px; height:1px; opacity:0;
  overflow:hidden; clip:rect(0 0 0 0);
}
.anexo__area{
  display:flex; align-items:center; gap:13px;
  padding:16px;
  background:var(--campo-fundo);
  border:1.5px dashed var(--borda-forte); border-radius:var(--r-m);
  cursor:pointer;
  transition:border-color 160ms, background 160ms, transform 160ms;
  text-transform:none; letter-spacing:normal;
}
.anexo__area:hover{ border-color:var(--dourado); background:var(--branco); transform:translateY(-1px); }
.anexo__entrada:focus-visible + .anexo__area{ outline:2px solid var(--dourado); outline-offset:3px; }

.anexo__icone{ flex:none; width:38px; height:38px; border-radius:10px;
  background:rgba(11,29,58,.05); display:grid; place-items:center; }
.anexo__icone svg{ width:20px; height:20px; fill:none; stroke:var(--azul);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.anexo__texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.anexo__texto b{ font-family:var(--titulo); font-size:14px; font-weight:600; color:var(--azul); }
.anexo__texto small{ font-size:12.5px; color:var(--tinta-tenue); }

.anexo__previa{
  margin:0; position:relative;
  border:1px solid var(--borda); border-radius:var(--r-m);
  background:var(--branco); overflow:hidden;
  animation:entrar 300ms ease-out both;
}
.anexo__previa img{ width:100%; height:132px; object-fit:contain; background:var(--off); display:block; }
.anexo__previa figcaption{
  padding:8px 12px; font-size:12px; color:var(--tinta-fraca);
  border-top:1px solid var(--borda);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.anexo__tirar{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px; padding:0;
  border-radius:50%; border:none; cursor:pointer;
  background:rgba(11,29,58,.82); color:#fff;
  display:grid; place-items:center;
  transition:background 160ms, transform 160ms;
}
.anexo__tirar svg{ width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; }
.anexo__tirar:hover{ background:var(--erro); transform:scale(1.08); }
.anexo__tirar:focus-visible{ outline:2px solid var(--dourado); outline-offset:2px; }

.anexo--carregando .anexo__area{ opacity:.55; pointer-events:none; }

/* ==========================================================================
   Termos do convênio
   ========================================================================== */
.termos{ margin:28px 0 22px; }
.termos__topo{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.termos__titulo{
  margin:0; font-family:var(--titulo);
  font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--azul);
}

.botao-mini{
  font-family:var(--titulo); font-size:12px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--borda); background:var(--branco);
  color:var(--azul); cursor:pointer;
  transition:border-color 160ms, background 160ms, color 160ms;
}
.botao-mini svg{ width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.botao-mini:hover{ border-color:var(--dourado); background:rgba(199,154,74,.08); }
.botao-mini:focus-visible{ outline:2px solid var(--dourado); outline-offset:2px; }
.botao-mini--fraco{ color:var(--tinta-fraca); }
.botao-mini--fraco:hover{ color:var(--erro); border-color:var(--erro); background:var(--erro-luz); }

.termos__caixa{
  position:relative;
  max-height:340px; overflow-y:auto; overscroll-behavior:contain;
  background:var(--branco);
  border:1px solid var(--borda); border-radius:var(--r-m);
  padding:20px 22px;
  scrollbar-width:thin; scrollbar-color:var(--borda-forte) transparent;
}
.termos__caixa::-webkit-scrollbar{ width:9px; }
.termos__caixa::-webkit-scrollbar-thumb{ background:var(--borda-forte); border-radius:9px;
  border:3px solid var(--branco); }
.termos__caixa:focus-visible{ outline:2px solid var(--dourado); outline-offset:2px; }
.termos__carregando{ margin:0; color:var(--tinta-tenue); font-size:13.5px; font-style:italic; }
.termos__rodape{ margin:8px 0 0; font-size:12px; color:var(--tinta-tenue); }

.clausula{ padding:2px 0 16px; }
.clausula:last-child{ padding-bottom:0; }
.clausula__titulo{
  margin:0 0 7px; font-family:var(--titulo);
  font-size:13.5px; font-weight:600; color:var(--azul); letter-spacing:-.005em;
}
.clausula__p{ margin:0 0 8px; font-size:13px; line-height:1.68; color:var(--tinta-fraca); }
.clausula__p:last-child{ margin-bottom:0; }
.clausula__lista{ margin:0 0 8px; padding:0; list-style:none; }
.clausula__item{
  position:relative; padding-left:18px; margin-bottom:5px;
  font-size:13px; line-height:1.6; color:var(--tinta);
}
.clausula__item::before{
  content:""; position:absolute; left:3px; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--dourado);
}

/* As que a empresa precisa ler com atenção: descontos e identificação */
.clausula--destaque{
  background:linear-gradient(180deg, rgba(199,154,74,.09), rgba(199,154,74,.04));
  border:1px solid rgba(199,154,74,.34);
  border-left:3px solid var(--dourado);
  border-radius:var(--r-p);
  padding:15px 17px;
  margin-bottom:16px;
}
.clausula--destaque .clausula__p{ color:var(--tinta); }
.clausula--destaque .clausula__titulo{ display:flex; align-items:center; gap:8px; }
.clausula--destaque .clausula__titulo::after{
  content:"leia com atenção";
  font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--alerta); background:rgba(199,154,74,.16);
  border-radius:999px; padding:3px 8px;
}

/* ==========================================================================
   Assinatura
   ========================================================================== */
.assinatura{ margin-bottom:22px; }
.assinatura__topo{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.assinatura__titulo{
  margin:0; font-family:var(--titulo);
  font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--azul);
}
.assinatura__quadro{
  position:relative;
  background:var(--campo-fundo);
  border:1px solid var(--borda); border-radius:var(--r-m);
  overflow:hidden;
  transition:border-color 160ms;
}
.assinatura__quadro:hover{ border-color:var(--borda-forte); }
.assinatura--assinada .assinatura__quadro{ border-color:var(--dourado); background:var(--branco); }

#tela-assinatura{
  display:block; width:100%; height:150px;
  touch-action:none;                /* sem isto o dedo rola a página em vez de desenhar */
  cursor:crosshair;
}
.assinatura__linha{
  position:absolute; left:8%; right:8%; bottom:34px; height:1px;
  background:var(--borda-forte); pointer-events:none;
}
.assinatura__dica{
  position:absolute; left:0; right:0; bottom:12px;
  text-align:center; font-size:12.5px; color:var(--tinta-tenue);
  pointer-events:none; transition:opacity 200ms;
}
.assinatura--assinada .assinatura__dica,
.assinatura--assinada .assinatura__linha{ opacity:0; }
.assinatura__ajuda{ margin:8px 0 0; font-size:12.5px; color:var(--tinta-tenue); }

@media (max-width:620px){
  .anexos__grade{ grid-template-columns:1fr; }
  .termos__caixa{ max-height:280px; padding:16px 15px; }
  #tela-assinatura{ height:170px; }
}

/* ==========================================================================
   Impressão dos termos: só o contrato, sem a página em volta
   ========================================================================== */
@media print{
  .termos__caixa{ max-height:none; overflow:visible; border:none; padding:0; }
  .termos__topo, .termos__rodape, .assinatura{ display:none; }
  .clausula{ break-inside:avoid; }
  .clausula--destaque{ background:none; border:1px solid #999; }
}

/* Anexo recusado: a moldura acompanha a mensagem */
.anexo.campo--erro .anexo__area{ border-color:var(--erro); background:var(--erro-luz); }
.anexo.campo--erro .anexo__icone{ background:rgba(163,40,32,.09); }
.anexo.campo--erro .anexo__icone svg{ stroke:var(--erro); }
.assinatura.campo--erro .assinatura__quadro{ border-color:var(--erro); background:var(--erro-luz); }

/* ==========================================================================
   Empresa ou profissional liberal
   ========================================================================== */
.tipo{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-bottom:22px;
}
.tipo__radio{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }

.tipo__botao{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:var(--campo-fundo);
  border:1.5px solid var(--borda); border-radius:var(--r-m);
  cursor:pointer;
  transition:border-color 180ms, background 180ms, color 180ms, box-shadow 180ms, transform 180ms;
  text-transform:none; letter-spacing:normal;
}
.tipo__botao svg{
  flex:none; width:22px; height:22px;
  fill:none; stroke:var(--tinta-tenue); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke 180ms;
}
.tipo__botao span{
  display:flex; flex-direction:column; gap:1px; min-width:0;
  font-family:var(--titulo); font-size:14.5px; font-weight:600; color:var(--azul);
  transition:color 180ms;
}
.tipo__botao small{
  font-family:var(--texto); font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-tenue);
  transition:color 180ms;
}
.tipo__botao:hover{ border-color:var(--borda-forte); transform:translateY(-1px); }

.tipo__radio:checked + .tipo__botao{
  background:var(--azul); border-color:var(--azul);
  box-shadow:var(--sombra-alta);
}
.tipo__radio:checked + .tipo__botao svg{ stroke:var(--dourado); }
.tipo__radio:checked + .tipo__botao span{ color:var(--branco); }
.tipo__radio:checked + .tipo__botao small{ color:var(--dourado-luz); }
.tipo__radio:focus-visible + .tipo__botao{ outline:2px solid var(--dourado); outline-offset:3px; }

/* Ajuda que só existe num dos dois tipos */
.campo__nota{
  margin:0; font-size:12.5px; color:var(--tinta-tenue);
}

@media (max-width:620px){
  .tipo{ grid-template-columns:1fr; gap:10px; }
  .tipo__botao{ padding:13px 15px; }
}

/* Chama atenção para a caixa de termos quando o documento ainda não existe */
@keyframes atencaoTermos{
  0%,100%{ box-shadow:0 0 0 0 rgba(199,154,74,0); border-color:var(--borda); }
  30%,70%{ box-shadow:0 0 0 4px rgba(199,154,74,.28); border-color:var(--dourado); }
}
.termos__caixa--atencao{ animation:atencaoTermos 1.5s ease-in-out; }

/* ═══════════════ Descontos em reais por produto ou serviço ═══════════════ */
/*
 * Lista que a empresa monta clicando em incluir. Começa vazia: é o caso menos
 * comum, e um campo em branco pedindo preenchimento assustaria quem só quer
 * dar o percentual e seguir.
 */
.itens__topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.itens__ajuda{
  margin:0; font-size:13px; color:var(--tinta-fraca); line-height:1.5;
}
.itens__incluir{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  font:600 13px/1 "Montserrat", system-ui, sans-serif;
  color:var(--azul); background:transparent;
  border:1.5px solid var(--borda);
  transition:border-color .16s, background .16s, color .16s;
}
.itens__incluir:hover{ border-color:var(--azul); background:rgba(11,29,58,.04); }
.itens__incluir:focus-visible{ outline:2px solid var(--dourado); outline-offset:2px; }
.itens__incluir svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round;
}

.itens{ display:flex; flex-direction:column; gap:10px; }
.itens:not(:empty){ margin-top:12px; }

.item{ display:flex; gap:10px; align-items:center; animation:entrar 200ms ease-out both; }
/* R$ ou %, escolhido por linha: a ótica dá R$ 100 na lente e 30% na armação.
   Dois botões em vez de <select> porque são duas opções e a escolha precisa
   ser vista, não aberta. */
.item__unidade{ display:flex; flex:0 0 auto; }
.item__unidade button{
  height:44px; padding:0 12px; cursor:pointer;
  font:700 13px/1 "Montserrat", system-ui, sans-serif;
  background:var(--branco); color:var(--tinta-fraca);
  border:1.5px solid var(--borda);
  transition:background .16s, color .16s, border-color .16s;
}
.item__unidade button:first-child{ border-radius:10px 0 0 10px; }
.item__unidade button:last-child{ border-radius:0 10px 10px 0; border-left-width:0; }
.item__unidade button:hover{ color:var(--azul); }
.item__unidade button:focus-visible{ outline:2px solid var(--dourado); outline-offset:2px; z-index:1; }
.item__unidade .item__unidade--ativa{
  background:var(--azul); color:var(--branco); border-color:var(--azul);
}
/* O ativo à direita precisa da borda esquerda de volta, senão o azul encosta
   no branco do vizinho sem separação */
.item__unidade button:last-child.item__unidade--ativa{ border-left-width:1.5px; }

/* O valor tem largura fixa: alinha a coluna mesmo com descrições
   de tamanhos diferentes */
.item__valor{ position:relative; flex:0 0 104px; }
.item__valor > input{ width:100%; }
.item__desc{ flex:1 1 auto; min-width:0; }
.item__tirar{
  flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; cursor:pointer; background:transparent;
  border:1px solid transparent; color:var(--tinta-fraca);
  transition:color .16s, background .16s, border-color .16s;
}
.item__tirar:hover{ color:var(--erro); background:rgba(163,40,32,.07); border-color:rgba(163,40,32,.2); }
.item__tirar:focus-visible{ outline:2px solid var(--dourado); outline-offset:2px; }
.item__tirar svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

@media (max-width:560px){
  .item{ flex-wrap:wrap; }
  .item__valor{ flex:1 1 90px; }
  .item__desc{ flex:1 1 100%; order:3; }
}