/* ==================================================
   REDACCIÓN
   CASO CORTO / EDITORIAL / SCROLL
================================================== */


/* ==================================================
   00. BASE
================================================== */

.redaccion-page {
  width: 100%;
  padding-top: 80px;

  background: var(--white);
  color: var(--ink);

  overflow-x: clip;
}


.redaccion-shell {
  width: 100%;

  padding-left: var(--page-x);
  padding-right: var(--page-x);
}


.redaccion-kicker {
  margin: 0;

  font-size: var(--small);
  line-height: 1.35;

  font-weight: var(--weight-medium);

  letter-spacing: .035em;

  text-transform: uppercase;
}


.redaccion-kicker-light {
  color: var(--white);
}



/* ==================================================
   01. PROGRESO GENERAL
================================================== */

.redaccion-progress {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 9999;

  width: 100%;
  height: 2px;

  pointer-events: none;
}


.redaccion-progress-bar {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--ink);

  transform: scaleX(0);
  transform-origin: left center;
}



/* ==================================================
   02. STORY SCREENS
================================================== */

.story-screen {
  position: relative;

  min-height:
    calc(100vh - 80px);

  overflow: hidden;
}


.story-screen-inner,
.story-centered {
  min-height:
    calc(100vh - 80px);
}



/* ==================================================
   03. GOOGLE
================================================== */

.story-google {
  background: var(--white);
  color: var(--ink);
}


.story-screen-inner {
  display: flex;
  flex-direction: column;
}


.story-meta {
  display: flex;

  justify-content: space-between;
  align-items: center;

  padding-top:
    clamp(40px, 4vw, 65px);

  padding-bottom: 20px;

  border-bottom:
    1px solid rgba(0,0,0,.15);

  opacity: 0;

  animation:
    storyMetaIn
    .8s
    .1s
    ease
    forwards;
}


.story-meta p {
  margin: 0;

  font-size: var(--small);
  line-height: 1.35;

  font-weight: var(--weight-medium);

  letter-spacing: .035em;

  text-transform: uppercase;
}


@keyframes storyMetaIn {

  to {
    opacity: 1;
  }

}


.story-google-copy {
  margin-top: auto;
  margin-bottom: auto;

  will-change: transform;
}


.story-intro {
  margin:
    0
    0
    clamp(30px, 3vw, 45px);

  font-size:
    clamp(1rem, 1.25vw, 1.3rem);

  line-height: 1.35;

  opacity: .5;
}


.story-google-title {
  max-width: 1050px;

  margin: 0;

  font-size:
    clamp(4.6rem, 8.5vw, 10rem);

  line-height: .79;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-display);
}


.story-google-title em {
  font-style: italic;

  font-weight: var(--weight-regular);
}


.title-mask {
  display: block;

  overflow: hidden;

  padding-bottom: .05em;
}


.title-line {
  display: block;

  opacity: 0;

  transform:
    translateY(110%);

  animation:
    titleLineIn
    1.05s
    cubic-bezier(.16,1,.3,1)
    forwards;
}


.title-delay-1 {
  animation-delay: .12s;
}


.title-delay-2 {
  animation-delay: .28s;
}


.title-delay-3 {
  animation-delay: .44s;
}


