/* Trabajos personalizados */

/* Hero: el encuadre y, en celular, la capa como en el diseño */
.hero-trabajos .hero__img {
  object-position: 100% 35%;
}

@media (max-width: 767px) {
  .hero-trabajos .hero__img {
    object-position: 91% center;
  }

  .hero-trabajos::after {
    background: linear-gradient(0.44deg, rgba(var(--oscuro-foto), 0.52) 0.64%, rgba(var(--oscuro-foto), 0.24) 70.76%);
  }
}

/* Intro */
.intro-trabajos {
  padding: 65px 0;
  background: var(--olive);
  color: var(--blanco);
}

.intro-trabajos .t-cuerpo {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .intro-trabajos {
    padding: 95px 0;
  }
}

/* Pasos */
.pasos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* En celulares muy angostos "trabajamos" no entra a 52 px */
.pasos .t-h2 {
  font-size: min(52px, 15vw);
}

ol.pasos__grilla {
  display: grid;
  align-self: stretch;
  gap: 12px;
  margin: 32px 10px 0;
}

.paso {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 208.67px;
  padding: 12px 24px;
  border-radius: 16px;
  background: var(--olive);
  color: var(--blanco);
}

.paso__titulo {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
}

.pasos .ver-mas__btn {
  align-self: center;
  margin-top: 20px;
}

@media (min-width: 768px) {
  ol.pasos__grilla {
    grid-template-columns: 1fr 1fr;
    gap: 12px 36px;
  }
}

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

  ol.pasos__grilla {
    margin-block: 52px 20px;
  }
}

/* Tarjetas a medida (fondo marrón, tarjeta blanca). Abajo y entre las tarjetas y las flechas, 8 px menos: los botones de las flechas son más altos que la flecha */
.a-medida {
  padding: 50px 0 42px;
  background: var(--marron-oscuro);
}

/* Margen del doble de la separación: 40 px, alineado con el texto de la página */
ul.a-medida__pista {
  --separacion: 20px;
}

.a-medida__pista .tarjeta-uso {
  width: min(310px, 100%);
}

.a-medida .tarjeta-uso__img {
  height: 300px;
}

.a-medida .tarjeta-uso__pie {
  background: var(--blanco);
  color: var(--olive);
}

/* Toda la tarjeta lleva a su página: el link del título se estira sobre la tarjeta, también con teclado.
   container-type: la letra se calcula con el ancho de la tarjeta, y las 3 quedan del mismo ancho */
.a-medida .tarjeta-uso {
  position: relative;
  container-type: inline-size;
}

/* "Revestimientos" entra en una línea: 7,7 es su ancho en proporción a la letra; 80 px, el margen del pie. Con un título más largo, revisar */
.a-medida .tarjeta-uso__titulo {
  font-size: 26px;
  font-size: min(32px, (100cqw - 80px) / 7.7);
}

.a-medida .tarjeta-uso__titulo a {
  color: inherit;
  text-decoration: none;
}

.a-medida .tarjeta-uso__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.a-medida .tarjeta-uso__titulo a:focus-visible {
  outline: none;
}

.a-medida .tarjeta-uso__titulo a:focus-visible::after {
  outline: 3px solid var(--naranja);
  outline-offset: -3px;
}

.a-medida .carrusel__flechas {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .a-medida {
    padding: 80px 0;
  }

  /* En compu entran las 3 tarjetas: se reparten el ancho del texto de la página, sin flechas */
  ul.a-medida__pista {
    --separacion: 24px;
    padding-inline: max(var(--margen-lateral), calc((100% - var(--ancho-contenido)) / 2));
  }

  .a-medida__pista > .tarjeta-uso {
    flex: 1 1 0;
    width: auto;
  }

  .a-medida .tarjeta-uso__img {
    height: 217px;
  }

  .a-medida .tarjeta-uso__pie {
    padding-block: 29.5px;
  }

  .a-medida .carrusel__flechas {
    display: none;
  }
}