/* ============================================================================
   VERSÃO SCROLL — layout editorial (baseline Fase 1; motion no Fase 2)
   ========================================================================== */

/* ---- Barra de navegação / progresso ---- */
.rev-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0.9rem var(--gutter);
  mix-blend-mode: difference; color: #fff;
  pointer-events: none;
  opacity: 0; transform: translateY(-100%); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.rev-nav.scrolled { opacity: 1; transform: none; }
.rev-nav .modes { pointer-events: auto; display: flex; gap: 0.5rem; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.rev-nav .modes a { padding: 0.35rem 0.7rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; opacity: 0.6; }
.rev-nav .modes a.on { opacity: 1; }
.rev-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--coral); z-index: 61; transition: width 0.1s linear; }

/* Contém qualquer transbordo horizontal (travelling, verbo travessia, intro da capa) */
#app { overflow-x: clip; }

/* ---- Marca (SVG oficial "capa concepts", branca) ---- */
.capa .logo img { display: block; width: clamp(150px, 4rem + 14vw, 300px); height: auto; }
.contracapa .logo img { display: block; width: clamp(180px, 6rem + 14vw, 340px); height: auto; margin: 0 auto; }

/* ---- Imagens com LQIP ---- */
.ph { position: relative; overflow: hidden; background: var(--oceano-40); border-radius: var(--r-lg); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph .lqip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.08); transition: opacity 0.6s var(--ease); }
.ph.loaded .lqip { opacity: 0; }
.ph > picture, .ph > img.main { opacity: 0; transition: opacity 0.7s var(--ease); }
.ph.loaded > picture, .ph.loaded > img.main { opacity: 1; }

/* ---- CAPA ---- */
/* minmax(0,1fr): sem isto o item da grade herda min-width:auto e estica até o
   min-content do filho mais largo (a barra de temas), levando a capa inteira —
   e as margens junto — para fora da tela no celular. */
.capa { position: relative; min-height: 100svh; color: var(--areia); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }
.capa .capa-bg { position: absolute; inset: 0; z-index: 0; }
.capa .capa-bg .ph { border-radius: 0; width: 100%; height: 100%; aspect-ratio: auto !important; }
.capa .capa-bg .ph .lqip, .capa .capa-bg .ph img.main { width: 100%; height: 100%; }
/* Uma camada só, de baixo para cima: a espuma da rebentação cai atrás da barra
   de temas e come a leitura. O topo ficou sem escurecimento nenhum, por pedido.
   z-index 2: o canvas do mar vivo é z-index 1 dentro de .capa-bg e entra por
   cima — sem isto o degradê fica debaixo do mar e não escurece nada. */
.capa .capa-bg::after { content: ""; position: absolute; inset: 0; z-index: 2; background:
  linear-gradient(0deg, rgba(22,35,44,0.52) 0%, rgba(22,35,44,0.44) 16%, rgba(22,35,44,0.16) 30%, rgba(22,35,44,0) 44%); }
/* gap: com o corpo maior o conteúdo pode passar de uma tela no telemóvel; sem um
   mínimo garantido as chamadas encostam no ERICEIRA. */
.capa .capa-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; min-height: 100svh; padding: clamp(4.5rem, 3rem + 4vw, 7rem) var(--gutter) var(--gutter); }
/* NB: dentro de clamp()/calc() os sinais + e - EXIGEM espaço em volta. Sem espaço
   a função é inválida e o navegador joga fora a declaração inteira — foi assim que
   esta capa ficou sem padding nenhum, com o texto colado nas bordas. */
.capa .capa-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.capa .logo { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.5rem + 5vw, 5.5rem); letter-spacing: -0.04em; line-height: 0.8; }
.capa .logo small { display: block; font-weight: 400; font-size: 0.2em; letter-spacing: 0.55em; margin-top: 0.4em; padding-left: 0.3em; }
/* Chamadas 70% maiores: a caixa cresce junto (22rem -> 37rem) para as quebras
   de linha ficarem iguais às do impresso, só que em corpo maior. */
.capa .chamadas { display: grid; gap: 1.7rem; max-width: min(37rem, 100%); text-align: right; margin-left: auto; }
.capa .chamadas .c-t { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--step-1) * 1.7); color: var(--areia); text-wrap: balance; }
/* balance: distribui as linhas por igual em vez de encher a primeira e deixar
   uma palavra órfã na segunda ("...que pede menos / pressa"). */