@keyframes titleLineIn {

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


.opening-fade {
  opacity: 0;

  animation:
    openingFade
    .8s
    .8s
    ease
    forwards;
}


@keyframes openingFade {

  to {
    opacity: .55;
  }

}


.story-foot {
  display: flex;

  align-items: center;

  gap: 20px;

  padding-bottom:
    clamp(35px, 4vw, 55px);
}


.story-foot span {
  display: block;

  width: 55px;
  height: 1px;

  background: var(--ink);
}


.story-foot p {
  margin: 0;

  font-size: var(--small);
}



/* ==================================================
   04. AHÍ ENTRÉ YO
================================================== */

.story-entered {
  background: var(--black);

  color: var(--white);
}


.story-centered {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;
}


.story-centered >
.redaccion-kicker {
  position: absolute;

  top:
    clamp(45px, 5vw, 70px);

  left: var(--page-x);
}


.entered-copy {
  max-width: 1150px;
}


.entered-before {
  margin:
    0
    0
    clamp(30px, 3vw, 45px);

  font-size:
    clamp(1rem, 1.4vw, 1.45rem);

  line-height: 1.4;

  opacity: .52;
}


.entered-title {
  margin: 0;

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

  line-height: .75;

  font-weight: var(--weight-medium);

  letter-spacing: -.075em;

  transform-origin: center;

  will-change: transform;
}


.entered-title em {
  display: block;

  font-style: italic;

  font-weight: var(--weight-regular);
}


.entered-after {
  max-width: 470px;

  margin:
    clamp(45px, 5vw, 70px)
    auto
    0;

  font-size:
    clamp(.95rem, 1.2vw, 1.2rem);

  line-height: 1.55;

  opacity: .58;
}



/* ==================================================
   05. EMAIL
================================================== */

.story-email {
  background: var(--white);

  color: var(--ink);
}


.email-inner {
  min-height:
    calc(100vh - 80px);

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.email-title {
  max-width: 720px;

  margin:
    clamp(45px, 5vw, 70px)
    0
    0;

  font-size:
    clamp(3.8rem, 6.8vw, 8rem);

  line-height: .82;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-display);
}


.email-numbers {
  display: flex;

  align-items: baseline;

  gap:
    clamp(18px, 2vw, 35px);

  margin-top:
    clamp(60px, 7vw, 110px);

  white-space: nowrap;
}


.email-before,
.email-after {
  display: inline-block;

  font-size:
    clamp(7rem, 16vw, 19rem);

  line-height: .67;

  font-weight: var(--weight-medium);

  letter-spacing: -.085em;

  will-change: transform;
}


.email-before {
  opacity: .2;
}


.email-divider {
  font-size:
    clamp(1.8rem, 3vw, 3.5rem);

  opacity: .2;
}


.email-labels {
  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 25px;

  margin-top:
    clamp(45px, 5vw, 75px);
}


.email-labels p {
  margin: 0;

  font-size: var(--small);
}


.email-labels span {
  width: 100%;
  height: 1px;

  background:
    rgba(0,0,0,.15);
}



/* ==================================================
   06. EMPRESAS
================================================== */

.companies-story {
  padding:
    clamp(120px, 13vw, 210px)
    0;

  background: var(--white);

  color: var(--ink);
}


.companies-story-title {
  max-width: 950px;

  margin:
    clamp(50px, 6vw, 90px)
    0
    0;

  font-size:
    clamp(4rem, 7vw, 8.5rem);

  line-height: .81;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-display);
}


.companies-story-subtitle {
  max-width: 390px;

  margin:
    clamp(45px, 5vw, 70px)
    0
    0;

  font-size:
    clamp(1.05rem, 1.35vw, 1.4rem);

  line-height: 1.5;

  opacity: .65;
}


.companies-simple-list {
  margin-top:
    clamp(100px, 12vw, 180px);

  border-top:
    1px solid rgba(0,0,0,.18);
}


.company-simple {
  display: grid;

  grid-template-columns:
    minmax(100px, 2fr)
    minmax(0, 10fr);

  column-gap:
    clamp(25px, 4vw, 70px);

  padding:
    clamp(50px, 6vw, 90px)
    0;

  border-bottom:
    1px solid rgba(0,0,0,.18);

  opacity: 0;

  transform:
    translateY(60px);

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


.company-simple.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


.company-simple-number {
  font-size:
    clamp(3.3rem, 5vw, 6rem);

  line-height: .8;

  opacity: .22;
}


.company-simple-sector {
  margin:
    0
    0
    25px;

  font-size: var(--small);

  letter-spacing: .04em;
}


.company-simple h3 {
  margin: 0;

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

  line-height: .84;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-display);
}


.company-simple-description {
  max-width: 400px;

  margin:
    35px
    0
    0;

  font-size: var(--body);

  line-height: 1.55;

  opacity: .65;
}



/* ==================================================
   07. PREGUNTA CENTRAL
================================================== */

.story-question {
  background: var(--black);

  color: var(--white);
}


.question-title {
  margin: 0;

  max-width: 1100px;

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

  line-height: .76;

  font-weight: var(--weight-medium);

  letter-spacing: -.07em;
}


