/* =========================================================
   Master Fluxo · Guia do Participante
   ========================================================= */

:root {
  --creme: #FFFBDB;
  --laranja: #E75927;
  --marinho: #2F3359;

  --creme-escuro: #F6EFC4;
  --cartao: #FFFDF3;
  --vidro: rgba(255, 253, 243, .42);           /* creme translúcido dos cards */
  --vidro-aberto: rgba(255, 253, 243, .62);    /* card aberto: mais "aceso" e legível */
  --vidro-borda: rgba(255, 255, 255, .7);
  --vidro-desfoque: blur(14px) saturate(1.35);
  --linho: var(--creme) url("../assets/textura-linho.jpg") repeat 0 0 / 384px;
  --marinho-suave: rgba(47, 51, 89, .72);
  --linha: rgba(47, 51, 89, .14);

  --raio: 18px;
  --gutter: 16px;
  --largura: 680px;
  --fonte: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--marinho);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.intro-ativa { overflow: hidden; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.1; }

p { margin: 0 0 1em; }

button { font: inherit; color: inherit; }

svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.n-master { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.n-fluxo  { font-weight: 200; text-transform: uppercase; letter-spacing: .02em; }

/* Texto que ainda precisa ser confirmado — some ao remover a classe */
.a-confirmar { background: rgba(231, 89, 39, .16); border-radius: 4px; padding: 0 .2em; }


/* =========================================================
   FUNDO DE TECIDO
   A trama "respira" bem devagar e uma faixa de luz suave passa
   por cima, como um pano mexendo com o vento.
   ========================================================= */

.tecido {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--creme);
}

.tecido-trama {
  position: absolute;
  inset: -3%;
  background: var(--linho);
  animation: tecido-respira 14s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes tecido-respira {
  from { transform: none; }
  to   { transform: scale(1.02) skew(.4deg, .2deg) translate(.5%, -.3%); }
}

/* Faixas de luz e sombra bem suaves que atravessam o tecido.
   A camada anda exatamente um "período" do degradê e recomeça sem emenda. */
.tecido-luz {
  --periodo: 40vmax;
  --passo: 41.4vmax;          /* período ÷ cos(15°), por causa do ângulo de 105° */
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--passo) * -1);
  width: calc(100% + var(--passo));
  background: repeating-linear-gradient(105deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, .32) 9vmax,
    rgba(255, 255, 255, 0) 18vmax,
    rgba(110, 85, 35, .07) 29vmax,
    rgba(110, 85, 35, 0) var(--periodo));
  animation: tecido-onda 16s linear infinite;
  will-change: transform;
}

@keyframes tecido-onda {
  to { transform: translateX(var(--passo)); }
}

/* Ordem das camadas: tecido (0) → intro (40) → sombra das folhas (50) → página (60).
   A sombra cai sobre o tecido e as ilustrações da intro, e os blocos da página
   ficam por cima dela, "flutuando". */
#pagina {
  position: relative;
  z-index: 60;
  /* a página ocupa no mínimo a altura da tela: em telas altas (monitor na vertical)
     o rodapé azul cresce até o fim, em vez de sobrar fundo embaixo dele */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

#pagina > .capa,
#pagina > .secoes { width: 100%; }
body.intro-ativa #pagina { pointer-events: none; }   /* invisível durante a intro: o toque vai para a intro */


/* =========================================================
   SOMBRA DE FOLHAS DE COQUEIRO
   ========================================================= */

.sombras {
  position: fixed;
  inset: 0;
  z-index: 50;                /* acima do tecido e da intro, abaixo da página */
  overflow: hidden;
  pointer-events: none;
}

/* cada folha nasce num ponto fora da tela e balança em torno do talo */
.sombra {
  position: absolute;
  width: clamp(340px, 62vmax, 1100px);
  opacity: .15;
  transform-origin: 0 0;
  transform: scaleX(var(--espelho, 1)) rotate(var(--angulo, 0deg));
  animation: balanco var(--tempo, 8s) ease-in-out var(--atraso, 0s) infinite alternate;
  will-change: transform, rotate;
}

.sombra img { display: block; width: 100%; height: auto; }

