/* =========================================================
       DURANDESIGNER STUDIO — DEMO 06
       HTML + CSS en index.html + JavaScript en js/main.js
       ========================================================= */

    :root {
      --paper: #f4f3ef;
      --white: #ffffff;
      --ink: #111111;
      --muted: #6f706b;
      --line: rgba(17, 17, 17, .14);
      --chrome: #2f55ff;
      --chrome-deep: #1734b8;
      --ochre: #c59435;
      --glass: rgba(255, 255, 255, .58);
      --header-height: 76px;
      --radius: 22px;
      --ease: cubic-bezier(.2, .75, .2, 1);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--header-height);
      background: var(--paper);
    }

    body {
      font-family: "Inter", Arial, sans-serif;
      color: var(--ink);
      background: var(--paper);
      line-height: 1.5;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.menu-open {
      overflow: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img,
    video {
      display: block;
      width: 100%;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    ::selection {
      color: var(--white);
      background: var(--chrome);
    }

    .display {
      font-family: "Archivo Black", Arial Black, sans-serif;
      font-weight: 400;
      letter-spacing: -.055em;
      text-transform: uppercase;
      line-height: .86;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: .75rem;
      font-size: .73rem;
      font-weight: 600;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: currentColor;
    }

    .screen-reader-text {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

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

    .site-header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 1000;
      height: var(--header-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(20px, 4vw, 64px);
      border-bottom: 1px solid transparent;
      transition:
        background .35s ease,
        border-color .35s ease,
        backdrop-filter .35s ease;
    }

    .site-header.is-scrolled {
      background: rgba(244, 243, 239, .78);
      border-color: var(--line);
      backdrop-filter: blur(18px) saturate(150%);
      -webkit-backdrop-filter: blur(18px) saturate(150%);
    }

    .site-header.menu-active {
      background: rgba(244, 243, 239, .96);
      border-color: var(--line);
      backdrop-filter: blur(18px) saturate(145%);
      -webkit-backdrop-filter: blur(18px) saturate(145%);
    }

    .brand {
      position: relative;
      z-index: 2;
      font-family: "Archivo Black", Arial Black, sans-serif;
      font-size: clamp(.92rem, 1.2vw, 1.1rem);
      letter-spacing: -.04em;
      text-transform: uppercase;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .language {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .65rem .8rem;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .08em;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.35);
    }

    .language span {
      color: var(--muted);
    }

    .language strong {
      color: var(--ink);
    }

    .header-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 43px;
      padding: 0 1.15rem;
      border-radius: 999px;
      color: var(--white);
      background: var(--ink);
      font-size: .77rem;
      font-weight: 600;
      letter-spacing: .04em;
      transition: transform .25s var(--ease), background .25s ease;
    }

    .header-cta:hover {
      transform: translateY(-2px);
      background: var(--chrome);
    }

    .menu-toggle {
      display: none;
      position: relative;
      z-index: 1101;
      width: 43px;
      height: 43px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      appearance: none;
      -webkit-appearance: none;
      background: rgba(255,255,255,.72);
      cursor: pointer;
      touch-action: manipulation;
    }

    .menu-toggle span,
    .menu-toggle::before {
      content: "";
      display: block;
      width: 17px;
      height: 1.5px;
      margin: 4px auto;
      background: var(--ink);
      transition: transform .25s ease;
    }

    .menu-toggle.is-open::before {
      transform: translateY(2.75px) rotate(45deg);
    }

    .menu-toggle.is-open span {
      transform: translateY(-2.75px) rotate(-45deg);
    }

    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 1050;
      display: none;
      padding: calc(var(--header-height) + 48px) 22px 32px;
      background: rgba(244,243,239,.96);
      backdrop-filter: blur(22px) saturate(145%);
      -webkit-backdrop-filter: blur(22px) saturate(145%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-12px);
      transition: opacity .3s ease, visibility .3s ease, transform .3s var(--ease);
    }

    .mobile-menu.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .mobile-menu nav {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--line);
    }

    .mobile-menu a {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
      font-family: "Archivo Black", Arial Black, sans-serif;
      font-size: clamp(1.6rem, 8vw, 2.5rem);
      line-height: 1;
      letter-spacing: -.05em;
      text-transform: uppercase;
    }

    .mobile-menu a span {
      font-family: "Inter", Arial, sans-serif;
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .1em;
      color: var(--muted);
    }

    .mobile-menu-footer {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-top: 28px;
      font-size: .7rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
    }

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

    .hero {
      min-height: 100svh;
      position: relative;
      display: grid;
      align-items: end;
      overflow: hidden;
      isolation: isolate;
      padding: calc(var(--header-height) + 40px) clamp(20px, 4vw, 64px) clamp(28px, 4vw, 58px);
      color: var(--white);
      background: #171717;
    }

    .hero-media {
      position: absolute;
      inset: 0;
      z-index: -3;
      overflow: hidden;
    }

    .hero-media img {
      height: 100%;
      object-fit: cover;
      object-position: center 42%;
      transform: scale(1.035);
      animation: heroDrift 16s ease-in-out infinite alternate;
    }

    @keyframes heroDrift {
      from { transform: scale(1.035) translate3d(0, 0, 0); }
      to   { transform: scale(1.09) translate3d(0, -1.2%, 0); }
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.74) 100%),
        linear-gradient(90deg, rgba(0,0,0,.35), transparent 60%);
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto -12% -28% 26%;
      z-index: -1;
      height: 54%;
      background: linear-gradient(110deg, rgba(47,85,255,.5), rgba(197,148,53,.22), transparent 72%);
      filter: blur(70px);
      opacity: .8;
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
      gap: clamp(30px, 6vw, 100px);
      align-items: end;
    }

    .hero-title {
      max-width: 1060px;
      font-size: clamp(4.25rem, 11.7vw, 11.2rem);
    }

    .hero-title .outline {
      color: transparent;
      -webkit-text-stroke: 1.35px rgba(255,255,255,.84);
      text-stroke: 1.35px rgba(255,255,255,.84);
    }

    .hero-copy {
      align-self: end;
      justify-self: end;
      max-width: 350px;
      padding: clamp(20px, 2vw, 30px);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: var(--radius);
      background: rgba(255,255,255,.1);
      backdrop-filter: blur(20px) saturate(145%);
      -webkit-backdrop-filter: blur(20px) saturate(145%);
      box-shadow: 0 24px 70px rgba(0,0,0,.2);
    }

    .hero-copy p {
      font-size: clamp(.95rem, 1.15vw, 1.08rem);
      color: rgba(255,255,255,.86);
    }

    .hero-copy .eyebrow {
      margin-bottom: 1rem;
      color: rgba(255,255,255,.7);
    }

    .hero-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 1.5rem;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 1.15rem;
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .04em;
      transition:
        transform .25s var(--ease),
        color .25s ease,
        background .25s ease;
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .button--light {
      color: var(--ink);
      background: var(--white);
      border-color: var(--white);
    }

    .button--ghost {
      color: var(--white);
      background: transparent;
      border-color: rgba(255,255,255,.45);
    }

    .hero-meta {
      position: absolute;
      right: clamp(20px, 4vw, 64px);
      top: calc(var(--header-height) + 30px);
      display: flex;
      gap: 24px;
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.7);
    }

    .scroll-cue {
      position: absolute;
      left: clamp(20px, 4vw, 64px);
      bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.66);
    }

    .scroll-cue::before {
      content: "";
      width: 36px;
      height: 1px;
      background: currentColor;
      transform-origin: left center;
      animation: scrollPulse 1.8s ease-in-out infinite;
    }

    @keyframes scrollPulse {
      0%,100% { transform: scaleX(.35); opacity: .45; }
      50% { transform: scaleX(1); opacity: 1; }
    }

    /* =========================================================
       NAVEGACIÓN DE CAPÍTULOS
       ========================================================= */

    .chapter-nav {
      position: fixed;
      z-index: 900;
      left: clamp(12px, 1.8vw, 30px);
      top: 50%;
      transform: translateY(-50%);
      width: 152px;
      padding: 14px;
      border: 1px solid rgba(17,17,17,.11);
      border-radius: 18px;
      background: rgba(244,243,239,.66);
      backdrop-filter: blur(18px) saturate(145%);
      -webkit-backdrop-filter: blur(18px) saturate(145%);
      box-shadow: 0 16px 45px rgba(0,0,0,.07);
      opacity: 0;
      visibility: hidden;
      transition: opacity .35s ease, visibility .35s ease;
    }

    .chapter-nav.is-visible {
      opacity: 1;
      visibility: visible;
    }

    .chapter-nav a {
      display: grid;
      grid-template-columns: 24px 1fr;
      align-items: center;
      gap: 7px;
      min-height: 35px;
      color: var(--muted);
      font-size: .62rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      transition: color .25s ease;
    }

    .chapter-nav a::before {
      content: "";
      grid-column: 1 / -1;
      height: 1px;
      background: var(--line);
      transform-origin: left center;
      transform: scaleX(.28);
      transition: transform .35s var(--ease), background .35s ease;
    }

    .chapter-nav a:first-child::before {
      display: none;
    }

    .chapter-nav a span:first-of-type {
      font-weight: 600;
    }

    .chapter-nav a span:last-of-type {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .chapter-nav a.is-active {
      color: var(--ink);
    }

    .chapter-nav a.is-active::before {
      transform: scaleX(1);
      background: linear-gradient(90deg, var(--chrome), var(--ochre));
    }

    .mobile-progress {
      display: none;
      position: fixed;
      z-index: 950;
      top: var(--header-height);
      left: 0;
      right: 0;
      height: 34px;
      padding: 7px 18px 0;
      background: rgba(244,243,239,.88);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
    }

    .mobile-progress-label {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      font-size: .62rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .mobile-progress-track {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 5px;
      height: 1px;
      background: var(--line);
      overflow: hidden;
    }

    .mobile-progress-bar {
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, var(--chrome), var(--ochre));
      transition: width .2s linear;
    }

    /* =========================================================
       CAPÍTULOS / SCROLLYTELLING
       ========================================================= */

    .story {
      position: relative;
      min-height: 120svh;
      padding: clamp(110px, 12vw, 180px) clamp(20px, 5vw, 80px);
      border-top: 1px solid var(--line);
      overflow: clip;
    }

    .story::before {
      content: attr(data-ghost);
      position: absolute;
      top: 3vw;
      right: -1vw;
      z-index: -1;
      font-family: "Archivo Black", Arial Black, sans-serif;
      font-size: clamp(7rem, 21vw, 22rem);
      line-height: .78;
      letter-spacing: -.08em;
      color: rgba(17,17,17,.025);
      pointer-events: none;
    }

    .story--dark {
      color: var(--white);
      background: #111111;
      border-color: rgba(255,255,255,.14);
    }

    .story--dark::before {
      color: rgba(255,255,255,.035);
    }

    .story--ochre {
      background:
        radial-gradient(circle at 100% 0%, rgba(197,148,53,.18), transparent 34%),
        var(--paper);
    }

    .story-shell {
      width: min(100%, 1560px);
      margin: 0 auto;
    }

    .story-heading {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr) minmax(250px, 390px);
      gap: clamp(24px, 4vw, 65px);
      align-items: start;
      margin-bottom: clamp(48px, 7vw, 105px);
    }

    .story-number {
      font-family: "Archivo Black", Arial Black, sans-serif;
      font-size: clamp(1.7rem, 3.4vw, 3.5rem);
      letter-spacing: -.06em;
      color: var(--chrome);
    }

    .story--dark .story-number {
      color: #88a0ff;
    }

    .story-title {
      max-width: 830px;
      font-size: clamp(3.2rem, 7vw, 7.8rem);
      overflow-wrap: anywhere;
    }

    .story-intro {
      max-width: 390px;
      padding-top: .45rem;
      font-size: clamp(.94rem, 1.15vw, 1.08rem);
      color: var(--muted);
    }

    .story--dark .story-intro {
      color: rgba(255,255,255,.64);
    }

    .service-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 1.5rem;
    }

    .service-list span {
      padding: .48rem .67rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: .68rem;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .story--dark .service-list span {
      border-color: rgba(255,255,255,.18);
    }

    .story-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
      gap: clamp(24px, 5vw, 82px);
      align-items: center;
    }

    .story:nth-of-type(even) .story-layout .motion-frame {
      order: 2;
    }

    .motion-frame {
      position: relative;
      min-height: clamp(430px, 63vw, 760px);
      overflow: hidden;
      border-radius: var(--radius);
      isolation: isolate;
      background: #111111;
      box-shadow: 0 30px 90px rgba(0,0,0,.13);
    }


    /* En bloques claros y oscuros, la tipografía flota directamente sin fondos */
    .motion-frame--type {
      background: transparent !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .motion-frame--type::before,
    .motion-frame--type::after {
      display: none !important;
    }

    .story:not(.story--dark) .motion-frame--type .kinetic span:nth-child(2) {
      -webkit-text-stroke-color: rgba(17,17,17,.78);
      text-stroke-color: rgba(17,17,17,.78);
    }

    .story:not(.story--dark) .motion-frame--type .motion-label {
      color: rgba(17,17,17,.72);
      border-color: rgba(17,17,17,.22);
      background: rgba(255,255,255,.34);
    }

    .story:not(.story--dark) .motion-frame--type .motion-label::before {
      background: var(--chrome);
      box-shadow: 0 0 0 5px rgba(47,85,255,.12);
    }

    .motion-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 18% 20%, rgba(47,85,255,.09), transparent 28%),
        radial-gradient(circle at 82% 82%, rgba(197,148,53,.08), transparent 32%);
      pointer-events: none;
    }

    .kinetic {
      position: absolute;
      inset: 0;
      display: grid;
      align-content: center;
      gap: .04em;
      padding: clamp(16px, 2vw, 32px) 0;
      font-family: "Archivo Black", Arial Black, sans-serif;
      font-size: clamp(2.2rem, 5.5vw, 6rem);
      letter-spacing: -.075em;
      line-height: .78;
      text-transform: uppercase;
      width: 100%;
    }

    .kinetic span {
      display: block;
      width: 100%;
      max-width: 100%;
      word-break: break-word;
      color: transparent;
      background-image: linear-gradient(
        110deg,
        #4f70ff 0%,
        #6d43de 38%,
        #b05ca8 68%,
        #c59435 100%
      );
      background-size: 180% 180%;
      background-position: var(--gradient-x, 50%) var(--gradient-y, 50%);
      -webkit-background-clip: text;
      background-clip: text;
      transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(var(--scale, 1));
      opacity: var(--alpha, 1);
      will-change: transform, opacity, background-position;
    }

    .kinetic span:nth-child(1) {
      --x: -2%;
    }

    .kinetic span:nth-child(2) {
      color: transparent;
      background-image: none;
      -webkit-text-stroke: 1.7px rgba(244,243,239,.92);
      text-stroke: 1.7px rgba(244,243,239,.92);
      --x: 3%;
    }

    .kinetic span:nth-child(3) {
      --x: 0%;
    }

    .motion-frame.is-motion-active .kinetic span {
      transition: none;
    }

    .motion-label {
      position: absolute;
      left: 20px;
      bottom: 20px;
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      padding: .62rem .82rem;
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 999px;
      color: rgba(255,255,255,.82);
      background: rgba(0,0,0,.12);
      backdrop-filter: blur(10px);
      font-size: .63rem;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .motion-label::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 5px rgba(255,255,255,.15);
      animation: blink 1.7s ease infinite;
    }

    @keyframes blink {
      50% { opacity: .3; }
    }

    /* Sustituye .motion-frame por:
       <video autoplay muted loop playsinline poster="...">
         <source src="assets/video/tu-video.mp4" type="video/mp4">
       </video>
    */

    .masonry {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 34px;
      gap: clamp(12px, 1.5vw, 20px);
      min-height: 680px;
      align-content: center;
    }

    .project-card {
      position: relative;
      overflow: hidden;
      border-radius: calc(var(--radius) - 4px);
      background: #ddd;
      box-shadow: 0 22px 55px rgba(0,0,0,.09);
      isolation: isolate;
    }

    .project-card:nth-child(1) {
      grid-column: 1 / span 8;
      grid-row: 1 / span 11;
    }

    .project-card:nth-child(2) {
      grid-column: 7 / span 6;
      grid-row: 10 / span 9;
    }

    .project-card:nth-child(3) {
      grid-column: 1 / span 5;
      grid-row: 13 / span 8;
    }

    .project-card img {
      height: 100%;
      object-fit: cover;
      transition: transform 1s var(--ease), filter .6s ease;
    }

    .project-card:hover img {
      transform: scale(1.045);
    }

    /* Eliminamos el gradiente que ensuciaba la imagen del portafolio */
    .project-card::after {
      display: none !important;
    }

    .reveal {
      opacity: 0;
      transform: translate3d(0, 42px, 0);
      clip-path: inset(8% 0 0 0);
      transition:
        opacity .9s var(--ease),
        transform 1.05s var(--ease),
        clip-path 1.05s var(--ease);
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      clip-path: inset(0 0 0 0);
    }

    .reveal-delay-1 { transition-delay: .12s; }
    .reveal-delay-2 { transition-delay: .24s; }
    .reveal-delay-3 { transition-delay: .36s; }

    /* =========================================================
       CLIENTES / CONTACTO
       ========================================================= */

    .contact {
      position: relative;
      min-height: 86svh;
      display: grid;
      align-items: end;
      padding: clamp(120px, 14vw, 200px) clamp(20px, 5vw, 80px) clamp(40px, 5vw, 75px);
      color: var(--white);
      background:
        radial-gradient(circle at 80% 15%, rgba(47,85,255,.55), transparent 26%),
        radial-gradient(circle at 18% 80%, rgba(197,148,53,.32), transparent 27%),
        #101010;
      overflow: hidden;
    }

    .contact::before {
      content: "CONTACTO";
      position: absolute;
      top: 2vw;
      left: -1vw;
      font-family: "Archivo Black", Arial Black, sans-serif;
      font-size: clamp(7rem, 22vw, 24rem);
      letter-spacing: -.08em;
      line-height: .8;
      color: rgba(255,255,255,.035);
      white-space: nowrap;
    }

    .contact-grid {
      position: relative;
      z-index: 1;
      width: min(100%, 1560px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
      gap: clamp(36px, 8vw, 130px);
      align-items: end;
    }

    .contact-title {
      max-width: 1000px;
      font-size: clamp(4.1rem, 10vw, 11rem);
    }

    .contact-side {
      padding: 26px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: var(--radius);
      background: rgba(255,255,255,.075);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .contact-side p {
      color: rgba(255,255,255,.7);
      margin-bottom: 1.35rem;
    }

    .client-strip {
      position: relative;
      z-index: 1;
      width: min(100%, 1560px);
      margin: clamp(65px, 8vw, 120px) auto 0;
      padding-top: 25px;
      border-top: 1px solid rgba(255,255,255,.18);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 18px 34px;
      color: rgba(255,255,255,.55);
      font-size: .73rem;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .site-footer {
      position: relative;
      z-index: 1;
      width: min(100%, 1560px);
      margin: 50px auto 0;
      display: flex;
      justify-content: space-between;
      gap: 24px;
      color: rgba(255,255,255,.45);
      font-size: .68rem;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .footer-social {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 50%;
      color: rgba(255,255,255,.68);
      transition: color .25s ease, border-color .25s ease, transform .25s var(--ease), background .25s ease;
    }

    .footer-social a:hover {
      color: var(--white);
      border-color: rgba(255,255,255,.62);
      background: rgba(255,255,255,.08);
      transform: translateY(-2px);
    }

    .footer-social svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }



    /* =========================================================
       TICKER DE LOGOTIPOS — BRANDING
       ========================================================= */

    .brand-ticker-section {
      position: relative;
      width: 100%;
      margin-top: clamp(72px, 9vw, 130px);
      padding: clamp(42px, 5vw, 72px) 0;
      overflow: hidden;
      border-top: 1px solid rgba(255, 255, 255, .10);
      border-bottom: 1px solid rgba(255, 255, 255, .10);
      background: #0b0b0b;
    }

    .brand-ticker-section::before,
    .brand-ticker-section::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 3;
      width: clamp(42px, 10vw, 150px);
      pointer-events: none;
    }

    .brand-ticker-section::before {
      left: 0;
      background: linear-gradient(90deg, #0b0b0b 0%, rgba(11, 11, 11, 0) 100%);
    }

    .brand-ticker-section::after {
      right: 0;
      background: linear-gradient(270deg, #0b0b0b 0%, rgba(11, 11, 11, 0) 100%);
    }

    .ticker-wrapper {
      display: flex;
      width: max-content;
      will-change: transform;
      animation: brandTicker 35s linear infinite;
    }

    .brand-ticker-section:hover .ticker-wrapper,
    .brand-ticker-section:focus-within .ticker-wrapper {
      animation-play-state: paused;
    }

    .ticker-track {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: clamp(58px, 7vw, 112px);
      padding-right: clamp(58px, 7vw, 112px);
    }

    .ticker-track img {
      flex: 0 0 auto;
      width: auto;
      height: clamp(34px, 3.2vw, 48px);
      max-width: clamp(120px, 15vw, 220px);
      object-fit: contain;
      /* Los archivos recomendados son PNG negros con fondo transparente. */
      filter: grayscale(1) brightness(0) invert(1);
      opacity: .42;
      transition: filter .4s var(--ease), opacity .4s ease, transform .4s var(--ease);
    }

    .ticker-track img:hover {
      filter: grayscale(1) brightness(0) invert(1);
      opacity: 1;
      transform: translateY(-2px);
    }

    @keyframes brandTicker {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(-50%, 0, 0); }
    }

    /* =========================================================
       FOCO — SVG TRANSPARENTE + SCROLLYTELLING + LINE BOIL
       ========================================================= */

    .motion-frame--foco {
      position: relative;
      display: grid;
      place-items: center;
      min-height: clamp(420px, 49vw, 680px);
      padding: 0;
      overflow: visible;
      isolation: isolate;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }

    .motion-frame--foco::before,
    .motion-frame--foco::after {
      display: none !important;
      content: none !important;
    }

    .foco-stage {
      position: relative;
      width: min(100%, 720px);
      transform-origin: 50% 58%;
      will-change: transform, opacity, filter;
    }

    .foco-inline-svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
      background: transparent;
    }

    .foco-inline-svg > #_01,
    .foco-inline-svg > #_02,
    .foco-inline-svg > #_03,
    .foco-inline-svg > #_04,
    .foco-inline-svg > #_05,
    .foco-inline-svg > #_06,
    .foco-inline-svg > #_07,
    .foco-inline-svg > #_08,
    .foco-inline-svg > #_09,
    .foco-inline-svg > #_10,
    .foco-inline-svg > #_11,
    .foco-inline-svg > #_12,
    .foco-inline-svg > #_13 {
      transform-box: fill-box;
      transform-origin: center;
      will-change: transform, opacity;
    }

    @media (max-width: 900px) {
      .motion-frame--foco {
        min-height: min(72vw, 560px);
      }

      .foco-stage {
        width: min(100%, 640px);
      }
    }

    @media (max-width: 600px) {
      .motion-frame--foco {
        min-height: 330px;
      }

      .foco-stage {
        width: 105%;
        max-width: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .foco-stage,
    .foco-inline-svg > #_01,
    .foco-inline-svg > #_02,
    .foco-inline-svg > #_03,
    .foco-inline-svg > #_04,
    .foco-inline-svg > #_05,
    .foco-inline-svg > #_06,
    .foco-inline-svg > #_07,
    .foco-inline-svg > #_08,
    .foco-inline-svg > #_09,
    .foco-inline-svg > #_10,
    .foco-inline-svg > #_11,
    .foco-inline-svg > #_12,
    .foco-inline-svg > #_13 {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
      }

      .foco-inline-svg > #_02,
      .foco-inline-svg > #_03,
      .foco-inline-svg > #_04,
      .foco-inline-svg > #_05,
      .foco-inline-svg > #_06,
      .foco-inline-svg > #_07,
      .foco-inline-svg > #_08,
      .foco-inline-svg > #_09,
      .foco-inline-svg > #_10,
      .foco-inline-svg > #_11,
      .foco-inline-svg > #_12,
      .foco-inline-svg > #_13 {
        display: none;
      }
    }


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

    @media (max-width: 1180px) {
      .chapter-nav {
        width: 48px;
        padding: 10px;
      }

      .chapter-nav a {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .chapter-nav a span:last-of-type {
        display: none;
      }

      .story {
        padding-left: clamp(75px, 8vw, 95px);
      }

      .story-heading {
        grid-template-columns: 80px minmax(0, 1fr);
      }

      .story-intro {
        grid-column: 2;
      }
    }

    @media (max-width: 900px) {
      :root {
        --header-height: 66px;
      }

      .site-header {
        padding-inline: 18px;
      }

      .header-cta,
      .language {
        display: none;
      }

      .menu-toggle {
        display: block;
        position: relative;
        z-index: 1001;
      }

      .mobile-menu {
        display: block;
      }

      .chapter-nav {
        display: none;
      }

      .mobile-progress {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
      }

      .mobile-progress.is-visible {
        opacity: 1;
        visibility: visible;
      }

      .hero {
        padding-inline: 20px;
      }

      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        justify-self: start;
        max-width: 420px;
      }

      .hero-meta {
        display: none;
      }

      .story {
        min-height: auto;
        padding: 120px 20px 95px;
      }

      .story-heading {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .story-intro {
        grid-column: 1;
      }

      .story-layout {
        grid-template-columns: 1fr;
      }

      .story:nth-of-type(even) .story-layout .motion-frame {
        order: initial;
      }

      .motion-frame {
        min-height: min(78vw, 620px);
      }

      .masonry {
        min-height: 760px;
      }

      .contact {
        padding-inline: 20px;
      }

      .contact-grid {
        grid-template-columns: 1fr;
      }

      .contact-side {
        max-width: 480px;
      }
    }

    @media (max-width: 600px) {
      .hero {
        min-height: 100svh;
        padding-top: calc(var(--header-height) + 54px);
        padding-right: 20px;
        padding-bottom: 34px;
        padding-left: 20px;
      }

      .hero-media img {
        object-position: center center;
      }

      .hero-title {
        width: calc(100vw - 40px);
        max-width: none;
        font-size: clamp(2.8rem, 14.25vw, 4.65rem);
        line-height: .91;
        letter-spacing: -.062em;
        overflow: visible;
      }

      .hero-copy {
        padding: 18px;
      }

      .story-title {
        font-size: clamp(3.1rem, 16vw, 5.2rem);
      }

      .motion-frame {
        min-height: 470px;
      }

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

      .masonry {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 300px 230px 230px;
        gap: 12px;
        min-height: 0;
      }

      .project-card:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: 1;
      }

      .project-card:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
      }

      .project-card:nth-child(3) {
        grid-column: 2;
        grid-row: 2 / span 2;
      }

      .contact-title {
        font-size: clamp(4rem, 19vw, 7rem);
      }

      .client-strip {
        justify-content: flex-start;
      }

      .site-footer {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }

      .reveal {
        opacity: 1;
        transform: none;
        clip-path: none;
      }

      .kinetic span {
        transform: none !important;
        opacity: 1 !important;
        background-position: 50% 50% !important;
      }

      .ticker-wrapper {
        animation: none !important;
      }
    }
  

    /* =========================================================
       AJUSTES DEFINITIVOS — DEMO 3
       ========================================================= */
    .brand { width: clamp(150px, 17vw, 245px); height: 42px; display:block; }
    .brand-logo { position:absolute; inset:50% auto auto 0; width:100%; height:auto; transform:translateY(-50%); transition:opacity .3s ease; }
    .brand-logo--light { opacity:1; }
    .brand-logo--dark { opacity:0; }
    .site-header.is-scrolled .brand-logo--light,
    .site-header.menu-active .brand-logo--light { opacity:0; }
    .site-header.is-scrolled .brand-logo--dark,
    .site-header.menu-active .brand-logo--dark { opacity:1; }
    .language, .service-list, .client-strip { display:none !important; }
    .brand-ticker-section.full-bleed {
      width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    }
    .video-experiments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
    .ai-video-card { position:relative; overflow:hidden; border-radius:calc(var(--radius) - 4px); background:#080808; aspect-ratio:16/10; box-shadow:0 24px 70px rgba(0,0,0,.18); }
    .ai-video-card:nth-child(2) { aspect-ratio:4/5; }
    .ai-video-card video { width:100%; height:100%; object-fit:cover; }
    .ai-video-caption { position:absolute; left:16px; right:16px; bottom:14px; z-index:2; display:flex; justify-content:space-between; gap:16px; color:#fff; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
    .ai-video-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.68)); pointer-events:none; }
    .studio-statement { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:clamp(28px,6vw,90px); align-items:end; }
    .studio-quote { font-family:"Archivo Black",Arial Black,sans-serif; font-size:clamp(2rem,5vw,5.8rem); line-height:.92; letter-spacing:-.055em; text-transform:uppercase; }
    .studio-copy { max-width:520px; color:var(--muted); font-size:clamp(1rem,1.2vw,1.12rem); }
    @media (max-width:900px) {
      .brand { width:165px; }
      .studio-statement, .video-experiments { grid-template-columns:1fr; }
      .ai-video-card, .ai-video-card:nth-child(2) { aspect-ratio:16/10; }
      .masonry { display:grid !important; grid-template-columns:1fr !important; grid-template-rows:none !important; grid-auto-rows:auto !important; min-height:0 !important; gap:14px; }
      .project-card:nth-child(n) { grid-column:1 !important; grid-row:auto !important; min-height:0; aspect-ratio:4/3; }
    }
    @media (max-width:600px) {
      .brand { width:145px; }
      .project-card:nth-child(n) { aspect-ratio:4/3; }
      .ticker-track { gap:48px; padding-right:48px; }
      .ticker-track img { height:32px; max-width:145px; }
    }

  

    /* =========================================================
       REFINAMIENTO VISUAL V2 — LOGO, PALETA, BRANDING Y RESPONSIVE
       ========================================================= */
    :root {
      --paper: #f1f0eb;
      --ink: #11110f;
      --muted: #686a65;
      --chrome: #3157ff;
      --chrome-deep: #1737c8;
      --ochre: #b98528;
      --night: #0b0c0f;
      --night-soft: #111319;
      --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body,
    button,
    input,
    textarea,
    .mobile-menu a span,
    .story-number,
    .project-meta span,
    .motion-label,
    .ai-video-caption,
    .site-footer {
      font-family: var(--font-body);
    }

    /* Logo: 40% menor en escritorio respecto a la entrega anterior */
    /* Reducido 10% adicional (valores previos: clamp(90px,10.2vw,147px) / 36px) */
    .brand {
      width: clamp(81px, 9.18vw, 132px);
      height: 32px;
    }

    /* Hero oscuro más profundo, con azul cromático y ocre muy contenidos */
    .hero {
      background: var(--night);
    }
    .hero::before {
      background:
        linear-gradient(180deg, rgba(4,5,8,.10) 0%, rgba(4,5,8,.16) 38%, rgba(4,5,8,.88) 100%),
        linear-gradient(90deg, rgba(4,5,8,.56), transparent 62%);
    }
    .hero::after {
      background: linear-gradient(112deg, rgba(49,87,255,.48), rgba(185,133,40,.18), transparent 72%);
      opacity: .72;
    }

    /* El contador deja de competir con los títulos */
    .story-number {
      font-family: var(--font-body);
      font-size: clamp(.76rem, .9vw, .92rem);
      font-weight: 600;
      line-height: 1;
      letter-spacing: .14em;
      color: var(--chrome);
      padding-top: .72rem;
    }
    .story--dark .story-number {
      color: rgba(255,255,255,.58);
    }

    /* Branding oscuro como capítulo editorial principal */
    .story--branding {
      background:
        radial-gradient(circle at 92% 8%, rgba(49,87,255,.19), transparent 29%),
        radial-gradient(circle at 7% 88%, rgba(185,133,40,.10), transparent 26%),
        var(--night-soft);
      overflow: hidden;
    }
    .story--branding .story-shell {
      position: relative;
    }
    .story--branding .story-layout {
      position: relative;
      grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
      gap: clamp(8px, 2.2vw, 36px);
      align-items: end;
    }

    /* El foco se integra físicamente con el portafolio, no queda suspendido */
    .story--branding .motion-frame--foco {
      z-index: 4;
      width: 122%;
      min-height: clamp(500px, 50vw, 760px);
      margin-right: -30%;
      transform: translate3d(8%, 7%, 0);
      align-self: end;
      pointer-events: none;
    }
    .story--branding .foco-stage {
      width: min(100%, 790px);
      filter: invert(1) grayscale(1) brightness(1.22);
    }
    .story--branding .foco-stage::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 20%;
      right: 10%;
      bottom: 8%;
      height: 10%;
      border-radius: 50%;
      background: rgba(0,0,0,.58);
      filter: blur(26px);
      transform: scaleX(.9);
      opacity: .72;
    }
    .story--branding .masonry {
      position: relative;
      z-index: 2;
    }
    .story--branding .project-card:first-child {
      transform: translate3d(0, 2.5%, 0);
    }

    /* Ticker verdaderamente de borde a borde dentro del capítulo oscuro */
    .story--branding .brand-ticker-section {
      margin-top: clamp(92px, 11vw, 150px);
      background: #08090c;
      border-color: rgba(255,255,255,.11);
    }

    /* Matices suaves para los capítulos claros */
    .story:not(.story--dark):nth-of-type(odd) {
      background:
        radial-gradient(circle at 100% 0%, rgba(49,87,255,.055), transparent 28%),
        var(--paper);
    }
    .story:not(.story--dark):nth-of-type(even) {
      background:
        radial-gradient(circle at 0% 100%, rgba(185,133,40,.07), transparent 30%),
        #f7f6f2;
    }

    @media (max-width: 900px) {
      /* 10% menor en tablet/móvil respecto a la entrega anterior */
      .brand { width: 134px; height: 32px; } /* -10% (antes 149px / 36px) */

      .story-number {
        padding-top: 0;
        margin-bottom: 2px;
      }

      .story--branding .story-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
      }
      .story--branding .motion-frame--foco {
        order: 1;
        width: 116%;
        min-height: min(86vw, 650px);
        margin: 0 -8% -15vw;
        transform: translate3d(0, -2%, 0);
        z-index: 4;
      }
      .story--branding .masonry {
        order: 2;
        z-index: 2;
        padding-top: 0;
      }
      .story--branding .project-card:first-child {
        transform: none;
      }

      /* Una pieza por renglón, a gran escala y respetando su proporción original */
      .masonry {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
        gap: 16px !important;
      }
      .project-card:nth-child(n) {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100%;
        min-height: 0 !important;
        aspect-ratio: auto !important;
      }
      .project-card img {
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: contain;
      }
    }

    @media (max-width: 600px) {
      .brand { width: 118px; height: 29px; } /* -10% (antes 131px / 32px) */

      .story--branding .motion-frame--foco {
        width: 124%;
        min-height: 112vw;
        margin: -6vw -12% -27vw;
        transform: translate3d(0, -1%, 0);
      }
      .story--branding .foco-stage {
        width: 118%;
      }
      .story--branding .foco-stage::after {
        left: 25%;
        right: 8%;
        bottom: 11%;
        height: 8%;
        filter: blur(20px);
      }

      .project-card {
        border-radius: 15px;
      }
      .project-card img {
        max-height: none;
      }
    }


    /* =========================================================
       AJUSTES TIPOGRÁFICOS, RESPONSIVE Y ACENTOS — V3
       ========================================================= */
    :root {
      --chrome: #2f55ff;
      --chrome-deep: #2f55ff;
      --ochre: #2f55ff;
      --text-muted: #686a65;
      --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body,
    button,
    input,
    textarea {
      font-family: var(--font-body);
      font-size: 1.15rem;
      line-height: 1.6;
      color: var(--text-muted);
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    p,
    .story-intro,
    .studio-copy,
    .hero-copy p,
    .contact-side p {
      font-family: var(--font-body);
      font-size: 1.15rem;
      line-height: 1.6;
      color: var(--text-muted);
      font-weight: 300;
    }

    .hero-copy p,
    .story--dark .story-intro,
    .story--dark .studio-copy,
    .story--dark p,
    .contact-side p {
      color: rgba(255,255,255,.72);
    }

    .story-title,
    .hero-title,
    .contact-title,
    .studio-quote {
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
      text-wrap: balance;
      max-width: 100%;
    }

    .story-title {
      font-size: clamp(2.75rem, 6.1vw, 7rem);
      line-height: .9;
    }

    .studio-statement {
      align-items: center;
      grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    }

    .studio-quote {
      max-width: 820px;
      font-size: clamp(2.25rem, 4.15vw, 4.85rem);
      line-height: .98;
      letter-spacing: -.045em;
      text-wrap: balance;
    }

    .story-number,
    .eyebrow,
    .scroll-cue,
    .button,
    .header-cta,
    .chapter-nav,
    .mobile-progress,
    .motion-label,
    .ai-video-caption,
    .site-footer {
      color: inherit;
    }

    .story-number,
    .chapter-nav a.is-active,
    .mobile-progress-bar,
    .motion-label::before {
      --accent: #2f55ff;
    }

    .story-number,
    .chapter-nav a.is-active {
      color: #2f55ff;
    }

    .chapter-nav a.is-active::before,
    .mobile-progress-bar {
      background: #2f55ff;
    }

    .header-cta:hover {
      background: #2f55ff;
    }

    /* El nuevo foco ya está preparado para fondo oscuro: no invertir sus colores. */
    .story--branding .foco-stage {
      filter: none !important;
    }

    .foco-inline-svg {
      background: transparent !important;
    }

    @media (max-width: 1180px) {
      .story-title {
        font-size: clamp(2.65rem, 6.8vw, 5.8rem);
      }
    }

    @media (max-width: 900px) {
      .story-heading {
        min-width: 0;
      }

      .story-title {
        width: 100%;
        font-size: clamp(2.65rem, 10.5vw, 5.25rem);
        line-height: .92;
      }

      .studio-statement {
        grid-template-columns: 1fr;
        gap: 26px;
      }

      .studio-quote {
        max-width: 16ch;
        font-size: clamp(2.2rem, 8vw, 4.4rem);
      }
    }

    @media (max-width: 600px) {
      body,
      button,
      input,
      textarea,
      p,
      .story-intro,
      .studio-copy,
      .hero-copy p,
      .contact-side p {
        font-size: 1.05rem;
      }

      .hero-title {
        font-size: clamp(2.65rem, 13.2vw, 4.2rem);
      }

      .story-title {
        font-size: clamp(2.35rem, 11.7vw, 4.15rem);
        line-height: .94;
        letter-spacing: -.045em;
      }

      .studio-quote {
        max-width: 15ch;
        font-size: clamp(2rem, 10vw, 3.55rem);
        line-height: 1;
      }

      .contact-title {
        font-size: clamp(3.15rem, 15vw, 5.7rem);
      }
    }


    /* =========================================================
       CORRECCIÓN FINAL — LEGIBILIDAD, CONTRASTE Y UX
       ========================================================= */

    /* Declaración del estudio: ligera, editorial y sin apariencia de titular pesado. */
    .studio-quote {
      font-family: var(--font-body) !important;
      max-width: 25ch;
      margin: 0;
      font-size: clamp(1.8rem, 3.25vw, 3.5rem) !important;
      line-height: 1.12 !important;
      letter-spacing: -.035em !important;
      text-transform: none !important;
      font-weight: 200 !important;
      color: var(--ink);
      text-wrap: balance;
    }

    /* Botones: contraste estable en estado normal, hover, teclado y pulsación. */
    .header-cta {
      color: rgba(255,255,255,.94) !important;
      background: rgba(17,17,17,.88);
      border: 1px solid rgba(255,255,255,.16);
      font-weight: 500;
    }

    .header-cta:hover,
    .header-cta:focus-visible {
      color: #ffffff !important;
      background: #2f55ff !important;
      border-color: #2f55ff !important;
      box-shadow: 0 8px 28px rgba(47,85,255,.28);
    }

    .button {
      position: relative;
      isolation: isolate;
      font-weight: 500;
    }

    .button--light {
      color: #111111 !important;
      background: #ffffff !important;
      border-color: #ffffff !important;
    }

    .button--light:hover,
    .button--light:focus-visible {
      color: #ffffff !important;
      background: #2f55ff !important;
      border-color: #2f55ff !important;
      box-shadow: 0 10px 30px rgba(47,85,255,.26);
    }

    .button--ghost {
      color: #ffffff !important;
      background: rgba(0,0,0,.10) !important;
      border-color: rgba(255,255,255,.56) !important;
    }

    .button--ghost:hover,
    .button--ghost:focus-visible {
      color: #111111 !important;
      background: #ffffff !important;
      border-color: #ffffff !important;
    }

    .button:focus-visible,
    .header-cta:focus-visible,
    .chapter-nav a:focus-visible,
    .mobile-menu a:focus-visible,
    .footer-social a:focus-visible {
      outline: 3px solid #2f55ff;
      outline-offset: 4px;
    }

    /* Acentos consistentes y legibles. */
    .eyebrow,
    .story-number,
    .chapter-nav a.is-active,
    .mobile-progress-label {
      color: #2f55ff;
    }

    .story--dark .eyebrow,
    .story--dark .story-number {
      color: #8fa4ff;
    }

    .chapter-nav a {
      color: #595b57;
    }

    .chapter-nav a:hover,
    .chapter-nav a:focus-visible {
      color: #111111;
    }

    .ai-video-caption {
      text-shadow: 0 1px 14px rgba(0,0,0,.55);
    }

    @media (max-width: 900px) {
      .studio-quote {
        max-width: 22ch;
        font-size: clamp(1.7rem, 5.8vw, 2.8rem) !important;
      }
    }

    @media (max-width: 600px) {
      .studio-quote {
        max-width: 19ch;
        font-size: clamp(1.55rem, 7.2vw, 2.3rem) !important;
        line-height: 1.16 !important;
      }
    }


    /* =========================================================
       BLOQUE 01 — ESTUDIO / POSICIONAMIENTO
       ========================================================= */
    .story--studio {
      min-height: auto;
      color: #f7f7f4;
      background:
        radial-gradient(circle at 82% 12%, rgba(47,85,255,.10), transparent 30%),
        #101112;
      border-color: rgba(255,255,255,.10);
      padding-top: clamp(108px, 10vw, 154px);
      padding-bottom: clamp(108px, 10vw, 154px);
    }

    .story--studio::before {
      color: rgba(255,255,255,.025);
    }

    .studio-pro-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: clamp(28px, 3vw, 42px);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .story--studio .story-number {
      padding: 0;
      color: #2f55ff;
    }

    .studio-pro-kicker {
      font-family: var(--font-body);
      font-size: .72rem;
      line-height: 1;
      font-weight: 500;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.52);
    }

    .studio-pro-quote-wrap {
      position: relative;
      max-width: 1340px;
      padding: clamp(54px, 6vw, 90px) 0 clamp(58px, 7vw, 100px) clamp(28px, 4vw, 64px);
    }

    .studio-pro-quote-wrap::before {
      content: "";
      position: absolute;
      left: 0;
      top: clamp(58px, 6vw, 92px);
      bottom: clamp(62px, 7vw, 104px);
      width: 2px;
      background: #2f55ff;
    }

    .studio-pro-quote {
      margin: 0;
      max-width: 36ch;
      font-family: var(--font-body);
      font-size: clamp(1.75rem, 3.05vw, 3.45rem);
      line-height: 1.32;
      letter-spacing: -.035em;
      font-weight: 200;
      text-wrap: balance;
      color: rgba(255,255,255,.94);
    }

    .studio-pro-services {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid rgba(255,255,255,.12);
    }

    .studio-pro-service {
      position: relative;
      min-width: 0;
      padding: clamp(30px, 3.2vw, 48px) clamp(20px, 2.6vw, 38px) 0 0;
    }

    .studio-pro-service + .studio-pro-service {
      padding-left: clamp(20px, 2.6vw, 38px);
      border-left: 1px solid rgba(255,255,255,.08);
    }

    .studio-pro-service-number {
      display: block;
      margin-bottom: 18px;
      font-family: var(--font-body);
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .14em;
      color: #2f55ff;
    }

    .studio-pro-service h3 {
      margin: 0 0 16px;
      font-family: var(--font-body);
      font-size: clamp(.9rem, 1.05vw, 1.08rem);
      line-height: 1.25;
      font-weight: 600;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: rgba(255,255,255,.92);
    }

    .studio-pro-service p {
      margin: 0;
      max-width: 29ch;
      font-family: var(--font-body);
      font-size: clamp(.98rem, 1.08vw, 1.12rem);
      line-height: 1.65;
      font-weight: 300;
      color: rgba(255,255,255,.54);
    }

    @media (max-width: 1050px) {
      .studio-pro-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .studio-pro-service:nth-child(3),
      .studio-pro-service:nth-child(4) {
        margin-top: 34px;
        padding-top: 34px;
        border-top: 1px solid rgba(255,255,255,.08);
      }

      .studio-pro-service:nth-child(3) {
        padding-left: 0;
        border-left: 0;
      }
    }

    @media (max-width: 600px) {
      .studio-pro-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
      }

      .studio-pro-quote-wrap {
        padding-left: 24px;
      }

      .studio-pro-quote {
        max-width: none;
        font-size: clamp(1.65rem, 7.6vw, 2.45rem);
        line-height: 1.3;
      }

      .studio-pro-services {
        grid-template-columns: 1fr;
      }

      .studio-pro-service,
      .studio-pro-service + .studio-pro-service,
      .studio-pro-service:nth-child(3),
      .studio-pro-service:nth-child(4) {
        margin-top: 0;
        padding: 30px 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
      }

      .studio-pro-service:first-child {
        border-top: 0;
      }

      .studio-pro-service p {
        max-width: 34ch;
      }
    }

  

    /* =========================================================
       CORRECCIÓN CROMÁTICA FINAL — BLOQUE ESTUDIO
       ========================================================= */
    .story.story--studio {
      color: #f4f3ef !important;
      background:
        radial-gradient(circle at 84% 8%, rgba(47,85,255,.16), transparent 30%),
        radial-gradient(circle at 8% 92%, rgba(47,85,255,.055), transparent 28%),
        #0d0f14 !important;
      border-color: rgba(255,255,255,.10) !important;
    }

    .story.story--studio::before {
      color: rgba(255,255,255,.022) !important;
    }

    .story.story--studio .studio-pro-header {
      border-bottom-color: rgba(255,255,255,.14);
    }

    .story.story--studio .story-number,
    .story.story--studio .studio-pro-service-number {
      color: #2f55ff !important;
    }

    .story.story--studio .studio-pro-kicker {
      color: rgba(244,243,239,.62) !important;
    }

    .story.story--studio .studio-pro-quote {
      color: #f4f3ef !important;
      text-shadow: 0 1px 0 rgba(0,0,0,.18);
    }

    .story.story--studio .studio-pro-quote-wrap::before {
      background: #2f55ff !important;
      box-shadow: 0 0 28px rgba(47,85,255,.22);
    }

    .story.story--studio .studio-pro-services {
      border-top-color: rgba(255,255,255,.14);
    }

    .story.story--studio .studio-pro-service + .studio-pro-service,
    .story.story--studio .studio-pro-service:nth-child(3),
    .story.story--studio .studio-pro-service:nth-child(4) {
      border-color: rgba(255,255,255,.09);
    }

    .story.story--studio .studio-pro-service h3 {
      color: rgba(244,243,239,.96) !important;
    }

    .story.story--studio .studio-pro-service p {
      color: rgba(244,243,239,.64) !important;
    }

    @media (max-width: 600px) {
      .story.story--studio .studio-pro-service,
      .story.story--studio .studio-pro-service + .studio-pro-service,
      .story.story--studio .studio-pro-service:nth-child(3),
      .story.story--studio .studio-pro-service:nth-child(4) {
        border-top-color: rgba(255,255,255,.09);
      }
    }


    /* =========================================================
       FOCO — CORRECCIÓN DEFINITIVA PARA MÓVILES
       Mantiene el line boil y evita que el SVG quede fuera de cuadro.
       ========================================================= */
    @media (max-width: 600px) {
      .story--branding .story-layout {
        overflow: visible;
      }

      .story--branding .motion-frame--foco {
        display: grid !important;
        place-items: center !important;
        width: calc(100vw - 40px) !important;
        max-width: 100% !important;
        min-height: clamp(330px, 92vw, 470px) !important;
        margin: 0 auto clamp(-42px, -8vw, -24px) !important;
        transform: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
      }

      .story--branding .foco-stage {
        width: min(112%, 520px) !important;
        max-width: none !important;
        min-height: 1px;
        opacity: 1;
        visibility: visible;
        filter: none !important;
        transform-origin: 50% 55%;
      }

      .story--branding .foco-inline-svg {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        opacity: 1;
        visibility: visible;
      }

      .story--branding .foco-stage::after {
        display: none !important;
      }
    }


    /* =========================================================
       FOCOHUMAN — 33 CAPAS + COMPOSICIÓN DESKTOP
       ========================================================= */
    .foco-inline-svg > g {
      transform-box: fill-box;
      transform-origin: center;
      will-change: transform, opacity;
    }

    @media (min-width: 901px) {
      .story--branding .motion-frame--foco {
        width: 132% !important;
        min-height: clamp(540px, 54vw, 820px) !important;
        margin-left: -16% !important;
        margin-right: -16% !important;
        transform: translate3d(0, 4%, 0) !important;
        place-items: center !important;
      }

      .story--branding .foco-stage {
        width: min(112%, 880px) !important;
        margin-inline: auto !important;
        transform-origin: 50% 56% !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .foco-inline-svg > g {
        opacity: 0 !important;
        transform: none !important;
        animation: none !important;
      }
      .foco-inline-svg > g:first-of-type {
        display: block !important;
        opacity: 1 !important;
      }
    }


    /* =========================================================
       POSICIÓN FINAL — FOCOHUMAN JUNTO A LA CITA DEL BLOQUE 01
       ========================================================= */

    .story--studio .studio-pro-feature {
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(245px, 21vw, 330px);
      gap: clamp(42px, 6vw, 92px);
      align-items: center;
      padding: clamp(34px, 4.8vw, 72px) 0 0;
    }

    .story--studio .studio-pro-quote-wrap {
      max-width: none;
      padding-top: clamp(28px, 3vw, 44px);
      padding-bottom: clamp(42px, 5vw, 72px);
    }

    .story--studio .studio-pro-quote-wrap::before {
      top: clamp(32px, 3.2vw, 48px);
      bottom: clamp(46px, 5vw, 76px);
    }

    .story--studio .studio-pro-quote {
      max-width: 34ch;
    }

    .story--studio .motion-frame--foco {
      display: grid !important;
      place-items: center !important;
      width: 100% !important;
      min-height: 0 !important;
      aspect-ratio: 4 / 5;
      margin: 0 0 0 auto !important;
      padding: clamp(12px, 1.6vw, 22px) !important;
      transform: none !important;
      overflow: hidden !important;
      isolation: isolate;
      border: 1px solid rgba(255,255,255,.075) !important;
      border-radius: 0 !important;
      background:
        radial-gradient(circle at 50% 34%, rgba(47,85,255,.11), transparent 45%),
        #111318 !important;
      box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
      opacity: 1;
      visibility: visible;
      align-self: center;
      justify-self: end;
    }

    .story--studio .motion-frame--foco::before,
    .story--studio .motion-frame--foco::after {
      display: none !important;
      content: none !important;
    }

    .story--studio .foco-stage {
      width: 124% !important;
      max-width: none !important;
      margin: 0 !important;
      filter: none !important;
      transform-origin: 50% 54% !important;
    }

    .story--studio .foco-stage::after {
      display: none !important;
      content: none !important;
    }

    .story--studio .foco-inline-svg {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      overflow: visible !important;
      opacity: 1;
      visibility: visible;
    }

    .story--studio .studio-pro-services {
      margin-top: 0;
    }

    /* Pieza de reemplazo en Identidad y branding. */
    .story--branding .motion-frame--legacy {
      min-height: clamp(500px, 53vw, 760px);
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .story--branding .motion-frame--legacy::before {
      display: none;
    }

    .story--branding .kinetic--legacy {
      position: relative;
      inset: auto;
      width: 100%;
      padding: 0;
      gap: .025em;
      font-size: clamp(2.4rem, 5.8vw, 6.2rem);
      line-height: .78;
    }

    .story--branding .kinetic--legacy span:nth-child(1) {
      --x: -1%;
    }

    .story--branding .kinetic--legacy span:nth-child(2) {
      --x: 4%;
      -webkit-text-stroke-color: rgba(244,243,239,.86);
      text-stroke-color: rgba(244,243,239,.86);
    }

    .story--branding .kinetic--legacy span:nth-child(3) {
      --x: 1%;
    }

    @media (max-width: 1050px) {
      .story--studio .studio-pro-feature {
        grid-template-columns: minmax(0, 1fr) clamp(220px, 27vw, 285px);
        gap: clamp(28px, 4vw, 52px);
      }

      .story--studio .studio-pro-quote {
        font-size: clamp(1.7rem, 3vw, 2.8rem);
      }
    }

    @media (max-width: 760px) {
      .story--studio .studio-pro-feature {
        grid-template-columns: 1fr;
        gap: 34px;
        padding-top: 28px;
      }

      .story--studio .studio-pro-quote-wrap {
        padding-bottom: 0;
      }

      .story--studio .studio-pro-quote-wrap::before {
        bottom: 0;
      }

      .story--studio .motion-frame--foco {
        width: min(76vw, 330px) !important;
        margin: 0 auto 44px !important;
        justify-self: center;
      }

      .story--studio .foco-stage {
        width: 126% !important;
      }

      .story--branding .motion-frame--legacy {
        min-height: min(88vw, 590px);
      }
    }

    @media (max-width: 600px) {
      .story--studio .studio-pro-feature {
        gap: 28px;
        padding-top: 22px;
      }

      .story--studio .motion-frame--foco {
        display: grid !important;
        width: min(82vw, 315px) !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 auto 34px !important;
        transform: none !important;
        overflow: hidden !important;
      }

      .story--studio .foco-stage {
        width: 128% !important;
        max-width: none !important;
        opacity: 1;
        visibility: visible;
      }

      .story--branding .motion-frame--legacy {
        width: 100%;
        min-height: 102vw;
        margin: 0;
      }

      .story--branding .kinetic--legacy {
        padding-inline: 0;
        font-size: clamp(2.6rem, 13vw, 4.2rem);
      }
      
      .kinetic {
        font-size: clamp(2.5rem, 12vw, 4rem);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .story--studio .motion-frame--foco,
      .story--studio .foco-stage,
      .story--studio .foco-inline-svg {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
    }


    /* =========================================================
       HERO REFINADO — 25 AÑOS DE DISEÑO HUMANO
       ========================================================= */

    .hero {
      min-height: 82svh;
      padding-top: calc(var(--header-height) + clamp(34px, 4vw, 54px));
      padding-bottom: clamp(34px, 4vw, 52px);
    }

    .hero-grid {
      grid-template-columns: minmax(0, 1.55fr) minmax(270px, .45fr);
      gap: clamp(34px, 5vw, 82px);
    }

    .hero-title {
      max-width: 980px;
      font-size: clamp(3.7rem, 9.2vw, 9rem);
      line-height: .87;
    }

    .hero-copy {
      max-width: 330px;
      padding: clamp(18px, 1.7vw, 25px);
    }

    .hero-copy p {
      font-size: clamp(.98rem, 1.02vw, 1.08rem);
      line-height: 1.55;
    }

    .hero-copy .eyebrow {
      gap: .62rem;
      margin-bottom: .8rem;
      font-size: .66rem;
      line-height: 1.35;
    }

    .hero-links {
      margin-top: 1.15rem;
    }

    .header-cta {
      min-width: 98px;
      padding-inline: 1.05rem;
    }

    @media (max-width: 900px) {
      .hero {
        min-height: 88svh;
        padding-top: calc(var(--header-height) + 42px);
        padding-bottom: 36px;
      }

      .hero-grid {
        gap: 28px;
      }

      .hero-title {
        max-width: 800px;
        font-size: clamp(3.15rem, 11vw, 6.4rem);
      }

      .hero-copy {
        max-width: 390px;
      }
    }

    @media (max-width: 600px) {
      .hero {
        min-height: 86svh;
        padding-top: calc(var(--header-height) + 46px);
        padding-bottom: 30px;
      }

      .hero-title {
        width: 100%;
        font-size: clamp(2.75rem, 12.9vw, 4.05rem);
        line-height: .91;
      }

      .hero-copy {
        max-width: 100%;
        padding: 16px;
      }

      .hero-copy p {
        font-size: 1rem;
        line-height: 1.5;
      }

      .hero-copy .eyebrow {
        font-size: .62rem;
      }

      .hero-links {
        gap: 8px;
        margin-top: 1rem;
      }

      .button {
        min-height: 43px;
        padding-inline: .95rem;
      }
    }


    /* =========================================================
       AJUSTES QUIRÚRGICOS — MOTION, MENÚ FLOTANTE Y HAMBURGUESA
       ========================================================= */

    /* Motion graphic completamente integrado al fondo */
    .story--studio .motion-frame--foco {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      overflow: visible !important;
      padding: 0 !important;
    }

    .story--studio .motion-frame--foco::before,
    .story--studio .motion-frame--foco::after {
      display: none !important;
      content: none !important;
    }

    /* Navegación flotante: sin tarjeta y al lado derecho */
    .chapter-nav {
      left: auto;
      right: clamp(10px, 1.5vw, 26px);
      width: 150px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .chapter-nav a {
      grid-template-columns: 24px 1fr;
      min-height: 34px;
      color: rgba(17,17,17,.52);
    }

    .chapter-nav a::before {
      background: rgba(17,17,17,.12);
    }

    .chapter-nav a.is-active {
      color: var(--ink);
    }

    .chapter-nav a.is-active::before {
      background: var(--chrome);
    }

    /* Botón móvil limpio: dos líneas y X minimalista */
    .menu-toggle {
      display: none;
      position: relative;
      z-index: 1101;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
      touch-action: manipulation;
    }

    .menu-toggle span {
      position: absolute;
      left: 50%;
      width: 18px;
      height: 2px;
      margin: 0;
      border-radius: 999px;
      background: currentColor;
      transform: translateX(-50%);
      transition:
        top .25s var(--ease),
        transform .25s var(--ease),
        opacity .2s ease;
    }

    .menu-toggle span:nth-child(1) {
      top: 16px;
    }

    .menu-toggle span:nth-child(2) {
      top: 24px;
    }

    .menu-toggle span:nth-child(3) {
      display: none;
    }

    .menu-toggle::before,
    .menu-toggle::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0;
      transform-origin: center;
      transition: opacity .2s ease, transform .25s var(--ease);
    }

    .menu-toggle.is-open span:nth-child(1),
    .menu-toggle.is-open span:nth-child(2) {
      opacity: 0;
    }

    .menu-toggle.is-open::before {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .menu-toggle.is-open::after {
      opacity: 1;
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .menu-toggle:hover,
    .menu-toggle:focus-visible {
      color: var(--chrome);
      outline: none;
    }

    .site-header:not(.is-scrolled):not(.menu-active) .menu-toggle {
      color: var(--white);
    }

    .site-header.is-scrolled .menu-toggle,
    .site-header.menu-active .menu-toggle {
      color: var(--ink);
    }

    @media (max-width: 1180px) {
      .chapter-nav {
        width: 46px;
        right: 12px;
        padding: 0;
      }
    }

    @media (max-width: 900px) {
      .menu-toggle {
        display: block;
      }

      .chapter-nav {
        display: none;
      }
    }


    /* =========================================================
       CORRECCIÓN FINAL — GLASSMORPHISM + BOTÓN DE CIERRE
       ========================================================= */

    /* Navegación flotante legible sobre fondos claros y oscuros */
    .chapter-nav {
      right: clamp(12px, 1.6vw, 28px);
      width: 158px;
      padding: 12px 13px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(18,20,27,.78), rgba(9,10,14,.62));
      box-shadow:
        0 18px 48px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter: blur(18px) saturate(145%);
      -webkit-backdrop-filter: blur(18px) saturate(145%);
    }

    .chapter-nav a {
      color: rgba(255,255,255,.66);
    }

    .chapter-nav a::before {
      background: rgba(255,255,255,.13);
    }

    .chapter-nav a:hover,
    .chapter-nav a:focus-visible {
      color: rgba(255,255,255,.94);
      outline: none;
    }

    .chapter-nav a.is-active {
      color: #ffffff;
    }

    .chapter-nav a.is-active::before {
      background: var(--chrome);
      box-shadow: 0 0 12px rgba(47,85,255,.38);
    }

    /* Botón móvil: dos líneas en reposo, X inequívoca al abrir */
    .menu-toggle {
      isolation: isolate;
      color: var(--white);
    }

    .menu-toggle span {
      display: block !important;
      position: absolute !important;
      left: 50% !important;
      width: 19px !important;
      height: 2px !important;
      margin: 0 !important;
      border-radius: 999px !important;
      background: currentColor !important;
      opacity: 1;
      transform: translateX(-50%) !important;
      transition:
        opacity .18s ease,
        transform .24s var(--ease),
        top .24s var(--ease) !important;
    }

    .menu-toggle span:nth-child(1) {
      top: 16px !important;
    }

    .menu-toggle span:nth-child(2) {
      top: 24px !important;
    }

    .menu-toggle span:nth-child(3) {
      display: none !important;
    }

    .menu-toggle::before,
    .menu-toggle::after {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      z-index: 2;
      left: 50% !important;
      top: 50% !important;
      width: 21px !important;
      height: 2px !important;
      margin: 0 !important;
      border-radius: 999px !important;
      background: currentColor !important;
      opacity: 0 !important;
      transform-origin: center !important;
      transition: opacity .18s ease, transform .24s var(--ease) !important;
    }

    .menu-toggle.is-open span:nth-child(1),
    .menu-toggle.is-open span:nth-child(2) {
      opacity: 0 !important;
      transform: translateX(-50%) scaleX(.4) !important;
    }

    .menu-toggle.is-open::before {
      opacity: 1 !important;
      transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    .menu-toggle.is-open::after {
      opacity: 1 !important;
      transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    .site-header.menu-active .menu-toggle {
      color: var(--ink) !important;
    }

    .site-header:not(.menu-active):not(.is-scrolled) .menu-toggle {
      color: var(--white) !important;
    }

    .site-header.is-scrolled:not(.menu-active) .menu-toggle {
      color: var(--ink) !important;
    }

    @media (max-width: 1180px) {
      .chapter-nav {
        width: 48px;
        padding: 10px 8px;
        border-radius: 16px;
      }

      .chapter-nav a {
        color: rgba(255,255,255,.72);
      }
    }


    /* =========================================================
       MENÚ RESPONSIVE — IMPLEMENTACIÓN DEFINITIVA
       Dos líneas reales que se transforman en X.
       ========================================================= */

    .site-header .menu-toggle {
      display: none;
      position: relative !important;
      z-index: 1201 !important;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #ffffff;
      cursor: pointer;
      overflow: visible !important;
      isolation: isolate;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .site-header .menu-toggle::before,
    .site-header .menu-toggle::after {
      display: none !important;
      content: none !important;
    }

    .site-header .menu-toggle .menu-toggle__line {
      display: block !important;
      position: absolute !important;
      z-index: 2 !important;
      left: 50% !important;
      top: 50% !important;
      width: 20px !important;
      height: 2.4px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: currentColor !important;
      opacity: 1 !important;
      transform-origin: 50% 50% !important;
      will-change: transform;
      transition:
        transform .28s cubic-bezier(.16, 1, .3, 1),
        background-color .2s ease !important;
      pointer-events: none;
    }

    .site-header .menu-toggle .menu-toggle__line--top {
      transform: translate(-50%, -5px) rotate(0deg) !important;
    }

    .site-header .menu-toggle .menu-toggle__line--bottom {
      transform: translate(-50%, 5px) rotate(0deg) !important;
    }

    /* Estado abierto: las mismas dos líneas forman la X */
    .site-header .menu-toggle[aria-expanded="true"] .menu-toggle__line--top,
    .site-header .menu-toggle.is-open .menu-toggle__line--top {
      transform: translate(-50%, 0) rotate(45deg) !important;
    }

    .site-header .menu-toggle[aria-expanded="true"] .menu-toggle__line--bottom,
    .site-header .menu-toggle.is-open .menu-toggle__line--bottom {
      transform: translate(-50%, 0) rotate(-45deg) !important;
    }

    .site-header:not(.menu-active):not(.is-scrolled) .menu-toggle {
      color: #ffffff !important;
    }

    .site-header.is-scrolled:not(.menu-active) .menu-toggle,
    .site-header.menu-active .menu-toggle,
    .site-header .menu-toggle[aria-expanded="true"] {
      color: #111111 !important;
    }

    .site-header .menu-toggle:hover,
    .site-header .menu-toggle:focus-visible {
      color: #2f55ff !important;
      outline: none;
    }

    .site-header .menu-toggle:focus-visible {
      box-shadow: 0 0 0 3px rgba(47,85,255,.25) !important;
    }

    @media (max-width: 900px) {
      .site-header .menu-toggle {
        display: block !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .site-header .menu-toggle .menu-toggle__line {
        transition: none !important;
      }
    }
	  /* =========================================================
   CORRECCIÓN QUIRÚRGICA — STACKING CONTEXT & BOTÓN DE CIERRE (X)
   PEGAR AL FINAL DE LA ETIQUETA <style> DENTRO DE index.html
   ========================================================= */

/* 1. ELEVAMOS EL ENCABEZADO POR ENCIMA DEL MENÚ MÓVIL
   Esto soluciona el bug donde el menú tapaba el logo y el botón */
header#siteHeader.site-header {
  z-index: 2000 !important;
}

aside#mobileMenu.mobile-menu {
  z-index: 1500 !important;
}

/* =========================================================
   OCULTAR HAMBURGUESA EN ESCRITORIO POR DEFECTO
   ========================================================= */
header#siteHeader.site-header button#menuToggle.menu-toggle {
  display: none !important;
}

/* =========================================================
   MOSTRAR HAMBURGUESA SOLO EN MÓVILES Y TABLETS
   ========================================================= */
@media (max-width: 900px) {
  /* 2. FORZAMOS VISIBILIDAD, POSICIÓN Y COLOR DEL BOTÓN HAMBURGUESA / CIERRE */
  header#siteHeader.site-header button#menuToggle.menu-toggle {
    display: flex !important;
    position: relative !important;
    z-index: 2001 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .88) !important;
    color: #111111 !important;
    cursor: pointer !important;
    overflow: visible !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Ocultamos líneas fantasma */
  header#siteHeader.site-header button#menuToggle.menu-toggle::before,
  header#siteHeader.site-header button#menuToggle.menu-toggle::after {
    display: none !important;
    content: none !important;
  }

  /* 3. LAS DOS LÍNEAS REALES DEL DOM */
  header#siteHeader.site-header button#menuToggle.menu-toggle .menu-toggle__line {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    background-color: currentColor !important;
    opacity: 1 !important;
    transform-origin: 50% 50% !important;
    transition: transform .28s cubic-bezier(.2, .75, .2, 1), opacity .2s ease !important;
  }

  /* Estado cerrado (hamburguesa) */
  header#siteHeader.site-header button#menuToggle.menu-toggle .menu-toggle__line--top {
    transform: translate(-50%, -5px) rotate(0deg) !important;
  }

  header#siteHeader.site-header button#menuToggle.menu-toggle .menu-toggle__line--bottom {
    transform: translate(-50%, 5px) rotate(0deg) !important;
  }

  /* Estado abierto (cierre X) */
  header#siteHeader.site-header button#menuToggle.menu-toggle.is-open .menu-toggle__line--top,
  header#siteHeader.site-header button#menuToggle.menu-toggle[aria-expanded="true"] .menu-toggle__line--top {
    transform: translate(-50%, 0) rotate(45deg) !important;
    opacity: 1 !important;
    background-color: #111111 !important;
  }

  header#siteHeader.site-header button#menuToggle.menu-toggle.is-open .menu-toggle__line--bottom,
  header#siteHeader.site-header button#menuToggle.menu-toggle[aria-expanded="true"] .menu-toggle__line--bottom {
    transform: translate(-50%, 0) rotate(-45deg) !important;
    opacity: 1 !important;
    background-color: #111111 !important;
  }
}

