:root{
      --bg:#000;
      --fg:rgba(255,255,255,.94);
      --muted:rgba(255,255,255,.62);
      --hair:rgba(255,255,255,.12);
      --glass:rgba(0,0,0,.78);

      --px:clamp(12px, 2vw, 18px);
      --py:10px;

      --brand-size:clamp(18px, 1.8vw, 22px);
      --brand-track:0.22em;

      --nav-size:clamp(14px, 1.5vw, 17px);
      --nav-track:0.22em;

      --copy-size:clamp(6.5px, 1.1vw, 7px);
      --copy-track:0.06em;

      --radius:14px;
      --blur:10px;

      --menu-bg: rgba(0,0,0,.86);
      --menu-border: rgba(255,255,255,.14);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }

    body{
      margin:0;
      background:var(--bg);
      color:var(--fg);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                   "Liberation Mono", "Courier New", monospace;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      font-weight:400;
    }

    .page{
      min-height:100%;
      display:grid;
      grid-template-rows:auto 1fr auto;
      isolation:isolate;
    }

    .page::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.045;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.07), transparent 46%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.05), transparent 44%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.025), rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px);
      mix-blend-mode:screen;
      z-index:-1;
    }

    header, footer{
      background:var(--glass);
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
      overflow: visible;
    }

    /* La cabecera no puede llevar backdrop-filter: cualquier valor
       distinto de none la convierte en bloque contenedor de sus
       descendientes position:fixed, y el panel de idiomas de movil
       queda anclado al borde inferior de la cabecera en vez de al de
       la pantalla. Sobre fondo negro al 78% el desenfoque no se
       aprecia, asi que no se pierde nada. */
    header{
      position:relative;
      z-index:50;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }


    header{
      padding: var(--py) var(--px);
      border-bottom: 1px solid var(--hair);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      min-height:31px;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      mix-blend-mode:difference;
    }

    /* The desktop topper has one invariant geometry on every page.
       Public navigation labels are taller than the icon-only legal toolbar;
       without a fixed row height, moving between those pages shifts the logo. */
    @media (min-width:641px){
      #mx-header .topbar{
        height:39px;
        min-height:39px;
      }
    }


    .brand{
      display:inline-block;
      cursor:default;
      -webkit-user-select:none;
      user-select:none;
    }

    .brand{
      font-size: var(--brand-size);
      font-weight:800;
      letter-spacing: var(--brand-track);
      text-transform: uppercase;
      white-space: nowrap;
      line-height: 1;
      color:#fff;
      opacity:1;
      text-shadow:none;
      mix-blend-mode:difference;
    }

    nav{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .navlink{
      color:#fff;
      text-decoration:none;
      font-size:var(--nav-size);
      font-weight:700;
      letter-spacing:var(--nav-track);
      text-transform:uppercase;
      padding:5px 2px;
      position:relative;
      z-index:2;
      mix-blend-mode:difference;
    }
    .navlink:hover{ color:#fff; }
    .navlink::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:0;
      height:1px;
      background:rgba(255,255,255,.22);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform 150ms ease;
    }
    .navlink:hover::after{ transform:scaleX(1); }

    .verticals{
      position:relative;
      display:inline-flex;
      align-items:center;
      cursor:pointer;
    }
    .verticals > span{ pointer-events:none; }

    .verticals-menu{
      position:absolute;
      top:100%;
      left:0;
      margin-top:10px;

      display:flex;
      flex-direction:column;
      gap:10px;

      padding:0;
      padding-top:2px;
      border:0;
      background:transparent;
      border-radius:0;

      opacity:0;
      pointer-events:none;
      transform: translateY(6px);
      transition: opacity 160ms ease, transform 160ms ease;

      white-space:nowrap;
      z-index:50;
    }

    .verticals-menu .v-item:first-child{ margin-top:2px; }

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

    .v-item{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      text-decoration:none;
      padding:2px 0;
    }

    .v-main{
      color:rgba(255,255,255,.92);
      font-size:13px;
      font-weight:400;
      letter-spacing:.14em;
      text-transform:uppercase;
      line-height:1.05;
    }

    .v-sub{
      margin-top:3px;
      color:rgba(255,255,255,.55);
      font-size:10.5px;
      font-weight:400;
      letter-spacing:.18em;
      text-transform:uppercase;
      line-height:1.05;
    }

    .v-item:hover .v-main{ color:#fff; }
    .v-item:hover .v-sub{ color:rgba(255,255,255,.72); }

    @media (min-width:641px){
      nav{ gap:5px; }

      nav > .navlink{
        padding:8px 11px;
        border:1px solid transparent;
        border-radius:999px;
        transition:background 180ms ease, border-color 180ms ease, transform 180ms ease;
      }

      nav > .navlink::after{ display:none; }

      nav > .navlink:hover,
      nav > .navlink:focus-visible,
      .verticals.is-open{
        background:rgba(255,255,255,.08);
        border-color:rgba(255,255,255,.14);
      }

      nav > .navlink:active{ transform:scale(.97); }

      .verticals-menu,
      [dir="rtl"] .verticals-menu{
        width:286px;
        padding:9px;
        gap:6px;
        border:1px solid rgba(255,255,255,.14);
        border-radius:16px;
        background:rgba(4,4,4,.96);
        backdrop-filter:blur(18px) saturate(120%);
        -webkit-backdrop-filter:blur(18px) saturate(120%);
        box-shadow:0 24px 70px rgba(0,0,0,.68), 0 1px 0 rgba(255,255,255,.04) inset;
        transform:translateY(9px) scale(.985);
        transform-origin:top left;
        overflow:hidden;
      }

      [dir="rtl"] .verticals-menu{ transform-origin:top right; }

      .verticals.is-open .verticals-menu{
        transform:translateY(0) scale(1);
      }

      .verticals-menu .v-item,
      .verticals-menu .v-item:first-child{
        min-height:58px;
        justify-content:center;
        margin:0;
        padding:11px 13px;
        border:1px solid rgba(255,255,255,.075);
        border-radius:11px;
        background:rgba(255,255,255,.025);
        mix-blend-mode:normal !important;
        transition:background 180ms ease, border-color 180ms ease, transform 180ms ease;
      }

      .verticals-menu .v-item:hover,
      .verticals-menu .v-item:focus-visible{
        background:rgba(255,255,255,.085);
        border-color:rgba(255,255,255,.17);
        transform:translateX(3px);
        outline:none;
      }

      [dir="rtl"] .verticals-menu .v-item:hover,
      [dir="rtl"] .verticals-menu .v-item:focus-visible{
        transform:translateX(-3px);
      }

      .verticals-menu .v-main,
      .verticals-menu .v-sub{
        mix-blend-mode:normal !important;
        text-shadow:none !important;
      }

      .verticals-menu .v-main{
        color:#fff;
        font-size:12px;
        font-weight:700;
        letter-spacing:.17em;
      }

      .verticals-menu .v-sub{
        margin-top:5px;
        color:rgba(255,255,255,.55);
        font-size:9.5px;
        letter-spacing:.20em;
      }
    }

    .lang-switch{
      position:relative;
      display:flex;
      align-items:center;
    }

    .lang-trigger{
      font-family: inherit;
      mix-blend-mode:difference;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:28px;
      height:28px;
      background:none;
      border:0;
      cursor:pointer;
      padding:0;
      color:#fff;
      line-height:1;
      border-radius:10px;
      -webkit-user-select:none;
      user-select:none;
    }
    .lang-trigger:hover{ background: rgba(255,255,255,.06); }
    .lang-trigger:focus{ outline:none; }
    .globe{ width:18px; height:18px; display:block; }

    .lang-rail{
      --rail-shift: 0px;

      position:absolute;
      right: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%) translateX(var(--rail-shift));

      display:flex;
      align-items:center;
      gap:8px;

      padding:6px 8px;
      border:1px solid var(--menu-border);
      background: var(--menu-bg);
      border-radius: 999px;

      max-width: min(1180px, calc(100vw - (2 * var(--px)) - 80px));
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;

      direction:ltr;
      unicode-bidi:isolate;

      opacity:0;
      pointer-events:none;

      filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      transition: opacity 0.4s ease, transform 0.2s ease;

      touch-action: pan-x;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }

    .lang-rail::-webkit-scrollbar{ height:0; }
    .lang-rail{ scrollbar-width:none; -ms-overflow-style:none; }

    .lang-switch.is-open .lang-rail{
      opacity:1;
      pointer-events:auto;
    }

    .lang-switch.open-right .lang-rail{
      right:auto;
      left: calc(100% + 10px);
    }

    [dir="rtl"] .lang-switch.open-right .lang-rail{
      left:auto;
      right: calc(100% + 10px);
    }

    .lang-pill{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;

      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.30);
      color: rgba(255,255,255,.86);

      height:26px;
      padding: 0 10px;
      border-radius: 999px;

      font-size: 11px;
      font-weight: 400;
      letter-spacing: .12em;
      text-transform: uppercase;

      cursor:pointer;
      user-select:none;

      transform: translateX(10px);
      opacity: 0;
      transition: transform 220ms ease, opacity 220ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .lang-pill:focus{ outline:none; }
    .lang-pill[hidden]{ display:none !important; }

    .lang-switch.is-open .lang-pill{
      transform: translateX(0);
      opacity: 1;
    }

    .lang-switch.is-open .lang-pill:nth-child(1)  { transition-delay:  0ms; }
    .lang-switch.is-open .lang-pill:nth-child(2)  { transition-delay: 18ms; }
    .lang-switch.is-open .lang-pill:nth-child(3)  { transition-delay: 36ms; }
    .lang-switch.is-open .lang-pill:nth-child(4)  { transition-delay: 54ms; }
    .lang-switch.is-open .lang-pill:nth-child(5)  { transition-delay: 72ms; }
    .lang-switch.is-open .lang-pill:nth-child(6)  { transition-delay: 90ms; }
    .lang-switch.is-open .lang-pill:nth-child(7)  { transition-delay:108ms; }
    .lang-switch.is-open .lang-pill:nth-child(8)  { transition-delay:126ms; }
    .lang-switch.is-open .lang-pill:nth-child(9)  { transition-delay:144ms; }
    .lang-switch.is-open .lang-pill:nth-child(10) { transition-delay:162ms; }
    .lang-switch.is-open .lang-pill:nth-child(11) { transition-delay:180ms; }
    .lang-switch.is-open .lang-pill:nth-child(12) { transition-delay:198ms; }
    .lang-switch.is-open .lang-pill:nth-child(13) { transition-delay:216ms; }
    .lang-switch.is-open .lang-pill:nth-child(14) { transition-delay:234ms; }
    .lang-switch.is-open .lang-pill:nth-child(15) { transition-delay:252ms; }
    .lang-switch.is-open .lang-pill:nth-child(16) { transition-delay:270ms; }
    .lang-switch.is-open .lang-pill:nth-child(17) { transition-delay:288ms; }
    .lang-switch.is-open .lang-pill:nth-child(18) { transition-delay:306ms; }
    .lang-switch.is-open .lang-pill:nth-child(19) { transition-delay:324ms; }

    .lang-pill:hover{
      color:#fff;
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.06);
    }

    .lang-pill::after{
      content: attr(data-label);
      position:absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);

      background: rgba(0,0,0,.90);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 10px;
      padding: 6px 8px;

      font-size: 10px;
      font-weight: 400;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.92);

      opacity:0;
      pointer-events:none;
      white-space: nowrap;

      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .lang-pill:hover::after{ opacity:1; }

    main{
      display:grid;
      place-items:center;
      padding:22px var(--px);
    }

    .card{
      width:min(720px,100%);
      border:1px solid rgba(255,255,255,.12);
      border-radius:var(--radius);
      background:rgba(0,0,0,.55);
      padding:clamp(16px,2.5vw,24px);
      font-weight:400;
      text-align:center;
    }

    footer{
      padding:10px var(--px) 12px;
      border-top:1px solid var(--hair);
    }

    .footer-inner{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
    }

    .footer-links{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      font-size:10.5px;
      font-weight:400;
      letter-spacing:.16em;
      text-transform:uppercase;
      opacity:.75;
      align-items:center;
    }

    .footer-links a{
      color:rgba(255,255,255,.85);
      text-decoration:none;
    }
    .footer-links a:hover{ color:#fff; }

    .copyright a{
      color:inherit;
      text-decoration:none;
      border-bottom:1px solid rgba(255,255,255,.18);
      padding-bottom:1px;
      transition: border-color 200ms ease, opacity 200ms ease;
    }
    .copyright a:hover{ border-bottom-color: rgba(255,255,255,.55); }
    .copyright a:focus-visible{
      outline:1px solid rgba(255,255,255,.65);
      outline-offset:3px;
      border-bottom-color:transparent;
    }

    .copyright{
      font-size:var(--copy-size);
      letter-spacing:var(--copy-track);
      opacity:.58;
      text-align:center;
      line-height:1.3;
      font-weight:400;
    }

    .cookie-gear{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:22px;
      height:22px;
      margin-left:6px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.25);
      cursor:pointer;
      position:relative;
      vertical-align:middle;
    }
    .cookie-gear:hover{
      border-color: rgba(255,255,255,.20);
      background: rgba(255,255,255,.05);
    }
    .cookie-gear svg{
      width:14px;
      height:14px;
      display:block;
      color: rgba(255,255,255,.88);
    }
    .cookie-gear::after{
      content: attr(data-tip);
      position:absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,.90);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 10px;
      padding: 6px 8px;
      font-size: 10px;
      font-weight: 400;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255,255,255,.92);
      opacity:0;
      pointer-events:none;
      white-space: nowrap;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .cookie-gear:hover::after{ opacity:1; }

    /* Never animate a language change. The final copy appears as a direct paint. */
    html:not(.mx-i18n-ready) [data-i18n]{ visibility:hidden; }

    [dir="rtl"] .topbar{ flex-direction:row-reverse; }
    [dir="rtl"] nav{ flex-direction:row-reverse; }
    [dir="rtl"] .navlink::after{ transform-origin:right; }
    [dir="rtl"] .footer-links{ flex-direction:row-reverse; }

    [dir="rtl"] .verticals-menu{
      left:auto;
      right:0;
      align-items:flex-end;
      text-align:right;
    }
    [dir="rtl"] .v-item{ align-items:flex-end; }

    @media (max-width: 640px){
      .topbar{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
      }
      nav{ width:100%; gap:10px; }

      .lang-switch::before{
        content:"";
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.55);
        backdrop-filter:blur(2px);
        -webkit-backdrop-filter:blur(2px);
        opacity:0;
        pointer-events:none;
        transition:opacity 220ms ease;
        z-index:9997;
      }
      .lang-switch.is-open::before{
        opacity:1;
        pointer-events:auto;
      }

      .lang-rail{
        position:fixed;
        inset:auto 0 0 0;
        margin:0;
        transform:translateY(100%);

        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:10px;

        max-width:none;
        width:100%;
        padding:20px 16px calc(20px + env(safe-area-inset-bottom));
        border-radius:20px 20px 0 0;
        border-width:1px 0 0 0;

        overflow:visible;
        white-space:normal;
        scroll-snap-type:none;
        -webkit-mask-image:none;
        mask-image:none;

        transition:transform 320ms cubic-bezier(.32,.72,0,1), opacity 220ms ease;
        z-index:9998;
      }

      .lang-switch.is-open .lang-rail{
        transform:translateY(0);
      }

      [dir="rtl"] .lang-rail{ left:0; right:0; }

      .lang-pill{
        height:64px;
        transform:none;
        opacity:1;
        transition-delay:0ms !important;
        flex-direction:column;
        justify-content:center;
        gap:3px;
        padding:0 12px;
        overflow:hidden;
        position:relative;
      }

      .lang-switch.is-open .lang-pill{ transform:none; }

      .lang-pill::before{
        content:"";
        position:absolute;
        inset:0;
        background:radial-gradient(120px 60px at 50% 0%, rgba(255,255,255,.14), transparent 70%);
        opacity:0;
        transition:opacity 260ms ease;
        pointer-events:none;
      }

      .lang-switch.is-open .lang-pill:active::before{ opacity:1; }

      .lang-switch.is-open .lang-pill:active{
        transform:scale(0.95) !important;
        background:rgba(255,255,255,.09);
        border-color:rgba(255,255,255,.24);
      }

      .lang-pill-code{
        font-size:14px;
        font-weight:700;
        letter-spacing:.14em;
      }

      .lang-pill::after{
        content: attr(data-label);
        position:static;
        transform:none;
        display:block;
        background:none;
        border:0;
        padding:0;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        opacity:.55;
        pointer-events:none;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
        font-size:9.5px;
        letter-spacing:.04em;
        text-transform:none;
        color:rgba(255,255,255,.72);
      }

      body.mx-sheet-open{ overflow:hidden; touch-action:none; }
    }

    html[dir="rtl"], body{ overflow-x: hidden; }
    [dir="rtl"] .page{ overflow-x: clip; }

    body.mx-consent-locked{
      overflow:hidden;
      touch-action:none;
    }

    body.mx-consent-locked #app-root{
      pointer-events:none;
      user-select:none;
      -webkit-user-select:none;
    }

    .mx-cmp{
      position:fixed;
      inset:0;
      z-index:9999;
      display:none;
      align-items:center;
      justify-content:center;
      padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
               max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
      background: rgba(0,0,0,.78);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .mx-cmp.is-open{ display:flex; }

    .mx-cmp.is-banner::before{
      content:"";
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      top: var(--mx-hdr-h, 64px);
      background: rgba(0,0,0,.28);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      pointer-events:none;
    }

    /* Keep navigation out of the first paint until all menu and consent
       state has been applied. The brand remains visible and never flashes. */
    html:not(.mx-ui-ready) #mx-header nav{ visibility:hidden; }

    /* While consent is pending, leave the brand clear but treat the entire
       navigation as one inactive, blurred control surface. Applying this to
       nav itself guarantees that every item has the same visual state. */
    body.mx-cmp-open #mx-header nav{
      opacity:.32 !important;
      filter:blur(1px) !important;
      pointer-events:none !important;
      user-select:none !important;
      /* A static state: no delayed GPU compositing or icon movement. */
      transition:none !important;
      animation:none !important;
      transform:none !important;
    }
    body.mx-cmp-open #mx-header nav *,
    body.mx-cmp-open #mx-header .lang-switch,
    body.mx-cmp-open #mx-header .lang-trigger,
    body.mx-cmp-open #mx-header .globe{
      transition:none !important;
      animation:none !important;
      transform:none !important;
    }

    /* El bloque de 430px recorta .brand para que el logotipo no desborde
       en pantallas estrechas. Durante el destello hay que levantarlo o los
       rayos quedan cortados a ras de letra. */
    .brand.is-flaring{ overflow:visible !important; }

    /* --- Encendido de la X al terminar la secuencia -------------------
       Prende con un golpe corto y se queda en brasa. El resto del
       logotipo centellea alrededor; la X mantiene el brillo fijo. */
    /* --- Carga acumulativa -------------------------------------------
       --charge va de 0 a 1. Cada pasada del cursor suma; al retirarlo
       decae sola. Todo el aspecto de la X se deriva de esa variable, asi
       que el efecto es continuo y no una serie de estados sueltos. */
    .brand-x{ --charge: 0; }

    .brand-x.is-ember{
      text-shadow:
        0 0 calc(7px + var(--charge) * 13px)  rgba(255,255,255, calc(.30 + var(--charge) * .52)),
        0 0 calc(19px + var(--charge) * 28px) rgba(255,255,255, calc(.10 + var(--charge) * .26));
      transition: text-shadow 560ms cubic-bezier(.22,1,.36,1);
    }

    /* Los rayos de reposo salen de la misma variable. A carga 0 son
       invisibles; a carga 1 llegan a la mitad del alcance del clic, para
       que pulsar siga siendo el gesto mayor. */
    .brand-x::before,
    .brand-x::after{
      transition:
        transform 560ms cubic-bezier(.22,1,.36,1),
        opacity 560ms ease;
    }
    .brand-x::before{
      transform: rotate(45deg)  scaleX(calc(.04 + var(--charge) * .48));
      opacity: calc(var(--charge) * .52);
    }
    .brand-x::after{
      transform: rotate(-45deg) scaleX(calc(.04 + var(--charge) * .48));
      opacity: calc(var(--charge) * .52);
    }

    @media (prefers-reduced-motion: reduce){
      .brand-x.is-ember{ transition:none; }
      .brand-x::before, .brand-x::after{ transition:none; }
    }

    .brand-x.is-lit{
      animation: mxXIgnite 1700ms cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes mxXIgnite{
      0%{   text-shadow:none; }
      20%{  text-shadow: 0 0 11px rgba(255,255,255,.80), 0 0 28px rgba(255,255,255,.32); }
      100%{ text-shadow: 0 0 7px rgba(255,255,255,.30), 0 0 19px rgba(255,255,255,.10); }
    }

    /* --- Destello a pantalla completa --------------------------------
       Los rayos largos van a 1px y a un 30% de opacidad como mucho.
       Cruzar la pantalla ya es gesto suficiente; si ademas brillan,
       pasa de imponente a discoteca. */
    .mx-xveil{
      position:fixed;
      inset:0;
      overflow:hidden;
      pointer-events:none;
      z-index:9996;
    }
    .mx-xveil i{
      position:absolute;
      left: var(--fx, 50%);
      top: var(--fy, 50%);
      width: 220vmax;
      height:1px;
      margin-left:-110vmax;
      opacity:0;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.04) 22%,
        rgba(255,255,255,.16) 42%,
        rgba(255,255,255,.30) 50%,
        rgba(255,255,255,.16) 58%,
        rgba(255,255,255,.04) 78%,
        transparent 100%);
    }
    .mx-xveil i:nth-child(1){ transform: rotate(45deg)  scaleX(.18); }
    .mx-xveil i:nth-child(2){ transform: rotate(-45deg) scaleX(.18); }

    .mx-xveil.is-on i:nth-child(1){ animation: mxVeilA 1300ms cubic-bezier(.12,.9,.24,1) both; }
    .mx-xveil.is-on i:nth-child(2){ animation: mxVeilB 1300ms cubic-bezier(.12,.9,.24,1) both; }

    @keyframes mxVeilA{
      0%{   opacity:0; transform: rotate(45deg) scaleX(.18); }
      9%{   opacity:1; transform: rotate(45deg) scaleX(1); }
      100%{ opacity:0; transform: rotate(46.5deg) scaleX(1.04); }
    }
    @keyframes mxVeilB{
      0%{   opacity:0; transform: rotate(-45deg) scaleX(.18); }
      9%{   opacity:1; transform: rotate(-45deg) scaleX(1); }
      100%{ opacity:0; transform: rotate(-46.5deg) scaleX(1.04); }
    }

    @media (prefers-reduced-motion: reduce){
      .brand-x.is-lit{ animation:none; text-shadow: 0 0 7px rgba(255,255,255,.30); }
      .mx-xveil{ display:none; }
    }

    .brand-x{
      position:relative;
      display:inline-block;
      --flare: clamp(88px, 21vw, 196px);
    }

    /* Los dos rayos. Nucleo de 2px que se afila hacia los extremos:
       es lo que distingue un destello optico de una raya pintada. */
    .brand-x::before,
    .brand-x::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width: var(--flare);
      height:2px;
      margin-left: calc(var(--flare) / -2);
      margin-top:-1px;
      pointer-events:none;
      opacity:0;
      border-radius:2px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.05) 12%,
        rgba(255,255,255,.42) 38%,
        #fff 50%,
        rgba(255,255,255,.42) 62%,
        rgba(255,255,255,.05) 88%,
        transparent 100%);
    }

    .brand-x::before{ transform: rotate(45deg)  scaleX(.04); }
    .brand-x::after { transform: rotate(-45deg) scaleX(.04); }

    .brand-x.is-flaring::before{
      animation: mxFlareA 980ms cubic-bezier(.12,.9,.24,1) both;
    }
    .brand-x.is-flaring::after{
      animation: mxFlareB 980ms cubic-bezier(.12,.9,.24,1) both;
    }
    .brand-x.is-flaring{
      animation: mxFlareCore 980ms cubic-bezier(.12,.9,.24,1) both;
    }

    /* Ataque en 70ms, caida en 900. Al reves parece un parpadeo de error. */
    @keyframes mxFlareA{
      0%   { opacity:0;   transform: rotate(45deg) scaleX(.04); }
      7%   { opacity:1;   transform: rotate(45deg) scaleX(1); }
      100% { opacity:0;   transform: rotate(48deg) scaleX(1.06); }
    }
    @keyframes mxFlareB{
      0%   { opacity:0;   transform: rotate(-45deg) scaleX(.04); }
      7%   { opacity:1;   transform: rotate(-45deg) scaleX(1); }
      100% { opacity:0;   transform: rotate(-48deg) scaleX(1.06); }
    }
    @keyframes mxFlareCore{
      0%   { text-shadow:none; }
      7%   { text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 26px rgba(255,255,255,.55), 0 0 60px rgba(255,255,255,.20); }
      100% { text-shadow: 0 0 0 rgba(255,255,255,0), 0 0 0 rgba(255,255,255,0), 0 0 0 rgba(255,255,255,0); }
    }

    @media (prefers-reduced-motion: reduce){
      .brand-x.is-flaring::before,
      .brand-x.is-flaring::after,
      .brand-x.is-flaring{ animation:none; }
    }

    body.mx-cmp-open .brand.is-revealed{
      opacity:1;
      filter:none;
      pointer-events:auto;
      cursor:default;
    }

    /* Con el aviso ya decidido no hay desenfoque que levantar: la marca
       entra directamente en centelleo, sin el fogonazo de revelado. */
    .brand.is-twinkling{
      animation: mxBrandStar 7200ms ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce){
      .brand.is-twinkling{
        animation:none;
        text-shadow: 0 0 8px rgba(255,255,255,.18);
      }
    }

    .brand.is-revealed{
      animation:
        mxBrandGleam 1500ms cubic-bezier(.22,1,.36,1) both,
        mxBrandStar 7200ms ease-in-out 1500ms infinite;
    }

    @keyframes mxBrandGleam{
      0%{
        opacity:.28;
        filter:blur(1.6px);
        text-shadow:none;
      }
      26%{
        opacity:1;
        filter:blur(0);
        text-shadow:none;
      }
      52%{
        opacity:1;
        filter:blur(0);
        text-shadow:
          0 0 14px rgba(255,255,255,.55),
          0 0 34px rgba(255,255,255,.22),
          0 0 64px rgba(255,255,255,.08);
      }
      100%{
        opacity:1;
        filter:blur(0);
        text-shadow:
          0 0 6px rgba(255,255,255,.16),
          0 0 18px rgba(255,255,255,.05);
      }
    }

    /* Centelleo. Los tiempos son deliberadamente irregulares: una
       oscilacion regular se lee como un LED, y una irregular se lee
       como una estrella. */
    @keyframes mxBrandStar{
      0%{   text-shadow: 0 0 6px rgba(255,255,255,.16), 0 0 18px rgba(255,255,255,.05); }
      17%{  text-shadow: 0 0 10px rgba(255,255,255,.29), 0 0 26px rgba(255,255,255,.09); }
      29%{  text-shadow: 0 0 5px rgba(255,255,255,.11), 0 0 14px rgba(255,255,255,.03); }
      46%{  text-shadow: 0 0 13px rgba(255,255,255,.36), 0 0 32px rgba(255,255,255,.13); }
      58%{  text-shadow: 0 0 7px rgba(255,255,255,.17), 0 0 20px rgba(255,255,255,.05); }
      74%{  text-shadow: 0 0 11px rgba(255,255,255,.27), 0 0 28px rgba(255,255,255,.09); }
      88%{  text-shadow: 0 0 6px rgba(255,255,255,.13), 0 0 16px rgba(255,255,255,.04); }
      100%{ text-shadow: 0 0 6px rgba(255,255,255,.16), 0 0 18px rgba(255,255,255,.05); }
    }

    @media (prefers-reduced-motion: reduce){
      .brand.is-revealed{
        animation:none;
        opacity:1;
        filter:none;
        text-shadow: 0 0 8px rgba(255,255,255,.18);
      }
    }

    .lang-pill.is-active{
      border-color: rgba(255,255,255,.42);
      background: rgba(255,255,255,.10);
      color:#fff;
    }

    .lang-pill.is-active.mx-hint{
      animation: mxPillPulse 700ms ease-in-out 2;
    }
    @keyframes mxPillPulse{
      0%, 100%{
        transform: translateX(0) scale(1);
        border-color: rgba(255,255,255,.42);
        background: rgba(255,255,255,.10);
        box-shadow: 0 0 0 rgba(255,255,255,0);
      }
      50%{
        transform: translateX(0) scale(1.10);
        border-color: rgba(255,255,255,.85);
        background: rgba(255,255,255,.20);
        box-shadow: 0 0 14px rgba(255,255,255,.28);
      }
    }
    @media (prefers-reduced-motion: reduce){
      .lang-pill.is-active.mx-hint{ animation:none; }
    }

    /* The language control stays completely still while consent is pending. */

    .mx-cmp.is-banner{
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      pointer-events:none;
    }
    .mx-cmp.is-banner .mx-cmp-panel{
      pointer-events:auto;
      animation: mxCmpIn 420ms cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes mxCmpIn{
      from{ opacity:0; transform: translateY(8px) scale(.985); }
      to  { opacity:1; transform: translateY(0) scale(1); }
    }
    @media (prefers-reduced-motion: reduce){
      .mx-cmp.is-banner .mx-cmp-panel{ animation:none; }
    }

    .mx-cmp-row.is-empty{ opacity:.72; }
    .mx-cmp-empty-note{
      display:block;
      margin-top:3px;
      font-size:10px;
      letter-spacing:.10em;
      text-transform:uppercase;
      color: rgba(255,255,255,.42);
    }

    .mx-cmp-panel{
      width:min(560px, 100%);
      border:1px solid rgba(255,255,255,.14);
      border-radius: 16px;
      background: rgba(0,0,0,.88);
      box-shadow: 0 18px 60px rgba(0,0,0,.55);
      overflow:hidden;
    }

    .mx-cmp-head{
      padding: 14px 16px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }

    .mx-cmp-title{
      margin:0;
      font-size:12px;
      letter-spacing:.18em;
      text-transform:uppercase;
      opacity:.92;
      line-height:1.25;
    }

    .mx-cmp-sub{
      margin:10px 0 0;
      font-size:11px;
      letter-spacing:.02em;
      line-height:1.35;
      color:rgba(255,255,255,.70);
    }

    .mx-cmp-body{
      padding: 12px 16px 14px;
      display:grid;
      gap:10px;
    }

    .mx-cmp-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding: 10px 12px;
      border:1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      background: rgba(255,255,255,.03);
    }

    .mx-cmp-row strong{
      display:block;
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(255,255,255,.90);
    }

    .mx-cmp-row p{
      margin:6px 0 0;
      font-size:11px;
      color:rgba(255,255,255,.65);
      line-height:1.35;
    }

    .mx-switch{
      width:44px;
      height:24px;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.35);
      position:relative;
      cursor:pointer;
      flex:0 0 auto;
      padding:0;
    }

    .mx-switch::after{
      content:"";
      position:absolute;
      top:50%;
      left:3px;
      width:18px;
      height:18px;
      transform: translateY(-50%);
      border-radius: 999px;
      background: rgba(255,255,255,.78);
      transition: left 150ms ease, opacity 150ms ease;
      opacity:.92;
    }

    .mx-switch[data-on="1"]{
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.22);
    }

    .mx-switch[data-on="1"]::after{ left:23px; }

    .mx-switch[aria-disabled="true"]{
      cursor:not-allowed;
      opacity:.55;
    }

    .mx-cmp-actions{
      display:flex;
      gap:10px;
      justify-content:flex-end;
      padding: 12px 16px 14px;
      border-top:1px solid rgba(255,255,255,.10);
      flex-wrap:wrap;
    }

    .mx-btn{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.88);
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 11px;
      letter-spacing:.16em;
      text-transform:uppercase;
      cursor:pointer;
      line-height:1;
      -webkit-tap-highlight-color: transparent;
    }

    .mx-btn:hover{
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.07);
      color:#fff;
    }

    .mx-btn.primary{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.22);
    }

    .mx-btn.primary:hover{
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.28);
    }

    @media (max-width: 560px){
      .mx-cmp-actions{ justify-content:stretch; }
      .mx-btn{ flex:1 1 auto; text-align:center; }
      .mx-cmp-row{ flex-direction:column; align-items:flex-start; }
    }

    html, body, .page, header, main, footer, nav, .brand, .navlink, .footer-links, .copyright, .v-item, .v-main, .v-sub{
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      -webkit-touch-callout:none;
    }

    img, video, svg{
      -webkit-user-drag:none;
      user-drag:none;
    }

    @media (max-width: 640px){
      header{
        position:relative;
        z-index:3000;
      }

      .topbar{
        align-items:flex-start;
        gap:12px;
      }

      nav{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        flex-wrap:wrap;
        column-gap:clamp(10px,3vw,16px);
        row-gap:12px;
        overflow:visible;
      }

      /* Aqui vivia una version anterior del selector movil: un rail
         desplegado bajo la cabecera. Se ha retirado porque llegaba
         despues del panel inferior en la hoja y lo anulaba entero. */
      .lang-switch{
        position:relative;
        flex:0 0 auto;
      }
    }

    @media (max-width: 430px){
      :root{
        --px:clamp(14px, 4vw, 18px);
        --brand-size:clamp(20px, 6.2vw, 24px);
        --brand-track:.20em;
        --nav-size:clamp(11px, 3.45vw, 13px);
        --nav-track:.14em;
      }

      header{
        padding-top:12px;
        padding-bottom:12px;
      }

      .brand{
        max-width:100%;
        letter-spacing:var(--brand-track);
        overflow:hidden;
        text-overflow:clip;
      }

      nav{
        column-gap:12px;
        row-gap:12px;
      }

      .navlink{
        font-size:var(--nav-size);
        letter-spacing:var(--nav-track);
        padding:4px 0;
      }

      .lang-trigger{
        width:24px;
        height:24px;
      }

      .globe{
        width:17px;
        height:17px;
      }


      .footer-links{
        gap:14px;
        font-size:11.5px;
        letter-spacing:.13em;
      }

      .copyright{
        font-size:8.5px;
        letter-spacing:.06em;
      }
    }

    @media (max-width: 430px){
      html[lang="ru"] .navlink{
        font-size:10.5px;
        letter-spacing:.105em;
      }

      html[lang="ru"] nav{
        column-gap:10px;
      }

      html[lang="ru"] .footer-links{
        font-size:10.4px;
        letter-spacing:.10em;
      }
    }

    @media (max-width: 380px){
      :root{
        --brand-size:clamp(18px, 6vw, 21px);
        --brand-track:.18em;
        --nav-size:10.4px;
        --nav-track:.105em;
      }

      nav{
        column-gap:9px;
        row-gap:10px;
      }

      html[lang="ru"] .navlink{
        font-size:9.8px;
        letter-spacing:.085em;
      }

      .footer-links{
        gap:11px;
        font-size:10.4px;
        letter-spacing:.09em;
      }
    }

    /* --- Sin salto al reposicionar los raíles ------------------------
       placeRailSmart pone --rail-shift a 0, mide, y vuelve a ponerlo.
       Con transition en transform eso se ve como un desplazamiento y
       vuelta. Durante la medida se corta la transicion. */
    .lang-rail.is-measuring,
    .tools-rail.is-measuring{
      transition:none !important;
    }

    @media (max-width: 640px){
      /* --- Verticales como panel inferior ---------------------------
         En absoluto se superponia al texto legal. Mismo patron que el
         selector de idiomas: velo, panel acoplado abajo y area segura. */
      .verticals::before{
        content:"";
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.55);
        backdrop-filter:blur(2px);
        -webkit-backdrop-filter:blur(2px);
        opacity:0;
        pointer-events:none;
        transition:opacity 220ms ease;
        z-index:9997;
      }
      .verticals.is-open::before{
        opacity:1;
        pointer-events:auto;
      }

      .verticals-menu,
      [dir="rtl"] .verticals-menu{
        position:fixed;
        inset:auto 0 0 0;
        left:0;
        right:0;
        margin:0;
        width:100%;
        max-width:none;

        display:flex;
        flex-direction:column;
        gap:9px;
        align-items:stretch;
        text-align:center;

        padding:12px 16px calc(18px + env(safe-area-inset-bottom));
        border:1px solid rgba(255,255,255,.16);
        border-width:1px 0 0 0;
        border-radius:24px 24px 0 0;
        background:rgba(4,4,4,.975);
        backdrop-filter:blur(20px) saturate(120%);
        -webkit-backdrop-filter:blur(20px) saturate(120%);
        box-shadow:0 -24px 80px rgba(0,0,0,.72), 0 1px 0 rgba(255,255,255,.04) inset;

        opacity:1;
        transform: translateY(100%);
        transition: transform 320ms cubic-bezier(.32,.72,0,1);
        z-index:9998;
      }

      .verticals-menu::before{
        content:"";
        width:42px;
        height:3px;
        flex:0 0 3px;
        align-self:center;
        margin:0 auto 5px;
        border-radius:999px;
        background:rgba(255,255,255,.26);
        box-shadow:0 0 18px rgba(255,255,255,.06);
      }

      .verticals.is-open .verticals-menu{
        transform: translateY(0);
        pointer-events:auto;
      }

      .verticals-menu .v-item{
        width:100%;
        max-width:520px;
        min-height:70px;
        align-self:center;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        padding:12px 18px;
        margin-top:0 !important;
        border:1px solid rgba(255,255,255,.105);
        border-radius:16px;
        background:linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
        box-shadow:0 10px 28px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.035) inset;
        text-align:center;
        mix-blend-mode:normal !important;
        transition:background 180ms ease, border-color 180ms ease, transform 180ms ease;
      }

      .verticals-menu .v-main,
      .verticals-menu .v-sub{
        width:100%;
        text-align:center;
        mix-blend-mode:normal !important;
        text-shadow:none !important;
      }

      .verticals-menu .v-main{
        color:#fff;
        font-size:12.5px;
        font-weight:750;
        letter-spacing:.21em;
      }

      .verticals-menu .v-sub{
        margin-top:0;
        color:rgba(255,255,255,.58);
        font-size:9.5px;
        letter-spacing:.22em;
      }

      .verticals-menu .v-item:active{
        background:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
        border-color:rgba(255,255,255,.20);
        transform:scale(.985);
      }

      body.mx-sheet-open{ overflow:hidden; touch-action:none; }
    }

    @media (prefers-reduced-motion: reduce){
      .verticals-menu{ transition:none !important; }
    }

    /* --- Cinematic video intro ------------------------------------
       Two superimposed players alternate to produce a seamless crossfade. */
    #mx-video-bg{
      position:fixed;
      inset:0;
      z-index:0;
      overflow:hidden;
      pointer-events:none;
      background:#000;
    }

    #mx-video-bg::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:3;
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.16) 28%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.40)),
        radial-gradient(circle at center, rgba(0,0,0,.08) 38%, rgba(0,0,0,.26) 100%);
    }

    .mx-bg-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      opacity:0;
      transform:scale(1.012);
      filter:contrast(1.02) brightness(.76) saturate(.90);
      transition:opacity 1800ms cubic-bezier(.4,0,.2,1);
      background:#000;
    }

    .mx-bg-video.is-active{
      opacity:1;
      transform:scale(1.012);
    }

    .page{
      position:relative;
      z-index:1;
      background:transparent;
      isolation:auto;
    }

    .page::before{
      z-index:0;
      opacity:.055;
    }

    header,
    footer{
      background:#000 !important;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }

    .topbar,
    .footer-inner{
      background:#000 !important;
      mix-blend-mode:normal;
    }

    .brand,
    .brand-x,
    .navlink,
    .navlink > span,
    .lang-trigger,
    .footer-links,
    .footer-links a,
      .copyright,
      .copyright a{
      color:#fff !important;
      opacity:1 !important;
      mix-blend-mode:normal !important;
      filter:none !important;
      text-shadow:none !important;
    }

    @media (max-width:640px){
      #mx-video-bg::after{
        background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.18) 30%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.44));
      }
    }

    @media (prefers-reduced-motion:reduce){
      .mx-bg-video{ transition:none; transform:none; }
    }

    /* Brand names and legal identifiers must never be reordered by an RTL
       document because their registered spelling is intrinsically LTR. */
    .brand{
      display:inline-flex;
      flex-direction:row;
      direction:ltr;
      unicode-bidi:isolate;
    }

    .brand-x{
      direction:ltr;
      unicode-bidi:isolate;
    }

    .copyright{
      direction:ltr;
      unicode-bidi:isolate;
    }

    /* Desktop language-safe verticals alignment. The panel opens toward
       the viewport interior in both LTR and RTL layouts, while its content
       remains optically centered for every writing system. */
    @media (min-width:641px){
      .verticals-menu,
      [dir="rtl"] .verticals-menu{
        left:auto;
        right:0;
        inset-inline-start:auto;
        inset-inline-end:0;
        align-items:stretch;
        text-align:center;
        direction:ltr;
        unicode-bidi:isolate;
        transform-origin:top right;
      }

      [dir="rtl"] .verticals-menu{
        transform-origin:top left;
      }

      .verticals-menu .v-item,
      [dir="rtl"] .verticals-menu .v-item{
        width:100% !important;
        align-self:stretch !important;
        align-items:center;
        justify-content:center;
        text-align:center;
        direction:ltr;
        unicode-bidi:isolate;
      }

      .verticals-menu .v-main,
      .verticals-menu .v-sub{
        display:block;
        width:100%;
        text-align:center;
      }

      .verticals-menu .v-item:hover,
      .verticals-menu .v-item:focus-visible,
      [dir="rtl"] .verticals-menu .v-item:hover,
      [dir="rtl"] .verticals-menu .v-item:focus-visible{
        transform:translateY(-1px);
      }
    }


