/* */

:root{
  --brand:#e50914;--text:#fff;--muted:#c8c8c8;
  --gap-after-slider: clamp(28px, 6.2vw, 80px);
  --gap-title-to-slider: clamp(8px, 2.2vw, 18px);
}

html,body{background:#000;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0}
.container{max-width:1760px;margin:0 auto;padding:0 16px}

/* */
.cflow-root{
  position:relative;overflow:hidden;
  /* ↓ marge ns laterais intactas, topo/fundo bem menores para compactar */
  margin: clamp(8px, 2vw, 14px) 0;
}
/* primeiro slider ainda mais próximo do bloco anterior (search) */
.cflow-root:first-of-type{ margin-top: clamp(6px, 1.8vw, 12px); }

.cflow-stage{
  position:relative;perspective:1200px;width:100%;
  height:var(--cf-h,520px);margin:0 auto;max-width:1760px;
  contain: layout paint size style;
}
.cflow-deck{
  position:absolute;inset:0;transform-style:preserve-3d;
  will-change: transform;
  visibility:visible;
}
.cflow-card{
  position:absolute;top:50%;left:50%;
  transform: translate(-50%,-50%);transform-style:preserve-3d;
  border-radius:16px; overflow:hidden;background:#000;
  box-shadow:0 18px 40px rgba(0,0,0,.45);cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  backface-visibility:hidden;
  will-change: transform;
  transition:
    transform .8s cubic-bezier(.22,.7,.22,1),
    box-shadow .4s linear,
    opacity .28s ease;
}

/* Dimensão “segura” por tipo (sem depender da imagem) */
.cflow-card[data-kind="backdrop"]{
  width: min(92vw, 1100px);
  
}
.cflow-card[data-kind="poster"]{
  width: min(34vw, 260px);
  
}

/* Imagens cobrem a carta inteira */
.cflow-card img{
  display:block;width:100%;height:100%;
  object-fit: contain;
  object-position:center;background:#000;position:relative; z-index:1;
  pointer-events:none;
}

.cflow-card.active{box-shadow:0 28px 60px rgba(0,0,0,.6)}

/* Legenda */
.cflow-caption{
  position:absolute;left:12px;right:12px;bottom:18px;padding:8px 12px;border-radius:12px;
  color:#fff;font-weight:800;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.38));backdrop-filter:blur(4px);
  opacity:0;transform:translateY(6px);transition:.35s ease;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.cflow-card.active .cflow-caption{opacity:1;transform:translateY(0)}
.cflow-title{font-size:clamp(16px,3vw,22px)}
.cflow-note{opacity:.95}
.card-link{position:absolute;inset:0;display:block;z-index:5;pointer-events:auto}

/* Nav */
.cflow-nav{position:absolute;inset:0;pointer-events:none}
.cflow-arrow{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;color:#fff
}
.cflow-prev{left:10px}.cflow-next{right:10px}
.cflow-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:8px;justify-content:center;z-index:4}
.cflow-dot{width:8px;height:8px;border-radius:50%;background:#777;opacity:.6;transition:opacity .2s ease,transform .2s ease}
.cflow-dot.active{background:#fff;opacity:1;transform:scale(1.1)}

/* Presets de altura */
.cf-hero  { --cf-h: clamp(380px,62vh,520px); }
.cf-high  { --cf-h: 320px; }
.cf-poster{ --cf-h: 320px; }

/* Cabeçalhos com faixa */
.section-head{margin:12px 0}
.section-head .container{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.title-strap{
  --strap-pad-y:.55em; --strap-pad-x:1.05em; --strap-radius:999px;
  --strap-bg: linear-gradient(90deg, rgba(229,9,20,.55), rgba(255,255,255,.18) 60%, rgba(255,255,255,0));
  position:relative; display:inline-block; margin:0;
  padding: var(--strap-pad-y) var(--strap-pad-x);
  font-size: clamp(18px, 2.8vw, 30px);
  line-height: 1.15; font-weight: 900; letter-spacing:.2px; z-index:0;
}
.title-strap::before{
  content:""; position:absolute; top:0; bottom:0;
  left: calc(-0.9 * var(--strap-pad-x)); right: calc(-0.9 * var(--strap-pad-x));
  border-radius: var(--strap-radius); background: var(--strap-bg); z-index:-1; filter: blur(.2px);
}
.more{font-size:14px;text-decoration:none;color:#fff;opacity:.85;white-space:nowrap}
.more:hover{opacity:1}

/* Espaços */
.cflow-root + .section-head{ margin-top: var(--gap-after-slider); }
.section-head + .cflow-root{ margin-top: var(--gap-title-to-slider); }

/* Sem transição (primeiro paint / resize) */
.cflow-deck.no-trans .cflow-card,
.no-trans .cflow-card{ transition: none !important; }

/* Responsivo */
@media (max-width:768px){
  :root{ --gap-after-slider: clamp(32px, 9vw, 96px); --gap-title-to-slider: clamp(10px, 3vw, 20px); }
  .cf-hero{--cf-h:360px}.cf-high{--cf-h:280px}.cf-poster{--cf-h:280px}
  .cflow-arrow{display:none}.cflow-caption{padding:6px 8px}
  .catnav{display:none}
}
@media (min-width: 1024px){
  .cf-hero .cflow-caption{ bottom: clamp(28px, 5.2vh, 88px); }
}

/* Rodapé */
footer.site-footer{border-top:1px solid rgba(255,255,255,.06);margin-top:26px}
footer .container{display:flex;align-items:center;justify-content:center;height:60px;color:#aaa}

/* ===== Full-bleed util ===== */
.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* ===== Hero full-bleed ===== */
.cf-hero{
  --cf-h: clamp(420px, 70vh, 760px);
}
.cf-hero .cflow-stage{
  max-width: none;
  width: 100vw;
}
.cf-hero .cflow-deck{ visibility: visible; }
.cflow-card[data-kind="backdrop"]{
  width: min(96vw, 1600px);
  
}
.cflow-card img{ object-fit: contain; object-position: center; }

/* evita scroll horizontal */
html, body{ overflow-x: hidden; }

/* ==========================================================
   Torofilm-like Search (pill + botão redondo)
   - aplica nas classes .tor-search e .nx-searchbar
   ========================================================== */
.tor-search,
.nx-searchbar{
  max-width:760px;
  /* ↓ pequeno espaço do topo e distância RESPONSIVA até o 1º slider */
  margin: clamp(4px, 1.4vw, 10px) auto clamp(16px, 3.2vw, 28px);
  padding:0 12px
}
.tor-search form,
.nx-searchbar form{
  display:flex;align-items:center;gap:0;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:48px; overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}
.tor-search input,
.nx-searchbar input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:none;
  color:#fff; font-size:1rem;
  padding:12px 18px;
}
.tor-search input::placeholder,
.nx-searchbar input::placeholder{color:#cfd2d6}
.tor-search button,
.nx-searchbar button{
  background:linear-gradient(135deg,#16d2ff,#0b74ff);
  border:0; margin:6px; padding:10px; /* fino */
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#fff;
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 16px rgba(11,116,255,.35);
}
.tor-search button:hover,
.nx-searchbar button:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.tor-search button:active,
.nx-searchbar button:active{ transform:translateY(0) scale(.98) }
.tor-search button svg,
.nx-searchbar button svg{width:20px;height:20px;fill:currentColor}

/* foco acessível */
.tor-search input:focus,
.nx-searchbar input:focus{ outline:2px solid rgba(13,202,240,.4); outline-offset:2px }
.tor-search button:focus-visible,
.nx-searchbar button:focus-visible{ outline:2px solid #16d2ff; outline-offset:2px }

/* --- resets essenciais p/ mobile (iOS/Android) --- */
.tor-search input,
.tor-search button,
.nx-searchbar input,
.nx-searchbar button{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
}
.tor-search input::-webkit-search-cancel-button,
.nx-searchbar input::-webkit-search-cancel-button{ display:none }

/* ===== Responsivo ===== */
@media (max-width: 768px){
  .tor-search,.nx-searchbar{max-width: 92vw; margin: clamp(4px,1.6vw,8px) auto clamp(12px,3.6vw,22px)}
  .tor-search input,.nx-searchbar input{ padding:10px 14px; font-size:.95rem }
  .tor-search button,.nx-searchbar button{ width:38px; height:38px; padding:8px; margin:6px }
  .tor-search button svg,.nx-searchbar button svg{ width:18px; height:18px }
  .catbar{ margin-top: clamp(6px,2.2vw,14px); margin-bottom: clamp(12px,3.6vw,22px); }
}
@media (max-width: 420px){
  .tor-search,.nx-searchbar{padding:0 8px}
  .tor-search input,.nx-searchbar input{ padding:10px 12px; font-size:.92rem }
  .tor-search button,.nx-searchbar button{ width:36px; height:36px; padding:8px }
}

/* integra com as páginas */
.page-search .tor-search,
.page-search .nx-searchbar{ margin-top:14px }

/* ===== Ajustes relacionais para garantir proximidade com o 1º slider ===== */
/* Se logo após a barra de busca vier um título de seção, reduza o espaço dele */
.tor-search + .section-head,
.nx-searchbar + .section-head{ margin-top: clamp(8px, 2.2vw, 16px); }

/* Se a barra de busca vier direto antes do slider, reduza o topo do slider */
.tor-search + .cflow-root,
.nx-searchbar + .cflow-root{ margin-top: clamp(10px, 2.6vw, 18px); }

/* === Mobile spacing overrides (added by ChatGPT on 2025-09-20) === */

@media (max-width: 640px){
  /* Remove folgas extras acima/abaixo dos sliders no mobile */
  .cflow-root{ margin: 4px 0 !important; }
  .cf-hero .cflow-stage{ margin-top: 0 !important; }
}


/* === Mobile slider gap (revised) — 2025-09-20 === */
@media (max-width: 640px){
  .nx-searchbar + .cflow-root,
  .tor-search + .cflow-root,
  .cflow-root{ margin-top: 2px !important; }
}


/* === Mobile correction: spacing controlled from search, not slider === */
@media (max-width: 640px){
  .cflow-root:first-of-type{ margin-top: 0 !important; } /* cola no search */
  .tor-search{ margin-bottom: 6px !important; } /* controla espaçamento */
}


/* === Mobile: controle do gap pelo slider (hero) — 2025-09-20 === */
@media (max-width: 640px){
  .tor-search + .cflow-root.cf-hero{ margin-top: 0 !important; }
  .cf-hero .cflow-stage{ margin-top: 0 !important; padding-top: 0 !important; }
}


/* === Mobile: cola o HERO ao search mesmo com <main> intermediário — 2025-09-21 === */
@media (max-width: 640px){
  /* Quando houver <main> entre a barra e o hero */
  .tor-search + main > section.cflow-root.cf-hero{ margin-top: 0 !important; }
  .tor-search + * > section.cflow-root.cf-hero{ margin-top: 0 !important; }
  .tor-search ~ main > section.cflow-root.cf-hero{ margin-top: 0 !important; }
  /* Fallback: se o HERO for o primeiro bloco do <main> */
  main > section.cflow-root.cf-hero:first-of-type{ margin-top: 0 !important; }

  /* Mantém um respiro mínimo no search */
  .tor-search{ margin-bottom: 6px !important; }
}


/* === Mobile hero compact — 2025-09-21 === */
@media (max-width: 640px){
  /* Diminui a altura do deck do HERO para reduzir o "vazio" acima */
  .cf-hero .cflow-deck{ min-height: clamp(140px, 34vw, 260px) !important; }
}


/* === Mobile FIX (safe) — 2025-09-21 === */
@media (max-width: 640px){
  /* Cola o HERO ao search, mas sem alterar posicionamento interno */
  .tor-search + main > section.cflow-root.cf-hero,
  .tor-search + * > section.cflow-root.cf-hero,
  .tor-search ~ main > section.cflow-root.cf-hero,
  main > section.cflow-root.cf-hero:first-of-type{
    margin-top: 0 !important;
  }

  /* Espaçamento mínimo no search */
  .tor-search{ margin-bottom: 6px !important; }

  /* Altura moderada do deck do HERO para reduzir vazio, sem colapsar a área */
  .cf-hero .cflow-deck{
    min-height: clamp(160px, 42vw, 320px) !important;
  }
}


/* === Mobile SAFE SPACING — 2025-09-21 === */
@media (max-width: 640px){
  /* Controla o espaço entre search e hero sem reduzir altura do deck */
  .tor-search + main > section.cflow-root.cf-hero,
  main > section.cflow-root.cf-hero:first-of-type{
    margin-top: 4px !important;
  }
  .tor-search{ margin-bottom: 6px !important; }
}


/* === Mobile RESET (ultra safe) — 2025-09-21 === */
@media (max-width: 640px){
  /* NÃO cola, apenas aproxima: evita quebra de layout */
  .tor-search + main > section.cflow-root.cf-hero,
  .tor-search + * > section.cflow-root.cf-hero,
  .tor-search ~ main > section.cflow-root.cf-hero,
  main > section.cflow-root.cf-hero:first-of-type{
    margin-top: 6px !important; /* leve aproximação sem colar */
  }

  /* Mantém um respiro do search e padroniza altura interna */
  .tor-search{ margin-bottom: 8px !important; }

  /* Volta o deck do HERO a um valor seguro (similar ao original) */
  .cf-hero .cflow-deck{ min-height: clamp(180px, 36vw, 380px) !important; }
}


/* === Mobile minimal gap rule (v8) — ONLY outer spacing === */
@media (max-width: 640px){
  /* Keep a small, safe gap between search and first HERO */
  .tor-search + main > section.cflow-root.cf-hero,
  .tor-search ~ main > section.cflow-root.cf-hero,
  main > section.cflow-root.cf-hero:first-of-type{
    margin-top: 6px !important;
  }
  /* Small margin below the search (prevents overlap) */
  .tor-search{ margin-bottom: 6px !important; }
}


/* === Streamings grid (entre busca e slider) === */
.streamings-wrap{
  padding: 10px 16px 0;
}
.streamings-title{
  text-align:center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 8px 0 10px;
}
.streamings-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap:10px;
  max-width: 1200px;
  margin: 0 auto 8px;
}
.stream-btn{
  display:block;
  text-align:center;
  text-decoration:none;
  background:#000;
  color:#fff;
  padding:10px 14px;
  border-radius:9999px;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.1;
  box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.stream-btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.stream-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  opacity:.95;
}
@media (max-width:560px){
  .streamings-wrap{ padding: 6px 10px 0; }
  .streamings-grid{ gap:8px; grid-template-columns: repeat(2, 1fr); }
  .stream-btn{ padding:9px 12px; font-size: 14px; }
}


/* INDEX CARDS: faixa abaixo da imagem, título menor e branco, nota em pílula, ano ao lado */
.card{position:relative;overflow:hidden;border-radius:10px;background:#111}
.card > a img{display:block;width:100%;height:auto}
.card .card-info{position:relative;background:rgba(0,0,0,.9)!important;padding:8px 10px!important;display:flex!important;flex-direction:column!important;gap:6px!important;min-height:56px!important}
.card .ci-title{font-size:.9rem!important;font-weight:700!important;color:#fff!important;line-height:1.2!important;margin:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.card .meta-row{display:flex!important;align-items:center!important;gap:8px!important}
.card .rating-pill{display:inline-block!important;padding:2px 8px!important;border-radius:999px!important;font-size:.78rem!important;font-weight:700!important;background:#1f2937!important;color:#fff!important;line-height:1.3!important}
.card .year{font-size:.8rem!important;font-weight:600!important;color:#e5e7eb!important}
@media (max-width:480px){
  .card .ci-title{font-size:.86rem!important}
  .card .rating-pill{font-size:.74rem!important;padding:2px 7px!important}
  .card .year{font-size:.78rem!important}
}

/* ==========================================================
   THE SLAP HOME — BLOCO LIMPO FINAL
   somente este bloco no final do home.css
   ========================================================== */

:root{
  --slap-red:#ff3b2f;
  --slap-orange:#ffb347;
  --slap-panel:#0a0d14;
  --slap-panel-2:#0d1119;
  --slap-border:rgba(255,140,70,.16);
  --slap-white-border:rgba(255,255,255,.08);
}

/* fundo geral */
html,body{
  background:
    radial-gradient(circle at top center, rgba(255,90,54,.08), transparent 18%),
    radial-gradient(circle at bottom center, rgba(255,59,47,.06), transparent 22%),
    linear-gradient(180deg, #030406 0%, #020304 40%, #000 100%);
}

/* largura */
.container{
  max-width:1760px;
}

/* título principal */
.title-strap{
  position:relative;
  padding:.08em .32em;
  font-size:clamp(28px,4vw,58px);
  line-height:1.05;
  font-weight:900;
  color:#fff;
  letter-spacing:-.03em;
  background:none !important;
  border-radius:0;
  text-transform:uppercase;
}

.title-strap::before{
  content:"";
  position:absolute;
  left:-22px;
  right:-22px;
  top:52%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  z-index:-1;
}

/* barra de categorias */
.catpill{
  background:rgba(22,24,30,.84);
  border:1px solid rgba(255,255,255,.12);
  color:#f2f4f8;
  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.catpill:hover{
  border-color:rgba(255,120,70,.32);
  background:rgba(26,28,35,.94);
  filter:none;
}

/* setas */
.catnav,
.cflow-arrow{
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg, #1a1f2b, #111620) !important;
  color:#fff !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.catnav:hover,
.cflow-arrow:hover{
  border-color:rgba(255,100,70,.34) !important;
}

/* hero / slider topo */
.cflow-card{
  border-radius:24px;
  border:1px solid rgba(255,120,70,.24);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 0 24px rgba(255,80,50,.12);
}

.cflow-card.active{
  border-color:rgba(255,120,70,.38);
  box-shadow:
    0 24px 52px rgba(0,0,0,.52),
    0 0 28px rgba(255,80,50,.18);
}

.cflow-card img{
  object-fit:cover;
  background:#000;
  filter:brightness(.88);
}

.cflow-caption{
  left:18px;
  right:18px;
  bottom:18px;
  padding:12px 14px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.62)),
    linear-gradient(90deg, rgba(10,12,18,.92), rgba(10,12,18,.36));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 10px 24px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.cflow-title{
  font-size:clamp(20px,2.2vw,38px);
  font-weight:900;
  line-height:1.05;
  color:#fff;
  letter-spacing:-.02em;
}

.cflow-note{
  margin-top:5px;
  font-size:13px;
  font-weight:700;
  color:#dce2ec;
}

.cflow-dot.active{
  background:linear-gradient(90deg,#ff3b2f,#ff8a3d);
  box-shadow:0 0 10px rgba(255,80,50,.45);
}

/* cards */
.card{
  position:relative;
  overflow:hidden;
  border-radius:18px !important;
  background:linear-gradient(180deg, #0e121c, #080a10) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.02) inset !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,120,70,.34) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.34),
    0 0 18px rgba(255,80,50,.14),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
}

.card > a{
  position:relative;
  display:block;
  overflow:hidden;
}

.card > a img{
  display:block;
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  object-position:center;
  background:#0b0d12;
  transition:transform .28s ease, filter .28s ease;
}

.card:hover > a img{
  transform:scale(1.035);
  filter:brightness(1.04);
}

.card > a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, #ff4d57, #ff8a3d, transparent);
  box-shadow:0 0 12px rgba(255,80,50,.36);
  opacity:.85;
}

.card .card-info{
  position:relative;
  background:linear-gradient(180deg, rgba(8,10,16,.96), rgba(5,7,12,.98)) !important;
  padding:10px 10px 11px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  min-height:70px !important;
  border-top:1px solid rgba(255,255,255,.05);
}

.card .ci-title{
  font-size:.92rem !important;
  font-weight:800 !important;
  color:#fff !important;
  line-height:1.26 !important;
  margin:0 !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

.card .meta-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

.card .rating-pill{
  display:inline-flex !important;
  align-items:center;
  gap:5px;
  padding:3px 8px !important;
  border-radius:999px !important;
  font-size:.76rem !important;
  font-weight:800 !important;
  background:rgba(23,29,40,.95) !important;
  border:1px solid rgba(255,255,255,.08);
  color:#f4f6fb !important;
  line-height:1.2 !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.card .rating-pill::before{
  content:"★";
  color:#ffb347;
  font-size:.8em;
}

.card .year{
  font-size:.76rem !important;
  font-weight:800 !important;
  color:#ff4d57 !important;
  letter-spacing:.02em;
}

/* top box */
.top10-wrap{
  border-radius:22px !important;
  background:#0b0f17 !important;
  border:1px solid rgba(255,255,255,.06) !important;
  padding:14px !important;
}

/* recomendados */
.recommend-box{
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.06) !important;
  background:#0b0f17 !important;
}

.recommend-box .item,
.recommend-box .rec-item{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:#0b0f17;
  box-shadow:
    0 10px 22px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.02) inset;
}

.recommend-box .item img,
.recommend-box .rec-item img{
  display:block;
  width:100%;
  height:100%;
  min-height:120px;
  object-fit:cover;
}

@media (max-width:768px){
  .title-strap{
    font-size:clamp(24px,8vw,38px);
  }

  .card{
    border-radius:16px !important;
  }

  .card .card-info{
    min-height:64px !important;
    padding:9px 9px 10px !important;
  }

  .card .ci-title{
    font-size:.86rem !important;
  }

  .card .rating-pill,
  .card .year{
    font-size:.72rem !important;
  }

  .cflow-card{
    border-radius:20px;
  }

  .cflow-caption{
    left:12px;
    right:12px;
    bottom:12px;
    padding:10px 11px;
    border-radius:14px;
  }

  .cflow-title{
    font-size:clamp(16px,4.8vw,24px);
  }
}

/* ==========================================================
   THE SLAP HOME — PASSO 4 (INTERAÇÃO PREMIUM)
   ========================================================== */

/* animação suave geral */
.card{
  transition:
    transform .25s cubic-bezier(.22,.7,.22,1),
    box-shadow .25s ease,
    filter .25s ease;
}

/* efeito 3D leve */
.card:hover{
  transform:translateY(-6px) scale(1.02);
}

/* brilho ao passar o mouse */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.08), transparent 60%);
  opacity:0;
  transition:opacity .25s ease;
  z-index:2;
}

.card:hover::before{
  opacity:1;
}

/* efeito glow lateral */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 100%, rgba(255,80,50,.18), transparent 60%);
  opacity:0;
  transition:opacity .25s ease;
  z-index:1;
}

.card:hover::after{
  opacity:1;
}

/* deixa o conteúdo acima */
.card .card-info{
  z-index:3;
}

/* título ganha leve destaque */
.card:hover .ci-title{
  color:#fff;
  text-shadow:0 0 10px rgba(255,80,50,.35);
}

/* nota brilha levemente */
.card:hover .rating-pill{
  box-shadow:
    0 0 10px rgba(255,180,70,.25),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* ================= HERO MAIS VIVO ================= */

.cflow-card{
  transition:
    transform .35s cubic-bezier(.22,.7,.22,1),
    box-shadow .35s ease,
    filter .35s ease;
}

.cflow-card.active{
  transform:scale(1.03);
}

/* leve zoom quando ativo */
.cflow-card.active img{
  transform:scale(1.02);
  transition:transform .5s ease;
}

/* brilho suave no hero */
.cflow-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 60%);
  z-index:1;
}

/* caption mais viva */
.cflow-caption{
  backdrop-filter:blur(6px);
}

/* ================= BOTÕES MAIS VIVOS ================= */

.catpill{
  transition:all .2s ease;
}

.catpill:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 12px rgba(255,80,50,.18),
    0 6px 14px rgba(0,0,0,.25);
}

/* setas */
.cflow-arrow{
  transition:all .2s ease;
}

.cflow-arrow:hover{
  transform:translateY(-50%) scale(1.08);
  box-shadow:
    0 0 16px rgba(255,80,50,.35);
}

/* ===== HEADERS PREMIUM DAS SEÇÕES ===== */

.row-head,
.section-head{
  background:transparent !important;
  border:none !important;
  padding:0 0 10px !important;
}

.row-head h2,
.section-head h2{
  position:relative;
  font-size:22px;
  font-weight:900;
  color:#fff;
}

/* linha glow embaixo */
.row-head h2::after,
.section-head h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:60px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#ff3b2f,#ff8a3d);
  box-shadow:0 0 10px rgba(255,80,50,.5);
}

/* ===== MAIS ASSISTIDOS ===== */

.home-sliders{
  padding:12px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(10,12,18,.9), rgba(5,7,12,.95));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 18px 40px rgba(0,0,0,.35);
}

/* ===== BOTÕES STREAMING ===== */

.catpill{
  border-radius:999px !important;
  padding:8px 14px !important;
  font-weight:800 !important;
  letter-spacing:.02em;
}

.catpill:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 12px rgba(255,80,50,.25),
    0 6px 14px rgba(0,0,0,.3);
}

/* ==========================================================
   THE SLAP HOME — PASSO 5
   padronização fina dos blocos no padrão do print
   ========================================================== */

/* largura e respiro geral */
.container{
  max-width: 1760px;
}

/* espaçamento vertical entre seções */
.section,
.vf-row,
.vf-strip,
.top10-box,
.recommend-box{
  margin: 24px 0 30px !important;
}

/* containers: mesmo padrão visual */
.section > .container,
.vf-row,
.vf-strip,
.top10-box,
.recommend-box{
  position: relative;
  border-radius: 28px !important;
  overflow: hidden;
  border: 1px solid rgba(255,110,60,.22) !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(255,60,80,.10), transparent 22%),
    radial-gradient(circle at 8% 92%, rgba(255,170,70,.07), transparent 24%),
    linear-gradient(180deg, rgba(8,11,18,.98), rgba(4,6,12,.99)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 22px rgba(255,70,50,.12),
    0 18px 46px rgba(0,0,0,.42) !important;
  padding: 18px 18px 20px !important;
}

/* brilho inferior mais elegante */
.section > .container::after,
.vf-row::after,
.vf-strip::after,
.top10-box::after,
.recommend-box::after{
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ff3b2f, #ff8a3d, transparent);
  box-shadow: 0 0 14px rgba(255,80,50,.45);
  pointer-events: none;
}

/* tudo acima do glow */
.section > .container > *,
.vf-row > *,
.vf-strip > *,
.top10-box > *,
.recommend-box > *{
  position: relative;
  z-index: 1;
}

/* cabeçalhos */
.row-head,
.section-head,
.nx-section-head,
.vf-row-head,
.top10-head,
.recommend-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px;
  margin:0 0 16px !important;
  padding:0 !important;
  background: transparent !important;
  border: none !important;
}

/* títulos das seções */
.row-head h2,
.section-head h2,
.nx-section-head h2,
.vf-row-head h2,
.top10-head h2,
.recommend-head h2{
  margin:0 !important;
  color:#fff !important;
  font-size: clamp(20px, 2vw, 34px) !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
}

/* barrinha lateral do título */
.row-head h2::before,
.section-head h2::before,
.nx-section-head h2::before,
.vf-row-head h2::before,
.top10-head h2::before,
.recommend-head h2::before{
  content:"";
  display:inline-block;
  width:4px;
  height:22px;
  margin-right:12px;
  border-radius:999px;
  vertical-align:-3px;
  background: linear-gradient(180deg, #ff3b2f, #ff8a3d);
  box-shadow: 0 0 10px rgba(255,80,50,.35);
}

/* some com qualquer fundo cinza antigo */
.row-head::before,
.row-head::after,
.section-head::before,
.section-head::after{
  background:none !important;
  box-shadow:none !important;
}

/* subtítulos/botões de ver todos */
.more,
.view-all,
.row-head .btn,
.section-head .btn{
  color:#dfe5ef !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg, #1a1f2b, #111620) !important;
  border-radius:10px !important;
  padding:8px 12px !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.more:hover,
.view-all:hover,
.row-head .btn:hover,
.section-head .btn:hover{
  border-color:rgba(255,110,60,.34) !important;
  color:#fff !important;
}

/* hero superior mais proporcional ao print */
.cflow-root{
  margin: 18px 0 24px !important;
}

.cf-hero{
  --cf-h: clamp(320px, 45vw, 430px);
}

.cf-hero .cflow-stage{
  max-width: 1220px;
}

.cflow-card[data-kind="backdrop"]{
  width: min(92vw, 1100px);
}

.cflow-card{
  border-radius: 24px !important;
}

.cflow-caption{
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  padding: 12px 14px !important;
}

.cflow-title{
  font-size: clamp(18px, 2.1vw, 34px) !important;
}

/* dots mais discretos */
.cflow-dots{
  bottom: 10px !important;
  gap: 7px !important;
}

.cflow-dot{
  width: 7px !important;
  height: 7px !important;
  opacity: .7 !important;
  background: rgba(255,255,255,.28) !important;
}

.cflow-dot.active{
  width: 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#ff3b2f,#ff8a3d) !important;
  box-shadow: 0 0 10px rgba(255,80,50,.4);
}

/* carrosséis internos */
.home-sliders,
.vf-carousel,
.vf-track,
.vf-grid{
  gap: 14px !important;
}

/* cards alinhados */
.card{
  border-radius: 18px !important;
}

.card .card-info{
  min-height: 72px !important;
}

/* top10 mais limpo */
.top10-wrap{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:stretch;
}

.top10,
.top10-list{
  background: rgba(7,10,16,.75);
  border:1px solid rgba(255,255,255,.05);
  border-radius:18px;
  padding:10px;
}

.top10 li,
.top10-item{
  padding:10px 8px;
  border-radius:12px;
}

/* recomendado para você */
.recommend-box .grid,
.recommend-box .items{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:12px;
}

.recommend-box .item:first-child,
.recommend-box .rec-item:first-child{
  min-height: 168px;
}

.recommend-box .item:not(:first-child),
.recommend-box .rec-item:not(:first-child){
  min-height: 78px;
}

/* footer mais discreto */
footer.site-footer{
  border-top: 1px solid rgba(255,255,255,.05);
  margin-top: 28px;
}

footer.site-footer .container{
  height: 54px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

/* mobile */
@media (max-width: 980px){
  .top10-wrap{
    grid-template-columns: 1fr;
  }

  .recommend-box .grid,
  .recommend-box .items{
    grid-template-columns: 1fr;
  }

  .recommend-box .item:first-child,
  .recommend-box .rec-item:first-child,
  .recommend-box .item:not(:first-child),
  .recommend-box .rec-item:not(:first-child){
    min-height: 110px;
  }
}

@media (max-width: 768px){
  .section,
  .vf-row,
  .vf-strip,
  .top10-box,
  .recommend-box{
    margin: 16px 0 22px !important;
  }

  .section > .container,
  .vf-row,
  .vf-strip,
  .top10-box,
  .recommend-box{
    padding: 14px 12px 18px !important;
    border-radius: 22px !important;
  }

  .section > .container::after,
  .vf-row::after,
  .vf-strip::after,
  .top10-box::after,
  .recommend-box::after{
    left: 14px;
    right: 14px;
  }

  .row-head h2,
  .section-head h2,
  .nx-section-head h2,
  .vf-row-head h2,
  .top10-head h2,
  .recommend-head h2{
    font-size: 24px !important;
  }

  .cf-hero{
    --cf-h: clamp(220px, 58vw, 300px);
  }
}

/* ==========================================================
   THE SLAP HOME — CORREÇÃO DOS BLOCOS QUE AINDA NÃO PEGARAM
   ========================================================== */

/* headers das seções */
.row-head,
.section-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:0 0 14px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.row-head h2,
.section-head h2{
  margin:0 !important;
  color:#fff !important;
  font-size:clamp(20px,2vw,30px) !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}

.row-head h2::before,
.section-head h2::before{
  content:"" !important;
  display:inline-block !important;
  width:4px !important;
  height:22px !important;
  margin-right:10px !important;
  border-radius:999px !important;
  vertical-align:-3px !important;
  background:linear-gradient(180deg,#ff3b2f,#ff8a3d) !important;
  box-shadow:0 0 10px rgba(255,80,50,.35) !important;
}

.row-head h2::after,
.section-head h2::after{
  display:none !important;
}

/* botão ver todos */
.more,
.view-all,
.row-head .btn,
.section-head .btn,
a.more{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:32px !important;
  padding:7px 12px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg,#1a1f2b,#111620) !important;
  color:#e9edf5 !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.more:hover,
.view-all:hover,
.row-head .btn:hover,
.section-head .btn:hover,
a.more:hover{
  color:#fff !important;
  border-color:rgba(255,110,60,.34) !important;
}

/* bloco mais assistidos */
.home-sliders,
.home-sliders-wrap,
.section.home-sliders > .container{
  position:relative !important;
  border-radius:28px !important;
  border:1px solid rgba(255,110,60,.20) !important;
  background:
    radial-gradient(circle at 82% 10%, rgba(255,60,80,.08), transparent 22%),
    radial-gradient(circle at 8% 92%, rgba(255,170,70,.06), transparent 24%),
    linear-gradient(180deg, rgba(8,11,18,.98), rgba(4,6,12,.99)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 18px 46px rgba(0,0,0,.42),
    0 0 22px rgba(255,70,50,.10) !important;
  padding:14px !important;
  overflow:hidden !important;
}

.home-sliders::after,
.home-sliders-wrap::after,
.section.home-sliders > .container::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#ff3b2f,#ff8a3d,transparent);
  box-shadow:0 0 14px rgba(255,80,50,.4);
}

/* streamings / botões de provedores */
.streamings-wrap{
  padding:14px 18px 2px !important;
}

.streamings-grid{
  gap:12px !important;
}

.stream-btn{
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg,#1b2230,#111723) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:
    0 10px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.stream-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:
    0 0 14px rgba(255,80,50,.20),
    0 10px 20px rgba(0,0,0,.28) !important;
}

/* próximos lançamentos */
.launch-row,
.upcoming-row,
.release-row{
  position:relative;
  border-radius:24px !important;
  border:1px solid rgba(255,110,60,.18) !important;
  background:linear-gradient(180deg, rgba(8,11,18,.96), rgba(4,6,12,.98)) !important;
  padding:14px !important;
  overflow:hidden !important;
}

/* botões inferiores animes/doramas/etc */
.category-shortcuts,
.quick-links,
.bottom-shortcuts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.category-shortcuts a,
.quick-links a,
.bottom-shortcuts a,
.bottom-shortcuts .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1b2230,#111723);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  box-shadow:
    0 10px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* bloco coleção de baixo */
.collection-box,
.collection-feature,
.home-collection,
.feature-banner{
  position:relative !important;
  border-radius:26px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,110,60,.18) !important;
  background:
    linear-gradient(180deg, rgba(6,8,14,.25), rgba(6,8,14,.88)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 18px 40px rgba(0,0,0,.36) !important;
}

.collection-box::after,
.collection-feature::after,
.home-collection::after,
.feature-banner::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#ff3b2f,#ff8a3d,transparent);
  box-shadow:0 0 12px rgba(255,80,50,.36);
}

/* footer */
footer.site-footer,
.site-footer{
  background:transparent !important;
  border-top:1px solid rgba(255,255,255,.05) !important;
}

footer.site-footer .container,
.site-footer .container{
  min-height:54px !important;
  color:rgba(255,255,255,.65) !important;
  font-size:12px !important;
}

/* ==========================================================
   ABOUT SITE — ESTILO DA FOTO
   ========================================================== */

.about-site{
  padding: 30px 0 14px;
}

.about-site .container{
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

.about-box{
  position: relative;
  border-radius: 28px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,80,60,.16), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(255,60,60,.10), transparent 24%),
    linear-gradient(180deg, #0a0b15 0%, #070910 100%);
  border: 2px solid rgba(255,95,60,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 28px rgba(255,70,50,.28),
    0 0 70px rgba(255,50,30,.14);
  overflow: hidden;
}

.about-box::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 35%, rgba(255,120,80,.10), transparent 18%),
    radial-gradient(circle at 85% 75%, rgba(255,70,60,.12), transparent 22%);
  pointer-events: none;
}

.about-box::after{
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ff4b37, #ff9a42, transparent);
  box-shadow: 0 0 18px rgba(255,90,50,.55);
}

.about-inner{
  position: relative;
  z-index: 2;
  border-radius: 22px;
  padding: 28px 24px 26px;
  background:
    linear-gradient(180deg, rgba(8,10,16,.78), rgba(8,10,16,.92));
  border: 1px solid rgba(255,140,90,.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset;
}

.about-title{
  margin: 0;
  text-align: center;
  font-size: clamp(40px, 6vw, 78px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #fff3ee;
  text-shadow:
    0 0 20px rgba(255,120,80,.14);
}

.about-sub{
  text-align: center;
  font-size: clamp(18px, 2.3vw, 28px);
  line-height: 1.2;
  font-weight: 500;
  color: #f1ddd5;
  letter-spacing: .01em;
  margin: 0;
}

.about-divider{
  position: relative;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,110,70,.65), transparent);
}

.about-divider-top{
  margin: 18px 0 22px;
}

.about-divider-mid{
  margin: 20px 0 22px;
}

.about-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.about-list li{
  position: relative;
  padding-left: 34px;
  color: rgba(255,240,235,.92);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.55;
  font-weight: 400;
}

.about-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd0bf 0%, #ff6c52 45%, #ff3b2f 100%);
  box-shadow:
    0 0 10px rgba(255,90,60,.55),
    0 0 18px rgba(255,70,50,.35);
  transform: translateY(-50%);
}

/* mobile */
@media (max-width: 768px){
  .about-site{
    padding: 22px 0 10px;
  }

  .about-site .container{
    padding: 0 10px;
  }

  .about-box{
    border-radius: 22px;
    padding: 12px;
  }

  .about-box::after{
    left: 14px;
    right: 14px;
    height: 3px;
  }

  .about-inner{
    border-radius: 18px;
    padding: 20px 16px 20px;
  }

  .about-title{
    font-size: 56px;
  }

  .about-sub{
    font-size: 17px;
  }

  .about-divider-top{
    margin: 14px 0 18px;
  }

  .about-divider-mid{
    margin: 16px 0 18px;
  }

  .about-list{
    gap: 18px;
  }

  .about-list li{
    padding-left: 24px;
    font-size: 16px;
    line-height: 1.55;
  }

  .about-list li::before{
    width: 10px;
    height: 10px;
    top: .72em;
  }
}

/* ==========================================================
   HOME DESKTOP WIDTH OVERRIDE
   deixa a home larga no PC, estilo da referência enviada
   ========================================================== */
@media (min-width: 1200px){
  .container{
    width:min(calc(100vw - 28px), 1760px);
    max-width:1760px !important;
    padding-left:14px;
    padding-right:14px;
  }

  .cflow-stage{
    max-width:1760px;
  }

  .section .container,
  .section > .container,
  .about-site .container,
  footer.site-footer .container,
  .site-footer .container{
    max-width:1760px !important;
    width:min(calc(100vw - 28px), 1760px);
  }
}