/* =========================================================
   Maurício — Dia dos Pais 2026
   O céu do site acompanha o dia dele: madrugada de pescaria,
   manhã, tarde, brasa, noite de jogo, domingo de igreja.
   ========================================================= */

:root{
  --noite:#050D16;
  --osso:#F3EEE4;
  --osso-fraco:rgba(243,238,228,.78);
  --osso-tenue:rgba(243,238,228,.46);
  --turquesa:#3FD0BE;
  --brasa:#E4712F;
  --dourado:#E4B863;
  --accent:var(--turquesa);

  --sky-a:#050D16;
  --sky-b:#0B1F31;

  --ff-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-corpo:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-dado:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* --gutter reserva a faixa da linha de pesca; vira 0 quando ela sobe pro topo */
  --gutter:0px;
  --larg:min(1180px,calc(100vw - var(--gutter) - 8vw));
  --margem:max(var(--gutter),calc((100vw - var(--larg)) / 2));
  --texto:min(64ch,100%);
  --gap:clamp(1.2rem,3vw,2.4rem);
  --bloco:clamp(4.5rem,11vw,9rem);
  --raio:2px;
}

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

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

body{
  margin:0;
  background:var(--noite);
  color:var(--osso);
  font-family:var(--ff-corpo);
  font-size:clamp(1.17rem,.55vw + 1.06rem,1.34rem);
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

::selection{background:var(--accent);color:#04121A}

a{color:inherit}

/* --------- o céu --------- */
.sky{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--sky-b) 0%, var(--sky-a) 62%, var(--sky-a) 100%);
  transition:background 900ms ease;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:99;
  background:var(--accent);
  color:#04121A;
  padding:.7rem 1.1rem;
  font-family:var(--ff-dado);
  font-size:.92rem;
}
.skip:focus{left:.6rem;top:.6rem}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* =========================================================
   LINHA DE PESCA — progresso + navegação
   ========================================================= */
.linha{
  position:fixed;
  left:clamp(14px,2.4vw,34px);
  top:0;
  bottom:0;
  width:120px;
  z-index:40;
  pointer-events:none;
}

.linha__trilho{
  position:absolute;
  left:5px;
  top:12vh;
  bottom:12vh;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--osso-tenue) 8%,var(--osso-tenue) 92%,transparent);
}

.linha__boia{
  position:absolute;
  left:0;
  top:12vh;
  width:11px;
  height:11px;
  border-radius:50%;
  border:1.5px solid var(--accent);
  background:rgba(5,13,22,.85);
  box-shadow:0 0 14px -2px var(--accent);
  transform:translateY(-50%);
  transition:border-color 900ms ease,box-shadow 900ms ease;
}

.linha__marcas{
  position:absolute;
  left:0;
  top:12vh;
  bottom:12vh;
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:auto;
}

.linha__marcas a{
  display:flex;
  align-items:center;
  gap:.62rem;
  padding:3px 0;
  text-decoration:none;
  font-family:var(--ff-dado);
  font-size:.73rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:transparent;
  transition:color 260ms ease;
}
.linha__marcas a::before{
  content:"";
  flex:none;
  width:11px;
  height:1px;
  background:var(--osso-tenue);
  transition:width 260ms ease,background 260ms ease;
}
.linha__marcas a:hover,
.linha__marcas a:focus-visible,
.linha__marcas a[aria-current="true"]{color:var(--osso-fraco)}
.linha__marcas a:hover::before,
.linha__marcas a:focus-visible::before{width:20px;background:var(--osso-fraco)}
.linha__marcas a[aria-current="true"]::before{width:20px;background:var(--accent)}

@media (min-width:901px){
  :root{--gutter:150px}
}

@media (max-width:900px){
  .linha{
    left:0;right:0;top:0;bottom:auto;
    width:auto;height:2px;
  }
  .linha__trilho{
    left:0;right:0;top:0;bottom:auto;
    width:auto;height:2px;
    background:rgba(243,238,228,.14);
  }
  .linha__boia{
    top:0;left:0;
    width:0;height:2px;
    border:0;border-radius:0;
    background:var(--accent);
    box-shadow:none;
    transform:none;
    transition:background 900ms ease;
  }
  .linha__marcas{display:none}
}

/* =========================================================
   ABERTURA
   ========================================================= */
.abertura{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  padding:clamp(2rem,6vw,5rem) 0 clamp(3rem,7vw,6rem);
  overflow:hidden;
}

.abertura__foto{
  position:absolute;
  inset:0;
  z-index:0;
}
.abertura__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:66% 6%;
  filter:saturate(.86) contrast(1.04);
}
.abertura__foto::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(5,13,22,.55) 0%,rgba(5,13,22,.18) 26%,rgba(5,13,22,.82) 72%,var(--noite) 100%),
    linear-gradient(90deg,rgba(5,13,22,.86) 0%,rgba(5,13,22,.42) 42%,transparent 72%);
}