/* ==========================================================
   CSP HARDENING
   ========================================================== */

.mx-noscript-warning {
  padding: 24px;
  text-align: center;
  color: rgba(255,255,255,.62);
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  letter-spacing: .06em;
}

.footer-cookie-wrap {
  display: inline-flex;
  align-items: center;
}

/* =========================================================
   MICRORETAILX — SHOP / CART
   ========================================================= */

.cart-trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#fff;
  text-decoration:none;
  line-height:1;
  mix-blend-mode:difference;
  -webkit-tap-highlight-color:transparent;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.cart-trigger:hover,
.cart-trigger:focus-visible{
  background:rgba(255,255,255,.06);
}

.cart-trigger:focus-visible{
  outline:1px solid rgba(255,255,255,.45);
  outline-offset:2px;
}

.cart-trigger:active{
  transform:scale(.94);
}

.cart-icon{
  display:block;
  width:19px;
  height:19px;
  overflow:visible;
}

.cart-badge{
  position:absolute;
  top:-5px;
  right:-7px;
  display:grid;
  place-items:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:#fff;
  color:#000;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  box-shadow:0 4px 14px rgba(0,0,0,.42);
  mix-blend-mode:normal;
  transform-origin:center;
}

.cart-badge[hidden]{
  display:none !important;
}