.question-title span {
  display: block;

  opacity: 0;

  transform:
    translateY(100px);

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


.question-title.is-visible span {
  opacity: 1;

  transform:
    translateY(0);
}


.question-title.is-visible
span:nth-child(2) {
  transition-delay: .1s;
}


.question-title.is-visible
span:nth-child(3) {
  transition-delay: .2s;
}



/* ==================================================
   08. JOURNEY
================================================== */

.story-journey {
  background: var(--white);

  color: var(--ink);
}


.journey-title {
  max-width: 1100px;

  margin: 0;

  font-size:
    clamp(4.5rem, 8.8vw, 10rem);

  line-height: .79;

  font-weight: var(--weight-medium);

  letter-spacing: -.065em;
}


.journey-title em {
  font-style: italic;

  font-weight: var(--weight-regular);
}



/* ==================================================
   09. FUENTES
================================================== */

.sources-story {
  position: relative;

  background: var(--black);
}


.source-screen {
  position: sticky;

  top: 80px;

  height:
    calc(100vh - 80px);

  min-height: 650px;

  background: var(--black);

  color: var(--white);

  overflow: hidden;
}


.source-screen:nth-child(1) {
  z-index: 1;
}


.source-screen:nth-child(2) {
  z-index: 2;
}


.source-screen:nth-child(3) {
  z-index: 3;
}


.source-screen:nth-child(4) {
  z-index: 4;
}


.source-screen:nth-child(5) {
  z-index: 5;
}


.source-screen-inner {
  position: relative;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.source-screen-inner >
.redaccion-kicker {
  position: absolute;

  top:
    clamp(45px, 5vw, 70px);
}


.source-intro-copy {
  max-width: 850px;

  margin: 0;

  font-size:
    clamp(4rem, 8vw, 9rem);

  line-height: .81;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-display);
}


.source-index {
  position: absolute;

  top:
    clamp(45px, 5vw, 70px);

  right: var(--page-x);

  font-size:
    clamp(2.5rem, 4vw, 4.5rem);

  line-height: .8;

  opacity: .2;
}


.source-screen-word h2,
.source-screen-other h2 {
  margin: 0;

  font-size:
    clamp(6rem, 15vw, 18rem);

  line-height: .68;

  font-weight: var(--weight-medium);

  letter-spacing: -.085em;

  opacity: 0;

  transform:
    translateY(100px);

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


.source-screen.is-visible h2 {
  opacity: 1;

  transform:
    translateY(0);
}


.source-screen-other h2 {
  max-width: 1000px;

  font-size:
    clamp(4rem, 9vw, 11rem);

  line-height: .78;
}



/* ==================================================
   10. DE UNA PALABRA A PREGUNTAS
================================================== */

.questions-story {
  position: relative;

  height: 300vh;

  background: #f2f2f2;

  color: var(--ink);
}


.questions-story-sticky {
  position: sticky;

  top: 80px;

  height:
    calc(100vh - 80px);

  overflow: hidden;
}


.questions-story-inner {
  position: relative;

  height: 100%;
}


.questions-story-inner >
.redaccion-kicker {
  position: absolute;

  top:
    clamp(45px, 5vw, 70px);

  left: var(--page-x);

  z-index: 10;
}


.questions-stage {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;
}


.questions-main,
.big-question {
  position: absolute;

  width:
    calc(100% - var(--page-x) * 2);

  max-width: 1200px;

  margin: 0;
}


.questions-main p {
  margin: 0;

  font-size:
    clamp(4rem, 8vw, 9rem);

  line-height: .81;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-display);

  will-change:
    transform,
    opacity;
}


.big-question {
  font-size:
    clamp(4.3rem, 9vw, 10rem);

  line-height: .8;

  font-weight: var(--weight-medium);

  letter-spacing: -.065em;

  opacity: 0;

  transform:
    translateY(80px)
    scale(.96);

  will-change:
    transform,
    opacity;
}


.questions-progress {
  position: absolute;

  left: var(--page-x);
  right: var(--page-x);

  bottom:
    clamp(35px, 4vw, 55px);

  height: 1px;

  background:
    rgba(0,0,0,.15);
}


.questions-progress span {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--ink);

  transform: scaleX(0);
  transform-origin: left center;
}



/* ==================================================
   11. PRINCIPIOS
================================================== */

.principle-screen {
  min-height:
    calc(100vh - 80px);

  display: flex;

  align-items: center;

  padding:
    clamp(80px, 8vw, 130px)
    0;
}


.principle-light {
  background: var(--white);

  color: var(--ink);
}


