/* ===================================================================
Camada visual da marca.
O navy e a tipografia vêm do theme.json. Aqui entra o que dá
profundidade: horizonte no hero, curvas batimetricas ao fundo,
grão sobre o chapado e o dourado como fio.
=================================================================== */
:root{
--ic-dourado: #A38C62;
--ic-dourado-claro: #C4AC7E;
--ic-borda: rgba(163, 140, 98, .28);
--ic-borda-forte: rgba(163, 140, 98, .55);
--ic-vidro: rgba(18, 49, 79, .55);
}
/* grão sobre o fundo chapado, para não parecer plástico */
body::after{
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("img/grao.png");
background-size: 220px 220px;
opacity: .5;
mix-blend-mode: overlay;
}
body > *{ position: relative; z-index: 2; }
/* -------------------------------------------------------------------
HERO — o horizonte entra por baixo do gradiente
------------------------------------------------------------------- */
.wp-block-cover.alignfull:first-of-type::before{
content: "";
position: absolute;
inset: 0;
background-image: url("img/horizonte.jpg");
background-size: cover;
background-position: center 62%;
opacity: .92;
z-index: 0;
}
/* Duas camadas: a diagonal geral e um véu no canto inferior esquerdo,
onde o texto mora. A filmagem tem espuma clara justamente ali, e sem o
segundo véu o contraste do título cai abaixo do mínimo legível. */
.wp-block-cover.alignfull:first-of-type > .wp-block-cover__background{
/* O has-background-dim-50 do markup joga opacity .5 neste elemento.
Sem anular, todo alfa escrito abaixo vale metade — era por isso
que o véu não segurava o contraste sobre a espuma da filmagem. */
opacity: 1 !important;
background:
linear-gradient(to top right,
rgba(4,14,24,.80) 0%,
rgba(4,14,24,.62) 24%,
rgba(4,14,24,.24) 48%,
rgba(4,14,24,0) 68%),
linear-gradient(105deg,
rgba(6,19,31,.87) 0%,
rgba(6,19,31,.74) 26%,
rgba(6,19,31,.40) 46%,
rgba(10,30,55,.10) 72%,
rgba(10,30,55,.34) 100%)
!important;
z-index: 1;
}
.wp-block-cover.alignfull:first-of-type > .wp-block-cover__inner-container{ z-index: 2; }
/* fio dourado fechando o hero */
.wp-block-cover.alignfull:first-of-type::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%, var(--ic-borda-forte) 22%,
var(--ic-dourado) 50%, var(--ic-borda-forte) 78%, transparent 100%);
z-index: 3;
}
/* -------------------------------------------------------------------
SEÇÕES — curvas batimetricas ao fundo
------------------------------------------------------------------- */
.wp-block-group.alignfull.has-background{ position: relative; overflow: hidden; }
.wp-block-group.alignfull.has-navy-profundo-background-color::before{
content: "";
position: absolute;
inset: -10% -5%;
background-image: url("img/contornos.svg");
background-size: cover;
background-position: center;
opacity: .85;
pointer-events: none;
}
.wp-block-group.alignfull.has-navy-profundo-background-color > *{ position: relative; z-index: 1; }
/* -------------------------------------------------------------------
CARDS — fio dourado no topo, respiro maior, elevação no hover
------------------------------------------------------------------- */
.wp-block-columns .wp-block-column > .wp-block-group.has-background{
position: relative;
overflow: hidden;
padding: clamp(1.5rem, 2.6vw, 2.15rem) !important;
background: var(--ic-vidro) !important;
border: 1px solid rgba(255,255,255,.07);
border-radius: 5px !important;
backdrop-filter: blur(2px);
transition: transform .28s cubic-bezier(.22,.9,.3,1),
border-color .28s ease, box-shadow .28s ease;
height: 100%;
}
.wp-block-columns .wp-block-column > .wp-block-group.has-background::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
var(--ic-dourado) 0%, var(--ic-dourado-claro) 38%, transparent 92%);
opacity: .85;
}
.wp-block-columns .wp-block-column > .wp-block-group.has-background:hover{
transform: translateY(-4px);
border-color: var(--ic-borda);
box-shadow: 0 14px 34px rgba(0,0,0,.34);
}
.wp-block-columns .wp-block-column > .wp-block-group.has-background h3{
margin-bottom: .6rem;
letter-spacing: -.01em;
}
/* card que é link: o título inteiro vira alvo */
.wp-block-columns .wp-block-column > .wp-block-group.has-background h3 a{
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--ic-borda);
padding-bottom: 2px;
transition: border-color .2s ease, color .2s ease;
}
.wp-block-columns .wp-block-column > .wp-block-group.has-background:hover h3 a{
color: var(--ic-dourado-claro);
border-bottom-color: var(--ic-dourado);
}
/* -------------------------------------------------------------------
TÍTULOS DE SEÇÃO — fio de onda por baixo
------------------------------------------------------------------- */
.wp-block-heading.has-text-align-center{
position: relative;
padding-bottom: 1.6rem;
}
.wp-block-heading.has-text-align-center::after{
content: "";
position: absolute;
left: 50%; bottom: 0;
transform: translateX(-50%);
width: min(210px, 42vw);
height: 22px;
background-image: url("img/fio-onda.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: .85;
}
/* -------------------------------------------------------------------
CONFIGURADOR — mesmo vocabulário dos cards
------------------------------------------------------------------- */
.ic-config{
position: relative;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 18px 48px rgba(0,0,0,.32);
background: var(--ic-vidro) !important;
backdrop-filter: blur(3px);
}
.ic-config::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
border-radius: 8px 8px 0 0;
background: linear-gradient(90deg,
transparent 0%, var(--ic-dourado) 26%,
var(--ic-dourado-claro) 50%, var(--ic-dourado) 74%, transparent 100%);
}
.ic-secao > h3{ color: var(--ic-dourado-claro) !important; }
.ic-barco.is-escolhido{ box-shadow: inset 0 0 0 1px #FFCD35, 0 8px 22px rgba(0,0,0,.3); }
/* -------------------------------------------------------------------
RODAPÉ — fio dourado separando do corpo
------------------------------------------------------------------- */
footer.wp-block-group{ position: relative; }
footer.wp-block-group::before{
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent, var(--ic-borda-forte) 30%, var(--ic-borda-forte) 70%, transparent);
}
/* -------------------------------------------------------------------
TABELAS — fio dourado no cabeçalho
------------------------------------------------------------------- */
.wp-block-table table{ border-collapse: collapse; }
.wp-block-table thead th{
border-bottom: 1px solid var(--ic-borda-forte) !important;
color: var(--ic-dourado-claro);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
font-size: .78rem;
}
.wp-block-table td, .wp-block-table th{ border-color: rgba(255,255,255,.09) !important; }
.wp-block-table tbody tr:hover td{ background: rgba(163,140,98,.06); }
/* -------------------------------------------------------------------
BOTÕES — brilho discreto
------------------------------------------------------------------- */
.wp-element-button{
box-shadow: 0 6px 18px rgba(255,205,53,.18);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wp-element-button:hover{
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(255,205,53,.28);
}
.is-style-outline .wp-element-button{ box-shadow: none; }
.is-style-outline .wp-element-button:hover{
box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
@media (prefers-reduced-motion: reduce){
.wp-block-columns .wp-block-column > .wp-block-group.has-background,
.wp-element-button{ transition: none; }
.wp-block-columns .wp-block-column > .wp-block-group.has-background:hover,
.wp-element-button:hover{ transform: none; }
}
/* -------------------------------------------------------------------
LARGURA — colunas usam a medida larga, texto corrido usa a de leitura.
Sem isso os cards ficam com 200px e quebram a cada três palavras.
------------------------------------------------------------------- */
.wp-block-group.alignfull > .wp-block-columns,
.wp-block-group.alignfull > .wp-block-heading,
.wp-block-cover__inner-container > .wp-block-columns{
max-width: var(--wp--style--global--wide-size, 1200px);
margin-left: auto;
margin-right: auto;
width: 100%;
}
.wp-block-group.alignfull > .wp-block-columns{ gap: clamp(1rem, 2vw, 1.75rem); }
/* cards com altura igual, independente do texto */
.wp-block-group.alignfull > .wp-block-columns > .wp-block-column{ display: flex; }
.wp-block-group.alignfull > .wp-block-columns > .wp-block-column > .wp-block-group{ width: 100%; }
/* -------------------------------------------------------------------
VÍDEO DO HERO
O horizonte estático continua como fundo: é o que aparece enquanto
o vídeo carrega, no celular e sob prefers-reduced-motion.
------------------------------------------------------------------- */
.ic-hero-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0;
transition: opacity 1.1s ease;
pointer-events: none;
}
.wp-block-cover.alignfull.tem-video .ic-hero-video{ opacity: .95; }
/* com vídeo rodando, o horizonte estático sai de cena */
.wp-block-cover.alignfull.tem-video::before{ opacity: 0; transition: opacity 1.1s ease; }
@media (prefers-reduced-motion: reduce){
.ic-hero-video{ display: none; }
}
/* No celular o arquivo ja vem cortado em 0,577 — o mesmo aspecto do
hero — entao cobre sem sobra. object-position so importa no tablet,
onde o hero e mais quadrado. */
@media (max-width: 860px){
.ic-hero-video{ object-position: center 42%; }
}
/* -------------------------------------------------------------------
HERO NO CELULAR
Abaixo de 860px o vídeo nem é criado (franquia de dados), então quem
está no 4G via a textura procedural. Entra no lugar uma foto aérea
cortada em retrato: o mar escuro fica embaixo, onde mora o texto, e
a mata e o horizonte ficam em cima. Só uma das duas imagens é
baixada — o navegador não busca background-image sobrescrito.
------------------------------------------------------------------- */
@media (max-width: 860px){
.wp-block-cover.alignfull:first-of-type::before{
/* Corte quadrado: na largura do tablet entra sem upscale. */
background-image: url("img/hero-tablet.jpg");
background-position: center 58%;
opacity: 1;
}
/* O véu diagonal foi desenhado para a espuma da filmagem, que no
celular não existe. Aqui o degradê é vertical e pesa embaixo. */
.wp-block-cover.alignfull:first-of-type > .wp-block-cover__background{
/* O bloco de capa do WordPress joga opacity .5 aqui por conta do
has-background-dim-50 do markup. Sem anular isso, todo alfa
escrito abaixo vale metade — foi o que fez a sobrelinha
dourada reprovar no contraste. */
opacity: 1 !important;
/* Leve e quase uniforme: aqui ele só dá unidade de cor. Quem
garante o contraste é o véu do próprio bloco de texto. */
background:
linear-gradient(to bottom,
rgba(4,14,24,.48) 0%,
rgba(4,14,24,.36) 40%,
rgba(5,16,28,.24) 74%,
rgba(5,16,28,.46) 100%) !important;
}
/* Texto ancorado na base, como no desktop. Antes ele nascia colado
no topo e deixava 480px de foto vazia embaixo. */
.ic-hero.wp-block-cover{
align-items: flex-end;
}
}
/* -------------------------------------------------------------------
MENU E SUBMENU
Três defeitos de uma vez: o submenu vinha branco do tema pai, com
overflow:hidden cortando os itens, e o hero pintava por cima porque
o cabeçalho não tinha contexto de empilhamento próprio.
------------------------------------------------------------------- */
header.wp-block-template-part{
position: relative;
z-index: 60;
}
.wp-block-navigation__submenu-container{
overflow: visible !important;
min-width: 250px;
padding: 8px 0 !important;
background: #0C2540 !important;
border: 1px solid rgba(163,140,98,.30) !important;
border-top: 2px solid var(--ic-dourado) !important;
border-radius: 0 !important;
box-shadow: 0 18px 44px rgba(0,0,0,.46);
z-index: 70 !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content{
display: block;
padding: 11px 20px !important;
color: #FFFEEF !important;
font-size: .92rem;
line-height: 1.35;
text-decoration: none !important;
border-bottom: 0 !important;
transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible{
background: rgba(163,140,98,.14);
color: var(--ic-dourado-claro) !important;
padding-left: 26px !important;
}
/* o item do topo não pode herdar o sublinhado amarelo de link */
.wp-block-navigation .wp-block-navigation-item__content{
text-decoration: none !important;
border-bottom: 0 !important;
}
.wp-block-navigation .wp-block-navigation-item__content:hover{ color: var(--ic-dourado-claro) !important; }
/* o hero recorta o próprio conteúdo, mas não pode recortar o menu */
.wp-block-cover.alignfull{ overflow: hidden; }
/* ===================================================================
HERO — composição aprovada: texto embaixo à esquerda, barra de
credibilidade colada no rodapé.
=================================================================== */
.ic-hero.wp-block-cover{
align-items: flex-end;
justify-content: flex-start;
padding: 0 !important;
}
.ic-hero > .wp-block-cover__inner-container{
width: 100%;
max-width: none !important;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 88vh;
}
/* bloco de texto */
.ic-hero-texto{
width: 100%;
max-width: 1312px;
margin: 0 auto;
/* Respiro em cima e embaixo. Antes era 0 no topo e tudo na base: em
janela baixa (laptop 768, celular) o conteúdo preenche o hero e a
sobrelinha encostava no menu — 36px de folga no celular. */
padding: clamp(1.75rem, 5vh, 64px) clamp(1.25rem, 4vw, 64px) clamp(1.75rem, 5vh, 64px);
}
.ic-hero-texto > *{ max-width: 680px; margin-left: 0; margin-right: 0; }
.ic-chip-temporada{
width: fit-content;
margin: 0 0 28px !important;
letter-spacing: .02em;
}
/* fio dourado + sobrelinha */
.ic-fio-titulo{ gap: 14px !important; align-items: center; margin: 0 0 22px !important; }
.ic-fio-titulo > *{ margin: 0 !important; }
.ic-fio{ width: 44px; height: 1px; background: var(--ic-dourado); flex: none; }
.ic-titulo-hero{
margin: 0 !important;
line-height: .99 !important;
letter-spacing: -.025em !important;
font-weight: 200 !important;
}
.ic-titulo-hero strong{ font-weight: 400; }
.ic-linha-hero{
margin: 26px 0 0 !important;
max-width: 486px;
line-height: 1.66 !important;
}
.ic-botoes-hero{ margin-top: 40px !important; gap: 14px !important; }
/* barra de credibilidade */
.ic-credibilidade{
width: 100%;
max-width: none !important;
border-top: 1px solid rgba(163,140,98,.30);
background: rgba(6,19,31,.60);
backdrop-filter: blur(3px);
}
.ic-credibilidade > .wp-block-columns{
max-width: 1312px;
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 64px);
gap: 0 !important;
}
.ic-credibilidade .wp-block-column{
padding: 24px 30px;
border-right: 1px solid rgba(163,140,98,.20);
}
.ic-credibilidade .wp-block-column:first-child{ padding-left: 0; }
.ic-credibilidade .wp-block-column:last-child{ padding-right: 0; border-right: 0; }
.ic-cred-num{
margin: 0 !important;
font-family: var(--wp--preset--font-family--titulo);
font-weight: 300;
font-size: 1.75rem;
line-height: 1;
color: var(--wp--preset--color--branco);
}
.ic-cred-rot{
margin: 5px 0 0 !important;
font-size: .75rem;
line-height: 1.45;
color: rgba(255,254,239,.60);
}
.ic-cred-aviso{
margin: 0 !important;
font-size: .78rem;
line-height: 1.5;
color: rgba(255,254,239,.82);
padding-left: 20px;
position: relative;
}
.ic-cred-aviso::before{
content: "";
position: absolute;
left: 0; top: .45em;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--wp--preset--color--amarelo);
}
.ic-cred-aviso strong{ color: var(--wp--preset--color--amarelo); font-weight: 600; }
@media (max-width: 900px){
.ic-credibilidade > .wp-block-columns{ flex-wrap: wrap !important; }
.ic-credibilidade .wp-block-column{
flex-basis: 50% !important;
padding: 18px 20px !important;
border-right: 0;
border-bottom: 1px solid rgba(163,140,98,.16);
}
.ic-credibilidade .ic-cred-temporada{ flex-basis: 100% !important; border-bottom: 0; }
.ic-hero-texto > *{ max-width: none; }
}
/* Os três números numa linha só valem já no tablet: empilhados, a barra
media 337px e empurrava tudo para fora da dobra. */
@media (max-width: 860px){
.ic-credibilidade .wp-block-column:not(.ic-cred-temporada){
flex: 1 1 0 !important;
}
.ic-credibilidade .wp-block-column{
padding: 13px 8px !important;
border-bottom: 0;
border-right: 1px solid rgba(163,140,98,.18);
text-align: left;
}
.ic-credibilidade .wp-block-column:first-child{ padding-left: 0 !important; }
.ic-credibilidade .ic-cred-temporada{
flex-basis: 100% !important;
border-right: 0;
border-top: 1px solid rgba(163,140,98,.18);
padding: 11px 0 !important;
}
.ic-cred-num{ font-size: clamp(1.35rem, 3.4vw, 1.75rem); }
.ic-cred-rot{ font-size: clamp(.64rem, 1.5vw, .78rem); line-height: 1.35; }
}
/* Abaixo de 600px o hero é retrato de verdade (390x676): o corte
quadrado do tablet perderia as bordas. */
@media (max-width: 600px){
.wp-block-cover.alignfull:first-of-type::before{
background-image: url("img/hero-celular.jpg");
background-position: center 70%;
}
}
/* Os véus acima foram calibrados para as fotos, que são claras. A
filmagem já entra escura no recorte do celular (57 de 255 no pior
quadro, medido em 8 quadros), então com vídeo o véu recua — senão o
hero vira um retângulo preto. Precisa vir depois dos outros: empata
em especificidade com eles. */
/* Orçamento de altura do hero no celular: 680px úteis em 844 de janela.
Com 40px de folga no topo, o que entra ali sai da base e do intervalo
até a barra — senão a barra volta a cair fora da dobra. */
@media (max-width: 860px){
.ic-hero-texto{
padding-top: 40px;
padding-bottom: 28px;
}
.ic-credibilidade{ margin-top: 14px !important; }
.ic-botoes-hero{ margin-top: 28px !important; }
.ic-linha-hero{ margin-top: 20px !important; }
}
/* O véu que garante o contraste no celular e no tablet mora no PRÓPRIO
bloco de texto, não no hero.
Motivo: com stops em % do hero, o véu só acerta se o texto estiver
sempre na mesma altura — e não está. Em janela baixa o conteúdo
preenche o hero e o texto fica no alto; em janela alta ele encosta na
base. Medido: 10%–55% do hero no celular contra 41%–78% no tablet.
Um gradiente fixo servia a um e reprovava o outro. Como background do
bloco de texto, o véu acompanha o texto onde quer que ele caia. */
@media (max-width: 860px){
.ic-hero-texto{
background: linear-gradient(to bottom,
rgba(4,14,24,0) 0%,
rgba(4,14,24,.58) 9%,
rgba(4,14,24,.66) 50%,
rgba(4,14,24,.60) 86%,
rgba(4,14,24,.18) 100%);
}
}
/* O hero ocupa o que sobra da janela depois de tudo que vem acima dele,
para a barra de credibilidade cair exatamente na dobra. O desconto vem
de `--ic-acima`, que o JS mede — antes eram três números fixos, e cada
ajuste de cabeçalho os deixava errados. O valor no fallback é o que
vale sem JS. */
.ic-hero.wp-block-cover{
min-height: calc(100svh - var(--ic-acima, 150px)) !important;
}
/* Janela baixa (laptop de 768) é o caso em que o conteúdo do hero não
cabe no que sobra da tela e empurra a barra de credibilidade para
fora. O critério aqui é altura, não largura — um laptop de 1366×768
tem largura de sobra e altura nenhuma. */
@media (max-height: 820px) and (min-width: 861px){
.ic-hero-texto{ padding-block: clamp(1rem, 3vh, 32px); }
.ic-linha-hero{ margin-top: 18px !important; }
.ic-botoes-hero{ margin-top: 26px !important; }
.ic-fio-titulo{ margin-bottom: 16px !important; }
}
.ic-hero > .wp-block-cover__inner-container{ min-height: 0; }
/* ===================================================================
PÁGINA DE ROTEIRO — composição aprovada no canvas de design.
=================================================================== */
.ic-capa{
position:relative; margin-inline:calc(50% - 50cqw) !important; width:100cqw;
min-height:430px; display:flex; align-items:flex-end;
/* --ic-capa-img: imagem própria da página, passada no style do bloco.
Sem ela, cai na textura gerada — é o que vale enquanto a página não
tem imagem. --ic-capa-pos permite reenquadrar sem gerar outro arquivo. */
background:
/* Os alfas viraram variaveis para a pagina poder aliviar o veu sem
mexer nas outras capas. Os padroes sao os valores originais, entao
quem nao declara nada continua exatamente como estava. O .97 do pe
ficou redundante quando o veu do bloco de texto passou a existir:
os dois somados dao navy solido e a foto some. */
linear-gradient(180deg,
rgba(6,19,31,var(--ic-capa-veu-topo, .72)) 0%,
rgba(6,19,31,var(--ic-capa-veu-meio, .28)) 45%,
rgba(10,30,55,var(--ic-capa-veu-pe, .97)) 100%),
var(--ic-capa-img, url("img/horizonte.jpg"))
var(--ic-capa-pos, center 42%)/cover no-repeat;
padding:0 0 52px;
}
/* Com foto no lugar da textura, a base precisa de mais véu: o texto e a
ficha moram ali e a foto pode ser clara. */
/* Véu que acompanha o texto, não a capa — mesma lição do hero: gradiente
com stops em % do container só acerta se o texto ficar sempre na mesma
altura, e a altura do bloco muda com a janela. Medido com uma capa
propositalmente clara, o véu da capa sozinho deixava a migalha em
1,4:1. Aqui ele nasce onde o texto nasce. */
.ic-capa[style*="--ic-capa-img"] .ic-capa__interno{
/* O padding no topo existe para o gradiente ter onde nascer: sem ele a
migalha cai na parte transparente e fica em 1,4:1. A conta do alfa
saiu da medição — sobre fundo claro o dourado da migalha precisa de
~0,74 para chegar aos 4,5:1 de AA. */
padding-top: 46px;
/* Este e o veu DOMINANTE da capa: ele cobre a largura toda na metade de
baixo, entao mexer so no gradiente da base quase nao muda nada. Virou
variavel pelo mesmo motivo — padroes iguais aos originais. */
background: linear-gradient(to bottom,
rgba(6,19,31,0) 0%,
rgba(6,19,31,var(--ic-capa-texto-a, .80)) 22%,
rgba(6,19,31,var(--ic-capa-texto-b, .84)) 60%,
rgba(6,19,31,var(--ic-capa-texto-c, .90)) 100%);
}
.ic-capa[style*="--ic-capa-img"]{
background:
linear-gradient(180deg, rgba(6,19,31,.58) 0%, rgba(6,19,31,.30) 38%,
rgba(8,24,42,.88) 76%, rgba(10,30,55,.97) 100%),
var(--ic-capa-img) var(--ic-capa-pos, center 50%)/cover no-repeat,
/* terceira camada: a textura gerada fica por baixo. Se a imagem da
página ainda não existir no servidor, a capa não fica vazia — o
fallback do var() não cobre esse caso, porque a variável está
definida, só o arquivo é que falta. */
url("img/horizonte.jpg") center 42%/cover no-repeat;
min-height:clamp(380px, 46vh, 520px);
}
.ic-capa__interno{
width:100%; margin:0 auto;
padding-inline: max(clamp(1.25rem, 4vw, 64px), calc((100cqw - 1312px) / 2));
}
.ic-migalha{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
font-size:.74rem; color:rgba(255,254,239,.58); margin-bottom:20px;
}
.ic-migalha span:last-child{ color:var(--ic-dourado-claro); }
.ic-capa__titulo{
margin:0; font-family:var(--wp--preset--font-family--titulo); font-weight:200;
font-size:clamp(2.4rem,5.4vw,4.1rem); line-height:1; letter-spacing:-.025em;
color:#FFFEEF;
}
/* Segunda linha do titulo da capa: o descritor do servico, como a cliente
nomeia ("Passeio de Barco e Jipe 4x4"). Fica no proprio h1 para o nome do
produto continuar sendo um titulo so, e subordinado para nao disputar com
ele. Em em, entao acompanha o clamp do titulo em qualquer largura. */
.ic-capa__titulo small{
display: block;
margin-top: .34em;
font-size: .255em;
font-weight: 300;
letter-spacing: .012em;
line-height: 1.3;
color: rgba(255,254,239,.74);
}
.ic-capa__linha{
margin:18px 0 0; max-width:540px; font-size:1.02rem; line-height:1.66;
color:rgba(255,254,239,.74);
}
.ic-ficha{
position:absolute; right:clamp(1.25rem,4vw,64px); bottom:52px;
display:flex; border:1px solid rgba(163,140,98,.34); background:rgba(6,19,31,.70);
backdrop-filter:blur(4px);
}
.ic-ficha__cel{ padding:16px 24px; border-right:1px solid rgba(163,140,98,.24); }
.ic-ficha__cel:last-child{ border-right:0; }
.ic-ficha__rot{
display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
color:#8FA6B8; margin-bottom:6px;
}
/* No celular a ficha flutuante nao cabe em 390px e empilha em 266px de
altura, empurrando a capa para 447 — metade da tela so de cabecalho de
pagina. Vira faixa de tres colunas colada na base, como a barra de
credibilidade do hero. Isso tambem deixa a capa mais panoramica, o que
importa: quanto mais quadrada a caixa, menos sobra da imagem gerada. */
@media (max-width: 720px){
/* a capa e flex-row: com a ficha saindo do absolute, ela viraria item
ao lado do texto. Em coluna, ela cai embaixo, que e onde deve ficar. */
.ic-capa{ padding-bottom:0; flex-direction:column; justify-content:flex-end; }
.ic-capa[style*="--ic-capa-img"], .ic-capa{ min-height:clamp(280px, 34vh, 360px); }
.ic-capa__interno{ padding-bottom:18px; margin-top:auto; }
.ic-ficha{
position:static; right:auto; bottom:auto;
width:100%; border-left:0; border-right:0; border-bottom:0;
}
.ic-ficha__cel{ flex:1 1 0; padding:11px 10px; min-width:0; }
.ic-ficha__cel:first-child{ padding-left:clamp(1.25rem,4vw,64px); }
.ic-ficha__cel:last-child{ padding-right:clamp(1.25rem,4vw,64px); }
.ic-ficha__rot{ font-size:.55rem; letter-spacing:.13em; margin-bottom:3px; }
.ic-ficha__val{ font-size:.92rem; }
/* A faixa de ficha encosta no navy da pagina e o corte fica seco. Fio
dourado de fecho, o mesmo recurso do hero e do topo dos cartoes. */
.ic-capa{ border-bottom:1px solid rgba(163,140,98,.34); }
}
.ic-ficha__val{
font-family:var(--wp--preset--font-family--titulo); font-weight:300; font-size:1.2rem;
color:#FFFEEF;
}
.ic-ficha__val.destaque{ color:var(--wp--preset--color--amarelo); font-weight:400; }
.ic-corpo{
display:grid; grid-template-columns:1fr 400px; gap:64px;
max-width:1312px; margin:64px auto 0; padding:0 clamp(1.25rem,4vw,64px);
}
.ic-corpo > div > *:first-child{ margin-top:0; }
/* trilha do percurso */
.ic-trilha{ list-style:none; margin:0; padding:0; }
.ic-ponto{ display:grid; grid-template-columns:44px 1fr; gap:22px; }
.ic-ponto__eixo{ display:flex; flex-direction:column; align-items:center; }
.ic-ponto__marca{
width:7px; height:7px; border-radius:50%; background:var(--ic-dourado);
flex:none; margin-top:9px;
}
.ic-ponto__marca.is-inicio{
width:11px; height:11px; background:var(--wp--preset--color--amarelo); margin-top:7px;
}
.ic-ponto__marca.is-fim{
width:11px; height:11px; background:var(--wp--preset--color--navy);
box-shadow:inset 0 0 0 2px var(--wp--preset--color--amarelo); margin-top:7px;
}
.ic-ponto__fio{ width:1px; flex:1; background:rgba(163,140,98,.35); }
.ic-ponto:last-child .ic-ponto__fio{ display:none; }
.ic-ponto__corpo{ padding-bottom:26px; }
.ic-ponto:last-child .ic-ponto__corpo{ padding-bottom:0; }
.ic-ponto__nome{
display:block; font-family:var(--wp--preset--font-family--titulo); font-weight:400;
font-size:1.24rem; color:#FFFEEF;
}
.ic-ponto__det{
display:block; margin-top:4px; font-size:.84rem; line-height:1.6;
color:rgba(255,254,239,.56);
}
.ic-ponto__det.is-destaque{ color:var(--wp--preset--color--amarelo); }
.ic-nota-operacao{
margin:44px 0 0; padding:20px 24px; border-left:2px solid var(--ic-dourado);
background:rgba(163,140,98,.07); font-size:.86rem; line-height:1.7;
color:rgba(255,254,239,.72);
}
/* painel lateral */
.ic-painel{
background:#0C2540; border:1px solid rgba(163,140,98,.26);
border-top:2px solid var(--ic-dourado); padding:28px;
}
.ic-painel__rot{
display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
color:#8FA6B8; margin-bottom:20px;
}
/* As embarcações da página de roteiro são ESCOLHA, não vitrine.
Até 17/09/2026 o primeiro cartão vinha com a borda amarela fixa
(`is-melhor`, herança do mockup) e nenhum era clicável: a cliente leu o
destaque como seleção e achou que o site estava travado. Agora o
visitante escolhe, a borda acompanha, e o botão leva a escolha para o
configurador — ver o script em `functions.php`.
O gap subiu de 10 para 14 px para caber o selo apoiado na borda. */
.ic-opcoes{ display:flex; flex-direction:column; gap:14px; }
.ic-opcao{
position:relative;
display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding:16px 18px; background:var(--wp--preset--color--navy);
border:1px solid rgba(255,254,239,.09);
transition:border-color .18s ease, box-shadow .18s ease;
}
/* Só vira alvo de clique quando o script assumiu o cartão. Sem JS ele
continua informativo, e cursor de mão num elemento morto é mentira. */
.ic-opcao[role="radio"]{ cursor:pointer; }
.ic-opcao[role="radio"]:not(.is-escolhida):hover{ border-color:rgba(163,140,98,.55); }
.ic-opcao[role="radio"]:focus-visible{ outline:2px solid #FFCD35; outline-offset:3px; }
/* O tema pai pinta um contorno em QUALQUER foco, com a cor do texto — num
toque isso vira um anel branco em volta do cartão escolhido, que já tem a
borda amarela e o selo. Quem navega por teclado continua com o contorno
acima; quem toca, não. */
.ic-opcao[role="radio"]:focus:not(:focus-visible){ outline:none; }
.ic-opcao.is-escolhida{
border-color:var(--wp--preset--color--amarelo);
box-shadow:0 0 0 1px rgba(255,205,53,.30);
}
/* Mesmo selo do configurador, para as duas telas falarem a mesma língua.
Apoiado SOBRE a borda, e não dentro do cartão: o canto superior direito
é onde mora o "a partir de". */
.ic-opcao.is-escolhida::after{
content:"Escolhida"; position:absolute; top:0; right:14px;
transform:translateY(-50%);
padding:3px 9px; background:#FFCD35; color:#0A1E37;
font-size:.56rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
line-height:1.5;
}
.ic-opcao__nome{
display:block; font-family:var(--wp--preset--font-family--titulo); font-size:1.05rem;
color:#FFFEEF;
}
.ic-opcao__meta{ display:block; font-size:.74rem; color:rgba(255,254,239,.48); margin-top:2px; }
.ic-opcao__preco{
font-family:var(--wp--preset--font-family--titulo); font-weight:300; font-size:1.42rem;
color:#FFFEEF; white-space:nowrap;
}
.ic-opcao:not(.is-escolhida) .ic-opcao__preco{ color:rgba(255,254,239,.76); }
.ic-painel__cta{
display:flex; align-items:center; justify-content:center; gap:11px;
margin-top:24px; padding:16px; background:var(--wp--preset--color--amarelo);
color:var(--wp--preset--color--navy); font-size:.78rem; font-weight:600;
letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
border-bottom:0 !important; transition:background .18s ease, transform .18s ease;
}
.ic-painel__cta:hover{
background:#FFFEEF; transform:translateY(-2px); color:var(--wp--preset--color--navy);
}
.ic-aquadeck{ margin-top:16px; padding:24px; border:1px solid rgba(163,140,98,.22); }
.ic-aquadeck__rot{
display:flex; align-items:center; gap:10px; font-size:.64rem; letter-spacing:.2em;
text-transform:uppercase; color:var(--ic-dourado-claro); margin-bottom:12px;
}
.ic-aquadeck__nome{
display:block; font-family:var(--wp--preset--font-family--titulo); font-size:1.2rem;
margin-bottom:8px; color:#FFFEEF;
}
.ic-aquadeck__texto{ margin:0; font-size:.85rem; line-height:1.66; color:rgba(255,254,239,.60); }
.ic-aquadeck__preco{
display:block; margin-top:14px; font-family:var(--wp--preset--font-family--titulo);
font-size:1.1rem; color:#FFFEEF;
}
.ic-aquadeck__preco em{ font-style:normal; font-size:.76rem; color:rgba(255,254,239,.48); }
.ic-aquadeck__link{ display:inline-block; margin-top:12px; font-size:.82rem; }
/* ===================================================================
PÁGINA DE EMBARCAÇÃO
=================================================================== */
.ic-topo-barco{
/* A coluna de texto precisa somar a MARGEM do site + o espaco do
conteudo. Antes era 520px fixos com o padding-left tentando alinhar
pela margem: em 1920 o padding comia 304px dos 520 e sobravam 160
para o titulo; em 2560 sobrava zero e o nome do barco quebrava
letra a letra. */
--ic-margem: max(clamp(1.25rem, 4vw, 64px), calc(50cqw - 656px));
display:grid;
grid-template-columns: minmax(0, calc(520px + var(--ic-margem))) 1fr;
min-height:500px;
margin-inline:calc(50% - 50cqw) !important; width:100cqw;
}
.ic-topo-barco__texto{
display:flex; flex-direction:column; min-width:0;
padding:64px clamp(1.5rem,3vw,56px) 56px var(--ic-margem);
}
.ic-topo-barco__sobre{
font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--ic-dourado-claro); margin-bottom:16px;
}
.ic-topo-barco__titulo{
margin:0; font-family:var(--wp--preset--font-family--titulo); font-weight:200;
font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1; letter-spacing:-.025em; color:#FFFEEF;
}
/* quebra no ponto certo: "Ilhabela." em cima, o nome do barco embaixo.
Solto, o navegador quebrava em "Ilhabela.Cl / II". */
.ic-topo-barco__titulo strong{ font-weight:400; display:block; }
.ic-topo-barco__titulo{ text-wrap:balance; }
.ic-topo-barco__linha{
margin:22px 0 0; font-size:1rem; line-height:1.7; color:rgba(255,254,239,.70);
}
.ic-topo-barco__preco{
margin:auto 0 0; padding-top:40px; display:flex; align-items:baseline;
gap:13px; flex-wrap:wrap;
}
.ic-topo-barco__preco span{ font-size:.8rem; color:rgba(255,254,239,.55); }
.ic-topo-barco__preco strong{
font-family:var(--wp--preset--font-family--titulo); font-weight:300; font-size:2.5rem;
line-height:1; color:var(--wp--preset--color--amarelo);
}
/* Com imagem do modelo, ela entra por baixo do mesmo véu que já existia.
A legenda vira obrigatória no markup — ver topo_embarcacao(). */
.ic-topo-barco__foto[style*="--ic-barco-img"]{
background:
linear-gradient(90deg, var(--wp--preset--color--navy) 0%,
rgba(10,30,55,.34) 24%, rgba(10,30,55,0) 56%),
var(--ic-barco-img) center/cover no-repeat !important;
}
.ic-topo-barco__foto{
position:relative;
background:
linear-gradient(90deg, var(--wp--preset--color--navy) 0%, rgba(10,30,55,.32) 26%, rgba(10,30,55,0) 60%),
url("img/horizonte.jpg") center/cover no-repeat;
}
.ic-selo-foto{
position:absolute; left:30px; bottom:24px; padding:6px 13px;
background:rgba(6,19,31,.74); border:1px solid rgba(163,140,98,.40);
font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
color:rgba(255,254,239,.80);
}
.ic-espec{
display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
max-width:1312px; margin:0 auto; padding:0 clamp(1.25rem,4vw,64px);
border-top:1px solid rgba(163,140,98,.24); border-bottom:1px solid rgba(163,140,98,.24);
}
.ic-espec__cel{ padding:28px 24px; border-right:1px solid rgba(163,140,98,.16); }
.ic-espec__cel:first-child{ padding-left:0; }
.ic-espec__cel:last-child{ padding-right:0; border-right:0; }
.ic-espec__rot{
display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
color:#8FA6B8; margin-bottom:9px;
}
.ic-espec__val{
font-family:var(--wp--preset--font-family--titulo); font-weight:300; font-size:1.5rem;
color:#FFFEEF;
}
.ic-espec__val em{
font-style:normal; font-size:.86rem; color:rgba(255,254,239,.58); margin-left:5px;
}
.ic-duas{
display:grid; grid-template-columns:1fr 1fr; gap:64px;
max-width:1312px; margin:64px auto 0; padding:0 clamp(1.25rem,4vw,64px);
}
.ic-fio-secao{ display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.ic-fio-secao i{ width:44px; height:1px; background:var(--ic-dourado); flex:none; }
.ic-fio-secao em{
font-style:normal; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--ic-dourado-claro);
}
.ic-bordo{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 26px;
}
.ic-bordo li{
display:flex; align-items:center; gap:12px; padding:13px 0;
border-bottom:1px solid rgba(255,254,239,.07); font-size:.9rem; color:#FFFEEF;
}
.ic-bordo svg{ color:var(--ic-dourado); flex:none; }
.ic-rot-lista{ list-style:none; margin:0; padding:0; }
.ic-rot-lista li{
display:flex; align-items:baseline; justify-content:space-between; gap:16px;
padding:15px 0; border-bottom:1px solid rgba(255,254,239,.07); font-size:.94rem;
}
.ic-rot-lista li:last-child{ border-bottom:0; }
.ic-rot-lista em{
font-style:normal; color:rgba(255,254,239,.44); font-size:.8rem; margin-left:6px;
}
.ic-rot__preco{
font-family:var(--wp--preset--font-family--titulo); font-weight:300; font-size:1.2rem;
white-space:nowrap;
}
@media (max-width:1040px){
.ic-corpo, .ic-duas{ grid-template-columns:1fr; gap:44px; }
.ic-topo-barco{ grid-template-columns:1fr; }
.ic-topo-barco__texto{ padding:48px clamp(1.25rem,4vw,64px) 40px; }
.ic-topo-barco__foto{ min-height:280px; }
.ic-espec{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.ic-espec__cel{ border-bottom:1px solid rgba(163,140,98,.14); }
}
@media (max-width:700px){
/* a ficha da capa e tratada no bloco de 720px, mais acima: la ela vira
faixa de tres colunas. As duas regras que ficavam aqui empilhavam em
50% e venciam por ordem. */
.ic-bordo{ grid-template-columns:1fr; }
.ic-espec{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
.ic-painel__cta{ transition:none; }
.ic-painel__cta:hover{ transform:none; }
}
/* -------------------------------------------------------------------
SANGRIA — o layout restrito impõe max-width nos filhos; estes blocos
precisam romper isso para ocupar a largura da janela.
------------------------------------------------------------------- */
.entry-content > .ic-capa,
.entry-content > .ic-topo-barco,
.entry-content > .ic-espec,
.entry-content > .ic-corpo,
.entry-content > .ic-duas,
.entry-content > .ic-fotos,
.ic-capa, .ic-topo-barco, .ic-espec, .ic-corpo, .ic-duas, .ic-fotos{
/* Sem soltar o max-width aqui, o `width: 100cqw` da regra seguinte não
vale nada: o tema pai limita todo filho de `is-layout-constrained` ao
contentSize de 740px, e o bloco fica com a sangria da margem negativa
mas a largura do miolo. Foi o que aconteceu com `.ic-fotos`. */
max-width: none !important;
}
/* Todos os blocos de conteúdo sangram e centralizam o miolo pela mesma
fórmula. Assim capa e corpo alinham na mesma coluna, em qualquer
largura, sem depender do padding que o tema pai aplica no pai. */
.ic-espec, .ic-corpo, .ic-duas, .ic-fotos{
/* border-box é obrigatório aqui: com content-box o padding soma à
largura de 100cqw e o bloco estoura 40px no celular. */
box-sizing: border-box;
width: 100cqw;
margin-inline: calc(50% - 50cqw) !important;
/* 100cqw, não 100%: em padding-inline a porcentagem resolve contra o
pai, que já vem limitado ao contentSize — dava 58px contra os 64
das capas, e as duas colunas não batiam. */
padding-inline: max(clamp(1.25rem, 4vw, 64px), calc((100cqw - 1312px) / 2)) !important;
}
.ic-capa, .ic-topo-barco, .ic-capa-texto, .ic-larga,
.ic-capa__interno, .ic-capa-texto__interno, .ic-larga__interno{
box-sizing: border-box;
}
/* O bloco de site vira contexto de contêiner: 100cqw mede a largura útil,
sem contar a barra de rolagem — é o que evita o estouro do 100vw. */
.wp-site-blocks{ container-type:inline-size; overflow-x:clip; }
/* ===================================================================
PÁGINAS INSTITUCIONAIS — Sobre, FAQ, Contato, Cancelamento.
Mesmo vocabulário das outras telas: fio dourado, capa sangrada,
duas colunas onde faz sentido.
=================================================================== */
/* ---- capa simples, sem foto ---- */
/* Com imagem, a capa de texto se comporta como a de roteiro: foto por
baixo e véu ancorado no bloco de texto, calibrado no mesmo teste. */
.ic-capa-texto[style*="--ic-capa-img"]{
background:
/* O gradiente de base tem de continuar aqui. Sem ele a foto ficava
crua no padding da capa — 63px em cima e 46 embaixo, fora do véu
do bloco de texto, e a imagem "vazava" numa faixa dura. */
linear-gradient(180deg,
rgba(6,19,31,.42) 0%,
rgba(6,19,31,.30) 34%,
rgba(8,24,42,.72) 78%,
rgba(10,30,55,.96) 100%),
var(--ic-capa-img) var(--ic-capa-pos, center 50%)/cover no-repeat,
url("img/horizonte.jpg") center 42%/cover no-repeat !important;
}
.ic-capa-texto[style*="--ic-capa-img"] .ic-capa-texto__interno{
/* Este bloco e mais alto que o da capa de roteiro, entao 22% cai
DEPOIS da migalha e ela ficava em 3,4:1 — reprovando em qualquer
recorte, medido em seis posicoes. O gradiente sobe mais cedo. */
padding-top:52px;
background:linear-gradient(to bottom,
rgba(6,19,31,0) 0%,
rgba(6,19,31,.78) 9%,
rgba(6,19,31,.82) 34%,
rgba(6,19,31,.88) 100%);
}
.ic-capa-texto{
margin-inline:calc(50% - 50cqw) !important; width:100cqw; max-width:none !important;
padding:clamp(3rem,7vh,72px) 0 clamp(2.5rem,5vh,56px);
border-bottom:1px solid rgba(163,140,98,.24);
background:linear-gradient(180deg, #06131F 0%, var(--wp--preset--color--navy) 100%);
}
.ic-capa-texto__interno{
margin:0 auto; padding-inline: max(clamp(1.25rem, 4vw, 64px), calc((100cqw - 1312px) / 2));
}
.ic-capa-texto__sobre{
display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.ic-capa-texto__sobre i{ width:44px; height:1px; background:var(--ic-dourado); flex:none; }
.ic-capa-texto__sobre em{
font-style:normal; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
color:var(--ic-dourado-claro);
}
.ic-capa-texto h1{
margin:0; font-family:var(--wp--preset--font-family--titulo); font-weight:200;
font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.02; letter-spacing:-.025em;
color:#FFFEEF;
}
.ic-capa-texto h1 strong{ font-weight:400; }
.ic-capa-texto__linha{
margin:22px 0 0; max-width:620px; font-size:1.06rem; line-height:1.7;
color:rgba(255,254,239,.72);
}
/* ---- FAQ ---- */
.ic-faq{
max-width:840px; margin:56px auto 0; padding:0 clamp(1.25rem,4vw,64px);
}
.ic-faq details{
border-bottom:1px solid rgba(255,254,239,.09);
}
.ic-faq details[open]{ background:rgba(163,140,98,.045); }
.ic-faq summary{
display:flex; align-items:flex-start; gap:16px; padding:22px 4px;
cursor:pointer; list-style:none;
font-family:var(--wp--preset--font-family--titulo); font-weight:400;
font-size:1.14rem; line-height:1.4; color:#FFFEEF;
transition:color .18s ease;
}
.ic-faq summary::-webkit-details-marker{ display:none; }
.ic-faq summary:hover{ color:var(--ic-dourado-claro); }
.ic-faq summary:focus-visible{ outline:2px solid var(--wp--preset--color--amarelo); outline-offset:2px; }
.ic-faq summary::after{
content:""; margin-left:auto; flex:none; width:13px; height:13px; margin-top:7px;
border-right:1.5px solid var(--ic-dourado); border-bottom:1.5px solid var(--ic-dourado);
transform:rotate(45deg); transition:transform .22s ease;
}
.ic-faq details[open] summary::after{ transform:rotate(-135deg); }
.ic-faq__resposta{
margin:0; padding:0 40px 24px 4px; font-size:.98rem; line-height:1.75;
color:rgba(255,254,239,.72);
}
.ic-faq__marca{
display:inline-block; margin-left:10px; padding:2px 8px; border-radius:2px;
font-family:var(--wp--preset--font-family--texto); font-size:.6rem;
font-weight:600; letter-spacing:.1em; text-transform:uppercase;
vertical-align:middle;
}
.ic-faq__marca.is-pendente{
background:rgba(255,205,53,.16); color:var(--wp--preset--color--amarelo);
box-shadow:inset 0 0 0 1px rgba(255,205,53,.4);
}
/* ---- blocos do Sobre ---- */
.ic-sobre-blocos{
display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px 56px;
max-width:1312px; margin:56px auto 0; padding:0 clamp(1.25rem,4vw,64px);
}
.ic-sobre-bloco{ padding:26px 0; border-top:1px solid rgba(163,140,98,.22); }
.ic-sobre-bloco h2{
margin:0 0 10px; font-family:var(--wp--preset--font-family--titulo);
font-weight:400; font-size:1.28rem; letter-spacing:-.01em; color:#FFFEEF;
}
.ic-sobre-bloco p{ margin:0; font-size:.95rem; line-height:1.75; color:rgba(255,254,239,.68); }
.ic-sobre-numeros{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
max-width:1312px; margin:56px auto 0; padding:0 clamp(1.25rem,4vw,64px);
border-top:1px solid rgba(163,140,98,.24); border-bottom:1px solid rgba(163,140,98,.24);
}
.ic-sobre-numeros div{ padding:28px 26px; border-right:1px solid rgba(163,140,98,.16); }
.ic-sobre-numeros div:first-child{ padding-left:0; }
.ic-sobre-numeros div:last-child{ padding-right:0; border-right:0; }
.ic-sobre-numeros b{
display:block; font-family:var(--wp--preset--font-family--titulo); font-weight:200;
font-size:2.6rem; line-height:1; color:#FFFEEF;
}
.ic-sobre-numeros span{
display:block; margin-top:8px; font-size:.82rem; color:rgba(255,254,239,.58);
}
/* ---- Contato ---- */
.ic-contato{
display:grid; grid-template-columns:1fr 1fr; gap:56px;
max-width:1312px; margin:56px auto 0; padding:0 clamp(1.25rem,4vw,64px);
}
.ic-canal{
display:flex; align-items:center; gap:18px; padding:22px 24px;
background:#0C2540; border:1px solid rgba(163,140,98,.24);
text-decoration:none; border-bottom:1px solid rgba(163,140,98,.24) !important;
transition:border-color .18s ease, transform .18s ease;
}
.ic-canal + .ic-canal{ margin-top:12px; }
.ic-canal:hover{ border-color:var(--ic-dourado) !important; transform:translateY(-2px); }
.ic-canal__icone{
width:44px; height:44px; flex:none; display:grid; place-items:center;
border:1px solid rgba(163,140,98,.34); color:var(--ic-dourado-claro);
}
.ic-canal__rot{
display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
color:#8FA6B8; margin-bottom:4px;
}
.ic-canal__val{
display:block; font-family:var(--wp--preset--font-family--titulo); font-size:1.16rem;
color:#FFFEEF;
}
.ic-canal__nota{ display:block; margin-top:3px; font-size:.76rem; color:rgba(255,254,239,.50); }
.ic-saidas{ margin-top:2px; }
.ic-saida{
padding:20px 0; border-bottom:1px solid rgba(255,254,239,.08);
}
.ic-saida b{
display:block; font-family:var(--wp--preset--font-family--titulo); font-weight:400;
font-size:1.16rem; color:#FFFEEF; margin-bottom:5px;
}
.ic-saida span{ font-size:.88rem; line-height:1.6; color:rgba(255,254,239,.60); }
/* ---- Política de cancelamento ---- */
.ic-aviso-forte{
max-width:840px; margin:48px auto 0; padding:24px 28px;
border-left:3px solid var(--wp--preset--color--amarelo);
background:rgba(255,205,53,.09);
font-size:.98rem; line-height:1.72; color:#FFFEEF;
}
.ic-topicos{
max-width:840px; margin:40px auto 0; padding:0 clamp(1.25rem,4vw,64px);
list-style:none;
}
.ic-topicos li{ padding:24px 0; border-top:1px solid rgba(163,140,98,.22); }
.ic-topicos b{
display:block; font-family:var(--wp--preset--font-family--titulo); font-weight:400;
font-size:1.2rem; color:#FFFEEF; margin-bottom:8px;
}
.ic-topicos span{ font-size:.95rem; line-height:1.75; color:rgba(255,254,239,.68); }
@media (max-width:820px){
.ic-sobre-blocos, .ic-contato{ grid-template-columns:1fr; gap:0; }
.ic-contato{ gap:44px; }
.ic-sobre-numeros{ grid-template-columns:1fr; }
.ic-sobre-numeros div{ padding:20px 0; border-right:0; border-bottom:1px solid rgba(163,140,98,.16); }
.ic-sobre-numeros div:last-child{ border-bottom:0; }
.ic-faq__resposta{ padding-right:4px; }
}
@media (prefers-reduced-motion:reduce){
.ic-faq summary::after, .ic-canal{ transition:none; }
.ic-canal:hover{ transform:none; }
}
/* ===================================================================
RODAPÉ — quatro colunas, links agrupados por assunto.
Antes usava o menu principal, que vinha com submenus e espremia
os contatos até se sobreporem.
=================================================================== */
.ic-rodape-grade{
display:grid;
grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr));
gap:48px;
max-width:1312px;
margin:0 auto;
padding:0 clamp(1.25rem,4vw,64px);
}
.ic-rodape-logo{
display:block;
width:186px; height:49px;
color:#FFFEEF;
-webkit-mask:url("img/logo.svg") no-repeat left center/contain;
mask:url("img/logo.svg") no-repeat left center/contain;
background-color:currentColor;
/* o texto continua no HTML, para leitor de tela e para o caso de a
máscara não carregar */
text-indent:-9999px; overflow:hidden; white-space:nowrap;
}
/* ---------------------------------------------------------------
MARCA NO CABEÇALHO
O logo entra por máscara CSS, não por ![]()
: assim um arquivo só
serve o cabeçalho navy e qualquer fundo claro, com a cor vindo do
CSS. Não existe versão negativa da marca — foi preciso gerar.
--------------------------------------------------------------- */
.ic-marca{
display:flex; align-items:center;
color:#FFFEEF;
text-decoration:none;
flex:none;
}
.ic-marca__desenho{
display:block;
width:clamp(148px, 15vw, 196px);
aspect-ratio:1000 / 262;
-webkit-mask:url("img/logo.svg") no-repeat center/contain;
mask:url("img/logo.svg") no-repeat center/contain;
background-color:currentColor;
transition:opacity .2s ease;
}
.ic-marca:hover .ic-marca__desenho{ opacity:.82; }
.ic-marca:focus-visible{ outline:2px solid var(--wp--preset--color--amarelo); outline-offset:6px; }
/* o título de texto do tema pai sai de cena onde a marca desenhada entra */
.ic-cabecalho .wp-block-site-title{ display:none; }
@media (max-width: 600px){
.ic-marca__desenho{ width:134px; }
}
.ic-rodape-marca p{
margin:14px 0 0;
max-width:34ch;
font-size:.85rem;
line-height:1.7;
color:rgba(255,254,239,.58);
}
.ic-rodape-col{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.ic-rodape-rot{
font-size:.64rem;
letter-spacing:.2em;
text-transform:uppercase;
color:#8FA6B8;
margin-bottom:4px;
}
.ic-rodape-col a{
font-size:.88rem;
line-height:1.4;
color:rgba(255,254,239,.78);
text-decoration:none;
border-bottom:1px solid transparent !important;
transition:color .18s ease, border-color .18s ease;
}
.ic-rodape-col a:hover{
color:var(--ic-dourado-claro);
border-bottom-color:var(--ic-dourado) !important;
}
.ic-rodape-nota{
margin-top:6px;
font-size:.78rem;
line-height:1.55;
color:rgba(255,254,239,.46);
}
.ic-rodape-base{
max-width:1312px;
margin:48px auto 0;
padding:22px clamp(1.25rem,4vw,64px) 0;
border-top:1px solid rgba(163,140,98,.22);
text-align:center;
font-size:.75rem;
color:rgba(255,254,239,.46);
}
@media (max-width:980px){
.ic-rodape-grade{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px; }
.ic-rodape-marca{ grid-column:1 / -1; }
}
@media (max-width:560px){
.ic-rodape-grade{ grid-template-columns:1fr; gap:34px; }
}
@media (prefers-reduced-motion:reduce){
.ic-rodape-col a{ transition:none; }
}
/* Menu do topo: uma linha só, com folga.
Com 8 itens a 20px e vão de 24px não sobrava espaço em 1440. */
header .wp-block-navigation{ font-size:.95rem; }
header .wp-block-navigation__container{ flex-wrap:nowrap !important; gap:20px !important; }
header .wp-block-navigation-item__content{ white-space:nowrap; }
@media (max-width:1200px){
header .wp-block-navigation{ font-size:.88rem; }
header .wp-block-navigation__container{ gap:15px !important; }
}
/* ===================================================================
PÁGINAS DE CATEGORIA — capa, grade de cartões e blocos de destaque.
O fio dourado no topo do cartão é o mesmo recurso já usado no resto
do site: estrutura, não enfeite.
=================================================================== */
/* Faixa larga das páginas de categoria. Sem isto, a capa sangra até a
borda e a grade fica presa no contentSize do theme.json — os dois
blocos apareciam desalinhados, um começando 233px depois do outro. */
.ic-larga{
margin-inline: calc(50% - 50cqw) !important;
width: 100cqw;
max-width: none !important;
padding: clamp(2.5rem, 5vh, 56px) 0 0;
}
.ic-larga__interno{
margin: 0 auto;
padding-inline: max(clamp(1.25rem, 4vw, 64px), calc((100cqw - 1312px) / 2));
}
/* Ritmo vertical da faixa. O fio de seção abre um bloco novo, então
respira mais que o resto. */
.ic-larga__interno > * + *{ margin-top: 32px; }
.ic-larga__interno > * + .ic-fio-secao{ margin-top: 60px; }
.ic-larga__interno > .ic-exp{
max-width: 760px;
font-size: 1rem;
line-height: 1.78;
color: rgba(255,254,239,.72);
}
.entry-content > .ic-larga,
.entry-content > .ic-aqua,
.ic-aqua{ max-width: none !important; }
.ic-grade{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
gap: 1px;
background: rgba(163,140,98,.20);
border: 1px solid rgba(163,140,98,.20);
margin-top: 8px;
}
/* Faixa com um ou dois cartoes. Com `auto-fit` as trilhas vazias colapsam e
um cartao sozinho estica os 1312px inteiros -- vira uma barra, nao um
cartao. Limitar a faixa e mais simples que trocar para `auto-fill`, que
deixaria celulas vazias com borda a mostra. */
.ic-grade--1{ max-width: 430px; }
.ic-grade--2{ max-width: 876px; }
.ic-cartao{
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 30px 28px 26px;
background: var(--wp--preset--color--navy-profundo, #08192C);
text-decoration: none;
color: inherit;
transition: background .25s ease;
}
.ic-cartao::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--ic-dourado);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.ic-cartao:hover, .ic-cartao:focus-visible{ background: rgba(163,140,98,.07); }
.ic-cartao:hover::before, .ic-cartao:focus-visible::before{ transform: scaleX(1); }
.ic-cartao:focus-visible{ outline: 2px solid var(--wp--preset--color--amarelo); outline-offset: -2px; }
.ic-cartao__rot{
font-size: .68rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ic-dourado-claro);
}
.ic-cartao__titulo{
margin: 0;
font-family: var(--wp--preset--font-family--titulo);
font-weight: 300;
font-size: 1.42rem;
line-height: 1.16;
letter-spacing: -.015em;
color: var(--wp--preset--color--branco, #FFFEEF);
}
.ic-cartao__linha{
margin: 0;
font-size: .9rem;
line-height: 1.68;
color: rgba(255,254,239,.62);
}
.ic-cartao__meta{
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid rgba(163,140,98,.18);
}
.ic-cartao__meta div{ display: flex; flex-direction: column; gap: 3px; }
.ic-cartao__meta span{
font-size: .64rem;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,254,239,.42);
}
.ic-cartao__meta b{
font-family: var(--wp--preset--font-family--titulo);
font-weight: 300;
font-size: 1.05rem;
color: var(--wp--preset--color--branco, #FFFEEF);
}
.ic-cartao__meta b.destaque{ color: var(--ic-dourado-claro); }
/* Faixa de itens — estrutura do Aquadeck, ocasiões de comemoração */
.ic-itens{
/* flex, não grid: com `auto-fit` o número de colunas é fixo e a última
linha fica com buraco — 6 itens em 5 colunas deixavam um sozinho.
Em flex os itens da última linha esticam e fecham a faixa, seja qual
for a quantidade. Vale para Aquadeck, Comemorações e Compartilhados. */
display: flex;
flex-wrap: wrap;
gap: 1px;
background: rgba(163,140,98,.20);
border: 1px solid rgba(163,140,98,.20);
}
.ic-itens > *{ flex: 1 1 220px; min-width: 0; }
.ic-item{
display: flex;
align-items: flex-start;
gap: 14px;
padding: 24px 22px;
background: var(--wp--preset--color--navy-profundo, #08192C);
font-size: .95rem;
line-height: 1.6;
color: rgba(255,254,239,.80);
}
.ic-item i{
width: 7px; height: 7px; margin-top: 8px; flex: none;
border: 1px solid var(--ic-dourado);
transform: rotate(45deg);
}
/* Tabela de valores em fita, não em — funciona no celular */
.ic-precos{ border-top: 1px solid rgba(163,140,98,.30); }
.ic-preco{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
padding: 19px 0;
border-bottom: 1px solid rgba(163,140,98,.16);
}
.ic-preco b{ font-weight: 400; font-size: 1rem; color: var(--wp--preset--color--branco, #FFFEEF); }
.ic-preco em{
font-style: normal;
font-family: var(--wp--preset--font-family--titulo);
font-weight: 300;
font-size: 1.34rem;
color: var(--ic-dourado-claro);
white-space: nowrap;
}
@media (max-width: 600px){
.ic-cartao{ padding: 24px 20px 22px; }
.ic-cartao__titulo{ font-size: 1.28rem; }
}
/* ===================================================================
HOME — faixas com fotografia.
A home tinha 3.696px e nenhuma imagem depois do hero: navy chapado
com cartoes de texto, e nenhum preco na tela, apesar de a tese do
projeto ser publicar valor. Estas faixas resolvem as duas coisas.
=================================================================== */
/* --- roteiros em destaque: foto, nome e o valor de entrada --------- */
/* O tema pai nao aplica box-sizing global, entao todo componente com
padding proprio precisa declarar. Sem isto o cartao de embarcacao
somava 52px de padding a 350 de grade e estourava 32px no celular. */
.ic-dest, .ic-dest__corpo, .ic-barco, .ic-razao, .ic-atalhos,
.ic-aqua__interno, .ic-aqua__preco, .ic-cartao, .ic-item, .ic-preco{
box-sizing: border-box;
}
/* na home a faixa larga ja esta dentro de um grupo com padding proprio */
.ic-larga--home{ padding-top: 0; }
.ic-larga--home .ic-destaques,
.ic-larga--home .ic-razoes,
.ic-larga--home .ic-frota{ margin-top: 0; }
/* titulo de secao da home, no mesmo desenho das capas */
.ic-secao-titulo{
margin: 14px 0 34px;
font-family: var(--wp--preset--font-family--titulo);
font-weight: 200;
font-size: clamp(1.9rem, 4vw, 2.8rem);
line-height: 1.06;
letter-spacing: -.026em;
color: var(--wp--preset--color--branco, #FFFEEF);
}
.ic-secao-titulo strong{ font-weight: 400; }
/* Cinco produtos, cinco cartões. Colunas por faixa, e não `auto-fit`: com
`minmax(252px)` a conta fechava em 4 colunas em toda largura de laptop
(a 1366 a faixa útil é 1257 px, e 5×252+88 pede 1348), então o quinto
cartão caía sozinho numa segunda linha. Nas faixas do meio a grade vai a
3, que fecha 3+2 — melhor que 4+1. Só usado na home. */
.ic-destaques{
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
@media (min-width: 620px){
.ic-destaques{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px){
.ic-destaques{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Só a partir daqui o cartão tem largura para o rodapé "Barco inteiro ·
a partir de R$ 2.190" caber numa linha: 1350 dá 230 px por cartão. */
@media (min-width: 1350px){
.ic-destaques{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.ic-dest{
position: relative;
display: flex;
flex-direction: column;
min-height: 340px;
overflow: hidden;
text-decoration: none;
color: inherit;
background: var(--wp--preset--color--navy-profundo, #08192C);
border: 1px solid rgba(163,140,98,.22);
}
.ic-dest__foto{
position: absolute;
inset: 0;
background-size: cover;
background-position: center 38%;
transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.ic-dest:hover .ic-dest__foto, .ic-dest:focus-visible .ic-dest__foto{
transform: scale(1.05);
}
.ic-dest::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(6,19,31,.18) 0%,
rgba(6,19,31,.46) 42%,
rgba(6,19,31,.88) 78%,
rgba(8,25,44,.96) 100%);
}
.ic-dest__corpo{
position: relative;
z-index: 1;
margin-top: auto;
padding: 26px 24px 22px;
}
.ic-dest__rot{
display: block;
margin-bottom: 9px;
font-size: .64rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ic-dourado-claro);
}
.ic-dest__nome{
margin: 0 0 14px;
font-family: var(--wp--preset--font-family--titulo);
font-weight: 300;
font-size: 1.42rem;
line-height: 1.14;
letter-spacing: -.018em;
color: var(--wp--preset--color--branco, #FFFEEF);
}
.ic-dest__pe{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
padding-top: 13px;
border-top: 1px solid rgba(163,140,98,.30);
}
.ic-dest__pe span{
font-size: .74rem;
letter-spacing: .04em;
color: rgba(255,254,239,.62);
}
.ic-dest__valor{
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.1;
}
.ic-dest__valor em{
font-style: normal;
font-size: .58rem;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,254,239,.46);
}
.ic-dest__valor b{
font-family: var(--wp--preset--font-family--titulo);
font-weight: 300;
font-size: 1.3rem;
color: var(--ic-dourado-claro);
white-space: nowrap;
}
.ic-dest:focus-visible{ outline: 2px solid var(--wp--preset--color--amarelo); outline-offset: 3px; }
/* linha de categorias sob os destaques, no lugar do bloco repetido */
.ic-atalhos{
display: flex;
flex-wrap: wrap;
gap: 10px 30px;
align-items: center;
margin-top: 30px;
padding-top: 22px;
border-top: 1px solid rgba(163,140,98,.20);
}
.ic-atalhos span{
font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
color: rgba(255,254,239,.42);
}
.ic-atalhos a{
font-size: .95rem;
color: var(--wp--preset--color--branco, #FFFEEF);
text-decoration: none;
border-bottom: 1px solid rgba(163,140,98,.44);
padding-bottom: 2px;
transition: border-color .2s ease, color .2s ease;
}
.ic-atalhos a:hover{ color: var(--ic-dourado-claro); border-bottom-color: var(--ic-dourado-claro); }
/* --- razoes: o que eram cartoes de beneficio, agora sem caixa ------ */
.ic-razoes{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 40px 48px;
}
.ic-razao{ padding-top: 20px; border-top: 2px solid var(--ic-dourado); }
.ic-razao h3{
margin: 0 0 10px;
font-family: var(--wp--preset--font-family--titulo);
font-weight: 400;
font-size: 1.18rem;
letter-spacing: -.012em;
color: var(--wp--preset--color--branco, #FFFEEF);
}
.ic-razao p{
margin: 0;
font-size: .93rem;
line-height: 1.72;
color: rgba(255,254,239,.64);
}
/* --- Aquadeck: faixa larga com foto, no lugar do texto centralizado */
.ic-aqua{
position: relative;
margin-inline: calc(50% - 50cqw) !important;
width: 100cqw;
box-sizing: border-box;
min-height: clamp(400px, 52vh, 560px);
display: flex;
align-items: center;
background:
linear-gradient(100deg,
rgba(6,19,31,.94) 0%, rgba(6,19,31,.80) 34%,
rgba(6,19,31,.34) 62%, rgba(6,19,31,.12) 100%),
var(--ic-aqua-img) center 40%/cover no-repeat,
var(--wp--preset--color--navy-profundo, #08192C);
border-top: 1px solid rgba(163,140,98,.24);
border-bottom: 1px solid rgba(163,140,98,.24);
}
.ic-aqua__interno{
box-sizing: border-box;
width: 100%;
margin: 0 auto;
padding-inline: max(clamp(1.25rem, 4vw, 64px), calc((100cqw - 1312px) / 2));
padding-block: clamp(2.5rem, 6vh, 64px);
}
.ic-aqua__texto{ max-width: 46ch; }
.ic-aqua h2{
margin: 14px 0 16px;
font-family: var(--wp--preset--font-family--titulo);
font-weight: 200;
font-size: clamp(2rem, 4.6vw, 3.1rem);
line-height: 1.04;
letter-spacing: -.026em;
color: var(--wp--preset--color--branco, #FFFEEF);
}
.ic-aqua h2 strong{ font-weight: 400; }
.ic-aqua__linha{
margin: 0 0 24px;
font-size: 1.04rem;
line-height: 1.72;
color: rgba(255,254,239,.76);
}
.ic-aqua__itens{
display: flex; flex-wrap: wrap; gap: 8px 26px;
margin: 0 0 28px; padding: 0; list-style: none;
}
.ic-aqua__itens li{
display: flex; align-items: center; gap: 9px;
font-size: .9rem; color: rgba(255,254,239,.72);
}
.ic-aqua__itens i{
width: 6px; height: 6px; flex: none;
border: 1px solid var(--ic-dourado); transform: rotate(45deg);
}
.ic-aqua__preco{
display: inline-flex; align-items: baseline; gap: 10px;
margin-bottom: 26px;
padding: 9px 16px;
border: 1px solid rgba(163,140,98,.38);
}
.ic-aqua__preco em{
font-style: normal; font-size: .62rem; letter-spacing: .16em;
text-transform: uppercase; color: rgba(255,254,239,.52);
}
.ic-aqua__preco b{
font-family: var(--wp--preset--font-family--titulo);
font-weight: 300; font-size: 1.34rem; color: var(--ic-dourado-claro);
}
/* --- frota: as tres embarcacoes, que nao apareciam na home --------- */
.ic-frota{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
gap: 1px;
background: rgba(163,140,98,.20);
border: 1px solid rgba(163,140,98,.20);
}
.ic-barco{
display: flex; flex-direction: column; gap: 12px;
min-width: 0;
padding: 28px 26px;
background: var(--wp--preset--color--navy-profundo, #08192C);
text-decoration: none; color: inherit;
transition: background .25s ease;
}
.ic-barco:hover{ background: rgba(163,140,98,.07); }
.ic-barco:focus-visible{ outline: 2px solid var(--wp--preset--color--amarelo); outline-offset: -2px; }
.ic-barco__nome{
margin: 0;
overflow-wrap: anywhere;
font-family: var(--wp--preset--font-family--titulo);
font-weight: 300; font-size: 1.32rem; letter-spacing: -.015em;
color: var(--wp--preset--color--branco, #FFFEEF);
}
.ic-barco__cap{ margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(255,254,239,.6); }
.ic-barco__pe{
display: flex; align-items: baseline; justify-content: space-between;
flex-wrap: wrap;
gap: 12px; margin-top: auto; padding-top: 14px;
border-top: 1px solid rgba(163,140,98,.22);
}
.ic-barco__pe span{
font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
color: rgba(255,254,239,.44);
}
.ic-barco__pe b{
font-family: var(--wp--preset--font-family--titulo);
font-weight: 300; font-size: 1.16rem; color: var(--ic-dourado-claro);
}
@media (max-width: 860px){
/* O veu do Aquadeck e diagonal, pensado para o texto ocupar so a
coluna esquerda. No celular ele ocupa a largura toda e entrava na
parte clara da foto — a lista de itens caiu para 1,6:1. Vertical. */
.ic-aqua{
background:
linear-gradient(to bottom,
rgba(6,19,31,.84) 0%,
rgba(6,19,31,.86) 24%,
rgba(6,19,31,.88) 62%,
rgba(6,19,31,.93) 100%),
var(--ic-aqua-img) center 40%/cover no-repeat,
var(--wp--preset--color--navy-profundo, #08192C);
}
}
@media (max-width: 600px){
.ic-dest{ min-height: 300px; }
.ic-dest__corpo{ padding: 22px 20px 20px; }
.ic-razoes{ gap: 30px; }
.ic-aqua{ min-height: 0; }
.ic-aqua__texto{ max-width: none; }
}
/* -------------------------------------------------------------------
MENU NO CELULAR
O overlay vinha do tema pai com `base`/`contrast` — cores que nao
existem na nossa paleta — e abria branco, com o dourado dos itens
ilegivel por cima. Os submenus ainda desenhavam a propria caixa
dentro do overlay, onde eles nao sao flutuantes.
------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open{
background-color: var(--wp--preset--color--navy) !important;
color: var(--wp--preset--color--areia) !important;
/* acima da faixa de obra (99999), senao o botao de fechar fica
escondido atras dela */
z-index: 100001 !important;
padding: 20px clamp(1.25rem, 5vw, 2.5rem) 28px !important;
}
/* a lista mede 791px numa janela de 844: sem compactar, os dois ultimos
itens ficam fora da tela */
.wp-block-navigation__responsive-container.is-menu-open ul{
align-items: flex-start !important;
gap: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open li{ text-align: left !important; }
/* O overlay e filho do header, que tem z-index 60 e cria contexto de
empilhamento proprio: por mais alto que fosse o z-index do overlay, ele
nunca passava da faixa de obra (99999), que esta fora desse contexto.
Quem precisa subir e o header. */
body:has(.is-menu-open) header.wp-block-template-part{ z-index: 100002; }
/* Elevar o header nao basta: ele vive dentro de `.wp-site-blocks`, que tem
`container-type: inline-size` — isso implica `contain: layout` e cria um
contexto de empilhamento proprio, prendendo tudo la dentro. A faixa de
obra e irma desse contexto, entao quem precisa recuar e ela. */
body:has(.is-menu-open) .ic-faixa{ z-index: 1 !important; }
/* o botao flutuante do WhatsApp some enquanto o menu esta aberto */
/* O botão flutuante some enquanto o menu do celular ou a lente da galeria
estão abertos. O `!important` é necessário: o `.ic-zap` tem a própria
animação de pulso declarando opacity, e sem ele a regra perde. */
body:has(.is-menu-open) .ic-zap,
body:has(.ic-lente[open]) .ic-zap{ opacity: 0 !important; pointer-events: none; }
/* o bloco de navegacao carrega justifyContent:right do desktop; dentro do
overlay isso jogava o titulo de cada grupo para a direita, desalinhado
dos itens */
.wp-block-navigation__responsive-container.is-menu-open li,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
justify-content: flex-start !important;
align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
justify-content: flex-start !important;
align-items: flex-start !important;
width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
padding-top: 8px;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
color: var(--wp--preset--color--areia) !important;
}
/* dentro do overlay o submenu nao flutua: sem caixa, sem borda, sem sombra */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 4px 0 10px !important;
min-width: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{
color: rgba(255,254,239,.72) !important;
font-size: .92rem;
padding: 5px 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:hover{
color: var(--ic-dourado-claro) !important;
}
/* o item de primeiro nivel vira o titulo do grupo */
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > ul > li > .wp-block-navigation-item__content{
font-family: var(--wp--preset--font-family--titulo);
font-size: 1.24rem;
font-weight: 300;
letter-spacing: -.01em;
}
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > ul > li{
padding: 9px 0;
border-bottom: 1px solid rgba(163,140,98,.20);
width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > ul > li:last-child{ border-bottom: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
color: var(--wp--preset--color--areia) !important;
}
/* ===================================================================
PÁGINA DE EMBARCAÇÃO — blocos que nasceram com a ficha real
(Frota Ilhabela.docx, 01/09/2026)
=================================================================== */
/* dados técnicos: motorização, tanques, saída */
.ic-tecnico{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1px;
margin-top: 34px;
background: rgba(163,140,98,.20);
border: 1px solid rgba(163,140,98,.20);
}
.ic-tecnico > div{
box-sizing: border-box;
padding: 18px 20px;
background: var(--wp--preset--color--navy-profundo, #08192C);
}
.ic-tecnico span{
display: block; margin-bottom: 6px;
font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
color: rgba(255,254,239,.44);
}
.ic-tecnico p{
margin: 0; font-size: .92rem; line-height: 1.55;
color: var(--wp--preset--color--branco, #FFFEEF);
}
/* perfil da experiência + para quem o barco serve */
.ic-perfil{ margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(163,140,98,.24); }
.ic-perfil__texto{
margin: 0 0 20px; font-size: .96rem; line-height: 1.75;
color: rgba(255,254,239,.70);
}
.ic-perfil__ideal{
margin: 0; padding: 16px 18px;
border-left: 2px solid var(--ic-dourado);
background: rgba(163,140,98,.07);
font-size: .93rem; line-height: 1.65;
color: var(--wp--preset--color--branco, #FFFEEF);
}
.ic-perfil__ideal span{
display: block; margin-bottom: 5px;
font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--ic-dourado-claro);
}
/* faixa do que está incluso em todo passeio */
.ic-incluso{
box-sizing: border-box;
margin-inline: calc(50% - 50cqw) !important;
width: 100cqw; max-width: none !important;
margin-top: 64px;
padding: clamp(2.5rem, 5vh, 56px)
max(clamp(1.25rem, 4vw, 64px), calc((100cqw - 1312px) / 2));
background: var(--wp--preset--color--navy-profundo, #08192C);
border-top: 1px solid rgba(163,140,98,.24);
}
.ic-incluso__cab{
display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
}
.ic-incluso__cab i{ width: 44px; height: 1px; background: var(--ic-dourado); flex: none; }
.ic-incluso__cab em{
font-style: normal; font-size: .68rem; letter-spacing: .24em;
text-transform: uppercase; color: var(--ic-dourado-claro);
}
.ic-incluso ul{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px 32px;
margin: 0; padding: 0; list-style: none;
}
.ic-incluso li{
display: flex; align-items: baseline; gap: 11px;
font-size: .94rem; color: rgba(255,254,239,.78);
}
.ic-incluso li::before{
content: ""; width: 6px; height: 6px; flex: none;
border: 1px solid var(--ic-dourado); transform: rotate(45deg);
}
/* ---------------------------------------------------------------- galeria
Primeiras fotos reais da operação (01/09/2026). Tudo chegou pelo
WhatsApp em 720×1280 típico, retrato e paisagem misturados — daí o
quadro fixo com `object-fit: cover`, que é o que deixa a grade regular
sem depender da proporção de origem.
A primeira foto ocupa duas colunas e duas linhas: com todas do mesmo
tamanho a grade lia como banco de imagens, e a foto de abertura é
justamente a que mostra o barco inteiro. */
.ic-galeria{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 8px;
}
.ic-galeria__foto{
position: relative; display: block; overflow: hidden;
background: rgba(255,255,255,.04);
aspect-ratio: 4 / 3; border: 0; padding: 0; cursor: zoom-in;
}
.ic-galeria__foto:first-child{ grid-column: span 2; grid-row: span 2; }
/* Células largas: fecham a última linha, que quase nunca dá redonda. Quem
decide quais é o gerador em `paginas.py`, que sabe quantos itens são. */
.ic-galeria__foto--w2{ grid-column: span 2; }
.ic-galeria__foto--w4{ grid-column: span 4; aspect-ratio: 32 / 9; }
/* Vídeo na grade é o pôster com um losango de play. O losango é o mesmo
que marca item de lista no resto do site; o triângulo dentro dele é que
diz que aquilo toca — sem ele, a marcação lê como enfeite. */
.ic-play{
position: absolute; z-index: 2; left: 50%; top: 50%;
width: 52px; height: 52px; pointer-events: none;
transform: translate(-50%, -50%) rotate(45deg);
border: 1px solid rgba(255,254,239,.9);
background: rgba(4,14,24,.45);
backdrop-filter: blur(2px);
transition: background .3s, border-color .3s, transform .3s;
}
.ic-play::after{
content: ""; position: absolute; left: 50%; top: 50%;
width: 0; height: 0;
/* o pai está a 45°, então o triângulo volta -45° para ficar de pé */
transform: translate(-52%, -50%) rotate(-45deg);
border-left: 13px solid rgba(255,254,239,.95);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.ic-galeria__foto:hover .ic-play{
background: rgba(163,140,98,.55); border-color: var(--ic-dourado-claro);
transform: translate(-50%, -50%) rotate(45deg) scale(1.08);
}
.ic-galeria__foto--video img{ filter: saturate(.9) brightness(.84); }
/* Galeria curta não comporta destaque: com 4 colunas e a primeira em 2×2,
a grade só fecha sem célula órfã em 5, 9 ou 13 fotos. Abaixo disso vira
uma fileira de três iguais — é o caso do Charter II, que tem só 3 fotos. */
.ic-galeria:not(:has(> :nth-child(5))){ grid-template-columns: repeat(3, 1fr); }
.ic-galeria:not(:has(> :nth-child(5))) .ic-galeria__foto:first-child{
grid-column: span 1; grid-row: span 1;
}
.ic-galeria__foto img{
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s cubic-bezier(.2,.6,.2,1), filter .4s;
filter: saturate(.94);
}
.ic-galeria__foto:hover img,
.ic-galeria__foto:focus-visible img{ transform: scale(1.05); filter: saturate(1.06); }
/* o fio dourado do topo dos cartões, aqui como moldura que acende */
.ic-galeria__foto::after{
content: ""; position: absolute; inset: 0; pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(163,140,98,0);
transition: box-shadow .35s;
}
.ic-galeria__foto:hover::after,
.ic-galeria__foto:focus-visible::after{
box-shadow: inset 0 0 0 1px rgba(163,140,98,.85);
}
.ic-galeria__foto:focus-visible{ outline: none; }
@media (max-width: 860px){
/* em 2 colunas, `--w4` viraria uma tira de 32:9 com 12px de altura */
.ic-galeria__foto--w4{ grid-column: span 2; aspect-ratio: 16 / 10; }
.ic-play{ width: 42px; height: 42px; }
.ic-galeria,
/* a regra de galeria curta é mais específica e venceria aqui: em 390 px
três colunas dão 110 px de foto */
.ic-galeria:not(:has(> :nth-child(5))){ grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ic-galeria__foto:first-child{ grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
.ic-galeria:not(:has(> :nth-child(5))) .ic-galeria__foto:first-child{ grid-column: span 2; }
}
/* --------------------------------------------------------------- lightbox
`