/*
 * Ayo — camada base dos simuladores.
 *
 * Traz para a web o vocabulário de cards do panfleto A5 do Startup Summit
 * (ayo-panfleto-a5.html) e a paleta do Ayo Design System (modelo_2026-08-24).
 *
 * A regra visual do folheto, que aqui é lei: cartão é BRANCO, borda de 1px em
 * --line, raio de 8px e NENHUMA sombra. O relevo vem do contraste com o cinza
 * do fundo, não de sombra. Amarelo é preenchimento de bloco, nunca texto.
 *
 * Carregado antes de simulador-{página}.css.
 *
 * @package Ayo_Entregas
 * @since   1.3.0
 */

:root{
  /* superfícies — idênticas ao folheto */
  --slide:#E6E7E9;
  --card:#FFFFFF;
  --canvas:#ECECEC;
  --dark:#1A1A1A;

  /* texto */
  --ink:#1A1A1A;
  --ink2:#595959;
  --ink3:#8C8C8C;

  /* texto sobre amarelo */
  --ink-on-brand:#1A1A1A;
  --ink2-on-brand:#4a3800;
  --ink3-on-brand:#5d4600;
  --ink4-on-brand:#6b5200;

  /* marca */
  --brand:#FEBE00;
  --arte:#F5B200;
  --mark:#D09300;

  /* traços e semântica */
  --line:#DFDFDC;
  --line-2:#C7C7C3;
  --pos:#4E8A3C;
  --neg:#C0392B;
  --gray-s:#595959;

  --r-card:8px;
  --r-pill:999px;
  --fd:'Comfortaa',system-ui,sans-serif;
  --fb:'Poppins','Segoe UI',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── Fundo ────────────────────────────────────────────────────
   O header do tema injeta orbs dourados desfocados e uma textura
   de grão. Sobre o cinza do design system eles viravam faixas
   bege atravessando a página — o "fundo não tá legal". Aqui o
   fundo é chapado, como no verso do folheto. */
body.ayo-sim{
  background:var(--slide);
  color:var(--ink);
  font-family:var(--fb);
  font-weight:300;
}
body.ayo-sim .ayo-orbs,
body.ayo-sim .ayo-orb,
body.ayo-sim .ayo-grain{display:none !important}

/* A nav do tema é fixa (66px). Com a admin bar logada, o WordPress
   empurra o html 32px e a pill era cortada no topo. */
body.ayo-sim .ayo-nav{top:12px}
body.admin-bar.ayo-sim .ayo-nav{top:calc(32px + 12px)}
@media (max-width:782px){
  body.admin-bar.ayo-sim .ayo-nav{top:calc(46px + 12px)}
}

/* A nav fixa cobre 66px do topo; o conteúdo precisa devolver esse espaço.
   Fica aqui, na camada comum, para valer nas três páginas. */
body.ayo-sim main{padding-top:calc(66px + 20px)}

/* ── Contêiner ────────────────────────────────────────────────
   560px é largura de celular. No desktop a coluna ficava perdida
   num mar de cinza; 640px com respiro resolve sem redesenhar. */
.ayo-sim .wrap{width:min(100%,640px);margin:0 auto;padding:0 clamp(18px,5vw,28px)}

/* ── Cards do folheto ─────────────────────────────────────────*/

/* .fbox — linha de comparação: rótulo à esquerda, valor à direita */
.ayo-sim .fbox{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.ayo-sim .fbox .t{font-weight:700;font-size:.95rem;color:var(--ink)}
.ayo-sim .fbox .d{font-size:.85rem;color:var(--ink2);text-align:right}
.ayo-sim .fbox--ayo{background:var(--brand);border-color:var(--brand)}
.ayo-sim .fbox--ayo .t{color:var(--ink-on-brand)}
.ayo-sim .fbox--ayo .d{color:var(--ink-on-brand);font-weight:700}

/* .mod — cartão de conteúdo: título + descrição */
.ayo-sim .mod{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;
}
.ayo-sim .mod .t{font-weight:700;font-size:.95rem;line-height:1.25;color:var(--ink)}
.ayo-sim .mod .d{font-size:.85rem;color:var(--ink2);margin-top:4px;line-height:1.45}
.ayo-sim .mod--brand{background:var(--brand);border-color:var(--brand)}
.ayo-sim .mod--brand .t{color:var(--ink-on-brand)}
.ayo-sim .mod--brand .d{color:var(--ink2-on-brand)}
.ayo-sim .cardlist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:480px){ .ayo-sim .cardlist{grid-template-columns:1fr} }

/* .lever — tarja preta */
.ayo-sim .lever{background:var(--dark);border-radius:var(--r-card);padding:16px 18px;color:#fff}
.ayo-sim .lever .lt{
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);line-height:1;
}
.ayo-sim .lever .od{
  margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.13);
  font-size:.8rem;color:#9A9A9A;line-height:1.5;
}
.ayo-sim .lever .od b{color:#fff;font-weight:600}

/* .note — a leitura do bloco em uma frase */
.ayo-sim .note{
  font-size:.8rem;color:var(--ink2);border-left:3px solid var(--brand);
  padding:4px 0 4px 11px;line-height:1.5;
  background:linear-gradient(90deg,rgba(254,190,0,.14),transparent 72%);
}
.ayo-sim .note b{color:var(--ink);font-weight:600}

/* .marco — o número que carrega o bloco */
.ayo-sim .marco .n{
  font-family:var(--fb);font-size:clamp(2.1rem,10vw,2.9rem);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.ayo-sim .marco .n sup{font-size:.42em;font-weight:600;vertical-align:super;margin-right:2px}
.ayo-sim .marco .t{font-size:.9rem;font-weight:700;color:var(--ink);margin-top:6px;line-height:1.3}
.ayo-sim .marco--brand .n,
.ayo-sim .marco--brand .t{color:var(--ink-on-brand)}

/* .eyebrow — rótulo miúdo */
.ayo-sim .eyebrow{
  font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);
}
.ayo-sim .eyebrow--brand{color:var(--ink3-on-brand)}

/* .mapa — cartão que lista as praças. Vive aqui, e não no CSS de uma página
   só, porque os dois simuladores usam. Copiar markup sem trazer o CSS junto
   foi exatamente a Causa 2 da v1.0.7. */
.ayo-sim .mapa{
  margin-top:20px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--card);
}
.ayo-sim .mapa .eyebrow{display:block;margin-bottom:8px}
.ayo-sim .mapa .eyebrow + .pillrow{margin-bottom:0}

