:root{
  --bg:#ffffff;
  --bg-2:#f3f8fb;
  --surface:#ffffff;
  --surface-2:#f5fbff;
  --surface-3:#e9f3f8;
  --line:rgba(12,36,53,.1);
  --text:#0c2435;
  --muted:#55768a;
  --blue:#1da7ff;
  --blue-soft:#133d58;
  --green:#45d7b0;
  --green-soft:#123e3a;
  --white-card:#f5fbff;
  --white-text:#0c2435;
  --shadow:0 20px 48px rgba(0,0,0,.28);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

body{
  min-height:100vh;
  font-family:'Outfit',sans-serif;
  color:var(--text);
  background:#fff;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select{
  font:inherit;
}

.app-shell{
  width:100%;
  max-width:1520px;
  margin:0 auto;
  padding:18px 18px 34px;
  scroll-margin-top:92px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  min-height:76px;
  padding:14px max(18px, calc((100vw - 1520px) / 2 + 18px));
  background:#073fd2;
  color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.site-official-ferj-bar{
  flex:0 0 calc(100% + (2 * max(18px, calc((100vw - 1520px) / 2 + 18px))));
  margin:0 calc(-1 * max(18px, calc((100vw - 1520px) / 2 + 18px)));
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:6px 14px;
  background:#072fb0;
  color:#fff;
  font-size:.82rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.site-official-ferj-bar span:not(.site-official-ferj-icon){
  display:inline-block;
  animation:ferj-letter-wave 1.8s ease-in-out infinite;
  animation-delay:calc(var(--i) * .045s);
}

.site-official-ferj-icon{
  margin-right:6px;
  font-size:1rem;
  line-height:1;
}

.site-official-ferj-bar:hover span:not(.site-official-ferj-icon),
.site-official-ferj-bar:focus-visible span:not(.site-official-ferj-icon){
  animation-duration:.9s;
}

@keyframes ferj-letter-wave{
  0%, 65%, 100%{ transform:translateY(0); }
  20%{ transform:translateY(-3px); }
  40%{ transform:translateY(2px); }
}

@media (prefers-reduced-motion: reduce){
  .site-official-ferj-bar span:not(.site-official-ferj-icon){
    animation:none;
  }
}

.site-brand{
  display:flex;
  align-items:center;
  gap:22px;
  flex:1 1 auto;
  min-width:0;
}

.site-brand-metropolitano{
  width:210px;
  height:86px;
  object-fit:contain;
  filter:none;
}

.site-brand .site-brand-ferj{
  width:170px;
  height:46px;
  object-fit:contain;
  filter:none;
}

.site-official-text{
  color:#fff;
  font-size:1.18rem;
  font-weight:900;
  line-height:1.05;
  text-transform:uppercase;
  white-space:normal;
  max-width:130px;
}

.site-nav{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:28px;
  overflow-x:auto;
  scrollbar-width:none;
}

.site-nav::-webkit-scrollbar{
  display:none;
}

.site-nav a{
  position:relative;
  flex:0 0 auto;
  padding:12px 0;
  color:#fff;
  font-size:1rem;
  font-weight:800;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:0;
  white-space:nowrap;
}

.site-nav a::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:3px;
  border-radius:999px;
  background:#74c423;
  opacity:0;
  transform:scaleX(.55);
  transition:opacity .18s ease, transform .18s ease;
}

.site-nav a.is-active::after,
.site-nav a:hover::after{
  opacity:1;
  transform:scaleX(1);
}

.site-utility-nav{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.site-utility-nav::-webkit-scrollbar{
  display:none;
}

.site-utility-nav a{
  flex:0 0 auto;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border-radius:12px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:.86rem;
  font-weight:900;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}

@media (max-width:820px){
  .site-utility-nav{
    flex:1 1 100%;
  }
}

@media (max-width:520px){
  .site-header{
    gap:10px;
    padding:8px 10px;
  }

  .site-utility-nav{
    justify-content:flex-start;
    gap:6px;
    margin:0 -10px;
    padding:0 10px 2px;
  }

  .site-utility-nav a{
    min-height:36px;
    gap:5px;
    padding:0 9px;
    border-radius:10px;
    font-size:.76rem;
  }

  .site-utility-nav .material-icons-round{
    font-size:18px;
  }
}

.site-utility-nav a.is-active{
  background:#fff;
  color:#073fd2;
}

.site-utility-nav .material-icons-round{
  font-size:19px;
}

@media (max-width:520px){
  .site-utility-nav .material-icons-round{
    font-size:18px;
  }
}

.site-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 0 4px;
}

.back-to-home-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:30;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#073fd2;
  color:#fff;
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}

.back-to-home-top .material-icons-round{
  font-size:34px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-chip{
  width:48px;
  height:48px;
  border:none;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.05);
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
}

.brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.brand-copy strong{
  font-size:1rem;
  font-weight:700;
}

.brand-copy span{
  color:var(--muted);
  font-size:.82rem;
}

.user-badge{
  min-width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--green), #a6ffee);
  color:#06312c;
  font-weight:800;
}