.sombra--1 { left: 104%; top: -5%; --espelho: -1; --angulo: 6deg;  --tempo: 7s; }
.sombra--2 { left: 106%; top: 14%; --espelho: -1; --angulo: 24deg; --tempo: 9s; --atraso: -3s; opacity: .12; }
.sombra--3 { left: -6%;  top: 58%; --angulo: -14deg; --tempo: 8s; --atraso: -5s; opacity: .11; }

/* No celular em pé fica só a folha de cima, para não pesar a tela */
@media (max-aspect-ratio: 1/1) {
  .sombra--2,
  .sombra--3 { display: none; }
}

@keyframes balanco {
  from { rotate: -1.6deg; translate: 0 0; }
  to   { rotate: 1.8deg;  translate: .8% .5%; }
}


/* =========================================================
   INTRO
   As posições vêm do layout do Figma (ferramentas/gerar-intro.py).
   Cada peça fica ancorada pelo centro, em % da tela, e o tamanho
   segue a escala --u (o menor entre largura e altura da tela).
   ========================================================= */

#intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: transparent;   /* o tecido do fundo aparece por trás */
  overflow: hidden;
  transition: opacity .6s ease;
}

#intro.saindo { opacity: 0; pointer-events: none; }

.palco {
  position: absolute;
  inset: 0;
  container-type: size;
}

.palco-web { --u: min(100vw / 1920, 100vh / 1080); }
.palco-mob { --u: min(100vw / 1080, 100vh / 1920); display: none; }

/* navegadores atuais: mede o próprio palco (mais preciso no celular, com a barra do navegador) */
@supports (width: 1cqw) {
  .palco-web { --u: min(100cqw / 1920, 100cqh / 1080); }
  .palco-mob { --u: min(100cqw / 1080, 100cqh / 1920); }
}

/* Celular em pé usa a tela mobile */
@media (max-aspect-ratio: 1/1) {
  .palco-web { display: none; }
  .palco-mob { display: block; }
}

.camada {
  position: absolute;
  width: 0;
  height: 0;
}

.giro {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--s) * var(--u));
  aspect-ratio: 1;
}

.giro img {
  position: absolute;
  height: auto;
  max-width: none;
}

/* Estado inicial (antes da animação e ao reiniciar o loop) */
.camada.il,
.letra { opacity: 0; }
.camada.circ { transform: scale(0); }

.titulo-svg { overflow: visible; }
.letra { transform-box: fill-box; transform-origin: 50% 100%; }

.intro-pular {
  position: absolute;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 4;
  border: 1px solid var(--linha);
  background: rgba(255, 251, 219, .85);
  border-radius: 99px;
  padding: 8px 18px;
  font-size: 14px;
  cursor: pointer;
}

.modo-preview .intro-pular { display: none; }


/* =========================================================
   CAPA
   ========================================================= */

.capa {
  position: relative;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 72px var(--gutter) 32px;
  text-align: center;
  overflow: hidden;
}

.capa-nome { font-size: clamp(2.2rem, 10.6vw, 5rem); line-height: .95; white-space: nowrap; }

.capa-local { margin: 14px 0 4px; font-size: 18px; font-weight: 500; }

.capa-data {
  margin: 0 0 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 14px;
  color: var(--laranja);
}

.capa-texto { max-width: 34em; margin: 0 auto; color: var(--marinho-suave); }


/* =========================================================
   SEÇÕES EXPANSÍVEIS
   ========================================================= */

.secoes {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--gutter) 32px;
  display: grid;
  gap: 12px;
}

/* Cards em vidro fosco: desfocam o tecido e a sombra das folhas que ficam atrás */
.secao {
  background: var(--vidro);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),       /* luz batendo na borda de cima */
    0 8px 24px rgba(47, 51, 89, .08);
  overflow: hidden;
  transition: background .45s ease, box-shadow .45s ease;
}

.secao[open] {
  background: var(--vidro-aberto);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 12px 32px rgba(47, 51, 89, .12);
}

/* navegadores sem desfoque: card mais opaco para manter a leitura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .secao { background: rgba(255, 253, 243, .88); }
  .secao[open] { background: var(--cartao); }
}

.secao summary,
.secao-topo {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s ease;
}

@media (hover: hover) { .secao summary:hover { background: rgba(255, 255, 255, .22); } }
.secao summary:active { background: rgba(255, 255, 255, .34); }

.secao summary::-webkit-details-marker { display: none; }

.secao summary:focus-visible { outline: 2px solid var(--laranja); outline-offset: -2px; border-radius: var(--raio); }

/* ícone solto, só o traço laranja (sem o quadrado de fundo) */
.secao-icone {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--laranja);
  display: grid;
  place-items: center;
}