/* pills de cidade, como no card amarelo do verso */
.ayo-sim .pill{
  display:inline-flex;align-items:center;border-radius:var(--r-pill);
  padding:6px 13px;font-size:.78rem;font-weight:600;line-height:1;
  font-family:var(--fb);border:0;cursor:pointer;
  transition:transform .15s var(--ease),filter .15s;
}
.ayo-sim button.pill:hover{filter:brightness(1.08)}
.ayo-sim button.pill:active{transform:scale(.96)}
.ayo-sim .pill--on{background:var(--dark);color:#fff}
.ayo-sim .pill--fila{background:transparent;color:var(--ink-on-brand);border:1.5px solid rgba(26,26,26,.34)}
.ayo-sim .pill--neutra{background:var(--card);color:var(--ink2);border:1px solid var(--line)}
.ayo-sim .pillrow{display:flex;flex-wrap:wrap;gap:7px}

/* faixa de rotas do rodapé da peça impressa */
.ayo-sim .faixa{
  height:46px;background:var(--brand);
  -webkit-mask-image:radial-gradient(circle at 12px 12px,transparent 5px,#000 6px);
  mask-image:radial-gradient(circle at 12px 12px,transparent 5px,#000 6px);
  -webkit-mask-size:34px 34px;mask-size:34px 34px;
}

/* ── Acessibilidade ───────────────────────────────────────────*/
.ayo-sim :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  .ayo-sim *,.ayo-sim *::before,.ayo-sim *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── Rodapé compacto, comum às três páginas (v1.6.0) ─────────
   Existiam três cópias com resultados diferentes. Agora é uma. */
.ayo-sim .foot{border-top:1px solid var(--line);padding:26px 0 30px;text-align:center}
.ayo-sim .foot__links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.ayo-sim .foot__links a{font-size:.82rem;color:var(--ink2);text-decoration:none}
.ayo-sim .foot__links a:hover{color:var(--ink3-on-brand);text-decoration:underline}
.ayo-sim .foot__fine{
  font-family:var(--fm);font-size:.64rem;color:var(--ink2);line-height:1.7;
  max-width:52ch;margin:0 auto 6px;
}

/* ── Cartão de contato direto ────────────────────────────────
   Anel dourado na foto, como no crachá do Iuri. Fundo branco e
   borda de 1px, a regra do folheto — o amarelo fica na pílula
   do WhatsApp, que é a ação. */
.ayo-sim .ceo{margin-top:22px}
.ayo-sim .ceo__link{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 16px;transition:border-color .18s,transform .18s var(--ease);
}
.ayo-sim .ceo__link:hover{border-color:var(--mark)}
.ayo-sim .ceo__link:active{transform:scale(.99)}

.ayo-sim .ceo__foto{
  width:64px;height:64px;flex:0 0 64px;border-radius:50%;object-fit:cover;
  border:3px solid var(--brand);background:var(--canvas);display:block;
}
.ayo-sim .ceo__foto--iniciais{
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);border-color:var(--brand);color:var(--ink-on-brand);
  font-family:var(--fd);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;
}

.ayo-sim .ceo__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ayo-sim .ceo__nome{
  font-family:var(--fd);font-weight:700;font-size:1.05rem;color:var(--ink);
  line-height:1.2;letter-spacing:-.015em;
}
.ayo-sim .ceo__cargo{
  font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3-on-brand);
}
.ayo-sim .ceo__zap{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  background:var(--brand);color:var(--ink-on-brand);
  border-radius:var(--r-pill);padding:9px 15px;
  font-family:var(--fb);font-size:.82rem;font-weight:600;line-height:1;white-space:nowrap;
}
.ayo-sim .ceo__link:hover .ceo__zap{background:var(--arte)}
@media (max-width:400px){
  .ayo-sim .ceo__link{flex-wrap:wrap}
  .ayo-sim .ceo__zap{width:100%;justify-content:center;padding-block:12px}
}

/* ── Tela de sucesso ─────────────────────────────────────────*/
.ayo-sim .recebido{padding:20px}
.ayo-sim .recebido__h{
  font-family:var(--fd);font-weight:700;font-size:clamp(1.3rem,5.4vw,1.7rem);
  line-height:1.15;letter-spacing:-.02em;color:var(--ink-on-brand);margin:4px 0 8px;
}
.ayo-sim .recebido__p{font-size:.92rem;color:var(--ink2-on-brand);line-height:1.5;margin:0}

.ayo-sim .linha{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ayo-sim .linha__i{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:13px 15px;
}
.ayo-sim .linha__n{
  flex:0 0 24px;height:24px;border-radius:50%;background:var(--brand);color:var(--ink-on-brand);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fm);font-size:.72rem;font-weight:700;
}
.ayo-sim .linha__t{font-size:.86rem;color:var(--ink2);line-height:1.5}
.ayo-sim .linha__t b{color:var(--ink);font-weight:600}

.ayo-sim .portas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ayo-sim .portas .pill{text-decoration:none}