/* ==========================================================================================
   Quintal (v6), 05/11/2026. Camada carregada DEPOIS de site.css e vl.css.
   Proposta em 01 Estratégia e marca/proposta-idv-quintal-nov2026, a partir do gatohotel.com.br.
   Decisões dela no mesmo dia: paleta aberta ("um site mais colorido é mais afetuoso") e os ícones
   de duas chapas de hoje mantidos (só a cor da pastilha muda).
   Desligar o Quintal inteiro = tirar este arquivo da lista CSS em src/lib/Casca.tsx.
   Contraste calculado por hex: --tinta-3 NÃO passa em nenhuma superfície nova (3,85 no rosa,
   4,34 na manteiga, 4,36 na sálvia-2), por isso cada faixa nova redefine --tinta-3 = --tinta-2.
   Na tangerina só a tinta passa (8,44:1): número e texto vão em cartão manteiga-2.
   ========================================================================================== */
:root {
  --rosa: #F6CFE0;
  --rosa-2: #FBE3EC;
  --salvia: #C9D9B6;
  --salvia-2: #E0EAD3;
  --tangerina: #F2A94F;
  --pessego: #F9D8BF;
  --manteiga: #F7E6A3;
  --manteiga-2: #FBEFC9;
  --framboesa: #9B2C5A;   /* 5,14:1 no rosa */
  --verde-texto: #3F5A2A; /* 5,56:1 na sálvia-2; a terracota dá 4,44 na sálvia */
  --contorno: 2px solid var(--tinta);
  --sombra-dura: 4px 4px 0 var(--tinta);
  --sombra-dura-alta: 6px 6px 0 var(--tinta);
  --fonte-titulo: "Lilita One", "Archivo", system-ui, sans-serif;
  --q-flor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3Ccircle cx='82.0' cy='50.0' r='18'/%3E%3Ccircle cx='72.6' cy='72.6' r='18'/%3E%3Ccircle cx='50.0' cy='82.0' r='18'/%3E%3Ccircle cx='27.4' cy='72.6' r='18'/%3E%3Ccircle cx='18.0' cy='50.0' r='18'/%3E%3Ccircle cx='27.4' cy='27.4' r='18'/%3E%3Ccircle cx='50.0' cy='18.0' r='18'/%3E%3Ccircle cx='72.6' cy='27.4' r='18'/%3E%3C/svg%3E");
  --q-onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M0 24V13Q30 1 60 13T120 13V24Z'/%3E%3C/svg%3E");
  --q-onda-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M0 0V11Q30 23 60 11T120 11V0Z'/%3E%3C/svg%3E");
  --q-concha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 0H40V0A20 20 0 0 1 0 0Z'/%3E%3C/svg%3E");
  --q-patas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='%23241C15' fill-opacity='.09'%3E%3Cg transform='translate(10 10) scale(1.1)'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/g%3E%3Cg transform='translate(58 56) rotate(-20) scale(1.1)'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Lilita One só tem um peso: sem isto o navegador engorda à mão os títulos marcados 600/700. */
html { font-synthesis-weight: none; }
h1, h2, h3, h4,
.bento-item .passo, .numero strong, .recepcao-numero strong, .card-org :is(h2, h3, h4) {
  font-family: var(--fonte-titulo); font-weight: 400; font-variation-settings: normal; letter-spacing: .005em;
}
h1 { line-height: 1.02; }
h2, h3 { line-height: 1.1; }

/* ---------- Adesivo: contorno de tinta e sombra dura no lugar da sombra difusa ---------- */
.celula, .bento-item, .numero, .card-org, .card-guia, .card-ferramenta, .card-especie,
.faixa-cta, .checklist-grupo, .recepcao-numero {
  border: var(--contorno); box-shadow: var(--sombra-dura);
}
@media (hover: hover) {
  .celula:hover, .bento-item:hover, .card-org:hover, .card-guia:hover, .card-ferramenta:hover, .card-especie:hover {
    transform: translate(-2px, -2px); box-shadow: var(--sombra-dura-alta);
  }
}
.busca-campo { border: var(--contorno); box-shadow: var(--sombra-dura); }
.busca-campo:focus-within { border-color: var(--caramelo-escuro); box-shadow: 0 0 0 3px var(--caramelo-escuro); }
.btn--primario, .btn--claro, .btn--caramelo { border: var(--contorno); box-shadow: 3px 3px 0 var(--tinta); }
.btn--primario:active, .btn--claro:active, .btn--caramelo:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.nav .btn { box-shadow: 2px 2px 0 var(--tinta); }

/* ---------- Ondas: cada faixa colorida sobe uma onda da própria cor sobre a anterior ---------- */
.secao--areia, .secao--ceu, .numeros, .rodape, .topo, main > section:has(.grade-hover) { position: relative; }
.secao--areia::after, .secao--ceu::after, .numeros::after, .rodape::after, main > section:has(.grade-hover)::after {
  content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 24px; z-index: 1; pointer-events: none;
  background: inherit; background-image: none;
  -webkit-mask: var(--q-onda) 0 0 / 120px 24px repeat-x; mask: var(--q-onda) 0 0 / 120px 24px repeat-x;
}
/* a capa interna desce a onda sobre o conteúdo */
.topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -23px; height: 24px; z-index: 1; pointer-events: none;
  background: inherit;
  -webkit-mask: var(--q-onda-baixo) 0 0 / 120px 24px repeat-x; mask: var(--q-onda-baixo) 0 0 / 120px 24px repeat-x;
}

