body {

margin: 0;

font-family: Arial, sans-serif;

background-color: #F3E4C3;

color: #5A432A;

opacity: 1;

transition: opacity 0.5s ease;

}

body.desvanecer {

opacity: 0;

}


/* =========================================================
   ENCABEZADO
========================================================= */

header {

text-align: center;

padding: 35px 20px 25px;

}

h1 {

margin: 0;

font-size: 46px;

letter-spacing: 5px;

color: #5A351F;

}

h2 {

margin: 2px 0 0 0;

font-size: 24px;

font-weight: normal;

color: #8A6845;

}

header p {

margin: 2px 0 0 0;

font-size: 17px;

color: #A0805A;

}


/* =========================================================
   SEPARADOR
========================================================= */

.separador {

width: 90%;

max-width: 1100px;

height: 2px;

margin: 0 auto;

background-color: #8A6845;

}


/* =========================================================
   MENU PRINCIPAL
========================================================= */

.menu {

width: 90%;

max-width: 1100px;

margin: 0 auto;

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

padding: 15px 0;

}

.menu > a,

.menu > .menu-desplegable > button {

width: 100%;

box-sizing: border-box;

border: none;

background-color: #8A6845;

color: #FFF9EC;

padding: 12px 18px;

text-decoration: none;

font-size: 15px;

cursor: pointer;

border-radius: 5px;

text-align: center;

}

.menu > a:hover,

.menu-desplegable > button:hover {

background-color: #5A351F;

}


/* =========================================================
   MENU DESPLEGABLE
========================================================= */

.menu-desplegable {

position: relative;

width: 100%;

}

.menu-desplegable button {

display: block;

}

.submenu {

display: none;

position: absolute;

top: 100%;

left: 0;

width: 100%;

background-color: #FFF9EC;

border: 1px solid #8A6845;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

z-index: 10;

}

.submenu a {

display: block;

width: 100%;

box-sizing: border-box;

background-color: #FFF9EC;

color: #5A351F;

padding: 12px 15px;

text-decoration: none;

font-size: 14px;

border-radius: 0;

}

.submenu a:hover {

background-color: #D4B883;

color: #5A351F;

}

.menu-desplegable:hover .submenu {

display: block;

}


/* =========================================================
   TARJETAS PRINCIPALES DEL INDEX
========================================================= */

.contenedor {

width: 90%;

max-width: 1100px;

margin: 30px auto;

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

}

.tarjeta {

min-height: 160px;

background-color: #E2C99C;

border: 2px solid #8A6845;

border-radius: 10px;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

text-decoration: none;

color: #5A351F;

transition: 0.3s;

}

.tarjeta:hover {

transform: translateY(-5px);

background-color: #D4B883;

}

.tarjeta h3 {

margin: 20px;

}


/* =========================================================
   BLOQUE DEPORTES
========================================================= */

.bloque-deportes {

width: 90%;

max-width: 1100px;

margin: 30px auto 50px;

padding: 30px;

box-sizing: border-box;

background-color: #E2C99C;

border: 2px solid #8A6845;

border-radius: 10px;

}

.bloque-deportes > h2 {

margin: 0 0 25px 0;

padding: 14px;

text-align: center;

background-color: #8A6845;

color: #FFF9EC;

font-size: 22px;

font-weight: normal;

letter-spacing: 2px;

border-radius: 5px;

}


/* =========================================================
   TARJETAS DEPORTIVAS
========================================================= */

.deportes-contenedor {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

}

.deporte-tarjeta {

min-height: 160px;

background-color: #F3E4C3;

border: 2px solid #8A6845;

border-radius: 8px;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

text-decoration: none;

color: #5A351F;

transition: 0.3s;

}

.deporte-tarjeta:hover {

transform: translateY(-5px);

background-color: #D4B883;

}

.deporte-tarjeta h3 {

margin: 20px;

}


/* =========================================================
   TORNEOS - RUN - GIMNASIO
========================================================= */

.torneos-contenedor {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

}

.torneo-tarjeta {

background-color: #F3E4C3;

border: 2px solid #8A6845;

border-radius: 8px;

padding: 15px;

box-sizing: border-box;

text-align: center;

display: flex;

flex-direction: column;

align-items: center;

gap: 12px;

transition: 0.3s;

}

.torneo-tarjeta:hover {

transform: translateY(-5px);

background-color: #D4B883;

}

.torneo-tarjeta h3 {

margin: 0;

color: #5A351F;

font-size: 18px;

font-weight: bold;

}

.flasher-torneo {

width: 100%;

height: 180px;

object-fit: cover;

border-radius: 5px;

display: block;

}


/* =========================================================
   BOTON INSCRIPCION
========================================================= */

.boton-inscripcion {

width: 100%;

box-sizing: border-box;

background-color: #8A6845;

color: #FFF9EC;

padding: 11px 15px;

border-radius: 5px;

text-decoration: none;

font-size: 14px;

transition: 0.3s;

}

.boton-inscripcion:hover {

background-color: #5A351F;

}


/* =========================================================
   BOTON FOTOS
========================================================= */

.fotos-torneo {

width: 100%;

box-sizing: border-box;

background-color: #8A6845;

color: #FFF9EC;

padding: 11px 15px;

border-radius: 5px;

text-decoration: none;

font-size: 14px;

transition: 0.3s;

}

.fotos-torneo:hover {

background-color: #5A351F;

}


/* =========================================================
   LISTA DE JUGADORES
========================================================= */

.lista-jugadores {

width: 100%;

display: flex;

flex-direction: column;

gap: 10px;

}