/* 4. ELIMINAR EL CALL TO ACTION EN HERO (SOLO EN MÓVIL) */
@media (max-width: 600px) {
  #inicio .hero-copy {
    display: none !important;
  }
  #inicio.hero {
    padding-bottom: 42px !important;
  }
}
	  /* =========================================================
   5. DISEÑO MASONRY EDITORIAL A 2 COLUMNAS PARA IPAD / TABLETS
   (601px a 1024px) — Elegante, asimétrico y con movimiento
   ========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {
  /* 1. Contenedor Masonry a 2 columnas con ritmo editorial */
  main .story .masonry {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    grid-auto-rows: auto !important;
    gap: clamp(18px, 2.5vw, 28px) !important;
    align-items: start !important;
    min-height: auto !important;
    margin-top: 32px !important;
  }

  /* 2. Tarjeta 1 (Columna Izquierda: pieza alta en vertical - Portrait editorial) */
  main .story .masonry .project-card:nth-child(1) {
    grid-column: 1 / 2 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }

  /* 3. Tarjeta 2 (Columna Derecha Superior: con desfase vertical para efecto Masonry real) */
  main .story .masonry .project-card:nth-child(2) {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    margin-top: clamp(24px, 4vw, 48px) !important;
  }

  /* 4. Tarjeta 3 (Columna Derecha Inferior: proporción cuadrada limpia) */
  main .story .masonry .project-card:nth-child(3) {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
  }

  /* 5. Imágenes impecables de borde a borde (cover) */
  main .story .masonry .project-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 1s cubic-bezier(.2, .75, .2, 1), filter .6s ease !important;
  }

  /* Zoom suave al tocar o pasar el cursor en tablet */
  main .story .masonry .project-card:hover img {
    transform: scale(1.05) !important;
  }

  /* 6. PROTECCIÓN DE LA ANIMACIÓN DE ENTRADA CON MOVIMIENTO (.reveal) EN IPAD */
  main .story .masonry .project-card.reveal:not(.is-visible) {
    opacity: 0 !important;
    transform: translate3d(0, 42px, 0) !important;
    clip-path: inset(8% 0 0 0) !important;
  }

  main .story .masonry .project-card.reveal.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    clip-path: inset(0 0 0 0) !important;
  }

  /* 7. También aplicamos 2 columnas a los videos de IA para que no se vean gigantes */
  main .story .video-experiments {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2.5vw, 28px) !important;
  }
}
	  /* =========================================================
   FORMULARIO DE CONTACTO BOUTIQUE — FASE 1
   Diseño de etiquetas flotantes (Floating Labels)
   ========================================================= */

