/* Motion y microinteracciones compartidas (todas las páginas). Solo anima opacity/translate/scale para no forzar repintados caros. */
:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-spring:cubic-bezier(.34,1.56,.64,1)}

/* 1. Aparición al hacer scroll (usa `translate`, que no pisa los `transform` de tilt/hover) */
.m-js .m-r{opacity:0;translate:0 18px;transition:opacity .7s var(--m-ease),translate .7s var(--m-ease);transition-delay:var(--m-d,0ms)}
.m-js .m-r.m-in{opacity:1;translate:none}
.m-js .reveal.m-r{transform:none}

/* Títulos palabra por palabra */
.m-w{display:inline-block;opacity:0;translate:0 .45em;transition:opacity .6s var(--m-ease),translate .6s var(--m-ease);transition-delay:calc(var(--m-i,0) * 45ms + var(--m-d,0ms))}
.m-split.m-in .m-w{opacity:1;translate:none}

/* 2. Brillo que sigue al puntero en tarjetas (se pinta en el pseudo-elemento libre) */
.m-spot-a::after,.m-spot-b::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(231,199,126,.16),transparent 62%)}
.m-spot-a:hover::after,.m-spot-b:hover::before{opacity:1}
.m-pos{position:relative}

/* 3. Botones táctiles: presión con resorte, brillo al pasar y flecha que avanza */
.m-press{transition:scale .45s var(--m-spring),translate .45s var(--m-ease),box-shadow .25s,filter .25s;will-change:auto}
.m-press:active,.m-press.m-down{scale:.955;transition-duration:.12s}
.m-shine{position:relative;overflow:hidden;isolation:isolate}
.m-shine-l{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,250,232,.55) 48%,transparent 66%);translate:-120% 0;transition:translate 0s}
.m-shine:hover .m-shine-l{translate:120% 0;transition:translate .8s var(--m-ease)}
.m-arrow{display:inline-block;transition:translate .35s var(--m-spring)}
a:hover>.m-arrow,button:hover>.m-arrow,.tile:hover .m-arrow{translate:4px 0}