.cart-trigger.is-bumping{
  animation:mx-cart-pop 360ms cubic-bezier(.2,.9,.3,1.4);
}

.cart-trigger.is-bumping .cart-badge{
  animation:mx-cart-badge-pop 360ms cubic-bezier(.2,.9,.3,1.4);
}

@keyframes mx-cart-pop{
  0%{ transform:scale(1); }
  42%{ transform:scale(1.18) rotate(-5deg); }
  72%{ transform:scale(.97) rotate(2deg); }
  100%{ transform:scale(1) rotate(0); }
}

@keyframes mx-cart-badge-pop{
  0%{ transform:scale(.65); }
  55%{ transform:scale(1.28); }
  100%{ transform:scale(1); }
}

@media (prefers-reduced-motion:reduce){
  .cart-trigger,
  .cart-badge{
    transition:none !important;
    animation:none !important;
  }
}


/* =========================================================
   LANGUAGE FLAGS — quiet reveal
   Text disappears; the flag takes over the capsule.
   ========================================================= */
.lang-pill{
  overflow:hidden;
  isolation:isolate;
}

.lang-flag{
  position:absolute;
  z-index:0;
  inset:2px;
  overflow:hidden;
  border-radius:inherit;
  opacity:0;
  transform:scale(.975);
  transform-origin:center;
  pointer-events:none;
  background:#050505;

  transition:
    opacity 135ms ease,
    transform 230ms cubic-bezier(.16,1,.3,1);
}

