.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: #e44c65;
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* .team-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
  }
  
  .card {
    background-color: #fff;
    border: 4px solid #e44c65; 
    border-radius: 10px;
    width: 250px;
    text-align: center;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
  }
  
  .card:hover {
    transform: translateY(-5px);
  }
  
  .card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
  }
  
  .card h3 {
    margin: 0.5rem 0;
    color: #333;
  }
  
  .card p {
    color: #666;
    font-size: 0.9rem;
  }
  

   */

   .team-container {
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro y opaco */
    border: 2px solid white; /* Línea blanca alrededor */
    padding: 2rem;
    margin: 2rem;
    border-radius: 12px;
  }
  
  .section-title {
    color: white;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 600;
  }
  
  .team-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }
  
  .card {
    background-color: #fff;
    border: 4px solid #e44c65; /* Puedes cambiarlo por otro color de tu plantilla */
    border-radius: 10px;
    width: 250px;
    text-align: center;
    padding: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
  }
  
  .card:hover {
    transform: translateY(-5px);
  }
  
  .card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
  }
  
  .card h3 {
    margin: 0.5rem 0;
    color: #333;
  }
  
  .card p {
    color: #666;
    font-size: 0.9rem;
  }
  

  .clubes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2rem;
    justify-items: center;
    padding: 1rem;
  }
  
  .clubes-grid .club-logo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-sizing: border-box;
    object-fit: contain;
    padding: 20px;
    transition: transform 0.5s ease;
    box-shadow: 0 0 0 3px #e44c65; /* borde temático sutil */
    background-color: white;
  }
  
  .clubes-grid .club-logo:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px #e44c65;
  }

  .clubes-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
  }

  .club-nombre {
    color: #ddd;
    font-weight: 600;
    text-align: center;
  }


  .carousel-container {
    display: flex;
    align-items: center;
    position: relative;
    overflow-x: hidden;
    margin: 2rem 0;
  }
  
  .carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 1rem 0;
  }
  
  .carousel-track img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    scroll-snap-align: start;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  
  .carousel-track img:hover {
    transform: scale(1.05);
  }
  
  .carousel-btn {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease;
  }
  
  .carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  .carousel-btn.prev {
    margin-right: 1rem;
  }
  
  .carousel-btn.next {
    margin-left: 1rem;
  }

  
  .lightbox {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .lightbox-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 10px white;
  }
  
  .lightbox .close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
  }

  .close{
    margin-top: 15px;
  }

  .rules-section {
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid white;
    padding: 2rem;
    margin: 2rem;
    border-radius: 12px;
    color: #ddd;
  }

  .rules-section h2, .rules-section h3 {
    color: white;
  }

  .rules-section a {
    color: #e44c65;
  }

  .rules-toc {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .rules-toc li a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid #e44c65;
    border-radius: 20px;
    text-decoration: none;
  }

  .rules-toc li a:hover {
    background-color: #e44c65;
    color: white;
  }

  .gesture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .gesture-card {
    background-color: rgba(255, 255, 255, 0.06);
    border-left: 4px solid #e44c65;
    border-radius: 6px;
    padding: 1rem 1.25rem;
  }

  .gesture-card h4 {
    color: #e44c65;
    margin: 0 0 0.5rem 0;
  }

  .gesture-card p {
    margin: 0;
    font-size: 0.9rem;
    color: #ccc;
  }

  .rules-note {
    font-size: 0.85rem;
    font-style: italic;
    color: #aaa;
    border-top: 1px dashed #555;
    padding-top: 1rem;
    margin-top: 1.5rem;
  }

  .ibsa-section {
    background-color: rgba(228, 76, 101, 0.12);
    border: 2px solid #e44c65;
    padding: 2rem;
    margin: 2rem;
    border-radius: 12px;
    color: #eee;
  }

  .ibsa-section h2, .ibsa-section h3 {
    color: white;
  }

  .ibsa-section ul {
    padding-left: 1.2rem;
  }

  .ibsa-section li {
    margin-bottom: 0.5rem;
  }

  .publicaciones-filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem;
  }

  .filtro-btn {
    background: transparent;
    border: 1px solid #e44c65;
    color: #ddd;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .filtro-btn:hover {
    background-color: rgba(228, 76, 101, 0.3);
  }

  .filtro-btn.active {
    background-color: #e44c65;
    color: white;
  }

  .categoria-badge {
    display: inline-block;
    background-color: #e44c65;
    color: white;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.7rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
  }

  /* Corrige las fotos circulares de eventos en el home: la plantilla base
     solo fija el ancho del círculo, no el alto, así que la imagen quedaba
     ovalada en vez de redonda. */
  .wrapper.spotlight .image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .wrapper.spotlight .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
  }

  .galeria-item {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
  }

  .galeria-item:hover {
    transform: translateY(-4px);
  }

  .galeria-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .galeria-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .galeria-thumb.es-video::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    background-color: rgba(228, 76, 101, 0.85);
    color: white;
    border-radius: 50%;
    font-size: 1.1rem;
  }

  .galeria-titulo {
    padding: 0.75rem 1rem;
    margin: 0;
    color: #ddd;
    font-size: 0.9rem;
  }

  /* Panel de campeonatos (admin) */
  .campeonatos-box {
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid white;
    padding: 2rem;
    margin: 2rem;
    border-radius: 12px;
    color: #ddd;
  }

  .campeonatos-box h2, .campeonatos-box h3 {
    color: white;
  }

  .regla-division {
    border-top: 1px solid #444;
    padding-top: 1rem;
    margin-top: 1rem;
  }

  .regla-division:first-child {
    border-top: none;
    margin-top: 0;
  }

  .button.small {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    border: 1px solid #e44c65;
    border-radius: 16px;
    text-decoration: none;
    color: #e44c65;
  }

  .excel-error {
    color: #ffb3b3;
  }

  .categoria-revision {
    margin-bottom: 2rem;
  }

  /* Los <select> del formulario de resultado heredan width:100% del formulario
     de creación de campeonato (pensado para inputs apilados en un wizard) y
     quedan gigantes y apilados uno abajo del otro en escritorio. Acá van en
     una fila compacta junto al botón. */
  .combate-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
  }

  .combate-form select {
    width: auto;
    min-width: 160px;
  }

  .tabla-categoria {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
  }

  .tabla-categoria th, .tabla-categoria td {
    border: 1px solid #444;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.9rem;
  }

  .tabla-categoria th {
    background-color: rgba(228, 76, 101, 0.25);
    color: white;
  }

  .tabla-categoria select {
    font-size: 0.85rem;
  }

  /* El autocompletado del navegador pinta el input de fondo blanco pero el
     sitio sigue mandando el texto en blanco (tema oscuro) -> texto invisible.
     Forzamos que el fondo "autofilleado" se vea igual que el tema oscuro. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #2e3141 inset;
    box-shadow: 0 0 0px 1000px #2e3141 inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  /* Los input type="number"/"date"/"file" del panel de Campeonatos no entran
     en el selector de main.css que pinta fondo oscuro, asi que quedan con
     fondo blanco nativo del navegador pero heredan el texto blanco del tema
     -> texto invisible. Forzamos texto negro y fondo blanco solido en todos
     los input de esta herramienta para que se vea sin importar el tipo. */
  .campeonatos-box input {
    color: black;
    background: #ffffff;
  }

  /* La lista desplegada de un <select> la dibuja el navegador con su propio
     fondo (blanco), sin heredar el tema oscuro del sitio -> texto invisible
     ahi tambien. Se fuerza fondo oscuro y texto claro en las opciones. */
  select {
    color: #ffffff;
  }

  select option {
    background-color: #2e3141;
    color: #ffffff;
  }

  .cinta-blanco, .cinta-azul {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.55rem;
    border-radius: 10px;
  }

  .cinta-blanco {
    background-color: #f4f4f4;
    color: #111;
  }

  .cinta-azul {
    background-color: #2f6fd1;
    color: #fff;
  }