/*
 * The design system, ported from _prototype/shared.css.
 * Evolve this file; do not replace it. The prototype stays the visual reference,
 * so a change here that is not also there makes the reference a lie.
 */

/* =============================================================================
   Indica Aí — design system.
   Directory of Brazilian professionals in the UK. Prototype, static frontend.

   Palette: see the token block below. Deep green + brass since 2026-09-15;
   the petrol-and-coral original is recorded there too. Stars #F5B301,
   WhatsApp green only on the WhatsApp button.

   Type: Bricolage Grotesque (600, --font-display) for headings, Inter for
   everything else. Two families, never three. Radius and shadow are SCALES,
   not single values - see the tokens. Cards: 1px border and no shadow at rest;
   whitespace does the separating and elevation is reserved for the one thing
   that floats (the search bar) and for hover. No gradients, no glows.
   Light theme only.
   ========================================================================== */

/* ------------------------------ tokens ----------------------------------

   BRAZIL, ON TRIAL (owner, 2026-09-15).

   The brief: the petrol-and-coral palette does not feel Brazilian on a domain
   called brasileiros.uk. The trap, named by the owner in the same breath: not
   looking like AI slop. Those two pull in opposite directions, because the
   obvious answer - #009C3B green next to #FFDF00 yellow - is the flag at full
   volume, which is what every cheap import shop and every generated mockup
   does. That is exactly why the scope originally said "no green-and-yellow
   branding".

   So the reference is not the flag, it is Brazilian modernism: the deep
   planted greens of a Burle Marx garden, a warm yellow rather than a
   highlighter, warm off-white instead of grey. Recognisable to a Brazilian,
   expensive-looking to everybody, and not a single saturated flag colour.

   Green carries the structure, yellow is the one accent, and the blue of the
   flag's globe marks a verified profile and appears nowhere else.

   Reverting is this block plus the logo in Icons.php. The variable names still
   say "petrol" and "coral" on purpose: renaming them across nineteen files
   during a trial would make the trial impossible to undo. If this is adopted,
   the rename is the first follow-up.
   ------------------------------------------------------------------------ */
