/* Hero composition: one two-sentence headline, three visual cuts. Each sentence keeps its
   natural width and the films take the rest of the row. */
.hero-section{
  padding:136px 0 62px;
  background-image:radial-gradient(rgb(var(--cm-fg) / .1) .65px,transparent .8px);
  background-size:56px 56px;
}
.hero-section>.container{width:min(1500px,calc(100% - 96px))}
.hero-section .section-meta{margin-bottom:42px}
.hero-section .hero-title{display:grid;gap:20px;font-size:inherit;line-height:.88;letter-spacing:normal}
.hero-section .hero-row{display:grid;align-items:center;gap:24px}
.hero-section .hero-row-top{grid-template-columns:auto minmax(0,1fr)}
.hero-section .hero-row-bottom{grid-template-columns:minmax(0,1fr) auto}
.hero-section .hero-word{display:block;white-space:nowrap;font-weight:900;line-height:.92;letter-spacing:-.073em}
/* Sized for a ~9.2em line ("NÃO NASCERAM" is narrower): every line stays inside its row. */
.hero-section .hero-word-first,.hero-section .hero-word-second{font-size:calc(7.5vw - 9px)}
.hero-section .hero-word sup{font-size:.18em;margin-left:.1em;top:.25em}
.hero-section .hero-film{display:block;position:relative;overflow:hidden;border-radius:10px;height:clamp(116px,12.35vw,188px);background:rgb(var(--cm-surface-3))}
/* The clips carry 96px black pillars per side (content is 1728 of 1920px): the video
   overflows its frame by 6% on every edge so the pillars fall outside the crop. */
.hero-section .hero-film video{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;object-fit:cover}
.hero-section .hero-film-main video{object-position:60% center}
.hero-section .hero-film-wonder video{object-position:46% center}
.hero-section .hero-film-motion video{object-position:50% center}
.hero-section .hero-preview-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.hero-section .hero-bottom{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:36px;padding:40px 0 28px}
.hero-section .hero-intro{grid-column:2;grid-row:1;justify-self:end;display:grid;gap:12px;max-width:380px}
.hero-section .hero-intro p{color:rgb(var(--cm-fg-muted));font-size:13px;line-height:1.65}
.hero-section .hero-cta-group{grid-column:1;grid-row:1;gap:14px}
.hero-section .hero-cta-group .pill{min-width:218px;min-height:58px;font-size:12px}
.hero-section .hero-footnote{justify-content:flex-end;border:0;padding-top:9px}
@media(min-width:1600px){
  .hero-section .hero-word-first,.hero-section .hero-word-second{font-size:112px}
  .hero-section .hero-film{height:200px}
}
@media(min-width:1000px) and (max-height:800px){
  .hero-section{padding-top:120px;padding-bottom:40px}
  .hero-section .section-meta{margin-bottom:30px}
  .hero-section .hero-bottom{padding-top:28px}
}
@media(max-width:1100px){
  .hero-section>.container{width:calc(100% - 64px)}
  .hero-section .hero-row{gap:18px}
  .hero-section .hero-title{gap:16px}
  .hero-section .hero-word-first,.hero-section .hero-word-second{font-size:calc(7.5vw - 6px)}
  .hero-section .hero-film{height:12.5vw;border-radius:7px}
  .hero-section .hero-preview-pair{gap:12px}
  .hero-section .hero-cta-group .pill{min-width:0;min-height:50px;padding:14px 22px;font-size:11px}
  .hero-section .hero-bottom{gap:20px}
}
@media(max-width:999px){
  .hero-section{padding-top:125px;padding-bottom:50px}
  .hero-section .section-meta{margin-bottom:36px}
  .hero-section .hero-bottom{grid-template-columns:1fr;padding-top:30px;gap:21px}
  .hero-section .hero-intro{grid-column:1;grid-row:2;justify-self:start;max-width:460px}
  .hero-section .hero-cta-group{grid-column:1;grid-row:1}
  .hero-section .hero-footnote{padding-top:12px}
}
@media(max-width:650px){
  .hero-section{padding:110px 0 46px;background-size:42px 42px}
  .hero-section>.container{width:calc(100% - 40px)}
  .hero-section .section-meta{font-size:11px;gap:18px;margin-bottom:29px}
  .hero-section .hero-title{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 9px;line-height:.9}
  .hero-section .hero-row,.hero-section .hero-preview-pair{display:contents}
  .hero-section .hero-word-first{grid-column:1/-1;grid-row:1;font-size:calc(10.5vw - 4px);letter-spacing:-.07em}
  .hero-section .hero-word-second{grid-column:1/-1;grid-row:2;font-size:calc(10.5vw - 4px);letter-spacing:-.07em}
  /* The gap lives on the films: the title's entry mask owns its own margins. */
  .hero-section .hero-film{height:28vw;min-height:96px;max-height:165px;margin-top:13px;border-radius:6px;grid-row:3}
  .hero-section .hero-film-main{grid-column:3}
  .hero-section .hero-film-wonder{grid-column:1}
  .hero-section .hero-film-motion{grid-column:2}
  .hero-section .hero-film-main video{object-position:center}
  .hero-section .hero-bottom{padding:25px 0 20px;gap:20px}
  .hero-section .hero-cta-group{width:100%;flex-direction:column;gap:9px}
  .hero-section .hero-cta-group .pill{flex:none;min-width:0;min-height:46px;padding:13px 18px;font-size:11px;gap:8px}
  /* The label stays at the pill's size (.pill span would set 18px). */
  .hero-section .hero-cta-group .pill .cm-btn__label{font-size:inherit}
  .hero-section .hero-intro{gap:10px;max-width:340px}
  .hero-section .hero-intro p{font-size:12px;line-height:1.6}
  .hero-section .hero-footnote{padding-top:3px}
  .hero-section .hero-footnote>a{font-size:11px;gap:12px}
}