/* ============================================================
   PLEXADEV · HOJA DE ESTILOS DE INICIO (index.html)
   Archivo unico y autosuficiente para esa pagina.
   INDICE:
   A. BASE ........ tokens, reset, contenedor, titulos, botones
   B. LAYOUT ...... barra de progreso, menu, cinta, pie, flotante
   C. SECCIONES ... 01 hero · 02 servicios · 03 paquetes
                    04 sistema en vivo · 05 campanas
                    06 mas servicios · 07 nosotros · 08 SEO
                    09 testimonios · 10 FAQ · 11 contacto
   D. RESPONSIVO .. 1040px, 760px y movimiento reducido
   ============================================================ */



/* ############################################################
   A. BASE
   ############################################################ */

/* == 01. TOKENS ================================================*/
@property --giro{syntax:'<angle>';initial-value:0deg;inherits:false}

:root{
  --tinta:#07100C;
  --placa:#0B1713;
  --placa-2:#102019;
  --papel:#EEF2EC;
  --papel-2:#E1E8DF;

  --verde:#5FD01A;
  --lima:#B7F24A;
  --esmeralda:#0FC46B;
  --turquesa:#16D9C0;
  --ambar:#FFB021;
  --azul:#3B8BFF;
  --violeta:#9A6BFF;
  --verde-hondo:#2C7A0B;
  --acero:#8FA09A;

  --txt-claro:#EAF1EB;
  --txt-claro-mute:#9CB0A8;
  --txt-oscuro:#0C1613;
  --txt-oscuro-mute:#465850;

  --linea-oscura:rgba(143,160,154,.16);
  --linea-clara:rgba(12,22,19,.12);

  --display:'Archivo',system-ui,sans-serif;
  --texto:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --acc:var(--verde);
  --radio:16px;
  --ancho:1520px;
  --pad-sec:clamp(76px,9vw,138px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--txt-claro);
  font-family:var(--texto);font-size:17px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0}
p{margin:0}
::selection{background:var(--verde);color:#06120A}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:6px}

/* == 02. ESTRUCTURA ============================================*/
.envoltura{width:min(100% - clamp(28px,5vw,96px),var(--ancho));margin-inline:auto;position:relative;z-index:2}
.sec{padding-block:var(--pad-sec);position:relative;overflow:hidden}
section[id],main[id]{scroll-margin-top:92px}
.sec--placa{background:var(--placa)}
.sec--honda{background:linear-gradient(180deg,var(--tinta),var(--placa) 40%,var(--tinta))}
.sec--papel{background:var(--papel);color:var(--txt-oscuro)}
.sec--papel h2,.sec--papel h3,.sec--papel h4{color:var(--txt-oscuro)}

/* fondos animados */
.malla::before,.malla::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;pointer-events:none;z-index:0}
.malla::before{width:46vw;height:46vw;left:-12vw;top:-10vw;background:radial-gradient(circle,rgba(95,208,26,.42),transparent 70%);animation:deriva-a 22s ease-in-out infinite alternate}
.malla::after{width:40vw;height:40vw;right:-10vw;bottom:-14vw;background:radial-gradient(circle,rgba(22,217,192,.30),transparent 70%);animation:deriva-b 26s ease-in-out infinite alternate}
@keyframes deriva-a{0%{transform:translate(0,0) scale(1)}100%{transform:translate(9vw,7vw) scale(1.18)}}
@keyframes deriva-b{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-8vw,-6vw) scale(.92)}}

.rejilla-mov::after{content:"";position:absolute;inset:-40px;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(143,160,154,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,160,154,.07) 1px,transparent 1px);
  background-size:64px 64px;animation:corre-rejilla 14s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 75% 70% at 50% 40%,#000,transparent 78%)}
@keyframes corre-rejilla{to{background-position:64px 64px}}

.sec--papel .rejilla-mov::after,.sec--papel.rejilla-mov::after{
  background-image:linear-gradient(rgba(12,22,19,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(12,22,19,.09) 1px,transparent 1px)}

/* == 03. TIPOGRAFÍA DE SECCIÓN =================================*/
.rotulo{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acc);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.rotulo::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--acc);
  box-shadow:0 0 10px var(--acc);animation:late-linea 2.4s ease-in-out infinite}
@keyframes late-linea{0%,100%{width:24px;opacity:1}50%{width:38px;opacity:.55}}
.sec--papel .rotulo{color:var(--verde-hondo)}
.sec--papel .rotulo::before{box-shadow:none}

