/* ==================================================
   TOTALPLAY
   APERTURA CINEMATOGRÁFICA + CARDS STICKY
================================================== */


/* ==================================================
   BASE
================================================== */

.case-page {
  width: 100%;

  padding-top: 80px;

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

  overflow-x: clip;
}


.case-shell {
  width: 100%;

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


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

.case-progress {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  z-index: 9999;

  pointer-events: none;
}


.case-progress-bar {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--ink);

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

  will-change: transform;
}


/* ==================================================
   LABELS
================================================== */

.case-kicker {
  margin: 0;

  font-size: var(--small);
  line-height: 1.4;
  font-weight: var(--weight-medium);

  letter-spacing: .03em;

  text-transform: uppercase;
}


/* ==================================================
   01. APERTURA
================================================== */

.case-opening {
  position: relative;

  width: 100%;

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


/* ==================================================
   PANELES
================================================== */

.opening-panel {
  position: sticky;

  top: 80px;

  width: 100%;

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

  display: flex;

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

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

  overflow: hidden;
}


.opening-panel-title {
  z-index: 1;
}


.opening-panel-marquee {
  z-index: 2;
}


.opening-panel-problem {
  z-index: 3;
}


/* ==================================================
   PANTALLA 1
================================================== */

.opening-panel-title {
  flex-direction: column;

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

  text-align: center;
}


.opening-kicker {
  position: absolute;

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

  left: var(--page-x);

  color: var(--white);
}


.opening-title {
  margin: 0;

  max-width: 1080px;

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

  line-height: .84;

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

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


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

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


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

.opening-scroll {
  position: absolute;

  bottom:
    clamp(
      30px,
      4vw,
      50px
    );

  font-size: 1.05rem;

  opacity: .45;

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


@keyframes openingArrow {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }

}


/* ==================================================
   PANTALLA 2 — MARQUEE
================================================== */

.opening-panel-marquee {
  padding: 0;
}


.opening-marquee {
  width: 100%;

  overflow: hidden;
}


.opening-marquee-track {
  width: max-content;

  display: flex;

  align-items: center;

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

  white-space: nowrap;

  transform: translateX(0);

  will-change: transform;
}


.opening-marquee-track span {
  display: inline-block;

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

  line-height: .9;

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

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


.opening-separator {
  opacity: .25;

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


/* ==================================================
   PANTALLA 3 — PROBLEMA
================================================== */

.opening-panel-problem {
  flex-direction: column;

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

  text-align: center;
}


.opening-problem-small {
  margin:
    0
    0
    clamp(
      25px,
      3vw,
      45px
    );

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

  line-height: 1.4;

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

  letter-spacing: .14em;

  opacity: .55;
}


.opening-panel-problem h2 {
  margin: 0;

  max-width: 1100px;

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

  line-height: .82;

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

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


/* ==================================================
   02. MÉTRICA
================================================== */

.case-metric-strip {
  position: relative;

  z-index: 5;

  width: 100%;

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

  padding-bottom:
    clamp(
      55px,
      6vw,
      90px
    );

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

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


.metric-strip-grid {
  display: grid;

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

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

  align-items: end;
}


.metric-strip-grid > p {
  grid-column: 1 / 11;

  margin: 0;

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

  line-height: .84;

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

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


.metric-number {
  display: inline-block;
}


.metric-number-main {
  font-size: 1.1em;
}


.metric-arrow {
  display: inline-block;

  margin:
    0
    .14em;

  opacity: .4;

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


.metric-copy {
  font-size: .53em;

  letter-spacing: -.035em;
}


.metric-mark {
  grid-column: 12 / 13;

  justify-self: end;

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


/* ==================================================
   MÉTRICA REVEAL
================================================== */

.metric-reveal {
  opacity: 0;

  transform:
    translateY(60px);

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


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

  transform: translateY(0);
}


/* ==================================================
   03. ANÁLISIS
================================================== */

.case-analysis {
  position: relative;

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

  padding-bottom:
    clamp(
      70px,
      8vw,
      120px
    );

  background: var(--white);
}


.case-analysis > .case-kicker {
  margin-bottom:
    clamp(
      55px,
      6vw,
      90px
    );
}


.case-analysis-grid {
  display: block;
}


/* ==================================================
   CONTEXTO
================================================== */

.case-analysis-context {
  width: 100%;

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


.case-analysis-context-inner {
  display: grid;

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

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


.case-analysis-context p {
  margin: 0;

  font-size: var(--small);

  line-height: 1.55;

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

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


.case-analysis-context p:nth-child(1) {
  grid-column: 1 / 4;
}


.case-analysis-context p:nth-child(2) {
  grid-column: 5 / 8;
}


.case-analysis-context p:nth-child(3) {
  grid-column: 9 / 13;
}


/* ==================================================
   04. CARDS STICKY
================================================== */

.case-patterns {
  position: relative;

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

  margin-left:
    calc(
      var(--page-x) * -1
    );
}


.pattern-item {
  position: sticky;

  top: 80px;

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

  display: grid;

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

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

  align-content: center;

  padding:
    clamp(
      70px,
      8vw,
      125px
    )
    var(--page-x);

  background: var(--white);

  color: var(--ink);

  border-radius:
    26px
    26px
    0
    0;

  box-shadow:
    0
    -18px
    55px
    rgba(0, 0, 0, .08);

  overflow: hidden;
}


.pattern-item:nth-child(1) {
  z-index: 1;
}


.pattern-item:nth-child(2) {
  z-index: 2;

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


.pattern-item:nth-child(3) {
  z-index: 3;

  background: #f2f2f2;
  color: var(--ink);
}


.pattern-item:nth-child(4) {
  z-index: 4;

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


/* ==================================================
   NÚMERO
================================================== */

.pattern-mark {
  grid-column: 1 / 4;

  align-self: start;

  display: block;

  margin: 0;
  padding: 0;

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

  line-height: .8;

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

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

  opacity: .12;

  transform: translateY(-25px);

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


.pattern-item.is-visible
.pattern-mark {
  opacity: .16;

  transform: translateY(0);
}


/* ==================================================
   CONTENIDO CARD
================================================== */

.pattern-content {
  grid-column: 5 / 12;

  align-self: center;

  max-width: 720px;

  opacity: .55;

  transform: translateY(45px);

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


.pattern-item.is-visible
.pattern-content {
  opacity: 1;

  transform: translateY(0);
}


/* ==================================================
   FRASE RÁPIDA
================================================== */

.pattern-eyebrow {
  max-width: 440px;

  margin:
    0
    0
    clamp(
      24px,
      2.5vw,
      38px
    );

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

  line-height: 1.2;

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

  letter-spacing: -.025em;

  opacity: .65;
}


/* ==================================================
   TÍTULO CARD
================================================== */

.pattern-item h2 {
  position: relative;

  width: max-content;
  max-width: 100%;

  margin:
    0
    0
    clamp(
      30px,
      3vw,
      50px
    );

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

  line-height: .86;

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

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

  color: inherit;
}


.pattern-item h2::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -.18em;

  width: 100%;
  height: 1px;

  background: currentColor;

  opacity: .28;

  transform: scaleX(0);

  transform-origin: left center;

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


.pattern-item.is-visible
h2::after {
  transform: scaleX(1);
}


/* ==================================================
   TEXTO CARD
================================================== */

.pattern-description {
  max-width: 520px;

  margin: 0;

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

  line-height: 1.55;

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

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

  color: inherit;
}


/* ==================================================
   HOVER
================================================== */

@media (hover: hover) {

  .pattern-item:hover
  .pattern-content {
    transform: translateX(10px);
  }

}


/* ==================================================
   05. VALIDACIÓN
================================================== */

.case-validation-grid {
  display: grid;

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

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

  margin-top:
    clamp(
      110px,
      12vw,
      190px
    );

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

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


.case-validation-grid
> div:first-child {
  grid-column: 1 / 6;
}


.case-validation-grid
> div:last-child {
  grid-column: 7 / 13;
}


.case-validation-grid
> div
> p:not(.case-kicker) {
  max-width: 390px;

  margin:
    26px
    0
    0;

  font-size: var(--body);

  line-height: var(--line-body);

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

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


.validation-big {
  font-size:
    clamp(
      1.4rem,
      2vw,
      2.3rem
    ) !important;

  line-height: 1.12 !important;

  letter-spacing: -.035em !important;
}


/* ==================================================
   06. RESULTADO FINAL
================================================== */

.case-result-strip {
  width: 100%;

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

  padding-bottom:
    clamp(
      65px,
      7vw,
      105px
    );

  background: var(--black);

  color: var(--white);

  overflow: hidden;
}


.result-strip-grid {
  display: grid;

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

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


.case-kicker-light {
  grid-column: 1 / 4;

  color: var(--white);
}


.case-result-title {
  grid-column: 7 / 13;

  margin: 0;

  font-size:
    clamp(
      2.9rem,
      5.4vw,
      6.8rem
    );

  line-height: .86;

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

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


.case-result-title span {
  display: inline-block;

  font-size: 1.12em;
}


.result-reveal {
  opacity: 0;

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

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


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

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


/* ==================================================
   07. FAQ
================================================== */

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

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

  background: var(--white);
}


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


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

  transition:
    background-color
      .3s
      ease;
}


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


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


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


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


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

  position: absolute;

  right: 0;
  top: 50%;

  transform: translateY(-50%);

  font-size: 1.35rem;

  font-weight: 300;
}


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


.faq-answer {
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

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


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

  opacity: 1;
}


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


/* ==================================================
   08. NAV
================================================== */

.case-nav {
  display: grid;

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

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

  background: var(--white);
}


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

  color: var(--ink);

  font-size: var(--small);

  line-height: 1.4;

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

  text-decoration: none;

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


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


.case-nav a:last-child {
  border-right: 0;

  text-align: right;
}


/* ==================================================
   REVEAL GENERAL
================================================== */

.reveal-up {
  opacity: 0;

  transform: translateY(45px);

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


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

  transform: translateY(0);
}


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

@media (max-width: 992px) {

  .pattern-content {
    grid-column: 4 / 13;
  }

}


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

@media (max-width: 700px) {

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


  .opening-panel {
    top: 70px;

    height:
      calc(100svh - 70px);

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


  .opening-title {
    font-size:
      clamp(
        2.8rem,
        13vw,
        4.7rem
      );

    line-height: .86;
  }


  .opening-marquee-track span {
    font-size:
      clamp(
        2.5rem,
        13vw,
        4.5rem
      );
  }


  .opening-panel-problem h2 {
    font-size:
      clamp(
        3rem,
        14vw,
        5rem
      );

    line-height: .84;
  }


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

    column-gap: 12px;
  }


  .metric-strip-grid > p {
    grid-column: 1 / 6;

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


  .metric-mark {
    grid-column: 6 / 7;
  }


  .case-analysis {
    padding-top: 75px;
  }


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

    column-gap: 12px;

    row-gap: 26px;
  }


  .case-analysis-context p:nth-child(1) {
    grid-column: 1 / 4;
  }


  .case-analysis-context p:nth-child(2) {
    grid-column: 4 / 7;
  }


  .case-analysis-context p:nth-child(3) {
    grid-column: 1 / 5;
  }


  .case-analysis-context p {
    font-size: .68rem;
  }


  .pattern-item {
    top: 70px;

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

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

    column-gap: 12px;

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

    border-radius:
      20px
      20px
      0
      0;
  }


  .pattern-mark {
    grid-column: 1 / 3;

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


  .pattern-content {
    grid-column: 2 / 7;

    margin-top: 35px;
  }


  .pattern-eyebrow {
    font-size: .95rem;
  }


  .pattern-item h2 {
    font-size:
      clamp(
        2.6rem,
        12vw,
        4.4rem
      );
  }


  .pattern-description {
    font-size: .8rem;
  }


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

    column-gap: 12px;
  }


  .case-validation-grid
  > div:first-child {
    grid-column: 1 / 4;
  }


  .case-validation-grid
  > div:last-child {
    grid-column: 4 / 7;
  }


  .case-validation-grid
  > div
  > p:not(.case-kicker) {
    font-size: .74rem;
  }


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

    column-gap: 12px;
  }


  .case-kicker-light {
    grid-column: 1 / 3;
  }


  .case-result-title {
    grid-column: 3 / 7;
  }


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

}


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

@media (max-width: 480px) {

  .opening-title {
    font-size:
      clamp(
        2.3rem,
        12vw,
        3.4rem
      );
  }


  .opening-panel-problem h2 {
    font-size:
      clamp(
        2.7rem,
        13vw,
        4rem
      );
  }


  .case-analysis-context p {
    font-size: .62rem;
  }


  .pattern-eyebrow {
    font-size: .82rem;
  }


  .pattern-item h2 {
    font-size:
      clamp(
        2.2rem,
        11vw,
        3.5rem
      );
  }


  .pattern-description {
    font-size: .68rem;
  }

}


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

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

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


  .metric-reveal,
  .reveal-up,
  .pattern-content,
  .pattern-mark,
  .result-reveal {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }


  .pattern-item h2::after {
    transform: scaleX(1);
  }


  .case-progress {
    display: none;
  }

}