@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unbounded:wght@200..900&display=swap');

@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;font-optical-sizing:auto;src:url(https://gauchazh.clicrbs.com.br//static/fonts/source-serif4/source-serif4.woff2) format('woff2')}@font-face{font-display:swap;font-family:'IBM Plex Sans';font-style:normal;font-weight:400;src:url(https://gauchazh.clicrbs.com.br//static/fonts/ibm-plex-sans/ibm-plex-sans-regular.woff2) format('woff2')}@font-face{font-display:swap;font-family:'IBM Plex Sans';font-style:normal;font-weight:500;src:url(https://gauchazh.clicrbs.com.br//static/fonts/ibm-plex-sans/ibm-plex-sans-500.woff2) format('woff2')}@font-face{font-display:swap;font-family:'IBM Plex Sans';font-style:normal;font-weight:600;src:url(https://gauchazh.clicrbs.com.br//static/fonts/ibm-plex-sans/ibm-plex-sans-600.woff2) format('woff2')}

/* ====================================
   RESET & VARIABLES
   ==================================== */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}

:root {
  --yellow:           #ffcc00;
  --yellow--dark:     #d7af00;
  --yellow-brown:     #948135;
  --yellow-gold:      #E0C451;
  --black:            #222;
  --white:            #fff;
  --light--gray:      #eee;
  --gray:             #bbb;
  --dark--gray:       #707070;

  --violence:         #ad46ff;
  --violence-light:   #c986ff;
  --violence-dark:    #562082;

  --rt-color-success: #8dc572;
  --rt-color-error:   #be6464;
  --rt-color-warning: #f0ad4e;
  --rt-color-info:    #337ab7;

  --purple--zh2:        #831F82;
  --green--esporte:     #67AD2F;
  --green--vida:        #00998C;
  --orange--donna:      #EC6608;
  --red--donna:         #E50051;
  --purple--donna:      #494495;
  --ocre--destemperados:#af4b2b;

  --gremio:       #099ae9;
  --gremio--dark: #0f3059;
  --gremio--light:#0d80bf;
  --inter:        #e5050f;
  --inter-dark:   #8F0E1D;
  --inter--light: #f14b45;

  --rosa:         #E051D6;
  --ciano-verde:  #51E0D1;
  --verde-musgo:  #618B87;
  --marrom-cinza: #615E53;
  --vinho-cinza:  #615360;
  --azul-roxo:    #6265A1;
  --cereja:       #E05451;

  /* Transition defaults */
  --t-fast:   0.2s ease;
  --t-medium: 0.35s ease;
  --t-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.material-symbols-sharp {
  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}

/* ====================================
   BASE
   ==================================== */

body {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}

main.main-container {
  padding: 0 .2rem;
}

main.main-container p {
  padding: .5rem 0;
  color: #444;
  font-size: .9rem;
  line-height: 1.55;
}

/* ====================================
   TITLE
   ==================================== */

.title {
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 1rem;
  font-family: 'Lato', sans-serif;
  font-style: normal;
}

.title h1 {
  font-size: 1.5rem;
  padding: .2rem 0;
  font-weight: 900;
  line-height: 1.3;
}

.title::before {
  content: '';
  width: 30%;
  max-width: 100px;
  display: block;
  border-top: 8px solid var(--yellow);
}

.title::after {
  content: '';
  width: 30%;
  max-width: 100px;
  display: block;
  border-bottom: 1px solid var(--gray);
}

/* ====================================
   HELPERS
   ==================================== */

.bold       { font-weight: 600; }
.hairline   { font-weight: 300; }
.uppercase  { text-transform: uppercase; }

.legenda {
  font-family: 'IBM Plex Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: .8rem;
  color: var(--light--gray);
  padding: 1rem 0;
}

.legenda.instrucao {
  color: var(--light--gray);
  margin-bottom: .4rem;
  letter-spacing: .02em;
}

/* ====================================
   CONTAINER INFO (purple box)
   ==================================== */

.container-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  padding: 1.25rem 1rem 1.5rem;
  margin: .75rem auto 1rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, var(--violence-dark) 0%, #3a1257 100%);
  box-shadow: 0 8px 32px rgba(86, 32, 130, 0.28);
}

.disclaimer {
  margin-bottom: .75rem;
}

.disclaimer h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.disclaimer-icon {
  font-size: 1.1rem;
}

/* ====================================
   BUTTONS
   ==================================== */

.container-buttons {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}

.NavigationBig,
.NavigationSmall {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 100%;
}

@media screen and (min-width: 480px) {
  .NavigationBig               { flex-direction: row; }
  .NavigationSmall             { flex-direction: row; flex-wrap: wrap; }
  .NavigationSmall .btn-aba    { width: calc(50% - .2rem); }
}