.secao-icone svg { width: 28px; height: 28px; stroke-width: 1.8; }

.secao-titulos { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.secao-titulos strong { font-size: 18px; font-weight: 700; line-height: 1.2; }
.secao-titulos small { font-size: 14px; color: var(--marinho-suave); }

.secao-seta {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  border: 1px solid var(--vidro-borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  position: relative;
  transition: transform .35s ease, background .35s, border-color .35s;
}

.secao-seta::before,
.secao-seta::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--marinho);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

/* + vira − girando o traço vertical até deitar (sem trocar a cor do botão) */
.secao-seta::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s cubic-bezier(.3, .7, .3, 1); }
.secao[open] .secao-seta::after { transform: translate(-50%, -50%) rotate(180deg); }

.secao-corpo { padding: 4px 16px 20px; }

.secao-corpo h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--laranja);
  margin: 22px 0 8px;
}

.nota { font-size: 14px; color: var(--marinho-suave); }

.destaque {
  border-left: 4px solid var(--laranja);
  padding-left: 12px;
}

/* Aviso de "consulte valores e disponibilidade" (sempre perto de preços e reservas) */
.aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(231, 89, 39, .08);
  border: 1px solid rgba(231, 89, 39, .25);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.45;
}

.aviso svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--laranja); }

/* Transfer (Como chegar): bloco azul para chamar atenção */
.transfer-destaque {
  margin: 20px 0 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--marinho);
  color: var(--creme);
  box-shadow: 0 10px 24px rgba(47, 51, 89, .2);
}

.transfer-topo { display: flex; gap: 12px; align-items: flex-start; }
.transfer-topo strong { display: block; font-size: 17px; color: #fff; margin-bottom: 4px; }
.transfer-topo p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 251, 219, .88); }

.transfer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 16px 0 10px;
}

.transfer-bloco {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
}

.transfer-nota { margin: 0; font-size: 13px; color: rgba(255, 251, 219, .75); }

.transfer-rota {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.transfer-rota span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: 2px;
}

.transfer-dia { margin: 0 0 10px; font-size: 14px; color: rgba(255, 251, 219, .7); }

.transfer-horas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.transfer-horas li {
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--creme);
  color: var(--marinho);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Chamada em destaque (azul) para instruções que o participante não pode perder */
.chamada {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--marinho);
  color: var(--creme);
  box-shadow: 0 8px 20px rgba(47, 51, 89, .18);
}

.chamada strong { color: #fff; }
.chamada > div > strong { display: block; font-size: 16px; line-height: 1.3; margin-bottom: 4px; }
.chamada p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 251, 219, .88); }

.chamada-icone {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--laranja);
  color: var(--creme);
}

.chamada-icone svg { width: 20px; height: 20px; }

.lista { padding-left: 1.1em; margin: 0 0 1em; }
.lista li { margin-bottom: 4px; }

.info-linha {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  margin-bottom: 16px;
}

.info-linha svg { flex: none; width: 20px; height: 20px; color: var(--laranja); margin-top: 2px; }

.botao {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 99px;
  background: var(--marinho);
  color: var(--creme);
  text-decoration: none;
  font-weight: 600;
  margin: 8px 0 14px;
  transition: transform .15s, background .2s;
}

.botao:hover { background: #3b4070; }
.botao:active { transform: scale(.98); }

.botao--claro { background: var(--creme); color: var(--marinho); }
.botao--claro:hover { background: #fff; }


/* Seção ainda sem conteúdo */
.secao--em-breve .secao-topo { cursor: default; }
.secao--em-breve .secao-titulos,
.secao--em-breve .secao-icone { opacity: .55; }

/* no celular, título e etiqueta "Em breve" cabem na mesma linha */
@media (max-width: 440px) {
  .secao--em-breve .secao-topo { gap: 10px; }
  .secao--em-breve .secao-titulos strong { font-size: 16px; }
  .secao--em-breve .tag-em-breve { font-size: 10.5px; padding: 3px 7px; }
}

@media (max-width: 370px) {
  .secao--em-breve .secao-titulos strong { font-size: 15px; }
}

.tag-em-breve {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  color: var(--laranja);
  border: 1.5px solid var(--laranja);
  border-radius: 99px;
  padding: 4px 8px;
}

/* Botão "Fechar" no fim de cada seção (evita rolar de volta até o título no celular) */
.secao-fechar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border: 0;
  border-top: 1px solid var(--linha);
  background: none;
  color: var(--marinho-suave);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.secao-fechar svg { width: 16px; height: 16px; }


/* =========================================================
   VÍDEO
   ========================================================= */

.video {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--marinho);
  margin-bottom: 16px;
}

.video video {
  display: block;
  width: 100%;
  max-height: 78vh;
  max-height: 78svh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--marinho);
}

