/* Camada de cinema sobre o visual editorial (style.css + catalog.css + loja.css + midia.css).
   Uma cena forte por página, não efeito espalhado: abertura com letterbox e Ken Burns,
   número que conta, manifesto que acende palavra por palavra, corte entre páginas.
   Todo conteúdo nasce visível; o movimento só acrescenta. Reduce-motion desliga tudo. */

:root {
  --tinta-cinema: #0d1b2e;
  --ease-cinema: cubic-bezier(.16, 1, .3, 1);
}
::selection { background: var(--yellow); color: var(--ink); }
html { scrollbar-color: var(--ink) var(--paper); }

/* logo "ponto final": entrelinha aberta o bastante para o til do "NÃO" não encostar no "C" de cima */
.brand-name { line-height: .98; }
.footer-brand, .footer-name { line-height: 1; }
.marca .brand-name strong { display: inline-flex; align-items: baseline; }
.ponto-final { display: inline-block; width: .62em; height: .62em; margin-left: .1em; flex: none; align-self: center; }
.footer-name strong { display: inline-flex; align-items: baseline; }

/* ---------------------------------------------------------------- abertura (título de filme) */
.abertura { position: relative; min-height: calc(100svh - 115px); max-height: 980px; display: grid; overflow: hidden; background: var(--tinta-cinema); color: #fff; isolation: isolate; }
.abertura-foto { position: absolute; inset: 0; z-index: -2; }
.abertura-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform-origin: 60% 30%; } /* a frase da camiseta azul fica acima do painel de assinatura */
.abertura::before { /* gradação para leitura: só onde o texto mora */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(13 27 46 / .9) 0%, rgb(13 27 46 / .84) 45%, rgb(13 27 46 / 0) 70%), /* apaga a frase impressa nas camisetas atrás do título */
    linear-gradient(0deg, rgb(13 27 46 / .7) 0%, rgb(13 27 46 / 0) 42%);
}
.abertura::after { /* granulação de película */
  content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
.faixa-cinema { position: absolute; left: 0; right: 0; height: 7vh; max-height: 64px; background: #05080d; z-index: 3; pointer-events: none; }
.faixa-cinema.cima { top: 0; transform-origin: top; }
.faixa-cinema.baixo { bottom: 0; transform-origin: bottom; }
.abertura-conteudo { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr minmax(320px, .75fr); gap: 5vw; align-items: end; padding: calc(7vh + 40px) 4.7vw calc(7vh + 18px); }
.abertura h1 { font-size: clamp(64px, 9.4vw, 152px); line-height: .84; text-transform: uppercase; letter-spacing: -.02em; }
.abertura h1 .linha { display: block; overflow: hidden; padding-bottom: .04em; }
.abertura h1 .linha > span { display: inline-flex; align-items: baseline; }
.abertura h1 .ponto-final { width: .46em; height: .46em; margin-left: .12em; }
.abertura-sub { font: 800 clamp(24px, 2.6vw, 40px)/1 var(--display); text-transform: uppercase; color: var(--yellow); margin-top: 18px; }
.abertura-alvo { margin-top: 14px; max-width: 36ch; font-size: clamp(18px, 1.55vw, 24px); font-weight: 600; line-height: 1.35; color: #fff; }
.abertura-creditos { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; letter-spacing: .04em; color: #d5dce8; }
.abertura-creditos b { color: #fff; font-weight: 700; }
.abertura .inscricao { background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); }
.abertura .inscricao-texto { color: #3f4c5c; }
.abertura .inscricao-aceite { color: #3f4c5c; }
.abertura .inscricao input[type=email] { background: #fff; border: 1px solid #c9c4b8; }
.abertura .inscricao button { background: var(--ink); color: var(--paper); }
.abertura .inscricao-status.ok { color: var(--green); }
.abertura .credito-ia { position: absolute; right: 4.7vw; top: calc(7vh + 14px); z-index: 4; font-size: 11px; letter-spacing: .06em; color: #fff; opacity: .8; }

@media (prefers-reduced-motion: no-preference) {
  .abertura-foto img { animation: kenburns 14s var(--ease-cinema) both; }
  @keyframes kenburns { from { transform: scale(1.14) translate3d(1.5%, 1%, 0); } to { transform: scale(1.02); } }
  .abertura h1 .linha > span { animation: sobe 1.1s var(--ease-cinema) both; }
  .abertura h1 .linha:nth-child(2) > span { animation-delay: .12s; }
  .abertura h1 .linha:nth-child(3) > span { animation-delay: .24s; }
  @keyframes sobe { from { transform: translateY(105%); } to { transform: none; } }
  .abertura-sub, .abertura-creditos { animation: surge 1s .45s var(--ease-cinema) both; }
  .abertura .inscricao { animation: surge 1s .6s var(--ease-cinema) both; }
  @keyframes surge { from { transform: translateY(18px); opacity: .01; } to { transform: none; opacity: 1; } }
  .abertura::after { animation: grao .9s steps(6) infinite; }
  @keyframes grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 2%); } 100% { transform: translate(0, 0); } }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* as faixas de cinema se abrem quando a pessoa começa a rolar */
    .faixa-cinema { animation: abre-faixa linear both; animation-timeline: scroll(root block); animation-range: 0 40vh; }
    @keyframes abre-faixa { to { transform: scaleY(0); } }
    .abertura-foto { animation: paralaxe linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    @keyframes paralaxe { to { transform: translateY(14%); } }
  }
}

/* ---------------------------------------------------------------- o número do dia */
.cena-numero { background: var(--yellow); color: var(--ink); padding: clamp(56px, 9vw, 120px) 4.7vw; display: grid; grid-template-columns: auto 1fr; gap: 5vw; align-items: end; overflow: hidden; }
.cena-numero strong { font: 900 clamp(96px, 21vw, 330px)/.78 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cena-numero .legenda { display: grid; gap: 18px; padding-bottom: 1.4vw; max-width: 46ch; }
.cena-numero .legenda p { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; }
.cena-numero .legenda a { font-weight: 700; border-bottom: 2px solid var(--ink); padding-bottom: 1px; }
.cena-numero .legenda-chamada { font-size: 16px; line-height: 1.6; }

/* ---------------------------------------------------------------- manifesto que acende palavra por palavra */
.cena-manifesto { position: relative; background: var(--ink); color: var(--paper); }
.cena-manifesto[data-palavras] { height: 220vh; }
.cena-manifesto .palco { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; gap: 34px; padding: 80px 4.7vw; }
.cena-manifesto p.frase { font: 800 clamp(38px, 5.8vw, 96px)/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; max-width: 18ch; }
.cena-manifesto p.frase .p { transition: opacity .35s linear, color .35s linear; }
.cena-manifesto p.frase .p.apagada { opacity: .46; } /* ainda legível (≥3:1) antes de acender */
.cena-manifesto p.frase em { font-style: normal; color: var(--yellow); }
.cena-manifesto .assina { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; font-size: 15px; color: #c9d2e3; }
.cena-manifesto .assina a { color: var(--yellow); font-weight: 700; border-bottom: 1px solid currentColor; }
.cena-manifesto .assina .ponto-final { width: 34px; height: 34px; margin: 0; }
@media (min-width: 901px) { /* letreiro de créditos: a frase à esquerda, a assinatura na metade direita */
  .cena-manifesto .palco { grid-template-columns: minmax(0, 1.6fr) minmax(220px, .6fr); align-items: end; column-gap: 6vw; }
  .cena-manifesto .assina { display: grid; gap: 16px; justify-items: start; padding-top: 22px; border-top: 1px solid rgb(242 239 232 / .28); font-size: 17px; line-height: 1.5; margin-bottom: 1.2vw; }
}

/* ---------------------------------------------------------------- revelações ao rolar (a partir do visível) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela { animation: revela linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes revela { from { transform: translateY(48px); } to { transform: none; } }
    .revela-foto { animation: cortina linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes cortina { from { clip-path: inset(0 0 22% 0); transform: scale(1.06); } to { clip-path: inset(0); transform: none; } }
    .barra-leitura { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--yellow); transform-origin: 0 50%; z-index: 40; animation: le linear both; animation-timeline: scroll(root block); }
    @keyframes le { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
.barra-leitura { display: none; }
@supports (animation-timeline: scroll()) { .barra-leitura { display: block; } }
@media (prefers-reduced-motion: reduce) { .barra-leitura { display: none; } }

/* título de artigo: as linhas sobem como letreiro */
@media (prefers-reduced-motion: no-preference) {
  .artigo-topo h1 { animation: sobe-titulo 1s var(--ease-cinema) both; }
  @keyframes sobe-titulo { from { clip-path: inset(0 0 100% 0); transform: translateY(24px); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
}

/* ---------------------------------------------------------------- corte entre páginas */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .35s var(--ease-cinema) both corte-sai; }
  ::view-transition-new(root) { animation: .55s var(--ease-cinema) both corte-entra; }
  @keyframes corte-sai { to { opacity: 0; transform: scale(.985); } }
  @keyframes corte-entra { from { opacity: 0; transform: scale(1.015); } }
}

/* ---------------------------------------------------------------- arara na capa */
.cena-arara { padding: clamp(56px, 8vw, 110px) 4.7vw; background: #e5e1d7; overflow-x: clip; }
.cena-arara .collection-intro { margin-top: 0; }
.cena-arara .collection-intro h2 { font-size: clamp(48px, 5.6vw, 88px); text-transform: uppercase; }
.cena-arara .collection-intro h2 span { color: var(--green); }
/* a arara (capa e loja) é um traço de tinta, não metal imitado em degradê; o centro fica onde os ganchos encostam */
.barra { top: 41px; height: 6px; border-radius: 3px; background: var(--ink); box-shadow: none; }
.barra::before, .barra::after { top: 3px; width: 5px; background: var(--ink); }
@media (max-width: 700px) { .barra { top: 36px; } }
.cena-arara .collection-intro > p a { font-weight: 700; border-bottom: 1px solid var(--ink); }

@media (max-width: 900px) {
  .abertura { min-height: 0; max-height: none; }
  /* celular: foto menor para o botão de assinar caber na primeira tela */
  .abertura-foto { position: relative; height: 38svh; inset: auto; overflow: hidden; }
  .abertura::before { background: linear-gradient(0deg, var(--tinta-cinema) 50%, rgb(13 27 46 / .82) 62%, rgb(13 27 46 / 0) 80%); }
  .abertura-foto img { object-position: 96% 8%; } /* enquadra os três modelos; a rua vazia fica de fora */
  .abertura-foto::after { /* o título sobe sobre a base da foto: escurece ali para a estampa não competir com ele */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgb(13 27 46 / .96) 0%, rgb(13 27 46 / .86) 36%, rgb(13 27 46 / 0) 68%);
  }
  .abertura-conteudo { grid-template-columns: 1fr; gap: 20px; padding: 0 6vw 40px; margin-top: -14svh; }
  .abertura h1 { font-size: clamp(58px, 17vw, 110px); }
  .abertura-sub { margin-top: 12px; }
  .abertura-creditos { display: none; } /* no celular, o gancho e o formulário já dizem isso; o botão precisa caber na primeira tela */
  .abertura-alvo { margin-top: 10px; }
  .faixa-cinema { height: 4svh; }
  .abertura .credito-ia { top: calc(4svh + 10px); }
  .cena-numero { grid-template-columns: 1fr; }
  .cena-manifesto[data-palavras] { height: 190vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cena-manifesto[data-palavras] { height: auto; }
  .cena-manifesto .palco { position: static; min-height: 0; }
}

/* loja: chamada da abertura */
.abertura-cta { justify-self: end; align-self: end; }
.abertura-cta .button { min-height: 60px; font-size: 14px; }
@media (max-width: 900px) { .abertura-cta { justify-self: start; } }

/* aviso flutuante: escondido de verdade até ser usado */
.aviso { visibility: hidden; }
.aviso.on { visibility: visible; }

/* ---------------------------------------------------------------- legibilidade
   O visual editorial herdado usava etiquetas de 7–9px. O leitor tem de 25 a 55+ anos e lê no celular:
   aqui ficam os mínimos (etiquetas ≥ 11–12px, texto corrido ≥ 15–16px), sem mudar o desenho. */
.announcement { font-size: 11px; letter-spacing: .08em; }
.topo nav { font-size: 15px; }
.nav-cta { font-size: 14px; }
.eyebrow, .section-note, .status-pill, .campo legend, .idea-signature, .price-row>span, .detail-price-row>span,
.detail-kicker .eyebrow, .detail-kicker .status-pill, .tag, .numero-dia span, .capa-numero span { font-size: 12px; }
.footer-bottom { font-size: 13px; }
.footer-bottom > p:nth-child(2) { color: #e6ebf2; }
.detail-breadcrumb { color: #55615e; } /* contraste AA no papel */
.footer-links { font-size: 14px; }
.rack-footnote, .rack-footnote p, .product-label { font-size: 13px; }
.product-label small, .color-link.is-off small { font-size: 11px; }
.product-open { font-size: 12px; }
.field-note, .gallery-note, .cap-note, .home-product-link, .detail-actions, .detail-breadcrumb, .gallery-thumb>span,
.related-card>small, .measure-sheet p, .measure-sheet dl, .inscricao-aceite, .manifesto .anos-legenda, .qty-line>span { font-size: 13px; }
.faq summary, .product-detail summary { font-size: 15px; }
.faq details p, .product-detail p, .detail-content .product-detail p, .detail-content .product-detail ul { font-size: 15px; line-height: 1.7; }
.collection-intro>p, .hero-description, .idea-copy>p, .share-right>p, .shop-description, .detail-description,
.measure-section>div>p:last-child { font-size: 16px; }
.opcoes label, .color-link, .card-linha, .share-links, .share-copy, .arara-abas button, .arara-generos, .card-info, .button { font-size: 14px; }
.zoom-hint, .zoom-close, .aviso { font-size: 13px; }
.gallery-caption, .detail-stage figcaption, .vitrine figcaption, .idea-study figcaption, .hero-photo figcaption, .photo-tag, .image-zoom>p { font-size: 11px; }
.qtd output { font-size: 15px; }
.ticker>div { font-size: 13px; }
.anuncio-curto { display: none; }
@media (max-width: 700px) {
  /* no celular a faixa usa a versão curta e cresce se precisar, nunca corta o texto */
  .announcement { font-size: 11px; letter-spacing: .02em; height: auto; min-height: 29px; padding-block: 6px; gap: 12px; }
  .announcement > span:first-child { max-width: none; }
  .anuncio-longo { display: none; }
  .anuncio-curto { display: inline; }
  .topo nav { font-size: 15px; }
}

/* setas desenhadas do sprite, no lugar dos caracteres ↗ ↑ ↓ */
.seta { display: inline-block; width: .95em; height: .95em; vertical-align: -.14em; flex: none; }

/* ---------------------------------------------------------------- loja e produto: o mesmo acabamento da mídia */
/* ênfase nos títulos na própria fonte de display, sem serifa de sistema */
.caps-section .collection-intro h2 em, .idea-copy h2 em, .measure-section h2 em { font-family: var(--display); font-style: normal; font-weight: inherit; font-size: 1em; letter-spacing: inherit; }
.detail-linha { font-size: 15px; color: #4b5a63; margin-top: 14px; }
.detail-price-row .status-pill { margin-left: 4px; }
.ticker-ponto { display: inline-flex; align-items: center; }
.anos span.pt { background: var(--yellow); }
.collection h2 span { color: var(--green); } /* segunda linha do título no verde da paleta, não em cinza solto */