.studio-form {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  position: relative;
}

/* Estilos base de los inputs */
.studio-form input,
.studio-form textarea {
  width: 100%;
  background: transparent !important;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  color: #ffffff;
  padding: 18px 0 8px 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  resize: vertical;
}

.studio-form textarea {
  min-height: 45px;
}

/* Eliminar autofill background amarillo en Chrome */
.studio-form input:-webkit-autofill,
.studio-form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Estado Focus */
.studio-form input:focus,
.studio-form textarea:focus {
  outline: none;
  border-bottom-color: #2f55ff; /* Tu color chrome */
}

/* Etiqueta flotante */
.form-group label {
  position: absolute;
  top: 16px;
  left: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
  font-size: .95rem;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* Animación cuando tiene foco o cuando ya hay texto */
.studio-form input:focus ~ label,
.studio-form input:not(:placeholder-shown) ~ label,
.studio-form textarea:focus ~ label,
.studio-form textarea:not(:placeholder-shown) ~ label {
  top: -8px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2f55ff; /* Tu color chrome */
}

/* Botón y pie del formulario */
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 16px;
  flex-wrap: wrap;
}

.form-submit {
  min-width: 180px;
  cursor: pointer;
  border: none;
}

.form-alternatives {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.68rem;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
}

.security-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.form-whatsapp {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 4px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.form-whatsapp:hover {
  color: #ffffff;
  text-decoration-color: #2f55ff;
}

/* Responsive */
@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .form-alternatives {
    justify-content: space-between;
    margin-top: 8px;
  }
}
	  
