/*==================================================
  ABOUT PAGE
==================================================*/

.about-page{
  background:
    radial-gradient(circle at top,#143327 0%,#081611 45%,#050908 100%);
  color:#eef4f1;
}

.about-page main{
  overflow:hidden;
}


/*==================================================
  HERO
==================================================*/

.about-hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
}

.about-hero__media{
  position:absolute;
  inset:0;

  background:
    url("../heroes/home-hero.webp")
    center
    center/cover
    no-repeat;

  transform:scale(1.03);
}

.about-hero__shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(3,8,6,.92),
      rgba(3,8,6,.70),
      rgba(3,8,6,.32)
    );

  z-index:1;
}

.about-hero__layout{
  position:relative;
  z-index:2;

  display:grid;
  gap:4rem;

  grid-template-columns:
    minmax(0,1.4fr)
    360px;

  align-items:center;

  padding-block:9rem 7rem;
}

.about-hero__copy{
  max-width:760px;
}

.about-hero h1{

  margin:.8rem 0 1.6rem;

  font-size:clamp(3rem,5vw,5rem);

  line-height:1.05;

  letter-spacing:-.03em;
}

.about-hero h1 em{
  color:var(--color-accent);
  font-style:normal;
}

.about-hero__intro{

  max-width:650px;

  font-size:1.15rem;

  line-height:1.8;

  color:rgba(255,255,255,.86);
}
/*==================================================
  HERO - PANEL LATERAL
==================================================*/

.about-hero__statement{

  position:relative;

  padding:2.5rem;

  border:1px solid rgba(255,255,255,.08);

  border-radius:28px;

  background:rgba(10,22,18,.78);

  backdrop-filter:blur(14px);

  box-shadow:
    0 24px 70px rgba(0,0,0,.35);
}

.about-hero__statement-mark{

  display:block;

  margin-bottom:1rem;

  font-size:4rem;

  font-weight:800;

  color:var(--color-accent);

  opacity:.18;

  line-height:1;
}

.about-hero__statement p{

  margin-bottom:1rem;

  color:rgba(255,255,255,.78);

  line-height:1.7;
}

.about-hero__statement strong{

  display:block;

  font-size:1.35rem;

  line-height:1.45;

  color:#fff;
}


/*==================================================
  SCROLL
==================================================*/

.scroll-cue{

  position:absolute;

  left:50%;

  bottom:2rem;

  transform:translateX(-50%);

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:.9rem;

  text-decoration:none;

  color:rgba(255,255,255,.72);

  z-index:3;

  transition:.25s;
}

.scroll-cue:hover{

  color:#fff;

  transform:
    translateX(-50%)
    translateY(-3px);
}

.scroll-cue span{

  width:2px;

  height:48px;

  border-radius:999px;

  background:rgba(255,255,255,.45);
}


/*==================================================
  SECCIONES
==================================================*/

.about-section{

  padding-block:7rem;
}

.about-section--dark{

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.01)
    );
}

.about-grid{

  display:grid;

  gap:4rem;

  grid-template-columns:
    minmax(0,1.5fr)
    360px;

  align-items:start;
}

.about-copy h2{

  margin:.8rem 0 1.6rem;

  font-size:clamp(2rem,3vw,3rem);

  line-height:1.15;
}

.about-copy p{

  margin-bottom:1.5rem;

  font-size:1.08rem;

  line-height:1.9;

  color:rgba(255,255,255,.82);
}
/*==================================================
  PANEL DE MISIÓN
==================================================*/

.about-panel{
  position:relative;
  padding:2.4rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );
  box-shadow:
    0 24px 70px rgba(0,0,0,.22);
}

.about-panel__number{
  display:block;
  margin-bottom:2rem;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--color-accent);
}

.about-panel h3{
  margin:0 0 1rem;
  font-size:1.55rem;
}

.about-panel p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.76);
}


/*==================================================
  ENCABEZADOS DE SECCIÓN
==================================================*/

.section-heading{
  max-width:760px;
  margin-bottom:3.5rem;
}

.section-heading h2{
  margin:.8rem 0 0;
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:1.08;
  letter-spacing:-.025em;
}


/*==================================================
  PRINCIPIOS
==================================================*/

.principles-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem;
}

.principle-card{
  position:relative;
  min-height:270px;
  padding:2rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.principle-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.16);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.02)
    );
}

.principle-card__index{
  display:block;
  margin-bottom:3rem;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--color-accent);
}

.principle-card h3{
  margin:0 0 1rem;
  font-size:1.5rem;
}

.principle-card p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}


/*==================================================
  TIMELINE
==================================================*/

.studio-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.3rem;
}

