/* ============================================================================
   PÚRPURA — Terapias Espirituais · Gondomar
   Folha de estilos única.

   REGISTO CLARO, ao contrário do que o tema faria esperar. O tom da Púrpura é
   ascendente — "ativo a tua energia" — e não ocultista; e cristais, velas e
   cartas fotografam-se mal sobre preto. Papel quente, ametista dominante (está
   no nome da casa), ouro velho de acento. O púrpura profundo fica reservado à
   secção das consultas: a passagem de um registo ao outro é o momento forte
   da página.
   ========================================================================== */

/* ------------------------------------------------------------------ fontes
   Alojadas aqui, nunca pelo CDN do Google: o site tem de funcionar sem
   depender de terceiros, e sem os ficheiros o visitante via Georgia/Arial e
   perdia-se a estética toda.                                                */
/* São fontes VARIÁVEIS: um ficheiro por família serve todos os pesos, daí o
   `font-weight` ser um intervalo e não um número. Os ficheiros antigos
   (-300 e -400) eram byte a byte o MESMO ficheiro — a folha declarava dois
   pesos que não existiam, e o browser andava a engrossar as letras à força.
   Agora o peso é real. As três juntas pesam ~88 KB. */
@font-face{font-family:"Cormorant";src:url("../fonts/Cormorant.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/Cormorant-Italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/Jost.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  /* ======================================================================
     PALETA — reconstruída a partir do logótipo, 09/09/2026

     Até aqui o site vivia num roxo avermelhado (#6B3FA6) escolhido antes de
     eu ver o logótipo. O logótipo dela é #6B3FA6 — um violeta AZULADO, quase
     periwinkle. São cores diferentes, e um site que não usa a cor da própria
     marca lê-se como um modelo comprado.

     Quem manda passa a ser o logótipo. A beringela profunda fica como chão
     escuro, o ouro mantém-se (que é o que dá o registo caro), e o magenta do
     néon do espaço dela entra como acento raro — uma ou duas coisas por
     página, nunca mais.

     Os nomes das variáveis ficam como estavam de propósito: `--ametista`
     agora é o periwinkle. Mudar os nomes obrigava a mexer em quatrocentos
     sítios sem ganho nenhum.
     ================================================================== */
  --papel:#FBF7FC;      /* porcelana fria, com o sangue do logótipo dentro */
  --papel2:#F6F0FA;
  --papel3:#EFE3F6;     /* lavado de periwinkle, para os blocos realçados */
  --tinta:#2B1A3C;      /* tinta índigo — a mesma família do logótipo */
  --tinta2:#5B4572;
  --tinta3:#9585A8;
  --ametista:#6B3FA6;   /* A COR DO LOGÓTIPO. É esta que manda. */
  --ametista-esc:#55308A;
  --ametista-cl:#BFA2E4;
  --uva:#4A2878;        /* o terceiro tom: fundos profundos, entre o azul e o violeta */
  --lavanda:#F4EAFA;    /* o mais claro, para véus e realces */
  --neon:#E64FB4;       /* o magenta do letreiro dela. Raro, e sempre pequeno. */
  --ouro:#B8913F;
  --ouro-cl:#E2C68A;
  --noite:#2B1640;      /* noite índigo, não noite roxa */
  --noite2:#3B1F5C;
  --linha:#E8DCF0;
  /* OS MEIOS-TONS que faltavam. O site saltava de preto-sobre-branco para
     branco-sobre-noite, sempre no maximo, e era isso que o fazia parecer
     duro. Um site caro tem cinzentos: texto secundario a 60%, molduras a
     15%, fundos a 4%. Sao estes. */
  --meio1:#F7F1FA;      /* fundo levantado, quase imperceptivel */
  --meio2:#EEE4F3;      /* moldura discreta */
  --meio3:#C2B4D2;      /* texto terciario, legendas */
  --veu-claro:rgba(107,63,166,.045);
  --veu-escuro:rgba(255,255,255,.055);
  --linha-noite:#57357A;
  --serif:"Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Jost","Segoe UI",Helvetica,Arial,sans-serif;
  --raio:14px;
  --sombra:0 18px 50px -24px rgba(43,26,60,.34);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:.01em}
p{margin:0 0 1.1em}
.wrap{width:min(100% - 2.6rem,var(--max));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ botões */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.19em;text-transform:uppercase;
  padding:.95rem 1.7rem;border-radius:999px;border:1px solid var(--ametista);
  background:var(--ametista);color:#fff;text-decoration:none;cursor:pointer;
  transition:transform .25s,background .25s,box-shadow .25s,color .25s;
}
.btn:hover{background:var(--ametista-esc);border-color:var(--ametista-esc);transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(107,63,166,.8)}
.btn.ghost{background:transparent;color:var(--ametista);border-color:var(--linha)}
.btn.ghost:hover{background:var(--papel3);color:var(--ametista-esc);border-color:var(--ametista-cl)}
.btn.ouro{background:var(--ouro);border-color:var(--ouro);color:#2A2008}
.btn.ouro:hover{background:#A07C31;border-color:#A07C31}
.btn.sm{padding:.62rem 1.15rem;font-size:.7rem;letter-spacing:.14em}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ------------------------------------------------------------------- tarja */
.aviso{
  background:#FCF3D4;border:1px solid #E3CE7C;color:#5C4A11;
  border-radius:10px;padding:.7rem 1rem;font-size:.83rem;line-height:1.55;
  display:flex;gap:.6rem;align-items:flex-start;
}
.aviso b{font-weight:400;color:#4A3A06}
.aviso .dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#D9B441;margin-top:.5rem}

/* ======================================================================
   CAPA
   ==================================================================== */
.cover{
  position:fixed;inset:0;display:grid;place-items:center;
  background:var(--noite);overflow:hidden;z-index:1;
}
#ceu{position:absolute;inset:0;width:100%;height:100%;display:block}
.cover::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 42%,rgba(107,63,166,.34),transparent 62%);
  pointer-events:none;
}
/* width:100% é obrigatório — sem ele o bloco fica do tamanho do seu conteúdo
   mais largo e o nome transborda do ecrã no telemóvel em vez de mudar de linha */
.cover .in{position:relative;z-index:2;width:100%;text-align:center;padding:2rem 1.4rem;color:#F6F0FA}
.cover .mark{
  font-family:var(--serif);font-weight:500;font-size:clamp(3.1rem,12vw,7.4rem);line-height:1;
  letter-spacing:.19em;margin:0 0 .1em;text-indent:.19em;
}
.cover .mark i{font-style:normal;color:var(--ouro-cl)}
.cover .sub{
  font-size:clamp(.62rem,2.1vw,.8rem);letter-spacing:.42em;text-transform:uppercase;
  color:#C7AEE0;text-indent:.42em;margin:0;
}
.cover .rule{height:1px;background:linear-gradient(90deg,transparent,var(--ouro),transparent);
  width:0;margin:1.9rem auto;animation:cresce 1.7s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cresce{to{width:min(340px,68vw)}}
.cover .claim{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,3.4vw,1.7rem);
  color:#EADCF5;max-width:29ch;margin:0 auto;text-wrap:balance;line-height:1.4;
}
.cover .ref{
  font-size:clamp(.6rem,2vw,.72rem);font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ouro-cl);text-indent:.24em;margin:1.7rem auto 0;max-width:52ch;line-height:1.9;
}
.cover .down{
  position:absolute;left:50%;bottom:2.1rem;transform:translateX(-50%);z-index:2;
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:#B69BD0;
  text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.cover .down span{display:block;width:1px;height:34px;background:linear-gradient(var(--ouro),transparent);animation:desce 2s infinite}
@keyframes desce{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
.cover .in,.cover .down{transition:opacity .5s,transform .5s}

/* ---------------------------------------------------------------- cabeçalho
   Só aparece depois da capa. Verifica se a capa está mesmo fora de vista
   antes de se esconder — ver a armadilha do innerHeight no Pet Hotel.       */
#topo{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(251,247,243,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linha);
  display:flex;align-items:center;gap:1.4rem;
  padding:.75rem clamp(1rem,4vw,2.4rem);
  transform:translateY(-104%);transition:transform .38s ease;
}
#topo.on{transform:none}
#topo .lg{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:.2em;text-decoration:none;text-indent:.2em;white-space:nowrap}
#topo .lg i{font-style:normal;color:var(--ouro)}
#topo nav{margin-left:auto;display:flex;gap:.25rem}
/* Cada item do menu é um ícone com o nome por baixo. O alvo de toque é a
   caixa toda e não só o ícone — 44 px de altura, que é o mínimo decente. */
#topo nav a{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  white-space:nowrap;text-decoration:none;font-weight:500;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta2);padding:.35rem .7rem;border-radius:10px;
  transition:color .2s,background .2s;
}
#topo nav a .nico{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
#topo nav a:hover{color:var(--ametista);background:var(--papel3)}
#topo nav a:hover .nico{transform:translateY(-2px)}
/* a página em que se está fica marcada, senão perde-se o sítio */
#topo nav a.on{color:var(--ametista)}
#topo nav a.on .nico{stroke-width:2}
#topo nav a.on::after{content:"";display:block;width:16px;height:2px;border-radius:2px;background:var(--ouro)}
#topo .acts{display:flex;gap:.6rem;align-items:center}
#burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;margin-left:auto}
#burger i{display:block;width:23px;height:1px;background:var(--tinta);margin:5px 0;transition:transform .3s,opacity .3s}
#burger.x i:nth-child(1){transform:translateY(6px) rotate(45deg)}
#burger.x i:nth-child(2){opacity:0}
#burger.x i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* botão do carrinho no cabeçalho */
/* Só o cesto e o número. Violeta cheio para se destacar do menu, que é a
   cinzento — é o único botão do cabeçalho que faz alguma coisa acontecer. */
.cartbtn{
  position:relative;flex:0 0 auto;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:var(--papel3);border:1px solid var(--ametista-cl);color:var(--ametista);
  transition:background .25s,border-color .25s,transform .25s;
}
.cartbtn:hover{background:var(--ametista);border-color:var(--ametista);color:#fff;transform:translateY(-2px)}
.cartbtn .ico{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.cartbtn:hover .ico{transform:rotate(-5deg)}
.cartbtn .n{
  position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--ametista);color:#fff;font-size:.68rem;font-weight:500;letter-spacing:0;
  border:2px solid var(--papel);
}
.cartbtn .n[data-z="1"]{display:none}
.cartbtn:hover{border-color:var(--ametista-cl);background:var(--papel3)}

/* ======================================================================
   FOLHA — tudo o que desliza por cima da capa
   ==================================================================== */
#folha{position:relative;z-index:10;margin-top:100vh;background:var(--papel);box-shadow:0 -30px 60px -20px rgba(43,22,64,.5)}
section{padding:clamp(4rem,9vw,7.5rem) 0}
.eyebrow{
  font-weight:500;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ouro);
  margin:0 0 1.1rem;text-indent:.34em;
}
h2{font-weight:600;font-size:clamp(2.05rem,5.2vw,3.5rem);margin:0 0 1.3rem}
h3{font-size:clamp(1.3rem,2.6vw,1.65rem);margin:0 0 .6rem}
.lead{font-size:clamp(1.02rem,1.9vw,1.16rem);color:var(--tinta2);max-width:60ch}
.lead strong{font-weight:600;color:var(--tinta)}

/* revelações */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}.rv.d4{transition-delay:.36s}

/* ------------------------------------------------------------------- hero */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{font-weight:600;font-size:clamp(2.4rem,6vw,4.4rem);margin:0 0 1.5rem}
.hero h1 em{font-style:italic;color:var(--ametista)}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.heroart{
  position:relative;aspect-ratio:4/5;border-radius:var(--raio);overflow:hidden;
  background:linear-gradient(155deg,var(--noite),var(--ametista-esc) 70%,var(--ametista));
  box-shadow:var(--sombra);display:grid;place-items:center;
}
.heroart svg{width:76%;height:auto;opacity:.9}

/* --------------------------------------------------------- faixa argumentos
   Textos CURTOS de propósito: com frases longas a faixa parte para segunda
   linha e o quarto item fica sozinho, encostado à esquerda.                 */
.faixa{background:var(--ametista);color:#fff;padding:0}
.faixa .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;padding:2.5rem 0}
.faixa div{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;letter-spacing:.03em}
.faixa b{display:block;font-weight:400;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro-cl);margin-bottom:.2rem}
.faixa .mk{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--ouro-cl);margin-top:.55rem}

/* ------------------------------------------------------------- 4 pilares */
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.pilar{background:var(--papel);padding:2.4rem 1.9rem;transition:background .35s}
.pilar:hover{background:var(--papel3)}
.pilar .n{font-family:var(--serif);font-size:2.5rem;color:var(--ouro-cl);line-height:1;display:block;margin-bottom:.7rem}
.pilar p{font-size:.93rem;color:var(--tinta2);margin:0}

/* ======================================================================
   LOJA
   ==================================================================== */
.loja{background:var(--papel2)}
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin:2rem 0 2.4rem}
.filtros button{
  background:transparent;border:1px solid var(--linha);border-radius:999px;
  padding:.55rem 1.2rem;cursor:pointer;font-family:var(--sans);font-weight:500;font-size:.73rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tinta2);white-space:nowrap;
  transition:all .25s;
}
.filtros button:hover{border-color:var(--ametista-cl);color:var(--ametista)}
.filtros button.on{background:var(--ametista);border-color:var(--ametista);color:#fff}

.grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.5rem}
.card{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:var(--ametista-cl)}
.card .ph{
  aspect-ratio:1/1;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 45%,var(--papel3),var(--papel2));
}
.card .ph svg{width:56%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .ph svg{transform:scale(1.08) rotate(-2deg)}
.card .bd{padding:1.15rem 1.15rem 1.3rem;display:flex;flex-direction:column;flex:1}
.card h4{font-size:1.16rem;margin:0 0 .3rem}
.card .ds{font-size:.84rem;color:var(--tinta3);line-height:1.55;margin:0 0 1rem;flex:1}
.card .ln{display:flex;align-items:center;justify-content:space-between;gap:.7rem}
.card .pr{font-family:var(--serif);font-size:1.5rem;color:var(--ametista)}
.card .esg{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta3)}
.tagesg{position:absolute;top:.7rem;right:.7rem;background:var(--tinta);color:#fff;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px}
.pulse{animation:pulse .5s}
@keyframes pulse{50%{transform:scale(1.14)}}

/* ------------------------------------------------------------- carrinho */
.veu{position:fixed;inset:0;background:rgba(43,22,64,.5);backdrop-filter:blur(3px);
  z-index:90;opacity:0;pointer-events:none;transition:opacity .35s}
.veu.on{opacity:1;pointer-events:auto}
#carrinho{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:95;
  background:var(--papel);border-left:1px solid var(--linha);
  transform:translateX(101%);transition:transform .42s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column;
}
#carrinho.on{transform:none}
#carrinho .hd{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.4rem;border-bottom:1px solid var(--linha)}
#carrinho .hd h3{margin:0;font-size:1.45rem}
#carrinho .bd{flex:1;overflow-y:auto;padding:1.1rem 1.4rem}
#carrinho .ft{border-top:1px solid var(--linha);padding:1.3rem 1.4rem;background:var(--papel2)}
.fechar{background:none;border:0;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--tinta2);padding:.3rem}
.fechar:hover{color:var(--ametista)}
.item{display:grid;grid-template-columns:52px 1fr auto;gap:.85rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--linha)}
.item .mini{width:52px;height:52px;border-radius:9px;background:var(--papel3);display:grid;place-items:center}
.item .mini svg{width:62%;height:auto}
.item .nm{font-size:.92rem;line-height:1.35}
.item .un{font-size:.76rem;color:var(--tinta3)}
.qt{display:flex;align-items:center;gap:.15rem;border:1px solid var(--linha);border-radius:999px;padding:.13rem}
.qt button{width:25px;height:25px;border:0;background:none;cursor:pointer;border-radius:50%;color:var(--tinta2);font-size:.95rem;line-height:1}
.qt button:hover{background:var(--papel3);color:var(--ametista)}
.qt span{min-width:20px;text-align:center;font-size:.85rem}
.vazio{text-align:center;color:var(--tinta3);padding:3rem 1rem;font-size:.92rem}
.vazio .icobig{display:block;margin:0 auto 1rem;color:var(--linha);line-height:0}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem}
.tot .v{font-family:var(--serif);font-size:1.85rem;color:var(--ametista)}
.portes{font-size:.78rem;color:var(--tinta3);margin:0 0 1.1rem}

/* ======================================================================
   CONSULTAS — o único bloco em registo noturno
   ==================================================================== */
.noite{background:var(--noite);color:#F2E8F8;position:relative;overflow:hidden}
.noite::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 18% 0%,rgba(107,63,166,.5),transparent 55%),
             radial-gradient(ellipse at 88% 100%,rgba(184,145,63,.16),transparent 52%);
}
.noite .wrap{position:relative;z-index:2}
.noite h2,.noite h3{color:#F7F0FB}
.noite .lead{color:#C7B2E0}
.noite .eyebrow{color:var(--ouro-cl)}

/* cartas de tarot que viram em 3D */
.cartas{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.3rem;margin-top:2.6rem}
.carta{perspective:1100px;aspect-ratio:5/7.4;cursor:pointer;background:none;border:0;padding:0;font-family:inherit;text-align:left}
.carta .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .78s cubic-bezier(.3,.85,.3,1)}
.carta:hover .in,.carta:focus-visible .in,.carta.vira .in{transform:rotateY(180deg)}
.carta .fr,.carta .bk{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;
  padding:1.4rem 1.2rem;display:flex;flex-direction:column;
  border:1px solid var(--linha-noite);
}
.carta .fr{
  background:linear-gradient(160deg,var(--noite2),#1C0B29);
  align-items:center;justify-content:center;text-align:center;gap:1rem;
}
.carta .fr svg{width:56%;height:auto;opacity:.85}
.carta .fr .t{font-family:var(--serif);font-size:1.28rem;color:#F5EEFA;line-height:1.2;text-wrap:balance}
.carta .fr .m{font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro-cl)}
.carta .bk{
  background:linear-gradient(160deg,var(--ametista-esc),#2B1240);transform:rotateY(180deg);
  justify-content:space-between;
}
.carta .bk p{font-size:.87rem;color:#DDCFEC;line-height:1.6;margin:0}
.carta .bk .pr{font-family:var(--serif);font-size:1.9rem;color:var(--ouro-cl);line-height:1}
.carta .bk .dur{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#BAA3D2}
.carta .bk .go{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#F5EEFA;border-top:1px solid var(--linha-noite);padding-top:.7rem;margin-top:.7rem}
.girar{font-size:.72rem;color:#A790BE;margin-top:1.4rem;letter-spacing:.05em}

/* ------------------------------------------------------------ terapeutas */
.equipa{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.4rem;margin-top:2.4rem}
.tp{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:1.8rem 1.5rem;text-align:center;transition:transform .35s,box-shadow .35s}
.tp:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.tp .av{
  width:82px;height:82px;margin:0 auto 1.1rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:1.75rem;color:#fff;letter-spacing:.06em;
  box-shadow:0 0 0 1px var(--papel),0 0 0 3px var(--ring,var(--ametista));
}
.tp h3{font-size:1.32rem;margin:0 0 .2rem}
.tp .pp{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ouro);margin:0 0 .9rem}
.tp .bi{font-size:.87rem;color:var(--tinta2);line-height:1.6;margin:0 0 1.2rem}
.dias{display:flex;gap:.28rem;justify-content:center;margin-bottom:1.1rem}
.dias i{
  width:27px;height:27px;display:grid;place-items:center;border-radius:50%;
  font-style:normal;font-size:.66rem;letter-spacing:.02em;
  background:var(--papel2);color:var(--tinta3);border:1px solid var(--linha);
}
.dias i.sim{background:var(--ametista);color:#fff;border-color:var(--ametista)}

/* ======================================================================
   MARCAÇÕES — assistente de 5 passos
   ==================================================================== */
.marc{background:var(--papel2)}
.passos{display:flex;gap:.4rem;margin:2.2rem 0 2rem;flex-wrap:wrap}
.passos div{
  flex:1;min-width:104px;border-top:2px solid var(--linha);padding-top:.7rem;
  font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta3);
  transition:color .3s,border-color .3s;
}
.passos div.on{border-color:var(--ametista);color:var(--ametista)}
.passos div.ok{border-color:var(--ouro);color:var(--ouro)}
.painel{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:clamp(1.4rem,4vw,2.6rem);box-shadow:var(--sombra)}
.passo{display:none;animation:entra .45s cubic-bezier(.2,.7,.3,1)}
.passo.on{display:block}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.85rem;margin:1.6rem 0}
.opc{
  background:var(--papel);border:1px solid var(--linha);border-radius:11px;
  padding:1.1rem 1.2rem;cursor:pointer;text-align:left;font-family:inherit;
  transition:all .25s;position:relative;
}
.opc:hover{border-color:var(--ametista-cl);background:var(--papel3)}
.opc.on{border-color:var(--ametista);background:var(--papel3);box-shadow:0 0 0 1px var(--ametista)}
.opc .t{font-family:var(--serif);font-size:1.2rem;color:var(--tinta);display:block;margin-bottom:.2rem}
.opc .s{font-size:.8rem;color:var(--tinta3);line-height:1.5;display:block}
.opc .p{position:absolute;top:1.1rem;right:1.2rem;font-family:var(--serif);font-size:1.25rem;color:var(--ametista)}
.opc[disabled]{opacity:.42;cursor:not-allowed}
.opc[disabled]:hover{border-color:var(--linha);background:var(--papel)}

/* calendário */
/* max-width: sem ele, num painel largo cada célula fica com 145 px de altura
   por causa do aspect-ratio, e o calendário come o ecrã todo */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;margin:1.4rem 0;max-width:480px}
.cal .dh{text-align:center;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta3);padding:.4rem 0}
.cal button{
  aspect-ratio:1/1;min-height:44px;border:1px solid var(--linha);background:var(--papel);
  border-radius:9px;cursor:pointer;font-family:var(--sans);font-size:.88rem;color:var(--tinta);
  display:grid;place-items:center;transition:all .2s;position:relative;
}
.cal button:hover:not([disabled]){border-color:var(--ametista);background:var(--papel3)}
.cal button.on{background:var(--ametista);border-color:var(--ametista);color:#fff}
.cal button[disabled]{opacity:.26;cursor:not-allowed;background:var(--papel2)}
.cal button.livre::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--ouro)}
.cal button.on::after{background:#fff}
.cal .vaz{border:0;background:none;pointer-events:none}
.mescab{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.4rem;max-width:480px}
.mescab strong{font-family:var(--serif);font-size:1.3rem;font-weight:400}
.mescab button{background:none;border:1px solid var(--linha);border-radius:50%;width:34px;height:34px;cursor:pointer;color:var(--tinta2);transition:all .2s}
.mescab button:hover:not([disabled]){border-color:var(--ametista);color:var(--ametista)}
.mescab button[disabled]{opacity:.3;cursor:not-allowed}
.horas{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
.horas button{
  border:1px solid var(--linha);background:var(--papel);border-radius:999px;
  padding:.6rem 1.15rem;cursor:pointer;font-family:var(--sans);font-size:.85rem;
  color:var(--tinta);transition:all .2s;
}
.horas button:hover{border-color:var(--ametista);background:var(--papel3)}
.horas button.on{background:var(--ametista);border-color:var(--ametista);color:#fff}

/* formulário */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo.full{grid-column:1/-1}
.campo label{font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2)}
.campo input,.campo textarea,.campo select{
  border:1px solid var(--linha);border-radius:9px;padding:.8rem .95rem;
  font-family:var(--sans);font-size:.95rem;font-weight:400;color:var(--tinta);
  background:var(--papel);transition:border-color .2s,box-shadow .2s;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:0;border-color:var(--ametista);box-shadow:0 0 0 3px rgba(107,63,166,.13)}
.campo textarea{resize:vertical;min-height:88px}
.erro{color:#A3302B;font-size:.78rem;margin:.2rem 0 0}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.83rem;color:var(--tinta2);line-height:1.55}
.check input{margin-top:.3rem;accent-color:var(--ametista);width:16px;height:16px;flex:0 0 auto}

.resumo{background:var(--papel3);border-radius:11px;padding:1.4rem 1.5rem;margin:1.5rem 0}
.resumo dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.3rem;margin:0}
.resumo dt{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta3);align-self:center}
.resumo dd{margin:0;font-size:.98rem;text-align:right}
.resumo .tt{border-top:1px solid var(--ametista-cl);margin-top:.9rem;padding-top:.9rem;display:flex;justify-content:space-between;align-items:baseline}
.resumo .tt b{font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta2)}
.resumo .tt span{font-family:var(--serif);font-size:1.8rem;color:var(--ametista)}
.navp{display:flex;gap:.8rem;justify-content:space-between;margin-top:1.8rem;flex-wrap:wrap}

.feito{text-align:center;padding:2rem 1rem}
.feito .ok{width:66px;height:66px;margin:0 auto 1.4rem;border-radius:50%;background:var(--ametista);display:grid;place-items:center}
.feito .ok svg{width:32px;height:32px}
.feito h3{font-size:1.9rem}


/* -------------------------------------------- como funciona a consulta online
   Aparece no passo do pagamento e na confirmação. É a altura em que a pessoa
   quer saber o que lhe acontece a seguir, e é o que evita metade dos
   telefonemas a perguntar "então e agora?". */
.comofunciona{
  background:var(--papel3);border:1px solid var(--ametista-cl);border-radius:11px;
  padding:1.3rem 1.5rem;margin:0 0 1.4rem;
}
.comofunciona h4{font-size:1.15rem;margin:0 0 1rem;color:var(--ametista-esc)}
.comofunciona ol{list-style:none;padding:0;margin:0;counter-reset:cf}
.comofunciona li{
  counter-increment:cf;position:relative;padding-left:2.3rem;margin-bottom:.9rem;
  font-size:.9rem;line-height:1.55;
}
.comofunciona li:last-child{margin-bottom:0}
.comofunciona li::before{
  content:counter(cf);position:absolute;left:0;top:-.05rem;
  width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:50%;
  background:var(--ametista);color:#fff;font-size:.72rem;
}
.comofunciona li b{display:block;font-weight:500;color:var(--tinta)}
.comofunciona li span{color:var(--tinta2)}
.comofunciona .nota{
  font-size:.82rem;color:var(--tinta3);margin:1rem 0 0;padding-top:.9rem;
  border-top:1px solid var(--ametista-cl);
}
/* na confirmação vive sobre papel claro, não sobre o painel */
#comoFeito .comofunciona{background:var(--papel2);border-color:var(--linha)}

/* ------------------------------------------------------------ testemunhos */
/* três colunas, nunca quatro: são seis testemunhos e a quatro ficavam 4+2,
   com a segunda fila estreita e o texto a partir-se de duas em duas palavras */
.tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem;margin-top:2.4rem}
.tst{background:var(--papel);border:1px solid var(--linha);border-left:2px solid var(--ouro);border-radius:0 var(--raio) var(--raio) 0;padding:1.5rem 1.6rem}
.tst p{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--tinta);line-height:1.55;margin:0 0 .9rem}
.tst cite{font-style:normal;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--tinta3)}

/* -------------------------------------------------------------------- FAQ */
.faq{max-width:820px}
details{border-bottom:1px solid var(--linha);padding:.3rem 0}
summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-family:var(--serif);font-size:1.24rem;color:var(--tinta);
}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.5rem;top:50%;width:9px;height:9px;
  border-right:1px solid var(--ametista);border-bottom:1px solid var(--ametista);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details .an{padding:0 0 1.3rem;color:var(--tinta2);font-size:.95rem;max-width:66ch}