.lang-flag::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      transparent 38%,
      rgba(0,0,0,.055)
    );
}

.lang-flag-svg{
  position:absolute;
  inset:-5% -4%;
  width:108%;
  height:110%;
  display:block;
  object-fit:cover;
  transform-origin:left center;
  filter:saturate(.88) contrast(.98) brightness(.84);
  will-change:transform;
}

.lang-pill-code{
  position:relative;
  z-index:2;
  opacity:1;
  transform:translateY(0) scale(1);

  transition:
    opacity 105ms ease,
    transform 165ms cubic-bezier(.16,1,.3,1);
}

/* Desktop: hover/focus is the preview state.
   Touch: language-menu.js applies .is-flag-preview while pressed. */
.lang-pill:hover .lang-flag,
.lang-pill:focus-visible .lang-flag,
.lang-pill:active .lang-flag,
.lang-pill.is-flag-preview .lang-flag{
  opacity:.94;
  transform:scale(1);
}

.lang-pill:hover .lang-flag-svg,
.lang-pill:focus-visible .lang-flag-svg,
.lang-pill:active .lang-flag-svg,
.lang-pill.is-flag-preview .lang-flag-svg{
  animation:mxFlagQuietWave 2.6s ease-in-out infinite;
}

/* Nothing competes with the flag while it is visible. */
.lang-pill:hover .lang-pill-code,
.lang-pill:focus-visible .lang-pill-code,
.lang-pill:active .lang-pill-code,
.lang-pill.is-flag-preview .lang-pill-code{
  opacity:0;
  transform:translateY(-2px) scale(.965);
}