.titulo{font-size:clamp(31px,4.7vw,56px)}
.titulo em{font-style:normal;background:linear-gradient(100deg,var(--lima),var(--verde) 45%,var(--turquesa));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec--papel .titulo em{background:linear-gradient(100deg,var(--verde-hondo),var(--esmeralda) 60%,#0C9E86);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.entradilla{margin-top:18px;max-width:66ch;color:var(--txt-claro-mute);font-size:clamp(16px,1.6vw,18.5px)}
.sec--papel .entradilla{color:var(--txt-oscuro-mute)}
.cabecera-sec{margin-bottom:clamp(40px,5vw,66px)}
.centrado{text-align:center}
.centrado .rotulo{justify-content:center}
.centrado .entradilla{margin-inline:auto}

/* == 04. BOTONES ===============================================*/
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  font-family:var(--display);font-weight:700;font-size:15.5px;padding:15px 27px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s,color .3s,border-color .3s}
.btn svg{width:18px;height:18px;flex:none}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
.btn:hover::after{animation:destello .8s ease}
@keyframes destello{to{left:130%}}
.btn--wa{background:linear-gradient(120deg,var(--lima),var(--verde) 48%,var(--esmeralda));color:#06120A;
  box-shadow:0 10px 30px -12px rgba(95,208,26,.9)}
.btn--wa:hover{transform:translateY(-3px);box-shadow:0 20px 46px -14px rgba(95,208,26,1)}
.btn--linea{border-color:var(--linea-oscura);color:var(--txt-claro);background:rgba(255,255,255,.04)}
.btn--linea:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-3px);box-shadow:0 0 26px -8px var(--acc)}
.sec--papel .btn--linea{border-color:var(--linea-clara);color:var(--txt-oscuro);background:#fff}
.sec--papel .btn--linea:hover{border-color:var(--acc);color:var(--acc)}
.btn--bloque{width:100%}
.grupo-btn{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* == 05. REVELADO Y EFECTOS COMUNES ============================*/
.revela{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.revela.dentro{opacity:1;transform:none}
.flota{animation:flota-ins 7s ease-in-out infinite}
.borde-vivo{position:relative;isolation:isolate}
.borde-vivo::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--giro),transparent 0 58%,var(--acc) 76%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:giro-borde 6s linear infinite;opacity:0;transition:opacity .35s}
.borde-vivo:hover::before,.borde-vivo.siempre::before{opacity:1}
@keyframes giro-borde{to{--giro:360deg}}


/* ############################################################
   B. LAYOUT
   ############################################################ */

/* == 01. BARRA DE PROGRESO Y MENÚ SUPERIOR ==================== */
.corriente{position:fixed;top:0;left:0;height:2px;width:0;z-index:130;
  background:linear-gradient(90deg,var(--turquesa),var(--verde),var(--lima));box-shadow:0 0 14px rgba(95,208,26,.9)}
.nav{position:fixed;top:0;left:0;right:0;z-index:120;padding-block:14px;border-bottom:1px solid transparent;
  transition:background .35s,backdrop-filter .35s,border-color .35s,padding .35s}
.nav.fija{background:rgba(7,16,12,.86);backdrop-filter:blur(14px);border-bottom-color:var(--linea-oscura);padding-block:9px}
.nav__int{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{display:flex;align-items:center;gap:11px}
.nav__logo img{height:40px;width:auto;aspect-ratio:405/420;filter:drop-shadow(0 0 10px rgba(95,208,26,.35));animation:respira 5s ease-in-out infinite}
@keyframes respira{0%,100%{filter:drop-shadow(0 0 8px rgba(95,208,26,.25))}50%{filter:drop-shadow(0 0 18px rgba(95,208,26,.6))}}
.marca{font-family:var(--display);font-weight:900;font-size:23px;letter-spacing:-.025em;line-height:1}
.marca b{color:#fff;font-weight:900}
.marca i{font-style:normal;font-weight:900;background:linear-gradient(100deg,var(--lima),var(--verde));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.marca small{display:block;font-family:var(--mono);font-size:8.6px;font-weight:400;letter-spacing:.155em;
  text-transform:uppercase;color:var(--txt-claro-mute);margin-top:5px}
.nav__menu{display:flex;align-items:center;gap:28px}
.nav__menu a{font-size:14.5px;font-weight:500;color:var(--txt-claro-mute);position:relative;padding-block:6px;transition:color .25s}
.nav__menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--verde),var(--turquesa));transition:width .3s}
.nav__menu a:hover{color:#fff}
.nav__menu a:hover::after{width:100%}
.nav .btn{padding:11px 20px;font-size:14px}
.nav__burger{display:none;background:none;border:1px solid var(--linea-oscura);border-radius:10px;width:44px;height:44px;cursor:pointer;padding:0;place-items:center}
.nav__burger span{display:block;width:19px;height:2px;background:var(--txt-claro);margin:3.5px auto;transition:.3s}
.nav.abierto .nav__burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.abierto .nav__burger span:nth-child(2){opacity:0}
.nav.abierto .nav__burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* == 02. CINTA DESLIZANTE ==================================== */
.cinta{position:relative;border-block:1px solid var(--linea-oscura);background:rgba(255,255,255,.02);
  padding-block:15px;overflow:hidden;z-index:2}
.cinta__pista{display:flex;gap:0;width:max-content;animation:desliza 34s linear infinite}
.cinta:hover .cinta__pista{animation-play-state:paused}
.cinta span{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-claro-mute);padding-inline:26px;display:inline-flex;align-items:center;gap:26px;white-space:nowrap}
.cinta span::after{content:"";width:6px;height:6px;border-radius:2px;background:var(--verde);transform:rotate(45deg)}
.cinta span:nth-child(3n)::after{background:var(--turquesa)}
.cinta span:nth-child(3n+1)::after{background:var(--lima)}
@keyframes desliza{to{transform:translateX(-50%)}}

/* == 03. PIE DE PÁGINA Y BOTÓN FLOTANTE ====================== */
.pie{position:relative;background:#050C09;padding-block:66px 30px;border-top:1px solid var(--linea-oscura);overflow:hidden}
.pie__rej{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.pie .nav__logo img{height:52px;width:auto;aspect-ratio:405/420}
.marca--pie{font-size:27px}
.pie p{font-size:14.6px;color:var(--txt-claro-mute);max-width:34ch;margin-top:18px}
.pie h5{font-family:var(--display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin:0 0 16px;font-weight:700}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pie ul a{font-size:14.6px;color:var(--txt-claro-mute);transition:color .25s,padding-left .25s}
.pie ul a:hover{color:var(--lima);padding-left:5px}
.pie__base{margin-top:48px;padding-top:22px;border-top:1px solid var(--linea-oscura);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--txt-claro-mute);letter-spacing:.05em}

.wa-flota{position:fixed;right:20px;bottom:20px;z-index:115;width:60px;height:60px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(37,211,102,.8);transition:transform .3s}
.wa-flota:hover{transform:scale(1.09)}
.wa-flota svg{width:31px;height:31px;fill:#fff}
.wa-flota::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:latido 2.4s ease-out infinite}
@keyframes latido{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.75);opacity:0}}


/* ############################################################
   C. SECCIONES DE LA PAGINA DE INICIO
   ############################################################ */

/* == 01. HERO ================================================= */
.hero{position:relative;padding-top:clamp(122px,16vh,172px);padding-bottom:clamp(40px,6vw,70px);
  background:var(--tinta);overflow:hidden}
.hero__rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,58px);align-items:center}
.hero h1{font-size:clamp(40px,6.6vw,80px);font-weight:900;letter-spacing:-.035em;line-height:.97}
.hero h1 .lin{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .lin > span{display:block;transform:translateY(105%);animation:sube 1s cubic-bezier(.19,1,.22,1) forwards}
.hero h1 .lin:nth-child(2) > span{animation-delay:.14s}
@keyframes sube{to{transform:translateY(0)}}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--lima),var(--verde) 40%,var(--turquesa));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(95,208,26,.35))}
.ticker{display:flex;align-items:center;gap:12px;margin-top:26px;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2.2vw,26px);letter-spacing:-.02em;line-height:1.2}
.ticker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verde);flex:none;
  box-shadow:0 0 12px var(--verde);animation:parpadea 1.8s ease-in-out infinite}
