@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/switzer/switzer-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/switzer/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/switzer/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/switzer/switzer-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/switzer/switzer-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OffBit";
  src: url("../assets/fonts/offbit/offbit-101-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/pixelify-sans/pixelify-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/pixelify-sans/pixelify-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/pixelify-sans/pixelify-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/pixelify-sans/pixelify-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/pixelify-sans/pixelify-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/pixelify-sans/pixelify-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/pixelify-sans/pixelify-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("../assets/fonts/pixelify-sans/pixelify-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans/dm-sans-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans/dm-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:focus-visible {
  text-decoration: underline;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #003b71;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 9999;
}
.skip-link:focus {
  left: 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.main {
  min-height: 60vh;
  padding-block: 3rem;
}
.main--home {
  padding-block: 0;
  min-height: auto;
}

.home-hero-stack {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.home-hero-stack > .fondo-bolas {
  z-index: 0;
}
.home-hero-stack > .hero-ensayos,
.home-hero-stack > .hero-secundario,
.home-hero-stack > .intro-compromiso {
  position: relative;
  z-index: 1;
  overflow: visible;
  background: transparent;
}

.home-innovacion-stack {
  position: relative;
  isolation: isolate;
  opacity: var(--fade, 1);
  will-change: opacity;
}
.home-innovacion-stack > .fondo-pildoras {
  z-index: 0;
}
.home-innovacion-stack > .innovacion-stack {
  position: relative;
  z-index: 1;
  background: transparent;
}

.home-entenderlo-stack {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -45vh;
  opacity: var(--fade, 1);
  will-change: opacity;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45vh);
  mask-image: linear-gradient(to bottom, transparent 0, #000 45vh);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.home-entenderlo-stack > .fondo-bolas {
  z-index: 0;
}
.home-entenderlo-stack > .entenderlo {
  position: relative;
  z-index: 1;
  background: transparent;
  padding-top: 45vh;
}
.home-entenderlo-stack > .entenderlo-video {
  position: relative;
  z-index: 1;
  background: transparent;
  margin-top: -15.28vw;
}
@media (min-width: 1440px) {
  .home-entenderlo-stack > .entenderlo-video {
    margin-top: -450px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-entenderlo-stack {
    margin-top: 0;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
  }
  .home-entenderlo-stack > .entenderlo {
    padding-top: 0;
  }
}

.home-footer-stack {
  position: relative;
  background: #ffffff;
}

.site-header {
  border-bottom: 1px solid #e0e6ed;
  background: #ffffff;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}
.site-header__brand {
  font-weight: 700;
  font-size: 1.12rem;
  color: #003b71;
}
.site-header__nav .nav-primary {
  display: flex;
  gap: 1.5rem;
}

.fondo-bolas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #abd8fc;
  z-index: 0;
}
.fondo-bolas__gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 65% at 71% 39%, #a7d8fb 0%, #cbc9fb 50%, #aed2fb 100%), linear-gradient(104.89deg, #abd7fb 13.23%, #ccc9fb 30.2%, #bbd1fb 76.51%);
}
.fondo-bolas__blob {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  will-change: transform;
}
.fondo-bolas__blob--1 {
  left: -111px;
  top: 679px;
  width: 1653px;
  height: auto;
  animation: fondo-blob-a 32s ease-in-out infinite;
}
.fondo-bolas__blob--2 {
  left: 230px;
  top: -264px;
  width: 1362px;
  height: auto;
  animation: fondo-blob-b 38s ease-in-out -10s infinite;
}
.fondo-bolas__blob--3 {
  left: -618px;
  top: -479px;
  width: 1459px;
  height: auto;
  transform: rotate(120deg);
  animation: fondo-blob-c 42s ease-in-out -16s infinite;
}
.fondo-bolas__bola {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 157px;
  height: 157px;
  background: #cbc7ff;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i, 0) * -0.31s);
}
.fondo-bolas__bola:nth-child(6n+4) {
  animation-name: fondo-bola-a;
  animation-duration: 9s;
}
.fondo-bolas__bola:nth-child(6n+5) {
  animation-name: fondo-bola-b;
  animation-duration: 11s;
}
.fondo-bolas__bola:nth-child(6n+6) {
  animation-name: fondo-bola-c;
  animation-duration: 12s;
}
.fondo-bolas__bola:nth-child(6n+7) {
  animation-name: fondo-bola-d;
  animation-duration: 10.5s;
}
.fondo-bolas__bola:nth-child(6n+8) {
  animation-name: fondo-bola-e;
  animation-duration: 13s;
}
.fondo-bolas__bola:nth-child(6n+9) {
  animation-name: fondo-bola-f;
  animation-duration: 9.5s;
}
.fondo-bolas__mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../assets/img/hero/bolas/noise-mask.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;
  opacity: 0.65;
}
@media (prefers-reduced-motion: reduce) {
  .fondo-bolas__bola, .fondo-bolas__blob {
    animation: none;
  }
}
.fondo-bolas--limon {
  background: #FBFE61;
}
.fondo-bolas--limon .fondo-bolas__gradient {
  background: #FBFE61;
}
.fondo-bolas--limon .fondo-bolas__bola {
  background: #B9FF94;
}
.fondo-bolas--limon .fondo-bolas__mask {
  opacity: 0.9;
}

@keyframes fondo-bola-a {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-60px, 40px) scale(1.04);
  }
  50% {
    transform: translate(-30px, 80px) scale(1);
  }
  75% {
    transform: translate(40px, 30px) scale(1.06);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes fondo-bola-b {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(70px, -30px) scale(1.05);
  }
  50% {
    transform: translate(50px, -70px) scale(1);
  }
  75% {
    transform: translate(-20px, -40px) scale(1.03);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes fondo-bola-c {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(50px, 60px) scale(1);
  }
  50% {
    transform: translate(-40px, 70px) scale(1.05);
  }
  75% {
    transform: translate(-70px, 20px) scale(1.02);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes fondo-bola-d {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-80px, -30px) scale(1.04);
  }
  50% {
    transform: translate(-50px, 40px) scale(1.06);
  }
  75% {
    transform: translate(30px, 60px) scale(1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes fondo-bola-e {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(40px, -60px) scale(1.03);
  }
  50% {
    transform: translate(80px, -20px) scale(1);
  }
  75% {
    transform: translate(20px, 40px) scale(1.05);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes fondo-bola-f {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(-30px, 70px) scale(1);
  }
  50% {
    transform: translate(60px, 50px) scale(1.06);
  }
  75% {
    transform: translate(70px, -30px) scale(1.02);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes fondo-blob-a {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(40px, -50px);
  }
}
@keyframes fondo-blob-b {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-50px, 60px);
  }
}
@keyframes fondo-blob-c {
  0%, 100% {
    transform: rotate(120deg) translate(0, 0);
  }
  50% {
    transform: rotate(126deg) translate(30px, -40px);
  }
}
.fondo-pildoras {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  pointer-events: none;
  overflow: hidden;
  background: #f9b5cb;
  z-index: 0;
}
.fondo-pildoras__base {
  position: absolute;
  inset: 0;
  background: #f9b5cb;
}
.fondo-pildoras__blob {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  will-change: transform;
}
.fondo-pildoras__blob--1 {
  left: -111px;
  top: 679px;
  width: 1653px;
  height: auto;
  animation: fondo-pildoras-blob-a 36s ease-in-out infinite;
}
.fondo-pildoras__blob--2 {
  left: 230px;
  top: -264px;
  width: 1362px;
  height: auto;
  animation: fondo-pildoras-blob-b 42s ease-in-out -12s infinite;
}
.fondo-pildoras__blob--3 {
  left: -618px;
  top: -479px;
  width: 1459px;
  height: auto;
  transform: rotate(120deg);
  animation: fondo-pildoras-blob-c 46s ease-in-out -18s infinite;
}
.fondo-pildoras__pildora {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 41.6px;
  height: 199px;
  background: #fba99e;
  border-radius: 100vmax;
  transform: rotate(var(--rot, 0deg));
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i, 0) * -0.34s);
}
.fondo-pildoras__pildora:nth-child(6n+4) {
  animation-name: pildora-drift-a;
  animation-duration: 11s;
}
.fondo-pildoras__pildora:nth-child(6n+5) {
  animation-name: pildora-drift-b;
  animation-duration: 13s;
}
.fondo-pildoras__pildora:nth-child(6n+6) {
  animation-name: pildora-drift-c;
  animation-duration: 14s;
}
.fondo-pildoras__pildora:nth-child(6n+7) {
  animation-name: pildora-drift-d;
  animation-duration: 12s;
}
.fondo-pildoras__pildora:nth-child(6n+8) {
  animation-name: pildora-drift-e;
  animation-duration: 15s;
}
.fondo-pildoras__pildora:nth-child(6n+9) {
  animation-name: pildora-drift-f;
  animation-duration: 10s;
}
.fondo-pildoras__mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../assets/img/hero/bolas/noise-mask.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;
  opacity: 0.18;
}
@media (prefers-reduced-motion: reduce) {
  .fondo-pildoras__pildora, .fondo-pildoras__blob {
    animation: none;
  }
}

@keyframes pildora-drift-a {
  0%, 100% {
    transform: rotate(var(--rot, 0deg)) translate(0, 0);
  }
  50% {
    transform: rotate(calc(var(--rot, 0deg) + 6deg)) translate(18px, -22px);
  }
}
@keyframes pildora-drift-b {
  0%, 100% {
    transform: rotate(var(--rot, 0deg)) translate(0, 0);
  }
  50% {
    transform: rotate(calc(var(--rot, 0deg) - 5deg)) translate(-20px, 24px);
  }
}
@keyframes pildora-drift-c {
  0%, 100% {
    transform: rotate(var(--rot, 0deg)) translate(0, 0);
  }
  50% {
    transform: rotate(calc(var(--rot, 0deg) + 4deg)) translate(22px, 18px);
  }
}
@keyframes pildora-drift-d {
  0%, 100% {
    transform: rotate(var(--rot, 0deg)) translate(0, 0);
  }
  50% {
    transform: rotate(calc(var(--rot, 0deg) - 7deg)) translate(-16px, -26px);
  }
}
@keyframes pildora-drift-e {
  0%, 100% {
    transform: rotate(var(--rot, 0deg)) translate(0, 0);
  }
  50% {
    transform: rotate(calc(var(--rot, 0deg) + 5deg)) translate(26px, 14px);
  }
}
@keyframes pildora-drift-f {
  0%, 100% {
    transform: rotate(var(--rot, 0deg)) translate(0, 0);
  }
  50% {
    transform: rotate(calc(var(--rot, 0deg) - 4deg)) translate(-14px, -20px);
  }
}
@keyframes fondo-pildoras-blob-a {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(40px, -50px);
  }
}
@keyframes fondo-pildoras-blob-b {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-50px, 60px);
  }
}
@keyframes fondo-pildoras-blob-c {
  0%, 100% {
    transform: rotate(120deg) translate(0, 0);
  }
  50% {
    transform: rotate(126deg) translate(30px, -40px);
  }
}
.hero-ensayos {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.hero-ensayos__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 17px 76px 40px;
  aspect-ratio: 1440/640;
}
.hero-ensayos__logo {
  width: 100%;
  max-width: 1287.88px;
  margin: 0 0 250px;
}
.hero-ensayos__logo img {
  width: 100%;
  height: auto;
  display: block;
}
.hero-ensayos__claim {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 76.08px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #1a1a1a;
}
.hero-ensayos__line {
  display: block;
}
.hero-ensayos__mark {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 0.05em;
}
@media (max-width: 1440px) {
  .hero-ensayos__inner {
    padding-inline: 5.28vw;
  }
  .hero-ensayos__logo {
    margin-bottom: 6.18vw;
  }
  .hero-ensayos__claim {
    font-size: 5.28vw;
  }
}
@media (max-width: 768px) {
  /* Bloque 2 Figma — Hero "Para que la investigación…" 48px / 0.9 / -2.4259px */
  .hero-ensayos__inner {
    aspect-ratio: auto;
    padding-block: clamp(28px, calc(40 / 375 * 100vw), 40px) clamp(28px, calc(40 / 375 * 100vw), 40px);
    padding-inline: clamp(16px, calc(20 / 375 * 100vw), 20px);
  }
  .hero-ensayos__logo {
    margin-bottom: clamp(40px, calc(64 / 375 * 100vw), 64px);
  }
  .hero-ensayos__claim {
    position: static;
    margin-top: clamp(20px, calc(32 / 375 * 100vw), 32px);
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: clamp(40px, calc(48 / 375 * 100vw), 48px);
    line-height: 0.9;
    letter-spacing: clamp(-2.4259px, calc(-2.4259 / 375 * 100vw), -2.06px);
    color: #000;
  }
  .hero-ensayos__line {
    display: block;
  }
  .hero-ensayos__mark {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.05em;
  }
}

