/* ════════════════════════════════════════════════════════════
   ENHANCE-V2.CSS — sistema unificado (superficies + motion)
   Basado en el pass del home. Cargar DESPUÉS de enhance.css.
   Principios: Emil Kowalski (curvas), Taste/Impeccable (anti-slop, tinte).
   ════════════════════════════════════════════════════════════ */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}

/* ── Superficie base tintada hacia el hue de marca (no gris puro) ── */
body{background:oklch(.155 .014 300)}

/* ── Motion polish: reveals con ease-out real + blur-in, distancia corta ── */
[data-reveal]{transform:translateY(1.6em);filter:blur(7px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),filter .55s var(--ease-out)}
[data-reveal].revealed{transform:translateY(0);filter:blur(0)}
[data-reveal="left"]{transform:translateX(-1.6em)}
[data-reveal="right"]{transform:translateX(1.6em)}
[data-reveal="left"].revealed,[data-reveal="right"].revealed{transform:translateX(0)}

/* ── Botones: misma curva, respuesta nítida ── */
.boton{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),opacity .25s var(--ease-out)}
.boton:hover{transform:translateY(-3px)}
.boton:active{transform:translateY(0)}

/* ── Superficies tintadas hacia el hue de marca (no gris puro) ── */
/* nivel base: todas las secciones */
main section:not(.temaB){background:oklch(.165 .014 300)!important}
/* bandas: un paso más claras, para dar profundidad */
main section[style*="#141414"],main section[style*="#1E1E1E"],main section[style*="#1e1e1e"],
#comofunciona,#poreso,#home-faq,.stats-section{background:oklch(.198 .016 300)!important}
/* cards: superficie tintada + hairline violeta (excluye CTA con imagen/gradiente) */
main .bloque{background:oklch(.207 .016 300)!important}
.pilar-card .bloque,.visor-card .bloque,.industria-card{border:1px solid rgba(180,160,235,.1)}
#sabermas .bloque{background:none!important}
/* bordes hardcodeados → hairline tintado */
main section[style*="#2a2a2a"]{border-color:rgba(180,160,235,.12)!important}

/* ── Grises y hairlines tintados hacia el violeta ── */
.breadcrumb-bar{border-bottom-color:rgba(180,160,235,.1)}
.faq-item,.faq-item:first-child{border-color:rgba(180,160,235,.12)}

/* ── CTA #sabermas: spotlight que sigue el cursor (estilo KokonutUI) ── */
#sabermas .bloque{isolation:isolate}
#sabermas .bloque::after{content:'';position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .45s var(--ease-out);background:radial-gradient(28em 28em at var(--mx,50%) var(--my,50%),rgba(147,128,225,.2),transparent 62%);pointer-events:none;border-radius:inherit}
#sabermas .bloque:hover::after{opacity:1}
#sabermas .bloque>*{position:relative;z-index:1}
#sabermas .boton{will-change:transform}

