/* ==========================================================================
   Michelli Guido · Método OLHAR — página principal
   Folha única. Tokens do design system + componentes achatados.
   Sem dependência externa: fontes servidas de assets/fonts/.
   ========================================================================== */

/* --------------------------------------------------------------- fontes -- */
@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-Italic-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("fonts/NunitoSans-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("fonts/NunitoSans-Italic-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:italic;font-display:swap}

/* --------------------------------------------------------------- tokens -- */
:root{
  --vinho:#5C1A2E;
  --vermelho:#C9243F;
  --vermelho-hover:#AD1B33;
  --papel:#FBF5F1;
  --rose:#F2E1DD;
  --rose-borda:#EADAD5;
  --rose-borda-forte:#E4D2CE;
  --tinta:#2E2226;
  --tinta-suave:#6E5A5F;
  --tinta-fraca:#9A868A;
  --branco-quente:#FFFFFF;
  --disabled-fundo:#E9CFC9;

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --peso-display:600;
  --peso-forte:700;
  --peso-eyebrow:800;

  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;
  --alvo-toque:44px;

  --sombra-card:0 24px 48px -32px rgba(92,26,46,.35);
  --sombra-flutuante:0 30px 60px -38px rgba(92,26,46,.45);
  --sombra-botao:0 18px 34px -22px rgba(92,26,46,.6);
  --glow-foco:0 0 0 4px rgba(92,26,46,.12);

  --easing:cubic-bezier(.2,.6,.3,1);
  --dur:180ms;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur:0.01ms}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ----------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--papel);color:var(--tinta)}
body{font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--vinho);text-decoration:none}
a:hover{color:var(--vermelho)}
:focus-visible{outline:2px solid var(--vinho);outline-offset:3px;border-radius:4px}
::selection{background:var(--rose);color:var(--vinho)}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:var(--peso-display);color:var(--vinho)}
img{max-width:100%}

/* -------------------------------------------------------------- botões --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--alvo-toque);
  font-family:var(--font-ui);font-weight:var(--peso-forte);
  border-radius:var(--radius-md);
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--easing),color var(--dur) var(--easing),
             transform var(--dur) var(--easing),box-shadow var(--dur) var(--easing);
}
.btn--pequeno{font-size:14px;padding:11px 18px}
.btn--medio{font-size:16px;padding:15px 26px}
.btn--full{width:100%}

.btn--primario{background:var(--vermelho);color:#FFF;border:none;box-shadow:var(--sombra-botao)}
.btn--primario:hover{background:var(--vermelho-hover);color:#FFF;transform:translateY(-1px)}

.btn--secundario{background:transparent;color:var(--vinho);border:1.5px solid var(--vinho)}
.btn--secundario.btn--pequeno{padding:calc(11px - 1px) calc(18px - 1px)}
.btn--secundario:hover{background:var(--rose);color:var(--vinho)}

.btn:disabled{background:var(--disabled-fundo);color:var(--tinta-fraca);box-shadow:none;transform:none;cursor:not-allowed;border-color:var(--rose-borda-forte)}

/* ================================================================ layout = */
.pagina{
  min-height:100dvh;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(20px,3vh,40px);
  padding:clamp(24px,4vh,44px) clamp(20px,4vw,32px);
}

/* ------------------------------------------------------------ cabeçalho -- */
.topo{
  max-width:840px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.4vh,16px);
}
.selo-metodo{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--vinho);border-radius:var(--radius-pill);
  padding:6px 14px 6px 12px;
  font-size:clamp(10px,1.1vw,12px);font-weight:var(--peso-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;color:var(--vinho);
}
.selo-metodo::before{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:var(--vermelho);flex:none}
.topo__nome{font-size:clamp(38px,5.4vw,58px);line-height:1.06;letter-spacing:-.02em}
.topo__credencial{margin:0;font-size:clamp(13px,1.3vw,15px);font-weight:600;letter-spacing:.01em;color:var(--tinta-suave)}
.topo__resumo{margin:0;max-width:62ch;font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:var(--tinta)}
.topo__grifo{border-bottom:2px solid var(--vermelho);padding-bottom:2px}
.topo__slogan{font-family:var(--font-display);font-style:italic;font-weight:480;color:var(--vinho)}

/* ---------------------------------------------------------------- grade -- */
.grade{
  max-width:1180px;width:100%;margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.2vw,18px);align-items:stretch;
}

.cartao{
  position:relative;display:flex;flex-direction:column;gap:12px;
  background:var(--branco-quente);border:1.5px solid var(--rose);
  border-radius:var(--radius-lg);padding:clamp(14px,1.6vw,20px);
  box-shadow:var(--sombra-card);
  transition:box-shadow var(--dur) var(--easing),border-color var(--dur) var(--easing),transform var(--dur) var(--easing);
}
.cartao:hover{box-shadow:var(--sombra-flutuante);border-color:var(--vinho);transform:translateY(-2px)}
.cartao:focus-within{border-color:var(--vinho)}