.abertura__conteudo{
  position:relative;
  z-index:1;
  width:var(--larg);
  margin-left:var(--margem);
  margin-right:auto;
  max-width:100%;
}

.eyebrow{
  font-family:var(--ff-dado);
  font-size:.82rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.4rem;
  transition:color 900ms ease;
}

.abertura__titulo{
  margin:0;
  font-family:var(--ff-display);
  font-optical-sizing:auto;
  line-height:.84;
  text-wrap:balance;
}
.abertura__nome{
  display:block;
  font-size:clamp(4rem,16vw,11.5rem);
  font-weight:900;
  letter-spacing:-.035em;
  text-shadow:0 4px 40px rgba(5,13,22,.6);
}

.abertura__deck{
  margin:clamp(1.6rem,3vw,2.4rem) 0 0;
  max-width:44ch;
  text-wrap:pretty;
  font-size:clamp(1.28rem,.6vw + 1.14rem,1.52rem);
  line-height:1.5;
  color:var(--osso);
}

.abertura__nota{
  margin:1.5rem 0 0;
  font-family:var(--ff-dado);
  font-size:.9rem;
  letter-spacing:.1em;
  color:var(--osso-fraco);
}

.abertura__seta{
  position:absolute;
  left:50%;
  bottom:1.5rem;
  transform:translateX(-50%);
}
.abertura__seta span{
  display:block;
  width:1px;
  height:44px;
  background:linear-gradient(180deg,transparent,var(--accent));
  animation:cair 2.6s ease-in-out infinite;
}
@keyframes cair{
  0%,100%{opacity:.15;transform:translateY(-8px)}
  50%{opacity:1;transform:translateY(0)}
}

/* no desktop a foto ganha coluna própria: ele aparece inteiro, sem corte de rosto */
@media (min-width:1000px){
  .abertura{
    grid-template-columns:1fr 42vw;
    align-items:center;
    padding-block:0;
  }
  .abertura__foto{
    position:relative;
    inset:auto;
    grid-column:2;
    grid-row:1;
    height:100svh;
  }
  .abertura__foto img{
    object-position:52% 26%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 34%);
  }
  .abertura__foto::after{
    background:linear-gradient(180deg,rgba(5,13,22,.35) 0%,transparent 22%,transparent 68%,rgba(5,13,22,.78) 100%);
  }
  .abertura__seta{
    left:var(--margem);
    right:auto;
    bottom:8vh;
    transform:none;
  }
  .abertura__conteudo{
    grid-column:1;
    grid-row:1;
    width:auto;
    max-width:none;
    margin:0;
    margin-left:var(--margem);
    padding-right:clamp(1rem,3vw,3rem);
  }
  .abertura__nome{font-size:clamp(4rem,8.6vw,7.6rem)}
}

/* =========================================================
   BLOCOS GERAIS
   ========================================================= */
.faixa,
.cap{
  width:var(--larg);
  margin-left:var(--margem);
  margin-right:auto;
  padding-block:var(--bloco);
}

.cap__cabeca{margin-bottom:clamp(2.2rem,5vw,3.6rem)}

.cap__titulo{
  margin:0;
  font-family:var(--ff-display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(2.35rem,6.1vw,4.7rem);
  line-height:1.02;
  letter-spacing:-.028em;
  text-wrap:balance;
}

.cap__corpo{
  width:var(--texto);
  margin-block:clamp(2rem,4vw,3rem);
}
.cap__corpo p{margin:0 0 1.15em}
.cap__corpo p:last-child{margin-bottom:0}

.lead{
  font-size:clamp(1.38rem,.9vw + 1.14rem,1.74rem);
  line-height:1.46;
  font-weight:500;
  letter-spacing:-.012em;
}

/* fotos */
.foto{margin:0}
.foto img{
  border-radius:var(--raio);
  box-shadow:0 26px 70px -34px rgba(0,0,0,.9);
}
/* a altura da tela manda: foto em pé não pode virar um rolo infinito */
.foto--larga{
  max-width:min(900px,100%);
  margin-inline:auto;
}
.foto--larga img{
  width:auto;
  max-width:100%;
  max-height:78svh;
  margin-inline:auto;
}
.par .foto img,
.diptico__lado img{
  max-height:62svh;
  width:auto;
  max-width:100%;
}

figcaption{
  margin-top:.9rem;
  font-family:var(--ff-corpo);
  font-size:1.02rem;
  line-height:1.55;
  color:var(--osso-fraco);
}

.par{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:var(--gap);
  align-items:start;
}

/* díptico: então e agora */
.diptico{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--gap);
  align-items:end;
}
.diptico__lado{margin:0}
.diptico__lado img{
  width:100%;
  border-radius:var(--raio);
  box-shadow:0 26px 70px -34px rgba(0,0,0,.9);
}
.diptico__lado figcaption{
  border-top:1px solid var(--osso-tenue);
  padding-top:.8rem;
  margin-top:1rem;
}
.diptico__ano{
  display:block;
  font-family:var(--ff-dado);
  color:var(--accent);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.82rem;
  margin-bottom:.3rem;
  transition:color 900ms ease;
}