.hero-secundario {
  position: relative;
  width: 100%;
  margin-inline: auto;
  margin-top: -17.29vw;
  aspect-ratio: 1440/874;
}
@media (min-width: 1440px) {
  .hero-secundario {
    margin-top: -249px;
  }
}
@media (max-width: 768px) {
  .hero-secundario {
    margin-top: 0;
  }
}
.hero-secundario__trigger {
  position: absolute;
  left: 50%;
  top: 19.34%;
  width: 89.24%;
  aspect-ratio: 1285/536;
  transform: translateX(-50%);
  display: block;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
}
.hero-secundario__trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.hero-secundario__recorte {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1285 536' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-rule='evenodd' clip-rule='evenodd' d='M1265 0C1276.05 0 1285 8.95431 1285 20V382.249C1285 393.295 1276.05 402.249 1265 402.249H1241.15C1230.1 402.249 1221.15 411.204 1221.15 422.249V450.123C1221.15 461.169 1212.19 470.123 1201.15 470.123H674.472C663.426 470.123 654.472 479.077 654.472 490.123V516C654.472 527.046 645.517 536 634.472 536H73.874C62.8284 536 53.874 527.046 53.874 516V497.11C53.874 486.065 44.9197 477.11 33.874 477.11H20C8.95445 477.11 0.000230827 468.156 0 457.11V157.743C0 146.697 8.95431 137.743 20 137.743H41.8555C52.9011 137.743 61.8554 128.789 61.8555 117.743V89.3701C61.8557 78.3247 70.81 69.3702 81.8555 69.3701H699.078C710.124 69.3701 719.078 60.4158 719.078 49.3701V20C719.078 8.95431 728.032 0 739.078 0H1265ZM93 413.162V433.838H134.162V475H154.838V439.008C154.838 437.476 154.328 436.264 153.307 435.37C152.413 434.349 151.201 433.838 149.669 433.838H144.5V428.669C144.5 427.137 143.99 425.925 142.969 425.031C142.075 424.01 140.863 423.5 139.331 423.5H134.162V418.331C134.162 416.799 133.651 415.587 132.63 414.693C131.736 413.672 130.524 413.162 128.992 413.162H93ZM134.162 372V407.992C134.162 409.524 134.609 410.8 135.502 411.821C136.523 412.715 137.799 413.162 139.331 413.162H144.5V418.331C144.5 419.863 144.946 421.139 145.84 422.16C146.861 423.054 148.137 423.5 149.669 423.5H154.838V428.669C154.838 430.201 155.285 431.477 156.179 432.498C157.2 433.391 158.476 433.838 160.008 433.838H196V413.162H154.838V372H134.162Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1285 536' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-rule='evenodd' clip-rule='evenodd' d='M1265 0C1276.05 0 1285 8.95431 1285 20V382.249C1285 393.295 1276.05 402.249 1265 402.249H1241.15C1230.1 402.249 1221.15 411.204 1221.15 422.249V450.123C1221.15 461.169 1212.19 470.123 1201.15 470.123H674.472C663.426 470.123 654.472 479.077 654.472 490.123V516C654.472 527.046 645.517 536 634.472 536H73.874C62.8284 536 53.874 527.046 53.874 516V497.11C53.874 486.065 44.9197 477.11 33.874 477.11H20C8.95445 477.11 0.000230827 468.156 0 457.11V157.743C0 146.697 8.95431 137.743 20 137.743H41.8555C52.9011 137.743 61.8554 128.789 61.8555 117.743V89.3701C61.8557 78.3247 70.81 69.3702 81.8555 69.3701H699.078C710.124 69.3701 719.078 60.4158 719.078 49.3701V20C719.078 8.95431 728.032 0 739.078 0H1265ZM93 413.162V433.838H134.162V475H154.838V439.008C154.838 437.476 154.328 436.264 153.307 435.37C152.413 434.349 151.201 433.838 149.669 433.838H144.5V428.669C144.5 427.137 143.99 425.925 142.969 425.031C142.075 424.01 140.863 423.5 139.331 423.5H134.162V418.331C134.162 416.799 133.651 415.587 132.63 414.693C131.736 413.672 130.524 413.162 128.992 413.162H93ZM134.162 372V407.992C134.162 409.524 134.609 410.8 135.502 411.821C136.523 412.715 137.799 413.162 139.331 413.162H144.5V418.331C144.5 419.863 144.946 421.139 145.84 422.16C146.861 423.054 148.137 423.5 149.669 423.5H154.838V428.669C154.838 430.201 155.285 431.477 156.179 432.498C157.2 433.391 158.476 433.838 160.008 433.838H196V413.162H154.838V372H134.162Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}
.hero-secundario__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  transition: transform 0.5s ease-out;
  will-change: transform;
}
.hero-secundario__cta {
  position: absolute;
  top: 47.76%;
  left: 53.15%;
  transform: translateX(-100%);
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 16.35px;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: right;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.hero-secundario__trigger:hover .hero-secundario__img, .hero-secundario__trigger:focus-visible .hero-secundario__img {
  transform: scale(1.08);
}
.hero-secundario__trigger:hover .hero-secundario__cta, .hero-secundario__trigger:focus-visible .hero-secundario__cta {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero-secundario__img {
    transition: none;
  }
  .hero-secundario__trigger:hover .hero-secundario__img {
    transform: none;
  }
}
@media (max-width: 768px) {
  .hero-secundario {
    aspect-ratio: auto;
    padding: 2rem clamp(16px, calc(20 / 375 * 100vw), 24px);
  }
  .hero-secundario__trigger {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    aspect-ratio: 1285/536;
  }
  .hero-secundario__cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    text-align: center;
    font-size: clamp(11px, calc(13 / 375 * 100vw), 14px);
  }
}

