/* Landing Egg Friday — gerado a partir da home aprovada (design/egg-friday no repositório ovovo-eggfriday-2026). */
/* Layout: uma bitaca. O balcão de azulejo atravessa a tela, os blocos se apoiam
   em linhas de prateleira, as fotos são vãos de porta. Tema único, de propósito. */
:root{
  --cal:#F3F1EA;        /* parede caiada */
  --cal-2:#E9E5DA;      /* sombra da parede */
  --tinta:#4A0E1B;      /* vinho escurecido: todo o texto */
  --vinho:#7E1326;      /* vinho da logo */
  --anil:#21398C;       /* azulejo */
  --anil-2:#182B6E;
  --gema:#F6A615;       /* só onde é para agir */
  --gema-2:#DE8F00;
  --pardo:#E8D8BB;      /* papel de embrulho */
  --papel:#FBF8EF;      /* folha da caderneta */
  --linha:rgba(74,14,27,.22);
  --letreiro:"Bricolage Grotesque","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --mao:"Caveat","Segoe Print","Bradley Hand",cursive;
  --passo:.25s; --pouso:.6s; --passeio:1.2s;
  --curva-passo:steps(3,end); --curva-pouso:cubic-bezier(.2,.8,.2,1);
  --calha-e:max(16px,env(safe-area-inset-left,0px));
  --calha-d:max(16px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
body{margin:0;background:var(--cal);color:var(--tinta);font-family:var(--letreiro);
  font-size:17px;line-height:1.55;font-variation-settings:"wdth" 96;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--gema);color:var(--tinta)}
img{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gema);outline-offset:3px;border-radius:2px}
.dentro{max-width:1160px;margin-inline:auto;padding-left:var(--calha-e);padding-right:var(--calha-d)}
.faixa{padding-block:clamp(56px,9vw,120px)}

/* tipografia */
.letreiro{font-weight:800;font-variation-settings:"wdth" 76;line-height:.94;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1.letreiro{font-size:clamp(2.05rem,8.6vw,6.2rem)}
h2.letreiro{font-size:clamp(2rem,6.4vw,4.6rem)}
h3{font-weight:700;font-variation-settings:"wdth" 82;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.1;margin:0}
p{margin:0}
.texto{max-width:34em}
.rotulo{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mao{font-family:var(--mao);font-weight:700;font-size:1.5em;line-height:1}

/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px}
.topo img{width:118px;height:auto;margin-left:-14px}
.topo .rotulo{text-align:right;line-height:1.3}

/* hero */
.hero{padding-bottom:0}
.hero-grade{display:grid;gap:18px;align-items:end}
.hero-acao{padding-bottom:6px}
.hero .rotulo{display:inline-block;background:var(--tinta);color:var(--cal);padding:5px 9px;margin-bottom:12px}
.hero-sub{margin-top:14px;font-size:1.02rem}

.etiqueta{position:relative;justify-self:start;max-width:17.5em;color:#fff;padding:12px 18px 12px 34px;
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.17) 0 10px,transparent 10px 20px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.17) 0 10px,transparent 10px 20px),
    var(--vinho);
  transform:rotate(-2deg);transform-origin:14px 50%;box-shadow:0 2px 0 rgba(74,14,27,.25)}
.etiqueta::before{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(255,255,255,.6);pointer-events:none}
.etiqueta::after{content:"";position:absolute;left:12px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--cal)}
.etiqueta b{display:block;font-weight:800;font-variation-settings:"wdth" 78;font-size:clamp(1.9rem,6vw,3rem);line-height:.95;letter-spacing:-.01em}
.etiqueta b small{font-size:.42em;font-weight:600;letter-spacing:0}
.etiqueta span{display:block;font-size:.76rem;font-weight:600;line-height:1.25;margin-top:3px}
.etiqueta .cordao{display:none}
.etiqueta em{font-family:var(--mao);font-style:normal;font-size:1.25rem;color:var(--gema);display:block;line-height:1;margin-top:2px}