/* =========================================================
   CORRECCIÓN QUIRÚRGICA — ESPACIADO Y ETIQUETAS FLOTANTES
   ========================================================= */

/* 1. Margen de seguridad vertical para que la etiqueta no colisione al flotar */
.form-group {
  position: relative !important;
  padding-top: 18px !important; /* Crea la zona de protección para la etiqueta flotante */
}

/* 2. Ajuste del grid para que los campos nunca se traslapen vertical u horizontalmente */
.form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px 20px !important; /* Espaciado generoso en ambas direcciones */
}

.studio-form {
  margin-top: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* 3. Posición inicial limpia del texto dentro de la casilla */
.form-group label {
  position: absolute !important;
  top: 32px !important;
  left: 0 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  pointer-events: none !important;
  transform-origin: left top !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.75, 0.2, 1), color 0.25s ease !important;
}

/* 4. Transformación precisa hacia arriba utilizando translateY */
.studio-form input:focus ~ label,
.studio-form input:not(:placeholder-shown) ~ label,
.studio-form textarea:focus ~ label,
.studio-form textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-24px) scale(0.72) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #2f55ff !important; /* Tu azul chrome */
}

/* Ajuste responsive para celulares */
@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}
	  /* =========================================================
       CORRECCIÓN MENÚ MÓVIL — AJUSTE DE ESPACIOS Y TAMAÑO
       ========================================================= */
    .mobile-menu {
      overflow-y: auto !important; /* Salvavidas: permite scroll si la pantalla es muy pequeña */
      padding-top: calc(var(--header-height) + 16px) !important; /* Menos espacio muerto arriba */
    }

    .mobile-menu a {
      /* El padding vertical ahora respira según la altura (vh) del teléfono */
      padding: clamp(12px, 2.5vh, 18px) 0 !important; 
      /* Tipografía un toque más compacta y refinada */
      font-size: clamp(1.35rem, 6.5vw, 2.1rem) !important; 
    }

    .mobile-menu-footer {
      margin-top: 18px !important; 
      /* Un pequeño colchón al fondo para que la barra de Safari no lo tape */
      padding-bottom: 24px !important; 
    }
	  /* =========================================================
       CORRECCIÓN VIDEO IA 02 — FORMATO VERTICAL 9:16 EN MÓVILES
       ========================================================= */
    @media (max-width: 900px) {
      .video-experiments .ai-video-card:nth-child(2) {
        aspect-ratio: 9 / 16 !important;
      }
    }

