/* ============================================================
   RANDO PLATFORM / RANDONNEURS URUGUAY
   CSS GLOBAL COMPLETO
   01/09/2026

   MATRIZ:
   - Blocksy
   - Home baseada na LGR V13
   - Header Uruguay
   - Navegação fixa mobile
   - Mi Área

   ESTADO:
   - Home PC OK
   - Home Mobile OK
   - Cards OK
   - Carrossel OK
   - Ajuste atual: respiro superior do logo SOMENTE desktop
   ============================================================ */


:root {

  --rando-navy: #0e3558;
  --rando-navy-deep: #082c49;

  --rando-celeste: #58b9e7;

  --rando-white: #f7f9fc;
  --rando-yellow: #ffd21a;

  --rando-card: #123c60;
  --rando-card-hover: #174d76;

  --rando-line: rgba(255,255,255,.16);

  --rando-hover: rgba(255,255,255,.08);
  --rando-active: rgba(255,210,26,.10);

  --rando-border: rgba(88,185,231,.48);
}


/* ============================================================
   1. RESET DA HOME
   ============================================================ */

body.home,
body.page-id-78 {

  --content-vertical-spacing: 0px !important;
  --boxed-content-spacing: 0px !important;
  --content-spacing: 0px !important;

  background: var(--rando-navy) !important;
}


body.home #main-container,
body.page-id-78 #main-container,

body.home #main,
body.page-id-78 #main,

body.home .site-main,
body.page-id-78 .site-main,

body.home .content-area,
body.page-id-78 .content-area {

  margin: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  min-height: 0 !important;

  justify-content: flex-start !important;
  align-content: flex-start !important;
}


body.home #main-container article,
body.page-id-78 #main-container article,

body.home #main-container .entry-content,
body.page-id-78 #main-container .entry-content,

body.home #main-container .ct-container,
body.page-id-78 #main-container .ct-container,

body.home #main-container .ct-container-full,
body.page-id-78 #main-container .ct-container-full,

body.home #main-container .ct-content,
body.page-id-78 #main-container .ct-content {

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  min-height: 0 !important;
}


body.home .entry-content,
body.page-id-78 .entry-content {

  gap: 0 !important;
  row-gap: 0 !important;
}