.top-tabs{
  display:flex;
  gap:22px;
  margin:0 0 16px;
}

.tab{
  color:var(--muted);
  padding:6px 0 12px;
  position:relative;
  font-size:1.02rem;
}

.tab-active{
  color:var(--text);
}

.tab-active::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:62px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--green));
}

.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  min-height:220px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  background:#0b2234;
}

.hero-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:24px 22px;
  background:linear-gradient(180deg, rgba(7,19,29,.08), rgba(7,19,29,.88));
  color:#f7fbff;
}

.eyebrow{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(69,215,176,.12);
  color:#aef4df;
  font-size:.8rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.hero-overlay h1{
  font-size:1.45rem;
  line-height:1.18;
  max-width:18rem;
}

.summary-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  margin-bottom:20px;
}

.summary-card{
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow:var(--shadow);
}

.summary-label{
  display:block;
  color:inherit;
  opacity:.8;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.summary-card strong{
  display:block;
  margin-top:6px;
  font-size:1.08rem;
}

.summary-card-green{
  background:linear-gradient(180deg, rgba(16,57,80,.88), rgba(16,42,54,.98));
  border:1px solid rgba(69,215,176,.2);
  color:#f7fbff;
}

.summary-card-blue{
  background:linear-gradient(180deg, rgba(18,50,75,.92), rgba(14,35,56,.98));
  border:1px solid rgba(29,167,255,.2);
  color:#f7fbff;
}

.summary-card-white{
  background:var(--white-card);
  color:var(--white-text);
}

.matches-block{
  margin-bottom:22px;
}

.match-showcase-list{
  display:grid;
  gap:14px;
}

.match-showcase-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:16px;
  background:
    linear-gradient(135deg, rgba(69,215,176,.13), transparent 34%),
    linear-gradient(180deg, rgba(16,40,60,.97), rgba(8,24,38,.99));
  border:1px solid rgba(69,215,176,.2);
  box-shadow:var(--shadow);
  color:#f7fbff;
}

.match-showcase-card::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg, var(--green), var(--blue));
}

.match-showcase-live{
  border-color:rgba(116,196,35,.5);
  background:
    linear-gradient(135deg, rgba(116,196,35,.22), transparent 36%),
    linear-gradient(180deg, rgba(16,40,60,.97), rgba(8,24,38,.99));
  box-shadow:0 20px 48px rgba(0,0,0,.28), 0 0 30px rgba(116,196,35,.24);
}

.match-showcase-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.match-showcase-top strong,
.match-showcase-top span{
  display:block;
}

.match-showcase-top strong{
  font-size:.98rem;
  line-height:1.2;
}

.match-showcase-top span{
  margin-top:5px;
  color:#9ec3d7;
  font-size:.82rem;
}

.match-status{
  flex:0 0 auto;
  min-height:30px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin-top:0 !important;
  padding:0 11px;
  border-radius:999px;
  background:rgba(69,215,176,.14);
  color:#000 !important;
  font-size:.76rem !important;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.match-status-live{
  background:#74c423;
  color:#fff !important;
  gap:7px;
  animation:livePulse 1s ease-in-out infinite;
}

.match-status-live::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff2f2f;
  box-shadow:0 0 0 0 rgba(255,47,47,.55);
  animation:liveDotPulse 1s ease-in-out infinite;
}

.match-teams{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:12px;
}

.match-team{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}

