:root{
  --negro:#EFF2F8;   
  --negro2:#D8DFEE;  
  --borde:#C3CDE0;
  --claro:#0E0F13;   
  --gris:#5A6076;    
  --az:#1E3AE0;      
  --ci:#0096CC;      
  --tinta:#0E0F13;   
  
  --texto:#2B3040;
  
  --marco:#737C97;
  
  --lee:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --headh:76px;      
  
  --aire:clamp(26px,2.6vw,40px);
}

@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/tipografia/plus-jakarta-sans.woff2') format('woff2');
  
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html{overflow-x:clip; background:var(--negro); scroll-behavior:smooth;
     scrollbar-gutter:stable}
body{background:var(--negro); color:var(--claro); font-family:'Kanit',sans-serif;
     overflow-x:clip; -webkit-font-smoothing:antialiased;
     
     -webkit-user-select:none; -moz-user-select:none; user-select:none;
     -webkit-touch-callout:none}

input, textarea, select, [contenteditable],
.dato, .pie .correo{
  -webkit-user-select:text; -moz-user-select:text; user-select:text;
  -webkit-touch-callout:default}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--ci); outline-offset:3px}

.titulo-degrade{
  background:linear-gradient(180deg,var(--az) 0%,var(--ci) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.solo-lectores{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.btn-contacto{
  display:inline-block; border-radius:9999px; color:#fff; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; white-space:nowrap;
  padding:16px 48px; font-size:clamp(.72rem,1vw,1rem);
  background:linear-gradient(123deg,#0B1B6B 7%,var(--az) 40%,#1E86FF 72%,var(--ci) 100%);
  
  box-shadow:0 6px 18px rgba(30,58,224,.28);
  transition:transform .25s ease, filter .25s ease;
}
.btn-contacto:hover{transform:translateY(-2px); filter:brightness(1.12)}

.btn-fantasma{
  display:inline-block; border-radius:9999px; border:2px solid var(--az); color:var(--az);
  font-weight:500; text-transform:uppercase; letter-spacing:.12em; white-space:nowrap;
  padding:12px 34px; font-size:clamp(.78rem,.95vw,1rem);
  transition:background .25s ease, color .25s ease;
}
.btn-fantasma:hover{background:var(--az); color:#fff}

.fade{opacity:0; transform:translateY(30px);
      transition:opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1)}
.fade.desde-arriba{transform:translateY(-20px)}

.fade.vista{opacity:1; transform:none}

.head{position:sticky; top:0; z-index:50; height:var(--headh);
      background:rgba(239,242,248,.92); border-bottom:1px solid var(--borde);
      display:grid; grid-template-columns:minmax(0,1fr) auto auto;
      gap:clamp(18px,2.4vw,34px);
      align-items:center; padding:0 clamp(20px,3vw,40px)}
.head > .logo{justify-self:start}

.head > a:last-of-type{justify-self:end}

.hamb{display:none}
.panel-cel{display:none}

.logo{display:inline-flex; align-items:baseline; gap:.34em; white-space:nowrap;
      font-size:26px; letter-spacing:-.02em; line-height:1;
      background-image:linear-gradient(96deg,
        var(--tinta) 0%, var(--tinta) 34%, #16309E 48%, var(--az) 62%, var(--ci) 100%);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent; color:transparent}
.logo b{font-weight:900}
.logo span{font-weight:400}
.head nav{display:flex; gap:26px}
.head nav a{font-weight:500; text-transform:uppercase; letter-spacing:.06em;
            font-size:.85rem; color:var(--gris); transition:color .2s}
.head nav a:hover,.head nav a.on{color:var(--claro)}

.portada{padding:clamp(50px,7vw,96px) clamp(20px,3vw,40px) clamp(30px,4vw,56px); text-align:center}
.portada h1{font-weight:900; text-transform:uppercase; line-height:.88; letter-spacing:-.03em;
            font-size:clamp(3rem,12vw,170px)}

.portada.larga h1{font-size:clamp(2.1rem,8.6vw,124px)}

.portada p{font-family:var(--lee); font-weight:400; color:var(--tinta);
           line-height:1.6; max-width:52ch; margin:22px auto 0;
           font-size:clamp(1.05rem,1.7vw,1.35rem)}

.hero{min-height:calc(100svh - var(--headh)); display:flex; flex-direction:column;
      overflow:clip; background:var(--negro)}

.cuerpo-hero{flex:1; display:grid;
             grid-template-columns:minmax(0,1fr) clamp(320px,24vw,400px);
             gap:clamp(20px,3vw,48px); align-items:center;
             max-width:1360px; width:100%; margin:0 auto;
             padding:0 clamp(20px,3vw,40px)}
.hero-centro{display:flex; flex-direction:column; justify-content:center;
             padding:clamp(18px,2.6vw,34px) 0; max-width:900px}

.hero-centro h1{letter-spacing:-.03em}

.hero-centro .marca{display:block; font-weight:900; text-transform:uppercase;
                    line-height:.92; font-size:clamp(2.3rem,5.8vw,5.25rem);
                    background-image:linear-gradient(180deg,
                      var(--az) 0%, var(--az) 34%, #0B72A8 100%);
                    -webkit-background-clip:text; background-clip:text;
                    -webkit-text-fill-color:transparent}

.hero-centro .que{display:block; font-weight:500; letter-spacing:-.01em; line-height:1.22;
                  color:var(--tinta); -webkit-text-fill-color:var(--tinta); background:none;
                  margin-top:clamp(10px,1.1vw,16px);
                  font-size:clamp(1.05rem,1.95vw,1.85rem)}

.hero-bajada{font-family:var(--lee); font-weight:400; color:var(--tinta);
             line-height:1.6; max-width:44ch;
             font-size:clamp(1.05rem,1.5vw,1.3rem); margin-top:clamp(14px,1.6vw,22px)}
.hero-botones{display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(26px,3vw,40px)}

.servicios-fila{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
                gap:clamp(14px,1.8vw,24px);
                max-width:1360px; width:100%; margin:0 auto;
                padding:0 clamp(20px,3vw,40px) clamp(18px,2vw,26px)}

.servicios-fila.elector{padding-top:var(--aire)}

.panel{display:block}
.panel img{display:block; width:100%; height:auto; aspect-ratio:2/1;
           object-fit:cover; border-radius:14px; border:1px solid var(--borde);
           transition:border-color .3s ease}
.panel:hover img{border-color:var(--az)}
.panel .rotulo{display:block; padding:clamp(12px,1.3vw,16px) 2px 0}

.panel .rotulo b{display:flex; align-items:center; justify-content:space-between;
                 gap:12px; font-weight:600; text-transform:uppercase;
                 letter-spacing:.04em; font-size:clamp(.9rem,1.3vw,1.2rem);
                 transition:color .25s ease}
.panel .rotulo b::after{content:"\2192"; font-family:'Kanit',sans-serif;
                        color:var(--az); transition:transform .25s ease}
.panel:hover .rotulo b{color:var(--az)}
.panel:hover .rotulo b::after{transform:translateX(5px)}

.panel .rotulo i{display:block; font-style:normal; font-family:var(--lee);
                 font-weight:400; color:var(--texto);
                 font-size:clamp(.72rem,.9vw,.9rem); margin-top:4px}

.columna{position:relative; height:min(460px,60svh); overflow:hidden;
         -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
         mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.columna-tira{display:flex; flex-direction:column; gap:14px; will-change:transform;
              animation:subir 38s linear infinite}
@keyframes subir{from{transform:translateY(0)} to{transform:translateY(-50%)}}
.columna a{display:block; border-radius:14px; outline-offset:3px;
           transition:transform .3s ease, box-shadow .3s ease}
.columna img{width:100%; border-radius:14px; border:1px solid var(--marco);
             background:var(--negro2); display:block;
             transition:border-color .3s ease}
.columna a:hover{transform:scale(1.025); box-shadow:0 14px 34px rgba(30,58,224,.16)}
.columna a:hover img{border-color:var(--az)}
.columna a:focus-visible{outline:2px solid var(--az)}

.puertas{padding:var(--aire) clamp(20px,3vw,40px)}
.puertas .caja{max-width:1180px; margin:0 auto}
.puerta{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center;
        gap:clamp(16px,3vw,40px); padding:clamp(22px,3vw,40px) 0;
        border-top:1px solid var(--borde); transition:padding-left .35s ease}
.puerta:last-of-type{border-bottom:1px solid var(--borde)}
.puerta:hover{padding-left:16px}
.puerta .n{font-weight:300; font-size:clamp(.72rem,1vw,.95rem); letter-spacing:.14em;
           color:var(--gris)}
.puerta .t{font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:1;
           font-size:clamp(1.5rem,3.4vw,3rem)}
.puerta .d{font-weight:300; color:var(--gris); font-size:clamp(.8rem,1.2vw,1.05rem);
           text-align:right}
.puerta .fl{font-size:clamp(1.4rem,2.4vw,2.4rem); color:var(--az);
            transition:transform .35s ease}
.puerta:hover .fl{transform:translateX(10px)}

.sobre{min-height:calc(100svh - var(--headh)); display:flex; flex-direction:column;
       align-items:center; justify-content:center; text-align:center; position:relative;
       overflow:clip; isolation:isolate; padding:70px clamp(20px,3vw,40px)}
.sobre h1{font-weight:900; text-transform:uppercase; line-height:.9; letter-spacing:-.03em;
          font-size:clamp(2.6rem,9vw,140px); white-space:nowrap;
          margin-bottom:clamp(28px,3.5vw,48px)}
.sobre .cuerpo{max-width:620px}

.sobre p.texto{font-family:var(--lee); font-weight:400; color:var(--tinta);
               line-height:1.65; font-size:clamp(1.08rem,2vw,1.45rem)}
.sobre .btn-contacto{margin-top:clamp(44px,6vw,88px)}

.luz{position:absolute; inset:-20%; z-index:-1; pointer-events:none;
     filter:blur(90px); opacity:.3}
.luz span{position:absolute; display:block; border-radius:50%}
.luz .l1{width:52%; height:66%; left:-6%; top:-4%;
  background:radial-gradient(circle at 45% 45%,rgba(43,75,255,.6),transparent 70%);
  animation:vagar1 28s ease-in-out infinite}
.luz .l2{width:44%; height:56%; right:-2%; top:18%;
  background:radial-gradient(circle at 50% 50%,rgba(0,194,255,.4),transparent 68%);
  animation:vagar2 34s ease-in-out infinite}
.luz .l3{width:58%; height:48%; left:22%; bottom:-14%;
  background:radial-gradient(circle at 50% 50%,rgba(30,134,255,.32),transparent 72%);
  animation:vagar3 42s ease-in-out infinite}
@keyframes vagar1{0%,100%{transform:translate(0,0) scale(1)}
                  50%{transform:translate(10%,7%) scale(1.14)}}
@keyframes vagar2{0%,100%{transform:translate(0,0) scale(1.08)}
                  50%{transform:translate(-9%,10%) scale(1)}}
@keyframes vagar3{0%,100%{transform:translate(0,0) scale(1)}
                  50%{transform:translate(7%,-8%) scale(1.12)}}

.camino{padding:var(--aire) clamp(20px,3vw,40px)}
.camino .caja{max-width:1024px; margin:0 auto}
.camino h2{font-weight:900; text-transform:uppercase; line-height:.9; letter-spacing:-.03em;
           font-size:clamp(2rem,6vw,88px); margin-bottom:44px; text-align:center}
.hito{display:flex; align-items:flex-start; gap:clamp(18px,3vw,44px);
      padding:30px 0; border-bottom:1px solid var(--borde)}
.hito:first-of-type{border-top:1px solid var(--borde)}

.hito .n{font-weight:900; line-height:.8; letter-spacing:-.04em; flex:none;
         font-size:clamp(2.6rem,8vw,110px);
         color:transparent; -webkit-text-stroke:1.6px rgba(43,75,255,.9)}
@supports not (-webkit-text-stroke:1px red){
  .hito .n{color:rgba(43,75,255,.55)}
}
.hito h3{font-weight:500; text-transform:uppercase; letter-spacing:.02em;
         font-size:clamp(1rem,2vw,1.8rem); margin-bottom:9px}
.hito p{font-family:var(--lee); font-weight:400; line-height:1.65;
        color:var(--texto); max-width:42rem;
        font-size:clamp(.92rem,1.5vw,1.15rem)}

.menu-drop{position:relative; display:flex; align-items:center}
.menu-drop > a{display:inline-flex; align-items:center; gap:6px}
.menu-drop > a i{font-style:normal; font-size:.7em; line-height:1;
                 transition:transform .3s ease}
.menu-drop:hover > a i{transform:rotate(180deg)}
.menu-drop::after{content:""; position:absolute; left:-20px; right:-20px;
                  top:100%; height:22px}

.drop{position:absolute; top:calc(100% + 20px); right:0; z-index:60;
      transform:translateY(10px); opacity:0; visibility:hidden;
      background:#F7F9FD; border:1px solid var(--borde); border-radius:18px;
      box-shadow:0 18px 44px rgba(14,15,19,.10);
      padding:26px 32px 20px; width:max-content; max-width:min(92vw,700px);
      transition:opacity .28s ease, transform .28s ease, visibility .28s}
.menu-drop:hover .drop,
.menu-drop:focus-within .drop{opacity:1; visibility:visible; transform:translateY(0)}

.drop-caja{display:grid; grid-template-columns:repeat(2,max-content);
           gap:0 clamp(40px,5vw,80px)}
.drop-col{display:flex; flex-direction:column; gap:2px}
.drop-t{font-weight:600; text-transform:uppercase; letter-spacing:.12em;
        font-size:.66rem; color:var(--az); margin-bottom:10px}

.drop .drop-col a{text-transform:none; letter-spacing:0; font-size:.95rem;
                  font-weight:300; color:var(--claro); padding:7px 0;
                  transition:color .2s ease, padding-left .25s ease}
.drop .drop-col a:hover{color:var(--az); padding-left:6px}
.drop .drop-pie{display:flex; align-items:center; gap:10px; margin-top:18px;
                padding-top:16px; border-top:1px solid var(--borde);
                text-transform:none; letter-spacing:0; font-size:.95rem;
                font-weight:300; color:var(--claro); transition:color .2s ease}
.drop .drop-pie:hover{color:var(--az)}

.drop-pie em,
.panel-cel .sub a em{font-style:normal; font-weight:500; text-transform:uppercase;
             letter-spacing:.12em; font-size:.6rem; color:var(--az);
             border:1px solid rgba(30,58,224,.3); background:rgba(30,58,224,.07);
             border-radius:9999px; padding:4px 10px}

.oferta{padding:var(--aire) clamp(20px,3vw,40px)}
.oferta .caja{max-width:1024px; margin:0 auto}
.grupo + .grupo{margin-top:clamp(48px,6vw,84px)}
.grupo-t{font-weight:600; text-transform:uppercase; letter-spacing:.16em;
         font-size:clamp(.66rem,.9vw,.8rem); color:var(--az);
         margin-bottom:clamp(14px,1.6vw,22px)}

.of{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
    gap:clamp(18px,3vw,44px); padding:clamp(24px,2.6vw,34px) 0;
    border-bottom:1px solid var(--borde); transition:padding-left .35s ease}
.of:first-of-type{border-top:1px solid var(--borde)}
.of:hover{padding-left:14px}

.of .n{width:1.2em; font-weight:900; line-height:.8; letter-spacing:-.04em;
       font-size:clamp(2.2rem,6vw,84px);
       color:transparent; -webkit-text-stroke:1.5px rgba(43,75,255,.9)}
@supports not (-webkit-text-stroke:1px red){.of .n{color:rgba(43,75,255,.55)}}
.of h3{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
       font-weight:500; text-transform:uppercase; letter-spacing:.02em;
       font-size:clamp(1rem,2.1vw,1.7rem); margin-bottom:8px}
.of p{font-family:var(--lee); font-weight:400; line-height:1.65;
      color:var(--texto); max-width:54ch;
      font-size:clamp(.9rem,1.2vw,1.08rem)}
.of .mas{display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
         font-weight:500; text-transform:uppercase; letter-spacing:.12em;
         font-size:clamp(.62rem,.85vw,.76rem); color:var(--az);
         border:1px solid rgba(30,58,224,.3); background:rgba(30,58,224,.05);
         border-radius:9999px; padding:11px 22px;
         transition:color .3s ease, border-color .3s ease, background-color .3s ease}
.of:hover .mas{background:var(--az); color:#fff; border-color:var(--az)}
.of .mas i{font-style:normal; transition:transform .35s ease}
.of:hover .mas i{transform:translateX(5px)}

.of.sola{grid-template-columns:minmax(0,1fr) auto}

.chip{font-weight:500; text-transform:uppercase; letter-spacing:.14em;
      font-size:.6rem; color:var(--az);
      border:1px solid rgba(30,58,224,.3); background:rgba(30,58,224,.07);
      border-radius:9999px; padding:5px 12px}

.ficha{padding:var(--aire) clamp(20px,3vw,40px)}
.ficha .caja{max-width:1024px; margin:0 auto}
.ficha h2{font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:.95;
          font-size:clamp(1.5rem,3.6vw,2.6rem); margin-bottom:clamp(18px,2.2vw,28px)}

body{counter-reset:sec}
.ficha .caja > h2::before{
  counter-increment:sec;
  content:"0" counter(sec);
  display:block; width:max-content;
  font-family:'Kanit',sans-serif;
  font-size:.7rem; font-weight:500; letter-spacing:.2em;
  
  background:none; color:var(--az); -webkit-text-fill-color:var(--az);
  padding-bottom:8px; margin-bottom:14px;
  border-bottom:2px solid var(--az);
}

.ficha-intro{font-family:var(--lee); font-weight:400; color:var(--tinta);
             line-height:1.6; max-width:60ch;
             margin-bottom:clamp(20px,2.4vw,30px);
             font-size:clamp(1rem,1.5vw,1.25rem)}

.incluye{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
         gap:0 clamp(24px,4vw,60px)}
.incluye li{list-style:none; display:grid; grid-template-columns:auto minmax(0,1fr);
            gap:14px; align-items:start; padding:16px 0;
            border-bottom:1px solid var(--borde);
            font-family:var(--lee); font-weight:400; line-height:1.65;
            color:var(--texto);
            font-size:clamp(.92rem,1.2vw,1.08rem)}

.incluye li::before{content:"✓"; font-family:'Kanit',sans-serif;
                    color:var(--az); font-weight:600; line-height:1.5}

.pantallas{display:grid; gap:0}
.pantalla{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2.4vw,32px);
          align-items:baseline; padding:15px 0; border-bottom:1px solid var(--borde)}
.pantalla:first-child{border-top:1px solid var(--borde)}
.pantalla .p{font-weight:300; letter-spacing:.14em; color:var(--gris);
             font-size:.68rem; min-width:3.4em}
.pantalla b{font-weight:600; text-transform:uppercase; letter-spacing:.02em;
            font-size:clamp(.85rem,1.1vw,1rem)}
.pantalla span:last-child{display:block; font-family:var(--lee); font-weight:400;
                          color:var(--texto); line-height:1.65;
                          margin-top:5px; font-size:clamp(.86rem,1.1vw,1rem)}

.pasos{display:grid; gap:0}
.paso{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,3vw,40px);
      align-items:start; padding:24px 0; border-bottom:1px solid var(--borde)}
.paso:first-child{border-top:1px solid var(--borde)}
.paso .n{width:1.2em; font-weight:900; line-height:.8; letter-spacing:-.04em;
         font-size:clamp(1.8rem,4.4vw,3.2rem);
         color:transparent; -webkit-text-stroke:1.4px rgba(43,75,255,.9)}
@supports not (-webkit-text-stroke:1px red){.paso .n{color:rgba(43,75,255,.55)}}
.paso h3{font-weight:500; text-transform:uppercase; letter-spacing:.02em;
         font-size:clamp(.95rem,1.5vw,1.3rem); margin-bottom:7px}
.paso p{font-family:var(--lee); font-weight:400; line-height:1.65;
        color:var(--texto); max-width:60ch;
        font-size:clamp(.9rem,1.2vw,1.08rem)}

.plazo{display:flex; align-items:baseline; justify-content:space-between; gap:24px;
       flex-wrap:wrap; margin-top:clamp(20px,2.4vw,30px); padding-top:20px;
       border-top:2px solid var(--claro)}
.plazo b{font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem;
         color:var(--az)}
.plazo span{font-family:var(--lee); font-weight:400; color:var(--texto);
            line-height:1.6; max-width:60ch;
            font-size:clamp(.92rem,1.2vw,1.08rem)}

.ejemplo{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
         gap:clamp(20px,3vw,40px); align-items:center;
         border:1px solid var(--borde); border-radius:24px; overflow:hidden;
         background:var(--negro2)}
.ejemplo img{width:100%; height:100%; object-fit:cover; object-position:top center;
             aspect-ratio:14/9}
.ejemplo .txt{padding:clamp(22px,3vw,38px)}
.ejemplo .p{display:block; font-weight:300; text-transform:uppercase; letter-spacing:.16em;
            color:var(--gris); font-size:.68rem; margin-bottom:10px}
.ejemplo h3{font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.1;
            font-size:clamp(1.2rem,2.4vw,1.9rem); margin-bottom:10px}
.ejemplo p{font-family:var(--lee); font-weight:400; line-height:1.65;
           color:var(--texto); margin-bottom:20px;
           font-size:clamp(.9rem,1.2vw,1.05rem)}

.ficha-tope{padding:0 clamp(20px,3vw,40px) clamp(26px,3vw,44px)}
.ficha-tope .caja{max-width:1024px; margin:0 auto}
.volver{display:inline-flex; align-items:center; gap:10px; color:var(--az);
        font-weight:400; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem;
        transition:color .25s ease}
.volver:hover{color:var(--ci)}

.comun{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
       gap:clamp(14px,1.8vw,22px) clamp(20px,3vw,44px);
       border-top:2px solid var(--az); border-bottom:1px solid var(--borde);
       padding:clamp(18px,2.2vw,26px) 0;
       margin-bottom:clamp(26px,3vw,38px)}
.comun b{grid-column:1/-1; margin:0;
         font-weight:600; text-transform:uppercase; letter-spacing:.16em;
         font-size:clamp(.72rem,1vw,.85rem); color:var(--az)}
.comun span{display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px;
            align-items:start; border:0; padding:0;
            font-family:var(--lee); font-weight:400; color:var(--tinta);
            line-height:1.4; font-size:clamp(.9rem,1.15vw,1.02rem)}
.comun span::before{content:"✓"; display:grid; place-items:center;
                    width:24px; height:24px; border-radius:50%;
                    background:var(--az); color:#fff;
                    font-family:'Kanit',sans-serif; font-weight:600;
                    font-size:.76rem; line-height:1}

.comparar{width:100%; border-collapse:separate; border-spacing:0; text-align:left}
.comparar thead th{padding:14px 10px; vertical-align:bottom;
                   border-bottom:2px solid var(--claro)}
.comparar thead th:first-child{border-bottom-color:var(--borde)}
.comparar thead b{display:block; font-weight:600; text-transform:uppercase;
                  letter-spacing:.01em; line-height:1.15;
                  font-size:clamp(.78rem,1.3vw,1.05rem)}
.comparar thead i{display:block; font-style:normal; font-family:var(--lee);
                  font-weight:400; color:var(--gris); margin-top:5px;
                  font-size:clamp(.68rem,.9vw,.82rem)}

.comparar thead em{display:inline-block; font-style:normal; margin-bottom:8px;
                   font-weight:500; text-transform:uppercase; letter-spacing:.14em;
                   font-size:.58rem; color:#fff; background:var(--az);
                   border-radius:9999px; padding:4px 11px}
.comparar tbody th{font-family:var(--lee); font-weight:400; color:var(--texto);
                   line-height:1.5; padding:15px 16px 15px 0;
                   border-bottom:1px solid var(--borde);
                   font-size:clamp(.82rem,1.1vw,1.02rem)}
.comparar tbody td{text-align:center; padding:15px 10px;
                   border-bottom:1px solid var(--borde);
                   font-family:var(--lee); font-weight:400; color:var(--texto);
                   line-height:1.4; font-size:clamp(.78rem,1.05vw,1rem)}
.comparar tbody tr:last-child th,
.comparar tbody tr:last-child td{border-bottom:0}

.comparar .si{display:inline-grid; place-items:center; width:26px; height:26px;
              border-radius:50%; background:var(--az); color:#fff;
              font-family:'Kanit',sans-serif; font-weight:600;
              font-size:.85rem; line-height:1}

.comparar .no{color:#B7BECF; font-size:1.15rem; line-height:1}

.comparar tfoot th{padding:18px 16px 0 0}
.comparar tfoot td{text-align:center; padding:18px 8px 0}
.ver{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     white-space:nowrap; font-family:'Kanit',sans-serif; font-weight:500;
     text-transform:uppercase; letter-spacing:.12em;
     font-size:clamp(.58rem,.8vw,.72rem);
     color:var(--az); border:1px solid rgba(30,58,224,.3);
     background:rgba(30,58,224,.05);
     border-radius:9999px; padding:11px 20px;
     transition:background-color .3s ease, color .3s ease, border-color .3s ease}
.ver b{font-weight:500}
.ver:hover{background:var(--az); color:#fff; border-color:var(--az)}
.ver i{font-style:normal; transition:transform .35s ease}
.ver:hover i{transform:translateX(4px)}

.aca{font-family:'Kanit',sans-serif; font-weight:500; text-transform:uppercase;
     letter-spacing:.12em; font-size:clamp(.58rem,.8vw,.72rem); color:var(--gris)}

.comparar.elige-1 :is(thead,tbody) :is(th,td):nth-child(2),
.comparar.elige-2 :is(thead,tbody) :is(th,td):nth-child(3),
.comparar.elige-3 :is(thead,tbody) :is(th,td):nth-child(4){background:rgba(30,58,224,.055)}
.comparar.elige-1 thead th:nth-child(2),
.comparar.elige-2 thead th:nth-child(3),
.comparar.elige-3 thead th:nth-child(4){border-radius:14px 14px 0 0}
.comparar.elige-1 tbody tr:last-child td:nth-child(2),
.comparar.elige-2 tbody tr:last-child td:nth-child(3),
.comparar.elige-3 tbody tr:last-child td:nth-child(4){border-radius:0 0 14px 14px}

.plegados{border-top:1px solid var(--borde)}
.plegado{border-bottom:1px solid var(--borde)}

.plegado-tit{margin:0; font-size:inherit; font-weight:inherit; line-height:inherit;
             text-transform:none; letter-spacing:normal}
.plegado-barra{display:grid; grid-template-columns:auto minmax(0,1fr) auto;
               align-items:center; gap:clamp(14px,2.6vw,30px);
               width:100%; text-align:left; cursor:pointer;
               background:none; border:0; color:inherit; font:inherit;
               padding:clamp(18px,2.2vw,26px) clamp(4px,1vw,14px);
               transition:padding-left .35s ease, background-color .35s ease}
.plegado-barra:hover,.plegado.abierto .plegado-barra{background-color:rgba(30,58,224,.045)}
.plegado.abierto .plegado-barra{padding-left:clamp(12px,1.8vw,24px)}

.plegado-barra .n{font-weight:500; letter-spacing:.14em; color:var(--az);
                  font-size:clamp(.68rem,.95vw,.85rem)}
.plegado .t{display:block; font-weight:600; text-transform:uppercase;
            letter-spacing:.01em; line-height:1.15;
            font-size:clamp(1rem,2vw,1.5rem)}
.plegado .pista{display:block; font-family:var(--lee); font-weight:400;
                color:var(--gris); margin-top:5px;
                font-size:clamp(.78rem,1.1vw,.98rem)}

.plegado-barra .fl{display:grid; place-items:center; width:38px; height:38px;
             border-radius:50%; background:rgba(30,58,224,.09); color:var(--az);
             font-size:1.3rem; font-weight:300; line-height:0;
             transition:transform .4s cubic-bezier(.22,.61,.36,1),
                        background-color .3s ease, color .3s ease}
.plegado-barra:hover .fl{background:rgba(30,58,224,.16)}
.plegado.abierto .fl{transform:rotate(45deg); background:var(--az); color:#fff}

.plegado-cuerpo{display:grid; grid-template-rows:0fr; opacity:0;
                transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1),
                           opacity .45s ease}
.plegado.abierto .plegado-cuerpo{grid-template-rows:1fr; opacity:1}
.plegado-dentro{overflow:hidden}
.plegado-pad{padding:0 clamp(4px,1vw,14px) clamp(26px,3vw,38px)}

.plegado.invita .fl{background:var(--az); color:#fff;
                    animation:invitacion 2.6s ease-out infinite}

@keyframes invitacion{
  0%       {box-shadow:0 0 0 0 var(--pulso,rgba(30,58,224,.42))}
  70%,100% {box-shadow:0 0 0 15px transparent}
}

.proyectos{padding:var(--aire) clamp(20px,3vw,40px)}
.acordeon{max-width:1180px; margin:0 auto; border-top:1px solid var(--borde)}
.acorde{border-bottom:1px solid var(--borde)}

.acorde-barra{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center;
              gap:clamp(14px,2.6vw,34px); width:100%; text-align:left; cursor:pointer;
              background:none; border:0; color:inherit; font:inherit;
              padding:clamp(20px,2.4vw,32px) clamp(6px,1.4vw,18px);
              transition:padding-left .35s ease, background-color .35s ease}
.acorde-barra:hover,.acorde.abierto .acorde-barra{background-color:rgba(14,15,19,.035)}
.acorde.abierto .acorde-barra{padding-left:clamp(14px,2.2vw,30px)}
.acorde .n{font-weight:300; letter-spacing:.14em; color:var(--gris);
           font-size:clamp(.7rem,1vw,.95rem)}
.acorde .nombre{display:block; font-weight:600; text-transform:uppercase; letter-spacing:.01em;
                line-height:1.15; font-size:clamp(1.15rem,2.6vw,2.15rem)}
.acorde .bajada{display:block; color:var(--gris); font-weight:300; margin-top:5px;
                font-size:clamp(.8rem,1.15vw,1.02rem)}
.acorde .tag{font-weight:400; text-transform:uppercase; letter-spacing:.14em; color:var(--az);
             font-size:clamp(.62rem,.85vw,.8rem); white-space:nowrap;
             border:1px solid rgba(30,58,224,.28); background:rgba(30,58,224,.05);
             border-radius:9999px; padding:7px 15px}

.acorde .fl{display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
            font-size:1.05rem; line-height:1;
            background:rgba(30,58,224,.09); color:var(--az);
            transition:transform .4s cubic-bezier(.22,.61,.36,1),
                       background-color .3s ease, color .3s ease}
.acorde-barra:hover .fl{background:rgba(30,58,224,.16)}
.acorde.abierto .fl{transform:rotate(180deg); background:var(--az); color:#fff}

.acorde-cuerpo{display:grid; grid-template-rows:0fr; opacity:0;
               transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease}
.acorde.abierto .acorde-cuerpo{grid-template-rows:1fr; opacity:1}
.acorde-dentro{overflow:hidden}
.acorde-pad{padding:0 clamp(6px,1.4vw,18px) clamp(26px,3vw,40px)}
.acorde-fotos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.acorde-fotos img{width:100%; aspect-ratio:14/9; object-fit:cover; object-position:top center;
                  border-radius:18px; background:var(--negro2); border:1px solid var(--marco)}

.acorde-fotos.sola{grid-template-columns:minmax(0,1fr)}
.acorde-fotos.sola img{aspect-ratio:auto}
.acorde-pie{display:flex; align-items:center; justify-content:space-between;
            gap:clamp(18px,3vw,40px); flex-wrap:wrap; margin-top:18px}
.acorde-pie p{font-family:var(--lee); font-weight:400; color:var(--texto);
              max-width:68ch; line-height:1.65;
              font-size:clamp(.88rem,1.1vw,1.03rem)}

.contacto{padding:var(--aire) clamp(20px,3vw,40px)}
.contacto .caja{max-width:1024px; margin:0 auto;
                display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
                gap:clamp(24px,3vw,44px); align-items:start}
.tarjeta-form{background:var(--negro2); border:1px solid var(--borde); border-radius:24px;
              padding:clamp(24px,3vw,40px)}
.campo{display:block; margin-bottom:18px}
.campo span{display:block; font-weight:500; text-transform:uppercase; letter-spacing:.1em;
            font-size:.72rem; color:var(--gris); margin-bottom:8px}
.campo input,.campo select,.campo textarea{
  width:100%; background:#F7F9FD; color:var(--claro); font:inherit; font-weight:300;
  
  border:1px solid var(--borde); border-radius:12px; padding:14px 16px;
  transition:border-color .25s ease, box-shadow .25s ease}
.campo textarea{min-height:140px; resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--az); box-shadow:0 0 0 3px rgba(30,58,224,.14)}
.tarjeta-form .btn-contacto{width:100%; text-align:center; border:0; cursor:pointer;
                            margin-top:6px}
.aviso-form{color:var(--gris); font-weight:300; font-size:.8rem; margin-top:14px;
            line-height:1.6}

.datos{display:grid; gap:12px}
.dato{background:var(--negro2); border:1px solid var(--borde); border-radius:16px;
      padding:18px 22px; display:flex; justify-content:space-between; gap:16px;
      align-items:center; flex-wrap:wrap}
.dato b{font-weight:500; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem;
        color:var(--gris)}
.dato span{font-weight:400; font-size:.98rem}
.datos .btn-contacto{margin-top:8px; text-align:center}

.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
       background:var(--tinta); border:1px solid var(--az); color:#FFFFFF;
       border-radius:9999px; padding:14px 26px; font-size:.9rem; font-weight:300;
       opacity:0; pointer-events:none; z-index:80;
       transition:opacity .3s ease, transform .3s ease}
.toast.vista{opacity:1; transform:translate(-50%,0)}

.perdida{min-height:calc(100svh - var(--headh)); display:flex; flex-direction:column;
         align-items:center; justify-content:center; text-align:center;
         padding:70px clamp(20px,3vw,40px)}
.perdida h1{font-weight:900; letter-spacing:-.03em; line-height:.9;
            font-size:clamp(5rem,20vw,260px)}
.perdida p{font-family:var(--lee); font-weight:400; color:var(--tinta);
           line-height:1.6; max-width:44ch; margin:18px auto 34px;
           font-size:clamp(1.05rem,1.6vw,1.3rem)}

.perdida.gracias h1{font-size:clamp(2.8rem,11vw,7rem)}
.perdida.gracias p{margin:18px auto 0}
.perdida.gracias .chica{color:var(--gris); margin-top:10px;
                        font-size:clamp(.92rem,1.2vw,1.05rem)}
.perdida .salidas{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
                  margin-top:30px}

.cierre{text-align:center; padding:var(--aire) clamp(20px,3vw,40px) calc(var(--aire) * 1.6)}
.cierre h2{font-weight:900; text-transform:uppercase; line-height:.9; letter-spacing:-.03em;
           font-size:clamp(2.2rem,8vw,120px); margin-bottom:18px}
.cierre p{font-family:var(--lee); font-weight:400; color:var(--tinta);
          line-height:1.6; max-width:48ch; margin:0 auto 34px;
          font-size:clamp(1.05rem,1.6vw,1.32rem)}

.pie{background:var(--negro); padding:clamp(30px,3.4vw,44px) clamp(20px,3vw,40px) 56px;
     text-align:center}
.pie p{font-weight:300; text-transform:uppercase; letter-spacing:.1em; opacity:.6;
       font-size:clamp(.7rem,1vw,.9rem)}
.pie a:hover{opacity:1; color:var(--ci)}

.pie .correo{text-transform:none; letter-spacing:.02em}

.dato .correo{color:var(--az); font-weight:500}
.dato .correo:hover{color:var(--ci)}

.redes{display:flex; justify-content:center; gap:12px; margin-bottom:22px}
.redes a{display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
         border:1px solid rgba(30,58,224,.28); background:rgba(30,58,224,.05);
         color:var(--az);
         transition:background-color .3s ease, color .3s ease,
                    border-color .3s ease, transform .3s ease}
.redes a:hover{background:var(--az); color:#fff; border-color:var(--az);
               transform:translateY(-2px)}
.redes svg{width:20px; height:20px; display:block; fill:currentColor}

.wapp{position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px);
      z-index:60; display:grid; place-items:center; width:56px; height:56px;
      border-radius:50%; background:#25D366; color:#fff;
      box-shadow:0 8px 24px rgba(37,211,102,.42);
      transition:transform .3s ease}
.wapp:hover{transform:scale(1.07)}
.wapp svg{width:30px; height:30px; display:block; fill:currentColor}
.wapp::after{content:""; position:absolute; inset:0; border-radius:50%;
             pointer-events:none; --pulso:rgba(37,211,102,.55);
             animation:invitacion 2.8s ease-out infinite}

body.menu-abierto .wapp{display:none}

.rec-escenario{display:grid; grid-template-columns:auto minmax(0,1fr);
               gap:clamp(28px,4vw,64px); align-items:center}

.rec-marco{position:relative; width:min(310px,86vw); height:560px; margin:0 auto;
           border-radius:28px; border:1px solid var(--borde); background:#fff;
           box-shadow:0 24px 60px rgba(14,15,19,.14); overflow:hidden}

.rec-marco{touch-action:pan-y}
.rec-marco--pc{width:min(560px,92vw); height:400px; border-radius:14px}

@media(min-width:901px){
  .rec-escenario:has(.rec-marco--pc){grid-template-columns:minmax(0,1fr);
                                     gap:clamp(24px,2.8vw,36px); justify-items:center}
  .rec-escenario:has(.rec-marco--pc) .rec-marco--pc{width:min(720px,100%); height:450px}
  .rec-escenario:has(.rec-marco--pc) .rec-pasos{width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(16px,2.2vw,30px)}
  
  .rec-escenario:has(.rec-marco--pc) .rec-paso{grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr auto; gap:6px; padding:15px 0 20px;
    border-bottom:0; border-top:1px solid var(--borde)}
  .rec-escenario:has(.rec-marco--pc) .rec-paso .n{font-size:2rem; width:auto}
  .rec-escenario:has(.rec-marco--pc) .rec-riel{grid-column:1; margin-top:8px}
  
  .rec-escenario:has(.rec-marco--pc) .rec-mando{grid-column:1/-1}
}
.rec-pcbar{display:flex; align-items:center; gap:6px; padding:11px 14px;
           border-bottom:1px solid var(--borde)}
.rec-pcbar i{width:9px; height:9px; border-radius:50%; background:var(--borde)}
.rec-pcbar b{margin-left:8px; font-weight:500; font-size:.7rem; letter-spacing:.06em;
             text-transform:uppercase; color:var(--gris)}

.rec-escena{position:absolute; inset:0; display:flex; flex-direction:column;
            background:#fff; opacity:0; pointer-events:none;
            transition:opacity .45s ease}
.rec-escena.on{opacity:1}
.rec-anim{opacity:0}
.rec-escena.on .rec-anim{animation:rec-sube .45s ease both; animation-delay:var(--d,0s)}
@keyframes rec-sube{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.rec-top{display:flex; align-items:center; gap:12px; padding:14px 16px;
         border-bottom:1px solid var(--borde); font-weight:600; font-size:.92rem}
.rec-top svg{flex:none; display:block}
.rec-cart{margin-left:auto; position:relative; display:flex}
.rec-badge{position:absolute; top:-7px; right:-9px; min-width:16px; height:16px;
           border-radius:9999px; background:var(--az); color:#fff; font-size:.6rem;
           font-weight:600; display:grid; place-items:center; transform:scale(0)}
.rec-escena.on .rec-badge{animation:rec-pop .4s 1.35s both}
@keyframes rec-pop{from{transform:scale(0)} 70%{transform:scale(1.25)} to{transform:scale(1)}}

.rec-chips{display:flex; gap:8px; padding:12px 16px 10px}
.rec-chip{font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
          border:1px solid var(--borde); border-radius:9999px; padding:6px 12px;
          color:var(--gris)}
.rec-chip.on{background:var(--az); border-color:var(--az); color:#fff}
.rec-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:2px 16px 16px;
          flex:1; align-content:center}
.rec-prod{border:1px solid var(--borde); border-radius:12px; overflow:hidden; background:#fff}
.rec-foto{aspect-ratio:4/3; background:linear-gradient(135deg,#E9EDF8,#D6DDEF)}

.rec-foto img,.rec-fichafoto img,.rec-herofoto img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit}
.rec-prod b{display:block; font-weight:500; font-size:.66rem; line-height:1.25;
            padding:7px 10px 0}
.rec-prod i{display:block; font-style:normal; font-weight:600; font-size:.68rem;
            color:var(--az); padding:2px 10px 9px}

.rec-fichafoto{aspect-ratio:16/10; margin:16px 16px 0; border-radius:14px;
               background:linear-gradient(135deg,#E9EDF8,#CDD8EA)}
.rec-nom{padding:14px 16px 0; font-weight:600; font-size:1rem; line-height:1.2}
.rec-desc{padding:6px 16px 0; color:var(--gris); font-weight:300; font-size:.76rem;
          line-height:1.55}
.rec-precio{padding:12px 16px 0; font-weight:800; font-size:1.35rem}
.rec-btn{margin:14px 16px 0; border-radius:9999px; color:#fff; text-align:center;
         padding:13px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
         font-weight:500;
         background:linear-gradient(123deg,#0B1B6B 7%,var(--az) 40%,#1E86FF 72%,var(--ci) 100%)}
.rec-btn.borde{background:none; color:var(--claro); border:2px solid var(--claro); padding:11px}
.rec-btn.verde{background:#1FA855}
.rec-escena.on .rec-btn.pulsa{animation:rec-pulsa .5s .95s}
@keyframes rec-pulsa{50%{transform:scale(.95)}}

.rec-item{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
          padding:14px 16px; border-bottom:1px solid var(--borde); font-size:.78rem}
.rec-item span{font-weight:300}
.rec-item span em{font-style:normal; color:var(--gris); font-size:.86em}
.rec-item b{font-weight:600; white-space:nowrap}
.rec-total{display:flex; justify-content:space-between; padding:16px;
           font-weight:700; font-size:.95rem}
.rec-nota{padding:12px 16px 0; text-align:center; color:var(--gris); font-weight:300;
          font-size:.66rem}

.rec-chat-top{display:flex; align-items:center; gap:10px; padding:12px 14px;
              background:#1FA855; color:#fff; font-weight:600; font-size:.9rem}
.rec-avatar{width:30px; height:30px; border-radius:50%; flex:none;
            background:linear-gradient(135deg,#CDD8EA,#8FA3C8)}
.rec-chatbg{flex:1; background:#EAE6DF; padding:14px 12px; display:flex;
            flex-direction:column; justify-content:flex-end; gap:8px}
.rec-burb{background:#DCF6C8; border-radius:12px 12px 4px 12px; padding:10px 12px;
          max-width:88%; align-self:flex-end; font-size:.7rem; line-height:1.6;
          box-shadow:0 1px 1px rgba(0,0,0,.08)}
.rec-burb.recibe{background:#fff; border-radius:12px 12px 12px 4px; align-self:flex-start}
.rec-linea{display:block}
.rec-hora{display:flex; justify-content:flex-end; align-items:center; gap:4px;
          margin-top:5px; font-size:.58rem; color:#7B8A6E}

.rec-herofoto{aspect-ratio:16/10; margin:16px 16px 0; border-radius:14px;
              background:linear-gradient(135deg,#E2E8F4,#B9C6DE)}
.rec-h1{padding:16px 16px 0; font-weight:800; font-size:1.25rem; line-height:1.15;
        letter-spacing:-.01em}
.rec-sub{padding:7px 16px 0; color:var(--gris); font-weight:300; font-size:.78rem;
         line-height:1.55}
.rec-menu-lista{flex:1; display:flex; flex-direction:column; justify-content:center;
                padding:0 16px}
.rec-menu-lista a{padding:17px 2px; border-bottom:1px solid var(--borde);
                  font-weight:500; text-transform:uppercase; letter-spacing:.04em;
                  font-size:.95rem; display:flex; justify-content:space-between;
                  color:var(--claro)}
.rec-menu-lista a i{font-style:normal; color:var(--gris)}
.rec-pagina{flex:1; overflow:hidden; position:relative}
.rec-largo{position:absolute; inset:0 0 auto 0}
.rec-escena.on .rec-largo{animation:rec-scroll 2.8s ease .5s both}
@keyframes rec-scroll{from{transform:translateY(0)} to{transform:translateY(-190px)}}
.rec-tarj{margin:12px 16px 0; border:1px solid var(--borde); border-radius:12px;
          padding:13px 14px}
.rec-tarj b{display:block; font-weight:600; font-size:.8rem}
.rec-tarj span{display:block; color:var(--gris); font-weight:300; font-size:.7rem;
               line-height:1.5; margin-top:3px}
.rec-form{padding:4px 16px}
.rec-campo{margin-top:11px}
.rec-campo i{display:block; font-style:normal; font-weight:500; text-transform:uppercase;
             letter-spacing:.1em; font-size:.56rem; color:var(--gris); margin-bottom:5px}
.rec-campo b{display:block; border:1px solid var(--borde); border-radius:9px;
             padding:10px 12px; font-weight:300; font-size:.74rem; background:#fff}
.rec-toast{position:absolute; left:16px; right:16px; bottom:18px; z-index:3;
           background:var(--tinta); color:#fff; border-radius:9999px; text-align:center;
           padding:11px; font-size:.68rem; font-weight:300}
.rec-buscador{margin:18px 16px 0; display:flex; align-items:center; gap:9px;
              border:1px solid var(--borde); border-radius:9999px; padding:11px 14px;
              font-size:.76rem; color:var(--gris); box-shadow:0 2px 8px rgba(14,15,19,.06)}
.rec-resultado{margin:16px 16px 0; padding:14px 15px; border:1px solid var(--borde);
               border-radius:12px}
.rec-resultado em{display:block; font-style:normal; font-size:.62rem; color:#1B7A3D}
.rec-resultado b{display:block; font-weight:500; color:#1A3FBF; font-size:.86rem;
                 margin-top:3px; line-height:1.3}
.rec-resultado span{display:block; color:var(--gris); font-weight:300; font-size:.7rem;
                    line-height:1.5; margin-top:4px}

.rec-fila{display:flex; justify-content:space-between; align-items:center; gap:10px;
          padding:11px 16px; border-bottom:1px solid var(--borde); font-size:.74rem}
.rec-fila span{font-weight:300}
.rec-est{font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
         border-radius:9999px; padding:4px 10px; white-space:nowrap}
.rec-est.a{background:#EDF0FB; color:var(--az)}
.rec-est.b{background:#FFF3DC; color:#8A6100}
.rec-est.c{background:#E3F4E6; color:#1B7A3D}
.rec-hoja{width:230px; margin:18px auto 0; background:#fff; border:1px solid var(--borde);
          border-radius:6px; box-shadow:0 14px 34px rgba(14,15,19,.12); padding:16px}
.rec-hoja i{display:block; font-style:normal; font-weight:600; letter-spacing:.1em;
            text-transform:uppercase; font-size:.6rem; color:var(--az)}
.rec-hoja em{display:block; font-style:normal; color:var(--gris); font-size:.58rem;
             margin-top:2px}
.rec-raya{height:6px; border-radius:3px; background:var(--negro2); margin-top:8px}
.rec-raya.corta{width:62%}
.rec-totalito{display:flex; justify-content:space-between; margin-top:12px;
              padding-top:9px; border-top:1px solid var(--borde);
              font-weight:700; font-size:.74rem}
.rec-kpis{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:14px 16px 0}
.rec-kpi{border:1px solid var(--borde); border-radius:11px; padding:11px 12px}
.rec-kpi b{display:block; font-weight:800; font-size:.95rem; letter-spacing:-.01em}
.rec-kpi span{display:block; color:var(--gris); font-weight:300; font-size:.6rem;
              margin-top:2px; line-height:1.35}
.rec-barras{flex:1; display:flex; align-items:flex-end; gap:12px; padding:10px 24px 20px}
.rec-barra{flex:1; border-radius:6px 6px 0 0; height:var(--h);
           background:linear-gradient(180deg,var(--ci),var(--az)); transform-origin:bottom;
           transform:scaleY(0)}
.rec-escena.on .rec-barra{animation:rec-crece .7s ease both; animation-delay:var(--d,0s)}
@keyframes rec-crece{to{transform:scaleY(1)}}

.rec-pasos{display:grid}
.rec-paso{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2.4vw,30px);
          align-items:start; width:100%; text-align:left; background:none; border:0;
          color:inherit; font:inherit; cursor:pointer; padding:17px 2px;
          border-bottom:1px solid var(--borde); opacity:.45; transition:opacity .3s ease}
.rec-paso:first-child{border-top:1px solid var(--borde)}
.rec-paso.on{opacity:1}
.rec-paso .n{width:1.2em; font-weight:900; line-height:.8; letter-spacing:-.04em;
             font-size:clamp(1.6rem,3.2vw,2.4rem);
             color:transparent; -webkit-text-stroke:1.4px rgba(43,75,255,.9)}
@supports not (-webkit-text-stroke:1px red){.rec-paso .n{color:rgba(43,75,255,.55)}}
.rec-paso b{display:block; font-weight:500; text-transform:uppercase; letter-spacing:.02em;
            font-size:clamp(.88rem,1.25vw,1.1rem); margin-bottom:4px}

.rec-paso span span{display:block; font-family:var(--lee); font-weight:400;
                    color:var(--texto); line-height:1.65;
                    font-size:clamp(.88rem,1.15vw,1.02rem)}
.rec-riel{grid-column:2; height:3px; border-radius:2px; background:var(--borde);
          overflow:hidden; margin-top:11px}
.rec-riel i{display:block; height:100%; width:0;
            background:linear-gradient(90deg,var(--az),var(--ci))}
.rec-paso.on.anda .rec-riel i{animation:rec-carga linear forwards;
                              animation-duration:var(--dur,3200ms)}
@keyframes rec-carga{to{width:100%}}

.rec-mando{display:flex; align-items:center; justify-content:center; gap:12px;
           margin-top:clamp(16px,2vw,24px)}
.rec-mando button{display:grid; place-items:center; width:40px; height:40px;
                  padding:0; cursor:pointer; border-radius:50%;
                  border:1px solid rgba(30,58,224,.28); background:rgba(30,58,224,.05);
                  color:var(--az);
                  transition:background-color .25s ease, color .25s ease,
                             border-color .25s ease}
.rec-mando button:hover{background:var(--az); color:#fff; border-color:var(--az)}
.rec-mando svg{width:18px; height:18px; display:block; fill:currentColor}

.rec-mando .rec-play{width:48px; height:48px; background:var(--az); color:#fff;
                     border-color:var(--az)}
.rec-mando .rec-play:hover{filter:brightness(1.12)}
.rec-mando .rec-play svg{width:20px; height:20px}

.rec-escenario.pausa .rec-paso.on.anda .rec-riel i{animation-play-state:paused}

.rec-puntos{display:none}

.banda{background:var(--negro2);
       border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
       padding-top:var(--aire)}
.banda + .banda{border-top:0}

.banda .tarjeta-form,
.banda .dato,
.banda .ejemplo{background:#F7F9FD}

@media(max-width:900px){
  :root{--headh:62px}
  
  .head{grid-template-columns:minmax(0,1fr) auto}
  .head nav{display:none}
  .logo{font-size:21px}
  .servicios-fila{grid-template-columns:minmax(0,1fr)}
  
  .panel img{aspect-ratio:16/9}
  
  .cuerpo-hero{grid-template-columns:minmax(0,1fr);
               
               padding-bottom:clamp(24px,6vw,36px)}
  .columna{display:none}

  .hero-botones{flex-direction:column; align-items:stretch; gap:10px}
  .hero-botones a{width:100%; text-align:center}
  
  .hero-botones.abajo{margin-top:0;
                      padding:0 clamp(20px,3vw,40px) clamp(30px,7vw,44px)}
  .luz{filter:blur(80px); opacity:.62}
  .hito{flex-direction:column; gap:8px; padding:24px 0}
  
  .of{grid-template-columns:auto minmax(0,1fr); gap:14px 18px}
  .of .mas{grid-column:2; justify-self:start; margin-top:14px}
  .incluye{grid-template-columns:minmax(0,1fr)}
  .pantalla{grid-template-columns:minmax(0,1fr); gap:0}
  .ejemplo{grid-template-columns:minmax(0,1fr)}
  .ejemplo img{aspect-ratio:16/9}
  
  .acorde .tag{display:none}
  .acorde-barra{grid-template-columns:auto minmax(0,1fr) auto; gap:14px}
  .acorde-fotos{grid-template-columns:minmax(0,1fr)}
  .acorde-fotos img{border-radius:14px}
  .acorde-pie .btn-fantasma{width:100%; text-align:center}
  .contacto .caja{grid-template-columns:minmax(0,1fr)}
  .puerta{grid-template-columns:auto minmax(0,1fr) auto; gap:12px}
  .puerta .d{display:none}

  .head > .btn-fantasma{display:none}

  .hamb{display:inline-flex; flex-direction:column; justify-content:center;
        gap:5px; width:46px; height:46px; padding:0 11px;
        background:none; border:0; cursor:pointer; justify-self:end}
  .hamb span{display:block; height:2px; width:100%; border-radius:2px;
             background:var(--claro);
             transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease}
  
  .hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .panel-cel{display:flex; flex-direction:column; position:fixed;
             top:var(--headh); left:0; right:0; bottom:0; z-index:70;
             background:var(--negro); overflow-y:auto; overscroll-behavior:contain;
             padding:8px clamp(20px,5vw,28px) 28px;
             opacity:0; visibility:hidden; transform:translateY(-10px);
             transition:opacity .28s ease, transform .28s ease, visibility .28s}
  .panel-cel.abierto{opacity:1; visibility:visible; transform:none}

  .panel-cel .nivel1{display:flex; align-items:center; justify-content:space-between;
                     width:100%; text-align:left; gap:14px;
                     background:none; border:0; color:inherit; font:inherit;
                     padding:18px 2px; min-height:56px;
                     border-bottom:1px solid var(--borde);
                     font-weight:500; text-transform:uppercase; letter-spacing:.04em;
                     font-size:1.05rem; cursor:pointer}
  .panel-cel .nivel1 i{font-style:normal; font-size:.8em; color:var(--gris);
                       transition:transform .35s cubic-bezier(.22,.61,.36,1)}
  .panel-cel .nivel1.on{color:var(--az)}
  .panel-cel .nivel1[aria-expanded="true"]{color:var(--az)}
  .panel-cel .nivel1[aria-expanded="true"] i{transform:rotate(180deg); color:var(--az)}

  .panel-cel .sub{display:grid; grid-template-rows:0fr;
                  transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1)}
  .panel-cel .sub.abierto{grid-template-rows:1fr}
  .panel-cel .sub-dentro{overflow:hidden}
  .panel-cel .sub-pad{padding:6px 0 14px}
  .panel-cel .sub-t{display:block; font-weight:600; text-transform:uppercase;
                    letter-spacing:.14em; font-size:.62rem; color:var(--az);
                    margin:14px 0 2px}
  .panel-cel .sub a{display:flex; align-items:center; gap:10px;
                    padding:13px 0 13px 14px; min-height:48px;
                    border-left:2px solid var(--borde);
                    font-weight:300; font-size:.98rem; color:var(--claro)}
  
  .panel-cel .sub a.aparte{border-left:0; border-top:1px solid var(--borde);
                           margin-top:14px; padding:18px 0 4px}

  .panel-cel .pie-panel{margin-top:auto; padding-top:28px; display:grid; gap:10px}
  .panel-cel .pie-panel .btn-contacto{width:100%; text-align:center}

  body.menu-abierto{overflow:hidden}

  .rec-escenario{grid-template-columns:minmax(0,1fr); gap:0}
  
  .rec-marco{height:min(500px,60svh)}
  .rec-marco--pc{height:min(430px,52svh)}
  .rec-chips{padding:10px 16px 8px}
  .rec-prod i{padding-bottom:7px}
  .rec-kpi b{font-size:.8rem}
  .rec-pasos{margin-top:18px}
  .rec-paso{display:none; border:0; padding:0}
  .rec-paso:first-child{border-top:0}
  .rec-paso.on{display:grid; opacity:1}
  .rec-paso .n{font-size:2rem}
  .rec-mando{margin-top:14px; gap:14px}
  .rec-puntos{display:flex; justify-content:center; gap:9px; margin-top:12px}
  .rec-puntos button{width:26px; height:26px; padding:0; border:0; background:none;
                     cursor:pointer; display:grid; place-items:center}
  .rec-puntos button::before{content:""; width:7px; height:7px; border-radius:50%;
                             background:var(--borde); transition:background .25s ease,
                             transform .25s ease}
  .rec-puntos button[aria-current="true"]::before{background:var(--az); transform:scale(1.5)}

  .of.sola{grid-template-columns:minmax(0,1fr)}
  .of.sola .mas{grid-column:1}

  .plegado-barra{gap:12px; padding:16px 2px}
  .plegado .fl{width:34px; height:34px; font-size:1.15rem}
  .plegado-pad{padding:0 2px clamp(22px,4vw,30px)}

  .wapp{width:52px; height:52px}
  .wapp svg{width:27px; height:27px}
}

@media(max-width:600px){
  
  .comun{grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 16px}
  .comun span{gap:9px; line-height:1.35; font-size:.84rem}
  .comun span::before{width:21px; height:21px; font-size:.68rem}

  .comparar thead th{padding:12px 4px}
  .comparar thead i{display:none}
  .comparar thead b{font-size:.74rem}
  .comparar thead em{font-size:.5rem; padding:3px 8px; letter-spacing:.1em}
  .comparar tbody th{font-size:.8rem; padding:13px 8px 13px 0}
  .comparar tbody td{font-size:.76rem; padding:13px 3px}
  .comparar .si{width:22px; height:22px; font-size:.72rem}
  
  .comparar tfoot td{padding:16px 3px 0}
  .comparar .ver{width:36px; height:36px; padding:0; border-radius:50%}
  .comparar .ver b{display:none}
  .comparar .ver i{font-size:1.05rem}
  .comparar .aca{font-size:.55rem; letter-spacing:.06em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
  .fade{opacity:1; transform:none}
  
  .rec-anim{opacity:1}
  .rec-barra{transform:none}
}