/* =========================================================
   FÉNIX EXPERIENCE — MANIFIESTO / NOSOTROS
   Extensión sobre styles.css + store.css
========================================================= */


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

.editorial-hero {
  position: relative;

  min-height: 100vh;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding:
    135px 7vw 95px;
}

.editorial-hero-background {
  position: absolute;

  top: -15%;
  right: 0;
  bottom: -15%;
  left: 0;

  transform:
    translate3d(0,0,0)
    scale(1.08);

  will-change: transform;
}

.manifesto-page-hero
.editorial-hero-background {
  background:
    linear-gradient(
      90deg,
      rgba(5,7,7,.96) 0%,
      rgba(5,7,7,.74) 45%,
      rgba(5,7,7,.34) 100%
    ),
    url("https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2200&q=90")
    center 43% / cover no-repeat;
}

.about-page-hero
.editorial-hero-background {
  background:
    linear-gradient(
      90deg,
      rgba(5,7,7,.96) 0%,
      rgba(5,7,7,.69) 45%,
      rgba(5,7,7,.30) 100%
    ),
    url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=2200&q=90")
    center 50% / cover no-repeat;
}

.editorial-hero-light {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 70% 48%,
      rgba(229,200,117,.11),
      transparent 34%
    );

  pointer-events: none;
}

.editorial-hero-content {
  position: relative;

  z-index: 2;

  width:
    min(
      900px,
      100%
    );
}

.editorial-hero h1 {
  font-family: var(--serif);

  font-size:
    clamp(
      66px,
      9vw,
      142px
    );

  line-height: .84;

  font-weight: 400;

  letter-spacing: -5px;

  animation:
    heroTitleIn 1.2s
    cubic-bezier(.16,1,.3,1)
    both;
}

.editorial-hero h1 em {
  color: var(--gold);

  font-style: italic;
}

.editorial-hero-copy {
  max-width: 560px;

  margin-top: 38px;

  color: var(--white-soft);

  font-size: 15px;

  line-height: 1.8;

  animation:
    heroContentIn 1s
    .35s
    cubic-bezier(.16,1,.3,1)
    both;
}

.editorial-hero-bottom {
  position: absolute;

  left: 7vw;
  right: 7vw;
  bottom: 30px;

  z-index: 3;

  display: flex;
  justify-content: space-between;

  color:
    rgba(
      244,
      241,
      233,
      .42
    );

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 2px;

  text-transform: uppercase;
}


/* =========================================================
   TÍTULOS
========================================================= */

.content-animated-title {
  font-family: var(--serif);

  font-size:
    clamp(
      45px,
      6vw,
      85px
    );

  line-height: .95;

  font-weight: 400;

  opacity: 0;

  transform:
    translateY(70px)
    skewY(3deg);

  filter:
    blur(10px);

  letter-spacing: 4px;

  transition:
    opacity 1s cubic-bezier(.16,1,.3,1),
    transform 1.15s cubic-bezier(.16,1,.3,1),
    filter 1.1s cubic-bezier(.16,1,.3,1),
    letter-spacing 1.15s cubic-bezier(.16,1,.3,1);
}

.content-animated-title.text-revealed {
  opacity: 1;

  transform:
    translateY(0)
    skewY(0);

  filter: blur(0);

  letter-spacing: -2px;
}

.content-animated-title em {
  color: var(--gold);

  font-style: italic;
}

.content-animated-title.text-revealed em {
  animation:
    goldTextReveal 1.4s
    .2s
    cubic-bezier(.16,1,.3,1)
    both;
}


/* =========================================================
   MANIFIESTO
========================================================= */

.manifesto-statement {
  display: grid;

  grid-template-columns:
    .28fr 1fr;

  gap: 80px;
}

.manifesto-statement-number {
  color:
    rgba(
      229,
      200,
      117,
      .16
    );

  font-family: var(--serif);

  font-size:
    clamp(
      100px,
      15vw,
      220px
    );

  line-height: .8;
}

.manifesto-statement-copy {
  max-width: 890px;
}

.manifesto-long-copy {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 35px;

  margin-top: 55px;
}

.manifesto-long-copy p {
  color: var(--white-soft);

  font-size: 14px;

  line-height: 1.85;
}

.manifesto-feature {
  position: relative;

  width:
    min(
      var(--max-width),
      calc(100% - 12vw)
    );

  margin: 20px auto 0;

  display: grid;

  grid-template-columns:
    1.15fr .85fr;

  gap: 0;

  border:
    1px solid var(--border);

  background: var(--black-soft);
}

.manifesto-feature-image {
  position: relative;

  min-height: 650px;

  overflow: hidden;
}

.manifesto-feature-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.82);
}

.manifesto-feature-glow {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 55%,
      rgba(5,7,7,.45) 100%
    ),
    radial-gradient(
      circle at 75% 50%,
      rgba(229,200,117,.12),
      transparent 30%
    );

  pointer-events: none;
}

.manifesto-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    70px 65px;
}

