@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,800;0,900;1,800;1,900&family=Manrope:wght@600;700;800&display=swap');

:root{--navy:#031423;--blue:#0878ff;--lime:#9af000}
*{box-sizing:border-box}
html,body{margin:0;background:var(--navy);font-family:Manrope,Arial,sans-serif}
body{overflow:hidden}
.de-page{height:100svh;min-height:620px;overflow:hidden}

.de-brand{
  height:190px;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:linear-gradient(120deg,#f7fbff,#fff 48%,#f5fbff);
  border-top:3px solid var(--lime)
}
.de-brand>img{
  position:relative;z-index:2;width:min(620px,42vw);max-height:145px;object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(0,48,90,.09))
}
.shape{position:absolute;width:420px;height:105px;border-radius:32px;transform:rotate(-18deg);opacity:.5}
.s1{left:-95px;bottom:2px;background:#cfeaff}
.s2{right:-90px;top:28px;background:linear-gradient(90deg,#dff9ae,var(--lime))}

.de-hero{
  height:calc(100svh - 190px);min-height:380px;position:relative;overflow:hidden;background:#061827
}

/* Cada modalidade é uma foto limpa e independente.
   A diagonal é CSS; não existe texto gravado nas imagens. */
.de-gallery{
  position:absolute;inset:-4% -4%;
  display:flex;gap:0;
  transform:skewX(-13deg) scale(1.06);
  transform-origin:center
}
.sport-photo{
  position:relative;flex:1;height:112%;margin:0;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.28)
}
.sport-photo img{
  position:absolute;inset:0;
  width:142%;height:100%;margin-left:-21%;
  object-fit:cover;
  transform:skewX(13deg) scale(1.08);
  filter:saturate(.9) contrast(1.06);
}
.football img{object-position:50% 52%}
.padel img{object-position:52% 67%}
.tennis img{object-position:55% 48%}
.beach img{object-position:50% 52%}

.shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(2,15,27,.22),rgba(2,15,27,.60) 27%,rgba(2,15,27,.62) 73%,rgba(2,15,27,.22)),
    linear-gradient(0deg,rgba(2,15,27,.90),transparent 58%,rgba(2,15,27,.10));
  pointer-events:none
}

.hero-copy{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;pointer-events:none
}
.eyebrow{
  font-size:clamp(10px,.9vw,15px);letter-spacing:.44em;color:#fff;
  font-weight:700;margin-bottom:25px;text-shadow:0 3px 15px rgba(0,0,0,.45)
}
.eyebrow:after{
  content:"";display:block;width:54px;height:3px;background:var(--lime);margin:16px auto 0
}

/* Somente este bloco se move com o mouse */
.mouse-motion{
  transform-style:preserve-3d;will-change:transform;
  transition:transform .14s cubic-bezier(.2,.8,.2,1)
}
h1{
  margin:0;font-family:"Barlow Condensed",Impact,sans-serif;
  font-size:clamp(56px,6vw,106px);font-style:italic;font-weight:900;
  line-height:.81;letter-spacing:-.025em;color:#fff;text-transform:uppercase;
  text-shadow:0 14px 35px rgba(0,0,0,.4)
}
h1 span{display:block}
h1 em{font-style:italic;color:var(--blue);text-shadow:0 10px 28px rgba(0,105,255,.25)}
h1 b{color:var(--lime)}

.sports{
  display:flex;align-items:center;justify-content:center;gap:22px;margin-top:40px;
  color:#fff;font-size:clamp(9px,.78vw,13px);font-weight:800;letter-spacing:.19em
}
.sports span{display:flex;align-items:center;gap:10px}
.sports i{font-style:normal;color:var(--lime);font-size:22px}
.sports>b{height:27px;width:1px;background:rgba(255,255,255,.32)}

.future{
  position:absolute;z-index:3;left:0;right:0;bottom:42px;text-align:center;
  color:#fff;font-size:clamp(8px,.78vw,13px);font-weight:600;letter-spacing:.34em
}
.future i{display:block;width:54px;height:3px;background:var(--lime);margin:0 auto 20px}

@media(max-height:850px) and (min-width:761px){
  .de-brand{height:190px}
  .de-brand>img{max-height:115px}
  .de-hero{height:calc(100svh - 190px)}
  .future{bottom:25px}
  .sports{margin-top:28px}
}
@media(max-width:760px){
  body{overflow:auto}
  .de-page{height:auto;min-height:100svh}
  .de-brand{height:170px}
  .de-brand>img{width:80vw;max-height:100px}
  .shape{width:230px;height:65px}
  .de-hero{height:calc(100svh - 170px);min-height:600px}
  .de-gallery{inset:-3% -45%;width:190%}
  .hero-copy{padding:25px 18px 90px}
  .eyebrow{letter-spacing:.28em}
  h1{font-size:clamp(48px,14vw,70px);line-height:.85}
  .sports{max-width:360px;flex-wrap:wrap;gap:12px 17px;margin-top:30px}
  .sports>b{display:none}
  .sports span{font-size:9px}
  .future{bottom:26px;font-size:8px;letter-spacing:.22em}
}
@media(prefers-reduced-motion:reduce){.mouse-motion{transition:none}}

/* BRAND SEM SANGRIA */
@media (min-width: 761px) {
    .de-brand {
        height: auto;
        min-height: 0;
        padding: 0;
    }

    .de-brand > img {
        width: auto;
        height: auto;
        max-height: 120px;
        display: block;
    }

    .de-hero {
        height: calc(100svh - 120px);
    }
}

/* LOGO MAIOR — mantém o fundo/header atual */
@media (min-width: 761px) {
    .de-brand > img {
        width: min(780px, 55vw);
        max-width: none;
        height: auto;
        max-height: none;
    }
}

/* AJUSTE FINAL — HEADER/LOGO -20% */
@media (min-width: 761px) {
    .de-brand {
        height: 96px;
        padding: 0;
    }

    .de-brand > img {
        width: min(625px, 44vw);
        max-width: none;
        height: auto;
        max-height: 96px;
    }

    .de-hero {
        height: calc(100svh - 96px);
    }
}

/* AJUSTE FINAL — HEADER / LOGO */
@media (min-width: 761px) {
    .de-brand {
        height: 110px;
        padding: 0;
    }

    .de-brand > img {
        width: min(700px, 49vw);
        max-width: none;
        height: auto;
        max-height: 110px;
    }

    .de-hero {
        height: calc(100svh - 110px);
    }
}

/* HEADER / LOGO — AJUSTE */
@media (min-width: 761px) {
    .de-brand {
        height: 125px;
        padding: 0;
    }

    .de-brand > img {
        width: min(780px, 54vw);
        max-width: none;
        height: auto;
        max-height: 125px;
    }

    .de-hero {
        height: calc(100svh - 125px);
    }
}

/* HEADER / LOGO — MAIOR */
@media (min-width: 761px) {
    .de-brand {
        height: 145px;
        padding: 0;
    }

    .de-brand > img {
        width: min(900px, 62vw);
        max-width: none;
        height: auto;
        max-height: 145px;
    }

    .de-hero {
        height: calc(100svh - 145px);
    }
}

/* HEADER / LOGO — FINAL */
@media (min-width: 761px) {
    .de-brand {
        height: 135px;
        padding: 0;
    }

    .de-brand > img {
        width: min(850px, 59vw);
        max-width: none;
        height: auto;
        max-height: 135px;
    }

    .de-hero {
        height: calc(100svh - 135px);
    }
}

/* HEADER / LOGO — FINAL */
@media (min-width: 761px) {
    .de-brand {
        height: 155px;
        padding: 0;
    }

    .de-brand > img {
        width: min(960px, 66vw);
        max-width: none;
        height: auto;
        max-height: 155px;
    }

    .de-hero {
        height: calc(100svh - 155px);
    }
}

/* ==========================================================
   MOBILE — FULL VIEWPORT / SEM ROLAGEM
========================================================== */
@media (max-width: 760px) {

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .de-page {
        width: 100%;
        height: 100vh;
        height: 100svh;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .de-brand {
        flex: 0 0 120px;
        height: 120px;
        min-height: 120px;
        padding: 0;
    }

    .de-brand > img {
        width: min(88vw, 520px);
        height: auto;
        max-height: 105px;
        object-fit: contain;
    }

    .de-hero {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .hero-copy {
        height: 100%;
        padding: 20px 16px 70px;
    }

    .eyebrow {
        margin-bottom: 20px;
    }

    h1 {
        font-size: clamp(43px, 13vw, 64px);
    }

    .sports {
        margin-top: 25px;
    }

    .future {
        bottom: 20px;
    }
}




@import url("./hf09-pro.css?v=9");