/* ========================================================================== 
   REVISIÓN QUIRÚRGICA 11.0 — NAVEGACIÓN, HERO VIDEO Y SCROLLYTELLING
   ========================================================================== */

:root {
  --section-progress: 0;
  --story-shift: 0px;
  --media-shift: 0px;
  --media-shift-alt: 0px;
  --hero-parallax: 0px;
}

/* Header tradicional: conserva la pleca existente y suma navegación horizontal. */
.site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 48px);
}

.desktop-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.35vw, 24px);
}

.desktop-nav a {
  position: relative;
  padding: 10px 0;
  color: rgba(255, 255, 255, .72);
  font-family: var(--font-body);
  font-size: clamp(.64rem, .68vw, .74rem);
  font-weight: 600;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease, opacity .25s ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: .9;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.desktop-nav a.is-active {
  color: #ffffff;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a.is-active::after {
  transform: scaleX(1);
}

.site-header.is-scrolled .desktop-nav a,
.site-header.menu-active .desktop-nav a {
  color: rgba(17, 17, 15, .62);
}

.site-header.is-scrolled .desktop-nav a:hover,
.site-header.is-scrolled .desktop-nav a:focus-visible,
.site-header.is-scrolled .desktop-nav a.is-active,
.site-header.menu-active .desktop-nav a:hover,
.site-header.menu-active .desktop-nav a:focus-visible,
.site-header.menu-active .desktop-nav a.is-active {
  color: var(--ink);
}

.header-actions {
  justify-self: end;
}

/* El antiguo navegador flotante y la barra inferior dejan de formar parte del sistema. */
.chapter-nav,
.mobile-progress {
  display: none !important;
}

/* Hero: video full-bleed, fallback estable y tipografía por capas. */
#inicio.hero {
  min-height: 100svh;
  padding-top: calc(var(--header-height) + clamp(58px, 7vh, 92px));
  padding-bottom: clamp(38px, 5vw, 70px);
  color: #ffffff;
  background: #090a0d;
}

