:root {
  --tau-primary: #000000;
  --tau-secondary: #5C1833;
  --tau-text: #F5F5F5;
  --tau-accent: #D4AF37;
  --tau-background: #000000;
  --tau-surface: #151515;
  --tau-border: #3A3A3A;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--tau-background);
  color: var(--tau-text);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.68;
}

main,
section,
article,
figure,
img,
a,
button,
h1,
h2,
h3,
p,
figcaption {
  max-width: 100%;
}

.tau77-inicio-a,
.tau77-inicio-a section,
.tau77-inicio-a article,
.tau77-inicio-a figure,
.tau77-inicio-a div {
  min-width: 0;
}

.tau77-inicio-a {
  width: min(1220px, calc(100% - 40px));
  margin: 0 auto;
  padding: 40px 0 72px;
}

.tau77-inicio-a h1,
.tau77-inicio-a h2,
.tau77-inicio-a h3,
.tau77-inicio-a p,
.tau77-inicio-a a,
.tau77-inicio-a button,
.tau77-inicio-a figcaption {
  overflow-wrap: anywhere;
  word-break: normal;
}

.tau77-inicio-a h1,
.tau77-inicio-a h2,
.tau77-inicio-a h3 {
  margin-top: 0;
  line-height: 1.07;
  letter-spacing: -.03em;
}

.tau77-inicio-a h1 {
  margin-bottom: 24px;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.15;
}

.tau77-inicio-a h2 {
  margin-bottom: 22px;
  font-size: 30px;
  line-height: 1.18;
}

.tau77-inicio-a h3 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.25;
}

.tau77-inicio-a p {
  margin: 0 0 20px;
  color: #D8D8D8;
}

.tau77-inicio-a strong {
  color: var(--tau-accent);
}

.tau77-inicio-a a:not(.tau77-inicio-a__boton) {
  color: var(--tau-accent);
  text-underline-offset: 4px;
}