.ticker__caja{position:relative;display:inline-block;height:1.35em;overflow:hidden;vertical-align:bottom}
.ticker__medida{visibility:hidden;font-style:normal;white-space:nowrap;display:block}
.ticker em{position:absolute;left:0;top:0;font-style:normal;white-space:nowrap;opacity:0;
  background:linear-gradient(100deg,var(--turquesa),var(--lima));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pasa-palabra 12s cubic-bezier(.2,.7,.2,1) infinite}
.ticker em:nth-of-type(2){animation-delay:3s}
.ticker em:nth-of-type(3){animation-delay:6s}
.ticker em:nth-of-type(4){animation-delay:9s}
@keyframes pasa-palabra{
  0%{transform:translateY(110%);opacity:0}
  3%,21%{transform:translateY(0);opacity:1}
  25%,100%{transform:translateY(-110%);opacity:0}}
.hero__sub{margin-top:26px;max-width:56ch;font-size:clamp(16.5px,1.8vw,19.5px);color:var(--txt-claro-mute)}
.hero__datos{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.chip{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--txt-claro-mute);
  border:1px solid var(--linea-oscura);border-radius:999px;padding:8px 15px;background:rgba(255,255,255,.03);
  display:inline-flex;align-items:center;gap:8px;transition:border-color .3s,transform .3s,color .3s}
.chip:hover{border-color:var(--acc);color:#fff;transform:translateY(-2px)}
.chip b{color:var(--acc);font-weight:600}
.chip--turquesa{--acc:var(--turquesa)}
.chip--lima{--acc:var(--lima)}
.animado{opacity:0;animation:aparece .85s cubic-bezier(.2,.7,.2,1) forwards}
.animado[data-d="1"]{animation-delay:.42s}
.animado[data-d="2"]{animation-delay:.56s}
.animado[data-d="3"]{animation-delay:.70s}
.animado[data-d="4"]{animation-delay:.84s}
@keyframes aparece{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* arte del hero */
.placa-arte{position:relative}
.placa-arte svg{width:100%;height:auto;overflow:visible;animation:flotar 9s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(-10px)}50%{transform:translateY(10px)}}
.trazo-base{fill:none;stroke:rgba(143,160,154,.32);stroke-width:1.2}
.trazo-verde{fill:none;stroke:var(--verde);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:760;stroke-dashoffset:760;animation:dibuja 3s cubic-bezier(.6,0,.2,1) .3s forwards}
.trazo-turquesa{fill:none;stroke:var(--turquesa);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:10 14;
  animation:corre-traza 2.6s linear infinite}
@keyframes corre-traza{to{stroke-dashoffset:-48}}
@keyframes dibuja{to{stroke-dashoffset:0}}
.nodo{fill:var(--placa);stroke:var(--acero);stroke-width:1.4}
.nodo-vivo{fill:var(--verde);stroke:none;animation:parpadea 2.2s ease-in-out infinite}
.nodo-vivo:nth-of-type(2){animation-delay:.7s}
.nodo-vivo:nth-of-type(3){animation-delay:1.4s}
@keyframes parpadea{0%,100%{opacity:1}50%{opacity:.35}}
.rot-svg{font-family:var(--mono);font-size:13px;font-weight:500;fill:#C3D6CD;letter-spacing:.1em;text-transform:uppercase;
  paint-order:stroke;stroke:rgba(6,14,11,.85);stroke-width:4px;stroke-linejoin:round}
.pulso{fill:var(--lima)}
.aro{fill:none;stroke:var(--verde);stroke-width:1.5;animation:aro 3s ease-out infinite}
.aro:nth-of-type(2){animation-delay:1.5s}
@keyframes aro{0%{r:16;opacity:.9}100%{r:70;opacity:0}}
.orbe{position:absolute;border-radius:50%;filter:blur(60px);z-index:-1;pointer-events:none}
.orbe--1{width:340px;height:340px;background:rgba(95,208,26,.32);top:-40px;right:-30px;animation:deriva-a 18s ease-in-out infinite alternate}
.orbe--2{width:280px;height:280px;background:rgba(22,217,192,.25);bottom:-60px;left:-40px;animation:deriva-b 21s ease-in-out infinite alternate}
.insignia{position:absolute;z-index:6;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;
  font-weight:500;letter-spacing:.03em;color:#F2F8F3;background:rgba(6,14,11,.94);backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--acc) 42%,transparent);border-radius:999px;padding:9px 16px;
  box-shadow:0 18px 40px -16px #000,0 0 24px -12px var(--acc);white-space:nowrap;
  animation:flota-ins 6s ease-in-out infinite}
.insignia i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);
  animation:parpadea 1.8s ease-in-out infinite;font-style:normal}
.insignia--1{top:6%;left:-4%;--acc:var(--lima)}
.insignia--2{top:52%;right:-5%;--acc:var(--turquesa);animation-delay:1.2s}
.insignia--3{bottom:2%;left:2%;--acc:var(--ambar);animation-delay:2.4s}
@keyframes flota-ins{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}

/* cinta / marquee */

/* == 02. SERVICIOS ============================================ */
.rej-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tarjeta{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--linea-oscura);border-radius:var(--radio);padding:32px 28px 34px;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s}
.tarjeta::after{content:"";position:absolute;left:-30%;top:0;height:2px;width:60%;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:0;transition:opacity .3s}
.tarjeta:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--acc) 45%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 9%,transparent),rgba(255,255,255,.015))}
.tarjeta:hover::after{opacity:1;animation:barre-luz 1.6s linear infinite}
@keyframes barre-luz{to{left:110%}}
.tarjeta h3{font-size:21px;margin-bottom:10px}
.tarjeta p{color:var(--txt-claro-mute);font-size:15.5px}
.icono{position:relative;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc) 34%,transparent);
  transition:transform .4s,box-shadow .4s}
