/************* BODY **************/


*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:#e8e8e6;
  color:#111110;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height:1.45;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,ul{margin:0}

.site-header{
    flex-direction:column;
    max-width:1600px;
    margin-inline:auto;
    padding:1.5rem 2rem;
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    font-size:.75rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    gap:2rem;
}

.site-footer{
  max-width:1600px;
  margin-inline:auto;
  padding:2rem;
  font-size:.75rem;
  color:#6f6f6a;
}

/************* HERO **************/

.hero{
  max-width:1600px;
  margin-inline:auto;
  padding:3rem 2rem 4rem;
}
.hero__title{
  font-size:clamp(2.5rem,7vw,6rem);
  font-weight:500;
  line-height:.86;
  letter-spacing:-.045em;
  margin:0;
}
.hero__lede{
  max-width:34ch;
  color:#6f6f6a;
  margin-top:2rem;
}

.hero__role{
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6f6f6a;
  margin-top:1rem;
}

/*************NAVBAR **************/
.nav__list{
    display:flex;
    gap:3rem;
    list-style:none;
    margin:0;
    padding:0;
    counter-reset:nav;
    width: 100%;
    justify-content: space-between;
}


/************* CINTA TRANSPORTADORA **************/
.conveyor{
  overflow:hidden;
  padding-bottom:4rem;
}
.conveyor__track{
  display:flex;
  gap:0;
  width:max-content;
  animation:conveyor-scroll 60s linear infinite;
}
.conveyor:hover .conveyor__track{
  animation-play-state:paused;
}

@keyframes conveyor-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.case{
  flex:0 0 clamp(280px,26vw,440px);
}
.case__media{
  aspect-ratio:3/4;
  overflow:hidden;
  margin:0;
}
.case__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.case__meta{
  display:flex;
  gap:.8rem;
  align-items:baseline;
  padding-top:.7rem;
}
.case__index{font-size:.75rem;color:#6f6f6a}
.case__title{
  font-size:1rem;
  font-weight:400;
  margin:0;
}

@media (max-width:900px){
  .case{flex-basis:78vw}
}
@media (prefers-reduced-motion:reduce){
  .conveyor__track{animation:none}
  .conveyor{overflow-x:auto}
}


/************* DESTINOS **************/
.destino__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:3rem;
}
.destino__title{
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.9;
  margin:0;
}
.destino__meta{
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6f6f6a;
  margin:0;
}

.destino__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
}
.destino__shot{
  margin:0;
  aspect-ratio:3/4;
  overflow:hidden;
}
.destino__shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.destino__text{
  max-width:52ch;
  margin-top:4rem;
  line-height:1.75;
}

@media (max-width:700px){
  .destino{padding:2rem 1.25rem 4rem}
  .destino__grid{grid-template-columns:1fr}
  .destino__head{flex-direction:column;align-items:flex-start;gap:.75rem}
}


.destino__title,
.archivo__title{
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.9;
  margin:0;
}

.destino__meta,
.archivo__meta{
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6f6f6a;
  margin:0;
}

.destino__shot img,
.mini__media img,
.case__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/************* ARCHIVO / LANDING **************/
.archivo{
  max-width:1600px;
  margin-inline:auto;
  padding:3rem 2rem 6rem;
}
.archivo__head{margin-bottom:3rem}

.archivo__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.mini__media{
  margin:0;
  aspect-ratio:3/4;
  overflow:hidden;
}
.mini__title{
  font-size:.9rem;
  font-weight:400;
  margin:.6rem 0 0;
}

@media (max-width:1000px){
  .archivo__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .archivo__grid{grid-template-columns:1fr}
  .archivo{padding:2rem 1.25rem 4rem}
}