.video-vazio { display: none; }

/* botão de vidro "Ativar som" (no alto, para não cobrir os controles do vídeo) */
.video-som {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 99px;
  background: rgba(47, 51, 89, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--creme);
  font: 600 14px var(--fonte);
  cursor: pointer;
}

.video-som[hidden] { display: none; }
.video-som svg { width: 18px; height: 18px; }

.video.sem-video video { display: none; }

.video.sem-video .video-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 9;
  color: var(--creme);
  font-size: 14px;
  opacity: .85;
}

.video-vazio svg { width: 32px; height: 32px; }

/* sem vídeo, mas com foto de capa: mostra só a foto */
.video.com-capa .video-vazio {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  opacity: 1;
}

.video.com-capa .video-vazio > * { display: none; }


/* =========================================================
   FOTOS (com espaço reservado até a imagem existir)
   ========================================================= */

.foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background:
    repeating-linear-gradient(135deg, rgba(231, 89, 39, .08) 0 12px, transparent 12px 24px),
    var(--creme-escuro);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.foto::after {
  content: attr(data-rotulo);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--marinho-suave);
}

.foto.carregada { background-color: var(--creme-escuro); }
.foto.carregada::after { display: none; }

.foto--larga { aspect-ratio: 16 / 10; margin-bottom: 16px; }


/* =========================================================
   CARROSSEL DE QUARTOS
   ========================================================= */

.carrossel { margin: 0 calc(var(--gutter) * -1) 12px; }

.carrossel-trilho {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  padding: 4px var(--gutter) 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carrossel-trilho::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 84%;
  max-width: 340px;
  scroll-snap-align: start;
  background: var(--creme);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--linha);
}

.slide .foto { border-radius: 0; }

.slide-info { padding: 14px; }
.slide-info h4 { font-size: 18px; margin-bottom: 8px; }
.slide-info p:last-child { margin: 0; font-size: 15px; }

.slide-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px !important; }
.slide-tags span {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--marinho);
  color: var(--creme);
}
.slide-tags span:first-child { background: var(--laranja); }
.slide { display: flex; flex-direction: column; }
.slide-info { flex: 1; display: flex; flex-direction: column; }

.slide-info p.slide-aviso {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;          /* sempre no pé do card, alinhado entre os cards */
  padding-top: 10px;
  border-top: 1px solid var(--linha);
  font-size: 13px;
  font-weight: 600;
  color: var(--laranja);
}

.slide-aviso svg { flex: none; width: 15px; height: 15px; }

.slide-tags span.gratis { background: var(--marinho); }
.slide-tags span.dia { background: var(--creme-escuro); color: var(--marinho); }

.slide-categoria {
  margin: 0 0 4px !important;
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--laranja);
}

.carrossel-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}

.carrossel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--cartao);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.carrossel-btn svg { width: 18px; height: 18px; }
.carrossel-btn:disabled { opacity: .35; cursor: default; }

.carrossel-pontos { display: flex; gap: 6px; }
.carrossel-pontos span {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--linha);
  transition: width .3s, background .3s;
}
.carrossel-pontos span.ativo { width: 20px; background: var(--laranja); }


/* =========================================================
   ÁREAS COMUNS
   ========================================================= */

.grade-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.grade-areas figure { margin: 0; }
.grade-areas .foto { aspect-ratio: 1; }
.grade-areas figcaption { font-size: 14px; font-weight: 600; margin-top: 6px; line-height: 1.3; }


/* =========================================================
   CRONOGRAMA
   ========================================================= */

.abas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 4px;
  margin: 18px 0 18px;
}

.aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 6px 0 8px;
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  color: var(--marinho);
  cursor: pointer;
  transition: background .25s, color .25s;
}

