/* ============================================================
   PÁGINA DE CASA — fiel ao frame "casa COLORIDA" do Figma.
   Partilhada por casa-colorida.html e tempo-amor.html.
   Ordem: header · carrossel · barra de piso · banda escura ·
          formulário curto · banda pêssego (WE PROVIDE) · rodapé
   ============================================================ */
:root { --bar-h: clamp(76px, 6.8vw, 95px); }
/* o carrossel começa no topo e o header assenta por cima (como na home) */
body { background: var(--paper); }
.page { max-width: 1196px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 60px); }

/* ---------- HEADER transparente por cima do carrossel ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; color: #fff;
  transition: background .35s ease, backdrop-filter .35s ease;
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(24,20,16,.52) 0%, rgba(24,20,16,.22) 60%, rgba(24,20,16,0) 100%);
  transition: opacity .35s ease;
}
.bar.scrolled { background: rgba(38,34,30,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bar.scrolled::before { opacity: 0; }
.bar-inner {
  position: relative; max-width: 1196px; margin-inline: auto; padding: 0 clamp(20px,5vw,60px);
  height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.bar .home { display: inline-flex; align-items: center; }
.mark-box { width: clamp(56px,4.8vw,66px); height: auto; display: block; }
.bar nav { display: flex; gap: clamp(20px, 4.6vw, 88px); }
.bar nav a {
  color: #fff; font-size: clamp(11.5px,1vw,14px); font-weight: 400; letter-spacing: .05em;
  text-transform: uppercase; opacity: .95; transition: opacity .2s;
}
.bar nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
/* a página onde estamos fica a bold, como no Figma */
.bar nav a.is-current { font-weight: 700; }

/* ---------- CARROSSEL DE FOTOS ---------- */
.casa-slider {
  position: relative; width: 100%;
  height: clamp(320px, 58vw, 830px);
  background: #ece9e5; overflow: hidden;
}
.casa-slider img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease;
  /* as fotos estão empilhadas: sem isto o clique ia sempre à última do DOM
     (opacity:0 continua a receber eventos) e o lightbox nunca abria */
  pointer-events: none;
}
.casa-slider img.on { opacity: 1; pointer-events: auto; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .casa-slider img { transition: none; } }
.cs-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
  transition: opacity .2s, transform .2s;
  opacity: .9;
}
.cs-nav:hover { opacity: 1; }
.cs-nav.prev { left: clamp(4px,1.6vw,26px); }
.cs-nav.next { right: clamp(4px,1.6vw,26px); }
.cs-nav svg { width: 34px; height: 34px; }
.cs-nav:focus-visible { outline: 3px solid var(--peach); outline-offset: 2px; }
/* Bolinhas em janela: no máximo 5 à vista, as outras vão entrando à medida
   que as fotos passam (com 15 e 17 fotos, a fila inteira não cabia num
   telemóvel). Tamanho e intervalo encolhem com o ecrã e o espaço das setas
   fica reservado dos dois lados. */
