* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.carousel-container {
    position: relative;
    width: 100vw; /* Ancho del 90% del viewport */
    height: calc(100vw * 7 / 21); /* Alto calculado para mantener la relación 21:7 */
    overflow: hidden;
}
@media (max-width: 768px) {    
    .carousel-container {
        position: relative;
        width: 100vw; /* Ancho del 90% del viewport */
        height: calc(100vw * 12 / 21); /* Alto calculado para mantener la relación 21:7 */
        overflow: hidden;
    }
}

.carousel-tecnicas-container {
    position: relative;
    width: 100vw; /* Ancho del 90% del viewport */
    height: calc(100vw * 8 / 21); /* Alto calculado para mantener la relación 21:9 */
    overflow: hidden;
}
@media (max-width: 768px) {    
    .carousel-tecnicas-container {
        position: relative;
        width: 100vw; /* Ancho del 90% del viewport */
        height: calc(100vw * 13 / 21); /* Alto calculado para mantener la relación 21:15 */
        overflow: hidden;
    }
}

.carousel {
    display: flex;
    height: 100%;
    width: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(70%) blur(0px); /* Oscurece y agrega un desenfoque ligero */
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 10; /* Asegura que el texto esté por encima de las imágenes */
    font-size: 2rem; /* Tamaño de fuente para escritorio */
    font-weight: bold;
}
/* Responsivo */
@media (max-width: 768px) {
    .overlay-text h1 {
        font-size: 2.5rem;
    }

    .overlay-text p {
        font-size: 1.2rem;
    }
}
@media (max-width: 480px) { /* Punto de quiebre para celulares */
    .overlay-text h1 {
        font-size: 1.5rem; /* Tamaño de fuente más pequeño para celulares */
    }

    .overlay-text p {
        font-size: 0.8rem; /* Tamaño de fuente más pequeño para celulares */
    }
}

.center-crop-image {
    width: 100%; /* Ajusta el ancho de la imagen al 100% de su contenedor */
    aspect-ratio: 21 / 3.2; /* Establece la relación de aspecto deseada */
    object-fit: cover; /* Escala la imagen para cubrir el contenedor, manteniendo la relación de aspecto */
  }
.centered-image-link { /* Nueva clase para el enlace */
    display: block; /* Convierte el enlace en un elemento de bloque */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Centra el contenido (la imagen) dentro del enlace */
  }
  
.centered-image { /* Clase existente para la imagen */
    display: inline-block; /* Permite que la imagen tenga un ancho y alto */
    vertical-align: middle; /* Alinea verticalmente la imagen al centro del enlace */
    padding-top: 32px;
    padding-bottom: 32px;
  }
.centered-image-logo-main-top { /* Clase existente para la imagen */
    display: inline-block; /* Permite que la imagen tenga un ancho y alto */
    vertical-align: middle; /* Alinea verticalmente la imagen al centro del enlace */
    padding: 32px;
    height: 216px;
    width: auto; /* Mantiene la proporción del logo */
  }
@media (max-width: 768px) { /* Ajusta el valor 768px al punto de quiebre que desees */
    .centered-image-logo-main-top {
        height: 162px!important; /* Reduce la altura a la mitad en móviles */
        width: auto; /* Mantiene la proporción del logo */
      }
}

.centered-image-logo-top { /* Clase existente para la imagen */
    display: inline-block; /* Permite que la imagen tenga un ancho y alto */
    vertical-align: middle; /* Alinea verticalmente la imagen al centro del enlace */
    padding: 40px;
    height: 168px;
    width: auto; /* Mantiene la proporción del logo */
  }
@media (max-width: 768px) { /* Ajusta el valor 768px al punto de quiebre que desees */
    .centered-image-logo-top {
        height: 162px!important; /* Reduce la altura a la mitad en móviles */
        width: auto; /* Mantiene la proporción del logo */
      }
}

.gravity_left-image-link { /* Nueva clase para el enlace */
    display: block; /* Convierte el enlace en un elemento de bloque */
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* Centra el contenido (la imagen) dentro del enlace */
  }

  .gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .left {
    display: grid;
    grid-template-rows: repeat(2, auto);
    gap: 10px;
  }

  .photo {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  /* Relación de aspecto 21:9 para las imágenes de la izquierda */
  .left .photo::before {
    content: "";
    display: block;
    padding-top: calc(100% * 9 / 21); /* Mantiene relación 21:9 */
  }

  .photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* La imagen de la derecha ocupará todo el espacio restante */
  .right-photo {
    height: 100%;
    min-height: 100%;
  }

  /* Versión móvil: apila las imágenes */
  @media (max-width: 767px) {
    .gallery {
      grid-template-columns: 1fr;
    }

    .left {
      grid-template-rows: none;
    }

    .right-photo {
      height: auto;
    }
}

.blog-title {
  color: #e67e22;
  margin-bottom: 20px;
}
.blog-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.blog-image {
  width: 500px;
  background-color: #d3d3d3;
  aspect-ratio: 1 / 1;
}

@media (max-width: 768px) {
  .blog-image {
    aspect-ratio: 16 / 12;
  }
}
.blog-side-content {
  flex: 1;
  min-width: 300px;
}
.blog-footer-content {
  margin-top: 20px;
}
.blog-subtitle {
  margin-top: 0;
}
.blog-paragraph {
  line-height: 1.6;
}