/* ---------- Cabeçalho na sálvia clara ---------- */
.header { background: var(--salvia-2); --tinta-3: var(--tinta-2); }
.header.rolou, .header--solido { border-bottom-color: rgba(36, 28, 21, .14); }

/* ---------- Capa da home no rosa, foto em flor ---------- */
.hero { background: var(--rosa); --tinta-3: var(--tinta-2); }
.hero .grifo { color: var(--framboesa); }
.hero-carimbo { color: var(--verde-texto); }
.hero a:not(.btn):not(.chip) { color: var(--framboesa); }
.recepcao::before {
  background: var(--manteiga); border: var(--contorno); box-shadow: var(--sombra-dura);
}
.recepcao .rodizio {
  border-radius: 0;
  -webkit-mask: var(--q-flor) center / 100% 100% no-repeat; mask: var(--q-flor) center / 100% 100% no-repeat;
}
.recepcao-numero { background: var(--papel); }

/* ---------- Seis passos na manteiga ---------- */
.secao--areia { background: var(--manteiga); --tinta-3: var(--tinta-2); }
.secao--areia::before { opacity: .08; }
.bento-item--caramelo { background: var(--rosa-2); }
.bento-item--oliva { background: var(--salvia-2); }
.bento-item--ambar { background: var(--ceu-papel); }
.bento-item .passo { color: var(--caramelo-escuro); }
@media (hover: hover) {
  .bento-item:hover { background: var(--manteiga-2); }
}

/* ---------- Números: faixa de tangerina com patas, número em cartão manteiga-2 ---------- */
.numeros {
  background: var(--tangerina) var(--q-patas) 0 0 / 96px 96px repeat;
  margin-top: 0; padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.numeros::after { background: var(--tangerina); }
.numeros::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -19px; height: 20px; z-index: 1; pointer-events: none;
  background: var(--tangerina);
  -webkit-mask: var(--q-concha) 0 0 / 40px 20px repeat-x; mask: var(--q-concha) 0 0 / 40px 20px repeat-x;
}
.numero { background: var(--manteiga-2); }
.numero strong { color: var(--tinta); }
.numero span { color: var(--tinta-2); }
.numeros + section { padding-top: calc(var(--secao) + 1rem); }

/* ---------- Seção dos gatos segue no céu do Kai, sem o filete ---------- */
.secao--ceu { box-shadow: none; --tinta-3: var(--tinta-2); }

/* ---------- Segunda faixa de areia da home ("Cada fase") vira pêssego ---------- */
main > .secao--areia ~ .secao--areia { background: var(--pessego); }

/* ---------- Guias na sálvia clara; o ícone de hoje, a pastilha nas cores novas ---------- */
main > section:has(.grade-hover) { background: var(--salvia-2); padding-block: var(--secao); --tinta-3: var(--tinta-2); }
main > section:has(.grade-hover) a:not(.btn):not(.celula) { color: var(--verde-texto); }
.celula:nth-child(5n+1) .ic { background: var(--ceu-papel); }
.celula:nth-child(5n+2) .ic { background: var(--manteiga); }
.celula:nth-child(5n+3) .ic { background: var(--salvia-2); }
.celula:nth-child(5n+4) .ic { background: var(--rosa-2); }
.celula:nth-child(5n+5) .ic { background: var(--pessego); }
.celula .ic { border: 1.5px solid rgba(36, 28, 21, .18); }
@media (hover: hover) {
  .celula:hover { background: var(--manteiga-2); }
}