.match-team img{
  width:54px;
  height:54px;
  object-fit:contain;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  padding:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.match-team span{
  width:100%;
  color:#e7f6fb;
  font-size:.88rem;
  font-weight:700;
  line-height:1.15;
  overflow-wrap:anywhere;
}

.match-center{
  min-width:74px;
  border-radius:18px;
  padding:10px 11px;
  text-align:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.match-center strong,
.match-center span{
  display:block;
}

.match-center strong{
  font-size:1rem;
}

.match-center span{
  margin-top:4px;
  color:#aef4df;
  font-size:.9rem;
  font-weight:800;
}

.match-live-score{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:96px;
  font-size:2.125rem !important;
  line-height:1;
  color:#fff;
  text-shadow:0 3px 14px rgba(25,90,34,.45);
}

.match-live-score small{
  color:#d9ff9f;
  font-size:1rem;
  font-weight:900;
  text-transform:uppercase;
}

.match-final-score{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:96px;
  color:#0c2435;
  font-size:1.925rem !important;
  line-height:1;
}

.match-final-score small{
  color:#55768a;
  font-size:.92rem;
  font-weight:900;
  text-transform:uppercase;
}

.match-showcase-live .match-center{
  background:linear-gradient(135deg, #74c423, #087338);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 14px 30px rgba(116,196,35,.28);
}

.match-showcase-live .match-center span{
  color:#eaffc9;
  font-size:.76rem;
}

.match-venue{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:14px;
  color:#9ec3d7;
  font-size:.84rem;
  text-align:center;
}

.match-venue .material-icons-round{
  color:#aef4df;
  font-size:18px;
}

.match-sheet-link{
  width:fit-content;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:14px auto 0;
  padding:0 14px;
  border-radius:999px;
  background:#073fd2;
  color:#fff;
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  box-shadow:0 10px 22px rgba(7,63,210,.2);
}

.match-sheet-link .material-icons-round{
  font-size:18px;
}

@keyframes livePulse{
  0%,
  100%{
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(116,196,35,.42);
  }

  50%{
    opacity:.62;
    transform:scale(1.04);
    box-shadow:0 0 0 8px rgba(116,196,35,0);
  }
}

@keyframes liveDotPulse{
  0%,
  100%{
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,47,47,.55);
  }

  50%{
    opacity:.55;
    transform:scale(1.25);
    box-shadow:0 0 0 7px rgba(255,47,47,0);
  }
}

.section-block{
  margin-bottom:22px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.section-link{
  color:#087338;
  font-size:.9rem;
  font-weight:700;
}

.section-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.section-title h2{
  font-size:1.08rem;
  font-weight:700;
}

.section-mark{
  width:6px;
  height:34px;
  border-radius:999px;
}

.section-mark-green{
  background:var(--green);
}

.section-mark-blue{
  background:var(--blue);
}

.category-grid,
.club-grid,
.athlete-grid{
  display:grid;
  gap:14px;
}

.category-card,
.club-card-mobile,
.athlete-card,
.mini-card,
.team-hero{
  box-shadow:var(--shadow);
}

.category-grid{
  grid-template-columns:1fr 1fr;
}

.category-card{
  background:linear-gradient(180deg, rgba(18,50,75,.95), rgba(12,34,51,.98));
  border:1px solid rgba(29,167,255,.18);
  border-radius:22px;
  padding:16px;
  color:#f7fbff;
}

.category-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.category-top img,
.club-card-top img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.count-badge{
  min-width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(69,215,176,.14);
  color:#aef4df;
  font-weight:700;
}

.category-card strong,
.club-card-mobile strong{
  display:block;
  font-size:1rem;
  line-height:1.2;
}

.category-card span,
.club-card-mobile span,
.club-card-mobile small,
.mini-copy span{
  display:block;
  margin-top:6px;
  color:var(--muted);
}

.category-card span,
.club-card-mobile:not(.club-card-mobile-light) span,
.club-card-mobile:not(.club-card-mobile-light) small,
.mini-card-link .mini-copy span{
  color:#9ec3d7;
}

.meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#cfe8f4;
  font-size:.82rem;
}

.meta-row-dark{
  border-top:1px solid rgba(12,36,53,.08);
  color:#55768a;
}

.mini-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.news-carousel-block{
  margin-bottom:18px;
}

.news-cover-row{
  display:grid;
  grid-template-columns:minmax(320px, 720px) 220px;
  gap:18px;
  align-items:start;
  justify-content:start;
}

.news-carousel{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  padding:2px;
  min-width:0;
}

.news-carousel::-webkit-scrollbar{
  display:none;
}

.news-carousel.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
}

.news-carousel.is-dragging a{
  pointer-events:none;
}

.news-carousel-shell{
  min-width:0;
}

.news-carousel-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:24px;
  margin-top:10px;
}

.news-carousel-dot{
  width:11px;
  height:11px;
  min-height:0;
  border:1px solid rgba(69,215,176,.58);
  border-radius:3px;
  background:rgba(255,255,255,.18);
  padding:0;
  box-shadow:none;
}

.news-carousel-dot.is-active{
  background:#45d7b0;
  border-color:#45d7b0;
}

.news-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  background:linear-gradient(180deg, rgba(16,40,60,.96), rgba(11,28,42,.98));
  border:1px solid rgba(69,215,176,.16);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
  color:#f7fbff;
}

.cover-banner{
  overflow:hidden;
  border-radius:22px;
  background:#061533;
  border:1px solid rgba(29,167,255,.2);
  box-shadow:var(--shadow);
  width:220px;
}

.cover-banner img{
  display:block;
  width:100%;
  height:auto;
}

.news-cover{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  background:#0b2234;
}

.news-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.news-featured{
  position:absolute;
  left:12px;
  top:12px;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:0 10px;
  background:rgba(69,215,176,.92);
  color:#06312c;
  font-size:.78rem;
  font-weight:800;
}

.news-featured-static{
  position:static;
  margin-bottom:10px;
}

.news-copy{
  padding:14px;
}