.aba-dia { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.aba.ativa { background: var(--marinho); color: var(--creme); }

/* dias ainda não liberados */
.aba--breve { cursor: default; color: var(--marinho-suave); opacity: .7; }
.aba-breve {
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--laranja);
}

/* linha do tempo */
.agenda {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--linha);
}

.ag { position: relative; padding: 0 0 18px 10px; }
.ag:last-child { padding-bottom: 0; }

.ag::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--laranja);
  box-shadow: 0 0 0 4px rgba(255, 253, 243, .9);
}

.hora {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--laranja);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

.ag strong { display: block; font-size: 16px; line-height: 1.3; }
.ag p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: var(--marinho-suave); }

/* refeições: mais discretas */
.ag--ref::before { background: var(--creme-escuro); border: 2px solid var(--laranja); width: 8px; height: 8px; left: -25px; }
.ag--ref strong { font-weight: 500; color: var(--marinho-suave); }

/* palestras: palestrante em cima, tema embaixo */
.ag--fala::before { background: var(--marinho); }
.ag-pessoa { font-size: 17px !important; }
.ag-tema { color: var(--marinho) !important; }

/* manhã / tarde livre em destaque */
.ag--livre::before { background: var(--laranja); width: 14px; height: 14px; left: -28px; }
.ag--livre > strong,
.ag--livre > p { position: relative; }
.ag--livre {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(231, 89, 39, .1);
  border: 1px dashed rgba(231, 89, 39, .55);
}
.ag--livre::before { top: 17px; }
.ag--livre strong { color: var(--laranja); font-size: 17px; }


/* Links de resumos e fotos */
.link-lista { display: grid; gap: 8px; }

.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--linha);
  color: var(--marinho);
  text-decoration: none;
  transition: background .2s;
}

.link-card:hover { background: #fff; }
.link-card-texto { display: flex; flex-direction: column; min-width: 0; }
.link-card-texto strong { font-size: 16px; line-height: 1.3; }
.link-card-texto small { font-size: 14px; color: var(--marinho-suave); }
.link-card-acao { flex: none; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--laranja); white-space: nowrap; }
.link-card-acao svg { width: 16px; height: 16px; }


/* =========================================================
   DICAS
   ========================================================= */

.dica { display: flex; gap: 12px; margin-bottom: 14px; }
.dica p { margin: 0; }
.dica-num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--laranja);
  color: var(--laranja);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}


/* =========================================================
   RODAPÉ
   ========================================================= */

.rodape {
  position: relative;
  background: var(--marinho);
  color: var(--creme);
  text-align: center;
  padding: 56px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  margin-top: 24px;
  flex: 1 0 auto;             /* estica até o fim da tela quando sobra espaço */
  overflow: hidden;
}

.rodape > * { max-width: 30em; margin-left: auto; margin-right: auto; }

.rodape h2 { font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.rodape p { opacity: .85; }
.rodape .botao { max-width: 320px; }

/* contato da Clara: toque copia o número (sem link) */
.contato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 320px;
  margin: 8px auto 0;
  padding: 14px 20px;
  border: 0;
  border-radius: 20px;
  background: var(--creme);
  color: var(--marinho);
  font: inherit;
  cursor: pointer;
  transition: transform .15s, background .2s;
  -webkit-tap-highlight-color: transparent;
}

.contato:hover { background: #fff; }
.contato:active { transform: scale(.98); }
.contato:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

.contato-nome { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--laranja); }
.contato-numero { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; user-select: all; }
.contato-acao { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--marinho-suave); }
.contato-acao svg { width: 16px; height: 16px; }
.contato.copiado .contato-acao { color: var(--marinho); font-weight: 600; }

.rodape-assinatura { margin-top: 28px; font-size: 14px; letter-spacing: .1em; }

/* Mapa do resort com o local do evento piscando */
.mapa { margin: 0 0 4px; }

/* o mapa tem fundo transparente: fica "impresso" direto no vidro do card, sem moldura */
.mapa-quadro {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.mapa-quadro:focus-visible { outline: 2px solid var(--laranja); outline-offset: 4px; border-radius: 12px; }

/* "Mostrar onde estou": ponto azul da pessoa no mapa */
.localizacao { margin-top: 14px; }

.botao-local {
  width: 100%;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  margin: 0;
}

.botao-local svg { width: 20px; height: 20px; }
.botao-local:disabled { opacity: .45; cursor: default; }
.botao-local[aria-pressed="true"] { background: rgba(47, 51, 89, .12); color: var(--marinho); }

.local-status {
  margin: 8px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--marinho-suave);
}