/* ---------- Convite em manteiga ---------- */
.faixa-cta { background: var(--manteiga); }

/* ---------- Rodapé no rosa ---------- */
.rodape { background: var(--rosa); --tinta-3: var(--tinta-2); }
.rodape-base { border-top-color: rgba(36, 28, 21, .18); }

/* ---------- Os três como marcador, só nas listas dos textos (guias e blog) ---------- */
.prosa ul:is(:not([class]), .list-bullet) { list-style: none; padding-left: 0; }
.prosa ul:is(:not([class]), .list-bullet) > li { position: relative; padding-left: 2.6rem; margin-bottom: .45em; }
.prosa ul:is(:not([class]), .list-bullet) > li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px;
  background: url("/assets/img/picto-belinha.svg") left center / contain no-repeat;
}
.prosa ul:is(:not([class]), .list-bullet) > li:nth-child(even)::before { width: 34px; height: 20px; top: .25em; background-image: url("/assets/img/picto-gatos.svg"); }

@media (prefers-reduced-motion: reduce) {
  .celula:hover, .bento-item:hover, .card-org:hover, .card-guia:hover, .card-ferramenta:hover, .card-especie:hover { transform: none; }
}

/* no celular a moldura de trás subia até a legenda da foto */
@media (max-width: 900px) { .recepcao::before { bottom: 30%; } }

/* ---------- As oito portas da capa (05/11/2026) ---------- */
.portas-secao { background: var(--rosa); padding-block: 0 clamp(3rem, 6vw, 4.5rem); --tinta-3: var(--tinta-2); }
.portas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .portas { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }
.porta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6rem;
  min-height: 150px; padding: 1.2rem .8rem 1rem; background: var(--papel); color: var(--tinta); text-decoration: none;
  border: var(--contorno); border-radius: var(--raio); box-shadow: var(--sombra-dura);
  transition: transform var(--dur-r), box-shadow var(--dur-r), background var(--dur-r);
}
@media (hover: hover) { .porta:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-dura-alta); background: var(--manteiga-2); color: var(--tinta); } }
.porta .pastilha { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; border: 1.5px solid rgba(36, 28, 21, .18); }
.porta .pastilha svg { width: 32px; height: 32px; }
.porta:nth-child(5n+1) .pastilha { background: var(--ceu-papel); }
.porta:nth-child(5n+2) .pastilha { background: var(--manteiga); }
.porta:nth-child(5n+3) .pastilha { background: var(--salvia-2); }
.porta:nth-child(5n+4) .pastilha { background: var(--rosa-2); }
.porta:nth-child(5n+5) .pastilha { background: var(--pessego); }
.porta strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.15rem; line-height: 1.1; }
.porta small { font-size: .85rem; color: var(--tinta-2); line-height: 1.3; }
.cidade-lembrada {
  display: inline-block; margin: 0 0 1.2rem; padding: .5rem 1.1rem; background: var(--papel);
  border: var(--contorno); border-radius: 999px; box-shadow: 3px 3px 0 var(--tinta); font-size: .95rem;
}
.cidade-lembrada a { color: var(--framboesa); font-weight: 700; }
.portas-secao + .secao--areia { padding-top: var(--secao); }