.principle-dark {
  background: var(--black);

  color: var(--white);
}


.principle-inner {
  display: grid;

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

  column-gap:
    clamp(14px, 1.4vw, 26px);

  align-items: start;
}


.principle-number {
  grid-column: 1 / 4;

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

  line-height: .7;

  opacity: .18;
}


.principle-copy {
  grid-column: 4 / 12;
}


.principle-copy h2 {
  max-width: 900px;

  margin:
    clamp(45px, 5vw, 70px)
    0
    0;

  font-size:
    clamp(4rem, 7vw, 8.5rem);

  line-height: .81;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-display);
}


.principle-description {
  max-width: 420px;

  margin:
    clamp(50px, 6vw, 85px)
    0
    0;

  font-size:
    clamp(1.05rem, 1.35vw, 1.4rem);

  line-height: 1.55;

  opacity: .65;
}



/* ==================================================
   12. MÉTODO
================================================== */

.method-story {
  min-height:
    calc(100vh - 80px);

  padding:
    clamp(110px, 12vw, 190px)
    0;

  background: var(--white);

  color: var(--ink);
}


.method-title {
  margin:
    clamp(45px, 5vw, 70px)
    0
    0;

  font-size:
    clamp(4.5rem, 8vw, 9.5rem);

  line-height: .79;

  font-weight: var(--weight-medium);

  letter-spacing: -.07em;
}


.method-title em {
  display: block;

  font-style: italic;

  font-weight: var(--weight-regular);
}


.method-steps {
  margin-top:
    clamp(90px, 11vw, 170px);

  border-top:
    1px solid rgba(0,0,0,.18);
}


.method-step {
  display: grid;

  grid-template-columns:
    minmax(80px, 2fr)
    minmax(0, 10fr);

  align-items: center;

  padding:
    clamp(32px, 4vw, 55px)
    0;

  border-bottom:
    1px solid rgba(0,0,0,.18);

  opacity: 0;

  transform:
    translateX(70px);

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


.method-step.is-visible {
  opacity: 1;

  transform:
    translateX(0);
}


.method-step:nth-child(2) {
  transition-delay: .1s;
}


.method-step:nth-child(3) {
  transition-delay: .2s;
}


.method-step span {
  font-size:
    clamp(2.5rem, 4vw, 4.8rem);

  line-height: .8;

  opacity: .3;
}


.method-step p {
  margin: 0;

  font-size:
    clamp(3.4rem, 6vw, 7rem);

  line-height: .82;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-display);
}



/* ==================================================
   13. ARTÍCULOS
================================================== */

.redaccion-articles {
  padding:
    clamp(110px, 12vw, 190px)
    0;

  background: #f2f2f2;

  color: var(--ink);

  overflow: hidden;
}


.articles-heading {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 50px;
}


.articles-title {
  max-width: 800px;

  margin:
    45px
    0
    0;

  font-size:
    clamp(3.8rem, 6.5vw, 7.5rem);

  line-height: .82;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-display);
}


.articles-drag {
  margin: 0;

  font-size: var(--small);

  letter-spacing: .04em;

  opacity: .45;
}


.articles-viewport {
  width:
    calc(100% + var(--page-x));

  margin-top:
    clamp(70px, 8vw, 120px);

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  cursor: grab;

  scroll-snap-type:
    x mandatory;

  overscroll-behavior-x: contain;
}


.articles-viewport::-webkit-scrollbar {
  display: none;
}


.articles-viewport.is-dragging {
  cursor: grabbing;

  user-select: none;
}


.articles-track {
  display: flex;

  width: max-content;

  gap:
    clamp(18px, 2vw, 30px);

  padding-right: var(--page-x);
}


.article-card {
  width:
    clamp(320px, 39vw, 550px);

  flex: 0 0 auto;

  color: var(--ink);

  text-decoration: none;

  scroll-snap-align: start;
}


.article-number {
  display: block;

  margin-bottom: 20px;

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

  line-height: .8;

  opacity: .35;
}


.article-image {
  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  background: #ddd;
}


.article-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: grayscale(1);

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


.article-card:hover
.article-image img {
  transform:
    scale(1.035);
}


.article-category {
  margin:
    25px
    0
    15px;

  font-size: var(--small);

  line-height: 1.4;

  letter-spacing: .035em;

  opacity: .45;
}


