/* ---------- A cena do iceberg ----------
   Dois blocos empilhados: céu e mar. A costura entre eles É a linha d'água,
   então ela nunca sai do lugar. Cada bloco é uma grade de três colunas com a
   do meio vazia, reservada pro gelo. Assim texto e desenho não colidem: não
   existe posição absoluta pra dar errado. */

.cena-iceberg {
  position: relative; isolation: isolate; overflow: hidden;
  /* O gelo é medido uma vez e os dois blocos reservam a altura dele.
     Com isso o texto nunca cai em cima do desenho, em largura nenhuma.
     1.421 = 1080/760, a proporção do SVG. 27,8% é a parte fora da água. */
  --gelo-larg: min(780px, 66vw);
  --gelo-alt: calc(var(--gelo-larg) * 1.421);
  --folga: clamp(28px, 4vw, 56px);
}

.ceu, .mar { position: relative; }
.ceu {
  background:
    radial-gradient(ellipse 110% 90% at 50% 0%, #FFFFFF 0%, transparent 62%),
    linear-gradient(180deg, #9CCBF5 0%, #CFE5F8 62%, #E9F4FC 100%);
  display: flex; align-items: flex-end;
  padding: clamp(12px, 1.6vw, 20px) var(--space-6)
           calc(var(--gelo-alt) * 0.15 + var(--folga));
}
.mar {
  background: linear-gradient(180deg, #2E7BC9 0%, #15468F 18%, #0A2557 48%, #05122E 76%, #05070F 100%);
  padding: clamp(40px, 6vw, 72px) var(--space-6) clamp(48px, 6vw, 80px);
  min-height: calc(var(--gelo-alt) * 0.722 + var(--folga));
  overflow: hidden;
}
/* A costura, e é dela que o gelo pendura */
.costura {
  position: relative; height: 0; z-index: 4;
  border-top: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 0 26px 3px rgba(255,255,255,.28);
}
.gelo {
  position: absolute; left: 50%; top: 0;
  width: var(--gelo-larg);
  /* o SVG tem a superfície em 27,8% da altura: subindo essa fração, a linha
     do desenho cai exatamente sobre a costura, em qualquer largura */
  transform: translate(-50%, -27.8%);
  z-index: 3; pointer-events: none;
  filter: drop-shadow(0 22px 48px rgba(6,22,46,.45));
}
.gelo img { width: 100%; height: auto; display: block; }

/* Três colunas, a do meio reservada pro gelo */
.orla {
  display: grid; grid-template-columns: 1fr min(470px, 44vw) 1fr;
  gap: clamp(20px, 3vw, 44px) var(--space-6);
  max-width: 1240px; margin-inline: auto;
  align-items: start; position: relative; z-index: 2;
}
.orla > .meio { grid-column: 2; }
.orla > .e { grid-column: 1; }
.orla > .d { grid-column: 3; text-align: right; }

.nota { font-size: 14px; line-height: 21px; margin: 0; }
.nota::before { content: ""; display: block; width: 22px; height: 2px; margin-bottom: 8px; }
.d .nota::before { margin-left: auto; }
.ceu .nota { color: #1A54D8; }
.ceu .nota::before { background: #1A54D8; }
.mar .nota { color: var(--accent); }
.mar .nota::before { background: var(--accent); }

.titulo-agua h2 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: .98; font-size: clamp(22px, 2.6vw, 34px); margin: 0;
}
.titulo-agua .rotulo { margin-bottom: var(--space-2); }
.ceu .titulo-agua h2 { color: #06162E; }
.ceu .titulo-agua .rotulo { color: #3A5C80; }
.mar .titulo-agua h2 { color: #FFFFFF; }
.mar .titulo-agua .rotulo { color: var(--accent); }

/* Luz e partículas, só na água */
.raios, .particulas { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.raios span {
  position: absolute; top: -10%; width: 13vw; height: 85%;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, transparent 70%);
  filter: blur(16px); transform-origin: top center;
}
.raios span:nth-child(1) { left: 12%; transform: rotate(7deg); }
.raios span:nth-child(2) { left: 44%; transform: rotate(-5deg); opacity: .65; }
.raios span:nth-child(3) { left: 74%; transform: rotate(9deg); opacity: .5; }
.particulas i { position: absolute; border-radius: 50%; background: rgba(220,238,255,.5); animation: subir linear infinite; }
@keyframes subir {
  from { transform: translateY(0); opacity: 0; }
  12% { opacity: .7; } 88% { opacity: .35; }
  to { transform: translateY(-80vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .particulas i { animation: none; } }

/* Celular: uma coluna. O gelo entra no fluxo, entre os dois blocos. */

/* Uma palavra por item, na fonte secundária e em corpo pequeno.
   Espalhadas sem alinhamento, só passando por cima do gelo. */
.palavras { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.palavras span {
  position: absolute; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(11px, 1.15vw, 15px); letter-spacing: .02em;
}


/* ---------- Títulos da cena ----------
   Cima à esquerda, baixo à direita, os dois com o mesmo respiro da borda
   que o resto da página usa (--space-6). */
.orla--limpa { display: block; max-width: none; margin-inline: 0; }
.ceu .orla--limpa { padding-top: 0; text-align: left; width: 100%; }
.mar .orla--limpa {
  text-align: right; display: flex; justify-content: flex-end; align-items: flex-end;
  min-height: calc(var(--gelo-alt) * 0.62);
}
.orla--limpa .titulo-agua { display: inline-block; max-width: min(460px, 40%); }
.ceu .orla--limpa .titulo-agua { text-align: left; }
.mar .orla--limpa .titulo-agua { text-align: right; }
.orla--limpa .titulo-agua h2 { font-size: clamp(28px, 4.6vw, 46px); }

/* Em cima: desce e fica à esquerda. Embaixo: sobe e vai pra direita. */
.ceu .orla--limpa { padding-top: 0; text-align: left; width: 100%; }
.mar .orla--limpa { text-align: right; display: flex; justify-content: flex-end; align-items: flex-end;
                    min-height: calc(var(--gelo-alt) * 0.62); }
.orla--limpa .titulo-agua { display: inline-block; max-width: min(420px, 36%); }
.ceu .orla--limpa .titulo-agua { text-align: left; }
.mar .orla--limpa .titulo-agua { text-align: right; }
.orla--limpa .titulo-agua h2 { font-size: clamp(28px, 4.6vw, 46px); }

/* Cor por grupo: acima da água azul, abaixo lima.
   O lima sobre o gelo claro precisa de um fio de sombra pra não sumir. */
.palavras .p-cima  { color: #12409E; }
.palavras .p-fundo { color: var(--accent); text-shadow: 0 1px 4px rgba(4,18,46,.45); }

/* ---------- Celular ----------
   Mesmo comportamento do desktop: o gelo continua pendurado na costura e as
   palavras continuam espalhadas sobre ele. Só a escala muda. */
@media (max-width: 860px) {
  .cena-iceberg { --gelo-larg: 96vw; --folga: 20px; }
  /* o céu vira bloco: o título sobe pro topo em vez de ficar colado na ponta */
  .ceu { display: block; padding-inline: var(--space-4); padding-top: clamp(16px, 4vw, 24px); }
  .mar { padding-inline: var(--space-4); }
  /* o título de cima não pode alcançar a ponta, que é central */
  .ceu .orla--limpa .titulo-agua { max-width: 56%; }
  .orla--limpa .titulo-agua h2 { font-size: clamp(20px, 5.6vw, 26px); }
  /* o de baixo desce pra fora do corpo do gelo */
  .mar { padding-bottom: calc(var(--gelo-alt) * 0.12 + var(--folga)); }
  .mar .orla--limpa { min-height: calc(var(--gelo-alt) * 0.82); }
  .mar .orla--limpa .titulo-agua { max-width: 64%; }
  .palavras span { font-size: 9.5px; letter-spacing: 0; }
  .raios span { width: 30vw; }
}
@media (max-width: 480px) {
  .cena-iceberg { --gelo-larg: 100vw; }
  .palavras span { font-size: 8.5px; }
  .ceu .orla--limpa .titulo-agua { max-width: 60%; }
  .mar .orla--limpa .titulo-agua { max-width: 70%; }
}