.tau77-inicio-a__apertura {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: clamp(38px, 6vw, 82px);
  align-items: center;
  min-height: 720px;
  padding: clamp(42px, 5.8vw, 80px);
  border: 1px solid var(--tau-border);
  border-radius: 40px;
  background:
    radial-gradient(circle at 14% 12%, rgba(92, 24, 51, .76), transparent 38%),
    linear-gradient(145deg, #0B0B0B, var(--tau-primary));
}

.tau77-inicio-a__etiqueta,
.tau77-inicio-a__indice {
  display: inline-flex;
  margin-bottom: 20px;
  color: var(--tau-accent);
  font-size: .81rem;
  font-weight: 860;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tau77-inicio-a__apertura-copy > p {
  max-width: 690px;
  font-size: clamp(1.04rem, 1.55vw, 1.23rem);
}

.tau77-inicio-a__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.tau77-inicio-a .tau77-inicio-a__boton,
.tau77-inicio-a .tau77-inicio-a__boton:link,
.tau77-inicio-a .tau77-inicio-a__boton:visited,
.tau77-inicio-a .tau77-inicio-a__boton:hover,
.tau77-inicio-a .tau77-inicio-a__boton:focus,
.tau77-inicio-a .tau77-inicio-a__boton:active {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 15px 27px;
  border: 1px solid var(--tau-accent);
  border-radius: 999px;
  color: #000000;
  font-weight: 880;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  visibility: visible;
  -webkit-text-fill-color: #000000;
}

.tau77-inicio-a .tau77-inicio-a__boton--oro,
.tau77-inicio-a .tau77-inicio-a__boton--oro:link,
.tau77-inicio-a .tau77-inicio-a__boton--oro:visited {
  background: var(--tau-accent);
  color: #000000;
  -webkit-text-fill-color: #000000;
}

.tau77-inicio-a .tau77-inicio-a__boton--borde,
.tau77-inicio-a .tau77-inicio-a__boton--borde:link,
.tau77-inicio-a .tau77-inicio-a__boton--borde:visited {
  background: transparent;
  color: var(--tau-text);
  -webkit-text-fill-color: var(--tau-text);
}

.tau77-inicio-a .tau77-inicio-a__boton--oro:hover,
.tau77-inicio-a .tau77-inicio-a__boton--oro:focus,
.tau77-inicio-a .tau77-inicio-a__boton--oro:active {
  background: #E8C85E;
  color: #000000;
  -webkit-text-fill-color: #000000;
  transform: translateY(-2px);
}

.tau77-inicio-a .tau77-inicio-a__boton--borde:hover,
.tau77-inicio-a .tau77-inicio-a__boton--borde:focus,
.tau77-inicio-a .tau77-inicio-a__boton--borde:active {
  background: var(--tau-secondary);
  color: var(--tau-text);
  -webkit-text-fill-color: var(--tau-text);
  transform: translateY(-2px);
}

.tau77-inicio-a .tau77-inicio-a__boton span,
.tau77-inicio-a .tau77-inicio-a__boton:hover span,
.tau77-inicio-a .tau77-inicio-a__boton:focus span,
.tau77-inicio-a .tau77-inicio-a__boton:active span {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  opacity: 1;
  visibility: visible;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.tau77-inicio-a .tau77-inicio-a__boton:focus-visible {
  outline: 3px solid var(--tau-text);
  outline-offset: 4px;
}

.tau77-inicio-a__imagen {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--tau-border);
  border-radius: 28px;
  background: var(--tau-surface);
}

.tau77-inicio-a__imagen img,
.tau77-inicio-a img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
}

.tau77-inicio-a__imagen--horizontal img {
  aspect-ratio: 16 / 9;
}

.tau77-inicio-a__imagen--vertical img {
  aspect-ratio: 4 / 5;
}

.tau77-inicio-a__imagen--panorama img {
  aspect-ratio: 3 / 2;
}

.tau77-inicio-a__imagen--retrato img {
  aspect-ratio: 3 / 4;
}

.tau77-inicio-a__imagen figcaption {
  padding: 13px 8px 3px;
  color: #BCBCBC;
  font-size: .88rem;
  text-align: center;
}

.tau77-inicio-a__atajos,
.tau77-inicio-a__juegos,
.tau77-inicio-a__partidos,
.tau77-inicio-a__bonos,
.tau77-inicio-a__movil,
.tau77-inicio-a__control,
.tau77-inicio-a__preguntas,
.tau77-inicio-a__cierre {
  margin-top: 32px;
  padding: clamp(36px, 5.7vw, 72px);
  border: 1px solid var(--tau-border);
  border-radius: 32px;
}

.tau77-inicio-a__atajos {
  display: grid;
  grid-template-columns: minmax(230px, .42fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 70px);
  background: var(--tau-surface);
}

.tau77-inicio-a__atajos-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tau77-inicio-a__atajos-lista article {
  padding: 24px;
  border: 1px solid var(--tau-border);
  border-radius: 22px;
  background: #090909;
}

.tau77-inicio-a__atajos-lista article > span {
  display: block;
  margin-bottom: 36px;
  color: var(--tau-accent);
  font-size: 2.4rem;
  font-weight: 920;
}

.tau77-inicio-a__atajos-lista p {
  margin-bottom: 16px;
}

.tau77-inicio-a__juegos {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: center;
  background: linear-gradient(135deg, #080808, #171011);
}

.tau77-inicio-a__juegos-cuadricula {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}

.tau77-inicio-a__juego {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--tau-border);
  border-radius: 20px;
  background: var(--tau-surface);
}

.tau77-inicio-a__juego--destacado {
  grid-column: 1 / -1;
  border-color: var(--tau-accent);
  background: linear-gradient(110deg, rgba(92, 24, 51, .76), var(--tau-surface));
}

.tau77-inicio-a__juego > span {
  font-size: 1.8rem;
}

.tau77-inicio-a__juego p {
  margin-bottom: 0;
}

.tau77-inicio-a__tipo {
  color: var(--tau-accent) !important;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tau77-inicio-a__partidos {
  background: #090909;
}

.tau77-inicio-a__partidos-cabecera {
  max-width: 850px;
  margin-bottom: 34px;
}

.tau77-inicio-a__partidos-contenido {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 18px;
  margin-bottom: 26px;
}

.tau77-inicio-a__partidos-puntos {
  display: grid;
  gap: 10px;
}

.tau77-inicio-a__partidos-puntos article {
  padding: 22px;
  border: 1px solid var(--tau-border);
  border-radius: 20px;
  background: var(--tau-surface);
}

.tau77-inicio-a__partidos-puntos article > span {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 1.55rem;
}

.tau77-inicio-a__partidos-puntos p {
  margin-bottom: 0;
}

.tau77-inicio-a__bonos {
  display: grid;
  grid-template-columns: minmax(240px, .38fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
  background: var(--tau-surface);
}

.tau77-inicio-a__bonos-sello {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-content: space-between;
  gap: 24px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid var(--tau-accent);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 12%, rgba(212, 175, 55, .22), transparent 34%),
    linear-gradient(145deg, #6B183B 0%, var(--tau-secondary) 58%, #361020 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

.tau77-inicio-a__bonos-icono {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(212, 175, 55, .55);
  border-radius: 50%;
  background: rgba(0, 0, 0, .24);
  font-size: 1.35rem;
}

.tau77-inicio-a__bonos-marca {
  display: block;
  margin-bottom: 12px;
  color: var(--tau-accent);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}

.tau77-inicio-a__bonos-sello p {
  margin-bottom: 0;
  color: var(--tau-text);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.45;
}

.tau77-inicio-a__bonos-copy {
  max-width: 780px;
}

.tau77-inicio-a__movil {
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
  gap: clamp(36px, 6vw, 82px);
  align-items: center;
  background: radial-gradient(circle at 82% 16%, rgba(92, 24, 51, .62), transparent 44%), #090909;
}

.tau77-inicio-a__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: clamp(36px, 6vw, 78px);
  background: var(--tau-surface);
}

.tau77-inicio-a__control-lista {
  display: grid;
  gap: 10px;
}

.tau77-inicio-a__control-lista article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--tau-border);
  border-radius: 18px;
  background: #090909;
}

.tau77-inicio-a__control-lista article > span {
  color: var(--tau-accent);
  font-size: 1.6rem;
  font-weight: 900;
}

.tau77-inicio-a__control-lista article h3,
.tau77-inicio-a__control-lista article p {
  grid-column: 2;
}

.tau77-inicio-a__control-lista article p {
  margin-bottom: 0;
}

.tau77-inicio-a__preguntas {
  background: linear-gradient(145deg, var(--tau-surface), #090909);
}

.tau77-inicio-a__preguntas-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tau77-inicio-a__preguntas-lista article {
  padding: 25px;
  border: 1px solid var(--tau-border);
  border-radius: 21px;
  background: #090909;
}

.tau77-inicio-a__preguntas-lista p {
  margin-bottom: 0;
}

.tau77-inicio-a__cierre {
  text-align: center;
  background:
    radial-gradient(circle at 50% 12%, rgba(92, 24, 51, .84), transparent 50%),
    #080808;
}

.tau77-inicio-a__cierre p {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  font-size: 1.12rem;
}

.tau77-inicio-a__cierre .tau77-inicio-a__boton {
  margin-top: 12px;
}

@media (max-width: 980px) {
  .tau77-inicio-a__apertura,
  .tau77-inicio-a__juegos,
  .tau77-inicio-a__movil,
  .tau77-inicio-a__control {
    grid-template-columns: 1fr;
  }

  .tau77-inicio-a__apertura {
    min-height: 0;
  }

  .tau77-inicio-a__atajos,
  .tau77-inicio-a__bonos {
    grid-template-columns: 1fr;
  }

  .tau77-inicio-a__partidos-contenido {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tau77-inicio-a {
    width: min(100% - 24px, 1220px);
    padding: 12px 0 36px;
  }

  .tau77-inicio-a h1 {
    font-size: 30px;
    line-height: 1.18;
  }

  .tau77-inicio-a h2 {
    font-size: 26px;
    line-height: 1.2;
  }

  .tau77-inicio-a h3 {
    font-size: 18px;
    line-height: 1.3;
  }

  .tau77-inicio-a__apertura,
  .tau77-inicio-a__atajos,
  .tau77-inicio-a__juegos,
  .tau77-inicio-a__partidos,
  .tau77-inicio-a__bonos,
  .tau77-inicio-a__movil,
  .tau77-inicio-a__control,
  .tau77-inicio-a__preguntas,
  .tau77-inicio-a__cierre {
    gap: 22px;
    margin-top: 16px;
    padding: 26px 20px;
    border-radius: 23px;
  }

  .tau77-inicio-a__acciones,
  .tau77-inicio-a__atajos-lista,
  .tau77-inicio-a__juegos-cuadricula,
  .tau77-inicio-a__preguntas-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tau77-inicio-a .tau77-inicio-a__boton,
  .tau77-inicio-a .tau77-inicio-a__boton:link,
  .tau77-inicio-a .tau77-inicio-a__boton:visited,
  .tau77-inicio-a .tau77-inicio-a__boton:hover,
  .tau77-inicio-a .tau77-inicio-a__boton:focus,
  .tau77-inicio-a .tau77-inicio-a__boton:active {
    width: 100%;
    max-width: 100%;
  }

  .tau77-inicio-a__juego--destacado {
    grid-column: auto;
  }

  .tau77-inicio-a__bonos-sello {
    max-width: 420px;
    min-height: 0;
    aspect-ratio: 4 / 3;
    padding: 24px;
  }

  .tau77-inicio-a__imagen img,
  .tau77-inicio-a img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }

  .tau77-inicio-a__imagen--horizontal img {
    aspect-ratio: 16 / 9;
  }

  .tau77-inicio-a__imagen--vertical img {
    aspect-ratio: 4 / 5;
  }

  .tau77-inicio-a__imagen--panorama img {
    aspect-ratio: 3 / 2;
  }

  .tau77-inicio-a__imagen--retrato img {
    aspect-ratio: 3 / 4;
  }
}