/* ==========================================================================
   Trivium — Grupo Editorial
   Reconstrução fiel da arte "Site Trivium.ai" (prancheta 1920 × 10347,10 px).
   Sistema de medidas do desktop: 1rem = 10 px do projeto original.
   Coordenadas, tamanhos, entrelinhas e tracking foram extraídos do .ai.
   ========================================================================== */

/* ---------- fontes originais ---------- */
@font-face{font-family:"Grift";src:url("../fonts/Grift-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Grift";src:url("../fonts/Grift-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Grift";src:url("../fonts/Grift-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* o peso Bold não vem no pacote de fontes: foi recuperado do próprio .ai
   (subconjunto incorporado) e recebeu o kerning/GSUB do SemiBold */
@font-face{font-family:"Grift";src:url("../fonts/Grift-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Grift";src:url("../fonts/Grift-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Eightly Teenage";src:url("../fonts/EightlyTeenage-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --bg:#e3ddcf;
  --ink:#55575a;        /* títulos                        */
  --ink-2:#545759;      /* logotipo / botão / texto corrido */
  --cream:#e4ddd3;      /* título sobre a foto da hero    */
  --cream-2:#f2f0ef;    /* texto sobre a foto da hero     */
  --cream-3:#e3ddcf;    /* texto do rodapé escuro         */
  --line:#2d2926;       /* traçado dos “caminhos”         */
  --dark:#2d2926;       /* faixa do rodapé                */
  --hero-card:#100d0a;  /* fundo do card da hero no mobile*/
}

/* 1rem = 10 px do projeto (referência: 1920 px de largura) */
html{font-size:calc(var(--vw, 100vw) / 192)}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Grift",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,nav{margin:0}

/* ---------- palco: 1920 × 10347,10 do projeto ---------- */
.stage{position:relative;width:192rem;height:1034.71rem;margin:0 auto;overflow:hidden}
.paths{position:absolute;left:0;top:0;width:192rem;height:1034.71rem;z-index:1;pointer-events:none}
.paths path{vector-effect:non-scaling-stroke}
.paths__fluid{display:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* cada seção é uma camada do tamanho do palco;
   os filhos ficam nas coordenadas absolutas da arte */
.s{position:absolute;left:0;top:0;width:192rem;height:1034.71rem;z-index:2;pointer-events:none}
.s > *,.s > * > *{pointer-events:auto}
.s > *{position:absolute}
img.s{width:38.5826rem;height:7.5702rem;pointer-events:auto}

/* camadas internas (do tamanho do palco) que só existem para agrupar */
.socials,.ways__grid,.shelf,.hero__copy,.cta__socials,.foot__brands{
  position:absolute;left:0;top:0;width:192rem;height:1034.71rem;pointer-events:none;
}
.socials > *,.ways__grid > *,.shelf > *,.hero__copy > *,.cta__socials > *,.foot__brands > *{
  position:absolute;pointer-events:auto;
}

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
.brand{left:82.7114rem;top:5.3276rem;width:26.5773rem;height:5.2147rem}
.brand img{width:100%;height:100%}
.soc{transition:opacity .25s ease}
.soc img{width:100%;height:100%}
.soc:hover{opacity:.6}
.soc--wa{left:174.6484rem;top:5.5265rem;width:3.7866rem;height:3.7412rem}
.soc--ig{left:179.9286rem;top:5.9457rem;width:3.152rem;height:3.1521rem}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero__media{
  left:10rem;top:15.5512rem;width:172.0002rem;height:50.4719rem;
  border-radius:4.4rem;overflow:hidden;
}
.hero__media picture,.hero__media img{display:block;width:100%;height:100%}
.hero__media img{object-fit:cover}

.hero__title{
  left:20rem;top:27.686rem;
  font-weight:600;font-size:4.7rem;line-height:5.64rem;
  letter-spacing:0;color:var(--cream);
}
.hero__text{
  left:20rem;top:46.222rem;
  font-weight:400;font-size:2.4rem;line-height:2.88rem;
  letter-spacing:.025em;color:var(--cream-2);
}
.hero__cta{
  left:20rem;top:56.482rem;
  font-weight:800;font-size:2.4rem;line-height:2.88rem;
  letter-spacing:.025em;color:var(--cream-2);
  transition:opacity .25s ease;
}
.hero__cta:hover{opacity:.72}

/* ==========================================================================
   QUAL O SEU CAMINHO
   ========================================================================== */
.ways__title{
  left:0;top:72.6315rem;width:192rem;text-align:center;
  font-family:"Eightly Teenage","Grift",serif;font-weight:600;
  font-size:3rem;line-height:3.6rem;color:var(--ink);
}
.ways__sub{
  left:0;top:76.911rem;width:192rem;text-align:center;
  font-weight:600;font-size:2.2rem;line-height:2.64rem;color:var(--ink);
}
/* Altura e ritmo interno REVISTOS (a arte trazia os três cards desalinhados:
   vão logo→texto de 121/96/135 px, 1ª linha em três alturas e o 3º card 5 px
   mais baixo). Agora: 7,2rem de respiro em cima, faixa de 8,6rem para a marca,
   5,6rem de vão e o texto começando na mesma altura nos três. */
.way{
  top:85.4473rem;width:38.7072rem;height:51.64rem;
  border:1px solid var(--line);border-radius:2.9829rem;display:block;
  transition:background-color .3s ease,border-color .3s ease;
}
/* no hover o card assume a cor da marca: borda, logotipo e uma lavagem de fundo */
.way--1{--brand:#fa4616;--wash:rgba(250,70,22,.07)}   /* Autor da Fé  */
.way--2{--brand:#464c32;--wash:rgba(70,76,50,.07)}    /* Yes Books    */
.way--3{--brand:#171162;--wash:rgba(23,17,98,.07)}    /* Dream Books  */
.way:hover,.way:focus-visible{background:var(--wash);border-color:var(--brand)}
.way__mark,.way__text{position:absolute}
/* a marca colorida fica por cima da cinza e faz cross-fade no hover */
.way__mark{display:block}
.way__mark img{display:block;width:100%;height:100%}
.way__mark--on{position:absolute;left:0;top:0;opacity:0;transition:opacity .3s ease}
.way:hover .way__mark--on,.way:focus-visible .way__mark--on{opacity:1}
.way__text{
  display:block;font-weight:400;font-size:2.4rem;line-height:2.88rem;
  letter-spacing:.025em;color:var(--ink);
}
.way--1{left:31.7837rem}
.way--2{left:76.6464rem}
.way--3{left:121.5091rem}
/* cada marca centrada na vertical dentro da mesma faixa (9.3347→17.9347rem) */
.way--1 .way__mark{left:5.2662rem;top:9.3347rem;width:28.1748rem;height:4.3299rem}
.way--2 .way__mark{left:12.3921rem;top:8.3557rem;width:14.0242rem;height:6.289rem}
.way--3 .way__mark{left:5.9588rem;top:7.2187rem;width:26.761rem;height:8.5626rem}
/* mesmo recuo e mesma altura de início nos três */
.way__text{left:5.5rem;top:21.4rem}

/* ==========================================================================
   UMA ESTRUTURA COMPLETA
   ========================================================================== */
.about__p1,.about__p2{
  left:81.9rem;font-weight:400;font-size:2.4rem;line-height:2.88rem;
  letter-spacing:.025em;color:var(--ink);
}
.about__p1{top:178.194rem}
.about__p2{top:189.713rem}
.about__title{
  left:81.9rem;top:211.664rem;
  font-weight:500;font-size:7.3rem;line-height:8.76rem;
  letter-spacing:.05em;color:var(--ink);
}
.about__title b{font-weight:700}

/* ==========================================================================
   ONDE OS CAMINHOS SE ENCONTRAM
   ========================================================================== */
.meet__title{
  left:0;top:256.24rem;width:77.457rem;text-align:right;
  font-weight:500;font-size:6.2rem;line-height:7.44rem;
  letter-spacing:.05em;color:var(--ink);
}
.meet__title b{font-weight:800}
.meet__logo{left:56.4352rem;top:282.2379rem;width:20.4974rem;height:4.0217rem}
.meet__media{
  left:83.7601rem;top:253.5042rem;width:108.24rem;height:35.7265rem;
  border-radius:2.9829rem 0 0 2.9829rem;overflow:hidden;
}
.meet__media picture,.meet__media img{display:block;width:100%;height:100%}
.meet__media img{object-fit:cover}

/* ==========================================================================
   PUBLICADOS
   ========================================================================== */
/* vitrine em loop: a fita tem as 6 capas duplicadas e desliza exatamente o
   comprimento de uma série, então a emenda nunca aparece.
   Em translateX(0) as capas ficam nas posições exatas da arte. */
.shelf__track{
  left:-19.9593rem;top:323.1219rem;
  display:flex;gap:10rem;padding-right:10rem;width:max-content;
  animation:shelf-marquee 46s linear infinite;
}
.shelf__track:hover{animation-play-state:paused}
/* o padding-right fecha o último vão: assim metade da fita = uma série inteira,
   e -50% cai exatamente na emenda, qualquer que seja o tamanho das capas */
@keyframes shelf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.shelf__item{
  position:relative;flex:0 0 auto;width:29.9755rem;height:44.4785rem;
  border-radius:2.772rem;overflow:hidden;pointer-events:auto;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.shelf__item picture,.shelf__item img{display:block;width:100%;height:100%}
.shelf__item img{object-fit:cover}
.shelf__item:hover{transform:translateY(-1.2rem)}

.pub__title{
  left:42.543rem;top:380.902rem;
  font-weight:800;font-size:6.3rem;line-height:7.56rem;
  letter-spacing:.05em;color:var(--ink-2);
}
.pub__text{
  left:42.543rem;top:391.058rem;
  font-weight:400;font-size:2.4rem;line-height:2.88rem;
  letter-spacing:.025em;color:var(--ink-2);
}

/* ---------- pílulas ---------- */
.pill{
  display:flex;align-items:center;justify-content:center;
  border-radius:99rem;border:1px solid currentColor;
  font-weight:400;font-size:1.497rem;line-height:1;
  letter-spacing:.025em;text-align:center;white-space:nowrap;
  color:var(--ink-2);
  transition:background-color .3s ease,color .3s ease;
}
.pill span{display:block;margin-right:-.025em}
.pill:hover{background:var(--ink-2);color:var(--bg)}
.pill--dark{left:91.5042rem;top:392.369rem;width:24.4817rem;height:3.7387rem}
.pill--cta{left:45.175rem;top:944.657rem;width:24.4817rem;height:3.7386rem}

/* ==========================================================================
   COMO TRABALHAMOS
   ========================================================================== */
.how__title{
  left:46.489rem;top:423.8815rem;
  font-weight:500;font-size:4.115rem;line-height:4.938rem;
  letter-spacing:.05em;color:var(--ink);
}
.how__title b{font-weight:800}
.how__a{left:100.6363rem;top:414.2148rem;width:58.8947rem;height:35.1967rem;border-radius:5.7926rem 0 0 0;overflow:hidden}
.how__b{left:24.6309rem;top:437.181rem;width:76.0055rem;height:42.1021rem;border-radius:7.468rem 0 0 0;overflow:hidden}
.how__c{left:100.6363rem;top:449.4116rem;width:39.3054rem;height:43.3374rem;border-radius:0 5.903rem 0 5.903rem;overflow:hidden}
.how__a picture,.how__b picture,.how__c picture,
.how__a img,.how__b img,.how__c img{display:block;width:100%;height:100%}
.how__a img,.how__b img,.how__c img{object-fit:cover}

.how__lead{
  left:39.065rem;top:487.295rem;
  font-weight:800;font-size:4.78rem;line-height:5.736rem;
  letter-spacing:.05em;color:var(--ink);
}
.how__text{
  left:39.065rem;top:518.629rem;
  font-weight:400;font-size:2.4rem;line-height:2.88rem;
  letter-spacing:.025em;color:var(--ink-2);
}

.mid-logo{position:absolute;left:80.0653rem;top:548.8625rem;z-index:2}

/* ==========================================================================
   ETAPAS 1 / 2 / 3
   ========================================================================== */
.step__n{
  left:38.144rem;font-weight:800;font-size:4.78rem;line-height:5.736rem;
  letter-spacing:.05em;color:var(--ink);
}
.step__t{
  left:38.144rem;font-weight:400;font-size:2.4rem;line-height:2.88rem;
  letter-spacing:.025em;color:var(--ink-2);
}
.step__t b{font-weight:700}
.step__n--1{top:565.141rem}
.step__t--1{top:572.235rem}
.step__n--2{top:593.993rem}
.step__t--2{top:599.382rem}
.step__n--3{top:624.523rem}
.step__t--3{top:630.463rem}

/* ==========================================================================
   FOTO LARGA COM O RECORTE “Λ”
   ========================================================================== */
.publish__media{
  left:35.4655rem;top:631.6005rem;width:156.5346rem;height:55.823rem;
  -webkit-clip-path:url(#clip-publique);clip-path:url(#clip-publique);
}
.publish__media picture,.publish__media img{display:block;width:100%;height:100%}
.publish__media img{object-fit:cover}
/* o “Λ” bege é pintado por cima da foto (como no .ai) e não um furo no recorte —
   assim ele cobre o traçado dos “caminhos” que passa na base do bloco */
.publish__notch{left:132.477rem;top:656.5134rem;width:40.0056rem;height:40.8859rem;pointer-events:none}
.publish__notch path{fill:var(--bg)}

/* ==========================================================================
   A SEGURANÇA DE UMA CASA EDITORIAL COMPLETA
   ========================================================================== */
.safety__title{
  left:38.144rem;top:705.711rem;
  font-weight:800;font-size:4.78rem;line-height:5.736rem;
  letter-spacing:.05em;color:var(--ink);
}
.safety__text{
  left:38.144rem;top:727.259rem;
  font-weight:400;font-size:2.4rem;line-height:3.3rem;
  letter-spacing:.025em;color:var(--ink-2);
}
.safety__b{
  left:38.144rem;font-weight:400;font-size:2.4rem;line-height:3.3rem;
  letter-spacing:.025em;color:var(--ink-2);
}
.safety__b b{font-weight:800}
.safety__b--1{top:775.557rem}
.safety__b--2{top:788.757rem}
.safety__b--3{top:801.957rem}
.safety__b--4{top:815.157rem}

/* ==========================================================================
   CONTATO / CHAMADA FINAL
   ========================================================================== */
.contact__title{
  left:45.175rem;top:869.471rem;
  font-weight:500;font-size:6.2rem;line-height:7.44rem;
  letter-spacing:.05em;color:var(--ink);
}
.cta__title{
  left:45.175rem;top:905.022rem;
  font-weight:500;font-size:6.2rem;line-height:7.44rem;
  letter-spacing:.05em;color:var(--ink);
}
.cta__title b{font-weight:800}
.cta__text{
  left:45.175rem;top:930.675rem;
  font-weight:400;font-size:2.4rem;line-height:3.3rem;
  letter-spacing:.025em;color:var(--ink-2);
}
.cta__logo{left:136.2848rem;top:906.8071rem;width:38.5827rem;height:7.5701rem}
.cta__soc{transition:opacity .25s ease}
.cta__soc:hover{opacity:.6}
.cta__soc img{width:100%;height:100%}
.cta__soc--wa{left:163.3175rem;top:920.0831rem;width:5.24rem;height:5.1772rem}
.cta__soc--ig{left:170.6245rem;top:920.6633rem;width:4.3619rem;height:4.3619rem}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.foot__band{left:0;top:957.8381rem;width:192rem;height:76.8719rem;background:var(--dark)}
.foot__logo{left:45.5005rem;top:984.7863rem;width:47.5558rem;height:9.3309rem}
.foot__brand--1{left:48.164rem;top:1002.4659rem;width:13.427rem;height:2.0635rem}
.foot__brand--2{left:64.9048rem;top:1002.1274rem;width:6.6834rem;height:2.9971rem}
.foot__brand--3{left:74.8349rem;top:1000.1492rem;width:12.7531rem;height:4.0807rem}
.foot__tag{
  left:107.585rem;top:984.756rem;
  font-weight:500;font-size:4rem;line-height:4.8rem;
  letter-spacing:.05em;color:var(--cream-3);
}

/* ==========================================================================
   VERSÃO MOBILE / TABLET ESTREITO  (a arte original é só desktop)
   ========================================================================== */
@media (max-width:1180px){
  /* escala fluida, limitada para não ficar nem minúscula nem gigante */
  html{font-size:clamp(8.6px, calc(var(--vw, 100vw) / 42), 12px)}

  .stage{--pad:max(2.4rem, calc((100% - 64rem) / 2));width:100%;height:auto;overflow:visible}
  .defs{display:none}
  /* o traçado da arte é feito para a prancheta de 1920; aqui entra a versão
     fluida, gerada pelo JS a partir da posição real das seções */
  .paths{left:0;top:0;width:100%;height:100%}
  .paths__art{display:none}
  .paths__fluid{display:block}

  /* as seções precisam ser posicionadas para ficarem ACIMA do traçado */
  .s{position:relative;z-index:2;width:auto;height:auto}
  .s > *{position:static}
  .socials,.ways__grid,.shelf,.hero__copy,.cta__socials,.foot__brands{
    position:static;width:auto;height:auto;pointer-events:auto;
  }
  .socials > *,.ways__grid > *,.shelf > *,.hero__copy > *,
  .cta__socials > *,.foot__brands > *{position:static}

  body{padding:0 0 6rem}

  /* quebras de linha da arte: no fluido o texto corrido reflui sozinho */
  .hero__title br,.hero__text br,.way__text br,.about__p1 br,.about__p2 br,
  .pub__text br,.how__lead br,.how__text br,.step__t br,
  .safety__title br,.safety__text br,.safety__b br,.cta__text br{display:none}
  .step__t b{display:block}

  /* cabeçalho */
  .s-head{display:flex;align-items:center;justify-content:space-between;padding:2.6rem var(--pad) 0}
  .brand{width:15.6rem;height:3.06rem}
  .socials{display:flex;align-items:center;gap:1.6rem}
  .soc--wa{width:2.6rem;height:2.57rem}
  .soc--ig{width:2.16rem;height:2.16rem}

  /* hero: card escuro em que a foto se dissolve no texto */
  .s-hero{margin:2.8rem var(--pad) 0;padding:0;background:var(--hero-card);border-radius:2.4rem;overflow:hidden}
  .hero__media{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.15;border-radius:0}
  .hero__media img{height:100%;object-fit:cover;object-position:50% 50%}
  .hero__media::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(16,13,10,0) 48%, rgba(16,13,10,.5) 72%,
      rgba(16,13,10,.88) 89%, var(--hero-card) 100%);
  }
  .hero__copy{position:relative;inset:auto;width:auto;height:auto;margin-top:-7rem;padding:0 2.8rem 3.6rem}
  .hero__title{font-size:3.1rem;line-height:1.16;color:var(--cream)}
  .hero__text{font-size:1.7rem;line-height:1.55;margin-top:1.8rem;opacity:.85}
  .hero__cta{display:inline-block;font-size:1.7rem;line-height:1.4;margin-top:2rem;border-bottom:1px solid currentColor;padding-bottom:.3rem}

  /* caminhos */
  .s-ways{padding:5.6rem var(--pad) 0}
  .ways__title{width:auto;font-size:2.5rem;line-height:1.2}
  .ways__sub{width:auto;font-size:1.7rem;line-height:1.4;margin-top:.8rem}
  .ways__grid{display:grid;gap:1.6rem;margin-top:3.2rem}
  .way{width:100%;height:auto;border-radius:1.9rem;padding:3.2rem 2.4rem;display:grid;justify-items:center;gap:2.4rem}
  .way__mark,.way__text{position:static}
  /* o .way__mark volta a participar do fluxo: sem `inset:auto` e sem zerar
     width/height, os left/top/width do desktop continuariam valendo (agora como
     deslocamento relativo) e o logotipo cairia em cima do texto */
  /* o invólucro volta ao fluxo com tamanho EXPLÍCITO (na proporção da marca):
     com largura automática o Chrome cai numa referência circular entre o
     invólucro e a imagem e o logotipo colapsa para 0 */
  .way .way__mark{position:relative;inset:auto;max-width:74%}
  .way__mark--on{position:absolute;inset:0;width:100%;height:100%}
  /* largura fixa da arte vaza do card quando a grade vira 3 colunas estreitas;
     estes valores são a altura reduzida × a proporção de cada marca */
  .way--1 .way__mark{width:19.5207rem;height:3rem}
  .way--2 .way__mark{width:9.7001rem;height:4.35rem}
  .way--3 .way__mark{width:18.5017rem;height:5.92rem}
  .way__text{font-size:1.65rem;line-height:1.5;text-align:center}

  /* uma estrutura completa */
  .s-about{padding:5.6rem var(--pad) 0}
  .about__p1,.about__p2{font-size:1.75rem;line-height:1.5}
  .about__p2{margin-top:1.8rem}
  .about__title{font-size:3.4rem;line-height:1.16;margin-top:3.6rem}

  /* onde os caminhos se encontram */
  .s-meet{padding:5.6rem var(--pad) 0}
  .meet__title{width:auto;text-align:left;font-size:3.4rem;line-height:1.2}
  .meet__logo{width:14.2rem;height:2.79rem;margin-top:2rem}
  .meet__media{width:auto;height:auto;border-radius:1.9rem;margin-top:2.8rem}
  .meet__media img{aspect-ratio:16/9;height:auto}

  /* publicados */
  .s-books{padding:5.6rem 0 0}
  .shelf{overflow:hidden}
  .shelf__track{margin-left:var(--pad);gap:1.6rem;padding-right:1.6rem;animation-duration:28s}
  .shelf__item{width:18.5rem;height:27.45rem;border-radius:1.7rem}
  .shelf__item:hover{transform:none}
  .pub__title{font-size:3.6rem;line-height:1.2;margin:3.6rem var(--pad) 0}
  .pub__text{font-size:1.75rem;line-height:1.5;margin:1.4rem var(--pad) 0}
  .pill{display:inline-flex;width:auto;font-size:1.35rem;height:3.4rem;padding:0 2rem}
  .pill--dark{margin:2.4rem var(--pad) 0}

  /* como trabalhamos */
  .s-how{padding:5.6rem var(--pad) 0}
  .how__title{font-size:2.6rem;line-height:1.2}
  .how__a,.how__b,.how__c{width:100%;height:auto;margin-top:1.6rem}
  .how__a{border-radius:2.8rem 0 0 0}
  .how__b{border-radius:3.4rem 0 0 0}
  .how__c{border-radius:0 2.8rem 0 2.8rem}
  .how__a img{aspect-ratio:5/3;height:auto}
  .how__b img{aspect-ratio:16/9;height:auto}
  .how__c img{aspect-ratio:1/1;height:auto}
  .how__lead{font-size:3rem;line-height:1.16;margin-top:3.6rem}
  .how__text{font-size:1.75rem;line-height:1.5;margin-top:1.6rem}

  .mid-logo{position:static;width:19.5rem;height:3.83rem;margin:6rem auto 0}

  /* etapas */
  .s-steps{padding:4.8rem var(--pad) 0}
  .step__n{font-size:3rem;line-height:1.2;margin-top:3.6rem}
  .step__t{font-size:1.75rem;line-height:1.5;margin-top:.8rem}
  .step__t b{margin-bottom:.3rem}

  /* foto larga */
  .s-publish{margin-top:6.4rem}
  .publish__notch{display:none}
  .publish__media{
    position:relative;inset:auto;width:auto;height:auto;
    clip-path:none;-webkit-clip-path:none;
  }
  .publish__media img{aspect-ratio:16/10;height:auto;object-fit:cover;object-position:58% 50%}

  /* a segurança */
  .s-safety{padding:6.4rem var(--pad) 0}
  .safety__title{font-size:3rem;line-height:1.16}
  .safety__text{font-size:1.75rem;line-height:1.55;margin-top:2rem}
  .safety__b{font-size:1.75rem;line-height:1.55;margin-top:1.8rem}

  /* contato / chamada final */
  .s-contact{padding:6.4rem var(--pad) 0}
  .contact__title{font-size:3.4rem;line-height:1.2}
  .s-cta{padding:3.2rem var(--pad) 0}
  .cta__title{font-size:3.4rem;line-height:1.2}
  .cta__text{font-size:1.75rem;line-height:1.55;margin-top:2rem}
  .pill--cta{margin-top:2.4rem}
  .cta__logo{width:19.5rem;height:3.83rem;margin-top:3.6rem}
  .cta__socials{display:flex;gap:1.8rem;margin-top:2.4rem}
  .cta__soc--wa{width:2.9rem;height:2.87rem}
  .cta__soc--ig{width:2.42rem;height:2.42rem}

  /* rodapé */
  .foot__band{display:none}
  .s-foot{background:var(--dark);margin-top:6.4rem;padding:5.6rem var(--pad)}
  .foot__logo{width:24rem;height:4.71rem}
  .foot__brands{display:flex;align-items:flex-end;gap:2.4rem;margin-top:2.8rem}
  .foot__brand--1{width:11rem;height:1.69rem}
  .foot__brand--2{width:5.48rem;height:2.46rem}
  .foot__brand--3{width:10.45rem;height:3.34rem}
  .foot__tag{font-size:2.2rem;line-height:1.3;margin-top:3.6rem}
}

/* ---------- ajustes para tablets / janelas médias (mesma malha fluida) ---------- */
@media (min-width:640px) and (max-width:1180px){
  .hero__media{aspect-ratio:16/10}
  .hero__media img{object-position:62% 50%}
  .hero__copy{margin-top:-9rem;padding:0 4rem 4.4rem}
  .hero__title{font-size:4.2rem}
  .meet__title{font-size:4.2rem}
  .about__title,.contact__title,.cta__title{font-size:4.2rem}
  .how__a img{aspect-ratio:16/9}
  .how__c img{aspect-ratio:16/10}
  .publish__media img{aspect-ratio:21/9}
  .shelf__item{width:21rem;height:31.16rem}
  .shelf__track{animation-duration:36s}
}

/* a grade de 3 colunas só cabe quando a janela dá largura de leitura a cada card */
@media (min-width:860px) and (max-width:1180px){
  .ways__grid{grid-template-columns:repeat(3,1fr)}
}

/* ==========================================================================
   ENTRADA POR ROLAGEM
   A classe .reveal só é ligada pelo JS — sem script, ou com “reduzir
   movimento”, a página aparece inteira e parada.
   ========================================================================== */
.reveal .fx{
  opacity:0;transform:translateY(2.4rem);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),
             transform .85s cubic-bezier(.22,.61,.36,1);
}
.reveal .fx--fade{transform:none}
.reveal .fx.is-in{opacity:1;transform:none}

/* o traçado é desenhado pelo JS (stroke-dashoffset acompanha a rolagem) */
.reveal .paths path{transition:stroke-dashoffset .12s linear}

/* abertura da hero: logo, foto, título e texto entram em sequência */
.reveal .brand{transition-delay:.04s}
.reveal .socials{transition-delay:.14s}
.reveal .hero__media{
  transition-duration:1.15s;transition-delay:.1s;
  transform:translateY(1.4rem);
}
.reveal .hero__media img{
  transform:scale(1.05);
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1) .1s;
}
.reveal .hero__media.is-in img{transform:none}
.reveal .hero__title{transition-delay:.44s}
.reveal .hero__text{transition-delay:.64s}
.reveal .hero__cta{transition-delay:.8s}

/* no mobile a foto vive dentro de um bloco com overflow:hidden — deslocá-la
   abriria uma fresta da cor do bloco, então ali ela só esmaece.
   Precisa vir DEPOIS das regras da hero acima para vencer a cascata. */
@media (max-width:1180px){
  .reveal .hero__media,.reveal .publish__media{transform:none}
  .reveal .hero__media img{transform:scale(1.03)}
}

/* escalonamentos: o que está lado a lado entra em sequência */
.reveal .ways__sub{transition-delay:.08s}
.reveal .way--1{transition-delay:.06s}
.reveal .way--2{transition-delay:.16s}
.reveal .way--3{transition-delay:.26s}
.reveal .about__p2{transition-delay:.08s}
.reveal .about__title{transition-delay:.16s}
.reveal .meet__logo{transition-delay:.12s}
.reveal .meet__media{transition-delay:.06s}
.reveal .pub__text{transition-delay:.1s}
.reveal .pill--dark{transition-delay:.2s}
.reveal .how__a{transition-delay:.06s}
.reveal .how__b{transition-delay:.16s}
.reveal .how__c{transition-delay:.26s}
.reveal .how__text{transition-delay:.1s}
.reveal .step__t{transition-delay:.08s}
.reveal .safety__text{transition-delay:.1s}
.reveal .safety__b--1{transition-delay:.06s}
.reveal .safety__b--2{transition-delay:.14s}
.reveal .safety__b--3{transition-delay:.22s}
.reveal .safety__b--4{transition-delay:.3s}
.reveal .cta__text{transition-delay:.1s}
.reveal .pill--cta{transition-delay:.22s}
.reveal .cta__logo{transition-delay:.1s}
.reveal .cta__socials{transition-delay:.22s}
.reveal .foot__brands{transition-delay:.12s}
.reveal .foot__tag{transition-delay:.2s}

/* ==========================================================================
   Acessibilidade
   ========================================================================== */
:where(a):focus-visible{outline:2px solid var(--ink);outline-offset:.4rem;border-radius:.4rem}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .shelf__track{transform:none}
  .fx{opacity:1 !important;transform:none !important}
  .paths path{stroke-dashoffset:0 !important}
}