/* matilha */
.matilha{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:var(--gap);
}
.cao{margin:0}
.cao picture{width:100%}
.cao img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--raio);
  box-shadow:0 26px 70px -34px rgba(0,0,0,.9);
}
.cao__nome{
  display:block;
  font-family:var(--ff-display);
  font-weight:700;
  font-size:1.8rem;
  letter-spacing:-.02em;
  color:var(--osso);
  margin-bottom:.15rem;
}

/* =========================================================
   CONTADOR
   ========================================================= */
.tempo__titulo{
  margin:0 0 clamp(2rem,4vw,3rem);
  font-family:var(--ff-display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.95rem,4.7vw,3.4rem);
  letter-spacing:-.02em;
  line-height:1.1;
}

.tempo__relogios{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(2rem,4vw,3.5rem);
}

.relogio{
  border-top:1px solid var(--osso-tenue);
  padding-top:1.4rem;
}
.relogio__quem{
  margin:0;
  font-family:var(--ff-dado);
  font-size:.88rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  transition:color 900ms ease;
}
.relogio__data{
  margin:.2rem 0 1.1rem;
  font-family:var(--ff-dado);
  font-size:.88rem;
  letter-spacing:.12em;
  color:var(--osso-fraco);
}
.relogio__grande{
  margin:0;
  font-family:var(--ff-display);
  font-optical-sizing:auto;
  font-weight:900;
  font-size:clamp(2.6rem,7vw,4.4rem);
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.relogio__resto{
  margin:.75rem 0 0;
  font-family:var(--ff-dado);
  font-size:clamp(1.08rem,1.9vw,1.34rem);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--osso);
}
.relogio__dias{
  margin:.5rem 0 0;
  font-family:var(--ff-dado);
  font-size:.9rem;
  letter-spacing:.1em;
  color:var(--osso-fraco);
  font-variant-numeric:tabular-nums;
}

.tempo__rodape{
  width:var(--texto);
  margin:clamp(2.4rem,5vw,3.6rem) 0 0;
  color:var(--osso-fraco);
}

/* =========================================================
   O JOGO — preto e branco, sem foto
   ========================================================= */
.jogo{
  border-block:1px solid rgba(243,238,228,.12);
  background:rgba(0,0,0,.42);
}
.jogo .faixa{
  width:var(--texto);
  text-align:center;
}
.cruz{
  width:clamp(56px,9vw,88px);
  height:auto;
  fill:var(--osso);
  margin-bottom:2rem;
}
.jogo__titulo{
  margin:0 0 2rem;
  font-family:var(--ff-display);
  font-weight:900;
  font-size:clamp(2.15rem,5.7vw,3.9rem);
  line-height:1.04;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.jogo__texto{
  margin:0 auto 1.15em;
  max-width:56ch;
  color:var(--osso-fraco);
}
.jogo__texto:last-child{
  margin-bottom:0;
  color:var(--osso);
  font-weight:500;
}

/* =========================================================
   A FÉ
   ========================================================= */
.fe .faixa{width:var(--texto)}
.versiculo{
  margin:0 0 2.4rem;
  padding-left:clamp(1rem,3vw,2rem);
  border-left:2px solid var(--accent);
  transition:border-color 900ms ease;
}
.versiculo p{
  margin:0 0 1rem;
  font-family:var(--ff-display);
  font-optical-sizing:auto;
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.6rem,3.9vw,2.55rem);
  line-height:1.28;
  letter-spacing:-.02em;
}
.versiculo cite{
  font-family:var(--ff-dado);
  font-style:normal;
  font-size:.9rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  transition:color 900ms ease;
}
.fe__texto{margin:0 0 1.15em;color:var(--osso-fraco)}
.fe__texto:last-child{margin-bottom:0}

/* =========================================================
   A CARTA
   ========================================================= */
