/* ============================================================
   EXPOTCHÊ 34ª — Agendamento comercial
   Fundação: tokens + primitivas. Página CLARA (feira popular
   premium). Paleta tricolor do RS como sistema de acento:
   vermelho carrega a ação, verde confirma, amarelo é cirúrgico.
   ============================================================ */

:root{
  /* Identidade Expotchê — bandeira do Rio Grande do Sul */
  --rs-green:#009B4E;
  --rs-red:#D6152C;
  --rs-yellow:#FFCC00;

  /* Vermelho calibrado para texto/ação sobre claro */
  --carpet:#C31A2E;
  --carpet-deep:#8E1220;
  --carpet-soft:#FBEAEC;

  /* Verde para estados de confirmação */
  --green-deep:#037A3E;
  --green-soft:#E8F5EE;

  /* Superfícies claras */
  --paper:#FBFAF8;
  --paper-2:#FFFFFF;
  --paper-3:#F2EFEA;

  /* Texto */
  --ink:#141210;
  --ink-2:#4A443E;
  --ink-3:#7C746C;

  /* Estrutura */
  --hair:rgba(20,18,16,.11);
  --hair-soft:rgba(20,18,16,.06);

  /* Tipografia */
  --serif:"Hoefler Text","Iowan Old Style","Charter","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI",system-ui,sans-serif;
  --mono:"SF Mono","JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);

  /* Alvo de toque mínimo — link chega por WhatsApp, tudo no dedo */
  --touch:48px;
}

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

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

body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100dvh;
}

img{display:block;max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}

/* Foco visível sempre — nunca remover.
   Tom neutro escuro: o vermelho fica reservado ao estado de erro,
   senão um campo válido em foco parece campo recusado. */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------- Tipografia ---------- */
.ey{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--carpet);
}
.ey--dim{color:var(--ink-3)}

.dsp{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.9rem,5.6vw,2.9rem);
  line-height:1.05;
  letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  text-wrap:balance;
}
.dsp em{font-style:italic;color:var(--carpet)}

.tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- Régua tricolor: assinatura da marca ---------- */
.regua{
  display:flex;
  height:5px;
  width:76px;
  border:0;
  border-radius:99px;
  overflow:hidden;
}
.regua::before,
.regua::after,
.regua i{content:'';flex:1;height:100%}
.regua::before{background:var(--rs-green)}
.regua i{background:var(--rs-red)}
.regua::after{background:var(--rs-yellow)}

/* Barra tricolor no topo absoluto da página */
.tricolor-top{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:60;
  display:flex;
}
.tricolor-top span{flex:1}
.tricolor-top span:nth-child(1){background:var(--rs-green)}
.tricolor-top span:nth-child(2){background:var(--rs-red)}
.tricolor-top span:nth-child(3){background:var(--rs-yellow)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  min-height:var(--touch);
  padding:.85rem 1.65rem;
  border:1px solid transparent;
  border-radius:9px;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease),
             transform .22s var(--ease),opacity .22s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.985)}

.btn-primary{
  background:var(--carpet);
  color:#fff;
  box-shadow:0 1px 2px rgba(20,18,16,.12);
}
.btn-primary:hover:not(:disabled){background:var(--carpet-deep)}
.btn-primary:disabled{opacity:.42;cursor:not-allowed}

.btn-ghost{
  background:transparent;
  color:var(--ink-2);
  border-color:var(--hair);
}
.btn-ghost:hover{background:var(--paper-3);color:var(--ink)}

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

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