.cep{display:grid;gap:8px}
.cep label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cep-linha{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.cep input{font:inherit;font-size:1.2rem;font-weight:600;letter-spacing:.06em;color:var(--tinta);background:#fff;
  border:2px solid var(--tinta);border-radius:0;padding:12px 14px;width:100%;min-height:52px}
.cep input::placeholder{color:rgba(74,14,27,.45);font-weight:400}
.botao{font:inherit;font-weight:800;font-variation-settings:"wdth" 82;font-size:1.05rem;color:var(--tinta);background:var(--gema);
  border:2px solid var(--tinta);border-radius:0;padding:12px 18px;min-height:52px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:4px 4px 0 var(--tinta);
  transition:transform var(--passo) var(--curva-passo),box-shadow var(--passo) var(--curva-passo),background var(--passo)}
.botao:hover{background:var(--gema-2);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinta)}
.botao:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--tinta)}
.cep-aviso{min-height:1.4em;font-size:.92rem;font-weight:600}
.cep-aviso[data-tipo="erro"]{color:#9B1021}
.garantias{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.84rem;font-weight:600;list-style:none;padding:0;margin:4px 0 0}
.garantias li::before{content:"·";margin-right:8px;color:var(--vinho);font-weight:800}
.garantias li:first-child::before{content:none}

.porta{margin:0;position:relative}
.porta img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 0 0;border:2px solid var(--tinta);border-bottom:0}
.porta figcaption{position:absolute;right:10px;bottom:12px;background:var(--papel);color:var(--tinta);padding:4px 10px 2px;
  font-family:var(--mao);font-size:1.25rem;font-weight:700;transform:rotate(2deg);border:1.5px solid var(--tinta)}

/* balcão */
.balcao{position:relative;height:clamp(64px,9vw,112px);border-top:6px solid var(--tinta);border-bottom:6px solid var(--tinta);
  background:repeating-conic-gradient(from 45deg,var(--anil) 0 25%,var(--cal) 0 50%) 0 0/clamp(32px,4.5vw,56px) clamp(32px,4.5vw,56px)}
.bando{position:absolute;bottom:calc(100% + 2px);left:0;width:clamp(96px,11vw,132px);height:auto;mix-blend-mode:multiply;
  pointer-events:none;animation:passeio 46s linear infinite;translate:var(--foge,0px) 0;transition:translate var(--pouso) var(--curva-passo)}
@keyframes passeio{
  0%{transform:translateX(5vw)} 10%{transform:translateX(5vw)}
  20%{transform:translateX(16vw)} 26%{transform:translateX(16vw) rotate(-2deg)} 30%{transform:translateX(16vw)}
  42%{transform:translateX(40vw)} 56%{transform:translateX(40vw)}
  66%{transform:translateX(62vw)} 72%{transform:translateX(62vw) rotate(2deg)} 76%{transform:translateX(62vw)}
  88%{transform:translateX(112vw)} 88.01%{transform:translateX(-32vw)}
  100%{transform:translateX(5vw)}
}

/* números */
.numeros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;padding-block:clamp(40px,6vw,72px)}
.numeros div{border-top:2px solid var(--tinta);padding-top:10px}
.numeros b{display:block;font-weight:800;font-variation-settings:"wdth" 76;font-size:clamp(2rem,6vw,4rem);line-height:.95;font-variant-numeric:lining-nums}
.numeros span{font-size:.9rem;font-weight:600}