.news-copy strong{
  display:block;
  line-height:1.22;
  font-size:1.05rem;
}

.news-copy span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  line-height:1.35;
}

.news-slide .news-copy span,
.news-list-card .news-copy span,
.news-detail .news-copy span{
  color:#9ec3d7;
}

.hashtag-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}

.hashtag-row span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  border-radius:999px;
  background:rgba(29,167,255,.13);
  color:#000;
  padding:0 10px;
  font-size:.8rem;
  font-weight:700;
}

.news-list{
  display:grid;
  gap:14px;
}

.news-list-card{
  overflow:hidden;
  border:1px solid rgba(69,215,176,.16);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(16,40,60,.96), rgba(11,28,42,.98));
  box-shadow:var(--shadow);
  color:#f7fbff;
}

.news-detail{
  overflow:hidden;
  border:1px solid rgba(69,215,176,.16);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(16,40,60,.96), rgba(11,28,42,.98));
  box-shadow:var(--shadow);
  color:#f7fbff;
}

.news-detail-cover{
  width:100%;
  aspect-ratio:16/10;
  display:block;
  object-fit:cover;
  background:#0b2234;
}

.news-detail-copy{
  padding:18px;
}

.news-detail-copy h1{
  font-size:1.62rem;
  line-height:1.14;
}

.news-lead{
  margin-top:10px;
  color:#cfe8f4;
  line-height:1.45;
}

.match-pill{
  margin-top:14px;
  border:1px solid rgba(29,167,255,.2);
  border-radius:16px;
  background:rgba(29,167,255,.09);
  padding:12px;
}

.match-pill strong,
.match-pill span{
  display:block;
}

.match-pill span{
  margin-top:5px;
  color:#9ec3d7;
  font-size:.88rem;
}

.news-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  color:#cfe8f4;
}

.article-body{
  margin-top:18px;
  color:#e9f6fb;
  line-height:1.62;
}

.mini-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px;
  color:var(--text);
}

.mini-card-link{
  background:linear-gradient(180deg, rgba(16,40,60,.78), rgba(11,28,42,.88));
  border:1px solid rgba(69,215,176,.3);
  color:#f7fbff;
}

.mini-crest{
  width:54px;
  height:54px;
  object-fit:contain;
  border-radius:16px;
  background:transparent;
  padding:8px;
  box-shadow:inset 0 0 0 1px rgba(69,215,176,.18);
}

.mini-copy{
  min-width:0;
}

.mini-copy strong{
  display:block;
  line-height:1.25;
}

.mini-meta{
  color:#9bdcc8 !important;
  font-size:.8rem;
}

.club-grid{
  grid-template-columns:1fr;
}

.club-card-mobile{
  background:linear-gradient(180deg, rgba(16,40,60,.96), rgba(11,28,42,.98));
  border-radius:24px;
  padding:18px;
  border:1px solid rgba(69,215,176,.14);
  color:#f7fbff;
}

.club-card-mobile-light{
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(240,249,253,.98));
  border:1px solid rgba(29,167,255,.14);
  color:var(--white-text);
}

.club-card-mobile-light span,
.club-card-mobile-light small{
  color:#55768a;
}

.club-card-mobile-light .count-badge{
  background:rgba(69,215,176,.16);
  color:#0f5d54;
}

.club-card-mobile-light .club-card-top img{
  background:#ffffff;
  border-radius:16px;
  padding:8px;
  box-shadow:inset 0 0 0 1px rgba(12,36,53,.06);
}

.club-card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}

.plantel-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg, #2ccf97, #7af0c7);
  color:#08382f !important;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 10px 18px rgba(69,215,176,.22);
}

.inline-form{
  margin:0;
}

.joinha-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:none;
  height:38px;
  padding:0 16px;
  border-radius:999px;
  background:linear-gradient(135deg, #2ccf97, #7af0c7);
  color:#08382f;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(69,215,176,.22);
}

.joinha-button span{
  display:inline;
  margin-top:0;
  color:inherit;
  font-size:inherit;
  line-height:1;
}

.joinha-button-compact{
  flex:0 0 auto;
  min-width:88px;
  padding:0 14px;
}

.joinha-button-athlete{
  height:34px;
  min-width:96px;
  padding:0 14px;
  font-size:.84rem;
}

.joinha-button.is-loading{
  opacity:.8;
}

.joinha-button.is-success{
  transform:translateY(-1px);
}

.mobile-toast{
  position:fixed;
  left:50%;
  bottom:78px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(320px, calc(100vw - 28px));
  padding:13px 16px;
  border-radius:18px;
  background:#073fd2;
  color:#fff;
  box-shadow:0 18px 36px rgba(7,63,210,.28);
  opacity:0;
  transform:translate(-50%, 14px) scale(.96);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}

.mobile-toast.is-visible{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}