.capa .chamadas .c-x { font-size: calc(var(--step--1) * 1.7); color: var(--areia-70); line-height: 1.4; text-wrap: balance; }
/* Versão B: ERICEIRA em uma única linha na base */
.capa .capa-bottom { display: flex; flex-direction: column; gap: 1.2rem; }
.capa .capa-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.capa .capa-title { display: flex; flex-direction: row; align-items: baseline; }
.capa .capa-title .eri { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 0.6rem + 11.2vw, 12.5rem); line-height: 0.85; letter-spacing: -0.03em; }
.capa .capa-sub { max-width: min(22rem, 100%); font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); text-align: right; margin: 0 0 0.6rem; text-wrap: balance; }
/* Barra de temas 70% maior: corpo 0.7rem -> 1.19rem; folgas passam a em para a
   pastilha crescer na mesma proporção em vez de apertar o texto. */
.temas-bar { display: flex; flex-wrap: wrap; gap: 0.57em 1.29em; font-family: var(--font-display); font-size: 1.19rem; letter-spacing: 0.18em; padding: 1.29em 1.57em; border: 1px solid var(--areia-70); border-radius: 999px; width: max-content; max-width: 100%; }
.temas-bar span::after { content: "|"; margin-left: 1.29em; opacity: 0.45; }
.temas-bar span:last-child::after { content: ""; }
.capa .scroll-cue { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 0.7rem; letter-spacing: 0.2em; opacity: 0.8; }

/* ---- Seções genéricas ---- */
.sec { padding: var(--section-pad) var(--gutter); position: relative; }
.sec .wrap { max-width: 1240px; margin: 0 auto; }
.bg-sage { background: var(--sage); }
.bg-slate { background: var(--slate); color: var(--areia); }
.bg-coral { background: var(--coral); color: var(--areia); }
.bg-areia { background: var(--areia); }
.bg-oceano { background: var(--oceano); color: var(--areia); }
.bg-sage .measure, .bg-areia .measure { color: var(--oceano); }

.kicker { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.7; margin-bottom: 1.2rem; }
.headline { font-size: var(--step-3); max-width: 20ch; margin-bottom: 1.4rem; }
.standfirst { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); line-height: 1.32; max-width: 34ch; margin-bottom: 2rem; opacity: 0.95; }
.measure { max-width: var(--measure); }
.measure p { font-size: var(--step-0); }
.destaque { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.15; max-width: 22ch; margin: 2.5rem 0; }
.destaque.coral { color: var(--coral); }