:root{
  /* Deep planted green. Near-black at the ink end so headers read as weight,
     not as colour. */
  --petrol:#12513B; --petrol-deep:#0C3B2B; --petrol-ink:#07261C;
  --petrol-soft:#E4EFE8; --petrol-wash:#F2F7F4;
  /*
   * Yellow, not amber.
   *
   * The first attempt at "not flag yellow" went too far the other way: #C08A1E
   * sits at hue 35 degrees, which the eye reads as orange, and the owner said
   * so. A yellow lives around 45-50. #E8C11C is 47 degrees - unmistakably
   * yellow, a shade deeper and less acid than the flag's #FFDF00, which is the
   * whole difference between a warm yellow and a highlighter.
   *
   * The catch, and why there are three tokens: bright yellow cannot carry
   * white text. White on #E8C11C is 1.7:1, unreadable. So the yellow is a FILL
   * and what goes on it is near-black (--coral-ink, 11.9:1) - which is also
   * how the flag itself does it, dark on yellow. --coral-deep is the darkened
   * version for anything that has to be legible AS text on white, like the
   * focus ring: 5.1:1. It used to say "like the kicker" here, which stopped
   * being true on 2026-09-21: the kicker is --petrol now.
   */
  --coral:#E8C11C; --coral-deep:#8A6B08; --coral-ink:#241C00; --coral-soft:#FCF3D6;
  --gold:#C9A227; --gold-soft:#FBF3DF;
  /*
   * The Destaque edge (owner, 2026-10-02, who rejected the 3px yellow top
   * rule and the yellow pill): a 1px hairline that runs green into navy round
   * the whole card, painted as the border-box background under a white
   * padding-box. Green and blue, never yellow: the gold is kept for the ring
   * round the avatar and the small star, where it is geometry, not a field.
   */
  --destaque-edge:linear-gradient(135deg,var(--petrol) 0%,#1F5A5A 45%,var(--azul) 100%);
  /*
   * The blue of the flag's globe, given a real job rather than decoration:
   * it marks a verified profile. Trust is the one thing on this site worth a
   * third colour, and a navy badge beside a green page reads as a seal instead
   * of as another accent.
   */
  --azul:#1A3E6E; --azul-soft:#E7EDF5;
  --star:#F5B301;
  /* --wa is the brand green and stays for decoration (icons, soft fills).
     --wa-btn is the one the button uses: #1BA84F on white is 3.1:1, which
     fails AA for the 13-16px text the button actually carries, and this is
     the button the whole business model depends on being pressed. */
  --wa:#1BA84F; --wa-btn:#0E7A35; --wa-deep:#0B6129; --wa-soft:#E7F7EC;

  /* A light neutral grey, not the warm off-white (#FBFAF6) it replaced:
     the owner, 2026-09-25, "essa é meio um bege... não combinou com o
     site". Grey rather than pure white so the white cards still lift off
     the page; lines follow the same cool family. */
  --bg:#F5F6F8; --bg-2:#ECEEF1; --card:#FFFFFF; --line:#E2E5E9; --line-2:#CFD4DA;
  /* --faint was #8A887F: 3.4:1 on the page background, below AA for the
     12-13px captions it is used on. #6B6F76 is 4.8:1 on --bg. */
  --ink:#1A1A1A; --muted:#5B5B5B; --faint:#6B6F76;

  --ok:#1E7F4F; --warn:#B7791F; --bad:#C0392B;
  /* O --warn acima é para geometria (bordas, traços). Como PALAVRA ele dá
     3,2:1 sobre --bg-2, abaixo dos 4,5:1 de AA; este dá 5,2:1. */
  --warn-ink:#8C5A12;

  /*
   * Raio e sombra em escala, não em valor único (2026-09-17).
   *
   * Um raio de 12px e uma sombra iguais em tudo - cartão, botão, campo,
   * balão, avatar - foi o achado mais repetido da revisão visual: a
   * uniformidade é o que achata a página e a faz parecer montada por peça.
   * Os sistemas que servem de referência declaram quatro sombras e oito raios
   * justamente para que o olho perceba hierarquia sem ler nada.
   *
   * A regra de uso: raio menor no que é pequeno e interno (campo, selo),
   * maior no que contém (cartão, caixa, painel). Sombra 1 é quase nenhuma e é
   * o descanso; 2 é o hover; 3 é só para o que de fato flutua sobre a página,
   * e hoje isso é a barra de busca e nada mais.
   *
   * --radius, --radius-btn, --shadow e --shadow-soft continuam existindo como
   * apelidos para a escala, porque dezenove arquivos os leem.
   */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --radius:var(--r-lg); --radius-btn:var(--r-sm);
  --shadow-1:0 1px 2px rgba(7,38,28,.05);
  --shadow-2:0 8px 24px rgba(7,38,28,.09);
  --shadow-3:0 22px 56px rgba(7,38,28,.18);
  --shadow:var(--shadow-2); --shadow-soft:var(--shadow-1);
  --ease:cubic-bezier(.2,.8,.2,1);
  --container:1160px;
  /* A família de título num lugar só (2026-09-24): trocá-la é esta linha,
     mais o fonts.css e o preload no Assets.php. */
  --font-display:"Bricolage Grotesque",system-ui,"Segoe UI",sans-serif;
  --display-weight:600;
  color-scheme:light;
}

/* ------------------------------ base ------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--coral-deep);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ------------------------------ type ------------------------------------ */
/*
 * Títulos em serifa, o resto em Inter.
 *
 * É a decisão de maior alavancagem do redesign de 2026-09-17, e a mais
 * barata: um arquivo de fonte e esta regra. Peso 500 e não 700, porque uma
 * serifa editorial carrega presença pelo desenho, e o negrito nela vira
 * anúncio. Espaçamento levemente fechado em tamanho grande, como se faz em
 * revista; `text-wrap:balance` para o título não deixar uma palavra órfã na
 * última linha, que é a coisa que mais denuncia texto sem cuidado.
 *
 * TROCA DE 2026-09-24: o dono não gostou da serifa ("não gostei da fonte").
 * Entrou a Bricolage Grotesque 600, uma grotesca com desenho próprio, e não
 * uma segunda sem-serifa geométrica: o par Sora + Inter é o que a pesquisa
 * de 2026-09-17 apontou como cara de página gerada, e a regra que sobrevive
 * é o CONTRASTE entre as duas famílias, não a serifa. Ela não tem itálico,
 * então o <em> de um título fica romano (o navegador inventaria um itálico
 * torto) e continua sem cor diferente, que era o tique apontado na revisão.
 * O parágrafo acima sobre peso 500 descreve a Newsreader e fica como
 * histórico do porquê.
 */
h1,h2,h3,.font-display{font-family:var(--font-display);font-weight:var(--display-weight);
  color:var(--ink);letter-spacing:-.02em;text-wrap:balance}
h1 em,h2 em,h3 em,.font-display em{font-style:normal;font-weight:inherit}
.h-hero{font-size:clamp(38px,5.6vw,66px);line-height:1.02;margin:0;letter-spacing:-.022em}
.h-page{font-size:clamp(30px,4vw,46px);line-height:1.08;margin:0}
.h-sec{font-size:clamp(26px,3vw,36px);line-height:1.12;margin:0}
.lead{font-size:17px;line-height:1.6;color:var(--muted);max-width:58ch;text-wrap:pretty}
/*
 * O kicker deixou de ser CAIXA ALTA ESPAÇADA.
 *
 * Um rótulo em versalete com letter-spacing acima de cada seção é o padrão
 * número um das landing pages de software, e ele aparecia seis vezes na home.
 * A mesma função - anunciar de que trata a seção - em itálico serifado,
 * sentence case, na cor do texto secundário, é o que revista e jornal fazem.
 */
/*
 * 15px por padrão, 19px só quando ele abre uma seção.
 *
 * A primeira versão pôs 19px em todo kicker, e a revisão mediu o estrago fora
 * da home: em /reivindicar/ o rótulo "Perfil que você está reivindicando"
 * (19px) ficava MAIOR que o nome do profissional logo abaixo (16px), e no
 * painel ele superava o parágrafo que rotula. Um rótulo nunca pode pesar mais
 * que a coisa rotulada. Grande é o caso da home, onde ele precede um título de
 * 36px; pequeno é o caso de dentro de um cartão.
 */
.kicker{display:block;font-family:var(--font-display);font-style:normal;font-weight:var(--display-weight);
  font-size:15px;letter-spacing:0;text-transform:none;color:var(--petrol);margin-bottom:4px}
.sec-head .kicker,.page-head .kicker{font-size:19px;margin-bottom:6px}
.prose p{font-size:16.5px;line-height:1.7;margin:0 0 15px;max-width:68ch}
/* Editor-written pages (page.php: /privacidade/, /termos/). The reading
   column holds headings, lists and code to the paragraph's measure. */
.pg-section{padding:40px 0 64px}
.pg-body{max-width:68ch}
.pg-body h2{font-size:24px;margin:34px 0 12px;line-height:1.2}
.pg-body h3{font-size:18.5px;margin:26px 0 10px}
.pg-body h2:first-child{margin-top:0}
.pg-body ul,.pg-body ol{font-size:16.5px;line-height:1.7;margin:0 0 15px;padding-left:22px}
.pg-body li{margin-bottom:6px}
.pg-body code{font-size:14px;background:var(--bg-2);padding:1px 5px;border-radius:var(--r-xs)}
.pg-body a{color:var(--petrol);text-decoration:underline}
.crumbs span[aria-current]{color:var(--muted)}
.muted{color:var(--muted)}
small,.small{font-size:13.5px}

/* ------------------------------ layout ----------------------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0 22px}
/* Mais ar entre as seções. Página densa é para painel de dados; aqui o espaço
   em branco é o que separa cartão de cartão no lugar da sombra. O de baixo é
   um pouco maior que o de cima, de propósito: o olho pede. */
.section{padding:72px 0 80px}
.section-tight{padding:48px 0 56px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:30px}
.sec-head .more{font-size:14px;font-weight:600;color:var(--petrol);text-decoration:none;
  white-space:nowrap;border-bottom:2px solid var(--coral);padding-bottom:2px;position:relative}
/* A 44px target around a 26px line of text, without moving the underline. */
.sec-head .more::after{content:"";position:absolute;inset:-11px -8px}
.grid{display:grid;gap:18px}
@media (max-width:768px){ .section{padding:42px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:6px}
  /* "Ver corretor(a) de imóveis / mortgage em Newcastle upon Tyne" is one
   * line on a desktop and pushed the whole section past the phone's edge. */
  .sec-head>div{min-width:0;max-width:100%}
  .sec-head .more{white-space:normal;max-width:100%} }

/* ------------------------------ skip link -------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--coral);
  color:var(--coral-ink);font-weight:700;padding:12px 20px;border-radius:0 0 var(--r-md) 0;text-decoration:none}
.skip-link:focus{left:0}

/*
 * "Você está vendo o site como Fulano" (Theme\SwitchBack), only while an admin
 * is switched into another account with User Switching. Navy, not the header's
 * green: it has to read as "this is not what the member sees". In the flow,
 * never fixed, so it covers none of the phone's sticky bars.
 */
.switch-back{background:var(--azul);color:#fff;font-size:14px;line-height:1.4}
.switch-back-in{max-width:var(--container);margin:0 auto;padding:8px 16px;
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.switch-back a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;
  padding:4px 0;min-height:32px;display:inline-flex;align-items:center}
.switch-back a:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

/*
 * A isca dos formulários. Fora da tela, sem altura, sem largura: um robô que lê
 * o HTML a preenche, uma pessoa nunca a vê. À esquerda, como o link de pular
 * navegação logo acima, porque deslocamento negativo à direita criaria rolagem
 * horizontal no celular.
 *
 * Mora aqui desde 2026-09-21, e antes morava no cadastro.css. Mudou de casa
 * quando o formulário de evento passou a desenhá-la: aquela folha não é
 * carregada no painel, e uma isca sem CSS é um campo visível pedindo para a
 * pessoa deixar em branco.
 */
.su-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------ header ----------------------------------- */
/*
 * Green header, yellow buttons (owner, 2026-09-25: "o header ... tá branco. Eu
 * quero deixar verde do Brasil igual o footer ... E os CTAs pro amarelo").
 *
 * The background is the footer's own token, --petrol-ink, so the page is
 * framed top and bottom by one green and not two near-misses. Everything on it
 * is white or off-white (15:1 and ~11:1). Yellow appears in exactly two
 * places: the header's buttons (dark --petrol-ink text on --coral, 9.3:1) and
 * a 2px rule under the current page. That is the explicit override of "never a
 * yellow block touching green" recorded in docs/decisoes.md; nowhere else.
 *
 * The bottom hairline is white at low alpha, not --line: it separates the
 * header from a dark hero or photo band, where a beige line would read as a
 * seam and no line at all would merge the two greens.
 */
.site-header{position:sticky;top:0;z-index:200;background:var(--petrol-ink);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1)}
.site-header :focus-visible{outline-color:var(--coral)}
.sh-in{max-width:var(--container);margin:0 auto;padding:0 22px;height:66px;
  display:flex;align-items:center;gap:24px}
.sh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.sh-brand svg{width:30px;height:30px}
/* The logo's tile is --petrol on a --petrol-ink header (1.7:1): a faint white
   edge keeps it a tile instead of a floating diamond. Same in the footer. */
.sh-brand svg rect,.sf-brand svg rect{stroke:rgba(255,255,255,.2);stroke-width:1}
/* A marca na família de display: é a única palavra do site que aparece em todas as
   páginas, e é onde a família de display mais trabalha por menos bytes. */
.sh-brand b{font-family:var(--font-display);font-weight:var(--display-weight);font-size:22px;
  letter-spacing:-.01em;color:#fff;line-height:1}
/* On the dark green the bright yellow is legible as text (9.3:1), the same
   ".uk" the footer wordmark has. */
.sh-brand b em{font-style:normal;color:var(--coral)}
/*
 * The menu (owner, 2026-09-25): "Início" plus four groups. A group is a
 * <details> in the HTML (the no-JS menu) that app.js turns into a <button>
 * with aria-expanded and a panel with `hidden`; every rule below is written
 * for both shapes, which is why it reads `.sh-dd[open]` next to
 * `[aria-expanded="true"]`.
 */
.sh-nav{display:flex;align-items:center;gap:2px;margin-left:4px}
.sh-link,.sh-dd-btn{position:relative;display:inline-flex;align-items:center;gap:5px;
  color:rgba(255,255,255,.84);text-decoration:none;font-size:14.5px;font-weight:600;line-height:1.6;
  padding:9px 13px;border-radius:var(--r-sm);border:0;background:transparent;white-space:nowrap;
  transition:background .15s,color .15s}
summary.sh-dd-btn{list-style:none;cursor:pointer}
summary.sh-dd-btn::-webkit-details-marker{display:none}
.sh-link:hover,.sh-dd-btn:hover,.sh-dd[open]>.sh-dd-btn,.sh-dd-btn[aria-expanded="true"]{background:rgba(255,255,255,.08);color:#fff}
.sh-dd-chev{width:15px;height:15px;flex:none;opacity:.75;transition:transform .15s var(--ease)}
.sh-dd[open] .sh-dd-chev,.sh-dd-btn[aria-expanded="true"] .sh-dd-chev{transform:rotate(180deg)}
/* The current page, or the group holding it: full white plus a thin yellow
   rule, never a filled chip. */
.sh-link.on,.sh-dd.on>.sh-dd-btn{color:#fff}
.sh-link.on::after,.sh-dd.on>.sh-dd-btn::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  border-radius:var(--r-xs);background:var(--coral)}
/* The desktop panel is a light card under the green bar, from the design
   system's scales: the green stays the bar's, the yellow stays a rule. */
.sh-nav .sh-dd{position:relative}
.sh-nav .sh-dd-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:10;min-width:236px;
  display:flex;flex-direction:column;gap:1px;padding:6px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.sh-nav .sh-dd-panel[hidden]{display:none}
.sh-nav .sh-dd-panel a{color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:9px 12px;border-radius:var(--r-sm);white-space:nowrap}
.sh-nav .sh-dd-panel a:hover{background:var(--petrol-wash);color:var(--petrol-deep)}
.sh-nav .sh-dd-panel a.on{color:var(--petrol);font-weight:600;background:var(--petrol-wash);
  box-shadow:inset 3px 0 0 var(--petrol)}
/* The header's yellow focus ring is 1.7:1 on this white card. */
.site-header .sh-dd-panel :focus-visible{outline-color:var(--coral-deep)}
/* "Início" is the logo's job on a narrow desktop; the drawer keeps it. */
@media (max-width:1080px){ .sh-nav .sh-link[data-key="inicio"]{display:none} }
/* 921-1000px: measured 52px too wide with the default spacing. */
@media (min-width:921px) and (max-width:1000px){
  .sh-in{gap:14px} .sh-nav .sh-dd-btn{padding:9px 8px}
}
.sh-side{margin-left:auto;display:flex;align-items:center;gap:10px}
.sh-login{text-decoration:none;font-size:14px;font-weight:600;color:rgba(255,255,255,.84);
  padding:9px 10px;border-radius:var(--r-sm);white-space:nowrap}
.sh-login:hover{color:#fff;background:rgba(255,255,255,.08)}
.sh-cta,.sh-mobile a.sh-m-cta{background:var(--coral);color:var(--petrol-ink);text-decoration:none;font-weight:600;
  font-size:14px;padding:11px 17px;border-radius:var(--radius-btn);white-space:nowrap;
  transition:background .15s,transform .15s var(--ease)}
.sh-cta:hover,.sh-mobile a.sh-m-cta:hover{background:#F2CF3A}
.sh-cta:active{transform:translateY(1px)}
/* A yellow ring on a yellow button would vanish into it. */
.site-header .sh-cta:focus-visible,.site-header .sh-m-cta:focus-visible{outline-color:#fff}
.sh-burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.24);border-radius:var(--r-sm);
  background:transparent;color:#fff;place-items:center}
.sh-burger:hover{background:rgba(255,255,255,.08)}
.sh-burger svg{width:20px;height:20px}
.sh-mobile{display:none}
@media (max-width:920px){
  .sh-nav,.sh-login{display:none}
  .sh-burger{display:grid}
  /* The drawer continues the header rather than dropping a white sheet under
     it: same green, same white links, the yellow rule on the current page. */
  .sh-mobile{display:none;position:absolute;top:100%;left:0;right:0;background:var(--petrol-ink);
    border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 36px rgba(0,0,0,.28);
    padding:8px 22px 18px;flex-direction:column;gap:2px;
    /* Taller than the screen (a group open on a short phone) must scroll
       inside the drawer: the header is sticky, so the page cannot reach it. */
    max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain}
  .sh-mobile.open{display:flex}
  /* Groups become accordion rows: full width, chevron on the right, one open
     at a time (app.js). 48px tall, above the 44px target. */
  .sh-mobile .sh-link,.sh-mobile .sh-dd-btn{display:flex;width:100%;justify-content:space-between;
    font-size:15px;padding:12px 10px;min-height:48px;color:rgba(255,255,255,.86);text-align:left}
  .sh-mobile .sh-link.on::after,.sh-mobile .sh-dd.on>.sh-dd-btn::after{display:none}
  .sh-mobile .sh-dd.on>.sh-dd-btn{box-shadow:inset 3px 0 0 var(--coral)}
  .sh-mobile .sh-dd-panel{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px 10px;
    padding-left:10px;border-left:1px solid rgba(255,255,255,.16)}
  .sh-mobile .sh-dd-panel[hidden]{display:none}
  .sh-mobile .sh-dd-panel a{font-weight:500;padding:12px 10px;color:rgba(255,255,255,.8)}
  .sh-mobile a{color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:15px;
    padding:13px 10px;border-radius:var(--r-sm)}
  .sh-mobile a.on{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 3px 0 0 var(--coral)}
  .sh-mobile a:hover{background:rgba(255,255,255,.08);color:#fff}
  .sh-mobile a.sh-m-cta{margin-top:8px;padding:14px 17px;font-size:15px;text-align:center}
  .sh-mobile a.sh-m-cta:hover{background:#F2CF3A;color:var(--petrol-ink)}
}
@media (max-width:560px){ .sh-cta{display:none} .sh-in{gap:14px} }

/* ------------------------------ footer ----------------------------------- */
.site-footer{background:var(--petrol-ink);color:#fff;margin-top:70px}
.sf-in{max-width:var(--container);margin:0 auto;padding:52px 22px 30px;
  display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:24px}
@media (max-width:1100px){ .sf-in{grid-template-columns:1fr 1fr 1fr} }
.sf-brand svg{width:32px;height:32px}
.sf-brand .wm{font-family:var(--font-display);font-weight:var(--display-weight);font-size:20px;margin:10px 0 8px}
.sf-brand .wm em{font-style:normal;color:var(--coral)}
.sf-brand p{font-size:13.5px;line-height:1.6;opacity:.75;margin:0;max-width:32ch}
.sf-nl{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px}
.sf-nl svg{width:16px;height:16px;flex:none}
.sf-col b{display:block;font-size:14px;font-weight:600;letter-spacing:0;
  text-transform:none;color:#8FC9AC;margin-bottom:12px}
.sf-col a{display:block;color:#fff;opacity:.82;text-decoration:none;font-size:14px;padding:5px 0}
.sf-col a:hover{opacity:1}
/* On a touchscreen the footer's 18 links get the 44px a thumb needs; with a
   mouse the list stays compact. */
@media (pointer:coarse){ .sf-col a{padding:11px 0} }
.sf-base{border-top:1px solid rgba(255,255,255,.14);max-width:var(--container);margin:0 auto;
  padding:16px 22px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:12.5px;opacity:.65}
@media (max-width:820px){ .sf-in{grid-template-columns:1fr 1fr;gap:26px} }
/* On a phone: the brand across, the link columns two by two. One column of
   thirty 44px links was a scroll longer than most pages above it. */
@media (max-width:480px){ .sf-in{grid-template-columns:1fr 1fr;gap:28px 18px;padding-top:40px}
  .sf-brand{grid-column:1/-1} .sf-col a{font-size:13.5px} }
.sf-ck{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (pointer:coarse){ .sf-ck{padding:11px 0;margin:-11px 0} }

/* Cookie consent banner (2026-10-02; GoogleAnalytics, consent.js). Fixed, so
   showing it moves nothing on the page (no layout shift). At the TOP, under
   the sticky header, because the bottom is where the calls to action live: at
   390px the home's search button sits in the last 150px of the first screen,
   and the profile's WhatsApp bar is fixed to the bottom edge. Under the header
   in z-order (190 < 200), so the menu drawer opens over it. consent.js keeps
   --cns-top equal to the header's height. Small text on purpose: it must
   never be the page's Largest Contentful Paint. Both answers share one class:
   equal weight is the law, not taste. */
.cns{position:fixed;left:0;right:0;top:var(--cns-top,67px);z-index:190;
  background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px rgba(18,81,59,.16);
  padding:12px 16px}
.cns[hidden]{display:none}
.cns-in{max-width:var(--container);margin:0 auto;display:grid;gap:6px}
.cns-title{font-size:15px;line-height:1.3;margin:0}
.cns-title:focus{outline:none}
.cns-title:focus-visible{outline:3px solid var(--coral-deep);outline-offset:2px}
.cns-text{font-size:13.5px;line-height:1.45;margin:0;color:var(--muted)}
.cns-text a{color:var(--petrol);font-weight:600;text-underline-offset:3px}
@media (pointer:coarse){ .cns-text a{display:inline-block;padding:8px 0;margin:-8px 0} }
.cns-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.cns-btn{background:var(--petrol);color:#fff;padding:10px 16px}
.cns-btn:hover{background:var(--petrol-deep)}
@media (min-width:760px){
  .cns{padding:14px 22px}
  .cns-in{grid-template-columns:1fr auto;column-gap:28px;align-items:center}
  .cns-actions{grid-column:2;grid-row:1/3;margin-top:0;grid-template-columns:repeat(2,minmax(130px,auto))}
}

/* "É profissional?" at the top of the footer, on every page (owner,
   2026-09-25; ProBand + template-parts/pro-band.php). Mobile first: a
   vertical timeline, icon on the line and one sentence beside it; from 900px
   one row of five with a hairline through the icons. One shade lighter than
   the footer so it reads as its own panel. The button is white on the green:
   the yellow CTA is the header's exception only (CLAUDE.md), and a green
   button on a green band would vanish. Yellow here is geometry: the 3px rule
   of the label and the step numbers. */
.pb{background:var(--petrol-deep);border-bottom:1px solid rgba(255,255,255,.08)}
.pb-in{max-width:var(--container);margin:0 auto;padding:44px 22px 40px}
.pb-kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#8FC9AC}
.pb-kicker::before{content:"";width:22px;height:3px;border-radius:var(--r-xs);background:var(--coral)}
.pb-h{font-size:clamp(26px,4.2vw,38px);line-height:1.1;margin:10px 0;color:#fff;max-width:20ch;text-wrap:balance}
.pb-lead{margin:0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.78);max-width:52ch}
.pb-steps{list-style:none;margin:28px 0 0;padding:0;display:grid}
.pb-step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;padding-bottom:20px}
.pb-step:last-child{padding-bottom:0}
.pb-step::before{content:"";position:absolute;left:21.5px;top:48px;bottom:4px;width:1px;background:rgba(255,255,255,.2)}
.pb-step:last-child::before{display:none}
.pb-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);background:var(--petrol-ink);color:#fff}
.pb-ico svg{width:19px;height:19px}
/* The last step is the point of the other four: the client calling. */
.pb-step:last-child .pb-ico{background:#fff;border-color:#fff;color:var(--petrol-ink)}
.pb-txt{display:flex;flex-direction:column;gap:2px;padding-top:1px;min-width:0}
.pb-n{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--coral);font-variant-numeric:tabular-nums}
.pb-txt b{font-size:16px;font-weight:600;color:#fff;line-height:1.3}
.pb-txt > span:not(.pb-n){font-size:14px;line-height:1.45;color:rgba(255,255,255,.72)}
.pb-foot{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:22px}
.pb-perks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pb-perks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.88)}
.pb-perks svg{width:18px;height:18px;color:#8FC9AC;flex:none;margin-top:1px}
.pb-actions{display:flex;flex-direction:column;gap:6px}
.pb-cta{width:100%;background:#fff;color:var(--petrol-ink)}
.pb-cta:hover{background:var(--petrol-soft);color:var(--petrol-ink)}
.pb-cta:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.pb-plan{align-self:center;padding:11px 4px;color:#fff;font-size:14.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.pb-plan:hover{text-decoration-color:#fff}
@media (min-width:900px){
  .pb-in{padding:64px 22px 56px}
  .pb-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-top:40px}
  .pb-step{grid-template-columns:1fr;gap:14px;padding:0}
  .pb-step::before{left:54px;right:-12px;top:22px;bottom:auto;width:auto;height:1px}
  .pb-step:last-child::before{display:none}
  .pb-foot{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;margin-top:40px}
  .pb-perks{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .pb-actions{flex-direction:row;align-items:center;gap:18px}
  .pb-cta{width:auto}
}

/* ------------------------------ buttons ---------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 20px;border-radius:var(--radius-btn);
  font-weight:600;font-size:15px;text-decoration:none;border:none;
  transition:background .15s,box-shadow .15s,transform .15s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--petrol);color:#fff}
.btn-primary:hover{background:var(--petrol-deep)}
.btn-outline{background:transparent;color:var(--petrol);border:1.5px solid var(--line-2)}
.btn-outline:hover{border-color:var(--petrol);background:var(--petrol-wash)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--bg-2);color:var(--ink)}
.btn-wa{background:var(--wa-btn);color:#fff}
.btn-wa:hover{background:var(--wa-deep)}
.btn-lg{min-height:52px;padding:14px 26px;font-size:16px}
.btn-sm{min-height:38px;padding:8px 14px;font-size:13.5px}
.btn-block{width:100%}
.btn-icon{min-width:44px;padding:11px}

/* ------------------------------ chips & badges ---------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);font-size:13.5px;font-weight:500;
  color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.chip svg{width:14px;height:14px;color:var(--petrol)}
a.chip:hover,button.chip:hover{border-color:var(--petrol);background:var(--petrol-wash)}
.chip.on{background:var(--petrol);border-color:var(--petrol);color:#fff}
.chip.on svg{color:#fff}

/* Um rótulo de canto reto, não uma pílula. A pílula é o formato de "Novo" e
   "Beta" de todo produto de software; um selo de verificação num diretório
   pede o registro de carimbo. */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--r-xs);
  font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;letter-spacing:.01em}
.badge svg{width:13px;height:13px}
/* The one blue on the site: a verified profile. See the token block. */
.badge-verified{background:var(--azul-soft);color:var(--azul)}
/* Destaque is a word set in small capitals with a fine gold star, not a pill
   (owner, 2026-10-02: "nem a tagzinha ali, destaque, amarelinha"). No fill and
   no border, so it never competes with the one filled seal beside it,
   "Verificado": one says the team checked who this is, the other that the
   listing is paid, and only trust gets a coloured block. The word is read
   aloud, so the status is never carried by colour alone. Deep green on white:
   12.9:1. */
.badge-featured{background:none;border:0;padding:3px 0;gap:5px;color:var(--petrol-deep);
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.badge-featured svg{width:12px;height:12px;color:var(--gold);flex:none}
.badge-online{background:var(--wa-soft);color:var(--ok)}
.badge-neutral{background:var(--bg-2);color:var(--muted)}

/* mode chips on cards/profile (online / presencial / vai até você) */
.mode{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;
  color:var(--muted)}
.mode svg{width:13.5px;height:13.5px;color:var(--petrol)}

/* ------------------------------ avatar ------------------------------------ */
/* Quadrado de canto arredondado, não círculo. O círculo com iniciais é o
   avatar de todo aplicativo; o retrato quadrado é o de diretório e de
   revista, e é o formato em que uma foto de verdade, quando vier, fica melhor. */
.avatar{border-radius:var(--r-md);overflow:hidden;flex:none;display:grid;place-items:center;
  font-family:"Inter",system-ui,sans-serif;font-weight:600;color:#fff;user-select:none;
  background:var(--petrol);text-transform:uppercase}
.avatar img{width:100%;height:100%;object-fit:cover}
.av-sm{width:40px;height:40px;font-size:15px}
.av-md{width:56px;height:56px;font-size:20px}
.av-lg{width:76px;height:76px;font-size:27px}
.av-xl{width:112px;height:112px;font-size:40px;border:4px solid #fff;box-shadow:var(--shadow-soft)}

/* ------------------------------ stars ------------------------------------- */
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--star)}
.stars svg{width:16px;height:16px}
.stars .off{color:var(--line-2)}
.rate{display:inline-flex;align-items:center;gap:7px;font-size:14px}
.rate b{font-weight:700}
.rate .count{color:var(--muted);font-size:13.5px;white-space:nowrap}
/* Um perfil sem nenhuma avaliação, que é como TODO profissional de verdade
   comeca. Ficou sem regra ate agora porque os vinte perfis semeados tem nota,
   entao o caminho so aparecia para quem ainda nao tem - ou seja, para o
   primeiro cliente real. Sem isto, "Ainda sem avaliacoes" saia com o peso e a
   cor de uma nota de verdade, competindo com ela na mesma lista. */
.rate-none{color:var(--muted);font-size:13.5px;font-style:italic}

/* ------------------------------ pro card (result list) -------------------- */
/* Two columns: everything about the person, then the buttons. The avatar is
   NOT a column of its own any more - it used to run the full height of the
   card, which put a tall strip of nothing under a 76px picture and indented
   every line of the description past it. Now it lives on the first row with
   the name, and the description starts at the card's left edge. */
/* Sem sombra em repouso: borda de um pixel e espaço em branco. A sombra
   aparece no hover, que é quando ela informa alguma coisa. */
.pro-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:none;padding:20px;display:grid;
  grid-template-columns:1fr auto;gap:14px 16px;align-items:start;
  transition:box-shadow .2s,border-color .2s,transform .2s var(--ease)}
.pro-card:hover{box-shadow:var(--shadow-2);border-color:var(--line-2);transform:translateY(-2px)}
/* Destaque (owner, 2026-10-02, who rejected the yellow top rule and the yellow
   pill): three quiet marks that read as "premium" together and as nothing
   loud on their own -
   1. the edge: a 1px green-to-navy hairline round the card (--destaque-edge)
      and the first step of the shadow scale at rest, so it sits a little
      above the free cards without a coloured field;
   2. a gold ring round the avatar, kept off the picture by 2px of white so
      yellow never touches a green avatar;
   3. "DESTAQUE" in small capitals with a gold star, as an eyebrow over the
      name (order:-1; the DOM keeps it after the name, so the heading still
      reads name first).
   A free card keeps the grey border and stays exactly as it was: Destaque is
   added polish and order, never a penalty on the free listing. */
.pro-card.is-featured{border-color:transparent;box-shadow:var(--shadow-1);
  background:linear-gradient(var(--card),var(--card)) padding-box,var(--destaque-edge) border-box}
.pro-card.is-featured:hover{border-color:transparent;box-shadow:var(--shadow-2)}
.pro-card.is-featured .pc-head .avatar{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--gold)}
.pro-card.is-featured .pc-name .badge-featured{order:-1;flex-basis:100%;padding:0;margin-bottom:-3px}

/* Picture and name, side by side, centred on each other so a two-line name
   does not leave the avatar floating at the top. */
.pc-head{display:flex;align-items:center;gap:14px;min-width:0;grid-column:1;grid-row:1}
.pc-head .avatar{flex:none}

/* The description and everything under it: full width of the content column,
   starting flush left. */
.pc-body{min-width:0;grid-column:1;grid-row:2}

/* The buttons span BOTH rows of the content column.
   Placed explicitly, because auto-placement put them in row 1 alone - and a
   row is as tall as its tallest item, so two stacked buttons stretched the
   name's row and left a gap of up to 105px between the name and the
   description. Spanning means the rows are sized by the text, as they should
   be, and the buttons sit at the top of the column beside it. */
.pc-actions{grid-column:2;grid-row:1 / -1}
.pc-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;min-width:0}
.pc-name a{font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:17.5px;color:var(--ink);
  text-decoration:none}
.pc-name a:hover{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
/* The whole card is the tap target (2026-10-01), not the 28px of the name.
   Stretched link: the name's ::after covers the card, so a tap anywhere on it
   opens the profile, while the card stays ONE link for a screen reader (an <a>
   around the card would nest links and read the whole card as its name).
   The buttons sit above the layer and keep their own links. The focus ring is
   drawn on the layer, so it outlines the card, not the text. */
.pro-card{position:relative;cursor:pointer}
.pc-name a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.pc-name a:focus-visible{outline:none}
.pc-name a:focus-visible::after{outline:3px solid var(--coral-deep);outline-offset:2px;border-radius:var(--radius)}
.pro-card:focus-within{border-color:var(--petrol)}
.pc-actions a,.pc-actions .badge{position:relative;z-index:1}
/* The heart (2026-10-01). On the card it sits at the end of the head row and
   ABOVE the stretched link, like the buttons (the A60 trap). 44x44 to touch,
   the icon 22. Saved = filled in --petrol: never the WhatsApp green, which
   means "talk on WhatsApp" and nothing else. Without the script it is a plain
   link to /favoritos/, so the pressed look only exists once JS set it. */
.fav-btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:44px;height:44px;margin:-6px -8px -6px auto;border-radius:999px;
  color:var(--muted);text-decoration:none;transition:color .15s,background-color .15s}
.fav-btn svg{width:22px;height:22px;flex:none}
.fav-btn:hover{color:var(--petrol);background:var(--bg-2)}
.fav-btn:focus-visible{outline:3px solid var(--coral-deep);outline-offset:1px}
.fav-btn[aria-pressed="true"]{color:var(--petrol)}
.fav-btn[aria-pressed="true"] svg{fill:currentColor}
.fav-btn.is-busy{opacity:.6}
/* On the profile it is a row of .side-links, with its word. */
.fav-btn.fav-btn-text{width:auto;height:auto;margin:0;border-radius:0;justify-content:flex-start}
.fav-btn.fav-btn-text:hover{background:none}
.fav-btn.fav-btn-text svg{width:16px;height:16px}
/* /favoritos/ and the panel's list. */
.fav-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.fav-item{display:grid;gap:4px}
.fav-remove{display:flex;justify-content:flex-end}
.fav-remove .btn svg{width:16px;height:16px}
.fav-off{display:flex;flex-direction:column;gap:4px;padding:18px 20px;color:var(--muted)}
.fav-off b{color:var(--ink);font-weight:600}
.fav-count{margin:22px 0 12px;color:var(--muted);font-size:14px}
.fav-call-ico{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;
  border-radius:999px;background:var(--petrol-wash);color:var(--petrol);margin-bottom:10px}
.fav-call-ico svg{width:22px;height:22px}
.fav-call .cl-actions{display:flex;flex-wrap:wrap;gap:10px}
.fav-ask .cl-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.fav-empty{margin-top:18px}
.fav-more{margin:14px 0 0}
/* /meus-prazos/ (2026-10-02): one row per deadline, date | name | button,
   designed at 390px first. The button is a one-button POST form. */
.mp-act{margin:0}
.mp-row{display:flex;flex-wrap:wrap;gap:10px}
.mp-row .btn + .btn{margin:0}
.mp-list{list-style:none;margin:12px 0 0;padding:0}
.mp-item{display:grid;grid-template-columns:52px 1fr;gap:4px 12px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line)}
.mp-item:first-child{border-top:0}
.mp-item .mp-act{grid-column:2;justify-self:start}
.mp-date{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:52px;border-radius:var(--r-sm);background:var(--petrol-wash);color:var(--petrol-deep);
  font-weight:600;font-size:15px;line-height:1.1;grid-row:span 2}
.mp-date small{font-weight:400;font-size:11.5px;color:var(--muted)}
.mp-body b{display:block;font-weight:600;color:var(--ink);font-size:15px;line-height:1.35}
.mp-when{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.mp-note{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.mp-off{margin:18px 0 0;display:flex;justify-content:flex-end}
@media (min-width:560px){
  .mp-item{grid-template-columns:56px 1fr auto}
  .mp-date{grid-row:auto}
  .mp-item .mp-act{grid-column:auto;justify-self:end}
}
.pc-headline{margin:0 0 7px;font-size:14.5px;color:var(--muted);line-height:1.5}
.pc-meta{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;font-size:13px;
  color:var(--muted);margin-bottom:9px}
.pc-meta svg{width:14px;height:14px;flex:none;vertical-align:-2.5px}
.pc-meta .cat{font-weight:600;color:var(--petrol)}
.pc-meta .pc-lang{color:var(--muted)}
.pc-services{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pc-services .sv{font-size:12.5px;background:var(--bg-2);border-radius:999px;padding:4px 11px;
  color:var(--ink)}
.pc-services .sv b{font-weight:600;color:var(--petrol-deep)}
.pc-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:128px}
@media (max-width:640px){
  /* One column: the buttons drop under the content instead of squeezing it. */
  .pro-card{grid-template-columns:1fr}
  .pc-actions{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;min-width:0}
  .pc-actions .btn{flex:1}
  /* The chips ("Exemplo", "Perfil não reivindicado") may shrink and wrap
     instead of pushing past the card's right edge (390px, narrow carousel card). */
  .pc-actions .badge{min-width:0;max-width:100%;white-space:normal;text-align:center}
  /* A smaller picture here: at 76px it took a fifth of the card's width on a
     phone, and the name beside it wrapped to three lines. */
  .pc-head .avatar{width:56px;height:56px;font-size:20px}
  .pc-head{gap:11px}
}

/* ------------------------------ category card ----------------------------- */
.cat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;text-decoration:none;display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.cat-card:hover{border-color:var(--petrol);box-shadow:var(--shadow-2);transform:translateY(-2px)}
/* O ícone sozinho, a traço, na cor de tinta. O quadradinho verde-claro atrás
   de cada ícone era o mesmo em doze cartões e é mobília de template; o traço
   monocromático é o que o Sesc faz com ícone de serviço, e cabe aqui. */
.cat-card .ic{width:auto;height:auto;border-radius:0;display:block;background:none;color:var(--petrol)}
.cat-card .ic svg{width:26px;height:26px;stroke-width:1.75}
.cat-card b{font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:15.5px;color:var(--ink)}
/* Two lines whether the name needs them or not, so one long profession does
   not make its whole row taller than the rest of the grid. */
.cat-card b{min-height:2lh}
.cat-card small{color:var(--faint);font-size:12.5px;margin-top:-8px}

/* ------------------------------ search bar -------------------------------- */
/* A única coisa que flutua de verdade sobre a página, e por isso a única com a
   sombra grande. Tudo o mais se separa por borda e por espaço. */
.searchbar{display:flex;gap:0;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:6px;align-items:stretch}
.searchbar .field{flex:1;display:flex;align-items:center;gap:9px;padding:8px 14px;min-width:0;
  position:relative}
.searchbar .field+.field{border-left:1px solid var(--line)}
.searchbar .field>svg{width:18px;height:18px;color:var(--faint);flex:none}
.searchbar .field label{position:absolute;left:-9999px}
.searchbar input{border:none;outline:none;background:none;width:100%;font-size:15.5px;
  min-height:38px}
.searchbar input::placeholder{color:var(--faint)}
.searchbar .btn{border-radius:var(--r-sm)}
/* The browser draws the datalist itself, as a dropdown attached to the input.
   Without this the 29 profession options render as visible list items and the
   bar grows to 800px on a phone, which is the whole screen. */
.searchbar datalist{display:none}
.searchbar select{border:none;outline:none;background:none;width:100%;
  font-size:15.5px;min-height:38px;color:var(--ink);appearance:none;cursor:pointer}
/* ---- the two search fields, as one control ----

   Both boxes used to be different species in the same white pill: a text input
   whose datalist the operating system drew in its own font, and a native
   select with a system chevron. Neither matched the other, and only one of
   them let you type. combobox.js turns both into this, and the markup it
   replaces still works with the script blocked. */
.cbx{flex:1;min-width:0;position:relative;display:flex;align-items:center;gap:6px}
.cbx-input{border:none;outline:none;background:none;width:100%;font-size:15.5px;
  min-height:38px;color:var(--ink)}
.cbx-input::placeholder{color:var(--faint)}
.cbx-toggle{flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;
  border:none;background:none;color:var(--faint);cursor:pointer;border-radius:var(--r-sm)}
.cbx-toggle:hover{color:var(--petrol);background:var(--petrol-soft)}
.cbx-toggle svg{width:16px;height:16px}
/* 26px drawn, 44px to the thumb: the hit area grows, the chevron does not.
   It was the smallest target on the home page, in its main control. */
.cbx-toggle{position:relative}
.cbx-toggle::after{content:"";position:absolute;inset:-9px}
/* The chevron turns over while the list is open, so the control says which
   state it is in without a word. */
.cbx-input[aria-expanded="true"]~.cbx-toggle svg{transform:rotate(180deg)}

.cbx-list{
  position:absolute;z-index:40;top:calc(100% + 10px);left:-14px;right:-14px;
  margin:0;padding:6px;list-style:none;
  max-height:min(340px,52vh);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-3)}
.cbx-option{
  /* 40px, with the padding: comfortably past the 44px target once the line
     box is counted, and short enough that eight options fit without scrolling. */
  padding:10px 12px;border-radius:var(--r-sm);font-size:15px;line-height:1.35;
  color:var(--ink);cursor:pointer}
.cbx-option:hover,
.cbx-option.is-active{background:var(--petrol-soft);color:var(--petrol-deep)}
.cbx-empty{padding:10px 12px;font-size:14px;color:var(--muted);line-height:1.45}

/* Os dois grupos, quando há profissionais além das profissões (2026-09-24).
   O rótulo do grupo é legenda, não opção: menor, apagado, sem hover. */
.cbx-group{list-style:none}
.cbx-group+.cbx-group{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.cbx-group>ul{margin:0;padding:0;list-style:none}
.cbx-group-label{display:block;padding:8px 12px 4px;font-size:12px;font-weight:600;
  color:var(--muted);letter-spacing:.02em}
/* A linha de uma pessoa: o nome, o selo de exemplo quando é inventada, e
   profissão · cidade embaixo, que é o que separa duas Anas. */
.cbx-person{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.cbx-name{font-weight:600}
.cbx-sub{flex-basis:100%;font-size:13px;color:var(--muted)}
.cbx-person.is-active .cbx-sub,.cbx-person:hover .cbx-sub{color:var(--petrol)}
.cbx-tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--r-xs);
  background:var(--bg-2);color:var(--muted);border:1px dashed var(--line-2)}
/* Read aloud, never drawn: how many options survived what was typed. */
/* (.cbx-status shares the .vh block under "misc".) */

@media (max-width:640px){
  .searchbar{flex-direction:column;gap:6px;padding:8px}
  .searchbar .field{border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 12px}
  .searchbar .field+.field{border-left:1px solid var(--line)}
  /* Flush with the field, which now has its own border to line up against. */
  .cbx-list{left:-12px;right:-12px}
}

/* autocomplete suggestions */
.sugg{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;z-index:50;
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;
  max-height:290px;overflow-y:auto;text-align:left}
.sugg button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;
  border:none;background:none;font-size:14.5px;text-align:left}
.sugg button:hover,.sugg button.sel{background:var(--petrol-wash)}
.sugg button svg{width:15px;height:15px;color:var(--faint);flex:none}
.sugg button small{margin-left:auto;color:var(--faint)}
.sugg .gh{padding:9px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}

/* ------------------------------ forms ------------------------------------- */
.input,select.input,textarea.input{width:100%;padding:11px 14px;min-height:44px;
  border:1.5px solid var(--line);border-radius:var(--radius-btn);background:#fff;font-size:15px}
.input:focus{outline:none;border-color:var(--petrol)}
label.lbl{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.check{display:flex;align-items:center;gap:9px;font-size:14px;padding:7px 0;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--petrol);margin:0}

/* ------------------------------ misc -------------------------------------- */

/* Read by a screen reader, never drawn: the word that follows a number inside
   a badge, so a link is announced as "Barbeiro(a) 1 profissional" instead of
   "Barbeiro(a) 1".

   Here and not in a page sheet. It started in profissoes.css, and the moment a
   second template used it the class was in the HTML of a page whose stylesheet
   did not define it - which means the text would simply have been drawn on
   screen, in the middle of a badge. A utility used by more than one page is a
   design-system rule. */
.vh,.cbx-status,.bcb-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.divider{border:none;border-top:1px solid var(--line);margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft)}

/* A single column of cards, and a card with room to breathe inside it.
   .card above is the shell only, deliberately unpadded, because the profile
   page needs it flush against media.

   These two lived in painel.css until the claim form was caught rendering
   without them: that sheet is enqueued only on the dashboard, so /reivindicar/
   asked for .pn-solo and .pn-block, got nothing, and the most important form on
   the site had its text against the card border and no column width. Three
   pages use them now, so they belong here where every page can see them. */
/* Centred, not left-aligned. On a wide screen a 720px column pinned to the
   left leaves half the page empty beside a form that is the only thing on it,
   and the eye has nowhere to rest. */
.pn-solo{padding:28px 0 10px;max-width:720px;margin-inline:auto}

/* The heading above a centred form, held to the same column.
   Narrowing the container rather than each child: `.page-head .lead` sets a
   `margin` shorthand, which resets the `margin-inline:auto` a per-child rule
   would set, so the sub-heading stayed left while the title centred. Squeezing
   the container centres everything inside it with no cascade fight.
   Only on the form pages: a listing page wants its full width. */
.page-head-solo .container{max-width:calc(720px + 44px)}
.pn-block{padding:22px}
.pn-block + .pn-block,
.notice + .pn-block,
.pn-block + .notice{margin-top:18px}
.pn-block h2{margin:0 0 14px}
.empty{border:1.5px dashed var(--line-2);border-radius:var(--radius);padding:44px 26px;
  text-align:center;color:var(--muted)}
.empty h3{margin:0;display:block;font-family:"Inter",system-ui,sans-serif;font-size:18px;color:var(--ink);
  margin-bottom:6px}
.empty p{margin:0 0 20px}
/* Wraps rather than shrinks: three buttons at 360px are three lines, and a
   button narrow enough to fit them side by side is a button nobody hits. */
.empty-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* Someone who asked for less motion is asking for the content, not for a
   faster version of the animation. Here rather than in the block at the top of
   this file because that one comes earlier and would lose to .reveal. */
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} }

/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;
  color:var(--faint);padding:16px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs svg{width:13px;height:13px}

/* =============================================================================
   Content & tools modules (ROADMAP §5): news, Q&A, jobs, tools.
   Primitives shared by more than one page live here; page layout stays in
   each page's <style>, same rule as the first three pages.
   ========================================================================== */

/* page header band: kicker + h1 + lead, used by every content/tool page */
.page-head{background:#fff;border-bottom:1px solid var(--line);padding:34px 0 30px}
.page-head .lead{margin:10px 0 0}
.page-head .ph-row{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media (max-width:640px){ .page-head{padding:26px 0 22px} }

/* two-column body: main + sticky aside */
.two-col{display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:start;padding:28px 0 10px}
.two-col>aside{position:sticky;top:82px;display:grid;gap:16px}
@media (max-width:960px){ .two-col{grid-template-columns:1fr} .two-col>aside{position:static} }

/* tags: topic (petrol), visa route (coral), guide (gold) */
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:12px;font-weight:600;background:var(--petrol-soft);color:var(--petrol);white-space:nowrap}
.tag-visa{background:var(--coral-soft);color:var(--coral-deep)}
.tag-guide{background:var(--gold-soft);color:#8A6E10}
.tag-neutral{background:var(--bg-2);color:var(--muted)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}

/* source attribution (OGL adaptation or plain citation) */
.src{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint)}
.src svg{width:13px;height:13px}

/* notice boxes: info (petrol), warn (gold), ok (green) */
.notice{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radius);padding:14px 16px;
  font-size:14px;line-height:1.55;background:var(--petrol-wash);border:1px solid var(--petrol-soft);
  color:var(--petrol-deep)}
.notice svg{width:18px;height:18px;flex:none;margin-top:2px}
.notice b{font-weight:700}
.notice-warn{background:var(--gold-soft);border-color:#EAD98F;color:#6b5a17}
.notice-ok{background:var(--wa-soft);border-color:#BFE8CC;color:var(--ok)}
.notice-bad{background:#FBECEA;border-color:#F0C4BE;color:#8A2A1F}
/* "Sua conta foi apagada", above any page (header.php, 2026-10-01). */
.notice-top{margin-top:18px}

/* ---- contagem de resultados, paginação e fichas ----
   Estas quatro moravam em busca.css e painel.css, e a agenda as usa sem
   carregar nenhuma das duas: "4 eventos" saía no tamanho cheio de <h2>, a
   paginação saía como links crus sem os alvos de 44px, e o bloco "Quando e
   onde" da página do evento - a informação central dela - renderizava como
   <dl> padrão do navegador, com recuo e sem as duas colunas.
   Subiram para cá pelo mesmo motivo que .pn-block subiu: são primitivos que
   mais de uma tela usa, e uma regra que mora na folha de outra tela é uma
   regra que some quando alguém reusa o componente. */
.res-count{font-size:14px;color:var(--muted)}

.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:28px 0 6px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);font-size:14.5px;
  font-weight:500;text-decoration:none;transition:border-color .2s,background .2s}
.pagination a.page-numbers:hover{border-color:var(--petrol);background:var(--petrol-wash)}
.pagination .page-numbers.current{background:var(--petrol);border-color:var(--petrol);
  color:#fff;font-weight:600}
.pagination .page-numbers.dots{border:none;background:none;min-width:auto;padding:0 4px}

.pn-facts{display:grid;grid-template-columns:minmax(0,180px) 1fr;gap:10px 18px;margin:0 0 18px}
.pn-facts dt{color:var(--muted);font-size:13.5px}
.pn-facts dd{margin:0;font-size:14.5px;color:var(--ink)}
@media (max-width:560px){ .pn-facts{grid-template-columns:1fr;gap:3px 0} .pn-facts dd{margin-bottom:10px} }

.pn-hint{margin:-4px 0 20px;font-size:13.5px;line-height:1.6;color:var(--muted)}


/* news card */
.news-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);padding:18px 20px;display:flex;flex-direction:column;gap:10px;
  transition:box-shadow .2s,border-color .2s,transform .2s var(--ease)}
.news-card:hover{box-shadow:var(--shadow);border-color:var(--line-2);transform:translateY(-2px)}
.nc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)}
.nc-top time{margin-left:auto;white-space:nowrap}
.news-card h3{font-size:17.5px;line-height:1.3;margin:0}
.news-card h3 a{color:var(--ink);text-decoration:none}
.news-card h3 a:hover{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.news-card p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}
.nc-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto}
.nc-read{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--faint)}
.nc-read svg{width:13px;height:13px}
.news-card.is-compact{padding:14px 16px;gap:7px}
.news-card.is-compact h3{font-size:15.5px}