.icono::before{content:"";position:absolute;inset:-6px;border-radius:18px;border:1px dashed color-mix(in srgb,var(--acc) 40%,transparent);
  opacity:0;transition:opacity .35s;animation:gira-lento 12s linear infinite}
.tarjeta:hover .icono,.mas:hover .icono{transform:translateY(-3px) scale(1.06);box-shadow:0 0 28px -8px var(--acc)}
.tarjeta:hover .icono::before{opacity:1}
@keyframes gira-lento{to{transform:rotate(360deg)}}
.icono svg{width:24px;height:24px;stroke:var(--acc);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lista-pin{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.lista-pin li{display:flex;gap:9px;font-size:14.3px;color:var(--txt-claro-mute)}
.lista-pin li::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:var(--acc);margin-top:8px;transform:rotate(45deg)}

/* == 03. PAQUETES ============================================= */
.rej-paq{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.paq{position:relative;background:#fff;border:1px solid var(--linea-clara);border-radius:20px;padding:34px 30px 32px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s}
.paq::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 25%,transparent));
  background-size:200% 100%;animation:corre-fondo 4s linear infinite}
@keyframes corre-fondo{to{background-position:200% 0}}
.paq::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-90px;top:-90px;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%);
  opacity:.6;transition:transform .6s,opacity .4s}
.paq:hover{transform:translateY(-10px);box-shadow:0 30px 70px -34px rgba(12,22,19,.55);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.paq:hover::after{transform:scale(1.35);opacity:.85}
.paq__clave{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--acc) 70%,#0C1613);position:relative;z-index:1}
.paq__nom{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.2vw,36px);letter-spacing:-.03em;
  color:var(--txt-oscuro);margin-top:6px;position:relative;z-index:1}
.paq__para{font-size:14.6px;color:var(--txt-oscuro-mute);margin-top:8px;position:relative;z-index:1}
.paq__precio{font-family:var(--display);font-weight:900;font-size:clamp(38px,4.4vw,50px);color:var(--txt-oscuro);
  margin:22px 0 2px;letter-spacing:-.035em;line-height:1;position:relative;z-index:1}
.paq__precio span{font-size:14.5px;font-weight:600;color:var(--txt-oscuro-mute);letter-spacing:0}
.paq__lista{list-style:none;padding:0;margin:22px 0 30px;display:grid;gap:11px;position:relative;z-index:1}
.paq__lista li{position:relative;display:flex;gap:11px;font-size:15.2px;color:var(--txt-oscuro-mute);line-height:1.45}
.paq__lista li::before{content:"";flex:none;width:17px;height:17px;margin-top:4px;border-radius:6px;
  background:color-mix(in srgb,var(--acc) 20%,transparent);position:relative}