#inicio .hero-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  width: 100% !important;
  height: 100% !important;
  clip-path: none !important;
  overflow: hidden !important;
  transform: none !important;
}

#inicio .hero-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 11, .08), rgba(7, 8, 11, .22) 48%, rgba(7, 8, 11, .58));
  content: "";
  pointer-events: none;
}

#inicio .hero-poster,
#inicio .hero-video {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: center center;
  animation: none !important;
  transform: translate3d(0, var(--hero-parallax), 0) scale(1.025) !important;
  transition: opacity .8s ease, filter .8s ease;
  will-change: transform, opacity;
}

#inicio .hero-poster {
  z-index: 0;
  opacity: 1;
  filter: saturate(.92) contrast(1.02);
}

#inicio .hero-video {
  z-index: 1;
  opacity: 0;
  filter: saturate(.92) contrast(1.035);
}

#inicio.is-video-ready .hero-video {
  opacity: 1;
}

#inicio.is-video-ready .hero-poster {
  opacity: 0;
}

#inicio.hero::before {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(3, 4, 7, .16) 0%, rgba(3, 4, 7, .08) 28%, rgba(3, 4, 7, .74) 100%),
    linear-gradient(90deg, rgba(3, 4, 7, .58) 0%, rgba(3, 4, 7, .16) 52%, rgba(3, 4, 7, .2) 100%);
}

