@import url('https://fonts.googleapis.com/css2?family=Geist:wght@200..700&display=swap');
/* Geist solo dentro de #maps-demos. No carga Bootstrap, Font Awesome ni AOS.
   Los tokens que estaban en :root viven aqui. html, body y h1 de la tienda no se tocan. */

     
    #maps-demos {
      --vacio: #000000;
      --superficie: #0B0C0F;        
      --superficie-2: #14161B;      
      --hueso: #FFFFFF;             
      --ceniza: #9A9A9A;            
      --niebla: #BDBDBD;            
      --tenue: #5E5E5E;             

      --naranja: #F1843B;           
      --ambar: #F49F67;             
      --azul: #1F6AFF;              
      --azul-claro: #5C93FF;
      --azul-niebla: #A6BFF2;
      --acento-texto: var(--naranja);    
      --ambar-texto: var(--ambar);

      --fuente: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
      --radio: 24px;
      --ease: cubic-bezier(.16, 1, .3, 1);
      --ease-io: cubic-bezier(.76, 0, .24, 1);
      --ancho: 1280px;
      --maps-ancla-top: 102px;  
      --margen: clamp(20px, 4vw, 48px);
      --seccion: clamp(96px, 12vw, 176px);
    }

     
    #maps-demos[data-tema="claro"] {
      --vacio: #F4F4F1;
      --superficie: #FFFFFF;
      --superficie-2: #E6E6E1;
      --hueso: #0B0C0F;
      --niebla: #34363B;
      --ceniza: #5A5C61;        
      --tenue: #8A8C90;
      --acento-texto: #B4500E;
      --ambar-texto: #B4500E;
      color-scheme: light;
    }
    #maps-demos[data-tema="claro"] { scrollbar-color: #C9C9C4 var(--vacio); }
    #maps-demos[data-tema="claro"] ::-webkit-scrollbar-thumb { background: #C9C9C4; }
    #maps-demos[data-tema="claro"] .fondo::before { background-image: radial-gradient(rgba(11, 12, 15, .09) 1px, transparent 1.4px); }
    #maps-demos[data-tema="claro"] .nav.con-fondo { background: rgba(244, 244, 241, .8); }
    #maps-demos[data-tema="claro"] .nav.abierta,
#maps-demos[data-tema="claro"] .nav-enlaces { background-color: transparent; }
    @media (max-width: 1100px){

      #maps-demos[data-tema="claro"] .nav.abierta,
#maps-demos[data-tema="claro"] .nav-enlaces { background: rgba(244, 244, 241, .96); }
      #maps-demos[data-tema="claro"] .nav-secciones { border-top-color: #DADAD5; }
    
}
    #maps-demos[data-tema="claro"] .demo { background: rgba(11, 12, 15, .035); }
    #maps-demos[data-tema="claro"] .demo.activa { background: var(--superficie); }
    #maps-demos[data-tema="claro"] .indice a { color: rgba(11, 12, 15, .45); }
    #maps-demos[data-tema="claro"] .indice a:hover,
#maps-demos[data-tema="claro"] .indice a.activa { color: var(--hueso); }
     
    #maps-demos[data-tema="claro"] .pie-logo { filter: invert(1) hue-rotate(180deg); }
    #maps-demos[data-tema="claro"].cursor-sobre .cursor-anillo > span { background-color: rgba(11, 12, 15, .06); border-color: rgba(11, 12, 15, .85); }
     
    #maps-demos[data-tema="claro"] .cubo--g .cara-sup { background: linear-gradient(135deg, #FFFFFF 0%, #EDEDE9 100%); box-shadow: inset 0 0 0 1px rgba(11, 12, 15, .06); }
    #maps-demos[data-tema="claro"] .cubo--g .cara-izq { background: linear-gradient(180deg, #DCDCD7 0%, #D0D0CA 100%); box-shadow: inset 0 0 0 1px rgba(11, 12, 15, .05); }
    #maps-demos[data-tema="claro"] .cubo--g .cara-fr { background: linear-gradient(180deg, #C4C4BE 0%, #B6B6B0 100%); box-shadow: inset 0 0 0 1px rgba(11, 12, 15, .05); }
    #maps-demos[data-tema="claro"] .cara img { filter: brightness(0); opacity: .72; }
     
    #maps-demos.tema-cambiando *,
#maps-demos.tema-cambiando *::before,
#maps-demos.tema-cambiando *::after {
      transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), fill .45s var(--ease) !important;
    }

    #maps-demos, #maps-demos *,
#maps-demos *::before,
#maps-demos *::after { box-sizing: border-box; }
    #maps-demos { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
    #maps-demos {
      margin: 0;
      letter-spacing: normal;
      background-color: var(--vacio);
      color: var(--hueso);
      font-family: var(--fuente);
      font-size: 1rem; font-weight: 350; line-height: 1.6;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      overflow-x: clip;
    }
    #maps-demos img,