/* ---- Verbo-cortina (divisor de capítulo, comporta-se como cortina de cinema) ---- */
.verbo-cortina { min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.verbo-cortina .wrap { display: flex; justify-content: center; width: 100%; }
.verbo-cortina .verbo { font-family: var(--font-display); font-weight: 700; font-size: var(--verbo); line-height: 0.78; letter-spacing: -0.04em; display: flex; flex-direction: column; align-items: center; text-align: center; }
.verbo-cortina .sil { display: block; will-change: transform, clip-path, opacity; }
/* baseline (motion-off): divisor legível e estático */
.motion-off .verbo-cortina .verbo, html:not(.motion-on):not(.motion-off) .verbo-cortina .verbo { opacity: 0.9; }
@media (prefers-reduced-motion: reduce){ .verbo-cortina { min-height: 60svh; } .verbo-cortina .verbo { opacity: 0.92; } }

/* ---- Grids editoriais ---- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.split.rev { grid-template-columns: 0.95fr 1.05fr; }
.split .col-text { min-width: 0; }
.figstack { display: grid; gap: 1rem; }
.figstack.two { grid-template-columns: 1fr 1fr; }
.figstack .ph { aspect-ratio: 4/5; }
.figstack .ph.wide { aspect-ratio: 3/2; grid-column: 1 / -1; }
.figstack .ph.tall { aspect-ratio: 3/4; }
.fig-full .ph { aspect-ratio: 16/9; width: 100%; }
figure { margin: 0; }
figcaption { font-size: var(--step--1); opacity: 0.6; margin-top: 0.5rem; }

/* trio de imagens (surf, arquitetura, saborear…)
   O .ph carrega aspect-ratio INLINE (proporção real da foto); na grade a proporção
   da célula tem de vencer (!important) e o item alinha ao topo — senão a foto
   landscape calcula a largura pela altura da linha e invade a vizinha. */
.trio { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 2.5rem; }
.trio > .cel { min-width: 0; align-self: start; }
.trio .ph { width: 100%; min-width: 0; }
.trio > .cel:nth-child(1) { grid-column: span 3; } .trio > .cel:nth-child(1) .ph { aspect-ratio: 3/4 !important; }
.trio > .cel:nth-child(2) { grid-column: span 3; } .trio > .cel:nth-child(2) .ph { aspect-ratio: 3/4 !important; }
.trio > .cel:nth-child(3) { grid-column: span 6; } .trio > .cel:nth-child(3) .ph { aspect-ratio: 16/7 !important; }
@media (min-width: 820px){
  .trio > .cel:nth-child(1){ grid-column: span 2; }
  .trio > .cel:nth-child(2){ grid-column: span 2; }
  .trio > .cel:nth-child(3){ grid-column: span 2; } .trio > .cel:nth-child(3) .ph { aspect-ratio: 3/4 !important; }
}
/* crédito fotográfico embaixo da foto */
.trio .credito { margin-top: 0.5rem; font-size: 0.6rem; letter-spacing: 0.02em; line-height: 1.3; opacity: 0.75; text-align: center; }

/* ---- PRAIAS — travelling horizontal (baseline vertical) ---- */
.praias-travelling { overflow: hidden; }
.praias-track { display: flex; flex-direction: column; gap: 2rem; }
.praias-panel { min-width: 0; }
.praias-panel.p-photo .ph { aspect-ratio: 16/10; border-radius: var(--r-lg); }
.praias-panel.p-note p { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.2; max-width: 22ch; }
.praias-panel.p-text .headline { margin-bottom: 1.2rem; }

/* Travelling horizontal só em telas largas (≥768px). Mobile retrato empilha vertical. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference){
  .motion-on .praias-travelling { height: 100svh; padding: 0; display: flex; align-items: center; }
  .motion-on .praias-track { flex-direction: row; height: 100svh; width: max-content; gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); align-items: center; padding: 0 8vw; }
  .motion-on .praias-panel { height: 100svh; display: flex; flex-direction: column; justify-content: center; flex: 0 0 auto; padding-block: 8svh; overflow: hidden; }
  .motion-on .praias-panel.p-photo { width: min(58vw, 860px); }
  .motion-on .praias-panel.p-photo .ph { aspect-ratio: auto; height: min(74svh, 100%); width: 100%; align-self: center; }
  .motion-on .praias-panel.p-text { width: min(44vw, 580px); }
  .motion-on .praias-panel.p-text .headline { font-size: var(--step-2); }
  .motion-on .praias-panel.p-note { width: min(40vw, 560px); }
  .motion-on .praias-panel.p-note p { font-size: var(--step-1); max-width: none; }
}

/* ---- ÍNDICE ---- */
.indice .tt { font-size: var(--verbo); line-height: 0.8; opacity: 0.14; margin-bottom: 2rem; }
.idx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.4rem 3rem; }
.idx-item { border-top: 1px solid var(--oceano-40); padding-top: 1rem; }
.idx-item .idx-h { display: flex; align-items: baseline; gap: 0.7rem; }
.idx-item .idx-num { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--slate); line-height: 1; }
.idx-item .idx-verbo { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.02em; }
.idx-item .idx-t { font-family: var(--font-display); font-weight: 600; margin: 0.5rem 0 0.3rem; }
.idx-item .idx-x { font-size: var(--step--1); opacity: 0.75; }
.idx-sub { margin-top: 1rem; display: grid; gap: 0.8rem; }
.idx-sub .s { display: flex; gap: 0.6rem; font-size: var(--step--1); }
.idx-sub .s b { font-family: var(--font-display); color: var(--slate); }
.idx-link { text-decoration: none; }
.idx-link:hover .idx-verbo { color: var(--coral); }

/* ---- ENTREVISTA / DECLARAR ---- */
.declarar { background: var(--areia); }
.declarar .decl-head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; margin-bottom: 3rem; }
.declarar .verbo { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 2rem + 7vw, 8.5rem); line-height: 0.82; color: var(--slate); opacity: 0.92; }
.declarar .decl-portrait { width: 100%; align-self: start; }
.declarar .decl-portrait .ph { aspect-ratio: 3/4; }
.declarar .decl-kicker { font-family: var(--font-display); letter-spacing: 0.2em; color: var(--slate); font-size: 0.8rem; margin-bottom: 0.8rem; }
.declarar .decl-standfirst { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); max-width: 40ch; color: var(--slate); }
.qa-grid { columns: 2; column-gap: 3rem; }
@media (max-width: 720px){ .qa-grid { columns: 1; } }
.qa { break-inside: avoid; margin-bottom: 2.2rem; }
.qa .q { font-family: var(--font-display); font-weight: 600; color: var(--slate); font-size: var(--step-0); margin-bottom: 0.6rem; }
.qa .q .n { color: var(--coral); margin-right: 0.35em; }
.qa .a p { font-size: var(--step--1); line-height: 1.6; }
.pullquote { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1.1; color: var(--areia); background: var(--sage); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 3vw, 3rem); margin: 3rem 0; max-width: 24ch; }
/* versão B: fotos da entrevista + citações intercaladas */
.decl-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 3rem; }
.decl-gal .ph { aspect-ratio: 1/1 !important; width: 100%; min-width: 0; align-self: start; }
.figstack .ph.wide { aspect-ratio: 3/2 !important; } .figstack .ph.tall { aspect-ratio: 3/4 !important; }
.qa-pull { break-inside: avoid; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.2; color: var(--slate); border-left: 3px solid var(--sage); padding: .3rem 0 .3rem 1rem; margin: 0 0 2.2rem; }
/* fecho — spread só de foto */
.fecho { position: relative; min-height: 100svh; }
.fecho .ph { position: absolute; inset: 0; border-radius: 0; height: 100%; aspect-ratio: auto !important; }
@media (max-width: 860px){ .decl-gal { grid-template-columns: repeat(2, 1fr); } }