@media screen and (min-width: 640px) {
  .NavigationSmall             { flex-wrap: nowrap; }
  .NavigationSmall .btn-aba    { width: auto; }
}

/* ── Botão base (mobile: linha — imagem | texto) ── */
.btn-aba {
  flex: 1;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: .85rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);

  display: flex;
  flex-direction: row;          /* mobile: imagem + texto lado a lado */
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: .65rem .75rem;
  min-height: 72px;

  color: var(--white);
  text-align: left;
  text-decoration: none;
  transition: background var(--t-fast),
              border-color var(--t-fast),
              transform var(--t-spring),
              box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}

/* ── Botão desktop: coluna — imagem em cima, texto embaixo ── */
@media screen and (min-width: 480px) {
  .btn-aba {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .75rem .5rem;
    min-height: 90px;
    gap: 1rem;
  }
  /* .NavigationBig .btn-aba {
    min-height: 110px;
  } */
}

/* Shimmer layer on hover */
.btn-aba::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.btn-aba:hover::before {
  transform: translateX(100%);
}

.btn-aba:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 204, 0, 0.6);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.btn-aba:active {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition-duration: 0.1s;
}

.btn-aba:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/* .NavigationBig .btn-aba {
  min-height: 110px;
} */

.btn-icon {
  font-size: 1.6rem;
  color: var(--yellow);
  line-height: 1;
  transition: transform var(--t-spring);
}

.btn-aba:hover .btn-icon {
  transform: scale(1.15) rotate(-5deg);
}

.btn-img {
  /* mobile: metade do botão */
  flex: 1 1 50%;
  width: 50%;
  height: 60px;
  object-fit: contain;
  transition: transform var(--t-spring);
  border-radius: .5rem;
}

@media screen and (min-width: 480px) {
  .btn-img {
    flex: 0 0 auto;
    width: auto;
    height: 60px;
  }
}

.btn-aba:hover .btn-img {
  transform: scale(1.15);
}

.btn-label {
  /* mobile: metade do botão, texto à esquerda */
  flex: 1 1 50%;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* alinha à esquerda no mobile */
  gap: .15rem;
  padding-left: .6rem;
}

@media screen and (min-width: 480px) {
  .btn-label {
    flex: 0 0 auto;
    align-items: center;        /* centraliza no desktop */
    padding-left: 0;
    text-align: center;
  }
}

.btn-label strong {
  font-size: .8rem;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: .02em;
}

/* ====================================
   MODAL OVERLAY
   ==================================== */

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 0, 40, 0.65);
  backdrop-filter: blur(3px);
  z-index: 1000;

  /* Scroll no overlay — funciona em iOS e Android */
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

  /* Centraliza o card; se for mais alto que a tela, o scroll cuida */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1rem;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;   /* não bloqueia cliques na página quando fechado */
  transition: opacity var(--t-medium), visibility var(--t-medium);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;   /* só intercepta eventos quando aberto */
}

/* ====================================
   MODAL CONTAINER
   ==================================== */

.modal-container {
  background: var(--white);
  border-radius: 1.25rem;
  width: 100%;
  max-width: 560px;
  overflow: visible;        /* conteúdo não é limitado — overlay scrolla */
  position: relative;
  padding: 2rem 1.5rem;
  margin: auto;             /* centraliza quando modal < altura da tela */
  flex-shrink: 0;

  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: transform var(--t-spring), opacity var(--t-medium);

  box-shadow: 0 8px 48px rgba(86, 32, 130, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.modal-overlay.active .modal-container {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-container::before {
  display: none;
}

/* ====================================
   MODAL CLOSE BUTTON
   ==================================== */

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--light--gray);
  color: var(--dark--gray);
  cursor: pointer;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-spring);
  z-index: 10;
}

.modal-close:hover {
  background: var(--violence-dark);
  color: var(--white);
  transform: scale(1.1) rotate(90deg);
}

/* ====================================
   MODAL HEADER
   ==================================== */

.modal-header {
  padding-bottom: .75rem;
  margin-bottom: 1rem;
  padding-right: 2.5rem;
  border-bottom: 3px solid var(--yellow);
  position: relative;
}

.modal-header::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 3px;
  background: var(--violence-light);
  animation: none;
}

.modal-overlay.active .modal-header::before {
  animation: headerLine 0.6s ease 0.2s forwards;
}

@keyframes headerLine {
  from { width: 0; }
  to   { width: 40%; }
}

.modal-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--violence-dark);
  font-family: 'Lato', sans-serif;
  line-height: 1.3;
}

/* ====================================
   MODAL BODY
   ==================================== */