.mobile-toast .material-icons-round{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:#74c423;
  color:#fff;
  font-size:18px;
}

.mobile-toast strong{
  color:#fff;
  font-size:.9rem;
  line-height:1.22;
}

.club-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.team-hero{
  display:flex;
  align-items:center;
  gap:16px;
  background:linear-gradient(180deg, rgba(18,50,75,.92), rgba(12,33,48,.98));
  border-radius:26px;
  padding:18px;
  margin-bottom:18px;
  border:1px solid rgba(29,167,255,.18);
  color:#f7fbff;
}

.team-hero-crest{
  width:72px;
  height:72px;
  object-fit:contain;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  padding:10px;
}

.team-hero-copy h1{
  font-size:1.25rem;
  line-height:1.2;
}

.team-hero-copy p{
  margin-top:6px;
  color:#9ec3d7;
}

.athlete-grid{
  grid-template-columns:1fr 1fr;
}

.athlete-card{
  background:linear-gradient(180deg, rgba(244,251,255,.98), rgba(229,243,249,.98));
  border-radius:22px;
  overflow:hidden;
  color:var(--white-text);
}

.athlete-photo-wrap{
  aspect-ratio:1/1.04;
  background:
    radial-gradient(circle at top, rgba(29,167,255,.18), transparent 46%),
    linear-gradient(180deg, #f8fdff 0%, #ddedf5 100%);
}

.athlete-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.athlete-copy{
  padding:14px;
}

.athlete-copy strong{
  display:block;
  font-size:.98rem;
  line-height:1.2;
}

.athlete-copy span{
  display:block;
  margin-top:6px;
  color:#55768a;
  font-size:.88rem;
}

.athlete-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-top:12px;
}

.empty-state{
  background:#f5fbff;
  border-radius:22px;
  border:1px solid var(--line);
  padding:22px 18px;
  color:var(--muted);
}

.sheet-hero{
  overflow:hidden;
  border-radius:28px;
  padding:18px;
  background:
    linear-gradient(135deg, rgba(7,63,210,.08), transparent 42%),
    #fff;
  border:1px solid rgba(12,36,53,.1);
  box-shadow:0 16px 38px rgba(12,36,53,.1);
}

.sheet-hero-live{
  border-color:rgba(116,196,35,.38);
  box-shadow:0 16px 38px rgba(12,36,53,.1), 0 0 22px rgba(116,196,35,.16);
}

.sheet-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.sheet-hero-top > span:last-child{
  color:var(--muted);
  font-size:.86rem;
  font-weight:800;
  text-align:right;
}

.sheet-scoreboard{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:14px;
}

.sheet-team{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.sheet-team img{
  width:70px;
  height:70px;
  object-fit:contain;
  border-radius:22px;
  background:#f5fbff;
  padding:10px;
  box-shadow:inset 0 0 0 1px rgba(12,36,53,.08);
}

.sheet-team strong{
  width:100%;
  color:var(--text);
  font-size:.92rem;
  line-height:1.15;
  overflow-wrap:anywhere;
}

.sheet-score{
  min-width:110px;
  border-radius:22px;
  padding:13px 14px;
  text-align:center;
  background:linear-gradient(135deg, #74c423, #087338);
  color:#fff;
  box-shadow:0 14px 28px rgba(116,196,35,.22);
}

.sheet-score strong{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:2.45rem;
  line-height:1;
}

.sheet-score small{
  font-size:1rem;
  font-weight:900;
  color:#d9ff9f;
}

.sheet-score span{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:.78rem;
  font-weight:800;
}

.sheet-meta-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:18px;
}

.sheet-meta-grid span{
  border-radius:14px;
  padding:10px;
  background:#f5fbff;
  color:#32566c;
  font-size:.82rem;
  font-weight:800;
  text-align:center;
}

.sheet-fact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}

.sheet-fact-grid div{
  border-radius:16px;
  padding:12px;
  background:#f8fbfd;
  border:1px solid rgba(12,36,53,.08);
}

.sheet-fact-grid span,
.sheet-fact-grid strong{
  display:block;
}

.sheet-fact-grid span{
  color:var(--muted);
  font-size:.76rem;
  font-weight:800;
  text-transform:uppercase;
}

.sheet-fact-grid strong{
  margin-top:5px;
  color:var(--text);
  font-size:.9rem;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.sheet-section{
  margin-top:16px;
  border:1px solid rgba(12,36,53,.1);
  border-radius:24px;
  background:#fff;
  padding:16px;
  box-shadow:0 12px 30px rgba(12,36,53,.08);
}

.sheet-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.sheet-section-title .material-icons-round{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#073fd2;
  color:#fff;
  font-size:20px;
}

.sheet-section-title h2{
  color:var(--text);
  font-size:1.05rem;
}

.sheet-event-list{
  display:grid;
  gap:10px;
}

.sheet-event{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius:18px;
  padding:12px;
  background:#f8fbfd;
  border:1px solid rgba(12,36,53,.08);
}

.sheet-event > div{
  flex:1 1 auto;
  min-width:0;
}

.sheet-event-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#087338;
  color:#fff;
  font-size:.9rem;
  font-weight:900;
}