/* ---------- O mapa também na home, na seção dos estados ---------- */
.estados-com-mapa { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 900px) { .estados-com-mapa { grid-template-columns: minmax(260px, 4fr) 7fr; align-items: start; } }
.estados-com-mapa .estados { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.estados-com-mapa .achar-mapa figcaption { font-size: .88rem; color: var(--tinta-2); text-align: center; margin-top: .6rem; }

/* ---------- /feiras/ ---------- */
.feiras-uf { margin-block: clamp(2rem, 4vw, 3rem); scroll-margin-top: 100px; }
.feiras-uf h2 small { font-family: var(--fonte-texto); font-size: .95rem; color: var(--tinta-2); margin-left: .4rem; }
.feiras-mais { margin-top: .8rem; font-size: .95rem; }
.topo .atalhos .chip b { color: var(--caramelo-escuro); }

/* ---------- /perdi-meu-animal/ ---------- */
.perdi-passos { list-style: none; counter-reset: passo; padding: 0; margin: 2.2rem 0; display: grid; gap: 1rem; }
.perdi-passos li { counter-increment: passo; position: relative; padding: 1.2rem 1.4rem 1.2rem 4.2rem; background: var(--papel); border: var(--contorno); border-radius: var(--raio); box-shadow: var(--sombra-dura); }
.perdi-passos li::before {
  content: counter(passo); position: absolute; left: 1.1rem; top: 1.1rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 999px; background: var(--tangerina); border: var(--contorno); font-family: var(--fonte-titulo); font-size: 1.1rem;
}
.perdi-passos h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.perdi-passos p { margin: 0; color: var(--tinta-2); }
.cartaz-montar { margin-block: 2.5rem; }
.cartaz-form { display: grid; gap: .8rem; margin-bottom: 1.5rem; }
.cartaz-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
.cartaz-form input { font: 400 1rem var(--fonte-texto); padding: .7rem .9rem; border: 2px solid var(--tinta); border-radius: var(--raio-p); background: var(--papel); }
.cartaz-form input:focus-visible { outline: 3px solid var(--caramelo-escuro); outline-offset: 2px; }
.cartaz-form .btn { justify-self: start; }
.cartaz { background: var(--papel); border: 3px solid var(--tinta); border-radius: var(--raio); padding: 1.5rem; text-align: center; max-width: 520px; }
.cartaz-topo { font-family: var(--fonte-titulo); font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 .8rem; text-transform: uppercase; }
.cartaz-foto { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--creme); border: 2px dashed var(--tinta-2); border-radius: var(--raio-p); overflow: hidden; color: var(--tinta-2); }
.cartaz-foto img { width: 100%; height: 100%; object-fit: cover; }
.cartaz-nome { font-family: var(--fonte-titulo); font-size: 2rem; margin: 1rem 0 .3rem; }
.cartaz-desc, .cartaz-onde { margin: .2rem 0; }
.cartaz-tel { font-family: var(--fonte-titulo); font-size: 1.8rem; margin: .8rem 0 0; }
.perdi-uf { border-bottom: 1px solid var(--linha); }
.perdi-uf summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.perdi-uf summary small { color: var(--tinta-2); font-weight: 400; }
.perdi-publicos { padding-left: 1.2rem; margin: 0 0 1rem; display: grid; gap: .5rem; }
.perdi-contato { color: var(--tinta-2); }
.nota-fonte { font-size: .95rem; color: var(--tinta-2); margin-top: 1rem; }
@media print {
  html.imprimindo-cartaz body * { visibility: hidden !important; }
  html.imprimindo-cartaz .cartaz, html.imprimindo-cartaz .cartaz * { visibility: visible !important; }
  html.imprimindo-cartaz .cartaz { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: 0; box-shadow: none; }
}

/* ---------- /mapa-do-site/ ---------- */
.mapa-site { padding-block: 2.5rem; }
.mapa-site h2 { margin-top: 2rem; }
.mapa-site-secoes { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; padding: 0; }
.mapa-site-ufs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
.mapa-site-ufs h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.mapa-site-ufs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: .95rem; }
.mapa-site-ufs small { color: var(--tinta-2); }

/* ---------- Menus suspensos do topo (Guias e Blog) ---------- */
.nav-grupo { position: relative; display: flex; align-items: center; }
.nav-grupo > a { padding-right: .35rem; }
.nav-abre {
  display: inline-grid; place-items: center; width: 28px; height: 32px; margin-left: -.15rem; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--tinta-2); cursor: pointer;
}
.nav-abre svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform var(--dur-r); }
.nav-grupo.aberto .nav-abre svg { transform: rotate(-90deg); }
.nav-abre:focus-visible { outline: 3px solid var(--caramelo-escuro); outline-offset: 1px; }
.nav-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px;
  padding: 1rem 1.1rem; background: var(--papel); border: var(--contorno); border-radius: var(--raio-p); box-shadow: var(--sombra-dura);
  gap: .2rem 2rem;
}
.nav-menu--largo { grid-template-columns: repeat(3, max-content); }
/* ponte invisível para o mouse não perder o painel entre o item e ele */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-grupo.aberto .nav-menu { display: grid; }
@media (hover: hover) { .nav-grupo:hover .nav-menu { display: grid; } }
.nav-menu > div { display: grid; align-content: start; gap: .05rem; }
.nav .nav-menu a { display: block; padding: .4rem .6rem; margin-inline: -.6rem; border-radius: 10px; font-size: .95rem; white-space: nowrap; color: var(--tinta); }
@media (hover: hover) { .nav .nav-menu a:hover { background: var(--manteiga-2); } }
.nav-menu-titulo { margin: 0 0 .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--caramelo-escuro); }