/* ==========================================================================
   VELOPZI — Home con movimiento
   Solo se carga en la página de inicio. Se apoya en styles.css y no lo
   modifica. Los textos son los del sitio original.
   Movimiento:
     · Panel en vivo en el hero
     · La ruta: una línea que se dibuja al hacer scroll y una pieza con
       las barras del logo que viaja por ella, encendiendo cada sección
     · Cinta con el slogan que avanza con el scroll
     · "Por qué no somos otra agencia": las tarjetas se desplazan en
       horizontal mientras bajas
     · Parallax, apariciones escalonadas y barras que crecen en el cierre
   El parallax usa la propiedad `translate` y el crecimiento `scale`, para
   no chocar con los `transform` de las animaciones de entrada.
   ========================================================================== */

.home main{position:relative}
.home{--panel:#120C10;--panel-linea:#2A2026}

/* ══════════ HERO ══════════ */
.h-hero{padding-bottom:clamp(3rem,7vw,5.5rem)}
.h-hero::before{ /* retícula tenue: sensación de sistema */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:56px 56px;opacity:.35;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 45%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 75% 45%,#000 20%,transparent 75%);
}
.h-hero__fondo{position:absolute;inset:0;pointer-events:none}
.h-hero__barra{position:absolute;bottom:-14%;width:clamp(70px,8vw,120px);transform:skewX(calc(-1 * var(--angulo)));transform-origin:bottom left}
.h-hero__barra--corta{right:30%;height:62%;background:rgba(245,245,245,.04)}
.h-hero__barra--larga{right:14%;height:115%;background:linear-gradient(180deg,rgba(123,47,247,.3),rgba(123,47,247,.04))}

.h-hero__rejilla{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.h-hero__texto>*{animation:h-sube .9s cubic-bezier(.2,.8,.2,1) both}
.h-hero__texto>*:nth-child(2){animation-delay:.08s}
.h-hero__texto>*:nth-child(3){animation-delay:.16s}
.h-hero__texto>*:nth-child(4){animation-delay:.24s}
.h-hero__texto>*:nth-child(5){animation-delay:.32s}
.h-hero__panel{animation:h-sube 1s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes h-sube{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(max-width:960px){.h-hero__rejilla{grid-template-columns:1fr}}

/* ---------- Panel en vivo ---------- */
.h-panel{
  position:relative;background:var(--panel);border:1px solid var(--panel-linea);
  box-shadow:0 30px 80px -30px rgba(123,47,247,.45),0 0 0 1px rgba(123,47,247,.08);
  display:flex;flex-direction:column;min-height:440px;
}
.h-panel::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--violeta)}
.h-panel__cabecera{display:flex;align-items:center;gap:.6rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--panel-linea)}
.h-panel__logo{font-size:1.3rem}
.h-panel__nombre{font-size:var(--f-sm);font-weight:600;color:var(--blanco)}
.h-panel__vivo{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;color:#8FE3B0;
  background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.25);padding:.18rem .55rem;border-radius:100px}