.modal-body {
  font-size: .88rem;
  line-height: 1.65;
  color: #444;
  animation: fadeInUp 0.4s ease 0.15s both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-body p {
  margin-bottom: .75rem;
}

.modal-body p:last-child {
  margin-bottom: 0;
}

.modal-body ul {
  padding-left: 1.1rem;
  margin-bottom: .75rem;
}

.modal-body ul li {
  list-style: disc;
  margin-bottom: .5rem;
}

.modal-body h4 {
  font-weight: 800;
  color: var(--violence-dark);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 1.1rem 0 .5rem;
  padding-left: .6rem;
  border-left: 3px solid var(--yellow);
}

.modal-body a {
  color: var(--violence-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(86, 32, 130, 0.35);
  text-underline-offset: 2px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}

.modal-body a:hover {
  color: var(--violence-light);
  text-decoration-color: var(--violence-light);
}

.modal-body strong {
  font-weight: 700;
  color: #222;
}

/* Scrollbar styling */
.modal-container::-webkit-scrollbar { width: 5px; }
.modal-container::-webkit-scrollbar-track { background: transparent; }
.modal-container::-webkit-scrollbar-thumb {
  background: var(--violence-light);
  border-radius: 3px;
}

/* ====================================
   TAB NAVIGATION
   ==================================== */

.tab-nav {
  display: flex;
  gap: .35rem;
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: .85rem;
  padding: .3rem;
}

.tab-btn {
  flex: 1;
  padding: .6rem .4rem;
  border: none;
  border-radius: .65rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: .75rem;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.tab-btn--active {
  background: var(--yellow);
  color: var(--black);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.tab-btn:hover:not(.tab-btn--active) {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

/* ====================================
   TAB PANELS
   ==================================== */

.tab-panel--hidden {
  display: none;
}

/* ====================================
   RULER / THERMOMETER
   ==================================== */

.ruler {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
}

.ruler-item {
  display: flex;
  align-items: stretch;
}

/* ── Left: dot + connector ── */
.ruler-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 28px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.ruler-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  position: relative;
  z-index: 2;
  transition: transform var(--t-spring);
}

.ruler-item:hover .ruler-dot {
  transform: scale(1.45);
}

.ruler-segment {
  width: 4px;
  flex: 1;
  min-height: 6px;
}

.ruler-item:last-child .ruler-segment {
  display: none;
}

/* ── Right: expandable row ── */
.ruler-right {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: .5rem;
  padding: .4rem .6rem .65rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  cursor: default;
  transform-origin: left center;
  transition: transform .25s ease, opacity .25s ease;
}

.ruler-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.ruler-item:last-child .ruler-right {
  padding-bottom: .35rem;
}

.ruler:hover .ruler-right {
  transform: scale(0.95);
  opacity: .35;
}

.ruler-item:hover .ruler-right {
  transform: scale(1.03);
  opacity: 1 !important;
}

/* Sweeping bar background on hover */
.ruler-right::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--item-color, #ffcc00);
  opacity: .14;
  border-radius: .5rem;
  transition: width .42s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 0;
}

.ruler-item:hover .ruler-right::before {
  width: 100%;
}

.ruler-right::after {
  content: '';
  position: absolute;
  top: 0; left: 5px; right: 5px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--item-color, #ffcc00);
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
  z-index: 2;
}

.ruler-item:hover .ruler-right::after {
  opacity: 1;
}

.ruler-pct {
  font-size: 1rem;
  font-weight: 900;
  font-family: 'Lato', sans-serif;
  line-height: 1.2;
  color: var(--item-color, #ffcc00);
  flex-shrink: 0;
  transition: transform var(--t-fast);
}

.ruler-item:hover .ruler-pct {
  transform: scale(1.08);
  transform-origin: left center;
}

.ruler-tag {
  font-size: .58rem;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  color: var(--violence-light);
  border: 1px solid var(--item-color, #ffcc00);
  background: rgba(255, 255, 255, .06);
  padding: .15rem .45rem;
  border-radius: 999px;
  line-height: 1.4;
  opacity: .75;
  transition: opacity var(--t-fast), background var(--t-fast);
}

.ruler-item:hover .ruler-tag {
  opacity: 1;
  color: var(--white);
  background: var(--item-color, #ffcc00);
}

.ruler-text {
  font-size: .78rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.55;
  position: relative;
  z-index: 1;
  font-family: 'IBM Plex Sans', sans-serif;
  transition: font-size .25s ease, color .2s ease;
}

.ruler-item:hover .ruler-text {
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
}

.ruler-text ul {
  padding-left: 1rem;
}

.ruler-text ul li {
  list-style: disc;
  margin-bottom: .2rem;
}

.ruler-text ul li:last-child {
  margin-bottom: 0;
}

.ruler-text strong {
  font-weight: 700;
  color: rgba(255, 255, 255, .95);
}