.manifesto-feature-copy blockquote {
  margin: 0;

  color: var(--white);

  font-family: var(--serif);

  font-size:
    clamp(
      38px,
      4.5vw,
      64px
    );

  line-height: 1;

  font-weight: 400;

  letter-spacing: -2px;
}

.manifesto-feature-copy > p:last-child {
  max-width: 500px;

  margin-top: 38px;

  color: var(--white-soft);

  font-size: 13px;

  line-height: 1.85;
}

.manifesto-principles {
  border-top:
    1px solid var(--border);
}

.manifesto-principles-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  border-top:
    1px solid var(--border);
}

.manifesto-principle {
  min-height: 330px;

  padding: 34px;

  border-right:
    1px solid var(--border);

  transition:
    background .35s ease,
    transform .35s ease;
}

.manifesto-principle:last-child {
  border-right: 0;
}

.manifesto-principle:hover {
  background:
    rgba(
      229,
      200,
      117,
      .025
    );

  transform:
    translateY(-5px);
}

.manifesto-principle > span {
  color: var(--gold);

  font-size: 9px;

  letter-spacing: 2px;
}

.manifesto-principle h3 {
  margin-top: 110px;

  font-family: var(--serif);

  font-size: 31px;

  font-weight: 400;
}

.manifesto-principle p {
  margin-top: 16px;

  color: var(--white-soft);

  font-size: 12px;

  line-height: 1.75;
}

.manifesto-final {
  max-width: 1100px;

  text-align: center;
}

.manifesto-final-actions {
  display: flex;
  justify-content: center;

  gap: 15px;

  margin-top: 50px;
}


/* =========================================================
   NOSOTROS
========================================================= */

.about-origin {
  display: grid;

  grid-template-columns:
    .3fr 1fr;

  gap: 80px;
}

.about-origin-copy {
  max-width: 960px;
}

.about-origin-columns {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap: 45px;

  margin-top: 55px;
}

.about-origin-columns p {
  color: var(--white-soft);

  font-size: 14px;

  line-height: 1.85;
}

.about-image-strip {
  width:
    min(
      1600px,
      calc(100% - 6vw)
    );

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1.4fr .8fr .8fr;

  gap: 12px;
}

.about-strip-image {
  min-height: 420px;

  overflow: hidden;

  border:
    1px solid
    rgba(
      229,
      200,
      117,
      .08
    );
}

.about-strip-image.large {
  min-height: 540px;
}

.about-strip-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.75)
    contrast(1.02);

  transition:
    transform .9s
    cubic-bezier(.16,1,.3,1);
}

.about-strip-image:hover img {
  transform:
    scale(1.035);
}


/* -------------------------
   Fundadores accordion
------------------------- */

.founders-section {
  border-top:
    1px solid var(--border);
}

.founders-list {
  border-top:
    1px solid var(--border);
}

.founder-accordion {
  border-bottom:
    1px solid var(--border);
}

.founder-trigger {
  width: 100%;

  min-height: 126px;

  display: grid;

  grid-template-columns:
    65px 88px 1fr 60px;

  align-items: center;

  gap: 24px;

  padding: 18px 8px;

  border: 0;

  background: transparent;

  text-align: left;

  transition:
    background .35s ease;
}

.founder-trigger:hover,
.founder-accordion.open
.founder-trigger {
  background:
    rgba(
      229,
      200,
      117,
      .025
    );
}

.founder-number {
  color:
    rgba(
      244,
      241,
      233,
      .32
    );

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 2px;
}

.founder-thumb {
  width: 70px;
  height: 86px;

  overflow: hidden;

  background: #101515;
}

.founder-thumb img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.72);

  transition:
    transform .5s ease,
    filter .5s ease;
}

.founder-trigger:hover
.founder-thumb img,
.founder-accordion.open
.founder-thumb img {
  transform:
    scale(1.05);

  filter:
    saturate(.95);
}

.founder-heading {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.founder-heading strong {
  font-family: var(--serif);

  font-size:
    clamp(
      30px,
      4vw,
      52px
    );

  font-weight: 400;

  line-height: 1;
}

.founder-heading small {
  color: var(--gold);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 1.7px;

  text-transform: uppercase;
}

.founder-toggle {
  justify-self: end;

  color: var(--gold);

  font-family: var(--serif);

  font-size: 34px;

  font-weight: 400;

  transition:
    transform .4s
    cubic-bezier(.16,1,.3,1);
}

.founder-accordion.open
.founder-toggle {
  transform:
    rotate(45deg);
}

.founder-panel {
  height: 0;

  overflow: hidden;

  transition:
    height .7s
    cubic-bezier(.16,1,.3,1);
}

.founder-panel-inner {
  display: grid;

  grid-template-columns:
    .75fr 1.25fr;

  gap: 65px;

  padding:
    20px 8px 65px 177px;
}

.founder-panel-image {
  aspect-ratio: .84;

  overflow: hidden;
}

.founder-panel-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(.78);
}

.founder-panel-copy {
  max-width: 680px;

  align-self: center;
}

.founder-panel-copy > p:not(.eyebrow) {
  margin-top: 18px;

  color: var(--white-soft);

  font-size: 13px;

  line-height: 1.9;
}