#maps-demos svg,
#maps-demos canvas { display: block; }
    #maps-demos h1,
#maps-demos h2,
#maps-demos h3,
#maps-demos p,
#maps-demos ul { margin: 0; }
    #maps-demos ul { padding: 0; list-style: none; }
    #maps-demos a { color: inherit; text-decoration: none; }

     
    #maps-demos ::selection { background: var(--naranja); color: #000; }
    #maps-demos { scrollbar-color: #2A2C31 var(--vacio); }
    #maps-demos::-webkit-scrollbar { width: 10px; }
    #maps-demos::-webkit-scrollbar-track { background: var(--vacio); }
    #maps-demos::-webkit-scrollbar-thumb { background: #2A2C31; border-radius: 10px; border: 2px solid var(--vacio); }
    #maps-demos :focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; border-radius: 6px; }

    #maps-demos .skip-link {
      position: fixed; top: 12px; left: 50%; z-index: 3000;
      transform: translate(-50%, -160%);
      background: var(--naranja); color: #000; font-weight: 600;
      padding: .7rem 1.2rem; border-radius: 999px; text-decoration: none;
      transition: transform .3s var(--ease);
    }
    #maps-demos .skip-link:focus { transform: translate(-50%, 0); }

    #maps-demos .contenedor { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }

     
    #maps-demos .fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
    #maps-demos .fondo::before {
      content: ""; position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 85%);
              mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 85%);
    }
    #maps-demos .fondo > i { position: absolute; border-radius: 50%; will-change: transform; }
    #maps-demos .fondo-a {
      width: 70vmax; height: 70vmax; left: -25vmax; top: -30vmax;
      background: radial-gradient(circle, rgba(31, 106, 255, .13) 0%, rgba(31, 106, 255, 0) 65%);
      animation: fondo-deriva-a 34s ease-in-out infinite alternate;
    }
    #maps-demos .fondo-b {
      width: 55vmax; height: 55vmax; right: -22vmax; top: 30vh;
      background: radial-gradient(circle, rgba(241, 132, 59, .08) 0%, rgba(241, 132, 59, 0) 65%);
      animation: fondo-deriva-b 41s ease-in-out infinite alternate;
    }
    #maps-demos .fondo-c {
      width: 65vmax; height: 65vmax; left: 15vw; bottom: -40vmax;
      background: radial-gradient(circle, rgba(92, 147, 255, .09) 0%, rgba(92, 147, 255, 0) 65%);
      animation: fondo-deriva-c 47s ease-in-out infinite alternate;
    }
    @keyframes fondo-deriva-a { to { transform: translate(28vw, 22vh) scale(1.15); } }
    @keyframes fondo-deriva-b { to { transform: translate(-32vw, -18vh) scale(.9); } }
    @keyframes fondo-deriva-c { to { transform: translate(18vw, -26vh) scale(1.1); } }

     
    #maps-demos .cursor-punto,
#maps-demos .cursor-anillo {
      position: fixed; left: 0; top: 0; z-index: 2500; pointer-events: none;
      opacity: 0; transition: opacity .3s var(--ease); will-change: transform;
    }
    #maps-demos .cursor-punto { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--naranja); }
    #maps-demos .cursor-anillo { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
    #maps-demos .cursor-anillo > span {
      display: block; width: 100%; height: 100%; border-radius: 50%;
      border: 1px solid rgba(241, 132, 59, .55);
      transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
    }
    #maps-demos.cursor-visible .cursor-punto,
#maps-demos.cursor-visible .cursor-anillo { opacity: 1; }
     
    #maps-demos.cursor-sobre .cursor-anillo > span { transform: scale(1.7); background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .9); }
    #maps-demos.cursor-sobre .cursor-punto { opacity: 0; }
    #maps-demos.cursor-presion .cursor-anillo > span { transform: scale(.75); }
    @media (hover: none), (pointer: coarse){
 #maps-demos .cursor-punto,
#maps-demos .cursor-anillo { display: none; } 
}

     
    #maps-demos .con-halo { position: relative; isolation: isolate; overflow: hidden; }
    #maps-demos .torre-escena {
      --s: clamp(56px, 6.4vw, 100px);
      position: absolute; z-index: -1; pointer-events: none;
      top: 50%; right: max(var(--margen), calc((100vw - var(--ancho)) / 2));
      width: calc(var(--s) * 5.2); height: calc(var(--s) * 6.2);
      transform: translateY(-50%);
    }
    #maps-demos .torre {
      position: absolute; left: 50%; top: 66%;
      width: calc(var(--s) * 2); height: calc(var(--s) * 2);
      margin: calc(var(--s) * -1) 0 0 calc(var(--s) * -1);
      transform-style: preserve-3d;
      transform: rotateX(58deg) rotateZ(-45deg);
    }
    #maps-demos .cubo,