.cs-dots {
  --dot: clamp(7px,1.2vw,11px);
  --dot-gap: clamp(5px,1.4vw,12px);
  --dot-vis: 5;
  position: absolute; left: 0; right: 0; bottom: clamp(14px,2.4vw,32px); z-index: 3;
  display: flex; justify-content: center;
  padding-inline: clamp(52px,9vw,80px);
}
/* a janela corta o que passa das 5; o carril desliza por baixo dela */
.cs-dots-win {
  overflow: hidden;
  max-width: calc(var(--dot-vis) * var(--dot) + (var(--dot-vis) - 1) * var(--dot-gap));
}
.cs-dots-track { display: flex; gap: var(--dot-gap); transition: transform .28s ease; }
@media (prefers-reduced-motion: reduce) { .cs-dots-track { transition: none; } }
.cs-dots button {
  position: relative; flex: none;
  width: var(--dot); height: var(--dot); border-radius: 50%; cursor: pointer; padding: 0;
  border: 1.5px solid #fff; background: none; transition: background .2s;
}
/* área de toque maior do que o ponto, sem sobrepor a do ponto ao lado */
.cs-dots button::before {
  content: ''; position: absolute; inset-block: -9px; inset-inline: calc(var(--dot-gap) / -2);
}
.cs-dots button[aria-selected="true"] { background: #fff; }

/* ---------- BARRA DE PISO ---------- */
.floor-bar { background: #FCFCFC; }
.floor-inner {
  min-height: clamp(64px,7vw,98px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: clamp(12px,1.4vw,17px); letter-spacing: .04em; text-transform: uppercase; color: #4a4a4a;
}
.fb-back, .fb-next { display: inline-flex; align-items: center; gap: 10px; color: #4a4a4a; transition: color .2s; white-space: nowrap; }
.fb-back:hover, .fb-next:hover { color: var(--ink); }
.fb-back svg, .fb-next svg { width: 17px; height: 17px; }
.fb-where { text-align: center; }
.fb-where .sep { color: #B9B9B9; margin: 0 4px; }
@media (max-width: 720px) {
  .floor-inner { flex-direction: column; gap: 8px; padding-block: 14px; text-align: center; }
}

/* ---------- BANDA ESCURA (identificação) ---------- */
.casa-band {
  position: relative; isolation: isolate; text-align: center;
  background: #1b1a19 url("assets/fig/mural.jpg") center / cover no-repeat;
  padding: clamp(44px,6vw,90px) 0 clamp(48px,7vw,100px);
}
.casa-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(30,26,23,.72); }
.cb-script { font-family: var(--font-sans); font-size: clamp(26px,3.4vw,44px); font-weight: 300; color: #A08974; line-height: 1.05; }
.cb-name {
  margin-top: 2px; font-size: clamp(30px,4.6vw,62px); font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase; color: var(--peach); line-height: 1.05;
}
.cb-cap {
  display: inline-block; margin-top: clamp(24px,3.4vw,46px);
  font-size: clamp(16px,1.9vw,24px); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; color: #fff;
  text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 2px;
}
.cb-nights { margin-top: clamp(20px,2.8vw,36px); font-size: clamp(13px,1.5vw,19px); letter-spacing: .04em; text-transform: uppercase; color: var(--peach); }
.cb-line { margin-top: clamp(12px,1.6vw,20px); font-size: clamp(12px,1.3vw,16px); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.92); }
.cb-line + .cb-line { margin-top: 6px; }
/* nota do extra por pessoa (Figma, frame 15): caixa baixa, sem maiúsculas */
.cb-note {
  margin: clamp(22px,3vw,38px) auto 0; max-width: 26em;
  font-size: clamp(12px,1.25vw,15px); font-weight: 300; line-height: 1.5;
  color: rgba(255,255,255,.86);
}

/* ---------- TARIFAS POR ÉPOCA (Figma) ----------
   Duas colunas de tarifas separadas por um filete, centradas na página; o
   preço em pêssego e o intervalo de datas por baixo, em maiúsculas. */
.rates { padding: clamp(40px,5.5vw,80px) clamp(20px,5vw,60px) clamp(8px,1vw,16px); text-align: center; }
.rates-title {
  display: inline-block; font-size: clamp(18px,2.2vw,30px); font-weight: 400; letter-spacing: .04em;
  text-transform: uppercase; color: var(--peach);
  text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 2px;
}
/* o bloco encolhe ao maior dos dois (titulo ou tabela) e a tabela ocupa-o
   todo: assim a tabela fica com a mesma largura do titulo */
.rates-inner { display: inline-block; }
.rates-cols {
  margin-top: clamp(28px,4vw,52px); width: 100%;
  display: grid; grid-template-columns: max-content 1px max-content;
  gap: clamp(24px,5vw,72px); justify-content: space-between; text-align: left;
}
.rates-vline { background: rgba(240,138,36,.45); }
.rate + .rate { margin-top: clamp(20px,2.6vw,34px); }
.rate-price {
  font-size: clamp(17px,1.9vw,23px); font-weight: 400; letter-spacing: .02em; color: var(--peach);
}
.rate-when {
  margin-top: 8px; font-size: clamp(12px,1.3vw,16px); font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; color: #6E6E6E; line-height: 1.9;
}
@media (max-width: 620px) {
  /* o filete não faz sentido com uma coluna só */
  .rates-cols { grid-template-columns: max-content; gap: clamp(20px,3vw,34px); justify-content: center; }
  .rates-vline { display: none; }
}

/* ---------- FORMULÁRIO ---------- */
.casa-form { padding: clamp(44px,6vw,88px) clamp(20px,5vw,60px) clamp(48px,6vw,90px); text-align: center; }
.cf-title {
  display: inline-block; font-size: clamp(18px,2.2vw,30px); font-weight: 400; letter-spacing: .04em;
  text-transform: uppercase; color: #BBD8D4;
  text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 2px;
}
/* o `display` acima é regra de autor e ganha ao `[hidden]` do browser (que é do
   agente): sem isto o título "Preencha e envie o pedido" continuava por cima do
   bilhete depois do envio, apesar de o JS lhe pôr o hidden */
.cf-title[hidden] { display: none; }
/* frase por baixo do cartão, fora dele (Figma). Some com o formulário: o
   bilhete de sucesso repete-a e ficavam as duas no ecrã. */
.cf-after {
  margin: clamp(24px,3.4vw,44px) auto 0; max-width: 640px;
  font-size: clamp(14px,1.4vw,18px); line-height: 1.6; color: #6E6E6E;
}
.cf-after[hidden] { display: none; }
.cf-card {
  margin: clamp(30px,4.4vw,58px) auto 0; max-width: 990px; text-align: left;
  background: #F5F5F5; border: 1px solid #E2E2E2; border-radius: 12px;
  padding: clamp(24px,4vw,54px) clamp(20px,4vw,52px) clamp(28px,4vw,46px);
}
.cf-h {
  display: inline-block; font-size: clamp(15px,1.6vw,19px); font-weight: 600; color: var(--sage-deep);
  text-decoration: underline; text-underline-offset: 5px;
}
.cf-legend { margin-top: 8px; font-size: clamp(13.5px,1.4vw,16px); color: #6E6E6E; line-height: 1.5; }
.cf-grid { margin-top: clamp(16px,2.2vw,26px); display: grid; grid-template-columns: 1.25fr 1fr .85fr; gap: clamp(14px,2vw,26px); }
.cf-checks { margin-top: clamp(16px,2vw,24px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px clamp(20px,3vw,44px); }
.cf-rule { height: 1px; background: #DEDEDE; margin: clamp(22px,3vw,38px) 0 clamp(20px,2.6vw,32px); }
.cf-full { margin-top: clamp(14px,1.8vw,22px); }
.cf-2 { margin-top: clamp(14px,1.8vw,22px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,26px); }
/* telefone = indicativo + número */
.phone-row { display: grid; grid-template-columns: 128px 1fr; gap: 8px; min-width: 0; }
/* a caixa mostra só "+351", mas a lista precisa de espaço para o nome do país */
.dial-control .cs-pop { right: auto; min-width: 268px; max-width: calc(100vw - 40px); }
/* em ecrã estreito o número precisa de todo o espaço possível */
@media (max-width: 520px) { .phone-row { grid-template-columns: 116px 1fr; } }
@media (max-width: 860px) { .cf-grid, .cf-checks, .cf-2 { grid-template-columns: 1fr; } }

.field-fig { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-fig > label { font-size: clamp(14px,1.3vw,16px); font-weight: 400; color: var(--ink); }
.inp, .control {
  height: 44px; width: 100%; background: #fff; border: 0;
  border-radius: 8px; box-shadow: inset 0 0 0 1px #DDD;
  font: inherit; font-size: 16px; color: var(--ink); outline: none;
}
.inp { padding: 0 14px; }
.inp:focus { box-shadow: inset 0 0 0 1px var(--peach); }
.control { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; cursor: pointer; }
.control:hover { box-shadow: inset 0 0 0 1px var(--sage); }
.control svg { width: 18px; height: 18px; color: var(--slate); flex: none; }
.control select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); width: 100%; height: 100%; outline: none; cursor: pointer; }
.sub { font-size: 12.5px; color: #9A9A9A; line-height: 1.4; }

.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check .box {
  flex: none; width: 18px; height: 18px; border-radius: 3px; margin-top: 2px;
  box-shadow: inset 0 0 0 1.5px #CFCFCF; background: #fff;
  display: grid; place-items: center; transition: background .15s, box-shadow .15s;
}
.check .box svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
/* caixa marcada em sage-deep (o pêssego perdia-se sobre o cartão claro) */
.check input:checked + .box { background: var(--sage-deep); box-shadow: inset 0 0 0 1.5px var(--sage-deep); }
.check input:checked + .box svg { opacity: 1; }
.check .lbl b { display: block; font-size: clamp(14px,1.3vw,16px); font-weight: 400; color: var(--ink); }
.check .lbl small { font-size: 13.5px; color: #8A8A8A; }

.btn-send {
  width: 100%; margin-top: clamp(22px,3vw,38px);
  background: var(--peach); color: #fff; border: 0; cursor: pointer;
  border-radius: 8px; height: 52px;
  font: inherit; font-size: clamp(14px,1.5vw,18px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.btn-send:hover { background: #F79E63; transform: translateY(-1px); }
.btn-send:disabled { opacity: .7; cursor: progress; transform: none; }

/* consentimento RGPD (o pedido é enviado daqui, já não há booking.html) */
#cf-consent-row { margin-top: clamp(18px,2.4vw,26px); align-items: flex-start; }
#cf-consent-row.invalid { outline: 2px solid #C00F0C; outline-offset: 6px; border-radius: 6px; }
.cf-consent-lbl { font-size: 13px; color: var(--slate); line-height: 1.45; }
.cf-consent-lbl a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 2px; }
/* ---------- BILHETE de confirmação (ocupa o lugar do formulário no envio) ---------- */
.ticket {
  margin: clamp(30px,4.4vw,58px) auto 0; max-width: 990px;
  background: var(--cloud); border: 1px solid #E2E2E2; border-radius: 12px;
  padding: clamp(44px,7vw,92px) clamp(22px,6vw,86px);
  text-align: center;
}
.ticket[hidden] { display: none; }
.ticket h2 {
  max-width: 520px; margin-inline: auto;
  font-size: clamp(24px,3.1vw,34px); font-weight: 700; letter-spacing: -.01em;
  color: var(--sage-deep); line-height: 1.28;
}
.ticket p {
  max-width: 540px; margin: clamp(22px,3vw,34px) auto 0;
  font-size: clamp(16px,1.8vw,21px); font-weight: 300; line-height: 1.55; color: #7FB5B0;
}
.ticket .sig { display: block; margin-top: clamp(26px,4vw,44px); font-family: var(--font-script); font-size: clamp(22px,2.4vw,28px); color: var(--peach); }
.ticket-sum {
  max-width: 460px; margin: clamp(30px,4vw,46px) auto 0;
  border-top: 1px solid #DEDEDE; padding-top: 18px; text-align: left;
}
.ticket-sum .row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15px; }
.ticket-sum .row span { color: #8A8A8A; }
.ticket-sum .row strong { color: var(--ink); font-weight: 600; text-align: right; }
.ticket .home-link { margin-top: clamp(26px,3.4vw,40px); }
.ticket .home-link a {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--peach); color: #fff; border-radius: 8px; height: 50px; padding: 0 34px;
  font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ticket .home-link a:hover { background: #F79E63; }

/* calendário (mesmo componente das outras páginas) */
.date-field { position: relative; }
.cal {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 200;
  width: 318px; max-width: calc(100vw - 40px);
  max-height: calc(100vh - 120px); overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  box-shadow: 0 18px 50px rgba(30,30,30,.22);
}
.cal.up { top: auto; bottom: calc(100% + 10px); }
.cal[hidden] { display: none; }
.pop-open { position: relative; z-index: 90; }
.cal-head { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.cal-head .mlabel { font-size: 16px; font-weight: 600; color: var(--ink); }
.cal-nav { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); background: none; border: 0; cursor: pointer; }
.cal-nav:hover { background: #FCEADC; }
.cal-nav svg { width: 18px; height: 18px; }
.cal-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cal-grid .dow { font-size: 12px; font-weight: 600; color: var(--slate); text-align: center; padding-bottom: 6px; }
.cal-grid .day { aspect-ratio: 1; display: grid; place-items: center; font-size: 13px; color: var(--ink); border-radius: 8px; cursor: pointer; }
.cal-grid .day:hover { background: #FCEADC; }
.cal-grid .day.muted { color: #C9C9C9; cursor: default; }
.cal-grid .day.muted:hover { background: none; }
.cal-grid .day.range { background: #FCEADC; border-radius: 0; }
.cal-grid .day.active { background: var(--peach); color: #fff; font-weight: 600; }

/* ---------- BANDA PÊSSEGO (WE PROVIDE) ---------- */
.access { background: var(--peach); padding: clamp(44px,6vw,76px) 0; }
.access-head { text-align: center; margin-bottom: clamp(30px,4.4vw,52px); }
.access-l1 { display: block; font-size: clamp(22px,2.6vw,36px); font-weight: 300; color: rgba(255,255,255,.78); }
.access-l2 { display: block; margin-top: 1px; font-size: clamp(26px,3.2vw,44px); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .01em; }
/* sem cartões: ícones outline brancos sobre o pêssego (Figma) */
.amn-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px,3.4vw,46px) clamp(14px,2.6vw,40px); margin-inline: auto; }
.amn-grid.six { max-width: 920px; }
/* 7 por fila (Figma da Tempo & Amor): 7×110 + 6×40 de intervalo */
.amn-grid.seven { max-width: 1090px; }
.amn {
  flex: 0 0 auto; width: clamp(84px, 7.6vw, 110px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px,1.6vw,20px); text-align: center;
}
.amn-ico { width: clamp(48px,4.6vw,64px); height: clamp(48px,4.6vw,64px); flex: none; display: block; object-fit: contain; }
img.amn-ico { filter: brightness(0) invert(1); }
.amn span { font-size: clamp(10.5px,1vw,14px); font-weight: 400; letter-spacing: .09em; text-transform: uppercase; color: #fff; line-height: 1.3; }

/* ---------- LIGHTBOX (fotos em grande) ---------- */
.lb { position: fixed; inset: 0; z-index: 500; background: rgba(20,18,14,.93); display: grid; place-items: center; }
.lb[hidden] { display: none; }
.lb img { max-width: min(1240px, 74vw); max-height: 84vh; border-radius: 8px; display: block; cursor: pointer; }
.lb-close {
  position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center;
}
.lb-close:hover { background: rgba(255,255,255,.26); }
.lb-close svg { width: 20px; height: 20px; }
.lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: 13px; letter-spacing: .12em; }