.paq__lista li::after{content:"";position:absolute;left:4px;top:8px;width:9px;height:5px;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}
.paq .btn{margin-top:auto;position:relative;z-index:1}
.paq--destacado{background:linear-gradient(168deg,var(--placa-2),var(--tinta));border-color:transparent;transform:translateY(-12px)}
.paq--destacado:hover{transform:translateY(-22px)}
.paq--destacado .paq__nom,.paq--destacado .paq__precio{color:#fff}
.paq--destacado .paq__para,.paq--destacado .paq__lista li,.paq--destacado .paq__precio span{color:var(--txt-claro-mute)}
.paq--destacado .paq__clave{color:var(--acc)}
.etiqueta{position:absolute;top:20px;right:20px;z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#06120A;background:var(--acc);padding:6px 12px;border-radius:999px;font-weight:600;
  box-shadow:0 0 22px -4px var(--acc);animation:late-etiqueta 2.6s ease-in-out infinite}
@keyframes late-etiqueta{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.nota-paq{margin-top:34px;font-size:14.8px;color:var(--txt-oscuro-mute);text-align:center}
.nota-paq a{color:var(--verde-hondo);font-weight:600;border-bottom:1px solid currentColor}

/* == 04. SISTEMA EN VIVO (A LA MEDIDA) ======================== */
.medida{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,58px);align-items:center}
.sistema{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(22,217,192,.22);
  background:linear-gradient(180deg,#0C1B17,#081310);box-shadow:0 40px 90px -50px #000,0 0 60px -30px rgba(22,217,192,.5)}
.sistema__barra{display:flex;align-items:center;gap:8px;padding:11px 16px;background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--linea-oscura);font-family:var(--mono);font-size:11.5px;color:var(--txt-claro-mute);letter-spacing:.08em}
.sistema__barra i{width:9px;height:9px;border-radius:50%;background:#3A4A44;font-style:normal}
.sistema__barra i:nth-child(2){background:var(--ambar)}
.sistema__barra i:nth-child(3){background:var(--verde)}
.sistema__barra span{margin-left:auto;display:flex;align-items:center;gap:7px}
.led{width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 10px var(--verde);animation:parpadea 1.6s ease-in-out infinite}
.sistema__cuerpo{display:grid;grid-template-columns:132px 1fr;min-height:400px}
.sistema__menu{border-right:1px solid var(--linea-oscura);padding:16px 0;background:rgba(255,255,255,.015)}
.sistema__menu li{list-style:none;font-family:var(--mono);font-size:11.5px;color:var(--txt-claro-mute);
  padding:9px 16px;display:flex;align-items:center;gap:9px;transition:background .3s,color .3s;border-left:2px solid transparent}
.sistema__menu li::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.5}
.sistema__menu li.on{color:var(--turquesa);background:rgba(22,217,192,.09);border-left-color:var(--turquesa)}
.sistema__panel{padding:18px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
.kpi{border:1px solid var(--linea-oscura);border-radius:11px;padding:12px 13px;background:rgba(255,255,255,.02)}
.kpi small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-claro-mute)}
.kpi b{font-family:var(--display);font-size:22px;font-weight:900;color:#fff;display:block;margin-top:5px;letter-spacing:-.02em}
.kpi .barra{display:block;height:5px;width:100%;border-radius:3px;background:rgba(255,255,255,.09);margin-top:10px;overflow:hidden}
.kpi .barra i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 45%,#fff));width:6%;animation:llena 3.4s cubic-bezier(.3,1,.3,1) infinite}
.kpi:nth-child(1){--acc:var(--verde)}
.kpi:nth-child(2){--acc:var(--turquesa)}
.kpi:nth-child(3){--acc:var(--lima)}
.kpi:nth-child(2) .barra i{animation-delay:.5s}
.kpi:nth-child(3) .barra i{animation-delay:1s}
@keyframes llena{0%{width:6%}45%,60%{width:var(--w,72%)}100%{width:6%}}
.tabla{border:1px solid var(--linea-oscura);border-radius:11px;overflow:hidden}
.tabla__fila{display:grid;grid-template-columns:minmax(0,1fr) 92px 46px;gap:10px;padding:10px 13px;font-family:var(--mono);
  font-size:11.3px;color:var(--txt-claro-mute);border-bottom:1px solid var(--linea-oscura);align-items:center}
.tabla__fila > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabla__fila > span:last-child{text-align:right}
.tabla__fila:last-child{border-bottom:none}
.tabla__fila--cab{background:rgba(255,255,255,.035);color:var(--acero);letter-spacing:.1em;text-transform:uppercase;font-size:9.5px}
.pill{justify-self:start;padding:3px 9px;border-radius:999px;font-size:10px;letter-spacing:.03em;white-space:nowrap;
  background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 34%,transparent)}
.consola{margin-top:14px;border:1px solid var(--linea-oscura);border-radius:11px;background:rgba(0,0,0,.35);
  padding:12px 14px;font-family:var(--mono);font-size:11.3px;color:var(--txt-claro-mute);height:104px;overflow:hidden}
.consola p{display:flex;gap:9px;padding-block:2px;animation:aparece .5s ease}
.consola p b{color:var(--turquesa);font-weight:500}
.consola p u{text-decoration:none;color:var(--lima)}
.sistema-envol{position:relative}
.papel-vuela{position:absolute;left:-30px;bottom:14%;width:88px;padding:10px;border-radius:8px;background:#F6F5EE;
  color:#2A322D;font-family:var(--mono);font-size:8.5px;line-height:1.5;box-shadow:0 18px 40px -18px #000;
  transform-origin:center;animation:vuela-papel 7s ease-in-out infinite;z-index:3}
.papel-vuela i{display:block;height:3px;background:#C9CEC4;border-radius:2px;margin-bottom:4px}
.papel-vuela i:nth-child(2){width:70%}
.papel-vuela i:nth-child(3){width:85%}
@keyframes vuela-papel{
  0%,8%{transform:translate(0,0) rotate(-7deg) scale(1);opacity:1}
  60%{transform:translate(190px,-70px) rotate(12deg) scale(.28);opacity:0}
  61%,100%{transform:translate(0,0) rotate(-7deg) scale(1);opacity:0}
  96%,100%{opacity:1}}
.rej-medida{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.mini{position:relative;border:1px solid var(--linea-oscura);border-radius:13px;padding:19px;background:rgba(255,255,255,.028);
  transition:border-color .35s,background .35s,transform .35s}
.mini:hover{border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent);transform:translateY(-5px)}
.mini h4{font-size:16px;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.mini h4::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--acc);
  box-shadow:0 0 12px var(--acc);flex:none;transform:rotate(45deg)}
.mini p{font-size:14.2px;color:var(--txt-claro-mute);line-height:1.5}

/* proceso */
.proceso{margin-top:clamp(54px,6vw,80px);border-top:1px solid var(--linea-oscura);padding-top:48px}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:paso}
.paso{position:relative;padding-top:34px}
.paso::before{counter-increment:paso;content:"0" counter(paso);position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--acc)}
.paso::after{content:"";position:absolute;top:7px;left:36px;right:-14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),transparent);background-size:200% 100%;animation:corre-fondo 3s linear infinite}
.paso:nth-child(1){--acc:var(--verde)}
.paso:nth-child(2){--acc:var(--turquesa)}
.paso:nth-child(3){--acc:var(--lima)}
.paso:nth-child(4){--acc:var(--esmeralda)}
.paso:last-child::after{display:none}
.paso h4{font-size:17px;margin-bottom:8px}
.paso p{font-size:14.5px;color:var(--txt-claro-mute)}