.h-panel__punto{width:6px;height:6px;border-radius:50%;background:var(--whatsapp);animation:h-latido 1.6s ease-in-out infinite}
@keyframes h-latido{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}50%{box-shadow:0 0 0 5px rgba(37,211,102,0)}}
.h-panel__reloj{margin-left:auto;font-size:var(--f-sm);font-weight:600;color:var(--blanco);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.h-panel__reloj small{font-size:.68rem;font-weight:400;color:var(--gris-texto);margin-left:.2rem}
.h-panel__feed{list-style:none;flex:1;padding:1rem 1.1rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;overflow:hidden;min-height:300px}
.h-evento{
  display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:start;
  padding:.7rem .8rem;background:rgba(255,255,255,.025);border:1px solid var(--panel-linea);
  animation:h-entra .5s cubic-bezier(.2,.8,.2,1) both;transition:opacity .5s ease;
}
.h-evento[data-viejo="true"]{opacity:.45}
@keyframes h-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.h-evento__icono{width:30px;height:30px;display:grid;place-items:center;flex-shrink:0}
.h-evento__icono svg{width:16px;height:16px;fill:currentColor}
.h-evento--sistema .h-evento__icono{background:rgba(123,47,247,.16);color:var(--violeta-claro)}
.h-evento--whatsapp .h-evento__icono{background:rgba(37,211,102,.13);color:var(--whatsapp)}
.h-evento--cita .h-evento__icono{background:var(--violeta);color:#fff}
.h-evento--equipo .h-evento__icono{background:rgba(245,245,245,.1);color:var(--blanco)}
.h-evento__canal{font-size:.66rem;color:var(--gris-texto);letter-spacing:.02em}
.h-evento__t{display:block;font-size:.84rem;font-weight:500;color:var(--blanco);line-height:1.35}
.h-evento__d{display:block;font-size:.74rem;color:var(--gris-texto);line-height:1.5;margin-top:.15rem}
.h-evento__hora{font-size:.68rem;color:var(--gris-tenue);font-variant-numeric:tabular-nums;white-space:nowrap}
.h-evento--cita{border-color:rgba(123,47,247,.5);background:rgba(123,47,247,.1)}
.h-evento--equipo{border-color:rgba(245,245,245,.25)}
.h-panel__pie{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--panel-linea)}
.h-panel__estado{padding:.75rem 1.1rem;display:flex;flex-direction:column;gap:.15rem}
.h-panel__estado+.h-panel__estado{border-left:1px solid var(--panel-linea)}
.h-panel__estado span{font-size:.66rem;color:var(--gris-tenue)}
.h-panel__estado strong{font-size:var(--f-sm);font-weight:600;transition:color .4s}
.h-panel__estado strong[data-on="false"]{color:var(--gris-texto)}
.h-panel__estado strong[data-on="true"]{color:var(--violeta-claro)}
.h-panel__nota{font-size:.68rem;color:var(--gris-tenue);margin-top:.7rem;text-align:right}
@media(max-width:960px){.h-panel__nota{text-align:left}}
@media(max-width:520px){
  .h-panel{min-height:400px}
  .h-panel__feed{min-height:270px;padding:.8rem}
  .h-evento{gap:.6rem;padding:.6rem .65rem}
  .h-evento__icono{width:26px;height:26px}
  .h-panel__vivo{display:none}
}

/* ══════════ LA RUTA (línea + pieza que viaja) ══════════ */
.guia{position:absolute;top:0;left:var(--guia-x,40px);width:0;height:100%;z-index:6;pointer-events:none}
.guia__pista,.guia__relleno{position:absolute;left:0;top:var(--guia-ini,0px);height:var(--guia-largo,0px);transform:translateX(-50%)}
.guia__pista{width:1px;background:repeating-linear-gradient(180deg,rgba(123,47,247,.45) 0 6px,transparent 6px 12px)}
.guia__relleno{width:3px;background:linear-gradient(180deg,rgba(123,47,247,.2),var(--violeta) 85%);
  transform-origin:top;transform:translateX(-50%) scaleY(var(--guia-p,0));box-shadow:0 0 14px rgba(123,47,247,.6)}
.guia__cabeza{
  position:absolute;left:0;top:0;display:flex;align-items:flex-end;gap:3px;
  transform:translate(-50%,calc(var(--guia-y,0px) - 100%)) rotate(var(--guia-giro,0deg));
  filter:drop-shadow(0 0 10px rgba(123,47,247,.75));
}
.guia__barra{display:block;width:8px;transform:skewX(calc(-1 * var(--angulo)));transition:background .3s}
.guia__barra--corta{height:22px;background:var(--blanco)}
.guia__barra--larga{height:28px;background:var(--violeta)}
.guia[data-tono="claro"] .guia__barra--corta{background:var(--negro)}

.guia__nodo{position:absolute;left:0;top:var(--y);height:0}
.guia__rombo{
  position:absolute;left:0;top:0;width:12px;height:18px;transform:translate(-50%,-50%) skewX(calc(-1 * var(--angulo)));
  background:var(--negro);border:2px solid rgba(123,47,247,.55);transition:background .4s,border-color .4s,box-shadow .4s;
}
.guia__nodo[data-claro] .guia__rombo{background:var(--blanco)}
.guia__num{position:absolute;right:16px;top:0;transform:translateY(-50%);font-size:.68rem;font-weight:600;letter-spacing:.08em;color:var(--gris-tenue);transition:color .4s}
.guia__linea{position:absolute;left:10px;top:-1px;height:2px;width:var(--conector,0px);background:var(--violeta);
  transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.guia__nodo[data-on="true"] .guia__rombo{background:var(--violeta);border-color:var(--violeta);box-shadow:0 0 0 6px rgba(123,47,247,.2)}
.guia__nodo[data-on="true"] .guia__num{color:var(--violeta-claro)}
.guia__nodo[data-on="true"] .guia__linea{transform:scaleX(1)}
.guia[data-modo="movil"] .guia__num,.guia[data-modo="movil"] .guia__linea{display:none}
.guia[data-modo="movil"] .guia__rombo{width:8px;height:12px;border-width:1.5px}
.guia[data-modo="movil"] .guia__barra{width:5px}
.guia[data-modo="movil"] .guia__barra--corta{height:14px}
.guia[data-modo="movil"] .guia__barra--larga{height:18px}
.guia[data-modo="movil"] .guia__relleno{width:2px}

/* ══════════ CINTA DEL SLOGAN ══════════ */
.cinta{
  position:relative;z-index:2;background:var(--violeta);overflow:hidden;
  margin:clamp(1rem,3vw,2rem) -4vw clamp(2rem,5vw,3.5rem);padding:clamp(.8rem,1.6vw,1.2rem) 0;
  transform:rotate(-2.5deg);box-shadow:0 20px 50px -20px rgba(123,47,247,.6);
}
.cinta__pista{display:flex;align-items:center;width:max-content;will-change:transform}
.cinta__item{font-size:clamp(1.5rem,4.2vw,3.2rem);font-weight:700;letter-spacing:-.03em;color:var(--negro);white-space:nowrap;line-height:1.1}
.cinta__item strong{color:#fff;font-weight:700}
.cinta__sep{display:inline-flex;align-items:flex-end;gap:5px;margin:0 clamp(1.25rem,3vw,2.5rem)}
.cinta__sep span{display:block;width:clamp(9px,1.1vw,14px);background:var(--negro);transform:skewX(calc(-1 * var(--angulo)))}
.cinta__sep span:first-child{height:clamp(22px,3vw,38px)}
.cinta__sep span:last-child{height:clamp(28px,3.6vw,46px)}

/* ══════════ APARICIONES ══════════ */
/* Títulos que se descubren de abajo hacia arriba */
.home .encabezado-seccion.revelar h2,.home .blog-cabecera.revelar h2{
  clip-path:inset(0 0 100% 0);transform:translateY(.4em);
  transition:clip-path 1s cubic-bezier(.2,.8,.2,1) .1s,transform 1s cubic-bezier(.2,.8,.2,1) .1s;
}
.home .encabezado-seccion.revelar[data-visible="true"] h2,.home .blog-cabecera.revelar[data-visible="true"] h2{clip-path:inset(0 0 -10% 0);transform:none}

/* Hijos que entran uno tras otro */
.home [data-stagger]>*{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.home .revelar[data-visible="true"][data-stagger]>*,
.home .revelar[data-visible="true"] [data-stagger]>*{opacity:1;transform:none}
.home [data-stagger]>*:nth-child(2){transition-delay:.1s}
.home [data-stagger]>*:nth-child(3){transition-delay:.2s}
.home [data-stagger]>*:nth-child(4){transition-delay:.3s}
.home [data-stagger]>*:nth-child(5){transition-delay:.4s}
.home [data-stagger]>*:nth-child(6){transition-delay:.5s}
.home [data-stagger]>*:nth-child(7){transition-delay:.6s}

/* ══════════ LO QUE HACEMOS ══════════ */
/* Cuadros alineados: misma altura, mismo espaciado interno y entre ellos */
.h-servicios{gap:1.25rem;align-items:stretch}
.h-servicios .tarjeta{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;
  padding:1.85rem 1.75rem 1.9rem;border:1px solid #E6E3E8;
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
.h-servicios .tarjeta h3{margin:1.25rem 0 .5rem;font-size:var(--f-lg);line-height:1.3}
.h-servicios .tarjeta p{line-height:1.7;max-width:46ch}
.h-servicios .tarjeta::after{ /* barra violeta que se dibuja al pasar el mouse */
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--violeta);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)
}
.h-servicios .tarjeta:hover{box-shadow:0 18px 40px -18px rgba(25,17,22,.3);border-color:rgba(123,47,247,.35)}
.h-servicios .tarjeta:hover::after{transform:scaleX(1)}
@media(max-width:680px){.h-servicios .tarjeta{padding:1.5rem 1.35rem 1.6rem}}

/* ---------- Íconos animados ---------- */
.h-ico{
  width:60px;height:60px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(123,47,247,.08);border:1px solid rgba(123,47,247,.2);color:var(--violeta);
  transition:background .3s,color .3s,border-color .3s;
}
.h-ico svg{width:40px;height:40px;overflow:visible}
.h-ico svg *{transform-box:fill-box;transform-origin:center}
.h-ico__trazo,.h-ico__onda,.h-ico__eje,.h-ico__linea{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.h-ico__eje{stroke-width:2;opacity:.35}
.tarjeta:hover .h-ico{background:var(--violeta);border-color:var(--violeta);color:#fff}

/* Todas las animaciones esperan a que la sección esté a la vista */
.h-ico *{animation-play-state:paused}
.revelar[data-visible="true"] .h-ico *{animation-play-state:running}

/* 1 · Embudo: los contactos caen, se filtran y sale uno calificado */
.h-ico__gota{fill:currentColor;opacity:0;animation:3s ease-in infinite}
.h-ico__gota--1{animation-name:h-cae-izq}
.h-ico__gota--2{animation-name:h-cae-centro;animation-delay:.5s}
.h-ico__gota--3{animation-name:h-cae-der;animation-delay:1s}
@keyframes h-cae-izq{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}55%{opacity:1;transform:translate(12px,18px)}70%,100%{opacity:0;transform:translate(12px,24px)}}
@keyframes h-cae-centro{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}55%{opacity:1;transform:translate(0,18px)}70%,100%{opacity:0;transform:translate(0,24px)}}
@keyframes h-cae-der{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}55%{opacity:1;transform:translate(-12px,18px)}70%,100%{opacity:0;transform:translate(-12px,24px)}}
.h-ico__salida{fill:currentColor;transform-origin:top;transform-box:fill-box;animation:h-llena 3s ease-in-out infinite}
@keyframes h-llena{0%,40%{transform:scaleY(0)}70%{transform:scaleY(1)}90%,100%{transform:scaleY(1);opacity:0}}

/* 2 · Megáfono: ondas que salen una tras otra */
.h-ico__megafono{animation:h-empuje 1.8s ease-in-out infinite;transform-origin:30% 50%}
@keyframes h-empuje{0%,100%{transform:rotate(0)}10%{transform:rotate(-7deg) scale(1.04)}22%{transform:rotate(0)}}
.h-ico__onda{opacity:0;animation:h-onda 1.8s ease-out infinite;transform-origin:left center}
.h-ico__onda--2{animation-delay:.18s}
.h-ico__onda--3{animation-delay:.36s}
@keyframes h-onda{0%{opacity:0;transform:translateX(-4px) scale(.8)}25%{opacity:1}70%,100%{opacity:0;transform:translateX(4px) scale(1.05)}}

/* 3 · Piezas del mes: se van publicando en orden */
.h-ico__pieza{fill:transparent;stroke:currentColor;stroke-width:2.4;animation:h-publica 3.2s ease-in-out infinite}
.h-ico__pieza--2{animation-delay:.4s}
.h-ico__pieza--3{animation-delay:.8s}
.h-ico__pieza--4{animation-delay:1.2s}
@keyframes h-publica{0%,8%{fill:transparent;transform:scale(1)}18%{fill:currentColor;transform:scale(.82)}28%{transform:scale(1)}75%{fill:currentColor}90%,100%{fill:transparent}}

/* 4 · Plan: la línea se traza y los hitos se encienden */
.h-ico__linea{stroke-dasharray:44;stroke-dashoffset:44;animation:h-traza 3.4s ease-in-out infinite}
@keyframes h-traza{0%{stroke-dashoffset:44}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-44}}
.h-ico__hito{fill:currentColor;transform:scale(0);animation:h-hito 3.4s ease-out infinite}
.h-ico__hito--1{animation-delay:.45s}
.h-ico__hito--2{animation-delay:.8s}
.h-ico__hito--3{animation-delay:1.4s}
@keyframes h-hito{0%{transform:scale(0)}12%{transform:scale(1.35)}20%,55%{transform:scale(1)}70%,100%{transform:scale(0)}}

@media(prefers-reduced-motion:reduce){
  .h-ico *{animation:none!important;opacity:1}
  .h-ico__linea{stroke-dashoffset:0}
  .h-ico__hito{transform:none}
  .h-ico__salida{transform:none}
}

/* ══════════ POR QUÉ NO SOMOS OTRA AGENCIA · desplazamiento horizontal ══════════ */
.h-pin{position:relative}
.h-pin__rejilla{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.h-pin__rejilla>*{min-width:0}
.h-pin__ventana{clip-path:inset(-40px -100vw -40px 0)}
.h-pin__pista{display:flex;gap:1.1rem;will-change:transform}
.h-pin__tarjeta{flex:0 0 clamp(300px,30vw,420px);transition:opacity .15s linear;min-height:330px;padding:2.1rem 1.8rem;position:relative;overflow:hidden}
.h-pin__tarjeta .tarjeta__icono{width:40px;height:40px}
.h-pin__tarjeta h3{font-size:clamp(1.1rem,1.8vw,1.35rem);margin:1.25rem 0 .7rem}
.h-pin__num{position:absolute;right:1rem;top:-.4rem;font-size:6.5rem;font-weight:700;line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(157,107,249,.35)}
.h-pin__progreso{height:3px;background:var(--linea-clara);margin-top:clamp(1.5rem,4vh,2.75rem)}
.h-pin__progreso span{display:block;height:100%;background:var(--violeta);transform-origin:left;transform:scaleX(var(--pin-p,0))}

@media(min-width:961px){
  .h-pin{height:var(--pin-alto,260vh)}
  .h-pin__pegajoso{position:sticky;top:64px;height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
}
@media(max-width:960px){
  .h-pin{padding-block:var(--sec)}
  .h-pin__rejilla{grid-template-columns:1fr}
  .h-pin__ventana{clip-path:none;margin-inline:calc(-1 * var(--pad))}
  .h-pin__pista{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 1rem;scrollbar-width:none;transform:none!important}
  .h-pin__pista::-webkit-scrollbar{display:none}
  .h-pin__tarjeta{flex-basis:82%;scroll-snap-align:start;min-height:0}
  .h-pin__progreso{display:none}
}

/* ══════════ BLOG · luz que sigue al cursor ══════════ */
.h-blog .articulo-tarjeta{position:relative;overflow:hidden;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.h-blog .articulo-tarjeta::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(123,47,247,.22),transparent 70%)
}
.h-blog .articulo-tarjeta:hover::before{opacity:1}
.h-blog .articulo-tarjeta>*{position:relative}
.h-blog .articulo-tarjeta__titulo{font-size:var(--f-base)}

/* ══════════ FAQ ══════════ */
.home .faq__item{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),background .25s}
.home .faq__pregunta{transition:padding .25s,color .25s}
.home .faq__pregunta:hover{padding-left:.6rem;color:var(--violeta-claro)}

/* ══════════ CIERRE · barras que crecen ══════════ */
.h-cierre{position:relative;overflow:hidden}
.h-cierre>.contenedor{position:relative;z-index:1}
.h-cierre__barras{position:absolute;inset:0;pointer-events:none}
.h-cierre__barra{position:absolute;bottom:-5%;width:clamp(60px,9vw,140px);background:var(--negro);
  transform:skewX(calc(-1 * var(--angulo)));transform-origin:bottom left;scale:1 var(--crece,0)}
.h-cierre__barra--corta{right:calc(42% + clamp(70px,11vw,170px));height:78%;opacity:.92}
.h-cierre__barra--larga{right:40%;height:115%}
@media(max-width:860px){
  .h-cierre__barra{width:44px}
  .h-cierre__barra--corta{right:calc(6% + 56px);height:42%}
  .h-cierre__barra--larga{right:4%;height:62%}
}

/* ══════════ Movimiento reducido ══════════ */
@media(prefers-reduced-motion:reduce){
  .h-evento,.h-panel__punto,.h-hero__texto>*,.h-hero__panel{animation:none}
  .home [data-stagger]>*{opacity:1;transform:none}
  .home .encabezado-seccion.revelar h2,.home .blog-cabecera.revelar h2{clip-path:none;transform:none}
  .h-cierre__barra{scale:1 1}
}

/* ══════════════════════════════════════════════════════════
   v3 · Tres pilares: Atrae (Growth) · Conecta (Contenido) · Convierte (Automatización)
   ══════════════════════════════════════════════════════════ */

/* ---------- H1 de SEO, con aspecto de etiqueta ---------- */
.h-hero h1.h-h1{
  font-size:var(--f-xs);color:var(--violeta);letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  line-height:1.4;max-width:none;margin:0 0 1.1rem;
}

/* ---------- Titular: Atrae, conecta y convierte. ---------- */
.h-lema{margin:0;display:flex;flex-wrap:wrap;column-gap:.28em;row-gap:0;
  font-size:clamp(2.6rem,6.6vw,4.9rem);font-weight:700;line-height:1.02;letter-spacing:-.035em;color:var(--blanco)}
.h-lema__palabra{display:inline-block;overflow:hidden;padding-bottom:.08em;position:relative}
.h-lema__palabra>span{display:inline-block;transform:translateY(105%);transition:color .5s ease}
.h-lema__palabra em{font-style:normal}
.h-lema__palabra::after{ /* subrayado con el ángulo de marca */
  content:"";position:absolute;left:0;right:.05em;bottom:.02em;height:.09em;background:var(--violeta);
  transform:scaleX(0) skewX(calc(-1 * var(--angulo)));transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)
}
.h-hero[data-intro="listo"] .h-lema__palabra>span,
.h-lema__palabra[data-in="true"]>span{transform:none;animation:h-palabra .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes h-palabra{from{transform:translateY(105%)}to{transform:none}}
.h-lema__palabra[data-activa="true"]>span{color:var(--violeta)}
.h-lema__palabra[data-activa="true"]::after{transform:scaleX(1) skewX(calc(-1 * var(--angulo)))}

/* Chips de los tres pilares, sincronizados con el titular y el panel */
.h-pilares-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 0}
.h-chip{font-size:var(--f-xs);font-weight:500;letter-spacing:.02em;padding:.35rem .75rem;border:1px solid var(--linea);color:var(--gris-texto);
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s,background .35s,color .35s,border-color .35s}
.h-chip[data-in="true"]{opacity:1;transform:none}
.h-chip[data-activa="true"]{background:var(--violeta);border-color:var(--violeta);color:#fff}

/* Marketing that never stops: las barras se dibujan y luego aparece el texto */
.h-slogan{display:flex;align-items:center;gap:.7rem;margin:1.5rem 0 0;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:300;color:var(--blanco)}
.h-slogan strong{font-weight:600;color:var(--violeta)}
.h-slogan__barras{display:inline-flex;align-items:flex-end;gap:3px;height:1.4em}
.h-slogan__barras i{display:block;width:.42em;background:var(--violeta);transform:skewX(calc(-1 * var(--angulo))) scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.h-slogan__barras i:first-child{height:80%;background:var(--blanco)}
.h-slogan__barras i:last-child{height:100%;transition-delay:.12s}
.h-slogan__texto{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.2,.8,.2,1) .3s}
.h-slogan[data-in="true"] .h-slogan__barras i{transform:skewX(calc(-1 * var(--angulo))) scaleY(1)}
.h-slogan[data-in="true"] .h-slogan__texto{clip-path:inset(0 -2% 0 0)}
.h-hero .hero__sub{margin-top:1.4rem}
.h-hero .entradilla{margin-top:.9rem}

/* El texto del hero entra después del titular */
.h-hero:not(.s-hero) .h-hero__texto>.hero__sub,.h-hero:not(.s-hero) .h-hero__texto>.entradilla,.h-hero:not(.s-hero) .h-hero__texto>.hero__acciones{animation-delay:1.9s}
.h-hero__texto>.h-lema,.h-hero__texto>.h-pilares-chips,.h-hero__texto>.h-slogan{animation:none}

/* ---------- Panel: pestañas de pilares ---------- */
.h-panel__pestanas{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--panel-linea)}
.h-panel__pestanas span{font-size:.7rem;font-weight:500;text-align:center;padding:.55rem .3rem;color:var(--gris-tenue);position:relative;transition:color .35s}
.h-panel__pestanas span+span{border-left:1px solid var(--panel-linea)}
.h-panel__pestanas span::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--violeta);transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.h-panel__pestanas span[data-activa="true"]{color:#fff}
.h-panel__pestanas span[data-activa="true"]::after{transform:scaleX(1)}
.h-evento__pilar{display:inline-block;font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.08rem .35rem;margin-left:.4rem;vertical-align:1px;border:1px solid currentColor;border-radius:2px}
.h-evento--growth .h-evento__icono{background:var(--violeta);color:#fff}
.h-evento--contenido .h-evento__icono{background:rgba(245,245,245,.1);color:var(--blanco)}
.h-evento--growth .h-evento__pilar{color:var(--violeta-claro)}
.h-evento--contenido .h-evento__pilar{color:#D9CFF0}
.h-evento--automatizacion .h-evento__pilar,.h-evento--whatsapp .h-evento__pilar,.h-evento--cita .h-evento__pilar{color:#8FE3B0}
.h-panel__reloj{white-space:nowrap}

/* ══════════ LO QUE HACEMOS · tres pilares ══════════ */
.h-pilar{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--linea-clara)}
.h-pilar:first-of-type{border-top:none;padding-top:.5rem}
.h-pilar__lado{position:sticky;top:110px;align-self:start}
.h-pilar__num{display:block;font-size:var(--f-xs);font-weight:600;letter-spacing:.12em;color:var(--violeta)}
.h-pilar__verbo{position:relative;display:block;font-size:clamp(2.4rem,4.3vw,3.6rem);font-weight:700;letter-spacing:-.045em;line-height:1;margin:.35rem 0 .6rem}
.h-pilar__verbo-base{color:transparent;-webkit-text-stroke:1.5px var(--negro);opacity:.25}
.h-pilar__verbo-lleno{position:absolute;left:0;top:0;color:var(--violeta);clip-path:inset(0 calc(100% - var(--lleno,0) * 100%) 0 0)}
.bloque-claro .h-pilar__nombre{font-size:var(--f-xl);color:var(--negro);margin-bottom:.45rem}
.h-pilar__lado p{font-size:var(--f-sm);line-height:1.7;max-width:34ch}

.h-pilar__servicios{display:grid;gap:1rem}
.h-serv{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.35rem;align-items:start;
  background:var(--blanco-puro);border:1px solid #E6E3E8;padding:1.6rem 1.6rem 1.5rem;overflow:hidden;
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;
}
.h-serv::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--violeta);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.h-serv:hover{box-shadow:0 18px 40px -18px rgba(25,17,22,.3);border-color:rgba(123,47,247,.35)}
.h-serv:hover::after{transform:scaleX(1)}
.h-serv:hover .h-ico{background:var(--violeta);border-color:var(--violeta);color:#fff}
.bloque-claro .h-serv h3{font-size:var(--f-lg);color:var(--negro);line-height:1.3;margin-bottom:.4rem}
.h-serv p{font-size:var(--f-sm);line-height:1.7}
.h-serv__link{display:inline-flex;gap:.35rem;margin-top:.85rem;font-size:var(--f-sm);font-weight:600;color:var(--negro);transition:gap .2s,color .2s}
.h-serv__link:hover{gap:.65rem;color:var(--violeta)}
.h-serv__link::before{content:"";position:absolute;inset:0} /* toda la tarjeta es clicable */
.h-serv__chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.h-serv__chips li{font-size:var(--f-xs);padding:.3rem .6rem;background:rgba(123,47,247,.08);color:var(--violeta-oscuro);border:1px solid rgba(123,47,247,.18)}
.h-serv--ancha{padding:2rem 1.8rem}
.h-pilares__pie{margin-top:2rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}

@media(max-width:860px){
  .h-pilar{grid-template-columns:1fr;gap:1.25rem}
  .h-pilar__lado{position:static}
  .h-pilar__verbo{font-size:clamp(2.6rem,12vw,3.6rem)}
}
@media(max-width:520px){
  .h-serv{grid-template-columns:1fr;gap:1rem;padding:1.4rem 1.25rem}
}

/* ---------- Íconos nuevos ---------- */
/* Consultoría: la brújula busca el norte */
.h-ico__aguja{transform-origin:24px 24px;transform-box:view-box;animation:h-busca 3.6s cubic-bezier(.5,0,.3,1) infinite}
.h-ico__aguja-n{fill:currentColor}
.h-ico__aguja-s{fill:currentColor;opacity:.3}
.h-ico__centro{fill:currentColor}
.h-ico__marcas{opacity:.5}
@keyframes h-busca{0%{transform:rotate(-70deg)}25%{transform:rotate(40deg)}45%{transform:rotate(-18deg)}60%,85%{transform:rotate(0)}100%{transform:rotate(-70deg)}}
/* Branding: se construyen las dos barras de la marca */
.h-ico__barra{fill:currentColor;transform-origin:bottom;transform-box:fill-box;animation:h-construye 3.2s cubic-bezier(.2,.8,.2,1) infinite}
.h-ico__barra--1{opacity:.45}
.h-ico__barra--2{animation-delay:.3s}
@keyframes h-construye{0%{transform:scaleY(0)}30%,80%{transform:scaleY(1)}95%,100%{transform:scaleY(0)}}
.h-ico__chispa{fill:currentColor;transform:scale(0);animation:h-chispa 3.2s ease-out infinite;animation-delay:1s}
@keyframes h-chispa{0%{transform:scale(0) rotate(0)}12%{transform:scale(1.2) rotate(45deg)}25%,70%{transform:scale(1) rotate(90deg)}85%,100%{transform:scale(0) rotate(90deg)}}
/* Web: la página carga y los bloques aparecen */
.h-ico__punto{fill:currentColor;opacity:.6}
.h-ico__carga{fill:currentColor;transform-origin:left;transform-box:fill-box;animation:h-carga 3.4s ease-in-out infinite}
@keyframes h-carga{0%{transform:scaleX(0);opacity:1}35%{transform:scaleX(1);opacity:1}45%,100%{transform:scaleX(1);opacity:0}}
.h-ico__bloque{fill:currentColor;transform-origin:left;transform-box:fill-box;transform:scaleX(0);animation:h-bloque 3.4s cubic-bezier(.2,.8,.2,1) infinite}
.h-ico__bloque--1{animation-delay:.9s}
.h-ico__bloque--2{animation-delay:1.1s;opacity:.45}
.h-ico__bloque--3{animation-delay:1.3s}
@keyframes h-bloque{0%{transform:scaleX(0)}15%,65%{transform:scaleX(1)}80%,100%{transform:scaleX(0)}}

@media(prefers-reduced-motion:reduce){
  .h-lema__palabra>span{transform:none!important;animation:none!important}
  .h-chip{opacity:1;transform:none}
  .h-slogan__barras i{transform:skewX(calc(-1 * var(--angulo))) scaleY(1)}
  .h-slogan__texto{clip-path:none}
  .h-pilar__verbo-lleno{clip-path:none}
}


/* ══════════════════════════════════════════════════════════
   PÁGINAS DE SERVICIO
   ══════════════════════════════════════════════════════════ */
.s-hero__rejilla{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.s-migas{display:flex;flex-wrap:wrap;gap:.45rem;font-size:var(--f-xs);color:var(--gris-tenue);margin-bottom:1.4rem}
.s-migas a{color:var(--gris-texto);transition:color .2s}
.s-migas a:hover{color:var(--violeta-claro)}
.s-migas [aria-current]{color:var(--blanco)}
.s-pilar{margin-bottom:1rem}
.s-hero h1{max-width:18ch;font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1.05}
.s-hero .hero__sub{max-width:34ch}
.s-hero .entradilla{margin-top:1rem}

.s-visual{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:380px;width:100%;justify-self:center}
.s-visual__marco{position:relative;z-index:1;display:grid;place-items:center;width:62%;aspect-ratio:1;
  background:var(--panel);border:1px solid var(--panel-linea);box-shadow:0 30px 80px -30px rgba(123,47,247,.55)}
.s-visual__marco::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--violeta)}
.s-visual .h-ico{width:72%;height:72%;background:transparent;border:none;color:var(--violeta-claro)}
.s-visual .h-ico svg{width:100%;height:100%}
.s-visual .h-ico *{animation-play-state:running}
.s-visual__orbita{position:absolute;inset:4%;border:1px dashed rgba(123,47,247,.35);border-radius:50%;animation:s-gira 40s linear infinite}
.s-visual__orbita::after{content:"";position:absolute;top:-6px;left:50%;width:10px;height:16px;margin-left:-5px;background:var(--violeta);transform:skewX(calc(-1 * var(--angulo)))}
.s-visual__orbita--2{inset:16%;border-color:rgba(245,245,245,.12);animation-duration:26s;animation-direction:reverse}
.s-visual__orbita--2::after{background:var(--blanco);width:8px;height:12px}
@keyframes s-gira{to{transform:rotate(360deg)}}
@media(max-width:860px){
  .s-hero__rejilla{grid-template-columns:1fr}
  .s-visual{max-width:240px;justify-self:start}
}

/* Bloques reutilizados de la página de servicios */
.servicio .s-rejilla .tarjeta{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.servicio .s-rejilla .tarjeta--clara:hover{box-shadow:0 18px 40px -18px rgba(25,17,22,.3)}
.s-destacado{margin-top:1.5rem;background:var(--negro);color:var(--blanco);padding:1.75rem 1.6rem;border-top:3px solid var(--violeta)}
.bloque-claro .s-destacado h3{color:var(--blanco);margin-bottom:.5rem}
.bloque-claro .s-destacado p{color:#B8B2BD;font-size:var(--f-sm);line-height:1.7;max-width:62ch}
.s-relacionados{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.s-relacionados .h-serv{grid-template-columns:1fr;gap:1rem}
.s-rel__pilar{display:block;font-size:var(--f-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--violeta);margin-bottom:.35rem}
.servicio #recorridos{padding-bottom:1rem}
@media(prefers-reduced-motion:reduce){.s-visual__orbita{animation:none}}
.corte--a-oscuro-inv + .seccion{padding-top:clamp(1.5rem,3vw,2.5rem)}
.servicios-ver{display:inline-flex;gap:.35rem;margin-top:.9rem;font-size:var(--f-sm);font-weight:600;color:var(--violeta);transition:gap .2s}
.servicios-ver:hover{gap:.65rem}