/* Páginas por uso: /usos-de-la-madera/<uso>/. La comparten los 7 usos. */

.hero-uso {
  min-height: 750px;                     /* diseño mobile 750 */
}

.hero-uso .hero__contenido {
  justify-content: flex-start;
  padding-top: 180px;
}

.hero-uso .hero__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .hero-uso {
    min-height: 600px;
  }

  .hero-uso .hero__contenido {
    justify-content: flex-end;
    padding-top: var(--alto-header);
    padding-bottom: 80px;
  }
}

/* Tipos y características */
.caracteristicas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 35px;
  padding-bottom: 35px;
}

@media (min-width: 1024px) {
  .caracteristicas {
    padding-top: 55px;
    padding-bottom: 55px;
  }
}

/* Sección extra (Decks y pérgolas, Techos y revestimientos) */
.uso-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 50px;
}

/* Galería */
.galeria {
  padding-bottom: 20px;
}

.galeria__item {
  width: 310px;
  height: 400px;
  background: var(--blanco-calido);
}

.galeria__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria .carrusel__flecha {
  color: var(--olive);
}

@media (min-width: 1024px) {
  .galeria__pista {
    gap: 30px;
    padding-inline: max(var(--margen-lateral), calc((100% - var(--ancho-contenido)) / 2));
  }

  .galeria__item {
    width: calc((min(100vw - 2 * var(--margen-lateral), var(--ancho-contenido)) - 60px) / 3);
    height: 514px;
  }
}

/* Volver */
.volver {
  display: flex;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

.volver__btn {
  width: 100%;
  max-width: 400px;
}

.volver__btn svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 1024px) {
  .volver {
    justify-content: flex-end;
  }
}