.carta .faixa{width:var(--texto)}
.carta__titulo{
  margin:0 0 2rem;
  font-family:var(--ff-display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(2.45rem,6.5vw,4.1rem);
  letter-spacing:-.03em;
}
.carta__corpo p{
  margin:0 0 1.3em;
  font-size:clamp(1.24rem,.5vw + 1.12rem,1.42rem);
  line-height:1.72;
}
.carta__corpo p:first-child::first-letter{
  float:left;
  font-family:var(--ff-display);
  font-weight:900;
  font-size:3.6em;
  line-height:.82;
  padding:.06em .12em 0 0;
  color:var(--accent);
  transition:color 900ms ease;
}

.assinatura{
  margin-top:clamp(2.6rem,5vw,4rem);
  padding-top:2rem;
  border-top:1px solid var(--osso-tenue);
}
.assinatura__frase{
  margin:0 0 2rem;
  font-family:var(--ff-display);
  font-size:clamp(1.45rem,3vw,2rem);
  line-height:1.34;
  letter-spacing:-.02em;
}
.assinatura__frase em{font-style:italic;color:var(--accent);transition:color 900ms ease}
.assinatura__nome{
  margin:0;
  font-family:var(--ff-display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(2.4rem,7vw,4rem);
  line-height:1;
  letter-spacing:-.02em;
}
.assinatura__ps{
  margin:.6rem 0 0;
  font-family:var(--ff-dado);
  font-size:.92rem;
  letter-spacing:.1em;
  color:var(--osso-fraco);
}

/* =========================================================
   MURAL
   ========================================================= */
.mural .faixa{padding-bottom:clamp(2rem,4vw,3rem)}
.mural__titulo{
  margin:0 0 .8rem;
  font-family:var(--ff-display);
  font-weight:700;
  font-size:clamp(2rem,4.9vw,3.2rem);
  letter-spacing:-.028em;
}
.mural__nota{
  margin:0;
  font-family:var(--ff-corpo);
  font-size:1.02rem;
  letter-spacing:.1em;
  color:var(--osso-fraco);
}

.grade{
  width:var(--larg);
  margin:0 auto 1.6rem var(--margem);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(160px,45vw),1fr));
  gap:.55rem;
}
.grade button{
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  overflow:hidden;
  border-radius:var(--raio);
  aspect-ratio:1;
  display:block;
}
.grade picture{width:100%;height:100%}
.grade img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 620ms cubic-bezier(.2,.7,.3,1);
}
.grade button:hover img,
.grade button:focus-visible img{transform:scale(1.07)}

.mural__mais{
  width:var(--larg);
  margin-left:var(--margem);
  padding-bottom:var(--bloco);
}
.botao{
  appearance:none;
  cursor:pointer;
  background:none;
  color:var(--osso);
  border:1px solid var(--osso-tenue);
  border-radius:999px;
  padding:.85rem 1.7rem;
  font-family:var(--ff-dado);
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:border-color 220ms ease,color 220ms ease;
}
.botao:hover,.botao:focus-visible{border-color:var(--accent);color:var(--accent)}
.botao[hidden]{display:none}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{
  width:var(--larg);
  margin-left:var(--margem);
  margin-right:auto;
  padding-block:clamp(3rem,7vw,6rem);
  border-top:1px solid var(--osso-tenue);
  text-align:center;
}
.rodape__data{
  margin:0 0 .5rem;
  font-family:var(--ff-dado);
  font-size:.88rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--osso-tenue);
}
.rodape__frase{
  margin:0;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:clamp(1.28rem,2.7vw,1.7rem);
  color:var(--osso-fraco);
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lupa{
  position:fixed;
  inset:0;
  z-index:80;
  background:#04090F;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:1fr auto;
  align-items:center;
  gap:.5rem;
  padding:clamp(.8rem,3vw,2rem);
}
.lupa[hidden]{display:none}
.lupa__img{
  grid-column:2;
  grid-row:1;
  max-width:100%;
  max-height:82svh;
  margin-inline:auto;
  object-fit:contain;
  border-radius:var(--raio);
}
.lupa__legenda{
  grid-column:1/-1;
  grid-row:2;
  margin:0;
  text-align:center;
  font-family:var(--ff-corpo);
  font-size:1.02rem;
  color:var(--osso-fraco);
}
.lupa button{
  background:none;
  border:0;
  color:var(--osso);
  cursor:pointer;
  font-size:2.4rem;
  line-height:1;
  padding:.4rem .7rem;
  opacity:.55;
  transition:opacity 200ms ease;
  font-family:var(--ff-corpo);
}
.lupa button:hover,.lupa button:focus-visible{opacity:1}
.lupa__nav--ant{grid-column:1;grid-row:1}
.lupa__nav--prox{grid-column:3;grid-row:1}
.lupa__fechar{
  position:absolute;
  top:clamp(.4rem,2vw,1.2rem);
  right:clamp(.4rem,2vw,1.2rem);
  font-size:2rem;
}

/* =========================================================
   REVELAÇÃO NO SCROLL
   ========================================================= */
.revela{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 900ms cubic-bezier(.2,.7,.3,1),transform 900ms cubic-bezier(.2,.7,.3,1);
}
.revela.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .revela{opacity:1;transform:none}
}