/* ── Headers editoriales: unifica .titulo con el lenguaje del home ── */
.titulo{font-weight:700!important;letter-spacing:-.02em!important;line-height:1.1em!important}
.titulo::before{content:'';display:block;width:3.4em;height:2px;background:linear-gradient(90deg,#804A8A,#56689F);margin:0 0 .55em;border-radius:2px}
.titulo.center::before{margin-left:auto;margin-right:auto}
/* no aplicar el acento en los acordeones (FAQ) */
.desplegable .titulo::before,.faq-q .titulo::before{display:none}
/* subtítulos de sección centrados, tono tintado */
.subtitle,.lp-sub{color:oklch(.74 .018 300)}

/* ── Trama: solo en el hero (header). Fuera de las secciones internas ── */
main .trama{display:none!important}
/* ── Adorno viejo: círculo violeta que se desbordaba sobre el texto ── */
.columna.der::before,.columna.izq::before{display:none!important}

/* ── Imágenes: tratamiento único (radio + hairline) ── */
.videolinea,.video,.foto img,.nosotros-foto{border-radius:1.4em}
main .foto img{border:1px solid rgba(180,160,235,.12)}

/* ═══ v5: normalización exacta al sistema del home ═══ */
/* Kicker v3: línea gradiente + palabra */
.kick{display:flex!important;justify-content:center;align-items:center;gap:1em;font-size:1.4em!important;font-weight:600!important;letter-spacing:.28em!important;text-transform:uppercase;color:#8a7fb8!important;margin-bottom:1.6em!important}
.kick::before{content:'';width:3.4em;height:1px;background:linear-gradient(90deg,#804A8A,#56689F)}
/* Título de sección: misma escala del home */
main .titulo{font-size:clamp(3.4em,4vw,5em)!important;line-height:1.05em!important;text-wrap:balance}
/* Flatten GLOBAL del marco viejo (bloquelinea) → card del sistema */
main .bloquelinea{background:none!important;padding:0!important;box-shadow:none!important}
main .bloquelinea .bloque{background:oklch(.207 .016 300)!important;border:1px solid rgba(180,160,235,.12)!important;border-radius:1.4em!important;box-shadow:none!important}
.bloquelinea.gold .bloque{border-color:rgba(212,175,55,.4)!important}
.bloquelinea.black .bloque{border-color:rgba(255,255,255,.22)!important}
.destacado .bloque,.destacado .bloque p{text-align:left!important}
/* Chevrons decorativos: textura, no ruido */
.flechas{opacity:.16!important}
/* barras gradiente decorativas viejas al pie de las cards */
main .item .bloque::before,main .item .bloque::after,main .item .bloquelinea::before,main .item .bloquelinea::after{display:none!important}
/* Licencias: sin badges dorados; pills con hairline */
.dato.icono img{display:none!important}
.dato>div{border-color:rgba(180,160,235,.18)!important}
/* Botones: sin borde blanco ni sombra dura */
.boton,.boton span{box-shadow:none!important}
.boton span{border:0!important}
/* CTA sólido — mismo componente del home */
.v2-cta.cta-solid{position:relative;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:2em;background:linear-gradient(120deg,#804A8A,#56689F);border-radius:2em;padding:6.5em 5em;margin-top:9em}
.v2-cta.cta-solid .cta-txt{position:relative;z-index:2}
.v2-cta.cta-solid .cta-txt h2{color:#fff;text-wrap:balance}
.v2-cta.cta-solid .cta-txt .titulo{font-size:clamp(2.8em,3vw,4.2em)!important}
.v2-cta.cta-solid .cta-txt p{color:rgba(255,255,255,.86);font-size:1.9em;line-height:1.6em}
.v2-cta.cta-solid .cta-over{position:absolute;right:3.5em;bottom:0;height:calc(100% + 9em);width:auto;max-width:none;filter:drop-shadow(0 3em 4em rgba(40,20,50,.55));pointer-events:none;z-index:1}
@media(max-width:820px){.v2-cta.cta-solid{grid-template-columns:1fr;padding:5em 3em;text-align:center}.v2-cta.cta-solid .cta-txt{position:relative;z-index:2}.v2-cta.cta-solid .cta-over{position:static;height:auto;width:auto;max-width:19em;max-height:32em;margin:2.5em auto 0;display:block}}

/* ── Botón blanco del home (contraste sobre gradiente) — compartido ── */
.v2-btn{display:inline-block;background:#fff;border-radius:1em;transition:transform .2s var(--ease-out,ease),box-shadow .2s;box-shadow:0 1em 3em rgba(0,0,0,.25);will-change:transform}
.v2-btn span{display:inline-flex;align-items:center;gap:.6em;padding:1.15em 2.4em;font-size:1.9em;font-weight:700;color:#5b3f86;border:0!important}
.v2-btn span svg path{fill:#5b3f86}
.v2-btn:hover{transform:translateY(-.3em);box-shadow:0 1.5em 4em rgba(0,0,0,.35)}

/* ── Sin cambio de color entre clientes y FAQ (toda la web) ── */
#home-faq{background:transparent!important}

/* ── Player de video: UI nueva (glass → sólido en hover) ── */
.videocontainer .videolinea{background:linear-gradient(135deg,rgba(147,128,225,.28),rgba(86,104,159,.28))!important;border-radius:1.8em!important}
.videocontainer .video{border-radius:1.6em!important}
.videocontainer .video .play div{background:linear-gradient(135deg,#804A8A,#56689F)!important;box-shadow:0 1.2em 3em rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.18)!important}
.videocontainer .video .play div svg path{fill:#fff!important}
.videocontainer .video:hover .play div{background:#fff!important}
.videocontainer .video:hover .play div svg path{fill:#804A8A!important}

/* ── Cards GOLD/BLACK al sistema nuevo (adiós pills plateadas) ── */
#licencias .items .item .bloque .info{padding:1em 3.2em 3.2em}
#licencias .items .item .bloque .info .dato{background:none!important}
#licencias .items .item .bloque .info .dato div{background:rgba(180,160,235,.05)!important;border:1px solid rgba(180,160,235,.14)!important;border-radius:1em!important;padding:1.1em 1.6em!important}
#licencias .items .item .bloque .info .dato.icono div{padding:1.1em 1.6em!important}
#licencias .items .item .bloque .info .dato div p{font-size:1.7em!important;color:#e6e3f2!important;font-weight:500!important}
#licencias .items .item .bloque .info .dato div p strong{color:#fff!important}
#licencias .items .item .bloque .info h3{font-size:1.5em!important;letter-spacing:.22em!important;color:#9380E1!important;margin:.4em 0!important}
#licencias .items .item .bloque .incluye{border-top:1px solid rgba(180,160,235,.14)!important}
#licencias .items .item .bloque .incluye h4{color:#9380E1!important;letter-spacing:.06em}
#licencias .items .item .bloque .incluye p{color:#c9c5da!important}
.bloquelinea.gold .bloque .hexagono,.bloquelinea.black .bloque .hexagono{filter:drop-shadow(0 .6em 1.4em rgba(0,0,0,.5))}

/* ── Fix: título "Resultados" recortado por la sección siguiente ── */
#desarrollos02.npb{padding-bottom:6em!important}
#desarrollos02 .titulo{margin-bottom:0!important;padding-bottom:.12em}

/* ══ Casos de éxito → sistema nuevo (adiós marco púrpura grueso + barra de acento) ══ */
.casoexito{background:oklch(.207 .016 300)!important;border:1px solid rgba(180,160,235,.12)!important;border-radius:2em!important;padding:5em!important}
.casoexito+.casoexito,.espacio6+.casoexito{margin-top:0}
/* caja del logo: hairline sutil, sin barra gradiente vieja */
.casoexito .logo{background:rgba(180,160,235,.04)!important;border:1px solid rgba(180,160,235,.12)!important;border-radius:1.4em!important;padding:2.6em 4em!important;min-height:0!important}
.casoexito .logo::before{display:none!important}
.casoexito .logo span{font-size:2.2em!important;font-weight:400!important;color:#8a7fb8!important;letter-spacing:.02em}
/* encabezados Problema/Solución/Resultado: etiqueta editorial violeta */
.casoexito h4{font-size:1.5em!important;font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase;color:#9380E1!important;line-height:1.2em!important;margin-bottom:.9em!important}
/* cuerpo: aire real entre líneas + tono tintado */
.casoexito p{font-size:1.9em!important;line-height:1.6em!important;font-weight:400!important;color:#c9c5da!important;text-wrap:pretty}
.casoexito p strong{color:#fff!important;font-weight:700}
/* separador: hairline en vez de barra gradiente */
.casoexito .linea{background:rgba(180,160,235,.14)!important;height:1px!important;margin:3em 0!important}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{filter:none!important;transition-duration:.01ms!important}
}