.founder-panel-copy
p:nth-of-type(2) {
  margin-top: 0;
}


/* -------------------------
   Valores nosotros
------------------------- */

.about-values {
  border-top:
    1px solid var(--border);
}

.about-values-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  border-top:
    1px solid var(--border);
}

.about-value {
  min-height: 285px;

  padding: 30px;

  border-right:
    1px solid var(--border);
}

.about-value:last-child {
  border-right: 0;
}

.about-value > span {
  color: var(--gold);

  font-size: 9px;

  letter-spacing: 2px;
}

.about-value h3 {
  margin-top: 90px;

  font-family: var(--serif);

  font-size: 29px;

  font-weight: 400;
}

.about-value p {
  margin-top: 15px;

  color: var(--white-soft);

  font-size: 12px;

  line-height: 1.75;
}

.about-quote {
  max-width: 1150px;

  text-align: center;
}

.about-quote blockquote {
  margin:
    0 auto 45px;

  font-family: var(--serif);

  font-size:
    clamp(
      48px,
      7vw,
      95px
    );

  line-height: .95;

  font-weight: 400;

  letter-spacing: -3px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

  .manifesto-long-copy {
    grid-template-columns: 1fr;
  }

  .manifesto-feature {
    grid-template-columns: 1fr;
  }

  .manifesto-feature-image {
    min-height: 520px;
  }

  .manifesto-principles-grid,
  .about-values-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .manifesto-principle:nth-child(2),
  .about-value:nth-child(2) {
    border-right: 0;
  }

  .manifesto-principle,
  .about-value {
    border-bottom:
      1px solid var(--border);
  }

  .about-image-strip {
    grid-template-columns:
      1.2fr .8fr;
  }

  .about-strip-image:last-child {
    display: none;
  }

  .founder-panel-inner {
    padding-left: 24px;

    grid-template-columns:
      .75fr 1.25fr;
  }

}


@media (max-width: 800px) {

  .editorial-hero {
    min-height: 90vh;

    padding:
      125px 7vw 80px;
  }

  .editorial-hero h1 {
    font-size:
      clamp(
        60px,
        15vw,
        100px
      );

    letter-spacing: -3px;
  }

  .manifesto-statement,
  .about-origin {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .manifesto-statement-number {
    font-size: 100px;
  }

  .about-origin-columns {
    grid-template-columns: 1fr;
  }

  .founder-trigger {
    grid-template-columns:
      42px 65px 1fr 36px;

    gap: 15px;
  }

  .founder-thumb {
    width: 56px;
    height: 68px;
  }

  .founder-panel-inner {
    grid-template-columns: 1fr;

    gap: 30px;

    padding:
      15px 0 50px;
  }

  .founder-panel-image {
    max-width: 420px;
  }

  .about-image-strip {
    width:
      calc(
        100% - 10vw
      );

    grid-template-columns: 1fr;
  }

  .about-strip-image:not(.large) {
    display: none;
  }

}


@media (max-width: 520px) {

  .editorial-hero {
    min-height: 82vh;

    padding:
      115px 5vw 72px;
  }

  .editorial-hero h1 {
    font-size: 60px;
  }

  .editorial-hero-copy {
    font-size: 12px;
  }

  .editorial-hero-bottom {
    left: 5vw;
    right: 5vw;

    font-size: 7px;
  }

  .editorial-hero-bottom
  span:nth-child(2) {
    display: none;
  }

  .content-animated-title {
    font-size: 48px;
  }

  .manifesto-feature {
    width:
      calc(
        100% - 10vw
      );
  }

  .manifesto-feature-image {
    min-height: 430px;
  }

  .manifesto-feature-copy {
    padding:
      45px 25px;
  }

  .manifesto-feature-copy blockquote {
    font-size: 38px;
  }

  .manifesto-principles-grid,
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .manifesto-principle,
  .about-value {
    border-right: 0;
  }

  .manifesto-principle h3,
  .about-value h3 {
    margin-top: 55px;
  }

  .manifesto-final-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .founder-trigger {
    min-height: 102px;

    grid-template-columns:
      30px 52px 1fr 30px;

    gap: 10px;

    padding:
      14px 0;
  }

  .founder-thumb {
    width: 46px;
    height: 58px;
  }

  .founder-heading strong {
    font-size: 26px;
  }

  .founder-heading small {
    font-size: 7px;

    letter-spacing: 1px;
  }

  .founder-toggle {
    font-size: 26px;
  }

  .founder-panel-copy
  > p:not(.eyebrow) {
    font-size: 12px;
  }

  .about-quote blockquote {
    font-size: 47px;
  }

}


@media (
  prefers-reduced-motion: reduce
) {

  .content-animated-title {
    opacity: 1;

    transform: none;

    filter: none;

    letter-spacing: -2px;
  }

  .editorial-hero-background {
    transform:
      scale(1.05);
  }

}


/* FOUNDERS TEXT COLOR FIX */
.founder-trigger {
  color: var(--white);
}

.founder-heading strong {
  color: var(--white);
}