/* ===================================================================
   Configurador de reserva — composição aprovada no canvas de design.
   Painel único, passos numerados, embarcações comparáveis lado a lado.
   =================================================================== */

.ic-bloco{ max-width:1312px; margin-inline:auto; }

/* ---- cabeçalho da seção ---- */
.ic-cabeca{
	display:flex; align-items:flex-end; justify-content:space-between;
	gap:40px; margin-bottom:38px; flex-wrap:wrap;
}
.ic-cabeca__fio{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.ic-cabeca__fio i{ width:44px; height:1px; background:#A38C62; flex:none; }
.ic-cabeca__sobre{
	font-size:.69rem; letter-spacing:.24em; text-transform:uppercase; color:#C4AC7E;
	font-style:normal;
}
.ic-cabeca h2{
	margin:0; font-family:var(--wp--preset--font-family--titulo, Jost), sans-serif;
	font-weight:200; font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.06;
	letter-spacing:-.02em; color:#FFFEEF;
}
.ic-cabeca__nota{
	margin:0 0 6px; max-width:300px; font-size:.84rem; line-height:1.65;
	color:rgba(255,254,239,.56); text-align:right;
}

/* ---- painel ---- */
.ic-config{
	background:#0C2540;
	border:1px solid rgba(163,140,98,.26);
	border-top:2px solid #A38C62;
}

.ic-passo__rot{
	display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
	color:#8FA6B8; margin-bottom:11px;
}
.ic-passo__rot b{ color:#C4AC7E; font-weight:500; }

/* ---- linha de campos ---- */
.ic-campos{
	display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
	border-bottom:1px solid rgba(163,140,98,.18);
}
.ic-campo{ padding:24px 28px; border-right:1px solid rgba(163,140,98,.18); }
.ic-campo:last-child{ border-right:0; }

.ic-campo select,
.ic-campo input{
	width:100%; background:transparent; color:#FFFEEF; border:0; padding:0;
	font-family:var(--wp--preset--font-family--titulo, Jost), sans-serif;
	font-weight:400; font-size:1.3rem; line-height:1.25;
	appearance:none; -webkit-appearance:none; cursor:pointer;
}
.ic-campo select{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23A38C62' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right center; padding-right:26px;
}
.ic-campo select option{ background:#0C2540; color:#FFFEEF; font-size:1rem; }
/* O optgroup nao herda nada do select: o navegador desenha com as cores do
   sistema, entao o rotulo de categoria saia dourado sobre branco. */
.ic-campo select optgroup{
	background:#0A1E37; color:#C4AC7E;
	font-style:normal; font-weight:600;
	font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
}
.ic-campo select optgroup option{ background:#0C2540; color:#FFFEEF;
	font-weight:400; letter-spacing:normal; text-transform:none; }
.ic-campo input[type="date"]::-webkit-calendar-picker-indicator{
	filter:invert(72%) sepia(18%) saturate(700%) hue-rotate(2deg); cursor:pointer;
}
.ic-campo__dica{
	display:block; margin-top:7px; font-size:.76rem; color:rgba(255,254,239,.48);
}
.ic-campo__dica.is-ok{ color:#7FCB9B; }
.ic-campo select:focus-visible,
.ic-campo input:focus-visible,
.ic-barco:focus-visible,
.ic-botao:focus-visible{ outline:2px solid #FFCD35; outline-offset:3px; }
.ic-adicional:focus-within{ outline:2px solid #FFCD35; outline-offset:2px; }

/* ---- embarcações ---- */
.ic-secao{ padding:26px 28px; }
.ic-barcos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }

.ic-barco{
	position:relative; display:block; width:100%; text-align:left; font:inherit;
	padding:22px; background:#0A1E37; border:1px solid rgba(255,254,239,.10);
	color:#FFFEEF; cursor:pointer;
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ic-barco:hover{ border-color:rgba(163,140,98,.55); transform:translateY(-2px); }
.ic-barco.is-escolhido{
	border-color:#FFCD35;
	box-shadow:0 0 0 1px rgba(255,205,53,.30), 0 16px 38px rgba(0,0,0,.34);
}
.ic-barco.is-escolhido::after{
	content:"Escolhida"; position:absolute; top:-1px; right:-1px;
	padding:5px 11px; background:#FFCD35; color:#0A1E37;
	font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.ic-barco__nome{
	display:block; font-family:var(--wp--preset--font-family--titulo, Jost), sans-serif;
	font-weight:400; font-size:1.18rem; margin-bottom:5px;
}
.ic-barco__meta{
	display:block; font-size:.76rem; line-height:1.55; color:rgba(255,254,239,.52);
	margin-bottom:16px;
}
.ic-barco__preco{
	display:block; font-family:var(--wp--preset--font-family--titulo, Jost), sans-serif;
	font-weight:300; font-size:2rem; line-height:1;
}
.ic-barco:not(.is-escolhido) .ic-barco__preco{ color:rgba(255,254,239,.78); }

/* ---- adicionais e resumo ---- */
.ic-fecho{
	display:grid; grid-template-columns:1fr 400px;
	border-top:1px solid rgba(163,140,98,.18);
}
.ic-fecho__esq{ padding:26px 28px; border-right:1px solid rgba(163,140,98,.18); }
.ic-fecho__dir{ padding:26px 28px; display:flex; flex-direction:column; }

.ic-adicionais{ display:flex; flex-direction:column; gap:10px; }
.ic-adicional{
	display:flex; align-items:center; gap:15px; padding:15px 17px;
	background:#0A1E37; border:1px solid rgba(255,254,239,.09); cursor:pointer;
	transition:border-color .18s ease;
}
.ic-adicional:hover{ border-color:rgba(163,140,98,.45); }
.ic-adicional:has(input:checked){ border-color:rgba(255,205,53,.45); }
.ic-adicional input{ position:absolute; opacity:0; width:0; height:0; }
.ic-adicional__marca{
	width:19px; height:19px; flex:none; border:1px solid rgba(255,254,239,.28);
	display:grid; place-items:center;
}
.ic-adicional input:checked + .ic-adicional__marca{ background:#FFCD35; border-color:#FFCD35; }
.ic-adicional__marca svg{ opacity:0; }
.ic-adicional input:checked + .ic-adicional__marca svg{ opacity:1; }
/* Adicional que a embarcação escolhida não oferece: continua à vista, para
   a pessoa saber que existe, mas não aceita clique. Sumir com ele faria a
   lista mudar de tamanho a cada troca de barco. */
.ic-adicional.is-indisponivel{
	opacity:.42; cursor:not-allowed; border-color:rgba(255,254,239,.06);
}
.ic-adicional.is-indisponivel:hover{ border-color:rgba(255,254,239,.06); }
.ic-adicional__texto{ flex:1; min-width:0; }
.ic-adicional__nome{ display:block; font-size:.88rem; font-weight:500; }
.ic-adicional__detalhe{
	display:block; font-size:.75rem; line-height:1.45; color:rgba(255,254,239,.46); margin-top:2px;
}
.ic-adicional__preco{
	font-family:var(--wp--preset--font-family--titulo, Jost), sans-serif;
	font-size:1.05rem; white-space:nowrap;
	display:flex; flex-direction:column; align-items:flex-end; line-height:1.25;
}
/* "por pessoa" embaixo do valor, e não ao lado: ao lado ele empurrava o
   preço para fora da coluna no celular, onde a linha já é apertada. */
.ic-adicional__preco em{
	font-style:normal; font-family:var(--wp--preset--font-family--texto, inherit);
	font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
	color:color-mix(in srgb,var(--wp--preset--color--areia,#FFFEEF) 55%,transparent);
}

.ic-resumo__linhas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ic-resumo__linhas li{
	display:flex; justify-content:space-between; gap:14px;
	font-size:.82rem; color:rgba(255,254,239,.62);
}
.ic-resumo__linhas li span:last-child{ color:#FFFEEF; white-space:nowrap; }
.ic-total{
	display:flex; align-items:baseline; justify-content:space-between; gap:14px;
	margin-top:20px; padding-top:18px; border-top:1px solid rgba(163,140,98,.30);
}
.ic-total > span{ font-size:.82rem; color:rgba(255,254,239,.72); }
.ic-total strong{
	font-family:var(--wp--preset--font-family--titulo, Jost), sans-serif;
	font-weight:300; font-size:2.6rem; line-height:1; color:#FFCD35;
}
.ic-nota{ margin:9px 0 0; font-size:.72rem; line-height:1.5; color:rgba(255,254,239,.44); }
.ic-vazio, .ic-alerta{ margin:0; font-size:.84rem; line-height:1.55; color:rgba(255,254,239,.52); }
.ic-alerta{ color:#FFD9A8; }
.ic-barcos .ic-vazio, .ic-barcos .ic-alerta{ grid-column:1 / -1; }

.ic-acoes{ margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:10px; }
.ic-botao{
	display:flex; align-items:center; justify-content:center; gap:11px;
	padding:16px 22px; border:0; font:inherit; font-size:.78rem; font-weight:600;
	letter-spacing:.09em; text-transform:uppercase; text-decoration:none; cursor:pointer;
	transition:background .18s ease, transform .18s ease;
}
.ic-botao--principal{ background:#FFCD35; color:#0A1E37; }
.ic-botao--principal:hover{ background:#FFFEEF; transform:translateY(-2px); }
.ic-botao--texto{
	background:transparent; color:rgba(255,254,239,.62); text-transform:none;
	letter-spacing:0; font-weight:400; font-size:.76rem; padding:0;
}
.ic-botao--texto b{ color:#C4AC7E; font-weight:400; border-bottom:1px solid rgba(163,140,98,.5); }
.ic-botao--texto:hover b{ color:#FFFEEF; border-bottom-color:#FFFEEF; }

.ic-aviso{
	margin-top:14px; padding:13px 16px; background:#FFCD35; color:#0A1E37;
	font-size:.8rem; line-height:1.5;
}
.ic-rodape{
	padding:16px 28px; border-top:1px solid rgba(163,140,98,.18);
	font-size:.7rem; color:#7E96A8; text-align:center;
}

/* ---- responsivo ---- */
@media (max-width:1040px){
	.ic-fecho{ grid-template-columns:1fr; }
	.ic-fecho__esq{ border-right:0; border-bottom:1px solid rgba(163,140,98,.18); }
}
@media (max-width:780px){
	.ic-cabeca{ flex-direction:column; align-items:flex-start; gap:18px; }
	.ic-cabeca__nota{ text-align:left; max-width:none; }
	.ic-campos{ grid-template-columns:1fr; }
	.ic-campo{ border-right:0; border-bottom:1px solid rgba(163,140,98,.18); }
	.ic-campo:last-child{ border-bottom:0; }
	.ic-barcos{ grid-template-columns:1fr; }
	.ic-adicional{ flex-wrap:wrap; }
	.ic-adicional__preco{ margin-left:34px; }
}

@media (prefers-reduced-motion:reduce){
	.ic-barco, .ic-botao, .ic-adicional{ transition:none; }
	.ic-barco:hover, .ic-botao--principal:hover{ transform:none; }
}

/* Botão que parece link, dentro do alerta de data ocupada. */
.ic-link-limpo{
	background:none; border:0; padding:0; font:inherit; cursor:pointer;
	color:var(--ic-dourado-claro,#C4AC7E); text-decoration:underline;
	text-underline-offset:3px;
}
.ic-link-limpo:hover{ color:#FFFEEF; }

/* ------------------------------------------------ dados do cliente
   Último passo antes do pagamento. Aparece só quando roteiro, barco e data
   já estão escolhidos — pedir nome e e-mail antes do preço é um passo a
   mais entre a pessoa e o valor. */
.ic-dados{
	margin-top:18px; padding-top:18px;
	border-top:1px solid rgba(163,140,98,.24);
	display:flex; flex-direction:column; gap:12px;
}
.ic-dados__titulo{
	margin:0; font-family:Jost,system-ui,sans-serif; font-weight:300;
	font-size:1.15rem; color:var(--wp--preset--color--areia,#FFFEEF);
}
.ic-dados__nota{
	margin:-6px 0 4px; font-size:.8rem;
	color:color-mix(in srgb,var(--wp--preset--color--areia,#FFFEEF) 58%,transparent);
}
/* "Não é você?" — link, não botão. A ação é rara e destrutiva de um
   jeito banal (apaga o que a pessoa digitou antes), então não pode ter o
   peso visual de nada que se clique por engano. */
.ic-dados__lembrado button{
	appearance:none; background:none; border:0; padding:0;
	font:inherit; color:var(--ic-dourado-claro,#C4AC7E);
	text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.ic-dados__lembrado button:hover{ color:var(--wp--preset--color--areia,#FFFEEF); }
.ic-dados__lembrado button:focus-visible{
	outline:2px solid var(--ic-dourado,#A38C62); outline-offset:2px;
}

.ic-dados label{
	display:flex; flex-direction:column; gap:5px;
	font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--ic-dourado-claro,#C4AC7E);
}
/* ⚠️ `font-size` em **px, nunca abaixo de 16**. O Safari do iPhone dá zoom
   sozinho ao focar um campo com fonte menor, e a página inteira salta —
   estava em 15,2 px (.95rem), medido em 390 px. Não é preferência de
   desenho: é o navegador reagindo ao número.
   A altura vai a 44 px pelo mesmo motivo prático — é o alvo de toque
   mínimo da WCAG e da Apple. Estava em 42. */
.ic-dados input{
	box-sizing:border-box; width:100%; min-height:44px;
	background:rgba(255,255,255,.06); border:1px solid rgba(163,140,98,.3);
	color:var(--wp--preset--color--areia,#FFFEEF);
	padding:11px 12px; font-size:16px; font-family:inherit;
	letter-spacing:normal; text-transform:none;
}
.ic-dados input:focus-visible{ outline:2px solid var(--ic-dourado,#A38C62); outline-offset:1px; }
.ic-dados small{
	font-size:.7rem; letter-spacing:normal; text-transform:none;
	color:color-mix(in srgb,var(--wp--preset--color--areia,#FFFEEF) 50%,transparent);
}
.ic-dados__erro{
	margin:0; padding:9px 12px; font-size:.85rem;
	background:rgba(255,205,53,.14); border-left:3px solid #FFCD35;
	color:var(--wp--preset--color--areia,#FFFEEF);
}
.ic-dados__acao{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ic-dados__acao .ic-botao--principal{ flex:1 1 auto; }

/* Dica do campo quando a data escolhida não serve. Amarelo, não vermelho:
   não é erro do sistema, é a pessoa precisando conferir o que digitou. */
.ic-campo__dica.is-erro{
	color:#FFCD35;
	font-weight:500;
}

/* O campo inteiro é a área de clique do calendário, então tem de parecer
   clicável — e o indicador nativo do Chrome, que é o único pedaço que abria
   o seletor antes, cresce para não competir com o resto. */
.ic-campo input[type="date"]{ cursor: pointer; }
.ic-campo input[type="date"]::-webkit-calendar-picker-indicator{
	cursor: pointer;
	opacity: .75;
	filter: invert(1);
	transition: opacity .2s;
}
.ic-campo input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity: 1; }

/* O aceite não é um campo como os outros: alinhamento no topo, texto em
   caixa normal e o link com sublinhado visível — é o que o cliente precisa
   abrir antes de marcar. */
.ic-dados__aceite{
	flex-direction:row !important; align-items:flex-start; gap:10px !important;
	font-size:.86rem !important; letter-spacing:normal !important;
	text-transform:none !important;
	color:color-mix(in srgb,var(--wp--preset--color--areia,#FFFEEF) 82%,transparent) !important;
	line-height:1.5; cursor:pointer;
}
/* A caixa de aceite media 17×17 px no celular — o alvo mais importante do
   funil, porque sem ele não há venda, era o menor da tela. Vai a 22 px, e
   o `padding` do label estende a área clicável para a linha inteira: quem
   erra a caixa acerta o texto. */
.ic-dados__aceite input{
	flex:0 0 auto; width:22px; height:22px; margin:0; cursor:pointer;
	accent-color:var(--ic-dourado,#A38C62);
}
.ic-dados__aceite a{
	color:var(--ic-dourado-claro,#C4AC7E); text-decoration:underline;
	text-underline-offset:3px;
}
.ic-dados__aceite a:hover{ color:#FFFEEF; }

/* Alvo de toque no celular. O link das condições media 16 px de altura e o
   "Não é você?" 20 — os dois abaixo do mínimo. O padding vertical negativo
   na margem cresce a área sem mexer no ritmo do texto. */
@media (max-width:860px){
	.ic-dados__aceite a,
	.ic-dados__lembrado button,
	.ic-dados__acao .ic-botao--texto{
		display:inline-block; padding:12px 4px; margin:-12px -4px;
	}
	.ic-dados__aceite{ align-items:center; gap:12px; }
}

/* ------------------------------------------------------------- contador
   O campo era um `<input type="number">` cru, e a cliente não conseguia
   trocar 2 por 4: o JS reescrevia o valor a cada tecla e o campo se
   autocorrigia para 1 no instante em que ela apagava o número. As setinhas
   nativas do navegador são pequenas demais para o dedo e invisíveis no
   celular — daí os botões próprios, com 44 px de alvo. */
/* Agrupado e alinhado à esquerda, não esticado na largura do campo: com
   `width:100%` no input os botões iam para as pontas e o número ficava
   solto no meio, parecendo três coisas sem relação. */
.ic-contador{
	display:inline-flex; align-items:center; width:fit-content;
	border:1px solid rgba(163,140,98,.35); background:rgba(255,255,255,.04);
}
.ic-contador__bt{
	flex:0 0 auto; width:46px; height:46px; box-sizing:border-box;
	display:grid; place-items:center;
	background:transparent; border:0;
	color:var(--ic-dourado-claro,#C4AC7E);
	font-family:inherit; font-size:1.4rem; line-height:1;
	cursor:pointer; padding:0;
	transition:background .15s, color .15s;
}
.ic-contador__bt:hover:not(:disabled){
	background:rgba(163,140,98,.2); color:#FFFEEF;
}
.ic-contador__bt:focus-visible{
	outline:2px solid var(--ic-dourado,#A38C62); outline-offset:2px;
}
/* No limite o botão fica visivelmente inerte, em vez de aceitar o clique
   e não fazer nada. */
.ic-contador__bt:disabled{ opacity:.3; cursor:default; }

.ic-contador input{
	width:58px; min-width:0; text-align:center; flex:0 0 auto;
	border-left:1px solid rgba(163,140,98,.22);
	border-right:1px solid rgba(163,140,98,.22);
	height:46px; box-sizing:border-box;
	/* 16px é o piso: abaixo disso o Safari do iPhone dá zoom ao focar e a
	   página salta no meio do formulário. */
	font-size:max(1.3rem, 16px);
	cursor:text;
}
/* As setinhas nativas somem: os botões acima fazem o mesmo, com alvo de
   toque de verdade. */
.ic-contador input::-webkit-outer-spin-button,
.ic-contador input::-webkit-inner-spin-button{
	appearance:none; -webkit-appearance:none; margin:0;
}

/* ------------------------------------------------------- sinal e saldo
   O par "paga agora / paga no dia" fica logo abaixo do total, e o valor
   de agora tem o peso — é o número que a pessoa vai comparar com o de
   outro operador antes de decidir. O saldo vem em seguida, menor mas
   escrito por extenso: quem descobre a segunda parcela no píer reclama, e
   com razão. */
/* O bloco dos 40%. Pedido da cliente em 09/09: a divisão do pagamento é
   argumento de venda, não nota de rodapé — quem vê "R$ 5.140" desiste antes
   de descobrir que paga R$ 2.056 para reservar. Por isso a chamada vem
   primeiro, e os dois valores lado a lado embaixo dela. */
.ic-sinal{
	margin:-4px 0 12px; padding:14px 16px;
	background:rgba(163,140,98,.14); border-left:3px solid var(--ic-dourado,#A38C62);
}
.ic-sinal__chamada{
	display:block; font-size:1rem; line-height:1.5;
	color:var(--wp--preset--color--areia,#FFFEEF);
}
.ic-sinal__chamada b{ color:var(--ic-dourado-claro,#C4AC7E); font-weight:600; }
.ic-sinal__linha{
	display:flex; flex-wrap:wrap; gap:6px 28px; margin-top:10px;
}
.ic-sinal__agora,.ic-sinal__depois{
	display:flex; flex-direction:column; gap:2px;
	font-size:1.05rem; color:var(--wp--preset--color--areia,#FFFEEF);
}
.ic-sinal__agora{ font-weight:600; }
.ic-sinal__agora i,.ic-sinal__depois i{
	font-style:normal; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
	color:color-mix(in srgb,var(--wp--preset--color--areia,#FFFEEF) 55%,transparent);
}
.ic-sinal__depois{
	font-weight:400;
	color:color-mix(in srgb,var(--wp--preset--color--areia,#FFFEEF) 78%,transparent);
}
.ic-sinal__como{
	display:block; margin-top:10px; font-size:.82rem; line-height:1.55;
	color:color-mix(in srgb,var(--wp--preset--color--areia,#FFFEEF) 62%,transparent);
}