.sheet-player-photo{
  flex:0 0 auto;
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:50%;
  background:#eef6fa;
  border:2px solid #fff;
  box-shadow:0 8px 18px rgba(12,36,53,.12);
}

.sheet-card-icon{
  background:#f4c430;
  color:#111;
}

.sheet-sub-icon{
  background:#073fd2;
}

.sheet-event strong,
.sheet-event span,
.sheet-event small{
  display:block;
}

.sheet-event strong{
  color:var(--text);
  font-size:.92rem;
  line-height:1.2;
}

.sheet-event span,
.sheet-event small{
  margin-top:4px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.3;
}

.sheet-sub-players{
  display:grid;
  gap:10px;
  width:100%;
}

.sheet-sub-players div{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-items:center;
  gap:10px;
  min-width:0;
}

.sheet-sub-players strong,
.sheet-sub-players span{
  margin-top:0;
}

.sheet-empty,
.sheet-report{
  border-radius:18px;
  padding:14px;
  background:#f8fbfd;
  color:var(--muted);
  line-height:1.45;
}

.summary-card-green,
.summary-card-blue,
.match-showcase-card,
.category-card,
.news-slide,
.news-list-card,
.news-detail,
.mini-card-link,
.club-card-mobile,
.team-hero{
  background:#fff;
  color:var(--text);
  border:1px solid rgba(12,36,53,.1);
  box-shadow:0 12px 30px rgba(12,36,53,.08);
}

.summary-card-green{
  border-top:4px solid var(--green);
}

.summary-card-blue{
  border-top:4px solid var(--blue);
}

.match-showcase-live{
  background:#fff;
  border-color:rgba(116,196,35,.42);
  box-shadow:0 12px 30px rgba(12,36,53,.08), 0 0 22px rgba(116,196,35,.16);
}

.match-showcase-live .match-center span{
  color:#fff !important;
}

.match-showcase-top span,
.match-venue,
.category-card span,
.club-card-mobile span,
.club-card-mobile small,
.mini-copy span,
.news-slide .news-copy span,
.news-list-card .news-copy span,
.news-detail .news-copy span,
.match-pill span,
.team-hero-copy p{
  color:var(--muted);
}

.match-team span,
.article-body,
.news-actions{
  color:var(--text);
}

.match-team img,
.team-hero-crest{
  background:#f5fbff;
  box-shadow:inset 0 0 0 1px rgba(12,36,53,.08);
}

.match-center{
  background:#f5fbff;
  border-color:rgba(12,36,53,.08);
}

.match-center span,
.match-venue .material-icons-round,
.mini-meta{
  color:#087338 !important;
}

.news-lead{
  color:#32566c;
}

.match-pill{
  background:#f5fbff;
  border-color:rgba(12,36,53,.1);
}

.club-card-mobile-light{
  background:#fff;
}

@media (max-width:430px){
  .app-shell{
    padding:14px 14px 28px;
  }

  .site-header{
    flex-wrap:wrap;
    min-height:66px;
    gap:8px 12px;
    padding:0 14px 10px;
  }

  .site-official-ferj-bar{
    flex-basis:calc(100% + 28px);
    margin:0 -14px;
    min-height:24px;
    padding:5px 12px;
    font-size:.72rem;
  }

  .site-brand{
    gap:8px;
    width:100%;
    justify-content:space-between;
  }

  .site-brand-metropolitano{
    width:104px;
    height:54px;
  }

  .site-brand .site-brand-ferj{
    width:96px;
    height:36px;
  }

  .site-official-text{
    max-width:68px;
    font-size:.84rem;
    line-height:1.05;
  }

  .site-nav{
    width:100%;
    justify-content:space-between;
    gap:8px;
    padding-left:0;
    overflow-x:visible;
  }

  .site-nav a{
    font-size:.74rem;
    padding:9px 0;
  }

  .back-to-home-top{
    right:14px;
    bottom:14px;
    width:44px;
    height:44px;
  }

  .summary-strip,
  .category-grid,
  .athlete-grid{
    grid-template-columns:1fr;
  }

  .hero-card{
    min-height:180px;
  }

  .team-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .news-cover-row{
    grid-template-columns:1fr;
  }

  .news-slide{
    flex-basis:100%;
  }

  .cover-banner{
    width:min(100%, 320px);
  }
}