/*
 * A picture on the card (2026-09-24, template-parts/card-media.php). The owner:
 * "muito só texto e flat". Always 16:10 when it stands alone, cover-cropped.
 * No picture on record: the type's (or the topic's) icon, large and white, on
 * the brand green, never a grey box. Events get the navy, so the agenda and
 * the news do not read as the same wall of green. No yellow here: a yellow
 * mark on a green block is the flag (CLAUDE.md).
 */
/* justify-self:stretch because a grid item with an aspect-ratio does not
   stretch by default: its width came from the picture, and one card's photo
   ran 27px past the card's edge (2026-09-24). */
.cm{position:relative;margin:0;overflow:hidden;aspect-ratio:16/10;border-radius:var(--r-sm);background:var(--petrol-wash);justify-self:stretch;min-width:0}
/* The picture is laid over the box, never inside its flow: an <img> in flow
   gave the box its own natural height, which beat aspect-ratio and pushed the
   picture past the card's edge (owner, 2026-09-24: "imagem fora do card"). */
.cm img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.cm-icon{display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--petrol) 0%,var(--petrol-deep) 100%)}
.cm-icon.cm-event{background:linear-gradient(140deg,var(--azul) 0%,var(--petrol-deep) 100%)}
.cm-icon svg{width:44px;height:44px;stroke-width:1.5;opacity:.9}