/* --------------------------------------------------------------- contacto */
.cont{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.5rem)}
.destaque{background:var(--noite);color:#F2E8F8;border-radius:var(--raio);padding:2.2rem 2rem;box-shadow:var(--sombra)}
.destaque h3{color:#F7F0FB;margin-bottom:1.2rem}
.destaque .tel{font-family:var(--serif);font-size:clamp(1.75rem,4.4vw,2.5rem);color:var(--ouro-cl);text-decoration:none;display:block;margin-bottom:.4rem;white-space:nowrap}
.destaque ul{list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:.6rem}
.destaque li{font-size:.89rem;color:#CDB8DD;display:flex;gap:.6rem;align-items:flex-start}
.destaque li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--ouro);margin-top:.6rem}
.redes{display:flex;gap:.6rem;margin-top:1.4rem}
.redes a{width:40px;height:40px;border:1px solid var(--linha-noite);border-radius:50%;display:grid;place-items:center;transition:all .25s}
.redes a:hover{background:var(--ametista);border-color:var(--ametista)}
.redes svg{width:17px;height:17px;fill:#DACBE8}
.redes a:hover svg{fill:#fff}
.passosc{list-style:none;padding:0;margin:1.6rem 0 0;counter-reset:p}
.passosc li{counter-increment:p;position:relative;padding-left:3rem;margin-bottom:1.4rem}
.passosc li::before{
  content:counter(p,decimal-leading-zero);position:absolute;left:0;top:-.15rem;
  font-family:var(--serif);font-size:1.35rem;color:var(--ouro-cl);
}
.passosc b{display:block;font-weight:400;font-family:var(--serif);font-size:1.2rem;margin-bottom:.15rem}
.passosc p{font-size:.89rem;color:var(--tinta2);margin:0}


/* ======================================================================
   PÁGINAS INTERIORES
   A capa a ecrã inteiro fica só na entrada. As outras cinco abrem com um
   .pagetop mais baixo, no mesmo registo noturno — dá continuidade sem
   obrigar a descer meio ecrã de cada vez que se muda de página.
   ==================================================================== */
body.interior #folha{margin-top:0;box-shadow:none}
/* nas interiores não há capa por baixo, por isso o cabeçalho está sempre lá */
body.interior #topo{transform:none}

.pagetop{
  position:relative;overflow:hidden;background:var(--noite);color:#F2E8F8;
  padding:calc(64px + clamp(2.6rem,6vw,4.4rem)) 0 clamp(2.6rem,6vw,4.4rem);
}
.pagetop::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 22% 0%,rgba(107,63,166,.55),transparent 58%),
             radial-gradient(ellipse at 86% 110%,rgba(184,145,63,.16),transparent 54%);
}
.pagetop .wrap{position:relative;z-index:2}
.pagetop .eyebrow{color:var(--ouro-cl);margin-bottom:.9rem}
.pagetop h1{font-weight:600;font-size:clamp(2.1rem,5.4vw,3.6rem);color:#F7F0FB;margin:0 0 1.1rem}
.pagetop .lead{color:#C7B2E0;max-width:62ch;margin:0}

/* a secção logo a seguir ao .pagetop não precisa do padding de topo inteiro */
.pagetop + section{padding-top:clamp(2.6rem,6vw,4.5rem)}
/* Quando a secção noturna vem logo a seguir ao pagetop, os dois brilhos
   encontram-se e desenha-se uma linha à vista a meio do escuro. Tira-se o
   brilho de cima da segunda e os dois passam a ler-se como um só bloco. */
.pagetop + .noite{padding-top:clamp(1.4rem,3.5vw,2.6rem)}
.pagetop + .noite::before{
  background:radial-gradient(ellipse at 86% 100%,rgba(184,145,63,.16),transparent 52%);
}

/* ------------------------------------------------------------------ rodapé */
body>footer{background:var(--noite);color:#B69BD0;padding:3.5rem 0 2.2rem;font-size:.83rem}
body>footer .wrap{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:flex-start}
body>footer a{color:#DACBE8}
body>footer .lg{font-family:var(--serif);font-size:1.5rem;letter-spacing:.2em;color:#F5EEFA;display:block;margin-bottom:.5rem;text-indent:.2em}
body>footer .lg i{font-style:normal;color:var(--ouro)}
.legal{border-top:1px solid var(--linha-noite);margin-top:2.4rem;padding-top:1.4rem;font-size:.75rem;color:#8E76A5;line-height:1.7}

/* ================================================================ telemóvel
   A correcção do menu que faltava nos outros sites: abaixo dos 900 px o nav
   sai da barra e passa a painel deslizante, senão os itens partem-se ao meio.
   ==================================================================== */
@media(max-width:980px){
  .hero,.cont{grid-template-columns:1fr}
  .heroart{aspect-ratio:16/11;order:-1}
  .faixa .wrap{grid-template-columns:1fr 1fr;gap:1.2rem}
  .campos{grid-template-columns:1fr}
}
@media(max-width:1060px){
  #burger{display:block}
  /* O `backdrop-filter` cria bloco de referência para os filhos `position:fixed`.
     Com ele, a gaveta do menu ficava presa dentro da barra do cabeçalho — via-se
     só o primeiro item e o resto era cortado. Aqui em baixo o fundo passa a
     opaco (que até se lê melhor no telemóvel) e a gaveta volta a medir-se pelo
     ecrã. Mesma família do bug do `[hidden]` no painel. */
  #topo{backdrop-filter:none;background:var(--papel)}
  #topo nav{
    position:fixed;top:0;right:0;bottom:0;width:min(300px,84%);
    background:var(--papel);border-left:1px solid var(--linha);
    flex-direction:column;gap:0;padding:5.2rem 1.6rem 2rem;margin:0;
    transform:translateX(101%);transition:transform .38s cubic-bezier(.3,.8,.3,1);
    box-shadow:-20px 0 50px -20px rgba(43,26,60,.3);overflow-y:auto;
  }
  #topo nav.on{transform:none}
  #topo nav a{
    flex-direction:row;justify-content:flex-start;gap:.9rem;
    padding:1rem .4rem;border-bottom:1px solid var(--linha);border-radius:0;
    font-size:.74rem;white-space:normal;
  }
  #topo nav a.on::after{width:auto;height:auto;margin-left:auto;background:none;
    content:"";border-right:1px solid var(--ouro);border-top:1px solid var(--ouro);
    width:7px;height:7px;transform:rotate(45deg)}
  #topo nav a:hover .nico{transform:none}
  .cartbtn{margin-left:auto;order:2}
  #burger{order:3;margin-left:.5rem}
}
@media(max-width:620px){
  body{font-size:16px}
  .cover .mark{letter-spacing:.13em;text-indent:.13em}
  .faixa .wrap{grid-template-columns:1fr}
  .grelha{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
  .card .bd{padding:.9rem}
  .card h4{font-size:1rem}
  .card .ds{display:none}
  .cartas{grid-template-columns:1fr 1fr;gap:.8rem}
  .opcoes{grid-template-columns:1fr}
  .passos div{min-width:0;flex:1 1 30%;font-size:.58rem;letter-spacing:.1em}
  /* as células do calendário não podem descer dos 40 px ou não se acerta nelas */
  .wrap{width:calc(100% - 1.6rem)}
  .painel{padding:1.1rem}
  .cal{gap:.22rem}
  .cal button{min-height:40px;font-size:.8rem}
  .resumo{padding:1.1rem}
  .resumo dl{grid-template-columns:1fr;gap:.15rem .6rem}
  .resumo dd{text-align:left;margin-bottom:.5rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .cover .rule{width:min(340px,68vw);animation:none}
}

/* ---- mensagens do caminho de leitura (28/08/2026) -------------------------
   Duas situacoes que so existem com a base de dados ligada: o dia sem horas
   livres, e a agenda que nao respondeu. Sao raras, mas se aparecerem sem
   estilo nenhum parecem um erro do site em vez de uma informacao.            */
.semhoras{
  grid-column:1/-1; margin:0; padding:.9rem 0;
  font-size:.9rem; color:var(--tinta-fraca,#9585A8); text-align:center;
}
.falha{
  grid-column:1/-1; margin:0; padding:1.6rem 1.4rem;
  border:1px solid #E3CE7C; border-radius:10px; background:#FCF3D4;
  color:#8A6414; font-size:.95rem; line-height:1.6; text-align:center;
}

/* ==========================================================================
   PÁGINA SOBRE (28/08/2026)

   Uma nota sobre as animações: o site já tem o `.rv` (revelar ao entrar no
   ecrã) e é ele que faz o trabalho pesado. O que se acrescenta aqui é
   movimento CONTÍNUO, e só em dois sítios — a moldura do retrato e o brilho
   dos espaços por preencher. Movimento contínuo a mais numa página que se lê
   com calma trabalha contra o registo da casa.

   Tudo isto pára com `prefers-reduced-motion`, no fim do bloco.
   ====================================================================== */

/* ---- retrato e história, lado a lado ---------------------------------- */
.sobregrid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start; margin-top:2.6rem;
}
@media (max-width:820px){ .sobregrid{grid-template-columns:1fr; gap:2.4rem} }

.retrato{
  width:100%; height:auto; border-radius:14px; display:block;
  box-shadow:0 18px 50px rgba(43,26,60,.18);
}

/* A moldura é o que ocupa o lugar do retrato enquanto ele não existe. Tem de
   parecer intencional e não partido — daí o monograma e o anel dourado. */
.moldura{
  margin:0; aspect-ratio:3/4; border-radius:14px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; text-align:center;
  background:linear-gradient(160deg,#F4ECF9 0%,#E8DFF2 55%,#ECE6F0 100%);
  border:1px solid #DCCFEA;
  animation:flutua 9s ease-in-out infinite;
}
.moldura::before{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg,transparent 0 65%,rgba(184,145,63,.20) 78%,transparent 88% 100%);
  animation:gira 14s linear infinite;
}
.moldura .mono{
  position:relative; font-family:var(--serif,Cormorant,Georgia,serif);
  font-size:clamp(3.4rem,9vw,5.2rem); letter-spacing:.14em; color:#6B3FA6; line-height:1;
}
.moldura .mono i{font-style:normal;color:#B8913F}
.moldura figcaption{
  position:relative; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:#836D96; line-height:1.9;
}
.moldura figcaption small{font-size:.72rem; letter-spacing:.06em; text-transform:none; opacity:.8}

@keyframes flutua{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes gira{ to{transform:rotate(360deg)} }

/* ---- a citação dela ---------------------------------------------------- */
.cit{
  margin:1.8rem 0; padding:.2rem 0 .2rem 1.5rem;
  border-left:2px solid #B8913F;
  font-family:var(--serif,Cormorant,Georgia,serif);
  font-size:clamp(1.18rem,2.3vw,1.45rem); line-height:1.55; color:#49315F;
}

/* ---- a essência, nos cartões sobre fundo escuro ------------------------ */
.essgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.2rem; margin-top:2.8rem;
}
.essc{
  padding:1.7rem 1.5rem; border-radius:13px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  transition:border-color .5s ease, background .5s ease, transform .5s ease;
}
.essc:hover{ background:rgba(255,255,255,.08); border-color:rgba(184,145,63,.5); transform:translateY(-4px) }
.essc .num{
  display:block; font-size:.74rem; letter-spacing:.22em; color:#B8913F; margin-bottom:.9rem;
}
.essc h3{margin:0 0 .6rem; font-size:1.06rem}
.essc p{margin:0; font-size:.92rem; line-height:1.75; opacity:.82}

/* ---- os quatro passos do acompanhamento ------------------------------- */
.passosc.acomp{margin-top:2.6rem}
.passosc.acomp li{transition:transform .45s ease}
.passosc.acomp li:hover{transform:translateX(5px)}

/* ---- a galeria do espaço ---------------------------------------------- */
.galeria{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem; margin-top:2.6rem;
}
.galeria figure{
  margin:0; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  transition:transform .5s ease, box-shadow .5s ease;
}
.galeria figure:hover{transform:translateY(-5px); box-shadow:0 16px 38px rgba(43,26,60,.16)}
.galeria img{width:100%; height:100%; object-fit:cover; display:block}

/* Um espaço por preencher tem de se ler como "falta aqui uma fotografia", e
   não como um erro de carregamento. O brilho lento diz isso sem palavras. */
.porvir{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.35rem; text-align:center;
  background:linear-gradient(110deg,#F1EAE4 0%,#F8F3EE 45%,#F1EAE4 90%);
  background-size:280% 100%; border:1px dashed #D9C9BC; color:#9585A8;
  animation:brilho 5.5s ease-in-out infinite;
}
.galeria .porvir span{font-size:.86rem; letter-spacing:.04em; color:#6E5C79}
.galeria .porvir small{font-size:.7rem; letter-spacing:.14em; opacity:.7}
@keyframes brilho{ 0%,100%{background-position:0% 0} 50%{background-position:100% 0} }

/* ---- o fecho ----------------------------------------------------------- */
#fechosobre .faixa{margin-top:0}
.cta{
  margin-top:clamp(3rem,7vw,5rem); padding:clamp(2.2rem,5vw,3.4rem);
  border-radius:16px; text-align:center;
  background:linear-gradient(150deg,#F6EFF9 0%,#F4EBE3 100%);
  border:1px solid #E6D9EE;
}
.cta h2{margin:0 0 .7rem}
.cta .lead{margin:0 auto 1.9rem; max-width:46ch}
.botoes{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin:0}

/* ---- quem prefere o ecrã quieto --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .moldura, .moldura::before, .porvir{animation:none}
  .essc, .galeria figure, .passosc.acomp li{transition:none}
  .essc:hover, .galeria figure:hover, .passosc.acomp li:hover{transform:none}
}

/* ==========================================================================
   VOLTA ESTÉTICA — 28/08/2026

   Oito coisas, e a regra que as governa: nenhuma delas grita. O registo da
   casa é de calma, e movimento a mais numa página que promete "tempo para
   parar" trabalha contra o que ela diz. Tudo o que se mexe aqui é lento.
   ====================================================================== */

/* ---- 1. O HALO VIOLETA ---------------------------------------------------
   O papel deixou de ser creme e passou a creme com sangue de ametista. Por
   cima, um halo no topo de cada página: não se vê, sente-se. É o que tira o
   aspecto de folha branca sem escurecer nada.                              */
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:78vh; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(107,63,166,.13), transparent 70%),
    radial-gradient(ellipse 60% 48% at 92% 4%, rgba(191,162,228,.11), transparent 72%);
}
body > *{position:relative; z-index:1}

/* Manchas que respiram por trás das secções claras. É o efeito que dá "caro"
   a uma página, e custa dezasseis linhas. */
section{position:relative}
.malha{position:relative; overflow:hidden}
.malha::before{
  content:""; position:absolute; width:60vw; height:60vw; max-width:760px; max-height:760px;
  left:-14vw; top:-24%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(107,63,166,.14), transparent 66%);
  filter:blur(30px); animation:respira 22s ease-in-out infinite;
}
.malha::after{
  content:""; position:absolute; width:46vw; height:46vw; max-width:560px; max-height:560px;
  right:-10vw; bottom:-22%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(184,145,63,.10), transparent 68%);
  filter:blur(34px); animation:respira 27s ease-in-out infinite reverse;
}
.malha .wrap{position:relative; z-index:2}
@keyframes respira{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(3%,4%,0) scale(1.09)}
}

/* ---- 3. O TERCEIRO VIOLETA ----------------------------------------------
   Um só tom lê-se como pobre. A uva profunda entra nos fundos escuros, e a
   noite passa a ter duas camadas em vez de uma chapa.                       */
/* O gradiente de uva ficou pior na seccao das cartas de tarot: o fundo
   deixava de ser uma noite quieta e passava a ter uma banda no meio, e as
   cartas perdiam contraste. O terceiro violeta fica so nas OUTRAS seccoes
   escuras — a das cartas volta ao fundo chapado, como estava. */
.noite:not(#consultas){background:linear-gradient(168deg, var(--noite) 0%, var(--uva) 62%, var(--noite2) 100%)}
#consultas.noite{background:var(--noite)}

/* ---- 12. CANTOS ASSIMÉTRICOS --------------------------------------------
   4 px em três cantos e 26 px no de cima à esquerda. Sente-se e não se
   identifica — que é exactamente o que um detalhe deve fazer.               */
.card, .tst, .essc, .destaque, .cta, .galeria figure, .moldura, .opc{
  border-radius:26px 6px 6px 6px;
}

/* ---- 5. INCLINAÇÃO 3D ---------------------------------------------------
   O cartão roda a seguir o cursor. As variáveis vêm do rato, por JavaScript;
   sem ele fica tudo quieto e igual. Seis graus é o limite: mais do que isso
   passa a truque.
   NÃO se aplica às cartas de tarot — essas já viram em 3D e a soma dava
   um efeito tonto.                                                          */
.pilar, .card, .essc, .destaque, .cta, .passosc.acomp li{transform-style:preserve-3d; will-change:transform}
@media (hover:hover) and (pointer:fine){
  .pilar, .card, .essc, .destaque, .cta, .passosc.acomp li{
    transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  }
  .pilar:hover, .card:hover, .essc:hover, .destaque:hover, .cta:hover{
    transition:transform .12s ease-out, box-shadow .4s ease;
    box-shadow:0 26px 60px -28px rgba(74,40,120,.55);
  }
}

/* ---- 11. O FILETE DOURADO ------------------------------------------------
   Preenche-se da esquerda quando o título entra no ecrã. Amarra o ouro do
   logótipo ao resto da página, que de outra forma só o tem no cesto.        */
.eyebrow{position:relative; padding-bottom:.55rem}
.eyebrow::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:linear-gradient(90deg, var(--ouro), transparent);
  transition:width 1.1s cubic-bezier(.2,.7,.2,1) .15s;
}
.rv.in .eyebrow::after, .in > .eyebrow::after, .eyebrow.in::after{width:74px}
.noite .eyebrow::after{background:linear-gradient(90deg, var(--ouro-cl), transparent)}

/* ---- 8. O CARROSSEL DE TESTEMUNHOS --------------------------------------
   O efeito do componente em React, feito no sistema que já existe: sem
   dependências, sem compilação, 40 linhas. Duas cópias da lista a correr em
   fila; quando a primeira acaba, a segunda está exactamente no lugar dela e
   o salto não se vê. Pára ao passar o rato, para se poder ler.             */
.marquee{position:relative; overflow:hidden; margin-top:2.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee .fita{display:flex; width:max-content; gap:1.2rem; animation:desliza 52s linear infinite}
.marquee:hover .fita, .marquee:focus-within .fita{animation-play-state:paused}
.marquee .tst{flex:0 0 clamp(260px,78vw,340px); margin:0}
@keyframes desliza{ from{transform:translate3d(0,0,0)} to{transform:translate3d(calc(-50% - .6rem),0,0)} }

/* As aspas gigantes por trás de cada testemunho (ideia 14, que veio de graça
   com o carrossel). */
.tst{position:relative; overflow:hidden}
.tst::before{
  content:"\201C"; position:absolute; right:-.6rem; top:-2.6rem;
  font-family:var(--serif); font-size:9rem; line-height:1;
  color:var(--ametista); opacity:.08; pointer-events:none;
}
.noite .tst{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); border-left-color:var(--ouro)}
.noite .tst p{color:#F6EFFA}
.noite .tst cite{color:#B49FC9}
.noite .tst::before{color:#fff; opacity:.07}

/* ---- 15. ESTADOS DE ESPERA ----------------------------------------------
   É aqui que os sites parecem partidos: o calendário demora meio segundo a
   responder e a pessoa vê um buraco branco. Um esqueleto a pulsar diz "está
   a chegar" sem uma única palavra.                                          */
.esq{
  border-radius:8px; min-height:1rem;
  background:linear-gradient(100deg, rgba(107,63,166,.07) 30%, rgba(107,63,166,.15) 50%, rgba(107,63,166,.07) 70%);
  background-size:220% 100%; animation:esqueleto 1.5s ease-in-out infinite;
}
.esq + .esq{margin-top:.55rem}
.esqbloco{display:grid; gap:.55rem; padding:.4rem 0}
.esqbloco .esq:nth-child(1){height:2.4rem}
.esqbloco .esq:nth-child(2){height:2.4rem; opacity:.8}
.esqbloco .esq:nth-child(3){height:2.4rem; opacity:.6}
@keyframes esqueleto{ 0%{background-position:120% 0} 100%{background-position:-20% 0} }

/* ---- e para quem prefere o ecrã quieto ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  .malha::before, .malha::after, .marquee .fita, .esq{animation:none}
  .pilar, .card, .essc, .destaque, .cta, .passosc.acomp li{transition:none; transform:none}
  .eyebrow::after{transition:none; width:74px}
}

/* ==========================================================================
   ORNAMENTO ESOTÉRICO — 29/08/2026

   Cinco peças que preenchem os vazios: roda zodiacal, cartas suspensas, fases
   da lua, constelação e mesa radiónica. Todas em SVG e transformações 3D do
   CSS — nada de WebGL. Numa página que promete "tempo para parar", uma cena
   3D pesada contradiz o que a página diz, e come bateria no telemóvel.

   O desenho vive no js/app.js (ARTE_DECO) e entra por `<div data-deco="...">`,
   para não haver quinhentas linhas de SVG repetidas em seis ficheiros.

   REGRA: nenhuma destas peças pode ser precisa para se perceber a página.
   São textura. Se o JavaScript falhar, não falta nada.
   ====================================================================== */

.deco{position:absolute; pointer-events:none; z-index:0; opacity:0; transition:opacity 1.6s ease}
.deco.in{opacity:1}
.deco svg{display:block; width:100%; height:auto}
.noite .deco{--traco:#C9A9E8; --brilho:#E4CE9A}
.deco{--traco:#6B3FA6; --brilho:#B8913F}

/* ---- 1. RODA ZODIACAL ---------------------------------------------------
   Uma volta em três minutos. A esse ritmo não se vê andar — vê-se que está
   noutro sítio quando se volta a olhar, que é o efeito que se quer.        */
.deco-zodiaco{width:min(58vw,560px); right:-14%; top:50%; transform:translateY(-50%)}
.deco-zodiaco svg{animation:roda 180s linear infinite; opacity:.5}
.deco-zodiaco .interior{animation:roda 240s linear infinite reverse; transform-origin:center}
@keyframes roda{to{transform:rotate(360deg)}}

/* ---- 2. CARTAS SUSPENSAS ------------------------------------------------
   Três cartas em perspectiva, a flutuar com desfasamento, e um brilho
   dourado que atravessa a face de sete em sete segundos.                   */
.deco-cartas{width:min(34vw,300px); left:-6%; bottom:6%; perspective:900px}
.deco-cartas .cta3d{transform-style:preserve-3d}
.deco-cartas .c1{animation:pairar 11s ease-in-out infinite}
.deco-cartas .c2{animation:pairar 13s ease-in-out infinite -3s}
.deco-cartas .c3{animation:pairar 15s ease-in-out infinite -6s}
@keyframes pairar{
  0%,100%{transform:translateY(0) rotateY(-13deg) rotateZ(-4deg)}
  50%    {transform:translateY(-16px) rotateY(9deg) rotateZ(2deg)}
}
.deco-cartas .luz{animation:varre 7s ease-in-out infinite}
@keyframes varre{0%,72%,100%{opacity:0; transform:translateX(-60%)} 84%{opacity:.75; transform:translateX(60%)}}

/* ---- 3. FASES DA LUA ----------------------------------------------------
   Oito luas em fila, a separar secções. A que corresponde ao dia de hoje
   acende-se a ouro — muda sozinha e ninguém percebe porquê.                */
.luas{display:flex; gap:clamp(1rem,4vw,2.6rem); justify-content:center; align-items:center;
      padding:clamp(2rem,6vw,3.6rem) 0; opacity:.6}
.luas .lua{width:clamp(15px,2.6vw,24px); height:clamp(15px,2.6vw,24px); flex:0 0 auto;
           transition:transform .8s ease, filter .8s ease}
.luas .lua.hoje{transform:scale(1.75); filter:drop-shadow(0 0 9px rgba(184,145,63,.6))}

/* ---- 4. CONSTELAÇÃO -----------------------------------------------------
   Traça-se ao entrar no ecrã, como um mapa a ser desenhado à mão. Os pontos
   acendem-se a seguir à linha que os liga.                                 */
.deco-constelacao{inset:0; width:100%; opacity:.5}
.deco-constelacao .linha{stroke-dasharray:var(--c,300); stroke-dashoffset:var(--c,300)}
.deco-constelacao.in .linha{animation:traca 2.6s ease forwards}
.deco-constelacao .ponto{opacity:0}
.deco-constelacao.in .ponto{animation:acende .9s ease forwards}
@keyframes traca{to{stroke-dashoffset:0}}
@keyframes acende{to{opacity:1}}

/* ---- 8. MESA RADIÓNICA --------------------------------------------------
   Círculos concêntricos e um ponteiro que varre, como o gráfico que ela usa
   nas limpezas. Vai atrás do serviço com esse nome.                        */
.deco-mesa{width:min(40vw,380px); right:-8%; top:8%}
.deco-mesa .anel1{animation:roda 90s linear infinite; transform-origin:center}
.deco-mesa .anel2{animation:roda 130s linear infinite reverse; transform-origin:center}
.deco-mesa .ponteiro{animation:varreponteiro 16s cubic-bezier(.45,0,.55,1) infinite; transform-origin:100px 100px}
@keyframes varreponteiro{0%,100%{transform:rotate(-58deg)} 50%{transform:rotate(58deg)}}

/* ---- as opiniões, com o peso que faltava -------------------------------- */
#opinioes{position:relative; overflow:hidden}
#opinioes h2{font-size:clamp(2rem,4.6vw,3.1rem)}
#opinioes .tst::before{opacity:.14}
.contador{font-family:var(--serif); font-size:clamp(2.6rem,7vw,4.4rem); line-height:1;
          color:var(--ouro-cl); display:block; margin-bottom:.3rem}
.contador + span{font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:#C7B2E0}

/* ---- e para quem prefere o ecrã quieto --------------------------------- */
@media (prefers-reduced-motion:reduce){
  .deco svg, .deco *{animation:none !important}
  .deco-constelacao .linha{stroke-dashoffset:0}
  .deco-constelacao .ponto{opacity:1}
}
@media (max-width:760px){
  .deco-zodiaco{width:78vw; right:-30%}
  .deco-cartas{display:none}   /* num ecrã estreito só rouba espaço ao texto */
  .deco-mesa{width:64vw; right:-24%}
}

/* ==========================================================================
   LOJA COM PESQUISA, E O SIM/NÃO DA MARCAÇÃO — 29/08/2026
   ====================================================================== */

/* ---- a loja: pesquisa e temas de lado ----------------------------------- */
.lojagrid{display:grid; grid-template-columns:210px minmax(0,1fr); gap:clamp(1.4rem,3vw,2.6rem); align-items:start}
.lojalado{position:sticky; top:96px; display:grid; gap:1rem}

.pesq{
  display:flex; align-items:center; gap:.55rem;
  background:var(--papel2); border:1px solid var(--linha);
  border-radius:26px 6px 6px 6px; padding:.62rem .8rem; color:var(--tinta3);
  transition:border-color .3s ease, background .3s ease;
}
.pesq:focus-within{border-color:var(--ametista); background:#fff; color:var(--ametista)}
.pesq input{
  border:0; background:transparent; outline:none; width:100%;
  font-family:var(--sans); font-size:.9rem; color:var(--tinta);
}
.pesq input::placeholder{color:var(--tinta3)}
.pesq input::-webkit-search-cancel-button{display:none}
.pesq button{
  border:0; background:transparent; cursor:pointer; font-size:1.15rem; line-height:1;
  color:var(--tinta3); padding:0 .1rem;
}
.pesq button:hover{color:var(--ametista)}

/* Os temas passam de fila horizontal a coluna. Com dezoito produtos a fila
   já era comprida; com quarenta seria inutilizável. */
.lojagrid .filtros{display:grid; gap:.3rem; margin:0}
.lojagrid .filtros button{
  text-align:left; width:100%; border-radius:20px 5px 5px 5px;
  padding:.5rem .85rem; font-size:.86rem;
}
.conta{margin:.2rem 0 0; font-size:.74rem; letter-spacing:.12em;
       text-transform:uppercase; color:var(--tinta3)}

@media (max-width:860px){
  .lojagrid{grid-template-columns:1fr}
  .lojalado{position:static}
  .lojagrid .filtros{grid-auto-flow:column; grid-auto-columns:max-content;
                     overflow-x:auto; padding-bottom:.4rem}
  .lojagrid .filtros button{width:auto}
}

/* ---- o sim / não -------------------------------------------------------
   Passou de um botão que se carregava ou não a duas opções à vista. Com um
   botão só, quem não lhe tocava nunca sabia se tinha respondido — e a
   resposta ficava por omissão sem a pessoa dar por isso.                    */
.perg{margin:0 0 .3rem; font-size:1.02rem; color:var(--tinta)}
.perg-s{margin:0 0 .9rem; font-size:.88rem; line-height:1.65; color:var(--tinta2); max-width:56ch}
.simnao{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
@media (max-width:560px){ .simnao{grid-template-columns:1fr} }

/* ==========================================================================
   LIGAÇÕES DIRECTAS, TARJA MAIS LEVE — 29/08/2026
   ====================================================================== */

/* ---- Instagram e WhatsApp, em grande ------------------------------------
   Enquanto o telefone não estiver confirmado, estes dois são o único caminho
   até ela. Por isso são botões grandes e não ícones de rodapé.
   Nas cores da casa, e não nas das marcas: um verde de WhatsApp aqui dentro
   partia a paleta toda por um ganho de reconhecimento que ninguém precisa —
   o ícone já é reconhecível sozinho.                                        */
.ligacoes{display:grid; gap:.7rem; margin-top:1.5rem}
.lig{
  display:flex; align-items:center; gap:.95rem; text-decoration:none;
  padding:.95rem 1.1rem; border-radius:22px 6px 6px 6px;
  border:1px solid var(--linha-noite);
  background:linear-gradient(135deg, rgba(107,63,166,.24), rgba(107,63,166,.08));
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, background .35s ease;
}
.lig:hover{
  transform:translateX(5px);
  border-color:var(--ouro); 
  background:linear-gradient(135deg, rgba(107,63,166,.38), rgba(184,145,63,.14));
}
.lig .ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.09);
  transition:background .35s ease;
}
.lig:hover .ico{background:rgba(255,255,255,.16)}
.lig .ico svg{width:20px; height:20px; fill:#EEE4F7}
.lig .txt{display:grid; gap:.12rem; min-width:0}
.lig .txt b{font-weight:400; font-size:1rem; color:#F7F0FB; letter-spacing:.02em}
.lig .txt small{font-size:.78rem; color:#BAA3D2}
.lig .seta{
  margin-left:auto; font-size:1.15rem; color:var(--ouro-cl);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.lig:hover .seta{transform:translateX(4px)}

/* Sem número não há para onde ir, e um botão que não leva a lado nenhum é
   pior do que botão nenhum. Fica apagado e diz porquê. */
.lig.porconfirmar{opacity:.45; cursor:not-allowed}
.lig.porconfirmar:hover{transform:none; border-color:var(--linha-noite)}
.lig.porconfirmar .seta{display:none}

/* ---- a tarja de aviso, mais leve ---------------------------------------
   Continua amarela, mas deixa de gritar. Estas tarjas dizem o que falta ao
   site — servem para o Eduardo e para a cliente, não para o visitante, e por
   isso não devem ser a coisa mais forte da página.                          */
.aviso{
  background:rgba(227,206,124,.13);
  border:1px solid rgba(227,206,124,.42);
  color:#7A6320;
  backdrop-filter:blur(2px);
}
.aviso b{color:#5F4A11}
.aviso .dot{background:rgba(217,180,65,.75)}
.noite .aviso{background:rgba(227,206,124,.10); border-color:rgba(227,206,124,.3); color:#E4D3A0}
.noite .aviso b{color:#F0E4BE}

/* ---- as cartas agora vivem sobre fundo claro --------------------------- */
.girar{color:var(--tinta3)}

/* ==========================================================================
   FALE CONNOSCO, E O RETRATO REDONDO — 29/08/2026
   ====================================================================== */

/* ---- a secção de contacto, refeita -------------------------------------- */
.falargrid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
           gap:clamp(1.2rem,3vw,2.2rem); align-items:start}
@media (max-width:840px){ .falargrid{grid-template-columns:1fr} }

/* As duas marcas, em grande. Enquanto o telefone não estiver confirmado, o
   Instagram e o WhatsApp SÃO o contacto — merecem meia secção, não dois
   ícones de rodapé. Nas cores da casa e não nas das marcas: o ícone já é
   reconhecível sozinho, e um verde de WhatsApp aqui partia a paleta. */
.marcas{display:grid; gap:.8rem}
.marca{
  position:relative; display:grid; grid-template-columns:auto 1fr auto;
  grid-template-areas:"ico nome seta" "ico peq seta";
  align-items:center; column-gap:1rem; row-gap:.1rem;
  padding:1.35rem 1.4rem; text-decoration:none; overflow:hidden;
  border-radius:28px 8px 8px 8px; border:1px solid var(--linha);
  background:linear-gradient(135deg, var(--papel3), var(--papel2));
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.marca::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .45s ease;
  background:linear-gradient(135deg, rgba(107,63,166,.16), rgba(184,145,63,.10));
}
.marca:hover{transform:translateY(-3px); border-color:var(--ametista);
             box-shadow:0 20px 44px -26px rgba(74,40,120,.6)}
.marca:hover::before{opacity:1}
.marca > *{position:relative; z-index:1}
.mico{
  grid-area:ico; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--ametista); transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.marca:hover .mico{transform:scale(1.07) rotate(-5deg)}
.mico svg{width:27px; height:27px; fill:#fff}
.marca b{grid-area:nome; font-weight:400; font-size:1.12rem; color:var(--tinta); letter-spacing:.02em}
.marca small{grid-area:peq; font-size:.84rem; color:var(--tinta2)}
.mseta{grid-area:seta; font-size:1.3rem; color:var(--ouro);
       transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.marca:hover .mseta{transform:translateX(5px)}

.marca.porconfirmar{opacity:.5}
.marca.porconfirmar:hover{transform:none; border-color:var(--linha); box-shadow:none}
.marca.porconfirmar .mseta{display:none}

/* O cartão violeta: morada, telefone e o resto que ela ainda não deu. */
.cartaovioleta{
  border-radius:30px 8px 8px 8px; padding:clamp(1.6rem,3.4vw,2.2rem);
  background:linear-gradient(158deg, var(--ametista-esc) 0%, var(--uva) 60%, var(--noite) 100%);
  color:#E9DFF3; position:relative; overflow:hidden;
  box-shadow:0 24px 56px -30px rgba(74,40,120,.75);
}
.cartaovioleta::after{
  content:""; position:absolute; right:-30%; top:-40%; width:80%; height:120%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(184,145,63,.20), transparent 66%);
}
.cartaovioleta > *{position:relative; z-index:1}
.cartaovioleta .ct{margin:0 0 .9rem; font-size:.72rem; letter-spacing:.22em;
                   text-transform:uppercase; color:var(--ouro-cl)}
.cartaovioleta .mor{margin:0 0 1rem; font-family:var(--serif); font-size:1.3rem;
                    line-height:1.4; color:#F7F0FB}
.cartaovioleta .tel{
  display:inline-block; font-family:var(--serif); font-size:1.75rem; line-height:1.2;
  color:var(--ouro-cl); text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.cartaovioleta .tel:hover{border-bottom-color:var(--ouro-cl)}
.cartaovioleta .linhas{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.5rem}
.cartaovioleta .linhas li{position:relative; padding-left:1.1rem; font-size:.88rem; color:#C9B6DC}
.cartaovioleta .linhas li::before{
  content:""; position:absolute; left:0; top:.55rem; width:5px; height:5px;
  border-radius:50%; background:var(--ouro);
}
.cartaovioleta .hor{margin:1.4rem 0 0; padding-top:1.2rem; font-size:.82rem; line-height:1.65;
                    color:#B49FC9; border-top:1px solid rgba(255,255,255,.13)}

/* ---- o retrato redondo, centrado ---------------------------------------- */
.quemcentro{display:grid; justify-items:center; text-align:center; gap:2rem; margin-top:2.4rem}
.quemtexto{max-width:64ch}
.quemtexto .eyebrow{display:inline-block}
.quemtexto .eyebrow::after{left:50%; transform:translateX(-50%)}
.quemtexto .cit{
  border-left:0; border-top:1px solid var(--ouro); border-bottom:1px solid var(--ouro);
  padding:1.2rem 0; margin:1.8rem auto; max-width:52ch; text-align:center;
}
.retrato-redondo, .redondo{
  width:clamp(180px,26vw,260px); aspect-ratio:1; border-radius:50%;
  object-fit:cover; display:block; margin:0;
  box-shadow:0 22px 54px -26px rgba(74,40,120,.6), 0 0 0 1px var(--linha), 0 0 0 9px var(--papel2);
}
.redondo{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#F4ECF9 0%,#E8DFF2 55%,#ECE6F0 100%);
  animation:flutua 9s ease-in-out infinite;
}
.redondo::before{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg,transparent 0 65%,rgba(184,145,63,.22) 78%,transparent 88% 100%);
  animation:gira 14s linear infinite;
}
.redondo .mono{position:relative; font-family:var(--serif);
               font-size:clamp(2.4rem,6vw,3.4rem); letter-spacing:.12em; color:#6B3FA6; line-height:1}
.redondo .mono i{font-style:normal; color:#B8913F}
.redondo figcaption{position:relative; font-size:.66rem; letter-spacing:.12em;
                    text-transform:uppercase; color:#836D96; line-height:1.8; padding:0 1.2rem}
.redondo figcaption small{font-size:.62rem; letter-spacing:.04em; text-transform:none; opacity:.8}

@media (prefers-reduced-motion:reduce){
  .redondo, .redondo::before{animation:none}
  .marca, .mico, .mseta{transition:none}
}

/* ==========================================================================
   A FICHA DA CONSULTA, E A BARRA DO PREÇO — 29/08/2026
   ====================================================================== */

/* ---- a ficha que abre ao carregar na carta ------------------------------
   Cresce a partir da carta onde se carregou, e não do meio do ecrã. O olho
   segue o movimento e não perde o sítio onde estava. */
.ficha{
  border:0; padding:0; background:transparent; max-width:none; max-height:none;
  width:100%; height:100%; overflow:auto;
}
.ficha::backdrop{background:rgba(43,22,64,.62); backdrop-filter:blur(5px)}
.fichacx{
  position:relative; margin:auto; width:min(880px,92vw);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  border-radius:34px 10px 10px 10px; overflow:hidden;
  background:var(--papel); box-shadow:0 40px 90px -40px rgba(43,22,64,.7);
  animation:abreficha .42s cubic-bezier(.2,.75,.25,1);
  transform-origin:var(--ox,50vw) var(--oy,50vh);
}
@keyframes abreficha{
  from{opacity:0; transform:scale(.72) translateY(14px)}
  to  {opacity:1; transform:scale(1) translateY(0)}
}
@media (max-width:760px){ .fichacx{grid-template-columns:1fr} }

.fichaart{
  display:grid; place-items:center; padding:clamp(2rem,5vw,3.2rem);
  background:linear-gradient(158deg, var(--noite2) 0%, var(--uva) 62%, var(--noite) 100%);
  position:relative; overflow:hidden;
}
.fichaart::after{
  content:""; position:absolute; inset:-30%;
  background:conic-gradient(from 0deg,transparent 0 68%,rgba(184,145,63,.16) 80%,transparent 90% 100%);
  animation:gira 20s linear infinite;
}
/* IMAGEM DO SERVIÇO · POR RECEBER. Quando houver fotografia, substitui-se o
   SVG por <img class="fichafoto" src="img/servico-tarot.jpg"> e o desenho sai. */
.fichaart svg{position:relative; width:min(74%,240px); height:auto; opacity:.92}
.fichafoto{width:100%; height:100%; object-fit:cover; display:block}

.fichabd{padding:clamp(1.8rem,4vw,2.8rem)}
.fichabd h2{margin:.2rem 0 1rem; font-size:clamp(1.7rem,3.6vw,2.4rem)}
.fichameta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; padding:.9rem 0;
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
  font-size:.86rem; color:var(--tinta2);
}
.fichameta b{font-family:var(--serif); font-size:1.25rem; color:var(--ametista); font-weight:400}
.fichatxt{margin:1.3rem 0 0; font-size:1rem; line-height:1.8; color:var(--tinta2)}
.ficha .fechar{
  position:absolute; top:.9rem; right:1rem; z-index:3;
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--tinta); font-size:1.4rem; line-height:1;
  transition:background .25s ease, transform .25s ease;
}
.ficha .fechar:hover{background:#fff; transform:rotate(90deg)}

/* ---- a barra do preço no calendário ------------------------------------ */
.barrapreco{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:1.4rem; padding:.95rem 1.2rem;
  border-radius:24px 6px 6px 6px;
  background:linear-gradient(135deg, var(--papel3), var(--papel2));
  border:1px solid var(--linha);
  animation:sobebarra .4s cubic-bezier(.2,.75,.25,1);
}
@keyframes sobebarra{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.barrapreco .bp-o{display:grid; gap:.15rem; min-width:0}
.barrapreco .bp-o b{font-weight:400; font-size:1rem; color:var(--tinta)}
.barrapreco .bp-o small{font-size:.8rem; color:var(--tinta2)}
.barrapreco .bp-v{display:grid; justify-items:end; gap:.1rem; flex:0 0 auto}
.barrapreco .bp-v small{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta3)}
.barrapreco .bp-v b{font-family:var(--serif); font-weight:400; font-size:1.75rem; color:var(--ametista); line-height:1}

@media (prefers-reduced-motion:reduce){
  .fichacx, .barrapreco{animation:none}
  .fichaart::after{animation:none}
}

/* ==========================================================================
   A PAREDE DE TESTEMUNHOS — refeita a 29/08/2026

   Duas colunas a DESCER, a velocidades diferentes. Descem em vez de subirem
   porque os novos entram por cima, que é a direcção em que se lê.

   Velocidades diferentes de propósito: iguais, o olho vê duas colunas a andar
   juntas e percebe o truque num segundo. Lentas — 78 e 96 segundos — porque
   estes cartões têm texto a sério e ninguém lê uma coisa que foge.
   ====================================================================== */
.paredetst{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem;
  margin-top:2.8rem; height:min(74vh,700px); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
}
.tcol{overflow:hidden}
.tfita{display:grid; gap:1.2rem; animation:desce var(--seg,80s) linear infinite}
.paredetst:hover .tfita{animation-play-state:paused}
/* Começa deslocada para cima e desce até zero: assim entra sempre conteúdo
   pelo topo em vez de aparecer um vazio no primeiro segundo. */
@keyframes desce{
  from{transform:translate3d(0,calc(-50% - .6rem),0)}
  to  {transform:translate3d(0,0,0)}
}

/* ---- o cartão ----------------------------------------------------------- */
.paredetst .tst{
  margin:0; padding:1.5rem 1.5rem 1.3rem; border:0; border-radius:20px 6px 6px 6px;
  background:linear-gradient(158deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px -20px rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease, background .45s ease;
}
.paredetst .tst:hover{
  transform:translateY(-4px);
  background:linear-gradient(158deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 22px 44px -22px rgba(0,0,0,.7);
}
.paredetst .tst::before{content:none}          /* as aspas gigantes saem: com texto longo, atrapalhavam */
.paredetst .tst p{
  font-family:var(--sans); font-style:normal; font-size:.94rem; line-height:1.72;
  color:#E6DCF0; margin:.9rem 0 0;
}

/* ---- as estrelas -------------------------------------------------------- */
.tstars{display:flex; gap:.2rem}
.tstars svg{width:15px; height:15px}
.tstars .cheia{fill:#E2C68A}
.tstars .vazia{fill:rgba(255,255,255,.18)}

/* ---- o rodapé do cartão ------------------------------------------------- */
.tsrod{display:flex; align-items:center; gap:.7rem; margin-top:1.2rem;
       padding-top:1rem; border-top:1px solid rgba(255,255,255,.1)}
.tsav{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); font-size:1.05rem;
  color:#F6EFFA; background:linear-gradient(150deg, var(--ametista), var(--uva));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.tsq{display:grid; gap:.05rem; min-width:0}
.tsq cite{font-style:normal; font-size:.9rem; letter-spacing:0; text-transform:none; color:#F6EFFA}
.tsq small{font-size:.74rem; color:#A790BE}

/* ---- o céu estrelado por trás ------------------------------------------
   Três camadas de pontos, feitas só com gradientes — sem canvas e sem uma
   única imagem. A do meio pisca devagar; as outras ficam quietas, senão o
   fundo inteiro cintila e cansa.                                            */
#opinioes .ceuestrelas{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-repeat:no-repeat; background-size:100% 100%;
}
/* Camada de trás: muitas, pequenas e fracas. É o pó de estrelas — não se
   contam, sente-se que o painel tem profundidade. */
#opinioes .ceuestrelas::before,
#opinioes .ceuestrelas::after{
  content:""; position:absolute; inset:0; background-repeat:no-repeat; background-size:100% 100%;
}
#opinioes .ceuestrelas::before{
  opacity:.55;
  background-image:
    radial-gradient(1.09px 1.09px at 32.4% 15.1%, rgba(232,194,92,0.24), transparent),
    radial-gradient(0.73px 0.73px at 53.6% 36.6%, rgba(255,255,255,0.39), transparent),
    radial-gradient(0.74px 0.74px at 3.7% 43.4%, rgba(255,255,255,0.25), transparent),
    radial-gradient(0.77px 0.77px at 42.5% 82.7%, rgba(255,255,255,0.29), transparent),
    radial-gradient(1.05px 1.05px at 62.7% 94.8%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.22px 1.22px at 97.6% 4.7%, rgba(255,255,255,0.32), transparent),
    radial-gradient(0.89px 0.89px at 14.4% 11.8%, rgba(255,255,255,0.49), transparent),
    radial-gradient(1.08px 1.08px at 18.1% 58.2%, rgba(255,255,255,0.34), transparent),
    radial-gradient(0.74px 0.74px at 54.8% 6.3%, rgba(255,255,255,0.29), transparent),
    radial-gradient(0.89px 0.89px at 68.0% 42.8%, rgba(232,194,92,0.41), transparent),
    radial-gradient(1.18px 1.18px at 45.3% 30.0%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.02px 1.02px at 24.4% 57.4%, rgba(255,255,255,0.51), transparent),
    radial-gradient(1.29px 1.29px at 72.9% 28.8%, rgba(255,255,255,0.26), transparent),
    radial-gradient(0.79px 0.79px at 41.8% 75.7%, rgba(255,255,255,0.38), transparent),
    radial-gradient(1.16px 1.16px at 3.9% 66.8%, rgba(255,255,255,0.41), transparent),
    radial-gradient(1.12px 1.12px at 87.5% 31.4%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1.2px 1.2px at 58.0% 45.6%, rgba(255,255,255,0.53), transparent),
    radial-gradient(0.74px 0.74px at 47.4% 66.4%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.19px 1.19px at 64.7% 99.3%, rgba(232,194,92,0.31), transparent),
    radial-gradient(0.71px 0.71px at 38.6% 66.9%, rgba(255,255,255,0.37), transparent),
    radial-gradient(0.74px 0.74px at 16.8% 11.7%, rgba(255,255,255,0.47), transparent),
    radial-gradient(0.93px 0.93px at 12.9% 24.8%, rgba(255,255,255,0.51), transparent),
    radial-gradient(1.03px 1.03px at 8.1% 44.9%, rgba(255,255,255,0.51), transparent),
    radial-gradient(0.87px 0.87px at 81.9% 86.4%, rgba(255,255,255,0.36), transparent),
    radial-gradient(1.27px 1.27px at 35.9% 88.4%, rgba(255,255,255,0.27), transparent),
    radial-gradient(0.84px 0.84px at 17.6% 23.2%, rgba(255,255,255,0.38), transparent),
    radial-gradient(0.7px 0.7px at 58.9% 26.3%, rgba(255,255,255,0.36), transparent),
    radial-gradient(1.27px 1.27px at 36.9% 56.6%, rgba(232,194,92,0.45), transparent),
    radial-gradient(1.11px 1.11px at 51.5% 61.8%, rgba(255,255,255,0.24), transparent),
    radial-gradient(1.22px 1.22px at 90.0% 78.0%, rgba(255,255,255,0.48), transparent),
    radial-gradient(0.76px 0.76px at 39.2% 39.9%, rgba(255,255,255,0.43), transparent),
    radial-gradient(0.83px 0.83px at 6.2% 6.7%, rgba(255,255,255,0.27), transparent),
    radial-gradient(0.7px 0.7px at 34.0% 5.3%, rgba(255,255,255,0.27), transparent),
    radial-gradient(0.72px 0.72px at 10.1% 36.4%, rgba(255,255,255,0.51), transparent),
    radial-gradient(0.85px 0.85px at 61.4% 14.9%, rgba(255,255,255,0.33), transparent),
    radial-gradient(1.21px 1.21px at 36.4% 12.3%, rgba(255,255,255,0.55), transparent),
    radial-gradient(0.75px 0.75px at 46.6% 48.4%, rgba(232,194,92,0.25), transparent),
    radial-gradient(1.2px 1.2px at 34.3% 26.5%, rgba(255,255,255,0.27), transparent),
    radial-gradient(1.02px 1.02px at 2.3% 95.1%, rgba(255,255,255,0.27), transparent),
    radial-gradient(1.02px 1.02px at 54.3% 2.7%, rgba(255,255,255,0.54), transparent),
    radial-gradient(0.86px 0.86px at 86.3% 69.6%, rgba(255,255,255,0.34), transparent),
    radial-gradient(1.02px 1.02px at 16.7% 77.2%, rgba(255,255,255,0.48), transparent),
    radial-gradient(1.19px 1.19px at 33.0% 22.3%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.19px 1.19px at 85.3% 80.6%, rgba(255,255,255,0.46), transparent),
    radial-gradient(0.91px 0.91px at 22.7% 51.8%, rgba(255,255,255,0.23), transparent),
    radial-gradient(0.86px 0.86px at 2.8% 27.9%, rgba(232,194,92,0.45), transparent),
    radial-gradient(1.26px 1.26px at 95.7% 44.7%, rgba(255,255,255,0.55), transparent),
    radial-gradient(0.83px 0.83px at 95.5% 36.5%, rgba(255,255,255,0.29), transparent),
    radial-gradient(1.07px 1.07px at 19.7% 20.4%, rgba(255,255,255,0.52), transparent),
    radial-gradient(1.09px 1.09px at 84.0% 47.9%, rgba(255,255,255,0.48), transparent),
    radial-gradient(1.25px 1.25px at 8.5% 66.1%, rgba(255,255,255,0.48), transparent),
    radial-gradient(0.81px 0.81px at 75.0% 47.8%, rgba(255,255,255,0.48), transparent),
    radial-gradient(1.28px 1.28px at 33.3% 80.1%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.13px 1.13px at 40.1% 94.7%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1.24px 1.24px at 12.7% 15.1%, rgba(232,194,92,0.49), transparent),
    radial-gradient(1.29px 1.29px at 14.6% 82.7%, rgba(255,255,255,0.44), transparent),
    radial-gradient(0.78px 0.78px at 35.0% 54.9%, rgba(255,255,255,0.22), transparent),
    radial-gradient(1.02px 1.02px at 97.1% 65.0%, rgba(255,255,255,0.53), transparent),
    radial-gradient(1.2px 1.2px at 43.4% 87.2%, rgba(255,255,255,0.29), transparent),
    radial-gradient(0.84px 0.84px at 25.2% 29.3%, rgba(255,255,255,0.41), transparent),
    radial-gradient(0.78px 0.78px at 25.9% 41.9%, rgba(255,255,255,0.52), transparent),
    radial-gradient(1.05px 1.05px at 35.4% 45.8%, rgba(255,255,255,0.52), transparent),
    radial-gradient(1.0px 1.0px at 42.1% 91.8%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.96px 0.96px at 52.4% 1.9%, rgba(232,194,92,0.28), transparent),
    radial-gradient(0.8px 0.8px at 0.4% 79.9%, rgba(255,255,255,0.38), transparent),
    radial-gradient(0.9px 0.9px at 72.5% 55.6%, rgba(255,255,255,0.39), transparent),
    radial-gradient(0.76px 0.76px at 55.5% 78.4%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.16px 1.16px at 24.8% 27.7%, rgba(255,255,255,0.39), transparent),
    radial-gradient(1.25px 1.25px at 56.2% 76.0%, rgba(255,255,255,0.37), transparent),
    radial-gradient(1.01px 1.01px at 61.3% 50.6%, rgba(255,255,255,0.45), transparent);
}
/* Camada da frente: menos, um bocadinho maiores, e essas sim piscam. Se
   piscassem todas, o fundo inteiro cintilava e cansava a ler. */
#opinioes .ceuestrelas::after{
  background-image:
    radial-gradient(1.48px 1.48px at 45.2% 53.3%, rgba(232,194,92,0.83), transparent),
    radial-gradient(1.85px 1.85px at 69.9% 87.7%, rgba(255,255,255,0.59), transparent),
    radial-gradient(1.77px 1.77px at 56.0% 94.3%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.16px 1.16px at 12.2% 44.2%, rgba(255,255,255,0.58), transparent),
    radial-gradient(1.73px 1.73px at 7.3% 66.9%, rgba(255,255,255,0.81), transparent),
    radial-gradient(1.63px 1.63px at 15.4% 71.6%, rgba(232,194,92,0.55), transparent),
    radial-gradient(1.28px 1.28px at 88.3% 96.8%, rgba(255,255,255,0.83), transparent),
    radial-gradient(1.89px 1.89px at 39.8% 48.7%, rgba(255,255,255,0.79), transparent),
    radial-gradient(1.51px 1.51px at 16.1% 43.2%, rgba(255,255,255,0.62), transparent),
    radial-gradient(1.68px 1.68px at 19.6% 31.9%, rgba(255,255,255,0.51), transparent),
    radial-gradient(1.11px 1.11px at 55.4% 44.0%, rgba(232,194,92,0.62), transparent),
    radial-gradient(1.15px 1.15px at 62.4% 51.2%, rgba(255,255,255,0.84), transparent),
    radial-gradient(1.18px 1.18px at 78.8% 97.2%, rgba(255,255,255,0.59), transparent),
    radial-gradient(1.32px 1.32px at 4.0% 77.9%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.76px 1.76px at 42.2% 91.1%, rgba(255,255,255,0.59), transparent),
    radial-gradient(1.56px 1.56px at 14.9% 91.9%, rgba(232,194,92,0.75), transparent),
    radial-gradient(1.65px 1.65px at 8.9% 5.8%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1.61px 1.61px at 7.2% 93.8%, rgba(255,255,255,0.78), transparent),
    radial-gradient(1.15px 1.15px at 8.4% 85.6%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.54px 1.54px at 45.4% 33.9%, rgba(255,255,255,0.82), transparent),
    radial-gradient(1.52px 1.52px at 26.8% 12.9%, rgba(232,194,92,0.58), transparent),
    radial-gradient(1.14px 1.14px at 10.9% 16.1%, rgba(255,255,255,0.57), transparent),
    radial-gradient(1.71px 1.71px at 31.2% 30.5%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.38px 1.38px at 50.0% 17.8%, rgba(255,255,255,0.51), transparent),
    radial-gradient(1.69px 1.69px at 25.0% 1.5%, rgba(255,255,255,0.69), transparent),
    radial-gradient(1.85px 1.85px at 18.9% 47.5%, rgba(232,194,92,0.54), transparent);
  animation:cintila 6s ease-in-out infinite;
}
@keyframes cintila{0%,100%{opacity:.9} 50%{opacity:.45}}
#opinioes .wrap{position:relative; z-index:2}

@media (max-width:720px){
  .paredetst{grid-template-columns:1fr; height:min(70vh,560px)}
  .paredetst .tcol:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  .paredetst{height:auto; mask-image:none; -webkit-mask-image:none}
  .tfita{animation:none}
  .paredetst .tst:hover{transform:none}
  #opinioes .ceuestrelas{animation:none}
}

/* o link para o Instagram por baixo do título das opiniões */
.verlink{
  display:inline-block; margin-left:.3rem; color:var(--ouro-cl); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .3s ease;
}
.verlink:hover{border-bottom-color:var(--ouro-cl)}

/* ==========================================================================
   O LOGOTIPO VERDADEIRO, E AS FOTOGRAFIAS DO ESPAÇO — 09/09/2026

   Até aqui o topo tinha a palavra PÚRPURA composta em Cormorant. Chegou o
   logótipo dela: as letras têm cortes e as contra-formas do U e do R são
   estrelas de quatro pontas. Não se imita com tipografia — usa-se o ficheiro.

   Veio em JPEG sobre branco; o fundo foi retirado pela luminosidade e ficou
   um PNG com transparência, para assentar tanto no creme do cabeçalho como
   no violeta das secções escuras.
   ====================================================================== */
.lg img{
  display:block; height:clamp(21px,2.4vw,28px); width:auto;
  transition:opacity .3s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.lg:hover img{opacity:.82; transform:translateY(-1px)}
/* Nas secções escuras o símbolo é azul-violeta sobre violeta e some-se.
   Aclara-se sem lhe tocar no ficheiro. */
.noite .lg img, footer .lg img{filter:brightness(0) invert(1) opacity(.92)}
footer .lg img{height:26px}

/* ---- fotografias verticais na galeria -----------------------------------
   As dela vieram de telemóvel, 9:16. Forçá-las a 4:3 cortava metade da sala.
   A galeria passa a aceitar as duas orientações: as verticais ocupam duas
   linhas e ficam à altura das outras duas juntas.                          */
.galeria{grid-auto-rows:minmax(0,auto)}
.galeria figure.alta{aspect-ratio:9/16}
@media (min-width:900px){
  .galeria{grid-template-columns:repeat(4,minmax(0,1fr))}
  .galeria figure.alta{grid-row:span 2}
  .galeria figure.porvir{aspect-ratio:4/3}
}
.galeria figure.alta img{width:100%; height:100%; object-fit:cover; display:block}

/* O horário, em destaque no cartão violeta. */
.cartaovioleta .hor b{color:#EEE4F7; font-weight:400; display:inline-block; margin-bottom:.3rem}

/* ==========================================================================
   O MAGENTA DO NÉON — 09/09/2026

   O espaço dela é magenta e ouro: o letreiro na parede, as fitas de LED por
   trás das prateleiras. Se o site ignorasse isso, quem entrasse na loja
   depois de ver o site sentia que eram duas casas diferentes.

   Entra em TRÊS sítios e mais nenhum. Um acento que aparece a toda a hora
   deixa de ser acento e passa a ser a cor do site — e aí a marca são duas
   cores a discutir uma com a outra.
   ====================================================================== */

/* 1. O número do cesto. É a única coisa da página que tem de dar nas vistas
      quando muda, e é pequena o suficiente para o magenta não pesar. */
.cartbtn .n{
  background:var(--neon);
  box-shadow:0 0 0 3px rgba(230,79,180,.18), 0 0 14px rgba(230,79,180,.55);
}

/* 2. O filete da página em que se está, no menu. Diz onde estás com a cor da
      parede dela. */
#nav a.on::after{background:var(--neon); box-shadow:0 0 10px rgba(230,79,180,.6)}

/* 3. O brilho do letreiro por trás do logótipo no rodapé — como a parede.
      Só no rodapé, e muito fraco. */
footer .lg{position:relative; display:inline-block}
footer .lg::before{
  content:""; position:absolute; inset:-40% -18%;
  background:radial-gradient(ellipse, rgba(230,79,180,.28), transparent 68%);
  filter:blur(12px); pointer-events:none;
}
footer .lg img{position:relative}

/* ==========================================================================
   A CAPA COM FOTOGRAFIA, A SECÇÃO QUE SANGRA, E A ESCALA — 09/09/2026

   As oito correcções da avaliação, por ordem: fotografia na capa, uma secção
   que rompe o ritmo, o logótipo em vez do wordmark composto, meios-tons,
   textura por trás dos títulos escuros, fotografia nos serviços, menos
   animação mas maior, e hierarquia de tamanhos.
   ====================================================================== */

/* ---- 1. A FOTOGRAFIA DA CAPA -------------------------------------------
   Muito escurecida: é atmosfera, não é para se estudar. O zoom de 40 segundos
   é a ÚNICA animação grande da página — tirei a malha a respirar de duas
   secções para esta poder existir sem competir com nada.                   */
.capafoto{position:absolute; inset:0; z-index:0; overflow:hidden}
.capafoto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  /* 29/10/2026: a vela e a selenite pedem um pouco mais de luz que o neon antigo */
  filter:brightness(.42) saturate(.8) contrast(1.06);
  transform:scale(1.06);
  animation:respiraCapa 40s ease-in-out infinite alternate;
}
@keyframes respiraCapa{ from{transform:scale(1.06)} to{transform:scale(1.16)} }
/* Um véu por cima para o texto assentar com folga em qualquer fotografia. */
.cover::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(43,22,64,.82) 0%, rgba(43,22,64,.55) 38%, rgba(43,22,64,.88) 100%),
    radial-gradient(ellipse at 50% 46%, rgba(43,22,64,0) 12%, rgba(43,22,64,.55) 78%);
}
#ceu{z-index:1; opacity:.72}

/* ---- 3. O LOGÓTIPO NA CAPA --------------------------------------------- */
.cover .mark{margin:0 0 1.1rem; line-height:1; text-indent:0; letter-spacing:0}
.cover .mark img{
  display:block; margin:0 auto; width:min(430px,74vw); height:auto;
  filter:brightness(0) invert(1) drop-shadow(0 4px 22px rgba(43,22,64,.55));
  opacity:0; animation:entraMarca 1.5s .25s cubic-bezier(.2,.75,.25,1) forwards;
}
@keyframes entraMarca{ from{opacity:0; transform:translateY(12px) scale(.985)} to{opacity:1; transform:none} }

/* ---- 2. A SECÇÃO QUE SANGRA -------------------------------------------
   O único sítio da página onde alguma coisa toca a borda do ecrã. Sem margem,
   sem cantos redondos, sem sombra. É isso que a faz respirar.              */
.sangra{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch; padding:0; gap:0; background:var(--meio1);
}
.sangrafoto{position:relative; overflow:hidden; min-height:min(78vh,660px)}
.sangrafoto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 46%;
}
.sangrafoto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 62%, var(--meio1) 100%);
}
.sangratexto{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.6rem,6vw,5.5rem) clamp(1.4rem,5vw,4.5rem);
  max-width:640px;
}
.sangratexto h2{
  font-size:clamp(1.9rem,4.2vw,3.2rem); line-height:1.16; margin:.3rem 0 1.4rem;
}
.sangratexto p{color:var(--tinta2); line-height:1.85; margin:0 0 1.1rem; max-width:44ch}
.sangratexto .botoes{margin-top:1rem; justify-content:flex-start}
@media (max-width:880px){
  .sangra{grid-template-columns:1fr}
  .sangrafoto{min-height:58vh}
  .sangrafoto::after{background:linear-gradient(180deg, transparent 58%, var(--meio1) 100%)}
  .sangratexto{max-width:none}
}

/* ---- 5. TEXTURA POR TRÁS DOS TÍTULOS ESCUROS --------------------------
   O néon dela, desfocado, a 18%. Não se reconhece — sente-se que a parede
   dela está ali por trás, em vez de um gradiente liso.                     */
.comtextura::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/textura-neon.jpg") center/cover no-repeat;
  opacity:.18; mix-blend-mode:screen;
}
.comtextura > *{position:relative; z-index:2}

/* ---- 4. OS MEIOS-TONS EM USO ------------------------------------------ */
.lead{color:var(--tinta2)}
.eyebrow{color:var(--tinta3)}
.galeria .porvir{background:var(--meio1); border-color:var(--meio2); color:var(--meio3)}
.pesq{background:var(--meio1); border-color:var(--meio2)}
.fichameta{border-color:var(--meio2)}
.barrapreco{border-color:var(--meio2)}
.marca{border-color:var(--meio2)}
footer{border-top:1px solid var(--meio2)}

/* ---- 8. ESCALA ---------------------------------------------------------
   Os h2 das secções eram quase do tamanho do corpo. Um título grande cria
   hierarquia sem precisar de cor nenhuma — e é de graça.                   */
main h2{font-size:clamp(1.85rem,4vw,3rem); line-height:1.14; letter-spacing:-.01em}
main h3{font-size:clamp(1.05rem,1.8vw,1.28rem)}
.pagetop h1{font-size:clamp(2.1rem,5.4vw,4rem); line-height:1.08; letter-spacing:-.015em}
.eyebrow{font-size:.68rem; letter-spacing:.26em}

/* ---- 7. MENOS ANIMAÇÃO -------------------------------------------------
   A moldura do retrato deixa de flutuar e o anel deixa de girar: com a capa a
   fazer zoom, mais movimento lento passa a ruído de fundo.                 */
.redondo{animation:none}
.redondo::before{animation-duration:34s}
.deco-zodiaco svg{animation-duration:300s}

@media (prefers-reduced-motion:reduce){
  .capafoto img{animation:none; transform:scale(1.06)}
  .cover .mark img{animation:none; opacity:1}
}

/* ==========================================================================
   O DOURADO SAI, E O CABEÇALHO GANHA VIDRO — 09/09/2026

   Duas correcções que vêm da mesma observação dele, e tem razão nas duas.

   1. O OURO NÃO É DELA. A marca é o periwinkle do logótipo e o magenta do
      néon da parede. O ouro veio do modelo de onde este site nasceu, e o que
      fazia era pôr uma terceira cor a discutir com as outras duas — logo por
      baixo do logótipo, que é o pior sítio possível. Sai da capa e passa a
      aparecer só onde é mesmo um acento (as estrelas das avaliações).

   2. O CABEÇALHO SOBRE FUNDO CLARO. Um cabeçalho quase branco por cima de
      uma secção quase branca não tem separação nenhuma — vê-se um borrão.
      A solução que os sites bons usam é sempre a mesma: transparente quando
      está por cima da capa, e vidro fosco com um filete quando desce.
   ====================================================================== */

/* ---- o cabeçalho ------------------------------------------------------- */
#topo{
  background:rgba(249,246,251,.72);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid rgba(107,63,166,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -22px rgba(43,26,60,.4);
  transition:transform .38s ease, background .4s ease, box-shadow .4s ease;
}
#topo .lg i{color:var(--ametista)}

/* Nas páginas interiores o cabeçalho está sempre visível e sempre sobre
   conteúdo claro — mantém o vidro. Na capa entra só depois de se descer, e é
   o `.on` que o traz, portanto não há nada a fazer aí. */

/* ---- o ouro sai da capa ------------------------------------------------ */
.cover .rule{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.cover .ref{color:#DCCBF0; font-weight:400}
.cover .sub{color:#CDB9E2}
.cover .down{color:#B59FCC}
.cover .down span{background:linear-gradient(rgba(255,255,255,.7),transparent)}

/* ---- os logótipos, todos iguais ---------------------------------------
   Sobre claro, a cor do ficheiro. Sobre escuro, branco. Mais nenhuma
   variação — três tratamentos diferentes do mesmo símbolo na mesma página
   lê-se como três marcas.                                                  */
.lg img{filter:none}
.noite .lg img, footer .lg img, .cover .mark img{
  filter:brightness(0) invert(1);
}
.cover .mark img{filter:brightness(0) invert(1) drop-shadow(0 4px 22px rgba(43,22,64,.55))}
footer .lg::before{background:radial-gradient(ellipse, rgba(230,79,180,.22), transparent 68%)}

/* ---- menos contraste ---------------------------------------------------
   Os corpos de texto deixam de ser tinta a 100% e passam a um índigo a ~78%.
   É o que separa um site que "grita" de um que se lê com calma — e não se
   perde legibilidade nenhuma: continua muito acima do mínimo da WCAG.      */
body{color:#4F3763}
main p{color:#5B4572}
.lead{color:#705885}
main h2, main h3, .pagetop h1{color:#372248}
.noite p, .noite .lead{color:#D5C6E4}
.sangratexto p{color:#5B4572}

/* As molduras deixam de ser linhas e passam a sugestões. */
.card, .tst, .essc, .destaque, .cta, .galeria figure, .opc, .marca, .pesq{
  border-color:rgba(107,63,166,.16);
}

/* ---- correcção da secção que sangra -------------------------------------
   A coluna da fotografia não estava a esticar até à altura da linha, e a
   imagem ficava a 403 px dentro de um bloco de 953. O `align-items:stretch`
   sozinho não chega quando a coluna tem `min-height` e o conteúdo é
   absoluto — dá-se altura à SECÇÃO e a coluna passa a ter onde crescer.   */
.sangra{min-height:min(82vh,720px)}
.sangrafoto{height:100%; min-height:inherit}
.sangrafoto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
@media (max-width:880px){
  .sangra{min-height:0}
  .sangrafoto{height:auto; min-height:0; aspect-ratio:4/5}
}

/* ==========================================================================
   OS FILETES SAEM, AS LUAS GANHAM SENTIDO, AS SECÇÕES COSEM-SE — 09/09/2026
   ====================================================================== */

/* ---- fora os filetes dourados ------------------------------------------
   Um traço debaixo de uma palavra que não sublinha nada, não liga nada e não
   se percebe o que é. Ele viu bem: era ornamento sem função, e ornamento sem
   função é a definição de ruído.                                           */
.eyebrow::after{content:none}
.eyebrow{padding-bottom:0}

/* ---- as luas deixam de flutuar no vazio --------------------------------
   Uma fila de oito luas entre duas secções, sem uma palavra, é enfeite. Com
   o nome da fase de hoje passa a ser informação — e informação que interessa
   a quem segue rituais. Ganha também uma linha fina de cada lado, para se
   perceber que é um separador e não uma secção que ficou por acabar.       */


 .luabloco::after{right:4%}



 .noite .luanome span{color:var(--ametista-cl)}


/* ---- as passagens entre secções ----------------------------------------
   A queixa dele foi de "transições forçadas", e tinha razão: uma secção clara
   acabava e a escura começava a direito, como duas folhas coladas. Um degradê
   de 90 px em cada junta faz a passagem parecer uma coisa só.

   Não se põe em todas: só onde muda o registo de claro para escuro.        */
.noite{position:relative}


/* ---- os ornamentos, agora que aparecem, com mais presença --------------- */
.deco-zodiaco svg{animation-duration:220s; opacity:.6}
.deco-mesa{opacity:1}
.deco-cartas{opacity:1}

/* As luas saíram: uma fila de bolas com riscos ao lado não dizia nada e
   partia a página a meio. */
.luabloco,.luas{display:none !important}

/* ==========================================================================
   SISTEMA DE COR FECHADO — violeta e branco, 09/09/2026

   Duas regras, e mais nenhuma:

   1. NÃO HÁ OURO. A marca dela é o periwinkle do logótipo e o magenta do
      néon da parede. Cada sítio onde havia ouro passa a ter periwinkle: o
      escuro sobre fundo claro, o claro sobre fundo escuro.

   2. TODA A SUPERFÍCIE ESCURA TEM COR SÓLIDA POR BAIXO DO GRADIENTE.
      Era daqui que vinha o pior defeito: as secções escuras pintavam-se com
      `linear-gradient`, que é uma IMAGEM. Se ela não pinta — porque o
      elemento é mais alto do que se esperava, porque um filho tem fundo
      próprio, porque a imagem ainda não carregou — fica o branco do body por
      baixo, e o texto claro desaparece sobre ele. Texto claro sobre branco é
      o pior erro que um site pode ter, e não pode depender de uma imagem.
   ====================================================================== */

/* ---- 2. a rede: cor sólida por baixo de cada gradiente escuro ----------- */
.noite,
#opinioes,
.cartaovioleta,
.fichaart,
.carta .fr, .carta .bk,
.destaque,
.cover{
  background-color:var(--noite);
}
.cartaovioleta, .fichaart{background-color:var(--uva)}
.destaque{background-color:var(--uva)}

/* ---- 1. o ouro sai de todo o lado -------------------------------------- */
:root{
  --ouro:#6B3FA6;        /* era dourado. Agora é a cor da marca. */
  --ouro-cl:#DCCBF0;     /* a versão clara, para fundos escuros */
}
/* Onde o ouro era um traço ou um número sobre fundo claro, passa a periwinkle
   escuro — não ao tom de marca, que é claro de mais para texto pequeno. */
.passosc li::before,
.cartaovioleta .ct,
.verlink,
.tsq cite{color:var(--ametista-cl)}
.cartaovioleta .ct{color:#DCCBF0}
.cartaovioleta .tel{color:#F4ECFA}
.cartaovioleta .linhas li::before{background:var(--ametista-cl)}
.tstars .cheia{fill:#DCCBF0}          /* as estrelas também deixam de ser ouro */
.contador{color:#F4ECFA}
.essc .num{color:var(--ametista-cl)}
.marca .mseta{color:var(--ametista)}
.carta .fr .m, .carta .bk .pr, .carta .bk .dur{color:#DCCBF0}

/* ---- 3. os tons que a medição apanhou como fracos de mais --------------- */
.eyebrow{color:#735C88}                /* era 3,2:1 — passa a 6,4:1 */
.btn.ghost{color:#55308A; border-color:rgba(107,63,166,.4)}
.galeria .porvir span{color:#735C88}
.galeria .porvir small{color:#907AA3}
.pr{color:#55308A}
.tsq small{color:#CAB7DC}

/* ==========================================================================
   A CORRECÇÃO QUE FALTAVA — especificidade

   O fundo sólido das secções escuras não estava a aplicar-se, e a razão é
   fina: a regra que as pinta é `.noite:not(#consultas)`. O `:not()` herda a
   especificidade do que tem lá dentro — e lá dentro está um ID. Isso faz
   dela uma regra de peso (1,1,0), maior do que o meu `#opinioes` (1,0,0).

   E como ela usa a forma abreviada `background:`, repõe a cor de fundo a
   TRANSPARENTE de cada vez. O gradiente pintava; a cor por baixo nunca
   chegava a existir. Bastava o gradiente falhar num sítio para ficar texto
   claro sobre branco.

   A correcção é usar a MESMA especificidade e só a propriedade da cor, sem
   tocar na imagem.

   Regra para a próxima: `:not(#algo)` é uma regra de ID disfarçada. Se se
   usa a forma abreviada `background:` dentro dela, apaga-se a cor de fundo
   de tudo o que se tentar acrescentar depois com menos peso.
   ====================================================================== */
.noite:not(#consultas){background-color:var(--noite)}
#consultas.noite{background-color:var(--noite)}
.cover{background-color:var(--noite)}

/* Os ornamentos ainda estavam pintados a ouro por dentro — a roda zodiacal, as
   cartas e a constelação usam duas variáveis próprias. Passam à marca. */
.deco{--traco:#6B3FA6; --brilho:#AC8ED0}
.noite .deco{--traco:#CDB9E2; --brilho:#E64FB4}

/* ==========================================================================
   O ESPAÇAMENTO — 09/09/2026

   Medido: a página tinha 9674 px para cerca de três ecrãs de conteúdo. Havia
   secções de 1441 e 1761 px com duas ou três linhas de texto lá dentro.

   Isso não se sente como "espaço para respirar" — sente-se como um site vazio.
   Rola-se durante segundos sem nada acontecer, e o cérebro lê isso como
   monotonia mesmo quando cada bloco, visto sozinho, está bem.

   O espaçamento entre secções cai para cerca de metade. Continua generoso —
   é um site de terapias, não um jornal — mas deixa de haver desertos.
   ====================================================================== */
main > section{
  padding-top:clamp(2.6rem,5vw,4.4rem);
  padding-bottom:clamp(2.6rem,5vw,4.4rem);
}
.hero{min-height:0; padding-top:clamp(2.8rem,6vw,5rem); padding-bottom:clamp(2.4rem,4.5vw,4rem)}
.pagetop{padding-top:clamp(6rem,9vw,8rem); padding-bottom:clamp(2.2rem,4vw,3.4rem); min-height:0}

/* as grelhas grandes também apertam */
.grelha{gap:1.1rem}
.galeria{gap:.85rem}
.essgrid{margin-top:2rem}
.cartas{margin-top:2rem}
.paredetst{height:min(62vh,560px); margin-top:2rem}
.sangra{min-height:min(64vh,560px)}
.sangratexto{padding-top:clamp(2rem,4vw,3.4rem); padding-bottom:clamp(2rem,4vw,3.4rem)}
.montra, #montra{gap:1.1rem}
.faixa{padding-top:1.6rem; padding-bottom:1.6rem}

/* os títulos deixam de flutuar longe do que apresentam */
main h2{margin-top:.2rem; margin-bottom:.8rem}
.lead{margin-bottom:1.6rem}

/* ==========================================================================
   UM COMEÇO PRÓPRIO PARA CADA PÁGINA — 09/09/2026

   Todas as páginas interiores abriam com a mesma tarja violeta. Seis vezes o
   mesmo bloco, e o site lê-se como um modelo comprado onde só muda o texto.

   Agora são cinco começos diferentes, e a tarja violeta fica só nas Perguntas
   — que é onde faz sentido, porque é a página em que se procura e não se lê.
   ====================================================================== */

/* ---- a tarja, agora só nas Perguntas, com o texto mais claro ------------ */
.pagetop{background:var(--noite)}
.pagetop .eyebrow{color:#DCCBF0}
.pagetop h1{color:#F9F2FC}
.pagetop .lead{color:#DCCDEB}        /* era #C7B2E0 — subiu de 6,1 para 9,4:1 */
.pagetop::before{
  background:radial-gradient(ellipse at 22% 0%,rgba(107,63,166,.5),transparent 58%),
             radial-gradient(ellipse at 86% 110%,rgba(230,79,180,.12),transparent 54%);
}

/* ---- SOBRE MIM: abre com o retrato ------------------------------------- */
.topo-retrato{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:stretch; background:var(--meio1); padding-top:64px;
}
.tr-foto{position:relative; min-height:min(74vh,600px); overflow:hidden}
.tr-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tr-vazio{
  margin:0; height:100%; border-radius:0; border:0; border-right:1px solid var(--meio2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
}
.tr-vazio .mono{font-family:var(--serif); font-size:clamp(3rem,7vw,4.6rem);
                letter-spacing:.12em; color:var(--ametista); line-height:1}
.tr-vazio .mono i{font-style:normal; color:var(--ametista-cl)}
.tr-vazio figcaption{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
                     color:#907AA3; line-height:1.9; text-align:center}
.tr-texto{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.4rem,5vw,4.4rem) clamp(1.4rem,5vw,4rem);
}
.tr-texto h1{font-size:clamp(2.3rem,5.6vw,3.9rem); line-height:1.06; margin:.2rem 0 1rem}
.tr-texto .lead{max-width:46ch; margin-bottom:1.8rem}
@media (max-width:880px){
  .topo-retrato{grid-template-columns:1fr}
  .tr-foto{min-height:0; aspect-ratio:4/5}
  .tr-vazio{border-right:0; border-bottom:1px solid var(--meio2)}
}

/* ---- LOJA e CONTACTO: claro e curto ------------------------------------ */
.topo-claro{
  background:var(--meio1); border-bottom:1px solid var(--meio2);
  padding:calc(64px + clamp(2rem,4vw,3.2rem)) 0 clamp(1.8rem,3.4vw,2.8rem);
}
.topo-claro h1{font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.08; margin:.2rem 0 .9rem}
.topo-claro .lead{max-width:56ch; margin:0}

/* ---- CONSULTAS: título de um lado, roda do outro ----------------------- */
.topo-partido{
  background:var(--papel); border-bottom:1px solid var(--meio2); overflow:hidden;
  padding:calc(64px + clamp(2rem,4vw,3.4rem)) 0 clamp(2rem,4vw,3.4rem);
}
.tp-grade{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
          gap:2rem; align-items:center}
.tp-texto h1{font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.08; margin:.2rem 0 .9rem}
.tp-texto .lead{max-width:44ch; margin:0}
.tp-roda{position:relative; min-height:220px}
.tp-roda .deco{position:absolute; right:-14%; top:50%; transform:translateY(-50%);
               width:min(340px,90%)}
@media (max-width:820px){ .tp-grade{grid-template-columns:1fr} .tp-roda{display:none} }

/* ---- MARCAR: uma fita, e o assistente começa --------------------------- */
.topo-fita{
  background:var(--meio1); border-bottom:1px solid var(--meio2);
  padding:calc(64px + 1.5rem) 0 1.4rem;
}
.topo-fita .wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.4rem}
.topo-fita h1{font-size:clamp(1.5rem,3vw,2rem); margin:0; letter-spacing:-.01em}
.topo-fita p{margin:0; color:var(--tinta2); font-size:.92rem}

/* o que vinha logo a seguir à tarja deixa de precisar de compensação */
.topo-claro + section, .topo-partido + section,
.topo-fita + section, .topo-retrato + section{padding-top:clamp(2.2rem,4.4vw,3.6rem)}

/* A página Sobre mim abre directamente no retrato centrado — precisa de folga
   para o cabeçalho fixo, que antes era dada pela tarja. */
.quemtopo{padding-top:calc(64px + clamp(2.4rem,5vw,4rem)) !important}
.quemtopo .quemcentro{margin-top:0}

/* ==========================================================================
   O BRANCO FICA — 09/09/2026

   Escureci o hero e o contacto para baixar os 92% de claro que tinha medido.
   Ele viu e preferiu como estava: em branco. E tem razão numa coisa que eu
   não tinha visto — o problema não era o site ser claro, era **os tons serem
   todos parecidos entre si**. Escurecer tudo não resolve isso; só troca um
   monótono claro por um monótono escuro.

   Fica claro. O que se ataca amanhã é a variedade DENTRO do claro: superfícies
   levantadas, molduras, e o violeta a aparecer em blocos e não só em texto.
   ====================================================================== */

/* a fotografia no hero fica — essa foi ganho puro */
.heroart{background:none; box-shadow:0 22px 50px -28px rgba(74,40,120,.45)}
.heroart img{width:100%; height:100%; object-fit:cover; display:block}

/* ==========================================================================
   O VÉU DE LUZ — 10/09/2026

   Substitui a roda zodiacal na secção "Quatro portas" da capa. Duas manchas
   largas, uma periwinkle e outra magenta, que atravessam a secção inteira e
   respiram. É a tal "uma animação grande em vez de muitas pequenas": não há
   contorno nenhum a desenhar, é só luz a mudar de sítio muito devagar.

   Porque é que não é uma imagem: são dois gradientes e zero pedidos ao
   servidor. E porque é que é `filter:blur` e não uma sombra — a sombra
   desenha a forma do elemento e via-se o rectângulo.
   ====================================================================== */
.veuluz{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.veuluz i{position:absolute; display:block; border-radius:50%; filter:blur(90px)}
.veuluz i:first-child{
  width:58%; padding-bottom:34%; left:-12%; top:-18%;
  background:radial-gradient(circle,rgba(107,63,166,.42),transparent 70%);
  animation:veuA 48s ease-in-out infinite;
}
.veuluz i:last-child{
  width:46%; padding-bottom:28%; right:-10%; bottom:-16%;
  background:radial-gradient(circle,rgba(230,79,180,.22),transparent 70%);
  animation:veuB 62s ease-in-out infinite;
}
/* O conteúdo tem de ficar por cima da luz. */
.veuluz ~ .wrap{position:relative; z-index:1}
@keyframes veuA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(22vw,10%,0) scale(1.18)}
}
@keyframes veuB{
  0%,100%{transform:translate3d(0,0,0) scale(1.06)}
  50%    {transform:translate3d(-18vw,-12%,0) scale(.92)}
}
@media (prefers-reduced-motion:reduce){ .veuluz i{animation:none} }

/* ==========================================================================
   MENOS SECÇÕES, CADA UMA MAIOR — 10/09/2026

   O que se foi buscar ao site da concorrente NÃO foi o desenho: foi o fôlego.
   Lá são seis blocos numa capa, cada um com o dobro do espaço, e a alternância
   é feita com FOTOGRAFIA a sangrar e não com blocos de cor chapada. Aqui eram
   dez blocos, todos da mesma altura, e por isso é que "os tons pareciam todos
   iguais" — o problema nunca foi o site ser claro.

   Ordem nova: capa · hero · faixa · quatro portas · foto com texto por cima ·
   montra · testemunhos · banda de fotografias · contactos.
   ====================================================================== */

/* ---- 1. AS QUATRO PORTAS: quatro cartões, não quatro colunas coladas ----
   Eram quatro caixas separadas por um filete de 1px, todas com o mesmo fundo
   do papel — lia-se como uma tabela. Agora são superfícies levantadas, com ar
   entre elas, e o número em grande a marcar o canto.                        */
.pilares{
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.1rem; background:none; border:0; border-radius:0; overflow:visible;
}
.pilar{
  border:1px solid var(--linha); border-radius:var(--raio);
  padding:2.1rem 1.7rem 1.9rem;
  background:linear-gradient(180deg,#fff, var(--papel));
  box-shadow:0 1px 2px rgba(43,26,60,.04);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s;
}
.pilar:hover{
  transform:translateY(-5px); border-color:var(--ametista-cl);
  box-shadow:0 18px 40px -18px rgba(43,26,60,.28);
}
.pilar .n{font-size:2.9rem; opacity:.55}

/* ---- 2. A FOTOGRAFIA COM O TEXTO POR CIMA ------------------------------
   As duas peças ocupam a MESMA célula da grelha (`grid-area:1/1`) em vez de
   duas colunas. Sem isto, a fotografia empurrava o texto para o lado e a
   secção voltava a ser um bloco igual aos outros.

   O véu escuro não é decoração: sem ele o texto branco cai sobre as zonas
   claras da parede e deixa de se ler. É o mesmo raciocínio da capa.        */
.sangra.sobre{
  display:grid; grid-template-columns:1fr; min-height:min(86vh,760px);
  isolation:isolate;
}
.sangra.sobre > *{grid-area:1/1}
.sangra.sobre .sangrafoto{height:100%; min-height:0}
.sangra.sobre .sangrafoto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sangra.sobre .sangrafoto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(43,22,64,.86) 0%, rgba(43,22,64,.68) 42%, rgba(43,22,64,.18) 78%, transparent 100%),
    linear-gradient(180deg, rgba(43,22,64,.34), transparent 40%);
}
.sangra.sobre .sangratexto{
  position:relative; z-index:2; align-self:center;
  max-width:min(100%,1180px); width:100%; margin:0 auto;
  padding:clamp(2.6rem,6vw,4.5rem) clamp(1.4rem,5vw,3rem);
}
.sangra.sobre .sangratexto > *{max-width:46ch}
.sangra.sobre .sangratexto .eyebrow{color:var(--ouro-cl)}
.sangra.sobre .sangratexto h2{color:#F6F0FA; font-size:clamp(2.1rem,4.8vw,3.4rem)}
.sangra.sobre .sangratexto p{color:#E3D6EE}
@media (max-width:820px){
  .sangra.sobre{min-height:0}
  .sangra.sobre .sangrafoto{aspect-ratio:auto; min-height:min(88vh,680px)}
  .sangra.sobre .sangrafoto::after{
    background:linear-gradient(180deg, rgba(43,22,64,.32) 0%, rgba(43,22,64,.55) 46%, rgba(43,22,64,.9) 100%);
  }
  .sangra.sobre .sangratexto{align-self:end}
}

/* ---- 3. A MONTRA: três produtos grandes em vez de seis pequenos ---------
   Seis quadrados de 230px numa capa não são uma montra, são um inventário.
   Três a 1/3 do ecrã mostram mesmo o que se está a vender, e o botão "ver a
   loja toda" faz o resto do trabalho.                                       */
#montrahome .grelha{grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem}
#montrahome .card .ph{aspect-ratio:4/3}
#montrahome .card .ph svg{width:48%}
#montrahome .card .bd{padding:1.4rem 1.4rem 1.5rem}
#montrahome .card h4{font-size:1.3rem}

/* ---- 4. TESTEMUNHOS: três cartões grandes, sem parede a andar -----------
   A parede de vinte a descer só funciona com vinte. Os verdadeiros, do
   destaque FeedBack, vão ser três ou quatro — e três cartões grandes lêem-se,
   ao contrário de uma fita em movimento. Também tira uma animação pequena de
   cima da mesa, que era o pedido.                                           */
.tstgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1.4rem; margin-top:2.4rem;
}
.tstgrid .tst{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--raio);
  padding:2rem 1.8rem 1.6rem;
  display:flex; flex-direction:column; gap:1rem;
}
.tstgrid .tst p{
  font-family:var(--serif); font-size:1.16rem; line-height:1.7;
  color:#F3EAFA; margin:0; flex:1;
}
.tstgrid .tsrod{border-top:1px solid rgba(255,255,255,.12); padding-top:1rem; margin:0}

/* ---- 5. A BANDA DE DUAS FOTOGRAFIAS ------------------------------------
   De ponta a ponta, sem margem, sem cantos e sem texto. É uma pausa, não uma
   secção — por isso não tem título nenhum.                                  */
.bandafotos{
  display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0;
  height:min(62vh,540px);
}
.bandafotos figure{margin:0; overflow:hidden; position:relative}
.bandafotos img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1);
}
.bandafotos figure:hover img{transform:scale(1.05)}
@media (max-width:700px){ .bandafotos{height:min(70vh,460px)} }

/* ---- testemunhos sem nome e sem estrelas (10/09/2026) ------------------
   No lugar das estrelas fica uma aspa grande — dá o peso visual que a fila
   de estrelas dava, sem afirmar uma nota que ninguém deu. A linha da origem
   é discreta de propósito: é uma nota de rodapé, não uma assinatura.       */
.tsasp{
  font-family:var(--serif); font-size:3.2rem; line-height:.6;
  color:var(--ouro-cl); opacity:.5; display:block; height:1.4rem;
}
.tsfonte{font-style:normal; font-size:.84rem; opacity:.75; letter-spacing:.01em}
.tstgrid .tsrod{gap:.2rem}

/* ==========================================================================
   RETRATO E CHAMADA DO INSTAGRAM — 10/09/2026
   ====================================================================== */

/* ---- o retrato dela, vertical -------------------------------------------
   4:5, cantos assimétricos como o resto do site, e uma moldura fina de luz
   por baixo — a fotografia veio de um vídeo e agradece uma borda que a feche
   contra o fundo claro.                                                    */
.retratofig{margin:0 auto 2rem; width:min(330px,72vw)}
.retrato-vertical{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:26px 6px 26px 6px;
  box-shadow:0 26px 60px -26px rgba(43,26,60,.55), 0 0 0 1px rgba(107,63,166,.18);
}

/* ---- a chamada grande para o Instagram ---------------------------------
   Um cartão só, do tamanho de uma secção. Fundo escuro para se destacar das
   duas secções claras entre as quais vive, e o gradiente do Instagram apenas
   no ícone — a marca deles não pinta a nossa página.                       */
.insta-grande{padding:clamp(2rem,4vw,3.2rem) 0}
.instacta{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(1.1rem,3vw,2.2rem);
  padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,4vw,2.8rem);
  border-radius:28px 8px 28px 8px; text-decoration:none;
  background:linear-gradient(120deg, var(--noite) 0%, var(--uva) 100%);
  box-shadow:0 24px 60px -30px rgba(43,26,60,.7);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s;
}
.instacta:hover{transform:translateY(-4px); box-shadow:0 34px 70px -30px rgba(43,26,60,.8)}
.ig-ico{
  width:clamp(52px,9vw,68px); height:clamp(52px,9vw,68px); flex:0 0 auto;
  border-radius:20px 6px 20px 6px; display:grid; place-items:center;
  background:linear-gradient(45deg,#F0A03C,#E64FB4 55%,#6B3FA6);
}
.ig-ico svg{width:58%; height:58%; fill:#fff}
.ig-txt{display:block; color:#F3EAFA}
.ig-txt b{display:block; font-family:var(--serif); font-weight:600;
          font-size:clamp(1.3rem,3.2vw,1.9rem); color:#F6F0FA; margin-bottom:.35rem}
.ig-lead{display:block; font-size:.95rem; line-height:1.65; color:#D5C4E4; max-width:56ch}
.ig-arroba{display:block; margin-top:.6rem; font-size:.78rem; letter-spacing:.18em;
           text-transform:uppercase; color:var(--ouro-cl)}
.ig-seta{font-size:1.6rem; color:var(--ouro-cl); transition:transform .35s}
.instacta:hover .ig-seta{transform:translateX(6px)}
@media (max-width:700px){
  .instacta{grid-template-columns:auto 1fr; gap:1rem}
  .ig-seta{display:none}
}

/* ---- a loja: cartões maiores (10/09/2026) -------------------------------
   Mesmo raciocínio da montra da capa — 230 px por produto é uma miniatura de
   catálogo. A barra lateral com a pesquisa e os temas fica como está.      */
.loja .grelha{grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:1.5rem}
.loja .card .ph{aspect-ratio:1/1}
.loja .card .bd{padding:1.25rem 1.25rem 1.4rem}
.loja .card h4{font-size:1.18rem}

/* ---- as consultas: a fotografia dos rituais não leva malha por baixo ---- */
#rituais.sangra.sobre{margin-top:0}

/* ==========================================================================
   MAIS MOVIMENTO, E VARIADO — 10/09/2026

   Cinco animações, cada uma de natureza diferente, para o olho não reconhecer
   sempre o mesmo truque a descer a página: uma fotografia que respira, um
   título que se descobre, duas fotografias que deslizam a ritmos diferentes,
   um brilho que atravessa um ícone, e cartões que se levantam ao toque.

   Todas param em `prefers-reduced-motion` — está no fim do bloco.
   ====================================================================== */

/* ---- 1. A FOTOGRAFIA QUE RESPIRA --------------------------------------
   O mesmo gesto da capa (40 s, ida e volta), agora também na fotografia que
   sangra. Não se vê andar; vê-se que está noutro sítio quando se volta a
   olhar. `alternate` em vez de repetir do princípio — um corte a meio de um
   plano lento é a única coisa que dá nas vistas.                          */
.sangra.sobre .sangrafoto img{
  animation:respiraFoto 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes respiraFoto{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.12) translate3d(-1.5%,-1%,0)}
}

/* ---- 2. O TÍTULO QUE SE DESCOBRE --------------------------------------
   Os h2 das secções deixam de aparecer só a subir: são revelados por uma
   máscara que corre da esquerda para a direita, como quem passa a mão. Usa a
   classe `.in` que o observador já põe — não se mexe em JavaScript nenhum.

   `clip-path` e não `width`, porque cortar a largura reflui o texto e as
   palavras saltam de linha durante a animação.                            */
h2.rv{clip-path:inset(0 100% 0 0); transition:opacity .85s ease, transform .85s ease, clip-path 1.15s cubic-bezier(.16,.84,.28,1)}
h2.rv.in{clip-path:inset(0 -2% 0 0)}

/* ---- 3. AS DUAS FOTOGRAFIAS QUE DESLIZAM -------------------------------
   Na banda de fotografias, cada uma anda a uma velocidade diferente enquanto
   se rola — a da esquerda mais depressa. É o efeito que dá profundidade sem
   nenhuma biblioteca: `animation-timeline:view()` deixa o browser ligar a
   animação ao scroll, sem um único ouvinte de eventos.

   Onde não houver suporte (Safari, Firefox), fica a fotografia quieta e não
   falta nada — por isso é que está dentro do @supports.                    */
@supports (animation-timeline: view()){
  .bandafotos figure img{
    animation:desliza linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  .bandafotos figure:first-child img{--amp:7%}
  .bandafotos figure:last-child img{--amp:3%}
  @keyframes desliza{
    from{transform:scale(1.14) translateY(calc(var(--amp,5%) * -1))}
    to  {transform:scale(1.14) translateY(var(--amp,5%))}
  }
}

/* ---- 4. O BRILHO QUE ATRAVESSA O ÍCONE DO INSTAGRAM --------------------
   De sete em sete segundos, uma faixa de luz atravessa o quadrado do ícone.
   Chama o olho para o único botão daquela secção sem o fazer piscar.      */
.ig-ico{position:relative; overflow:hidden}
.ig-ico::after{
  content:""; position:absolute; top:-60%; bottom:-60%; width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-260%) rotate(12deg);
  animation:brilhaIg 7s ease-in-out infinite;
}
@keyframes brilhaIg{
  0%,62%,100%{transform:translateX(-260%) rotate(12deg)}
  80%        {transform:translateX(360%)  rotate(12deg)}
}

/* ---- 5. OS TESTEMUNHOS AO TOQUE ---------------------------------------
   Levantam-se e a aspa acende. Só no rato: num telemóvel um `:hover` fica
   preso depois do toque e o cartão nunca mais desce.                      */
@media (hover:hover){
  .tstgrid .tst{transition:transform .5s cubic-bezier(.2,.7,.3,1), background .5s, border-color .5s}
  .tstgrid .tst:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,.09);
    border-color:rgba(230,79,180,.35);
  }
  .tstgrid .tst:hover .tsasp{opacity:.9}
  .tsasp{transition:opacity .5s}
}

/* ---- e para quem prefere o ecrã quieto -------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sangra.sobre .sangrafoto img{animation:none; transform:scale(1.04)}
  h2.rv, h2.rv.in{clip-path:none}
  .bandafotos figure img{animation:none}
  .ig-ico::after{animation:none; opacity:0}
  .tstgrid .tst{transition:none}
}

/* ---- a fotografia de um produto (10/09/2026) ---------------------------
   Desde que a loja passou a ser dela, um produto pode ter fotografia em vez
   do desenho. Preenche a mesma caixa `.ph` que o SVG ocupava.             */
.card .ph img.pfotoprod{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.card:hover .ph img.pfotoprod{transform:scale(1.05)}

/* ==========================================================================
   PÁGINAS LEGAIS — 10/09/2026

   Termos, privacidade e trocas. Uma coluna estreita e texto grande: são
   páginas para se lerem, não para se decorarem. A largura de leitura (66
   caracteres) importa mais aqui do que em qualquer outra página do site.
   ====================================================================== */
.legal-pagina .wrap{max-width:760px}
.legal-pagina h2{
  font-size:clamp(1.25rem,2.6vw,1.6rem); margin:2.6rem 0 .8rem;
  padding-top:1.6rem; border-top:1px solid var(--linha);
}
.legal-pagina h2:first-of-type{border-top:0; padding-top:0; margin-top:1.6rem}
.legal-pagina p{line-height:1.85; color:var(--tinta2); margin:0 0 1rem; max-width:66ch}
.legal-pagina b{color:var(--tinta)}
.legal-pagina a{color:var(--ametista); text-underline-offset:3px}

.listalegal{margin:0 0 1.2rem; padding-left:1.1rem; max-width:66ch}
.listalegal li{line-height:1.8; color:var(--tinta2); margin-bottom:.6rem}

/* o cartão da identificação: é o primeiro que se lê e o que a lei obriga a
   ter à vista — nome, NIF, morada e contacto de quem vende */
.quemsomos{
  background:var(--papel3); border:1px solid var(--linha);
  border-radius:20px 6px 20px 6px; padding:1.4rem 1.6rem; margin-bottom:2rem;
}
.quemsomos p{margin:0; font-size:.92rem; line-height:1.8}

.notafina{
  font-size:.9rem; background:var(--papel); border-left:3px solid var(--ametista-cl);
  padding:.9rem 1.1rem; border-radius:0 12px 12px 0;
}
.actualizado{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--linha);
  font-size:.82rem; color:var(--tinta3);
}


/* ==== LOJA EM BREVE (16/10/2026) =============================================
   Enquanto a base nao tiver produtos dela, o site publico nao mostra loja:
   nem o link (menu e rodape), nem a montra da capa, nem o cesto. Quem entrar
   em loja.html directamente ve o painel .embreve. A classe loja-em-breve e
   posta e tirada pelo js/app.js. */
/* 16/10/2026: a loja volta a ver-se ("guarda a loja apesar de estar vazia");
   escondem-se so o cesto e a grelha dos artigos inventados */
.loja-em-breve #montra, .loja-em-breve #abrircesto, .loja-em-breve #carrinho{display:none!important}
.embreve{display:none}
.loja-em-breve #loja .aviso, .loja-em-breve #loja .lojagrid{display:none!important}
.loja-em-breve .embreve{display:block;max-width:620px;margin:2.2rem 0 1rem;padding:2rem 2.2rem;
  background:var(--papel);border:1px solid var(--linha);border-radius:22px}
.embreve-t{font-family:var(--serif, Georgia, serif);font-size:1.6rem;color:var(--tinta, #2E1B36);margin:0 0 .6rem}
.embreve p{line-height:1.7}
.embreve-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}


/* ==========================================================================
   DENSIDADE E FLUIDEZ (16/10/2026) — "como o Pet Hotel, com carrosseis,
   telemoveis e coisas do genero". Os mesmos componentes do Pet Hotel, nas
   cores da Purpura: periwinkle (--ametista), magenta do neon (--neon) e as
   noites indigo. Sem ouro.
   ======================================================================= */

/* ---- ONDAS entre seccoes de cor solida ------------------------------------
   O desenho passa 12 unidades alem do fundo da caixa e a caixa deixa-o sair:
   e o que impede a linha fina na juncao (licao do Pet Hotel). */
.onda{display:block;width:100%;height:clamp(40px,5.5vw,80px);margin:-1px 0 -2px;
  position:relative;z-index:1;overflow:visible}
.onda.vira{transform:scaleX(-1)}

/* ---- A FAIXA QUE CORRE ----------------------------------------------------- */
.faixa.faixa-corre{overflow:hidden;padding:1.25rem 0!important}
.fx-pista{display:flex;width:max-content;animation:fxCorre 50s linear infinite}
.faixa-corre:hover .fx-pista{animation-play-state:paused}
.fx-grupo{display:flex;flex:0 0 auto}
.fx-grupo span{display:flex;align-items:center;gap:1.5rem;padding-right:1.5rem;white-space:nowrap;
  font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.6rem);font-weight:500;color:#fff;letter-spacing:.01em}
.fx-grupo span::before{content:"";flex:0 0 .85em;width:.85em;height:.85em;background:var(--neon);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes fxCorre{to{transform:translateX(-50%)}}

/* ---- PONTOS DE MEIO-TOM nos cantos (dissolvem-se, nunca cortados) --------- */
#hero{position:relative;overflow:hidden}
#hero > .wrap, #falar > .wrap{position:relative;z-index:2}
.pontos{position:absolute;width:clamp(170px,22vw,320px);aspect-ratio:1;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,var(--ametista-cl) 0 30%,transparent 34%);background-size:20px 20px;opacity:.55}
.pontos.br{right:0;bottom:0;
  -webkit-mask:radial-gradient(circle at 100% 100%,#000 0 22%,transparent 70%);mask:radial-gradient(circle at 100% 100%,#000 0 22%,transparent 70%)}
.pontos.tl{left:0;top:0;
  -webkit-mask:radial-gradient(circle at 0 36%,#000 0 22%,transparent 70%),linear-gradient(transparent,#000 46%);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle at 0 36%,#000 0 22%,transparent 70%),linear-gradient(transparent,#000 46%);mask-composite:intersect}

/* ---- ESTRELINHAS ------------------------------------------------------------ */
.estrelas{position:absolute;width:150px;height:130px;z-index:2;pointer-events:none}
.estrelas .estrela{position:absolute;height:auto;fill:var(--ametista-cl);transform-origin:50% 50%;
  animation:estrelaPisca 3.4s ease-in-out infinite;filter:drop-shadow(0 2px 6px rgba(107,63,166,.35))}
.estrelas .estrela.cl{fill:var(--neon)}
@keyframes estrelaPisca{0%,100%{opacity:.35;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* ---- AUTOCOLANTES DESENHADOS (cristal, vela, carta, lua) --------------------- */
.stk{position:absolute;z-index:4;pointer-events:none;width:var(--stk-w,110px);
  top:var(--stk-t,auto);right:var(--stk-r,auto);bottom:var(--stk-b,auto);left:var(--stk-l,auto);
  opacity:0;transform:scale(.4) rotate(var(--stk-rot,-6deg))}
.stk.in{animation:stkEntra .7s cubic-bezier(.34,1.56,.64,1) var(--stk-delay,0s) forwards}
@keyframes stkEntra{to{opacity:1;transform:scale(1) rotate(var(--stk-rot,-6deg))}}
.stk-f{display:block;animation:stkBalanca var(--stk-dur,6s) ease-in-out infinite}
@keyframes stkBalanca{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(2.5deg)}}
.stk svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 12px 18px rgba(43,26,60,.3))}
.stk .cut{fill:#fff;stroke:#fff;stroke-width:14;stroke-linejoin:round}

/* ---- CARROSSEL DE FOTOGRAFIAS (abertura) ---------------------------------- */
.carrossel{position:relative}
.heroart.car-foto{overflow:visible;background:none;box-shadow:none;display:block;margin-bottom:2.6rem}
.car-foto .car-pista{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:var(--uva);
  box-shadow:0 0 0 8px #fff,0 36px 70px -30px rgba(43,26,60,.6),0 0 70px -20px rgba(230,79,180,.35)}
.car-foto figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.car-foto figure.on{opacity:1;z-index:1}
.car-foto img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 6s ease-out}
.car-foto figure.on img{transform:scale(1)}
.car-foto figcaption{position:absolute;left:50%;bottom:1.1rem;translate:-50% 0;white-space:nowrap;
  background:rgba(255,255,255,.94);color:var(--tinta);border-radius:999px;padding:.45rem 1.05rem;
  font-size:.78rem;letter-spacing:.06em;box-shadow:0 10px 22px -12px rgba(43,26,60,.6)}
.car-pontos{display:flex;justify-content:center;gap:.15rem;z-index:3}
.car-foto .car-pontos{position:absolute;left:0;right:0;bottom:-2.6rem}
.car-pontos button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.car-pontos button::before{content:"";width:9px;height:9px;border-radius:999px;background:var(--meio3);transition:width .35s,background .35s}
.car-pontos button[aria-current="true"]::before{width:28px;background:var(--ametista)}
.car-pontos button:focus-visible{outline:2px solid var(--ametista);outline-offset:1px;border-radius:999px}

/* ---- AS QUATRO PORTAS: cartoes com cor e desenho -------------------------- */
#folha .pilares{background:none;border:0;gap:clamp(1rem,2vw,1.4rem);margin-top:3.6rem;overflow:visible}
#folha .pilar{position:relative;border-radius:28px;padding:3.6rem 1.6rem 1.9rem;text-align:center;
  border:0;box-shadow:0 22px 40px -28px rgba(43,26,60,.45);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
#folha .pilar:hover{transform:translateY(-8px)}
#folha .pilar h3{margin-top:.4rem}
.pico{position:absolute;left:50%;top:0;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;
  background:#fff;display:grid;place-items:center;box-shadow:0 14px 24px -14px rgba(43,26,60,.5);
  animation:picoFlutua 5s ease-in-out infinite}
.pico svg{width:46px;height:46px}
@keyframes picoFlutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#folha .pilar:nth-child(2) .pico{animation-delay:-1.2s} #folha .pilar:nth-child(3) .pico{animation-delay:-2.4s}
#folha .pilar:nth-child(4) .pico{animation-delay:-3.6s}
#folha .pilar:nth-child(1){background:#F0E7FB}
#folha .pilar:nth-child(1) .i1{fill:#6B3FA6} #folha .pilar:nth-child(1) .i2{fill:#D9C6F2} #folha .pilar:nth-child(1) .i3{fill:#E64FB4}
#folha .pilar:nth-child(2){background:#FBE4F2}
#folha .pilar:nth-child(2) .i1{fill:#E64FB4} #folha .pilar:nth-child(2) .i2{fill:#F6B3DC}
#folha .pilar:nth-child(3){background:#ECE5FA}
#folha .pilar:nth-child(3) .i1{fill:#FF7DBE} #folha .pilar:nth-child(3) .i2{fill:#DDB8F5} #folha .pilar:nth-child(3) .i3{fill:#6B3FA6} #folha .pilar:nth-child(3) .i4{fill:#FFE3F2}
#folha .pilar:nth-child(4){background:linear-gradient(160deg,var(--uva),var(--noite))}
#folha .pilar:nth-child(4) h3{color:#fff} #folha .pilar:nth-child(4) p{color:#DDCDEF}
#folha .pilar:nth-child(4) .i1{fill:#AD6BD8} #folha .pilar:nth-child(4) .i2{fill:#CF9CF0} #folha .pilar:nth-child(4) .i3{stroke:#fff;fill:none}
#folha .pilar .n{display:none}

/* ---- AS CONSULTAS A RODAR (entrada) ------------------------------------------ */
.consultashome{position:relative;background:var(--lavanda);padding-block:clamp(3.4rem,7vw,6rem)!important}
.car-fila .car-janela{overflow:hidden;padding:1rem .6rem 1.6rem;margin:1.8rem -.6rem 0}
.car-fila .car-pista{display:flex;gap:clamp(1rem,2vw,1.4rem);transition:transform .85s cubic-bezier(.65,.05,.36,1);will-change:transform}
.car-fila .car-pista > *{flex:0 0 calc((100% - 2 * clamp(1rem,2vw,1.4rem)) / 3);min-width:0}
@media(max-width:900px){.car-fila .car-pista > *{flex-basis:calc((100% - clamp(1rem,2vw,1.4rem)) / 2)}}
@media(max-width:560px){.car-fila .car-pista > *{flex-basis:86%}}
.cc{display:flex;flex-direction:column;gap:.55rem;min-height:100%;padding:1.7rem 1.6rem 1.6rem;border-radius:24px;
  background:linear-gradient(160deg,var(--uva) 0%,var(--noite) 100%);color:#F2E8F8;
  box-shadow:0 26px 44px -28px rgba(43,26,60,.7);position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.cc::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(230,79,180,.35),transparent 70%)}
.cc:hover{transform:translateY(-6px)}
.cc-ico{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.cc-ico svg{width:20px;height:20px;fill:var(--neon)}
.cc h3{font-family:var(--serif);font-size:1.45rem;line-height:1.15;color:#fff;margin:.3rem 0 0}
.cc-meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#C7B2E0}
.cc-meta b{font-family:var(--serif);font-size:1.5rem;letter-spacing:0;text-transform:none;color:#fff;font-weight:600}
.cc-desc{margin:0;font-size:.9rem;line-height:1.6;color:#DDCDEF;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cc .btn{align-self:flex-start;margin-top:.6rem;background:#fff;border-color:#fff;color:var(--uva)}
.cc .btn:hover{background:var(--neon);border-color:var(--neon);color:#fff}
.consultashome .car-pontos{margin-top:.2rem}
.consultashome .botoes{display:flex;gap:.7rem;flex-wrap:wrap}

/* ---- O TELEMOVEL DAS MENSAGENS -------------------------------------------------- */
.opi-duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.opi-duo{grid-template-columns:1fr}}
.telemovel{justify-self:center;position:relative;width:min(310px,80vw);aspect-ratio:9/19;border-radius:48px;
  background:#130A1B;padding:11px;
  box-shadow:0 0 0 2px #57357A,0 44px 90px -34px rgba(0,0,0,.75),0 0 80px -20px rgba(230,79,180,.4)}
.telemovel::before{content:"";position:absolute;top:22px;left:50%;width:86px;height:22px;margin-left:-43px;
  border-radius:999px;background:#130A1B;z-index:3}
.tel-ecra{position:relative;height:100%;border-radius:38px;overflow:hidden;background:#fff}
.tel-topo{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:.55rem;margin:0;
  padding:3rem 1rem .75rem;background:rgba(255,255,255,.95);border-bottom:1px solid #F0EBF5;font-size:.84rem;color:var(--tinta)}
.tel-av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-family:var(--serif);font-size:1.05rem;background:linear-gradient(135deg,var(--ametista),var(--neon))}
.tel-topo span:last-child{margin-left:auto;color:var(--tinta3);font-size:.72rem}
.tel-conversa{position:absolute;inset:0;padding-top:5.6rem;overflow:hidden;
  -webkit-mask:linear-gradient(transparent 4.6rem,#000 6.4rem,#000 92%,transparent);mask:linear-gradient(transparent 4.6rem,#000 6.4rem,#000 92%,transparent)}
.tel-fita{animation:telSobe 80s linear infinite}
.telemovel:hover .tel-fita{animation-play-state:paused}
@keyframes telSobe{to{transform:translateY(-50%)}}
.tel-fita > div{padding-bottom:.4rem}
.bolha{background:#F4EFF8;color:var(--tinta);border-radius:20px 20px 20px 6px;padding:.75rem .95rem;
  margin:0 2.4rem .75rem .85rem;font-size:.84rem;line-height:1.5}
.bolha p{margin:0}
.bolha small{display:block;margin-top:.4rem;font-size:.66rem;letter-spacing:.05em;color:var(--tinta3)}
.bolha:nth-child(3n+2){background:#FBE9F5}

/* ---- MOVIMENTO REDUZIDO E TELEMOVEL ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .fx-pista, .tel-fita, .stk-f, .estrelas .estrela, .pico{animation:none!important}
  .stk{opacity:1;transform:rotate(var(--stk-rot,-6deg))} .stk.in{animation:none}
  .tel-conversa{overflow-y:auto}
  .car-foto figure, .car-foto img, .car-fila .car-pista{transition:none}
}
@media(max-width:700px){.pontos{width:150px;opacity:.4}}
@media(max-width:600px){.stk, .estrelas{display:none}}

/* as mensagens herdavam a cor clara do .noite p e ficavam ilegiveis no ecra branco */
#opinioes .telemovel .bolha p{color:var(--tinta)!important;font-family:var(--sans);font-style:normal;font-size:.84rem;line-height:1.5}
#opinioes .telemovel .bolha small{color:var(--tinta3)!important}
#opinioes .telemovel .tel-topo b{color:var(--tinta);font-weight:600}
.pontos.bl{left:0;bottom:0;
  -webkit-mask:radial-gradient(circle at 0 100%,#000 0 22%,transparent 70%);mask:radial-gradient(circle at 0 100%,#000 0 22%,transparent 70%)}

/* ---- SOBRE: retrato com aro, e o telemovel do Instagram ------------------------- */
.retratofig{position:relative}
.retratofig img{box-shadow:0 0 0 8px #fff,0 30px 60px -30px rgba(43,26,60,.55),0 0 60px -20px rgba(230,79,180,.3)!important}
.insta-duo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.insta-duo{grid-template-columns:1fr}}
.tel-insta .tel-conversa{-webkit-mask:none;mask:none;padding-top:5.2rem}
.tel-feed{animation-duration:46s}
.tel-feed figure{margin:0 0 .5rem;aspect-ratio:4/5;overflow:hidden;background:var(--papel3)}
.tel-feed img{width:100%;height:100%;object-fit:cover;display:block}
.tel-insta .tel-topo b{color:var(--tinta);font-weight:600}

/* ==========================================================================
   16/10/2026, terceira volta — a loja volta, a lua de hoje e o leque
   ======================================================================= */

/* ---- AS CATEGORIAS "EM BREVE" (montra da entrada e painel da loja) ------- */
.montra-embreve{display:none}
.loja-em-breve .montra-embreve{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.3rem)}
.loja-em-breve .embreve .montra-embreve{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.6rem}
@media(max-width:760px){.loja-em-breve .montra-embreve{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mb{position:relative;background:#fff;border:1px solid var(--linha);border-radius:24px;padding:1.4rem 1.2rem 1.3rem;
  text-align:center;box-shadow:0 20px 36px -28px rgba(43,26,60,.45);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.mb:hover{transform:translateY(-6px) rotate(-1deg)}
.mb-arte{display:block;width:78px;height:78px;margin:0 auto .5rem;border-radius:50%;background:var(--lavanda);padding:10px}
.mb-arte svg{width:100%;height:100%;display:block}
.mb:hover .mb-arte svg{animation:mbBalanca 1.2s ease-in-out}
@keyframes mbBalanca{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
.mb h3{font-family:var(--serif);font-size:1.35rem;margin:.2rem 0 .2rem;color:var(--tinta)}
.mb p{margin:0;font-size:.86rem;color:var(--tinta2)}
.mb-chip{display:inline-block;margin-top:.8rem;padding:.3rem .75rem;border-radius:999px;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;background:#FBE4F2;color:#A2287A}

/* ---- A LUA DE HOJE (abertura) -------------------------------------------- */
.luahoje{display:inline-flex;align-items:center;gap:.8rem;margin:1.6rem 0 0;padding:.55rem 1.1rem .55rem .55rem;
  border-radius:999px;background:#fff;border:1px solid var(--linha);box-shadow:0 14px 28px -20px rgba(43,26,60,.5)}
.luahoje[hidden]{display:none}
.lh-lua{width:42px;height:42px;flex:0 0 42px;border-radius:50%;filter:drop-shadow(0 0 10px rgba(191,162,228,.6))}
.lh-lua svg{width:100%;height:100%;display:block}
.lh-txt{font-size:.86rem;color:var(--tinta2);line-height:1.3}
.lh-txt b{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ametista);font-weight:500}

/* ---- O LEQUE DE CARTAS (Sobre) --------------------------------------------- */
.leque{position:relative;height:clamp(340px,40vw,440px);justify-self:center;width:100%;max-width:440px}
.leque figure{position:absolute;left:50%;bottom:0;width:clamp(150px,17vw,200px);aspect-ratio:2/3;margin:0 0 0 calc(clamp(150px,17vw,200px) / -2);
  border-radius:16px;overflow:hidden;background:var(--uva);transform-origin:50% 112%;
  transform:rotate(calc(var(--i,0) * 10deg)) translateY(calc(var(--i,0) * var(--i,0) * 4px));
  box-shadow:0 0 0 7px #fff,0 26px 40px -24px rgba(43,26,60,.6);
  transition:transform .9s cubic-bezier(.34,1.3,.5,1)}
.leque figure img{width:100%;height:100%;object-fit:cover;display:block}
.leque:hover figure{transform:rotate(calc(var(--i,0) * 17deg)) translateY(calc(var(--i,0) * var(--i,0) * 6px - 14px))}
.leque figure:last-of-type{box-shadow:0 0 0 7px #fff,0 30px 50px -22px rgba(43,26,60,.7),0 0 50px -14px rgba(230,79,180,.45)}
@media(prefers-reduced-motion:reduce){.leque figure{transition:none}}
/* o leque descia por cima da secção escura de baixo */
.insta-grande{padding-bottom:clamp(4rem,7vw,6rem)!important}
.leque{margin-bottom:clamp(2rem,4vw,3rem)}
/* a loja vazia ocupava só a metade esquerda: texto de um lado, categorias do outro */
.loja-em-breve .embreve{max-width:none;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(1.6rem,4vw,3.4rem);align-content:center;padding:clamp(1.8rem,3.4vw,2.8rem)}
.loja-em-breve .embreve > *:not(.montra-embreve){grid-column:1}
.loja-em-breve .embreve > .montra-embreve{grid-column:2;grid-row:1 / span 3;margin-top:0;align-self:center}
@media(max-width:860px){.loja-em-breve .embreve{grid-template-columns:1fr}
  .loja-em-breve .embreve > .montra-embreve{grid-column:1;grid-row:auto;margin-top:1.6rem}}
/* o texto da loja vazia esticava-se pela altura das categorias */
.loja-em-breve .embreve{grid-template-rows:auto auto 1fr}
.loja-em-breve .embreve > .embreve-t{align-self:end}
.loja-em-breve .embreve > .embreve-cta{align-self:start}
.loja-em-breve .embreve > .montra-embreve{grid-row:1 / span 3}
.loja-em-breve .embreve{grid-template-rows:1fr auto auto 1fr}
.loja-em-breve .embreve > .embreve-t{grid-row:2;align-self:end}
.loja-em-breve .embreve > p:not(.embreve-t):not(.embreve-cta){grid-row:3}
.loja-em-breve .embreve > .embreve-cta{grid-row:4;align-self:start}
.loja-em-breve .embreve > .montra-embreve{grid-row:1 / span 4}
.embreve-cta .btn{padding-inline:1.3rem}
@media(max-width:860px){.loja-em-breve .embreve{grid-template-rows:none}
  .loja-em-breve .embreve > *{grid-row:auto!important}}

/* ==========================================================================
   FADAS-MADRINHAS — 19/10/2026

   A página "Sobre mim" passou a ser a das fadas-madrinhas: abre com uma
   introdução, segue a Mafalda como estava, e a seguir as outras três em
   cartões. O vocabulário é o do resto do site — cantos assimétricos, aro
   branco nas fotografias, autocolantes e estrelinhas — e nada de novo além
   da varinha.
   ======================================================================= */
.fadas-intro{position:relative;text-align:center;max-width:46rem;margin:0 auto clamp(2.6rem,5vw,4rem)}
.fadas-intro .eyebrow{display:inline-block}
.fadas-intro h1{font-size:clamp(2.3rem,5.4vw,3.8rem);line-height:1.06;margin:.3rem 0 1rem}
.fadas-intro .lead{max-width:52ch;margin:0 auto}

.fadas{position:relative;overflow:hidden;background:var(--papel2)}
.fadas > .wrap{position:relative;z-index:1}
.fadas-cab{position:relative;text-align:center;max-width:40rem;margin:0 auto clamp(2.4rem,4.6vw,3.6rem)}
.fadas-cab .eyebrow{display:inline-block}
.fadas-cab h2{margin:.3rem 0 .8rem}
.fadas-cab .lead{margin:0 auto;max-width:46ch}

.fadas-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
@media(max-width:900px){.fadas-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.fadas-grade{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

/* o cartão: banda lavanda por trás da metade de cima da fotografia, para o
   aro branco se ver — branco sobre branco não tinha contorno nenhum */
.fada{position:relative;text-align:center;border:1px solid var(--linha);border-radius:26px 6px 26px 6px;
  background:linear-gradient(var(--lavanda),var(--lavanda)) top / 100% 9.5rem no-repeat, #fff;
  padding:1.5rem clamp(1.2rem,2.4vw,1.6rem) clamp(1.4rem,2.6vw,1.8rem);
  box-shadow:0 24px 44px -32px rgba(43,26,60,.45)}
.fada-foto{position:relative;margin:0 auto 1.3rem;width:min(100%,250px)}
.fada-foto img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:26px 6px 26px 6px;
  box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(107,63,166,.16),0 22px 40px -24px rgba(43,26,60,.55);
  transition:transform .6s cubic-bezier(.34,1.3,.5,1)}
/* ao passar o rato a fotografia levanta-se e roda um nada — o cartão fica
   quieto, porque o transform dele pertence à revelação (.rv) */
.fada:hover .fada-foto img{transform:translateY(-5px) rotate(-1.4deg)}
.fada:nth-child(2):hover .fada-foto img{transform:translateY(-5px) rotate(1.4deg)}
.fada h3{font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2rem);font-weight:600;line-height:1.1;margin:0 0 .45rem;color:var(--tinta)}
.fada-arte{display:inline-block;margin:0 0 1.1rem;padding:.32rem .85rem;border-radius:999px;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  background:var(--lavanda);color:var(--ametista-esc)}
.fada-historia{border-top:1px dashed rgba(107,63,166,.35);padding-top:1.1rem}
.fada-historia p{margin:0 0 .8rem;font-size:.95rem;line-height:1.65;text-align:left}
.fada-historia p:last-child{margin-bottom:0}
/* o lugar reservado à história, enquanto ela não chega */
.fada-historia .fada-embreve{font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.45;
  color:var(--tinta3);text-align:center}
@media(prefers-reduced-motion:reduce){.fada-foto img{transition:none}}
/* A roda zodiacal da "Essência" ficava por trás de cartões translúcidos e,
   no telemóvel, os signos caíam em cima das linhas de texto. Ali sai. */
@media(max-width:700px){#essencia > .deco{display:none}}
/* abaixo dos 1100 px a varinha deixa de caber ao lado do título: sobe para o
   canto, por cima da linha do "Fadas-Madrinhas" (a 800 px saía 63 px fora) */
@media(max-width:1100px){.fadas-intro .stk{--stk-w:68px!important;--stk-r:0%!important;--stk-t:-10%!important}}
/* autocolantes no topo das Perguntas e do Contacto (19/10/2026). Abaixo dos
   900 px o título ocupa a largura toda e eles cairiam em cima dele. */
.pagetop,.topo-claro{position:relative;overflow:hidden}
@media(max-width:900px){.pagetop > .stk,.pagetop > .estrelas{display:none}}
@media(max-width:1000px){.topo-claro > .stk,.topo-claro > .estrelas{display:none}}

/* ==========================================================================
   MAIS VIDA — 19/10/2026

   "Aquele branco é muito fraco, muito morto." A resposta não é escurecer
   (já se tentou a 09/09 e ele preferiu o claro): é dar ao claro textura,
   luz que se mexe e blocos de cor com contraste a sério — a lição do Pet
   Hotel, onde o creme vive entre faixas de cor cheia.
   ======================================================================= */

/* ---- 1. grão de papel: tira o aspecto de cor chapada de ecrã ----------- */
body::after{content:"";position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---- 2. auroras: luz a andar devagar por trás das secções claras ------- */
.aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;aspect-ratio:1;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){width:min(56vw,700px);left:-14%;top:-34%;
  background:radial-gradient(circle,rgba(107,63,166,.30),rgba(107,63,166,0) 66%);animation:aurA 34s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:min(42vw,540px);right:-12%;top:8%;
  background:radial-gradient(circle,rgba(230,79,180,.15),rgba(230,79,180,0) 66%);animation:aurB 41s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:min(48vw,600px);left:34%;bottom:-46%;
  background:radial-gradient(circle,rgba(176,110,220,.22),rgba(176,110,220,0) 66%);animation:aurC 29s ease-in-out infinite alternate}
.aurora.a1 i:nth-child(1){left:auto;right:-16%;top:-20%}
.aurora.a1 i:nth-child(2){right:auto;left:-10%;top:30%}
.aurora.a2 i:nth-child(3){left:-8%;bottom:-30%}
@keyframes aurA{to{transform:translate(16vw,10vh) scale(1.18)}}
@keyframes aurB{to{transform:translate(-14vw,8vh) scale(.88)}}
@keyframes aurC{to{transform:translate(-10vw,-14vh) scale(1.12)}}
.com-aurora > :not(.aurora):not(.stk):not(.estrelas):not(.deco):not(.pontos):not(canvas){position:relative;z-index:1}
/* as manchas que a .malha já tinha estavam a 10–14% (não se viam) e uma era
   dourada — a cor que saiu da marca a 09/09 */
.malha::before{background:radial-gradient(circle, rgba(107,63,166,.30), transparent 66%)}
.malha::after{background:radial-gradient(circle, rgba(230,79,180,.16), transparent 68%)}

/* ---- 3. o rasto de estrelas do rato ------------------------------------ */
.rasto{position:fixed;inset:0;width:100vw;height:100vh;z-index:96;pointer-events:none}

/* ---- 4. o topo das consultas passa a céu ------------------------------- */
.topo-partido.ceu-topo{position:relative;overflow:hidden;border-bottom:0;
  padding-bottom:clamp(3rem,6vw,5rem);
  background:radial-gradient(ellipse at 18% 0%,rgba(107,63,166,.45),transparent 58%),
             radial-gradient(ellipse at 92% 110%,rgba(230,79,180,.2),transparent 55%),var(--noite)}
.ceu-topo .ceu-vivo{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.ceu-topo > .wrap{position:relative;z-index:1}
.ceu-topo .eyebrow{color:#DCCBF0}
.ceu-topo h1{color:#F9F2FC}
.ceu-topo .lead{color:#DCCDEB}
.ceu-topo .deco{--traco:#DBC3EE;--brilho:#E64FB4}
.ceu-topo .deco-zodiaco svg{opacity:.8}

/* ---- 5. os separadores ------------------------------------------------- */
#consultas.malha{overflow:clip}          /* hidden partia o position:sticky */
#consultas{padding-top:clamp(2.4rem,4vw,3.4rem)}
.separadores{position:sticky;top:calc(var(--topo-h,72px) + 10px);z-index:20;display:flex;gap:.3rem;
  width:max-content;max-width:100%;margin:0 auto;padding:.4rem;border-radius:999px;
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(107,63,166,.18);box-shadow:0 18px 40px -26px rgba(43,26,60,.55);
  overflow-x:auto;scrollbar-width:none}
.separadores::-webkit-scrollbar{display:none}
.sep{position:relative;z-index:1;flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;border:0;background:none;
  cursor:pointer;font:inherit;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--tinta2);padding:.72rem 1.05rem;border-radius:999px;transition:color .35s}
.sep b{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.02rem;letter-spacing:0;text-transform:none;
  color:var(--fc2);transition:color .35s}
.sep i{font-style:normal;font-size:.64rem;letter-spacing:0;min-width:1.6em;height:1.6em;padding:0 .3em;display:inline-grid;
  place-items:center;border-radius:999px;background:var(--lavanda);color:var(--tinta2);transition:background .35s,color .35s}
.sep:hover{color:var(--tinta)}
.sep.on, .sep.on b{color:#fff}
.sep.on i{background:rgba(255,255,255,.22);color:#fff}
.sep:focus-visible{outline:2px solid var(--ametista);outline-offset:2px}
.sep-pilula{position:absolute;z-index:0;left:0;top:.4rem;bottom:.4rem;width:0;border-radius:999px;
  background:linear-gradient(120deg,var(--fc,#2B1A3C),var(--fc2,#6B3FA6));
  box-shadow:0 10px 22px -12px var(--fc,#2B1A3C);
  transition:transform .55s cubic-bezier(.34,1.3,.5,1),width .55s cubic-bezier(.34,1.3,.5,1)}
.girar{text-align:center}

/* ---- 6. as famílias: cada uma abre com um separador de arquivo --------- */
.familias{margin-top:.6rem}
.familia{position:relative;padding:clamp(2.8rem,5vw,4rem) 0 clamp(1.4rem,2.4vw,2rem)}
.familia[hidden]{display:none}
.familia.tinta{background:rgba(242,234,250,.75);box-shadow:0 0 0 100vmax rgba(242,234,250,.75);clip-path:inset(0 -100vmax)}
.fam-cab{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem 2rem;
  margin-top:2.1rem;padding:clamp(1.3rem,2.6vw,1.9rem) clamp(1.3rem,3vw,2.4rem);border-radius:6px 26px 26px 26px;color:#fff;
  background:radial-gradient(circle at 82% 20%,rgba(255,255,255,.16),transparent 42%),linear-gradient(120deg,var(--fc),var(--fc2));
  box-shadow:0 26px 50px -30px var(--fc)}
.fam-cab::before{content:attr(data-num);position:absolute;left:0;bottom:calc(100% - 1px);min-width:5rem;padding:.38rem 1.1rem .22rem;
  border-radius:16px 16px 0 0;background:var(--fc);color:#fff;font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:1.35rem;line-height:1.2;text-align:center}
.fam-tit{position:relative;z-index:1}
.fam-cab h2{color:#fff;margin:0;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.05}
.fam-cab p{margin:.45rem 0 0;color:rgba(255,255,255,.86);max-width:54ch}
.fam-arte{position:absolute;right:clamp(1rem,4vw,3rem);top:50%;width:clamp(90px,11vw,140px);
  transform:translateY(-50%) rotate(-8deg);opacity:.14;pointer-events:none}
.fam-arte svg{width:100%;height:auto;display:block}
.fam-quem{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.7rem;padding:.38rem 1rem .38rem .38rem;
  border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;
  text-decoration:none;font-size:.88rem;white-space:nowrap;transition:background .3s}
.fam-quem:hover{background:rgba(255,255,255,.26)}
.fam-quem b{font-weight:600}
.fq-fotos{display:inline-flex}
.fq-fotos img,.fq-ini{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-10px;background:var(--fc2)}
.fq-fotos > :first-child{margin-left:0}
.fq-ini{display:inline-grid;place-items:center;font-family:var(--serif);font-weight:600;color:#fff}
@media(max-width:720px){.fam-cab{grid-template-columns:1fr}.fam-quem{justify-self:start}.fam-arte{top:34%}}

/* ---- 7. as cartas: cor da família, número de arcano, brilho e inclinação */
.familia .cartas{margin-top:1.6rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.carta .tl{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.familia .carta .fr{border:0;border-radius:14px;padding:1.1rem .9rem 1.3rem;justify-content:space-between;gap:.5rem;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.17),transparent 56%),linear-gradient(165deg,var(--fc2),var(--fc) 72%);
  box-shadow:inset 0 0 0 6px var(--fc),inset 0 0 0 7px rgba(255,255,255,.34),0 22px 40px -24px var(--fc)}
.familia .carta .bk{border:0;border-radius:14px;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.12),transparent 50%),linear-gradient(160deg,var(--fc),#20132B);
  box-shadow:inset 0 0 0 6px var(--fc),inset 0 0 0 7px rgba(255,255,255,.24)}
.c-num{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:rgba(255,255,255,.72);letter-spacing:.08em;line-height:1}
.c-arte{flex:1;display:grid;place-items:center;width:100%}
.carta .fr .c-arte svg,.or-frente .c-arte svg{width:60%;max-width:118px;height:auto;opacity:1;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.28))}
.c-foil{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.32),transparent 42%),
             linear-gradient(115deg,transparent 18%,rgba(255,160,225,.20) 36%,rgba(191,150,255,.20) 50%,rgba(190,255,225,.14) 62%,transparent 82%);
  background-size:100% 100%,240% 240%;background-position:0 0,var(--mx,50%) var(--my,50%)}
.carta .bk .c-foil{background:radial-gradient(circle at calc(100% - var(--mx,50%)) var(--my,40%),rgba(255,255,255,.22),transparent 42%)}
.carta:hover .c-foil{opacity:1}
.carta.dar{animation:darCarta .75s cubic-bezier(.2,.9,.3,1.15) calc(var(--k,0) * 70ms) both}
@keyframes darCarta{from{opacity:0;transform:translateY(-56px) rotate(-9deg) scale(.86)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .familia .cartas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;
    margin-inline:-1.3rem;padding:.4rem 1.3rem 1.2rem;scrollbar-width:none}
  .familia .cartas::-webkit-scrollbar{display:none}
  .familia .carta{flex:0 0 64%;max-width:250px;scroll-snap-align:center}
  .separadores{border-radius:18px}
}

/* ---- 8. TIRA UMA CARTA ------------------------------------------------- */
.oraculo{text-align:center;padding:clamp(4.5rem,9vw,7rem) 0 clamp(4rem,8vw,6rem)}
.oraculo .ceu-vivo{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.oraculo > .wrap{position:relative;z-index:2}
.or-cab{max-width:40rem;margin:0 auto}
.or-cab .eyebrow{display:inline-block}
.or-cab h2{font-size:clamp(2.4rem,6vw,4rem);margin:.3rem 0 .8rem}
.baralho{position:relative;height:clamp(320px,34vw,410px);max-width:760px;margin:clamp(1.4rem,3.4vw,2.2rem) auto 0}
.or-carta{--w:clamp(98px,12vw,148px);position:absolute;left:50%;bottom:10px;width:var(--w);aspect-ratio:5/7.4;
  margin-left:calc(var(--w) / -2);padding:0;border:0;background:none;cursor:pointer;perspective:1000px;
  transform-origin:50% 100%;z-index:calc(10 + var(--i));
  transform:rotate(calc(var(--a) * 9deg)) translateY(calc(var(--a) * var(--a) * 5px));
  transition:transform .7s cubic-bezier(.34,1.25,.5,1),opacity .5s}
.or-carta:hover,.or-carta:focus-visible{transform:rotate(calc(var(--a) * 9deg)) translateY(calc(var(--a) * var(--a) * 5px - 28px))}
.or-carta:focus-visible{outline:none}
.or-carta:focus-visible .or-tras{box-shadow:inset 0 0 0 5px #4A2878,inset 0 0 0 6px #fff,0 0 0 3px var(--neon)}
.or-carta .in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.3,.85,.3,1) .25s}
.or-face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center}
.or-tras{justify-content:center;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 2px,transparent 2px 9px),linear-gradient(160deg,#5A3579,#2B1640);
  box-shadow:inset 0 0 0 5px #4A2878,inset 0 0 0 6px rgba(219,195,238,.55),0 18px 30px -18px rgba(0,0,0,.75)}
.or-tras svg{width:38%;fill:#DBC3EE;filter:drop-shadow(0 0 10px rgba(230,79,180,.65))}
.or-frente{transform:rotateY(180deg);padding:.85rem .7rem 1rem;justify-content:space-between;color:#fff;text-align:center;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.17),transparent 56%),linear-gradient(165deg,var(--fc2,#6B3FA6),var(--fc,#4A2878) 72%);
  box-shadow:inset 0 0 0 5px var(--fc,#4A2878),inset 0 0 0 6px rgba(255,255,255,.35),0 0 70px -10px var(--fc2,#6B3FA6)}
.or-frente .t{font-family:var(--serif);font-size:1rem;line-height:1.15;color:#F8F2FC;text-wrap:balance}
.or-frente .m{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:#DCCBF0;margin-top:.25rem}
.or-frente .c-foil{display:none}
.baralho.escolheu .or-carta{opacity:.16;pointer-events:none;
  transform:rotate(calc(var(--a) * 9deg)) translateY(calc(var(--a) * var(--a) * 5px + 46px))}
.baralho.escolheu .or-carta.tirada{opacity:1;z-index:40;transform:translateY(-14px) rotate(0deg) scale(1.42)}
.or-carta.tirada .in{transform:rotateY(180deg)}
.baralho.junta .or-carta{opacity:1;transform:rotate(calc(var(--a) * 1.5deg))}
.baralho.junta .or-carta .in{transform:none;transition-delay:0s}
.baralho.mistura .or-carta{animation:misturaCartas .9s cubic-bezier(.4,0,.2,1) both}
.baralho.mistura .or-carta:nth-child(odd){--d:-1}
.baralho.mistura .or-carta:nth-child(even){--d:1}
@keyframes misturaCartas{35%{transform:translateX(calc(var(--d) * 92px)) rotate(calc(var(--d) * 9deg))}
  70%{transform:translateX(calc(var(--d) * -18px)) rotate(0deg)}100%{transform:none}}
.baralho.abre .or-carta{animation:abreLeque .8s cubic-bezier(.34,1.25,.5,1) calc(var(--i) * 45ms) backwards}
@keyframes abreLeque{from{transform:none;opacity:.7}}
.or-res{min-height:9.5rem;margin-top:1.4rem}
.or-res > *{animation:orSobe .6s cubic-bezier(.2,.8,.3,1) both}
.or-res > :nth-child(2){animation-delay:.06s}.or-res > :nth-child(3){animation-delay:.12s}.or-res > :nth-child(4){animation-delay:.18s}
@keyframes orSobe{from{opacity:0;transform:translateY(14px)}}
.or-calhou{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:#EFA9D8;margin:0}
.oraculo .or-res h3{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);color:#F9F2FC;margin:.2rem 0 .3rem}
.oraculo .or-meta{color:#DCCBF0;margin:0 0 1.2rem}
.or-bot{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:0}
.oraculo .btn.ghost{color:#F2E8F8;border-color:rgba(255,255,255,.35)}
.oraculo .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
@media(max-width:560px){.or-carta{--w:96px}.baralho{height:300px}
  .baralho.escolheu .or-carta.tirada{transform:translateY(-10px) rotate(0deg) scale(1.55)}}

/* ---- 9. o carrossel da entrada com a cor da família -------------------- */
.cc{background:radial-gradient(circle at 85% 0%,rgba(255,255,255,.12),transparent 45%),
  linear-gradient(160deg,var(--fc2,var(--uva)) 0%,var(--fc,var(--noite)) 62%,#20132B 100%)}
.cc-ico{width:52px;height:52px;background:rgba(255,255,255,.14)}
.cc-ico svg{width:30px;height:30px;fill:initial}
.cc-fam{margin:.4rem 0 -.2rem;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)!important}

@media(prefers-reduced-motion:reduce){
  .aurora i,.carta.dar,.baralho .or-carta,.or-res > *{animation:none!important}
  .carta .tl,.or-carta,.or-carta .in,.sep-pilula{transition:none!important}
}

/* a face que se ve troca-se a meio da volta (js: classe "virou") */
.or-frente{visibility:hidden}
.or-carta.virou .or-frente{visibility:visible}
.or-carta.virou .or-tras{visibility:hidden}
/* familias com uma ou duas cartas ficavam encostadas a esquerda, com meia
   largura vazia: as cartas passam a ter largura fixa e a fila fica centrada */
@media(min-width:641px){
  .familia .cartas{display:flex;flex-wrap:wrap;justify-content:center;gap:1.3rem}
  .familia .carta{flex:0 0 clamp(190px,17vw,218px)}
}

/* o leque abre-se mais: cartas maiores e espalhadas na horizontal, como uma
   mao de cartas, e nao so rodadas sobre o mesmo ponto */
.or-carta{--w:clamp(112px,13vw,166px);--sx:clamp(26px,3.4vw,40px);
  transform:translateX(calc(var(--a) * var(--sx))) rotate(calc(var(--a) * 8deg)) translateY(calc(var(--a) * var(--a) * 6px))}
.or-carta:hover,.or-carta:focus-visible{
  transform:translateX(calc(var(--a) * var(--sx))) rotate(calc(var(--a) * 8deg)) translateY(calc(var(--a) * var(--a) * 6px - 28px))}
.baralho.escolheu .or-carta{
  transform:translateX(calc(var(--a) * var(--sx))) rotate(calc(var(--a) * 8deg)) translateY(calc(var(--a) * var(--a) * 6px + 46px))}
.baralho.escolheu .or-carta.tirada{transform:translateY(-14px) rotate(0deg) scale(1.42)}
.baralho.junta .or-carta{transform:rotate(calc(var(--a) * 1.5deg))}
.baralho{height:clamp(340px,33vw,430px);margin-top:clamp(.8rem,2vw,1.4rem)}
@media(max-width:560px){.or-carta{--w:100px;--sx:24px}.baralho{height:320px}
  .baralho.escolheu .or-carta.tirada{transform:translateY(-10px) rotate(0deg) scale(1.5)}}

/* ==========================================================================
   A LOJA ABRE — 24/10/2026

   As tres correccoes que estavam so na copia de teste (22/10), mais o que a
   loja verdadeira pede: cartoes sem descricao, fotografias quadradas e o
   botao do WhatsApp no cesto.
   ======================================================================= */
/* sem o overflow, uma fotografia ao alto ignora o aspect-ratio e o cartao
   fica mais alto que os outros */
.card .ph{overflow:hidden}
.item .mini{overflow:hidden}
.item .mini img{width:100%;height:100%;object-fit:cover;display:block}
/* sem descricao, o preco e o "Juntar" ficam alinhados em baixo na mesma */
.card .ln{margin-top:auto}
/* os produtos sao altos (veloes, frascos): na montra da entrada o quadrado
   mostra-os inteiros, onde o 4:3 lhes cortava a base */
#montrahome .card .ph:has(img.pfotoprod){aspect-ratio:1/1}

/* ==========================================================================
   AS FADAS EM PERFIL — 24/10/2026

   Os textos verdadeiros tem tres paragrafos cada; nos cartoes de tres colunas
   de 19/10 ficavam tiras altissimas de texto. Passam a uma linha por pessoa:
   fotografia de um lado, texto do outro, e o lado alterna. Mesmo vocabulario:
   cantos assimetricos, aro branco, banda lavanda por tras da fotografia.
   ======================================================================= */
.perfis{display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
.perfil{position:relative;display:grid;grid-template-columns:minmax(190px,280px) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.4rem);align-items:start;
  padding:clamp(1.4rem,3vw,2.4rem);border:1px solid var(--linha);border-radius:26px 6px 26px 6px;
  background:linear-gradient(90deg,var(--lavanda),var(--lavanda)) left / clamp(150px,22%,230px) 100% no-repeat, #fff;
  box-shadow:0 24px 44px -32px rgba(43,26,60,.45)}
.perfil:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(190px,280px);
  background:linear-gradient(90deg,var(--lavanda),var(--lavanda)) right / clamp(150px,22%,230px) 100% no-repeat, #fff}
.perfil:nth-child(even) .fada-foto{order:2}
.perfil .fada-foto{width:100%;margin:0}
.perfil h3{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.3rem);font-weight:600;line-height:1.08;margin:.2rem 0 .5rem;color:var(--tinta)}
.perfil .fada-arte{margin-bottom:1.1rem}
.perfil .fada-historia{border-top:1px dashed rgba(107,63,166,.35);padding-top:1.1rem}
.perfil .fada-historia p{font-size:.97rem;line-height:1.72;text-align:left;margin:0 0 .9rem}
.perfil .fada-historia p:last-child{margin-bottom:0}
/* a Mercedes ainda nao tem fotografia: monograma no lugar, com o mesmo aro */
.fada-foto.sem-foto{aspect-ratio:4/5;border-radius:26px 6px 26px 6px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.2),transparent 55%),linear-gradient(160deg,#A55AD8,#5F2A86);
  box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(107,63,166,.16),0 22px 40px -24px rgba(43,26,60,.55)}
.fada-mono{font-family:var(--serif);font-style:italic;font-size:clamp(4.5rem,9vw,6.5rem);color:#F7F2FC;line-height:1}
@media(max-width:760px){
  .perfil,.perfil:nth-child(even){grid-template-columns:1fr;
    background:linear-gradient(var(--lavanda),var(--lavanda)) top / 100% 9.5rem no-repeat, #fff}
  .perfil:nth-child(even) .fada-foto{order:0}
  .perfil .fada-foto{width:min(260px,80%);margin:0 auto}
  .perfil .perfil-txt{text-align:center}
}

/* ==========================================================================
   A FICHA DO PRODUTO — 24/10/2026

   A mesma familia da ficha das consultas (cresce a partir do cartao). No
   computador: fotografia quadrada fixa a esquerda enquanto o texto corre a
   direita. No telemovel: ecra inteiro, como uma pagina, com o fechar sempre
   a vista. As seccoes longas (modo de utilizacao, cuidados) abrem com um
   toque, para a compra nao ficar enterrada debaixo de trinta linhas.
   ======================================================================= */
.card[data-ver]{cursor:pointer}
.card .ver{all:unset;cursor:pointer;text-align:left}
.card .ver:focus-visible{outline:2px solid var(--ametista);outline-offset:3px;border-radius:4px}
.card:hover .ver{text-decoration:underline;text-decoration-color:rgba(107,63,166,.45);text-underline-offset:4px}

.produtoficha{overscroll-behavior:contain}
.produtoficha .fichacx{width:min(1040px,94vw);margin:4vh auto;align-items:start;overflow:clip;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pf-foto{position:sticky;top:0;align-self:start;aspect-ratio:1/1;background:#EFE6DA;overflow:hidden}
.pf-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pf-foto svg{display:block;width:60%;margin:20%}
.pf-preco{font-family:var(--serif);font-size:2.1rem;color:var(--ametista);margin:0 0 1rem;line-height:1}
.pf-esg{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;vertical-align:middle;
  background:#FBE4F2;color:#A2287A;padding:.3rem .7rem;border-radius:999px}
.pf-compra{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;padding:.4rem 0 1.4rem;margin-bottom:1.3rem;
  border-bottom:1px solid var(--linha)}
.pf-qt{display:inline-flex;align-items:center;border:1px solid var(--linha);border-radius:999px;background:#fff}
.pf-qt button{width:40px;height:42px;border:0;background:none;font-size:1.25rem;cursor:pointer;color:var(--tinta)}
.pf-qt button:disabled{opacity:.3;cursor:default}
.pf-qn{min-width:1.8em;text-align:center;font-weight:500;color:var(--tinta)}
.pf-intro p{margin:0 0 .9rem;font-size:.98rem;line-height:1.75;color:var(--tinta2)}
.pf-intro .pf-contem{background:var(--lavanda);border-radius:14px 4px 14px 4px;padding:.8rem 1rem;font-size:.92rem;line-height:1.6}
.pf-contem b{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ametista-esc);
  font-weight:600;margin-bottom:.2rem}
.pf-intro .pf-item{padding-left:1rem;position:relative;margin-bottom:.35rem}
.pf-intro .pf-item::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--ametista-cl)}
.pf-aviso{margin:1rem 0 1.2rem;padding:.9rem 1.1rem;border-left:3px solid var(--neon);background:#FDF0F8;
  border-radius:0 12px 12px 0;font-size:.9rem;line-height:1.65;color:#5B2A4C}
.pf-sec{border-top:1px solid var(--linha)}
.pf-sec summary{list-style:none;cursor:pointer;position:relative;padding:1rem 2rem 1rem 0;
  font-family:var(--serif);font-size:1.25rem;color:var(--tinta)}
.pf-sec summary::-webkit-details-marker{display:none}
.pf-sec summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.35rem;color:var(--ametista);transition:transform .3s}
.pf-sec[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.pf-sec summary:focus-visible{outline:2px solid var(--ametista);outline-offset:2px}
.pf-sec ul{margin:0 0 1.1rem;padding-left:1.15rem;display:grid;gap:.45rem}
.pf-sec li,.pf-sec p{font-size:.94rem;line-height:1.6;color:var(--tinta2)}
.pf-sec p{margin:0 0 .6rem}
.pf-nota{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--linha);font-size:.78rem;line-height:1.55;color:var(--tinta3)}
@media(max-width:760px){
  .produtoficha .fichacx{width:100%;min-height:100%;margin:0;border-radius:0;grid-template-columns:1fr;animation-name:abrefichaM}
  .pf-foto{position:relative}
  .produtoficha .fechar{position:fixed;top:.8rem;right:.8rem;box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
  .pf-compra .btn{flex:1 1 auto;justify-content:center}
}
@keyframes abrefichaM{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* a seta das Perguntas (summary::after com bordas) somava-se ao "+" da ficha */
.pf-sec summary::after{border:0;width:auto;height:auto;margin:0;line-height:1}

/* ==========================================================================
   O CABEÇALHO A ROXO — 25/10/2026

   Pedido dele: a barra do topo em roxo e os ícones a branco. O roxo é o da
   casa — do uva (#4A2878) ao violeta das cartas de tarot (#A24FB4) — e o
   branco por cima passa dos 7:1. O magenta do néon continua a marcar a página
   em que se está e o número do cesto. A gaveta do telemóvel vai a roxo também:
   com os links a branco, numa gaveta clara não se viam.
   ======================================================================= */
#topo{background:linear-gradient(100deg,#4A2878 0%,#6B3FA6 55%,#A24FB4 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px -18px rgba(43,22,64,.75)}
#topo .lg img{filter:brightness(0) invert(1)}
#topo nav a{color:rgba(255,255,255,.86)}
#topo nav a:hover{color:#fff;background:rgba(255,255,255,.12)}
#topo nav a.on{color:#fff}
#burger i{background:#fff}
.cartbtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38);color:#fff}
.cartbtn:hover{background:#fff;border-color:#fff;color:var(--uva)}
.cartbtn .n{border-color:#4A2878}
#topo .cartbtn:focus-visible,#burger:focus-visible,#topo nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:1060px){
  #topo{background:linear-gradient(100deg,#4A2878 0%,#6B3FA6 55%,#A24FB4 100%)}
  #topo nav{background:linear-gradient(180deg,#4A2878,#6B3FA6);border-left-color:rgba(255,255,255,.1)}
  #topo nav a{border-bottom-color:rgba(255,255,255,.12)}
  #topo nav a:hover{background:rgba(255,255,255,.08)}
  #topo nav a.on::after{border-color:#fff}
}

/* ==========================================================================
   A RONDA DA MAFALDA — 25/10/2026

   Os prints que ela mandou por WhatsApp, um a um. Cada bloco diz a que
   pedido responde, entre aspas, com as palavras dela.
   ======================================================================= */

/* ---- "U em branco": o Ú do rodapé ia a roxo-claro sobre a noite ---------- */
body>footer .lg i{color:inherit}

/* ---- "imagem alinhada com o texto": no computador a fotografia ocupa a
   altura toda da coluna do texto, do pequeno título de cima à lua de baixo,
   em vez de ficar centrada a meio e solta. A legenda sobe para o canto e os
   pontos do carrossel entram na fotografia. ------------------------------- */
@media(min-width:981px){
  #hero .wrap.hero{align-items:stretch}
  #hero .heroart.car-foto{aspect-ratio:auto;margin:0;min-height:440px}
  #hero .car-foto figcaption{bottom:auto;top:1rem;left:1rem;translate:none}
  #hero .car-foto .car-pontos{bottom:.7rem}
  #hero .car-foto .car-pontos button::before{background:rgba(255,255,255,.65)}
  #hero .car-foto .car-pontos button[aria-current="true"]::before{background:#fff}
}
/* ---- "acho que tem muito espaço": menos folga entre a lua e a onda ------- */
#hero{padding-bottom:clamp(1.8rem,3.4vw,2.8rem)}
#hero .luahoje{margin-top:1.2rem}

/* ---- "inverter as cores": a caixa dos botões passa a roxo, como a barra
   do topo, e os botões a claro por cima ----------------------------------- */
#hero .cta{background:linear-gradient(115deg,#4A2878 0%,#6B3FA6 55%,#A24FB4 100%);border-color:transparent;
  box-shadow:0 26px 46px -28px rgba(74,40,120,.75)}
#hero .cta .btn{background:#fff;border-color:#fff;color:var(--uva)}
#hero .cta .btn:hover{background:#F7EBFF;border-color:#F7EBFF;color:var(--uva)}
#hero .cta .btn.ghost{background:transparent;border-color:rgba(255,255,255,.62);color:#fff}
#hero .cta .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
#hero .cta .btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---- "Cor": as quatro portas com cores fortes. Branco por cima de todas,
   acima dos 4,5:1 a meio do cartão (onde está o texto) ------------------- */
#folha .pilar:nth-child(1){background:linear-gradient(160deg,#965AD8,#753EB0)}
#folha .pilar:nth-child(2){background:linear-gradient(160deg,#D93C98,#B02472)}
#folha .pilar:nth-child(3){background:linear-gradient(160deg,#8A55DC,#6A3DC0)}
#folha .pilar:nth-child(4){background:linear-gradient(160deg,#592F7A,#311B44)}
#folha .pilar h3{color:#fff}
#folha .pilar p{color:rgba(255,255,255,.9)}
#folha .pilar{box-shadow:0 26px 44px -26px rgba(43,26,60,.6)}
#folha .pilar:nth-child(2) .i1{fill:#D93C98} #folha .pilar:nth-child(2) .i2{fill:#F6A8D3}
#folha .pilar:nth-child(3) .i2{fill:#B79BF2}

/* ---- "novidades": a etiqueta nos três artigos da entrada ---------------- */
.tagnovo{position:absolute;top:.8rem;left:.8rem;z-index:2;background:var(--neon);color:#fff;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:.34rem .75rem;border-radius:999px;box-shadow:0 8px 18px -8px rgba(230,79,180,.7)}

/* ---- "ocupa muito espaço": os testemunhos numa fita deitada -------------- */
#opinioes.opi-curta{padding:clamp(3rem,6vw,4.6rem) 0}
.opi-cab{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:.8rem clamp(2rem,5vw,4rem);
  align-items:end;margin-bottom:clamp(1.6rem,3vw,2.2rem)}
.opi-cab h2{margin:0}
.opi-cab .lead{margin:0;max-width:58ch}
@media(max-width:820px){.opi-cab{grid-template-columns:1fr}}
.opi-fita{position:relative;z-index:2;overflow:hidden;padding:.4rem 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.opi-pista{display:flex;width:max-content;animation:opiCorre 110s linear infinite}
.opi-fita:hover .opi-pista{animation-play-state:paused}
.opi-grupo{display:flex;align-items:flex-start;gap:1rem;padding-right:1rem}
.opi-fita .bolha{flex:0 0 clamp(260px,26vw,340px);margin:0;background:#fff;border-radius:22px 22px 22px 6px;
  padding:1rem 1.15rem;box-shadow:0 18px 36px -24px rgba(0,0,0,.6)}
.opi-fita .bolha:nth-child(3n+2){background:#FBE9F5}
.opi-fita .bolha:nth-child(3n){background:#F3EAFB}
#opinioes .opi-fita .bolha p{color:var(--tinta)!important;font-family:var(--sans);font-style:normal;font-size:.86rem;line-height:1.55}
#opinioes .opi-fita .bolha small{color:var(--tinta3)!important}
@keyframes opiCorre{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.opi-pista{animation:none}.opi-fita{overflow-x:auto}}

/* ---- "a roda translúcida, 1/3 da página, em várias páginas" ------------
   Um disco de vidro fosco por trás dos traços, do tamanho do círculo de
   fora; os signos passam a traço fino (o ︎ do js). Aparece nas
   Consultas, no Marcar, nas Fadas-Madrinhas e na entrada. ---------------- */
.deco.roda-vidro{width:clamp(300px,33vw,540px);aspect-ratio:1/1;--traco:#F1E7FB;--brilho:#F4A8DA}
.deco.roda-vidro::before{content:"";position:absolute;inset:4%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.2),rgba(255,255,255,.06) 52%,rgba(255,255,255,.025) 75%);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 0 70px rgba(255,255,255,.07),0 0 90px -20px rgba(191,162,228,.45);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.deco.roda-vidro svg{position:relative;opacity:.95!important}
.deco.roda-vidro text{font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols",serif}
.tp-roda .deco.roda-vidro{width:clamp(300px,33vw,520px);right:-4%}
.ceu-topo .tp-roda{min-height:clamp(300px,33vw,520px)}
#essencia > .deco.roda-vidro{right:-9%}
#opinioes > .deco.roda-vidro{position:absolute;right:-7%;top:50%;transform:translateY(-50%);z-index:1}
#opinioes > .deco.roda-vidro.in{opacity:.75}
@media(max-width:700px){#opinioes > .deco.roda-vidro, .marcar-ceu > .deco.roda-vidro{display:none}}

/* ---- os pormenores do céu de hoje (lua, lua cheia, Sol, dia) ------------ */
.ceu-pilulas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.ceu-pilulas .luahoje{margin:0}
.lh-glifo{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,#945BC0,#4A2878);color:#F6E3A6;font-size:1.3rem;line-height:1;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols",serif;
  box-shadow:0 0 14px rgba(191,162,228,.55)}
.lh-glifo.lh-sol{background:radial-gradient(circle at 34% 30%,#FFE08A,#E8833A);color:#4A2878;box-shadow:0 0 16px rgba(255,190,90,.6)}
.luahoje[role=link]{cursor:pointer;transition:transform .3s,box-shadow .3s}
.luahoje[role=link]:hover{transform:translateY(-2px);box-shadow:0 18px 30px -18px rgba(43,26,60,.6)}
.luahoje[role=link]:focus-visible{outline:2px solid var(--ametista);outline-offset:3px}
.lh-seta{color:var(--ametista);margin-left:.1rem;font-size:1rem}
.topo-claro .luahoje{margin-top:1.2rem}

/* ---- "precisa de vida": o topo do Marcar passa a céu de noite ----------- */
.topo-fita.marcar-ceu{position:relative;overflow:hidden;border-bottom:0;
  padding:calc(64px + clamp(2.2rem,4.4vw,3.4rem)) 0 clamp(2.4rem,4.4vw,3.4rem);
  background:radial-gradient(ellipse at 18% 0%,rgba(107,63,166,.45),transparent 58%),
             radial-gradient(ellipse at 92% 110%,rgba(230,79,180,.22),transparent 55%),var(--noite)}
.marcar-ceu .wrap{display:block;position:relative;z-index:1}
.marcar-ceu h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;margin:.2rem 0 .8rem;color:#F9F2FC}
.marcar-ceu .lead{color:#DCCDEB;max-width:52ch;margin:0;font-size:1rem}
.marcar-ceu .eyebrow{color:#DCCBF0}
.marcar-ceu > .deco.roda-vidro{position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:0}
@media(max-width:980px){.marcar-ceu > .deco.roda-vidro{right:-22%;opacity:.5}}
/* os passos ganham a cor da casa */
.passos div.on{border-color:transparent;color:var(--ametista-esc);
  border-image:linear-gradient(90deg,#A24FB4,#E64FB4) 1}
.passos div.ok{border-color:#AD6BD8;color:#6A3DC0}
/* cada consulta com a cor e o desenho da sua família (js: pintaPasso1).
   O preço passou para a faixa de cor e deixou de ficar por cima do nome. */
.opc.opc-fam{padding:0 0 1.15rem;overflow:hidden;border-radius:18px 6px 18px 6px;background:#fff;
  box-shadow:0 16px 30px -24px rgba(43,26,60,.55);transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.opc.opc-fam:hover{transform:translateY(-4px);background:#fff;box-shadow:0 22px 36px -22px rgba(43,26,60,.6);border-color:var(--fc2)}
.opc.opc-fam.on{background:#fff;border-color:var(--fc2);box-shadow:0 0 0 2px var(--fc2),0 22px 36px -22px rgba(43,26,60,.6)}
.opc-cab{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;margin-bottom:.85rem;
  background:linear-gradient(115deg,var(--fc),var(--fc2));color:#fff}
.opc-ico{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.opc-ico svg{width:20px;height:20px;display:block}
.opc-fam-n{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.92)}
.opc.opc-fam .p{position:static;margin-left:auto;color:#fff;font-size:1.3rem;white-space:nowrap}
.opc.opc-fam .t,.opc.opc-fam .s{padding:0 1.1rem}
.opc.opc-fam .t{font-size:1.22rem;line-height:1.2;margin-bottom:.35rem}
.semagenda{color:#A2287A;font-weight:500}
.semagenda-aviso{margin:0 0 1.2rem}
.semagenda-aviso .btn{margin-left:.4rem;vertical-align:middle}

/* ---- loja: "amor e aparece só as velas do amor" ------------------------ */
.intencoes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 clamp(1.6rem,3vw,2.2rem)}
.int-tit{font-family:var(--serif);font-size:1.3rem;color:var(--tinta);margin-right:.5rem}
.intencoes button{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--linha);background:#fff;
  border-radius:999px;padding:.48rem .95rem .48rem .55rem;font:500 .84rem/1.2 var(--sans);color:var(--tinta);cursor:pointer;
  box-shadow:0 10px 20px -16px rgba(43,26,60,.5);transition:transform .25s,border-color .25s,background .25s}
.intencoes button i{width:18px;height:18px;border-radius:50%;background:var(--ic);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ic) 22%,transparent)}
.intencoes button small{font-size:.68rem;color:var(--tinta3)}
.intencoes button:hover{border-color:var(--ic);transform:translateY(-2px)}
.intencoes button.on{border-color:var(--ic);box-shadow:0 0 0 1.5px var(--ic);background:color-mix(in srgb,var(--ic) 12%,#fff)}
.intencoes button:focus-visible{outline:2px solid var(--ametista);outline-offset:2px}
.intencoes .int-limpa{border-style:dashed;padding-left:.95rem;color:var(--tinta2)}
@media(max-width:600px){.int-tit{flex-basis:100%}}

/* ---- loja: "adicionar banho" na ficha de cada vela ---------------------- */
.pf-par{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:.85rem;align-items:center;
  margin:0 0 1.4rem;padding:.75rem .85rem;border-radius:16px 4px 16px 4px;
  background:linear-gradient(115deg,#F6ECFD,#FBE9F5);border:1px solid #E6D9EE}
.pf-par-mini{width:58px;height:58px;border-radius:12px;overflow:hidden;background:#EFE6DA;display:grid;place-items:center}
.pf-par-mini img{width:100%;height:100%;object-fit:cover;display:block}
.pf-par-mini svg{width:70%}
.pf-par-txt{font-size:.88rem;color:var(--tinta);line-height:1.35}
.pf-par-txt b{display:block;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#A2287A;font-weight:600;margin-bottom:.25rem}
@media(max-width:480px){.pf-par{grid-template-columns:52px minmax(0,1fr)}.pf-par .btn{grid-column:1/-1;justify-content:center}}

/* ---- Fadas-Madrinhas: "demora muito tempo para entrar a parte delas" ----
   As cinco logo debaixo do título, e a Mafalda em duas colunas (retrato ao
   lado do texto, e não por cima) — a página encurta meio ecrã. ------------ */
.fila-fadas{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:62rem;
  margin:-.6rem auto clamp(2.4rem,4.4vw,3.4rem)}
.fila-fadas a{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:.65rem;align-items:center;
  padding:.45rem 1.1rem .45rem .45rem;border-radius:999px;background:#fff;border:1px solid var(--linha);text-decoration:none;
  text-align:left;box-shadow:0 12px 24px -18px rgba(43,26,60,.55);transition:transform .3s,box-shadow .3s}
.fila-fadas a:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(43,26,60,.6)}
.fila-fadas a:focus-visible{outline:2px solid var(--ametista);outline-offset:3px}
.ff-mono{grid-row:1/3;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--fc),#4A2878);color:#fff;font-family:var(--serif);font-style:italic;font-size:1.05rem}
.fila-fadas b{font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--tinta);line-height:1.1}
.fila-fadas a > span:last-child{font-size:.72rem;color:var(--tinta3)}
html{scroll-padding-top:96px}
@media(min-width:900px){
  .quemtopo .quemcentro{grid-template-columns:minmax(250px,320px) minmax(0,1fr);justify-items:stretch;text-align:left;
    align-items:start;gap:clamp(2rem,5vw,4.2rem);max-width:1060px;margin:0 auto}
  .quemtopo .quemcentro > .rv:first-child{position:sticky;top:110px}
  .quemtopo .retratofig{width:100%;margin:0}
  .quemtopo .quemtexto{max-width:none}
  .quemtopo .quemtexto .eyebrow::after{left:0;transform:none}
  .quemtopo .quemtexto .cit{text-align:left}
}
.quemtopo{padding-bottom:clamp(2.6rem,5vw,4rem)}
#fadas.fadas{padding-top:clamp(3rem,6vw,4.6rem);padding-bottom:clamp(2.6rem,5vw,4rem)}

/* ---- "quero esta parte a roxo": a banda por trás das fotografias -------- */
.perfil{background:linear-gradient(160deg,#6B3FA6,#A24FB4) left / clamp(150px,22%,230px) 100% no-repeat, #fff}
.perfil:nth-child(even){background:linear-gradient(160deg,#6B3FA6,#A24FB4) right / clamp(150px,22%,230px) 100% no-repeat, #fff}
@media(max-width:760px){
  .perfil,.perfil:nth-child(even){background:linear-gradient(160deg,#6B3FA6,#A24FB4) top / 100% 9.5rem no-repeat, #fff}
}
/* ---- "Roxo": a etiqueta da especialidade de cada uma --------------------- */
.fada-arte,.perfil .fada-arte{background:linear-gradient(115deg,#6B3FA6,#A24FB4);color:#fff}

/* ---- "Subir": o Instagram encosta-se às fadas ---------------------------- */
.insta-grande{padding-top:clamp(.6rem,1.6vw,1.2rem)!important}
.insta-duo{align-items:start}
.insta-duo .instacta{margin-top:clamp(1rem,3vw,2.4rem)}
/* a roda do Marcar cabe inteira: o topo cresce até ela */
@media(min-width:981px){
  .topo-fita.marcar-ceu{min-height:calc(64px + clamp(300px,30vw,440px) + 3rem)}
  .marcar-ceu > .deco.roda-vidro{width:clamp(300px,30vw,440px);top:calc(64px + 1.5rem);transform:none}
  .marcar-ceu .wrap{padding-top:clamp(.6rem,2vw,1.6rem)}
}
/* a roda dos testemunhos desce para o canto, para não ficar por baixo do texto */
#opinioes > .deco.roda-vidro{top:auto;bottom:-42%;right:-8%;transform:none}

/* ---- 25/10/2026: revisão no telemóvel ------------------------------------
   O rodapé tinha os links em linha, com 15 px de altura cada: no telemóvel o
   dedo apanhava o do lado. Passam a alvos de ~44 px, um por linha nos dois
   blocos de navegação. As intenções da loja deslizam numa fila só, como os
   temas, em vez de empilharem quatro linhas por cima dos artigos. */
@media(max-width:700px){
  body>footer .wrap{gap:1.4rem}
  body>footer .wrap > div:nth-child(2) p, body>footer .wrap > div:nth-child(3) p{display:flex;flex-wrap:wrap;column-gap:1.1rem;margin:0!important;
    font-size:0;line-height:0}
  body>footer .wrap > div:nth-child(2) a, body>footer .wrap > div:nth-child(3) a{display:inline-flex;align-items:center;min-height:44px;
    font-size:.92rem;line-height:1.3}
  .intencoes{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:.3rem 16px .6rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .intencoes::-webkit-scrollbar{display:none}
  .intencoes button{flex:0 0 auto}
  .int-tit{flex-basis:auto;white-space:nowrap}
}

/* ---- 26/10/2026: "ajeita as opiniões" ------------------------------------
   As mensagens têm tamanhos muito diferentes e os cartões ficavam em escada
   (118 a 182 px de altura). Passam todos à mesma altura, com a origem
   encostada ao fundo por baixo de um fio, e umas aspas grandes em cima. O
   esbatimento das pontas sai: sobre o céu escuro sujava os cartões brancos
   com uma faixa cinzenta; a fita passa a ser cortada a direito pelo ecrã. */
.opi-fita{-webkit-mask:none;mask:none;padding:.6rem 0 1.4rem}
.opi-grupo{align-items:stretch;gap:1.2rem;padding-right:1.2rem}
.opi-fita .bolha{display:flex;flex-direction:column;flex-basis:clamp(270px,24vw,330px);
  padding:1.15rem 1.3rem 1rem;border-radius:22px 22px 22px 6px}
.opi-fita .bolha::before{content:"\201C";font-family:var(--serif);font-size:3.6rem;line-height:1;
  height:1.6rem;margin:-.2rem 0 .1rem;color:var(--ametista);opacity:.6}
#opinioes .opi-fita .bolha p{margin:0 0 .9rem;font-size:.88rem;line-height:1.6}
#opinioes .opi-fita .bolha small{margin-top:auto;padding-top:.65rem;border-top:1px solid rgba(74,40,120,.12);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}

/* ---- 26/10/2026: a roda das Consultas em grande -------------------------
   "Ainda maior, a ir para o lado branco, e ver só uma parte". A roda mede 95vw, passa 40% para fora da direita, e o centro fica
   18% do diâmetro acima do fim do céu, por isso entra pela secção branca de
   baixo. São DUAS rodas iguais, no mesmo sítio: a do céu, clara e cortada
   pelo fundo do céu, e a `.roda-continua`, dentro de #consultas, com traços
   escuros e cortada pelo topo dessa secção. Giram juntas (mesma animação,
   desenhadas no mesmo instante), por isso lê-se como uma roda só que muda
   de cor ao passar a fronteira. Sem o vidro fosco: o disco não continuaria
   do outro lado. */
:root{--roda-d:95vw;--roda-c:calc(var(--roda-d) * .18);--roda-dir:-40%}
.ceu-topo.roda-grande{min-height:clamp(420px,44vw,720px);display:grid;align-content:center}
.ceu-topo.roda-grande .tp-roda{min-height:0}
.ceu-topo.roda-grande > .deco.roda-vidro,
#consultas > .deco.roda-continua{width:var(--roda-d);height:var(--roda-d);max-height:none;aspect-ratio:auto;
  left:auto;right:var(--roda-dir);transform:none;z-index:0}
.ceu-topo.roda-grande > .deco.roda-vidro{top:auto;bottom:calc(var(--roda-c) - var(--roda-d) / 2)}
#consultas > .deco.roda-continua{top:calc(0px - var(--roda-c) - var(--roda-d) / 2);bottom:auto;--traco:#6B3FA6;--brilho:#E64FB4}
.ceu-topo.roda-grande > .deco.roda-vidro.in{opacity:.5}
#consultas > .deco.roda-continua.in{opacity:.32}
/* a frase de ajuda por baixo dos separadores cai em cima de um signo: um
   halo da cor do papel apaga os traços à volta das letras */
#consultas .girar{position:relative;text-shadow:0 0 4px #F9F3FB,0 0 8px #F9F3FB,0 0 12px #F9F3FB}
.ceu-topo.roda-grande > .deco.roda-vidro::before,
#consultas > .deco.roda-continua::before{display:none}
.ceu-topo.roda-grande > .deco.roda-vidro svg,
#consultas > .deco.roda-continua svg{width:100%;height:100%}
@media(max-width:820px){.ceu-topo.roda-grande{min-height:0;display:block}
  .ceu-topo.roda-grande > .deco.roda-vidro, #consultas > .deco.roda-continua{display:none}}

/* ==========================================================================
   MODO DE TESTE — 26/10/2026 (só aparece com o link secreto; ver app.js)
   ======================================================================= */
.faixa-teste{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:1rem;
  max-width:calc(100% - 24px);padding:.6rem .7rem .6rem 1.1rem;border-radius:999px;background:#E64FB4;color:#fff;
  font-size:.8rem;line-height:1.3;box-shadow:0 12px 30px -10px rgba(43,22,64,.6)}
.faixa-teste a{flex:0 0 auto;color:#E64FB4;background:#fff;border-radius:999px;padding:.4rem .8rem;font-weight:600;text-decoration:none;font-size:.74rem}
.cal-teste{grid-column:1/-1;padding:1.1rem 1.2rem;border-radius:16px 4px 16px 4px;background:#FDF0F8;border:1px solid #F3C4E4;
  color:#5B2A4C;font-size:.95rem;line-height:1.55;text-align:left}
.cal-teste > b:first-child{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#A2287A;margin-bottom:.3rem}
.teste-feito{margin:0 0 1rem}
.teste-botoes{display:flex;gap:.7rem;flex-wrap:wrap;margin:0 0 1rem}
.teste-nota{font-size:.88rem;line-height:1.55;color:var(--tinta2);margin:0 0 .8rem}
/* o MB WAY simulado */
.pagsim{border:0;padding:0;background:transparent;max-width:none}
.pagsim::backdrop{background:rgba(43,22,64,.62);backdrop-filter:blur(5px)}
.pagsim-cx{width:min(340px,88vw);padding:2rem 1.6rem 1.6rem;border-radius:28px 8px 28px 8px;text-align:center;
  background:#fff;box-shadow:0 40px 90px -40px rgba(43,22,64,.7)}
.pagsim-marca{margin:0;font-weight:600;letter-spacing:.12em;color:#D7182A}
.pagsim-marca span{font-weight:400;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta3);margin-left:.4rem}
.pagsim-valor{font-family:var(--serif);font-size:2.6rem;color:var(--tinta);margin:.4rem 0 .6rem;line-height:1}
.pagsim-txt{margin:0 0 1.2rem;font-size:.95rem;line-height:1.55;color:var(--tinta2)}
.pagsim-roda{width:42px;height:42px;margin:0 auto 1rem;border-radius:50%;border:3px solid var(--lavanda);
  border-top-color:var(--ametista);animation:pagsimGira .8s linear infinite}
.pagsim.ok .pagsim-roda{animation:none;border-color:#1E9E5A;background:#1E9E5A;position:relative}
.pagsim.ok .pagsim-roda::after{content:"";position:absolute;left:13px;top:7px;width:10px;height:18px;
  border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.pagsim.ok .pagsim-txt b{color:#1E9E5A}
.pagsim-nota{margin:0;font-size:.72rem;color:var(--tinta3)}
@keyframes pagsimGira{to{transform:rotate(360deg)}}

/* ==========================================================================
   29/10/2026 — A FICHA DO PRODUTO: FOTOGRAFIA GRANDE E AS DUAS FOTOGRAFIAS
   "Quando abre, poe a foto do produto em grande e as duas fotos que tem."
   Computador: a galeria ocupa mais de metade da ficha, fica presa enquanto o
   texto corre, aproxima-se ao passar o rato e abre em ecra inteiro ao clicar;
   as miniaturas por baixo. Telemovel: passa-se com o dedo (scroll-snap).
   ======================================================================= */
.produtoficha .fichacx{width:min(1240px,95vw);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.pf-galeria{position:sticky;top:0;align-self:start;background:#EFE6DA}
.pf-galeria .pf-foto{position:relative;top:auto;aspect-ratio:1/1;overflow:hidden;background:#EFE6DA}
.pf-pista{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain}
.pf-pista::-webkit-scrollbar{display:none}
.pf-slide{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;overflow:hidden;cursor:zoom-in}
.pf-slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover) and (pointer:fine){
  .pf-slide:hover img{transform:scale(1.65)}
}
.pf-semfoto{display:grid;place-items:center}
.pf-semfoto svg{width:60%;margin:0}
.pf-seta{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:1.9rem;line-height:1;padding-bottom:4px;color:var(--tinta);
  background:rgba(255,255,255,.88);box-shadow:0 8px 22px -10px rgba(43,22,64,.45);
  opacity:0;transition:opacity .3s,transform .25s,background .25s}
.pf-seta.ant{left:14px}.pf-seta.seg{right:14px}
.pf-foto:hover .pf-seta,.pf-seta:focus-visible{opacity:1}
.pf-seta:hover{background:#fff;transform:scale(1.06)}
.pf-ampliar{position:absolute;right:14px;bottom:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--tinta);background:rgba(255,255,255,.88);
  box-shadow:0 8px 22px -10px rgba(43,22,64,.45);transition:background .25s,transform .25s}
.pf-ampliar:hover{background:#fff;transform:scale(1.06)}
.pf-minis{display:flex;gap:.6rem;padding:.8rem;background:var(--papel)}
.pf-minis button{width:76px;height:76px;padding:0;border:0;border-radius:12px 4px 12px 4px;overflow:hidden;cursor:pointer;
  background:#EFE6DA;outline:2px solid transparent;outline-offset:2px;opacity:.6;transition:opacity .25s,outline-color .25s}
.pf-minis button img{width:100%;height:100%;object-fit:cover;display:block}
.pf-minis button:hover{opacity:.9}
.pf-minis button[aria-current]{opacity:1;outline-color:var(--ametista)}
.pf-minis button:focus-visible{outline-color:var(--ametista-esc)}
/* a lupa: ecra inteiro, fundo de noite */
.pf-lupa{position:fixed;inset:0;z-index:10;display:none;place-items:center;background:rgba(43,22,64,.95);cursor:zoom-out}
.pf-lupa.aberta{display:grid;animation:lupaEntra .35s ease}
.pf-lupa img{max-width:min(94vw,1400px);max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:6px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8);cursor:default}
.pf-lupa .fechar{position:fixed;top:1rem;right:1rem}
.pf-lupa .pf-seta{position:fixed;opacity:1}
.pf-lupa .pf-seta.ant{left:2vw}.pf-lupa .pf-seta.seg{right:2vw}
.pf-lupa-n{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);margin:0;color:rgba(255,255,255,.75);
  font-size:.78rem;letter-spacing:.2em}
@keyframes lupaEntra{from{opacity:0}to{opacity:1}}
/* o cartao da grelha: com rato, a segunda fotografia ao passar */
.card .ph img.pfoto2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover) and (pointer:fine){
  .card:hover .ph img.pfoto2{opacity:1;transform:scale(1.05)}
}
@media (max-width:760px){
  .produtoficha .fichacx{grid-template-columns:1fr}
  .pf-galeria{position:relative}
  .pf-seta{opacity:1;width:38px;height:38px;margin-top:-19px;font-size:1.6rem}
  .pf-seta.ant{left:10px}.pf-seta.seg{right:10px}
  .pf-minis{justify-content:center}
  .pf-minis button{width:62px;height:62px}
  .pf-lupa .pf-seta{top:auto;bottom:1rem;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .pf-slide img,.card .ph img.pfoto2,.pf-seta,.pf-ampliar{transition:none}
  .pf-slide:hover img{transform:none}
  .pf-lupa.aberta{animation:none}
}
/* 29/10/2026: a banda passou a uma so fotografia, o altar de ponta a ponta
   (as duas de antes eram recortes da mesma sala que aparecia em seis sitios) */
.bandafotos.uma{grid-template-columns:1fr;height:min(64vh,620px)}
.bandafotos.uma img{object-position:50% 45%}

/* ==========================================================================
   29/10/2026 — AUDITORIA: NENHUMA PAGINA MORTA
   Referencias: as lojas e casas de bem-estar de alta gama (Aesop, The
   Alchemist's Kitchen, House of Intuition, Maha Rose) fazem tres coisas que
   aqui faltavam: fotografia verdadeira em cada pagina, uma saida a vista no
   fim de cada pagina, e passagens suaves entre paginas em vez de um corte.
   ======================================================================= */

/* ---- LOJA: a prateleira verdadeira ao lado do titulo -------------------- */
.topo-claro.com-foto{min-height:clamp(300px,31vw,370px)}
/* !important: o .com-aurora > :not(...) das auroras (0,7,0) poe tudo em relative */
.topo-claro .topo-foto{position:absolute!important;right:max(1.3rem,calc((100vw - var(--max)) / 2));top:calc(64px + 2.2rem);bottom:1.8rem;
  width:min(34vw,420px);margin:0;border-radius:34px 8px 34px 8px;overflow:hidden;
  box-shadow:0 0 0 6px #fff,0 30px 60px -30px rgba(43,26,60,.55)}
.topo-foto img{width:100%;height:100%;object-fit:cover;display:block;animation:topoFoto 22s ease-in-out infinite alternate}
@keyframes topoFoto{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-2%,1%)}}
.topo-claro.com-foto .wrap{position:relative;z-index:1}
.topo-claro.com-foto h1,.topo-claro.com-foto .lead{max-width:min(56ch,calc(100% - min(36vw,440px) - 2rem))}
@media (max-width:860px){ .topo-foto{display:none} .topo-claro.com-foto{min-height:0}
  .topo-claro.com-foto h1,.topo-claro.com-foto .lead{max-width:56ch} }

/* ---- CONTACTO: a porta ------------------------------------------------ */
.porta{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  margin:clamp(3rem,7vw,5.5rem) 0 0;padding:clamp(1rem,2vw,1.4rem);border-radius:40px 10px 40px 10px;
  background:linear-gradient(140deg,var(--noite) 0%,var(--uva) 70%,#6B3FA6 100%);color:#fff;
  box-shadow:0 40px 90px -50px rgba(43,22,64,.8);position:relative;overflow:hidden}
.porta::after{content:"";position:absolute;right:-12%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(230,79,180,.22),transparent 65%)}
.porta-foto{margin:0;border-radius:30px 6px 30px 6px;overflow:hidden;aspect-ratio:4/3}
.porta-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.porta:hover .porta-foto img{transform:scale(1.04)}
.porta-txt{position:relative;z-index:1;padding:clamp(.4rem,2vw,1.4rem) clamp(.4rem,2vw,1.6rem) clamp(.8rem,2vw,1.4rem) 0}
.porta-txt .eyebrow{color:#DFCFF2}
.porta-txt h2{color:#fff;margin:.3rem 0 1rem;font-size:clamp(1.8rem,3.6vw,2.6rem)}
.porta-txt p{color:#E6D9F2;line-height:1.7;margin:0 0 .9rem}
.porta .porta-morada{font-family:var(--serif);font-size:1.35rem;line-height:1.4;color:#fff}
.porta .porta-hor b{color:#fff}
.porta-bts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.porta .btn.ouro{background:#fff;border-color:#fff;color:var(--uva)}
.porta .btn.ouro:hover{background:var(--lavanda);border-color:var(--lavanda)}
.porta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.porta .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
@media (max-width:760px){ .porta{grid-template-columns:1fr} .porta-txt{padding:0 .6rem .8rem} }

/* ---- PERGUNTAS: duas colunas, a conversa sempre a vista --------------- */
.faq-grelha{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(2rem,5vw,4rem);align-items:start}
.faq-grelha .faq{max-width:none}
.faq-lado{position:sticky;top:96px;padding:2rem 1.8rem;border-radius:34px 8px 34px 8px;color:#fff;overflow:hidden;
  background:linear-gradient(155deg,var(--uva),var(--noite));box-shadow:0 30px 70px -40px rgba(43,22,64,.8)}
.faq-lado::before{content:"";position:absolute;left:-30%;bottom:-50%;width:90%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(107,63,166,.5),transparent 65%);pointer-events:none}
.faq-lado > :not(.estrelas){position:relative}
.faq-lado .eyebrow{color:#DFCFF2}
.faq-lado h3{color:#fff;font-size:1.7rem;margin:.3rem 0 .8rem}
.faq-lado p{color:#E6D9F2;font-size:.95rem;line-height:1.65;margin:0 0 1.3rem}
.faq-lado .btn{width:100%;justify-content:center;background:#fff;border-color:#fff;color:var(--uva)}
.faq-lado .btn:hover{background:var(--lavanda)}
.faq-tel{display:block;margin:1.1rem 0 .3rem;font-family:var(--serif);font-size:1.6rem;color:#fff;text-decoration:none;text-align:center}
.faq-marcar{display:block;text-align:center;font-size:.85rem;color:#DFCFF2;text-decoration:none}
.faq-marcar:hover,.faq-tel:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){ .faq-grelha{grid-template-columns:1fr} .faq-lado{position:relative;top:auto} }

/* ---- PASSAGEM ENTRE PAGINAS ------------------------------------------
   Ao carregar num link interno o conteudo desvanece (0,26 s, js:
   passagemDePagina) e a pagina nova entra a desvanecer. So opacidade, nunca
   transform: um transform no #folha prenderia os elementos fixos la dentro.
   (Experimentou-se a View Transitions API, mas o Chrome rejeita promessas
   que nao se conseguem apanhar sempre que salta a animacao — erros na
   consola sem razao. Isto faz o mesmo e nao suja nada.) */
#folha,body > footer{animation:paginaEntra .7s cubic-bezier(.2,.75,.25,1) both}
@keyframes paginaEntra{from{opacity:0}}
.entrou #folha,.entrou body > footer,.entrou .pagetop .wrap > *,.entrou .topo-claro .wrap > *,
.entrou .tp-texto > *,.entrou .topo-fita .wrap > *,.entrou .topo-claro .topo-foto{animation:none}
body.a-sair #folha,body.a-sair > footer{opacity:0;transition:opacity .26s ease}
/* a entrada de cada pagina interior: titulo, texto e botoes em cascata.
   So o bloco de texto — a roda das Consultas e do Marcar tem rotacao propria. */
.pagetop .wrap > *,.topo-claro .wrap > *,.tp-texto > *,.topo-fita .wrap > *{animation:entraTopo .9s cubic-bezier(.2,.75,.25,1) both}
.pagetop .wrap > :nth-child(2),.topo-claro .wrap > :nth-child(2),.tp-texto > :nth-child(2),.topo-fita .wrap > :nth-child(2){animation-delay:.08s}
.pagetop .wrap > :nth-child(3),.topo-claro .wrap > :nth-child(3),.tp-texto > :nth-child(3),.topo-fita .wrap > :nth-child(3){animation-delay:.16s}
.pagetop .wrap > :nth-child(n+4),.topo-claro .wrap > :nth-child(n+4),.tp-texto > :nth-child(n+4),.topo-fita .wrap > :nth-child(n+4){animation-delay:.24s}
.topo-foto{animation:entraFoto 1.1s cubic-bezier(.2,.75,.25,1) both}
@keyframes entraTopo{from{opacity:0;transform:translateY(18px)}}
@keyframes entraFoto{from{opacity:0;clip-path:inset(12% 0 12% 0 round 34px 8px 34px 8px)}}
@media (prefers-reduced-motion:reduce){
  #folha,body > footer{animation:none}
  body.a-sair #folha,body.a-sair > footer{opacity:1;transition:none}
  .pagetop .wrap > *,.topo-claro .wrap > *,.tp-texto > *,.topo-fita .wrap > *,.topo-foto,.topo-foto img{animation:none}
  .porta-foto img{transition:none}
}

/* ---- 03/11/2026: auditoria de telemóvel (medido a 390 px) -----------------
   (1) a fita "Para quê?" da loja tinha margem de -16px para um .wrap de
   12,8 px: saía 3 px de cada lado e a página abanava de lado no iPhone;
   (2) a constelação do "Fala connosco" atravessava o parágrafo;
   (3) os 15 pontos do carrossel das consultas tinham 22×28 px de alvo;
   (4) a fila dos passos da Marcar partia-se em duas linhas a 9 px — agora
   fica numa linha, com o nome só no passo em que se está;
   (5) letra miúda abaixo dos 11 px na capa, nos títulos pequenos e nos
   botões "Marcar"/"Juntar". */
@media(max-width:620px){
  .intencoes{margin-left:-.8rem;margin-right:-.8rem;padding-left:.8rem;padding-right:.8rem}
  #falar > [data-deco="constelacao"]{display:none}
  .car-pontos{gap:0}
  .car-pontos button{flex:1 1 0;min-width:0;max-width:40px;height:44px}
  .passos{flex-wrap:nowrap;gap:.3rem}
  .passos div{flex:1 1 0;min-width:0;font-size:.72rem;letter-spacing:.06em;white-space:nowrap}
  .passos div span{display:none}
  .passos div.on{flex:3.2 1 0}
  .passos div.on span{display:inline}
  .eyebrow{font-size:.76rem;letter-spacing:.2em}
  .btn.sm{font-size:.78rem}
  .cover .sub{font-size:.72rem;letter-spacing:.28em;text-indent:.28em}
  .cover .ref{font-size:.72rem;letter-spacing:.16em;text-indent:.16em}
}

/* ==========================================================================
   03/11/2026 — RONDA DA MAFALDA (Início, Loja, Consultas, Jogo, logótipo)
   ========================================================================== */

/* ---- INÍCIO · "prolongar os pontos até à barra": o padrão de meio-tom do
   canto desce pelo lado direito até à faixa roxa, em vez de ficar no canto */
#hero .pontos.br{width:clamp(220px,30vw,460px);aspect-ratio:auto;top:18%;bottom:0;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 30%),linear-gradient(to left,#000 20%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(to bottom,transparent,#000 30%),linear-gradient(to left,#000 20%,transparent);mask-composite:intersect}

/* ---- INÍCIO · as consultas: menos espaço branco, setas em vez de pontos */
.consultashome{padding-block:clamp(2.4rem,5vw,4rem)!important}
.consultashome .lead{margin-bottom:1.4rem}
.car-pontos.so-js{display:none!important}
.car-setas{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.1rem}
.car-setas button{width:46px;height:46px;border-radius:50%;border:1px solid var(--ametista);background:#fff;color:var(--ametista);
  font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 .15rem;
  transition:background .25s,color .25s,transform .25s}
.car-setas button:hover{background:var(--ametista);color:#fff;transform:translateY(-2px)}
.car-setas button:focus-visible{outline:2px solid var(--ametista);outline-offset:2px}
.cs-conta{min-width:4.5rem;text-align:center;font-family:var(--sans);font-size:.82rem;letter-spacing:.16em;color:var(--tinta2)}
/* "letras em branco e mudar o rosa quando clicas": o MARCAR dos cartões
   passa a letra branca, e já não fica magenta ao carregar */
.cc .btn{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.cc .btn:hover,.cc .btn:active{background:#fff;border-color:#fff;color:var(--uva)}
/* menos espaço entre as quatro portas e as consultas */
.pilares{margin-bottom:0}

/* ---- LOJA · a prateleira como fundo do topo, com o título por cima */
.topo-claro.com-fundo{position:relative;overflow:hidden;color:#fff;min-height:clamp(300px,34vw,420px);display:grid;align-content:center;
  background:linear-gradient(95deg,rgba(46,27,62,.92) 0%,rgba(74,40,120,.78) 42%,rgba(74,40,120,.25) 78%,rgba(74,40,120,.1) 100%),
             url(../img/loja-prateleira.jpg) 70% 50% / cover no-repeat}
.topo-claro.com-fundo .wrap{width:min(100% - 2.6rem,var(--max))}
.topo-claro.com-fundo .eyebrow{color:#EBD2FF}
.topo-claro.com-fundo h1{color:#fff}
.topo-claro.com-fundo .lead{color:rgba(255,255,255,.88);max-width:44ch}
@media (max-width:700px){
  .topo-claro.com-fundo{min-height:300px;
    background:linear-gradient(180deg,rgba(46,27,62,.55) 0%,rgba(46,27,62,.88) 70%),url(../img/loja-prateleira.jpg) 60% 50% / cover no-repeat}
}

/* ---- INÍCIO · as opiniões como no Pet Hotel: três colunas a subir */
.opi-colunas{padding-block:clamp(3.4rem,7vw,5.6rem)!important}
.opi-colunas .wrap{position:relative;z-index:2}
.opi-cab2{max-width:44rem;margin:0 auto;text-align:center}
.opi-selo{display:inline-flex;align-items:center;gap:.55rem;background:#fff;color:var(--uva);border-radius:999px;
  padding:.45rem 1rem;font-size:.78rem;font-weight:500;box-shadow:0 12px 30px -16px rgba(0,0,0,.6)}
.opi-selo .estrelas5{color:#C9A24A;letter-spacing:.08em}
.opi-cab2 h2{margin-top:1rem;color:#fff;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.1}
.opi-cab2 h2 em{color:#EBD2FF}
.ocols{display:flex;gap:1.2rem;justify-content:center;margin-top:2.4rem;max-height:480px;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.ocol{flex:1;max-width:360px;display:flex;flex-direction:column;animation:ocSobe var(--d,46s) linear infinite}
.ocol > div{display:flex;flex-direction:column;gap:1.2rem;padding-bottom:1.2rem}
.ocols:hover .ocol{animation-play-state:paused}
@keyframes ocSobe{to{transform:translateY(-50%)}}
.ocard{margin:0;background:#fff;border-radius:22px 22px 22px 6px;padding:1.3rem 1.35rem 1.15rem;color:var(--tinta);
  box-shadow:0 20px 40px -26px rgba(0,0,0,.7)}
.oc-estrelas{display:block;color:#B08BE8;font-size:.8rem;letter-spacing:.35em;margin-bottom:.55rem}
.ocard blockquote{margin:0;font-family:var(--serif);font-size:1.12rem;line-height:1.45;color:var(--uva)}
.ocard figcaption{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
.oc-ig{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.oc-ig svg{width:18px;height:18px;fill:#fff}
.ocard figcaption b{display:block;font-size:.84rem;font-weight:600;color:var(--uva)}
.ocard figcaption small{display:block;font-size:.72rem;letter-spacing:.06em;color:var(--tinta3)}
@media (max-width:700px){ .ocols{max-height:420px} .ocol{max-width:none} }
@media (prefers-reduced-motion:reduce){ .ocol{animation:none} .ocols{overflow-y:auto} }

/* ---- FADAS-MADRINHAS · o autocolante do Instagram e o iPhone com o feed */
.instacta.sem-ico{grid-template-columns:1fr auto}
.insta-duo{align-items:center!important}
.iphone-ig{position:relative;justify-self:center;display:block;text-decoration:none;width:min(290px,78vw);margin:1.5rem auto 0}
.ip-corpo{position:relative;display:block;aspect-ratio:9/19;border-radius:46px;background:#1F122A;padding:12px;
  box-shadow:0 0 0 2px #6B3FA6,inset 0 0 0 2px #3D2650,0 50px 80px -34px rgba(43,22,64,.85);transform:rotate(4deg);
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.iphone-ig:hover .ip-corpo{transform:rotate(1deg) translateY(-6px)}
.ip-ilha{position:absolute;left:50%;top:20px;width:86px;height:24px;border-radius:999px;background:#000;transform:translateX(-50%);z-index:4}
.ip-ecra{position:relative;display:flex;flex-direction:column;height:100%;border-radius:36px;overflow:hidden;background:#fff;color:#111;
  font-family:-apple-system,"Segoe UI",var(--sans),sans-serif}
.ip-barra{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.4rem 0;font-size:.72rem}
.ip-barra i{width:22px;height:10px;border-radius:3px;border:1.5px solid #111;position:relative}
.ip-barra i::after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:#111;border-radius:1px}
.ip-topo{display:flex;justify-content:space-between;align-items:center;padding:1rem 1rem .4rem;font-size:.95rem}
.ip-menu{width:18px;height:12px;border-top:2px solid #111;border-bottom:2px solid #111;position:relative}
.ip-menu::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid #111}
.ip-perfil{display:flex;align-items:center;gap:.8rem;padding:.3rem 1rem}
.ip-av{flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#4A2878,#A24FB4);box-shadow:0 0 0 2.5px #fff,0 0 0 5px #D6249F}
.ip-av img{width:48px;height:auto;filter:brightness(0) invert(1)}
.ip-bio{display:flex;flex-direction:column;line-height:1.25}
.ip-bio b{font-size:.8rem;letter-spacing:.12em}
.ip-bio small{font-size:.66rem;color:#555}
.ip-botoes{display:flex;gap:.35rem;padding:.6rem 1rem}
.ip-botoes span{flex:1;text-align:center;font-size:.68rem;font-weight:600;padding:.4rem 0;border-radius:8px;background:#EFEFEF}
.ip-botoes .ip-seguir{background:#0095F6;color:#fff}
.ip-destaques{display:flex;gap:.7rem;padding:.2rem 1rem .6rem}
.ip-destaques span{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.58rem;color:#333}
.ip-destaques i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.95rem;color:#fff;
  background:linear-gradient(135deg,#6B3FA6,#E64FB4);box-shadow:0 0 0 2px #fff,0 0 0 3px #DDD}
.ip-abas{display:flex;border-top:1px solid #EEE}
.ip-abas span{flex:1;height:30px;position:relative}
.ip-abas span::before{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);
  background:linear-gradient(#999 0 0) 0 33%/100% 1.5px no-repeat,linear-gradient(#999 0 0) 0 66%/100% 1.5px no-repeat,
             linear-gradient(#999 0 0) 33% 0/1.5px 100% no-repeat,linear-gradient(#999 0 0) 66% 0/1.5px 100% no-repeat;border:1.5px solid #999}
.ip-abas span:last-child::before{border-radius:4px;background:none;border-color:#999;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.ip-abas span.on{border-bottom:1.5px solid #111}
.ip-abas span.on::before{border-color:#111;background:linear-gradient(#111 0 0) 0 33%/100% 1.5px no-repeat,linear-gradient(#111 0 0) 0 66%/100% 1.5px no-repeat,
             linear-gradient(#111 0 0) 33% 0/1.5px 100% no-repeat,linear-gradient(#111 0 0) 66% 0/1.5px 100% no-repeat}
.ip-feed{flex:1;overflow:hidden;position:relative}
.ip-rolo{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;animation:ipRolo 18s ease-in-out infinite alternate}
@keyframes ipRolo{to{transform:translateY(-34%)}}
.ip-post{position:relative;aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center}
.ip-post img{width:100%;height:100%;object-fit:cover;display:block}
.ip-post svg{width:46%;height:auto;opacity:.92;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.ip-post.a1{background:linear-gradient(160deg,#A24FB4,#4A2878)}
.ip-post.a2{background:linear-gradient(160deg,#E64FB4,#6B3FA6)}
.ip-post.a3{background:linear-gradient(160deg,#C9A24A,#8B5A2B)}
.ip-post.a4{background:linear-gradient(160deg,#6B3FA6,#2B1640)}
.ip-post.reel::after{content:"";position:absolute;right:6px;top:6px;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.ig-sticker{position:absolute;z-index:5;left:-74px;top:auto;bottom:24%;width:128px;transform:rotate(-14deg);
  filter:drop-shadow(0 16px 22px rgba(43,22,64,.45));animation:igFlutua 6s ease-in-out infinite}
.ig-sticker svg{display:block;width:100%;height:auto}
.ig-coracao{position:absolute;left:58%;top:-26px;transform:rotate(16deg);background:#fff;color:#ED4956;border-radius:999px;
  padding:.35rem .75rem;font-size:.82rem;font-weight:700;white-space:nowrap;box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
.ig-coracao b{color:#222;font-weight:600}
@keyframes igFlutua{50%{transform:rotate(-8deg) translateY(-10px)}}
.ip-legenda{display:block;text-align:center;margin-top:1.4rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ametista)}
@media (max-width:700px){ .ig-sticker{left:-30px;bottom:20%;width:96px} }
@media (prefers-reduced-motion:reduce){ .ip-rolo,.ig-sticker{animation:none} }

/* ---- CONSULTAS · sem a roda no topo, secções mais juntas e em degradé */
.ceu-topo.roda-grande > .deco.roda-vidro,#consultas > .deco.roda-continua{display:none!important}
.ceu-topo.roda-grande{min-height:clamp(320px,30vw,460px)}
#consultas{padding-top:clamp(1.6rem,3vw,2.4rem)}
.familia{padding:clamp(1.4rem,2.6vw,2rem) 0 clamp(.8rem,1.6vw,1.2rem);isolation:isolate}
.familia::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 9%,#F9F3FB) 0%,#F9F3FB 70%)}
.familia.tinta{background:none;box-shadow:none}
.familia{clip-path:inset(0 -100vmax)}
.fam-cab{margin-top:1.8rem}
.familia .cartas{margin-top:1.2rem}
/* o painel que enche a fila das famílias com poucas consultas */
.fam-painel{flex:1 1 300px;min-width:260px;max-width:520px;align-self:stretch;display:flex;flex-direction:column;gap:.7rem;
  padding:1.4rem 1.5rem;border-radius:18px;background:#fff;border:1px solid color-mix(in srgb,var(--fc) 25%,transparent);
  box-shadow:0 22px 40px -30px var(--fc)}
.fp-n{margin:0;font-family:var(--serif);font-size:1.6rem;color:var(--fc)}
.fp-dados{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.fp-dados li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.35rem;border-bottom:1px dotted var(--linha);font-size:.9rem}
.fp-dados span{color:var(--tinta3)}
.fp-dados b{color:var(--uva);font-weight:600;text-align:right}
.fp-txt{margin:0;font-size:.88rem;line-height:1.55;color:var(--tinta2);flex:1}
.fp-bt{display:flex;gap:.5rem;flex-wrap:wrap}
@media(min-width:641px){ .familia .cartas{justify-content:flex-start} }
@media(max-width:640px){ .fam-painel{flex:0 0 82%;max-width:none;scroll-snap-align:center} }

/* ---- JOGO · a carta do dia: uma sala à noite, uma vela e o baralho */
.jogo{position:relative;overflow:hidden;min-height:100vh;padding:calc(64px + clamp(2.4rem,5vw,4rem)) 0 clamp(3rem,6vw,5rem);
  background:radial-gradient(ellipse 70% 50% at 50% 100%,rgba(230,79,180,.22),transparent 70%),
             radial-gradient(ellipse 60% 45% at 50% 0%,rgba(107,63,166,.35),transparent 70%),
             linear-gradient(180deg,#2B1640 0%,#321B45 55%,#4A2878 100%)}
.jogo .wrap{position:relative;z-index:2}
.j-cab{text-align:center;max-width:40rem;margin:0 auto}
.j-cab .eyebrow{color:#DCCBF0}
.j-cab h1{color:#fff;font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02;margin:.4rem 0 1rem}
.j-cab h1 em{color:#E7B8F0}
.j-cab .lead{color:#DDCDEF;margin:0 auto}
.j-dica{margin:1.4rem 0 0;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:#E2C68A}
/* a vela, a um canto, com a chama a tremer e a luz a respirar */
.j-vela{position:absolute;left:clamp(1rem,6vw,6rem);bottom:clamp(2rem,8vw,6rem);width:46px;height:120px;z-index:1;
  background:linear-gradient(90deg,#E9E2F7,#FFFFFF 45%,#D9C6E6);border-radius:8px 8px 4px 4px;box-shadow:0 0 80px 30px rgba(255,190,120,.16)}
.j-vela i{position:absolute;left:50%;bottom:100%;width:16px;height:30px;margin-left:-8px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#FFF6C8 0 25%,#FFB347 55%,rgba(255,120,60,0) 75%);animation:chama 1.6s ease-in-out infinite alternate;
  transform-origin:50% 100%;filter:drop-shadow(0 0 14px rgba(255,180,90,.9))}
@keyframes chama{0%{transform:scale(1,1) rotate(-2deg)}50%{transform:scale(.92,1.08) rotate(2deg)}100%{transform:scale(1.04,.96) rotate(-1deg)}}
.j-fumo{position:absolute;right:clamp(1rem,8vw,8rem);top:28%;width:120px;height:260px;z-index:1;pointer-events:none}
.j-fumo i{position:absolute;bottom:0;left:40%;width:40px;height:40px;border-radius:50%;background:rgba(217,201,234,.10);filter:blur(12px);
  animation:fumo 9s linear infinite}
.j-fumo i:nth-child(2){animation-delay:-3s;left:55%}
.j-fumo i:nth-child(3){animation-delay:-6s;left:30%}
@keyframes fumo{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-240px) translateX(30px) scale(2.2);opacity:0}}

/* o baralho: trinta e seis cartas, viradas para baixo */
.j-mesa{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(.5rem,1.2vw,.9rem);max-width:980px;margin:clamp(2rem,4vw,3rem) auto 0;perspective:1200px}
.jc{position:relative;aspect-ratio:2/3;border:0;padding:0;background:none;cursor:pointer;border-radius:10px;
  animation:jcEntra .7s cubic-bezier(.2,.9,.3,1.1) calc(var(--k) * 28ms) both;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
@keyframes jcEntra{from{opacity:0;transform:translateY(-40px) rotate(-12deg) scale(.8)}to{opacity:1;transform:none}}
.jc:hover{transform:translateY(-10px) rotate(-2deg)}
.jc:focus-visible{outline:2px solid #E2C68A;outline-offset:3px}
.jc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.jc-costas,.jc-frente{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.jc-costas{background:
    radial-gradient(circle at 50% 50%,rgba(226,198,138,.5) 0 7%,transparent 8%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 4px,transparent 4px 9px),
    linear-gradient(160deg,#A24FB4,#4A2878);
  box-shadow:inset 0 0 0 3px #4A2878,inset 0 0 0 4px rgba(226,198,138,.55),0 10px 20px -12px rgba(0,0,0,.8)}
.jc-frente{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:.4rem .2rem;
  background:linear-gradient(170deg,#FFFDF8,#EFE6FA);color:#4A2878;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #C9A24A}
.jc .jc-num{font-size:.5rem}.jc .jc-nome{font-size:.48rem}.jc .jc-sim svg{width:60%}
.jc.virada{z-index:5}
.jc.virada .jc-in{transform:rotateY(180deg) scale(1.15)}
.j-mesa.fechada .jc:not(.virada){opacity:.25;pointer-events:none;transform:none;transition:opacity .8s}
.j-mesa.escolhida{display:none}

/* a carta que saiu, em grande, com a mensagem ao lado */
.j-resultado{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center;max-width:860px;margin:clamp(2rem,4vw,3rem) auto 0;
  opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s}
.j-resultado.on{opacity:1;transform:none}
.jr-carta{width:clamp(180px,24vw,240px);aspect-ratio:2/3;border-radius:16px;padding:6px;background:linear-gradient(160deg,#E2C68A,#AD6BD8);
  box-shadow:0 0 70px -10px rgba(230,79,180,.6),0 30px 60px -30px rgba(0,0,0,.9);animation:jrBrilho 4s ease-in-out infinite alternate;justify-self:center}
@keyframes jrBrilho{to{box-shadow:0 0 90px 0 rgba(226,198,138,.45),0 30px 60px -30px rgba(0,0,0,.9)}}
.jr-in{height:100%;border-radius:11px;background:linear-gradient(170deg,#FFFDF8,#EFE6FA);color:#4A2878;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:1rem .8rem 1.2rem;box-shadow:inset 0 0 0 1px #C9A24A}
.jc-num{font-family:var(--serif);font-style:italic;color:#AD6BD8;letter-spacing:.08em}
.jr-in .jc-num{font-size:1.2rem}
.jc-sim{display:grid;place-items:center;flex:1;width:100%;color:#A24FB4}
.jr-in .jc-sim svg{width:62%;height:auto}
.jc-nome{font-family:var(--serif);font-weight:600;text-align:center;line-height:1.1}
.jr-in .jc-nome{font-size:1.3rem}
.jr-txt{color:#F2E8F8}
.jr-eyebrow{margin:0;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:#E2C68A}
.jr-txt h2{color:#fff;font-size:clamp(2rem,4.6vw,3rem);margin:.3rem 0 .8rem}
.jr-msg{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.45;color:#F8EEFF;margin:0}
.jr-perg{margin:1.3rem 0 0;padding:1rem 1.2rem;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#F2E8F8}
.jr-perg span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#DCCBF0;margin-bottom:.35rem}
.jr-volta{margin:1rem 0 0;font-size:.88rem;color:#DDCDEF}
.jr-volta b{color:#E2C68A}
.jr-bt{margin-top:1.4rem}
.jr-bt .btn{background:#fff;border-color:#fff;color:var(--uva)}
.jr-bt .btn:hover{background:#F7EBFF;border-color:#F7EBFF}
.j-nota{max-width:60ch;margin:clamp(2.4rem,5vw,3.4rem) auto 0;text-align:center;font-size:.8rem;line-height:1.6;color:#B69FCE}
@media (max-width:860px){
  .j-mesa{grid-template-columns:repeat(6,minmax(0,1fr))}
  .j-resultado{grid-template-columns:1fr;text-align:center}
  .jr-perg{text-align:left}
  .j-vela{transform:scale(.7);transform-origin:left bottom;opacity:.8}
}
@media (max-width:480px){ .j-mesa{grid-template-columns:repeat(6,minmax(0,1fr));gap:.35rem} }
@media (prefers-reduced-motion:reduce){ .jc,.jc-in,.j-vela i,.j-fumo i,.jr-carta{animation:none;transition:none} }

/* ---- LOGÓTIPO TODO BRANCO: "pôr todos brancos os U" — um ficheiro branco
   (logo-branco.png) em vez de um filtro por cima do azul, e sem a
   transparência ao passar o rato */
.lg img,.cover .mark img{filter:none!important;opacity:1!important}
#topo .lg img{filter:none!important}
.lg:hover img{opacity:1}
/* o logótipo em texto (painel, sala, rodapé) tinha o Ú noutra cor */
.lg i, #topo .lg i, body>footer .lg i{color:inherit!important}
body>footer .lg{color:#fff}

/* ==========================================================================
   03/11/2026, à noite (2.ª) — Consultas e Marcar "de designer", e a pesquisa
   da loja. "Não deixes muito branco, faz degradé." O fundo branco das duas
   páginas passa a um céu claro: lavanda para rosa, com estrelinhas de quatro
   pontas desenhadas em SVG. Cada família é um painel com a banda em cima.
   As animações variam: famílias a entrar de lados alternados, opções do
   Marcar a levantar-se em cascata, a coluna da loja a deslizar.
   ========================================================================== */
:root{
  --ceu-claro:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%236070B0' fill-opacity='.16'%3E%3Cpath d='M30 20c1 6 4 9 10 10-6 1-9 4-10 10-1-6-4-9-10-10 6-1 9-4 10-10z'/%3E%3Cpath d='M160 70c.6 4 2.6 6 6.6 6.6-4 .6-6 2.6-6.6 6.6-.6-4-2.6-6-6.6-6.6 4-.6 6-2.6 6.6-6.6z'/%3E%3Cpath d='M90 170c.8 4.6 3 7 7.6 7.6-4.6.8-6.8 3-7.6 7.6-.8-4.6-3-6.8-7.6-7.6 4.6-.6 6.8-3 7.6-7.6z'/%3E%3Ccircle cx='120' cy='30' r='1.6'/%3E%3Ccircle cx='200' cy='150' r='1.4'/%3E%3Ccircle cx='40' cy='120' r='1.2'/%3E%3Ccircle cx='180' cy='210' r='1.6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 40% at 0% 0%,rgba(107,63,166,.20),transparent 70%),
    radial-gradient(ellipse 55% 40% at 100% 40%,rgba(230,79,180,.14),transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 100%,rgba(122,88,194,.18),transparent 70%),
    linear-gradient(180deg,#F3E9FB 0%,#F3EDFA 45%,#F8ECF5 100%);
}

/* ---- CONSULTAS -------------------------------------------------------- */
#consultas{background:var(--ceu-claro)!important;background-size:220px 220px,auto,auto,auto,auto!important}
.familia{margin-top:clamp(2.8rem,4.6vw,3.6rem);padding:0 0 clamp(1.4rem,2.4vw,1.9rem);clip-path:none!important;
  border-radius:8px 30px 30px 30px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 16%,#fff) 0%,color-mix(in srgb,var(--fc2) 7%,#fff) 60%,rgba(255,255,255,.85) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 70px -46px var(--fc),0 0 0 1px color-mix(in srgb,var(--fc) 18%,transparent)}
.familia::before{display:none!important}
.familia.tinta{background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 16%,#fff) 0%,color-mix(in srgb,var(--fc2) 7%,#fff) 60%,rgba(255,255,255,.85) 100%)}
.familia .fam-cab{margin-top:0;border-radius:8px 30px 0 0;box-shadow:none;
  background:
    radial-gradient(circle at 88% 30%,rgba(255,255,255,.22),transparent 34%),
    radial-gradient(circle at 12% 120%,rgba(255,255,255,.14),transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cg fill='%23fff' fill-opacity='.18'%3E%3Cpath d='M24 18c.7 4 2.6 6 6.6 6.6-4 .7-6 2.6-6.6 6.6-.7-4-2.6-6-6.6-6.6 4-.7 6-2.6 6.6-6.6z'/%3E%3Ccircle cx='120' cy='22' r='1.4'/%3E%3Ccircle cx='80' cy='90' r='1.2'/%3E%3Ccircle cx='140' cy='100' r='1.6'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(115deg,var(--fc) 0%,var(--fc2) 100%)}
.familia .fam-cab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;
  background:linear-gradient(90deg,transparent,rgba(226,198,138,.9),transparent)}
.familia .cartas{padding:0 clamp(1rem,2.4vw,1.8rem);margin-top:clamp(1.3rem,2.4vw,1.8rem)}
.familia .fam-painel{background:rgba(255,255,255,.92);backdrop-filter:blur(4px)}
/* entram de lados alternados (js: familiasVistas) */
.familias.anima .familia{opacity:0;transform:translateX(-46px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.25,1)}
.familias.anima .familia:nth-child(even){transform:translateX(46px)}
.familias.anima .familia.vista{opacity:1;transform:none}
@media (max-width:640px){
  .familia{border-radius:8px 22px 22px 22px}
  .familia .fam-cab{border-radius:8px 22px 0 0}
  .familia .cartas{padding:0 .8rem}
}

/* ---- MARCAR ----------------------------------------------------------- */
.marc{background:var(--ceu-claro)!important;background-size:220px 220px,auto,auto,auto,auto!important}
.marc .painel{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88));border:0;
  box-shadow:0 0 0 1px rgba(107,63,166,.14),0 40px 80px -50px rgba(74,40,120,.55);position:relative;overflow:hidden}
.marc .painel::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,#4A2878,#6B3FA6,#E64FB4,#C9A24A)}
#op1{display:grid;grid-template-columns:1fr!important;gap:1.4rem;margin:1.6rem 0}
.opc-grupo{border-radius:8px 22px 22px 22px;padding:0 0 1rem;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 13%,#fff),color-mix(in srgb,var(--fc2) 5%,#fff));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--fc) 18%,transparent)}
.opc-banda{position:relative;display:flex;align-items:center;gap:.9rem;padding:.85rem 1.1rem;border-radius:8px 22px 0 0;color:#fff;
  background:radial-gradient(circle at 90% 20%,rgba(255,255,255,.2),transparent 40%),linear-gradient(115deg,var(--fc),var(--fc2))}
.opc-banda::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,transparent,rgba(226,198,138,.9),transparent)}
.ob-num{font-family:var(--serif);font-style:italic;font-size:1.4rem;min-width:2.2rem;text-align:center;opacity:.85}
.ob-txt{display:flex;flex-direction:column;line-height:1.2}
.ob-txt b{font-family:var(--serif);font-weight:600;font-size:1.35rem}
.ob-txt small{font-size:.76rem;color:rgba(255,255,255,.85)}
.ob-txt small b{font-family:var(--sans);font-size:.76rem;font-weight:600}
.ob-fotos{margin-left:auto}
.ob-fotos img,.ob-fotos .fq-ini{width:34px;height:34px}
.opc-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.8rem;padding:1rem 1rem 0}
.opc-grupo .opc.opc-fam{background:#fff}
/* as opções levantam-se em cascata, só na primeira vez (js: classe primeira) */
#op1.primeira .opc{animation:opcLevanta .7s cubic-bezier(.2,.9,.3,1.15) calc(var(--k,0) * 45ms) both}
@keyframes opcLevanta{from{opacity:0;transform:perspective(700px) rotateX(-38deg) translateY(26px)}to{opacity:1;transform:none}}
@media (max-width:640px){ .opc-lista{grid-template-columns:1fr;padding:.8rem .8rem 0} .ob-fotos{display:none} }

/* ---- LOJA · a coluna da pesquisa ------------------------------------------ */
.lojalado{padding:1.2rem;border-radius:8px 24px 24px 24px;
  background:radial-gradient(circle at 100% 0%,rgba(230,79,180,.16),transparent 45%),linear-gradient(180deg,#fff,#F3EFFC);
  box-shadow:0 0 0 1px rgba(107,63,166,.14),0 30px 60px -40px rgba(74,40,120,.55);animation:ladoEntra .9s cubic-bezier(.2,.8,.25,1) both}
@keyframes ladoEntra{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.lojagrid{grid-template-columns:250px minmax(0,1fr)}
@media (min-width:861px){ .lojagrid .filtros button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;padding:.65rem .9rem} }
@media (max-width:860px){ .fc-d{display:none} }
.fc-n{font-size:.74rem;letter-spacing:.16em}
.fc-d{font-size:.68rem;letter-spacing:.04em;text-transform:none;opacity:.75;font-weight:400}
.lojainfo{margin-top:.4rem;padding:1rem;border-radius:16px;color:#F2E8F8;position:relative;overflow:hidden;
  background:radial-gradient(circle at 90% 10%,rgba(230,79,180,.35),transparent 45%),linear-gradient(160deg,#4A2878,#2B1640)}
.lojainfo::after{content:"";position:absolute;right:-18px;bottom:-18px;width:90px;height:90px;border-radius:50%;
  box-shadow:inset -14px -6px 0 0 rgba(226,198,138,.35);transform:rotate(-20deg)}
.li-tit{margin:0 0 .6rem;font-family:var(--serif);font-size:1.15rem;color:#fff}
.li-lista{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.li-lista li{display:flex;gap:.55rem;font-size:.8rem;line-height:1.45;color:#DDCDEF}
.li-lista i{font-style:normal;color:#E2C68A;flex:none;width:1rem;text-align:center}
.li-lista b{color:#fff;font-weight:600}
.li-ajuda{display:block;margin-top:.9rem;font-size:.78rem;color:#DDCDEF;text-decoration:none;position:relative;z-index:1}
.li-ajuda b{color:#E2C68A}
.li-ajuda:hover b{text-decoration:underline}
@media (max-width:860px){
  .lojagrid{grid-template-columns:1fr}
  .lojalado{position:static;animation-name:sobeEntra}
  .lojainfo{display:none}
}
@keyframes sobeEntra{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .familias.anima .familia{opacity:1!important;transform:none!important}
  #op1.primeira .opc,.lojalado{animation:none}
}
/* os cartões do Marcar são botões: o browser centra-lhes o conteúdo na
   vertical e o de menos texto ficava com a banda a meio. Encosta-se ao topo. */
.opc.opc-fam{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.opc.opc-fam .t,.opc.opc-fam .s{display:block}

/* ---- INÍCIO · "com setas": o carrossel de fotografias do topo troca os
   pontinhos por duas setas de vidro sobre a foto e um contador em baixo */
#hero .car-foto .car-setas{position:absolute;inset:0;margin:0;pointer-events:none;z-index:4;display:block}
#hero .car-foto .car-setas button{position:absolute;top:50%;margin-top:-23px;pointer-events:auto;
  background:rgba(43,22,64,.42);border:1px solid rgba(255,255,255,.55);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
#hero .car-foto .car-setas button:hover{background:#fff;color:var(--uva);transform:none}
#hero .car-foto .cs-ant{left:.8rem}
#hero .car-foto .cs-seg{right:.8rem}
#hero .car-foto .cs-conta{position:absolute;right:.9rem;top:.9rem;min-width:0;padding:.3rem .75rem;border-radius:999px;
  background:rgba(43,22,64,.5);color:#fff;font-size:.7rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---- INÍCIO · AS QUATRO PORTAS, "mais profissional, mais high tier".
   Os quatro cartões passam à mesma base de tinta escura com um filete
   dourado; a cor de cada porta fica só como um brilho no canto e no traço
   de cima. Número romano, ícone num anel dourado, texto à esquerda e uma
   chamada para onde a porta leva — o cartão inteiro é a ligação. */
#folha .pilares{gap:clamp(1rem,1.8vw,1.4rem)}
#folha .pilares .pilar{--pc:#6B3FA6;position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:2rem 1.7rem 1.6rem;border-radius:6px 26px 26px 26px;text-decoration:none;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--pc) 42%,transparent),transparent 55%),
             linear-gradient(165deg,#3A224E 0%,#291838 60%,#221230 100%)!important;
  border:1px solid rgba(226,198,138,.28);
  box-shadow:0 30px 60px -36px rgba(43,22,64,.85),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.2,.8,.25,1),border-color .4s,box-shadow .5s}
#folha .pilares .pilar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--pc),color-mix(in srgb,var(--pc) 40%,#E2C68A),transparent)}
#folha .pilares .pilar::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle at 30% 0%,rgba(226,198,138,.16),transparent 60%)}
#folha .pilares .pilar:hover{transform:translateY(-6px);border-color:rgba(226,198,138,.65);
  box-shadow:0 40px 70px -36px rgba(43,22,64,.95),0 0 0 1px rgba(226,198,138,.25)}
#folha .pilares .pilar:hover::after{opacity:1}
#folha .pilares .pilar:nth-child(1){--pc:#6B3FA6}
#folha .pilares .pilar:nth-child(2){--pc:#E64FB4}
#folha .pilares .pilar:nth-child(3){--pc:#AD6BD8}
#folha .pilares .pilar:nth-child(4){--pc:#C9A24A}
.pl-num{position:absolute;right:1.4rem;top:1.2rem;font-family:var(--serif);font-style:italic;font-size:1.05rem;letter-spacing:.08em;color:rgba(226,198,138,.75)}
#folha .pilares .pico{position:relative;left:auto;top:auto;margin:0 0 1.3rem;width:62px;height:62px;border-radius:50%;animation:none!important;
  display:grid;place-items:center;background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(226,198,138,.55),0 0 0 6px rgba(255,255,255,.03),0 14px 30px -14px color-mix(in srgb,var(--pc) 80%,transparent)}
#folha .pilares .pico svg{width:34px;height:34px}
#folha .pilares .pilar h3{margin:0 0 .5rem;color:#fff!important;font-size:1.6rem;letter-spacing:.01em}
#folha .pilares .pilar p{color:#DDCDEF!important;font-size:.92rem;line-height:1.65;margin:0;flex:1}
.pl-ir{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;padding-top:1rem;width:100%;
  border-top:1px solid rgba(255,255,255,.1);font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#E2C68A}
.pl-ir i{font-style:normal;transition:transform .35s}
#folha .pilares .pilar:hover .pl-ir i{transform:translateX(5px)}
#folha .pilares .pilar:focus-visible{outline:2px solid #E2C68A;outline-offset:3px}
@media (max-width:640px){ #folha .pilares .pilar{padding:1.6rem 1.4rem 1.3rem} }

/* ==========================================================================
   03/11/2026, à noite (5.ª) — o COVERFLOW das consultas e o FALA CONNOSCO
   refeito com a barra de atalhos. Adaptados dos dois componentes React que
   ele mandou (glassy coverflow e dock), em CSS e JS simples.
   ========================================================================== */

/* ---- coverflow ---------------------------------------------------------- */
.coverflow{position:relative;margin-top:1.4rem;outline:none}
.coverflow:focus-visible .cf-palco{outline:2px solid var(--ametista);outline-offset:6px;border-radius:24px}
.cf-palco{position:relative;height:clamp(380px,34vw,420px);perspective:1150px;transform-style:preserve-3d;touch-action:pan-y;user-select:none;cursor:grab}
.cf-arrasta .cf-palco{cursor:grabbing}
.cf-chao{position:absolute;left:50%;bottom:-14px;width:min(620px,80%);height:36px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse,rgba(74,40,120,.38),transparent 70%);filter:blur(12px)}
.cf-pista{position:absolute;inset:0;transform-style:preserve-3d}
.cf-pista .cc{position:absolute;left:50%;top:0;bottom:0;width:var(--cfw,320px);margin-left:calc(var(--cfw,320px) / -2);min-height:0;
  backface-visibility:hidden;will-change:transform;cursor:pointer;
  transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .5s ease,box-shadow .4s}
.cf-arrasta .cf-pista .cc{transition:none}
.cf-pista .cc::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#180C22;opacity:var(--cf-sombra,0);
  pointer-events:none;transition:opacity .45s;z-index:3}
.cf-pista .cc.cf-frente{cursor:default;box-shadow:0 30px 60px -28px rgba(43,22,64,.8),0 0 0 1px rgba(226,198,138,.35)}
.cf-pista .cc:hover{transform:none}
.cf-base{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:2rem}
.cf-dock{display:flex;align-items:center;gap:.35rem;padding:.35rem .45rem .35rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid rgba(107,63,166,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 30px -16px rgba(74,40,120,.45)}
.cf-pos{display:flex;align-items:center;gap:.4rem;padding-right:.9rem;margin-right:.2rem;border-right:1px solid rgba(107,63,166,.22);
  font-size:.74rem;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--tinta3)}
.cf-pos b{color:var(--uva);font-weight:600}
.cf-dock button{width:42px;height:42px;border-radius:50%;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--uva);transition:background .2s}
.cf-dock button:hover{background:rgba(107,63,166,.12)}
.cf-dock button:focus-visible{outline:2px solid var(--ametista);outline-offset:2px}
.cf-dock svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cf-play{background:rgba(107,63,166,.1)!important}
.cf-play .cf-ico-play{display:none;fill:currentColor;stroke:none}
.cf-play.parado .cf-ico-play{display:block}
.cf-play.parado .cf-ico-pausa{display:none}
.cf-dica{margin:0;font-size:.74rem;letter-spacing:.04em;color:var(--tinta3)}
@media (max-width:640px){
  .cf-palco{height:400px;perspective:900px}
  .cf-dica{display:none}
}
@media (prefers-reduced-motion:reduce){ .cf-pista .cc,.cf-pista .cc::before{transition:none} }

/* ---- FALA CONNOSCO, formato novo ---------------------------------------- */
.falar2{position:relative;padding-block:clamp(3.6rem,7vw,6rem);background:var(--ceu-claro);background-size:220px 220px,auto,auto,auto,auto}
.f2-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem clamp(2rem,5vw,4rem);align-items:end;margin-bottom:clamp(2rem,4vw,2.8rem)}
.f2-cab h2{margin:0}
.f2-cab .lead{margin:0;max-width:46ch}
.f2-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.2rem,2.4vw,1.8rem);align-items:stretch}
.f2-canais{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.3rem,2.6vw,1.9rem);border-radius:8px 28px 28px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
  box-shadow:0 0 0 1px rgba(107,63,166,.16),0 40px 80px -50px rgba(74,40,120,.55);position:relative;overflow:hidden}
.f2-canais::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#4A2878,#6B3FA6,#E64FB4,#C9A24A)}
.f2-rot{margin:0 0 .3rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta3)}
.f2-canal{flex:0 0 auto;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.85rem 1rem;border-radius:16px;
  text-decoration:none;background:#fff;border:1px solid rgba(107,63,166,.14);
  transition:transform .35s cubic-bezier(.2,.8,.25,1),border-color .3s,box-shadow .35s}
.f2-canal:hover{transform:translateY(-2px);border-color:rgba(107,63,166,.4);box-shadow:0 16px 30px -20px rgba(74,40,120,.5)}
.f2-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;box-shadow:0 10px 20px -12px rgba(43,22,64,.7)}
.f2-ico svg{width:24px;height:24px;fill:currentColor}
.f2-ico.ig{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.f2-ico.zap{background:linear-gradient(160deg,#3DDC84,#1EA952)}
.f2-ico.mk{background:linear-gradient(160deg,#6B3FA6,#4A2878)}
.f2-txt b{display:block;font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--uva);line-height:1.15}
.f2-txt small{display:block;margin-top:.15rem;font-size:.82rem;color:var(--tinta2)}
.f2-seta{font-size:1.25rem;color:var(--ametista);transition:transform .3s}
.f2-canal:hover .f2-seta{transform:translateX(4px)}
.f2-canal.porconfirmar{opacity:.55;pointer-events:none}
.f2-canal.porconfirmar .f2-seta{display:none}
/* a barra de atalhos: cresce para o rato (js: dockAtalhos) */
.f2-dock{margin-top:auto;align-self:center;display:flex;align-items:flex-end;gap:.55rem;padding:.55rem .7rem;border-radius:20px;
  background:linear-gradient(180deg,rgba(74,40,120,.92),rgba(43,22,64,.95));box-shadow:0 18px 36px -18px rgba(43,22,64,.8),inset 0 1px 0 rgba(255,255,255,.12)}
.dk{--dk-s:1;position:relative;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.1);transform:scale(var(--dk-s));transform-origin:50% 100%;margin-inline:calc((var(--dk-s) - 1) * 14px);
  transition:transform .14s ease-out,margin .14s ease-out,background .2s}
.dk svg{width:22px;height:22px;fill:currentColor}
.dk:hover{background:rgba(255,255,255,.2)}
.dk:focus-visible{outline:2px solid #E2C68A;outline-offset:3px}
.dk::after{content:attr(data-nome);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(calc(1 / var(--dk-s)));
  padding:.25rem .55rem;border-radius:8px;background:#2B1640;color:#fff;font-size:.66rem;letter-spacing:.06em;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s}
.dk:hover::after,.dk:focus-visible::after{opacity:1}
/* o cartão da morada, com as mesmas proporções da coluna ao lado */
.f2-cartao{display:flex;flex-direction:column;margin:0;border-radius:28px 8px 28px 28px}
.f2-cartao .hor{margin-top:auto}
.f2-mapa{align-self:flex-start;margin-top:1.1rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#E2C68A;text-decoration:none;
  border-bottom:1px solid rgba(226,198,138,.4);padding-bottom:.15rem}
.f2-mapa:hover{border-bottom-color:#E2C68A}
@media (max-width:900px){
  .f2-cab,.f2-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .f2-canal{grid-template-columns:44px minmax(0,1fr) auto;gap:.8rem;padding:.75rem .8rem}
  .f2-ico{width:44px;height:44px;border-radius:12px}
  .f2-dock{gap:.35rem;padding:.45rem .5rem}
  .dk{width:40px;height:40px;border-radius:12px}
  .dk svg{width:19px;height:19px}
}
.f2-canais{gap:.75rem}.f2-canais > .f2-dock{margin-top:auto!important}
.f2-canais > .f2-canal:last-of-type{margin-bottom:.8rem}
/* as cartas de lado (e as escondidas, mais longe) nao podem alargar a pagina */
.coverflow{overflow-x:clip;overflow-y:visible;padding-bottom:6px}
#consultashome{overflow-x:clip}

/* ---- FALA CONNOSCO, 03/11 depois: so a barra, grande e ao centro, e o
   cartao da morada por baixo, deitado em duas colunas */
.falar2 .f2-cab{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.8rem}
.falar2 .f2-cab .lead{max-width:52ch}
.f2-centro{display:flex;flex-direction:column;align-items:center;gap:clamp(2.6rem,5vw,3.6rem)}
.f2-dock.grande{margin:0;align-self:center;gap:clamp(.6rem,1.4vw,1.1rem);padding:1.1rem 1.3rem 2.6rem;border-radius:30px;
  background:linear-gradient(180deg,rgba(107,63,166,.96),rgba(43,22,64,.98));
  box-shadow:0 40px 80px -36px rgba(43,22,64,.85),0 0 0 1px rgba(226,198,138,.28),inset 0 1px 0 rgba(255,255,255,.14)}
.f2-dock.grande .dk{width:clamp(56px,6.2vw,76px);height:clamp(56px,6.2vw,76px);border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  margin-inline:calc((var(--dk-s) - 1) * 22px)}
.f2-dock.grande .dk svg{width:44%;height:44%}
.f2-dock.grande .dk::after{display:none}
.f2-dock.grande .dk:hover{background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.12))}
.dk-n{position:absolute;top:calc(100% + .55rem);left:50%;transform:translateX(-50%) scale(calc(1 / var(--dk-s)));transform-origin:50% 0;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#DDCDEF;white-space:nowrap;pointer-events:none}
.f2-dock.grande .dk:hover .dk-n{color:#E2C68A}
/* o cartao da morada, deitado: morada e telefone a esquerda, o resto a direita */
.f2-cartao.f2-larga{width:min(860px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1.6rem,4vw,3rem);
  border-radius:28px 8px 28px 28px;padding:clamp(1.6rem,3.4vw,2.4rem)}
.f2-larga .ct,.f2-larga .mor,.f2-larga .tel{grid-column:1}
.f2-larga .ct{grid-row:1}.f2-larga .mor{grid-row:2}.f2-larga .tel{grid-row:3;align-self:start;justify-self:start}
.f2-larga .linhas{grid-column:2;grid-row:1 / span 2;margin:0}
.f2-larga .hor{grid-column:2;grid-row:3;margin-top:1rem}
.f2-larga .f2-mapa{grid-column:1;grid-row:4}
@media (max-width:760px){
  .f2-cartao.f2-larga{grid-template-columns:1fr}
  .f2-larga .ct,.f2-larga .mor,.f2-larga .tel,.f2-larga .linhas,.f2-larga .hor,.f2-larga .f2-mapa{grid-column:1;grid-row:auto}
  .f2-larga .linhas{margin-top:1.4rem}
}
@media (max-width:560px){
  .f2-dock.grande{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:2.4rem 1.4rem;padding:1.2rem 1.4rem 2.6rem}
  .f2-dock.grande .dk{width:64px;height:64px}
}

/* ==========================================================================
   05/11/2026 — RONDA DOS VÍDEOS DA MAFALDA
   "Temos de usar mais cor", "mistura este rosa com roxo", "o roxo foge para o
   azul". A paleta passou do índigo/lavanda (o logo.png) para a púrpura do
   Instagram dela, com o rosa a entrar nos degradés (troca feita por script em
   todo o ficheiro). Aqui ficam só as mudanças de forma, página a página.
   ========================================================================== */
:root{
  --rosa:#E64FB4;
  --rosa-esc:#B42F86;          /* rosa que se lê em cima do branco (5,1:1) */
  --rosa-cl:#F7D4EC;
  --mistura:linear-gradient(115deg,#6B3FA6 0%,#A24FB4 52%,#E64FB4 100%);
}

/* ---- as letrinhas por cima dos títulos: "não percebo o que são estas letras" */
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.2em;color:var(--rosa-esc)}
@media (max-width:640px){ .eyebrow{font-size:.74rem;letter-spacing:.16em} }

/* ---- Início: menos espaço entre a capa e o "Vieste à procura" */
#hero{padding-top:20px}

/* ---- Quatro portas: "gostei — só estas letras de outra cor ou outro tipo de letra" */
#folha .pilares .pilar p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.14rem;line-height:1.5;color:#F8D9EE!important}
.pl-ir{color:#F7B8E2}

/* ---- Consultas do Início: "uma setinha aqui, uma setinha aqui" — setas grandes
   dos dois lados das cartas; a barrinha "10 / 13 · pausa" sai. As setas são
   os mesmos botões da barra (o js continua a ligá-los), só mudam de sítio.
   O carrossel continua a parar com o rato ou o dedo em cima. */
#cfconsultas .cf-base{margin-top:1.2rem}
#cfconsultas .cf-dock{background:none;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
#cfconsultas .cf-pos,#cfconsultas .cf-play,#cfconsultas .cf-dica{display:none}
#cfconsultas .cf-ant,#cfconsultas .cf-seg{position:absolute;z-index:20;top:calc(clamp(380px,34vw,420px) / 2 - 30px);
  width:60px;height:60px;color:#fff;background:var(--mistura);
  box-shadow:0 16px 30px -12px rgba(107,47,140,.7),0 0 0 4px rgba(255,255,255,.75);transition:transform .25s}
#cfconsultas .cf-ant{left:clamp(0px,4vw,60px)}
#cfconsultas .cf-seg{right:clamp(0px,4vw,60px)}
#cfconsultas .cf-ant:hover,#cfconsultas .cf-seg:hover{transform:scale(1.08);background:var(--mistura)}
#cfconsultas .cf-ant svg,#cfconsultas .cf-seg svg{width:26px;height:26px;stroke-width:2.6}
@media (max-width:640px){
  #cfconsultas .cf-ant,#cfconsultas .cf-seg{top:170px;width:48px;height:48px}
  #cfconsultas .cf-ant{left:0}#cfconsultas .cf-seg{right:0}
}

/* ---- "Em Gondomar…": em vez de branco, o rosa ("até tínhamos falado em meter esta rosa") */
.sangra.sobre .sangratexto .eyebrow{color:#FFC4EA}
.sangra.sobre .sangratexto h2{color:#fff}
.sangra.sobre .sangratexto h2::first-line{color:#FFB3E3}
.sangra.sobre .btn.ouro{background:var(--mistura);border-color:transparent;color:#fff}
.sangra.sobre .btn.ouro:hover{filter:brightness(1.08)}

/* ---- Novidades: mais cor — fundo rosado e o título no degradé da casa */
#montrahome{background:linear-gradient(180deg,#FBF4FB 0%,#F8E6F4 100%)}
#montrahome h2{background:var(--mistura);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

/* ---- Fala connosco: "gostei muito mais — põe alguma coisa de fundo, outra cor" */
.falar2{background:
  radial-gradient(circle at 12% 18%,rgba(230,79,180,.22),transparent 42%),
  radial-gradient(circle at 88% 82%,rgba(107,63,166,.26),transparent 46%),
  linear-gradient(180deg,#F6E9F8 0%,#EEDDF6 100%)}
.falar2 h2 em{color:var(--rosa-esc)}

/* ---- Loja: "mete-me pressão a não descer", "parece que tem mais para baixo".
   A coluna da esquerda deixa de estar presa ao ecrã: a pesquisa e as
   categorias passam a uma barra deitada por cima dos produtos, e os produtos
   ficam com a largura toda. O cartão "Comprar na Púrpura" sai ("o que é isto?
   não amei") — no telemóvel já não aparecia. */
@media (min-width:861px){
  .lojagrid{grid-template-columns:minmax(0,1fr)}
  .lojalado{position:static;grid-template-columns:minmax(220px,280px) minmax(0,1fr) auto;align-items:center;gap:1rem 1.4rem;padding:.9rem 1.1rem}
  .lojagrid .filtros{grid-auto-flow:column;grid-auto-columns:max-content;gap:.5rem;overflow-x:auto;padding:.1rem}
  .lojagrid .filtros button{padding:.55rem 1rem}
  .lojalado .conta{margin:0;white-space:nowrap}
}
.lojainfo{display:none!important}

#loja .lojagrid .filtros{scrollbar-width:none}
#loja .lojagrid .filtros::-webkit-scrollbar{display:none}

/* ---- Consultas: o painel "N consultas · desde · duração · com" em TODAS as
   famílias ("faz-me impressão as outras não o terem"). Nas de quatro cartas,
   as cartas encolhem um pouco para o painel caber na mesma fila. */
@media (min-width:1000px){
  .familia .cartas:has(> .carta:nth-of-type(4)){flex-wrap:nowrap}
  .familia .cartas:has(> .carta:nth-of-type(4)) > .carta{flex:0 1 198px;min-width:0}
  .familia .cartas:has(> .carta:nth-of-type(4)) > .fam-painel{flex:1 1 240px;min-width:230px}
}

/* ---- Marcar: "deveria estar com outra cor… isto fica muito branco; mais cor
   para destacar; e isto podes meter maior, as próprias letras, não tenhas medo".
   Os passos passam a pastilhas de cor com letra grande; o painel ganha fundo
   rosado e o título em cor. */
.marc .passos{gap:.6rem;margin:2rem 0 1.6rem}
.marc .passos div{border:0;border-image:none;padding:.85rem 1rem;border-radius:16px;
  font-size:.9rem;font-weight:600;letter-spacing:.08em;color:#6B3FA6;
  background:#fff;box-shadow:0 0 0 1px rgba(107,63,166,.18),0 10px 22px -16px rgba(74,40,120,.5)}
.marc .passos div.on{color:#fff;background:var(--mistura);box-shadow:0 14px 26px -14px rgba(180,47,134,.7)}
.marc .passos div.ok{color:#8E2C70;background:#F7D4EC;box-shadow:0 0 0 1px rgba(230,79,180,.3)}
.marc .painel{background:linear-gradient(180deg,#FFFFFF 0%,#FBEFF8 55%,#F4E4F6 100%)}
.marc .painel h3{font-size:clamp(1.7rem,3vw,2.2rem);background:var(--mistura);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
@media (max-width:640px){
  .marc .passos div{padding:.7rem .5rem;font-size:.74rem;letter-spacing:.04em;border-radius:12px;text-align:center}
}

/* ---- Jogo: "amei! podes pôr isto cheio de velas" — dez velas ao fundo, duas
   filas de cinco (esquerda e direita), com a luz quente a subir do chão. */
.j-velas{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 30% 70% at 12% 100%,rgba(255,180,100,.20),transparent 70%),
             radial-gradient(ellipse 30% 70% at 88% 100%,rgba(255,180,100,.20),transparent 70%)}
.j-velas span{position:absolute;left:var(--x);bottom:clamp(1.2rem,4vw,3rem);width:clamp(24px,2.6vw,38px);height:var(--h);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 82%,#B79BD6),var(--c) 45%,color-mix(in srgb,var(--c) 80%,#A98BC8));
  border-radius:7px 7px 3px 3px;box-shadow:0 0 60px 16px rgba(255,190,120,.12)}
.j-velas span::before{content:"";position:absolute;left:50%;top:-7px;width:2px;height:8px;margin-left:-1px;background:#3A2440;border-radius:1px}
.j-velas i{position:absolute;left:50%;bottom:calc(100% + 4px);width:14px;height:28px;margin-left:-7px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#FFF6C8 0 25%,#FFB347 55%,rgba(255,120,60,0) 75%);
  animation:chama 1.6s ease-in-out infinite alternate;animation-delay:var(--d);transform-origin:50% 100%;filter:drop-shadow(0 0 12px rgba(255,180,90,.9))}
@media (max-width:860px){
  .j-velas span{transform:scale(.62);transform-origin:50% 100%}
  .j-velas span:nth-child(2),.j-velas span:nth-child(4),.j-velas span:nth-child(7),.j-velas span:nth-child(9){display:none}
}
@media (prefers-reduced-motion:reduce){ .j-velas i{animation:none} }

/* ==========================================================================
   05/11/2026, segunda volta — pedidos do Eduardo depois da publicação
   ========================================================================== */

/* ---- CAPA: só o céu estrelado (a foto da vela saiu do index.html). Fica
   um degradé de noite púrpura com uma luz rosada em baixo. */
.cover{background:
  radial-gradient(ellipse 80% 55% at 50% 108%,rgba(230,79,180,.30),transparent 70%),
  radial-gradient(ellipse 70% 60% at 50% 0%,rgba(107,63,166,.45),transparent 72%),
  linear-gradient(180deg,#1E0F33 0%,#2B1640 45%,#3B1F5C 100%)!important}
.cover::before{background:radial-gradient(ellipse at 50% 46%,rgba(30,15,51,0) 30%,rgba(30,15,51,.45) 100%)}

/* ---- MARCAR: "um fundo com outra cor, na página toda, que fique bonito".
   Era lavanda quase branca; passa a um degradé rosa → lilás → púrpura clara,
   com luzes suaves e estrelinhas brancas. */
.marc{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23FFFFFF' fill-opacity='.55'%3E%3Cpath d='M30 20c1 6 4 9 10 10-6 1-9 4-10 10-1-6-4-9-10-10 6-1 9-4 10-10z'/%3E%3Cpath d='M160 70c.6 4 2.6 6 6.6 6.6-4 .6-6 2.6-6.6 6.6-.6-4-2.6-6-6.6-6.6 4-.6 6-2.6 6.6-6.6z'/%3E%3Ccircle cx='120' cy='30' r='1.6'/%3E%3Ccircle cx='200' cy='150' r='1.4'/%3E%3Ccircle cx='40' cy='120' r='1.2'/%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(ellipse 55% 35% at 0% 0%,rgba(230,79,180,.35),transparent 70%),
  radial-gradient(ellipse 55% 40% at 100% 55%,rgba(107,63,166,.30),transparent 70%),
  linear-gradient(180deg,#F6D3EA 0%,#E6CDF4 45%,#D3BDF0 100%)!important;
  background-size:220px 220px,auto,auto,auto!important}
.marc .passos div:not(.on):not(.ok){background:rgba(255,255,255,.88)}

/* ---- FADAS: o bloco do Instagram com o telemóvel ao centro ------------ */
.insta-v2{text-align:center}
.iv-cab{max-width:46rem;margin:0 auto clamp(1.4rem,3vw,2.2rem)}
.iv-cab h2{margin:.3rem 0 .6rem}
.iv-cab h2 em{color:var(--rosa-esc)}
.iv-cab .lead{margin:0 auto}
.iv-cab .lead a{color:var(--ametista);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.iv-palco{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1.4rem,4vw,3.6rem);align-items:center}
.iv-palco .iphone-ig{margin:0;width:min(280px,72vw)}
.iv-lado{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.iv-lado li{position:relative;display:grid;gap:.25rem;padding:1.1rem 1.2rem 1.15rem;border-radius:20px;background:#fff;
  box-shadow:0 0 0 1px rgba(107,63,166,.14),0 22px 40px -28px rgba(74,40,120,.55)}
.iv-esq li{text-align:right}.iv-dir li{text-align:left}
.iv-lado li::after{content:"";position:absolute;top:50%;width:clamp(1.2rem,3vw,2.8rem);height:1px;background:linear-gradient(90deg,rgba(230,79,180,.6),rgba(107,63,166,.2))}
.iv-esq li::after{left:100%}.iv-dir li::after{right:100%;transform:scaleX(-1)}
.iv-lado i{font-style:normal;font-size:1.2rem;color:var(--rosa)}
.iv-lado b{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--uva)}
.iv-lado span{font-size:.86rem;line-height:1.5;color:var(--tinta2)}
.iv-esq li:nth-child(2),.iv-dir li:nth-child(2){margin-inline:clamp(0rem,2vw,1.6rem)}
.iv-bt{margin:clamp(1.6rem,3vw,2.4rem) 0 0}
/* o avatar como o dela: círculo púrpura com o logótipo branco */
.insta-v2 .ip-av{background:#6B3FA6!important}
@media (max-width:900px){
  .iv-palco{grid-template-columns:1fr}
  .iv-palco .iphone-ig{order:-1;margin:0 auto}
  .iv-lado{grid-template-columns:1fr 1fr;gap:.8rem}
  .iv-esq li,.iv-dir li{text-align:left;margin:0!important}
  .iv-lado li::after{display:none}
}
@media (max-width:520px){ .iv-lado{grid-template-columns:1fr} }

/* ---- CONTACTOS do Início: os logótipos nas cores originais ------------ */
.f2-dock.grande .dk{color:#fff}
.f2-dock.grande .dk[data-nome="Instagram"]{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.f2-dock.grande .dk[data-nome="WhatsApp"]{background:linear-gradient(160deg,#5BEB8A,#25D366 45%,#128C7E)}
.f2-dock.grande .dk[data-nome="Ligar"]{background:linear-gradient(160deg,#6EE38A,#34C759)}
.f2-dock.grande .dk[data-nome="Mapa"]{background:#fff;color:#EA4335}
.f2-dock.grande .dk[data-nome="Marcar"]{background:#fff;color:#6B3FA6}
.f2-dock.grande .dk[data-nome="Loja"]{background:linear-gradient(160deg,#F27BC9,#E64FB4 50%,#B42F86)}
.f2-dock.grande .dk:hover{filter:brightness(1.08)}

/* ---- LOJA "como uma loja profissional": a barra da pesquisa em branco
   limpo, com a pesquisa grande e as categorias como separadores sublinhados.
   O "Para quê?" fica em cima, como estava, e mais forte. */
#loja .lojalado{background:#fff!important;border-radius:16px;box-shadow:0 0 0 1px #E7DFF0,0 18px 40px -30px rgba(43,26,60,.45);animation:none}
#loja .pesq{height:48px;border-radius:12px!important;background:#F6F2FA!important;border:1px solid #E3D9EE!important;padding:0 .9rem;gap:.6rem;color:#7A6A8E}
#loja .pesq:focus-within{background:#fff!important;border-color:#6B3FA6!important;box-shadow:0 0 0 3px rgba(107,63,166,.15)}
#loja .pesq input{font-size:.95rem}
#loja .lojagrid .filtros button{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:.7rem .9rem!important;color:#5B4572!important;border-bottom:2px solid transparent!important}
#loja .lojagrid .filtros button .fc-n{font-size:.78rem;letter-spacing:.12em;font-weight:600}
#loja .lojagrid .filtros button .fc-d{color:#9585A8}
#loja .lojagrid .filtros button:hover{color:#2B1A3C!important;border-bottom-color:#DCCBF0!important}
#loja .lojagrid .filtros button.on{color:#6B3FA6!important;border-bottom-color:#6B3FA6!important}
#loja .lojalado .conta{color:#9585A8;font-size:.72rem}
/* "Para quê?" maior e mais vivo */
#loja .intencoes{gap:.6rem;padding:1rem 1.1rem;border-radius:16px;background:linear-gradient(115deg,#FBEFF8,#F1E6FA)}
#loja .int-tit{font-size:1.5rem;font-weight:600;color:#4A2878}
#loja .intencoes button{padding:.6rem 1.1rem .6rem .65rem;font-size:.9rem;font-weight:600;border-color:transparent;
  background:#fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--ic) 35%,transparent),0 10px 20px -14px rgba(43,26,60,.5)}
#loja .intencoes button i{width:20px;height:20px}
#loja .intencoes button.on{background:var(--ic);color:#fff;box-shadow:0 12px 22px -12px var(--ic)}
#loja .intencoes button.on small{color:rgba(255,255,255,.85)}
#loja .intencoes button.on i{background:#fff}
@media (max-width:860px){ #loja .intencoes{border-radius:0} }

/* ---- JOGO mais pequeno: as 36 cartas e o título cabem no ecrã e as velas
   veem-se logo, sem descer. */
.jogo{min-height:0;padding:calc(64px + clamp(1rem,2.4vw,1.8rem)) 0 clamp(9rem,16vw,12rem)}
.j-cab h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin:.2rem 0 .6rem}
.j-cab .lead{font-size:.95rem}
.j-dica{margin-top:.8rem}
.j-mesa{max-width:640px;margin-top:clamp(1rem,2.4vw,1.6rem);gap:clamp(.35rem,.8vw,.6rem)}
.j-nota{margin-top:clamp(1.2rem,2.4vw,1.6rem)}
.j-velas span{bottom:clamp(1rem,2.6vw,2rem)}
@media (max-width:860px){ .j-mesa{max-width:420px} }
.jogo{min-height:100vh;min-height:100svh;padding-bottom:clamp(1.4rem,3vw,2.2rem)}
.j-mesa{max-width:460px}
@media (max-width:860px){ .jogo{padding-bottom:clamp(7rem,22vw,9rem)} .j-mesa{max-width:420px} }
.insta-v2 .ig-sticker{left:-46px;top:-26px;bottom:auto;width:104px}
@media (max-width:700px){ .insta-v2 .ig-sticker{left:-24px;top:-18px;width:84px} }

/* ==========================================================================
   05/11/2026, terceira volta — "há muito branco; mais cores, nuances, mais
   vida; carrega bem". O papel deixa de ser branco: cada secção grande ganha
   o seu tom (rosa, lilás, pêssego, noite), o fundo da página tem manchas de
   luz, os cartões brancos ganham um filete de cor, e há faixas a correr na
   Loja e nas Fadas. Os cartões brancos ficam brancos de propósito: em cima
   de cor são eles que dão o relevo.
   ========================================================================== */
:root{
  --papel:#FBF0F7;
  --papel2:#F5EAFB;
  --papel3:#EEDDF7;
  --lavanda:#F1E3FA;
  --t-rosa:linear-gradient(160deg,#FDE6F3 0%,#F9DDF0 45%,#EEDDF9 100%);
  --t-lilas:linear-gradient(160deg,#F1E4FD 0%,#E6D6FA 50%,#F5DDF1 100%);
  --t-pessego:linear-gradient(160deg,#FFEDE3 0%,#FCE0EA 50%,#F1DDF8 100%);
  --t-ceu:linear-gradient(170deg,#EADBFB 0%,#F4DCEF 55%,#FFE7E1 100%);
}

/* ---- o fundo da página: manchas de luz fixas (rosa, púrpura, pêssego) */
body{background:
  radial-gradient(1100px 760px at -8% -6%,rgba(230,79,180,.16),transparent 62%),
  radial-gradient(1000px 900px at 108% 32%,rgba(107,63,166,.18),transparent 62%),
  radial-gradient(900px 700px at 26% 108%,rgba(255,160,120,.16),transparent 62%),
  #FBF0F7;background-attachment:fixed}

/* ---- secção a secção ------------------------------------------------- */
#hero{background:
  radial-gradient(ellipse 50% 60% at 92% 30%,rgba(230,79,180,.20),transparent 70%),
  radial-gradient(ellipse 45% 55% at 0% 90%,rgba(107,63,166,.16),transparent 70%)}
#folha > section:has(.pilares){background:var(--t-lilas)}
#consultashome{background:var(--t-rosa)!important}
#loja{background:var(--t-lilas)!important}
#rituais{background:var(--t-pessego)!important}
#quem{background:var(--t-rosa)!important}
#fadas{background:var(--t-lilas)!important}
.insta-grande{background:var(--t-pessego)!important}
#fechosobre{background:var(--t-ceu)!important}
#faq{background:var(--t-lilas)!important}
#contacto{background:var(--t-rosa)!important}
.topo-claro:not(.com-fundo){background:var(--t-ceu)!important}

/* a luz anda devagar nos fundos grandes (só a posição do degradé) */
@media (prefers-reduced-motion:no-preference){
  #loja,#fadas,#faq,#consultashome,#quem,#contacto{background-size:160% 160%!important;animation:tomRespira 22s ease-in-out infinite alternate}
}
@keyframes tomRespira{from{background-position:0% 0%}to{background-position:100% 100%}}

/* ---- títulos: o "em" a rosa em todo o lado claro; mais cor nos h2 */
h2 em,h1 em{color:var(--rosa-esc)}
.noite h2 em,.noite h1 em,.pagetop h1 em,.ceu-topo h1 em,.j-cab h1 em,.sangra.sobre h2 em{color:#F7B8E2}

/* ---- botões: o principal no degradé da casa */
.btn:not(.ghost):not(.ouro):not(.sm.ghost){background:var(--mistura);border-color:transparent;color:#fff}
.btn:not(.ghost):not(.ouro):hover{background:var(--mistura);filter:brightness(1.07);border-color:transparent}
.btn.ghost{border-color:rgba(180,47,134,.45);color:#7E2B78}
.btn.ghost:hover{background:#FCE4F3;border-color:#E64FB4;color:#B42F86}

/* ---- cartões brancos: filete de cor por cima ------------------------- */
.card,.fam-painel,#faq details,.destaque,.iv-lado li{
  background:linear-gradient(90deg,#6B3FA6,#E64FB4) top / 100% 4px no-repeat,#fff!important}

/* ---- FADAS: cada perfil com o seu tom (já alternavam foto à esquerda e
   à direita; agora alternam também a cor da faixa e do fundo) */
#fadas .perfil:nth-child(1){--pf1:#6B3FA6;--pf2:#A24FB4;--pfb:#F8F1FD}
#fadas .perfil:nth-child(2){--pf1:#B42F86;--pf2:#E64FB4;--pfb:#FEF2F8}
#fadas .perfil:nth-child(3){--pf1:#7E2B78;--pf2:#D97BB8;--pfb:#FFF4EE}
#fadas .perfil:nth-child(4){--pf1:#4A2878;--pf2:#7B5AD8;--pfb:#F3F0FE}
#fadas .perfil{background:linear-gradient(160deg,var(--pf1,#6B3FA6),var(--pf2,#A24FB4)) left / clamp(150px,22%,230px) 100% no-repeat,var(--pfb,#fff)}
#fadas .perfil:nth-child(even){background:linear-gradient(160deg,var(--pf1,#6B3FA6),var(--pf2,#A24FB4)) right / clamp(150px,22%,230px) 100% no-repeat,var(--pfb,#fff)}
#fadas .perfil .fada-arte{background:linear-gradient(115deg,var(--pf1,#6B3FA6),var(--pf2,#A24FB4))}
@media (max-width:820px){
  #fadas .perfil,#fadas .perfil:nth-child(even){background:linear-gradient(160deg,var(--pf1,#6B3FA6),var(--pf2,#A24FB4)) top / 100% 9.5rem no-repeat,var(--pfb,#fff)}
}

/* ---- PERGUNTAS: estrutura nova — as perguntas em duas colunas de
   cartões, cada um com a sua cor na lateral */
@media (min-width:1000px){
  #faq .faq{columns:2;column-gap:1.2rem}
}
#faq .faq details{break-inside:avoid;margin:0 0 1rem;border-radius:16px;padding:.3rem 1.2rem .4rem 1.3rem;
  box-shadow:inset 5px 0 0 var(--fq,#6B3FA6),0 16px 30px -24px rgba(74,40,120,.55);border:0!important}
#faq .faq details:nth-child(4n+1){--fq:#6B3FA6}
#faq .faq details:nth-child(4n+2){--fq:#E64FB4}
#faq .faq details:nth-child(4n+3){--fq:#E8833A}
#faq .faq details:nth-child(4n+4){--fq:#7B5AD8}
#faq .faq details[open]{box-shadow:inset 5px 0 0 var(--fq,#6B3FA6),0 22px 40px -22px rgba(74,40,120,.6)}
#faq .faq summary{color:#2B1A3C}
#faq .faq details[open] summary{color:var(--fq,#6B3FA6)}

/* ---- as faixas que correm: degradé que anda e estrelinhas douradas ---- */
.faixa.faixa-corre{background:linear-gradient(90deg,#4A2878,#6B3FA6,#A24FB4,#E64FB4,#A24FB4,#6B3FA6,#4A2878)!important;background-size:300% 100%!important}
@media (prefers-reduced-motion:no-preference){ .faixa.faixa-corre{animation:faixaTom 16s linear infinite} }
@keyframes faixaTom{from{background-position:0% 0}to{background-position:300% 0}}
.faixa-corre .fx-grupo span::before{background:#FFD98A}
.faixa-viva .fx-grupo span{font-size:clamp(1.1rem,1.9vw,1.45rem)}

/* ---- rodapé: em vez do escuro chapado, a noite púrpura a passar a rosa */
footer{background:
  radial-gradient(ellipse 60% 80% at 100% 0%,rgba(230,79,180,.28),transparent 70%),
  linear-gradient(160deg,#2B1640 0%,#4A2878 60%,#6A2A84 100%)!important;border-top:0}
/* a onda clara entre as Quatro portas e as consultas deixava uma tira branca */
#folha > section:has(.pilares) + svg.onda{display:none}

/* 05/11/2026: "tira a diferença destas linhas com a onda, mantém as estrelas" —
   a faixa do Início (entre as duas ondas) fica na cor chapada das ondas;
   o degradé que anda fica só nas faixas sem ondas (Loja e Fadas). */
.faixa.faixa-corre:not(.faixa-viva){background:var(--ametista)!important;animation:none!important}