.article-card h3 {
  max-width: 450px;

  margin: 0;

  font-size:
    clamp(1.6rem, 2.4vw, 2.8rem);

  line-height: .98;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-title);
}



/* ==================================================
   PROGRESO ARTÍCULOS
================================================== */

.articles-scroll-line {
  width: 100%;
  height: 1px;

  margin-top:
    clamp(45px, 5vw, 75px);

  background:
    rgba(0,0,0,.15);

  overflow: hidden;
}


.articles-scroll-line span {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--ink);

  transform:
    scaleX(.33);

  transform-origin: left center;

  transition:
    transform
    .25s
    ease;
}



/* ==================================================
   14. VIDEOS TIKTOK
================================================== */

.redaccion-videos {
  padding:
    clamp(110px, 12vw, 190px)
    0;

  background: var(--black);

  color: var(--white);

  overflow: hidden;
}



/* ==================================================
   VIDEOS HEADER
================================================== */

.videos-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;
}


.videos-title {
  max-width: 950px;

  margin:
    45px
    0
    0;

  font-size:
    clamp(4rem, 7vw, 8.5rem);

  line-height: .81;

  font-weight:
    var(--weight-medium);

  letter-spacing:
    var(--tracking-display);
}


.videos-drag {
  margin: 0;

  font-size: var(--small);

  letter-spacing: .04em;

  opacity: .45;
}



/* ==================================================
   VIDEOS VIEWPORT
================================================== */

.videos-viewport {
  width:
    calc(100% + var(--page-x));

  margin-top:
    clamp(75px, 9vw, 135px);

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  cursor: grab;

  scroll-snap-type:
    x mandatory;

  overscroll-behavior-x:
    contain;
}


.videos-viewport::-webkit-scrollbar {
  display: none;
}


.videos-viewport.is-dragging {
  cursor: grabbing;

  user-select: none;
}



/* ==================================================
   VIDEOS TRACK
================================================== */

.videos-track {
  display: flex;

  align-items: flex-start;

  width: max-content;

  gap:
    clamp(18px, 2vw, 32px);

  padding-right:
    var(--page-x);
}



/* ==================================================
   VIDEO CARD
================================================== */

.video-card {
  width:
    clamp(260px, 25vw, 390px);

  flex: 0 0 auto;

  scroll-snap-align: start;

  opacity: 0;

  transform:
    translateY(70px);

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


.video-card.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


.video-card:nth-child(2) {
  transition-delay: .08s;
}


.video-card:nth-child(3) {
  transition-delay: .16s;
}


.video-card:nth-child(4) {
  transition-delay: .24s;
}



/* ==================================================
   VIDEO TOP
================================================== */

.video-card-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 16px;
}


.video-card-top span {
  font-size:
    clamp(2rem, 3vw, 3.4rem);

  line-height: .8;

  opacity: .28;
}


.video-card-top p {
  margin: 0;

  font-size: var(--small);

  letter-spacing: .04em;

  opacity: .4;
}



/* ==================================================
   VIDEO 9:16
================================================== */

.video-tiktok-frame {
  position: relative;

  width: 100%;

  aspect-ratio: 9 / 16;

  overflow: hidden;

  background: #111;
}


.video-tiktok-frame video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  background: #111;
}


.video-tiktok-frame::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

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

  transition:
    border-color
    .35s
    ease;
}


.video-card:hover
.video-tiktok-frame::after {
  border-color:
    rgba(255,255,255,.4);
}



/* ==================================================
   VIDEO COPY
================================================== */

.video-card-copy {
  padding-top: 24px;
}


.video-company {
  margin:
    0
    0
    14px;

  font-size: var(--small);

  line-height: 1.35;

  letter-spacing: .035em;

  opacity: .42;
}


.video-card-copy h3 {
  max-width: 340px;

  margin: 0;

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

  line-height: 1;

  font-weight: var(--weight-medium);

  letter-spacing:
    var(--tracking-title);
}



/* ==================================================
   PROGRESO VIDEOS
================================================== */

.videos-scroll-line {
  width: 100%;
  height: 1px;

  margin-top:
    clamp(50px, 6vw, 85px);

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

  overflow: hidden;
}


.videos-scroll-line span {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--white);

  transform:
    scaleX(.25);

  transform-origin:
    left center;

  transition:
    transform
    .25s
    ease;
}



