/* ============================================================
   LUFE TRIPS / CHILE 2027
   base.css: Reset, tipografia base, layout e animações de scroll
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;      /* compensa o menu fixo ao pular por âncora */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--grafite);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  line-height: 1.65;
  overflow-x: hidden;            /* trava definitiva contra scroll horizontal */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

/* O navegador aplica margin: 1em 40px em toda <figure> por padrão.
   Sem zerar, cada foto fica 80px mais estreita que a coluna dela. */
figure, figcaption { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: var(--peso-semi);
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
}

p { margin: 0; }

/* Nenhuma palavra longa empurra a caixa dela para fora da tela. */
h1, h2, h3, h4, p, li, a, span, strong, figcaption { overflow-wrap: break-word; }

/* Link dentro de texto corrido: sublinhado discreto e altura de
   toque confortável no celular, sem afastar as linhas do parágrafo. */
.link-texto {
  display: inline-block;
  color: var(--rosa-forte);
  font-weight: var(--peso-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: .55rem;
}

.link-texto:hover { color: var(--rosa); }

::selection { background: var(--rosa); color: var(--branco); }

:focus-visible {
  outline: 3px solid var(--rosa);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

/* Todo o conteúdo da página passa por aqui. A margem lateral é
   definida em um lugar só, então nada encosta na borda da tela.
   O max() protege telas com notch, onde o recorte do aparelho
   invade a lateral em modo paisagem. */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.container--largo { max-width: 1480px; }
.container--estreito { max-width: 940px; }

.secao { position: relative; padding-block: var(--secao-y); }
.secao--clara  { background: var(--creme); }
.secao--creme  { background: var(--creme-2); }
.secao--gelo   { background: linear-gradient(180deg, var(--gelo) 0%, var(--creme) 100%); }
.secao--escura { background: var(--preto); color: var(--branco); }
.secao--escura h2, .secao--escura h3 { color: var(--branco); }

/* ============================================================
   TIPOGRAFIA UTILITÁRIA
   ============================================================ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fonte-texto);
  font-size: var(--t-mini);
  font-weight: var(--peso-black);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rosa);
  margin-bottom: var(--s-3);
}

/* Os subtítulos não levam nenhum traço decorativo antes do texto. */

.eyebrow--centro { justify-content: center; }
.eyebrow--clara { color: var(--rosa-vivo); }

.titulo-secao {
  font-size: var(--t-display);
  max-width: 19ch;
}

.titulo-secao em {
  font-style: italic;
  color: var(--rosa);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.secao--escura .titulo-secao em { color: var(--rosa-vivo); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.7;
  color: var(--chumbo);
  max-width: var(--largura-texto);
  font-weight: var(--peso-regular);
}

.secao--escura .lead { color: rgba(255, 255, 255, .78); }

.cabecalho-secao { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabecalho-secao--centro { text-align: center; }
.cabecalho-secao--centro .titulo-secao { margin-inline: auto; }
.cabecalho-secao--centro .lead { margin-inline: auto; text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   ANIMAÇÕES DE ENTRADA (ativadas pelo reveal.js)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease);
}

.reveal.is-visivel { opacity: 1; transform: none; }

.reveal--zoom { transform: scale(.94); }
.reveal--esq  { transform: translateX(-32px); }
.reveal--dir  { transform: translateX(32px); }

/* Atrasos em cascata para grades de cards */
.reveal[data-atraso="1"] { transition-delay: .08s; }
.reveal[data-atraso="2"] { transition-delay: .16s; }
.reveal[data-atraso="3"] { transition-delay: .24s; }
.reveal[data-atraso="4"] { transition-delay: .32s; }
.reveal[data-atraso="5"] { transition-delay: .40s; }
.reveal[data-atraso="6"] { transition-delay: .48s; }

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Halo que se expande 18px em volta do ícone de 50px (escala 1.72).
   Feito com transform e opacity em vez de box-shadow: assim roda só
   na placa de vídeo, sem redesenhar a página a cada quadro. */
@keyframes pulsar-halo {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.72); opacity: 0; }
  100% { transform: scale(1.72); opacity: 0; }
}

@keyframes descer {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50%      { transform: translateY(9px); opacity: 1; }
}

@keyframes deslizar-cima {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Respeita quem prefere menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* A neve some por completo: parada na tela ela viraria só sujeira */
  .hero__neve { display: none; }
}