/* 4. Enlaces con subrayado que se dibuja */
.fbot a,.links a,.m-ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--m-ease),color .2s}
.fbot a:hover,.links a:hover,.m-ul:hover{background-size:100% 1px}
.fcol a{transition:color .2s,translate .35s var(--m-spring)}
.fcol a:hover{translate:3px 0;color:#E7C77E}

/* 5. Chips y herramientas con rebote suave */
.integrations span,.brand-chip,.chip-b{transition:translate .35s var(--m-spring),border-color .2s,background .2s,color .2s}
.integrations span:hover{translate:0 -2px;border-color:rgba(231,199,126,.55);color:#F6F4EF}

/* Pasos del proceso: el número se ilumina */
.step b{transition:color .25s,text-shadow .25s,scale .4s var(--m-spring);display:inline-block}
.step:hover b{color:#E7C77E;text-shadow:0 0 18px rgba(231,199,126,.55);scale:1.12}

/* 6. Copiar al portapapeles */
.m-copy{margin-left:8px;border:1px solid rgba(209,171,108,.3);background:rgba(209,171,108,.08);color:#E7C77E;border-radius:999px;padding:2px 9px;font:700 10.5px/1.6 inherit;cursor:pointer;vertical-align:middle;transition:background .2s,border-color .2s,scale .35s var(--m-spring)}
.m-copy:hover{background:rgba(209,171,108,.16);border-color:rgba(231,199,126,.6)}
.m-copy[data-done]{background:rgba(132,203,160,.14);border-color:rgba(132,203,160,.5);color:#9FDDB6;scale:1.06}

/* 7. Barra de progreso de lectura */
.m-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:90;transform-origin:0 50%;scale:var(--m-p,0) 1;background:linear-gradient(90deg,#B8923F,#E7C77E);pointer-events:none}

/* 8. Preguntas frecuentes */
.faq{display:grid;gap:10px;margin-top:26px}
.faq-item{border:1px solid var(--stroke,rgba(255,255,255,.12));border-radius:18px;background:rgba(255,255,255,.035);overflow:hidden;transition:border-color .25s,background .25s}
.faq-item[open]{border-color:rgba(209,171,108,.38);background:rgba(209,171,108,.055)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;cursor:pointer;font-weight:650;font-size:15.5px;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid rgba(231,199,126,.7);outline-offset:-2px;border-radius:18px}
.faq-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(209,171,108,.35);display:grid;place-items:center;transition:rotate .45s var(--m-spring),background .25s}
.faq-ic::before,.faq-ic::after{content:"";grid-area:1/1;width:11px;height:1.6px;border-radius:2px;background:#E7C77E}
.faq-ic::after{rotate:90deg;transition:rotate .45s var(--m-spring)}
.faq-item[open] .faq-ic{rotate:180deg;background:rgba(209,171,108,.14)}
.faq-item[open] .faq-ic::after{rotate:0deg}
.faq-a{padding:0 22px 20px;color:var(--ink-2,rgba(246,244,239,.64));font-size:14.5px;line-height:1.7;max-width:76ch}
.faq-head{text-align:center;max-width:720px;margin:0 auto}
.faq-head h2{font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.035em;margin:10px 0 0}
.faq-head p{color:var(--ink-2,rgba(246,244,239,.64));margin-top:12px}
.faq-wrap{max-width:860px;margin:0 auto}

@media (prefers-reduced-motion:reduce){
  .m-js .m-r,.m-w{opacity:1!important;translate:none!important;transition:none!important}
  .m-press,.m-arrow,.m-shine-l,.faq-ic,.faq-ic::after{transition:none!important}
}

/* 9. Transición entre páginas con el isotipo de Entelequia.
   Llegada: html.m-arrive (lo pone un script mínimo en <head>) se desvanece solo con CSS.
   Salida: motion.js añade html.m-leave antes de navegar. */
html.m-arrive::after,html.m-leave::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:url("../logo_isotipo.png") center/88px no-repeat,radial-gradient(circle at 50% 50%,rgba(209,171,108,.22),transparent 42%),#08080A}
html.m-arrive::after{animation:mVeilOut .62s cubic-bezier(.16,1,.3,1) .08s both}
html.m-leave::after{animation:mVeilIn .3s cubic-bezier(.7,0,.84,0) both}
@keyframes mVeilOut{0%{opacity:1;background-size:88px,auto,auto}100%{opacity:0;background-size:120px,auto,auto}}
@keyframes mVeilIn{0%{opacity:0;background-size:64px,auto,auto}100%{opacity:1;background-size:88px,auto,auto}}
@media (prefers-reduced-motion:reduce){html.m-arrive::after,html.m-leave::after{display:none}}

/* 10. Integraciones */
.ix-section{padding-block:clamp(56px,7vw,96px)}
.ix-head{text-align:center;max-width:760px;margin:0 auto}
.ix-head h2{font-size:clamp(28px,4vw,46px);line-height:1.05;letter-spacing:-.04em;margin:10px 0 0}
.ix-head p{color:var(--ink-2,rgba(246,244,239,.64));margin-top:12px}
.ix-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px 0 22px}
.ix-tab{border:1px solid var(--stroke,rgba(255,255,255,.12));background:rgba(255,255,255,.04);color:var(--ink-2,rgba(246,244,239,.64));border-radius:999px;padding:9px 15px;font:700 12.5px var(--fs,inherit);cursor:pointer;transition:background .2s,border-color .2s,color .2s,scale .4s var(--m-spring)}
.ix-tab:hover{border-color:rgba(209,171,108,.45);color:var(--ink,#F6F4EF)}
.ix-tab[aria-pressed=true]{border-color:rgba(209,171,108,.6);background:rgba(209,171,108,.16);color:#E7C77E}
.ix-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ix-tile{display:flex;align-items:center;gap:11px;border:1px solid var(--stroke,rgba(255,255,255,.12));border-radius:16px;background:rgba(255,255,255,.035);padding:12px 13px;min-height:62px;transition:translate .4s var(--m-spring),border-color .25s,background .25s,opacity .3s,scale .3s}
.ix-tile:hover{translate:0 -3px;border-color:rgba(209,171,108,.45);background:rgba(209,171,108,.06)}
.ix-tile.ix-off{display:none}
.ix-tile.ix-in{animation:ixIn .45s var(--m-ease) both;animation-delay:var(--ix-d,0ms)}
@keyframes ixIn{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
.ix-mono{flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font:800 12px/1 var(--fs,inherit);letter-spacing:.02em;color:#171006;transition:rotate .5s var(--m-spring)}
.ix-tile:hover .ix-mono{rotate:-8deg}
.ix-analitica{background:linear-gradient(135deg,#F0D9A6,#D1AB6C)}
.ix-ads{background:linear-gradient(135deg,#E7C77E,#B8923F)}
.ix-crm{background:linear-gradient(135deg,#CFE6D6,#84CBA0)}
.ix-web{background:linear-gradient(135deg,#E9E4DA,#B9B1A2)}
.ix-vivo{background:linear-gradient(135deg,#F6D2A8,#E09A5C)}
.ix-txt{min-width:0}
.ix-name{display:block;font-size:13.5px;font-weight:700;line-height:1.25}
.ix-cat{display:block;font-size:11px;color:var(--ink-3,rgba(246,244,239,.42));margin-top:2px}
@media(max-width:560px){.ix-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ix-tile{padding:10px;gap:9px}.ix-mono{width:30px;height:30px;font-size:11px}.ix-name{font-size:12.5px}}

/* 11. Barra de confianza */
.trust-bar{padding-block:8px 26px}
.tb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tb-list li{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--stroke,rgba(255,255,255,.12));border-radius:16px;background:rgba(255,255,255,.03);padding:14px;transition:border-color .25s,translate .4s var(--m-spring)}
.tb-list li:hover{border-color:rgba(209,171,108,.42);translate:0 -2px}
.tb-list svg{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:#E7C77E;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-list b{display:block;font-size:13.5px;line-height:1.3}
.tb-list span{display:block;font-size:12px;color:var(--ink-3,rgba(246,244,239,.42));margin-top:3px}
.tb-brands{text-align:center;font-size:12.5px;color:var(--ink-3,rgba(246,244,239,.42));margin-top:14px}
.tb-brands b{color:var(--ink-2,rgba(246,244,239,.64))}
.tb-brands a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:920px){.tb-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.tb-list{grid-template-columns:1fr}}

/* 12. Selector de idioma ES | EN */
.lang-sw{order:10;display:inline-flex;align-items:center;gap:2px;border:1px solid var(--stroke,rgba(255,255,255,.12));border-radius:999px;padding:3px;margin-left:10px;background:rgba(255,255,255,.04)}
.lang-sw a{font:800 11px/1 var(--fs,inherit);letter-spacing:.06em;color:var(--ink-3,rgba(246,244,239,.5));padding:7px 9px;border-radius:999px;background:none!important;transition:color .2s,background-color .25s}
.lang-sw a:hover{color:var(--ink,#F6F4EF)}
.lang-sw a[aria-current]{color:#171006;background-color:#D1AB6C!important}
@media(max-width:920px){.lang-sw{order:0;margin:0 8px 0 auto}}