#maps-demos .cubo-in { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); transform-style: preserve-3d; }
    #maps-demos .cara { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; }
    #maps-demos .cara-sup { transform: translateZ(var(--s)); }
    #maps-demos .cara-fr { transform-origin: 50% 100%; transform: rotateX(-90deg); }
    #maps-demos .cara-izq { transform-origin: 0 50%; transform: rotateY(-90deg); }
     
    #maps-demos .cubo--g .cara-sup { background: linear-gradient(135deg, #3A3D45 0%, #2B2E35 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
    #maps-demos .cubo--g .cara-izq { background: linear-gradient(180deg, #2A2D34 0%, #202228 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
    #maps-demos .cubo--g .cara-fr { background: linear-gradient(180deg, #1A1C21 0%, #121317 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
    #maps-demos .cubo--n .cara-sup { background: #F49F67; }
    #maps-demos .cubo--n .cara-izq { background: #F1843B; }
    #maps-demos .cubo--n .cara-fr { background: #C8662A; }
    #maps-demos .cubo--a .cara-sup { background: #7FA8FF; }
    #maps-demos .cubo--a .cara-izq { background: #1F6AFF; }
    #maps-demos .cubo--a .cara-fr { background: #1550C4; }
    #maps-demos .cara img { width: 66%; height: 34%; object-fit: contain; filter: brightness(0) invert(1); opacity: .82; }

     
    #maps-demos .construir .cubo-in {
      animation:
        torre-aparece .01s linear calc(var(--n) * 110ms) both,
        torre-cae .75s cubic-bezier(.3, 1.35, .55, 1) calc(var(--n) * 110ms) both;
    }
    #maps-demos .construir .cubo--ciclo .cubo-in {
      animation:
        torre-aparece .01s linear calc(var(--n) * 110ms) both,
        torre-cae .75s cubic-bezier(.3, 1.35, .55, 1) calc(var(--n) * 110ms) both,
        torre-coloca 7s ease-in-out calc(var(--n) * 110ms + 2.5s) infinite;
    }
    #maps-demos .construir .cubo--flota .cubo-in {
      animation:
        torre-aparece .01s linear calc(var(--n) * 110ms) both,
        torre-cae .75s cubic-bezier(.3, 1.35, .55, 1) calc(var(--n) * 110ms) both,
        torre-flota 3.6s ease-in-out calc(var(--n) * 110ms + .75s) infinite alternate;
    }
     
    #maps-demos .completa .cubo--ciclo .cubo-in { animation: torre-coloca 7s ease-in-out 1s infinite; }
    #maps-demos .completa .cubo--flota .cubo-in { animation: torre-flota 3.6s ease-in-out infinite alternate; }
    @keyframes torre-flota { from { transform: none; } to { transform: translate3d(0, 0, calc(var(--s) * .45)) rotateZ(12deg); } }
    @keyframes torre-aparece { from { visibility: hidden; } to { visibility: visible; } }
    @keyframes torre-cae { from { transform: translate3d(0, 0, calc(var(--s) * 6)); } to { transform: none; } }
    @keyframes torre-coloca {
      0%, 48% { transform: none; }
      60%, 70% { transform: translate3d(0, 0, calc(var(--s) * 2.2)); }
      84% { transform: translate3d(0, 0, calc(var(--s) * -.05)); }
      90%, 100% { transform: none; }
    }
    #maps-demos .con-halo.pausado .torre-escena * { animation-play-state: paused; }

    @media (max-width: 860px){

       
      #maps-demos .hero .torre-escena {
        --s: 50px;
        position: relative; top: auto; right: auto; transform: none;
        margin: 76px auto -36px; height: calc(var(--s) * 5.6);
      }
      #maps-demos .hero { padding-top: 0; }
      #maps-demos .cierre .torre-escena { display: none; }
    
}

     
    #maps-demos .pildora {
      display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
      min-height: 48px; padding: 0 1.6rem;
      background: var(--naranja); color: #000;
      border: 0; border-radius: 999px;
      font: 600 .8125rem/1 var(--fuente); letter-spacing: .06em; text-transform: uppercase;
      text-decoration: none; white-space: nowrap; cursor: pointer;
      transition: background-color .35s var(--ease), transform .35s var(--ease);
    }
    #maps-demos .pildora:hover { background: var(--ambar); }
     
    #maps-demos .pildora { position: relative; overflow: hidden; isolation: isolate; }
    #maps-demos .pildora::before {
      content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 45%; z-index: -1;
      background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%);
      transform: translateX(-160%) skewX(-18deg);
      pointer-events: none;
    }
    #maps-demos .pildora:hover::before,