#inicio.hero::after {
  z-index: -1;
  inset: auto -8% -24% 18%;
  height: 60%;
  background: linear-gradient(112deg, rgba(47, 85, 255, .46), rgba(185, 133, 40, .16), transparent 72%);
  opacity: .82;
}

#inicio .hero-grid {
  position: relative;
  z-index: 2;
}

#inicio .hero-meta,
#inicio .scroll-cue,
#inicio .section-indicator {
  z-index: 2;
}

#inicio .hero-title {
  color: #ffffff;
}

.hero-title-line {
  display: block;
  margin-bottom: -.04em;
  padding-bottom: .08em;
  overflow: hidden;
}

.hero-title-line > span {
  display: block;
  opacity: 0;
  transform: translate3d(0, 112%, 0) skewY(2deg);
  transform-origin: left bottom;
  animation: heroLineIn 1.05s cubic-bezier(.16, 1, .3, 1) forwards;
  will-change: transform, opacity;
}

.hero-title-line:nth-child(1) > span { animation-delay: .16s; }
.hero-title-line:nth-child(2) > span { animation-delay: .28s; }
.hero-title-line:nth-child(3) > span { animation-delay: .40s; }

#inicio .hero-copy {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  animation: heroCopyIn .9s .58s cubic-bezier(.16, 1, .3, 1) forwards;
}

#inicio .hero-meta,
#inicio .scroll-cue {
  opacity: 0;
  animation: heroFadeIn .7s .82s ease forwards;
}

@keyframes heroLineIn {
  to { opacity: 1; transform: translate3d(0, 0, 0) skewY(0); }
}

@keyframes heroCopyIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes heroFadeIn {
  to { opacity: 1; }
}

/* Indicador editorial integrado en cada bloque. */
[data-section-block] {
  --section-progress: 0;
  position: relative;
}

.section-indicator {
  position: absolute;
  z-index: 12;
  top: clamp(22px, 3vw, 42px);
  right: clamp(20px, 4vw, 64px);
  width: min(220px, 24vw);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  color: currentColor;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .7;
  pointer-events: none;
}

#inicio .section-indicator {
  position: absolute;
  top: calc(var(--header-height) + 28px);
  left: clamp(20px, 4vw, 64px);
  right: auto;
  color: #ffffff;
}

.section-indicator__index {
  font-variant-numeric: tabular-nums;
}

.section-indicator__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-indicator__track {
  grid-column: 1 / -1;
  height: 1px;
  margin-top: 8px;
  background: currentColor;
  opacity: .3;
  overflow: hidden;
}

.section-indicator__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  opacity: 1;
  transform: scaleX(var(--section-progress));
  transform-origin: left center;
  transition: transform .08s linear;
}

.story--dark .section-indicator,
.story--ochre .section-indicator,
.contact .section-indicator {
  color: rgba(255, 255, 255, .86);
}

/* Scroll motion: subtle, independent of existing reveal transforms. */
.story-title,
.studio-pro-quote-wrap,
.contact-title {
  translate: 0 var(--story-shift);
  transition: translate .12s linear;
  will-change: translate;
}

.story .motion-frame,
.story .video-experiments {
  translate: 0 var(--media-shift);
  transition: translate .12s linear;
  will-change: translate;
}

.story .masonry,
.story .brand-ticker-section,
.contact .contact-side {
  translate: 0 var(--media-shift-alt);
  transition: translate .12s linear;
  will-change: translate;
}

/* Progressive enhancement for video availability and user preferences. */
.hero.video-unavailable .hero-video,
.hero.video-static .hero-video {
  display: none;
}

@media (max-width: 1180px) {
  .desktop-nav {
    display: none;
  }

  header#siteHeader.site-header button#menuToggle.menu-toggle {
    display: flex !important;
  }
}

@media (min-width: 1181px) {
  header#siteHeader.site-header button#menuToggle.menu-toggle {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  #inicio.hero {
    min-height: 92svh;
    padding-top: calc(var(--header-height) + 72px);
  }

  #inicio .hero-grid {
    grid-template-columns: 1fr;
  }

  #inicio .hero-title {
    max-width: 9ch;
  }

  .section-indicator {
    top: 20px;
    right: var(--page-x, 20px);
    width: min(190px, 44vw);
  }

  #inicio .section-indicator {
    top: calc(var(--header-height) + 18px);
    left: var(--page-x, 20px);
  }
}

@media (max-width: 600px) {
  #inicio.hero {
    min-height: 90svh;
    padding-top: calc(var(--header-height) + 62px);
  }

  #inicio .hero-media::after {
    background: linear-gradient(180deg, rgba(7, 8, 11, .04), rgba(7, 8, 11, .26) 52%, rgba(7, 8, 11, .68));
  }

  #inicio .hero-title {
    max-width: none;
  }

  .section-indicator {
    width: min(168px, 48vw);
    font-size: .55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-line > span,
  #inicio .hero-copy,
  #inicio .hero-meta,
  #inicio .scroll-cue {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  #inicio .hero-poster,
  #inicio .hero-video,
  .story-title,
  .studio-pro-quote-wrap,
  .contact-title,
  .story .motion-frame,
  .story .video-experiments,
  .story .masonry,
  .story .brand-ticker-section,
  .contact .contact-side {
    translate: 0 0 !important;
    transform: none !important;
  }

  .section-indicator__fill {
    transition: none;
  }
}
/* =========================================================
   HERO VIDEO — CARGA Y TRANSICIÓN CINEMÁTICA
   ========================================================= */

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #171717;
  pointer-events: none;
}

.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* La imagen se muestra inmediatamente mientras carga el video */
.hero-poster {
  z-index: 1;
  opacity: 1;
  transform: scale(1.015);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* El video comienza invisible */
.hero-video {
  z-index: 2;
  opacity: 0;
  transform: scale(1.025);
  transition:
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Estado activado cuando el video ya puede reproducirse */
.hero-media.is-video-ready .hero-video {
  opacity: 1;
  transform: scale(1);
}

.hero-media.is-video-ready .hero-poster {
  opacity: 0;
  transform: scale(1);
}

/* Evita que la imagen transparente interfiera después del fade */
.hero-media.is-video-ready .hero-poster {
  visibility: hidden;
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 1.2s;
}

/* Accesibilidad: elimina animaciones si el usuario lo solicita */
@media (prefers-reduced-motion: reduce) {
  .hero-poster,
  .hero-video {
    transform: none;
    transition: opacity 0.25s ease;
  }
}
/* =========================================================
   TICKER — TÍTULO
   ========================================================= */

.brand-ticker-heading {
  width: min(100% - 48px, 1400px);
  margin: 0 auto 18px;
  padding: 0;
}

.brand-ticker-kicker {
  display: block;
  margin: 0 0 8px;

  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  opacity: 0.5;
}

.brand-ticker-heading h3 {
  margin: 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 2.3rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.brand-ticker-section .ticker-wrapper {
  margin-top: 0;
}


/* MOBILE */

@media (max-width: 768px) {

  .brand-ticker-heading {
    width: calc(100% - 32px);
    margin-bottom: 14px;
  }

  .brand-ticker-heading h3 {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

}


/* =========================================================
   TYPOGRAPHY REFINEMENT V15 — BOLDONSE + BRUTALIST KINETIC
   ========================================================= */

:root {
  /* Para cambiar la fuente display después, cambia solo esta variable
     y la familia correspondiente en el link de Google Fonts del HTML. */
  --font-display-brutalist: "Boldonse", "Archivo Black", Arial Black, sans-serif;
  --kinetic-cyan: #42d3cf;
  --kinetic-orange: #ff9832;
}

/* Títulos principales: conserva los colores existentes. */
.display,
#inicio .hero-title,
.story-title,
.contact-title {
  font-family: var(--font-display-brutalist) !important;
  font-weight: 400 !important;
  letter-spacing: -0.045em !important;
  font-synthesis: none;
}

#inicio .hero-title { line-height: 0.88 !important; }
.story-title,
.contact-title { line-height: 0.90 !important; }

/* Kinetic: conserva las variables y transformaciones que controla main.js. */
.motion-frame--type {
  overflow: visible !important;
}

.kinetic,
.story--branding .kinetic--legacy {
  font-family: var(--font-display-brutalist) !important;
  font-weight: 400 !important;
  font-size: clamp(6rem, 10.3vw, 12rem) !important;
  line-height: 0.68 !important;
  letter-spacing: -0.065em !important;
  gap: 0.045em !important;
  width: 122% !important;
  max-width: none !important;
  padding: 0 !important;
  text-transform: uppercase;
  pointer-events: none;
}

.kinetic span,
.story--branding .kinetic--legacy span,
.story:not(.story--dark) .motion-frame--type .kinetic span,
.story:not(.story--dark) .motion-frame--type .kinetic span:nth-child(2) {
  position: relative;
  display: block;
  width: max-content !important;
  min-width: 100%;
  max-width: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  color: transparent !important;
  background-image: linear-gradient(112deg, var(--kinetic-cyan) 0%, var(--kinetic-cyan) 16%, var(--kinetic-orange) 100%) !important;
  background-size: 220% 100% !important;
  background-position: var(--gradient-x, 50%) 50% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 transparent !important;
  text-stroke: 0 transparent !important;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(var(--scale, 1));
  transform-origin: left center;
  opacity: var(--alpha, 1);
  will-change: transform, opacity, background-position;
}

/* Offsets editoriales controlados por capítulo. */
#branding .kinetic span:nth-child(1) { left: 8%; }
#branding .kinetic span:nth-child(2) { left: -18%; }
#branding .kinetic span:nth-child(3) { left: 17%; }

#packaging .kinetic span:nth-child(1) { left: -10%; }
#packaging .kinetic span:nth-child(2) { left: 9%; }
#packaging .kinetic span:nth-child(3) { left: -3%; }

#digital .kinetic span:nth-child(1) { left: 18%; }
#digital .kinetic span:nth-child(2) { left: -15%; }
#digital .kinetic span:nth-child(3) { left: 7%; }

#social .kinetic span:nth-child(1) { left: -8%; }
#social .kinetic span:nth-child(2) { left: 12%; }
#social .kinetic span:nth-child(3) { left: -14%; }

.story .motion-frame--type { z-index: 3; }
.story .masonry { position: relative; z-index: 2; }

/* Tablet: una sola columna de proyectos y proporción natural de imágenes. */
@media (max-width: 1024px) {
  .story-layout {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .story:nth-of-type(even) .story-layout .motion-frame,
  .story .story-layout .motion-frame {
    order: initial !important;
  }

  .motion-frame--type,
  .story--branding .motion-frame--legacy {
    width: 100% !important;
    min-height: clamp(390px, 66vw, 650px) !important;
    margin: 0 !important;
  }

  .kinetic,
  .story--branding .kinetic--legacy {
    width: 130% !important;
    font-size: clamp(5.1rem, 13.7vw, 9.5rem) !important;
    line-height: 0.69 !important;
  }

  main .story .masonry {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: clamp(14px, 2.8vw, 24px) !important;
    min-height: 0 !important;
    margin-top: clamp(24px, 5vw, 42px) !important;
    align-items: start !important;
  }

  main .story .masonry .project-card,
  main .story .masonry .project-card:nth-child(1),
  main .story .masonry .project-card:nth-child(2),
  main .story .masonry .project-card:nth-child(3),
  main .story .masonry .project-card:nth-child(4) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
  }

  main .story .masonry .project-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

/* Móvil: mantiene el carácter brutalista con desborde controlado. */
@media (max-width: 600px) {
  #inicio .hero-title {
    font-size: clamp(2.85rem, 13.4vw, 4.3rem) !important;
    line-height: 0.91 !important;
    letter-spacing: -0.04em !important;
  }

  .story-title {
    font-size: clamp(2.75rem, 12vw, 4.45rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.04em !important;
  }

  .motion-frame--type,
  .story--branding .motion-frame--legacy {
    min-height: clamp(330px, 98vw, 520px) !important;
  }

  .kinetic,
  .story--branding .kinetic--legacy {
    width: 145% !important;
    font-size: clamp(4rem, 20.5vw, 6.6rem) !important;
    line-height: 0.69 !important;
    letter-spacing: -0.055em !important;
  }

  #branding .kinetic span:nth-child(1) { left: 3%; }
  #branding .kinetic span:nth-child(2) { left: -13%; }
  #branding .kinetic span:nth-child(3) { left: 12%; }
  #packaging .kinetic span:nth-child(1) { left: -7%; }
  #packaging .kinetic span:nth-child(2) { left: 6%; }
  #packaging .kinetic span:nth-child(3) { left: -2%; }
  #digital .kinetic span:nth-child(1) { left: 11%; }
  #digital .kinetic span:nth-child(2) { left: -12%; }
  #digital .kinetic span:nth-child(3) { left: 4%; }
  #social .kinetic span:nth-child(1) { left: -5%; }
  #social .kinetic span:nth-child(2) { left: 8%; }
  #social .kinetic span:nth-child(3) { left: -9%; }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic span,
  .story--branding .kinetic--legacy span {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* =========================================================
   DURANDESIGNER — UX REFINEMENT V16
   Branding responsive + ticker integrado + web portfolio
   ========================================================= */


/* =========================================================
   01 — BRANDING: IMÁGENES COMPLETAS EN TABLET / MOBILE
   ========================================================= */

@media (max-width: 1024px) {

  #branding .masonry {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;

    width: 100% !important;
    min-height: 0 !important;

    gap: clamp(18px, 3vw, 28px) !important;

    margin-top: clamp(26px, 5vw, 44px) !important;
  }


  #branding .masonry .project-card,
  #branding .masonry .project-card:nth-child(1),
  #branding .masonry .project-card:nth-child(2),
  #branding .masonry .project-card:nth-child(3),
  #branding .masonry .project-card:nth-child(4) {

    display: block !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    aspect-ratio: auto !important;

    margin: 0 !important;

    overflow: hidden;
  }


  #branding .masonry .project-card img {

    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    max-width: 100% !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: none;
  }

}


/* En dispositivos táctiles eliminamos el zoom heredado */

@media (hover: none) {

  #branding .project-card:hover img {
    transform: none !important;
  }

}



/* =========================================================
   02 — BRANDING TICKER
   MISMO FONDO DEL CAPÍTULO
   ========================================================= */

#branding .brand-showcase {

  position: relative;

  width: 100vw;
  max-width: none;

  margin:
    clamp(72px, 8vw, 128px)
    calc(50% - 50vw)
    0;

  padding:
    clamp(24px, 3vw, 42px)
    0
    clamp(52px, 5vw, 82px);

  color: #ffffff;

  /* MISMO COLOR DEL STORY--DARK */
  background: #111111;

  border: 0;

  overflow: hidden;

  translate: none !important;
  transform: none !important;
}



/* Heading editorial */

#branding .brand-showcase__heading {

  box-sizing: border-box;

  width: min(100%, 1560px);

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

  padding:
    0
    clamp(20px, 5vw, 80px);
}



#branding .brand-showcase__title {

  position: relative;

  display: flex;
  align-items: center;

  gap: clamp(14px, 1.5vw, 22px);

  width: 100%;

  margin: 0;

  color: rgba(255,255,255,.86);

  font-family: "Inter", Arial, sans-serif;

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

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: -.015em;
}