/* liberdade */
.livres{background:var(--anil);color:var(--cal)}
.livres ::selection{background:var(--cal);color:var(--anil)}
.livres-grade{display:grid;gap:36px}
.livres h2 i{font-style:normal;display:block}
.livres h2 .e{color:var(--pardo)}
.dupla{display:grid;gap:30px;margin-top:8px}
.dupla section{border-top:2px solid var(--cal);padding-top:14px}
.dupla ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.dupla li{padding-left:22px;position:relative}
.dupla li::before{content:"";position:absolute;left:0;top:.6em;width:11px;height:7px;border-radius:50%;background:var(--cal)}
.livres .porta img{border-color:var(--cal);aspect-ratio:3/4}
.livres .porta figcaption{left:10px;right:auto;transform:rotate(-2deg)}
.carimbos{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.carimbo{width:104px;height:104px;border-radius:50%;border:2px solid var(--cal);display:grid;place-items:center;text-align:center;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.25;padding:10px;transform:rotate(-6deg)}
.carimbo:nth-child(2){transform:rotate(4deg)} .carimbo:nth-child(3){transform:rotate(-2deg)}

/* prateleira de benefícios */
.prateleira{display:grid;gap:0;margin-top:34px}
.prateleira article{position:relative;border-bottom:3px solid var(--tinta);padding:26px 0 22px;display:grid;gap:8px;align-content:start}
.prateleira article:first-child{border-top:3px solid var(--tinta)}
.tag{justify-self:start;background:var(--pardo);border:1.5px solid var(--tinta);padding:2px 12px 0;font-family:var(--mao);
  font-weight:700;font-size:1.3rem;line-height:1.2;transform:rotate(-2deg)}
.prateleira article:nth-child(even) .tag{transform:rotate(1.5deg)}

/* como funciona */
.passos{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:26px;counter-reset:p}
.passos li{counter-increment:p;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.passos li::before{content:counter(p);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(3.4rem,9vw,6rem);line-height:.8;color:var(--vinho);min-width:.7em}
.passos p{margin-top:6px}

/* comparação */
.rola{overflow-x:auto;margin-top:28px}
table{border-collapse:collapse;width:100%;font-size:.98rem}
th,td{text-align:left;padding:13px 12px 13px 0;border-bottom:1.5px solid var(--linha);vertical-align:top;width:50%}
thead th{border-bottom:3px solid var(--tinta);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
td:first-child{opacity:.72}
td:last-child,thead th:last-child{font-weight:700;padding-left:12px;background:var(--cal-2)}

/* caderneta */
.fiado{background:var(--pardo)}
.fiado-grade{display:grid;gap:34px;align-items:start}
.planos{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;border:0;padding:0}
.planos legend{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:0;margin-bottom:10px}
.planos label{position:relative;cursor:pointer}
.planos input{position:absolute;opacity:0;inset:0;cursor:pointer}
.planos span{display:block;border:2px solid var(--tinta);padding:9px 14px;font-weight:700;font-size:.95rem;line-height:1.2;background:var(--papel);
  transition:background var(--passo),transform var(--passo) var(--curva-passo)}
.planos small{display:block;font-weight:500;font-size:.78rem}
.planos input:checked+span{background:var(--tinta);color:var(--cal);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--vinho)}
.planos input:focus-visible+span{outline:3px solid var(--gema);outline-offset:3px}
.caderneta{position:relative;background:var(--papel);border:2px solid var(--tinta);padding:20px 16px 20px 46px;transform:rotate(-1deg);
  background-image:linear-gradient(90deg,transparent 33px,rgba(126,19,38,.5) 33px,rgba(126,19,38,.5) 35px,transparent 35px),
    repeating-linear-gradient(180deg,transparent 0 37px,rgba(33,57,140,.28) 37px 38px);
  background-position:0 0,0 20px;box-shadow:6px 6px 0 var(--tinta)}
.caderneta h3{font-family:var(--mao);font-weight:700;font-size:1.9rem;line-height:38px;font-variation-settings:normal}
.caderneta dl{margin:0;font-family:var(--mao);font-weight:500;font-size:1.5rem;line-height:38px}
.caderneta dl>div{display:flex;gap:8px;align-items:baseline;min-height:38px}
.caderneta dt{flex:0 1 auto}
.caderneta dd{margin:0;margin-left:auto;font-weight:700;text-align:right;white-space:nowrap}
.caderneta .pont{flex:1 1 12px;border-bottom:2px dotted var(--linha);transform:translateY(-8px);min-width:12px}
.caderneta .solta dd{white-space:normal}
.caderneta .quarta{color:var(--vinho)}
.caderneta .visto{color:var(--anil)}
.caderneta.reescreve dl>div{animation:escreve var(--pouso) var(--curva-passo) both}
.caderneta.reescreve dl>div:nth-child(2){animation-delay:.08s}.caderneta.reescreve dl>div:nth-child(3){animation-delay:.16s}
.caderneta.reescreve dl>div:nth-child(4){animation-delay:.24s}.caderneta.reescreve dl>div:nth-child(5){animation-delay:.32s}
.caderneta.reescreve dl>div:nth-child(6){animation-delay:.4s}.caderneta.reescreve dl>div:nth-child(7){animation-delay:.48s}
@keyframes escreve{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.prazo{margin-top:22px;border-top:2px solid var(--tinta);padding-top:14px;font-weight:600}

/* a bitaca do assinante */
.bitaca{color:#fff;background:
  repeating-linear-gradient(45deg,rgba(0,0,0,.16) 0 22px,transparent 22px 44px),
  repeating-linear-gradient(-45deg,rgba(0,0,0,.16) 0 22px,transparent 22px 44px),
  var(--vinho)}
.bitaca ::selection{background:var(--gema);color:var(--tinta)}
.bitaca-grade{display:grid;gap:36px;align-items:start}
.bitaca .rotulo{display:inline-block;background:var(--cal);color:var(--tinta);padding:5px 9px;margin-bottom:14px}
.bitaca .texto{margin-top:16px;font-size:1.06rem}
.estante{list-style:none;margin:30px 0 0;padding:0}
.estante li{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:5px solid var(--cal);padding:16px 0 6px}
.estante b{font-weight:800;font-variation-settings:"wdth" 76;font-size:clamp(1.7rem,5.2vw,3.2rem);line-height:.95}
.estante .tag{color:var(--tinta);flex:none;margin-bottom:6px;transform:rotate(-3deg)}
.estante li:nth-child(even) .tag{transform:rotate(2deg)}
.bitaca .botao{margin-top:28px;border-color:var(--tinta)}
.bitaca .porta{padding-top:26px}
.bitaca .porta img{border-color:var(--cal);aspect-ratio:3/4}
.placa{position:absolute;top:0;left:50%;z-index:1;translate:-50% 0;rotate:-3deg;background:var(--papel);color:var(--tinta);border:2px solid var(--tinta);
  padding:8px 18px 6px;text-align:center;font-weight:800;font-variation-settings:"wdth" 78;font-size:1.15rem;line-height:1.05;text-transform:uppercase;letter-spacing:.04em;
  box-shadow:4px 4px 0 var(--tinta);white-space:nowrap}
.placa small{display:block;font-family:var(--mao);font-weight:700;font-size:1.25rem;text-transform:none;letter-spacing:0;color:var(--vinho)}

/* história */
.historia-grade{display:grid;gap:34px}
.fotos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.fotos img{width:100%;height:100%;object-fit:cover;border:2px solid var(--tinta)}
.fotos .a{grid-column:1/-1;aspect-ratio:3/2}.fotos .b{grid-column:1/4;aspect-ratio:1}.fotos .c{grid-column:4/-1;aspect-ratio:1}
.vozes{display:grid;gap:26px;margin-top:40px}
.voz{margin:0;border-top:3px solid var(--tinta);padding-top:16px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start}
.voz img{width:72px;height:72px;object-fit:cover;border-radius:50%;border:2px solid var(--tinta)}
.voz blockquote{margin:0;font-size:1.08rem;font-weight:500;line-height:1.45}
.voz figcaption{margin-top:10px;font-size:.84rem;font-weight:700}
.voz figcaption span{font-weight:500;display:block}

/* vídeos */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
.video{position:relative;aspect-ratio:4/5;border:2px solid var(--tinta);background:var(--vinho);color:#fff;text-decoration:none;
  display:flex;flex-direction:column;justify-content:flex-end;padding:14px;overflow:hidden;
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.17) 0 12px,transparent 12px 24px),repeating-linear-gradient(-45deg,rgba(0,0,0,.17) 0 12px,transparent 12px 24px)}
.video.tv{background-color:var(--anil)}
.video::before{content:"";position:absolute;top:16px;left:16px;width:46px;height:46px;border-radius:50%;background:var(--cal);transition:transform var(--passo) var(--curva-passo)}
.video::after{content:"";position:absolute;top:29px;left:34px;border-left:14px solid var(--tinta);border-top:10px solid transparent;border-bottom:10px solid transparent;transition:transform var(--passo) var(--curva-passo)}
.video:hover::before,.video:hover::after{transform:scale(1.15)}
.video b{font-weight:800;font-variation-settings:"wdth" 78;font-size:clamp(1.1rem,3vw,1.6rem);line-height:1}
.video span{font-size:.8rem;font-weight:600;margin-top:6px}
.imprensa{margin-top:30px;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;border-top:2px solid var(--tinta);padding-top:14px}
.imprensa b{font-weight:800;font-variation-settings:"wdth" 80;font-size:1.25rem}

/* perguntas */
.perguntas{margin-top:28px;border-top:3px solid var(--tinta)}
details{border-bottom:1.5px solid var(--linha)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;font-weight:700;font-size:1.06rem;line-height:1.3}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;font-weight:800;font-size:1.5rem;line-height:1;width:1em;text-align:center;transition:transform var(--passo) var(--curva-passo)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 18px;max-width:38em}