#maps-demos .pildora:focus-visible::before {
      transform: translateX(330%) skewX(-18deg);
      transition: transform .9s cubic-bezier(.25, .6, .3, 1);
    }
    @media (prefers-reduced-motion: reduce){
 #maps-demos .pildora::before { display: none; } 
}
    #maps-demos .pildora:active { transform: scale(.97); }
    #maps-demos .pildora svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
    #maps-demos .pildora:hover svg { transform: translate(2px, -2px); }
    #maps-demos .pildora--grande { min-height: 58px; padding: 0 2.1rem; font-size: .875rem; }

    #maps-demos .fantasma {
      display: inline-flex; align-items: center; gap: .55rem;
      min-height: 48px; padding: 0 .25rem;
      color: var(--hueso); text-decoration: none;
      font: 500 .8125rem/1 var(--fuente); letter-spacing: .06em; text-transform: uppercase;
      transition: color .3s var(--ease);
    }
    #maps-demos .fantasma span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .45s var(--ease); }
    #maps-demos .fantasma:hover { color: var(--ambar-texto); }
    #maps-demos .fantasma:hover span { background-size: 100% 1px; }
    #maps-demos .fantasma svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
    #maps-demos .fantasma:hover svg { transform: translate(2px, -2px); }

     
    #maps-demos .nav {
       
      position: sticky;
      top: var(--maps-ancla-top);
      z-index: 30;
      display: block;
      width: 100%;
      padding: 0;
      margin: 0 0 -76px;
      list-style: none;
      flex-wrap: nowrap;
      transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease);
    }
     
    #maps-demos .nav.con-fondo { background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
    #maps-demos .nav-fila { display: flex; align-items: center; gap: 2rem; min-height: 76px; }
    #maps-demos .nav-enlaces { display: flex; align-items: center; gap: 2.25rem; margin-left: auto; }
    #maps-demos .nav-enlace {
      font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
      color: var(--niebla); text-decoration: none; transition: color .3s var(--ease);
    }
    #maps-demos .nav-enlace:hover { color: var(--hueso); }
    #maps-demos .nav-boton { display: none; }
    #maps-demos .tema-boton {
      flex: none; display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; margin-left: .25rem; padding: 0;
      order: 3;    
      border: 0; border-radius: 999px; cursor: pointer;
      background: var(--superficie-2); color: var(--hueso);
      transition: background-color .35s var(--ease), color .35s var(--ease);
    }
    #maps-demos .tema-boton:hover { color: var(--ambar-texto); }
    #maps-demos .tema-boton svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
    #maps-demos .tema-boton:hover svg { transform: rotate(-20deg); }
    #maps-demos .tema-boton .icono-sol { display: none; }
    #maps-demos[data-tema="claro"] .tema-boton .icono-sol { display: block; }
    #maps-demos[data-tema="claro"] .tema-boton .icono-luna { display: none; }
    #maps-demos .nav-secciones { display: none; }

    @media (max-width: 1100px){

      #maps-demos .nav-fila { min-height: 64px; }
      #maps-demos .nav { margin-bottom: -64px; }
      #maps-demos .nav-boton {
        display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
        min-height: 44px; padding: 0 1rem; border-radius: 999px;
        background: var(--superficie-2); color: var(--hueso); border: 0; cursor: pointer;
        font: 500 .75rem/1 var(--fuente); letter-spacing: .08em; text-transform: uppercase;
      }
      #maps-demos .nav-boton i { position: relative; width: 14px; height: 8px; }
      #maps-demos .nav-boton i::before,
