/* Naranja = delta: cambio o acción. Nunca adorno.
             Contrastes verificados sobre blanco:
               #888 3.5:1 (retirado de texto pequeño) · #555 7.5:1 · #333 12.6:1
               #C15F00 3.7:1 solo marca · #1A1A1A sobre #E8740C 5.7:1 */
          :root{
            --delta:#E8740C; --delta-on-light:#C15F00; --delta-on-dark:#F5933A;
            --frame:#1A1A1A; --evidence:#FFFFFF;
            --meta-700:#555; --meta-500:#888;
            --meta-200:#E5E5E5; --meta-100:#F5F5F5;
            --measure:60ch; --wrap:1200px; --pad-sec:clamp(5rem,9vw,8.5rem);
          }
          html{scroll-padding-top:104px}
          @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
          *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
          body{font-family:Poppins,system-ui,sans-serif;color:var(--frame);
               background:var(--evidence);line-height:1.7;-webkit-font-smoothing:antialiased}
          img{max-width:100%;height:auto;display:block}
          a{color:var(--frame);text-decoration:none}
          a:hover{color:var(--delta-on-light)}
          h1,h2,h3{text-wrap:balance;line-height:1.15;letter-spacing:-.02em;font-weight:800}
          p{text-wrap:pretty}
          :focus-visible{outline:2px solid var(--delta-on-light);outline-offset:3px}
          .nav :focus-visible,.band :focus-visible,.ft :focus-visible{outline-color:var(--delta-on-dark)}
          .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
          .sec{padding:var(--pad-sec) 0}
          /* El caso cierra la sección Trabajo y ya aporta su propio relleno
             inferior: sin esto se apilaban tres rellenos seguidos. */
          #trabajo{padding-bottom:0}
          .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.16em;
                   text-transform:uppercase;color:var(--meta-700)}
          .lede{color:var(--meta-700);max-width:var(--measure)}

          /* Píldora flotante que se pliega a un círculo al bajar. La anchura
             desplegada la mide el JS: no se puede animar width:auto. */
          .nav{position:fixed;top:18px;left:50%;z-index:60;background:var(--frame);color:#fff;
               height:58px;border-radius:999px;overflow:hidden;
               box-shadow:0 14px 40px rgba(0,0,0,.28);
               transform:translateX(-50%);
               transition:width .55s cubic-bezier(.16,1,.3,1),
                          border-radius .4s cubic-bezier(.16,1,.3,1)}
          .nav.mini{width:58px!important;cursor:pointer}
          .nav-in{max-width:var(--wrap);margin:0 auto;padding:0 2.15rem;
                  height:58px;display:grid;grid-template-columns:auto auto auto;
                  align-items:center;gap:clamp(1.25rem,3vw,2.5rem);white-space:nowrap;
                  transition:opacity .3s ease}
          /* Se van los tres a la vez: nombre, enlaces y redes. */
          .nav-in>*{transition:opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1)}
          .nav.mini .nav-in{pointer-events:none;opacity:0}
          .nav.mini .nav-name{transform:translateX(-14px)}
          .nav.mini .nav-links{transform:translateY(-8px)}
          .nav.mini .nav-social{transform:translateX(14px)}
          .nav-mini{position:absolute;inset:0;margin:auto;width:58px;height:58px;
                    display:flex;align-items:center;justify-content:center;
                    background:none;border:0;color:#fff;cursor:pointer;opacity:0;
                    pointer-events:none;transition:opacity .3s ease .1s}
          .nav-mini svg{width:20px;height:20px}
          .nav.mini .nav-mini{opacity:1;pointer-events:auto}
          @media (prefers-reduced-motion:reduce){
            .nav,.nav-in,.nav-in>*,.nav-mini{transition:none}
          }
          .nav-name{justify-self:start}
          .nav-links{justify-self:center}
          .nav-social{justify-self:end;display:flex;align-items:center;gap:.5rem}
          .nav-name{font-weight:700;font-size:1rem;letter-spacing:-.01em;color:#fff}
          .nav-name:hover{color:#fff}
          .nav-links{display:flex;align-items:center;gap:2.25rem}
          .nav-links a{color:rgba(255,255,255,.75);font-size:.9rem;font-weight:500;padding:.25rem 0}
          .nav-links a:hover{color:var(--delta-on-dark)}
          .nav-links a.on{color:#fff;border-bottom:2px solid #fff}
          .nav-li{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
                  border:1px solid var(--meta-500);border-radius:50%;color:#fff}
          .nav-li:hover{background:#fff;color:var(--frame)}
          .nav-li svg{width:15px;height:15px}

          .hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
                gap:clamp(2rem,5vw,4.5rem);align-items:end;padding:clamp(6rem,10vw,9rem) 0 0}
          .hero-stage{position:relative;min-height:640px;display:flex;align-items:flex-end;justify-content:center}
          /* Suelo: un degradado, no una caja. La silueta emerge de él en vez
             de flotar, y el recorte de la foto deja de leerse como un corte. */
          .hero-stage::before{content:"";position:absolute;left:-6%;right:-6%;bottom:0;height:34%;z-index:1;
            background:linear-gradient(to bottom,rgba(229,229,229,0) 0%,rgba(229,229,229,.55) 60%,rgba(229,229,229,.9) 100%);
            pointer-events:none}
          /* Sombra de contacto donde la figura toca el suelo */
          .hero-stage::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
            width:58%;height:34px;z-index:1;pointer-events:none;
            background:radial-gradient(ellipse at center,rgba(26,26,26,.19) 0%,rgba(26,26,26,.07) 45%,rgba(26,26,26,0) 72%)}
          /* Zorro de fondo al 4%: por delante del suelo degradado (z1) y por
             detrás del retrato (z3), para que no se lo trague el degradado. */
          .hero-panel{position:absolute;inset:0;background:none;z-index:2;pointer-events:none}
          .hero-panel::after{content:"";position:absolute;left:-8%;top:1%;width:80%;height:78%;
            background-image:url("assets/zorro.webp");background-size:contain;
            background-position:left top;background-repeat:no-repeat;opacity:.04}
          .hero-photo{position:relative;z-index:3;max-height:740px;width:auto;object-fit:contain;
                      -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.35) 95%,transparent 100%);
                      mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.35) 95%,transparent 100%)}
          .hero-copy{padding-bottom:clamp(2rem,6vw,4.5rem)}
          .hero-name{font-size:clamp(3rem,6.5vw,5.2rem);margin:.7rem 0 1.4rem}
          .hero-rule{width:56px;height:3px;background:var(--frame);margin-bottom:1.6rem}
          .hero-desc{font-size:clamp(1rem,1.25vw,1.1rem);color:var(--meta-700);
                     max-width:var(--measure);margin-bottom:2.4rem}
          .hero-desc strong{color:var(--frame);font-weight:600}

          .cta{display:inline-flex;align-items:center;gap:.85rem;background:var(--delta);
               color:var(--frame);font-weight:600;font-size:.95rem;padding:1.05rem 1.9rem;
               border:0;border-radius:999px;cursor:pointer;font-family:inherit;
               transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
          .cta:hover{color:var(--frame);transform:translateY(-2px);box-shadow:0 12px 30px rgba(232,116,12,.32)}
          .cta svg{width:17px;height:17px}
          .btn2{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
                background:transparent;color:var(--frame);border:1.5px solid var(--frame);
                font-weight:600;font-size:.92rem;padding:.85rem 1.6rem;border-radius:999px;
                cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
          .btn2:hover{background:var(--frame);color:#fff}

          .stats{border-top:1px solid var(--meta-200);border-bottom:1px solid var(--meta-200);
                 padding:clamp(3rem,5vw,4.5rem) 0;margin-top:clamp(3rem,6vw,5rem)}
          .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center}
          .stat-n{font-size:clamp(2.6rem,5vw,4rem);font-weight:800;line-height:1;
                  letter-spacing:-.03em;color:var(--delta);font-variant-numeric:tabular-nums}
          .stat-l{font-size:.85rem;color:var(--meta-700);margin-top:.7rem}

          .band{background:var(--frame);color:#fff}
          .band .eyebrow{color:rgba(255,255,255,.62)}
          /* Solo la etiqueta de sección: más grande y casi blanca. La del
             servicio («Páginas web») se queda como estaba. */
          .band > .wrap > .eyebrow{color:rgba(255,255,255,.92);font-size:.92rem}

          /* ════ Servicios: escaparate con prueba, no con telemetría inventada ════ */
          .svc-head{display:flex;align-items:center;justify-content:space-between;
                    flex-wrap:wrap;gap:1.5rem;margin-bottom:3rem}
          .svc-head .eyebrow{margin:0;color:rgba(255,255,255,.92)}
          .svc{display:grid;grid-template-columns:1.05fr 1fr;
               gap:clamp(2rem,4vw,4rem);align-items:center}
          .svc-stage{position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;
                     aspect-ratio:16/9;max-width:580px;margin:0 auto;width:100%}
          .svc-ring{position:absolute;inset:-16px;border-radius:14px;
                    border:1px dashed rgba(255,255,255,.16)}
          .svc-disc{position:absolute;inset:0;border-radius:10px;
                    border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
                    display:flex;align-items:center;justify-content:center}
          /* La captura NO se recorta a círculo: flota en su marco 16:9 sobre el
             disco, que se queda como órbita. Así se lee el trabajo entero. */
          /* Centrado por flexbox, NO por transform: la animación de entrada anima
             transform y borraba el translate(-50%,-50%), lo que empujaba el marco
             fuera del disco e invadía la columna de texto. Con flex no hay conflicto.
             Al 92% cabe siempre: un 16:9 inscrito en un círculo llega hasta 0.87·D. */
          .svc-media.con-video{width:100%;height:100%;border-radius:10px;overflow:hidden;
                    background:var(--frame);box-shadow:0 30px 64px rgba(0,0,0,.5)}
          .svc-media.con-video video,.svc-media.con-video img{width:100%;height:100%;object-fit:cover;display:block}
          .svc-media.sin-video{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
          .svc-word{font-size:clamp(1.6rem,4.4vw,3rem);font-weight:800;letter-spacing:-.03em;
                    line-height:1.05;text-align:center;padding:0 12%;
                    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34)}
          .svc-tag{position:absolute;bottom:-30px;z-index:3;left:50%;transform:translateX(-50%);
                   white-space:nowrap;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
                   color:rgba(255,255,255,.62);background:var(--frame);
                   border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.5rem 1.1rem}

          .svc-body h3{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;letter-spacing:-.025em;
                       line-height:1.08;margin:.5rem 0 1rem;color:#fff}
          .svc-body .eyebrow{color:rgba(255,255,255,.62)}
          .svc-desc{color:rgba(255,255,255,.72);font-size:clamp(.98rem,1.2vw,1.06rem);
                    line-height:1.7;max-width:46ch;margin-bottom:2rem}
          .svc-list{list-style:none;padding:0;margin:0 0 1.8rem;
                    border-top:1px solid rgba(255,255,255,.14)}
          .svc-list li{display:flex;align-items:baseline;gap:.9rem;padding:.85rem 0;
                       border-bottom:1px solid rgba(255,255,255,.14);
                       color:rgba(255,255,255,.86);font-size:.95rem}
          .svc-list li b{font-weight:600;color:#fff;min-width:0}
          .svc-list li em{font-style:normal;color:rgba(255,255,255,.55);font-size:.86rem;
                          margin-left:auto;white-space:nowrap;padding-left:1rem}
          .svc-prueba{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;
                      font-size:.92rem;color:var(--delta-on-dark);border-bottom:1px solid transparent;
                      transition:border-color .25s ease}
          .svc-prueba:hover{color:var(--delta-on-dark);border-bottom-color:var(--delta-on-dark)}

          /* Píldoras con relleno: dan el contraste que la composición necesita. */
          .svc-switch{display:flex;flex-direction:row;flex-wrap:wrap;gap:.4rem;
                      padding:.4rem;border-radius:999px;width:fit-content;
                      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
          .svc-pill{border:0;background:none;cursor:pointer;font-family:inherit;
                    padding:.75rem 1.4rem;border-radius:999px;text-align:center;
                    font-size:.9rem;font-weight:600;color:rgba(255,255,255,.6);
                    transition:color .25s ease,background .25s ease}
          .svc-pill:hover{color:#fff;background:rgba(255,255,255,.05)}
          .svc-pill.on{background:#fff;color:var(--frame)}
          @media (prefers-reduced-motion:no-preference){
            .svc-stage,.svc-media,.svc-media *{opacity:1!important}
          }
          @media (max-width:900px){
            .svc{grid-template-columns:minmax(0,1fr);gap:2.5rem}
            .svc-head{flex-direction:column;align-items:flex-start}
            .svc-tag,.svc-list li em{white-space:normal}
            .svc-list li{flex-wrap:wrap;gap:.2rem .9rem}
            .svc-list li em{margin-left:0;padding-left:0;flex-basis:100%}
            .svc-stage{max-width:100%}
            .svc-switch{flex-direction:row;flex-wrap:wrap;border-radius:20px;gap:.3rem;padding:.4rem;width:100%}
            .svc-pill{padding:.75rem 1.25rem;text-align:center;font-size:.9rem;flex:1 1 auto;border-radius:999px}
          }

          .head{display:flex;align-items:flex-end;justify-content:space-between;
                gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
          .head h2{font-size:clamp(2rem,4vw,3rem)}
          .filters{display:flex;gap:1.6rem;align-items:center}
          .filter{background:none;border:0;padding:.3rem 0;cursor:pointer;font-family:inherit;
                  font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
                  color:var(--meta-700);border-bottom:2px solid transparent}
          .filter:hover{color:var(--frame)}
          .filter.on{color:var(--frame);border-bottom-color:var(--frame)}
          .filmore{display:none;gap:1.6rem;align-items:center}
          .filtog{background:none;border:0;cursor:pointer;font-family:inherit;font-size:1.05rem;
                  line-height:1;color:var(--meta-700);padding:.2rem .35rem}
          .filtog:hover{color:var(--frame)}

          .grid{display:flex;gap:clamp(1.5rem,2.5vw,2.25rem);overflow-x:auto;
                scroll-snap-type:x proximity;scroll-behavior:smooth;
                scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
          .grid::-webkit-scrollbar{display:none}
          .card{flex:0 0 clamp(258px,31.4%,380px);scroll-snap-align:start}
          .rail{display:none;justify-content:flex-end;gap:.5rem;margin-top:1.6rem}
          .rail-btn{width:40px;height:40px;border:1px solid var(--meta-200);background:none;
                    cursor:pointer;font-family:inherit;font-size:1rem;color:var(--frame);
                    display:flex;align-items:center;justify-content:center;
                    transition:background .2s,color .2s,border-color .2s}
          .rail-btn:hover:not(:disabled){background:var(--frame);color:#fff;border-color:var(--frame)}
          .rail-btn:disabled{color:var(--meta-300);cursor:default}
          .card{display:flex;flex-direction:column;gap:1rem;cursor:pointer;color:var(--frame)}
          .card:hover{color:var(--frame)}
          .card-cover{aspect-ratio:16/9;overflow:hidden;background:var(--meta-100);
                      border:1px solid var(--meta-200);position:relative}
          .card-cover img,.card-cover video{width:100%;height:100%;object-fit:cover;display:block;
                          transition:transform .5s cubic-bezier(.16,1,.3,1)}
          .card:hover .card-cover img,.card:hover .card-cover video{transform:scale(1.04)}
          .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
              background-image:repeating-linear-gradient(45deg,#F5F5F5 0 8px,#E5E5E5 8px 16px)}
          .ph span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.66rem;
                   letter-spacing:.06em;color:var(--meta-700);text-align:center;padding:0 1rem}
          .card-meta{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
                     color:var(--meta-700);font-weight:500}
          .card-title{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.4}
          .card-res{font-size:.92rem;line-height:1.55}
          .tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.15rem}
          .tag{font-size:.68rem;letter-spacing:.04em;color:var(--meta-700);
               border:1px solid var(--meta-200);padding:.28rem .6rem;border-radius:3px}
          .card-abrir{font-size:.78rem;font-weight:600;letter-spacing:.04em;
                      text-transform:uppercase;color:var(--meta-700);
                      display:flex;align-items:center;gap:.4rem;margin-top:.2rem}
          .card:hover .card-abrir{color:var(--frame)}
          .card.on .card-abrir{color:var(--frame)}
          .card.on .card-cover{border-color:var(--frame);box-shadow:0 0 0 2px var(--frame)}

          .case{background:var(--evidence);border-top:1px solid var(--meta-200);margin-top:var(--pad-sec)}
          .case-top{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.25rem;flex-wrap:wrap}
          .case-top img{height:34px;width:auto}
          .case-h{font-size:clamp(1.5rem,2.8vw,2.1rem);max-width:22ch}
          /* Columnas iguales: el reto y la solución pesan lo mismo,
             y ninguna lleva fondo de color que la haga gritar más. */
          .case-grid{display:grid;grid-template-columns:1fr 1fr;
                     gap:clamp(1.5rem,3vw,2.5rem);margin-top:2.5rem;align-items:stretch}
          .box{background:#fff;padding:clamp(1.5rem,2.5vw,2rem);border:1px solid var(--meta-200)}
          .box h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
                  color:var(--meta-700);font-weight:600;margin-bottom:.85rem}
          .box p{font-size:.95rem;line-height:1.65}
          .res{margin-top:clamp(1.5rem,3vw,2.5rem);background:#fff;
               padding:clamp(1.5rem,2.5vw,2rem);border:1px solid var(--meta-200)}
          .res-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2rem;margin-top:1.1rem}
          .res-item{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem}
          .res-item i{color:var(--frame);font-style:normal;font-weight:700;line-height:1.6}
          .ev{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
          .ev figure{background:#fff;border:1px solid var(--meta-200)}
          .ev img,.ev video{width:100%;height:auto;max-height:450px;object-fit:contain;display:block;background:var(--meta-100)}
          .ev figcaption{font-size:.72rem;color:var(--meta-700);padding:.7rem .85rem;line-height:1.45}
          .ev-none{margin-top:clamp(1.5rem,3vw,2.5rem);border:1px dashed var(--meta-200);
                   background:#fff;padding:1.5rem;text-align:center}
          .ev-none span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.7rem;
                        letter-spacing:.06em;color:var(--meta-700)}

          /* Modal de Casos */
          .modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;
                         background:rgba(26,26,26,.85);backdrop-filter:blur(5px);
                         z-index:90;display:flex;align-items:center;justify-content:center;
                         opacity:0;pointer-events:none;transition:opacity .3s ease}
          .modal-overlay.open{opacity:1;pointer-events:auto}
          .modal-content{position:relative;background:var(--evidence);
                         width:92%;max-width:1100px;max-height:88vh;border-radius:16px;
                         overflow-y:auto;padding:clamp(2rem,4vw,3.5rem);
                         box-shadow:0 25px 60px rgba(0,0,0,.4);transform:translateY(20px);
                         transition:transform .4s cubic-bezier(.16,1,.3,1)}
          .modal-overlay.open .modal-content{transform:none}
          .modal-close{position:absolute;top:1rem;right:1.25rem;background:none;border:0;
                       font-size:2.2rem;line-height:1;color:var(--meta-700);cursor:pointer;
                       transition:color .2s}
          .modal-close:hover{color:var(--frame)}
          .modal-body{display:flex;flex-direction:column;gap:1.5rem}
          
          /* Layout del contenido del caso en 2 columnas */
          .case-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
          .case-left{display:flex;flex-direction:column;gap:1.5rem}
          .case-right{display:flex;flex-direction:column;gap:1rem}
          
          @media (max-width:850px){ .case-layout{grid-template-columns:1fr} }

          /* Metodología */
          #metodologia h2{font-size:clamp(2.5rem,5vw,3.5rem);margin-bottom:1rem}
          .dark{background:var(--frame);color:#fff}
          .met-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;margin-top:3rem}
          .met-card{border-top:2px solid rgba(255,255,255,.14);padding-top:1.25rem}
          .met-num{font-size:2.5rem;font-weight:800;color:var(--delta);line-height:1;margin-bottom:1rem;
                   font-variant-numeric:tabular-nums;letter-spacing:-.02em}
          .met-card h4{font-size:1.05rem;margin-bottom:.5rem;color:#fff}
          .met-card p{font-size:.85rem;color:rgba(255,255,255,.62);line-height:1.5}
          
          /* Demo Video */
          #demo{padding-bottom:clamp(3rem,6vw,5rem)}
          #contacto{padding-top:clamp(2rem,5vw,4rem)}
          .light{background:var(--evidence);color:var(--frame);border-top:1px solid var(--meta-200)}
          .demo-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
          .demo-text h2{font-size:clamp(1.8rem,3.5vw,2.5rem);margin-bottom:1.5rem;margin-top:.5rem}
          .demo-list{margin-top:2rem;border-color:var(--meta-200)}
          .demo-list li{color:var(--meta-700);border-color:var(--meta-200);font-size:.9rem;padding:1rem 0}
          .demo-list li b{color:var(--frame)}
          .demo-video{position:relative;aspect-ratio:16/9;background:var(--meta-100);
                      border:1px solid var(--meta-200);border-radius:12px;overflow:hidden;
                      display:flex;align-items:center;justify-content:center}
          .demo-ph{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;
                   letter-spacing:.06em;color:var(--meta-700)}
                   
          .btn-demo{display:inline-flex;align-items:center;justify-content:center;
                    background:var(--delta);color:var(--frame);font-weight:700;font-size:.95rem;
                    padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;
                    transition:transform .2s ease, background .2s ease;margin-top:1.5rem}
          .btn-demo:hover{transform:translateY(-2px);background:#fff}

          /* Testimonios */
          #testimonios{padding-top:0;padding-bottom:clamp(2rem,4vw,3rem)}
          #testimonios .wrap{max-width:1400px;padding-bottom:0}
          .test-container{background:var(--frame);border-radius:24px;padding:2rem clamp(2rem,4vw,3.5rem) 2.5rem;
                          color:#fff;box-shadow:0 30px 60px rgba(0,0,0,0.1)}
          .test-header{text-align:center;margin-bottom:1.8rem}
          .test-header h2{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.1;color:#fff}
          .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
          .test-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
                     border-radius:16px;padding:1.5rem;display:flex;flex-direction:column}
          .test-stars{color:var(--delta);font-size:1rem;margin-bottom:1rem;letter-spacing:0.1em}
          .test-text{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,0.85);margin-bottom:1.2rem;flex-grow:1;
                     background:rgba(255,255,255,0.06);padding:1.1rem;border-radius:14px 14px 14px 0;position:relative}
          .test-text::after{content:"";position:absolute;bottom:-10px;left:0;
                            border-width:10px 14px 0 0;border-style:solid;
                            border-color:rgba(255,255,255,0.06) transparent transparent transparent}
          .test-author{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,0.1);padding-top:.8rem}
          .test-name{font-weight:600;color:#fff;font-size:.9rem}
          .test-date{font-size:.75rem;color:rgba(255,255,255,0.5);margin-top:0.15rem}
          .btn-more-reviews{background:var(--delta);color:#fff;border:none;padding:.85rem 2rem;
                            font-weight:700;font-size:.95rem;border-radius:999px;cursor:pointer;
                            transition:transform .2s,background .2s;text-decoration:none}
          .btn-more-reviews:hover{transform:translateY(-2px);background:#e08a00}
          .btn-write-review{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.2);
                            padding:.85rem 2rem;font-weight:700;font-size:.95rem;border-radius:999px;cursor:pointer;
                            transition:transform .2s,background .2s,border-color .2s;text-decoration:none}
          .btn-write-review:hover{transform:translateY(-2px);background:rgba(255,255,255,0.15);border-color:#fff}
          @media(max-width:768px){.test-grid{grid-template-columns:1fr}}

          .ct{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);
              align-items:start;margin-top:2.5rem}
          .ct-cards{display:flex;flex-direction:column;gap:.65rem;margin-bottom:2rem}
          .ct-card{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.25rem;border:1px solid var(--meta-200)}
          .ct-card:hover{border-color:var(--frame);color:var(--frame)}
          .ct-ico{width:36px;height:36px;flex:none;display:flex;align-items:center;
                  justify-content:center;background:var(--meta-100);border-radius:50%}
          .ct-ico svg{width:16px;height:16px;color:var(--meta-700)}
          .ct-k{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--meta-700)}
          .ct-v{font-size:.95rem;font-weight:500;color:var(--frame)}
          .ct-right-col{display:flex;flex-direction:column}

          .fbox{border:1px solid var(--meta-200)}
          .fbox summary{cursor:pointer;padding:1.15rem 1.4rem;font-weight:600;font-size:.95rem;
                        list-style:none;display:flex;justify-content:space-between;
                        align-items:center;gap:1rem}
          .fbox summary::-webkit-details-marker{display:none}
          .fbox summary::after{content:"+";font-size:1.25rem;color:var(--meta-700);font-weight:400}
          .fbox[open] summary::after{content:"–"}
          .fbox summary:hover{background:var(--meta-100)}
          .fbody{padding:0 1.4rem 1.4rem}
          .fbody>p{font-size:.88rem;color:var(--meta-700);margin-bottom:1.4rem}
          .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
          .field label{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
                       color:var(--meta-700);font-weight:600}
          .field input,.field select,.field textarea{font-family:inherit;font-size:.92rem;
            padding:.75rem .9rem;border:1px solid var(--meta-500);background:var(--evidence);color:var(--frame)}
          .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
          .send{width:100%;margin-top:.5rem}
          .send:disabled{cursor:not-allowed}
          
          /* Formulario Success Message */
          .success-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;
                       padding:2rem 1rem;text-align:center;background:rgba(232,116,12,.05);
                       border-radius:12px;border:1px solid rgba(232,116,12,.2);margin-top:1rem}
          .success-icon{width:56px;height:56px;color:var(--delta);margin-bottom:1.5rem;
                        stroke-dasharray:100;stroke-dashoffset:100;animation:drawIcon 1.2s ease forwards .2s}
          @keyframes drawIcon{to{stroke-dashoffset:0}}
          .success-msg h3{font-size:1.3rem;margin-bottom:.5rem;color:var(--frame)}
          .success-msg p{color:var(--meta-700);line-height:1.5;font-size:.9rem;max-width:300px;margin:0 auto}

          .ct-cta{margin-top:2.5rem;background:linear-gradient(135deg, rgba(232,116,12,.1), rgba(232,116,12,.03));
                  border:1.5px solid var(--delta);border-radius:16px;padding:clamp(1.5rem,3vw,2rem);
                  display:flex;gap:1.25rem;align-items:flex-start}
          .ct-cta-icon{width:48px;height:48px;flex:none;background:var(--delta);border-radius:12px;
                       display:flex;align-items:center;justify-content:center;color:var(--evidence);
                       box-shadow:0 8px 16px rgba(232,116,12,.25)}
          .ct-cta-icon svg{width:24px;height:24px}
          .ct-cta-body h3{font-size:1.15rem;margin-bottom:.5rem;color:var(--frame);line-height:1.3}
          .ct-cta-body p{font-size:.9rem;color:var(--meta-700);margin-bottom:1.25rem;line-height:1.5}
          .cta-small{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.85rem;
                     color:var(--frame);background:transparent;border:1.5px solid var(--frame);
                     padding:.6rem 1.1rem;border-radius:999px;transition:background .2s, color .2s}
          .cta-small:hover{background:var(--frame);color:var(--evidence)}
          .cta-small svg{width:16px;height:16px}


          .ft{background:var(--frame);color:#fff;padding:3rem 0 2rem;margin-top:var(--pad-sec)}
          .ft-in{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
          .ft p{color:rgba(255,255,255,.62);font-size:.9rem}
          .ft-links{display:flex;gap:1.75rem}
          .ft-links a{color:rgba(255,255,255,.8);font-size:.9rem}
          .ft-links a:hover{color:var(--delta-on-dark)}
          .ft-bot{border-top:1px solid rgba(255,255,255,.14);margin-top:2rem;padding-top:1.5rem}
          .ft-bot p{font-size:.8rem;color:rgba(255,255,255,.55)}

          /* Lightbox modal */
          .lightbox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;
                            background:rgba(0,0,0,.92);z-index:100;
                            display:flex;align-items:center;justify-content:center;
                            opacity:0;pointer-events:none;transition:opacity .3s ease}
          .lightbox-overlay.open{opacity:1;pointer-events:auto;cursor:zoom-out}
          .lightbox-close{position:absolute;top:1.5rem;right:1.5rem;background:none;border:0;
                          font-size:2.5rem;color:#fff;cursor:pointer;opacity:.7;transition:opacity .2s;z-index:101}
          .lightbox-close:hover{opacity:1}
          .lightbox-content{max-width:90%;max-height:90vh;display:flex;align-items:center;justify-content:center}
          .lightbox-content img,.lightbox-content video{max-width:100%;max-height:90vh;object-fit:contain;
                                                        border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
          
          .ev figure, .card-cover, .svc-media, .hero-photo { cursor: zoom-in; }

          @media (max-width:1000px){
            .hero{grid-template-columns:1fr;gap:2rem}
            .hero-stage{min-height:470px}
            .grid,.band-grid,.ev{grid-template-columns:1fr 1fr}
            .ct,.case-grid,.demo-layout{grid-template-columns:1fr}
          }
          @media (max-width:800px){
            .met-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
          }
          @media (max-width:680px){
            .grid,.band-grid,.ev,.stats-grid,.res-list,.row2,.met-grid{grid-template-columns:1fr}
            /* Dos filas: identidad y redes arriba, navegación centrada debajo. */
            .nav-in{grid-template-columns:1fr auto;height:auto;padding-block:.7rem;gap:.5rem 1rem}
            .nav-name{grid-area:1/1;justify-self:start}
            .nav-social{grid-area:1/2;justify-self:end}
            .nav-links{grid-area:2/1/2/3;justify-self:center;gap:1.5rem}
            html{scroll-padding-top:112px}
            .head{align-items:flex-start}
          }
          @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

          /* ════ Movimiento — aquí sí funciona: no hay runtime que reescriba clases ════ */
          @media (prefers-reduced-motion:no-preference){
            @keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
            .anim .rv{opacity:0;transform:translateY(15px);
                      transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
            .anim .rv.vis{opacity:1;transform:none}
            .anim .srv-row:nth-child(2),.anim .card:nth-child(2),
            .anim .stats-grid>div:nth-child(2){transition-delay:.09s}
            .anim .srv-row:nth-child(3),.anim .card:nth-child(3),
            .anim .stats-grid>div:nth-child(3){transition-delay:.18s}
            /* Entrada del héroe: una secuencia, no efectos sueltos */
            .anim .hero-copy>*{animation:sube .8s cubic-bezier(.16,1,.3,1) both}
            .anim .hero-copy>*:nth-child(1){animation-delay:.06s}
            .anim .hero-copy>*:nth-child(2){animation-delay:.15s}
            .anim .hero-copy>*:nth-child(3){animation-delay:.24s}
            .anim .hero-copy>*:nth-child(4){animation-delay:.33s}
            .anim .hero-copy>*:nth-child(5){animation-delay:.45s}
            .anim .hero-photo{animation:sube 1.1s cubic-bezier(.16,1,.3,1) both}
            /* Cambio de caso: el movimiento explica que cambió por tu clic */
            #caso.swap .case-h,#caso.swap .box,#caso.swap .res,#caso.swap .ev figure,#caso.swap .ev-none{
              animation:sube .55s cubic-bezier(.16,1,.3,1) both}
            #caso.swap .box:nth-child(2){animation-delay:.07s}
            #caso.swap .res{animation-delay:.13s}
          }