@media (min-width:768px){
  .app-shell{
    padding:28px 28px 42px;
  }

  .site-header{
    min-height:88px;
    padding-top:0;
    padding-bottom:16px;
  }

  .site-brand-metropolitano{
    width:270px;
    height:96px;
  }

  .site-brand .site-brand-ferj{
    width:210px;
    height:56px;
  }

  .site-official-text{
    max-width:112px;
    font-size:1.28rem;
  }

  .site-nav a{
    font-size:1.08rem;
  }

  .hero-card{
    min-height:320px;
  }

  .hero-overlay h1{
    max-width:34rem;
    font-size:2.05rem;
  }

  .category-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .club-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .athlete-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .team-hero{
    padding:24px;
  }

  .team-hero-crest{
    width:88px;
    height:88px;
  }
}

@media (max-width:860px){
  .news-cover-row{
    grid-template-columns:1fr;
  }

  .news-slide{
    flex-basis:100%;
  }

  .cover-banner{
    width:min(100%, 320px);
  }
}

@media (min-width:1100px){
  .app-shell{
    padding:32px 36px 52px;
  }

  .topbar{
    margin-bottom:24px;
  }

  .summary-strip{
    grid-template-columns:repeat(3, minmax(220px, 1fr));
  }

  .category-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .club-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .athlete-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (min-width:1400px){
  .hero-card{
    min-height:380px;
  }

  .athlete-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
}

/* FERJ Design System aplicado em mobeliocampos */
:root{
  --c-primary:#003DDC;
  --c-primary-light:#00AED7;
  --c-primary-dark:#061689;
  --c-secondary:#39FF14;
  --c-text-tertiary:#545454;
  --c-text-tertiary-light:#979797;
  --c-border-tertiary:#E6E7E8;
  --c-primary-hover:#0035c2;
  --c-secondary-hover:#2ee610;
  --c-error:#ef4444;
  --font:'Asap Condensed', sans-serif;
  --fw-regular:400;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-black:900;
  --r-sm:4px;
  --r-md:6px;
  --r-lg:8px;
  --r-xl:12px;
  --r-full:9999px;
  --sh-sm:0 1px 3px rgba(0,0,0,.12);
  --sh-md:0 4px 12px rgba(0,0,0,.15);
  --sh-lg:0 8px 24px rgba(0,0,0,.18);
  --dur-fast:150ms;
  --dur-normal:300ms;
  --ease:ease-out;
  --bg:#d1d5db;
  --bg-2:#f7f8fb;
  --surface:#ffffff;
  --surface-2:#ffffff;
  --surface-3:#eef7fb;
  --line:var(--c-border-tertiary);
  --text:#061689;
  --muted:var(--c-text-tertiary);
  --blue:var(--c-primary);
  --green:var(--c-secondary);
  --white-card:#ffffff;
  --white-text:var(--c-primary-dark);
  --shadow:var(--sh-sm);
}

body{
  font-family:var(--font);
  font-weight:var(--fw-regular);
  background:var(--bg);
  color:#000;
}

.app-shell{
  max-width:1320px;
  padding:24px 16px 48px;
}

.site-header{
  min-height:52px;
  padding:0 max(16px, calc((100vw - 1320px) / 2 + 16px)) 0;
  gap:16px;
  background:var(--c-primary);
  border-bottom:3px solid var(--c-secondary);
  color:#fff;
  box-shadow:var(--sh-md);
}

.site-official-ferj-bar{
  min-height:28px;
  background:var(--c-primary-dark);
  color:var(--c-secondary);
  letter-spacing:2px;
}

.site-brand{
  gap:16px;
}

.site-brand-metropolitano{
  width:170px;
  height:68px;
}

.site-brand .site-brand-ferj{
  width:138px;
  height:42px;
}

.site-official-text,
.site-nav a,
.site-utility-nav a{
  font-weight:var(--fw-bold);
  text-transform:uppercase;
  letter-spacing:1px;
}

.site-nav{
  gap:2px;
}

.site-nav a{
  padding:8px 12px;
  border-radius:var(--r-sm);
  color:rgba(255,255,255,.72);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.site-nav a::after{
  display:none;
}

.site-nav a.is-active,
.site-nav a:hover{
  background:rgba(57,255,20,.12);
  color:var(--c-secondary);
}

.site-utility-nav a{
  min-height:34px;
  border-radius:var(--r-full);
  background:var(--c-secondary);
  color:var(--c-primary-dark);
}

.live-shell{
  gap:24px;
}

.live-hero{
  position:relative;
  overflow:hidden;
  border-radius:0;
  border-left:8px solid var(--c-secondary);
  background:linear-gradient(135deg,var(--c-primary-dark) 0%,var(--c-primary) 56%,var(--c-primary-light) 100%) !important;
  box-shadow:var(--sh-lg) !important;
}

.live-hero::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(57,255,20,.05) 0,rgba(57,255,20,.05) 2px,transparent 2px,transparent 20px);
}

.live-hero > *{
  position:relative;
  z-index:1;
}