#maps-demos .nav-boton i::after {
        content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
        transition: transform .35s var(--ease), top .35s var(--ease);
      }
      #maps-demos .nav-boton i::before { top: 0; }
      #maps-demos .nav-boton i::after { top: 6.5px; }
      #maps-demos .nav-boton[aria-expanded="true"] i::before { top: 3.25px; transform: rotate(45deg); }
      #maps-demos .nav-boton[aria-expanded="true"] i::after { top: 3.25px; transform: rotate(-45deg); }
      #maps-demos .nav-enlaces {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        padding: .5rem var(--margen) 1.75rem; margin: 0;
        background: rgba(0, 0, 0, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
      }
      #maps-demos .nav.abierta { background: rgba(0, 0, 0, .94); }
      #maps-demos .nav.abierta .nav-enlaces { opacity: 1; visibility: visible; transform: none; }
      #maps-demos .nav-enlaces .nav-enlace { display: block; padding: .95rem 0; font-size: .9375rem; }
      #maps-demos .nav-enlaces .pildora { margin-top: 1rem; }
      #maps-demos .nav-secciones { display: flex; flex-direction: column; width: 100%; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid #1C1E23; }
      #maps-demos .nav-secciones a { padding: .7rem 0; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ceniza); text-decoration: none; }
    
}

     
    #maps-demos .hero {
      min-height: 100svh;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding-top: 120px; padding-bottom: clamp(36px, 5vw, 64px);
    }
    #maps-demos .hero-copia { max-width: 760px; }
    #maps-demos .hero h1 {
       
      font-size: clamp(2.75rem, min(5.6vw, 10.5vh), 5.5rem);
      font-weight: 400; line-height: 1.02; letter-spacing: -0.04em;
      text-wrap: balance;
    }
    #maps-demos .hero h1 em { font-style: normal; color: var(--acento-texto); }
    #maps-demos .titulo em { font-style: normal; color: var(--acento-texto); }
    #maps-demos .hero-desc {
      margin-top: 2rem; max-width: 36rem;
      font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); font-weight: 300; line-height: 1.6;
      color: var(--niebla);
    }
    #maps-demos .hero-nota { margin-top: 1rem; font-size: .875rem; color: var(--ceniza); }
    #maps-demos .hero-nota span { color: var(--ambar-texto); font-weight: 500; }
    #maps-demos .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.5rem; }

    #maps-demos .hero-pie {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem;
      margin-top: clamp(48px, 7vh, 88px);
    }
    #maps-demos .estado {
      display: inline-flex; align-items: center; gap: .7rem;
      font-size: .875rem; font-weight: 400;
      color: var(--niebla);
    }
    #maps-demos .pulso { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); flex: none; }
    #maps-demos .pulso::after {
      content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--naranja);
      animation: pulso 2.4s var(--ease) infinite;
    }
    @keyframes pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }

    #maps-demos .cifras { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(28px, 4.5vw, 72px); }
    #maps-demos .cifra-valor {
      display: block; font-size: clamp(2.25rem, 4vw, 3.75rem); font-weight: 300;
      line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
    }
    #maps-demos .cifra-etiqueta {
      display: block; margin-top: .6rem;
      font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
      color: var(--ceniza);
    }

     
    #maps-demos.espera .entrada { opacity: 0; transform: translateY(28px); filter: blur(8px); }
    #maps-demos.listo .entrada {
      opacity: 1; transform: none; filter: none;
      transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease);
      transition-delay: calc(var(--i, 0) * 90ms);
    }

     
    #maps-demos .seccion { padding-block: var(--seccion); }
    #maps-demos .riel-grid { display: grid; grid-template-columns: minmax(150px, 2fr) 10fr; gap: 0 clamp(24px, 4vw, 64px); }
    #maps-demos .riel-grid > :not(.riel) { grid-column: 2; }    
     
    #maps-demos .riel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    #maps-demos .progreso {
      position: fixed; left: 0; top: 50%; z-index: 90;
      width: var(--margen); display: flex; justify-content: center;
      transform: translateY(-50%);
      opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
    }
    #maps-demos .progreso.visible { opacity: 1; visibility: visible; }
    #maps-demos .progreso ol { display: flex; flex-direction: column; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
    #maps-demos .progreso a {
      display: flex; align-items: center; gap: .7rem;
      writing-mode: vertical-rl; transform: rotate(180deg);
      font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
      color: var(--ceniza); text-decoration: none; transition: color .4s var(--ease);
    }
    #maps-demos .progreso a::after { content: ""; width: 1px; height: 18px; background: currentColor; opacity: .5; }
    #maps-demos .progreso a:hover { color: var(--niebla); }
    #maps-demos .progreso a.activa { color: var(--hueso); }
    #maps-demos .progreso a.activa::after { background: var(--naranja); opacity: 1; height: 28px; }
    @media (max-width: 1100px){
 #maps-demos .progreso { display: none; } 
}
    #maps-demos .titulo {
      font-size: clamp(2.1rem, 4.6vw, 4.25rem);
      font-weight: 400; line-height: 1.04; letter-spacing: -0.035em;
      text-wrap: balance; max-width: 15ch;
    }
    #maps-demos .entrada-desc {
      margin-top: 1.75rem; max-width: 38rem;
      font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); font-weight: 300; line-height: 1.65;
      color: var(--niebla);
    }

     
    #maps-demos .triada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); margin-top: clamp(64px, 8vw, 112px); }
    #maps-demos .triada h3 {
      display: flex; gap: .85rem; align-items: baseline;
      font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em;
    }
    #maps-demos .triada h3 svg { flex: none; width: 12px; height: 12px; color: var(--acento-texto); transform: translateY(-1px); }
    #maps-demos .triada p { margin-top: 1rem; color: var(--ceniza); line-height: 1.7; }

     
    #maps-demos .pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); margin-top: clamp(64px, 8vw, 112px); counter-reset: paso; }
     
    #maps-demos .paso-num {
      position: relative; display: flex; align-items: center; gap: 1.25rem;
      font-size: clamp(4.5rem, 8vw, 7.5rem); font-weight: 300; line-height: .9; letter-spacing: -0.04em;
    }
    #maps-demos .paso-num b {
      font-weight: inherit;
      background: linear-gradient(180deg, rgba(241, 132, 59, .28) 0%, rgba(241, 132, 59, 0) 85%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent; -webkit-text-stroke: 1.5px var(--acento-texto);
      transition: color .6s var(--ease);
    }
    #maps-demos .paso-num::after {
      content: ""; flex: 1; height: 1px; transform: translateY(.18em);
      background: linear-gradient(90deg, var(--acento-texto) 0%, rgba(241, 132, 59, 0) 100%);
      opacity: .55;
    }
    #maps-demos .paso:last-child .paso-num::after { display: none; }
    #maps-demos .paso:hover .paso-num b { color: var(--acento-texto); }
    #maps-demos .paso h3 { margin-top: 1.75rem; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; }
    #maps-demos .paso p { margin-top: 1rem; color: var(--ceniza); line-height: 1.7; }

     
    #maps-demos .catalogo { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(64px, 8vw, 104px); }
    #maps-demos .demos { display: flex; flex-direction: column; gap: 12px; }

    #maps-demos .demo {
      position: relative;
      padding: clamp(24px, 3vw, 40px);
      background: rgba(255, 255, 255, .025);
      border-radius: var(--radio);
      transition: background-color .5s var(--ease);
    }
    #maps-demos .demo.activa { background: var(--superficie); }
     
    #maps-demos .demo::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(241, 132, 59, .09), transparent 60%);
      opacity: 0; transition: opacity .5s var(--ease);
    }
    #maps-demos .demo:hover::before { opacity: 1; }
    #maps-demos .demo > * { position: relative; }

    #maps-demos .demo-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
    #maps-demos .marca-logo {
      width: auto; max-width: 170px; height: 26px; object-fit: contain; object-position: left center;
      filter: brightness(0) invert(1); opacity: .78; transition: opacity .5s var(--ease);    
    }
    #maps-demos .demo.activa .marca-logo { opacity: 1; }
     
    #maps-demos[data-tema="claro"] .marca-logo { filter: none; opacity: 1; }
     
    #maps-demos[data-tema="claro"] .demo[data-brand="sophos"] .marca-logo { height: 30px; }
    #maps-demos[data-tema="claro"] .demo[data-brand="stellarcyber"] .marca-logo { height: 34px; }
    #maps-demos[data-tema="claro"] .demo[data-brand="trendai"] .marca-logo { height: 30px; }
    #maps-demos[data-tema="claro"] .demo[data-brand="txone"] .marca-logo { height: 32px; }
    #maps-demos .demo[data-brand="kaspersky"] .marca-logo { height: 24px; }
    #maps-demos .demo[data-brand="kriptos"] .marca-logo { height: 27px; }
    #maps-demos .demo[data-brand="picus"] .marca-logo { height: 28px; }
    #maps-demos .demo[data-brand="sentinelone"] .marca-logo { height: 26px; }
    #maps-demos .demo[data-brand="trellix"] .marca-logo { height: 24px; }
    #maps-demos .demo[data-brand="forcepoint"] .marca-logo { height: 25px; }
     
    #maps-demos .demo[data-brand="acronis"] .marca-logo { height: 26px; }
    #maps-demos .demo[data-brand="checkpoint"] .marca-logo { height: 26px; }
    #maps-demos .demo[data-brand="claroty"] .marca-logo { height: 24px; }
    #maps-demos .demo[data-brand="cloudflare"] .marca-logo { height: 32px; }
    #maps-demos .demo[data-brand="darktrace"] .marca-logo { height: 20px; }
    #maps-demos .demo[data-brand="eset"] .marca-logo { height: 30px; }
    #maps-demos .demo[data-brand="fortinet"] .marca-logo { height: 19px; }
    #maps-demos .demo[data-brand="infoblox"] .marca-logo { height: 28px; }
    #maps-demos .demo[data-brand="netscout"] .marca-logo { height: 22px; }
    #maps-demos .demo[data-brand="nozomi"] .marca-logo { height: 32px; }
    #maps-demos .demo[data-brand="proofpoint"] .marca-logo { height: 28px; }
    #maps-demos .demo[data-brand="sonicwall"] .marca-logo { height: 25px; }
    #maps-demos .demo[data-brand="sophos"] .marca-logo { height: 18px; }
    #maps-demos .demo[data-brand="stellarcyber"] .marca-logo { height: 36px; }
    #maps-demos .demo[data-brand="trendai"] .marca-logo { height: 28px; }
    #maps-demos .demo[data-brand="txone"] .marca-logo { height: 28px; }
    #maps-demos .demo[data-brand="vicarius"] .marca-logo { height: 34px; }
    #maps-demos .demo[data-brand="zscaler"] .marca-logo { height: 28px; }

    #maps-demos .demo-categoria { font-size: .8125rem; font-weight: 400; color: var(--ceniza); }
     
    @font-face {
      font-family: 'Trade Gothic Bold 2';
      font-weight: 700; font-style: normal; font-display: swap;
      src: local('Trade Gothic LT Std Bold No. 2'), local('TradeGothicLTStd-Bd2'),
           local('Trade Gothic Bold No. 2'), local('TradeGothic-BoldTwo'), local('Trade Gothic Next LT Pro Bold');
            
    }
    #maps-demos .demo h3 {
      margin-top: clamp(28px, 3vw, 44px);
      font-family: 'Trade Gothic Bold 2', var(--fuente);
      font-size: clamp(1.5rem, 2.3vw, 2.125rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em;
      text-wrap: balance;
    }
    #maps-demos .demo-cuerpo { margin-top: 1.1rem; color: var(--ceniza); line-height: 1.7; max-width: 62ch; }
    #maps-demos .demo-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 1.75rem; }
    #maps-demos .etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; }
    #maps-demos .etiqueta {
      padding: .45rem .8rem; border-radius: 999px;
      background: var(--superficie-2); color: var(--niebla);
      font-size: .75rem; font-weight: 450; line-height: 1;
    }

     
    #maps-demos .indice { position: sticky; top: 22vh; align-self: start; isolation: isolate; }
    #maps-demos .indice-lista { display: flex; flex-direction: column; gap: .15rem; }
    #maps-demos .indice a {
      display: inline-flex; align-items: center; gap: .9rem;
      font-size: clamp(1.75rem, 2.9vw, 2.75rem); font-weight: 300; line-height: 1.18; letter-spacing: -0.035em;
      color: rgba(255, 255, 255, .34); text-decoration: none;
      transition: color .45s var(--ease), transform .45s var(--ease);
    }
    #maps-demos .indice a::before {
      content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--naranja);
      transform: scale(0); transition: transform .45s var(--ease);
    }
    #maps-demos .indice a:hover,