/*
 * The "sidebar" flex pattern, so the card decides by its own width and not the
 * viewport's: the picture takes 200px beside the text while the card has room
 * for 200 + 300, and wraps to a full-width banner on top when it does not. No
 * media query, and the same card works in a one-column list and a grid.
 */
.news-card.has-media{flex-direction:row;flex-wrap:wrap;padding:0;gap:0;overflow:hidden}
.news-card.has-media > .cm{flex:1 1 200px;min-height:140px;border-radius:0}
.news-card.has-media > .nc-body{flex:999 1 300px;min-width:0;padding:18px 20px;display:flex;flex-direction:column;gap:10px}

/* The credits for the card pictures, one line after the list. */
.list-credits{margin:14px 0 0;font-size:12px;color:var(--faint);line-height:1.6}
.list-credits a{color:inherit}

/* The picture at the top of a news, event or place page (detail-media.php). */
.detail-media{margin:0 0 22px}
.detail-media img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:var(--r-md)}
.detail-media figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font-size:12px;color:var(--faint);line-height:1.5}
.detail-media figcaption a{color:inherit}
.dm-note{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.dm-note svg{width:13px;height:13px}

/* tool card (hub + home strip) */
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;text-decoration:none;display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.tool-card:hover{border-color:var(--petrol);box-shadow:var(--shadow-soft);transform:translateY(-2px)}
.tool-card .ic{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--coral-soft);color:var(--coral-deep)}
.tool-card .ic svg{width:22px;height:22px}
.tool-card b{font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:16.5px;color:var(--ink)}
.tool-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.tool-card .go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--petrol);
  display:inline-flex;align-items:center;gap:6px}