/* ---- CONTRACAPA ---- */
.contracapa { min-height: 82svh; background: var(--oceano); color: var(--areia); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; text-align: center; gap: 2rem; padding: var(--section-pad) var(--gutter); }
.contracapa .logo { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 6vw, 7rem); letter-spacing: -0.04em; line-height: 0.8; }
.contracapa .logo small { display: block; font-weight: 400; font-size: 0.18em; letter-spacing: 0.5em; margin-top: 0.6em; }

/* ---- Onda divisória (identidade) ---- */
.wave { display: block; width: clamp(90px, 12vw, 160px); height: auto; opacity: 0.5; margin-top: 3rem; }
.wave path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; }

/* ---- Reveal baseline (degrada em reduced-motion) ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1; transform: none; transition: none; }
  .ph > picture, .ph > img.main { opacity: 1; }
}

/* ---- Responsivo ---- */
@media (max-width: 860px){
  .split, .split.rev, .declarar .decl-head { grid-template-columns: 1fr; }
  .capa .capa-top { flex-direction: column; }
  .headline { font-size: var(--step-2); }
  /* O aumento de 70% vale só onde a capa está em layout de desktop. No layout
     mobile os corpos voltam ao original — a 70% a capa deixava de caber numa
     tela (~1.080px num ecrã de 844) e a barra de temas ia para baixo da dobra. */
  .capa .chamadas { text-align: left; margin-left: 0; gap: 1.2rem; max-width: min(22rem, 100%); }
  .capa .chamadas .c-t { font-size: var(--step-1); }
  .capa .chamadas .c-x { font-size: var(--step--1); }
  .temas-bar { font-size: 0.7rem; }
}

/* ============================================================================
   DECLARAR v2 — diagramação editorial (espelha os spreads p16–p17 do impresso)
   ========================================================================== */
.declarar { background: var(--oceano); color: var(--areia); }
.declarar .decl-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.declarar .decl-verb { display: flex; flex-direction: column; margin-bottom: 2rem; }
.declarar .decl-verb .sil { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 2rem + 9vw, 11rem); line-height: 0.8; letter-spacing: -0.04em; color: var(--slate); }
.declarar .decl-verb .sil + .sil { padding-left: 0.55em; }
.declarar .decl-kicker { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sage); margin-bottom: 1rem; }
.declarar .decl-standfirst { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.3; color: var(--sage); max-width: 34ch; margin: 0; }
.declarar .decl-portrait { width: 100%; }
.declarar .decl-portrait .ph { aspect-ratio: 4/5 !important; }

.decl-flow { display: grid; grid-template-columns: 1.08fr 0.92fr; column-gap: clamp(2rem, 1rem + 4vw, 5.5rem); row-gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.decl-flow .c1 { grid-column: 1; } .decl-flow .c2 { grid-column: 2; }
.dq .q { font-family: var(--font-display); font-weight: 600; color: var(--sage); font-size: var(--step-0); line-height: 1.25; margin-bottom: 0.8rem; }
.dq .q .n { color: var(--coral); margin-right: 0.35em; }
.dq .a p { font-size: var(--step--1); line-height: 1.62; color: var(--areia); opacity: 0.86; max-width: 58ch; }
.decl-pull { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.18; color: var(--sage); border-left: 3px solid var(--sage); padding: 0.4rem 0 0.4rem 1.2rem; max-width: 24ch; align-self: center; }
.decl-pull.main { font-size: var(--step-3); color: var(--areia); border-color: var(--coral); max-width: 18ch; }
.decl-pull.box { background: var(--sage); color: var(--areia); border: 0; border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.6rem); max-width: none; font-weight: 600; }
.decl-photo .ph { width: 100%; }
.decl-photo.r45 .ph { aspect-ratio: 4/5 !important; }
.decl-photo.r34 .ph { aspect-ratio: 3/4 !important; }
.decl-photo.r43 .ph { aspect-ratio: 4/3 !important; }
.declarar .wave { color: var(--sage); }
@media (max-width: 860px){
  .declarar .decl-head { grid-template-columns: 1fr; align-items: start; }
  .decl-flow { grid-template-columns: 1fr; }
  .decl-flow .c1, .decl-flow .c2 { grid-column: auto; }
  .decl-pull, .decl-pull.main { max-width: none; }
}