#maps-demos .indice a.activa { color: var(--hueso); }
     
    #maps-demos .indice--denso .indice-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem 1.5rem; }
    #maps-demos .indice--denso a { font-size: clamp(1rem, 1.3vw, 1.3rem); gap: .6rem; letter-spacing: -0.02em; }
    #maps-demos .indice--denso a::before { width: 7px; height: 7px; }
    #maps-demos .indice a.activa::before { transform: scale(1); }

     
    #maps-demos .expansion-lista { margin-top: clamp(56px, 7vw, 96px); display: flex; flex-direction: column; gap: clamp(36px, 4vw, 52px); max-width: 34rem; }
    #maps-demos .expansion-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 0 1.25rem; }
    #maps-demos .expansion-lista li > :not(svg) { grid-column: 2; }
    #maps-demos .expansion-lista svg { width: 22px; height: 22px; color: var(--ambar-texto); grid-row: 1 / span 2; }
    #maps-demos .expansion-lista strong { display: block; margin-top: -.2rem; font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }
    #maps-demos .expansion-lista span { display: block; margin-top: .9rem; color: var(--ceniza); line-height: 1.7; }
    #maps-demos .expansion-cierre { margin-top: clamp(56px, 7vw, 96px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
    #maps-demos .expansion-cierre p { max-width: 34rem; font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 300; line-height: 1.5; color: var(--niebla); }

     
    #maps-demos .cierre { padding-block: clamp(120px, 16vw, 220px); }
    #maps-demos .cierre h2 {
      font-size: clamp(2.5rem, 5.4vw, 5.25rem);
      font-weight: 400; line-height: 1.02; letter-spacing: -0.04em;
      max-width: 11.5ch; text-wrap: balance;
    }
    #maps-demos .cierre h2 em { font-style: normal; color: var(--acento-texto); }
    #maps-demos .cierre p { margin-top: 2rem; max-width: 40rem; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); font-weight: 300; line-height: 1.65; color: var(--niebla); }
    #maps-demos .cierre .pildora { margin-top: 2.75rem; }

     
    #maps-demos .pie { padding-block: clamp(56px, 7vw, 88px) 32px; }
    #maps-demos .pie-grid { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 40px; }
    #maps-demos .pie-logo { height: 32px; width: auto; }
    #maps-demos .pie-desc { margin-top: 1.25rem; color: var(--ceniza); font-size: .875rem; }
    #maps-demos .pie-titulo { display: block; margin-bottom: 1.1rem; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-texto); }
    #maps-demos .pie-lista { display: flex; flex-direction: column; gap: .7rem; font-size: .9375rem; }
    #maps-demos .pie-lista a { color: var(--niebla); text-decoration: none; transition: color .3s var(--ease); }
    #maps-demos .pie-lista a:hover { color: var(--ambar-texto); }
    #maps-demos .pie-lista li { display: flex; align-items: center; gap: .65rem; color: var(--niebla); }
    #maps-demos .pie-lista svg { width: 15px; height: 15px; color: var(--ceniza); flex: none; }
    #maps-demos .pie-lista a { display: inline-flex; align-items: center; gap: .65rem; }
    #maps-demos .pie-copy { margin-top: clamp(48px, 6vw, 72px); color: var(--ceniza); font-size: .8125rem; }

     
    #maps-demos .intro {
      position: absolute; inset: 0; z-index: 80;
      display: flex; align-items: center; justify-content: center;
      background-color: #000;    
      clip-path: inset(0 0 0 0);
      animation: intro-telon .62s var(--ease-io) 1.08s forwards;
    }
    #maps-demos .intro-marca { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; animation: intro-salida .5s var(--ease-io) 1.08s forwards; }
    #maps-demos .intro-logo { height: 56px; width: auto; opacity: 0; filter: blur(10px); transform: translateY(14px) scale(.96); animation: intro-logo .7s var(--ease) .1s forwards; }
    #maps-demos .intro-linea {
      display: block; width: 132px; height: 2px; border-radius: 2px;
      background: linear-gradient(90deg, transparent, var(--naranja) 30%, var(--ambar) 70%, transparent);
      transform: scaleX(0); animation: intro-linea .6s var(--ease) .42s forwards;
    }
    @keyframes intro-logo { to { opacity: 1; filter: blur(0); transform: none; } }
    @keyframes intro-linea { to { transform: scaleX(1); } }
    @keyframes intro-salida { to { opacity: 0; transform: translateY(-28px); } }
    @keyframes intro-telon { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
    #maps-demos.intro-activa { overflow: hidden; }

     
    @media (max-width: 1080px){

      #maps-demos .catalogo { grid-template-columns: 1fr; }
      #maps-demos .indice { display: none; }
      #maps-demos .hero-pie { grid-template-columns: 1fr; }
    
}
    @media (max-width: 860px){

      #maps-demos .riel-grid { grid-template-columns: 1fr; }
      #maps-demos .riel-grid > :not(.riel) { grid-column: 1; }
      #maps-demos .triada,
#maps-demos .pasos { grid-template-columns: 1fr; gap: 48px; }
      #maps-demos .pie-grid { grid-template-columns: 1fr 1fr; }
      #maps-demos .pie-grid > :first-child { grid-column: 1 / -1; }
    
}
    @media (max-width: 575.98px){

      #maps-demos .hero { padding-top: 112px; }
      #maps-demos .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
      #maps-demos .acciones .pildora { width: 100%; }
      #maps-demos .demo-pie .pildora { width: 100%; }
      #maps-demos .intro-logo { height: 44px; }
      #maps-demos .intro-linea { width: 104px; }
      #maps-demos .pie-grid { grid-template-columns: 1fr; }
    
}

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

      #maps-demos .intro { display: none; }
      #maps-demos { scroll-behavior: auto; }
      #maps-demos, #maps-demos *,
#maps-demos *::before,
#maps-demos *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    
}
  
/* La tienda (app.css) pinta h1–h6 en #212529. Esta regla gana solo dentro de la landing. */
#maps-demos h1,
#maps-demos h2,
#maps-demos h3,
#maps-demos h4,
#maps-demos h5,
#maps-demos h6 {
  color: var(--hueso);
}
#maps-demos {
  position: relative;
  isolation: isolate;
}
#maps-demos section,
#maps-demos [id] {
  scroll-margin-top: calc(var(--maps-ancla-top) + 5.5rem);
}
#maps-demos .nav-boton i {
  font-family: inherit;
  font-style: normal;
}

#maps-demos #maps-ancla {
  display: block !important;
  position: relative !important;
  top: auto !important;
  margin: 0 0 1rem !important;
}

#maps-demos .nav-boton,
#maps-demos .nav-enlaces {
  display: none !important;
}

#maps-demos .nav-fila {
  min-height: 0;
  justify-content: flex-end;
  padding: .75rem var(--margen);
}

#maps-demos .progreso {
  display: none !important;
}

#maps-demos .indice {
  margin-top: 48px;
  top: calc(var(--maps-ancla-top) + 82px);
}

#maps-demos .intro {
  background-color: var(--vacio);
}