/* =================================================================
   RÉPLICA — 9to5studio.it (estrutura/layout/animação fiéis)
   ================================================================= */

/* ---------- FONTE: Coolvetica (local) ----------
   OBS: no url() o caminho é relativo ao arquivo CSS (css/), por isso o ../ */
@font-face{
  font-family: "Coolvetica";
  src: url("../coolvetica/Coolvetica Rg.otf") format("opentype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Coolvetica";
  src: url("../coolvetica/Coolvetica Rg It.otf") format("opentype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ---------- TOKENS ---------- */
:root{
  --spacing: .25rem;
  --gap: calc(var(--spacing) * 5);

  --c-accent: #ff6a00;
  --c-ink:    #000;
  --c-paper:  #FFFFFF;
  --c-muted:  #CDCDC7;
  --c-muted-2:#B6B6B0;

  --font-sans: "Coolvetica", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ease-out-gentle:   cubic-bezier(.32,.72,0,1);
  --ease-in-out-sharp: cubic-bezier(.83,0,.17,1);
  --ease-out-quad:     cubic-bezier(.25,.46,.45,.94);
  --ease-out-cubic:    cubic-bezier(.215,.61,.355,1);
  --ease-out-back:     cubic-bezier(0,0,.85,1.25);

  --btn-size: 3.75rem;
  --progress-h: 4px;
  --panel-w: 33.333vw;
}
@media (max-width:768px){ :root{ --panel-w: 85vw; } }
/* celular: barras MENU/CONTATOS mais finas (e, por tabela, menos padding lateral
   no conteúdo, já que edge-pad/intro derivam de --btn-size) */
@media (max-width:600px){ :root{ --btn-size: 2rem; } }

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ display:block; max-width:100%; }
.contents{ display:contents; }

html.is-site-loading, html.is-site-loading body{ overflow:hidden; height:100%; }

/* ---------- GRID / CONTAINERS ---------- */
.grid-v{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  column-gap: var(--gap);
}
.container-v,.container-h{ width:100%; padding-inline: var(--gap); }
.container-h{ padding-block: var(--gap); }
@media (min-width:1024px){
  .grid-v{ grid-template-columns: repeat(24, minmax(0,1fr)); }
}

/* ---------- TIPOGRAFIA ---------- */
.title-big{
  font-size: 1.25rem; line-height: 1; font-weight: var(--fw-bold);
  text-transform: uppercase; font-family: var(--font-sans);
}
.text-big{ font-size: 1.25rem; line-height: 1.5rem; font-weight: var(--fw-normal); }
.text-small{ font-size: 1rem; font-weight: var(--fw-medium); }
.text-3{ font-size: .75rem; }
@media (min-width:1024px){
  .title-big{ font-size: 3rem; }
  .text-big{ font-size: 3rem; line-height: 3.25rem; }
}

/* ---------- UTIL ---------- */
.bg-accent{ background-color: var(--c-accent); }
.placeholder-img{
  width:100%; height:100%;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, var(--c-muted), var(--c-muted-2));
}
/* imagem real vinda do Firebase (sobrepõe o gradiente placeholder) */
.placeholder-img.has-photo{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.gsap-word{ display:inline-block; will-change:transform; }

/* =================================================================
   HS-INTRO
   ================================================================= */
.hs-intro{
  flex:none; width:100%; height:100svh;
  background: var(--c-accent);
  position:relative; overflow:hidden;
}
/* padding lateral que livra as barras fixas MENU/CONTATOS (no mobile elas
   ficam sempre visíveis nas bordas); no desktop é sobrescrito p/ 150px. */
.hs-intro__inner{ position:relative; height:100%; padding-block: var(--gap); padding-inline: calc(var(--btn-size) + var(--gap)); display:flex; }
.hs-intro__grid{ width:100%; height:100%; align-content:stretch; row-gap: var(--gap); }
/* MOBILE / telas menores: ordem = título, texto, slider (DOM tem media antes de right) */
.hs-intro__media{ grid-column: 1 / -1; align-self:center; order:2; }
.hs-intro__media .media-square{ max-width: min(100%, 60svh); margin-inline:auto; }
.hs-intro__right{ grid-column: 1 / -1; order:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap: calc(var(--gap)*1.5); }
.hs-intro__title{ display:flex; flex-wrap:wrap; justify-content:center; }
.hs-intro__text{ display:flex; flex-direction:column; align-items:center; gap: calc(var(--gap)*1.5); }
/* texto do intro menor que o .text-big padrão, p/ não encostar na base */
.hs-intro .richtext{ font-size: clamp(1rem, 1.6vw, 1.5rem); line-height: 1.45; max-width: 62ch; }
.hs-intro__hint{ position:absolute; right: var(--gap); bottom: var(--gap); z-index:5; text-transform:uppercase; font-weight:var(--fw-bold); }
.media-square{ position:relative; aspect-ratio:1/1; width:100%; overflow:hidden; }
.hs-intro .gsap-image{ position:absolute; inset:0; opacity:0; }
.hs-intro .gsap-image[data-i="0"]{ opacity:1; }
.hs-intro__title .word-mask{ margin-right:.25em; }

/* ----- DIGITAL WORKSHOP: texto com efeito de proximidade do cursor ----- */
.tcp{
  z-index:5;
  text-transform:uppercase; font-weight: var(--fw-bold);
  line-height:.92; letter-spacing:-.01em;
  color: var(--c-ink);
  pointer-events:none; user-select:none;
  font-size: clamp(2rem, 6vw, 4.5rem);
}
.tcp__line{ display:block; white-space:nowrap; }
.tcp__letter{ display:inline-block; transform-origin:center; will-change: transform, color; }
/* celulares: título menor p/ caber entre as barras laterais sem cortar */
@media (max-width:600px){ .tcp{ font-size: clamp(1.25rem, 6vw, 2rem); } }
/* "Role para conhecer" também livra a barra direita no mobile */
@media (max-width:1023px){ .hs-intro__hint{ right: calc(var(--btn-size) + var(--gap)); } }

@media (min-width:1024px){
  /* tamanho ÚNICO do box do slider — usado tanto pela imagem quanto pela coluna
     de título/texto, garantindo que os 3 fiquem no mesmo box em qualquer tela */
  .hs-intro{ width: calc(100vw - 100px); --intro-media: min(46vw, calc(100svh - 300px)); }
  /* padding de 150px emoldurando a página */
  .hs-intro__inner{ padding: 150px; }
  /* duas colunas agrupadas ao centro: slide à esquerda, título+texto à direita */
  .hs-intro__grid{
    grid-template-columns: auto auto; justify-content:center; align-items:center;
    column-gap: clamp(2.5rem, 5vw, 6rem);
  }
  /* slide à ESQUERDA: coluna com a MESMA altura do box (var --intro-media).
     o quadrado é dimensionado pela ALTURA (não pela largura) e flex:none p/ não
     encolher — assim topo/base do slider batem com título/texto em qualquer tela */
  .hs-intro__media{ grid-column: 1; order:0; align-self:center; display:flex; align-items:center; justify-content:center; min-height:0; height: var(--intro-media); }
  .hs-intro__media .media-square{ height:100%; width:auto; flex:none; }
  /* DIREITA: bloco com a MESMA altura do slide; título centralizado na vertical */
  .tcp{ margin:0; }
  .hs-intro__right{
    grid-column: 2; order:0; align-self:center;
    height: var(--intro-media);
    display:flex; flex-direction:column; justify-content:center;
    align-items:flex-start; text-align:left; gap:0; padding:0;
  }
}

/* =================================================================
   SCROLL HORIZONTAL
   ================================================================= */
.horizontal-scroll{ position:relative; }
.hs-track{ display:flex; flex-direction:column; }
.hs-hero{ flex:none; min-height:100svh; background:var(--c-paper); display:flex; align-items:center; }
.hs-hero__inner{ display:flex; flex-direction:column; gap: calc(var(--gap)*2); max-width:none; }
.hs-hero__logo{ width:8rem; aspect-ratio:1; }
.hs-hero__logo .logo-bit{ fill: var(--c-ink); }
.work-items{ display:flex; flex-direction:column; position:relative; }
.card{ flex:none; min-height:100svh; display:flex; flex-direction:column-reverse; }
.card__media{ width:100%; overflow:hidden; flex:1; min-height:60svh; position:relative; }
/* preenche a área via posicionamento absoluto: no mobile a altura do .card__media
   vem do flex (indefinida), então height:100% colapsaria p/ 0 — inset:0 resolve. */
.card__media .placeholder-img{ position:absolute; inset:0; width:100%; height:100%; will-change:transform; }
.bookmark{
  background: var(--c-paper);
  flex:none; height: var(--btn-size);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline: var(--gap);
}
.gsap-spine{ font-size:1rem; font-weight:var(--fw-medium); text-transform:uppercase; white-space:nowrap; }
.sticky-bookmarks{ display:none; }
.hs-period{
  flex:none; width:100%; height:100svh;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-paper);
  font-size:clamp(6rem,15vw,20rem); font-weight:var(--fw-bold); color:var(--c-ink);
  user-select:none;
}
@media (min-width:1024px){ .hs-period{ width:100vw; } }
@media (min-width:1024px){
  .hs-track{ flex-direction:row; width:max-content; will-change:transform; }
  .hs-hero{ padding-left: 10rem; padding-right: 2.5rem; }
  .hs-hero__inner{ max-width: 22rem; }
  .work-items{ flex-direction:row; }
  .card{ flex-direction:row; width:auto; }
  .card__media{ height:100svh; min-height:0; width: 60vw; }
  .bookmark{
    flex-direction:column; height:100svh; width: var(--btn-size);
    padding-block: var(--gap); padding-inline:0;
  }
  .gsap-spine{ writing-mode: vertical-lr; transform: rotate(180deg); }
  .bookmark{ position:relative; z-index:2; will-change:transform; }
}

/* =================================================================
   BARRA DE PROGRESSO
   ================================================================= */
.progress{
  position:fixed; left:0; right:0; bottom:0; height: var(--progress-h);
  width:100%; transform: scaleX(0); transform-origin:left center; z-index:40;
}

/* =================================================================
   CURSOR CUSTOMIZADO
   ================================================================= */
.custom-cursor{ position:fixed; top:0; left:0; z-index:999; pointer-events:none; mix-blend-mode:difference; }
.custom-cursor__dot{
  width: 14px; height:14px; border-radius:50%; background:#fff;
  transform: translate(-50%,-50%) scale(1); will-change: transform;
}
@media (hover:none),(pointer:coarse){ .custom-cursor{ display:none; } }

/* =================================================================
   BOTÕES MODAIS + PAINÉIS (MENU / CONTACTS)
   ================================================================= */
.modal-button{
  position:fixed; z-index:70;
  top: var(--gap); bottom: var(--gap); width: var(--btn-size);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top: calc(var(--gap)*1.4);
  color: var(--c-paper);
  opacity:0; pointer-events:none; transition: opacity 0.5s ease;
}
@media (max-width:1023px){ .modal-button{ opacity:1; pointer-events:auto; } }
.is-in-gallery .modal-button{ opacity:1; pointer-events:auto; }
.modal-button--menu{ left: var(--gap); }
.modal-button--contacts{ right: var(--gap); }
.modal-button .gsap-bg{ position:absolute; inset:0; background: var(--c-ink); z-index:1; }
.modal-button__label{
  position:relative; z-index:2;
  writing-mode: vertical-lr; transform: rotate(180deg);
  text-transform:uppercase; font-size:.75rem; font-weight:var(--fw-bold); letter-spacing:.05em;
}
.modal-button__dot{
  position:relative; z-index:2; margin-top: calc(var(--gap)*1.4);
  width:.5rem; height:.5rem; border-radius:50%; background: var(--c-accent); opacity:0;
}

.site-menu,.site-contacts{
  position:fixed; top:0; bottom:0; z-index:65; width: var(--panel-w);
  background: var(--c-ink); color: var(--c-paper);
  visibility:hidden; opacity:0;
}
.site-menu{ left:0; }
.site-contacts{ right:0; }
@media (min-width:1024px){
  .site-menu{ width: 34vw; }
  .site-contacts{ width: 40vw; }
}
.site-menu__inner,.site-contacts__inner{
  height:100%; display:flex; flex-direction:column; justify-content:center; gap: var(--gap);
}

/* ----- painel MENU ----- */
.site-menu__inner{
  justify-content:flex-start;
  gap: calc(var(--gap)*1.6);
  overflow-y:auto;
  padding-top: calc(var(--gap)*2);
  padding-bottom: calc(var(--gap)*3);
  padding-left: calc(var(--btn-size) + var(--gap)*2);
  padding-right: var(--gap);
}
@media (min-width:1024px){ .site-menu__inner{ padding-left: clamp(4rem, 8vw, 8rem); } }
.site-menu__inner .menu-section:first-of-type{ margin-top:auto; }

.menu-logo{ position:relative; width: clamp(10rem, 18vw, 14rem); margin-bottom: var(--gap); }
.menu-logo svg{ display:block; width:100%; height:auto; }
.menu-logo rect, .menu-logo path, .menu-logo line, .menu-logo circle{ fill:none; stroke: var(--c-paper); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.menu-logo__dot{ display:none; }

/* coluna única: itens alinhados à esquerda */
.menu-section{
  display:grid; grid-template-columns: 1fr; gap: calc(var(--gap)*0.6);
  width:100%; padding-top: calc(var(--gap)*1.1);
  border-top:1px solid rgba(255,255,255,.28);
}
.menu-section__body{ display:flex; flex-direction:column; align-items:flex-start; }
.menu-nav-link{
  display:inline-block; line-height:1.1;
  font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight:var(--fw-bold); text-transform:uppercase;
  width:max-content; transition: opacity .3s ease;
}
.menu-nav-link:hover{ opacity:.6; }
/* página atual: sublinhado laranja (substitui o ponto) */
.menu-nav-link.is-current{
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: .1em;
  text-underline-offset: .2em;
}
.menu-info__title{ margin-bottom:.4em; }
.menu-info__address{ font-style:normal; font-size:.85rem; font-weight:var(--fw-medium); line-height:1.55; opacity:.85; }

/* ----- painel CONTACTS (seções empilhadas com divisórias, ref. enviada) ----- */
.site-contacts__inner{
  justify-content:flex-start;
  gap:0;
  overflow-y:auto;
  padding-top: calc(var(--gap)*2.5);
  padding-bottom: calc(var(--gap)*3);
  padding-left: clamp(2rem, 5vw, 3.5rem);
  padding-right: calc(var(--btn-size) + var(--gap));
}
.cnt-section{
  display:flex; flex-direction:column; gap: calc(var(--gap)*1.4);
  padding-block: calc(var(--gap)*1.6);
  border-top:1px solid rgba(255,255,255,.28);
}
.cnt-section:first-of-type{ border-top:0; padding-top:0; }
.cnt-section--meet{ margin-top:auto; }
.cnt-section__head{ font-size:.78rem; font-weight:var(--fw-medium); opacity:.65; }
.cnt-section__body{ display:flex; flex-direction:column; gap:.1em; }
.cnt-link{
  display:inline-flex; align-items:flex-start; gap:.4em; width:max-content;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight:var(--fw-bold); text-transform:uppercase;
  line-height:1.25; transition: opacity .3s ease;
}
.cnt-link:hover{ opacity:.6; }
.cnt-arrow{ font-size:.7em; font-weight:var(--fw-medium); line-height:1; }
.cnt-claim{
  font-size: clamp(1.25rem, 2.3vw, 1.9rem); font-weight:var(--fw-bold); text-transform:uppercase;
  line-height:1.15; margin-bottom: calc(var(--gap)*1.6); max-width: 20ch;
}
.cnt-cta{
  display:inline-block; background:var(--c-paper); color:var(--c-ink);
  padding: 1.1em 3em; font-size:.95rem; font-weight:var(--fw-medium); width:max-content;
  transition: opacity .3s ease;
}
.cnt-cta:hover{ opacity:.85; }

.site-contacts__content{ display:flex; flex-direction:column; gap: var(--gap); }
.contact-line{ font-size: clamp(1rem, 2.4vw, 1.6rem); font-weight:var(--fw-medium); }

/* ----- botão Close dos painéis (vertical, com ponto amarelo) ----- */
.modal-close{ position:absolute; top: var(--gap); right: var(--gap); font-size:.78rem; font-weight:var(--fw-bold); color:var(--c-paper); letter-spacing:.03em; }
.modal-close--menu, .modal-close--contacts{
  top: calc(var(--gap)*1.6);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.modal-close--menu{ left: 1.4rem; right:auto; }
.modal-close--contacts{ right: 1.4rem; left:auto; }
@media (min-width:1024px){
  .modal-close--menu{ left: 1.6rem; }
  .modal-close--contacts{ right: 1.6rem; }
}
.modal-close--menu .modal-close__dot, .modal-close--contacts .modal-close__dot{
  width:.5rem; height:.5rem; border-radius:50%; background:var(--c-accent);
}
.modal-close--menu .modal-close__txt, .modal-close--contacts .modal-close__txt{
  writing-mode: vertical-lr; text-transform:uppercase; letter-spacing:.03em;
}

html.menu-open .modal-button--menu{ opacity:0 !important; pointer-events:none !important; }
html.contacts-open .modal-button--contacts{ opacity:0 !important; pointer-events:none !important; }

.site-backdrop{
  position:fixed; inset:0; z-index:55; background: rgba(0,0,0,.4);
  opacity:0; visibility:hidden; pointer-events:none; backdrop-filter: blur(2px);
}

/* =================================================================
   PRELOADER
   ================================================================= */
.site-loader{ position:fixed; inset:0; z-index:90; overflow:hidden; }
.site-loader .gsap-bg{ position:absolute; inset:0; }
.site-loader__inner{
  position:relative; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap: calc(var(--gap)*2);
}
.site-loader__logo{ width: 6rem; aspect-ratio:1; }
.site-loader__logo .logo-bit{ fill: var(--c-ink); }
.site-loader__claim{ display:flex; gap:.3em; flex-wrap:wrap; justify-content:center; }

/* =================================================================
   PÁGINAS ESTÁTICAS (about / services)
   ================================================================= */
body.is-static .modal-button{ opacity:1; pointer-events:auto; }

.edge-pad{ padding-inline: calc(var(--btn-size) + var(--gap)); }
@media (min-width:1024px){
  .edge-pad{ padding-inline: calc(var(--btn-size) + var(--gap)*2.5); }
}

.page{ min-height:100svh; background: var(--c-paper); }

.display{
  font-size: clamp(2.25rem, 5.2vw, 4.5rem); line-height:1.05;
  font-weight: var(--fw-normal); letter-spacing:-.02em;
}
.eyebrow{ font-size:.78rem; font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.04em; }

.page-hero{ padding-block: calc(var(--gap)*3); }
.page-hero__tag{ text-align:center; margin-bottom: calc(var(--gap)*5); }
.page-hero__tag .eyebrow + .eyebrow{ display:block; margin-top: calc(var(--gap)*1.5); }
.page-hero__main{
  display:grid; grid-template-columns: 1fr; gap: calc(var(--gap)*2); align-items:start;
}
@media (min-width:1024px){
  .page-hero__main{ grid-template-columns: 4rem 1fr; gap: clamp(2rem, 6vw, 7rem); }
}
.page-hero__block{ position:relative; width: 4rem; height: 18rem; background: var(--c-ink); display:none; }
@media (min-width:1024px){ .page-hero__block{ display:block; } }
.page-hero__block .dot{
  position:absolute; right:-1.6rem; bottom:1.2rem; width:.6rem; height:.6rem; border-radius:50%;
  background: var(--c-accent);
}
.page-hero__title{ max-width: 18ch; }

.svc-list{ margin-top: calc(var(--gap)*3); }
.svc-item{
  display:flex; align-items:center; justify-content:space-between; gap: var(--gap);
  padding-block: calc(var(--gap)*1.5);
  border-bottom:1px solid var(--c-ink);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: var(--fw-normal);
}
.svc-item__cta{ font-size:.72rem; white-space:nowrap; opacity:.85; transition: opacity .3s ease; }
.svc-item:hover .svc-item__cta{ opacity:.4; }

.about-text{
  max-width: 50ch;
  font-size: clamp(1.6rem, 3vw, 2rem); line-height:1.12;
}
.about-media{ width:100%; height: 300px; overflow:hidden; }
/* foto fixa com efeito parallax: a imagem fica presa à viewport (background-attachment:fixed)
   e a "janela" .about-media (100% de largura, 300px de altura) rola por cima,
   então o scroll vai revelando o resto da imagem.
   OBS: no url() o caminho é relativo ao arquivo CSS (css/), por isso o ../ */
.about-media--photo{
  background-image: url('../images/stubaileyphoto-stuart-bailey-8106891_1920.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* background-attachment:fixed é quebrado/instável no iOS/mobile — usa scroll */
@media (max-width:1023px){ .about-media--photo{ background-attachment: scroll; } }

/* =================================================================
   ABOUT — BIO + LISTAS
   ================================================================= */
.about-body{ padding-block: calc(var(--gap)*5); display:flex; flex-direction:column; gap: calc(var(--gap)*7); }
/* TEXTO em largura completa — dois parágrafos lado a lado no desktop */
.about-body__text{ display:grid; gap: calc(var(--gap)*2.5); }
@media (min-width:900px){
  .about-body__text{ grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 6rem); }
}
.about-body__text p{
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height:1.6; font-weight: var(--fw-normal);
}

/* títulos de bloco (Onde já estive / Próximas viagens) */
.about-block__title{
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: calc(var(--gap)*3);
}

/* ---------- LINHA DO TEMPO VERTICAL (modelo "Trajetória") ----------
   em telas maiores quebra em colunas (3 → 2 → 1) p/ não ficar tão longa.
   multicol preserva a leitura cronológica de cima p/ baixo em cada coluna
   e a linha contínua (os itens se encostam dentro da coluna). */
.timeline{ list-style:none; margin:0; padding:0; column-gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width:768px){ .timeline{ column-count:2; } }
@media (min-width:1200px){ .timeline{ column-count:3; } }
.tl-item{
  display:grid; grid-template-columns: 3.25rem 1fr; align-items:start;
  column-gap: clamp(1rem, 2.5vw, 2rem);
  break-inside: avoid; -webkit-column-break-inside: avoid;
}
.tl-year{
  text-align:right; padding-top:.15em;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: var(--fw-medium);
  color: var(--c-ink); opacity:.55; font-variant-numeric: tabular-nums;
}
/* coluna do conteúdo carrega a linha contínua (border-left) + ponto (::before) */
.tl-content{
  position:relative;
  border-left:2px solid var(--c-muted);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: calc(var(--gap)*4);
}
.tl-item:last-child .tl-content{ padding-bottom:0; }
.tl-content::before{
  content:""; position:absolute; left:-6px; top:.35em;
  width:10px; height:10px; border-radius:50%;
  background: var(--c-ink); border:2px solid var(--c-paper);
}
.tl-title{ font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: var(--fw-bold); line-height:1.1; }
.tl-place{ margin-top:.4em; font-size: clamp(.9rem, 1.2vw, 1.05rem); opacity:.6; }

/* ---------- PRÓXIMAS VIAGENS — cards (modelo "Onde ver a seguir") ---------- */
.next-cards{ display:grid; grid-template-columns: 1fr; gap: 2px; background: var(--c-muted); }
@media (min-width:640px){ .next-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .next-cards{ grid-template-columns: repeat(3, 1fr); } }
.next-card{
  position:relative; isolation:isolate; overflow:hidden;
  min-height: clamp(20rem, 30vw, 26rem);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background-color: var(--c-ink);
  background-size:cover; background-position:center;
  color: var(--c-paper);
}
/* escurece a foto: gradiente preto (mais forte embaixo p/ o texto) */
.next-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.35) 100%);
  transition: opacity .4s ease;
}
.next-card:hover::before{ opacity:.7; }
.next-card__date{ color: var(--c-paper); opacity:.85; letter-spacing:.08em; text-transform:uppercase; }
.next-card__title{ font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: var(--fw-bold); line-height:1.05; }
.next-card__place{ margin-top:.45em; font-size: clamp(.9rem, 1.2vw, 1.02rem); opacity:.72; }

/* =================================================================
   FOOTER AMARELO
   ================================================================= */
.yellow-footer{ background: var(--c-accent); color: var(--c-ink); padding-top: calc(var(--gap)*4); padding-bottom: calc(var(--gap)*2); }
.yf-top{ display:grid; grid-template-columns: 1fr; gap: calc(var(--gap)*2); align-items:center; }
@media (min-width:1024px){
  /* esquerda = só a imagem; direita = só o texto. A altura da linha vem do texto. */
  .yf-top{ grid-template-columns: 1fr 1fr; gap: calc(var(--gap)*4); align-items:stretch; }
  .yf-left{ display:flex; flex-direction:column; }
  .yf-photo{ flex:1; min-height:0; }
  .yf-photo__img{ height:100%; }
}
.yf-col-label{ margin-bottom: calc(var(--gap)*1.5); font-size:.55rem; }
.yf-photo{ width:100%; overflow:hidden; }
.yf-photo .placeholder-img{ width:100%; height:100%; min-height:10rem; filter: grayscale(1); }
/* foto completa (sem corte): contain mostra a imagem inteira dentro da área vermelha */
.yf-photo__img{ width:100%; height:auto; object-fit:contain; object-position:center; display:block; filter:grayscale(1); }
.yf-right{ display:flex; flex-direction:column; justify-content:center; }
.yf-claim{
  margin-bottom: calc(var(--gap)*3);
  font-size: 2rem; line-height:1.15;
}
.yf-contact{
  display:flex; flex-direction:column; gap:.1em;
  font-size: clamp(.98rem, 1.68vw, 1.61rem); line-height:1.2;
}
.yf-rule{ border:0; border-top:1px solid var(--c-ink); margin: calc(var(--gap)*1.5) 0 calc(var(--gap)*0.75); }
.yf-bottom{ display:block; padding-block: calc(var(--gap)*0.75); text-align:center; }
/* endereço completo numa linha só */
.yf-address{ font-size:.6rem; font-weight:var(--fw-medium); letter-spacing:.02em; margin-bottom: calc(var(--gap)*0.5); }
/* redes + créditos numa linha só, centralizada e separada por barra */
.yf-bottom__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.yf-bottom__row > *{ font-size:.6rem; font-weight:var(--fw-medium); letter-spacing:.02em; }
.yf-bottom__row > * + *{ margin-left: calc(var(--gap)*1); }
.yf-bottom__row > * + *::before{ content:"|"; margin-right: calc(var(--gap)*1); opacity:.45; }
.yf-bottom__row a:hover{ opacity:.6; }
.yf-bcol a:hover{ opacity:.6; }

/* =================================================================
   ESCALA TIPOGRÁFICA MOBILE — títulos e textos maiores menores no celular
   ================================================================= */
@media (max-width:600px){
  /* botões laterais mais discretos e mais próximos das bordas */
  .modal-button{ top:.45rem; bottom:.45rem; padding-top:.9rem; }
  .modal-button--menu{ left:.45rem; }
  .modal-button--contacts{ right:.45rem; }
  .modal-button__label{ font-size:.58rem; letter-spacing:.03em; }
  .modal-button__dot{ width:.4rem; height:.4rem; }

  /* títulos grandes (heros de about/services) */
  .display{ font-size: clamp(1.7rem, 6.4vw, 2.2rem); }
  /* parágrafo-destaque do hero "Sobre" */
  .about-text{ font-size: clamp(1.25rem, 5vw, 1.55rem); line-height:1.2; }
  /* títulos de bloco (Onde já estive / Próximas viagens) */
  .about-block__title{ font-size: 1.45rem; }
  /* footer amarelo — REASSERTA os tamanhos pequenos (estes elementos têm a
     classe .display; sem isto a regra .display acima estoura o e-mail e gera
     overflow horizontal). overflow-wrap protege e-mail longo em telas estreitas */
  .yf-claim{ font-size: 1.5rem; }
  .yf-contact{ font-size: .98rem; }
  .yf-contact span{ overflow-wrap:anywhere; }
  /* títulos menores de itens */
  .next-card__title{ font-size: 1.25rem; }
  .tl-title{ font-size: 1.1rem; }
  .svc-item{ font-size: 1.05rem; }
}

/* reduz movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}