.intro-compromiso {
  position: relative;
  width: 100%;
  z-index: 1;
  margin-top: -11.80vw;
}
@media (min-width: 1440px) {
  .intro-compromiso {
    margin-top: -230px;
  }
}
@media (max-width: 768px) {
  /* Bloques 3 y 4 Figma — Headline "+ensayos es un compromiso…" 34px/0.9/-2.5278px y párrafo 18px/1.3/-0.5px */
  .intro-compromiso {
    margin-top: 0;
  }
  .intro-compromiso__inner {
    padding-inline: clamp(16px, calc(21 / 375 * 100vw), 21px);
    padding-block: clamp(32px, calc(48 / 375 * 100vw), 48px) clamp(24px, calc(40 / 375 * 100vw), 40px);
  }
  .intro-compromiso__heading {
    margin-left: auto;
    margin-right: auto;
    max-width: clamp(280px, calc(333 / 375 * 100vw), 333px);
    text-align: center;
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: clamp(28px, calc(34 / 375 * 100vw), 34px);
    line-height: 0.9;
    letter-spacing: clamp(-2.5278px, calc(-2.5278 / 375 * 100vw), -2.14px);
    color: #000;
    margin-bottom: clamp(20px, calc(28 / 375 * 100vw), 28px);
  }
  .intro-compromiso__paragraph {
    margin-left: auto;
    margin-right: auto;
    max-width: clamp(280px, calc(335 / 375 * 100vw), 335px);
    text-align: center;
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: clamp(15px, calc(18 / 375 * 100vw), 18px);
    line-height: 1.3;
    letter-spacing: clamp(-0.5px, calc(-0.5 / 375 * 100vw), -0.42px);
    color: #000;
  }
}
.intro-compromiso__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 5.14%;
  padding-right: 4%;
  padding-block: 0 3.47%;
}
.intro-compromiso__heading {
  margin-left: auto;
  margin-bottom: 2.57vw;
  max-width: 48.84%;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 3.33vw;
  line-height: 1;
  letter-spacing: -0.14vw;
  color: #1a1a1a;
}
.intro-compromiso__paragraph {
  margin: 0;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 1.53vw;
  line-height: 1.3;
  letter-spacing: -0.03vw;
  color: #1a1a1a;
}
@media (min-width: 1440px) {
  .intro-compromiso__heading {
    font-size: 48px;
    letter-spacing: -2px;
    margin-bottom: 37px;
  }
  .intro-compromiso__paragraph {
    font-size: 22px;
    letter-spacing: -0.5px;
  }
}
@media (max-width: 768px) {
  .intro-compromiso__inner {
    padding-inline: 1.5rem;
    padding-block: 2rem;
  }
  .intro-compromiso__heading {
    margin-left: auto;
    margin-right: auto;
    max-width: clamp(280px, calc(333 / 375 * 100vw), 333px);
    text-align: center;
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
  }
  .intro-compromiso__paragraph {
    margin-left: auto;
    margin-right: auto;
    max-width: clamp(280px, calc(335 / 375 * 100vw), 335px);
    text-align: center;
    font-size: clamp(1rem, 3vw, 1.2rem);
    letter-spacing: -0.01em;
  }
}

