body {
    font-family: 'Roboto', sans-serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: 'Raleway', sans-serif;
  }

  body {
    font-size: 18px;
    margin: auto 15%;
    background-color: #0d23d1;
    color: #535353;
    position: relative;
  }

  .w3-half img {
    margin-bottom: -6px;
    margin-top: 16px;
    opacity: 0.8;
    cursor: pointer
  }

  .col .card {
    min-height: 230px;
  }

  .w3-half img:hover {
    opacity: 1
  }

  .deportes {
    margin-bottom: 4rem;
  }

  .padding-15 {
    padding: 15px 0;
  }

  ul{
     margin: 0 0 1rem 0;
  }

  .h3-equipos{
     margin-bottom: 0 !important;
  }

  .equipos{
     margin-bottom: 4rem !important;
  }

  .a-card .btn-danger{
    position: absolute;
    bottom: 5%;
    left: 19%;
  }

  .a-card .btn-primary{
    position: absolute;
    bottom: 5%;
    left: 19%;
  }

  /* Estilos para el contenedor para logos abajo del header */
  /* Contenedor principal de los logos */
.logos-header {
    display: flex;
    flex-wrap: wrap; /* Permite que los logos bajen a la siguiente línea si no hay espacio */
    justify-content: center; /* Centra los logos horizontalmente */
    align-items: center; /* Centra los logos verticalmente */
    gap: 20px; /* Espacio entre los logos, puedes ajustarlo a tu gusto */
    width: 100%; /* Asegura que el contenedor no se desborde */
    box-sizing: border-box;
    padding: 15px; /* Opcional: un poco de margen interno para que no toquen los bordes */
}

/* Evitar que los enlaces o contenedores internos de los logos se desborden */
.logos-header a, 
div.logos-header {
    display: flex;
    justify-content: center;
}

/* Configuración de las imágenes (logos) para que sean responsivas */
.logos-header img {
    max-width: 20%; /* Evita que la imagen sea más ancha que su contenedor */
    height: auto; /* Mantiene la proporción original de la imagen */
    object-fit: contain; /* Evita que el logo se deforme */
}

/* --- MEDIA QUERIES PARA MÓVILES Y TABLETS --- */

/* Para pantallas medianas (Tablets: menos de 992px) */
@media (max-width: 992px) {
    .logos-header {
        gap: 15px;
    }
    .logos-header img {
        /* Reduce un poco el tamaño máximo de los logos en tablets */
        max-width: 150px; 
    }
}

/* Para pantallas pequeñas (Teléfonos móviles: menos de 768px) */
@media (max-width: 768px) {
    .logos-header {
        /* Opcional: Si quieres que se agrupen de a dos por fila en móviles */
        gap: 10px;
    }
    
    .logos-header img {
        /* Achica los logos para que quepan bien en la pantalla del celular */
        max-width: 100px; /* Ajusta este valor según el tamaño real de tus logos */
    }
}