.cartao__selo{
  position:absolute;top:12px;right:12px;
  font-size:9.5px;font-weight:var(--peso-eyebrow);letter-spacing:.14em;
  text-transform:uppercase;border-radius:var(--radius-pill);
}
.cartao__selo--gratuito{background:var(--vermelho);color:#FFF;padding:4px 9px}
.cartao__selo--breve{border:1px solid var(--vinho);color:var(--vinho);padding:3px 9px}

.cartao__icone{width:clamp(46px,4.2vw,60px);aspect-ratio:1;display:flex;flex:none}
.cartao__icone img{width:100%;height:100%;object-fit:contain}

.cartao__corpo{display:flex;flex-direction:column;gap:8px;flex:1}
.cartao__titulo{font-size:clamp(17px,1.5vw,20px);line-height:1.22}
.cartao__desc{margin:0;font-size:clamp(13px,1.05vw,14px);line-height:1.55;color:var(--tinta-suave)}
.cartao__espaco{flex:1;min-height:6px}

/* --------------------------------------------------------------- rodapé -- */
.rodape{
  max-width:1180px;width:100%;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding-top:clamp(8px,1.5vh,16px);
  border-top:1px solid var(--rose-borda);text-align:center;
}
.rodape__marca{display:flex;align-items:center;gap:12px}
.rodape__marca img{width:72px;height:72px;object-fit:contain;flex:none}
.rodape__slogan{margin:0;font-size:clamp(14px,1.3vw,17px);color:var(--vinho)}
.rodape__slogan em{font-family:var(--font-display);font-style:italic;font-weight:480}
.rodape__legal{margin:0;font-size:clamp(11px,1vw,13px);line-height:1.6;color:var(--tinta-suave)}

/* =============================================== modal da lista de espera = */
.espera{
  width:100%;max-width:420px;padding:28px;border:1.5px solid var(--rose);
  border-radius:var(--radius-lg);background:var(--branco-quente);color:var(--tinta);
  box-shadow:var(--sombra-flutuante);
}
.espera::backdrop{background:rgba(46,34,38,.42)}
.espera[open]{animation:mgRise 180ms var(--easing)}
.espera[open]::backdrop{animation:mgFade 160ms var(--easing)}
@keyframes mgFade{from{opacity:0}to{opacity:1}}
@keyframes mgRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.espera__interno{display:flex;flex-direction:column;gap:14px}
.espera__fechar{
  position:absolute;top:12px;right:14px;
  background:none;border:none;font-size:18px;line-height:1;
  color:var(--tinta-suave);cursor:pointer;padding:6px;
}
.espera__fechar:hover{color:var(--vinho)}
.espera__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:var(--peso-eyebrow);letter-spacing:.16em;
  text-transform:uppercase;color:var(--vinho);
}
.espera__eyebrow::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--vermelho);flex:none}
.espera__titulo{font-size:24px;line-height:1.22}
.espera__texto{margin:0;font-size:14.5px;line-height:1.6;color:var(--tinta-suave)}
.espera__form{display:flex;flex-direction:column;gap:12px}
.espera__input{
  width:100%;font-family:var(--font-ui);font-size:16px;
  padding:13px 14px;border:1px solid var(--rose-borda-forte);
  border-radius:var(--radius-md);background:var(--branco-quente);color:var(--tinta);
  transition:border-color var(--dur) var(--easing),box-shadow var(--dur) var(--easing);
}
.espera__input:focus{outline:none;border-color:var(--vinho);box-shadow:var(--glow-foco)}
.espera__input.is-erro{border-color:var(--vermelho)}

.espera__status{margin:0;font-size:13.5px;line-height:1.5;font-weight:var(--peso-forte);color:var(--vermelho)}
.espera__status:empty{display:none}

.espera__ok{margin:0;font-size:15px;line-height:1.6;color:var(--tinta-suave)}
[hidden]{display:none !important}

/* ============================================================ responsivo = */
@media (max-width:1080px){
  .grade{grid-template-columns:repeat(6,1fr)}
  .grade > *{grid-column:span 2}
  .grade > *:nth-child(4){grid-column:2 / span 2}
}
@media (max-width:720px){
  .grade{grid-template-columns:1fr;gap:10px}
  .grade > *,.grade > *:nth-child(4){grid-column:auto}

  /* Coluna da esquerda empilha selo e icone; o corpo ocupa a direita
     nas duas linhas. Antes o selo ficava sozinho, com um vazio embaixo. */
  .cartao{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "selo  corpo"
      "icone corpo";
    align-items:start;
    gap:10px 14px;
    padding:14px 16px;
  }
  .cartao__selo{grid-area:selo;position:static;justify-self:start}
  .cartao__icone{grid-area:icone;width:46px;justify-self:center;align-self:start}
  .cartao__corpo{grid-area:corpo}
}
@media (max-width:420px){
  .espera{padding:22px}
  .rodape__marca img{width:56px;height:56px}
}