nativo, sem JS
========================================================================== */
.pura-faq { border-top: 1px solid var(--pura-line); }
.pura-faq__item { border-bottom: 1px solid var(--pura-line); }
.pura-faq__item summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
padding-block: 1.15rem;
cursor: pointer;
font-size: clamp(1rem, 1.9vw, 1.1rem);
font-weight: 500;
color: var(--pura-deep);
line-height: 1.45;
transition: color 0.2s ease;
}
/* O triângulo padrão do navegador não é estilizável e aparece diferente em cada
um. Tirado nos dois dialetos: `list-style` cobre Chrome/Firefox, o
pseudo-elemento `::-webkit-details-marker` cobre o Safari. */
.pura-faq__item summary { list-style: none; }
.pura-faq__item summary::-webkit-details-marker { display: none; }
.pura-faq__item summary:hover { color: var(--pura-teal-3); }
.pura-faq__item summary:focus-visible {
outline: 2px solid var(--pura-teal-2);
outline-offset: 3px;
border-radius: 2px;
}
/* Sinal de + que vira − quando abre. Feito com dois traços em vez de texto: não
depende de fonte e fica alinhado em qualquer tamanho de tela. */
.pura-faq__sinal {
position: relative;
flex: 0 0 auto;
width: 0.85rem;
height: 0.85rem;
margin-top: 0.35rem;
transition: transform 0.25s ease;
}
.pura-faq__sinal::before,
.pura-faq__sinal::after {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 1.5px;
background: var(--pura-teal-3);
}
.pura-faq__sinal::after { transform: rotate(90deg); }
.pura-faq__item[open] .pura-faq__sinal { transform: rotate(45deg); }
.pura-faq__item[open] summary { color: var(--pura-teal-3); }
/* `.pura p { margin: 0 }` tem a mesma especificidade que `.pura-faq__resposta p`
e venceria por ordem se este arquivo mudasse de posição. O `.pura` na frente
garante a margem independente disso. */
.pura-faq__resposta { padding: 0 0 1.4rem; max-width: 46rem; }
.pura .pura-faq__resposta p {
margin: 0;
font-size: clamp(0.95rem, 1.7vw, 1.03rem);
line-height: 1.7;
color: var(--pura-mute);
}
.pura .pura-faq__rodape {
margin-top: 2rem;
font-size: 0.95rem;
color: var(--pura-mute);
}
.pura-faq__rodape a {
color: var(--pura-teal);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
}
.pura-faq__rodape a:hover { color: var(--pura-teal-3); }
/* ===========================================================================
SAINT MICHEL — Ilha Pura
Landing page /saint-michel · view: pages/ilha_pura/saint_michel.html.erb
TODA classe é prefixada com `.sm`. O application.css faz `require_tree .`,
então este arquivo entra no mesmo bundle global das outras LPs — sem prefixo,
uma página quebraria o layout da outra.
Paleta: VINHO. Medida no logo oficial do empreendimento (o fundo do wordmark
no book é #853035 e o wordmark em si, #8B3D36). As irmãs já ocupam o teal
(Elos e Pura), o bronze (Oro) e o grafite (Astra) — o vinho deixa o Saint
Michel reconhecível na vitrine, onde os cinco aparecem lado a lado.
Tipografia: Albert Sans (design system do Ilha Pura). Títulos em peso 200.
=========================================================================== */
.sm {
--sm-deep: #4A1B20; /* vinho escuro — seções escuras */
--sm-wine: #853035; /* a cor do logo — botões e destaques */
--sm-rose: #E8C6C4; /* claro — texto de apoio sobre fundo escuro */
--sm-cream: #F0F0F0; /* neutro claro do portal — seções alternadas */
--sm-paper: #FFFFFF;
--sm-ink: #323232; /* texto e títulos */
--sm-mute: #6B6B6B; /* texto secundário */
--sm-linha: #E2E2E2;
/* Rodapé compartilhado (shared/_rodape_lp) — cada LP pinta o seu. */
--rlp-fundo: #3A1418;
--rlp-texto: #E8C6C4;
--rlp-linha: rgba(255,255,255,.14);
--rlp-fraco: #B98F8C;
font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
color: var(--sm-ink);
background: var(--sm-paper);
line-height: 1.6;
}
/* Resets escopados, todos dentro de :where().
⚠️ Isto NÃO é firula. Escrito como `.sm p { margin: 0 0 1rem }`, o reset tem
uma classe + um elemento e VENCE qualquer regra de componente de uma classe
só (`.sm-ana__assina { margin-top: 2rem }`) — a margem simplesmente não
acontece, sem erro nenhum aparecer. Foi o que quebrou três coisas de uma vez
nesta página: a foto do hero vazando para fora (`height: auto` vencendo
`height: 100%`), o botão da oferta branco sobre branco (`color: inherit`
vencendo a cor do botão) e a assinatura colada no último item da lista.
`:where()` tem especificidade ZERO: o reset passa a valer (0,1,0) e qualquer
regra de componente escrita depois ganha dele naturalmente. */
.sm :where(h1, h2, h3) { margin: 0 0 .5em; font-weight: 200; letter-spacing: -.02em; line-height: 1.15; }
.sm :where(h1) { font-size: clamp(2rem, 5.2vw, 3.6rem); }
.sm :where(h2) { font-size: clamp(1.7rem, 3.6vw, 2.9rem); }
.sm :where(h3) { font-size: 1.15rem; font-weight: 500; letter-spacing: 0; }
.sm :where(p) { margin: 0 0 1rem; }
.sm :where(ul) { margin: 0; padding: 0; list-style: none; }
.sm :where(img) { max-width: 100%; height: auto; display: block; }
/* Sem isto o card de foto fica estreito e desalinhado — gotcha já pago caro. */
.sm :where(figure) { margin: 0; }
.sm :where(a) { color: inherit; }
/* --- Estrutura ---------------------------------------------------------- */
.sm-wrap { width: min(1160px, 92vw); margin-inline: auto; }
.sm-wrap--narrow { width: min(760px, 92vw); }
.sm-sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.sm-sec--cream { background: var(--sm-cream); }
.sm-sec--dark { background: var(--sm-deep); color: var(--sm-rose); }
.sm-sec--dark h2, .sm-sec--dark h3 { color: #fff; }
.sm-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sm-head--light p { color: var(--sm-rose); }
.sm-eyebrow {
margin: 0 0 .75rem; font-size: .78rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--sm-wine);
}
.sm-sec--dark .sm-eyebrow { color: var(--sm-rose); }
.sm-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--sm-mute); }
.sm-sec--dark .sm-lead { color: var(--sm-rose); }
/* --- Botões ------------------------------------------------------------- */
.sm-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: .85rem 1.6rem;
border: 1px solid transparent; border-radius: 999px;
font-size: .98rem; font-weight: 600; text-decoration: none;
transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.sm-btn:hover { transform: translateY(-1px); }
.sm-btn:focus-visible { outline: 3px solid var(--sm-rose); outline-offset: 3px; }
.sm-btn--primary { background: var(--sm-wine); color: #fff; }
.sm-btn--primary:hover { background: var(--sm-deep); }
.sm-btn--claro { background: #fff; color: var(--sm-deep); }
.sm-btn--claro:hover { background: var(--sm-rose); }
.sm-btn--ghost {
background: rgba(255,255,255,.1); color: #fff;
border-color: rgba(255,255,255,.6); backdrop-filter: blur(2px);
}
.sm-btn--ghost:hover { background: rgba(255,255,255,.2); }
/* --- 1 · Hero ----------------------------------------------------------- */
.sm-hero {
position: relative; isolation: isolate;
min-height: min(92vh, 780px);
display: flex; align-items: flex-end;
padding: clamp(2rem, 6vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
color: #fff;
}
/* O `height: 100%` aqui é o que segura a foto dentro do hero. Se ela voltar a
assumir a altura natural, reaparece a faixa de imagem sem escurecimento entre
o topo e a seção seguinte — foi assim que o defeito apareceu no ar. */
.sm-hero__bg {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
}
/* O escurecimento existe para o texto branco ter contraste em cima da foto.
Antes era UM gradiente vertical terminando em .90: o pé do hero virava uma
faixa quase preta — sumia a piscina e ficava pesado colado na barra vinho da
seção seguinte.
Agora são DOIS gradientes sobrepostos. O horizontal escurece só o lado
esquerdo, que é onde o texto mora; o vertical faz o resto. Assim o pé da
foto clareia bastante do meio para a direita (a água aparece) SEM perder
contraste embaixo das letras.
Medido no render, sobre a parte mais clara da foto: onde fica o texto, a
opacidade efetiva é ~.72 — a mesma de antes. Na direita, cai para ~.60.
Se for mexer, meça de novo: clarear o lado esquerdo apaga o texto. */
.sm-hero__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(90deg,
rgba(40,12,15,.55) 0%,
rgba(40,12,15,.45) 45%,
rgba(40,12,15,.12) 80%,
rgba(40,12,15,0) 100%),
linear-gradient(180deg,
rgba(40,12,15,.22) 0%,
rgba(40,12,15,.38) 45%,
rgba(40,12,15,.55) 80%,
rgba(40,12,15,.60) 100%);
}
/* No celular o texto ocupa a largura toda — o gradiente lateral deixaria a
ponta direita das frases sem fundo. Aqui volta a ser só vertical. */
@media (max-width: 860px) {
.sm-hero__scrim {
background: linear-gradient(180deg,
rgba(40,12,15,.32) 0%,
rgba(40,12,15,.50) 45%,
rgba(40,12,15,.68) 80%,
rgba(40,12,15,.74) 100%);
}
}
.sm-hero__inner { width: min(1160px, 92vw); margin-inline: auto; }
.sm-hero__anim { max-width: 62ch; }
.sm-hero__logo { width: clamp(200px, 22vw, 260px); height: auto; margin-bottom: 1.4rem; }
/* --sm-rose foi medido para fundo chapado escuro. Sobre foto, no texto miúdo,
ele fica abaixo de 4,5:1 mesmo com o scrim. Este tom é o mesmo rosa, só que
mais claro, e vale apenas dentro do hero. */
.sm-hero { --sm-rose-foto: #F3DAD8; }
.sm-hero__place {
margin: 0 0 1rem; font-size: .8rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase; color: var(--sm-rose-foto);
}
.sm-hero__place span { margin: 0 .4rem; opacity: .6; }
.sm-hero__title { color: #fff; margin-bottom: 1rem; }
.sm-hero__title em { font-style: normal; color: var(--sm-rose); }
.sm-hero__lead { font-size: clamp(1rem, 1.7vw, 1.2rem); color: #F6EAE9; max-width: 54ch; }
.sm-hero__lead strong { color: #fff; font-weight: 600; }
.sm-hero__facts {
display: grid; gap: .9rem 2rem; margin: 1.8rem 0 2rem;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.sm-hero__fact { display: flex; flex-direction: column; gap: .15rem; }
.sm-hero__fact-k { font-size: 1.05rem; font-weight: 600; color: #fff; }
.sm-hero__fact-v { font-size: .85rem; color: var(--sm-rose-foto); }
.sm-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
/* --- 2 · Oferta --------------------------------------------------------- */
.sm-oferta { background: var(--sm-wine); color: #fff; padding: clamp(3rem, 7vw, 5rem) 0; }
.sm-oferta__box { width: min(760px, 92vw); margin-inline: auto; text-align: center; }
.sm-oferta__tag {
margin: 0 0 .8rem; font-size: .78rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--sm-rose);
}
.sm-oferta h2 { color: #fff; }
.sm-oferta h2 strong { font-weight: 600; }
.sm-oferta__texto { color: #F6EAE9; max-width: 56ch; margin-inline: auto; }
.sm-oferta__prazo { font-size: .85rem; color: var(--sm-rose); margin-bottom: 1.6rem; }
/* --- 3 · Números -------------------------------------------------------- */
.sm-numeros {
display: grid; gap: 1.2rem;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.sm-numero {
display: flex; flex-direction: column; gap: .2rem;
padding: 1.6rem; border: 1px solid var(--sm-linha); border-radius: 14px;
}
.sm-numero__n { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 200; color: var(--sm-wine); line-height: 1; }
.sm-numero__l { font-size: 1rem; font-weight: 600; }
.sm-numero__d { font-size: .88rem; color: var(--sm-mute); }
/* --- 4 · O prédio ------------------------------------------------------- */
/* A aérea dos cinco edifícios é uma panorâmica 2,5:1 (959x383). Numa coluna
lateral ela saía com uns 250 px de altura ao lado de um bloco de texto quase
três vezes mais alto — parecia miniatura e desequilibrava a seção. Agora o
texto se divide em duas colunas e a foto ocupa a largura inteira embaixo,
que é o formato que a panorâmica pede. Não volte para `auto-fit` aqui: com
três filhos, a 1160 px cabem TRÊS colunas e sobra uma vazia. */
.sm-split {
display: grid; gap: clamp(1.8rem, 4vw, 2.8rem) clamp(2rem, 5vw, 3.5rem);
align-items: start;
}
@media (min-width: 860px) {
.sm-split { grid-template-columns: 1.05fr .95fr; }
}
.sm-split__foto { grid-column: 1 / -1; }
.sm-split__foto img { width: 100%; }
.sm-predio { display: grid; gap: .9rem; align-content: start; }
.sm-predio li { display: flex; flex-direction: column; gap: .1rem; padding-left: 1.6rem; position: relative; }
.sm-predio li::before {
content: ""; position: absolute; left: 0; top: .6em;
width: .6rem; height: .6rem; border-radius: 50%; background: var(--sm-wine);
}
.sm-predio strong { font-weight: 600; }
.sm-predio span { font-size: .92rem; color: var(--sm-mute); }
.sm-split__foto figcaption { margin-top: .8rem; font-size: .88rem; color: var(--sm-mute); }
/* --- 5 · Lazer ---------------------------------------------------------- */
.sm-momento { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sm-momento:last-child { margin-bottom: 0; }
.sm-momento__texto { max-width: 62ch; margin-bottom: 1.5rem; }
.sm-momento__texto h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 200; color: var(--sm-wine); }
.sm-momento__texto p { margin: 0; color: var(--sm-mute); }
/* --- Galerias ----------------------------------------------------------- */
.sm-galeria {
display: grid; gap: 1.2rem;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.sm-galeria--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.sm-card { border-radius: 14px; overflow: hidden; background: var(--sm-cream); }
.sm-sec--cream .sm-card { background: var(--sm-paper); }
.sm-card__zoom {
display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
background: none; line-height: 0;
}
.sm-card__zoom:focus-visible { outline: 3px solid var(--sm-wine); outline-offset: -3px; }
.sm-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Planta é desenho técnico: cortar em 3/2 esconde cômodo. Cabe inteira, com
folga branca em volta. */
.sm-card--planta img { aspect-ratio: auto; object-fit: contain; background: #fff; padding: .6rem; }
.sm-card figcaption { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem; }
.sm-card figcaption strong { font-weight: 600; font-size: 1rem; }
.sm-card figcaption span { font-size: .88rem; color: var(--sm-mute); }
/* --- 6 · Diferenciais do apartamento ------------------------------------ */
.sm-difs { margin-top: clamp(2rem, 4vw, 3rem); }
.sm-difs h3 { margin-bottom: 1rem; }
.sm-difs ul {
display: grid; gap: .7rem 2rem;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.sm-difs li { position: relative; padding-left: 1.6rem; color: var(--sm-mute); font-size: .95rem; }
.sm-difs li::before {
content: ""; position: absolute; left: 0; top: .55em;
width: .55rem; height: .55rem; border-radius: 50%; background: var(--sm-wine);
}
/* --- 7 · Unidades ------------------------------------------------------- */
.sm-tipos {
display: grid; gap: 1.2rem;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.sm-tipo {
padding: 1.8rem; border-radius: 14px; background: var(--sm-paper);
border: 1px solid var(--sm-linha);
display: flex; flex-direction: column; gap: .3rem;
}
.sm-tipo__nome { margin: 0; font-size: 1.3rem; font-weight: 500; color: var(--sm-ink); }
.sm-tipo__area { margin: 0; font-size: 1.55rem; font-weight: 200; color: var(--sm-wine); }
.sm-tipo__ed { margin: 0; font-size: .88rem; font-weight: 600; color: var(--sm-ink); }
.sm-tipo__nota { margin: 0; font-size: .88rem; color: var(--sm-mute); }
.sm-plantas__titulo { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.2rem; font-size: 1.3rem; }
.sm-tipos__nota { margin-top: 1.6rem; color: var(--sm-mute); font-size: .95rem; }
.sm-tipos__nota a { color: var(--sm-wine); font-weight: 600; }
/* --- 9 · Localização ---------------------------------------------------- */
/* Duas colunas fixas, não auto-fit: são 10 lugares, e em duas colunas dá 5 e 5,
sem sobra. Com auto-fit a tela larga abre uma terceira coluna e a última fica
pela metade. */
.sm-locais { display: grid; gap: .1rem 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
.sm-locais { grid-template-columns: 1fr 1fr; }
}
.sm-local {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: .9rem 0; border-bottom: 1px solid var(--sm-linha);
}
.sm-local__nome { font-weight: 500; }
.sm-local__tempo { color: var(--sm-wine); font-weight: 600; white-space: nowrap; }
.sm-locais__nota { margin-top: 1.4rem; font-size: .85rem; color: var(--sm-mute); }
/* --- 10 · Acessibilidade ------------------------------------------------ */
.sm-acesso {
display: grid; gap: 1.2rem;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.sm-acesso__item {
padding: 1.5rem; border-radius: 14px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.sm-acesso__item h3 { color: #fff; margin-bottom: .3rem; }
.sm-acesso__item p { margin: 0; font-size: .92rem; color: var(--sm-rose); }
/* --- 11 · Ficha, sustentabilidade e segurança --------------------------- */
/* A seção era duas colunas lado a lado: ficha à esquerda, sustentabilidade e
segurança à direita. Com 12 linhas de um lado e dois blocos curtos do outro,
a direita acabava ~300 px antes e sobrava um buraco no canto — a Ana
apontou em 19/08/2026.
Agora são três faixas de largura inteira, empilhadas: título, ficha em duas
colunas, e os três blocos embaixo. Nenhuma coluna precisa "dar conta" de
igualar a altura da outra, então acrescentar item não desequilibra nada. */
.sm-ficha__grid {
display: grid; grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 3rem);
align-items: start;
}
/* O gap do grid já separa o título da tabela; a margem do .sm-head somaria em
cima disso e abriria um vão grande demais. */
.sm-ficha__grid .sm-head { margin-bottom: 0; }
.sm-ficha { margin: 0; display: grid; gap: 0 clamp(2rem, 4vw, 3.5rem); }
/* `grid-auto-flow: column` preenche a primeira coluna inteira antes de passar
para a segunda (1–6, depois 7–12), em vez de zigue-zaguear. Com as linhas do
grid declaradas, as duas colunas compartilham a mesma altura de linha e as
bordas ficam alinhadas horizontalmente.
⚠️ `--sm-ficha-linhas` vem do ERB, calculado a partir do tamanho da lista.
Sem ele o padrão é 6; se a ficha mudar de tamanho e a variável não vier
junto, nasce uma terceira coluna do nada. */
@media (min-width: 900px) {
.sm-ficha {
grid-template-columns: 1fr 1fr;
grid-auto-flow: column;
grid-template-rows: repeat(var(--sm-ficha-linhas, 6), auto);
}
}
.sm-ficha__blocos { display: grid; gap: clamp(1.8rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .sm-ficha__blocos { grid-template-columns: repeat(3, 1fr); } }
.sm-ficha__blocos .sm-bloco { margin-bottom: 0; }
.sm-bloco li strong { font-weight: 600; color: var(--sm-ink); }
.sm-ficha__linha {
display: flex; flex-wrap: wrap; gap: .3rem 1rem;
padding: .8rem 0; border-bottom: 1px solid var(--sm-linha);
}
.sm-ficha dt { flex: 0 0 190px; font-weight: 600; font-size: .92rem; }
.sm-ficha dd { flex: 1 1 220px; margin: 0; color: var(--sm-mute); font-size: .92rem; }
.sm-bloco { margin-bottom: 2rem; }
.sm-bloco:last-child { margin-bottom: 0; }
.sm-bloco h3 { color: var(--sm-wine); }
.sm-bloco ul { display: grid; gap: .55rem; }
.sm-bloco li { position: relative; padding-left: 1.6rem; color: var(--sm-mute); font-size: .95rem; }
.sm-bloco li::before {
content: ""; position: absolute; left: 0; top: .55em;
width: .55rem; height: .55rem; border-radius: 50%; background: var(--sm-wine);
}
/* --- 12 · Por que falar com a Ana ---------------------------------------
Mesma anatomia da seção nas outras LPs: foto quadrada de um lado, razões e
assinatura do outro. */
.sm-ana { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .sm-ana { grid-template-columns: 0.8fr 1fr; } }
.sm-ana__fig img {
width: 100%; max-width: 420px;
border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover;
}
.sm-ana__razoes { display: grid; gap: 1rem; margin-top: 1.75rem; }
.sm-ana__razoes li { display: flex; gap: .75rem; align-items: flex-start; }
.sm-ana__razoes p { margin: 0; font-size: .95rem; color: var(--sm-mute); }
.sm-ana__dot {
flex: 0 0 auto; width: 8px; height: 8px; margin-top: .5rem;
border-radius: 50%; background: var(--sm-wine);
}
.sm-ana__assina {
margin-top: 1.75rem; margin-bottom: 1.25rem;
font-size: .88rem; font-weight: 500; color: var(--sm-deep);
}
/* --- 13 · FAQ ----------------------------------------------------------- */
.sm-faq { display: grid; gap: .6rem; }
.sm-faq__item { background: var(--sm-paper); border: 1px solid var(--sm-linha); border-radius: 12px; }
.sm-faq__item summary {
cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
font-weight: 500; min-height: 48px;
}
.sm-faq__item summary::-webkit-details-marker { display: none; }
.sm-faq__item summary:focus-visible { outline: 3px solid var(--sm-wine); outline-offset: -3px; }
.sm-faq__sinal { flex: none; width: 14px; height: 14px; position: relative; }
.sm-faq__sinal::before,
.sm-faq__sinal::after {
content: ""; position: absolute; inset: 50% 0 auto 0;
height: 2px; background: var(--sm-wine); transition: transform .18s ease;
}
.sm-faq__sinal::after { transform: rotate(90deg); }
.sm-faq__item[open] .sm-faq__sinal::after { transform: rotate(0deg); }
.sm-faq__resposta { padding: 0 1.3rem 1.2rem; }
.sm-faq__resposta p { margin: 0; color: var(--sm-mute); }
.sm-faq__rodape { margin-top: 1.6rem; color: var(--sm-mute); font-size: .95rem; }
.sm-faq__rodape a { color: var(--sm-wine); font-weight: 600; }
/* --- 14 · CTA + formulário ---------------------------------------------- */
.sm-cta__grid {
display: grid; gap: clamp(2rem, 5vw, 3.5rem);
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
align-items: start;
}
.sm-cta__texto h2 { color: #fff; }
.sm-cta__flag {
display: inline-block; padding: .5rem .9rem; border-radius: 999px;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
font-size: .88rem; color: #fff;
}
.sm-cta__assina { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .15rem; }
.sm-cta__assina strong { color: #fff; font-size: 1.05rem; font-weight: 600; }
.sm-cta__assina span { font-size: .88rem; color: var(--sm-rose); }
.sm-form {
background: var(--sm-paper); color: var(--sm-ink);
padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: 16px;
display: grid; gap: .9rem;
}
.sm-form h3 { margin: 0 0 .3rem; font-size: 1.25rem; font-weight: 500; }
.sm-form label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 500; }
.sm-form__opt { color: var(--sm-mute); font-weight: 400; }
.sm-form input,
.sm-form select,
.sm-form textarea {
width: 100%; min-height: 48px; padding: .7rem .9rem;
border: 1px solid var(--sm-linha); border-radius: 10px;
font: inherit; font-size: 1rem; color: var(--sm-ink); background: #fff;
}
.sm-form textarea { min-height: 96px; resize: vertical; }
.sm-form input:focus-visible,
.sm-form select:focus-visible,
.sm-form textarea:focus-visible {
outline: 3px solid var(--sm-wine); outline-offset: 1px; border-color: var(--sm-wine);
}
.sm-form__submit { width: 100%; margin-top: .3rem; }
.sm-form__fine { margin: 0; font-size: .8rem; color: var(--sm-mute); }
/* --- Lightbox ----------------------------------------------------------- */
.sm-lb {
position: fixed; inset: 0; z-index: 60;
display: grid; place-items: center; padding: 4vmin;
background: rgba(26,8,10,.93);
}
.sm-lb[hidden] { display: none; }
.sm-lb figure { max-width: min(1100px, 92vw); }
.sm-lb img { max-height: 78vh; width: auto; margin-inline: auto; border-radius: 8px; background: #fff; }
.sm-lb figcaption { margin-top: .9rem; text-align: center; color: #F6EAE9; font-size: .92rem; }
.sm-lb__close {
position: absolute; top: 2vmin; right: 2vmin;
width: 48px; height: 48px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1);
color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.sm-lb__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* --- Revelação no scroll ------------------------------------------------ */
.sm-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.sm-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.sm-reveal { opacity: 1; transform: none; transition: none; }
.sm-btn { transition: none; }
}
/* --- Telas estreitas ---------------------------------------------------- */
@media (max-width: 520px) {
.sm-hero { min-height: 86vh; }
.sm-hero__logo { width: 170px; }
.sm-hero__actions .sm-btn { width: 100%; }
.sm-local { padding: .8rem 0; }
.sm-ficha dt { flex: 1 1 100%; }
}
/* ===========================================================================
Vitrine dos condomínios do Ilha Pura — componente compartilhado entre as LPs.
Prefixo próprio `.ipc-` (não o da LP), porque a peça é a mesma em todas.
Cada LP ajusta as cores sobrescrevendo as variáveis --ipc-* dentro do seu
próprio seletor. Ver `app/views/shared/_ilhapura_condominios.html.erb`.
=========================================================================== */
.ipc {
--ipc-fundo: #F0F0F0;
--ipc-cartao: #FFFFFF;
--ipc-acento: #1B4A61;
--ipc-escuro: #004964;
--ipc-tinta: #323232;
--ipc-suave: #6B6B6B;
--ipc-linha: #E0E0E0;
padding-block: clamp(3.5rem, 9vw, 7rem);
background: var(--ipc-fundo);
color: var(--ipc-tinta);
}
.ipc *, .ipc *::before, .ipc *::after { box-sizing: border-box; }
.ipc h2, .ipc h3 { margin: 0; font-weight: 400; }
.ipc p { margin: 0; }
.ipc ul { margin: 0; padding: 0; list-style: none; }
.ipc img { max-width: 100%; height: auto; display: block; }
.ipc__wrap {
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.ipc__head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
/* 🚨 TODO `` DESTE COMPONENTE PRECISA DO PREFIXO `.ipc`.
O reset `.ipc p { margin: 0 }` tem especificidade (0,1,1) e vence qualquer
regra de uma classe só (0,1,0). Descoberto em 14/08/2026 numa varredura: as
SEIS margens abaixo estavam escritas e mortas desde que a vitrine nasceu, nas
três LPs ao mesmo tempo — os cards vinham com texto todo grudado.
O componente é compartilhado, então não dá para prefixar com `.oro`/`.elos`/
`.pura`: o `.ipc` é a raiz da própria seção e funciona sob qualquer LP. */
.ipc .ipc__eyebrow {
margin-bottom: 0.9rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ipc-acento);
}
.ipc__head h2 {
font-size: clamp(1.8rem, 4.4vw, 2.9rem);
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--ipc-escuro);
}
.ipc .ipc__lead {
margin-top: 1rem;
font-size: clamp(0.98rem, 1.9vw, 1.1rem);
color: var(--ipc-suave);
max-width: 42rem;
}
.ipc__grid {
display: grid;
gap: clamp(1rem, 2.5vw, 1.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 620px) { .ipc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ipc__grid { grid-template-columns: repeat(3, 1fr); } }
.ipc-card {
display: flex;
flex-direction: column;
background: var(--ipc-cartao);
border: 1px solid var(--ipc-linha);
border-radius: 6px;
overflow: hidden;
}
.ipc-card__foto { position: relative; background: var(--ipc-linha); }
.ipc-card__foto img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
/* O condomínio vendido entra em escala de cinza: continua na vitrine como
histórico do bairro, mas não disputa atenção com quem ainda tem unidade. */
.ipc-card--vendido .ipc-card__foto img { filter: grayscale(1); opacity: .85; }
.ipc-card__tag {
position: absolute;
top: 0.75rem;
left: 0.75rem;
padding: 0.3rem 0.7rem;
border-radius: 3px;
background: var(--ipc-acento);
color: #FFFFFF;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.ipc-card__tag--vendido { background: #6B6B6B; }
.ipc-card__corpo {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.1rem 1.25rem 1.25rem;
}
.ipc-card__corpo h3 {
font-size: 1.25rem;
letter-spacing: -0.01em;
color: var(--ipc-escuro);
}
.ipc .ipc-card__specs {
margin-top: 0.3rem;
font-size: 0.85rem;
color: var(--ipc-suave);
}
.ipc .ipc-card__preco { margin-top: 0.9rem; }
.ipc-card__preco span {
display: block;
font-size: 0.85rem;
color: var(--ipc-suave);
}
.ipc-card__preco--vazio span { font-style: italic; }
.ipc .ipc-card__oferta {
margin-top: 0.75rem;
padding: 0.45rem 0.7rem;
border-left: 3px solid var(--ipc-acento);
background: var(--ipc-fundo);
border-radius: 0 3px 3px 0;
font-size: 0.78rem;
color: var(--ipc-escuro);
}
/* `margin-top:auto` alinha os botões na base mesmo quando um card tem a faixa
da oferta e o vizinho não — sem isso a fileira fica com os botões em alturas
diferentes. */
.ipc-card__btn {
display: flex;
align-items: center;
justify-content: center;
margin-top: auto;
padding-top: 1.1rem;
min-height: 44px;
font-size: 0.88rem;
font-weight: 500;
color: var(--ipc-acento);
text-decoration: none;
}
.ipc-card__btn::after {
content: "→";
margin-left: 0.4rem;
transition: transform .2s ease;
}
.ipc-card__btn:hover { color: var(--ipc-escuro); text-decoration: underline; }
.ipc-card__btn:hover::after { transform: translateX(3px); }
.ipc-card__btn--ghost { color: var(--ipc-suave); }
.ipc-card__btn--ghost::after { content: "♡"; }
.ipc .ipc__nota {
margin-top: clamp(1.5rem, 4vw, 2.25rem);
font-size: 0.76rem;
line-height: 1.6;
color: var(--ipc-suave);
max-width: 44rem;
}
@media (prefers-reduced-motion: reduce) {
.ipc-card__btn::after { transition: none; }
}
/* Aviso de cookies (banner) + Política de privacidade — Grupo Ana Cintra */
/* ---- Aviso de cookies ---- */
.ck{
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
max-width: 960px; margin: 0 auto;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
background: #17322C; color: #F3EFE7;
padding: 16px 20px; border-radius: 10px;
box-shadow: 0 8px 30px rgba(0,0,0,.25);
font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5;
}
.ck[hidden]{ display: none; }
.ck__txt{ margin: 0; flex: 1 1 260px; }
.ck__txt a{ color: #A9D8CB; text-decoration: underline; }
.ck__btn{
flex: 0 0 auto; cursor: pointer; border: 0;
background: #F3EFE7; color: #17322C;
font-weight: 600; font-size: 14px; font-family: inherit;
padding: 10px 22px; border-radius: 100px;
}
.ck__btn:hover{ background: #fff; }
/* ---- Página de política de privacidade ---- */
.priv{
font-family: 'Inter', system-ui, sans-serif;
color: #080808; background: #fff;
min-height: 100vh; padding: 48px 20px 80px;
}
.priv__wrap{ max-width: 760px; margin: 0 auto; }
.priv__back{
display: inline-block; margin-bottom: 24px;
color: #2F6A5C; font-size: 14px; font-weight: 500; text-decoration: none;
}
.priv__back:hover{ text-decoration: underline; }
.priv__title{ font-size: clamp(28px,5vw,40px); font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.priv__upd{ color: #6b7770; font-size: 14px; margin: 0 0 32px; }
.priv p{ font-size: 16px; line-height: 1.7; color: #2b3b36; margin: 0 0 16px; }
.priv__h2{ font-size: 20px; font-weight: 600; margin: 36px 0 12px; color: #17322C; }
.priv__ul{ margin: 0 0 16px; padding-left: 22px; }
.priv__ul li{ font-size: 16px; line-height: 1.7; color: #2b3b36; margin-bottom: 8px; }
.priv a{ color: #2F6A5C; }
.priv strong{ color: #17322C; }
.priv__wrap > .priv__back:last-child{ margin-top: 32px; margin-bottom: 0; }
/* ===========================================================================
Rodapé padrão das landing pages + botão flutuante do WhatsApp.
Compartilhado entre as duas marcas — ver views/shared/_rodape_lp.html.erb.
Prefixo próprio `.rlp-`; cada LP ajusta as cores pelas variáveis --rlp-*.
=========================================================================== */
.rlp {
--rlp-fundo: #0A2C35;
--rlp-texto: #9FB8BF;
--rlp-claro: #FFFFFF;
--rlp-linha: rgba(255, 255, 255, .12);
--rlp-fraco: #7A959D;
padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
background: var(--rlp-fundo);
color: var(--rlp-texto);
}
.rlp *, .rlp *::before, .rlp *::after { box-sizing: border-box; }
.rlp h3 { margin: 0; }
.rlp p { margin: 0; }
.rlp img { max-width: 100%; height: auto; display: block; }
.rlp__wrap {
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.rlp__grid { display: grid; gap: 2rem; }
@media (min-width: 780px) { .rlp__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.rlp__wordmark { width: clamp(140px, 20vw, 190px); margin-bottom: 1.1rem; }
.rlp__nome {
margin-bottom: 1.1rem;
font-size: 1.4rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rlp-claro);
}
.rlp__desc { font-size: 0.85rem; line-height: 1.65; max-width: 26rem; }
.rlp__col h3 {
margin-bottom: 0.9rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rlp-claro);
}
.rlp__links { display: grid; gap: 0.35rem; }
.rlp__links a {
display: flex;
align-items: center;
min-height: 40px; /* alvo de toque; o dedo não erra o link */
font-size: 0.88rem;
color: var(--rlp-texto);
text-decoration: none;
}
.rlp__links a:hover { color: var(--rlp-claro); text-decoration: underline; }
.rlp__gac { width: clamp(150px, 22vw, 200px); margin-bottom: 0.9rem; }
.rlp__creci { font-size: 0.82rem; line-height: 1.6; }
.rlp__creci strong { color: var(--rlp-claro); font-weight: 600; }
/* 🚨 Prefixo `.rlp` obrigatório: é um
, e o reset `.rlp p { margin: 0 }`
(0,1,1) vence a classe sozinha (0,1,0). Este afastamento do texto legal
estava escrito e morto nas três LPs desde que o rodapé nasceu — o aviso legal
ficava colado no bloco de cima. Achado na varredura de 14/08/2026. */
.rlp .rlp__legal {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--rlp-linha);
font-size: 0.75rem;
line-height: 1.6;
color: var(--rlp-fraco);
}
.rlp__legal a { color: var(--rlp-texto); text-decoration: underline; }
.rlp__legal a:hover { color: var(--rlp-claro); }
/* --- Botão flutuante ------------------------------------------------------ */
.rlp-wa {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 52px;
padding: 0.7rem 1.15rem 0.7rem 0.95rem;
border-radius: 999px;
background: #25D366;
color: #FFFFFF;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
transition: background-color .2s ease;
}
.rlp-wa svg { width: 26px; height: 26px; fill: #FFFFFF; flex: 0 0 auto; }
.rlp-wa:hover { background: #1FBB58; }
/* Em telas estreitas o rótulo sai e sobra o ícone: a pílula inteira cobriria
parte do conteúdo justamente onde o polegar rola a página. */
@media (max-width: 420px) {
.rlp-wa { gap: 0; padding: 0; width: 56px; height: 56px; justify-content: center; }
.rlp-wa span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.rlp-wa { transition: none; }
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/