, e virou background. Se por
qualquer motivo um index.php antigo voltar ao ar com a
![]()
lá dentro,
ela apareceria no tamanho natural do arquivo — 1800px de largura dentro de
uma caixa de 1400 — e arrebentaria o herói no computador e no celular ao
mesmo tempo. Esta linha faz os dois arquivos conviverem: com HTML novo ela
não faz nada, com HTML velho ela salva a página. */
.intro__arte img { display: none; }
/* ------ celular e tablet: a arte cai embaixo do título ------
Depende de public_html/assets/img/mesa-hero-celular.webp existir. Se um dia
o arquivo sumir do servidor, o celular passa a mostrar um buraco de 4:3 no
lugar dele — vazio, mas ocupando espaço. Nesse caso volte o `display`
abaixo para `none` até repor a arte. */
@media (max-width: 980px) {
/* No celular a ordem é: sobrescrito, título, ARTE, ornamento, frase.
O obstáculo é que a arte é irmã de .intro__texto, e as quatro peças de
texto são filhas dele — `order` só reordena irmãos do mesmo pai, então
não haveria como intercalar uma coisa na outra.
`display: contents` resolve sem tocar no HTML: ele apaga a CAIXA do
.intro__texto mantendo os filhos, que passam a ser itens diretos do
.intro. Aí as cinco peças são irmãs e a numeração abaixo manda em todas.
Para mudar a sequência, troque os números — é só isso. Se quiser o
ornamento colado no título, por exemplo, dê 3 a ele e 4 à arte. */
.intro { display: flex; flex-direction: column; }
.intro__texto { display: contents; }
.intro .sobrescrito { order: 1; }
.intro .titulo { order: 2; }
.intro__arte { order: 3; }
.intro .ornamento { order: 4; }
.intro .chamada { order: 5; }
.intro__arte {
display: block;
position: relative;
/* Laterais: sangram até as bordas da tela, desfazendo o respiro da seção.
Topo: NEGATIVO de propósito. A máscara deixa a primeira faixa da imagem
totalmente transparente — ali não há foto nenhuma, só espaço morto. O
-0.9rem come esse vazio e sobe a imagem, sem encostar no título e sem
mexer no degradê: a rampa continua exatamente a mesma, só começa mais
perto. Um `margin-top` positivo aqui afastaria de novo; para aproximar
ainda mais, deixe o número mais negativo. */
margin: -.9rem calc(var(--ritmo) * -1) 0;
/* Esta linha manda no formato do bloco. Exporte a arte de celular nesta
proporção — ou troque o número aqui para casar com o que você exportou.
O `cover` recorta o que sobrar, então errar aqui corta a composição. */
aspect-ratio: 4 / 3;
background-image: url("/assets/img/mesa-hero-celular.webp");
background-position: 50% 45%;
/* Emerge do verde logo abaixo do título e volta a sumir antes do
ornamento. As laterais desbotam de leve, só para tirar o canto vivo. */
--mascara:
linear-gradient(to bottom, transparent 0, rgba(0,0,0,.40) 12%, #000 34%, #000 78%, transparent 100%),
linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
}
.ornamento {
display: flex; align-items: center; gap: .7rem;
max-width: 31rem;
margin: clamp(1.4rem, 3vw, 2.1rem) 0 clamp(1.2rem, 2.5vw, 1.7rem);
color: var(--latao);
}
.ornamento__linha {
flex: 1; height: 1px;
background: linear-gradient(to right, transparent, rgba(192,138,62,.55));
}
.ornamento__linha:last-child {
background: linear-gradient(to left, transparent, rgba(192,138,62,.55));
}
/* Losangos que separam a linha da estrela. São o mesmo quadrado girado 45°,
sem imagem e sem SVG — dois pseudo-elementos custariam mais para explicar
do que um
vazio, mas aqui carregaria semântica de ênfase. */
.ornamento__ponto {
flex: none;
width: .3rem; height: .3rem;
background: rgba(192,138,62,.75);
transform: rotate(45deg);
}
.ornamento__estrela { flex: none; width: 2.3rem; height: 2.3rem; }
.intro .chamada { max-width: 30rem; margin-bottom: 0; }
/* Esta consulta é do componente, por isso mora aqui e não lá embaixo com as
outras. Acima de 980px cabem as duas colunas sem a arte encostar no texto;
abaixo disso a foto atravessaria o título, e é justamente o que se evita. */
@media (min-width: 981px) {
.intro {
position: relative;
display: grid;
/* 60% é a conta que faz "Leituras de TAROT" caber numa linha só. A
coluna anterior tinha 31rem fixos: num monitor largo o título passava
de 70px e quebrava em quatro linhas dentro de uma coluna de 496px. */
grid-template-columns: minmax(0, 60%) minmax(0, 1fr);
align-items: center;
min-height: min(28rem, 66vh);
padding-block: clamp(1.8rem, 3.6vw, 3rem) clamp(1.8rem, 3.6vw, 2.8rem);
}
.intro__texto { position: relative; z-index: 1; }
/* O teto de 4.6rem servia para o título ocupar a largura toda da página.
Aqui ele divide o espaço com a foto, então o passo de crescimento é mais
curto: é o que garante a quebra em duas linhas, e só duas. */
.intro .titulo { font-size: clamp(2.2rem, 4.4vw, 4.3rem); }
.intro__arte {
display: block;
position: absolute;
background-image: url("/assets/img/mesa-hero.webp");
/* Enquadra pelas cartas, não pelo centro geométrico do arquivo. O
primeiro número corre na horizontal, o segundo na vertical. */
background-position: 56% 46%;
/* Sobe por trás do cabeçalho. 3.6rem é a altura dele: 1rem de respiro
em cima, 1rem embaixo e a linha do texto no meio. */
top: -3.6rem;
/* Passa do fim da seção e dissolve dentro da área seguinte, como no
molde. Também alivia o corte: numa faixa muito baixa e muito larga o
recorte amputaria metade da cena. */
bottom: -3.5rem;
/* As duas bordas são ancoradas na JANELA, não no container. A conta é a
mesma dos dois lados: 50% é meio container, e vw é meia janela — a
diferença entre os dois é exatamente o quanto falta para chegar lá.
Assim o desbotamento morre sempre em 25% da largura da página, seja o
monitor de 1280 ou de 2560, que é o que "três quartos" exige. */
left: calc(50% - 25vw);
right: calc(50% - 50vw);
margin: 0;
/* A esquerda é onde a foto encontra o texto, e é lá que ela se apaga. A
rampa sobe rápido — mesma distância percorrida, menos tempo em
meio-tom — que é o que tira a impressão de névoa.
Em cima a foto não some: fica em torno de um terço da opacidade atrás
do cabeçalho e chega inteira logo abaixo dele. É a transparência que
você pediu, e é ela que impede o menu de ficar ilegível sobre a lua. */
--mascara:
linear-gradient(to right, transparent 0, rgba(0,0,0,.22) 10%, rgba(0,0,0,.85) 26%, #000 38%),
linear-gradient(to bottom, rgba(0,0,0,.30) 0, rgba(0,0,0,.44) 3.6rem, #000 6rem, #000 74%, transparent 100%);
}
/* Sobe para encostar no fim do degradê, fechando o vazio entre a foto e a
grade. O `min-height` do herói não serve para isso: encolher a barriga
dele levaria a arte junto e o vão continuaria igual. Quem tem que subir
é a seção de baixo.
O z-index não é detalhe. A arte é `position: absolute` e por isso pinta
por cima de qualquer irmão sem posição — sem esta linha, o rabo do
degradê passaria na frente de "Escolha uma abertura" e escureceria o
título. Com ela, a foto morre ATRÁS do texto, que é o que se quer. */
.aberturas {
position: relative; z-index: 1;
padding-block-start: 0;
margin-top: -1.5rem;
}
}
/* Navegador sem máscara mostraria justamente o retângulo colado que motivou
tudo isto. Melhor não mostrar arte nenhuma: a página continua inteira sem
ela. Este bloco fica DEPOIS das duas consultas de propósito — a mesma
especificidade decide pela ordem, e aqui em cima ele perderia para o
`display: block` de cada uma delas. */
@supports not (mask-image: linear-gradient(#000, #000)) {
@supports not (-webkit-mask-image: linear-gradient(#000, #000)) {
.intro__arte { display: none; }
}
}
.secao__titulo {
margin: 0 0 .4rem;
font-family: var(--letra-display); font-weight: 300;
font-size: clamp(1.6rem, 3.6vw, 2.3rem);
}
.secao__linha { margin: 0 0 1.8rem; color: var(--marfim-3); font-size: .95rem; }
/* Na página inicial o título "Escolha uma abertura" não tem mais linha de
apoio embaixo. Sem ela o título encostava na grade de desenhos: este
respiro devolve o espaço que a linha ocupava. */
.secao__titulo + .seletor { margin-top: 1.8rem; }
/* --------------------------------------------------------- como funciona */
/* O número que se vê é só o .passos__num, dentro do círculo. Sem list-style:none
o desenha TAMBÉM o marcador próprio do navegador, e a pessoa lê "1. 1".
O role="list" já está no HTML de propósito: o Safari tira a semântica de lista
quando o marcador some, e o role a devolve para quem usa leitor de tela. */
.passos {
display: grid; gap: 1.4rem;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
margin: clamp(2rem, 5vw, 3rem) 0 0;
padding: 0;
list-style: none;
counter-reset: passo;
}
.passos li { position: relative; padding-top: 2.6rem; }
.passos__num {
position: absolute; top: 0; left: 0;
width: 1.9rem; height: 1.9rem;
display: grid; place-content: center;
font-family: var(--letra-grav); font-size: .82rem;
color: var(--latao-claro);
border: 1px solid rgba(192,138,62,.5);
border-radius: 50%;
}
.passos h2 {
margin: 0 0 .35rem;
font-family: var(--letra-grav); font-size: 1rem; font-weight: 600;
letter-spacing: .05em;
}
.passos p { margin: 0; font-size: .92rem; color: var(--marfim-3); }
/* ------------------------------------------------ topo da página de abertura */
.abertura-topo { padding-block: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.abertura-topo__grade {
display: grid; gap: clamp(1.5rem, 4vw, 3rem);
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
align-items: center;
}
.abertura-topo__mapa { text-align: center; }
/* Sem width próprio de propósito: a regra base já calcula a largura a partir
de --alturaMapa, e era o width fixo daqui que impedia a media query de
860px de encolher o mapa. */
.abertura-topo__mapa .tiragem__mapa {
--alturaMapa: 9rem;
background: rgba(0,0,0,.25);
border: 1px solid rgba(192,138,62,.2);
padding: .4rem;
}
.abertura-topo__legenda {
margin: .7rem 0 0;
font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--marfim-1);
}
/* ------------------------------------- arte personalizada da abertura
O arquivo chega pelo HTML dentro da variável --arte; todo o resto do
desenho é daqui. Vale o mesmo princípio do herói da home: a imagem é
MASCARADA, não coberta por uma tarja verde. A máscara apaga os pixels da
própria foto nas bordas, então o que aparece por baixo é o fundo real da
página — com o degradê de luz de vela e a trama do tecido. Tarja chapada
nunca casaria com um fundo radial, e a emenda apareceria. */
.abertura-topo__arte {
background-image: var(--arte);
/* `contain` e não `cover`: contain encolhe a arte até ela caber INTEIRA na
caixa; cover amplia até PREENCHER a caixa e descarta o que sobra. Era o
cover que decepava as cartas de cima e de baixo na Cruz Celta e na Cruz
Simples, onde o arranjo ocupa toda a altura do arquivo. */
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
/* Mesma proporção em que a arte é exportada. Com a caixa e o arquivo na
mesma proporção não sobra tarja nem falta pedaço. Se um dia você exportar
em outro formato, é esta linha que precisa acompanhar. */
aspect-ratio: 4 / 3;
/* Telas estreitas: sangra até as bordas, desfazendo o respiro da seção. */
margin-inline: calc(var(--ritmo) * -1);
--mascara:
linear-gradient(to bottom, transparent 0, rgba(0,0,0,.45) 9%, #000 26%, #000 80%, transparent 100%),
linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
-webkit-mask-image: var(--mascara);
mask-image: var(--mascara);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
@media (min-width: 861px) {
.abertura-topo__arte {
/* Fica dentro da própria coluna da grade, centralizada nela.
Antes era absoluta e ancorada na borda da JANELA. Isso funcionava num
monitor comum e ficava ruim num largo: o container trava em 78rem, então
num 2560 sobram uns 650px de folga de cada lado, e a arte ia morar nesse
vazio, longe do texto a que pertence. Em fluxo ela acompanha o container
e o problema não existe em largura nenhuma.
O max-width é o tamanho da arte — é este o número a mexer se quiser
maior ou menor. Abaixo dele, ela encolhe junto com a coluna. */
margin: 0 auto;
width: 100%;
max-width: 26rem;
/* Sem `--mascara` própria aqui: agora vale a da regra base, que desbota de
leve nos quatro lados. O degradê forte da esquerda existia porque a arte
encostava no texto; centralizada na coluna, ele comeria quase metade
dela sem motivo. */
}
}
/* Navegador sem máscara mostraria o retângulo colado que se quer evitar.
Fica depois da consulta acima de propósito: mesma especificidade se
resolve pela ordem. */
@supports not (mask-image: linear-gradient(#000, #000)) {
@supports not (-webkit-mask-image: linear-gradient(#000, #000)) {
.abertura-topo__arte { display: none; }
}
}
.miolo { margin: 0 0 1.4rem; }
.voltar {
font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--marfim-1); text-decoration: none;
}
.voltar:hover { color: var(--latao-claro); }
.preparo-cena { padding-block: 0 clamp(2.5rem, 6vw, 4rem); }
/* --------------------------------------------------- o que cada casa pergunta */
.casas, .outras {
padding-block: clamp(2.5rem, 6vw, 4rem);
border-top: 1px solid rgba(192,138,62,.18);
}
.casas__lista {
display: grid; gap: .9rem;
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
margin: 0; padding: 0;
}
.casas__lista li {
display: grid; grid-template-columns: 2rem 1fr; gap: .8rem;
padding: .9rem 1rem;
background: rgba(8, 26, 21, .45);
border: 1px solid rgba(192,138,62,.16);
border-radius: 4px;
}
.casas__num {
font-family: var(--letra-grav); font-size: 1rem;
color: var(--latao); text-align: center;
}
.casas__lista h3 {
margin: 0 0 .2rem;
font-family: var(--letra-grav); font-size: .95rem; font-weight: 600;
letter-spacing: .03em;
}
.casas__lista p { margin: 0; font-size: .86rem; color: var(--marfim-3); }
.vazio {
max-width: 40rem; margin: 0 auto;
padding: clamp(4rem, 12vw, 8rem) var(--ritmo);
text-align: center;
}
.vazio .botao { justify-self: center; display: inline-block; margin-top: 1rem; }
.sobrescrito {
margin: 0 0 1.1rem;
font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--latao);
}
.titulo {
margin: 0 0 1.2rem;
font-family: var(--letra-display);
font-weight: 300;
font-size: clamp(2.3rem, 6.4vw, 4.6rem);
line-height: 1.03;
letter-spacing: -.015em;
font-variation-settings: "SOFT" 40, "WONK" 1;
}
.titulo em {
font-style: italic;
color: var(--latao-claro);
font-variation-settings: "SOFT" 90, "WONK" 1;
}
.titulo--menor { font-size: clamp(2rem, 5vw, 3.4rem); }
.chamada {
max-width: 52ch;
margin: 0 0 clamp(2rem, 5vw, 3rem);
color: var(--marfim-3);
font-size: 1.05rem;
}
/* ---------------------------------------------------------------- seletor
O elemento assinatura: cada botão desenha a GEOMETRIA REAL da abertura,
a partir das mesmas coordenadas que a mesa vai usar. Cadastrar uma
abertura nova no banco faz o desenho aparecer aqui sozinho. */
/* Mesma história do .passos: sem list-style:none o desenha a bolinha do
navegador, que numa grade sem recuo aparece flutuando fora de cada cartão.
O role="list" no HTML devolve a semântica de lista que o Safari tira junto
com o marcador. */
.seletor {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: .9rem;
margin: 0 0 clamp(2rem, 5vw, 3rem);
padding: 0;
list-style: none;
}
.tiragem {
position: relative;
display: grid;
gap: .45rem;
height: 100%;
padding: 1rem 1rem 1.15rem;
text-align: left;
color: inherit;
text-decoration: none;
background: rgba(8, 26, 21, .5);
border: 1px solid rgba(192,138,62,.24);
border-radius: 5px;
transition: border-color .25s, background .25s, transform .25s;
}
.tiragem:hover, .tiragem:focus-visible {
background: rgba(28, 70, 59, .5);
border-color: rgba(192,138,62,.6);
transform: translateY(-2px);
}
.tiragem__ir {
margin-top: .5rem;
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--latao-claro);
}
.seletor--compacto { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.seletor--compacto .tiragem__resumo { display: none; }
.tiragem__mapa {
position: relative;
display: block;
/* travado pela altura: assim uma abertura retrato não estica o cartão */
width: min(100%, calc(var(--alturaMapa, 5.2rem) * var(--prop)));
aspect-ratio: var(--prop);
margin: 0 auto .35rem;
background: rgba(0,0,0,.22);
border-radius: 3px;
}
.tiragem__mapa i {
position: absolute;
left: var(--x); top: var(--y);
width: var(--w);
aspect-ratio: var(--carta-prop);
margin-left: calc(var(--w) / -2);
margin-top: calc(var(--w) * -.855);
transform: rotate(var(--r));
background: rgba(192,138,62,.28);
border: 1px solid rgba(227,185,111,.5);
border-radius: 1px;
}
.tiragem:hover .tiragem__mapa i {
background: rgba(227,185,111,.4);
border-color: var(--latao-claro);
}
/* Arte personalizada no cartão, no lugar do esquema. Ocupa a mesma faixa que
o .tiragem__mapa ocupava, para o cartão não mudar de altura conforme uma
abertura tenha arte e a outra não. */
.tiragem__arte {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
margin: 0 auto .35rem;
background-image: var(--arte);
/* `contain` pelo mesmo motivo da página da abertura: mostra a arte inteira
em vez de recortar o miolo. Aqui pesa ainda mais, porque num cartão
pequeno o que se perde não dá para recuperar clicando. */
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
/* Desbotamento de leve nos quatro lados, para a arte emergir do cartão em
vez de parecer uma figurinha colada nele. */
--mascara:
linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%),
linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
-webkit-mask-image: var(--mascara);
mask-image: var(--mascara);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.tiragem__nome {
font-family: var(--letra-grav);
font-size: 1.02rem; font-weight: 600;
letter-spacing: .04em;
}
.tiragem__qtd {
font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--latao);
}
.tiragem__resumo { font-size: .85rem; color: var(--marfim-3); line-height: 1.45; }
.selo {
position: absolute; top: .7rem; right: .7rem;
padding: .18rem .5rem;
font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--marfim);
background: var(--vinho);
border-radius: 2px;
}
/* ------------------------------------------------------------------ preparo */
.preparo { display: grid; gap: 1.1rem; max-width: 40rem; }
.campo { display: grid; gap: .45rem; }
.campo__rotulo {
font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--latao);
}
.campo__nota { color: var(--marfim-1); letter-spacing: .1em; }
.campo input {
width: 100%;
padding: .85rem 1rem;
color: var(--marfim);
font: inherit;
background: rgba(8, 26, 21, .6);
border: 1px solid rgba(192,138,62,.3);
border-radius: 4px;
}
.campo input::placeholder { color: var(--marfim-1); }
.campo input:focus { border-color: var(--latao); outline: none; box-shadow: 0 0 0 3px rgba(192,138,62,.18); }
.alternador { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--marfim-3); cursor: pointer; }
.alternador input { width: 1.05rem; height: 1.05rem; accent-color: var(--latao); }
.botao {
justify-self: start;
padding: .9rem 1.9rem;
font-family: var(--letra-grav);
font-size: .82rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
color: #16110A;
background: linear-gradient(175deg, var(--latao-claro), var(--latao));
border: none; border-radius: 3px;
cursor: pointer;
transition: filter .2s, transform .2s;
}
.botao:hover { filter: brightness(1.12); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .55; cursor: progress; }
.botao--fantasma {
color: var(--marfim);
background: transparent;
border: 1px solid rgba(192,138,62,.45);
padding: .6rem 1.1rem;
font-size: .7rem;
}
.botao--fantasma:hover { background: rgba(192,138,62,.14); filter: none; }
.preparo__erro {
margin: 0; padding: .7rem .9rem;
font-size: .9rem; color: #F3C9CE;
background: rgba(138,52,65,.35);
border-left: 2px solid var(--vinho);
border-radius: 2px;
}
/* -------------------------------------------------------------------- mesa */
.mesa-cena {
max-width: 78rem;
margin: 0 auto;
padding: clamp(1.5rem, 4vw, 3rem) var(--ritmo) clamp(3rem, 7vw, 5rem);
}
.mesa-cena__topo {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 1rem;
margin-bottom: 1.6rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(192,138,62,.2);
}
.mesa-cena__nome {
margin: 0;
font-family: var(--letra-display); font-weight: 300;
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}
.mesa-cena__pergunta {
margin: .35rem 0 0;
font-family: var(--letra-display); font-style: italic;
color: var(--marfim-3);
}
.mesa-cena__pergunta:empty { display: none; }
.mesa-cena__acoes { display: flex; gap: .6rem; }
/* Aberturas como a Cruz Simples e a Cruz Celta são naturalmente RETRATO:
a mesa se limita pela altura da janela, senão viraria uma coluna gigante. */
.mesa {
position: relative;
width: min(100%, calc(var(--altura-mesa, 72vh) * var(--prop, 1.6)));
aspect-ratio: var(--prop, 1.6);
margin-inline: auto;
}
/* o monte de onde as cartas saem */
.monte { position: absolute; left: 3%; bottom: 2%; width: 9%; opacity: 0; transition: opacity .4s; }
.monte i {
position: absolute; inset: 0;
aspect-ratio: var(--carta-prop);
background: var(--pano-sombra);
border: 1px solid rgba(192,138,62,.35);
border-radius: var(--raio);
}
.monte i:nth-child(2) { transform: translate(2px, -3px) rotate(-3deg); }
.monte i:nth-child(3) { transform: translate(4px, -6px) rotate(3deg); }
.mesa--montada .monte { opacity: .5; }
/* ------------------------------------------------------------------ cartas */
.carta {
position: absolute;
left: var(--x); top: var(--y);
width: var(--w);
/* margens em % resolvem contra a LARGURA do contêiner — o que permite
centralizar a carta pelo seu meio sem saber a altura em pixels. */
margin-left: calc(var(--w) / -2);
margin-top: calc(var(--w) * -.855);
transform: rotate(var(--rot));
z-index: var(--camada, 0);
}
/* camada 1: o voo do monte até a casa */
.carta__voo {
display: block;
width: 100%;
padding: 0;
aspect-ratio: var(--carta-prop);
background: none; border: none;
cursor: pointer;
perspective: 1400px;
transform: translate(var(--voo-x, 0px), var(--voo-y, 0px)) scale(var(--voo-s, 1));
opacity: var(--voo-o, 1);
transition: transform .85s cubic-bezier(.2,.85,.25,1), opacity .5s ease-out;
transition-delay: calc(var(--i, 0) * 95ms);
}
/* camada 2: o giro da carta */
.carta__flip {
position: relative;
display: block;
width: 100%; height: 100%;
transform-style: preserve-3d;
transition: transform .75s cubic-bezier(.3,.85,.3,1);
}
.carta--virada .carta__flip { transform: rotateY(180deg); }
.carta__face {
position: absolute; inset: 0;
backface-visibility: hidden;
border-radius: var(--raio);
box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.06) inset;
overflow: hidden;
}
.carta__verso {
background:
repeating-linear-gradient(45deg, rgba(192,138,62,.16) 0 3px, transparent 3px 9px),
repeating-linear-gradient(-45deg, rgba(192,138,62,.16) 0 3px, transparent 3px 9px),
linear-gradient(160deg, #17392F, #0C221C);
border: 1px solid rgba(192,138,62,.4);
}
.carta__verso::after {
content: "";
position: absolute; inset: 7%;
border: 1px solid rgba(227,185,111,.32);
border-radius: 1px;
}
.carta__frente {
transform: rotateY(180deg);
background: #14100B;
border: 1px solid rgba(192,138,62,.45);
}
/* A imagem precisa ser posicionada: o marcador logo abaixo é absolute, e
elemento posicionado pinta acima de elemento em fluxo normal, seja qual for
a ordem no DOM. Sem isto, a arte só aparecia quando a carta saía invertida,
porque o rotate criava contexto de empilhamento e desempatava por ordem. */
.carta__img {
position: absolute; inset: 0;
display: block; width: 100%; height: 100%;
object-fit: cover;
}
.carta--invertida .carta__img { transform: rotate(180deg); }
/* substituto para enquanto as imagens do baralho não estiverem no lugar */
.carta__marcador {
position: absolute; inset: 0;
display: grid; place-content: center; gap: .3rem;
padding: 8%;
text-align: center;
background: linear-gradient(165deg, #1D1710, #100C08);
}
.carta__marcador b {
font-family: var(--letra-grav); font-weight: 600;
font-size: clamp(.6rem, 1.15vw, .82rem);
letter-spacing: .04em; line-height: 1.25;
color: var(--latao-claro);
}
.carta__marcador small { font-size: .6rem; letter-spacing: .12em; color: var(--marfim-1); }
.carta--invertida .carta__marcador { transform: rotate(180deg); }
/* etiqueta da casa, sempre legível sob a carta */
.carta__casa {
position: absolute;
left: 50%; top: calc(100% + .4rem);
transform: translateX(-50%) rotate(calc(var(--rot) * -1));
white-space: nowrap;
font-family: var(--letra-grav);
font-size: clamp(.54rem, .95vw, .7rem);
letter-spacing: .1em; text-transform: uppercase;
color: var(--marfim-1);
pointer-events: none;
}
.carta--virada .carta__casa { color: var(--latao); }
.carta__ordem {
position: absolute; top: -.55rem; left: -.55rem;
width: 1.35rem; height: 1.35rem;
display: grid; place-content: center;
font-size: .62rem; font-weight: 700;
font-family: var(--letra-ui);
color: var(--breu);
background: var(--latao);
border: none;
border-radius: 50%;
z-index: 2;
pointer-events: none;
}
/* ------------------------------------------------------ cartas empilhadas
Na Cruz Celta a carta 2 é deitada sobre a 1, como manda a tradição. No pano
o leitor levanta a de cima para ver a de baixo; aqui o número vira botão e
faz o mesmo. */
.carta__ordem--acao {
pointer-events: auto;
cursor: pointer;
width: 1.6rem; height: 1.6rem;
font-size: .7rem;
box-shadow: 0 0 0 2px var(--pano-sombra), 0 2px 6px rgba(0,0,0,.5);
transition: transform .2s, background .2s;
}
.carta__ordem--acao:hover { transform: scale(1.15); background: var(--latao-claro); }
.carta__ordem--acao[aria-pressed="true"] {
background: var(--marfim);
box-shadow: 0 0 0 2px var(--latao), 0 2px 8px rgba(0,0,0,.55);
}
/* dá um alvo de toque decente no celular sem inchar o desenho */
.carta__ordem--acao::after {
content: "";
position: absolute; inset: -.55rem;
border-radius: 50%;
}
.carta--empilhada .carta__voo { transition-property: transform, opacity, filter; }
.carta--erguida .carta__voo {
filter: drop-shadow(0 10px 20px rgba(0,0,0,.6));
}
.carta--recuada .carta__voo { filter: brightness(.72); }
/* a etiqueta da casa some na carta recuada: duas legendas no mesmo ponto
viram sopa visual */
.carta--recuada .carta__casa { opacity: 0; }
.mesa-cena__dica {
margin: 2.5rem 0 0;
text-align: center;
font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--marfim-1);
}
/* ----------------------------------------------------------------- caderno */
.caderno { display: grid; gap: .8rem; margin: 3rem 0 0; padding: 0; }
.nota {
display: grid;
grid-template-columns: 2.2rem 1fr;
gap: 1rem;
padding: 1.1rem 1.2rem;
background: rgba(8, 26, 21, .55);
border: 1px solid rgba(192,138,62,.18);
border-left: 2px solid var(--latao);
border-radius: 4px;
animation: surge .45s ease-out both;
}
.nota--invertida { border-left-color: var(--vinho); }
.nota__num {
font-family: var(--letra-grav); font-size: 1.1rem;
color: var(--latao); text-align: center;
}
.nota__casa {
margin: 0 0 .15rem;
font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--marfim-1);
}
.nota__carta {
margin: 0 0 .5rem;
font-family: var(--letra-grav); font-size: 1.05rem; font-weight: 600;
color: var(--marfim);
}
.nota__carta span {
margin-left: .5rem;
font-family: var(--letra-ui); font-size: .62rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--vinho);
vertical-align: .18em;
}
.nota__texto { margin: 0; font-size: .93rem; color: var(--marfim-3); }
.nota__chaves { margin: .5rem 0 0; font-size: .78rem; color: var(--marfim-1); font-style: italic; }
@keyframes surge { from { opacity: 0; transform: translateY(8px); } }
/* ---------------------------------------------- chave de acesso e consentimento */
.acesso { font-size: .88rem; }
.acesso summary {
cursor: pointer;
color: var(--marfim-1);
font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.acesso summary:hover { color: var(--latao); }
.acesso[open] summary { margin-bottom: .9rem; color: var(--latao); }
.acesso__nota {
margin: 0 0 .9rem;
padding: .7rem .9rem;
font-size: .86rem; line-height: 1.55;
color: var(--marfim-3);
background: rgba(138,52,65,.22);
border-left: 2px solid var(--vinho);
border-radius: 2px;
}
.acesso .campo { margin-bottom: .8rem; }
.acesso .alternador { align-items: flex-start; line-height: 1.45; }
.acesso .alternador input { margin-top: .18rem; flex: none; }
.botao--apagar { border-color: rgba(138,52,65,.6); color: #E9BFC5; }
.botao--apagar:hover { background: rgba(138,52,65,.25); }
/* ------------------------------------------------------------------ leitura */
.leitura {
margin: 2.5rem 0 0;
padding: 1.8rem;
background: rgba(28, 70, 59, .35);
border: 1px solid rgba(192,138,62,.3);
border-radius: 5px;
}
.leitura__titulo {
margin: 0 0 .9rem;
font-family: var(--letra-grav); font-size: 1.1rem; font-weight: 600;
letter-spacing: .08em;
color: var(--latao-claro);
}
.leitura__sintese {
margin: 0;
font-family: var(--letra-display);
font-size: 1.12rem; line-height: 1.7;
}
.leitura__aviso {
margin: 1.4rem 0 0; padding-top: 1rem;
font-size: .78rem; line-height: 1.6;
color: var(--marfim-1);
border-top: 1px solid rgba(192,138,62,.2);
}
.leitura__estado {
margin: 0; text-align: center;
font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--marfim-1);
animation: pulsar 1.8s ease-in-out infinite;
}
/* ------------------------------------------------------------ espera da IA
Vinte a sessenta segundos de espera precisam de presença: bloco alto,
movimento contínuo e o tempo decorrido à vista. A animação é um baralho
sendo folheado — o gesto de quem está pensando com as cartas na mão. */
.aguardo { padding: 1.2rem 0 .4rem; text-align: center; }
.aguardo__baralho {
position: relative;
width: 58px; height: 92px;
margin: 0 auto 1.4rem;
}
.aguardo__baralho i {
position: absolute; inset: 0;
border-radius: 3px;
border: 1px solid rgba(192,138,62,.45);
background:
repeating-linear-gradient(45deg, rgba(192,138,62,.16) 0 3px, transparent 3px 9px),
linear-gradient(160deg, #17392F, #0C221C);
box-shadow: 0 4px 14px rgba(0,0,0,.45);
transform-origin: 50% 125%;
animation: folhear 2.6s cubic-bezier(.45,0,.25,1) infinite;
}
.aguardo__baralho i:nth-child(2) { animation-delay: .2s; }
.aguardo__baralho i:nth-child(3) { animation-delay: .4s; }
@keyframes folhear {
0%, 100% { transform: rotate(0deg); opacity: 1; }
28% { transform: rotate(-15deg); opacity: .85; }
58% { transform: rotate(13deg); opacity: .95; }
}
.aguardo__titulo {
margin: 0 0 .4rem;
font-family: var(--letra-grav); font-weight: 600;
font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--latao-claro);
}
.aguardo__fase {
margin: 0 auto; max-width: 34ch;
font-size: .9rem; color: var(--marfim-3);
}
.aguardo__tempo {
margin: .9rem 0 0;
font-size: .78rem; letter-spacing: .16em;
color: var(--marfim-1);
font-variant-numeric: tabular-nums;
}
.aguardo__tempo b { color: var(--latao); font-weight: 500; }
.aguardo__linha {
height: 2px; margin: 1.2rem auto 0; max-width: 22rem;
background: rgba(192,138,62,.16);
border-radius: 2px; overflow: hidden;
}
.aguardo__linha span {
display: block; width: 34%; height: 100%;
background: linear-gradient(90deg, transparent, var(--latao-claro), transparent);
animation: correr 1.9s ease-in-out infinite;
}
@keyframes correr {
0% { transform: translateX(-110%); }
100% { transform: translateX(400%); }
}
/* tarja fixa: aparece só quando o bloco de espera sai da tela */
.aguardo-fixo {
position: fixed; z-index: 40;
left: 50%; bottom: 1rem;
display: flex; align-items: center; gap: .6rem;
padding: .7rem 1.1rem;
background: rgba(11,18,15,.94);
border: 1px solid rgba(192,138,62,.45);
border-radius: 100px;
box-shadow: 0 8px 26px rgba(0,0,0,.5);
font-size: .82rem; color: var(--marfim);
transform: translateX(-50%) translateY(180%);
transition: transform .35s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.aguardo-fixo.visivel { transform: translateX(-50%) translateY(0); }
.aguardo-fixo i {
width: .6rem; height: .6rem; flex: none;
border-radius: 50%;
background: var(--latao-claro);
animation: pulsar 1.3s ease-in-out infinite;
}
.aguardo-fixo b { color: var(--latao-claro); font-weight: 500; font-variant-numeric: tabular-nums; }
.leitura__estado--erro { color: #F3C9CE; text-transform: none; letter-spacing: 0; animation: none; }
@keyframes pulsar { 50% { opacity: .45; } }
/* texto da IA dentro da nota de cada casa */
.nota__ia {
margin: .7rem 0 0; padding-top: .7rem;
font-size: .95rem; line-height: 1.65;
color: var(--marfim);
border-top: 1px solid rgba(192,138,62,.18);
}
/* O acolhimento nunca se parece com decoração: vem antes de tudo e sozinho. */
.cuidado {
margin: 2rem 0 0;
padding: 1.3rem 1.5rem;
background: rgba(138,52,65,.28);
border: 1px solid rgba(233,191,197,.35);
border-radius: 5px;
}
.cuidado p { margin: 0; font-size: 1rem; line-height: 1.7; color: #FBE9EC; }
.retencao {
margin: 1.5rem 0 0;
font-size: .78rem; text-align: center;
color: var(--marfim-1);
}
/* ------------------------------------------------------------------ planos */
.planos {
max-width: 62rem;
margin: 0 auto;
padding: clamp(3rem, 8vw, 6rem) var(--ritmo);
border-top: 1px solid rgba(192,138,62,.18);
}
.planos__titulo {
margin: 0 0 2rem;
font-family: var(--letra-display); font-weight: 300;
font-size: clamp(1.7rem, 4vw, 2.6rem);
}
.planos__grade { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.plano {
padding: 1.7rem;
background: rgba(8, 26, 21, .5);
border: 1px solid rgba(192,138,62,.22);
border-radius: 5px;
}
.plano--pago { border-color: rgba(192,138,62,.5); background: rgba(28,70,59,.4); }
.plano h3 { margin: 0 0 .2rem; font-family: var(--letra-grav); font-size: 1.15rem; letter-spacing: .04em; }
.plano__preco { margin: 0 0 1rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--latao); }
.plano p { color: var(--marfim-3); font-size: .93rem; }
.plano ul { margin: 1rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--marfim-3); }
.plano li { margin-bottom: .35rem; }
/* ------------------------------------------------------------------ rodapé */
.rodape {
padding: 2.5rem var(--ritmo) 3.5rem;
font-size: .82rem; line-height: 1.7;
color: var(--marfim-1);
border-top: 1px solid rgba(192,138,62,.18);
}
.rodape p { max-width: 60ch; margin: 0 auto .6rem; }
.rodape strong { color: var(--marfim-3); }
.rodape__links { text-align: center; }
/* ------------------------------------------------------------------ oferta
Aparece só com a mesa completa. Precisa ser convite, não cobrança: por isso
fica visualmente mais quieta que a leitura pronta e mais viva que o caderno.
O preço é dito uma vez, grande, na letra do display — e nunca repetido em
letra miúda, que é o gesto de quem tem algo a esconder. */
.oferta {
margin: 2.5rem 0 0;
padding: 1.7rem 1.8rem;
background: rgba(28, 70, 59, .32);
border: 1px solid rgba(192,138,62,.3);
border-radius: 5px;
animation: surge .45s ease-out both;
}
.oferta__sobre {
margin: 0 0 .5rem;
font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--latao);
}
.oferta__titulo {
margin: 0 0 .7rem;
font-family: var(--letra-display); font-weight: 300;
font-size: clamp(1.3rem, 3vw, 1.8rem);
line-height: 1.25;
}
.oferta__preco {
font-style: italic;
color: var(--latao-claro);
white-space: nowrap;
}
.oferta__linha {
max-width: 56ch;
margin: 0 0 1.2rem;
font-size: .93rem;
color: var(--marfim-3);
}
.oferta .alternador {
align-items: flex-start;
margin: 0 0 1.2rem;
line-height: 1.45;
font-size: .86rem;
}
.oferta .alternador input { margin-top: .18rem; flex: none; }
.oferta .acesso { margin-top: 1.4rem; }
.oferta__erro {
margin: 1rem 0 0; padding: .7rem .9rem;
font-size: .9rem; color: #F3C9CE;
background: rgba(138,52,65,.35);
border-left: 2px solid var(--vinho);
border-radius: 2px;
}
/* ------ Pix ------ */
.pix {
margin-top: 1.4rem; padding-top: 1.3rem;
border-top: 1px solid rgba(192,138,62,.22);
}
.pix__titulo {
margin: 0 0 .4rem;
font-family: var(--letra-grav); font-size: .9rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
color: var(--latao-claro);
}
.pix__ajuda { margin: 0 0 .9rem; max-width: 54ch; font-size: .88rem; color: var(--marfim-3); }
.pix__codigo {
margin: 0 0 .8rem;
max-height: 7.5rem; overflow: auto;
padding: .8rem .9rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .72rem; line-height: 1.5;
word-break: break-all;
color: var(--marfim-3);
background: rgba(8, 26, 21, .7);
border: 1px solid rgba(192,138,62,.25);
border-radius: 4px;
user-select: all;
}
/* Lado a lado quando cabe; empilhado quando não cabe. Como o copia e cola vem
primeiro no HTML, no celular ele fica em cima — que é o certo: quem paga
pelo próprio telefone não consegue fotografar a tela dele mesmo, então ali
o QR é enfeite e o botão de copiar é o que resolve. */
.pix__duplo {
display: flex; flex-wrap: wrap; align-items: flex-start;
gap: 1.1rem;
}
/* min-width:0 não é enfeite: item de flex tem largura mínima automática, e sem
isto o código, que quebra no meio da palavra, estoura a linha. */
.pix__copiacola { flex: 1 1 18rem; min-width: 0; }
.pix__qr { flex: 0 0 auto; margin: 0; text-align: center; }
/* Redundante desde que a trava geral de [hidden] entrou lá no começo da folha.
Fica como está: não atrapalha, e documenta a primeira vez que este problema
apareceu. Se um dia limpar, é seguro apagar esta linha. */
.pix__qr[hidden] { display: none; }
.pix__qr img {
display: block;
width: 10.5rem; height: auto;
padding: .5rem;
/* Fundo branco é requisito de leitura, não estética: o leitor de QR precisa
do contraste claro/escuro na proporção certa, e o verde escuro do site
atrás dos módulos faz alguns aplicativos desistirem. */
background: #fff;
border-radius: 4px;
}
.pix__qr figcaption {
margin-top: .45rem;
font-size: .74rem; color: var(--marfim-3);
}
.pix__estado {
margin: .9rem 0 0;
font-size: .82rem; color: var(--marfim-1);
animation: pulsar 1.8s ease-in-out infinite;
}
/* ------ tabela de preços na home ------ */
.plano__precos { margin: 1rem 0 0; padding: 0; list-style: none; }
.plano__precos li {
border-bottom: 1px dotted rgba(192,138,62,.25);
}
.plano__precos li:last-child { border-bottom: none; }
/* O flex mudou do - para o : assim o link ocupa a linha inteira,
incluindo o respiro de cima e de baixo. Se o padding ficasse no
- , a
borda de clique pararia no texto e a pessoa erraria o alvo no celular.
`color: inherit` e `text-decoration: none` são obrigatórios porque a regra
geral de pinta tudo de latão e sublinha — o nome tem que continuar
marfim e o preço continua sendo pintado pelo seletor do abaixo. */
.plano__precos a {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem;
padding: .5rem .35rem;
margin: 0 -.35rem; /* devolve o recuo: o texto fica alinhado como antes */
color: inherit; text-decoration: none;
border-radius: 3px;
transition: background .2s, color .2s;
}
.plano__precos a:hover, .plano__precos a:focus-visible {
background: rgba(28, 70, 59, .55);
}
.plano__precos a:hover span { color: var(--latao-claro); }
.plano__precos span {
font-family: var(--letra-grav); font-size: .92rem; letter-spacing: .03em;
color: var(--marfim);
}
.plano__precos small {
display: block;
font-family: var(--letra-ui);
font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--marfim-1);
}
.plano__precos b {
font-family: var(--letra-display); font-weight: 500; font-size: 1.05rem;
color: var(--latao-claro);
white-space: nowrap;
}
.plano__nota { margin: 1.2rem 0 0; font-size: .84rem; color: var(--marfim-1); }
/* ------------------------------------------------------------- responsivo */
@media (max-width: 860px) {
.abertura-topo__grade { grid-template-columns: 1fr; }
.abertura-topo__mapa { order: -1; }
.abertura-topo__mapa .tiragem__mapa { --alturaMapa: 7rem; }
}
@media (max-width: 720px) {
.mesa { --altura-mesa: 78vh; }
.casas__lista { grid-template-columns: 1fr; }
.mesa-cena__topo { flex-direction: column; align-items: flex-start; }
.seletor { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.botao { justify-self: stretch; text-align: center; }
.nota { grid-template-columns: 1.6rem 1fr; gap: .7rem; padding: .95rem 1rem; }
.leitura { padding: 1.2rem; }
.mesa-cena__acoes { flex-wrap: wrap; }
.oferta { padding: 1.3rem 1.1rem; }
.plano__precos a { align-items: center; }
}
/* Quem pede menos movimento recebe a mesa pronta, sem teatro. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.carta__voo, .carta__flip, .tiragem, .botao { transition-duration: .01ms !important; transition-delay: 0ms !important; }
.carta__ordem--acao { transition: none; }
.nota { animation: none; }
.leitura__estado { animation: none; }
.aguardo__baralho i { animation: none; }
.aguardo__baralho i:nth-child(2) { transform: rotate(-12deg); }
.aguardo__baralho i:nth-child(3) { transform: rotate(10deg); }
.aguardo__linha span { animation: none; width: 100%; opacity: .5; }
.aguardo-fixo { transition: none; }
.aguardo-fixo i { animation: none; }
.oferta { animation: none; }
.pix__estado { animation: none; }
}