/* balcão final */
.fim{text-align:left;padding-bottom:clamp(60px,10vw,130px)}
.fim-grade{display:grid;gap:26px;align-items:end}
.fim .mao{color:var(--vinho);display:block;margin-bottom:6px;font-size:1.7rem}
footer{background:var(--tinta);color:var(--cal);font-size:.86rem}
footer .dentro{padding-block:34px 96px;display:grid;gap:14px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-weight:700}
footer .proto{opacity:.7;font-size:.78rem}

/* hellobar da oferta */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--tinta);color:var(--cal);
  padding:10px var(--calha-d) calc(10px + env(safe-area-inset-bottom,0px)) var(--calha-e);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(110%);transition:transform var(--pouso) var(--curva-passo)}
.barra.visivel{transform:none}
.barra p{font-size:.8rem;font-weight:600;line-height:1.25}
.barra p b{display:block;font-size:1.05rem;font-weight:800;font-variation-settings:"wdth" 80}
.barra .botao{min-height:46px;padding:8px 14px;font-size:.95rem;box-shadow:none;border-color:var(--gema);white-space:nowrap}

@media (min-width:560px){
  .cep-linha{grid-template-columns:minmax(0,1fr) auto}
  .numeros{grid-template-columns:repeat(4,minmax(0,1fr))}
  .videos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vozes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:860px){
  body{font-size:18px}
  .topo img{width:150px}
  .hero-grade{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);column-gap:48px;row-gap:0;
    grid-template-areas:"texto ." "texto etiqueta" "texto porta" "acao porta";grid-template-rows:1fr auto auto auto}
  .hero-texto{grid-area:texto;align-self:start}
  .hero-acao{grid-area:acao;padding-block:26px 96px}
  .hero .porta{grid-area:porta;align-self:end}
  /* etiqueta de preço pendurada por um cordão, no vão acima da foto */
  .hero .etiqueta{grid-area:etiqueta;justify-self:center;align-self:end;z-index:1;margin:0 0 30px;max-width:none;width:17rem;
    text-align:center;padding:50px 22px 22px;transform:rotate(3deg);transform-origin:50% -420px;
    box-shadow:6px 6px 0 rgba(74,14,27,.28);animation:balanco 2.6s cubic-bezier(.3,0,.3,1) both}
  .hero .etiqueta::before{inset:7px}
  .hero .etiqueta::after{left:50%;top:18px;width:16px;height:16px;margin:0 0 0 -8px;box-shadow:inset 0 0 0 2px rgba(74,14,27,.55)}
  .hero .etiqueta .cordao{display:block;position:absolute;left:50%;bottom:calc(100% - 26px);width:2px;margin-left:-1px;height:900px;background:var(--tinta)}
  .hero .etiqueta b{font-size:5.4rem;line-height:.82}
  .hero .etiqueta b small:first-child{display:block;font-size:.24em;letter-spacing:.06em;margin-bottom:6px}
  .hero .etiqueta b small:last-child{display:block;font-size:.26em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:10px}
  .hero .etiqueta span{font-size:.92rem;line-height:1.3;text-wrap:balance;margin-top:14px;padding-top:12px;border-top:1.5px dashed rgba(255,255,255,.55)}
  .hero .etiqueta em{font-size:1.75rem;margin-top:8px}
  @keyframes balanco{0%{transform:rotate(9deg)}30%{transform:rotate(-3deg)}55%{transform:rotate(5deg)}78%{transform:rotate(2deg)}100%{transform:rotate(3deg)}}
  .hero .cep input{font-size:1.4rem;min-height:60px}
  .hero .cep .botao{min-height:60px;font-size:1.15rem;padding-inline:26px}
  .hero-sub{font-size:1.15rem}
  .livres-grade{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);align-items:start;gap:56px}
  .dupla{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
  .prateleira{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
  .prateleira article:nth-child(2){border-top:3px solid var(--tinta)}
  .passos{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
  .passos li{grid-template-columns:minmax(0,1fr)}
  .fiado-grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
  .caderneta{padding:22px 26px 22px 58px;background-image:linear-gradient(90deg,transparent 43px,rgba(126,19,38,.5) 43px,rgba(126,19,38,.5) 45px,transparent 45px),repeating-linear-gradient(180deg,transparent 0 37px,rgba(33,57,140,.28) 37px 38px)}
  .bitaca-grade{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:64px;align-items:center}
  .historia-grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
  .dois{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
  .fim-grade{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px}
  .barra{justify-content:center;gap:28px;padding-top:12px}
  .barra p{font-size:.9rem}
  .barra p b{display:inline;font-size:1.2rem;margin-right:12px}
  .barra .botao{padding-inline:28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bando{transform:translateX(5vw)}
}

/* capas e player dos vídeos (as capas são arquivos do site; o player só entra no clique) */
.video{padding:0}
.video-capa{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;color:#fff;text-decoration:none}
.video-capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;mix-blend-mode:luminosity}
.video-capa b,.video-capa span{position:relative}
.video::before,.video::after{z-index:1;pointer-events:none}
.video.tocando::before,.video.tocando::after{content:none}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.video-fora{position:absolute;left:0;right:0;bottom:0;z-index:2;background:var(--tinta);color:var(--cal);font-size:.76rem;font-weight:700;padding:5px 10px;text-align:center}
.cep input[aria-invalid="true"]{border-color:#9B1021;box-shadow:0 0 0 3px rgba(155,16,33,.18)}
.botao[disabled]{opacity:.7;cursor:progress}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}