/* == 05. CAMPAÑAS ============================================= */
.rej-ads{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ad{position:relative;border-radius:20px;padding:38px 34px;overflow:hidden;isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.ad:hover{transform:translateY(-9px)}
.ad--meta{background:linear-gradient(160deg,#0B1B3A,#071021 60%,#0A1730);border:1px solid rgba(59,139,255,.28);
  box-shadow:0 34px 80px -46px #000,0 0 60px -34px rgba(59,139,255,.7);--acc:var(--azul)}
.ad--google{background:linear-gradient(160deg,#12211B,#0A130F 60%,#101C16);border:1px solid rgba(255,176,33,.26);
  box-shadow:0 34px 80px -46px #000,0 0 60px -34px rgba(255,176,33,.55);--acc:var(--ambar)}
.ad::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-120px;top:-130px;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 34%,transparent),transparent 70%);
  animation:deriva-b 16s ease-in-out infinite alternate}
.ad__cab{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ad__chapa{flex:none;display:inline-flex;flex-direction:column;gap:6px;padding:12px 18px;border-radius:14px;
  font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.025em;line-height:1;
  box-shadow:0 16px 34px -18px #000;animation:flota-ins 6s ease-in-out infinite}
.ad__chapa--meta{background:linear-gradient(180deg,#FFFFFF,#E9F2FF);color:#0866FF}
.ad__chapa--google{background:linear-gradient(180deg,#FFFFFF,#F3F4F6);color:#202124}
.ad__chapa u{display:flex;gap:4px;text-decoration:none}
.ad__chapa u i{width:15px;height:3px;border-radius:2px;display:block}
.ad__chapa--meta u i{background:#0064E0}
.ad__chapa--meta u i:nth-child(2){background:#0082FB}
.ad__chapa--meta u i:nth-child(3){background:#00A5FA}
.ad__chapa--meta u i:nth-child(4){background:#7DCBFF}
.ad__chapa--google u i:nth-child(1){background:#4285F4}
.ad__chapa--google u i:nth-child(2){background:#EA4335}
.ad__chapa--google u i:nth-child(3){background:#FBBC04}
.ad__chapa--google u i:nth-child(4){background:#34A853}
.ad__marca{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.ad__marca b{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.02em;color:#fff;margin-top:5px;text-transform:none;line-height:1.15}
.ad h3{font-size:clamp(23px,2.5vw,29px);margin-bottom:12px;color:#fff}
.ad p{color:var(--txt-claro-mute);font-size:15.5px}
.ad__precio{font-family:var(--display);font-weight:900;font-size:clamp(32px,3.8vw,46px);color:#fff;
  margin:22px 0 2px;letter-spacing:-.035em;line-height:1}
.ad__precio span{font-size:14.5px;font-weight:600;color:var(--txt-claro-mute);letter-spacing:0}
.ad__lista{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:10px;font-size:15.1px;color:var(--txt-claro-mute)}
.ad__lista li{display:flex;gap:11px}
.ad__lista li::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--acc);margin-top:8px;transform:rotate(45deg)}
.canales{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.canal{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.8px;color:var(--txt-claro);
  border:1px solid var(--linea-oscura);border-radius:999px;padding:6px 15px 6px 6px;background:rgba(255,255,255,.05);
  transition:transform .3s,border-color .3s,background .3s}
.canal:hover{transform:translateY(-3px);border-color:var(--acc);background:rgba(255,255,255,.09)}
.canal i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none}
.canal i svg{width:15px;height:15px;fill:#fff}
.canal--msg i{background:linear-gradient(135deg,#0099FF,#A033FF 60%,#FF5280)}
.canal--wa i{background:#25D366}
.canal--ig i{background:linear-gradient(45deg,#FEDA75,#FA7E1E 30%,#D62976 60%,#962FBF 90%)}
.aviso{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ambar);background:rgba(255,176,33,.12);border:1px solid rgba(255,176,33,.36);
  padding:7px 13px;border-radius:999px;margin-bottom:16px}
.aviso i{width:7px;height:7px;border-radius:50%;background:var(--ambar);box-shadow:0 0 10px var(--ambar);animation:parpadea 1.4s ease-in-out infinite}
.flujo{display:flex;align-items:center;gap:11px;margin:24px 0 4px;padding:13px 16px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid var(--linea-oscura);
  font-family:var(--mono);font-size:11.5px;color:var(--txt-claro-mute);letter-spacing:.04em}
.flujo b{color:#fff;font-weight:500;white-space:nowrap}
.flujo em{position:relative;flex:1;min-width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.14);font-style:normal}
.flujo em::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 12px var(--acc);animation:viaja 2.6s cubic-bezier(.5,0,.5,1) infinite}
.flujo em:nth-of-type(2)::after{animation-delay:1.3s}
@keyframes viaja{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}

/* == 06. MÁS SERVICIOS ======================================== */
.rej-mas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mas{position:relative;border:1px solid var(--linea-oscura);border-radius:15px;padding:26px 24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  transition:transform .38s cubic-bezier(.2,.7,.2,1),border-color .38s,background .38s}
.mas:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--acc) 45%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,transparent),rgba(255,255,255,.012))}
.mas .icono{width:46px;height:46px;border-radius:13px;margin-bottom:16px}
.mas .icono svg{width:21px;height:21px}
.mas h4{font-size:16.5px;margin-bottom:7px}
.mas p{font-size:14.2px;color:var(--txt-claro-mute);line-height:1.5}

/* == 07. NOSOTROS ============================================= */
.nosotros{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,4.5vw,64px);align-items:center}
.logo-grande{position:relative;display:grid;place-items:center;padding:clamp(34px,5vw,68px) clamp(26px,4vw,52px);
  border-radius:24px;overflow:hidden;isolation:isolate;
  background:linear-gradient(158deg,#FFFFFF,#E7EDE5);border:1px solid var(--linea-clara);
  box-shadow:0 34px 80px -50px rgba(12,22,19,.5)}
.logo-grande::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(12,22,19,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(12,22,19,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 78%)}
.logo-grande::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-45%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(95,208,26,.16),rgba(22,217,192,.14),transparent);
  animation:barre-placa 6.5s ease-in-out infinite}
@keyframes barre-placa{0%{left:-45%}60%,100%{left:115%}}
.logo-grande img{width:min(100%,560px);height:auto;aspect-ratio:820/274;position:relative;z-index:2;animation:flotar 8s ease-in-out infinite}
.logo-grande b{position:absolute;z-index:2;width:16px;height:16px;border:2px solid rgba(44,122,11,.4);border-radius:3px}
.logo-grande b:nth-of-type(1){top:16px;left:16px;border-right:none;border-bottom:none}
.logo-grande b:nth-of-type(2){top:16px;right:16px;border-left:none;border-bottom:none}
.logo-grande b:nth-of-type(3){bottom:16px;left:16px;border-right:none;border-top:none}
.logo-grande b:nth-of-type(4){bottom:16px;right:16px;border-left:none;border-top:none}
.puntos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.punto{display:flex;gap:13px;align-items:flex-start;padding:17px 18px;border-radius:14px;background:#fff;
  border:1px solid var(--linea-clara);transition:transform .35s,box-shadow .35s,border-color .35s}
.punto:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--acc) 45%,transparent);box-shadow:0 20px 46px -30px rgba(12,22,19,.5)}
.punto__ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc) 32%,transparent)}
.punto__ico svg{width:20px;height:20px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.punto b{display:block;font-family:var(--display);font-size:16.5px;margin-bottom:4px;color:var(--txt-oscuro);line-height:1.2}
.punto span{font-size:14.2px;color:var(--txt-oscuro-mute);line-height:1.5}

/* == 08. SEO Y COBERTURA NACIONAL ============================= */
.mapa-cob{position:relative;display:grid;place-items:center;margin-bottom:8px}
.pulso-mx{position:relative;width:100%;max-width:660px;aspect-ratio:16/9;border-radius:22px;overflow:hidden;
  border:1px solid rgba(95,208,26,.24);
  background:radial-gradient(circle at 50% 50%,rgba(95,208,26,.14),transparent 68%),linear-gradient(160deg,#0D1D17,#060E0B);
  box-shadow:0 40px 90px -54px #000,0 0 70px -40px rgba(95,208,26,.6)}
.pulso-mx::before{content:"";position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(rgba(95,208,26,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(95,208,26,.12) 1px,transparent 1px);
  background-size:42px 42px}
.pulso-mx::after{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:1;
  background:conic-gradient(from var(--giro),transparent 0 74%,rgba(95,208,26,.30) 90%,rgba(183,242,74,.42) 97%,transparent);
  animation:giro-borde 5.5s linear infinite}
.pulso-mx b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;font-family:var(--mono);
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#DDEBE2;font-weight:500;
  background:rgba(6,14,11,.72);padding:8px 16px;border-radius:999px;border:1px solid rgba(95,208,26,.3);white-space:nowrap}
.pulso-mx i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--lima);
  box-shadow:0 0 12px var(--lima);z-index:3}
.pulso-mx i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--verde);
  animation:onda 2.6s ease-out infinite}
.pulso-mx i:nth-child(2)::after{animation-delay:.4s}
.pulso-mx i:nth-child(3)::after{animation-delay:.8s}
.pulso-mx i:nth-child(4)::after{animation-delay:1.2s}
.pulso-mx i:nth-child(5)::after{animation-delay:1.6s}
.pulso-mx i:nth-child(6)::after{animation-delay:2s}
.pulso-mx i:nth-child(7)::after{animation-delay:.6s}
.pulso-mx i:nth-child(8)::after{animation-delay:1.4s}
@keyframes onda{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.rej-seo{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.seo-t{position:relative;border:1px solid var(--linea-oscura);border-radius:18px;padding:30px 26px 32px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s}
.seo-t:hover{transform:translateY(-9px);border-color:color-mix(in srgb,var(--acc) 50%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 11%,transparent),rgba(255,255,255,.014))}
.seo-t::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--acc),transparent);
  transform:scaleY(.22);transform-origin:top;transition:transform .5s}
.seo-t:hover::before{transform:scaleY(1)}
.seo-t::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-80px;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%);
  opacity:.5;transition:transform .6s,opacity .4s}
.seo-t:hover::after{transform:scale(1.4);opacity:.9}
.seo-t em{position:relative;z-index:1;display:inline-block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:14px;
  border:1px solid color-mix(in srgb,var(--acc) 38%,transparent);border-radius:999px;padding:5px 12px;
  background:color-mix(in srgb,var(--acc) 12%,transparent)}
.seo-t h3{position:relative;z-index:1;font-size:20px;margin-bottom:12px}
.seo-t p{position:relative;z-index:1;font-size:15.3px;color:var(--txt-claro-mute)}
.seo-t p strong{color:#fff;font-weight:600}
.cinta--seo{margin-top:36px;border-radius:16px;border-color:var(--linea-oscura)}

/* == 09. TESTIMONIOS · 10. FAQ · 11. CONTACTO Y FORMULARIO ==== */
.rej-test{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.test{border:1px solid var(--linea-oscura);border-radius:var(--radio);padding:30px 28px;background:rgba(255,255,255,.03);
  display:flex;flex-direction:column;gap:16px;transition:transform .38s,border-color .38s,background .38s}
.test:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:color-mix(in srgb,var(--acc) 7%,transparent)}
.test__comilla{font-family:var(--display);font-size:46px;line-height:.6;color:var(--acc);opacity:.7;height:24px}
.test p{font-size:15.8px;color:var(--txt-claro);line-height:1.6}
.test__quien{margin-top:auto;padding-top:16px;border-top:1px solid var(--linea-oscura)}
.test__quien b{display:block;font-family:var(--display);font-size:15.5px;font-weight:700}
.test__quien small{font-family:var(--mono);font-size:12px;color:var(--txt-claro-mute);letter-spacing:.06em}

.faq{max-width:920px;margin-inline:auto}
.faq details{border:1px solid var(--linea-clara);border-radius:14px;background:#fff;margin-bottom:12px;
  transition:border-color .3s,box-shadow .3s,transform .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--verde) 45%,transparent);box-shadow:0 22px 50px -38px rgba(12,22,19,.6)}
.faq details:hover{transform:translateY(-2px)}
.faq summary{list-style:none;cursor:pointer;padding:20px 54px 20px 22px;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(16.5px,2vw,19px);color:var(--txt-oscuro)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--verde-hondo);border-bottom:2px solid var(--verde-hondo);
  transform:rotate(45deg);transition:transform .35s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .resp{padding:0 24px 22px;color:var(--txt-oscuro-mute);font-size:15.8px;animation:abre .45s cubic-bezier(.2,.7,.2,1)}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.contacto{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4vw,58px);align-items:start}
.form{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--linea-oscura);border-radius:20px;padding:clamp(26px,3vw,38px)}
.form__paso{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--txt-claro-mute);margin-bottom:10px}
.form__paso b{color:var(--verde);font-weight:600;font-size:12px;letter-spacing:.06em}
.form__prog{height:5px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden;margin-bottom:26px}
.form__prog i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--turquesa),var(--verde) 55%,var(--lima));
  box-shadow:0 0 16px rgba(95,208,26,.7);transition:width .55s cubic-bezier(.2,.7,.2,1)}