/* ==================================================
   15. REVEALS
================================================== */

.reveal-up,
.reveal-text {
  opacity: 0;

  transform:
    translateY(50px);

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


.reveal-up.is-visible,
.reveal-text.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


.reveal-scale {
  opacity: 0;

  transform:
    translateY(50px)
    scale(.94);

  transition:
    opacity
    .7s
    ease,
    transform
    1.1s
    cubic-bezier(.16,1,.3,1);
}


.reveal-scale.is-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}





/* ==================================================
   FAQ
================================================== */

.redaccion-faq {
  padding-top:
    clamp(
      90px,
      9vw,
      140px
    );

  padding-bottom:
    clamp(
      80px,
      9vw,
      140px
    );

  background: var(--white);
  color: var(--ink);
}


.redaccion-faq .faq-label {
  margin-bottom:
    clamp(
      45px,
      5vw,
      70px
    );
}


.redaccion-faq details {
  border-top:
    1px
    solid
    var(--ink);

  transition:
    background-color
    .3s
    ease;
}


.redaccion-faq details:last-child {
  border-bottom:
    1px
    solid
    var(--ink);
}


.redaccion-faq details:hover {
  background: #f4f4f4;
}


.redaccion-faq summary {
  position: relative;

  cursor: pointer;

  list-style: none;

  padding:
    28px
    50px
    28px
    0;

  font-size:
    clamp(
      .95rem,
      1vw,
      1.05rem
    );

  line-height: 1.4;

  font-weight:
    var(--weight-medium);

  letter-spacing: -.01em;

  color: var(--ink);
}


.redaccion-faq summary::-webkit-details-marker {
  display: none;
}


.redaccion-faq summary::after {
  content: "+";

  position: absolute;

  right: 0;
  top: 50%;

  transform:
    translateY(-50%);

  font-size: 1.35rem;

  font-weight: 300;
}


.redaccion-faq details[open]
summary::after {
  content: "−";
}


.redaccion-faq .faq-answer {
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

  transition:
    grid-template-rows
    .45s
    cubic-bezier(.16, 1, .3, 1),
    opacity
    .35s
    ease;
}


.redaccion-faq details[open]
.faq-answer {
  grid-template-rows: 1fr;

  opacity: 1;
}


.redaccion-faq .faq-answer p {
  overflow: hidden;

  max-width: 620px;

  margin: 0;

  padding:
    0
    0
    30px;

  font-size:
    clamp(
      .88rem,
      .95vw,
      1rem
    );

  line-height: 1.6;

  font-weight:
    var(--weight-regular);

  letter-spacing:
    var(--tracking-body);
}


/* ==================================================
   16. NAV
================================================== */

.redaccion-nav {
  display: grid;

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

  background: var(--white);

  border-top:
    1px
    solid
    rgba(0,0,0,.18);
}


.redaccion-nav a {
  padding:
    25px
    0;

  color: var(--ink);

  font-size: var(--small);

  font-weight: var(--weight-medium);

  text-decoration: none;

  border-right:
    1px
    solid
    rgba(0,0,0,.16);
}


.redaccion-nav a:nth-child(2),
.redaccion-nav a:nth-child(3) {
  text-align: center;
}


.redaccion-nav a:last-child {
  text-align: right;

  border-right: 0;
}



/* ==================================================
   17. TABLET
================================================== */

@media (max-width: 992px) {

  .principle-copy {
    grid-column: 4 / 13;
  }


  .video-card {
    width:
      clamp(250px, 34vw, 350px);
  }

}



/* ==================================================
   18. MÓVIL
================================================== */