.cinta-ensayos {
  position: relative;
  width: 100%;
  height: 16.18vw;
  max-height: 233px;
  min-height: 120px;
  background: #fff;
  overflow: hidden;
  z-index: 2;
}
.cinta-ensayos__track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  animation: cinta-scroll 10s linear infinite;
  will-change: transform;
}
.cinta-ensayos__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.39vw;
  padding-right: 1.39vw;
}
.cinta-ensayos__logo {
  width: 43.19vw;
  height: 8.33vw;
  max-width: 622px;
  max-height: 100px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  transform: translateY(1.88vw);
}
.cinta-ensayos__text {
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 8.33vw;
  line-height: 1;
  letter-spacing: -0.14vw;
  color: #000;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 1440px) {
  .cinta-ensayos__text {
    font-size: 120px;
    letter-spacing: -2px;
  }
  .cinta-ensayos__item {
    gap: 20px;
    padding-right: 20px;
  }
  .cinta-ensayos__logo {
    width: 622px;
    height: 120px;
    transform: translateY(25px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinta-ensayos__track {
    animation-duration: 120s;
  }
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

@keyframes cinta-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.innovacion-stack {
  position: relative;
  width: 100%;
  height: calc(var(--states, 6) * 100vh);
}
.innovacion-stack__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  width: 100%;
  --p: 0;
  --i: 0;
  --sub: 0;
}
.innovacion-stack__photos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.innovacion-stack__photo {
  position: absolute;
  opacity: 0;
  transition: opacity 0.55s ease;
  aspect-ratio: 936/1166;
  overflow: hidden;
  will-change: opacity;
  -webkit-mask-image: url("../assets/img/hero-secundario/recorte-mask.webp");
  mask-image: url("../assets/img/hero-secundario/recorte-mask.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}
.innovacion-stack__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.innovacion-stack__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--obj-x, 50%) var(--obj-y, 50%);
  display: block;
  transform: translate(var(--offset-x, 0), var(--offset-y, 0)) scale(var(--scale, 1));
  transform-origin: center center;
}
/* Fix (Ysrael): photos pinned to the corners beside the scrolling title so
   they stay FULLY visible on desktop (the old -42vh/-28vh offsets pushed
   them off-screen on tall/large monitors). Sized by the SMALLER of a
   height-based and a width-based value (min(vh, vw)) so they scale down on
   small/narrow screens AND don't get lost on big monitors. Even photos ->
   top-left, odd photos -> bottom-right. */
.innovacion-stack__photo[data-i="0"], .innovacion-stack__photo[data-i="2"], .innovacion-stack__photo[data-i="4"] {
  top: clamp(16px, 4vh, 56px);
  left: 2vw;
  /* Width is the lever: confined to the left side lane (<= ~24vw) so it never
     enters the reserved central text column; also capped by viewport height
     so it stays fully visible. Height follows from aspect-ratio. */
  width: min(clamp(150px, 24vw, 440px), 62vh);
  height: auto;
}
.innovacion-stack__photo[data-i="1"], .innovacion-stack__photo[data-i="3"], .innovacion-stack__photo[data-i="5"] {
  bottom: clamp(16px, 4vh, 56px);
  right: 2vw;
  width: min(clamp(140px, 22vw, 400px), 56vh);
  height: auto;
}
/* Desktop: deja que la imagen sobresalga del shape (overflow visible) — el shape mantiene
   su mask en la zona visible pero la imagen ya no queda recortada al bounding box. */
@media (min-width: 769px) {
  .innovacion-stack__photo { overflow: visible; }
}
/* Encuadre interno por foto en DESKTOP — mueve la imagen dentro del shape sin tocar el shape.
   3 perillas por foto, todas opcionales (default = imagen centrada y al tamaño exacto del shape):
     --obj-x / --obj-y : recolocar crop visible dentro del shape (0%-100%, también px). Limitado a los bordes del shape.
     --scale           : zoom (1 = sin zoom, 1.3 = +30%). Necesario si quieres mostrar más allá de lo que entra recto.
     --offset-x        : desplazamiento horizontal extra (px o %). Permite mover la imagen FUERA del shape.
     --offset-y        : desplazamiento vertical extra (px o %).
   Combinación típica: subir el zoom y luego mover con --offset-y/-x para encuadrar caras altas, etc. */
@media (min-width: 769px) {
  /* Fix (Ysrael): --obj-y was an absolute 200px tuned for the old smaller box;
     after the desktop resize it cropped the top of foto-1, and px object-position
     with object-fit:cover renders inconsistently across engines (cut in Firefox).
     Use a percentage like every other photo so it's cross-browser stable. */
  .innovacion-stack__photo[data-i="0"] img { --obj-x: 20%; --obj-y: 50%; --scale: 1; --offset-x: 0; --offset-y: 0; } /* foto-1 */
  .innovacion-stack__photo[data-i="1"] img { --obj-x: 50%; --obj-y: 50%; --scale: 1; --offset-x: 0; --offset-y: 0; } /* foto-2 */
  .innovacion-stack__photo[data-i="2"] img { --obj-x: 50%; --obj-y: 50%; --scale: 1; --offset-x: 0; --offset-y: 0; } /* foto-3 */
  .innovacion-stack__photo[data-i="3"] img { --obj-x: 50%; --obj-y: 50%; --scale: 1; --offset-x: 0; --offset-y: 0; } /* foto-4 */
  .innovacion-stack__photo[data-i="4"] img { --obj-x: 50%; --obj-y: 50%; --scale: 1; --offset-x: 0; --offset-y: 0; } /* foto-5 */
  .innovacion-stack__photo[data-i="5"] img { --obj-x: 50%; --obj-y: 50%; --scale: 1; --offset-x: 0; --offset-y: 0; } /* foto-6 */
}
.innovacion-stack__photo.is-active {
  opacity: 1;
}
.innovacion-stack__photo.is-prev {
  opacity: 0.5;
}
.innovacion-stack__center {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.innovacion-stack__words {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding-inline: 4vw;
  height: 13.19vw;
  max-height: 190px;
}
.innovacion-stack__word {
  position: absolute;
  left: 4vw;
  right: 4vw;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "OffBit", "Pixelify Sans", "Switzer", monospace;
  font-weight: 700;
  font-size: 13.19vw;
  line-height: 1;
  letter-spacing: -0.25vw;
  color: #000;
  white-space: nowrap;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.65s cubic-bezier(0.45, 0.1, 0.2, 1);
  will-change: clip-path;
  pointer-events: none;
}
.innovacion-stack__word.is-active {
  clip-path: inset(0);
}
.innovacion-stack__captions {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.innovacion-stack__caption {
  position: absolute;
  width: clamp(280px, 24vw, 400px);
  margin: 0;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 1.53vw;
  line-height: 1.3;
  letter-spacing: -0.03vw;
  color: #000;
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: 0.15s;
  text-align: left;
}
.innovacion-stack__caption[data-i="0"],
.innovacion-stack__caption[data-i="1"],
.innovacion-stack__caption[data-i="2"],
.innovacion-stack__caption[data-i="3"],
.innovacion-stack__caption[data-i="4"],
.innovacion-stack__caption[data-i="5"] {
  top: 64%;
  left: 40vw;
  right: auto;
  bottom: auto;
  transform: none;
  text-align: left;
  width: clamp(280px, 24vw, 400px);
}
.innovacion-stack__caption.is-active {
  opacity: 1;
}
@media (min-width: 1440px) {
  .innovacion-stack__words {
    height: 190px;
  }
  .innovacion-stack__word {
    font-size: 190px;
    letter-spacing: -3.57px;
  }
  .innovacion-stack__caption {
    font-size: 22px;
    letter-spacing: -0.5px;
  }
}
@media (max-width: 768px) {
  /* Bloque 7 Figma móvil — sticky scroll: 2 fotos fijas + word/caption que cambian */
  .innovacion-stack__sticky {
    padding: 0;
  }
  .innovacion-stack__photos {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .innovacion-stack__photo {
    transition: none;
  }
  /* Shape grande (arriba-izq): fotos pares 0, 2, 4 */
  .innovacion-stack__photo[data-i="0"],
  .innovacion-stack__photo[data-i="2"],
  .innovacion-stack__photo[data-i="4"] {
    top: -32px;
    left: 0;
    bottom: auto;
    right: auto;
    width: clamp(260px, calc(310 / 375 * 100vw), 310px);
    aspect-ratio: 310/340;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22));
    transition: opacity 0.45s ease;
  }
  /* Shape pequeño (abajo-der): fotos impares 1, 3, 5 */
  .innovacion-stack__photo[data-i="1"],
  .innovacion-stack__photo[data-i="3"],
  .innovacion-stack__photo[data-i="5"] {
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
    width: clamp(220px, calc(280 / 375 * 100vw), 280px);
    aspect-ratio: 280/320;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.22));
    transition: opacity 0.45s ease;
  }
  /* Opacities default = state 0 (fallback si JS no añade is-state-N) */
  .innovacion-stack__photo[data-i="0"] { opacity: 1; }
  .innovacion-stack__photo[data-i="1"] { opacity: 0.45; }
  .innovacion-stack__photo[data-i="2"],
  .innovacion-stack__photo[data-i="3"],
  .innovacion-stack__photo[data-i="4"],
  .innovacion-stack__photo[data-i="5"] { opacity: 0; }
  /* Ciclo por state */
  .innovacion-stack__sticky.is-state-1 .innovacion-stack__photo[data-i="0"] { opacity: 0.45; }
  .innovacion-stack__sticky.is-state-1 .innovacion-stack__photo[data-i="1"] { opacity: 1; }
  .innovacion-stack__sticky.is-state-2 .innovacion-stack__photo[data-i="0"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-2 .innovacion-stack__photo[data-i="1"] { opacity: 0.45; }
  .innovacion-stack__sticky.is-state-2 .innovacion-stack__photo[data-i="2"] { opacity: 1; }
  .innovacion-stack__sticky.is-state-3 .innovacion-stack__photo[data-i="0"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-3 .innovacion-stack__photo[data-i="1"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-3 .innovacion-stack__photo[data-i="2"] { opacity: 0.45; }
  .innovacion-stack__sticky.is-state-3 .innovacion-stack__photo[data-i="3"] { opacity: 1; }
  .innovacion-stack__sticky.is-state-4 .innovacion-stack__photo[data-i="0"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-4 .innovacion-stack__photo[data-i="1"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-4 .innovacion-stack__photo[data-i="2"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-4 .innovacion-stack__photo[data-i="3"] { opacity: 0.45; }
  .innovacion-stack__sticky.is-state-4 .innovacion-stack__photo[data-i="4"] { opacity: 1; }
  .innovacion-stack__sticky.is-state-5 .innovacion-stack__photo[data-i="0"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-5 .innovacion-stack__photo[data-i="1"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-5 .innovacion-stack__photo[data-i="2"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-5 .innovacion-stack__photo[data-i="3"] { opacity: 0; }
  .innovacion-stack__sticky.is-state-5 .innovacion-stack__photo[data-i="4"] { opacity: 0.45; }
  .innovacion-stack__sticky.is-state-5 .innovacion-stack__photo[data-i="5"] { opacity: 1; }
  .innovacion-stack__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: clamp(16px, calc(21 / 375 * 100vw), 21px);
    z-index: 2;
  }
  .innovacion-stack__words {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    height: clamp(80px, calc(96 / 375 * 100vw), 96px);
    max-height: none;
    padding: 0;
    margin-bottom: -20px;
  }
  .innovacion-stack__word {
    left: 0;
    right: 0;
    padding-inline: 0;
    font-family: "OffBit", "Pixelify Sans", "Switzer", monospace;
    font-weight: 700;
    font-size: clamp(28px, calc(40 / 375 * 100vw), 48px);
    line-height: 0.9;
    letter-spacing: clamp(-0.4px, calc(-0.5 / 375 * 100vw), -0.3px);
    color: #000;
    white-space: normal;
    overflow-wrap: normal;
    text-align: center;
    text-wrap: balance;
  }
  .innovacion-stack__captions {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: clamp(90px, calc(110 / 375 * 100vw), 110px);
  }
  .innovacion-stack__caption,
  .innovacion-stack__caption[data-i="0"],
  .innovacion-stack__caption[data-i="1"],
  .innovacion-stack__caption[data-i="2"],
  .innovacion-stack__caption[data-i="3"],
  .innovacion-stack__caption[data-i="4"],
  .innovacion-stack__caption[data-i="5"] {
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: clamp(280px, calc(330 / 375 * 100vw), 330px);
    margin: 0;
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: clamp(15px, calc(18 / 375 * 100vw), 18px);
    line-height: 1.3;
    letter-spacing: clamp(-0.5px, calc(-0.5 / 375 * 100vw), -0.42px);
    color: #000;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .innovacion-stack__word, .innovacion-stack__photo, .innovacion-stack__caption {
    transition: none !important;
  }
}

.entenderlo {
  position: relative;
  width: 100%;
  z-index: 1;
}
.entenderlo__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 76px;
  padding-block: 18.33vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 1440px) {
  .entenderlo__inner {
    padding-block: 264px;
  }
}
.entenderlo__smiley {
  width: 11vw;
  height: auto;
  max-width: 160px;
  margin: 0 auto 2.57vw;
  display: block;
}
@media (min-width: 1440px) {
  .entenderlo__smiley {
    margin-bottom: 37px;
  }
}
.entenderlo__heading {
  margin: 0;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-size: 8.33vw;
  line-height: 0.9;
  letter-spacing: -0.27vw;
  color: #1a1a1a;
  text-align: center;
}
@media (min-width: 1440px) {
  .entenderlo__heading {
    font-size: 120px;
    letter-spacing: -3.82px;
  }
}
.entenderlo__heading-line {
  display: block;
}
.entenderlo__heading-line--top {
  font-weight: 400;
}
.entenderlo__heading-line--bot {
  font-weight: 300;
}
.entenderlo__cta {
  position: relative;
  width: 180px;
  height: 180px;
  margin-top: 5.56vw;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #1a1a1a;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1440px) {
  .entenderlo__cta {
    margin-top: 80px;
  }
}
.entenderlo__cta:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 8px;
  border-radius: 50%;
}
.entenderlo__cta-ring {
  position: absolute;
  inset: 0;
  display: block;
  animation: entenderlo-ring-spin 14s linear infinite;
  will-change: transform;
  transform-origin: 50% 50%;
}
.entenderlo__cta-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.entenderlo__cta-ring-text {
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  fill: #1a1a1a;
}
.entenderlo__cta-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92.86px;
  height: 92.86px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.entenderlo__cta-icon img {
  width: 48px;
  height: 48px;
  transition: transform 0.35s ease-out;
  will-change: transform;
}
.entenderlo__cta:hover .entenderlo__cta-icon img, .entenderlo__cta:focus-visible .entenderlo__cta-icon img {
  transform: scale(1.15);
}
.entenderlo__photos {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(8px, 3.3vw, 48px);
  /* Fix (Ysrael): reduced the upward pull so the rotated photos no
     longer overlap the heading "escuchar a quienes lo han vivido". */
  margin-top: -150px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@media (max-width: 1440px) {
  .entenderlo__photos {
    margin-top: calc(-80px - 5.56vw);
  }
}
.entenderlo__photo {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: clamp(280px, 32vw, 462px);
  aspect-ratio: 462/520;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  -webkit-mask-image: url("../assets/img/entenderlo/rectangle-shape.svg");
  mask-image: url("../assets/img/entenderlo/rectangle-shape.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-tap-highlight-color: transparent;
  --tilt: 0deg;
  --shift-y: 0px;
  --shift-x: 0px;
  --flip-x: 1;
  margin-top: var(--shift-y);
  transform: translate(var(--shift-x), 85vh) rotate(0deg) scaleX(var(--flip-x));
  will-change: transform, opacity;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease-out;
}
.entenderlo__photo:focus-visible {
  outline: none;
}
.entenderlo__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.entenderlo__photo-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(40px, 4vw, 60px);
  height: clamp(40px, 4vw, 60px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, background 0.2s ease;
}
.entenderlo__photo-play svg {
  width: 58%;
  height: 58%;
  margin-left: 8%;
}
.entenderlo__photo:hover .entenderlo__photo-play,
.entenderlo__photo:focus-visible .entenderlo__photo-play {
  background: rgba(255, 255, 255, 0.65);
  transform: translate(-50%, -50%) scale(1.08);
}
.entenderlo__photo--left {
  --tilt: -20deg;
  --shift-y: -40px;
  --shift-x: -110px;
}
.entenderlo__photo--right {
  --tilt: 6.51deg;
  --shift-y: -30px;
  --shift-x: 110px;
}
.entenderlo.is-open .entenderlo__cta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.entenderlo.is-open .entenderlo__photos {
  opacity: 1;
  height: auto;
  pointer-events: auto;
  margin-bottom: clamp(96px, 12vw, 220px);
}
.entenderlo.is-open .entenderlo__photo {
  opacity: 1;
  transform: translate(var(--shift-x), 0) rotate(var(--tilt)) scaleX(var(--flip-x));
}
.entenderlo.is-open .entenderlo__photo--left {
  transition-delay: 0s;
}
.entenderlo.is-open .entenderlo__photo--right {
  transition-delay: 0.08s;
}
@media (prefers-reduced-motion: reduce) {
  .entenderlo__cta-ring {
    animation: none;
  }
  .entenderlo__cta-icon img {
    transition: none;
  }
  .entenderlo__cta:hover .entenderlo__cta-icon img, .entenderlo__cta:focus-visible .entenderlo__cta-icon img {
    transform: none;
  }
  .entenderlo__photo {
    transition: none;
  }
}
@media (max-width: 768px) {
  /* Bloques 9 y 10 Figma — Quote "La mejor manera de entenderlo…" 65.015px/0.9/-4.1382px (línea 1 Regular, línea 2 Light) */
  .entenderlo__inner {
    padding-inline: clamp(12px, calc(16 / 375 * 100vw), 16px);
    padding-block: clamp(64px, calc(96 / 375 * 100vw), 96px) 16px;
  }
  .entenderlo.is-open .entenderlo__cta {
    display: none;
  }
  .entenderlo__smiley {
    width: clamp(56px, calc(71 / 375 * 100vw), 71px);
    margin: 0 0 clamp(20px, calc(28 / 375 * 100vw), 28px);
  }
  .entenderlo__heading {
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-size: clamp(52px, calc(65.015 / 375 * 100vw), 65.015px);
    line-height: 0.9;
    letter-spacing: clamp(-4.1382px, calc(-4.1382 / 375 * 100vw), -3.52px);
    color: #000;
    max-width: clamp(300px, calc(363 / 375 * 100vw), 363px);
    margin-inline: auto;
  }
  .entenderlo__heading-line--top {
    font-weight: 400;
  }
  .entenderlo__heading-line--bot {
    font-weight: 300;
  }
  .entenderlo__cta {
    width: clamp(120px, calc(142.25 / 375 * 100vw), 142.25px);
    height: clamp(120px, calc(142.25 / 375 * 100vw), 142.25px);
    margin-top: clamp(28px, calc(40 / 375 * 100vw), 40px);
  }
  .entenderlo__cta-icon {
    width: clamp(60px, calc(73.383 / 375 * 100vw), 73.383px);
    height: clamp(60px, calc(73.383 / 375 * 100vw), 73.383px);
  }
  .entenderlo__cta-icon img {
    width: 36px;
    height: 36px;
  }
  .entenderlo__cta-ring svg {
    font-size: 9px;
  }
  .entenderlo__slider {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  .entenderlo__photos {
    /* ===== PERILLAS DEL SLIDER (en pixels crudos) =====
       JS lee estas vars y aplica padding/gap/width en pixels.
       Cambia los números y refresca con ?v=N.
       PAD-LEFT  → aire izquierdo (mueve la card a la derecha).
       PAD-RIGHT → aire derecho + gap entre cards.
       PAD-LEFT = PAD-RIGHT → card centrada.
       PAD-LEFT < PAD-RIGHT → card desplazada a la izquierda. */
    --ent-pad-left:  0px;
    --ent-pad-right: 0px;
    /* =================================================== */
    position: static;
    height: auto;
    bottom: auto;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: visible;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .entenderlo__photo,
  .entenderlo__photo--left,
  .entenderlo__photo--center,
  .entenderlo__photo--right {
    flex: 0 0 auto;
    max-width: none;
    height: auto;
    display: block;
    --tilt: 0deg;
    --shift-y: 0px;
    --shift-x: 0px;
    --flip-x: 1;
    margin: 0;
    opacity: 1;
    transform: none;
  }
  .entenderlo__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    z-index: 3;
    transition: opacity 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .entenderlo__nav svg {
    width: 24px;
    height: 24px;
  }
  .entenderlo__nav--prev { left: 8px; }
  .entenderlo__nav--next { right: 8px; }
  .entenderlo.is-open .entenderlo__nav {
    display: inline-flex;
  }
  .entenderlo__nav[hidden] {
    opacity: 0;
    pointer-events: none;
  }
}
@media (min-width: 769px) {
  .entenderlo__nav {
    display: none;
  }
}

@keyframes entenderlo-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
.entenderlo-video {
  position: relative;
  width: 100%;
  z-index: 1;
}
.entenderlo-video__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 76px;
  padding-block: 0 8.33vw;
}
@media (min-width: 1440px) {
  .entenderlo-video__inner {
    padding-block: 0 120px;
  }
}
.entenderlo-video__heading {
  margin: 0 0 2.78vw;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 4.17vw;
  line-height: 1;
  letter-spacing: -0.14vw;
  color: #1a1a1a;
  text-align: left;
}
@media (min-width: 1440px) {
  .entenderlo-video__heading {
    font-size: 60px;
    letter-spacing: -2px;
    margin-bottom: 40px;
  }
}
.entenderlo-video__card {
  --card-shift-y: -80px;
  --card-shift-x: 50px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1285/536;
  margin: 0;
  transform: translate(var(--card-shift-x), var(--card-shift-y));
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.entenderlo-video__card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.entenderlo-video__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  -webkit-mask-image: url("../assets/img/entenderlo/que-son-video-mask.webp");
  mask-image: url("../assets/img/entenderlo/que-son-video-mask.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}
.entenderlo-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  transition: transform 0.5s ease-out;
  will-change: transform;
  transform-origin: center;
}
.entenderlo-video__cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 16.35px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.entenderlo-video__card:hover .entenderlo-video__poster, .entenderlo-video__card:focus-visible .entenderlo-video__poster {
  transform: scale(1.05);
}
.entenderlo-video__card:hover .entenderlo-video__cta, .entenderlo-video__card:focus-visible .entenderlo-video__cta {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .entenderlo-video__poster {
    transition: none;
  }
  .entenderlo-video__card:hover .entenderlo-video__poster, .entenderlo-video__card:focus-visible .entenderlo-video__poster {
    transform: none;
  }
}
@media (max-width: 768px) {
  /* entenderlo-video — sin spec literal en Figma móvil, se mantiene escala fluid coherente */
  .entenderlo-video__inner {
    padding-inline: clamp(16px, calc(21 / 375 * 100vw), 21px);
    padding-block: 0 clamp(48px, calc(64 / 375 * 100vw), 64px);
  }
  .entenderlo-video__heading {
    font-size: clamp(28px, calc(40 / 375 * 100vw), 40px);
    letter-spacing: -0.03em;
    margin-bottom: clamp(20px, calc(32 / 375 * 100vw), 32px);
  }
  .entenderlo-video__card {
    transform: none;
    aspect-ratio: 365/252;
  }
  .entenderlo-video__media {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 365 252'%3E%3Cpath fill='white' d='M358.731 0C361.864 0 364.403 2.53928 364.403 5.67164V208.399C364.403 211.531 361.864 214.071 358.731 214.071H351.968C348.835 214.071 346.296 216.61 346.296 219.742V227.647C346.296 230.779 343.757 233.318 340.624 233.318H191.268C188.136 233.319 185.596 235.858 185.596 238.99V246.328C185.596 249.461 183.057 252 179.925 252H20.9494C17.817 252 15.2777 249.461 15.2777 246.328V240.972C15.2777 237.839 12.7384 235.3 9.60607 235.3H5.67164C2.53932 235.3 0 232.761 0 229.628V44.7331C0 41.6008 2.53928 39.0615 5.67164 39.0615H11.8695C15.0018 39.0615 17.5411 36.5222 17.5411 33.3899V25.3438C17.5412 22.2115 20.0804 19.6721 23.2127 19.6721H198.246C201.378 19.6721 203.918 17.1328 203.918 14.0005V5.67164C203.918 2.53928 206.457 0 209.589 0H358.731Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 365 252'%3E%3Cpath fill='white' d='M358.731 0C361.864 0 364.403 2.53928 364.403 5.67164V208.399C364.403 211.531 361.864 214.071 358.731 214.071H351.968C348.835 214.071 346.296 216.61 346.296 219.742V227.647C346.296 230.779 343.757 233.318 340.624 233.318H191.268C188.136 233.319 185.596 235.858 185.596 238.99V246.328C185.596 249.461 183.057 252 179.925 252H20.9494C17.817 252 15.2777 249.461 15.2777 246.328V240.972C15.2777 237.839 12.7384 235.3 9.60607 235.3H5.67164C2.53932 235.3 0 232.761 0 229.628V44.7331C0 41.6008 2.53928 39.0615 5.67164 39.0615H11.8695C15.0018 39.0615 17.5411 36.5222 17.5411 33.3899V25.3438C17.5412 22.2115 20.0804 19.6721 23.2127 19.6721H198.246C201.378 19.6721 203.918 17.1328 203.918 14.0005V5.67164C203.918 2.53928 206.457 0 209.589 0H358.731Z'/%3E%3C/svg%3E");
    -webkit-mask-mode: luminance;
    mask-mode: luminance;
  }
  .entenderlo-video__cta {
    opacity: 1;
  }
}

.claves-cards {
  position: relative;
  width: 100%;
  height: calc(var(--states, 11) * 100vh);
  z-index: 1;
}
.claves-cards__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  width: 100%;
  --p: 0;
  --i: 0;
  --sub: 0;
  --stack-offset: 14px;
  --stack-scale-step: 0.02;
}
.claves-cards__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.claves-cards__bg > .fondo-bolas {
  position: absolute;
  inset: 0;
}
.claves-cards__intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 6vh 4vw 3vh;
  z-index: 1;
  pointer-events: none;
}
.claves-cards__intro-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 1;
  transition: opacity 0.45s ease, transform 0.45s ease;
  will-change: opacity, transform;
}
.claves-cards__intro.is-prev .claves-cards__intro-text {
  opacity: 0;
  transform: translateY(-32px);
}
.claves-cards__icon {
  width: clamp(56px, 5.56vw, 96px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.claves-cards__heading {
  margin: 0;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 7.5vw, 108px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #1a1a1a;
  max-width: 22ch;
}
.claves-cards__lead {
  margin: 0;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.39vw, 22px);
  line-height: 1.4;
  color: #1a1a1a;
  max-width: clamp(40ch, 70vw, 80ch);
}
.claves-cards__pixeltag {
  display: block;
  margin-top: clamp(40px, 6vh, 96px);
  font-family: "OffBit", "Pixelify Sans", "Switzer", monospace;
  font-weight: 700;
  font-size: clamp(2rem, 8.33vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.claves-cards__deck {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 2;
}
.claves-cards__card {
  --depth: calc(var(--i, 0) - var(--n, 0));
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: clamp(320px, 76.67vw, 1104px);
  aspect-ratio: 1104/426;
  padding: clamp(20px, 2.78vw, 48px) clamp(20px, 3.89vw, 64px);
  box-sizing: border-box;
  background: url("../assets/img/claves/card.png") no-repeat center/100% 100%;
  color: #1a1a1a;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(12px, 1.5vw, 24px);
  transform: translate(-50%, 120vh) scale(1);
  opacity: 0;
  z-index: calc(10 + var(--n, 0));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  will-change: transform, opacity;
}
.claves-cards__card.is-active {
  opacity: 1;
  transform: translate(-50%, 50%) scale(1);
}
.claves-cards__card.is-prev {
  opacity: 0;
  transform: translate(-50%, calc(50% - 24px)) scale(0.98);
}
.claves-cards__title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  width: clamp(280px, 36.39vw, 524px);
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.17vw, 60px);
  line-height: 0.9;
  letter-spacing: -1.73px;
  color: #000;
}
.claves-cards__badge {
  grid-column: 2;
  grid-row: 1;
  width: clamp(72px, 7.64vw, 110px);
  height: clamp(72px, 7.64vw, 110px);
  border: 1px solid #1d1b1a;
  border-radius: 20px;
  display: grid;
  place-items: center;
  align-self: start;
  justify-self: end;
}
.claves-cards__num {
  font-family: "OffBit", "Pixelify Sans", "Switzer", monospace;
  font-weight: 700;
  font-size: clamp(2rem, 4.17vw, 60px);
  line-height: 1;
  letter-spacing: 2px;
  color: #000;
  text-align: center;
}
.claves-cards__copy {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  width: clamp(260px, 30.69vw, 442px);
  justify-self: end;
  align-self: end;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(0.88rem, 1.25vw, 18px);
  line-height: 1.4;
  letter-spacing: 0;
  color: #000;
}
@media (max-width: 768px) {
  /* Bloques 17–20 Figma — claves-cards. Se MANTIENE el comportamiento sticky/scroll progresivo
     (no se convierte a layout vertical). Solo se ajustan tipografías y geometría del template card al spec móvil. */
  .claves-cards__sticky {
    --stack-offset: 10px;
    --stack-scale-step: 0.018;
  }
  .claves-cards__intro {
    padding: clamp(40px, calc(56 / 375 * 100vw), 56px) clamp(16px, calc(21 / 375 * 100vw), 21px) clamp(24px, calc(32 / 375 * 100vw), 32px);
    gap: clamp(20px, calc(28 / 375 * 100vw), 28px);
  }
  .claves-cards__icon {
    width: clamp(48px, calc(59.156 / 375 * 100vw), 59.156px);
  }
  /* Bloque 17 — "España, líder mundial…" reducido a 40px para que entre 2 líneas */
  .claves-cards__heading {
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: clamp(32px, calc(40 / 375 * 100vw), 44px);
    line-height: 0.95;
    letter-spacing: clamp(-2.5px, calc(-2.5 / 375 * 100vw), -2px);
    color: #000;
    max-width: clamp(300px, calc(330 / 375 * 100vw), 330px);
  }
  /* Bloque 18 — párrafo España 18px Switzer Medium / 1.3 / -0.5px */
  .claves-cards__lead {
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: clamp(15px, calc(18 / 375 * 100vw), 18px);
    line-height: 1.3;
    letter-spacing: clamp(-0.5px, calc(-0.5 / 375 * 100vw), -0.42px);
    color: #000;
    max-width: clamp(260px, calc(313 / 375 * 100vw), 313px);
  }
  /* Bloque 19/21 — "10 claves" 70px OffBit / 0.8 / -0.8322px */
  .claves-cards__pixeltag {
    margin-top: clamp(28px, calc(40 / 375 * 100vw), 40px);
    font-family: "OffBit", "Pixelify Sans", "Switzer", monospace;
    font-weight: 700;
    font-size: clamp(56px, calc(70 / 375 * 100vw), 70px);
    line-height: 0.8;
    letter-spacing: clamp(-0.8322px, calc(-0.8322 / 375 * 100vw), -0.71px);
    color: #000;
    text-align: center;
  }
  /* Bloque 20 — Card template: rectángulo redondeado 1px negro, sin shape PNG */
  .claves-cards__card {
    width: clamp(280px, calc(338 / 375 * 100vw), 338px);
    aspect-ratio: 338 / 508.5;
    padding: clamp(20px, calc(28 / 375 * 100vw), 28px) clamp(16px, calc(24 / 375 * 100vw), 24px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 0;
    row-gap: clamp(16px, calc(24 / 375 * 100vw), 24px);
    background: transparent;
    border: 1px solid #000;
    border-radius: clamp(22px, calc(28.5 / 375 * 100vw), 28.5px);
  }
  .claves-cards__badge {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: clamp(60px, calc(72 / 375 * 100vw), 72px);
    height: clamp(60px, calc(72 / 375 * 100vw), 72px);
    border: 1px solid #000;
    border-radius: clamp(11px, calc(13.091 / 375 * 100vw), 13.091px);
  }
  .claves-cards__num {
    font-family: "OffBit", "Pixelify Sans", "Switzer", monospace;
    font-weight: 700;
    font-size: clamp(32px, calc(39.273 / 375 * 100vw), 39.273px);
    line-height: 1;
    letter-spacing: clamp(1.1px, calc(1.3091 / 375 * 100vw), 1.3091px);
    color: #000;
  }
  .claves-cards__title {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: clamp(260px, calc(313 / 375 * 100vw), 313px);
    margin-inline: auto;
    text-align: center;
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: clamp(30px, calc(40 / 375 * 100vw), 40px);
    line-height: 0.9;
    letter-spacing: clamp(-3px, calc(-3 / 375 * 100vw), -2.55px);
    color: #000;
  }
  .claves-cards__copy {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: clamp(240px, calc(288 / 375 * 100vw), 288px);
    margin-inline: auto;
    justify-self: center;
    align-self: start;
    text-align: center;
    text-transform: none;
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: clamp(15px, calc(18 / 375 * 100vw), 18px);
    line-height: 1.3;
    letter-spacing: clamp(-0.5px, calc(-0.5 / 375 * 100vw), -0.42px);
    color: #000;
  }
}
@media (prefers-reduced-motion: reduce) {
  .claves-cards__intro-text, .claves-cards__card {
    transition: none !important;
  }
}

/* ============================================================
   logos-cloud — member-company logos grid
   Reworked by Ysrael (T3): replaced the single monolithic
   farmaindustria-logos.png with individual <img> logos in a
   responsive grid. The "+" separator (cruz.png) is drawn with
   a CSS pseudo-element so it is purely decorative and is hidden
   when the grid reflows on tablet/mobile.
   ============================================================ */
.logos-cloud {
  position: relative;
  width: 100%;
  background: #ffffff;
}
.logos-cloud__inner {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(48px, 6.94vw, 100px) clamp(20px, 5.56vw, 80px);
}
.logos-cloud__brand {
  display: block;
  width: auto;
  /* Ysrael: restored approved header size (was lost when PR #1 merged from an earlier commit). */
  height: 100px;
  margin: 0 auto 72px;
}
.logos-cloud__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  --logos-col-gap: 20px;
  column-gap: var(--logos-col-gap);
  row-gap: 56px;
  align-items: center;
}
.logos-cloud__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logos-cloud__logo {
  max-width: 100%;
  width: auto;
  height: 72px;
  object-fit: contain;
}
/* Logo links (Ysrael): wrappers must keep the grid/centering layout intact. */
.logos-cloud__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logos-cloud__brand-link {
  display: flex;
  justify-content: center;
  margin: 0 auto 72px;
}
.logos-cloud__brand-link .logos-cloud__brand {
  margin: 0;
}
/* "+" separator between columns (not after the last in a row, not the last item) */
.logos-cloud__item:not(:nth-child(6n)):not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 80px;
  height: 80px;
  transform: translate(calc(50% + var(--logos-col-gap) / 2), -50%);
  background: url("../assets/img/logos-cloud/cruz.png") center / contain no-repeat;
}
@media (max-width: 1024px) {
  .logos-cloud__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 3-column layout (tablet + mobile): keep the "+" between columns,
     but remove it at the end of every row (each 3rd item) so it
     doesn't dangle off the edge. */
  .logos-cloud__item:nth-child(3n)::after {
    display: none;
  }
}
/* Bloques de logos (Ysrael): cabecera +ensayos + intro + filete +
   Ministerio (3, grandes) + Asociacion (20, 5 columnas) + "Impulsada por".
   Reutilizan .logos-cloud__grid/__item/__logo. Ministerio (3 items) usa el
   separador "+" base. Asociacion (5 col) lleva separador propio. */
.logos-cloud__ensayos {
  display: block;
  width: auto;
  max-width: 100%;
  /* Ysrael: cabecera +ensayos más grande (la imagen incluye también el texto). */
  height: clamp(96px, 12vw, 200px);
  margin: 0 auto clamp(40px, 5vw, 80px);
}
.logos-cloud__intro {
  margin: 0 0 clamp(36px, 4.5vw, 64px);
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.36vw, 34px);
  line-height: 1.2;
  color: #1a1a1a;
  text-align: center;
}
.logos-cloud__filete {
  width: clamp(120px, 22vw, 260px);
  height: 2px;
  border: 0;
  background: #d6d6d6;
  margin: clamp(56px, 7vw, 104px) auto;
}
.logos-cloud__grid--ministerio {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: clamp(48px, 6vw, 88px);
}
/* Ministerio logos -> bigger than the rest, per the brief */
.logos-cloud__logo--ministerio {
  height: clamp(64px, 7vw, 116px);
}
/* Asociaciones: SIEMPRE 3 columnas, un unico separador "+" consistente.
   Nunca tras el 3er item de la fila (3n) ni el ultimo -> sin "+" colgando.
   !important para ganar al separador base de 80px de forma robusta y que
   TODOS los "+" de asociaciones tengan el mismo tamano. */
.logos-cloud__grid--asociacion {
  grid-template-columns: repeat(3, 1fr) !important;
  row-gap: clamp(36px, 4.5vw, 64px);
}
.logos-cloud__grid--asociacion .logos-cloud__item::after {
  display: none !important;
}
.logos-cloud__grid--asociacion .logos-cloud__item:not(:nth-child(3n)):not(:last-child)::after {
  content: "";
  display: block !important;
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(22px, 3vw, 44px);
  height: clamp(22px, 3vw, 44px);
  transform: translate(calc(50% + var(--logos-col-gap) / 2), -50%);
  background: url("../assets/img/logos-cloud/cruz.png") center / contain no-repeat;
}
/* Ministerio: SIN separador "+" (eran banners; el "+" base de 80px hacia que
   unas cruces se vieran mas grandes que las de asociaciones). */
/* Ministerio: "+" entre los 3 (desktop), mismo tamano que asociaciones.
   Anula el separador base de 80px. En movil se ocultan (apilados). */
.logos-cloud__grid--ministerio .logos-cloud__item::after {
  display: none !important;
}
.logos-cloud__grid--ministerio .logos-cloud__item:not(:nth-child(3n)):not(:last-child)::after {
  content: "";
  display: block !important;
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(22px, 3vw, 44px);
  height: clamp(22px, 3vw, 44px);
  transform: translate(calc(50% + var(--logos-col-gap) / 2), -50%);
  background: url("../assets/img/logos-cloud/cruz.png") center / contain no-repeat;
}
/* Responsive bloque 1 (Ysrael) */
@media (max-width: 768px) {
  /* Ministerios apilados: sin "+" entre ellos */
  .logos-cloud__grid--ministerio .logos-cloud__item::after {
    display: none !important;
  }
  /* Cabecera +ensayos: escalar por ancho (la imagen lleva texto) sin deformar */
  .logos-cloud__ensayos {
    height: auto;
    width: min(90%, 520px);
    margin-bottom: clamp(28px, 8vw, 48px);
  }
  /* Ministerios uno debajo de otro y mas grandes */
  .logos-cloud__grid--ministerio {
    grid-template-columns: 1fr;
    row-gap: clamp(28px, 7vw, 48px);
    margin-bottom: clamp(40px, 10vw, 64px);
  }
  .logos-cloud__logo--ministerio {
    height: auto;
    width: min(88%, 460px);
  }
}

/* ===== Footer legal (mini) ===== */
.site-footer {
  background: #1a1a1a;
  color: #d4d4d4;
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
.site-footer__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 16px clamp(16px, 4vw, 48px);
}
.site-footer__legal {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}
.site-footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .site-footer__inner {
    padding: 14px 16px;
  }
  .site-footer__legal {
    gap: 6px 16px;
    font-size: 12px;
  }
}

.banners {
  position: relative;
  width: 100%;
}
.banners__inner {
  position: relative;
  overflow: hidden;
  min-height: clamp(180px, 17.08vw, 300px);
  padding: clamp(40px, 5.49vw, 96px) clamp(20px, 7.64vw, 140px);
  background: linear-gradient(228.65deg, #cbc7ff 30.01%, #abd8fc 99.74%);
  display: flex;
  align-items: center;
}
.banners__marquee {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 0;
}
.banners__marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-inline: 10px;
  animation: banners-marquee 30s linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .banners__marquee-track {
    animation: none;
  }
}
.banners__marquee-text {
  flex-shrink: 0;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(60px, 8.33vw, 140px);
  line-height: 0.9;
  letter-spacing: -5px;
  color: #fff;
  opacity: 0.1;
  white-space: nowrap;
}
.banners__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
}
.banners__lead {
  margin: 0;
  width: clamp(280px, 33.75vw, 486px);
  font-family: "Switzer", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2.22vw, 36px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
.banners__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.94vw, 16px);
  padding: clamp(16px, 1.88vw, 32px) clamp(24px, 2.78vw, 48px);
  border: 1.7px solid #fff;
  border-radius: 999px;
  background: rgba(19, 5, 68, 0.1);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.88vw, 30px);
  line-height: 1;
  letter-spacing: 0.02em;
  transition: background-color 0.25s ease;
  cursor: pointer;
}
.banners__cta:hover, .banners__cta:focus-visible {
  background: rgba(19, 5, 68, 0.18);
}
.banners__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.banners__cta-label {
  position: relative;
  display: block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}
.banners__cta-text {
  display: block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.banners__cta-text:nth-child(2) {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.banners__cta:hover .banners__cta-text, .banners__cta:focus-visible .banners__cta-text {
  transform: translateY(-100%);
}
.banners__cta-arrow {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: clamp(22px, 2.36vw, 38px);
  height: clamp(22px, 2.36vw, 38px);
  overflow: hidden;
}
.banners__cta-arrow img {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.banners__cta-arrow img:nth-child(2) {
  position: absolute;
  top: 100%;
  left: 0;
}
.banners__cta:hover .banners__cta-arrow img, .banners__cta:focus-visible .banners__cta-arrow img {
  transform: translateY(-100%);
}
@media (max-width: 768px) {
  /* Móvil: mantiene gradient violeta del desktop, sin card blanca, padding compacto. */
  .home-footer-stack > .banners--contacto {
    padding-inline: 0;
    padding-block: 0;
  }
  .banners--contacto .banners__inner {
    padding: clamp(20px, calc(24 / 375 * 100vw), 28px) clamp(20px, calc(24 / 375 * 100vw), 28px);
    border-radius: 0;
    background: linear-gradient(180deg, #cbc7ff 0%, #b7c9fd 100%);
    min-height: 0;
  }
  .banners--contacto .banners__marquee-text {
    color: #fff;
    opacity: 0.12;
    font-size: clamp(56px, calc(72 / 375 * 100vw), 84px);
    letter-spacing: -2.5px;
  }
  .banners--contacto .banners__marquee-track {
    animation-duration: 22s;
    gap: 12px;
  }
  .banners--contacto .banners__content {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, calc(24 / 375 * 100vw), 28px);
  }
  .banners--contacto .banners__lead {
    width: 100%;
    color: #fff;
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: clamp(20px, calc(22 / 375 * 100vw), 24px);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .banners--contacto .banners__cta {
    gap: 12px;
    padding: clamp(14px, calc(18 / 375 * 100vw), 20px) clamp(20px, calc(24 / 375 * 100vw), 26px);
    font-size: clamp(13px, calc(14 / 375 * 100vw), 15px);
    border-width: 1.4px;
  }
  .banners--contacto .banners__cta-arrow {
    width: clamp(18px, calc(20 / 375 * 100vw), 22px);
    height: clamp(18px, calc(20 / 375 * 100vw), 22px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .banners__cta-text, .banners__cta-arrow img {
    transition: none;
  }
}

@keyframes banners-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* =========================================================================
   RESPONSIVE MÓVIL CONSOLIDADO — spec Figma móvil (viewport base 375px)
   Solo elementos que aún no estaban cubiertos en sus bloques específicos:
   bandas de fondo (bolas/pildoras), marquesina y reset de offsets desktop.
   Los bloques tipográficos por sección ya quedaron en sus @media específicos
   (hero-ensayos, intro-compromiso, innovacion-stack, entenderlo, claves-cards,
   logos-cloud y banners--contacto).
   ========================================================================= */
@media (max-width: 768px) {
  /* Bloque 5 Figma — Marquesina "es seguir avanzando · es ir a más" 64.83px Switzer Regular / 1.0 / -2px */
  .cinta-ensayos {
    height: clamp(96px, calc(125.885 / 375 * 100vw), 125.885px);
    max-height: none;
    min-height: 0;
  }
  .cinta-ensayos__item {
    gap: clamp(8px, calc(12 / 375 * 100vw), 12px);
    padding-right: clamp(8px, calc(12 / 375 * 100vw), 12px);
  }
  .cinta-ensayos__logo {
    width: clamp(160px, calc(260.414 / 375 * 100vw), 260.414px);
    height: clamp(32px, calc(50.246 / 375 * 100vw), 50.246px);
    max-width: none;
    max-height: none;
    transform: translateY(clamp(12px, calc(18 / 375 * 100vw), 11px));
  }
  .cinta-ensayos__text {
    font-family: "Switzer", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: clamp(52px, calc(64.83 / 375 * 100vw), 64.83px);
    line-height: 1;
    letter-spacing: clamp(-2px, calc(-2 / 375 * 100vw), -1.7px);
    color: #000;
  }

  /* Bloques 1, 8, 14, 15 Figma — Bandas "Bolas"/"Bolas2": en móvil se reduce el tamaño
     de las bolas/blobs para que la composición tenga peso visual coherente con 375px. */
  .fondo-bolas__bola {
    width: clamp(72px, calc(112.917 / 375 * 100vw), 112.917px);
    height: clamp(72px, calc(112.917 / 375 * 100vw), 112.917px);
  }
  .fondo-bolas--limon .fondo-bolas__bola {
    width: clamp(64px, calc(100.524 / 375 * 100vw), 100.524px);
    height: clamp(64px, calc(100.524 / 375 * 100vw), 100.524px);
  }
  .fondo-bolas__blob {
    opacity: 0.4;
  }

  /* Bloque 6 Figma — Banda "Cels" rosa: cápsulas más finas y cortas en móvil */
  .fondo-pildoras__pildora {
    width: clamp(18px, calc(26.418 / 375 * 100vw), 26.418px);
    height: clamp(80px, calc(126.39 / 375 * 100vw), 126.39px);
  }

  /* Reset de offsets negativos desktop que descuadran el stack en móvil */
  .home-entenderlo-stack {
    margin-top: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .home-entenderlo-stack > .entenderlo {
    padding-top: clamp(48px, calc(80 / 375 * 100vw), 80px);
  }
  .home-entenderlo-stack > .entenderlo-video {
    margin-top: 0;
  }

  /* El banner pega directo con el módulo anterior, sin padding-top en el wrapper. */
  .home-footer-stack {
    padding-block: 0;
  }
}

/* ============================================================
   Video modal (popup vídeo hero-secundario)
   ============================================================ */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.video-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
.video-modal__content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.96);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-modal.is-open .video-modal__content {
  transform: scale(1);
}
.video-modal__video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  border: 0;
}
.video-modal__close {
  position: absolute;
  top: clamp(16px, 2vw, 32px);
  right: clamp(16px, 2vw, 32px);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s, background 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.video-modal.is-open .video-modal__close {
  opacity: 1;
}
.video-modal__close:hover,
.video-modal__close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}
.video-modal__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.video-modal__close svg {
  width: 24px;
  height: 24px;
}
body.is-modal-open {
  overflow: hidden;
}