.campo{position:relative;margin-bottom:16px}
.campo label{transition:color .25s,transform .25s}
.campo.foco label{color:var(--verde)}
.campo.lleno label{color:var(--lima)}
.campo.lleno:not(:has(select))::after{content:"";position:absolute;right:15px;bottom:17px;width:10px;height:6px;
  border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg);
  animation:aparece .35s ease}
.campo.lleno:has(textarea)::after{bottom:auto;top:44px}
.campo label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-claro-mute);margin-bottom:8px}
.campo input,.campo select,.campo textarea{width:100%;background:rgba(7,16,12,.6);border:1px solid var(--linea-oscura);
  border-radius:11px;padding:13px 15px;color:var(--txt-claro);font-family:var(--texto);font-size:15.5px;
  transition:border-color .25s,box-shadow .25s,background .25s}
.campo textarea{min-height:112px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(95,208,26,.18);background:rgba(7,16,12,.85)}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA09A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.campo select option{background:#0B1713;color:var(--txt-claro)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.trampa{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.legal{font-size:12.8px;color:var(--txt-claro-mute);margin-top:14px;text-align:center}
.dato{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--linea-oscura)}
.dato:last-of-type{border-bottom:none}
.dato__ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.dato__ico svg{width:19px;height:19px;stroke:var(--acc);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dato b{display:block;font-family:var(--display);font-size:16px;margin-bottom:3px}
.dato span{font-size:14.8px;color:var(--txt-claro-mute)}
.dato a{color:var(--verde)}


/* ############################################################
   D. RESPONSIVO
   ############################################################ */

/* == 01. TABLET Y PANTALLAS MEDIANAS (≤1040px) =============== */
@media (max-width:1040px){
  .hero__rejilla{grid-template-columns:1fr;gap:48px}
  .placa-arte{max-width:540px;margin-inline:auto}
  .rej-serv,.rej-test,.rej-mas{grid-template-columns:repeat(2,1fr)}
  .rej-paq{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .paq--destacado{transform:none}
  .paq--destacado:hover{transform:translateY(-10px)}
  .medida,.contacto,.rej-ads,.nosotros{grid-template-columns:1fr}
  .rej-seo{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr);gap:28px 24px}
  .paso:nth-child(2)::after{display:none}
  .pie__rej{grid-template-columns:1fr 1fr;gap:32px}
  .puntos{grid-template-columns:1fr}
  .insignia--1{left:0}
  .insignia--2{right:0}
}
/* == 02. MÓVIL (≤760px): CENTRADOS Y TEXTOS JUSTIFICADOS ===== */
@media (max-width:760px){
  .nav__menu{position:fixed;inset:0 0 auto 0;padding:92px 24px 34px;flex-direction:column;align-items:flex-start;gap:6px;
    background:rgba(7,16,12,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--linea-oscura);
    transform:translateY(-102%);transition:transform .42s cubic-bezier(.2,.7,.2,1);z-index:-1}
  .nav.abierto .nav__menu{transform:translateY(0)}
  .nav__menu a{font-size:19px;font-family:var(--display);font-weight:700;color:var(--txt-claro);padding-block:11px;width:100%}
  .nav__burger{display:grid}
  .nav .nav__cta{display:none}
  .rej-serv,.rej-test,.rej-mas,.pasos,.rej-medida,.kpis,.rej-seo{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .sistema__cuerpo{grid-template-columns:1fr}
  .sistema__menu{display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--linea-oscura);padding:8px}
  .sistema__menu li{border-left:none;border-bottom:2px solid transparent;white-space:nowrap}
  .sistema__menu li.on{border-left-color:transparent;border-bottom-color:var(--turquesa)}
  .papel-vuela{display:none}
  .paso::after{display:none !important}
  .dos{grid-template-columns:1fr}
  .pie__rej{grid-template-columns:1fr;text-align:center;gap:34px}
  .pie .nav__logo{justify-content:center}
  .pie .marca small{text-align:center}
  .pie p{margin-inline:auto;text-align:center}
  .pie ul a:hover{padding-left:0}
  .pie__base{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .rot-svg{display:none}
  .insignia{display:none}
  body{font-size:16px}
  /* títulos centrados */
  .cabecera-sec{text-align:center}
  .cabecera-sec .rotulo,.proceso .rotulo,.hero .rotulo{justify-content:center}
  .cabecera-sec .entradilla{margin-inline:auto}
  .proceso,.hero__rejilla > div:first-child,#medida .medida > div > .revela,#nosotros .nosotros > div > .revela:first-child{text-align:center}
  #nosotros .nosotros > div > .revela:first-child .rotulo{justify-content:center}
  #contacto .contacto > .revela > .rotulo{justify-content:center}
  #contacto .contacto > .revela > .titulo,#contacto .contacto > .revela > .entradilla,#contacto .contacto > .revela > .rotulo{text-align:center;margin-inline:auto}
  .hero__datos,.grupo-btn,.medida .grupo-btn,.ticker{justify-content:center}
  .paso{text-align:center;padding-top:0}
  .paso::before{position:static;display:block;margin-bottom:10px}
  .mini h4,.mas h4,.tarjeta h3,.seo-t h3{justify-content:center;text-align:center}
  .mini h4,.mas h4{display:flex}
  .tarjeta .icono,.mas .icono,.seo-t em{margin-inline:auto}
  .tarjeta,.mas,.seo-t,.mini{text-align:center}
  .lista-pin li,.ad__lista li,.paq__lista li{text-align:left}
  .test{text-align:center}
  .test__comilla{align-self:center}
  /* textos de cuerpo justificados */
  .entradilla,.hero__sub,.tarjeta p,.mini p,.mas p,.seo-t p,.paso p,.ad p,.test p,.faq .resp,.punto span,.paq__para,.pie p{text-align:justify;text-justify:inter-word;hyphens:auto}
  .cabecera-sec .entradilla,.hero__sub{text-align:center;hyphens:manual}
  /* arte del hero más grande y centrado */
  .placa-arte{max-width:420px}
  .logo-grande{padding:22px}
  .logo-grande img{width:min(100%,340px);height:auto}
  .logo-grande b{width:12px;height:12px;top:10px;left:10px}
  .pulso-mx b{font-size:10px;letter-spacing:.16em;padding:6px 12px}
}
/* == 03. MOVIMIENTO REDUCIDO ================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .revela{opacity:1;transform:none}
  .hero h1 .lin > span{transform:none}
  .animado{opacity:1}
  .ticker em:first-of-type{opacity:1;transform:none}
}