/* Disable the old desktop language tooltip during flag preview. */
@media (hover:hover) and (pointer:fine){
  .lang-pill:hover::after,
  .lang-pill:focus-visible::after{
    opacity:0 !important;
    visibility:hidden !important;
  }
}

@keyframes mxFlagQuietWave{
  0%,100%{
    transform:
      perspective(180px)
      translateX(-.18%)
      scale(1.035)
      rotateY(-.65deg)
      skewY(-.12deg);
  }
  50%{
    transform:
      perspective(180px)
      translateX(.22%)
      scale(1.045)
      rotateY(.75deg)
      skewY(.16deg);
  }
}

@media (max-width:760px){
  #lang-switch.is-open #lang-rail .lang-pill{
    overflow:hidden !important;
    isolation:isolate;
  }

  #lang-switch.is-open #lang-rail .lang-flag{
    inset:3px;
    border-radius:12px;
  }

  #lang-switch.is-open #lang-rail .lang-pill-code{
    position:relative !important;
    z-index:2 !important;
    transition:
      opacity 90ms ease,
      transform 150ms cubic-bezier(.16,1,.3,1) !important;
  }

  /* The language name under EN/ES/... disappears too while pressing. */
  #lang-switch.is-open #lang-rail .lang-pill::after{
    transition:
      opacity 90ms ease,
      transform 150ms cubic-bezier(.16,1,.3,1) !important;
  }

  #lang-switch.is-open #lang-rail .lang-pill:active .lang-pill-code,
  #lang-switch.is-open #lang-rail .lang-pill.is-flag-preview .lang-pill-code,
  #lang-switch.is-open #lang-rail .lang-pill:active::after,
  #lang-switch.is-open #lang-rail .lang-pill.is-flag-preview::after{
    opacity:0 !important;
    transform:translateY(-2px) scale(.975) !important;
  }

  #lang-switch.is-open #lang-rail .lang-pill:active .lang-flag,
  #lang-switch.is-open #lang-rail .lang-pill.is-flag-preview .lang-flag{
    opacity:.94;
  }
}