.live-hero p{
  color:var(--c-secondary) !important;
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:.1em;
}

.live-hero h1{
  color:#fff;
  font-size:clamp(2rem, 6vw, 4.8rem) !important;
  font-weight:var(--fw-black);
  line-height:1.1 !important;
  text-transform:uppercase;
}

.live-kpi{
  border-radius:var(--r-lg) !important;
  background:rgba(255,255,255,.14) !important;
}

.live-kpi strong{
  color:var(--c-secondary);
}

.status-filter button,
.match-filter-field select,
.match-reset-button,
.match-sheet-link,
.match-summary-link,
.back-to-home-top{
  border-radius:var(--r-full) !important;
  font-weight:var(--fw-bold);
}

.status-filter button,
.match-filter-field select{
  background:#fff !important;
  color:var(--c-primary-dark) !important;
  border:1px solid var(--c-border-tertiary) !important;
}

.status-filter button.is-active,
.match-reset-button,
.match-summary-link,
.match-sheet-link,
.back-to-home-top{
  background:var(--c-secondary) !important;
  color:var(--c-primary-dark) !important;
}

.match-filter-field span,
.match-referees-title,
.match-card-date,
.mini-meta{
  color:var(--c-primary-light) !important;
  font-weight:var(--fw-black);
  letter-spacing:.08em;
}

.section-title{
  border-radius:0;
  border-left:8px solid var(--c-secondary);
  background:var(--c-primary-dark);
  color:#fff;
  padding:18px 20px;
}

.section-title h2{
  color:#fff;
  font-size:1.6rem;
  font-weight:var(--fw-bold);
  text-transform:uppercase;
}

.summary-card-green,
.summary-card-blue,
.match-showcase-card,
.category-card,
.news-slide,
.news-list-card,
.news-detail,
.mini-card-link,
.club-card-mobile,
.team-hero,
.athlete-card,
.sheet-hero,
.sheet-card{
  border-radius:var(--r-lg) !important;
  background:#fff !important;
  border:1px solid var(--c-border-tertiary) !important;
  box-shadow:var(--sh-sm) !important;
}

.match-showcase-card{
  padding:24px 16px;
  text-align:center;
  transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.match-showcase-card:hover{
  box-shadow:var(--sh-md) !important;
  transform:translateY(-2px);
}

.match-showcase-live{
  border-color:rgba(57,255,20,.68) !important;
  box-shadow:0 4px 18px rgba(57,255,20,.24) !important;
}

.match-showcase-top strong,
.category-card strong,
.club-card-mobile strong,
.news-copy strong,
.team-hero-copy h1,
.sheet-section-title h2{
  color:var(--c-primary-dark) !important;
  font-weight:var(--fw-bold);
  text-transform:uppercase;
}

.match-showcase-top span,
.match-venue,
.category-card span,
.club-card-mobile span,
.club-card-mobile small,
.mini-copy span,
.news-slide .news-copy span,
.news-list-card .news-copy span,
.news-detail .news-copy span,
.match-pill span,
.team-hero-copy p{
  color:var(--c-text-tertiary) !important;
}

.match-center{
  border-radius:var(--r-xl) !important;
  background:#d1d5db !important;
  color:#000 !important;
  border:0 !important;
}

.match-center strong,
.match-score{
  color:#000 !important;
  font-weight:var(--fw-black);
}

.match-showcase-live .match-center,
.match-center.has-result{
  background:var(--c-secondary) !important;
  color:var(--c-primary-dark) !important;
}

.match-showcase-live .match-center strong,
.match-showcase-live .match-center span,
.match-center.has-result strong,
.match-center.has-result span{
  color:var(--c-primary-dark) !important;
}

.match-team img,
.team-hero-crest,
.category-top img,
.club-card-top img{
  border-radius:var(--r-md) !important;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--c-border-tertiary);
}

.match-status-live,
.count-badge,
.tag-secondary{
  background:var(--c-secondary) !important;
  color:var(--c-primary-dark) !important;
  border-radius:var(--r-full) !important;
}

.match-status-final{
  background:#e6e7e8 !important;
  color:var(--c-primary-dark) !important;
}

.match-status-cancel{
  background:#fee2e2 !important;
  color:#991b1b !important;
}

input,
select,
textarea{
  font-family:var(--font);
}

@media (max-width:520px){
  .site-header{
    min-height:58px;
    padding:0 10px 8px;
  }

  .site-brand-metropolitano{
    width:104px;
    height:54px;
  }

  .site-brand .site-brand-ferj{
    width:96px;
    height:34px;
  }

  .site-nav a{
    padding:8px 6px;
    font-size:.78rem;
  }

  .app-shell{
    padding:14px 12px 28px;
  }

  .live-hero{
    border-left-width:6px;
    padding:16px !important;
  }
}