.mapa-voce,
.mapa-precisao {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  transition: left .8s ease, top .8s ease, width .8s ease;
}

.mapa-voce {
  --azul: #1E6BFF;
  z-index: 2;
  width: clamp(12px, 2.2%, 18px);
  aspect-ratio: 1;
  background: var(--azul);
  box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .3);
}

.mapa-voce::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(30, 107, 255, .35);
  animation: voce-pulso 2s ease-out infinite;
}

@keyframes voce-pulso {
  from { transform: scale(1);   opacity: .8; }
  to   { transform: scale(3.2); opacity: 0; }
}

/* margem de erro do GPS */
.mapa-precisao {
  z-index: 1;
  aspect-ratio: 1;
  background: rgba(30, 107, 255, .12);
  border: 1px solid rgba(30, 107, 255, .35);
}

/* Mapa ampliado */
.mapa-zoom {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--creme);
  color: var(--marinho);
}

.mapa-zoom::backdrop { background: rgba(47, 51, 89, .6); }

.mapa-zoom[open] { display: flex; flex-direction: column; }

.mapa-zoom-area {
  flex: 1;
  overflow: auto;
  display: flex;               /* com "margin: auto" no mapa: centraliza sem cortar a borda esquerda */
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* no celular o mapa fica maior que a tela, para ler os nomes arrastando para os lados */
.mapa-zoom-area .mapa-img { flex: none; margin: auto; width: max(100%, 1100px); max-width: 1384px; }

/* rodapé do mapa ampliado: status da localização + botões lado a lado */
.mapa-zoom-rodape {
  flex: none;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
}

.mapa-zoom-rodape .local-status { margin: 0 0 8px; }

.mapa-zoom-botoes { display: flex; gap: 8px; }
.mapa-zoom-botoes > * { flex: 1; min-width: 0; }
.mapa-zoom-botoes .botao-local { padding: 10px 12px; white-space: nowrap; }

.mapa-zoom-fechar {
  min-height: 48px;
  border: 1px solid var(--linha);
  border-radius: 99px;
  background: #fff;
  color: var(--marinho);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.mapa-img { position: relative; display: block; }
.mapa-img img { width: 100%; height: auto; }

.mapa-ponto {
  --vermelho: #FE0000;
  position: absolute;
  width: clamp(12px, 2.5%, 20px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vermelho);
  box-shadow: 0 0 0 2px #fff;
  transform: translate(-50%, -50%);
  animation: ponto-pisca 1.2s ease-in-out infinite;
}

/* duas ondas saindo do ponto, como um radar */
.mapa-ponto::before,
.mapa-ponto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--vermelho);
  animation: ponto-onda 1.8s ease-out infinite;
}

.mapa-ponto::after { animation-delay: .9s; }

@keyframes ponto-pisca {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

@keyframes ponto-onda {
  from { transform: scale(1);   opacity: .9; }
  to   { transform: scale(3.4); opacity: 0; }
}

.mapa figcaption {
  margin-top: 12px;
  line-height: 1.5;
  text-align: center;
  font-size: 14px;
  opacity: .9;
}

.mapa-legenda {
  display: inline-block;
  vertical-align: 1px;
  margin-right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FE0000;
  box-shadow: 0 0 0 2px #fff;
}


/* =========================================================
   ENTRADA DA PÁGINA APÓS A INTRO
   ========================================================= */

#pagina { opacity: 0; transition: opacity .8s ease; }
body.pagina-visivel #pagina { opacity: 1; }

@media (min-width: 720px) {
  .capa { padding-top: 104px; }
  .grade-areas { grid-template-columns: repeat(4, 1fr); }
  .carrossel { margin: 0 0 12px; }
  .carrossel-trilho { padding-left: 0; padding-right: 0; scroll-padding: 0; }
  .slide { flex-basis: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tecido-trama, .tecido-luz, .sombra, .mapa-ponto, .mapa-ponto::before, .mapa-ponto::after, .mapa-voce::after { animation: none; }
  #pagina { transition: none; }
}