body.home .entry-content > *,
body.page-id-78 .entry-content > * {

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


body.home .entry-content > .wp-block-html,
body.page-id-78 .entry-content > .wp-block-html {

  margin: 0 !important;
  padding: 0 !important;
}


body.home .entry-content > .wp-block-spacer,
body.page-id-78 .entry-content > .wp-block-spacer,

body.home .entry-content > p:empty,
body.page-id-78 .entry-content > p:empty {

  display: none !important;

  height: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


body.home .hero-section,
body.home .entry-header,

body.page-id-78 .hero-section,
body.page-id-78 .entry-header {

  display: none !important;
}


/* ============================================================
   2. HEADER — LOGO
   ============================================================ */

#header [data-row="middle"] .ct-container,
.ct-header [data-row="middle"] .ct-container,

#header [data-row="middle"] .ct-container-fluid,
.ct-header [data-row="middle"] .ct-container-fluid {

  padding-left: 16px !important;
  padding-right: 16px !important;
}


#header [data-id="logo"],
.ct-header [data-id="logo"],
.site-logo-container {

  margin-left: 0 !important;

  padding-left: 0 !important;
}


#header [data-id="logo"] img,
.ct-header [data-id="logo"] img,
.site-logo-container img {

  display: block !important;

  width: auto !important;

  max-width: 100% !important;

  object-fit: contain !important;

  object-position: left center !important;
}


/* ============================================================
   2A. AJUSTE EXCLUSIVO DESKTOP
   MAIS RESPIRO ENTRE TOPO E LOGO

   Não altera tablet nem celular.
   ============================================================ */

@media only screen and (min-width:1000px) {

  #header [data-id="logo"],
  .ct-header [data-id="logo"],
  .site-logo-container {

    transform: translateY(5px) !important;
  }

}


/* ============================================================
   3. NAVEGAÇÃO DESKTOP
   ============================================================ */

.rando-topnav {

  display: flex !important;

  align-items: center !important;
  justify-content: flex-end !important;

  gap: 6px !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


.rando-topnav .rando-nav-item {

  width: 67px !important;
  height: 56px !important;

  min-width: 67px !important;
  min-height: 56px !important;

  max-width: 67px !important;
  max-height: 56px !important;

  margin: 0 !important;
  padding: 5px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 3px !important;

  border-radius: 9px !important;

  background: transparent !important;

  color: #ffffff !important;

  text-decoration: none !important;

  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}


.rando-topnav .rando-nav-item svg {

  display: block !important;

  flex: 0 0 20px !important;

  width: 20px !important;
  height: 20px !important;

  min-width: 20px !important;
  min-height: 20px !important;

  max-width: 20px !important;
  max-height: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  fill: none !important;
  stroke: currentColor !important;

  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


.rando-topnav .rando-nav-item span {

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  font-size: 10px !important;
  line-height: 1 !important;
}


.rando-topnav .rando-nav-item:hover,
.rando-topnav .rando-nav-item:focus {

  color: var(--rando-yellow) !important;

  background: rgba(255,210,26,.07) !important;
}


.rando-topnav .rando-nav-item.is-active,
body.home .rando-topnav .rando-nav-inicio,
body.page-id-78 .rando-topnav .rando-nav-inicio {

  color: var(--rando-yellow) !important;

  background: rgba(255,210,26,.07) !important;
}


/* ============================================================
   4. MOBILE BAR
   ============================================================ */

.rando-mobilebar {

  display: none !important;
}


/* ============================================================
   5. MI ÁREA — DESKTOP
   ============================================================ */

.rando-area-head {

  position: relative !important;

  display: flex !important;

  align-items: flex-start !important;
  justify-content: space-between !important;

  gap: 18px !important;
}


.rando-area-heading {

  position: relative !important;

  z-index: 1;

  flex: 1 1 auto !important;

  min-width: 0 !important;

  max-width: calc(100% - 80px) !important;
}


.rando-athlete-greeting {

  margin: 8px 0 0 !important;

  line-height: 1.03 !important;
}


.rando-athlete-greeting > span {

  display: inline-flex !important;

  align-items: center !important;

  gap: 9px !important;

  min-width: 0 !important;
}


/* ============================================================
   6. BANDEIRAS
   ============================================================ */

.rando-athlete-flag {

  display: inline-block !important;

  flex: 0 0 auto !important;

  width: 27px !important;
  height: 19px !important;

  min-width: 27px !important;
  min-height: 19px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 2px !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;

  box-shadow: 0 0 0 1px rgba(0,0,0,.08);

  font-size: 0 !important;
  line-height: 0 !important;

  color: transparent !important;

  overflow: hidden !important;
}


.rando-athlete-flag[title="UY"] {
  background-image: url("https://flagcdn.com/w40/uy.png") !important;
}

.rando-athlete-flag[title="BR"] {
  background-image: url("https://flagcdn.com/w40/br.png") !important;
}

.rando-athlete-flag[title="AR"] {
  background-image: url("https://flagcdn.com/w40/ar.png") !important;
}

.rando-athlete-flag[title="CL"] {
  background-image: url("https://flagcdn.com/w40/cl.png") !important;
}

.rando-athlete-flag[title="PY"] {
  background-image: url("https://flagcdn.com/w40/py.png") !important;
}

.rando-athlete-flag[title="BO"] {
  background-image: url("https://flagcdn.com/w40/bo.png") !important;
}

.rando-athlete-flag[title="PE"] {
  background-image: url("https://flagcdn.com/w40/pe.png") !important;
}

.rando-athlete-flag[title="CO"] {
  background-image: url("https://flagcdn.com/w40/co.png") !important;
}

.rando-athlete-flag[title="EC"] {
  background-image: url("https://flagcdn.com/w40/ec.png") !important;
}

.rando-athlete-flag[title="VE"] {
  background-image: url("https://flagcdn.com/w40/ve.png") !important;
}

.rando-athlete-flag[title="US"] {
  background-image: url("https://flagcdn.com/w40/us.png") !important;
}

.rando-athlete-flag[title="FR"] {
  background-image: url("https://flagcdn.com/w40/fr.png") !important;
}

.rando-athlete-flag[title="ES"] {
  background-image: url("https://flagcdn.com/w40/es.png") !important;
}

.rando-athlete-flag[title="DE"] {
  background-image: url("https://flagcdn.com/w40/de.png") !important;
}

.rando-athlete-flag[title="IT"] {
  background-image: url("https://flagcdn.com/w40/it.png") !important;
}

.rando-athlete-flag[title="GB"] {
  background-image: url("https://flagcdn.com/w40/gb.png") !important;
}

.rando-athlete-flag[title="JP"] {
  background-image: url("https://flagcdn.com/w40/jp.png") !important;
}


/* ============================================================
   7. BOTÃO SAIR
   ============================================================ */

.rando-logout-form {

  position: relative !important;

  z-index: 3 !important;

  flex: 0 0 auto !important;

  margin: 0 !important;
}


.rando-logout-button {

  display: grid !important;

  place-items: center !important;

  width: 54px !important;
  height: 54px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 16px !important;

  opacity: 1 !important;
  visibility: visible !important;
}


.rando-logout-button svg {

  display: block !important;

  width: 24px !important;
  height: 24px !important;

  fill: none !important;

  stroke: currentColor !important;

  stroke-width: 1.8 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


/* ============================================================
   8. HOME PRINCIPAL
   ============================================================ */

body.home .ruy-home-app,
body.page-id-78 .ruy-home-app {

  width: min(100%,840px) !important;

  margin: 16px auto 0 !important;

  padding: 0 !important;

  position: relative !important;

  top: auto !important;

  transform: none !important;

  background: var(--rando-navy) !important;

  color: var(--rando-white) !important;

  font-family: inherit !important;
}


.ruy-home-app *,
.ruy-home-app *::before,
.ruy-home-app *::after {

  box-sizing: border-box !important;
}


.ruy-home-app a {

  text-decoration: none !important;
}


/* ============================================================
   9. HERO / CARROSSEL
   ============================================================ */

.ruy-home-hero {

  position: relative !important;

  width: 100% !important;

  height: 0 !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 56.25% 0 0 0 !important;

  overflow: hidden !important;

  background: var(--rando-navy) !important;
}


.ruy-home-slide {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0;

  background: var(--rando-navy) !important;
}


.ruy-home-slide img {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;

  object-position: center center !important;

  transform: none !important;

  border: 0 !important;

  background: var(--rando-navy) !important;
}


/* ============================================================
   10. CARROSSEL
   ============================================================ */

.ruy-slide-1 {

  animation: ruySlideOne 12s infinite;
}


.ruy-slide-2 {

  animation: ruySlideTwo 12s infinite;
}


@keyframes ruySlideOne {

  0%,44%,100% {

    opacity: 1;

    z-index: 2;

    pointer-events: auto;
  }

  50%,94% {

    opacity: 0;

    z-index: 1;

    pointer-events: none;
  }
}


@keyframes ruySlideTwo {

  0%,44%,100% {

    opacity: 0;

    z-index: 1;

    pointer-events: none;
  }

  50%,94% {

    opacity: 1;

    z-index: 2;

    pointer-events: auto;
  }
}


/* ============================================================
   11. INDICADORES
   ============================================================ */

.ruy-home-dots {

  position: absolute !important;

  z-index: 10 !important;

  left: 50% !important;

  bottom: 5px !important;

  transform: translateX(-50%) !important;

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none !important;
}


.ruy-dot {

  display: block !important;

  width: 6px;

  height: 6px;

  border-radius: 999px;

  background: rgba(255,255,255,.55);
}


.ruy-dot-1 {

  animation: ruyDotOne 12s infinite;
}


.ruy-dot-2 {

  animation: ruyDotTwo 12s infinite;
}


@keyframes ruyDotOne {

  0%,44%,100% {

    width: 18px;

    background: var(--rando-yellow);
  }

  50%,94% {

    width: 6px;

    background: rgba(255,255,255,.55);
  }
}


@keyframes ruyDotTwo {

  0%,44%,100% {

    width: 6px;

    background: rgba(255,255,255,.55);
  }

  50%,94% {

    width: 18px;

    background: var(--rando-yellow);
  }
}


/* ============================================================
   12. QUATRO ATALHOS PRINCIPAIS
   ============================================================ */

.ruy-feature-links {

  width: 100% !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  margin: 6px 0 10px !important;

  padding: 0 3px !important;

  display: grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  grid-auto-flow: row !important;

  grid-auto-rows: 42px !important;

  column-gap: 4px !important;

  row-gap: 4px !important;

  align-items: stretch !important;

  align-content: start !important;

  justify-items: stretch !important;

  justify-content: stretch !important;

  position: relative !important;

  z-index: 20 !important;
}


.ruy-feature-link {

  width: 100% !important;

  height: 42px !important;

  min-height: 42px !important;

  max-height: 42px !important;

  margin: 0 !important;

  padding: 4px 7px !important;

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  justify-content: flex-start !important;

  gap: 6px !important;

  border: 1px solid rgba(255,255,255,.17) !important;

  border-radius: 7px !important;

  background:
    linear-gradient(
      180deg,
      #18527c 0%,
      #123f63 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;

  color: #fff !important;

  text-decoration: none !important;

  overflow: hidden !important;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease !important;
}


.ruy-feature-link:visited {

  color: #fff !important;
}


.ruy-feature-link:hover,
.ruy-feature-link:focus {

  background:
    linear-gradient(
      180deg,
      #1d628f 0%,
      #174e76 100%
    ) !important;

  border-color: rgba(255,210,26,.55) !important;
}


.ruy-feature-icon {

  flex: 0 0 20px !important;

  width: 20px !important;
  height: 20px !important;

  min-width: 20px !important;
  min-height: 20px !important;

  max-width: 20px !important;
  max-height: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 6px !important;

  background: rgba(255,210,26,.09) !important;
}


.ruy-feature-icon svg {

  display: block !important;

  flex: 0 0 13px !important;

  width: 13px !important;
  height: 13px !important;

  min-width: 13px !important;
  min-height: 13px !important;

  max-width: 13px !important;
  max-height: 13px !important;

  margin: 0 !important;
  padding: 0 !important;

  fill: none !important;

  stroke: var(--rando-yellow) !important;

  stroke-width: 2 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


.ruy-feature-link strong {

  margin: 0 !important;
  padding: 0 !important;

  min-width: 0 !important;

  max-width: 100% !important;

  color: #fff !important;

  font-size: 12px !important;

  font-weight: 500 !important;

  line-height: 1.04 !important;

  letter-spacing: -.05px !important;

  white-space: nowrap !important;

  overflow: hidden !important;
}


/* ============================================================
   13. CORPO DA HOME
   ============================================================ */

body.home .ruy-home-body,
body.page-id-78 .ruy-home-body {

  width: 100% !important;

  margin: 0 !important;

  padding: 0 3px 3px !important;

  min-height: 0 !important;

  height: auto !important;

  background: var(--rando-navy) !important;
}


/* ============================================================
   14. GRUPOS
   ============================================================ */

body.home .ruy-home-body > .ruy-home-section,
body.page-id-78 .ruy-home-body > .ruy-home-section {

  width: 100% !important;

  min-width: 0 !important;

  min-height: 0 !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;

  display: grid !important;

  grid-template-columns: minmax(0,1fr) !important;

  grid-template-rows: auto auto !important;

  column-gap: 0 !important;

  row-gap: 5px !important;
}


body.home
.ruy-home-body > .ruy-home-section + .ruy-home-section,

body.page-id-78
.ruy-home-body > .ruy-home-section + .ruy-home-section {

  margin-top: 12px !important;
}


/* ============================================================
   15. TÍTULOS DAS SEÇÕES
   ============================================================ */

body.home .ruy-home-section h2,
body.page-id-78 .ruy-home-section h2 {

  width: 100% !important;

  height: 14px !important;

  min-height: 14px !important;

  max-height: 14px !important;

  margin: 0 !important;

  padding: 0 !important;

  display: flex !important;

  align-items: center !important;

  gap: 4px !important;

  color: #fff !important;

  font-size: 12.5px !important;

  font-weight: 700 !important;

  line-height: 14px !important;
}


body.home .ruy-home-section h2::before,
body.page-id-78 .ruy-home-section h2::before {

  content: "";

  display: block !important;

  flex: 0 0 3px !important;

  width: 3px !important;

  height: 11px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 5px !important;

  background:
    linear-gradient(
      180deg,
      var(--rando-celeste),
      var(--rando-yellow)
    ) !important;
}


/* ============================================================
   16. GRID DOS GRUPOS
   ============================================================ */

body.home .ruy-home-grid,
body.page-id-78 .ruy-home-grid {

  width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  display: grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  grid-auto-flow: row !important;

  grid-auto-rows: 34px !important;

  column-gap: 3px !important;

  row-gap: 3px !important;

  min-width: 0 !important;

  min-height: 0 !important;

  height: auto !important;
}


/* ============================================================
   17. CARDS
   ============================================================ */

body.home .ruy-home-card,
body.page-id-78 .ruy-home-card {

  width: 100% !important;

  height: 34px !important;

  min-height: 34px !important;

  max-height: 34px !important;

  margin: 0 !important;

  padding: 2px 6px !important;

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  justify-content: flex-start !important;

  gap: 6px !important;

  border: 1px solid var(--rando-line) !important;

  border-radius: 7px !important;

  background:
    linear-gradient(
      180deg,
      #154a70 0%,
      #103a59 100%
    ) !important;

  color: #fff !important;

  text-decoration: none !important;

  overflow: hidden !important;
}


body.home .ruy-home-card:hover,
body.home .ruy-home-card:focus,

body.page-id-78 .ruy-home-card:hover,
body.page-id-78 .ruy-home-card:focus {

  border-color: rgba(255,210,26,.55) !important;

  background: var(--rando-card-hover) !important;
}


body.home .ruy-home-card strong,
body.page-id-78 .ruy-home-card strong {

  margin: 0 !important;
  padding: 0 !important;

  min-width: 0 !important;

  color: #fff !important;

  font-size: 12px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;
}


/* ============================================================
   18. ÍCONES SOCIAIS
   ============================================================ */

.ruy-home-social,
.ruy-quick-icon {

  flex: 0 0 22px !important;

  width: 22px !important;
  height: 22px !important;

  min-width: 22px !important;
  min-height: 22px !important;

  max-width: 22px !important;
  max-height: 22px !important;
}


.ruy-home-social {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 6px !important;

  background: rgba(255,255,255,.05) !important;
}


.ruy-home-social svg {

  display: block !important;

  width: 15px !important;
  height: 15px !important;

  margin: 0 !important;
  padding: 0 !important;

  fill: none !important;

  stroke: currentColor !important;

  stroke-width: 1.8 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


.ruy-social-instagram {

  color: #ff7aac !important;
}


.ruy-social-strava {

  color: #fc6b35 !important;
}


.ruy-social-strava svg path {

  fill: currentColor !important;

  stroke: none !important;
}


.ruy-social-facebook {

  color: #77a8ff !important;
}


.ruy-social-facebook svg path {

  fill: currentColor !important;

  stroke: none !important;
}


.ruy-social-rwgps {

  color: var(--rando-celeste) !important;
}


/* ============================================================
   19. ÍCONES SABER MÁS
   ============================================================ */

.ruy-quick-icon {

  border-radius: 6px !important;

  background-color: rgba(255,210,26,.08) !important;

  background-position: center !important;

  background-repeat: no-repeat !important;

  background-size: 13px 13px !important;
}


.ruy-icon-rules {

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffd21a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l3 3v15H6Z'/%3E%3Cpath d='M14 3v4h4M9 11h6M9 15h6'/%3E%3C/g%3E%3C/svg%3E") !important;
}


.ruy-icon-people {

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffd21a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2'/%3E%3Cpath d='M3.5 20c.4-4 2.4-6 5.5-6s5.1 2 5.5 6M14 15c3-.6 5.5 1 6 4'/%3E%3C/g%3E%3C/svg%3E") !important;
}


.ruy-icon-book {

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffd21a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A3.5 3.5 0 0 1 7.5 2H12v18H7.5A3.5 3.5 0 0 0 4 23Z'/%3E%3Cpath d='M20 5.5A3.5 3.5 0 0 0 16.5 2H12v18h4.5A3.5 3.5 0 0 1 20 23Z'/%3E%3C/g%3E%3C/svg%3E") !important;
}


.ruy-icon-contact {

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffd21a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v12H8l-4 4Z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/g%3E%3C/svg%3E") !important;
}


.ruy-icon-award {

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19l1-5.8-4.3-4.1 5.9-.9L12 3Z' fill='none' stroke='%23ffd21a' stroke-width='2'/%3E%3C/svg%3E") !important;
}


/* ============================================================
   20. BADGES
   ============================================================ */

.ruy-title-badge {

  flex: 0 0 28px !important;

  width: 28px !important;
  height: 22px !important;

  min-width: 28px !important;
  min-height: 22px !important;

  max-width: 28px !important;
  max-height: 22px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border: 1px solid rgba(255,210,26,.78) !important;

  border-radius: 6px !important;

  color: var(--rando-yellow) !important;

  background: rgba(255,210,26,.06) !important;

  font-size: 8.5px !important;

  font-weight: 800 !important;

  line-height: 1 !important;
}


.ruy-title-badge-10000 {

  font-size: 7.5px !important;
}


/* ============================================================
   21. TABLET / MOBILE DA HOME
   ============================================================ */

@media only screen and (max-width:999px) {


  .rando-topnav {

    display: none !important;
  }


  .ct-header-trigger,
  [data-id="trigger"],
  [data-id*="trigger"] {

    display: none !important;
  }


  body.home .ruy-home-app,
  body.page-id-78 .ruy-home-app {

    width: 100% !important;

    margin: 12px auto 0 !important;

    padding: 0 !important;
  }


  .ruy-home-hero {

    width: 100% !important;

    height: 0 !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 56.25% 0 0 0 !important;
  }


  .ruy-home-slide,
  .ruy-home-slide img {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;
  }


  .ruy-home-slide img {

    object-fit: contain !important;

    object-position: center center !important;
  }


  /* ATALHOS MOBILE 2 × 2 */

  .ruy-feature-links {

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    margin: 6px 0 10px !important;

    padding: 0 4px !important;

    display: grid !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    grid-template-rows:
      repeat(2,44px) !important;

    grid-auto-flow: row !important;

    grid-auto-rows: 44px !important;

    column-gap: 4px !important;

    row-gap: 4px !important;

    align-content: start !important;

    justify-content: stretch !important;

    align-items: stretch !important;

    justify-items: stretch !important;

    position: relative !important;

    z-index: 20 !important;
  }


  .ruy-feature-link {

    width: 100% !important;

    height: 44px !important;

    min-height: 44px !important;

    max-height: 44px !important;

    margin: 0 !important;

    padding: 4px 7px !important;

    align-self: start !important;

    gap: 6px !important;

    overflow: hidden !important;
  }


  .ruy-feature-icon {

    flex: 0 0 21px !important;

    width: 21px !important;
    height: 21px !important;

    min-width: 21px !important;
    min-height: 21px !important;

    max-width: 21px !important;
    max-height: 21px !important;
  }


  .ruy-feature-icon svg {

    width: 13px !important;
    height: 13px !important;

    min-width: 13px !important;
    min-height: 13px !important;

    max-width: 13px !important;
    max-height: 13px !important;
  }


  .ruy-feature-link strong {

    min-width: 0 !important;

    max-width: calc(100% - 27px) !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 1.02 !important;

    letter-spacing: -.1px !important;

    white-space: nowrap !important;

    overflow: hidden !important;
  }


  .ruy-feature-link:nth-child(1) strong,
  .ruy-feature-link:nth-child(2) strong {

    font-size:
      clamp(
        10.2px,
        2.7vw,
        11.4px
      ) !important;

    letter-spacing: -.15px !important;
  }


  /* GRUPOS MOBILE */

  body.home .ruy-home-body,
  body.page-id-78 .ruy-home-body {

    margin: 0 !important;

    padding: 0 4px 2px !important;
  }


  body.home .ruy-home-body > .ruy-home-section,
  body.page-id-78 .ruy-home-body > .ruy-home-section {

    margin: 0 !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    grid-template-rows:
      auto auto !important;

    row-gap: 5px !important;
  }


  body.home
  .ruy-home-body > .ruy-home-section + .ruy-home-section,

  body.page-id-78
  .ruy-home-body > .ruy-home-section + .ruy-home-section {

    margin-top: 12px !important;
  }


  body.home .ruy-home-grid,
  body.page-id-78 .ruy-home-grid {

    margin: 0 !important;

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    grid-auto-flow: row !important;

    grid-auto-rows: 32px !important;

    column-gap: 4px !important;

    row-gap: 4px !important;
  }


  body.home .ruy-home-card,
  body.page-id-78 .ruy-home-card {

    height: 32px !important;

    min-height: 32px !important;

    max-height: 32px !important;

    padding: 1px 5px !important;

    gap: 5px !important;
  }


  body.home .ruy-home-card strong,
  body.page-id-78 .ruy-home-card strong {

    font-size: 11.5px !important;
  }


  .ruy-home-social,
  .ruy-quick-icon {

    flex-basis: 21px !important;

    width: 21px !important;
    height: 21px !important;

    min-width: 21px !important;
    min-height: 21px !important;

    max-width: 21px !important;
    max-height: 21px !important;
  }


  .ruy-title-badge {

    flex-basis: 27px !important;

    width: 27px !important;
    height: 21px !important;

    min-width: 27px !important;
    min-height: 21px !important;

    max-width: 27px !important;
    max-height: 21px !important;
  }
}


/* ============================================================
   22. MENU FIXO MOBILE
   ============================================================ */

@media only screen and (max-width:767px) {


  body {

    padding-bottom:
      calc(
        64px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  body .rando-mobilebar {

    display: grid !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    position: fixed !important;

    z-index: 9999999 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    top: auto !important;

    width: 100vw !important;

    height:
      calc(
        64px +
        env(safe-area-inset-bottom)
      ) !important;

    min-height:
      calc(
        64px +
        env(safe-area-inset-bottom)
      ) !important;

    max-height: none !important;

    margin: 0 !important;

    padding:
      0 0
      env(safe-area-inset-bottom)
      !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    background:
      rgba(10,48,79,.99) !important;

    border: 0 !important;

    border-top:
      1px solid rgba(255,255,255,.14) !important;

    box-shadow:
      0 -4px 14px rgba(0,0,0,.25) !important;

    overflow: visible !important;
  }


  body .rando-mobilebar-item {

    position: relative !important;

    width: 100% !important;

    height: 64px !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 5px 0 4px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    background: transparent !important;

    color: #eef4fb !important;

    text-decoration: none !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    line-height: 1 !important;
  }


  body .rando-mobilebar-item svg {

    display: block !important;

    flex: 0 0 23px !important;

    width: 23px !important;
    height: 23px !important;

    min-width: 23px !important;
    min-height: 23px !important;

    max-width: 23px !important;
    max-height: 23px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    fill: none !important;

    stroke: currentColor !important;

    stroke-width: 2 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }


  body .rando-mobilebar-item span {

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    line-height: 1 !important;
  }


  body .rando-mobilebar-item.is-active,
  body.home .rando-mobilebar .rando-nav-inicio,
  body.page-id-78 .rando-mobilebar .rando-nav-inicio {

    color: var(--rando-yellow) !important;

    background: rgba(255,210,26,.07) !important;
  }


  body .rando-mobilebar-item.is-active::before,
  body.home .rando-mobilebar .rando-nav-inicio::before,
  body.page-id-78 .rando-mobilebar .rando-nav-inicio::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 30px;

    height: 3px;

    border-radius: 999px;

    background: var(--rando-yellow);

    transform: translateX(-50%);
  }
}


/* ============================================================
   23. MI ÁREA MOBILE
   ============================================================ */

@media only screen and (max-width:767px) {


  .rando-my-area {

    width: calc(100vw - 12px) !important;

    max-width: calc(100vw - 12px) !important;

    box-sizing: border-box !important;

    margin-top: 8px !important;

    margin-bottom: 18px !important;

    margin-left:
      calc(50% - 50vw + 6px) !important;

    margin-right:
      calc(50% - 50vw + 6px) !important;

    padding: 18px 12px !important;
  }


  .rando-my-area .rando-area-panel {

    padding: 14px 10px !important;
  }


  .rando-my-area .rando-area-head {

    display: grid !important;

    grid-template-columns:
      minmax(0,1fr) auto !important;

    grid-template-rows:
      auto auto !important;

    column-gap: 10px !important;

    row-gap: 12px !important;

    align-items: center !important;

    padding: 12px 12px 14px !important;

    margin: 0 0 18px !important;
  }


  .rando-my-area .rando-area-heading {

    display: contents !important;
  }


  .rando-my-area .rando-public-kicker {

    grid-column: 1 !important;

    grid-row: 1 !important;

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 0 !important;

    padding: 0 !important;

    font-size: 19px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    letter-spacing: .06em !important;

    white-space: nowrap !important;
  }


  .rando-my-area .rando-public-kicker::before {

    width: 30px !important;

    height: 38px !important;

    flex: 0 0 30px !important;
  }


  .rando-my-area .rando-logout-form {

    position: static !important;

    grid-column: 2 !important;

    grid-row: 1 !important;

    justify-self: end !important;

    margin: 0 !important;
  }


  .rando-my-area .rando-logout-button {

    width: 50px !important;

    height: 50px !important;

    padding: 0 !important;

    border-radius: 15px !important;
  }


  .rando-my-area .rando-athlete-greeting {

    grid-column: 1 / -1 !important;

    grid-row: 2 !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 2px 0 0 !important;

    padding: 0 !important;

    font-size:
      clamp(
        19px,
        6.5vw,
        30px
      ) !important;

    font-weight: 800 !important;

    line-height: 1.03 !important;

    letter-spacing: -.025em !important;

    white-space: nowrap !important;
  }


  .rando-my-area .rando-athlete-greeting > span {

    display: flex !important;

    align-items: center !important;

    flex-wrap: nowrap !important;

    gap: 8px !important;

    width: 100% !important;

    white-space: nowrap !important;
  }


  .rando-my-area .rando-athlete-flag {

    width: 30px !important;

    height: 21px !important;

    min-width: 30px !important;

    min-height: 21px !important;
  }
}


/* ============================================================
   24. CELULARES ESTREITOS
   ============================================================ */

@media only screen and (max-width:420px) {


  body.home .ruy-home-card strong,
  body.page-id-78 .ruy-home-card strong {

    font-size: 11px !important;
  }


  body.home .ruy-home-section h2,
  body.page-id-78 .ruy-home-section h2 {

    font-size: 12px !important;
  }


  .ruy-feature-link {

    padding: 4px 6px !important;

    gap: 5px !important;
  }


  .ruy-feature-icon {

    flex-basis: 20px !important;

    width: 20px !important;

    min-width: 20px !important;

    max-width: 20px !important;
  }


  .ruy-feature-link:nth-child(1) strong,
  .ruy-feature-link:nth-child(2) strong {

    max-width:
      calc(100% - 25px) !important;

    font-size:
      clamp(
        9.7px,
        2.55vw,
        11px
      ) !important;

    letter-spacing: -.2px !important;
  }


  .ruy-feature-link:nth-child(3) strong,
  .ruy-feature-link:nth-child(4) strong {

    font-size: 11.8px !important;
  }
}


/* ============================================================
   25. SAFARI / WEBKIT
   ============================================================ */

@supports (-webkit-touch-callout:none) {


  .ruy-home-hero {

    aspect-ratio: auto !important;

    height: 0 !important;

    padding-top: 56.25% !important;
  }


  .ruy-home-slide,
  .ruy-home-slide img {

    position: absolute !important;

    width: 100% !important;

    height: 100% !important;
  }


  .ruy-home-slide img {

    object-fit: contain !important;
  }
}