@media (prefers-reduced-motion:reduce){
  .lang-pill:hover .lang-flag-svg,
  .lang-pill:focus-visible .lang-flag-svg,
  .lang-pill:active .lang-flag-svg,
  .lang-pill.is-flag-preview .lang-flag-svg{
    animation:none !important;
  }
}


/* ---------------------------------------------------------
   Multi-country flag sequences — premium glass wipe
   EN / ES / AR share the same two-layer transition system.
   --------------------------------------------------------- */
.lang-flag-sequence{
  position:absolute;
  inset:-5% -4%;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
  isolation:isolate;
}

.lang-flag-seq-frame{
  position:absolute;
  inset:0;
  opacity:0;
  border-radius:inherit;

  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;

  filter:
    saturate(.92)
    contrast(1)
    brightness(.86);

  transform:scale(1.018);
  transform-origin:center;
  will-change:opacity,transform,clip-path,filter;
}

.lang-flag-seq-frame::after{
  content:"";
  position:absolute;
  inset:-12% -38%;
  opacity:0;
  pointer-events:none;

  background:
    linear-gradient(
      108deg,
      transparent 32%,
      rgba(255,255,255,.015) 39%,
      rgba(255,255,255,.105) 49%,
      rgba(255,255,255,.028) 59%,
      transparent 68%
    );

  transform:translateX(-34%) skewX(-10deg);
  mix-blend-mode:screen;
}