.tool-card .go svg{width:15px;height:15px}

/* data table (comparator, registers) */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-top:1px solid var(--line);vertical-align:middle}
.tbl thead th{border-top:none;background:var(--bg-2);font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.tbl tr.is-best td{background:var(--wa-soft)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Safety net for inline icons injected into text blocks: an SVG with no size
   rule grows to fill its container. Zero specificity (:where), so every
   component rule above still wins, and the Leaflet SVG pane is untouched. */
:where(.item-card,.news-card,.tool-card,.next,.dl,.term,.company,.days) svg{width:15px;height:15px}

/* generic list card with header row (jobs, Q&A) */
.item-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft);padding:18px 20px}
.item-card h3{font-size:17px;margin:0 0 4px;line-height:1.3}
.item-card h3 a{color:var(--ink);text-decoration:none}
.item-card h3 a:hover{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.item-meta{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;font-size:13px;color:var(--muted)}
.item-meta svg{width:14px;height:14px;vertical-align:-2.5px}

/* subscribe / alert box (novidades, prazos, noticia aside) */
/* Cor chapada, sem o brilho radial que havia no canto: o "glow" atrás de um
   bloco escuro é um dos tiques de página gerada, e não informa nada. */
.alert-box{background:var(--petrol);color:#fff;border-radius:var(--radius);padding:22px;position:relative;overflow:hidden}
.alert-box>*{position:relative}
.alert-box h2,.alert-box h3{color:#fff;margin:0 0 6px;font-size:18px;display:flex;align-items:center;gap:8px}
.alert-box h2 svg,.alert-box h3 svg{width:19px;height:19px;color:#E8B84B}
.alert-box p{margin:0 0 14px;font-size:14px;color:rgba(255,255,255,.82);line-height:1.55}
.alert-box .input{border-color:transparent}
.alert-box .check{color:#fff;font-size:13.5px;padding:5px 0}
.alert-box .check input{accent-color:var(--coral)}
.alert-box small{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.6)}

/* newsletter: "o resumo da semana" (home band, /newsletter/) */
.nl-box{max-width:600px}
.nl-box .notice{margin-bottom:14px}
.nl-row{display:flex;gap:10px;flex-wrap:wrap}
.nl-row .input{flex:1 1 240px;width:auto}
.nl-row .btn{flex:0 0 auto}
.nl-consent{align-items:flex-start;font-size:13.5px;line-height:1.5;margin-top:8px}
.nl-consent input{margin-top:2px}
.nl-form small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.nl-form .cf-turnstile{margin-top:10px}
.nl-link{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-bottom:14px}
.nl-link p{margin:0 0 12px}
.nl-box .cl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.has-photo .nl-consent,.has-photo .nl-form small{color:#fff}
.nl-what{margin:34px 0 12px}
.nl-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.nl-list li{display:flex;gap:10px;align-items:start;font-size:15.5px}
.nl-list svg{width:18px;height:18px;color:var(--petrol);flex:none;margin-top:3px}
.nl-fine{font-size:13.5px;color:var(--muted);max-width:60ch}

/* The burger renders both icons and swaps them with CSS rather than with
   innerHTML: the content security policy forbids inline script, so the SVG
   markup cannot travel through JavaScript. */
.sh-burger .ic-close{display:none}
.sh-burger[aria-expanded="true"] .ic-open{display:none}
.sh-burger[aria-expanded="true"] .ic-close{display:block}

/* ---- a listing that is an invention ----

   Grey and plain on purpose. The temptation is red, and red is wrong: this is
   not a warning about the person, it is a statement about the page, and a
   scarlet banner on somebody's profile - even an invented somebody - teaches
   the visitor that this site puts red boxes on professionals. */
.badge-fake{background:var(--bg-2);color:var(--muted);border:1px dashed var(--line-2)}
.p-fake{
  display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding:12px 14px;
  background:var(--bg-2);border:1px dashed var(--line-2);border-radius:var(--radius-btn);
  font-size:13.5px;line-height:1.55;color:var(--muted)}
.p-fake svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--faint)}
.p-fake b{display:block;color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:14px}

/* The privacy-policy line under a form that collects data (template-parts/privacy-note.php). */
.privacy-note{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint)}
.privacy-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.su-foot + .privacy-note{text-align:center}

/* =============================================================================
   Section with a background photo (SectionPhoto, template-parts/section-photo.php)

   Owner, 2026-09-24: "tá muito só texto e flat ... falta imagem de fundo com
   overlay". An <img> under the content, never a CSS background, so it keeps
   its srcset, its WebP and its lazy loading. The overlay is the site's own
   green running into the navy, and its WEAKEST setting still holds white text
   at AA over a pure white photo: petrol-ink at .64 gives 4.7:1, and the navy
   end needs .74 for the same (worked out 2026-09-24; a photo is never all
   white, so the real margin is wider). The text-shadow is insurance, not the
   contrast.

   No `isolation` and no overflow:hidden on the section: the search bar's
   suggestion list opens downwards out of the top of /profissionais/, and
   either would clip it or bury it under the results.
   ========================================================================== */
.has-photo{position:relative;background:var(--petrol-ink);color:#fff;border-color:transparent}
.has-photo > .sp-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sp-media img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
/* The default overlay, "média" in the settings; named so the class printed
   on the section is not a class with no CSS behind it. */
.sp-media::after,.ov-media .sp-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(7,38,28,.84) 0%,rgba(7,38,28,.78) 50%,rgba(26,62,110,.82) 100%)}
.ov-leve .sp-media::after{
  background:linear-gradient(105deg,rgba(7,38,28,.76) 0%,rgba(7,38,28,.70) 50%,rgba(26,62,110,.78) 100%)}
.ov-forte .sp-media::after{
  background:linear-gradient(105deg,rgba(7,38,28,.92) 0%,rgba(7,38,28,.88) 50%,rgba(26,62,110,.90) 100%)}
.has-photo > :not(.sp-media){position:relative;z-index:1}
.has-photo > .sp-credit{position:absolute;right:14px;bottom:8px;left:14px;margin:0;text-align:right;
  font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.8)}