.studio-timeline::before{
  content:"";
  position:absolute;
  top:2.35rem;
  left:3rem;
  right:3rem;
  height:1px;
  background:rgba(255,255,255,.1);
}

.timeline-step{
  position:relative;
  padding:1.5rem 1.2rem 0;
  z-index:1;
}

.timeline-step__number{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:2rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:#0b1b15;
  color:var(--color-accent);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
}

.timeline-step h3{
  margin:0 0 .8rem;
  font-size:1.35rem;
}

.timeline-step p{
  margin:0;
  line-height:1.75;
  color:rgba(255,255,255,.7);
}
/*==================================================
  COLECCIONES
==================================================*/

.collections-showcase{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
}

.collection-panel{
  padding:2rem;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.015)
    );

  transition:
    transform .25s ease,
    border-color .25s ease;
}

.collection-panel:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.16);
}

.collection-panel span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:42px;
  height:42px;

  margin-bottom:1.5rem;

  border-radius:50%;

  background:rgba(255,255,255,.05);

  color:var(--color-accent);

  font-weight:700;
}

.collection-panel h3{
  margin:0 0 1rem;
  font-size:1.45rem;
}

.collection-panel p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}


/*==================================================
  VISIÓN
==================================================*/

.about-vision__layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) 360px;
  gap:4rem;
  align-items:center;
}

.about-vision__copy h2{
  margin:.8rem 0 1.5rem;
  font-size:clamp(2.3rem,4vw,3.7rem);
  line-height:1.08;
}

.about-vision__copy p{
  margin-bottom:1.5rem;
  line-height:1.9;
  color:rgba(255,255,255,.82);
}

.about-vision__panel{
  padding:2.5rem;

  border-radius:26px;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );
}

.about-vision__label{
  display:block;

  margin-bottom:1.4rem;

  font-size:.82rem;

  letter-spacing:.18em;

  color:var(--color-accent);

  text-transform:uppercase;
}

.about-vision__panel strong{
  display:block;
  margin-bottom:1rem;
  font-size:1.45rem;
}

.about-vision__panel p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.74);
}


/*==================================================
  COMUNIDAD
==================================================*/

.about-community{
  padding:7rem 0 8rem;
}

.about-community__box{

  text-align:center;

  max-width:900px;

  margin:auto;

  padding:4rem;

  border-radius:30px;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
    );
}

.about-community__box h2{

  margin:.8rem auto 1.6rem;

  max-width:700px;

  font-size:clamp(2.3rem,4vw,3.8rem);

  line-height:1.08;
}

.about-community__box p{

  max-width:700px;

  margin:0 auto 2.2rem;

  line-height:1.9;

  color:rgba(255,255,255,.78);
}
/*==================================================
  RESPONSIVE - TABLET
==================================================*/

@media (max-width:1100px){

  .about-hero__layout,
  .about-grid,
  .about-vision__layout{
    grid-template-columns:1fr;
  }

  .about-hero__statement,
  .about-panel,
  .about-vision__panel{
    max-width:700px;
  }

  .studio-timeline{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .studio-timeline::before{
    display:none;
  }

  .principles-grid{
    grid-template-columns:1fr;
  }

  .collections-showcase{
    grid-template-columns:1fr;
  }

}


/*==================================================
  RESPONSIVE - MOBILE
==================================================*/

@media (max-width:768px){

  .about-hero{
    min-height:auto;
  }

  .about-hero__layout{
    padding-block:7rem 5rem;
    gap:2.5rem;
  }

  .about-hero h1{
    font-size:clamp(2.2rem,9vw,3.3rem);
  }

  .about-section{
    padding-block:5rem;
  }

  .about-community{
    padding:5rem 0 6rem;
  }

  .about-community__box{
    padding:2.25rem;
  }

  .about-community__box h2{
    font-size:clamp(2rem,8vw,2.8rem);
  }

  .studio-timeline{
    grid-template-columns:1fr;
  }

  .timeline-step{
    padding-left:0;
  }

  .scroll-cue{
    display:none;
  }

  .button-row{
    flex-direction:column;
    align-items:stretch;
  }

  .button-row .button{
    justify-content:center;
  }

}
/*==================================================
  ANIMACIONES
==================================================*/

.about-page .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .6s ease,
    transform .6s ease;
}

.about-page .reveal.is-visible{
  opacity:1;
  transform:none;
}


/*==================================================
  AJUSTES FINALES
==================================================*/

.about-page .eyebrow{
  margin-bottom:.75rem;
}

.about-page .button-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

.about-page .button-row .button{
  min-width:220px;
}

.about-page h2,
.about-page h3{
  text-wrap:balance;
}

.about-page p{
  text-wrap:pretty;
}

.about-page section{
  position:relative;
}