/* Série Temporadas · a casa da série em CSS. Tokens em _marca/tokens.json (SRS-019). */
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-display: swap; src: url("../fonts/DMSerifDisplay-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-display: swap; src: url("../fonts/DMSerifDisplay-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Serif Text"; font-weight: 400; font-display: swap; src: url("../fonts/DMSerifText-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Text"; font-weight: 400; font-display: swap; src: url("../fonts/DMSerifText-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap; src: url("../fonts/Oswald-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap; src: url("../fonts/Oswald-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Shadowiest"; font-weight: 400; font-display: block; src: url("../fonts/Shadowiest-400-latin.woff2") format("woff2"); }

:root {
  --creme: #FBF8EF; --areia: #EFE7D6; --barra: #F2C766; --traco: #BC454E; --tinta: #24231F;
  --display: "DM Serif Display", Georgia, serif; --texto: "DM Serif Text", Georgia, serif; --placa: "Oswald", "Arial Narrow", sans-serif; --mao: "Shadowiest", cursive;
  --col: min(100% - 2 * clamp(20px, 5vw, 72px), 1280px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--texto); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; }
a { color: var(--traco); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }
.hn, .placa, .rotulo, .sel, .by { font-family: var(--placa); font-weight: 500; text-transform: uppercase; letter-spacing: .34em; }
.pf { font-family: var(--display); }
.mao { font-family: var(--mao); font-weight: 400; }
.campo { padding: clamp(40px, 7vw, 96px) 0; }
.campo > .col { width: var(--col); margin: 0 auto; }
.campo-creme { background: var(--creme); }
.campo-areia { background: var(--areia); }
.rotulo { font-size: clamp(.7rem, .6rem + .3vw, .85rem); margin: 0 0 8px; padding-bottom: 10px; border-bottom: 2px solid var(--barra); display: inline-block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* cabeçalho */
.topo { width: var(--col); margin: 0 auto; display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0 0; font-size: .72rem; }
.topo .placa { letter-spacing: .34em; }
.topo nav { display: flex; gap: 18px; align-items: baseline; }
.sel a, .sel span { color: var(--tinta); letter-spacing: .2em; }
.sel a[aria-current] { text-decoration: underline; text-underline-offset: .22em; }
.by { font-family: var(--texto); text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* módulo 1 · apresentação */
.m1 { min-height: calc(100svh - 64px); display: grid; align-content: center; padding-top: clamp(24px, 5vw, 56px); padding-bottom: clamp(24px, 4vw, 48px); }
.m1 .col { display: grid; grid-template-columns: 55fr 45fr; gap: clamp(24px, 4vw, 64px); align-items: center; container-type: inline-size; }
.frase { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 5cqw, 4.25rem); line-height: 1.06; margin: 0; letter-spacing: -.01em; }
.frase span { display: block; white-space: nowrap; }
.mapa { margin: 0; width: 100%; aspect-ratio: 0.95; }
.mapa svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.mapa svg .mao { font-family: var(--mao); }
.mapa-hero { max-height: 78svh; justify-self: center; }

/* a linha */
.linha { position: sticky; top: 0; z-index: 10; background: var(--barra); color: var(--tinta); height: 64px; display: flex; align-items: center; justify-content: center; font-family: var(--placa); font-weight: 500; text-transform: uppercase; letter-spacing: .34em; font-size: clamp(.68rem, .55rem + .45vw, .95rem); transition: height .25s ease, font-size .25s ease; }
.linha .sel { position: absolute; right: clamp(20px, 5vw, 72px); font-size: .7rem; letter-spacing: .2em; opacity: 0; transition: opacity .25s ease; }
.linha.presa { height: 48px; font-size: clamp(.62rem, .5rem + .35vw, .8rem); box-shadow: 0 1px 0 rgba(36, 35, 31, .08); }
.linha.presa .sel { opacity: 1; }
.linha .texto { padding: 0 110px 0 16px; text-align: center; }
.linha.presa .texto { padding-right: 110px; }

/* módulo 2 · a bandeira da vez */
.m2 { min-height: 56svh; display: grid; place-items: center; padding-top: 0; }
.m2 .col { display: grid; justify-items: center; gap: 22px; }
.bandeira { display: block; width: min(360px, 62vw); aspect-ratio: 1; border-radius: 14%; overflow: hidden; filter: drop-shadow(0 18px 20px rgba(36, 35, 31, .22)); transform: translateY(-24px); opacity: 0; transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .4s ease; }
.bandeira.assenta { transform: translateY(0); opacity: 1; }
.cordoes { position: relative; width: min(360px, 62vw); height: 44px; }
.cordoes::before, .cordoes::after { content: ""; position: absolute; top: 0; width: 1.5px; height: 44px; background: var(--tinta); }
.cordoes::before { left: 36%; } .cordoes::after { right: 36%; }
.m2 .rotulo { border: 0; padding: 0; font-size: .68rem; letter-spacing: .3em; }
.hasteada { display: grid; justify-items: center; gap: 0; color: var(--tinta); }
.hasteada:hover { text-decoration: none; }

/* módulo 3 · por onde já passei */
.linha-h { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.linha-h::-webkit-scrollbar { display: none; }
.linha-h svg { display: block; }
.linha-h .hn { font-family: var(--placa); font-weight: 500; }
.linha-h .pf { font-family: var(--display); }
.linha-h .mao { font-family: var(--mao); }
.m3 ol { margin: 0; padding-left: 1.2em; font-size: .95rem; }

/* módulo 4 · tudo começou com */
.m4 .col { display: grid; grid-template-columns: 40fr 60fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
.origem p { max-width: 64ch; margin: 0 0 1em; }
.origem .pensei { margin-bottom: .3em; }
.porquenao { font-family: var(--mao); font-size: clamp(2.6rem, 2rem + 2vw, 3.5rem); color: var(--traco); line-height: 1; margin: 0; display: inline-block; transform: rotate(-3deg); transform-origin: left bottom; opacity: 0; }
.porquenao.escreve { opacity: 1; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--p) - 24px), transparent var(--p)); mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--p) - 24px), transparent var(--p)); animation: escreve 1.1s linear forwards; }
@property --p { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@keyframes escreve { from { --p: 0%; } to { --p: 130%; } }
.mapa-origem { aspect-ratio: 1.1; max-height: 70svh; }

/* módulo 5 · o que roda isso */
.m5 .col { max-width: 640px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.m5 p { margin: 0; max-width: 46ch; }
.m5 .cta { font-size: 1.05em; }

/* rodapé */
.rodape { border-top: 2px solid var(--barra); padding: 36px 0; font-size: .72rem; }
.rodape .col { width: var(--col); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; align-items: baseline; }
.rodape nav { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--texto); font-size: .9rem; }
.rodape nav a { color: var(--tinta); }

/* celular */
@media (max-width: 860px) {
  .m1 .col, .m4 .col { grid-template-columns: 1fr; }
  .frase { font-size: clamp(1.8rem, 1rem + 4.2vw, 3rem); }
  .frase span { white-space: normal; }
  .mapa-hero { max-height: none; width: min(100%, 420px); }
  .m4 .col { grid-template-areas: "mapa" "texto"; }
  .m4 .origem { grid-area: texto; }
  .m4 .mapa-origem { grid-area: mapa; width: min(100%, 440px); justify-self: center; }
  .linha .texto { padding: 0 16px; }
  .linha .sel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bandeira { transition: none; transform: none; opacity: 1; }
  .porquenao { opacity: 1 !important; animation: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
}