.sp-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* What sits on the photo turns white. Cards on it (reviews, events) keep
   their own colours: they are white boxes, and that is the point. */
.has-photo > .container > h1,.has-photo > .container > div > h1,
.has-photo .h-page,.has-photo .sec-head .h-sec,.has-photo > .container > .wrap > .h-sec{color:#fff}
.has-photo.page-head h1,.has-photo .h-page,.has-photo .sec-head .h-sec,.has-photo.page-head .lead{text-shadow:0 1px 3px rgba(0,0,0,.28)}
.has-photo.page-head .lead,.has-photo .sec-head .lead,.has-photo > .container > p,.has-photo > .container > div > p{color:rgba(255,255,255,.9)}
.has-photo.page-head .muted,.has-photo .sec-head .muted,.has-photo .crumbs,.has-photo .crumbs a{color:rgba(255,255,255,.92)}
/* The kicker goes white with a short yellow rule before it: yellow as
   geometry, a line, never a fill (CLAUDE.md). */
.has-photo .sec-head .kicker,.has-photo.page-head .kicker{color:#fff}
.has-photo .sec-head .kicker::before,.has-photo.page-head .kicker::before{content:"";display:inline-block;
  width:22px;height:3px;margin-right:10px;vertical-align:middle;background:var(--coral);border-radius:var(--r-xs)}
.has-photo .sec-head .more{color:#fff}
.page-head.has-photo{border-bottom:0;padding:64px 0 58px}
@media (max-width:640px){ .page-head.has-photo{padding:44px 0 46px} }
/* The home's sections with a photo: the credit needs the bottom padding to
   itself, or it sits on the last card. */
.section.has-photo{padding-bottom:96px}
@media (max-width:768px){ .section.has-photo{padding-bottom:62px} }
main:has(> .has-photo:last-child) + .site-footer{margin-top:0}

/* The section label's icon (owner, 2026-09-24: "pode usar mais os ícones").
   One per heading, the same Lucide line as the rest, in the label's colour.
   On a photo it takes the place of the yellow rule and becomes the yellow
   itself: a line drawing, still geometry and not a fill. */
.kicker > svg{width:.95em;height:.95em;vertical-align:-.1em;margin-right:8px;flex:none}
.has-photo.page-head .kicker:has(> svg)::before,.has-photo .sec-head .kicker:has(> svg)::before{display:none}
.has-photo .sec-head .kicker > svg,.has-photo.page-head .kicker > svg{color:var(--coral)}
/* The white boxes on a photo keep the page's ink: they sit on the photo,
   they are not part of it. Without this their text inherits the section's
   white and vanishes (the checklist of "Para profissionais" did, 2026-09-24). */
.has-photo .cat-card,.has-photo .rv-card,.has-photo .ev-card,.has-photo .card{color:var(--ink)}

/* The map pin, shared by the event map and Lugares (and any map after them):
   a green drop with a small Brazilian flag inside, in the theme's own green,
   yellow and blue. The owner asked for it on 2026-09-25 ("uma bandeirinha do
   Brasil no pin"), and it is the one agreed exception to "never yellow
   touching green": 16px of flag on a map marker, nowhere else.
   The body is a square rotated -45deg with one sharp corner, so the corner
   points down; the flag rotates back to sit level. */
.br-pin{background:none;border:0}
.br-pin-body{position:absolute;left:0;top:0;width:26px;height:26px;box-sizing:border-box;
  background:var(--petrol);border:2px solid #fff;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);box-shadow:var(--shadow-2)}
.br-pin-flag{position:absolute;left:50%;top:50%;width:16px;height:11px;margin:-5.5px 0 0 -8px;
  background:var(--coral);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:rotate(45deg)}
.br-pin-flag::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;
  margin:-3px 0 0 -3px;border-radius:50%;background:var(--azul)}

/* The cluster: pins close together become one circle with the count
   (Leaflet.markercluster, owner 2026-09-25: "um círculo das cores do
   Brasil"). Green disc, a thin yellow ring inside a white edge, the number in
   white (8.9:1 on the green, 10:1 on the navy); navy from 10 events, so a
   bigger crowd reads at a glance. Same map-marker exception as .br-pin. */
.br-cluster{background:none;border:0}
.br-cluster-disc{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  box-sizing:border-box;border-radius:50%;background:var(--petrol);color:#fff;
  border:2px solid #fff;box-shadow:inset 0 0 0 3px var(--coral),var(--shadow-2);
  font-family:"Inter",sans-serif;font-weight:700;font-size:15px;line-height:1;
  font-variant-numeric:tabular-nums;transition:transform .15s ease}
.br-cluster-big .br-cluster-disc{background:var(--azul);font-size:16px}
.br-cluster:hover .br-cluster-disc{transform:scale(1.08)}
.br-cluster:focus-visible{outline:none}
.br-cluster:focus-visible .br-cluster-disc{box-shadow:inset 0 0 0 3px var(--coral),0 0 0 3px var(--petrol-deep)}

/* "Não tem site?" under the website field (owner, 2026-09-25), on the signup
   wizard and on "Editar meu perfil". The server prints it only while the
   field is empty; typing hides it (the input carries a placeholder, so
   :placeholder-shown tells an empty field from a filled one, no script). A
   line, not a banner: muted, small, one link. */
.site-cta{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.site-cta > svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--petrol)}
.site-cta a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2)}
.site-cta a:hover{text-decoration-color:var(--petrol)}
:is(.su-field,.acf-input):has(input:not(:placeholder-shown)) > .site-cta{display:none}

/* References to professionals outside the directory (Destaque only, 2026-09-26):
   template-parts/destaque-refs.php, the Q&A answer and the event organiser. */
.dq-grid{display:grid;gap:12px;margin:0 0 14px}
.dq-lists{margin-top:4px}
.dq-mini{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--line);min-width:0}
.dq-mini:first-child{border-top:0;padding-top:0}
.dq-mini-txt{display:grid;min-width:0;flex:1}
.dq-mini-txt b{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dq-mini-txt small{color:var(--faint);font-size:12.5px}
.dq-mini:hover b{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.dq-mini .badge{flex:none}
/* Every row here is a Destaque, so every avatar gets the gold ring (2026-10-02). */
.dq-mini .avatar{box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--gold);margin:2px}
.dq-grid:has(.dq-mini){gap:0;margin-bottom:12px}
.pro-ref{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--card)}
.pro-ref-txt{display:grid;flex:1;min-width:0}
.pro-ref-txt b{font-weight:600}
.pro-ref-txt small{color:var(--faint);font-size:13px}