.lang-flag-seq-frame.is-current{
  z-index:1;
  opacity:1;
  clip-path:inset(0 0 0 0 round 999px);
}

.lang-flag-seq-frame.is-entering{
  z-index:3;
  opacity:1;
  animation:
    mxFlagPremiumWipeIn 360ms cubic-bezier(.16,1,.3,1) both;
}

.lang-flag-seq-frame.is-leaving{
  z-index:2;
  opacity:1;
  animation:
    mxFlagPremiumWipeOut 360ms cubic-bezier(.16,1,.3,1) both;
}

.lang-flag-seq-frame.is-entering::after{
  animation:
    mxFlagPremiumSheen 460ms cubic-bezier(.16,1,.3,1) both;
}

.lang-pill:hover .lang-flag-seq-frame.is-current,
.lang-pill:focus-visible .lang-flag-seq-frame.is-current,
.lang-pill:active .lang-flag-seq-frame.is-current,
.lang-pill.is-flag-preview .lang-flag-seq-frame.is-current{
  animation:
    mxFlagPremiumIdle 2.9s ease-in-out infinite;
}

@keyframes mxFlagPremiumWipeIn{
  0%{
    opacity:.12;
    clip-path:inset(0 100% 0 0 round 999px);
    transform:translateX(1.2%) scale(1.042);
    filter:saturate(.88) contrast(.98) brightness(.76);
  }

  42%{
    opacity:1;
  }

  100%{
    opacity:1;
    clip-path:inset(0 0 0 0 round 999px);
    transform:translateX(0) scale(1.018);
    filter:saturate(.92) contrast(1) brightness(.86);
  }
}