/* Para pantallas MUY pequeñas (menos de 480px) */
@media (max-width: 480px) {
    .logos-header {
        flex-direction: initial; /* Apila los logos uno debajo del otro si no caben */
        gap: 20px;
    }
    
    .logos-header img {
        max-width: 120px; /* Como ahora están en columna, pueden ser un poco más grandes */
    }
}

  @media (min-width: 768px) {
    .row-cols-md-2 > * {
      flex: 0 0 auto;
      width: 45%;
      margin: 1rem;
    }
  }

  .polera-roja {
    display: flex;
    align-items: center;
  }

  .polera-roja::before {
    content: ""; /* Obligatorio para que el pseudo-elemento exista */
    display: inline-block;
    width: 32px; /* Ancho del ícono */
    height: 32px; /* Alto del ícono */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    background-image: url('https://deporteazul.cl/jdfa/img/poleras/rojo.png'); /* o .svg */
    background-size: contain; /* Ajusta la imagen al contenedor */
    background-repeat: no-repeat;
  }

  .polera-amarillo {
    display: flex;
    align-items: center;
  }

  .polera-amarillo::before {
    content: ""; /* Obligatorio para que el pseudo-elemento exista */
    display: inline-block;
    width: 32px; /* Ancho del ícono */
    height: 32px; /* Alto del ícono */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    background-image: url('https://deporteazul.cl/jdfa/img/poleras/amarillo.png'); /* o .svg */
    background-size: contain; /* Ajusta la imagen al contenedor */
    background-repeat: no-repeat;
  }

  .polera-azul {
    display: flex;
    align-items: center;
  }

  .polera-azul::before {
    content: ""; /* Obligatorio para que el pseudo-elemento exista */
    display: inline-block;
    width: 32px; /* Ancho del ícono */
    height: 32px; /* Alto del ícono */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    background-image: url('https://deporteazul.cl/jdfa/img/poleras/azul.png'); /* o .svg */
    background-size: contain; /* Ajusta la imagen al contenedor */
    background-repeat: no-repeat;
  }

  .polera-blanco {
    display: flex;
    align-items: center;
  }

  .polera-blanco::before {
    content: ""; /* Obligatorio para que el pseudo-elemento exista */
    display: inline-block;
    width: 32px; /* Ancho del ícono */
    height: 32px; /* Alto del ícono */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    background-image: url('https://deporteazul.cl/jdfa/img/poleras/blanco.png'); /* o .svg */
    background-size: contain; /* Ajusta la imagen al contenedor */
    background-repeat: no-repeat;
  }

  .polera-verde {
    display: flex;
    align-items: center;
  }

  .polera-verde::before {
    content: ""; /* Obligatorio para que el pseudo-elemento exista */
    display: inline-block;
    width: 32px; /* Ancho del ícono */
    height: 32px; /* Alto del ícono */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    background-image: url('https://deporteazul.cl/jdfa/img/poleras/verde.png'); /* o .svg */
    background-size: contain; /* Ajusta la imagen al contenedor */
    background-repeat: no-repeat;
  }

  .polera-naranjo {
    display: flex;
    align-items: center;
  }

  .polera-naranjo::before {
    content: ""; /* Obligatorio para que el pseudo-elemento exista */
    display: inline-block;
    width: 32px; /* Ancho del ícono */
    height: 32px; /* Alto del ícono */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    background-image: url('https://deporteazul.cl/jdfa/img/poleras/naranjo.png'); /* o .svg */
    background-size: contain; /* Ajusta la imagen al contenedor */
    background-repeat: no-repeat;
  }

  .w3-padding {
    padding: 8px 0px !important;
  }

  .w3-button:hover {
    color: #fff !important;
    background-color: #0d23d1 !important;
  }

  .bi-x-square::before {
    background-color: red;
    border-radius: 5px;
  }

  li::marker {
    color: #09199b;
    font-weight: bold;
  }

  .alert-secondary {
    width: 58%;
    margin: 3rem auto;
  }

  .w3-bar-block {
    margin-top: 3rem;
  }

  .w3-container,
  .w3-panel {
    padding: 10% 20%;
  }

  .w3-container p {
    padding: 0 3rem;
    text-align: left;
    line-height: 1.5;
  }

  .logo-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }

  .menu-blue {
    color: #fff;
    background-color: #06126b;
  }

  .w3-white,
  .w3-hover-white:hover {
    color: #fff !important;
    background-color: #0d23d1 !important;
  }

  .w3-bar-block .w3-bar-item {
    background-color: #081685;
    margin-top: 0.2rem;
  }

  .menu-blue-responsive {
    float: right;
  }

  .heading {
    padding: 0.01em 16px;
    margin-bottom: 1rem;
  }

  .btn-success,
  .btn-info,
  .btn-primary,
  .btn-warning {
    padding: 1rem 2rem;
    font-size: 20px;
  }

  ol.letters {
    list-style-type: lower-latin;
  }

  ol.numbers {
    list-style-type: decimal;
  }

  .li-footer {
    display: inline-block;
    margin: 1rem !important;
  }

  hr:not([size]) {
    height: 0;
  }

  hr {
    opacity: 1;
    width: 50px;
    border: 5px solid #124fae;
    margin-top: 0px;
    margin-bottom: 4rem;
  }

  .w3-container-2 {
    border-bottom: 2px solid #ddd;
    padding: 5rem;
  }

  .w3-container ol {
    padding: 1rem 3rem 0 3rem;
  }

  .w3-container ul {
    padding: 1rem 3rem 0 3rem;
  }

  .w3-container ol li {
    margin: 0.2rem 0;
  }

  .w3-container ul li {
    margin: 0.2rem 0;
  }

  p.card-text {
    padding: 0 0.5rem;
  }

  .docs {
    width: 90%;
    margin: 0 auto;
  }

  .mg-docs {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-left: 0rem;
  }

  h2 {
    color: #081685;
    padding-left: 2rem;
    margin-bottom: 2rem;
  }

  h3,
  h4 {
    color: #535353;
    padding-left: 2rem;
    margin-bottom: 2rem;
  }

  p a,
  li a {
    color: #081685;
    font-weight: bold;
  }

  p a:hover,
  li a:hover {
    color: #2b62b3;
  }

  .card a {
    text-decoration: none;
    color: #535353;
  }

  .g-4 {
    margin-bottom: 2rem;
  }

  .card-body {
    min-height: 190px;
  }

  .accordion-header {
    margin-bottom: 0;
    padding-left: 0;
  }

  .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #d01a1a;
  }

  .accordion-button:focus {
    border-color: #d7d7d7;
    box-shadow: 0 0 0 .25rem rgba(202, 202, 202, 0.25);
  }

  .accordion-button {
    color: #fff;
    background-color: #081685;
  }

  .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }

  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }

  .accordion-body {
    background-color: #f0f0f0;
  }

  .nav-link.w3-bar-item.w3-button.w3-hover-white.active {
    background-color: #0d23d1 !important;
    color: #fff !important;
  }

  .calendario {
    width: 80%;
    margin: 0 auto;
  }

  div.calendario h1 {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.75em;
    color: #2a556b;
    margin-bottom: 0;
  }

  div.calendario h3 {
    color: #2a556b;
  }

  div.calendario ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  div.calendario ul li {
    border: 1px solid rgb(14, 83, 155);
    overflow: hidden;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    margin-bottom: 10px;
  }

  div.calendario p.bajada-calendario {
    color: #2a556b;
    max-width: 80%;
    display: block;
    margin: 14px auto;
    text-align: center;
  }

  div.calendario ul li:hover {
    background-color: #e6e6e6;
  }

  div.calendario ul li i.fecha {
    display: block;
    width: 90px;
    color: #fff;
    background: #06126b;
    float: left;
    text-align: center;
    padding: 17px 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  div.calendario ul li i.fecha span {
    color: #fff;
  }

  div.calendario ul li i.fecha span.mes {
    display: block;
    color: #fff;
    text-align: center;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: bold;
  }

  div.calendario ul li i.fecha span.dia {
    display: block;
    color: #fff;
    text-align: center;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: bold;
  }

  div.calendario ul li span.hora {
    display: block;
    float: left;
    width: 100px;
    text-align: center;
    padding: 20px 0;
    /*margin: 8px 0;*/
    border-right: 1px dashed #e1e1e1;
    font-size: 14px;
    min-height: 20px;
  }

  div.calendario ul li p {
    margin: 0;
    width: 60%;
    margin-left: 2%;
    padding: 16px 0;
    display: block;
    float: left;
    font-size: 0.9em;
  }

  div.calendario ul li p:hover {
    text-overflow: inherit;
  }

  div.calendario ul li a {
    padding: 28px 0;
    display: inline-block;
    float: right;
    font-size: 0.938em;
    color: #2c73ae;
    text-align: right;
    margin-right: 2%;
  }

  div.calendario ul li a:hover {
    text-decoration: underline;
  }

  div.calendario ul li a img {
    width: 22px;
    vertical-align: middle;
    margin-right: 8px;
  }

  .responsive-sidebar {
    text-align: center;
  }

  .w3-main {
    padding-left: 1%;
    padding-right: 1%;
    margin-left: 340px;
    background-color: white;
  }

  .accordion-button {
    z-index: 0;
  }

  .w3-top,
  .w3-bottom {
    z-index: 10;
  }

  .alert p,
  .alert h4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #br {
    display: none;
  }

  #span {
    margin: 0 1.5rem;
    border-left: 2px solid white;
  }

  .img-thumbnail {
    background-color: #dee2e6;
    padding: .7rem;
  }

  .table {
    width: 72%;
    max-width: 100%;
    margin-bottom: 20px;
    background-color: #006dae;
    color: #fff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
  }

  .table tr {
    height: 7rem;
  }

  thead tr th {
    text-align: center;
    width: 33.333333333%;
  }

  .table tr td {
    vertical-align: middle !important;
  }

  td h6 {
    background-color: white;
    color: #444;
    margin: 1rem;
    text-align: center;
    padding: 2rem;
  }

  th h3 {
    color: rgb(255, 255, 255);
  }

  .w3-main {
    padding-left: 0%;
    padding-right: 0%;
  }

  .heading {
    padding: 0.01em 0px;
  }

  .card-header{
    padding: 12px;
    margin-bottom: 0;
    color: #111;
    background-color: #9ac1e3;
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
    font-weight: bold;
    font-size: 16px;
  }

  .card-body{
    text-align: center;
  }

  .p-card{
    padding: 5px 10px !important;
  }

  .a-card{
    padding: 5px 20px;
    font-size: 16px;
    color: #dbdbdb !important;
    border: 1px solid #4545458c;
  }

  @media only screen and (max-width: 760px) {
    div.calendario {
      margin: 1%;
    }

    div.calendario ul li i.fecha {
      width: 40%;
      padding: 16.5px 0;
    }

    div.calendario ul li span.hora {
      width: 60%;
      border-bottom: 1px solid rgb(14, 83, 155);
      border-right: 0px solid #fff;
      min-height: 81px;
    }

    div.calendario ul li p {
      width: 100%;
      text-align: center;
    }

    .table-responsive>.table {
      margin-bottom: 0;
    }
  }

  @media (max-width:992px) {
    .heading {
      margin-top: 68px;
      padding: 0;
    }

    body {
      margin: 0;
      background-color: #0d23d1;
    }

    header.w3-padding {
      padding: 8px 24px !important;
    }

    .w3-container p {
      padding: 0 0.5rem;
      text-align: justify;
    }

    .w3-xxxlarge {
      font-size: 36px !important;
    }

    .col-6 {
      width: 90%;
    }

    .w3-container-2 p {
      text-align: justify !important;
      font-size: 1rem;
      line-height: 1.25rem;
    }

    .w3-container ul {
      padding: 1rem 1.6rem 0 1.6rem;
    }

    .w3-container ol {
      padding: 1rem 1.5rem 0 1.5rem;
    }

    #br {
      display: block;
    }

    .puntaje {
      margin-bottom: 2rem !important;
    }

    .img-fluid {
      max-width: 80%;
      height: auto;
    }

    #span {
      margin: 0 0.5rem;
      border-left: 2px solid white;
    }

    .w3-center {
      text-align: center !important;
    }

    .calendario {
      width: 99% !important;
      margin: 0 auto;
    }

    .alert-secondary {
      width: 90%;
      margin: 3rem 5%;
    }

    .w3-container ul {
      padding: 1rem 0.2rem 0 0.2rem;
    }

    .a-footer {
      width: 19%;
      display: inline-block;
    }

    .li-footer {
      margin: 0 !important;
    }
  }

  @media (max-width:1380px) {
    body {
      margin: auto 1px;
      background-color: #0d23d1;
    }

    header.w3-padding {
      padding: 8px 24px !important;
    }

    .w3-container p {
      padding: 0 0.5rem;
      text-align: justify;
    }

    .w3-xxxlarge {
      font-size: 36px !important;
    }

    h2,
    h3,
    h4 {
      padding-left: 0;
    }

    .calendario {
      width: 90%;
      margin: 0 auto;
    }
  }

  /* Estilos para la sección de videos */
  .contenedor-videos-jdfa {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20px;
      max-width: 1200px; /* Ajustado al estándar de la página */
      margin: 40px auto;
      padding: 0 15px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  .video-item {
      flex: 1 1 calc(33.333% - 20px); /* 3 columnas en escritorio */
      min-width: 300px;
  }

  /* Contenedor para mantener proporción 16:9 */
  .video-wrapper {
      position: relative;
      padding-bottom: 56.25%; /* Ratio 16:9 */
      height: 0;
      overflow: hidden;
      border: 3px solid #004c97; /* Azul institucional Deporte Azul */
      border-radius: 4px;
  }

  .video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  .video-caption {
      margin-top: 10px;
      text-align: center;
      color: #333;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 14px;
  }

  /* Responsivo: 1 video sobre otro en móviles */
  @media (max-width: 768px) {
      .video-item {
          flex: 1 1 100%; /* Ocupa todo el ancho */
      }
      
      .contenedor-videos-jdfa {
          gap: 30px; /* Más espacio entre videos al estar apilados */
      }
  }

  @media (max-width:538px) {
    .w3-container-2 {
      padding: 2rem;
    }
  }