/* Regla editorial */

#branding .brand-showcase__title::before {

  content: "";

  display: block;

  width: clamp(28px, 3vw, 46px);
  height: 1px;

  flex: 0 0 auto;

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



/* =========================================================
   TICKER
   ========================================================= */

#branding .brand-showcase__ticker {

  position: relative;

  width: 100%;

  padding:
    clamp(16px, 2vw, 28px)
    0
    clamp(14px, 1.5vw, 24px);

  overflow: hidden;

  background: #111111;
}



/* Fade lateral integrado con el mismo negro */

#branding .brand-showcase__ticker::before,
#branding .brand-showcase__ticker::after {

  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  z-index: 3;

  width: clamp(30px, 6vw, 100px);

  pointer-events: none;
}


#branding .brand-showcase__ticker::before {

  left: 0;

  background:
    linear-gradient(
      90deg,
      #111111 0%,
      rgba(17,17,17,0) 100%
    );
}


#branding .brand-showcase__ticker::after {

  right: 0;

  background:
    linear-gradient(
      270deg,
      #111111 0%,
      rgba(17,17,17,0) 100%
    );
}



/* Conserva la animación existente */

#branding .brand-showcase .ticker-wrapper {

  display: flex;

  width: max-content;

  margin: 0;
  padding: 0;

  animation:
    brandTicker
    35s
    linear
    infinite;

  will-change: transform;
}



#branding .brand-showcase .ticker-track {

  display: flex;

  flex: 0 0 auto;

  align-items: center;

  gap:
    clamp(68px, 7vw, 118px);

  padding-right:
    clamp(68px, 7vw, 118px);
}



/* Logos ligeramente mayores */

#branding .brand-showcase .ticker-track img {

  flex: 0 0 auto;

  width: auto;

  height:
    clamp(38px, 3.5vw, 54px);

  max-width:
    clamp(130px, 15vw, 230px);

  object-fit: contain;

  filter:
    grayscale(1)
    brightness(0)
    invert(1);

  opacity: .52;

  transition:
    opacity .3s ease,
    transform .3s ease;
}



@media (hover: hover) {

  #branding .brand-showcase .ticker-track img:hover {

    opacity: .95;

    transform:
      translateY(-2px);
  }

}



/* =========================================================
   03 — DIGITAL EXPERIENCES
   PORTFOLIO ESPECÍFICO PARA WEB
   ========================================================= */

#digital .story-layout {

  grid-template-columns:
    minmax(0, .78fr)
    minmax(0, 1.22fr);

  gap:
    clamp(36px, 5vw, 86px);

  align-items: start;
}



/* Contenedor de los 4 screenshots */

#digital .web-portfolio {

  display: grid;

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

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

  width: 100%;

  min-width: 0;
}



/* Cada proyecto es el enlace */

#digital .web-project {

  display: block;

  min-width: 0;

  color: inherit;

  text-decoration: none;
}



/* Horizontal ocupa las dos columnas */

#digital .web-project--desktop {

  grid-column: 1 / -1;
}



/* El segundo desktop crea un poco más de respiro */

#digital .web-project--desktop:last-child {

  margin-top:
    clamp(8px, 1.5vw, 24px);
}



/* Media: sin crop */

#digital .web-project__media {

  position: relative;

  width: 100%;

  overflow: hidden;

  border-radius:
    clamp(10px, 1.2vw, 18px);

  background: #08090c;
}



#digital .web-project__media img {

  position: relative;

  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  object-fit: contain;
  object-position: center;

  transform: scale(1);

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



/* Capturas MOBILE:
   preservamos proporción vertical,
   pero controlamos anchura */

#digital .web-project--mobile {

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



#digital .web-project--mobile:nth-of-type(2) {

  justify-self: end;
}



#digital .web-project--mobile:nth-of-type(3) {

  justify-self: start;

  margin-top:
    clamp(40px, 5vw, 76px);
}



/* Caption editorial */

#digital .web-project__caption {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 18px;

  margin-top:
    clamp(11px, 1vw, 15px);

  padding-top:
    10px;

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



#digital .web-project__caption > div {

  display: grid;

  gap: 3px;
}



#digital .web-project__type {

  display: block;

  color:
    rgba(255,255,255,.42);

  font-size: .61rem;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: .12em;

  text-transform: uppercase;
}



#digital .web-project__name {

  display: block;

  color:
    rgba(255,255,255,.90);

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

  font-weight: 500;

  line-height: 1.3;

  letter-spacing: -.015em;
}



#digital .web-project__visit {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  flex: 0 0 auto;

  color:
    rgba(255,255,255,.58);

  font-size: .67rem;

  font-weight: 600;

  line-height: 1;

  letter-spacing: .05em;

  white-space: nowrap;

  transition:
    color .25s ease,
    transform .25s ease;
}



/* Desktop hover muy sutil */

@media (hover: hover) {

  #digital .web-project:hover
  .web-project__media img {

    transform:
      scale(1.012);
  }


  #digital .web-project:hover
  .web-project__visit {

    color: #ffffff;

    transform:
      translate3d(3px,-2px,0);
  }

}



/* =========================================================
   04 — TABLET
   ========================================================= */

@media (max-width: 1024px) {

  #digital .story-layout {

    grid-template-columns:
      1fr !important;
  }


  #digital .web-portfolio {

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

    margin-top:
      clamp(20px, 4vw, 40px);
  }


  #digital .web-project--desktop {

    grid-column:
      1 / -1;
  }


  #digital .web-project--mobile {

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

}



/* =========================================================
   05 — MOBILE
   ========================================================= */

@media (max-width: 600px) {

  /* Branding */

  #branding .brand-showcase {

    margin-top: 56px;

    padding:
      20px
      0
      46px;
  }


  #branding .brand-showcase__heading {

    margin-bottom: 18px;

    padding:
      0 20px;
  }


  #branding .brand-showcase__title {

    font-size: .94rem;
  }


  #branding .brand-showcase .ticker-track {

    gap: 52px;

    padding-right: 52px;
  }


  #branding .brand-showcase
  .ticker-track img {

    height: 34px;

    max-width: 152px;
  }


  /* Digital */

  #digital .web-portfolio {

    grid-template-columns:
      1fr;

    gap:
      clamp(34px, 10vw, 54px);
  }


  #digital .web-project,
  #digital .web-project--desktop,
  #digital .web-project--mobile {

    grid-column:
      1 !important;

    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0 !important;

    justify-self:
      stretch !important;
  }


  /*
   * Las capturas verticales NO ocupan
   * físicamente todo el ancho.
   */

  #digital .web-project--mobile
  .web-project__media {

    width:
      min(76vw, 310px);

    margin:
      0 auto;
  }


  #digital .web-project__caption {

    margin-top: 10px;
  }


  #digital .web-project__visit {

    font-size: .63rem;
  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

  #digital .web-project__media img {

    transition: none !important;

    transform: none !important;
  }

}

/* ========================================================================== 
   LANGUAGE SWITCH — ES / EN · 2026-08-17
   Namespaced to avoid the legacy .language rules in this stylesheet.
   ========================================================================== */
.locale-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-height: 39px;
  padding: 0 .72rem;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  color: rgba(255,255,255,.58);
  background: rgba(8,9,12,.10);
  font-family: var(--font-body, "Inter", Arial, sans-serif);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.locale-switch a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 32px;
  padding: 0;
  color: inherit;
  text-decoration: none;
  opacity: .68;
  transition: opacity .22s ease, color .22s ease, transform .22s ease;
}

.locale-switch a:hover,
.locale-switch a:focus-visible {
  color: #fff;
  opacity: 1;
  transform: translateY(-1px);
}

.locale-switch a[aria-current="page"] {
  color: #fff;
  font-weight: 750;
  opacity: 1;
  cursor: default;
}

.locale-switch__sep {
  color: currentColor;
  opacity: .34;
  user-select: none;
}

.site-header.is-scrolled .locale-switch--header,
.site-header.menu-active .locale-switch--header {
  color: rgba(17,17,15,.52);
  border-color: rgba(17,17,15,.20);
  background: rgba(255,255,255,.34);
}

.site-header.is-scrolled .locale-switch--header a:hover,
.site-header.is-scrolled .locale-switch--header a:focus-visible,
.site-header.is-scrolled .locale-switch--header a[aria-current="page"],
.site-header.menu-active .locale-switch--header a:hover,
.site-header.menu-active .locale-switch--header a:focus-visible,
.site-header.menu-active .locale-switch--header a[aria-current="page"] {
  color: var(--ink, #11110f);
}

.locale-switch--mobile {
  display: none;
}

@media (max-width: 900px) {
  .locale-switch--header {
    display: none !important;
  }

  .mobile-menu-footer {
    align-items: center;
  }

  .mobile-menu .locale-switch--mobile {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 42px;
    margin-left: auto;
    padding: 0 .78rem;
    color: rgba(17,17,15,.58);
    border-color: rgba(17,17,15,.20);
    background: rgba(255,255,255,.34);
  }

  /* Override the large global .mobile-menu a treatment only inside the switch. */
  .mobile-menu .locale-switch--mobile a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 38px;
    padding: 0;
    border: 0;
    color: inherit;
    font-family: var(--font-body, "Inter", Arial, sans-serif);
    font-size: .68rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .10em;
    text-transform: uppercase;
  }

  .mobile-menu .locale-switch--mobile a:hover,
  .mobile-menu .locale-switch--mobile a:focus-visible,
  .mobile-menu .locale-switch--mobile a[aria-current="page"] {
    color: var(--ink, #11110f);
    opacity: 1;
  }
}