@keyframes mxFlagPremiumWipeOut{
  0%{
    opacity:1;
    clip-path:inset(0 0 0 0 round 999px);
    transform:translateX(0) scale(1.018);
    filter:saturate(.92) contrast(1) brightness(.86);
  }

  70%{
    opacity:.72;
  }

  100%{
    opacity:0;
    clip-path:inset(0 0 0 100% round 999px);
    transform:translateX(-1%) scale(1.006);
    filter:saturate(.84) contrast(.97) brightness(.72);
  }
}

@keyframes mxFlagPremiumSheen{
  0%{
    opacity:0;
    transform:translateX(-34%) skewX(-10deg);
  }

  28%{
    opacity:.56;
  }

  100%{
    opacity:0;
    transform:translateX(36%) skewX(-10deg);
  }
}

@keyframes mxFlagPremiumIdle{
  0%,100%{
    transform:
      perspective(180px)
      translateX(-.10%)
      scale(1.018)
      rotateY(-.38deg)
      skewY(-.06deg);
  }

  50%{
    transform:
      perspective(180px)
      translateX(.14%)
      scale(1.026)
      rotateY(.46deg)
      skewY(.09deg);
  }
}

@media (prefers-reduced-motion:reduce){
  .lang-flag-seq-frame,
  .lang-flag-seq-frame.is-current,
  .lang-flag-seq-frame.is-entering,
  .lang-flag-seq-frame.is-leaving,
  .lang-flag-seq-frame::after{
    animation:none !important;
    transition:none !important;
  }

  .lang-flag-seq-frame.is-entering,
  .lang-flag-seq-frame.is-current{
    opacity:1 !important;
    clip-path:none !important;
    transform:none !important;
  }

  .lang-flag-seq-frame.is-leaving{
    opacity:0 !important;
  }
}