.jugador {

background-color: #F3E4C3;

border: 1px solid #8A6845;

border-radius: 6px;

padding: 14px 18px;

display: flex;

align-items: center;

color: #5A351F;

font-size: 16px;

box-sizing: border-box;

}

.jugador span:first-child {

flex: 1;

}


/* =========================================================
   ESTRELLAS DE JUGADORES
========================================================= */

.estrellas {

width: 90px;

text-align: right;

font-size: 18px;

letter-spacing: 3px;

white-space: nowrap;

color: #B88932;

}


/* =========================================================
   BOTON CONTACTO
========================================================= */

.jugador .contacto {

width: 90px;

padding: 8px 10px;

background-color: #8A6845;

color: #FFF9EC;

border-radius: 5px;

text-decoration: none;

text-align: center;

font-size: 12px;

box-sizing: border-box;

transition: 0.3s;

}

.jugador .contacto:hover {

background-color: #5A351F;

}


/* =========================================================
   TITULO DE SECCION
========================================================= */

.titulo-seccion {

width: 100%;

box-sizing: border-box;

margin: 0 0 25px 0;

padding: 14px;

text-align: center;

background-color: #8A6845;

color: #FFF9EC;

font-size: 22px;

font-weight: normal;

letter-spacing: 2px;

border-radius: 5px;

}


/* =========================================================
   CONTRIBUCIONES
========================================================= */

.contribucion {

gap: 15px;

}

.barra-contribucion {

flex: 1;

height: 18px;

min-width: 100px;

background-color: #F3E4C3;

border: 1px solid #A0805A;

border-radius: 6px;

overflow: hidden;

box-sizing: border-box;

}

.nivel-contribucion {

height: 100%;

background-color: #8A6845;

border-radius: 5px;

box-sizing: border-box;

}


/* =========================================================
   INDUMENTARIA
========================================================= */

.foto-indumentaria {

width: 100%;

height: 180px;

overflow: hidden;

border-radius: 5px;

}

.foto-indumentaria img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

}

.nombre-indumentaria {

width: 100%;

box-sizing: border-box;

background-color: #8A6845;

color: #FFF9EC;

text-align: center;

padding: 11px 15px;

border-radius: 5px;

font-weight: bold;

letter-spacing: 1px;

}

.contacto-indumentaria {

width: 100%;

min-height: 180px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

gap: 15px;

}

.icono-whatsapp {

font-size: 42px;

color: #8A6845;

}


/* =========================================================
   SANTIAGO DEL ESTERO
   MISMO PATRON VISUAL QUE INDUMENTARIA
========================================================= */

.santiago-contenedor {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

}

.santiago-tarjeta {

min-height: 180px;

background-color: #F3E4C3;

border: 2px solid #8A6845;

border-radius: 8px;

padding: 15px;

box-sizing: border-box;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

text-decoration: none;

color: #5A351F;

transition: 0.3s;

overflow: hidden;

}

.santiago-tarjeta:hover {

transform: translateY(-5px);

background-color: #D4B883;

}

.santiago-tarjeta h3 {

margin: 0;

color: #5A351F;

font-size: 18px;

font-weight: bold;

letter-spacing: 1px;

}


/* =========================================================
   FOTOS DE SANTIAGO DEL ESTERO
========================================================= */

.foto-santiago {

width: 100%;

height: 180px;

overflow: hidden;

border-radius: 5px;

}

.foto-santiago img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

}


/* =========================================================
   PIE DE PAGINA
========================================================= */

footer {

margin-top: 50px;

background-color: #5A351F;

color: #F3E4C3;

text-align: center;

padding: 35px 20px;

}

.footer-contenido {

width: 90%;

max-width: 1100px;

margin: 0 auto;

}

footer p {

margin: 6px 0;

font-size: 13px;

color: #F3E4C3;

}

.footer-linea {

width: 60%;

max-width: 500px;

height: 1px;

margin: 20px auto;

background-color: #B88932;

}

footer .copyright {

font-size: 13px;

color: #F3E4C3;

}


/* =========================================================
   TABLETS Y CELULARES
========================================================= */

@media (max-width: 700px) {

.menu {

grid-template-columns: 1fr;

gap: 10px;

}

.menu-desplegable {

width: 100%;

}

.submenu {

position: static;

width: 100%;

}

.contenedor {

grid-template-columns: 1fr;

}

.bloque-deportes {

width: 90%;

padding: 20px;

}

.deportes-contenedor {

grid-template-columns: 1fr;

}

.torneos-contenedor {

grid-template-columns: 1fr;

}

.flasher-torneo {

height: auto;

}

h1 {

font-size: 36px;

}

h2 {

font-size: 21px;

}

.jugador {

padding: 13px 14px;

}

.estrellas {

width: 90px;

font-size: 17px;

}

.jugador .contacto {

width: 85px;

font-size: 11px;

padding: 8px 6px;

}


/* =====================================================
   BARRAS DE CONTRIBUCIONES - CELULAR
===================================================== */

.contribucion {

gap: 10px;

}

.barra-contribucion {

min-width: 80px;

height: 16px;

}

.nivel-contribucion {

height: 100%;

}


/* =====================================================
   INDUMENTARIA - CELULAR
===================================================== */

.foto-indumentaria {

height: auto;

aspect-ratio: 16 / 10;

}

.contacto-indumentaria {

min-height: 150px;

}

.icono-whatsapp {

font-size: 36px;

}


/* =====================================================
   SANTIAGO DEL ESTERO - CELULAR
===================================================== */

.santiago-contenedor {

grid-template-columns: 1fr;

gap: 15px;

}

.santiago-tarjeta {

min-height: 180px;

}

.foto-santiago {

height: auto;

aspect-ratio: 16 / 10;

}




}