/* ==================================================
   ILUSIÓN
   CASE STUDY
   BLANCO / NEGRO / EDITORIAL
================================================== */


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

.illusion-page {
  width: 100%;

  padding-top: 80px;

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

  overflow-x: clip;
}


.illusion-shell {
  width: 100%;

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


.illusion-kicker {
  margin: 0;

  font-size: var(--small);

  line-height: 1.4;

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

  letter-spacing: .04em;

  text-transform: uppercase;
}


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


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

.illusion-progress {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  z-index: 9999;

  pointer-events: none;
}


.illusion-progress-bar {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--ink);

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


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

.illusion-hero {
  position: relative;

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

  background: var(--black);

  color: var(--white);

  overflow: hidden;
}


.illusion-hero-grid {
  min-height:
    calc(100vh - 80px);

  display: grid;

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

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

  align-items: end;
}


.illusion-hero-photo-wrap {
  grid-column: 1 / 5;

  align-self: end;

  height: 82vh;

  overflow: hidden;
}


.illusion-hero-photo {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    grayscale(1)
    contrast(1.05);
}


.illusion-hero-copy {
  grid-column: 6 / 13;

  align-self: center;

  padding:
    80px
    0;
}


.illusion-brand {
  margin:
    25px
    0
    0;

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

  letter-spacing: -.035em;
}


.illusion-hero-title {
  margin:
    35px
    0
    0;

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

  line-height: .86;

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

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


/* ==================================================
   HERO LÍNEAS
================================================== */

.hero-line {
  display: block;

  opacity: 0;

  transform:
    translateY(55px);
}


.hero-line-1 {
  animation:
    illusionHeroLine
    .9s
    .15s
    cubic-bezier(.16, 1, .3, 1)
    forwards;
}


.hero-line-2 {
  animation:
    illusionHeroLine
    .9s
    .35s
    cubic-bezier(.16, 1, .3, 1)
    forwards;
}


.hero-line-3 {
  animation:
    illusionHeroLine
    .9s
    .55s
    cubic-bezier(.16, 1, .3, 1)
    forwards;
}


.hero-line-4 {
  animation:
    illusionHeroLine
    .9s
    .75s
    cubic-bezier(.16, 1, .3, 1)
    forwards;
}


@keyframes illusionHeroLine {

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


.hero-soft {
  opacity: 0;

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


@keyframes heroSoftReveal {

  to {
    opacity: 1;
  }

}


.reveal-photo {
  opacity: 0;

  transform:
    translateY(70px);

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


@keyframes illusionPhoto {

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* ==================================================
   FLECHA
================================================== */

.illusion-scroll {
  position: absolute;

  left: 50%;
  bottom: 30px;

  transform:
    translateX(-50%);

  opacity: .5;

  animation:
    illusionArrow
    1.6s
    ease-in-out
    infinite;
}


@keyframes illusionArrow {

  0%,
  100% {
    transform:
      translate(-50%, 0);
  }

  50% {
    transform:
      translate(-50%, 7px);
  }

}


/* ==================================================
   SECCIÓN GENÉRICA
================================================== */

.illusion-section {
  position: relative;

  width: 100%;

  padding:
    clamp(
      100px,
      11vw,
      170px
    )
    0;
}


.illusion-section-light {
  background: var(--white);
  color: var(--ink);
}


.illusion-section-dark {
  background: var(--black);
  color: var(--white);
}


.illusion-section-grid {
  display: grid;

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

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

  margin-top:
    clamp(
      55px,
      6vw,
      90px
    );
}


.illusion-section-title {
  grid-column: 1 / 8;
}


.illusion-section-title h2 {
  margin: 0;

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

  line-height: .86;

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

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


.illusion-section-copy {
  grid-column: 9 / 13;

  align-self: end;
}


.illusion-section-copy p {
  max-width: 330px;

  margin:
    0
    0
    20px;

  font-size: var(--body);

  line-height: 1.6;

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


/* ==================================================
   EXPERTAS
================================================== */

.illusion-expertas {
  min-height:
    calc(100vh - 80px);

  display: flex;

  align-items: center;

  background: var(--black);

  color: var(--white);
}


.illusion-expertas-grid {
  display: grid;

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

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


.illusion-expertas-intro {
  grid-column: 1 / 4;
}


.illusion-expertas-context {
  margin:
    55px
    0
    0;

  font-size: var(--body);

  line-height: 1.55;

  opacity: .6;
}


.illusion-expertas h2 {
  grid-column: 5 / 13;

  margin: 0;

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

  line-height: .82;

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

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


.illusion-expertas h2 em {
  display: block;

  font-style: italic;

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


/* ==================================================
   PROBLEMA HORIZONTAL
================================================== */

.illusion-problem {
  position: relative;

  height: 180vh;

  background: var(--black);
}


.illusion-problem-sticky {
  position: sticky;

  top: 80px;

  height:
    calc(100vh - 80px);

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding:
    0
    var(--page-x);

  background: var(--black);

  color: var(--white);

  overflow: hidden;
}


.illusion-problem-sticky >
.illusion-kicker {
  position: absolute;

  top: 50px;
}


.illusion-problem-track {
  width: max-content;

  display: flex;

  align-items: center;

  gap:
    clamp(
      40px,
      5vw,
      80px
    );

  white-space: nowrap;

  will-change: transform;
}


.illusion-problem-track span {
  display: inline-block;

  font-size:
    clamp(
      3.5rem,
      7vw,
      8rem
    );

  line-height: .84;

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

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


.illusion-separator {
  opacity: .2;
}


/* ==================================================
   CANALES DISPERSOS
================================================== */

.illusion-channels-before {
  padding:
    clamp(
      100px,
      11vw,
      170px
    )
    0;

  background: var(--black);

  color: var(--white);
}


.illusion-channels-before-title {
  max-width: 800px;

  margin:
    55px
    0
    70px;

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

  line-height: .84;

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

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


.illusion-channel-grid {
  display: grid;

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

  border-top:
    1px
    solid
    rgba(255,255,255,.2);

  border-left:
    1px
    solid
    rgba(255,255,255,.2);
}


.illusion-channel {
  min-height: 150px;

  display: flex;

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

  padding: 25px;

  border-right:
    1px
    solid
    rgba(255,255,255,.2);

  border-bottom:
    1px
    solid
    rgba(255,255,255,.2);

  font-size:
    clamp(
      .9rem,
      1.1vw,
      1.1rem
    );

  text-transform: uppercase;

  letter-spacing: .03em;
}


/* ==================================================
   CARRUSEL CINEMATOGRÁFICO
================================================== */

.illusion-questions-cinema {
  position: relative;

  width: 100%;

  background: var(--black);

  color: var(--white);

  overflow: hidden;
}


.illusion-questions-heading {
  position: absolute;

  top:
    clamp(
      35px,
      4vw,
      60px
    );

  left: 0;

  z-index: 20;

  display: flex;

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

  pointer-events: none;
}


.illusion-questions-counter {
  margin: 0;

  font-size: var(--small);

  letter-spacing: .03em;

  opacity: .55;
}


.illusion-cinema-slider {
  position: relative;

  width: 100%;

  height:
    calc(100vh - 80px);

  min-height: 700px;

  overflow: hidden;

  background: var(--black);
}


.cinema-question {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  visibility: hidden;

  transform:
    scale(1.04);

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


.cinema-question.is-active {
  opacity: 1;

  visibility: visible;

  transform:
    scale(1);
}


.cinema-question-bg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(1)
    contrast(1.05);

  transform:
    scale(1.08);

  transition:
    transform
    7s
    cubic-bezier(.2, .6, .2, 1);
}


.cinema-question.is-active
.cinema-question-bg {
  transform:
    scale(1);
}


.cinema-question-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.85) 0%,
      rgba(0,0,0,.58) 38%,
      rgba(0,0,0,.18) 72%,
      rgba(0,0,0,.28) 100%
    );
}


.cinema-question-overlay::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      0deg,
      rgba(0,0,0,.48) 0%,
      transparent 42%
    );
}


.cinema-question-content {
  position: relative;

  z-index: 5;

  height: 100%;

  display: grid;

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

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

  align-content: center;
}


.cinema-question-number {
  grid-column: 1 / 3;

  align-self: start;

  padding-top: .2em;

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

  line-height: .8;

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

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

  opacity: .25;
}


.cinema-question h2 {
  grid-column: 4 / 11;

  margin: 0;

  max-width: 900px;

  font-size:
    clamp(
      3.5rem,
      7vw,
      8rem
    );

  line-height: .84;

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

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

  color: var(--white);

  opacity: 0;

  transform:
    translateY(70px);

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


.cinema-question.is-active h2 {
  opacity: 1;

  transform:
    translateY(0);
}


/* CONTROLES */

.illusion-cinema-controls {
  position: absolute;

  left: 0;

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

  z-index: 25;

  display: grid;

  grid-template-columns:
    auto
    minmax(120px, 280px)
    auto;

  align-items: center;

  gap: 22px;
}


.cinema-prev,
.cinema-next {
  width: 45px;
  height: 45px;

  padding: 0;

  display: flex;

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

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

  border-radius: 50%;

  background: transparent;

  color: var(--white);

  font-size: 1rem;

  cursor: pointer;

  transition:
    background
      .3s
      ease,
    color
      .3s
      ease,
    transform
      .35s
      cubic-bezier(.16, 1, .3, 1);
}


.cinema-prev:hover,
.cinema-next:hover {
  background: var(--white);

  color: var(--black);

  transform:
    scale(1.06);
}


.cinema-progress {
  position: relative;

  height: 1px;

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

  overflow: hidden;
}


.cinema-progress span {
  display: block;

  width: 20%;
  height: 100%;

  background: var(--white);

  transform:
    translateX(0);

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


/* ==================================================
   PREGUNTA ESTRATÉGICA
================================================== */

.illusion-question-screen {
  position: relative;

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

  display: flex;

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

  padding:
    80px
    var(--page-x);

  background: var(--black);

  color: var(--white);

  text-align: center;
}


.illusion-question-screen >
.illusion-kicker {
  position: absolute;

  top: 55px;
  left: var(--page-x);
}


.illusion-question-screen h2 {
  max-width: 1100px;

  margin: 0;

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

  line-height: .81;

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

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


/* ==================================================
   DISCOVERIES
================================================== */

.illusion-discoveries {
  padding:
    clamp(
      100px,
      11vw,
      170px
    )
    0;

  background: var(--black);

  color: var(--white);
}


.illusion-discovery-grid {
  display: grid;

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

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


.illusion-discovery {
  min-height: 380px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 35px;

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


.illusion-discovery > span {
  margin-bottom: auto;

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

  opacity: .2;
}


.illusion-discovery > p {
  margin:
    0
    0
    20px;

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


.illusion-discovery h3 {
  margin: 0;

  font-size:
    clamp(
      1.8rem,
      2.8vw,
      3.4rem
    );

  line-height: .94;

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

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


/* ==================================================
   INSIGHT
================================================== */

.illusion-insight {
  min-height:
    calc(100vh - 80px);

  display: flex;

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

  padding:
    80px
    var(--page-x);

  background: var(--black);

  color: var(--white);

  text-align: center;
}


.illusion-insight-inner {
  max-width: 1100px;
}


.illusion-insight-small {
  margin:
    30px
    0
    0;

  font-size:
    clamp(
      1.2rem,
      1.7vw,
      1.8rem
    );

  opacity: .5;
}


.illusion-insight h2 {
  margin:
    35px
    0
    0;

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

  line-height: .81;

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

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


/* ==================================================
   OPCIONES
================================================== */

.illusion-options {
  padding-top:
    clamp(
      100px,
      11vw,
      170px
    );

  padding-bottom:
    clamp(
      110px,
      12vw,
      190px
    );
}


.illusion-options-grid {
  display: grid;

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

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

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


.illusion-options-secondary {
  grid-column: 1 / 5;

  display: flex;

  flex-direction: column;

  gap: 60px;
}


.illusion-option-small {
  width: 100%;

  padding-top: 20px;

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


.illusion-option-small span {
  font-size: var(--small);

  opacity: .4;
}


.illusion-option-small h3 {
  width: 100%;

  margin:
    25px
    0
    15px;

  font-size:
    clamp(
      1.2rem,
      1.6vw,
      1.7rem
    );

  line-height: 1.1;

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


.illusion-option-small p {
  width: 90%;
  max-width: none;

  margin: 0;

  font-size: var(--small);

  line-height: 1.55;

  text-align: justify;
  text-align-last: left;

  opacity: .65;
}


.illusion-option-main {
  grid-column: 6 / 13;

  min-height: 600px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding:
    clamp(
      35px,
      5vw,
      70px
    );

  background: var(--black);

  color: var(--white);
}


.illusion-option-number {
  margin-bottom: auto;

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

  line-height: .8;

  opacity: .12;
}


.illusion-option-main h2 {
  width: 100%;

  margin:
    30px
    0;

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

  line-height: .84;

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

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


.illusion-option-main-copy {
  width: 85%;
  max-width: 100%;

  margin: 0;

  font-size: var(--body);

  line-height: 1.55;

  text-align: justify;
  text-align-last: left;
}

/* ==================================================
   CRITERIOS
================================================== */

.illusion-criteria {
  padding:
    clamp(
      100px,
      11vw,
      170px
    )
    0;

  background: var(--black);

  color: var(--white);
}


.illusion-criteria-cards {
  margin-top:
    clamp(
      60px,
      7vw,
      100px
    );

  display: grid;

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


.illusion-criterion {
  min-height: 520px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding:
    clamp(
      30px,
      4vw,
      55px
    );

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


.illusion-criterion span {
  margin-bottom: auto;

  font-size: var(--small);

  opacity: .4;
}


.illusion-criterion h2 {
  margin: 0;

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

  line-height: .86;

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

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


/* ==================================================
   BUILD
================================================== */

.illusion-build {
  padding-top:
    clamp(
      100px,
      11vw,
      170px
    );

  padding-bottom:
    clamp(
      100px,
      12vw,
      190px
    );
}


.illusion-build-grid {
  display: grid;

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

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

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


.illusion-build-title {
  grid-column: 1 / 6;
}


.illusion-build-title h2 {
  position: sticky;

  top: 140px;

  margin: 0;

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

  line-height: .84;

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

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


.illusion-build-list {
  grid-column: 7 / 13;
}


.illusion-build-item {
  display: grid;

  grid-template-columns:
    55px
    1fr;

  gap: 25px;

  padding:
    35px
    0;

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


.illusion-build-item:last-child {
  border-bottom:
    1px
    solid
    rgba(0,0,0,.2);
}


.illusion-build-item span {
  font-size: var(--small);

  opacity: .4;
}


.illusion-build-item p {
  margin: 0;

  font-size:
    clamp(
      1.15rem,
      1.7vw,
      1.8rem
    );

  line-height: 1.25;
}


/* ==================================================
   BLOG EXPERTA
================================================== */

.illusion-blog-born {
  position: relative;

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

  display: flex;

  flex-direction: column;

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

  padding:
    80px
    var(--page-x);

  background: var(--black);

  color: var(--white);

  text-align: center;
}


.illusion-blog-born h2 {
  margin:
    45px
    0
    0;

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

  line-height: .77;

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

  letter-spacing: -.07em;
}


.illusion-blog-born h2 em {
  font-style: italic;

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


/* ==================================================
   TIPOS DE CONTENIDO
================================================== */

.illusion-content-types {
  padding-top:
    clamp(
      100px,
      11vw,
      170px
    );

  padding-bottom:
    clamp(
      100px,
      11vw,
      170px
    );
}


.illusion-content-type-grid {
  display: grid;

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

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

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

  border-left:
    1px
    solid
    rgba(0,0,0,.2);
}


.illusion-content-type {
  min-height: 210px;

  display: flex;

  align-items: flex-end;

  padding: 30px;

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

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

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

  letter-spacing: -.025em;
}


/* ==================================================
   SEO
================================================== */

.illusion-seo {
  min-height:
    calc(100vh - 80px);

  display: flex;

  align-items: center;

  background: var(--black);

  color: var(--white);
}


.illusion-seo-grid {
  display: grid;

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

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


.illusion-seo-grid >
.illusion-kicker {
  grid-column: 1 / 4;
}


.illusion-seo h2 {
  grid-column: 4 / 11;

  margin:
    55px
    0
    0;

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

  line-height: .84;

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

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


.illusion-search-demo {
  grid-column: 4 / 11;

  margin-top: 70px;

  display: flex;

  justify-content: space-between;

  padding:
    18px
    25px;

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

  border-radius: 100px;

  opacity: .7;

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


/* ==================================================
   CIERRE ESTRATÉGICO
================================================== */

.illusion-closing {
  min-height:
    calc(100vh - 80px);

  display: flex;

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

  padding:
    90px
    var(--page-x);

  background: var(--black);

  color: var(--white);

  text-align: center;
}


.illusion-closing-inner {
  max-width: 1100px;
}


.illusion-closing h2 {
  margin:
    45px
    auto
    0;

  max-width: 950px;

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

  line-height: .81;

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

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


.illusion-closing-copy {
  max-width: 480px;

  margin:
    55px
    auto
    0;

  font-size: var(--body);

  line-height: 1.6;

  opacity: .58;
}


.illusion-closing-rule {
  width: 1px;
  height: 90px;

  margin:
    65px
    auto;

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


.illusion-closing-final {
  margin: 0;

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

  line-height: .9;

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


/* ==================================================
   RESULTADOS
================================================== */

.illusion-result {
  padding:
    clamp(
      100px,
      12vw,
      190px
    )
    0;

  background: var(--white);
}


.illusion-result-grid {
  display: grid;

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

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


.illusion-result-grid >
.illusion-kicker {
  grid-column: 1 / 4;
}


.illusion-result-main {
  grid-column: 1 / 9;

  margin-top: 70px;
}


.illusion-result-number {
  margin: 0;

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

  line-height: .72;

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

  letter-spacing: -.075em;
}


.illusion-result-label {
  margin:
    35px
    0
    0;

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

  letter-spacing: -.03em;
}


.illusion-result-side {
  grid-column: 9 / 13;

  align-self: end;
}


.illusion-result-side p {
  max-width: 310px;

  margin: 0;

  font-size: var(--body);

  line-height: 1.6;
}


/* ==================================================
   EPÍLOGO
================================================== */

.illusion-epilogue {
  padding:
    clamp(
      110px,
      13vw,
      200px
    )
    0;

  background: var(--white);

  color: var(--ink);
}


.illusion-epilogue-title {
  max-width: 950px;

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

  font-size:
    clamp(
      3.5rem,
      7vw,
      8rem
    );

  line-height: .83;

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

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


/* ==================================================
   CAMPAÑAS
================================================== */

.illusion-campaigns {
  min-height:
    calc(100vh - 80px);

  display: flex;

  align-items: center;

  padding:
    90px
    0;

  background: var(--black);

  color: var(--white);

  overflow: hidden;
}


.illusion-campaigns-track {
  width: max-content;

  display: flex;

  align-items: center;

  gap:
    clamp(
      35px,
      5vw,
      80px
    );

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

  white-space: nowrap;

  will-change: transform;
}


.illusion-campaigns-track span {
  font-size:
    clamp(
      3.5rem,
      7vw,
      8rem
    );

  line-height: .84;

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

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


.illusion-campaigns-track span:nth-child(even) {
  opacity: .2;
}


/* ==================================================
   PODCAST
================================================== */

.illusion-podcast {
  min-height:
    calc(100vh - 80px);

  display: flex;

  align-items: center;

  padding:
    100px
    0;

  background: var(--black);

  color: var(--white);
}


.illusion-podcast-title {
  max-width: 820px;

  margin:
    55px
    0
    0;

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

  line-height: .84;

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

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


.illusion-podcast-player {
  margin:
    80px
    auto
    0;

  max-width: 850px;

  text-align: center;
}


.illusion-wave {
  overflow: hidden;

  white-space: nowrap;

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

  letter-spacing: .25em;

  opacity: .35;
}


.illusion-play {
  width: 70px;
  height: 70px;

  margin-top: 45px;

  border: 0;

  border-radius: 50%;

  background: var(--white);

  color: var(--black);

  cursor: pointer;

  font-size: 1rem;
}

.illusion-podcast-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.illusion-podcast-player {
  width: 100%;
  min-width: 0;
}

.illusion-podcast-player iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}


/* TABLET */

@media (max-width: 900px) {

  .illusion-podcast-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

}

/* ==================================================
   ECOSISTEMA
================================================== */

.illusion-ecosystem {
  padding-top:
    clamp(
      100px,
      11vw,
      170px
    );

  padding-bottom:
    clamp(
      100px,
      11vw,
      170px
    );
}


.illusion-ecosystem-title {
  max-width: 900px;

  margin:
    55px
    0
    90px;

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

  line-height: .84;

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

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


.illusion-ecosystem-grid {
  display: grid;

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

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

  border-left:
    1px
    solid
    rgba(0,0,0,.2);
}


.illusion-ecosystem-item {
  min-height: 180px;

  display: flex;

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

  padding: 25px;

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

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

  font-size: var(--small);

  letter-spacing: .04em;
}


.illusion-ecosystem-wide {
  grid-column: 2 / 3;
}


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

.illusion-articles {
  padding:
    clamp(
      100px,
      11vw,
      170px
    )
    0;

  background: #f3f3f3;

  overflow: hidden;
}


.illusion-articles-heading {
  display: flex;

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


.illusion-drag-label {
  margin: 0;

  font-size: var(--small);

  opacity: .55;
}


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

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

  overflow-x: auto;

  cursor: grab;

  scrollbar-width: none;

  scroll-snap-type: x mandatory;
}


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


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


.illusion-articles-track {
  display: flex;

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

  width: max-content;

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


.illusion-article-card {
  width:
    clamp(
      300px,
      38vw,
      520px
    );

  flex: 0 0 auto;

  scroll-snap-align: start;
}


.illusion-article-number {
  display: block;

  margin-bottom: 18px;

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


.illusion-article-image {
  width: 100%;
  overflow: hidden;
  background: #ddd;
}

.illusion-article-image img {
  width: 100%;
  height: auto;
  display: block;

  filter: grayscale(1);

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


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


.illusion-article-card h3 {
  margin:
    25px
    0
    15px;

  max-width: 420px;

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

  line-height: 1.05;

  letter-spacing: -.035em;
}


.illusion-article-card > p {
  margin: 0;

  font-size: var(--small);

  opacity: .5;
}


/* ==================================================
   COLLAGE
================================================== */

.illusion-collage {
  padding:
    clamp(
      100px,
      11vw,
      170px
    )
    0;

  background: var(--black);

  color: var(--white);
}


.illusion-collage-grid {
  display: grid;

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

  grid-auto-rows:
    clamp(
      70px,
      7vw,
      120px
    );

  gap:
    clamp(
      10px,
      1.4vw,
      22px
    );

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


.collage-item {
  margin: 0;

  overflow: hidden;

  background: #222;
}


.collage-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: grayscale(1);

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


.collage-item:hover img {
  transform:
    scale(1.035);
}


.collage-item-1 {
  grid-column: 1 / 8;
  grid-row: 1 / 5;
}


.collage-item-2 {
  grid-column: 8 / 13;
  grid-row: 1 / 3;
}


.collage-item-3 {
  grid-column: 8 / 13;
  grid-row: 3 / 6;
}


.collage-item-4 {
  grid-column: 1 / 5;
  grid-row: 5 / 8;
}


.collage-item-5 {
  grid-column: 5 / 13;
  grid-row: 6 / 9;
}


/* ==================================================
   NAV
================================================== */

.illusion-nav {
  display: grid;

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

  background: var(--white);

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


.illusion-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);
}


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


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

  border-right: 0;
}


/* ==================================================
   REVEALS
================================================== */

.reveal-up {
  opacity: 0;

  transform:
    translateY(55px);

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


.reveal-up.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);
}


.reveal-card {
  opacity: 0;

  transform:
    translateY(70px);

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


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

  transform:
    translateY(0);
}


.reveal-collage {
  opacity: 0;

  transform:
    translateY(70px)
    scale(.97);

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


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

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


/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

  .illusion-hero-copy {
    grid-column: 5 / 13;
  }


  .illusion-option-main {
    grid-column: 6 / 13;
  }

}


/* ==================================================
   MÓVIL
================================================== */

@media (max-width: 700px) {

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


  /* HERO */

  .illusion-hero,
  .illusion-hero-grid {
    min-height:
      calc(100svh - 70px);
  }


  .illusion-hero-grid {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));
  }


  .illusion-hero-photo-wrap {
    position: absolute;

    right: -10%;
    bottom: 0;

    width: 52%;
    height: 48%;

    opacity: .38;
  }


  .illusion-hero-copy {
    grid-column: 1 / 7;

    position: relative;

    z-index: 2;
  }


  .illusion-hero-title {
    font-size:
      clamp(
        2.7rem,
        12vw,
        4.5rem
      );
  }


  /* GENERALES */

  .illusion-section-grid,
  .illusion-expertas-grid,
  .illusion-seo-grid,
  .illusion-result-grid {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    row-gap: 45px;
  }


  .illusion-section-title,
  .illusion-expertas h2,
  .illusion-seo h2 {
    grid-column: 1 / 7;
  }


  .illusion-section-copy {
    grid-column: 3 / 7;
  }


  /* EXPERTAS */

  .illusion-expertas-intro {
    grid-column: 1 / 5;
  }


  /* PROBLEMA */

  .illusion-problem-sticky {
    top: 70px;

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


  .illusion-problem-track span {
    font-size:
      clamp(
        3rem,
        14vw,
        5rem
      );
  }


  /* CANALES */

  .illusion-channel-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  /* CINEMA */

  .illusion-cinema-slider {
    height:
      calc(100svh - 70px);

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


  .cinema-question-content {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    column-gap: 12px;
  }


  .cinema-question-number {
    grid-column: 1 / 3;

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


  .cinema-question h2 {
    grid-column: 1 / 7;

    margin-top: 80px;

    font-size:
      clamp(
        2.8rem,
        13vw,
        4.5rem
      );
  }


  .cinema-question-overlay {
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.4) 62%,
        rgba(0,0,0,.22) 100%
      );
  }


  .illusion-cinema-controls {
    grid-template-columns:
      auto
      1fr
      auto;
  }


  /* PREGUNTA */

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


  .illusion-question-screen h2,
  .illusion-insight h2,
  .illusion-closing h2 {
    font-size:
      clamp(
        3rem,
        14vw,
        5rem
      );
  }


  /* DISCOVERIES */

  .illusion-discovery-grid {
    grid-template-columns: 1fr;
  }


  /* OPCIONES */

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

    row-gap: 70px;
  }


  .illusion-options-secondary {
    grid-column: 1 / 7;

    display: grid;

    grid-template-columns:
      1fr
      1fr;

    gap: 30px;
  }


  .illusion-option-main {
    grid-column: 1 / 7;
  }


  /* CRITERIOS */

  .illusion-criteria-cards {
    grid-template-columns: 1fr;
  }


  .illusion-criterion {
    min-height: 380px;
  }


  /* BUILD */

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

    row-gap: 70px;
  }


  .illusion-build-title {
    grid-column: 1 / 7;
  }


  .illusion-build-title h2 {
    position: static;
  }


  .illusion-build-list {
    grid-column: 2 / 7;
  }


  /* TIPOS */

  .illusion-content-type-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  /* SEO */

  .illusion-search-demo {
    grid-column: 1 / 7;
  }


  /* RESULTADOS */

  .illusion-result-main {
    grid-column: 1 / 7;
  }


  .illusion-result-side {
    grid-column: 3 / 7;
  }


  .illusion-result-number {
    font-size:
      clamp(
        5rem,
        25vw,
        9rem
      );
  }


  /* CAMPAÑAS */

  .illusion-campaigns-track span {
    font-size:
      clamp(
        3rem,
        14vw,
        5rem
      );
  }


  /* ECOSISTEMA */

  .illusion-ecosystem-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .illusion-ecosystem-wide {
    grid-column: auto;
  }


  /* ARTICLES */

  .illusion-article-card {
    width: 78vw;
  }


  /* COLLAGE */

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

    grid-auto-rows: 80px;
  }


  .collage-item-1 {
    grid-column: 1 / 7;
    grid-row: 1 / 5;
  }


  .collage-item-2 {
    grid-column: 1 / 4;
    grid-row: 5 / 8;
  }


  .collage-item-3 {
    grid-column: 4 / 7;
    grid-row: 5 / 8;
  }


  .collage-item-4 {
    grid-column: 1 / 5;
    grid-row: 8 / 11;
  }


  .collage-item-5 {
    grid-column: 2 / 7;
    grid-row: 11 / 15;
  }


  /* NAV */

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

}


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

@media (max-width: 480px) {

  .illusion-hero-title {
    font-size:
      clamp(
        2.3rem,
        11vw,
        3.4rem
      );
  }


  .illusion-channel-grid,
  .illusion-content-type-grid,
  .illusion-ecosystem-grid {
    grid-template-columns: 1fr;
  }


  .illusion-options-secondary {
    grid-template-columns: 1fr;
  }


  .illusion-build-list {
    grid-column: 1 / 7;
  }


  .illusion-article-card {
    width: 84vw;
  }

}




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

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

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

  background: var(--white);

  color: var(--ink);
}


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


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

  transition:
    background-color
    .3s
    ease;
}


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


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


.illusion-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);
}


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


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

  position: absolute;

  right: 0;
  top: 50%;

  transform:
    translateY(-50%);

  font-size: 1.35rem;

  font-weight: 300;
}


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


.illusion-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;
}


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

  opacity: 1;
}


.illusion-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);
}


/* ==================================================
   ACCESIBILIDAD
================================================== */

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

  .hero-line,
  .hero-soft,
  .reveal-photo,
  .reveal-up,
  .reveal-scale,
  .reveal-card,
  .reveal-collage {
    opacity: 1 !important;

    transform: none !important;

    animation: none !important;

    transition: none !important;
  }


  .illusion-scroll {
    animation: none !important;
  }


  .illusion-progress {
    display: none;
  }

}