@media (max-width: 700px) {

  .redaccion-page {
    padding-top: 70px;
  }


  .story-screen,
  .story-screen-inner,
  .story-centered {
    min-height:
      calc(100svh - 70px);
  }



  /* GOOGLE */

  .story-meta {
    padding-top: 30px;
  }


  .story-meta p:last-child {
    display: none;
  }


  .story-google-title {
    font-size:
      clamp(
        3.6rem,
        16vw,
        5.6rem
      );
  }



  /* AHÍ ENTRÉ */

  .entered-title {
    font-size:
      clamp(
        4.5rem,
        20vw,
        7rem
      );
  }


  .entered-before {
    max-width: 290px;

    margin-left: auto;
    margin-right: auto;
  }



  /* EMAIL */

  .email-inner {
    min-height:
      calc(100svh - 70px);
  }


  .email-title {
    font-size:
      clamp(
        3rem,
        13vw,
        4.8rem
      );
  }


  .email-numbers {
    gap: 14px;
  }


  .email-before,
  .email-after {
    font-size:
      clamp(
        5rem,
        22vw,
        8rem
      );
  }


  .email-labels {
    gap: 12px;
  }



  /* COMPANIES */

  .companies-story-title {
    font-size:
      clamp(
        3rem,
        13vw,
        5rem
      );
  }


  .company-simple {
    grid-template-columns:
      65px
      1fr;
  }


  .company-simple h3 {
    font-size:
      clamp(
        2.7rem,
        12vw,
        4.3rem
      );
  }



  /* PREGUNTA */

  .question-title {
    font-size:
      clamp(
        4rem,
        18vw,
        6rem
      );
  }



  /* JOURNEY */

  .journey-title {
    font-size:
      clamp(
        3.4rem,
        15vw,
        5.3rem
      );
  }



  /* SOURCES */

  .source-screen {
    top: 70px;

    height:
      calc(100svh - 70px);

    min-height:
      calc(100svh - 70px);
  }


  .source-screen-word h2 {
    font-size:
      clamp(
        5rem,
        24vw,
        9rem
      );
  }


  .source-screen-other h2 {
    font-size:
      clamp(
        3rem,
        14vw,
        5rem
      );
  }


  .source-intro-copy {
    font-size:
      clamp(
        3rem,
        14vw,
        5rem
      );
  }



  /* QUESTIONS */

  .questions-story {
    height: 290vh;
  }


  .questions-story-sticky {
    top: 70px;

    height:
      calc(100svh - 70px);
  }


  .questions-main p,
  .big-question {
    font-size:
      clamp(
        3rem,
        14vw,
        5rem
      );
  }



  /* PRINCIPLES */

  .principle-screen {
    min-height:
      calc(100svh - 70px);
  }


  .principle-inner {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    row-gap: 50px;
  }


  .principle-number {
    grid-column: 1 / 3;
  }


  .principle-copy {
    grid-column: 1 / 7;
  }


  .principle-copy h2 {
    font-size:
      clamp(
        3rem,
        13vw,
        5rem
      );
  }



  /* METHOD */

  .method-title {
    font-size:
      clamp(
        3.5rem,
        15vw,
        5.5rem
      );
  }


  .method-step {
    grid-template-columns:
      60px
      1fr;
  }


  .method-step p {
    font-size:
      clamp(
        2.8rem,
        12vw,
        4.5rem
      );
  }



  /* ARTICLES */

  .articles-heading {
    align-items: flex-start;
  }


  .articles-title {
    font-size:
      clamp(
        3rem,
        13vw,
        4.8rem
      );
  }


  .articles-drag {
    display: none;
  }


  .article-card {
    width: 80vw;
  }



  /* VIDEOS */

  .videos-heading {
    align-items: flex-start;
  }


  .videos-title {
    font-size:
      clamp(
        3.4rem,
        14vw,
        5rem
      );
  }


  .videos-drag {
    display: none;
  }


  .video-card {
    width:
      min(
        72vw,
        330px
      );
  }


  .video-card-copy h3 {
    font-size:
      clamp(
        1.25rem,
        5vw,
        1.7rem
      );
  }



  /* NAV */

  .redaccion-nav {
    grid-template-columns:
      1fr
      1fr;
  }

}



/* ==================================================
   19. MÓVIL PEQUEÑO
================================================== */

@media (max-width: 480px) {

  .company-simple {
    grid-template-columns:
      55px
      1fr;
  }


  .company-simple-description {
    max-width: 280px;
  }


  .video-card {
    width: 76vw;
  }

}



/* ==================================================
   20. REDUCED MOTION
================================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;

    transition-duration: .001ms !important;
  }


  .title-line,
  .reveal-up,
  .reveal-text,
  .reveal-scale,
  .company-simple,
  .question-title span,
  .source-screen h2,
  .method-step,
  .video-card {
    opacity: 1 !important;

    transform: none !important;
  }


  .redaccion-progress {
    display: none;
  }

}