/* ==========================================================================
   locodea. · web · sistema bronce, composición inspirada en evolve.es
   Tokens del DS «Web Design - locodea» (project/tokens.json). Un solo tema, claro.
   ========================================================================== */
:root{
  --paper:#FFFFFF; --ink:#1B1816; --ink-90:rgba(27,24,22,.9); --ink-65:rgba(27,24,22,.65); --ink-45:rgba(27,24,22,.6); --ink-10:rgba(27,24,22,.1); --ink-5:rgba(27,24,22,.05);
  --bronze:#B07A4A; --bronze-hover:#9C6A3E; --bronze-deep:#8E5E34; --bronze-text:#8A5A30; --bronze-light:#D9B48C; --bronze-soft:rgba(176,122,74,.14);
  --sand:#F1EBE2; --sand-2:#F8F4EE; --sand-3:#E8DCCB;
  --dark:#1B1816; --dark-deep:#12100E; --on-dark:#FFFFFF; --on-dark-70:rgba(255,255,255,.7);
  --ok:#01D062; --warn:#FEBC2E;
  --ring:0 0 0 1px rgba(27,24,22,.05);
  --card:0 0 0 1px rgba(27,24,22,.05),0 1px 2px rgba(0,0,0,.03);
  --soft:0 1px 2px rgba(27,24,22,.04),0 14px 40px -16px rgba(27,24,22,.16);
  --soft-hover:0 2px 4px rgba(27,24,22,.04),0 30px 60px -22px rgba(27,24,22,.26);
  --lift:0 24px 48px -16px rgba(80,55,30,.22),0 0 0 1px rgba(27,24,22,.05);
  --glow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -30px rgba(176,122,74,.35);
  --grad-bronze:linear-gradient(134deg,#F1EBE2 0%,#C99B70 50%,#F1EBE2 92%);
  --grad-text:linear-gradient(90deg,#EBD0AE 0%,#B07A4A 45%,#8E5E34 100%);
  --font:"DM Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --r-xs:8px; --r-sm:12px; --r-md:20px; --r-lg:24px; --r-xl:32px; --pill:99px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;overflow-x:hidden}
::selection{background:var(--sand);color:var(--ink)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.04em;line-height:1.06;text-wrap:balance;color:var(--ink-90)}
.h1{font-size:clamp(42px,6.6vw,80px)}
.h2{font-size:clamp(32px,4.4vw,54px)}
.h3{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em}
.h4{font-size:20px;letter-spacing:-.02em;line-height:1.2}
.sub{font-size:18px;color:var(--ink-65);max-width:56ch;line-height:1.5;text-wrap:pretty}
.sub b{font-weight:500;color:var(--ink-90)}
.small{font-size:14px;color:var(--ink-65)}
.brand{font-weight:600;letter-spacing:-.03em;color:var(--ink-90)}
.brand i{font-style:normal;color:var(--bronze)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.container{max-width:1272px;margin-inline:auto;padding-inline:16px}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.pi{width:22px;height:22px;display:block;color:currentColor}
/* icono oficial de producto (archivo svg) */
.pp{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(27,24,22,.18));transition:transform .5s var(--ease),filter .4s ease}

/* ---------- botones, etiquetas ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:var(--pill);font:500 15px/1 var(--font);text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),background-color .2s ease,box-shadow .3s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--dark{background:var(--ink);color:#FFFFFF;box-shadow:0 10px 24px -12px rgba(27,24,22,.5)}
.btn--dark:hover{background:#342D28}
.btn--bronze{background:var(--bronze);color:#FFFFFF;height:50px;padding:0 26px;font-size:16px;box-shadow:0 12px 28px -12px rgba(176,122,74,.7)}
.btn--bronze:hover{background:var(--bronze-hover)}
/* neón bronce que da la vuelta al botón al pasar el ratón: un aro nítido (::after) y su halo difuminado (::before),
   ambos recortados con máscara para no pisar la cara del botón; el ángulo del degradado cónico se anima con @property */
@property --neon{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn--bronze{isolation:isolate}
.btn--bronze::before,.btn--bronze::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s ease;
  background:conic-gradient(from var(--neon),transparent 0 56%,rgba(233,184,122,.85) 70%,#FFD9A6 78%,#FFFBF3 82%,#FFD9A6 86%,rgba(233,184,122,.85) 93%,transparent 100%);
  -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}
.btn--bronze::after{inset:-1.5px;padding:1.5px}
.btn--bronze::before{inset:-9px;padding:9px;filter:blur(8px) saturate(1.4) brightness(1.15)}
.btn--bronze:hover::before,.btn--bronze:hover::after{opacity:1;animation:neon-gira 1.5s linear infinite}
@keyframes neon-gira{to{--neon:360deg}}
.btn--ghost{background:var(--bronze-soft);color:var(--bronze-text);height:50px;padding:0 26px;font-size:16px}
.btn--ghost:hover{background:rgba(176,122,74,.22)}
.btn--white{background:#FFFFFF;color:var(--ink);box-shadow:var(--soft)}
.btn--white:hover{background:#F4F0EA}
.btn--outline{background:rgba(255,255,255,.08);color:#FFFFFF;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.btn--outline:hover{background:rgba(255,255,255,.14)}
.btn--sm{height:40px;padding:0 18px;font-size:14px}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink-90);text-decoration:none;font-size:15px}
.link svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(4px)}
.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.actions--left{justify-content:flex-start}
.eyebrow{font-size:14px;font-weight:500;color:var(--bronze-text);letter-spacing:.01em}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--pill);background:#FFFFFF;box-shadow:var(--card);font-size:13.5px;font-weight:500;color:var(--ink-90);white-space:nowrap;line-height:1.2}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--bronze);font-style:normal;flex:none}
.tag--soft{background:var(--bronze-soft);box-shadow:none;color:var(--bronze-text)}
.tag--dark{background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.08);color:#FFFFFF}
.tag--xs{padding:3px 9px;font-size:11px}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--pill);background:#FFFFFF;box-shadow:var(--card);font-size:12.5px;font-weight:500;color:var(--ink-90);white-space:nowrap}
.pill--soft{background:var(--bronze-soft);box-shadow:none;color:var(--bronze-text)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.dot--warn{background:var(--warn)}
.dot--off{background:var(--ink-10)}

/* ---------- menú (transparente arriba, barra blanca al bajar, como evolve) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px 16px 0;pointer-events:none}
.nav-in{pointer-events:auto;max-width:1240px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 20px;border-radius:var(--pill);background:rgba(255,255,255,0);box-shadow:none;transition:background-color .4s ease,box-shadow .4s ease,backdrop-filter .4s ease}
/* en academy el hero oscuro va por detrás del menú: la píldora blanca se ve desde el principio */
body[data-page="academy"] .nav .nav-in,.nav.is-scrolled .nav-in,.nav.is-open .nav-in{background:rgba(255,255,255,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--card),0 14px 34px -18px rgba(27,24,22,.3)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.03em;color:var(--ink-90);font-size:22px;line-height:1}
.logo em{font-style:normal;color:var(--bronze)}
.logo img{width:28px;height:28px;border-radius:9px}
.nav-links{display:flex;gap:2px}
.nav-links > a,.has-dd > a{position:relative;text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-65);padding:10px 14px;border-radius:var(--pill);white-space:nowrap;transition:background-color .2s,color .2s}
.nav-links > a:hover,.has-dd > a:hover{background:var(--ink-5);color:var(--ink)}
.nav-links > a.is-on,.has-dd > a.is-on{color:var(--ink)}
.nav-links > a.is-on::after,.has-dd > a.is-on::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:var(--bronze)}
.dd{white-space:normal}
.nav-right{display:flex;align-items:center;gap:6px}
.burger{display:none;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;color:var(--ink)}
.burger svg{width:22px;height:22px}
.burger:hover{background:var(--ink-5)}
/* menú móvil a pantalla completa (como el de aave.com): secciones con título gris y tarjetas con icono, título y descripción */
html.menu-open{overflow:hidden}
.nav-in{z-index:2}
.nav-menu{pointer-events:auto;position:fixed;inset:0;z-index:1;display:none;flex-direction:column;padding:88px 16px 32px;overflow-y:auto;background:#FFFFFF;-webkit-overflow-scrolling:touch}
.nav-menu::before{content:"";position:fixed;inset:0;background:radial-gradient(60% 40% at 50% 0%,rgba(176,122,74,.12),rgba(176,122,74,0) 70%);pointer-events:none}
.nav.is-open .nav-menu{display:flex;animation:fadein .3s var(--ease) both}
.mn-title{position:relative;font-size:15px;color:var(--ink-65);margin:18px 0 10px;padding-inline:4px}
.mn-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mn-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:#FFFFFF;box-shadow:var(--ring);text-decoration:none;color:var(--ink-90);opacity:0;transform:translateY(8px);animation:mnin .5s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms + .06s)}
@keyframes mnin{to{opacity:1;transform:none}}
.mn-card .tile{flex:none;width:40px;height:40px;border-radius:12px;background:var(--sand-2);display:grid;place-items:center;color:var(--bronze-text)}
.mn-card .tile .pp{width:24px;height:24px;filter:none}
.mn-card .tile svg{width:20px;height:20px}
.mn-card .tile img{width:24px;height:24px;border-radius:7px}
.mn-card b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em}
.mn-card small{display:block;font-size:13px;color:var(--ink-45);margin-top:1px}
.mn-card.is-on{box-shadow:0 0 0 1.5px var(--bronze)}
.mn-cta{position:relative;margin-top:24px}
@media (max-width:600px){.mn-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.nav-right .btn{display:none}}
/* desplegable de Servicios: mega-panel bajo la píldora del menú (mecánica tipo desution.com: escala .97→1, subida 6px, elementos escalonados) */
.nav-in{position:relative}
.has-dd{position:static;display:flex}
.has-dd > a{display:inline-flex;align-items:center;gap:4px}
.has-dd .chev{width:14px;height:14px;opacity:.5;transform:rotate(90deg);transition:transform .3s var(--ease),opacity .3s}
.has-dd:hover .chev,.has-dd:focus-within .chev{transform:rotate(-90deg);opacity:1}
.dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px) scale(.97);transform-origin:top center;width:min(880px,calc(100vw - 32px));border-radius:28px;background:#FFFFFF;box-shadow:var(--ring),0 40px 100px -20px rgba(27,24,22,.2),0 30px 60px -30px rgba(27,24,22,.3);opacity:0;visibility:hidden;transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1),visibility 0s linear .34s;z-index:60}
.dd::after{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-dd:hover .dd,.has-dd:focus-within .dd,.has-dd.is-open .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);transition-delay:0s}
.has-dd.is-open .chev{transform:rotate(-90deg);opacity:1}
.has-dd.is-open .dd-item{opacity:1;transform:none}
.dd-card{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
.dd-feat{position:relative;display:flex;flex-direction:column;gap:6px;min-height:290px;padding:22px;border-radius:22px;background:var(--dark);color:#FFFFFF;text-decoration:none;overflow:hidden}
.dd-feat::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:80%;background:radial-gradient(50% 50% at 50% 100%,rgba(176,122,74,.45),rgba(176,122,74,0) 70%);pointer-events:none}
.dd-feat > *{position:relative}
.dd-feat .sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-130%);transition:transform 1s var(--ease);pointer-events:none}
.dd-feat:hover .sheen{transform:translateX(130%)}
.dd-feat .ico{width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);display:grid;place-items:center;margin-bottom:auto}
.dd-feat .ico img{width:28px;height:28px;border-radius:8px}
.dd-feat .ey{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-light);margin-top:20px}
.dd-feat b{font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1.15;text-wrap:balance}
.dd-feat p{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.45}
.dd-feat .go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:#FFFFFF;margin-top:10px}
.dd-feat .go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.dd-feat:hover .go svg{transform:translateX(4px)}
.dd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-content:start}
.dd-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;text-decoration:none;color:var(--ink-90);opacity:0;transform:translateY(6px);transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1),background-color .25s;transition-delay:calc(var(--i,0) * 35ms)}
.has-dd:hover .dd-item,.has-dd:focus-within .dd-item{opacity:1;transform:none}
.dd-item:hover{background:var(--sand-2);transition-delay:0s}
.dd-item .tile{flex:none;width:40px;height:40px;border-radius:12px;background:var(--sand-2);display:grid;place-items:center;transition:background-color .25s,box-shadow .25s}
.dd-item:hover .tile{background:#FFFFFF;box-shadow:var(--ring)}
.dd-item .pp{width:24px;height:24px;filter:drop-shadow(0 3px 6px rgba(27,24,22,.16))}
.dd-item .tx{min-width:0;flex:1}
.dd-item .tx b{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-item .tx small{display:block;font-size:12px;color:var(--ink-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.dd-item .arr{flex:none;width:16px;height:16px;color:var(--bronze-text);opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s var(--ease)}
.dd-item:hover .arr{opacity:1;transform:none}
.dd-item--custom .tile{background:var(--ink);color:#FFFFFF}
.dd-item--custom:hover .tile{background:var(--ink)}
.dd-item--custom .tile svg{width:16px;height:16px}
@media (max-width:991px){.dd{display:none}}

/* ---------- estructura ---------- */
main{padding-top:96px}
.sec{padding-block:96px}
.sec--tight{padding-block:48px}
.sec--top{padding-top:8px}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:48px}
.sec-head .sub{margin-inline:auto}
.split-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 48px;align-items:end;margin-bottom:48px}
.split-head .col{gap:14px}
.split-head .sub{max-width:44ch}
.split-head .h2{max-width:15ch}
.page-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:48px 0 56px}
.page-head .sub{margin-inline:auto}
/* Academy, OCULTA hasta que se relance (2026-10-01). No se ha quitado nada: academy.html y su código siguen enteros;
   desde el 2026-10-05 los enlaces ya no están en el HTML (Netlify, con «Pretty URLs», los reescribe a /academy y esta regla no los pillaba); esta regla queda de red. */
a[href="academy.html"],a[href$="/academy"],a[href$="/academy.html"],a[href="academy"]{display:none!important}
/* ---------- academy: lista de espera (prelanzamiento) ---------- */
/* a sangre: ocupa todo el ancho (--vw lo calcula app.js sin la barra de scroll) y sube por detrás del menú flotante; el contenido sigue alineado con la página */
.ac-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;width:var(--vw,100vw);margin:-96px 0 0 calc(50% - var(--vw,100vw) / 2);min-height:min(920px,100svh);padding:150px max(24px,calc((var(--vw,100vw) - 1240px) / 2)) 290px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0.000) calc(100% - 340px),rgba(255,255,255,0.008) calc(100% - 319px),rgba(255,255,255,0.031) calc(100% - 298px),rgba(255,255,255,0.070) calc(100% - 276px),rgba(255,255,255,0.125) calc(100% - 255px),rgba(255,255,255,0.195) calc(100% - 234px),rgba(255,255,255,0.281) calc(100% - 213px),rgba(255,255,255,0.383) calc(100% - 191px),rgba(255,255,255,0.500) calc(100% - 170px),rgba(255,255,255,0.617) calc(100% - 149px),rgba(255,255,255,0.719) calc(100% - 128px),rgba(255,255,255,0.805) calc(100% - 106px),rgba(255,255,255,0.875) calc(100% - 85px),rgba(255,255,255,0.930) calc(100% - 64px),rgba(255,255,255,0.969) calc(100% - 43px),rgba(255,255,255,0.992) calc(100% - 21px),rgba(255,255,255,1.000) calc(100% - 0px),#fff 100%),var(--dark);color:#fff}
/* rejilla muy tenue y halo bronce que respira */
.ac-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 80% at 30% 40%,#000,transparent);mask-image:radial-gradient(70% 80% at 30% 40%,#000,transparent)}
.ac-hero::after{content:"";position:absolute;z-index:-1;width:720px;height:720px;right:-220px;bottom:230px;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 80%);mask-image:linear-gradient(to bottom,#000 45%,transparent 80%);border-radius:50%;background:radial-gradient(closest-side,rgba(176,122,74,.55),rgba(176,122,74,0));animation:acRespira 7s ease-in-out infinite}
@keyframes acRespira{0%,100%{opacity:.7;scale:1}50%{opacity:1;scale:1.08}}
.ac-hero-txt{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.ac-hero .h1{color:#fff;font-size:clamp(40px,5.4vw,72px);letter-spacing:-.045em;line-height:1.02;max-width:14ch}
.ac-hero .h1 .w--acento{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ac-sub{margin:0;font-size:18px;line-height:1.5;color:var(--on-dark-70);max-width:44ch}
.ac-cuenta{display:flex;align-items:flex-start;gap:10px}
.ac-cuenta div{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:12px 8px 10px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ac-cuenta b{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ac-cuenta small{margin-top:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ac-cuenta i{font-style:normal;font-size:26px;line-height:58px;color:rgba(255,255,255,.3)}
.ac-rapido{display:flex;gap:8px;width:100%;max-width:470px;padding:6px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ac-rapido input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 16px;color:#fff;font:inherit;font-size:15px}
.ac-rapido input::placeholder{color:rgba(255,255,255,.45)}
.ac-rapido.is-err{box-shadow:inset 0 0 0 1px #E0625A;animation:paTiembla .4s ease}
.ac-dentro{display:flex;align-items:flex-start;gap:12px;max-width:470px;margin:0;padding:14px 18px;border-radius:18px;background:rgba(176,122,74,.16);box-shadow:inset 0 0 0 1px rgba(217,180,140,.4);color:rgba(255,255,255,.85);font-size:15px;line-height:1.45;animation:acPase2 .6s cubic-bezier(.34,1.56,.64,1) both}
.ac-dentro svg{width:22px;height:22px;flex:none;padding:4px;border-radius:50%;background:var(--bronze);color:#fff}
.ac-dentro b{color:#fff}
.ac-dentro em{font-style:normal;color:var(--bronze-light)}
@keyframes acPase2{from{opacity:0;translate:0 10px;scale:.97}}
.ac-nota{margin:-6px 0 0;font-size:13.5px;color:rgba(255,255,255,.6)}
.ac-nota b{color:#fff;font-weight:600}
/* pila de perfiles buscados que van pasando */
.ac-ofertas{display:flex;flex-direction:column;gap:14px}
.ac-ofertas-t{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ac-pila{position:relative;height:250px}
.ac-ofertas-nota{font-size:11px;color:rgba(255,255,255,.4)}
.ac-of{position:absolute;left:0;right:0;top:0;padding:18px 20px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -24px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:10px;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease;transform-origin:50% 0}
.ac-of[data-p="0"]{transform:translateY(0) scale(1);opacity:1;z-index:3}
.ac-of[data-p="1"]{transform:translateY(22px) scale(.94);opacity:.75;z-index:2}
.ac-of[data-p="2"]{transform:translateY(42px) scale(.88);opacity:.45;z-index:1}
.ac-of[data-p="3"]{transform:translateY(60px) scale(.82);opacity:0;z-index:0}
.ac-of[data-p="sale"]{transform:translateY(-14px) scale(.98);opacity:0;z-index:4}
.ac-of{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;gap:10px;padding:16px 18px 14px}
.ac-of-guardar{position:absolute;top:14px;right:14px;width:18px;height:18px;color:#666}
.ac-of-top{display:flex;align-items:flex-start;gap:12px;padding-right:22px}
.ac-of-logo{width:48px;height:48px;border-radius:8px;flex:none;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.ac-of-logo svg{width:48px;height:48px;display:block}
.ac-of-top > span:last-child{display:flex;flex-direction:column;min-width:0;gap:1px}
.ac-of-top b{font-size:15.5px;font-weight:600;color:#0A66C2;letter-spacing:-.005em;line-height:1.25}
.ac-of-top small{font-size:13px;color:#1B1816}
.ac-of-top small.lugar{color:#666}
.ac-of-datos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ac-of-datos li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#444}
.ac-of-datos li b{font-weight:600;color:#1B1816}
.ac-of-datos svg{width:15px;height:15px;flex:none;color:#666}
.ac-of-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid #EBEBEB;font-size:12px;color:#666}
.ac-of-pie em{font-style:normal;color:#01754F;font-weight:600}
.ac-of-facil{display:inline-flex;align-items:center;gap:4px;color:#666}
.ac-of-facil svg{width:12px;height:12px;color:#0A66C2}
/* sueldos */
.ac-sueldos{padding:34px 36px 26px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--soft),0 0 0 1px var(--ink-5)}
.ac-nivel{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:var(--sand-2);box-shadow:var(--ring);margin-bottom:26px}
.ac-nivel button{height:38px;padding:0 18px;border:0;border-radius:99px;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--ink-65);cursor:pointer;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.ac-nivel button.is-on{background:var(--ink);color:#fff;box-shadow:0 6px 14px -8px rgba(27,24,22,.6)}
.ac-escala{display:grid;grid-template-columns:repeat(4,1fr) auto;margin-left:calc(260px + 24px);margin-bottom:6px;font-size:11.5px;color:var(--ink-45)}
.ac-roles{display:flex;flex-direction:column}
.ac-rol{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:center;padding:16px 0;border-top:1px solid var(--ink-5)}
.ac-rol-n{display:flex;align-items:center;gap:12px;min-width:0}
.ac-rol-n img{width:30px;height:30px;flex:none}
.ac-rol-n span{display:flex;flex-direction:column;min-width:0}
.ac-rol-n b{font-size:15.5px;font-weight:500;letter-spacing:-.01em}
.ac-rol-n small{font-size:12.5px;color:var(--ink-45)}
.ac-pista{position:relative;height:44px;border-radius:12px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--ink-5) calc(25% - 1px),var(--ink-5) 25%),var(--sand-2)}
.ac-rango{position:absolute;top:6px;bottom:6px;left:var(--a,0%);width:var(--w,0%);border-radius:9px;background:linear-gradient(90deg,var(--bronze-light),var(--bronze));box-shadow:0 8px 18px -10px rgba(176,122,74,.8);transition:left .8s cubic-bezier(.3,.7,.2,1),width .8s cubic-bezier(.3,.7,.2,1);display:flex;align-items:center;justify-content:center;overflow:visible}
.ac-rango b{position:absolute;left:calc(100% + 10px);white-space:nowrap;font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ac-fuente{margin:14px 0 0;font-size:12.5px;color:var(--ink-45)}
/* ventajas de fundador */
.ac-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ac-perk{display:flex;flex-direction:column;gap:10px;padding:30px 28px;border-radius:var(--r-xl);background:var(--sand-2);box-shadow:var(--ring)}
.ac-perk > b{font-size:clamp(40px,4.4vw,58px);font-weight:600;letter-spacing:-.05em;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.ac-perk h4{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.ac-perk p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-65)}
.ac-perk--dark{background:var(--dark);color:#fff;box-shadow:none}
.ac-perk--dark h4{color:#fff}
.ac-perk--dark p{color:var(--on-dark-70)}
/* cómo trabajamos: las tres formas como hoja de ruta vertical (línea central con destello, pasos alternos) */
.ruta{position:relative;max-width:1000px;margin:0 auto;padding:12px 0 8px}
.ruta-linea{position:absolute;left:50%;top:0;bottom:0;width:1px;translate:-50% 0;background:var(--ink-10);overflow:hidden}
.ruta-linea::after{content:"";position:absolute;left:0;top:-120px;width:100%;height:120px;background:linear-gradient(to bottom,transparent,var(--bronze),transparent);animation:rutaScan 3.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes rutaScan{0%{top:-120px;opacity:0}10%,90%{opacity:1}100%{top:100%;opacity:0}}
.ruta-paso{position:relative;display:flex;justify-content:flex-start;padding-left:50%;margin-bottom:112px}
.ruta-paso:last-child{margin-bottom:0}
/* la línea es el primer hijo: los pasos 1 y 3 son «pares» y van a la derecha, como en el roadmap de Aldia */
.ruta-paso:nth-child(odd){justify-content:flex-end;padding-left:0;padding-right:50%}
.ruta-num{position:absolute;left:50%;top:0;z-index:1;width:52px;height:52px;translate:-50% 0;border-radius:50%;background:#fff;border:1px solid var(--ink);display:grid;place-items:center;font-size:14px;font-weight:600;letter-spacing:.02em;transition:background-color .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1),border-color .5s ease,scale .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
.ruta-cont{width:90%;display:flex;flex-direction:column;align-items:flex-start}
.ruta-paso:nth-child(even) .ruta-cont{padding-left:64px}
.ruta-paso:nth-child(odd) .ruta-cont{padding-right:64px}
.ruta-cuando{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--bronze-text);margin-bottom:12px}
.ruta-cont h3{margin:0 0 16px;font-size:clamp(30px,3.4vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1.02}
.ruta-cont p{margin:0 0 28px;font-size:18px;line-height:1.5;color:var(--ink-90);max-width:40ch}
.ruta-cont ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:14px}
.ruta-cont li{font-size:16px;line-height:1.45;color:var(--ink-65);max-width:44ch}
/* aparición al llegar: el contenido sube y el número se «enciende» */
.ruta-paso.rv--pre{opacity:1;translate:none}
.ruta-paso .ruta-cont{opacity:0;translate:0 28px;transition:opacity .8s ease,translate 1s var(--ease)}
.ruta-paso .ruta-num{opacity:0;scale:.6}
.ruta-paso.rv--in .ruta-cont{opacity:1;translate:0 0}
.ruta-paso.rv--in .ruta-num{opacity:1;scale:1;transition:opacity .5s ease .1s,scale .6s cubic-bezier(.34,1.56,.64,1) .1s,background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease}
/* vídeo de cada forma, en la zona libre de su paso: aparece suave cuando el paso se activa al hacer scroll (js/app.js) y
   desaparece al quitarse. La bola solo se enciende entonces; el ratón encima no hace nada, para que no compita con el
   scroll. El contenedor es del mismo arena que el fondo del vídeo, así su borde no se nota. En móvil va debajo del texto. */
.ruta-video{position:absolute;top:50%;left:0;width:calc(50% - 64px);max-width:440px;aspect-ratio:1;margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--sand-2);box-shadow:0 0 0 1px var(--ink-5),0 30px 60px -34px rgba(80,55,30,.35);opacity:0;translate:0 calc(-50% + 18px);scale:.97;filter:blur(6px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate 1s var(--ease),scale 1s var(--ease),filter .8s ease;pointer-events:none}
.ruta-paso:nth-child(odd) .ruta-video{left:auto;right:0}
.ruta-paso.is-activa .ruta-video{opacity:1;translate:0 -50%;scale:1;filter:none}
.ruta-video video{display:block;width:100%;height:100%;object-fit:cover}
.ruta-paso.is-activa .ruta-num{background:var(--bronze);border-color:var(--bronze);color:#fff;scale:1.1;box-shadow:0 10px 24px -8px rgba(176,122,74,.6)}
@media (prefers-reduced-motion:reduce){.ruta-video{translate:0 -50%;scale:1;filter:none;transition:opacity .3s ease}}
@media (max-width:640px){
  .ruta-paso,.ruta-paso:nth-child(odd){flex-direction:column}
  /* debajo del texto, sin moverse de su sitio: aparece y se desvanece con el foco (la regla de escritorio lo subiría la mitad) */
  .ruta-video,.ruta-paso:nth-child(odd) .ruta-video{position:relative;top:auto;left:auto;right:auto;width:100%;max-width:420px;margin-top:24px;translate:0 18px}
  .ruta-paso.is-activa .ruta-video{translate:0 0}
}
/* escenas animadas de las tres formas (HTML y CSS): se ven mientras su vídeo no ha cargado (o si no está). Se montan al
   activarse el paso y se recogen solas al final de cada vuelta; quietas (reposo o «reducir movimiento») se ven completas.
   Medidas en cqi: escalan con el recuadro (100cqi = su ancho; pensadas para 420 px, 1cqi = 4,2 px). */
.ruta-video{container-type:inline-size}
.ruta-video video{position:relative;z-index:1;opacity:0;transition:opacity .6s ease}
.ruta-video.con-video video{opacity:1}
.ruta-video.con-video .es{opacity:0}
.es{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:3.33cqi;padding:7.14cqi 6.67cqi;transition:opacity .5s ease}
.es-eyebrow{font-size:2.74cqi;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze-text)}
.es-card,.es-doc,.es-input,.es-prop,.es-item{background:#FFFFFF;box-shadow:0 0 0 1px var(--ink-5),0 14px 30px -20px rgba(80,55,30,.4)}
/* 01 · el diagnóstico */
.es-areas{display:flex;flex-wrap:wrap;gap:1.43cqi}
.es-areas span{display:inline-flex;align-items:center;height:7.62cqi;padding:0 2.86cqi;border-radius:99px;background:var(--sand-2);box-shadow:var(--ring);font-size:3.1cqi;font-weight:500;color:var(--ink)}
.es-card{display:flex;flex-direction:column;padding:3.33cqi 3.81cqi;border-radius:4.29cqi}
.es-card-t,.es-prop-t{margin-bottom:1.43cqi;font-size:2.86cqi;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}
.es-fila{display:grid;grid-template-columns:5.24cqi minmax(0,1fr) auto;align-items:center;gap:2.38cqi;padding:1.9cqi 0;border-top:1px solid var(--ink-5)}
.es-card-t + .es-fila{border-top:0}
.es-fila b{width:5.24cqi;height:5.24cqi;border-radius:50%;display:grid;place-items:center;background:var(--bronze-soft);color:var(--bronze-text);font-size:2.86cqi;font-weight:600}
.es-fila span{font-size:3.33cqi;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-fila em{font-style:normal;font-size:2.98cqi;color:var(--ink-45);font-variant-numeric:tabular-nums}
.es-final{align-self:flex-start;display:inline-flex;align-items:center;gap:1.9cqi;padding:2.38cqi 3.81cqi;border-radius:99px;background:var(--ink);font-size:3.21cqi;font-weight:500;color:#FFFFFF}
.es-final svg{width:3.57cqi;height:3.57cqi;color:var(--bronze-light)}
/* 02 · mejorar lo ya hecho */
.es-item{display:grid;grid-template-columns:5.71cqi minmax(0,1fr) auto;align-items:center;gap:2.38cqi;padding:2.86cqi 3.33cqi;border-radius:3.81cqi}
.es-item img{width:5.71cqi;height:5.71cqi}
.es-item span{font-size:3.45cqi;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-item i{grid-area:1/3;justify-self:end;display:inline-flex;align-items:center;gap:1.19cqi;height:6.19cqi;padding:0 2.38cqi;border-radius:99px;font-style:normal;font-size:2.86cqi;font-weight:500;white-space:nowrap}
.es-mal{background:var(--sand-3);color:var(--ink-65);opacity:0}
.es-bien{background:var(--bronze-soft);color:var(--bronze-text)}
.es-bien svg{width:2.86cqi;height:2.86cqi}
.es-item--fuera img,.es-item--fuera span{opacity:.45;filter:grayscale(1)}
.es-item--fuera .es-bien{background:var(--sand-2);color:var(--ink-45)}
.es-doc{display:flex;flex-wrap:wrap;gap:1.9cqi 3.33cqi;padding:3.33cqi 3.81cqi;border-radius:3.81cqi}
.es-doc-t{width:100%;display:flex;align-items:center;gap:1.9cqi;font-size:3.33cqi;font-weight:500;color:var(--ink)}
.es-doc-t svg{width:3.81cqi;height:3.81cqi;color:var(--bronze-text)}
.es-doc span{display:inline-flex;align-items:center;gap:1.19cqi;font-size:3.1cqi;color:var(--ink-65)}
.es-doc span svg{width:3.1cqi;height:3.1cqi;color:var(--bronze-text)}
/* 03 · cuéntanos tu idea */
.es-input{padding:3.33cqi 3.81cqi;border-radius:4.29cqi}
.es-input small{display:block;margin-bottom:1.43cqi;font-size:2.86cqi;color:var(--ink-45)}
.es-input p{margin:0;font-size:3.69cqi;line-height:1.4;color:var(--ink)}
.es-input p span{display:block;width:max-content;max-width:100%}
.es-llamada{align-self:flex-start;display:flex;align-items:center;gap:2.38cqi;padding:2.38cqi 3.81cqi 2.38cqi 2.38cqi;border-radius:99px;background:var(--ink);color:#FFFFFF}
.es-av{width:7.14cqi;height:7.14cqi;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--sand);box-shadow:0 0 0 .48cqi var(--ink);font-size:2.62cqi;font-weight:600;color:var(--bronze-text)}
.es-av--lc{margin-left:-1.9cqi;background:#FFFFFF}
.es-av--lc img{width:3.81cqi;height:3.81cqi}
.es-llamada b{display:block;font-size:3.21cqi;font-weight:500}
.es-llamada small{font-size:2.74cqi;color:rgba(255,255,255,.62)}
.es-dot{width:1.9cqi;height:1.9cqi;margin-left:.95cqi;border-radius:50%;background:var(--bronze-light)}
.es-prop{display:flex;flex-direction:column;padding:3.33cqi 3.81cqi;border-radius:4.29cqi}
.es-linea{display:flex;align-items:center;justify-content:space-between;gap:2.38cqi;padding:2.14cqi 0;border-top:1px solid var(--ink-5)}
.es-prop-t + .es-linea{border-top:0}
.es-linea span{font-size:3.21cqi;color:var(--ink-45)}
.es-linea b{display:inline-flex;align-items:center;gap:1.43cqi;font-size:3.33cqi;font-weight:500;color:var(--ink)}
.es-linea b img{width:4.29cqi;height:4.29cqi}
/* movimiento: cada pieza entra a su tiempo, aguanta y se recoge antes de que empiece la vuelta siguiente */
@media (prefers-reduced-motion:no-preference){
  .ruta-video.es-anim .es--diag .es-areas span{animation:es-area 9s ease infinite;animation-delay:calc(var(--n) * .45s)}
  .ruta-video.es-anim .es--diag .es-card{animation:es-card 9s var(--ease) infinite}
  .ruta-video.es-anim .es--diag .es-fila{animation:es-fila 9s var(--ease) infinite;animation-delay:calc(var(--n) * .5s)}
  .ruta-video.es-anim .es--diag .es-final{animation:es-final 9s var(--ease) infinite}
  .ruta-video.es-anim .es--mejorar .es-item{animation:es-item 9s var(--ease) infinite;animation-delay:calc(var(--n) * .3s)}
  .ruta-video.es-anim .es--mejorar .es-mal{animation:es-mal 9s ease infinite;animation-delay:calc(var(--n) * .6s)}
  .ruta-video.es-anim .es--mejorar .es-bien{animation:es-bien 9s var(--ease) infinite;animation-delay:calc(var(--n) * .6s)}
  .ruta-video.es-anim .es--mejorar .es-item--fuera img,.ruta-video.es-anim .es--mejorar .es-item--fuera span{animation:es-archiva 9s ease infinite 1.2s}
  .ruta-video.es-anim .es--mejorar .es-doc{animation:es-doc 9s var(--ease) infinite}
  .ruta-video.es-anim .es--mejorar .es-doc span{animation:es-docl 9s ease infinite;animation-delay:calc(var(--n) * .3s)}
  .ruta-video.es-anim .es--idea .es-input{animation:es-input 10s var(--ease) infinite}
  .ruta-video.es-anim .es--idea .es-input p span{animation:es-teclea 10s steps(26,end) infinite;animation-delay:calc(var(--n) * 1.1s)}
  .ruta-video.es-anim .es--idea .es-llamada{animation:es-llamada 10s var(--ease) infinite}
  .ruta-video.es-anim .es--idea .es-dot{animation:es-pulso 1.2s ease-out infinite}
  .ruta-video.es-anim .es--idea .es-prop{animation:es-prop 10s var(--ease) infinite}
  .ruta-video.es-anim .es--idea .es-linea{animation:es-linea 10s var(--ease) infinite;animation-delay:calc(var(--n) * .45s)}
}
@keyframes es-area{0%,3%{background:#FFFFFF;color:var(--ink-45);box-shadow:var(--ring)}8%,14%{background:var(--bronze-soft);color:var(--bronze-text);box-shadow:0 0 0 1.5px var(--bronze)}20%,78%{background:var(--sand-2);color:var(--ink);box-shadow:var(--ring)}84%,100%{background:#FFFFFF;color:var(--ink-45);box-shadow:var(--ring)}}
@keyframes es-card{0%,24%{opacity:0;translate:0 12px}30%,80%{opacity:1;translate:0 0}86%,100%{opacity:0;translate:0 -6px}}
@keyframes es-fila{0%,32%{opacity:0;translate:0 8px}38%,80%{opacity:1;translate:0 0}86%,100%{opacity:0}}
@keyframes es-final{0%,56%{opacity:0;translate:0 10px;scale:.96}62%,80%{opacity:1;translate:0 0;scale:1}86%,100%{opacity:0}}
@keyframes es-item{0%,2%{opacity:0;translate:0 10px}8%,80%{opacity:1;translate:0 0}86%,100%{opacity:0}}
@keyframes es-mal{0%,26%{opacity:1}30%,100%{opacity:0}}
@keyframes es-bien{0%,28%{opacity:0;scale:.9}34%,80%{opacity:1;scale:1}86%,100%{opacity:0}}
@keyframes es-archiva{0%,40%{opacity:1;filter:none}48%,80%{opacity:.45;filter:grayscale(1)}86%,100%{opacity:1;filter:none}}
@keyframes es-doc{0%,50%{opacity:0;translate:0 14px}56%,80%{opacity:1;translate:0 0}86%,100%{opacity:0}}
@keyframes es-docl{0%,56%{opacity:0}62%,80%{opacity:1}86%,100%{opacity:0}}
@keyframes es-input{0%,2%{opacity:0;translate:0 10px}6%,82%{opacity:1;translate:0 0}88%,100%{opacity:0}}
@keyframes es-teclea{0%,6%{clip-path:inset(0 100% 0 0)}18%,82%{clip-path:inset(0 0 0 0)}88%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes es-llamada{0%,30%{opacity:0;translate:0 10px}36%,82%{opacity:1;translate:0 0}88%,100%{opacity:0}}
@keyframes es-pulso{0%{box-shadow:0 0 0 0 rgba(217,180,140,.6)}70%,100%{box-shadow:0 0 0 6px rgba(217,180,140,0)}}
@keyframes es-prop{0%,44%{opacity:0;translate:0 12px}50%,82%{opacity:1;translate:0 0}88%,100%{opacity:0}}
@keyframes es-linea{0%,52%{opacity:0;translate:-6px 0}58%,82%{opacity:1;translate:0 0}88%,100%{opacity:0}}
/* hero partido de «Cómo trabajamos»: texto a la izquierda y panel arena a sangre con el símbolo 3D (sube hasta arriba, bajo el menú flotante) */
.hero-split{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(760px,calc(100svh - 96px));margin-top:-96px;padding-top:96px}
.hs-texto{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:40px 48px 64px 0}
.hs-texto .h1{letter-spacing:-.045em;line-height:1.02}
.hs-texto .sub{max-width:44ch}
.hs-arte{position:absolute;top:0;bottom:0;left:50%;right:calc(50% - var(--vw,100vw) / 2);overflow:hidden;display:grid;place-items:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to top,transparent 0,#000 24%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to top,transparent 0,#000 24%);mask-composite:intersect;
  background:radial-gradient(60% 55% at 50% 42%,#FFFFFF 0%,rgba(255,255,255,0) 70%),radial-gradient(90% 70% at 50% 110%,#E3CFB6 0%,rgba(227,207,182,0) 70%),var(--sand)}
.hs-3d{width:min(96%,660px);height:auto;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .6s var(--ease);animation:hsEntra 1.2s var(--ease) .2s both}
@keyframes hsEntra{from{opacity:0;translate:0 40px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
.hs-3d.flota{animation:hsFlota 6s ease-in-out infinite}
@keyframes hsFlota{0%,100%{translate:0 0}50%{translate:0 -14px}}
.panel{position:relative;border-radius:var(--r-xl);padding:80px 40px;overflow:hidden}
.panel--sand{background:var(--sand-2)}
.panel--dark{background:var(--dark);color:#FFFFFF}
.panel--dark::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:80%;background:radial-gradient(50% 50% at 50% 100%,rgba(176,122,74,.35),rgba(176,122,74,0) 70%);pointer-events:none}
.panel--dark > *{position:relative}
.panel--dark h2,.panel--dark h3,.panel--dark h4{color:#FFFFFF}
.panel--dark .sub{color:var(--on-dark-70)}
.panel--dark .eyebrow{color:var(--bronze-light)}
.panel--bronze{background:var(--grad-bronze)}
.panel--bronze::after{content:"";position:absolute;inset:0 0 auto;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.panel--bronze > *{position:relative;z-index:1}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start}
.col{display:flex;flex-direction:column;gap:20px}
.list-check{display:flex;flex-direction:column;gap:10px}
.list-check li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--ink-90)}
.list-check li svg{width:20px;height:20px;flex:none;color:var(--bronze-text);margin-top:2px}
.panel--dark .list-check li{color:rgba(255,255,255,.88)}
.panel--dark .list-check li svg{color:var(--bronze-light)}
.mt-40{margin-top:40px}
.mt-48{margin-top:48px}

/* ---------- movimiento: revelado, tilt-parallax, parallax de scroll, palabras ---------- */
.rv--pre{opacity:0;translate:0 22px}
.rv--in{opacity:1;translate:0 0;transition:opacity .8s ease,translate .9s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.tilt{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .5s ease;will-change:transform}
.tilt.is-hover{transition:transform .08s linear,box-shadow .5s ease}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 70%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:1}
.tilt.is-hover::after{opacity:1}
.tilt .lift{transform:translate3d(var(--tx,0px),var(--ty,0px),var(--tz,28px));transition:transform .6s var(--ease)}
.tilt.is-hover .lift{transition:transform .08s linear}
.tilt .lift-2{transform:translate3d(calc(var(--tx,0px) * .5),calc(var(--ty,0px) * .5),14px);transition:transform .6s var(--ease)}
.tilt.is-hover .lift-2{transition:transform .08s linear}
.plx{transform:translate3d(0,var(--plx,0px),0);will-change:transform}
/* titulares palabra a palabra (misma receta que evolve: opacidad 0 → 1, 3px de subida, desenfoque 7px → 0, 1 s, escalonado 100 ms, power3.out) */
.words .w{display:inline-block;opacity:0;animation:wordin 1s cubic-bezier(.215,.61,.355,1) both;animation-delay:calc(var(--i,0) * 100ms + .1s)}
@keyframes wordin{from{opacity:0;transform:translateY(3px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
.rv .words .w{animation-play-state:paused}
.rv--in .words .w{animation-play-state:running}
.fade-up{animation:fadeup 1s var(--ease) both;animation-delay:var(--d,.5s)}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- portada (blanca, como evolve) ---------- */
/* isolation: el fondo (canvas y ::before/::after con z-index -1) se apila dentro del hero; sin esto el fondo del body lo tapa */
.hero{position:relative;isolation:isolate;padding:64px 0 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
/* fondo de la portada a sangre (como el bloque del hero de aave.com): blanco arriba, arena muy suave abajo con un halo bronce apenas visible */
.hero::before{content:"";position:absolute;top:-96px;bottom:0;left:50%;width:var(--vw,100vw);transform:translateX(-50%);z-index:-1;background:radial-gradient(38% 42% at 84% 0%,rgba(176,122,74,.07),rgba(176,122,74,0) 70%),radial-gradient(34% 40% at 12% 18%,rgba(176,122,74,.05),rgba(176,122,74,0) 70%),linear-gradient(180deg,#FFFFFF 0%,#FEFCF9 28%,#FAF4EC 62%,#F3EADE 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:62%;left:50%;width:var(--vw,100vw);transform:translateX(-50%);z-index:-1;background:radial-gradient(58% 58% at 50% 100%,rgba(176,122,74,.17),rgba(176,122,74,0) 70%);pointer-events:none}
/* fondo WebGL de la portada (fluido bronce que sigue al ratón); cuando está activo apaga los degradados CSS */
.hero-bg{position:absolute;top:-96px;left:50%;width:var(--vw,100vw);height:calc(100% + 96px);transform:translateX(-50%);z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s}
.hero-bg.listo{opacity:1}
.hero--gl::before,.hero--gl::after{opacity:0}
/* el final del fondo se funde con el blanco de la página (sin corte al acabar la portada) */
.hero::before,.hero::after,.hero-bg{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 320px),rgba(0,0,0,.55) calc(100% - 160px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 320px),rgba(0,0,0,.55) calc(100% - 160px),transparent 100%)}
.hero .h1{font-size:clamp(40px,6.1vw,84px);letter-spacing:-.045em;line-height:1.04;max-width:34ch;color:var(--ink)}
.hero .sub{margin-inline:auto;font-size:19px;max-width:50ch}
.hero .actions{gap:12px 26px;align-items:center}
.hero-visual{width:100%;max-width:1120px;height:clamp(300px,46vw,580px);position:relative;margin-top:64px}
.hero-visual::before{content:"";position:absolute;inset:auto 8% -30% 8%;height:70%;background:radial-gradient(50% 50% at 50% 55%,rgba(176,122,74,.12),rgba(176,122,74,0) 100%);pointer-events:none}
#dome{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .22s ease;-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);mask-image:linear-gradient(to bottom,#000 66%,transparent 100%)}
.orbit{position:absolute;inset:0}
.ocard{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) translate3d(var(--mx,0px),var(--my,0px),0);display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:var(--soft);text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-90);white-space:nowrap;animation:float var(--t,6s) ease-in-out var(--d,0s) infinite;transition:box-shadow .4s ease,scale .4s var(--ease)}
.ocard .ico{width:44px;height:44px;border-radius:13px;background:var(--sand-2);display:grid;place-items:center;transition:background-color .3s ease}
.ocard .pp{width:30px;height:30px}
.ocard:hover,.ocard.is-live{box-shadow:var(--soft-hover);scale:1.05}
.ocard:hover .ico,.ocard.is-live .ico{background:#FFFFFF;box-shadow:var(--ring)}
.ocard.is-live .pp{transform:scale(1.12) rotate(-4deg)}
.ocenter{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%) translate3d(var(--mx,0px),var(--my,0px),0);width:96px;height:96px;border-radius:28px;background:#FAF7F1;box-shadow:var(--lift);overflow:hidden;animation:float 7s ease-in-out .8s infinite}
.ocenter img{width:100%;height:100%}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* cifras (fila de 4, como evolve) */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stat{background:var(--sand-2);border-radius:var(--r-md);padding:22px 22px 20px;display:flex;flex-direction:column;gap:22px;transition:box-shadow .5s ease,background-color .3s}
.stat:hover{background:#FFFFFF;box-shadow:var(--soft-hover)}
.stat .ico{width:38px;height:38px;border-radius:11px;background:#FFFFFF;box-shadow:var(--card);color:var(--bronze-text);display:grid;place-items:center}
.stat .ico svg{width:18px;height:18px}
.stat b{display:block;font-size:clamp(30px,3vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink-90);font-variant-numeric:tabular-nums}
.stat small{display:block;font-size:14px;color:var(--ink-65);margin-top:8px;line-height:1.45}

/* cartelitos de las cifras: panel arena con dos tarjetitas superpuestas (como los bloques ilustrados de evolve.es).
   Suben escalonadas al entrar en pantalla y se separan un poco al pasar el ratón por la tarjeta. */
.mini{position:relative;height:168px;border-radius:14px;background:var(--sand);overflow:hidden}
.mc{position:absolute;background:#FFFFFF;border-radius:14px;box-shadow:var(--soft);padding:12px 14px;font-size:11.5px;line-height:1.3;color:var(--ink-90);rotate:var(--r,0deg);opacity:0;translate:0 18px}
.rv--in .mc{opacity:1;translate:0 0;transition:opacity .7s ease calc(var(--i,0) * 80ms + var(--d,0ms) + 160ms),translate .9s var(--ease) calc(var(--i,0) * 80ms + var(--d,0ms) + 160ms)}
.mc--a{left:12px;top:14px}
.mc--b{right:12px;bottom:12px;white-space:nowrap}
.stat.rv--in:hover .mc{transition-delay:0s;transition-duration:.6s}
.stat.rv--in:hover .mc--a{translate:0 -3px}
.stat.rv--in:hover .mc--b{translate:0 -8px}
.mc--dark{background:var(--ink);color:#FFFFFF;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:11.5px;padding:9px 12px;border-radius:12px}
.mc svg{width:14px;height:14px;flex:none}
.mc-title{font-weight:600;font-size:12px;display:flex;align-items:center;gap:6px;color:var(--ink)}
.mc-title svg{color:var(--bronze-text)}
.mc-sub{color:var(--ink-65);font-size:11px;margin-top:2px}
.mc-row{display:flex;align-items:center;gap:9px}
.mc-pp{width:22px;height:22px;flex:none}
.mc-bar{height:6px;border-radius:99px;background:var(--sand);overflow:hidden;margin-top:10px}
.mc-bar i{display:block;height:100%;width:var(--w,50%);background:var(--bronze);border-radius:99px}
.mc-foot{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-45);margin-top:6px}
.mc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px}
.mc-tiles span{aspect-ratio:1;border-radius:9px;background:var(--sand-2);box-shadow:var(--ring);display:grid;place-items:center}
.mc-tiles .mc-pp{width:20px;height:20px}
.mc-join{display:flex;align-items:center;gap:8px}
.mc-join .mc-pp{width:26px;height:26px}
.mc-join i{width:20px;height:20px;border-radius:50%;background:var(--sand);color:var(--ink);display:grid;place-items:center;font-style:normal;font-weight:600;font-size:13px}
.mc-list{margin-top:6px}
.mc-list div{display:flex;align-items:center;gap:6px;padding:5px 0;border-top:1px solid var(--ink-5);font-size:11px;color:var(--ink-90)}
.mc-list div:first-child{border-top:0}
.mc-list .mc-pp{width:15px;height:15px}
.mc-list em{flex:1}
.mc-ok{display:inline-flex;align-items:center;gap:5px;color:var(--ink-65);font-size:10.5px}
/* interruptor de «Datos fuera»: apagado y con candado. Cada pocos segundos alguien intenta encenderlo: cede un poco, vuelve
   y el estado dice «Bloqueado» un momento. Los datos no salen nunca. */
.mc-toggle{position:relative;flex:none;width:34px;height:20px;border-radius:99px;background:var(--sand-3);box-shadow:inset 0 1px 2px rgba(27,24,22,.14)}
.mc-toggle i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(27,24,22,.28);display:grid;place-items:center;color:var(--ink-45)}
.mc-toggle i svg{width:9px;height:9px}
.mc-estado{display:grid}
.mc-estado span{grid-area:1/1}
.mc-estado span + span{opacity:0;font-weight:600;color:var(--bronze-text)}
.mc-avatars{display:flex;margin:9px 0 7px}
.mc-avatars span{width:28px;height:28px;border-radius:50%;background:var(--sand);color:var(--bronze-text);font-size:10px;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 2px #FFFFFF;margin-left:-7px}
.mc-avatars span:first-child{margin-left:0}
.mc-avatars .bot{background:#FFFFFF;box-shadow:0 0 0 2px #FFFFFF,var(--ring)}
.mc-avatars .mc-pp{width:16px;height:16px}
.mc-ring{width:30px;height:30px;border-radius:50%;background:var(--bronze-soft);color:var(--bronze-text);display:grid;place-items:center;flex:none}
.mc--bronze{background:var(--bronze)}
.mc-ic{width:22px;height:22px;border-radius:7px;background:var(--sand-2);box-shadow:var(--ring);color:var(--ink);display:grid;place-items:center;flex:none}
.mc-ic svg{width:13px;height:13px}
/* «0 plantillas»: los colores de la marca del cliente y la cabecera de su app con su logo */
.mc-colores{display:flex;gap:8px;margin:10px 0 7px}
.mc-colores i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #FFFFFF,0 0 0 3px rgba(27,24,22,.1)}
.mc-colores i:first-child{box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--c)}
.mc-logo{width:30px;height:30px;border-radius:9px;background:var(--bronze);color:#FFFFFF;font-size:11px;font-weight:700;letter-spacing:.02em;display:grid;place-items:center;flex:none}
/* movimiento dentro de los cartelitos (solo si el usuario no ha pedido reducir el movimiento) */
@media (prefers-reduced-motion:no-preference){
  .rv--in .mc{animation:flotar 5.2s ease-in-out infinite;animation-delay:calc(var(--d,0ms) * 9)}
  .mc-reloj .mano{transform-origin:26px 26px;animation:girar 7s linear infinite;fill:var(--ink)}
  .mc--movil .m-btn{animation:toque 4.8s var(--ease) infinite 1.2s}
  .mc--movil .m-fila--ultima i{animation:marca 4.8s var(--ease) infinite 1.2s}
  .mc--movil .m-fila--ultima em{animation:marca-linea 4.8s var(--ease) infinite 1.2s}
  .mc-arrow{animation:fluir 1.8s ease-in-out infinite}
  .mc-arrow:nth-of-type(2){animation-delay:.45s}
  .mc-toggle{animation:intento-pista 6s ease-in-out infinite 1s}
  .mc-toggle i{animation:intento 6s cubic-bezier(.3,.7,.3,1) infinite 1s,candado 6s ease infinite 1s}
  .mc-estado span:first-child{animation:estado-no 6s ease infinite 1s}
  .mc-estado span + span{animation:estado-bloq 6s ease infinite 1s}
  .mc-title svg{animation:latido 4s ease-in-out infinite}
  .mc-avatars .tu{animation:saludo 5s ease-in-out infinite 1.2s}
  .mc--bronze{overflow:hidden}
  .mc--bronze::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);animation:brillo 3.4s ease-in-out infinite}
  .mc-step:nth-of-type(2) .mc-pp{animation:latido 1.8s ease-in-out infinite .2s}
  /* el aro pasa de un color al siguiente y el logo de la app se pinta de ese color */
  .mc-colores i{animation:mc-aro 8s steps(1) infinite 1s}
  .mc-colores i:nth-child(2){animation-delay:3s}.mc-colores i:nth-child(3){animation-delay:5s}.mc-colores i:nth-child(4){animation-delay:7s}
  .mc-logo{animation:mc-marca 8s infinite 1s}
}
@keyframes mc-aro{0%,24.9%{box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--c)}25%,100%{box-shadow:0 0 0 2px #FFFFFF,0 0 0 3px rgba(27,24,22,.1)}}
@keyframes mc-marca{0%,22%{background:#b07a4a}25%,47%{background:#2f6fb0}50%,72%{background:#2e8a5f}75%,97%{background:#1b1816}100%{background:#b07a4a}}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes toque{0%,30%,40%,100%{scale:1;filter:none}34%{scale:.92;filter:brightness(.92)}}
@keyframes marca{0%,38%{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-45)}46%,88%{background:var(--bronze);box-shadow:inset 0 0 0 1px var(--bronze)}96%,100%{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-45)}}
@keyframes marca-linea{0%,38%{background:var(--ink-10)}46%,88%{background:rgba(176,122,74,.35)}96%,100%{background:var(--ink-10)}}
@keyframes fluir{0%,100%{opacity:.35;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
@keyframes intento{0%,60%,100%{translate:0 0}66%{translate:6px 0}72%{translate:-1px 0}76%{translate:0 0}}
@keyframes intento-pista{0%,60%,82%,100%{box-shadow:inset 0 1px 2px rgba(27,24,22,.14)}66%,74%{box-shadow:inset 0 1px 2px rgba(27,24,22,.14),0 0 0 3px var(--bronze-soft)}}
@keyframes candado{0%,62%,86%,100%{color:var(--ink-45)}66%,80%{color:var(--bronze-text)}}
@keyframes estado-no{0%,62%,90%,100%{opacity:1}66%,86%{opacity:0}}
@keyframes estado-bloq{0%,62%,90%,100%{opacity:0}66%,86%{opacity:1}}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes saludo{0%,78%,100%{scale:1;rotate:0deg}84%{scale:1.22;rotate:-8deg}90%{scale:1.1;rotate:6deg}}
@keyframes brillo{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(320%) skewX(-18deg)}}
/* reloj de cuenta atrás (anillo que se rellena al aparecer) y móvil en miniatura con la app */
.mc-reloj{width:52px;height:52px;flex:none;rotate:-90deg}
.mc-reloj .tr{fill:none;stroke:var(--sand);stroke-width:5}
.mc-reloj .pr{fill:none;stroke:var(--bronze);stroke-width:5;stroke-linecap:round;stroke-dasharray:132;stroke-dashoffset:132;transition:stroke-dashoffset 1.4s var(--ease) .55s}
.rv--in .mc-reloj .pr{stroke-dashoffset:38}
.mc-reloj text{rotate:90deg;transform-origin:26px 26px;font:600 15px var(--font);fill:var(--ink)}
/* móvil en miniatura con la app de partes: marco con reflejo, isla, barra de estado, filas que se van marcando y el botón «Probar» que se pulsa */
.mc--movil{top:24px;bottom:auto;right:16px;width:62px;height:118px;padding:4px;border-radius:16px;background:linear-gradient(150deg,#3B342F 0%,#1B1816 38%,#100E0D 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 22px 34px -16px rgba(27,24,22,.6)}
.mc--movil::before{content:"";position:absolute;top:8px;left:50%;translate:-50% 0;width:16px;height:5px;border-radius:3px;background:#100E0D;z-index:1}
.mc--movil::after{content:"";position:absolute;top:32px;right:-1.5px;width:2px;height:14px;border-radius:0 1px 1px 0;background:#2B2521}
.mc--movil .scr{position:relative;height:100%;display:flex;flex-direction:column;gap:3.5px;padding:15px 5px 5px;border-radius:12px;background:#FFFFFF;overflow:hidden}
.m-estado{position:absolute;top:5px;left:7px;right:6px;display:flex;align-items:center;justify-content:space-between;font-size:5px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.m-estado i{width:7px;height:3.5px;border-radius:1px;background:var(--ink);box-shadow:0 0 0 .6px #FFFFFF,0 0 0 1.2px var(--ink-45)}
.m-cab{display:flex;align-items:center;gap:3px;margin:2px 1px}
.m-cab .mc-pp{width:10px;height:10px}
.m-cab b{font-size:7px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.m-fila{display:flex;align-items:center;gap:3.5px;padding:3.5px 4px;border-radius:5px;background:var(--sand-2)}
.m-fila i{width:6px;height:6px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink-45)}
.m-fila.is-hecha i{background:var(--bronze);box-shadow:inset 0 0 0 1px var(--bronze)}
.m-fila em{flex:1;height:2.5px;border-radius:2px;background:var(--ink-10)}
.m-fila.is-hecha em{background:rgba(176,122,74,.35)}
.m-btn{display:block;margin-top:auto;padding:4px 0;border-radius:99px;background:var(--bronze);font-size:6.5px;font-weight:600;letter-spacing:.01em;text-align:center;color:#FFFFFF;box-shadow:0 4px 8px -4px rgba(176,122,74,.8)}
.mc-avatars .tu{background:var(--ink);color:#FFFFFF}
.mc-flow{display:flex;align-items:center;gap:5px;margin:10px 0 8px}
.mc-step{width:32px;height:32px;border-radius:10px;background:var(--sand-2);box-shadow:var(--ring);display:grid;place-items:center;color:var(--bronze-text);flex:none}
.mc-step .mc-pp{width:20px;height:20px}
.mc-arrow{color:var(--ink-45);width:12px!important;height:12px!important}
.mc--chat{border-radius:16px 16px 16px 4px}

/* «AI» de «Locodea AI» en los menús y el pie, en bronce */
.ai-b{color:var(--bronze)}
/* marquesina de tecnologías */
.marquee{position:relative;overflow:hidden;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
/* no se para con el ratón encima (lo pidió el usuario) */
.marquee-track{display:flex;gap:12px;width:max-content;animation:marquee 34s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 10px;border-radius:var(--pill);background:#FFFFFF;box-shadow:var(--card);font-size:14px;font-weight:500;color:var(--ink-90);white-space:nowrap}
.mq-label{text-align:center;font-size:13px;color:var(--ink-45);margin-bottom:14px}

/* ---------- tira de tarjetas de servicio (como los másteres de evolve) ---------- */
.strip-wrap{position:relative}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 4px 24px;margin:-12px -4px -24px}
.strip::-webkit-scrollbar{display:none}
.scard{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;gap:14px;min-height:300px;padding:18px;border-radius:var(--r-lg);background:var(--sand-2);text-decoration:none;color:var(--ink-90);box-shadow:0 0 0 1px rgba(27,24,22,.03);transition:box-shadow .5s ease,background-color .4s ease}
.scard:hover{background:#FFFFFF;box-shadow:var(--soft-hover)}
.scard .big{display:grid;place-items:center;height:118px;border-radius:18px;background:#FFFFFF;box-shadow:var(--card)}
.scard:hover .big{background:var(--sand-2)}
.scard h4{font-size:19px}
.scard p{font-size:14px;color:var(--ink-65);line-height:1.45}
.scard .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--bronze-text)}
.scard .go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.scard:hover .go svg{transform:translateX(4px)}
.scard--custom .big{background:var(--ink)}
.scard--custom .big svg{width:36px;height:36px;color:#FFFFFF}
.strip-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.strip-nav button{width:44px;height:44px;border-radius:50%;background:#FFFFFF;box-shadow:var(--card);display:grid;place-items:center;color:var(--ink-90);transition:background-color .2s,transform .3s var(--ease)}
.strip-nav button:hover{background:var(--sand-2);transform:translateY(-1px)}
.strip-nav button svg{width:18px;height:18px}

/* ---------- equipo (tarjetas como los profesionales de evolve) ---------- */

/* ---------- por qué Power Platform (explicador con pestañas que rotan solas) ---------- */
.porque{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
/* ---------- servicios: «Power BI, a fondo» (apartado de paneles integrado) ---------- */
.pbi-fondo[hidden]{display:none}
.pbi-fondo-h{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:8px}
.pbi-fondo-h .h2{margin:0}
/* servicios: selector de tecnología (debajo del titular); cada pestaña abre su apartado «a fondo» */
.tec-nav{display:flex;gap:4px;width:max-content;max-width:100%;margin:-24px auto 0;padding:5px;border-radius:var(--pill);background:var(--sand-2);box-shadow:inset 0 0 0 1px var(--ink-5);overflow-x:auto;scrollbar-width:none;position:relative;z-index:2}
.tec-nav::-webkit-scrollbar{display:none}
.tec-nav~.pbi-fondo{padding-top:14px}
.tec-nav button{flex:none;display:inline-flex;align-items:center;gap:9px;border:0;background:transparent;padding:9px 18px 9px 11px;border-radius:var(--pill);font:inherit;font-size:15px;font-weight:500;line-height:1.2;color:var(--ink-65);cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.tec-nav button img{width:22px;height:22px;flex:none}
.tec-nav button:hover{color:var(--ink)}
.tec-nav button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:var(--card)}
.tec-nav button:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
@media (max-width:760px){.tec-nav{width:auto;margin:-12px -16px 0;padding:5px 16px;border-radius:0;background:transparent;box-shadow:none;justify-content:flex-start}.tec-nav button{background:var(--sand-2)}.tec-nav button[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:none}}
#pbiFrame{display:block;width:var(--vw,100vw);margin-left:calc(50% - var(--vw,100vw) / 2);height:1400px;border:0;background:transparent}
/* ---------- servicios: «¿Qué es Power Platform?» (vídeo y capítulos) ---------- */
.qe{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
.qe-video{border-radius:var(--r-xl);box-shadow:0 40px 80px -40px rgba(27,24,22,.5)}
.qe-video video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r-xl);background:var(--dark)}
.qe-poster{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r-xl);background:var(--dark);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:28px 30px}
.qe-poster::before{content:"";position:absolute;inset:-20% -10% auto 35%;height:120%;z-index:-1;background:radial-gradient(closest-side,rgba(176,122,74,.5),transparent);animation:acRespira 7s ease-in-out infinite}
.qe-poster::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(80% 80% at 70% 30%,#000,transparent);mask-image:radial-gradient(80% 80% at 70% 30%,#000,transparent)}
.qe-marca{position:absolute;top:24px;left:28px;display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.qe-marca img{width:30px;height:30px;border-radius:9px;background:#fff;padding:3px}
.qe-marca i{font-style:normal;color:var(--bronze-light)}
.qe-iconos{position:absolute;top:26px;right:28px;display:flex;gap:6px}
.qe-iconos img{width:30px;height:30px;padding:5px;border-radius:9px;background:rgba(255,255,255,.92)}
.qe-titulo{font-size:clamp(26px,3.2vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1.05;max-width:12ch}
.qe-play{position:absolute;left:50%;top:48%;translate:-50% -50%;width:84px;height:84px;border:0;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 12px rgba(255,255,255,.12),0 20px 40px -12px rgba(0,0,0,.6);transition:scale .25s var(--ease),box-shadow .3s ease}
.qe-play svg{width:30px;height:30px;margin-left:4px}
.qe-play:hover{scale:1.06;box-shadow:0 0 0 18px rgba(255,255,255,.1),0 20px 40px -12px rgba(0,0,0,.6)}
.qe-play::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);animation:qePulso 2.4s ease-out infinite}
@keyframes qePulso{from{opacity:1;scale:1}to{opacity:0;scale:1.45}}
.qe-dur{position:absolute;right:28px;bottom:28px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.12);font-size:12.5px;font-weight:500}
.qe-aviso{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:rgba(18,16,14,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadein .35s ease both}
.qe-aviso[hidden]{display:none}
.qe-aviso b{font-size:22px;font-weight:600;letter-spacing:-.03em}
.qe-aviso span{max-width:36ch;color:rgba(255,255,255,.75);line-height:1.5}
.qe-aviso a{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:10px 18px;border-radius:99px;background:var(--bronze);color:#fff;font-weight:500;text-decoration:none}
.qe-aviso a svg{width:15px;height:15px}
.qe-txt{display:flex;flex-direction:column;gap:16px}
.qe-txt .h2 em{font-style:normal;color:var(--bronze-deep)}
.qe-txt .sub{margin:0}
.qe-caps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.qe-caps a{display:flex;align-items:center;gap:12px;padding:11px 4px;border-top:1px solid var(--ink-5);color:var(--ink);text-decoration:none;transition:padding .25s var(--ease),background-color .2s ease}
.qe-caps li:last-child a{border-bottom:1px solid var(--ink-5)}
.qe-caps a:hover{padding-left:10px;background:var(--sand-2)}
.qe-caps span{flex:none;width:36px;font-size:12.5px;font-weight:500;color:var(--bronze-text);font-variant-numeric:tabular-nums}
.qe-caps img{width:22px;height:22px;flex:none}
.qe-caps b{font-size:15px;font-weight:500}
.qe-caps small{margin-left:auto;font-size:12.5px;color:var(--ink-45);text-align:right}
.dd-feat .ico--play{display:grid;place-items:center;background:var(--bronze);color:#fff}
.dd-feat .ico--play svg{width:18px;height:18px;margin-left:2px}
/* ---------- casos tipo: uno grande oscuro y tres compactos ---------- */
/* ---------- por qué pymes: duelo gran consultora / locodea. y simulador de horas ---------- */
.duelo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:0;border-radius:var(--r-xl);background:var(--sand-2);box-shadow:var(--card);overflow:hidden}
.duelo-col{padding:34px 36px 38px;display:flex;flex-direction:column;gap:22px}
.duelo-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.duelo-quien{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}
.duelo-col--nos{background:#fff;box-shadow:-1px 0 0 var(--ink-5)}
.duelo-col--nos .duelo-quien{text-transform:none;letter-spacing:-.01em;font-size:20px;color:var(--ink)}
/* columna de ellos: el texto se apaga y un trazo a mano lo tacha, frase a frase */
.duelo-col--ellos li{position:relative;align-self:flex-start;font-size:17px;line-height:1.45;color:var(--ink-65);transition:color .6s ease calc(var(--i) * 260ms + 500ms)}
.tacha{position:absolute;left:-4px;right:-4px;top:50%;width:calc(100% + 8px);height:12px;translate:0 -45%;overflow:visible;pointer-events:none}
.tacha path{fill:none;stroke:var(--bronze);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.rv--in .duelo-col--ellos li{color:var(--ink-45)}
.rv--in .tacha path{stroke-dashoffset:0;transition:stroke-dashoffset .55s cubic-bezier(.6,.05,.3,1) calc(var(--i) * 260ms + 380ms)}
/* y, ya tachada, cada raya se despega del papel y se balancea en 3D, con su sombra debajo (cada una a su ritmo) */
.duelo-col--ellos li{perspective:420px}
.tacha{transform-origin:50% 50%;filter:drop-shadow(0 1px 1px rgba(110,70,30,.25))}
@media (prefers-reduced-motion:no-preference){
  .rv--in .tacha{animation:tacha-3d 9s ease-in-out infinite;animation-delay:calc(var(--i) * 260ms + 1000ms)}
}
@keyframes tacha-3d{
  0%,100%{transform:rotateX(0deg) rotateY(0deg) translateZ(0);filter:drop-shadow(0 1px 1px rgba(110,70,30,.25))}
  25%{transform:rotateX(9deg) rotateY(-2deg) translateZ(2px);filter:drop-shadow(0 2px 1.5px rgba(110,70,30,.24))}
  50%{transform:rotateX(-2deg) rotateY(2deg) translateZ(3px);filter:drop-shadow(0 3px 2px rgba(110,70,30,.22))}
  75%{transform:rotateX(-7deg) rotateY(-1deg) translateZ(1.5px);filter:drop-shadow(0 1.5px 1px rgba(110,70,30,.24))}
}
/* columna nuestra: cada frase entra con su check justo después de tachar la de enfrente */
.duelo-col--nos li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.45;font-weight:400;color:var(--ink);opacity:0;translate:-10px 0}
.duelo-col--nos li i{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--bronze);color:#fff;display:grid;place-items:center;scale:0}
.duelo-col--nos li svg{width:12px;height:12px}
.rv--in .duelo-col--nos li{opacity:1;translate:0 0;transition:opacity .5s ease calc(var(--i) * 260ms + 820ms),translate .6s var(--ease) calc(var(--i) * 260ms + 820ms)}
.rv--in .duelo-col--nos li i{scale:1;transition:scale .5s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 260ms + 900ms)}
.duelo-vs{position:relative;width:0;display:grid;place-items:center;z-index:1}
.duelo-vs span{position:absolute;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;letter-spacing:.02em;box-shadow:0 10px 24px -10px rgba(27,24,22,.6);scale:.4;opacity:0}
.rv--in .duelo-vs span{scale:1;opacity:1;transition:scale .7s cubic-bezier(.34,1.56,.64,1) .2s,opacity .3s ease .2s}

/* casos tipo · «un martes cualquiera»: el día de una pyme en avisos, antes y con locodea */
.dia{border-radius:var(--r-xl);background:var(--sand-2);padding:18px;display:flex;flex-direction:column;gap:18px}
.dia-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:4px 4px 0}
.dia-tipos{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.dia-tipos::-webkit-scrollbar{display:none}
.dia-tipos button{flex:none;height:40px;padding:0 18px;border-radius:99px;border:0;background:transparent;font:inherit;font-size:15px;font-weight:500;color:var(--ink-65);cursor:pointer;transition:background-color .25s,color .25s,box-shadow .25s}
.dia-tipos button:hover{color:var(--ink)}
.dia-tipos button.is-on{background:#fff;color:var(--ink);box-shadow:var(--card)}
.dia-modo{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:99px;background:var(--sand-3)}
.dia-modo button{position:relative;z-index:1;height:36px;padding:0 16px;border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--ink-65);cursor:pointer;transition:color .3s}
.dia-modo button.is-on{color:var(--ink)}
.dia-modo i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:#fff;box-shadow:var(--card);transition:transform .45s var(--ease)}
.dia:not(.is-antes) .dia-modo i{transform:translateX(100%)}
.dia-cuerpo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px;align-items:stretch}
.dia-linea{list-style:none;margin:0;padding:22px 22px 22px 18px;border-radius:var(--r-lg);background:#fff;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative}
.dia-mom{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;position:relative}
.dia-mom::before{content:"";position:absolute;left:25px;top:-12px;bottom:-12px;width:1px;background:var(--ink-10)}
.dia-mom:first-child::before{top:50%}
.dia-mom:last-child::before{bottom:50%}
.dia-hora{position:relative;z-index:1;justify-self:center;padding:4px 7px;border-radius:8px;background:#fff;font-size:12.5px;font-weight:500;color:var(--ink-45);font-variant-numeric:tabular-nums}
.dia-noti{display:grid}
.dia-v{grid-area:1/1;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.dia-v--antes{background:var(--sand-2)}
.dia-v--despues{background:#fff;box-shadow:0 0 0 1px var(--ink-5),0 10px 24px -14px rgba(80,55,30,.35)}
.dia:not(.is-antes) .dia-v--antes,.dia.is-antes .dia-v--despues{opacity:0;transform:translateY(6px) scale(.98);pointer-events:none}
.dia-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.dia-v--antes .dia-ico{background:#fff;color:var(--ink-65)}
.dia-v--despues .dia-ico{background:var(--sand-2)}
.dia-ico svg{width:19px;height:19px}
.dia-ico img{width:24px;height:24px}
.dia-tx b{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.dia-tx p{margin:2px 0 0;font-size:13.5px;line-height:1.4;color:var(--ink-65)}
.dia-tag{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:5px 10px;border-radius:99px;font-size:12.5px;font-weight:500}
.dia-v--antes .dia-tag{background:rgba(254,188,46,.18);color:#8a5a00}
.dia-v--despues .dia-tag{background:var(--bronze-soft);color:var(--bronze-text)}
.dia-tag svg{width:13px;height:13px}
.dia-res{display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:var(--r-lg);background:#fff}
.dia-sector{align-self:flex-start;padding:6px 12px;border-radius:99px;background:var(--sand-2);font-size:13px;color:var(--ink-65)}
.dia-res h3{margin:0;font-size:clamp(24px,2.4vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.dia-hoy{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-block:1px solid var(--ink-5)}
.dia-hoy span{font-size:14px;color:var(--ink-65)}
.dia-hoy b{display:grid;justify-items:end;font-weight:500}
.dia-hoy em{grid-area:1/1;font-style:normal;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:opacity .4s,transform .4s var(--ease)}
.dia-hoy-a{color:#8a5a00}
.dia-hoy-d{color:var(--bronze-text)}
.dia:not(.is-antes) .dia-hoy-a,.dia.is-antes .dia-hoy-d{opacity:0;transform:translateY(6px)}
.dia-cifra{display:flex;flex-direction:column;gap:6px}
.dia-cifra b{font-size:clamp(44px,4.4vw,60px);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.dia-cifra span{font-size:14.5px;line-height:1.45;color:var(--ink-65);max-width:28ch}
.dia-pie{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-65)}
.dia-tec{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.dia-tec img{width:22px;height:22px}
.dia-plazo{color:var(--ink-45)}
.dia.entra .dia-mom{animation:diaEntra .55s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
.dia.entra .dia-res > *{animation:diaEntra .55s var(--ease) both}
@keyframes diaEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.casos-nota{margin:18px 0 0;font-size:12.5px;color:var(--ink-45);text-align:center}
@media (max-width:991px){.dia-cuerpo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.dia{padding:10px;gap:12px;border-radius:26px}.dia-top{flex-direction:column;align-items:stretch}.dia-tipos,.dia-modo{min-width:0;width:100%;max-width:100%}.dia-linea{padding:14px 12px}.dia-mom{grid-template-columns:44px minmax(0,1fr);gap:8px}.dia-mom::before{left:21px}.dia-v{grid-template-columns:34px minmax(0,1fr);padding:12px}.dia-ico{width:34px;height:34px;border-radius:10px}.dia-tag{grid-column:2;justify-self:start}.dia-res{padding:22px}}
@media (prefers-reduced-motion:reduce){.dia-v,.dia-hoy em,.dia-modo i{transition:none}.dia.entra .dia-mom,.dia.entra .dia-res > *{animation:none}}
/* vídeo: tarjeta del mismo arena que el fondo del vídeo (#F1EBE1 tal y como lo pinta el navegador), así el borde del vídeo no se ve */
.porque-video{position:relative;justify-self:center;width:min(100%,470px);aspect-ratio:4/5;margin:0;border-radius:var(--r-xl);overflow:hidden;background:#F1EBE1;box-shadow:0 0 0 1px rgba(27,24,22,.04),0 30px 60px -30px rgba(80,55,30,.28);isolation:isolate}
.porque-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pv-btn{position:absolute;right:14px;bottom:14px;z-index:1;width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);box-shadow:0 1px 2px rgba(27,24,22,.12);opacity:0;transition:opacity .25s ease,background-color .2s ease}
.porque-video:hover .pv-btn,.pv-btn:focus-visible,.porque-video.is-paused .pv-btn{opacity:1}
.pv-btn:hover{background:#fff}
.pv-btn svg{width:14px;height:14px;fill:currentColor}
.pv-btn .pv-play,.porque-video.is-paused .pv-pausa{display:none}
.porque-video.is-paused .pv-play{display:block}
@media (hover:none){.pv-btn{opacity:1}}

/* ---------- «Ya lo tenéis»: la escena dibujada que sustituye al vídeo (index.html #ppVideo, app.js) ----------
   Escenario de 480×600 escalado con zoom al ancho de la figura. Cada plano añade una clase a la figura (p1…p6, se
   acumulan): .pN = «del plano N en adelante» y .pN:not(.pN+1) = «solo el plano N». Solo transform y opacidad (sin
   desenfoques: cada radio de blur es un programa de GPU nuevo y atascaba el primer scroll). */
.ylt{background:radial-gradient(70% 45% at 50% 100%,rgba(176,122,74,.16),transparent 70%),#F1EBE1}
.ylt-st{position:absolute;left:0;top:0;width:480px;height:600px;font-family:var(--font);color:var(--ink);text-align:left;line-height:1.3}
.ylt-st *{box-sizing:border-box}
.ylt-st img{display:block}
.ylt-titulo p,.ylt-app,.ylt-tarjeta,.ylt-marco,.ylt-final p,.ylt-marca,.ylt-todo{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.ylt-reset,.ylt-reset *{transition:none!important;animation:none!important}
/* 1 · el título */
.ylt-titulo{position:absolute;left:0;right:0;top:196px;padding:0 30px;text-align:center}
.ylt-titulo p{margin:0;opacity:0;transform:translateY(10px)}
.ylt-titulo .t1,.ylt-titulo .t2{font-size:35px;font-weight:500;letter-spacing:-.035em;line-height:1.12}
.ylt-titulo em{font-style:normal;color:var(--bronze-text)}
.ylt-titulo .t3{margin-top:18px;font-size:15px;color:var(--ink-45)}
.p1:not(.p2) .ylt-titulo p{opacity:1;transform:none}
.p1:not(.p2) .ylt-titulo .t2{transition-delay:.25s}
.p1:not(.p2) .ylt-titulo .t3{transition-delay:.8s}
/* 2 · las tres apps de siempre */
.ylt-app{position:absolute;left:40px;width:400px;height:150px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(27,24,22,.06),0 20px 40px -24px rgba(60,35,15,.45);overflow:hidden;opacity:0;transform:translateY(18px);transform-origin:0 0}
.ylt-outlook{top:60px}.ylt-excel{top:225px}.ylt-teams{top:390px}
.ylt-app .cab{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;color:#fff;font-size:13px}
.ylt-app .cab img{width:20px;height:20px;padding:2px;border-radius:5px;background:#fff}
.ylt-app .cab b{font-weight:600}
.ylt-app .cab span{margin-left:auto;font-size:11px;opacity:.85}
.ylt-outlook .cab{background:#0F6CBD}.ylt-excel .cab{background:#107C41}.ylt-teams .cab{background:#5B5FC7}
.ylt-app i[style]{flex:none;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;font:600 10px/26px var(--font);font-style:normal;text-align:center}
.ylt-outlook .fila{display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;border-top:1px solid var(--ink-5);font-size:12px}
.ylt-outlook .fila.on{background:#FBF1E7}
.ylt-outlook .fila span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ylt-outlook .fila b{font-weight:600}
.ylt-outlook .fila small{font-size:11px;color:var(--ink-65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ylt-outlook .fila em{font-style:normal;font-size:10.5px;color:var(--ink-45)}
.ylt-excel .tabla{display:grid;grid-template-columns:1.45fr 1fr .9fr;font-size:12px}
.ylt-excel .tabla>span{position:relative;height:29px;display:flex;align-items:center;padding:0 12px;border-top:1px solid var(--ink-5);border-right:1px solid var(--ink-5);transition:background-color .4s}
.ylt-excel .tabla .th{height:26px;background:#F3F7F4;color:var(--ink-65);font-size:11px;font-weight:600}
.ylt-excel .tabla em{font-style:normal;font-size:10.5px;padding:3px 7px;border-radius:99px;background:#E7F4EC;color:#1e7a48}
.ylt-excel .tabla b{font-weight:500}
.ylt-excel .v1{color:var(--ink-45);transition:opacity .4s}
.ylt-excel .v2{position:absolute;left:12px;opacity:0;transition:opacity .4s}
.ylt-excel em.v2{background:#FBE9D6;color:var(--bronze-text)}
.ylt-teams .msj{display:flex;gap:10px;padding:10px 12px 0;font-size:12px}
.ylt-teams .msj span{display:flex;flex-direction:column;gap:2px}
.ylt-teams .msj b{font-size:11.5px;font-weight:600}
.p2 .ylt-app{opacity:1;transform:none}
.p2:not(.p3) .ylt-excel{transition-delay:.35s}
.p2:not(.p3) .ylt-teams{transition-delay:.7s}
/* 3 · se recogen en una fila y Power Automate las une; el pedido viaja y se apunta en el Excel */
.p3 .ylt-outlook{transform:translate(-22px,-32px) scale(.36)}
.p3 .ylt-excel{transform:translate(128px,-197px) scale(.36)}
.p3 .ylt-teams{transform:translate(278px,-362px) scale(.36)}
.ylt-lineas{position:absolute;left:0;top:0;width:480px;height:600px;overflow:visible}
.ylt-lineas path{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55;transition:stroke-dashoffset .8s ease}
.p3 .ylt-l1 path{stroke-dashoffset:0;transition-delay:.6s}
.p4 .ylt-l1 path{transition-delay:0s}
.p4 .ylt-l2 path{stroke-dashoffset:0;transition-delay:.2s}
.ylt-chip{position:absolute;left:0;top:0;offset-path:path("M90 84 C90 116 240 108 240 175");offset-rotate:0deg;offset-distance:0%;opacity:0;padding:6px 11px;border-radius:99px;background:var(--bronze);color:#fff;font:600 11px/1 var(--font);white-space:nowrap;box-shadow:0 6px 14px -6px rgba(110,70,30,.6);z-index:2}
.p3:not(.p4) .ylt-chip{animation:ylt-chip 1.5s cubic-bezier(.6,0,.3,1) .8s both}
@keyframes ylt-chip{0%{offset-distance:0%;opacity:0}12%{opacity:1}86%{opacity:1}100%{offset-distance:100%;opacity:0}}
.p3 .ylt-excel span.nuevo{background:#FBF1E7;transition-delay:2s}
.p3 .ylt-excel .nuevo .v2{opacity:1;transition-delay:2s}
.p3 .ylt-excel .nuevo .v1{opacity:0;transition-delay:2s}
.p4 .ylt-excel span.nuevo,.p4 .ylt-excel .nuevo .v1,.p4 .ylt-excel .nuevo .v2{transition-delay:0s}
.ylt-tarjeta{position:absolute;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(27,24,22,.06),0 22px 44px -26px rgba(60,35,15,.5);opacity:0;transform:translateY(16px)}
.ylt-tarjeta .cab{display:flex;align-items:center;gap:10px}
.ylt-tarjeta .cab img{width:28px;height:28px}
.ylt-tarjeta .cab span{display:flex;flex-direction:column;line-height:1.2}
.ylt-tarjeta .cab b{font-size:14px;font-weight:600}
.ylt-tarjeta .cab small{font-size:11px;color:var(--ink-45)}
.ylt-pa{left:90px;top:140px;width:300px;height:140px;padding:14px 16px;z-index:1}
.ylt-pa ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--ink-90)}
.ylt-pa li{display:flex;align-items:center;gap:9px}
.ylt-pa li i{flex:none;width:17px;height:17px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(27,24,22,.18);background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0 no-repeat;transition:background-color .3s,background-size .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.p3 .ylt-pa{opacity:1;transform:none;transition-delay:.45s}
.p3 .ylt-pa li i{background-color:#1e8e54;background-size:11px;box-shadow:none}
.p3 .ylt-pa li:nth-child(1) i{transition-delay:1.9s}.p3 .ylt-pa li:nth-child(2) i{transition-delay:2.6s}.p3 .ylt-pa li:nth-child(3) i{transition-delay:3.3s}
.p4 .ylt-pa li i,.p4 .ylt-pa{transition-delay:0s!important}
/* 4 · Power BI cuenta las ventas y Power Apps recibe el pedido */
.ylt-bi{left:20px;top:330px;width:214px;height:236px;padding:14px 16px;display:flex;flex-direction:column}
.ylt-bi .num{margin-top:12px;font-size:28px;font-weight:500;letter-spacing:-.04em;line-height:1}
.ylt-bi .var{margin-top:4px;font-size:11px;color:#1e7a48}
.ylt-bi .barras{flex:1;display:flex;align-items:flex-end;gap:8px;margin-top:12px}
.ylt-bi .barras i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(#efe2d3,#dcc6ab);transition:height .9s cubic-bezier(.2,.9,.3,1.1)}
.ylt-bi .barras .ult{background:linear-gradient(#d9b48c,var(--bronze))}
.ylt-bi .meses{display:flex;gap:8px;margin-top:5px;font-size:9.5px;color:var(--ink-45)}
.ylt-bi .meses span{flex:1;text-align:center}
.ylt-papp{left:246px;top:330px;width:214px;height:236px;padding:14px}
.ylt-papp .ped{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:9px 10px;border-radius:11px;background:var(--sand-2)}
.ylt-papp .ped span{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n e" "b e";column-gap:6px;align-items:center;line-height:1.25;font-size:12px}
.ylt-papp .ped small{grid-area:n;font-size:10px;color:var(--ink-45)}
.ylt-papp .ped b{grid-area:b;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ylt-papp .ped em{grid-area:e;font-style:normal;font-size:11px;font-weight:500;color:var(--bronze-text)}
.ylt-papp .ped i{flex:none;width:8px;height:8px;border-radius:50%;background:#1e8e54}
.ylt-papp .ped.nuevo{max-height:0;margin-top:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;background:#FBF1E7;transition:max-height .6s ease,opacity .5s,margin .6s,padding .6s}
.p4 .ylt-bi{opacity:1;transform:none;transition-delay:.15s}
.p4 .ylt-papp{opacity:1;transform:none;transition-delay:.35s}
.p4 .ylt-bi .barras .ult{height:var(--h2);transition-delay:.9s}
.p4 .ylt-papp .ped.nuevo{max-height:60px;margin-top:10px;padding-top:9px;padding-bottom:9px;opacity:1;transition-delay:1.1s}
/* 5 · todo, dentro de vuestro Microsoft 365 */
.ylt-todo{position:absolute;left:0;top:0;width:480px;height:600px;transform-origin:50% 50%}
.ylt-marco{position:absolute;left:16px;top:16px;width:448px;height:568px;border-radius:24px;border:1.5px dashed rgba(176,122,74,.5);opacity:0;transform:scale(1.03);display:flex;align-items:flex-start;justify-content:space-between;padding:13px 18px;font-size:12px}
.ylt-marco b{font-weight:600}
.ylt-marco em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:11px;color:var(--bronze-text)}
.ylt-marco svg{width:12px;height:12px}
.p5 .ylt-marco{opacity:1;transform:none}
.p5 .ylt-todo{transform:translateY(10px) scale(.88)}
/* 6 · el cierre */
.ylt-final{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.ylt-final p{margin:0;opacity:0;transform:translateY(10px)}
.ylt-final .f1{margin-bottom:8px;font-size:20px;font-weight:500;color:var(--ink-45)}
.ylt-final .f2,.ylt-final .f3{font-size:46px;font-weight:500;letter-spacing:-.04em;line-height:1.05}
.ylt-final em{font-style:normal;color:var(--bronze-text)}
.ylt-marca{position:absolute;left:0;right:0;bottom:34px;text-align:center;font-size:15px;font-weight:600;letter-spacing:-.02em;opacity:0}
.ylt-marca i{font-style:normal;color:var(--bronze)}
.p6 .ylt-todo,.p6 .ylt-marco{opacity:.035}
.p6 .ylt-final p,.p6 .ylt-marca{opacity:1;transform:none}
.p6 .ylt-final .f1{transition-delay:.3s}.p6 .ylt-final .f2{transition-delay:.6s}.p6 .ylt-final .f3{transition-delay:.85s}.p6 .ylt-marca{transition-delay:1.3s}
.porque-texto{display:flex;flex-direction:column;gap:18px;position:sticky;top:120px}
.porque-texto .sub{max-width:46ch}
.porque-claves{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:26px}
.porque-claves li{display:flex;gap:16px;align-items:center;font-size:14.5px;color:var(--ink-65);line-height:1.4}
.porque-claves li > span{display:flex;flex-direction:column;gap:4px}
.porque-claves b{color:var(--ink);font-weight:500;font-size:17px;letter-spacing:-.01em}
.porque-claves i{flex:none;width:44px;height:44px;border-radius:12px;background:var(--bronze-soft);color:var(--bronze-text);display:grid;place-items:center}
.porque-claves svg{width:19px;height:19px}
/* palabra del titular en bronce y subrayado a mano en el texto */
.w--acento{color:var(--bronze-deep)}
.subr{color:var(--ink);padding-bottom:3px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M1 5.2C18 2.6 34 3.4 50 4.6S83 6.6 99 3.4%27 fill=%27none%27 stroke=%27%23B07A4A%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") 0 100%/100% 7px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- proceso: línea de tiempo ---------- */

/* foto del equipo: zonas por persona, velo que oscurece al resto (con el mismo desvanecido de bordes) y ficha con sus tecnologías */
.origen-foto .oscuro{position:absolute;inset:0;z-index:1;transform:translateZ(1px);pointer-events:none;background:rgba(27,24,22,.62);opacity:0;transition:opacity .45s ease;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 82%,transparent 100%),var(--velo);-webkit-mask-size:100% 100%;-webkit-mask-composite:source-in,source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 82%,transparent 100%),var(--velo);mask-size:100% 100%;mask-composite:intersect,intersect}
.origen-foto .oscuro.is-on{opacity:1}
.oscuro--marco{--velo:url(../assets/equipo/velo-marco.png)}
.oscuro--jesus{--velo:url(../assets/equipo/velo-jesus.png)}
.oscuro--alejandro{--velo:url(../assets/equipo/velo-alejandro.png)}
.origen-foto.is-persona .origen-chip{opacity:0}
.origen-chip{transition:opacity .3s ease}
.persona{pointer-events:none;position:absolute;top:0;bottom:0;left:calc(var(--l) * 1%);width:calc(var(--w) * 1%);z-index:2;transform:translateZ(2px);background:transparent;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.persona:focus-visible{outline:0}
.persona-card{position:absolute;left:50%;bottom:7%;translate:-50% 12px;opacity:0;width:max-content;max-width:280px;display:flex;flex-direction:column;gap:10px;padding:14px 16px 15px;border-radius:20px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 2px rgba(27,24,22,.06),0 26px 48px -14px rgba(27,24,22,.38);color:var(--ink);text-align:left;white-space:normal;pointer-events:none;transition:opacity .35s ease,translate .5s var(--ease)}
.persona-card .cab{display:flex;align-items:center;gap:10px}
.persona-card .cab > span:last-child{display:flex;flex-direction:column;gap:3px}
.persona-card b{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.15;white-space:nowrap}
.persona-card small{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--bronze-text)}
.persona-tech{display:flex;flex-wrap:wrap;gap:6px}
.persona-tech span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-90);background:var(--sand-2);box-shadow:var(--ring);padding:5px 10px 5px 6px;border-radius:99px;white-space:nowrap}
.persona-tech img{width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(27,24,22,.14))}
.persona.is-on .persona-card{opacity:1;translate:-50% 0}
/* certificaciones oficiales de Microsoft en la ficha (insignias de learn.microsoft.com) */
.persona-certs{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--ink-5)}
.cert{display:flex;align-items:center;gap:9px}
.cert img{width:34px;height:34px;flex:none;filter:drop-shadow(0 2px 4px rgba(27,24,22,.18))}
.cert > span{display:flex;flex-direction:column;line-height:1.2}
.cert b{font-size:13px;font-weight:600;letter-spacing:.01em}
.cert small{font-size:11.5px !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;color:var(--ink-65) !important}

/* portfolio en Servicios: tarjeta «tu idea» */
.pcard--idea{text-decoration:none;color:inherit}
.th--idea{background:var(--sand);display:grid;place-items:center}
.idea-plus{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#FFFFFF;display:grid;place-items:center}
.idea-plus svg{width:22px;height:22px}
.pcard .go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--bronze-text)}
.pcard .go svg{width:16px;height:16px}

/* ---------- cómo surgió (foto + origen) ---------- */
.origen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;margin:-8px 0 64px}
.origen-foto{position:relative;margin:0}
/* sin marco: la foto se funde con el fondo por los cuatro lados mediante una máscara degradada */
.origen-foto > img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 82%,transparent 100%);mask-composite:intersect}
.origen-chip{position:absolute;left:12%;bottom:12%;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:var(--pill);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--soft);font-size:13.5px;font-weight:500;color:var(--ink-90);white-space:nowrap}
.origen-chip .brand{font-size:15px}
.origen-texto{display:flex;flex-direction:column;gap:16px}
.origen-texto .h3{font-size:clamp(26px,2.9vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.origen-texto p{color:var(--ink-65);font-size:16.5px;line-height:1.6;margin:0}
.origen-hitos{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.origen-hitos li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-90);line-height:1.45}
.origen-hitos i{flex:none;width:26px;height:26px;border-radius:8px;background:var(--bronze-soft);color:var(--bronze-text);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.origen-hitos i svg{width:14px;height:14px}
/* vídeo de presentación, debajo de la foto del equipo: el póster es «¿Qué es locodea?» y el botón va debajo del título */
.presenta{margin-top:clamp(40px,6vw,72px)}
/* sin la foto del equipo, el vídeo va pegado al título de la sección (el .sec-head ya deja 48px debajo) */
.presenta--arriba{margin-top:0}
.presenta-video{position:relative;aspect-ratio:16/9;border-radius:clamp(18px,2.4vw,30px);overflow:hidden;background:var(--sand-2);box-shadow:var(--card),0 50px 90px -50px rgba(60,35,15,.5)}
.presenta-video video{display:block;width:100%;height:100%;object-fit:cover}
.presenta-play{position:absolute;inset:0;border:0;padding:0 0 clamp(28px,9%,90px);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;cursor:pointer;color:var(--ink);font:inherit}
.presenta-play span{width:clamp(56px,7vw,84px);height:clamp(56px,7vw,84px);border-radius:50%;background:var(--ink);display:grid;place-items:center;box-shadow:0 20px 40px -14px rgba(27,24,22,.5);transition:transform .3s var(--ease),background-color .3s}
.presenta-play span svg{width:40%;height:40%;fill:#FFFFFF;margin-left:6%}
.presenta-play b{font-size:14px;font-weight:500;color:var(--ink-65)}
.presenta-play:hover span{transform:scale(1.06);background:var(--bronze)}
.presenta-play:focus-visible span{outline:2px solid var(--bronze);outline-offset:4px}
.presenta-play[hidden]{display:none}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--r-lg);background:var(--sand-2);min-height:300px;box-shadow:0 0 0 1px rgba(27,24,22,.03);transition:box-shadow .5s ease,background-color .4s ease}
.tcard:hover{background:#FFFFFF;box-shadow:var(--soft-hover)}
.tcard .role{position:absolute;top:16px;left:16px}
.tcard .ini{margin-top:auto;font-size:clamp(56px,6vw,84px);font-weight:500;letter-spacing:-.06em;line-height:1;color:var(--bronze);padding-top:64px}
.tcard b{font-weight:500;font-size:19px;letter-spacing:-.02em;color:var(--ink-90);margin-top:10px}
.tcard small{font-size:14px;color:var(--ink-65)}
.tcard .tags{margin-top:10px}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- bloques alternos (por qué pymes) ---------- */
.feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center;padding-block:40px}
.feature .col{gap:18px}
.feature--rev .visual{order:-1}
.visual{position:relative;border-radius:var(--r-xl);background:var(--sand-2);padding:40px;min-height:380px;display:grid;place-items:center;overflow:hidden}
.visual::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;background:radial-gradient(50% 50% at 50% 100%,rgba(176,122,74,.28),rgba(176,122,74,0) 70%);pointer-events:none}
.visual > *{position:relative}
.window{width:100%;max-width:340px;border-radius:18px;background:var(--dark-deep);box-shadow:var(--glow);overflow:hidden;color:#FFFFFF;font-size:13px}
.win-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.win-bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.win-bar span:first-child{background:#FF5F57}.win-bar span:nth-child(2){background:#FEBC2E}.win-bar span:nth-child(3){background:#28C840}
.win-bar em{font-style:normal;margin-left:auto;font-size:11px;color:rgba(255,255,255,.45)}
.win-body{padding:8px 16px 14px;display:flex;flex-direction:column}
.win-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.88)}
.win-row:last-child{border-bottom:0}
.win-row .st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.6)}
.device{width:100%;max-width:300px;background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--lift);overflow:hidden}
.dv-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.dv-label{font-size:12px;color:var(--ink-65);display:flex;align-items:center;gap:6px}
.dv-big{font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.float-tag{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:14px;background:#FFFFFF;box-shadow:var(--soft);font-size:13px;font-weight:500;animation:float 6s ease-in-out infinite}
.float-tag .pp{width:24px;height:24px}

/* ---------- casos de uso ---------- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.case{background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--soft);padding:24px;display:flex;flex-direction:column;gap:16px;transition:box-shadow .5s ease}
.case:hover{box-shadow:var(--soft-hover)}
.case q{quotes:"«" "»";font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--ink-90);text-wrap:pretty}
.case .sol{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-65);line-height:1.5}
.case .sol svg{width:20px;height:20px;flex:none;color:var(--bronze-text);margin-top:2px}
.case .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.case .hours{font-size:13.5px;font-weight:500;color:var(--bronze-text)}

/* ---------- testimonios (tarjeta oscura grande + pequeñas, como evolve) ---------- */

/* ---------- pasos numerados 01 02 03 (como evolve) ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step3{position:relative;background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--soft);padding:26px 24px 24px;display:flex;flex-direction:column;gap:14px;min-height:220px;transition:box-shadow .5s ease}
.step3:hover{box-shadow:var(--soft-hover)}
.step3 .num{font-size:14px;font-weight:500;color:var(--bronze-text);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.step3 h4{font-size:21px}
.step3 p{font-size:15px;color:var(--ink-65);line-height:1.5}
.step3 .num::after{content:"";display:block;width:32px;height:2px;background:var(--bronze);margin-top:10px;border-radius:2px}

/* ---------- preguntas frecuentes (acordeón) ---------- */
.faq{display:flex;flex-direction:column;gap:8px}
.faq-item{border-radius:18px;background:var(--sand-2);overflow:hidden;transition:background-color .3s,box-shadow .4s}
.faq-item.is-open{background:#FFFFFF;box-shadow:var(--soft)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;text-align:left;font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--ink-90)}
.faq-q i{flex:none;width:32px;height:32px;border-radius:50%;background:#FFFFFF;box-shadow:var(--card);display:grid;place-items:center;transition:transform .4s var(--ease),background-color .3s}
.faq-q i svg{width:16px;height:16px;color:var(--ink-90)}
.faq-item.is-open .faq-q i{transform:rotate(45deg);background:var(--ink);color:#FFFFFF}
.faq-item.is-open .faq-q i svg{color:#FFFFFF}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 22px 22px;font-size:15.5px;color:var(--ink-65);line-height:1.55;max-width:70ch}
.faq-item.is-open .faq-a{grid-template-rows:1fr}

/* ---------- contacto: auditoría ---------- */
.cta{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:start}
.contact-rows{display:flex;flex-direction:column;gap:8px}
.crow{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:14px;background:rgba(255,255,255,.7);box-shadow:var(--ring);font-size:15px;font-weight:500;color:var(--ink-90)}
.crow svg{width:18px;height:18px;color:var(--bronze-text);flex:none}
.crow span{user-select:all;flex:1;min-width:0;overflow-wrap:anywhere}
.crow button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--pill);background:#FFFFFF;box-shadow:var(--ring);font-size:13px;font-weight:500;color:var(--ink-65);transition:background-color .2s}
.crow button:hover{background:var(--sand-2);color:var(--ink)}
.crow button svg{width:14px;height:14px;color:inherit}
.cal{background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--lift);padding:22px;display:flex;flex-direction:column;gap:16px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-head b{font-weight:500;font-size:16px;color:var(--ink-90);text-transform:capitalize}
.cal-head button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-65);box-shadow:var(--ring)}
.cal-head button:hover{background:var(--sand-2);color:var(--ink)}
.cal-head button svg{width:16px;height:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-grid .dn{font-size:12px;color:var(--ink-45);text-align:center;padding-block:4px;font-weight:500}
.day{height:38px;border-radius:12px;font-size:14px;font-weight:500;color:var(--ink-90);display:grid;place-items:center;transition:background-color .2s,color .2s,transform .2s var(--ease)}
.day:hover{background:var(--sand-2)}
.day.is-off{color:var(--ink-10);pointer-events:none}
.day.is-today{box-shadow:inset 0 0 0 1px var(--bronze-light)}
.day.is-sel{background:var(--bronze);color:#FFFFFF;transform:scale(1.04)}
.slots{display:flex;flex-wrap:wrap;gap:6px}
.slot{padding:8px 14px;border-radius:var(--pill);background:var(--sand-2);font-size:14px;font-weight:500;color:var(--ink-90);transition:background-color .2s,color .2s}
.slot:hover{background:var(--sand)}
.slot.is-sel{background:var(--ink);color:#FFFFFF}
.cal-summary{font-size:14px;color:var(--ink-65);min-height:20px}
.cal-summary b{color:var(--ink-90);font-weight:500}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13px;font-weight:500;color:var(--ink-90)}
.field input,.field textarea{width:100%;background:#FFFFFF;box-shadow:var(--ring);border:0;border-radius:14px;padding:13px 16px;font-size:14.5px;color:var(--ink);min-height:48px;outline:0;transition:box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-45)}
.field input:focus,.field textarea:focus{box-shadow:0 0 0 2px var(--bronze)}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
.field--full{grid-column:1/-1}
.done{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--sand-2);font-size:15px;color:var(--ink-90);line-height:1.5}
.done svg{width:22px;height:22px;flex:none;color:var(--bronze-text);margin-top:2px}
.done b{font-weight:500}

/* ---------- pie (columnas, como evolve) ---------- */
/* pie: panel redondeado con degradado suave (como el de aave.com), columnas con título en bronce, logo grande, redes y aviso */
/* pie a sangre: tinta oscura, esquinas superiores redondeadas, glow bronce abajo y marca de agua gigante; el contenido sigue alineado con el contenedor */
.footer{position:relative;left:50%;width:var(--vw,100vw);translate:-50% 0;margin:72px 0 0;padding:80px max(16px,(100% - 1240px) / 2) 28px;border-radius:44px 44px 0 0;background:linear-gradient(180deg,#5F3E26 0%,#4B301B 100%);color:rgba(255,255,255,.78);overflow:hidden;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"brand grid" "disc disc" "legal legal" "bottom bottom";column-gap:48px}
.footer::before{content:"";position:absolute;inset:auto -10% -50% -10%;height:80%;background:radial-gradient(45% 50% at 50% 100%,rgba(217,180,140,.35),rgba(217,180,140,0) 70%);pointer-events:none}
.footer::after{content:"locodea.";position:absolute;left:50%;bottom:-.16em;translate:-50% 0;font-size:clamp(120px,19vw,320px);font-weight:600;letter-spacing:-.06em;line-height:1;white-space:nowrap;color:rgba(255,255,255,.045);pointer-events:none}
.footer > *{position:relative;z-index:1}
.foot-grid{grid-area:grid;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.foot-col{display:flex;flex-direction:column;gap:12px;font-size:15px}
.foot-col b{font-weight:500;color:#F0DCC4;margin-bottom:4px}
.foot-col a{text-decoration:none;color:rgba(255,255,255,.72);display:inline-flex;align-items:center;gap:10px;transition:color .2s,transform .25s var(--ease)}
.foot-col a:hover{color:#FFFFFF;transform:translateX(2px)}
.foot-col span{color:rgba(255,255,255,.45);font-size:14px}
.foot-col .pp{width:20px;height:20px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.foot-col .mini-plus{width:20px;height:20px;border-radius:6px;background:#FFFFFF;color:var(--bronze-deep);display:grid;place-items:center}
.foot-col .mini-plus svg{width:11px;height:11px}
.foot-legal{grid-area:legal;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:20px;font-size:14px}
.foot-legal b{font-weight:500;color:rgba(255,255,255,.45);margin:0}
.foot-legal a{text-decoration:none;color:rgba(255,255,255,.72);align-self:flex-start}
.foot-legal a:hover{color:#FFFFFF}
.foot-brand{grid-area:brand;margin-top:0;display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.logo--big{font-size:40px;gap:12px;color:#FFFFFF}
.logo--big span{color:#FFFFFF}
.logo--big img{width:44px;height:44px;border-radius:14px}
.foot-social{display:flex;gap:6px}
.foot-social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.55);transition:color .2s,background-color .2s}
.foot-social a:hover{color:#FFFFFF;background:rgba(255,255,255,.1)}
.foot-social svg{width:20px;height:20px}
.foot-disc{grid-area:disc;margin-top:56px;font-size:13px;color:rgba(255,255,255,.42);max-width:64ch;line-height:1.55}
.foot-bottom{grid-area:bottom;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.45)}

/* ---------- servicios ---------- */
.stabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px;margin:0 -4px}
.stabs::-webkit-scrollbar{display:none}
.stab{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 10px;border-radius:var(--pill);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.08);color:rgba(255,255,255,.78);font-size:14px;font-weight:500;white-space:nowrap;transition:background-color .25s,color .25s,transform .25s var(--ease)}
.stab .pp{width:22px;height:22px;filter:none}
.stab:hover{background:rgba(255,255,255,.12);color:#FFFFFF;transform:translateY(-1px)}
.stab.is-on{background:#FFFFFF;color:var(--ink);box-shadow:none}
.svc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:center;margin-top:40px}
.svc-left{display:flex;flex-direction:column;gap:20px;animation:fadein .5s var(--ease) both}
.svc-left .h2{font-size:clamp(28px,3.6vw,44px)}
.svc-left .head{display:flex;align-items:center;gap:12px}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sub-h{font-size:14px;font-weight:500;color:var(--bronze-light);letter-spacing:.01em}
.svc-para{margin:-4px 0 4px;max-width:44ch;font-size:17px;line-height:1.5;color:rgba(255,255,255,.92)}
.svc-proj{display:flex;flex-direction:column;gap:10px}
.svc-proj li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:rgba(255,255,255,.88)}
.svc-proj li svg{width:20px;height:20px;flex:none;color:var(--bronze-light);margin-top:2px}
.svc-right{display:flex;justify-content:center;align-items:center;min-height:380px}
.svc-pf{margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1)}
.svc-pf-h{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;max-width:60ch}
.svc-pf-h .eyebrow{color:var(--bronze-light)}
.svc-pf-h .h3{margin:0;color:#fff}
.svc-pf-h p{margin:0;font-size:15px;color:rgba(255,255,255,.65)}
.svc-pf .pf{grid-template-columns:repeat(4,minmax(0,1fr))}
/* dentro del panel oscuro los títulos se pintan en blanco: en las tarjetas blancas del portfolio van en tinta */
.svc-pf .pcard h4{color:var(--ink)}
/* pestaña Power BI: fuera el panel de pestañas; lo cuenta «Power BI, a fondo» (a las otras herramientas se va por el menú) */
#tecnologias.is-pbi{display:none}
.dcard{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.08);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:10px;color:#FFFFFF;animation:fadein .5s var(--ease) both;transition:background-color .3s}
.dcard:hover{background:rgba(255,255,255,.09)}
.dcard .ey{font-size:13px;font-weight:500;color:var(--bronze-light)}
.dcard h4{color:#FFFFFF;font-size:18px;letter-spacing:-.02em;line-height:1.2}
.dcard p{font-size:14px;color:rgba(255,255,255,.7);line-height:1.5}

/* maquetas animadas (secuencia común de 10 s: q1..q4 son los pasos) */
.mock{width:100%;max-width:360px;background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--glow);overflow:hidden;color:var(--ink);font-size:13px;animation:fadein .5s var(--ease) both}
.mock--phone{max-width:300px;border:7px solid var(--dark-deep);border-radius:34px}
.mk-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--ink-5);font-size:13px}
.mk-top b{font-weight:500;font-size:14px;color:var(--ink-90)}
.mk-top .st{display:inline-flex;align-items:center;gap:6px;color:var(--ink-65);font-size:12px}
.mk-url{padding:8px 12px;background:var(--sand-2);border-bottom:1px solid var(--ink-5);font-size:11px;color:var(--ink-45);text-align:center}
.mk-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.mk-body--tight{padding-top:4px}
.mk-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--ink-5);color:var(--ink-90)}
.mk-row:last-child{border-bottom:0}
.mk-row b{font-weight:500}
.mk-row .st{display:inline-flex;align-items:center;gap:6px;color:var(--ink-65);font-size:12px}
.mk-field{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;background:var(--sand-2)}
.mk-field small{font-size:11px;color:var(--ink-45)}
.mk-field .val{font-weight:500;color:var(--ink-90);min-height:18px}
.type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;vertical-align:bottom;border-right:2px solid var(--bronze)}
.q1{animation:seq1 10s linear infinite}
.q2{animation:seq2 10s linear infinite}
.q3{animation:seq3 10s linear infinite}
.q4{animation:seq4 10s linear infinite}
@keyframes seq1{0%,2%{opacity:0;transform:translateY(6px)}6%,88%{opacity:1;transform:none}93%,100%{opacity:0}}
@keyframes seq2{0%,20%{opacity:0;transform:translateY(6px)}24%,88%{opacity:1;transform:none}93%,100%{opacity:0}}
@keyframes seq3{0%,40%{opacity:0;transform:translateY(6px)}44%,88%{opacity:1;transform:none}93%,100%{opacity:0}}
@keyframes seq4{0%,60%{opacity:0;transform:translateY(6px)}64%,88%{opacity:1;transform:none}93%,100%{opacity:0}}
.t1{animation:type1 10s linear infinite}
.t2{animation:type2 10s linear infinite}
@keyframes type1{0%,4%{max-width:0}18%,88%{max-width:100%}93%,100%{max-width:0}}
@keyframes type2{0%,24%{max-width:0}38%,88%{max-width:100%}93%,100%{max-width:0}}
.mk-photo{height:64px;border-radius:10px;background:var(--sand);display:grid;place-items:center;color:var(--ink-45);font-size:12px}
.mk-photo span{display:inline-flex;align-items:center;gap:6px}
.mk-photo svg{width:16px;height:16px}
.mk-sign{width:100%;height:54px;border-radius:10px;background:var(--sand-2)}
.mk-sign path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:draw 10s linear infinite}
@keyframes draw{0%,44%{stroke-dashoffset:320}58%,88%{stroke-dashoffset:0}93%,100%{stroke-dashoffset:320}}
.mk-sent{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--pill);background:var(--bronze-soft);color:var(--bronze-text);font-weight:500;font-size:12.5px;align-self:flex-start}
.mk-sent svg{width:14px;height:14px}
/* maqueta de la app (Power Apps) con el diseño de locodea.: interactiva, cinco pantallas dentro del móvil */
.mock--pa{max-width:300px;height:586px;display:flex;flex-direction:column;background:var(--sand-2);color:var(--ink);font-size:12.5px;position:relative;user-select:none;-webkit-user-select:none}
.mock--pa button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mock--pa input{font:inherit;color:var(--ink);user-select:text;-webkit-user-select:text}
.pa-status{flex:none;display:flex;justify-content:space-between;align-items:center;padding:9px 20px 4px;font-size:11.5px}
.pa-status b{font-weight:600}
.pa-status > span:last-child{display:inline-flex;gap:5px;align-items:center}
.pa-status svg{height:10px;width:auto;fill:currentColor}
.pa-island{width:72px;height:20px;border-radius:99px;background:var(--dark-deep)}
.pa-toast{position:absolute;left:50%;top:6px;z-index:6;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 9px;border-radius:99px;background:var(--dark-deep);color:#fff;font-size:12px;font-weight:500;white-space:nowrap;box-shadow:0 12px 24px -10px rgba(0,0,0,.5);opacity:0;transform:translate(-50%,-4px) scale(.6);pointer-events:none;transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.pa-toast.is-on{opacity:1;transform:translate(-50%,0) scale(1)}
.pa-toast svg{width:18px;height:18px;fill:var(--bronze-light);flex:none}
/* notificaciones que caen desde la campana */
.pa-noti{position:absolute;left:10px;right:10px;top:40px;z-index:5;padding:12px;border-radius:16px;background:#fff;box-shadow:0 20px 40px -12px rgba(27,24,22,.35),0 0 0 1px var(--ink-5);display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .25s ease,transform .35s var(--ease)}
.pa-noti.is-on{opacity:1;transform:none;pointer-events:auto}
.pa-noti > b{font-size:13px;font-weight:600}
.pa-noti p{margin:0;display:flex;gap:9px;font-size:11.5px;line-height:1.4;color:var(--ink-65)}
.pa-noti p i{flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--bronze)}
.pa-noti p i.ok{background:var(--ok)}
.pa-noti strong{color:var(--ink);font-weight:600}
.pa-noti small{display:block;font-size:10px;color:var(--ink-45);margin-top:1px}
/* pantallas */
.pa-vista{position:relative;flex:1;min-height:0;overflow:hidden}
.pa-scr{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:6px 12px 14px;display:flex;flex-direction:column;gap:8px;opacity:0;translate:14px 0;pointer-events:none;transition:opacity .28s ease,translate .38s var(--ease)}
.pa-scr::-webkit-scrollbar{display:none}
.pa-scr.is-on{opacity:1;translate:0 0;pointer-events:auto}
.pa-scr--sub{background:var(--sand-2);translate:100% 0;opacity:1;z-index:2;transition:translate .42s var(--ease)}
.pa-scr--sub.is-on{translate:0 0}
.pa-head{display:flex;justify-content:space-between;align-items:flex-end;padding:4px 2px 2px}
.pa-head > span:first-child{display:flex;flex-direction:column}
.pa-head small{font-size:11px;color:var(--ink-45);font-weight:500}
.pa-head b{font-size:24px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.pa-bell{position:relative;width:32px;height:32px;border-radius:50%;background:#fff !important;box-shadow:var(--card);display:grid;place-items:center;transition:scale .2s ease}
.pa-bell:active{scale:.92}
.pa-bell svg{width:15px;height:15px}
.pa-bell i{position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--bronze);box-shadow:0 0 0 1.5px #fff}
.pa-bell.is-leido i{display:none}
.pa-seg{display:flex;gap:4px;padding:3px;border-radius:99px;background:var(--sand-3)}
.pa-seg button{flex:1;text-align:center;padding:4px 0;border-radius:99px;font-size:11px;font-weight:500;color:var(--ink-65);transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.pa-seg button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(27,24,22,.1)}
.pa-lista{display:flex;flex-direction:column;gap:7px}
.pa-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:14px;background:#fff !important;box-shadow:var(--card);text-align:left;animation:paEntra .4s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms);transition:scale .15s ease}
.pa-item:active{scale:.98}
.pa-item.is-new{box-shadow:0 0 0 1.5px var(--bronze),0 8px 18px -10px rgba(176,122,74,.6)}
@keyframes paEntra{from{opacity:0;translate:0 6px}}
.pa-ic{width:30px;height:30px;border-radius:10px;background:var(--bronze-soft);color:var(--bronze-text);display:grid;place-items:center;flex:none}
.pa-ic svg{width:13px;height:13px}
.pa-ic--pend{background:var(--sand-3);color:var(--ink-65)}
.pa-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.pa-txt b{font-weight:600;font-size:12.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-txt small{font-size:10.5px;color:var(--ink-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-badge{flex:none;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:rgba(1,208,98,.12);color:#067A3C;font-size:10.5px;font-weight:600}
.pa-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}
.pa-badge--pend{background:rgba(254,188,46,.18);color:#8A5A00}
.pa-badge--pend::before{background:var(--warn)}
.pa-vacio{padding:18px 10px;text-align:center;color:var(--ink-45);font-size:11.5px}
/* formulario */
.pa-form{margin-top:2px;padding:11px;border-radius:18px;background:#fff;box-shadow:var(--soft);display:flex;flex-direction:column;gap:7px}
.pa-form-h{display:flex;justify-content:space-between;align-items:baseline}
.pa-form-h b{font-size:14px;font-weight:600;letter-spacing:-.02em}
.pa-form-h small{font-size:10.5px;color:var(--ink-45)}
.pa-in{position:relative;display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:11px;background:var(--sand-2);font-weight:500;cursor:text;transition:box-shadow .2s ease}
.pa-in small{font-size:10px;color:var(--ink-45);font-weight:500}
.pa-in input{border:0;outline:0;background:transparent;padding:0;font-size:12.5px;font-weight:500;width:100%;caret-color:var(--bronze)}
.pa-in input::placeholder{color:var(--ink-45);font-weight:400}
.pa-in:focus-within,.pa-in.is-foco{box-shadow:0 0 0 1.5px var(--bronze),0 0 0 4px var(--bronze-soft)}
.pa-in.is-err{box-shadow:0 0 0 1.5px #D2433A,0 0 0 4px rgba(210,67,58,.14);animation:paTiembla .4s ease}
@keyframes paTiembla{20%,60%{translate:-4px 0}40%,80%{translate:4px 0}}
.pa-sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:3;display:none;flex-direction:column;padding:4px;border-radius:12px;background:#fff;box-shadow:0 14px 30px -10px rgba(27,24,22,.3),0 0 0 1px var(--ink-5)}
.pa-sug.is-on{display:flex}
.pa-sug button{text-align:left;padding:6px 8px;border-radius:8px;font-size:12px}
.pa-sug button:hover,.pa-sug button.is-act{background:var(--sand-2)}
.pa-sug mark{background:none;color:var(--bronze-text);font-weight:600}
.pa-duo{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pa-foto{display:flex;align-items:center;gap:7px;padding:5px;border-radius:11px;background:var(--sand-2) !important;min-width:0;text-align:left;transition:scale .15s ease}
.pa-foto:active{scale:.97}
.pa-thumb{width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center;background:#fff;color:var(--ink-45);box-shadow:inset 0 0 0 1px var(--ink-10)}
.pa-thumb svg{width:16px;height:16px}
.pa-foto.is-on .pa-thumb{box-shadow:none;background:radial-gradient(circle at 34% 40%,#E9E2D8 0 16%,transparent 17%),radial-gradient(circle at 34% 40%,#8C7F72 0 30%,transparent 31%),linear-gradient(160deg,#C5B8A8,#6E6155 70%,#4A3F36)}
.pa-foto.is-on .pa-thumb svg{display:none}
.pa-foto span:last-child{display:flex;flex-direction:column;min-width:0}
.pa-foto b{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-foto small{font-size:10px;color:var(--ink-45)}
.pa-firma{position:relative;height:42px;border-radius:11px;background:var(--sand-2);overflow:hidden;touch-action:none}
.pa-firma canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.pa-firma small{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;color:var(--ink-45);pointer-events:none;transition:opacity .2s ease}
.pa-firma.is-on small{opacity:0}
.pa-borrar{position:absolute;top:3px;right:4px;width:18px;height:18px;border-radius:50%;background:rgba(27,24,22,.08) !important;font-size:13px !important;line-height:1;display:none;place-items:center;color:var(--ink-65) !important}
.pa-firma.is-on .pa-borrar{display:grid}
.pa-btn{display:flex;align-items:center;justify-content:center;gap:7px;height:36px;border-radius:99px;background:var(--ink) !important;color:#fff !important;font-weight:600;font-size:12.5px;transition:background-color .25s ease,scale .15s ease}
.pa-btn:active{scale:.97}
.pa-btn svg{width:14px;height:14px}
.pa-btn.is-busy{background:var(--bronze) !important;pointer-events:none}
.pa-btn.is-busy svg{display:none}
.pa-btn.is-busy::after{content:"";width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:paGira .7s linear infinite}
@keyframes paGira{to{rotate:360deg}}
/* flash de la cámara */
.mock--pa::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;opacity:0;pointer-events:none;z-index:7}
.mock--pa.is-flash::after{animation:paFlash .45s ease}
@keyframes paFlash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
/* detalle de un parte */
.pa-top{display:flex;align-items:center;gap:8px;padding:2px 0 4px}
.pa-back{width:30px;height:30px;border-radius:50%;background:#fff !important;box-shadow:var(--card);display:grid;place-items:center;flex:none}
.pa-back svg{width:14px;height:14px}
.pa-top b{font-size:15px;font-weight:600;letter-spacing:-.02em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-card{padding:11px;border-radius:16px;background:#fff;box-shadow:var(--card);display:flex;flex-direction:column;gap:8px}
.pa-card h4{margin:0;font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.pa-filas{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:11.5px}
.pa-filas dt{color:var(--ink-45)}
.pa-filas dd{margin:0;font-weight:500;text-align:right}
.pa-adj{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pa-adj > span{height:54px;border-radius:10px;background:var(--sand-2);display:grid;place-items:center;overflow:hidden}
.pa-adj .ft{background:radial-gradient(circle at 34% 40%,#E9E2D8 0 12%,transparent 13%),radial-gradient(circle at 34% 40%,#8C7F72 0 24%,transparent 25%),linear-gradient(160deg,#C5B8A8,#6E6155 70%,#4A3F36)}
.pa-adj svg{width:90%;height:70%}
.pa-adj path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.pa-linea{list-style:none;margin:0;padding:0 0 0 4px;display:flex;flex-direction:column;gap:9px}
.pa-linea li{position:relative;padding-left:18px;font-size:11.5px;line-height:1.3}
.pa-linea li::before{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border-radius:50%;background:var(--sand-3)}
.pa-linea li.ok::before{background:var(--ok)}
.pa-linea li.bc::before{background:var(--bronze)}
.pa-linea li + li::after{content:"";position:absolute;left:4px;top:-8px;width:1px;height:10px;background:var(--ink-10)}
.pa-linea small{display:block;font-size:10px;color:var(--ink-45)}
.pa-btn--claro{background:var(--bronze) !important}
/* agenda */
.pa-dias{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.pa-dias button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;border-radius:12px;background:#fff !important;box-shadow:var(--card);transition:background-color .2s ease,color .2s ease}
.pa-dias small{font-size:10px;color:var(--ink-45)}
.pa-dias b{font-size:15px;font-weight:600}
.pa-dias i{width:4px;height:4px;border-radius:50%;background:var(--bronze);margin-top:1px}
.pa-dias i.no{visibility:hidden}
.pa-dias button.is-on{background:var(--ink) !important;color:#fff !important}
.pa-dias button.is-on small{color:rgba(255,255,255,.6)}
.pa-hora{flex:none;width:36px;font-size:11px;font-weight:600;color:var(--bronze-text)}
/* resumen */
.pa-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pa-kpis div{padding:10px;border-radius:14px;background:#fff;box-shadow:var(--card);display:flex;flex-direction:column}
.pa-kpis small{font-size:10.5px;color:var(--ink-45)}
.pa-kpis b{font-size:22px;font-weight:600;letter-spacing:-.04em;line-height:1.2}
.pa-kpis em{font-style:normal;font-size:10px;color:#067A3C;font-weight:600}
.pa-graf{padding:11px;border-radius:16px;background:#fff;box-shadow:var(--card)}
.pa-graf > small{font-size:10.5px;color:var(--ink-45)}
.pa-barras{height:120px;margin-top:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end}
.pa-barras span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:10px;color:var(--ink-45)}
.pa-barras i{width:100%;border-radius:7px 7px 4px 4px;background:var(--sand-3);height:0;transition:height .7s cubic-bezier(.3,.7,.2,1);transition-delay:calc(var(--i) * 70ms)}
.pa-barras span.hoy i{background:var(--bronze)}
.pa-barras b{font-size:10.5px;color:var(--ink);font-weight:600}
.pa-kpi-linea{display:flex;gap:8px;align-items:center;padding:9px 11px;border-radius:14px;background:var(--bronze-soft);color:var(--bronze-text);font-size:11px;font-weight:500;line-height:1.35}
.pa-kpi-linea svg{width:14px;height:14px;flex:none}
/* perfil */
.pa-yo{display:flex;align-items:center;gap:11px;padding:11px;border-radius:16px;background:#fff;box-shadow:var(--card)}
.pa-avatar{width:42px;height:42px;border-radius:50%;background:var(--bronze-soft);color:var(--bronze-text);display:grid;place-items:center;flex:none}
.pa-avatar svg{width:22px;height:22px}
.pa-yo > span:last-child{display:flex;flex-direction:column}
.pa-yo b{font-size:14px;font-weight:600}
.pa-yo small{font-size:11px;color:var(--ink-45)}
.pa-ajustes{border-radius:16px;background:#fff;box-shadow:var(--card);padding:2px 11px}
.pa-ajuste{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;font-size:12px}
.pa-ajuste + .pa-ajuste{border-top:1px solid var(--ink-5)}
.pa-sw{position:relative;width:36px;height:21px;border-radius:99px;background:var(--sand-3) !important;flex:none;transition:background-color .25s ease}
.pa-sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(27,24,22,.25);transition:translate .3s cubic-bezier(.34,1.56,.64,1)}
.pa-sw[aria-checked="true"]{background:var(--bronze) !important}
.pa-sw[aria-checked="true"]::after{translate:15px 0}
.pa-sync{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-45);padding:2px 4px}
.pa-sync i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(1,208,98,.18)}
/* barra inferior */
.pa-tabbar{flex:none;display:flex;justify-content:space-around;align-items:center;padding:7px 14px 12px;background:rgba(255,255,255,.9);border-top:1px solid var(--ink-5);color:var(--ink-45)}
.pa-tabbar button{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;transition:color .2s ease,scale .15s ease}
.pa-tabbar button:active{scale:.9}
.pa-tabbar svg{width:17px;height:17px}
.pa-tabbar button.is-on{color:var(--bronze)}
.pa-tabbar .pa-plus{border-radius:50%;background:var(--bronze) !important;color:#fff !important;box-shadow:0 6px 14px -6px rgba(176,122,74,.8)}
/* pista: «es interactiva», se va al tocarla */
.pa-pista{position:absolute;left:50%;bottom:62px;z-index:4;translate:-50% 0;padding:6px 12px;border-radius:99px;background:var(--ink);color:#fff;font-size:11px;font-weight:500;white-space:nowrap;box-shadow:0 10px 20px -8px rgba(27,24,22,.5);pointer-events:none;animation:paPista 2.4s ease-in-out infinite;transition:opacity .3s ease}
.pa-pista::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:inherit;rotate:45deg;translate:-50% 0}
.mock--pa.is-tocada .pa-pista{opacity:0}
@keyframes paPista{0%,100%{translate:-50% 0}50%{translate:-50% -4px}}

.flow{padding:16px;display:flex;flex-direction:column}
.fnode{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--sand-2)}
.fnode i{width:28px;height:28px;border-radius:9px;background:#FFFFFF;box-shadow:var(--ring);display:grid;place-items:center;font-style:normal;font-weight:500;font-size:12px;color:var(--ink-65);grid-row:span 2}
.fnode span{font-weight:500;color:var(--ink-90)}
.fnode b{font-weight:400;font-size:12px;color:var(--bronze-text)}
.fline{position:relative;width:2px;height:22px;margin-left:25px;background:var(--ink-10)}
.fline .fdot{position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--bronze);opacity:0}
.fline:nth-of-type(2) .fdot{animation:trav1 10s linear infinite}
.fline:nth-of-type(4) .fdot{animation:trav2 10s linear infinite}
.fline:nth-of-type(6) .fdot{animation:trav3 10s linear infinite}
/* informe de Power BI (tema locodea.): lienzo fijo de 660×428 que se escala al ancho como «Ajustar a la página» */
.mock--pbi{max-width:none;width:100%;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.mock--pbi .pbi-escala.is-desliza{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.mock--pbi .pbi-escala.is-desliza::-webkit-scrollbar{display:none}
.mock--pbi .pbi-escala{position:relative;width:100%;margin-inline:auto;border-radius:14px;overflow:hidden;box-shadow:var(--glow)}
.pbi{position:absolute;top:0;left:0;width:660px;height:428px;transform-origin:0 0;display:flex;flex-direction:column;background:#F3F2F1;color:#252423;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;font-size:11px;user-select:none;-webkit-user-select:none}
.pbi button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.pbi-bar{flex:none;height:32px;display:flex;align-items:center;gap:9px;padding:0 12px;background:#fff;border-bottom:1px solid #E1DFDD}
.pbi-waffle{width:12px;height:12px;color:#605E5C}
.pbi-logo{width:16px;height:16px}
.pbi-ruta{font-size:11.5px;color:#605E5C;white-space:nowrap}
.pbi-ruta i{font-style:normal;margin:0 3px}
.pbi-ruta b{color:#252423;font-weight:600}
.pbi-conf{padding:1px 7px;border-radius:3px;background:#FDF3E7;color:#8A5A30;font-size:10px;font-weight:600;border:1px solid #F1D9BD}
.pbi-sp{flex:1}
.pbi-act{display:inline-flex;align-items:center;gap:5px;color:#605E5C;font-size:10.5px;white-space:nowrap}
.pbi-act i{width:6px;height:6px;border-radius:50%;background:#107C10}
.pbi-share{padding:4px 10px;border-radius:4px;background:#1B1816;color:#fff;font-size:10.5px;font-weight:600}
.pbi-main{flex:1;min-height:0;display:flex}
.pbi-page{position:relative;flex:1;min-width:0;padding:10px 10px 8px 12px;display:flex;flex-direction:column;gap:8px}
.pbi-filtros{flex:none;width:22px;background:#fff;border-left:1px solid #E1DFDD;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:10px;color:#605E5C}
.pbi-filtros svg{width:11px;height:11px}
.pbi-filtros span{writing-mode:vertical-rl;font-size:10px;font-weight:600;letter-spacing:.02em}
.pbi-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pbi-head > div:first-child{display:flex;flex-direction:column}
.pbi-head b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.pbi-head small{font-size:10px;color:#605E5C}
.pbi-slicer{display:flex;align-items:center;gap:6px}
.pbi-slicer > small{font-size:10px;color:#605E5C}
.pbi-slicer > div{display:flex;padding:2px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px #E1DFDD}
.pbi-slicer button{padding:4px 9px;border-radius:4px;font-size:10.5px;color:#605E5C;transition:background-color .2s ease,color .2s ease}
.pbi-slicer button:hover{background:#F3F2F1}
.pbi-slicer button.is-on{background:#1B1816;color:#fff}
.pbi-p{display:none;flex:1;min-height:0;flex-direction:column;gap:8px;animation:pbiEntra .35s ease}
.pbi-p.is-on{display:flex}
@keyframes pbiEntra{from{opacity:0;translate:0 4px}}
.pbi-v{background:#fff;border-radius:8px;box-shadow:0 1.6px 3.6px rgba(0,0,0,.08),0 .3px .9px rgba(0,0,0,.06);padding:8px 10px;min-width:0}
.pbi-vt{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.pbi-vt b{font-size:11px;font-weight:600}
.pbi-vt-s{font-size:9.5px;color:#605E5C}
.pbi-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pbi-kpi{position:relative;display:flex;flex-direction:column;overflow:hidden;padding-bottom:26px}
.pbi-kpi small{font-size:10px;color:#605E5C}
.pbi-kpi b{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25;font-variant-numeric:tabular-nums}
.pbi-kpi em{font-style:normal;font-size:9.5px;font-weight:600}
.pbi-kpi em.sube{color:#107C10}
.pbi-kpi em.baja{color:#A4262C}
.pbi-kpi svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:26px}
.pbi-kpi .area{fill:rgba(176,122,74,.14)}
.pbi-kpi .linea{fill:none;stroke:#B07A4A;stroke-width:1.5;stroke-linejoin:round}
.pbi-fila{flex:1;min-height:0;display:grid;grid-template-columns:386px 1fr;gap:8px}
.pbi-v--combo svg{width:100%;height:176px;display:block;overflow:visible}
.pbi-ley{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;color:#605E5C}
.pbi-ley i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-left:4px}
.pbi-ley i.c{background:#B07A4A}
.pbi-ley i.l{height:2px;border-radius:1px;background:#1B1816}
.pbi-ax{font-size:9px;fill:#605E5C}
.pbi-grid{stroke:#EDEBE9;stroke-width:1}
.pbi-col{fill:#D9B48C;transition:y .6s cubic-bezier(.3,.7,.2,1),height .6s cubic-bezier(.3,.7,.2,1),fill .2s ease,opacity .2s ease;cursor:pointer}
.pbi-col.ult{fill:#B07A4A}
.pbi-combo-h .pbi-col{opacity:.45}
.pbi-combo-h .pbi-col.is-h{opacity:1}
.pbi-l25{fill:none;stroke:#1B1816;stroke-width:1.6;stroke-dasharray:3 2.5;transition:d .6s cubic-bezier(.3,.7,.2,1)}
.pbi-pt{fill:#fff;stroke:#1B1816;stroke-width:1.3;transition:cx .6s,cy .6s cubic-bezier(.3,.7,.2,1)}
.pbi-val{font-size:8.5px;fill:#252423;font-weight:600;text-anchor:middle;transition:y .6s cubic-bezier(.3,.7,.2,1)}
.pbi-v--donut{display:flex;flex-direction:column}
.pbi-donut-w{position:relative;width:118px;height:118px;margin:4px auto 0}
.pbi-donut-w svg{width:100%;height:100%;rotate:-90deg}
.pbi-seg{fill:none;stroke-width:17;cursor:pointer;transition:stroke-dasharray .6s cubic-bezier(.3,.7,.2,1),stroke-dashoffset .6s cubic-bezier(.3,.7,.2,1),opacity .2s ease}
.pbi-donut-h .pbi-seg{opacity:.35}
.pbi-donut-h .pbi-seg.is-h{opacity:1}
.pbi-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.pbi-donut-c b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.pbi-donut-c small{font-size:9px;color:#605E5C}
.pbi-dley{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.pbi-dley span{display:flex;align-items:center;gap:6px;font-size:10px;color:#605E5C}
.pbi-dley i{width:8px;height:8px;border-radius:50%;flex:none}
.pbi-dley b{margin-left:auto;color:#252423;font-weight:600;font-variant-numeric:tabular-nums}
.pbi-v--tabla,.pbi-v--prod{flex:1;min-height:0}
.pbi-tabla{width:100%;border-collapse:collapse;font-size:10.5px;font-variant-numeric:tabular-nums}
.pbi-tabla th{text-align:left;font-weight:600;color:#605E5C;font-size:9.5px;padding:5px 6px;border-bottom:1px solid #E1DFDD}
.pbi-tabla th.n,.pbi-tabla td.n{text-align:right}
.pbi-tabla td{padding:5px 6px;border-bottom:1px solid #F3F2F1;white-space:nowrap}
.pbi-tabla tr{animation:pbiEntra .35s ease both;animation-delay:calc(var(--i,0) * 30ms)}
.pbi-tabla tbody tr:hover td{background:#FAF9F8}
.pbi-db{position:relative;display:block;height:14px;min-width:90px}
.pbi-db i{position:absolute;left:0;top:1px;bottom:1px;border-radius:2px;background:rgba(176,122,74,.28)}
.pbi-db b{position:relative;display:block;text-align:right;padding-right:2px;font-weight:600}
.pbi-up{color:#107C10;font-weight:600}
.pbi-dn{color:#A4262C;font-weight:600}
.pbi-hbar{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pbi-hbar > div{display:grid;grid-template-columns:130px 1fr 52px;align-items:center;gap:8px;font-size:10.5px}
.pbi-hbar span{color:#605E5C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbi-hbar i{display:block;height:16px;border-radius:0 3px 3px 0;background:#D9B48C;width:0;transition:width .7s cubic-bezier(.3,.7,.2,1);transition-delay:calc(var(--i) * 50ms)}
.pbi-hbar > div:first-child i{background:#B07A4A}
.pbi-hbar b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.pbi-foot{flex:none;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 6px;background:#fff;border-top:1px solid #E1DFDD}
.pbi-tabs{display:flex;align-items:stretch;height:100%}
.pbi-tabs button{position:relative;padding:0 12px;font-size:10.5px;color:#605E5C}
.pbi-tabs button:hover{background:#F3F2F1}
.pbi-tabs button.is-on{color:#252423;font-weight:600}
.pbi-tabs button.is-on::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px;background:#B07A4A}
.pbi-tabs span{display:grid;place-items:center;padding:0 10px;color:#605E5C;font-size:13px}
.pbi-zoom{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#605E5C}
.pbi-zoom i{position:relative;width:60px;height:2px;background:#C8C6C4;border-radius:2px}
.pbi-zoom b{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#605E5C;translate:-50% -50%}
.pbi-zoom em{font-style:normal;font-size:10px;margin-left:4px}
.pbi-tip{position:absolute;z-index:5;min-width:120px;padding:7px 9px;border-radius:4px;background:#252423;color:#fff;font-size:10px;line-height:1.5;pointer-events:none;opacity:0;transition:opacity .12s ease;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.pbi-tip.is-on{opacity:1}
.pbi-tip div{display:flex;justify-content:space-between;gap:14px}
.pbi-tip span{color:#C8C6C4}
.pbi-tip b{font-weight:600;font-variant-numeric:tabular-nums}
/* maqueta de Power Pages: portal de clientes con seguimiento de pedidos (ventana de navegador) */
.mock--pp{max-width:540px;width:100%;border-radius:16px;background:#fff;box-shadow:var(--glow),0 40px 80px -30px rgba(0,0,0,.6);overflow:hidden;color:var(--ink);font-size:13px}
.pp-chrome{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;background:#EDE8E1;border-bottom:1px solid rgba(27,24,22,.08)}
.pp-dots{display:inline-flex;gap:6px}
.pp-dots i{width:10px;height:10px;border-radius:50%;background:rgba(27,24,22,.16)}
.pp-url{flex:1;display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:8px;background:#fff;font-size:12px;color:var(--ink-45);box-shadow:0 1px 1px rgba(27,24,22,.06)}
.pp-url svg{width:12px;height:12px;color:var(--ink-65)}
.pp-url b{font-weight:500;color:var(--ink-90)}
.pp-site{height:510px;display:flex;flex-direction:column;background:var(--sand-2)}
.pp-top{display:flex;align-items:center;gap:16px;height:52px;padding:0 18px;background:#fff;border-bottom:1px solid var(--ink-5)}
.pp-marca{display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:600;font-size:13.5px;letter-spacing:-.01em;line-height:1.1}
.pp-marca small{display:block;font-size:10.5px;font-weight:500;color:var(--ink-45);letter-spacing:0}
.pp-marca > small{display:none}
.pp-logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--bronze),var(--bronze-deep));display:grid;place-items:center}
.pp-logo svg{width:16px;height:16px}
.pp-nav{display:flex;gap:4px;margin-left:auto}
.pp-nav span{padding:6px 10px;border-radius:8px;font-size:12.5px;color:var(--ink-65)}
.pp-nav .is-on{background:var(--sand-2);color:var(--ink);font-weight:500}
.pp-cuenta{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--ink-10);font-size:12px;font-weight:500}
.pp-cuenta svg{width:14px;height:14px}
.pp-buscar{padding:18px 18px 12px;display:flex;flex-direction:column;gap:10px}
.pp-buscar-t b{display:block;font-size:19px;font-weight:600;letter-spacing:-.03em}
.pp-buscar-t small{font-size:12px;color:var(--ink-45)}
.pp-campo{display:flex;align-items:center;gap:8px;height:46px;padding:0 5px 0 14px;border-radius:14px;background:#fff;box-shadow:var(--ring),0 6px 16px -10px rgba(27,24,22,.25);transition:box-shadow .2s ease}
.pp-campo:focus-within,.pp-campo.is-foco{box-shadow:0 0 0 1.5px var(--bronze),0 0 0 5px var(--bronze-soft)}
.pp-campo > svg{width:16px;height:16px;color:var(--ink-45);flex:none}
.pp-campo input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--ink);text-transform:uppercase;caret-color:var(--bronze)}
.pp-campo input::placeholder{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-45)}
.pp-btn{height:36px;padding:0 16px;border:0;border-radius:10px;background:var(--ink);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background-color .2s ease,scale .12s ease}
.pp-btn:active,.pp-btn.is-press{scale:.95}
.pp-btn.is-busy{background:var(--bronze);pointer-events:none}
.pp-btn.is-busy::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:paGira .7s linear infinite}
.pp-sug{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-45)}
.pp-sug button{padding:2px 8px;border:0;border-radius:99px;background:#fff;box-shadow:var(--ring);font:inherit;font-size:11px;font-weight:500;color:var(--ink-65);cursor:pointer}
.pp-sug button:hover{color:var(--bronze-text)}
.pp-res{flex:1;min-height:0;padding:0 18px 16px;overflow:hidden}
/* tarjeta del pedido */
.pp-card{height:100%;display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:var(--card),0 14px 30px -18px rgba(27,24,22,.3);animation:ppEntra .45s var(--ease) both}
@keyframes ppEntra{from{opacity:0;translate:0 10px}}
.pp-card > *{animation:ppEntra .45s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
.pp-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pp-cab b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.pp-cab small{font-size:11.5px;color:var(--ink-45)}
.pp-estado{flex:none;padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:600;background:var(--bronze-soft);color:var(--bronze-text)}
.pp-estado.ok{background:rgba(1,208,98,.12);color:#067A3C}
.pp-estado.prep{background:var(--sand-2);color:var(--ink-65)}
/* progreso con el camión */
.pp-pasos{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding-top:26px}
.pp-pista{position:absolute;left:12.5%;right:12.5%;top:8px;height:4px;border-radius:4px;background:var(--sand-3)}
.pp-pista i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:linear-gradient(90deg,var(--bronze-light),var(--bronze));transition:width 1.1s cubic-bezier(.4,.1,.2,1) .25s}
.pp-camion{position:absolute;top:-9px;left:0;width:26px;height:22px;translate:-50% 0;display:grid;place-items:center;border-radius:7px;background:var(--ink);color:#fff;box-shadow:0 6px 12px -6px rgba(27,24,22,.6);transition:left 1.1s cubic-bezier(.4,.1,.2,1) .25s}
.pp-camion svg{width:15px;height:15px}
.pp-paso{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.pp-paso b{font-size:11.5px;font-weight:600;color:var(--ink-45);transition:color .3s ease}
.pp-paso small{font-size:10.5px;color:var(--ink-45)}
.pp-paso.is-hecho b{color:var(--ink)}
.pp-paso.is-hoy b{color:var(--bronze-text)}
.pp-eta{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--sand-2)}
.pp-eta svg{width:18px;height:18px;flex:none;color:var(--bronze)}
.pp-eta span{display:flex;flex-direction:column;line-height:1.3}
.pp-eta b{font-size:13px;font-weight:600}
.pp-eta small{font-size:11px;color:var(--ink-45)}
.pp-dos{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;min-height:0}
.pp-bloque h5{margin:0 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-45)}
.pp-lineas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pp-lineas li{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-90)}
.pp-lineas li span:last-child{color:var(--ink-45);white-space:nowrap}
.pp-docs{display:flex;flex-direction:column;gap:6px}
.pp-doc{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--ink-10);font-size:11.5px}
.pp-doc svg{width:15px;height:15px;flex:none;color:var(--bronze-text)}
.pp-doc span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-doc i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--bronze-text)}
.pp-vacio{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--ink-45);font-size:12.5px;animation:ppEntra .4s var(--ease) both}
.pp-vacio svg{width:44px;height:44px;color:var(--sand-3)}
.pp-vacio b{color:var(--ink);font-size:14px}
/* maqueta de Copilot Studio: agente con tarjetas, fuentes citadas y sugerencias */
.mock--cs{max-width:400px;width:100%;height:520px;display:flex;flex-direction:column;border-radius:22px;background:#fff;overflow:hidden;color:var(--ink);font-size:13px}
.cs-top{flex:none;display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ink-5)}
.cs-av{position:relative;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from 200deg,#0FA3B1,#6B4FD8,#E3558F,#F2A93B,#0FA3B1) border-box;border:2px solid transparent}
.cs-av img{width:20px;height:20px}
.cs-quien{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cs-quien b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.cs-quien small{font-size:11px;color:var(--ink-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-teams{padding:3px 9px;border-radius:99px;background:var(--sand-2);font-size:11px;color:var(--ink-65)}
.cs-hilo{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:16px 14px 8px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(to bottom,#fff,var(--sand-2))}
.cs-hilo::-webkit-scrollbar{display:none}
.cs-yo{align-self:flex-end;max-width:82%;padding:9px 13px;border-radius:16px 16px 4px 16px;background:var(--ink);color:#fff;font-size:13px;line-height:1.4;animation:csEntra .35s var(--ease) both}
.cs-bot{align-self:flex-start;max-width:92%;display:flex;flex-direction:column;gap:8px;animation:csEntra .4s var(--ease) both}
@keyframes csEntra{from{opacity:0;translate:0 8px}}
.cs-txt{padding:10px 13px;border-radius:16px 16px 16px 4px;background:#fff;box-shadow:var(--card);line-height:1.45}
/* «pensando»: texto con brillo que recorre, sin puntitos */
.cs-piensa{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:var(--card);font-size:12px;color:var(--ink-65);animation:csEntra .3s var(--ease) both}
.cs-piensa svg{width:14px;height:14px;color:var(--bronze);animation:paGira 1.2s linear infinite}
.cs-piensa span{background:linear-gradient(90deg,var(--ink-45) 0,var(--ink) 40%,var(--ink-45) 80%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:csBrillo 1.4s linear infinite}
@keyframes csBrillo{to{background-position:-200% 0}}
/* tarjeta de respuesta */
.cs-card{padding:12px 14px;border-radius:16px;background:#fff;box-shadow:var(--card),0 10px 24px -16px rgba(27,24,22,.35);display:flex;flex-direction:column;gap:10px}
.cs-card-t{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45)}
.cs-big{display:flex;align-items:baseline;gap:8px}
.cs-big b{font-size:36px;font-weight:600;letter-spacing:-.05em;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-big span{font-size:13px;color:var(--ink-65)}
.cs-barra-dias{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--sand-3)}
.cs-barra-dias i{display:block;height:100%;background:var(--ink-10)}
.cs-barra-dias i + i{background:linear-gradient(90deg,var(--bronze-light),var(--bronze))}
.cs-ley{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-45)}
.cs-fuente{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 6px;border-radius:8px;background:var(--sand-2);font-size:11px;color:var(--ink-65)}
.cs-fuente svg{width:13px;height:13px;color:#C43E1C}
.cs-fila{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--ink-5)}
.cs-fila:last-of-type{border-bottom:0}
.cs-fila span:first-child{color:var(--ink-45)}
.cs-fila span:last-child{font-weight:500}
.cs-acc{display:flex;gap:8px}
.cs-acc button{flex:1;height:34px;border:0;border-radius:10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:scale .12s ease,background-color .2s ease}
.cs-acc button:active,.cs-acc button.is-press{scale:.96}
.cs-acc .si{background:var(--ink);color:#fff}
.cs-acc .no{background:var(--sand-2);color:var(--ink)}
.cs-hecho{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:rgba(1,208,98,.1);color:#067A3C;font-size:12.5px;font-weight:600}
.cs-hecho svg{width:16px;height:16px;flex:none}
.cs-sugs{display:flex;flex-wrap:wrap;gap:6px}
.cs-sugs button{height:30px;padding:0 12px;border:0;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px rgba(176,122,74,.45);font:inherit;font-size:12px;font-weight:500;color:var(--bronze-text);cursor:pointer;transition:background-color .2s ease,scale .12s ease}
.cs-sugs button:hover{background:var(--bronze-soft)}
.cs-sugs button.is-press{scale:.95;background:var(--bronze-soft)}
.cs-barra{flex:none;display:flex;align-items:center;gap:8px;margin:8px 12px 12px;padding:5px 5px 5px 14px;border-radius:14px;background:#fff;box-shadow:var(--ring),0 6px 18px -12px rgba(27,24,22,.35);transition:box-shadow .2s ease}
.cs-barra:focus-within,.cs-barra.is-foco{box-shadow:0 0 0 1.5px var(--bronze),0 0 0 5px var(--bronze-soft)}
.cs-barra input{flex:1;min-width:0;height:34px;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);caret-color:var(--bronze)}
.cs-barra input::placeholder{color:var(--ink-45)}
.cs-barra button{width:34px;height:34px;flex:none;border:0;border-radius:10px;background:var(--bronze);color:#fff;display:grid;place-items:center;cursor:pointer;transition:scale .12s ease}
.cs-barra button.is-press{scale:.9}
.cs-barra button svg{width:15px;height:15px}
/* maqueta de Power Automate: lienzo punteado del diseñador, tarjetas de acción con el color de cada conector y checks de la ejecución */
.mock--pf{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif}
.pf-top{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid #E1DFDD;font-size:13px}
.pf-top img{width:20px;height:20px}
.pf-top b{flex:1;font-weight:600;color:#242424}
.pf-ok{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 4px;border-radius:99px;background:#F1FAF1;color:#0E700E;font-size:11px;font-weight:600}
.pf-ok svg{width:14px;height:14px;fill:#107C10}
.pf-canvas{padding:18px 16px 20px;align-items:center;background:#FAF9F8 radial-gradient(#D6D4D2 1px,transparent 1.2px) 0 0/14px 14px}
.pfn{position:relative;width:100%;max-width:268px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px 9px 10px;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.1);border-left:3px solid var(--c)}
.pfn--1{--c:#0F78D4}.pfn--2{--c:#6B4FD8}.pfn--3{--c:#5B5FC7}.pfn--4{--c:#1F8A8A}
.pf-ic{width:30px;height:30px;border-radius:5px;display:grid;place-items:center;background:var(--c)}
.pf-ic svg{width:17px;height:17px}
.pf-ic--ai{background:linear-gradient(135deg,#8B5CF6,#0F6CBD)}
.pf-ic--bc{background:#fff;box-shadow:inset 0 0 0 1px #E1DFDD}
.pf-ic--bc img{width:22px;height:22px}
.pf-t{font-size:13px;font-weight:600;color:#242424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-chip{font-size:11px;font-weight:600;color:#424242;background:#F3F2F1;padding:2px 8px;border-radius:99px;white-space:nowrap}
.pf-chip--si{background:#F1FAF1;color:#0E700E}
/* check verde de ejecución en la esquina, como en el historial de ejecuciones */
.pf-chk{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#107C10 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27m4.5 8.2 2.2 2.2 4.8-5%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 0 2px #fff}
.pf-canvas .fline{margin-left:0;height:24px;background:#8A8886;width:1.5px}
.pf-canvas .fline::after{content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;border:4px solid transparent;border-top:5px solid #8A8886;border-bottom:0}
.pf-canvas .fline .fdot{left:-3.25px;background:#0F6CBD}
@keyframes trav1{0%,14%{top:0;opacity:0}15%{opacity:1}22%{top:14px;opacity:1}23%,100%{top:14px;opacity:0}}
@keyframes trav2{0%,34%{top:0;opacity:0}35%{opacity:1}42%{top:14px;opacity:1}43%,100%{top:14px;opacity:0}}
@keyframes trav3{0%,54%{top:0;opacity:0}55%{opacity:1}62%{top:14px;opacity:1}63%,100%{top:14px;opacity:0}}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi small{font-size:11px;color:var(--ink-45)}
.kpi b{font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.kpi span{font-size:12px;color:var(--bronze-text);font-weight:500}
.bars{display:flex;align-items:flex-end;gap:6px;height:90px;padding-top:6px}
.bars b{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:var(--sand-3);transform-origin:bottom;animation:grow 10s var(--ease) infinite}
.bars b.on{background:var(--bronze)}
.bars b:nth-child(2){animation-delay:.08s}.bars b:nth-child(3){animation-delay:.16s}.bars b:nth-child(4){animation-delay:.24s}.bars b:nth-child(5){animation-delay:.32s}.bars b:nth-child(6){animation-delay:.4s}.bars b:nth-child(7){animation-delay:.48s}
@keyframes grow{0%{transform:scaleY(.04)}14%{transform:scaleY(1)}88%{transform:scaleY(1)}95%,100%{transform:scaleY(.04)}}
.bars--static b{animation:none}
.bars-legend{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-45)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-top:18px;margin-top:6px}
.steps .track{position:absolute;top:8px;left:6%;right:6%;height:3px;border-radius:3px;background:var(--sand-3)}
.steps .track i{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--bronze);animation:fill 10s var(--ease) infinite}
@keyframes fill{0%,4%{width:0}44%,88%{width:66%}94%,100%{width:0}}
.step{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ink-45);text-align:center}
.step b{font-weight:500;color:var(--ink-90);font-size:12px}
.step small{font-size:10.5px}
.doc{padding:6px 16px 16px}
.drow{display:grid;grid-template-columns:minmax(0,1fr) 44px 76px;gap:8px;padding:9px 0;border-bottom:1px solid var(--ink-5);color:var(--ink-90)}
.drow span:nth-child(2),.drow span:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
.drow.head{font-size:11px;color:var(--ink-45);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.drow.total{border-bottom:0;font-weight:600;font-size:14px;padding-top:12px}
.kan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:14px 12px 4px}
.kcol{display:flex;flex-direction:column;gap:6px;min-height:150px;padding:6px;border-radius:10px;background:var(--sand-2);position:relative}
.kcol small{font-size:10.5px;color:var(--ink-45);font-weight:500;text-align:center;padding-bottom:2px}
.kcard{border-radius:8px;background:#FFFFFF;box-shadow:var(--ring);padding:8px 6px;font-size:10.5px;line-height:1.3}
.kcard b{display:block;font-weight:500;color:var(--ink-90)}
.kcard span{color:var(--bronze-text);font-weight:500}
.kcard.ghost{height:38px;background:rgba(255,255,255,.6)}
.kcard.kmove{position:relative;z-index:2;animation:kan 10s var(--ease) infinite;box-shadow:var(--card)}
@keyframes kan{0%,16%{transform:translateX(0)}24%,42%{transform:translateX(calc(100% + 6px))}50%,68%{transform:translateX(calc(200% + 12px))}76%,94%{transform:translateX(calc(300% + 18px))}100%{transform:translateX(0)}}

/* ---------- portfolio ---------- */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.fpill{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:var(--pill);background:#FFFFFF;box-shadow:var(--card);font-size:13.5px;font-weight:500;color:var(--ink-65);transition:background-color .2s,color .2s,transform .3s var(--ease)}
.fpill .pp{width:20px;height:20px;filter:none}
.fpill:hover{color:var(--ink);background:var(--sand-2);transform:translateY(-1px)}
.fpill.is-on{background:var(--ink);color:#FFFFFF;box-shadow:none}
.pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pcard{background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--soft);padding:14px 14px 18px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .5s ease}
.pcard:hover{box-shadow:var(--soft-hover)}
.pcard.is-hidden{display:none}
.pcard .pills{position:absolute;top:12px;left:12px;z-index:2}
.pcard .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding-inline:4px}
.pcard h4{padding-inline:4px}
.pcard p{font-size:14px;color:var(--ink-65);padding-inline:4px;line-height:1.45}
.pcard .tech{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--ink-90)}
.pcard .fit{font-size:12.5px;color:var(--ink-45);padding-inline:4px;display:flex;gap:6px;align-items:center}
.pcard .fit svg{width:14px;height:14px;color:var(--bronze-text)}
.th{position:relative;height:170px;border-radius:16px;background:var(--sand-2);overflow:hidden;display:grid;place-items:center}
.th .pp{position:absolute;right:14px;bottom:14px;width:34px;height:34px}
.th--apps .ph{width:76px;height:118px;border:5px solid var(--dark-deep);border-radius:16px;background:#FFFFFF;padding:10px 8px;display:flex;flex-direction:column;gap:6px;transform:translateY(28px)}
.th--apps .ph i{height:9px;border-radius:4px;background:var(--sand)}
.th--apps .ph i.on{background:var(--bronze);width:60%}
.th--flow .fl{display:flex;flex-direction:column;align-items:center}
.th--flow .fl i{width:110px;height:22px;border-radius:7px;background:#FFFFFF;box-shadow:var(--ring)}
.th--flow .fl i.on{background:var(--bronze)}
.th--flow .fl s{width:2px;height:12px;background:var(--ink-10)}
.th--bi .bs{display:flex;align-items:flex-end;gap:7px;height:90px}
.th--bi .bs b{width:22px;height:var(--h);border-radius:5px 5px 0 0;background:var(--sand-3)}
.th--bi .bs b.on{background:var(--bronze)}
.th--pages .win{width:190px;height:110px;border-radius:12px;background:#FFFFFF;box-shadow:var(--ring);overflow:hidden;transform:translateY(24px)}
.th--pages .bar{height:16px;background:var(--sand)}
.th--pages .ln{height:8px;border-radius:4px;background:var(--sand);margin:12px 12px 0;width:70%}
.th--pages .ln.on{background:var(--bronze);width:40%}
.th--chat .ch{display:flex;flex-direction:column;gap:6px;width:150px}
.th--chat .ch i{height:22px;border-radius:11px;background:#FFFFFF;box-shadow:var(--ring);width:65%}
.th--chat .ch i.u{align-self:flex-end;background:var(--bronze);width:55%}
.th--bc .bcx{display:flex;flex-direction:column;gap:6px;width:170px}
.th--bc .bcx i{height:12px;border-radius:5px;background:#FFFFFF;box-shadow:var(--ring)}
.th--bc .bcx i.t{background:var(--bronze);width:45%;align-self:flex-end;margin-top:4px}
.th--sales .kb{display:flex;gap:6px;align-items:flex-start;padding-top:20px}
.th--sales .kb i{width:34px;border-radius:7px;background:#FFFFFF;box-shadow:var(--ring);height:60px}
.th--sales .kb i:nth-child(2){height:84px}.th--sales .kb i:nth-child(3){height:48px;background:var(--bronze)}.th--sales .kb i:nth-child(4){height:70px}

/* ---------- diagnóstico ---------- */
.osteps{display:flex;flex-direction:column;gap:18px}
.osteps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.osteps li i{width:40px;height:40px;border-radius:12px;background:#FFFFFF;box-shadow:var(--card);display:grid;place-items:center;font-style:normal;font-weight:500;color:var(--bronze-text);font-variant-numeric:tabular-nums}
.osteps li b{display:block;font-weight:500;font-size:17px;letter-spacing:-.02em;color:var(--ink-90);margin-bottom:2px}
.osteps li p{font-size:15px;color:var(--ink-65)}
.docx{background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--lift);padding:22px;display:flex;flex-direction:column;gap:14px}
.docx .dh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.docx .dh b{font-weight:500;color:var(--ink-90);font-size:16px}
.docx .dh small{font-size:12.5px;color:var(--ink-45)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-weight:500;font-size:11.5px;color:var(--ink-45);text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:6px 6px 8px;border-bottom:1px solid var(--ink-5)}
.tbl td{padding:9px 6px;border-bottom:1px solid var(--ink-5);color:var(--ink-90);vertical-align:middle}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.tbl .pr{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--bronze-soft);color:var(--bronze-text);font-weight:500;font-size:12.5px}
.tbl .ez{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-65)}
.tbl tfoot td{font-weight:500;padding-top:12px;border-top:1px solid var(--ink-10)}
.tbl-wrap{overflow-x:auto}

/* ---------- mejorar lo hecho ---------- */
.checks{display:flex;flex-direction:column;gap:8px}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:16px;background:#FFFFFF;box-shadow:var(--card)}
.check .dot{margin-top:7px;width:10px;height:10px}
.check b{display:block;font-weight:500;color:var(--ink-90)}
.check small{font-size:14px;color:var(--ink-65);line-height:1.45}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-65)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.compare{background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--lift);padding:22px;display:flex;flex-direction:column;gap:2px}
.cmp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ink-5);font-size:14px}
.cmp:last-child{border-bottom:0}
.cmp.head{font-size:11.5px;color:var(--ink-45);text-transform:uppercase;letter-spacing:.04em;font-weight:500;padding-top:0}
.cmp .lb{color:var(--ink-90);font-weight:500}
.cmp .hoy{color:var(--ink-65)}
.cmp .desp{color:var(--bronze-text);font-weight:500;display:flex;align-items:center;gap:6px}
.cmp .desp svg{width:14px;height:14px;flex:none}

/* ---------- asistente ---------- */
/* cómo trabajamos · «Cuéntanos tu idea»: tarjeta tipo app con dos paneles. A la izquierda, una pregunta cada vez con su
   barra de progreso; a la derecha, la recomendación preliminar que se rellena sola. Selección en tinta, bronce medido. */
.asst-garantias{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.asst-garantias li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-90)}
.asst-garantias svg{width:18px;height:18px;flex:none;color:var(--bronze-text)}
.asst-app{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);background:#FFFFFF;border-radius:var(--r-xl);box-shadow:var(--lift);overflow:hidden}
.asst-form,.asst-hecho{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-height:540px;padding:40px 44px 36px}
.asst-informe{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:20px;padding:36px;background:linear-gradient(180deg,#FCFAF7,var(--sand-2));box-shadow:inset 1px 0 0 var(--ink-5)}
/* progreso */
.asst-prog{display:flex;align-items:center;gap:14px;margin-bottom:36px;font-size:13px;font-weight:500;color:var(--ink-45);font-variant-numeric:tabular-nums}
.asst-prog span{min-width:86px}
.asst-prog i{flex:1;height:4px;border-radius:99px;background:var(--sand);overflow:hidden}
.asst-prog b{display:block;width:20%;height:100%;border-radius:inherit;background:var(--ink);transition:width .6s var(--ease)}
/* una pregunta cada vez */
.asst-paso{display:none;flex-direction:column;min-width:0}
.asst-paso.is-on{display:flex;animation:asstEntra .5s var(--ease) both}
@keyframes asstEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.asst-paso h3{margin:0;font-size:clamp(24px,2.5vw,31px);font-weight:500;letter-spacing:-.035em;line-height:1.12;color:var(--ink);outline:0}
.asst-ayuda{margin:8px 0 24px;font-size:15px;line-height:1.5;color:var(--ink-65)}
.asst-opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.asst-opciones button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border:0;border-radius:16px;background:#FFFFFF;box-shadow:var(--ring),0 1px 2px rgba(27,24,22,.04);font:inherit;text-align:left;cursor:pointer;transition:box-shadow .25s ease,background-color .25s ease,transform .25s var(--ease)}
.asst-opciones b{font-size:15.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.asst-opciones small{font-size:13px;line-height:1.35;color:var(--ink-45)}
.asst-opciones button:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--ink-10),0 10px 22px -14px rgba(80,55,30,.4)}
.asst-opciones button[aria-checked="true"]{background:var(--ink);box-shadow:0 12px 26px -14px rgba(27,24,22,.55)}
.asst-opciones button[aria-checked="true"] b{color:#FFFFFF}
.asst-opciones button[aria-checked="true"] small{color:rgba(255,255,255,.66)}
.asst-paso textarea{width:100%;min-height:150px;padding:16px 18px;border:0;border-radius:16px;background:#FFFFFF;box-shadow:var(--ring),0 1px 2px rgba(27,24,22,.04);font:400 15.5px/1.55 var(--font);color:var(--ink);resize:vertical;outline:0;transition:box-shadow .2s}
.asst-paso textarea::placeholder{color:var(--ink-45)}
.asst-paso textarea:focus{box-shadow:0 0 0 2px var(--bronze)}
.asst-ejemplos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.asst-ejemplos span{margin-right:4px;font-size:13px;color:var(--ink-45)}
.asst-ejemplos button{height:32px;padding:0 13px;border:0;border-radius:99px;background:var(--sand-2);font:500 13px var(--font);color:var(--ink-65);cursor:pointer;transition:background-color .2s,color .2s}
.asst-ejemplos button:hover{background:var(--bronze-soft);color:var(--bronze-text)}
.asst-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px;border-radius:99px;background:var(--sand-2);box-shadow:inset 0 0 0 1px var(--ink-5)}
.asst-seg button{height:50px;border:0;border-radius:99px;background:transparent;font:500 15px var(--font);color:var(--ink-65);cursor:pointer;transition:background-color .25s,color .25s,box-shadow .25s}
.asst-seg button:hover{color:var(--ink)}
.asst-seg button[aria-checked="true"]{background:#FFFFFF;color:var(--ink);box-shadow:var(--card),0 8px 18px -10px rgba(27,24,22,.35)}
.asst-multi{display:flex;flex-wrap:wrap;gap:8px}
.asst-multi button{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 14px;border:0;border-radius:99px;background:#FFFFFF;box-shadow:var(--ring),0 1px 2px rgba(27,24,22,.04);font:500 14.5px var(--font);color:var(--ink-65);cursor:pointer;transition:box-shadow .2s,color .2s}
.asst-multi button::before{content:"";width:16px;height:16px;flex:none;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--ink-45);transition:background-color .2s,box-shadow .2s}
.asst-multi button:hover{color:var(--ink)}
.asst-multi button[aria-pressed="true"]{color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.asst-multi button[aria-pressed="true"]::before{box-shadow:none;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.asst-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.asst-privacidad{margin:14px 0 0;font-size:13px;color:var(--ink-45)}
.asst-opciones button:focus-visible,.asst-seg button:focus-visible,.asst-multi button:focus-visible,.asst-ejemplos button:focus-visible,.asst-atras:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
/* navegación */
.asst-nav{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:30px}
.asst-atras{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 4px;border:0;background:none;font:500 14.5px var(--font);color:var(--ink-65);cursor:pointer;transition:color .2s}
.asst-atras:hover{color:var(--ink)}
.asst-atras svg{width:16px;height:16px}
.asst-error{flex:1;font-size:13.5px;text-align:right;color:var(--bronze-text)}
.asst-nav .btn svg{width:16px;height:16px}
/* recomendación preliminar */
.ai-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ai-cab > span:first-child{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
@keyframes aiNuevo{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ai-reco{min-height:160px;padding:20px;border-radius:18px;background:#FFFFFF;box-shadow:var(--ring),0 18px 40px -28px rgba(80,55,30,.4)}
.ai-reco.is-nuevo > *{animation:aiNuevo .55s var(--ease) both}
.ai-vacio{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-45)}
.ai-tec{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ai-tec .pp{width:38px;height:38px}
.ai-tec small{display:block;font-size:12.5px;color:var(--ink-45)}
.ai-tec b{display:block;font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.ai-reco p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-90)}
.ai-plazo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--ink-5);font-size:12.5px;color:var(--ink-45)}
.ai-plazo b{display:block;margin-top:2px;font-size:15px;font-weight:500;color:var(--ink)}
.ai-pasos{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ai-pasos li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-65)}
.ai-pasos svg{width:16px;height:16px;flex:none;color:var(--bronze-text)}
/* enviado */
.asst-hecho{justify-content:center;gap:16px;outline:0}
.ah-ok{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--bronze-soft);color:var(--bronze-text);animation:asstEntra .5s var(--ease) both}
.ah-ok svg{width:26px;height:26px}
.asst-hecho h3{margin:6px 0 0;font-size:clamp(26px,2.6vw,34px);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.asst-hecho > p{margin:0;max-width:44ch;font-size:16px;line-height:1.55;color:var(--ink-65)}
.asst-hecho > p b{font-weight:500;color:var(--ink)}
.ah-pasos{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:ah}
.ah-pasos li{position:relative;padding-left:44px;font-size:15px;line-height:1.45;color:var(--ink-65);counter-increment:ah}
.ah-pasos li::before{content:counter(ah);position:absolute;left:0;top:-3px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#FFFFFF;box-shadow:var(--ring);font-size:13px;font-weight:600;color:var(--ink)}
.ah-pasos b{display:block;font-weight:500;color:var(--ink)}
@media (max-width:991px){.asst-app{grid-template-columns:minmax(0,1fr)}.asst-informe{grid-column:1;grid-row:2;box-shadow:inset 0 1px 0 var(--ink-5)}.asst-form,.asst-hecho{min-height:0}}
@media (max-width:640px){.asst-form,.asst-hecho{padding:26px 20px 24px}.asst-informe{padding:24px 20px}.asst-opciones{grid-template-columns:minmax(0,1fr)}.asst-seg{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:22px}.asst-campos{grid-template-columns:minmax(0,1fr)}.asst-prog{margin-bottom:26px}}
@media (prefers-reduced-motion:reduce){.asst-paso.is-on,.ai-reco.is-nuevo > *,.ah-ok{animation:none}.asst-prog b{transition:none}}

/* ---------- academy ---------- */
.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.course{background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--soft);padding:22px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .5s ease}
.course:hover{box-shadow:var(--soft-hover)}
.course .ico{width:56px;height:56px;border-radius:16px;background:var(--sand-2);display:grid;place-items:center}
.course .ico .pp{width:34px;height:34px}
.course p{font-size:14.5px;color:var(--ink-65)}
.course .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.reg{margin:40px auto 0;max-width:720px;background:#FFFFFF;border-radius:var(--r-lg);box-shadow:var(--lift);padding:24px;display:flex;flex-direction:column;gap:16px}
.reg .form{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.reg .col{gap:6px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .strip{grid-auto-columns:calc((100% - 32px) / 3)}
}
@media (max-width:991px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .split-head,.two,.cta,.svc,.feature{grid-template-columns:minmax(0,1fr)}
  .origen{grid-template-columns:minmax(0,1fr);gap:32px;margin-bottom:48px}
  .porque{grid-template-columns:minmax(0,1fr);gap:32px}
  .duelo{grid-template-columns:minmax(0,1fr)}
  /* A) en móvil las frases ocupan dos líneas: el tachado va por línea (text-decoration) y no con el trazo SVG */
  .tacha{display:none}
  .duelo-col--ellos li{text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:2px;transition:color .6s ease calc(var(--i) * 260ms + 500ms),text-decoration-color .5s ease calc(var(--i) * 260ms + 400ms)}
  .rv--in .duelo-col--ellos li{text-decoration-color:var(--bronze)}
  /* B) casos: cifras en tres columnas compactas y etiqueta de sector más pequeña */
  /* D/E) servicios: sin altura mínima de escritorio bajo las maquetas */
  .svc-right{min-height:0}
  .qe{grid-template-columns:minmax(0,1fr);gap:28px}
  .qe-poster{padding:20px}
  .qe-marca{top:18px;left:20px;font-size:15px}
  .qe-iconos{display:none}
  .qe-play{width:64px;height:64px}
  .qe-play svg{width:24px;height:24px}
  .qe-dur{right:20px;bottom:20px}
  .qe-caps small{display:none}
  .pp-nav{display:none}
  .pp-cuenta{margin-left:auto}
  .pp-site{height:560px}
  .pp-dos{grid-template-columns:minmax(0,1fr)}
  .pp-sug{flex-wrap:wrap}
  /* tabla del diagnóstico: sin «Personas» ni «Prioridad» para que proceso, horas y facilidad quepan sin deslizar */
  #diagnostico .tbl th:nth-child(3),#diagnostico .tbl td:nth-child(3),#diagnostico .tbl th:nth-child(5),#diagnostico .tbl td:nth-child(5){display:none}
  #diagnostico .tbl{font-size:13px}
  /* J/K) academy: la cifra del sueldo encima de la barra y el selector en una línea */
  .ac-nivel{display:flex;width:100%}
  .ac-nivel button{flex:1;padding:0 8px;font-size:13px;white-space:nowrap}
  .ac-pista{margin-top:24px}
  .ac-rango b{left:0;right:auto;top:-24px;color:var(--ink);font-size:14px}
  .duelo-col{padding:26px 22px 28px}
  .duelo-col--nos{box-shadow:0 -1px 0 var(--ink-5)}
  .duelo-vs{width:auto;height:0}
  .duelo-col--ellos li,.duelo-col--nos li{font-size:16px}
  .porque-texto{position:static}
  .feature--rev .visual{order:0}
  .cases,.svc-uses,.courses,.team,.steps3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(320px,72%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 16px 24px;margin:-12px -16px -24px}
  .stats::-webkit-scrollbar{display:none}
  .stat{scroll-snap-align:start}
  .strip{grid-auto-columns:calc((100% - 16px) / 2)}
  .panel{padding:56px 24px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "grid" "disc" "legal" "bottom";row-gap:0}
  .foot-brand{margin-bottom:44px}
}
@media (max-width:640px){
  main{padding-top:84px}
  .hero-split{grid-template-columns:minmax(0,1fr);min-height:0;margin-top:-84px;padding-top:84px}
  .ac-hero{grid-template-columns:minmax(0,1fr);min-height:0;margin-top:-84px;padding:120px 20px 170px}
  .ac-cuenta div{min-width:0;flex:1}
  .ac-cuenta b{font-size:26px}
  .ac-cuenta i{display:none}
  .ac-rapido{flex-direction:column;border-radius:20px}
  .ac-rapido input{height:46px}
  .ac-sueldos{padding:24px 18px}
  .ac-escala{display:none}
  .ac-rol{grid-template-columns:minmax(0,1fr);gap:10px}
  .ac-perks{grid-template-columns:minmax(0,1fr)}
  .ruta-linea{left:26px;translate:0 0}
  .ruta-paso,.ruta-paso:nth-child(odd){justify-content:flex-start;padding:0 0 0 72px;margin-bottom:72px}
  .ruta-num{left:26px;width:44px;height:44px;font-size:13px}
  .ruta-cont,.ruta-paso:nth-child(even) .ruta-cont,.ruta-paso:nth-child(odd) .ruta-cont{width:100%;padding:0}
  .ruta-cont p{font-size:17px}
  .hs-texto{padding:32px 0 36px}
  .hs-arte{position:relative;left:auto;right:auto;height:380px;margin-inline:calc(50% - var(--vw,100vw) / 2);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%)}
  .hs-3d{width:min(64%,300px)}
  .sec{padding-block:64px}
  .page-head{padding:24px 0 40px}
  .panel{padding:48px 18px;border-radius:24px}
  .cases,.svc-uses,.courses,.pf,.team,.steps3{grid-template-columns:minmax(0,1fr)}
  .stats{grid-auto-columns:82%}
  /* en móvil la ficha ocupa el ancho de la foto (se sale de su zona con calc sobre --l/--w) */
  .persona-card{left:calc(-100% * var(--l) / var(--w) + 12px);width:calc(100% * 100 / var(--w) - 24px);max-width:none;translate:0 12px;bottom:12px;padding:12px 14px 13px}
  .persona.is-on .persona-card{translate:0 0}
  .persona-card b{font-size:15px}
  .persona-tech span{font-size:12px}
  .mc--a{right:12px!important}
  .mc--b{right:8px;bottom:8px}
  .mc-title{font-size:11.5px}
  .strip{grid-auto-columns:82%}
  .orbit{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px;order:-1}
  .ocard{position:static;transform:none;padding:8px 12px 8px 8px;font-size:13px;animation:none}
  .ocard .ico{width:32px;height:32px;border-radius:9px}
  .ocard .pp{width:22px;height:22px}
  .ocenter{display:none}
  .hero-visual{height:auto;display:flex;flex-direction:column}
  #dome{position:relative;height:220px}
  .visual{min-height:300px;padding:28px 18px}
  .form{grid-template-columns:minmax(0,1fr)}
  .reg .form{grid-template-columns:minmax(0,1fr)}
  .cmp{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 0}
  .cmp.head{display:none}
  .cmp .hoy::before{content:"Hoy: ";color:var(--ink-45)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .footer{border-radius:28px 28px 0 0;padding-top:56px}
  .tilt{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ocard,.ocenter,.svc-left,.dcard,.mock,.marquee-track,.float-tag{animation:none!important}
  .words .w,.fade-up{animation:none!important;opacity:1;transform:none;filter:none}
  .ac-hero::after{animation:none!important}
  .ruta-linea::after{animation:none!important;display:none}
  .ruta-paso .ruta-cont,.ruta-paso .ruta-num{opacity:1!important;translate:none!important;scale:1!important}
  .tacha path{stroke-dashoffset:0!important;transition:none!important}
  .duelo-col--nos li,.duelo-col--nos li i,.duelo-vs span{opacity:1!important;translate:none!important;scale:1!important;transition:none!important}
  .rv--pre{opacity:1;translate:0 0}
  .rv--in{transition:none}
  .tilt{transform:none!important}
  .plx{transform:none!important}
  .q1,.q2,.q3,.q4,.t1,.t2,.mk-sign path,.bars b,.steps .track i,.kcard.kmove,.fline .fdot{animation:none!important}
  .q1,.q2,.q3,.q4{opacity:1;transform:none}
  .t1,.t2{max-width:100%}
  .mk-sign path{stroke-dashoffset:0}
  .steps .track i{width:66%}
  .fline .fdot{opacity:0}
}

/* ---------- tablet (641–991 px): dos columnas donde caben, para no desperdiciar el ancho ---------- */
@media (min-width:641px) and (max-width:991px){
  .duelo{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .duelo-col--nos{box-shadow:-1px 0 0 var(--ink-5)}
  .duelo-vs{width:0;height:auto}
  .ac-perks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ac-perk{padding:24px 20px}
  .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* portfolio dentro del panel de servicios: 2 columnas en tablet, 1 en móvil */
@media (max-width:991px){ .svc-pf .pf{grid-template-columns:repeat(2,minmax(0,1fr))} .svc-pf{margin-top:40px;padding-top:32px} }
@media (max-width:640px){ .svc-pf .pf{grid-template-columns:minmax(0,1fr)} }

/* ---------- asistente «Cuéntanos tu idea» (2026-10): se adapta a cada respuesta y propone en directo ---------- */
#aiEstado.is-lista{background:#e6f4ec;color:#1e7a48}
/* paso 2: lo que hemos entendido mientras escriben */
.asst-entiendo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.asst-entiendo:empty{display:none}
.ae-t{margin-right:2px;font-size:13px;font-weight:500;color:var(--ink-65)}
.ae-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 7px;border-radius:99px;background:#FFFFFF;box-shadow:var(--ring),0 4px 12px -8px rgba(80,55,30,.45);font-size:13px;font-weight:500;color:var(--ink)}
.ae-chip img{width:16px;height:16px;object-fit:contain}
.ae-chip.is-nuevo{animation:aePop .45s var(--ease) both}
@keyframes aePop{from{opacity:0;transform:translateY(4px) scale(.92)}to{opacity:1;transform:none}}
.ae-sigue{font-size:13px;color:var(--ink-45)}
.ae-no{padding:8px 12px;border-radius:12px;background:#fff6e5;font-size:13px;line-height:1.4;color:#8a5a00}
.asst-ejemplos[hidden]{display:none}
.asst-ejemplos button{height:auto;min-height:32px;padding:6px 13px;line-height:1.35;text-align:left}
/* paso 4: herramientas marcadas por lo que han contado */
.asst-pista{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;font-size:13.5px;line-height:1.45;color:var(--bronze-text)}
.asst-pista::before{content:"";flex:none;width:16px;height:16px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.2l1.7 4.4 4.5 1.4-4.5 1.4L8 12.8 6.3 8.4 1.8 7l4.5-1.4z' fill='%23B07A4A'/%3E%3Cpath d='M13 11l.6 1.5 1.4.5-1.4.5L13 15l-.6-1.5-1.4-.5 1.4-.5z' fill='%23D9B48C'/%3E%3C/svg%3E") center/contain no-repeat}
.asst-pista[hidden]{display:none}
/* paso 5: la opción que encaja con lo que cuentan */
.asst-opciones button{position:relative}
.asst-sug{position:absolute;top:10px;right:10px;padding:3px 8px;border-radius:99px;background:var(--bronze-soft);font-style:normal;font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--bronze-text);animation:aePop .45s var(--ease) both}
.asst-opciones button[aria-checked="true"] .asst-sug{background:rgba(255,255,255,.14);color:#FFFFFF}
/* paso 6: lo que van a recibir y cómo lo haríamos */
.asst-resumen{margin:6px 0 10px;padding:12px 14px;border-radius:14px;background:var(--bronze-soft);font-size:14.5px;line-height:1.45;color:var(--ink-90)}
.asst-resumen:empty{display:none}
.asst-resumen b{font-weight:500;color:var(--bronze-text)}
.asst-plan{margin-top:28px}
.asst-plan:empty{display:none}
.ap-t{display:block;margin-bottom:14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45)}
.asst-plan ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:ap}
.asst-plan li{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;padding-left:34px;font-size:14px;line-height:1.45;color:var(--ink-65);counter-increment:ap}
.asst-plan li::before{content:counter(ap);position:absolute;left:0;top:-2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#FFFFFF;box-shadow:var(--ring),0 3px 8px -3px rgba(27,24,22,.22);font-size:11.5px;font-weight:600;color:var(--ink)}
.asst-plan li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:26px;bottom:-12px;width:1px;background:var(--ink-10)}
.asst-plan li b{font-weight:500;color:var(--ink)}
/* panel: lo que nos han contado (cada dato es un botón para cambiarlo) */
.ai-resp{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;border-radius:16px;background:#FFFFFF;box-shadow:var(--ring)}
.ai-resp-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-45)}
.ai-resp-cab small{font-size:11.5px;color:var(--ink-45);opacity:.8}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px}
.ai-resp button{display:inline-flex;align-items:center;min-height:30px;padding:5px 12px;border:1px solid transparent;border-radius:99px;background:var(--sand-2);font:500 13px/1.3 var(--font);color:var(--ink);text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.ai-resp button.ai-situ{display:block;width:100%;padding:9px 12px;border-radius:12px;font-weight:400;font-size:13.5px;line-height:1.45;color:var(--ink-90)}
.ai-resp button.is-vacio{background:transparent;border:1px dashed rgba(27,24,22,.2);font-weight:400;color:var(--ink-45)}
.ai-resp button.is-aviso{background:#fff6e5;color:#8a5a00}
.ai-resp button.is-nuevo{animation:aiNuevo .55s var(--ease)}
.ai-resp button:not(:disabled):hover{background:var(--bronze-soft);color:var(--bronze-text)}
.ai-resp button:disabled{cursor:default}
.ai-resp button:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
/* la propuesta */
.ai-tec{position:relative;align-items:flex-start}
.ai-tec>span:first-of-type{flex:1;min-width:0}
.ai-tec em{display:flex;align-items:center;gap:6px;margin-top:6px;font-style:normal;font-size:12.5px;color:var(--ink-65)}
.ai-tec em .pp{width:18px;height:18px}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.ai-encaje{--p:70;flex:none;width:62px;height:62px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(closest-side,#FFFFFF 78%,transparent 80%),conic-gradient(var(--bronze) calc(var(--p) * 1%),var(--sand) 0)}
.ai-reco.is-nuevo .ai-encaje{animation:aiEncaje 1.1s var(--ease) both}
@keyframes aiEncaje{from{--p:0}}
.ai-tec .ai-encaje b{font-size:15px;letter-spacing:-.02em}
.ai-tec .ai-encaje small{font-size:10px}
.ai-por{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ai-por li{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:9px;font-size:14px;line-height:1.45;color:var(--ink-90)}
.ai-por li > *{grid-column:2}
.ai-por li::before{content:"";grid-column:1;grid-row:1 / span 2;align-self:start;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--bronze-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%238a5a30' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ai-por li.suya > span{color:var(--ink-65)}
.ai-por li.suya::before{background:var(--bronze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 12V9.3c0-2.4 1.1-4 3.3-4.8l.5 1.1C5.5 6.1 4.9 6.9 4.8 8h2.1v4zm6.3 0V9.3c0-2.4 1.1-4 3.3-4.8l.5 1.1c-1.1.5-1.7 1.3-1.8 2.4h2.1v4z' fill='%23fff'/%3E%3C/svg%3E") center/11px no-repeat}
.ai-por li.mas::before{background:var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.2v7.6M4.2 8h7.6' fill='none' stroke='%238a5a30' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat}
.ai-por q{display:block;font-weight:500;color:var(--ink);quotes:"«" "»"}
.ai-por li span b{font-weight:500;color:var(--ink)}
.ai-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.ai-cifras > span{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px 11px;border-radius:12px;background:var(--sand-2)}
.ai-cifras small{font-size:11px;line-height:1.3;color:var(--ink-45)}
.ai-cifras small:first-child{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.ai-cifras b{font-size:16px;font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.ai-ejemplo{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:12px;box-shadow:var(--ring);text-decoration:none;color:inherit;transition:box-shadow .25s,transform .25s}
.ai-ejemplo > span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ai-ejemplo small{font-size:12px;color:var(--ink-45)}
.ai-ejemplo b{font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
.ai-ejemplo em{flex:none;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13px;font-weight:500;color:var(--bronze-text)}
.ai-ejemplo em svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.ai-ejemplo:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--ink-10),0 10px 22px -14px rgba(80,55,30,.4)}
.ai-ejemplo:hover em svg{transform:translateX(3px)}
.ai-aviso{margin-top:12px!important;padding:10px 12px;border-radius:12px;background:#fff6e5;color:#8a5a00!important;font-size:13px!important}
.ai-resp-cab{flex-wrap:wrap;row-gap:2px}
@media (max-width:640px){
  .ai-encaje{width:54px;height:54px}
  .ai-tec b{font-size:16px}
  .ai-tec .ai-encaje b{font-size:13.5px}
  .ai-tec .ai-encaje small{font-size:9px}
  .ai-cifras{grid-template-columns:minmax(0,1fr);gap:6px}
  .ai-cifras > span{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:10px 12px}
  .ai-cifras > span small:first-child{flex-basis:100%}
  .asst-plan li{grid-template-columns:minmax(0,1fr);gap:2px}
  .asst-sug{position:static;align-self:flex-start;margin-top:6px}
  .asst-nav{gap:8px}
  .asst-nav .btn{padding:0 18px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.ae-chip.is-nuevo,.asst-sug,.ai-resp button.is-nuevo,.ai-reco.is-nuevo .ai-encaje{animation:none}}

/* ---------- auditoría (2026-10-04): contacto integrado en el fondo y calendario más actual ---------- */
/* correo y teléfono, sobre el propio degradado: cristal muy claro, sin cajas blancas */
.contact-rows{gap:0;margin-top:6px;border-top:1px solid rgba(255,255,255,.55)}
.crow{padding:14px 2px;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.55);font-size:16px;color:var(--ink)}
.crow svg{width:38px;height:38px;padding:10px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.crow button{height:34px;padding:0 14px;background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);color:var(--ink-90);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s,box-shadow .2s}
.crow button:hover{background:rgba(255,255,255,.75);color:var(--ink)}
.crow button svg{width:14px;height:14px;padding:0;background:none;box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
/* el calendario */
.cal{padding:22px 22px 20px;gap:14px;border-radius:28px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 40px 80px -40px rgba(80,50,20,.55)}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--ink-5)}
.cal-quien{display:flex;align-items:center;gap:10px;min-width:0}
.cal-quien img{width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:var(--ring);padding:6px;flex:none}
.cal-quien b{display:block;font-size:15px;font-weight:500;color:var(--ink)}
.cal-quien small{display:block;font-size:12.5px;color:var(--ink-45)}
.cal-pasos{list-style:none;margin:0;padding:3px;display:flex;gap:2px;border-radius:99px;background:var(--sand-2);counter-reset:cp;flex:none}
.cal-pasos li{counter-increment:cp;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:99px;font-size:12px;font-weight:500;color:var(--ink-45);transition:background-color .3s,color .3s,box-shadow .3s}
.cal-pasos li::before{content:counter(cp);width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:rgba(27,24,22,.08)}
.cal-pasos li.on{background:#fff;color:var(--ink);box-shadow:var(--card)}
.cal-pasos li.on::before{background:var(--bronze);color:#fff}
.cal-pasos li.ok{color:var(--ink-65)}
/* el ✓ como texto a 10px salía como un garabato: check dibujado */
.cal-pasos li.ok::before{content:"";background:#1e8e54 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat;animation:cal-ok .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes cal-ok{from{transform:scale(.4)}}
.cal-head b{font-size:17px;letter-spacing:-.02em}
.cal-head button{width:34px;height:34px;background:var(--sand-2);box-shadow:none;transition:background-color .2s,transform .2s}
.cal-head button:not(:disabled):hover{background:var(--sand);transform:scale(1.06)}
.cal-grid{gap:6px 4px}
.cal-grid .dn{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.day{position:relative;height:42px;width:42px;justify-self:center;border-radius:50%;font-size:14.5px}
.day:not(.is-off){background:rgba(176,122,74,.07)}
.day:not(.is-off):hover{background:var(--bronze-soft);transform:translateY(-1px)}
.day.is-off{background:none;color:rgba(27,24,22,.22)}
.day.is-today{box-shadow:none}
.day.is-today::after{content:"";position:absolute;bottom:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--bronze)}
.day.is-sel{background:var(--bronze);color:#fff;transform:none;box-shadow:0 0 0 4px rgba(176,122,74,.2),0 10px 18px -8px rgba(176,122,74,.8)}
.day.is-sel::after{background:#fff}
/* seis horas (15:30 a 20:30): dos filas de tres */
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.slots:empty{display:none}
.slot-vacio{grid-column:1/-1;padding:10px 12px;font-size:13.5px;color:var(--ink-65);text-align:center}
.slot{padding:10px 6px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--ink-10);text-align:center;font-variant-numeric:tabular-nums;animation:aiNuevo .4s var(--ease) both}
.slot:hover{background:var(--sand-2);box-shadow:inset 0 0 0 1px rgba(176,122,74,.5)}
.slot.is-sel{background:var(--ink);color:#fff;box-shadow:none}
.cal-summary{padding:10px 12px;border-radius:12px;background:var(--sand-2);font-size:13.5px}
@media (max-width:640px){.cal-top{flex-direction:column;align-items:flex-start}.day{width:38px;height:38px}.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* portada: «Marca sobre datos» (css/marca-sobre-datos.css) en lugar del globo */
.hero .h1,.hero .sub,.hero .actions{position:relative;z-index:2}   /* por delante del lienzo */
.hero .mds{margin-top:-26px}                                        /* empieza al pie de los botones (anula el gap del hero) */

/* portada: «Marca sobre datos» (css/marca-sobre-datos.css) en lugar del globo */
.hero .h1,.hero .sub,.hero .actions{position:relative;z-index:2}   /* por delante del lienzo */
.hero .mds{margin-top:-26px}                                        /* empieza al pie de los botones (anula el gap del hero) */

/* ==========================================================================
   Ajustes responsive (2026-10-05): móvil 360–430, tablet 768–1024. Nada de esto toca el escritorio (≥1100 px),
   salvo la primera regla, que corrige un fallo que se veía en todos los anchos.
   ========================================================================== */
/* el título de la escena «Vuestros datos viven en…» usa .t1/.t2, que también son las clases de la animación de
   escritura de las maquetas (max-width 0→100 %): partían el título palabra a palabra */
.ylt-titulo .t1,.ylt-titulo .t2,.ylt-titulo .t3{animation:none;max-width:none}

/* tablet horizontal (992–1099): las cifras en 2×2 para que sus mini maquetas respiren y el pie como en tablet */
@media (min-width:992px) and (max-width:1099px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "grid" "disc" "legal" "bottom";row-gap:0}
  .foot-brand{margin-bottom:44px}
}
/* tablet vertical: la barra de tecnologías cabe entera, sin cortar «Copilot Studio» */
@media (min-width:761px) and (max-width:900px){
  .tec-nav{gap:2px}
  .tec-nav button{font-size:14px;gap:7px;padding:8px 13px 8px 9px}
  .tec-nav button img{width:20px;height:20px}
}
/* vídeo de presentación: el botón de play no pisa el «¿Qué es locodea?» del póster */
@media (max-width:991px){
  .presenta-play{padding-bottom:5%}
  .presenta-play span{width:clamp(44px,7vw,64px);height:clamp(44px,7vw,64px)}
}
/* en el móvil el póster es pequeño: el play va a la esquina y el texto se queda en el aria-label */
@media (max-width:640px){
  .presenta-play{inset:auto 12px 12px auto;padding:0}
  .presenta-play span{width:48px;height:48px}
  .presenta-play b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (max-width:420px){
  /* la etiqueta de la foto del equipo no se sale por la derecha */
  .origen-chip{left:4%;max-width:92%;font-size:12.5px;padding:8px 12px 8px 10px}
  .origen-chip .brand{font-size:14px}
  /* correo y teléfono de la auditoría en una línea */
  .crow{font-size:15px;gap:8px}
  .crow span{overflow-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crow svg{width:34px;height:34px;padding:9px}
  .crow button{padding:0 11px}
}
@media (max-width:380px){
  .h2{font-size:29px}
}
/* Servicios: los apartados «a fondo» (Power Apps, Automate, BI, Pages, Copilot) traen su propio margen lateral de
   16 px, que dentro del .container de la web se sumaba al de la página (32 px por lado en el móvil) */
@media (max-width:1099px){
  main.container .pb,main.container .pj-bi,main.container .pj-pp,main.container .pj-cp{padding-inline:0}
}
/* foto del equipo en tablet: la ficha de la persona de la izquierda no se sale por el borde */
@media (min-width:641px) and (max-width:1099px){
  .persona:first-of-type .persona-card{left:12px;translate:0 12px}
  .persona:first-of-type.is-on .persona-card,.persona:first-of-type:hover .persona-card{translate:0 0}
}

/* ---------- páginas legales (build/build-legal.js) ---------- */
.lg{padding:150px 0 90px}
.lg-cab{max-width:760px;display:flex;flex-direction:column;gap:12px;margin-bottom:44px}
.lg-cab .h2{margin:0}
.lg-fecha{margin:0;font-size:14px;color:var(--ink-45)}
.lg-otras{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lg-otras a{padding:8px 14px;border-radius:99px;background:var(--sand-2);font-size:13.5px;font-weight:500;color:var(--ink-65);text-decoration:none;transition:background-color .2s,color .2s}
.lg-otras a:hover{background:var(--sand);color:var(--ink)}
.lg-otras a[aria-current="page"]{background:var(--ink);color:#fff}
.lg-cuerpo{display:grid;grid-template-columns:220px minmax(0,760px);gap:56px;align-items:start}
.lg-indice{position:sticky;top:110px;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.lg-indice b{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);margin-bottom:8px}
.lg-indice a{padding:6px 10px;margin-left:-10px;border-radius:10px;color:var(--ink-65);text-decoration:none;transition:background-color .2s,color .2s}
.lg-indice a:hover{background:var(--sand-2);color:var(--ink)}
.lg-texto{font-size:16px;line-height:1.7;color:var(--ink-90)}
.lg-texto .lg-intro{font-size:18px;line-height:1.6;color:var(--ink);padding:20px 22px;border-radius:18px;background:var(--sand-2);margin:0 0 8px}
.lg-texto h2{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:44px 0 12px;scroll-margin-top:110px;color:var(--ink)}
.lg-texto p{margin:0 0 14px}
.lg-texto ul{margin:0 0 14px;padding-left:20px}
.lg-texto li{margin-bottom:8px}
.lg-texto a{color:var(--bronze-text);text-underline-offset:3px}
.lg-texto b{font-weight:500;color:var(--ink)}
.lg-datos{margin:0 0 14px;border-radius:16px;background:#fff;box-shadow:var(--ring),0 10px 24px -20px rgba(80,55,30,.4)}
.lg-datos div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:12px 18px;border-top:1px solid var(--ink-5)}
.lg-datos div:first-child{border-top:0}
.lg-datos dt{font-size:14px;color:var(--ink-45)}
.lg-datos dd{margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.lg-tabla{overflow-x:auto;margin:0 0 14px;border-radius:16px;box-shadow:var(--ring)}
.lg-tabla table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;min-width:620px}
.lg-tabla th{text-align:left;font-weight:500;color:var(--ink-65);background:var(--sand-2);padding:12px 14px}
.lg-tabla td{padding:12px 14px;border-top:1px solid var(--ink-5);vertical-align:top}
.lg-pend{background:#fff1c9;color:#7a5200;padding:1px 6px;border-radius:6px;font-weight:500}
@media (max-width:900px){.lg{padding:120px 0 60px}.lg-cuerpo{grid-template-columns:minmax(0,1fr);gap:20px}.lg-indice{display:none}}
@media (max-width:640px){.lg-texto .lg-intro{font-size:16.5px;padding:16px}.lg-datos div{grid-template-columns:minmax(0,1fr);gap:2px}}
.form-privacidad{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-45)}
.form-privacidad a,.asst-privacidad a{color:var(--bronze-text);text-underline-offset:2px}

/* vídeos: pantalla completa de plan B (js/app.js), cuando el navegador no deja usar la de verdad */
.screen.es-grande{position:fixed!important;inset:0!important;z-index:2000!important;width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important;border-radius:0!important;background:#000!important;transform:none!important;aspect-ratio:auto!important}
.screen.es-grande video{width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important}
.screen.es-grande .vctl{z-index:2}
.es-grande-x{position:absolute;top:18px;right:18px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.es-grande-x:hover{background:rgba(255,255,255,.3)}
.es-grande-x svg{width:18px;height:18px}
html.hay-grande,html.hay-grande body{overflow:hidden}
html.hay-grande .device,html.hay-grande .pb-tilt,html.hay-grande .pj-tilt{transform:none!important}

/* rendimiento (2026-10-05): las secciones fuera de pantalla congelan sus animaciones (app.js pone data-quieto) */
[data-quieto],[data-quieto] *,[data-quieto] *::before,[data-quieto] *::after{animation-play-state:paused!important}

/* ---------- móvil: sin secciones que secuestran el scroll ----------
   «Cómo funciona» de Servicios (css/paneles.css, generado) fija la escena 3D durante ~3 pantallas mientras el dedo baja.
   En móvil se usa la misma versión que ya existe para prefers-reduced-motion: los pasos todos seguidos, sin fijar. */
@media (max-width:760px){
  body .pb .lx-scroll{height:auto}
  body .pb .lx-sticky{position:relative;top:0;height:auto;min-height:0;max-height:none;grid-template-columns:1fr;gap:20px}
  body .pb .lx-esc-3d{height:420px}
  body .pb .lx-pasos{gap:6px}
  body .pb .lx-pasos li{opacity:1;display:grid}
  body .pb .lx-pasos .lx-pd{grid-template-rows:1fr}
  body .pb .lx-barra,body .pb .lx-hint{display:none}
  body .pb .lx-rv,body .pb .lx-w>span{opacity:1;transform:none}
  /* la portada de cada servicio aparece ya pintada: su entrada animada dependía de js/fondos.js (227 KB, se carga después)
     y retrasaba varios segundos el primer texto grande (LCP) */
  body .pb .hero .lx-rv{transition:none}
}

/* ---------- equipo: tres fichas oscuras con retrato (portada, debajo del vídeo de presentación) ---------- */
.equipo-fichas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,48px)}
.ficha{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:#14110F;color:#fff;isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 70px -40px rgba(40,25,10,.55);transition:box-shadow .5s ease,transform .5s var(--ease)}
.ficha-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s ease}
.ficha::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,transparent 42%,rgba(20,17,15,.55) 62%,#14110F 92%)}
.ficha-info{position:absolute;inset:auto 0 0;z-index:2;display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px}
.ficha-rol{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--bronze-light)}
.ficha-nombre{font-size:clamp(22px,2vw,26px);letter-spacing:-.03em;line-height:1.1;color:#fff}
.ficha-redes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ficha-redes a{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 10px;border-radius:var(--pill);font-size:13px;font-weight:500;text-decoration:none;
  color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
.ficha-redes a:hover{background:var(--bronze);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ficha-redes svg{width:16px;height:16px;flex:none}
@media (hover:hover){
  .ficha:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(217,180,140,.28),0 50px 90px -40px rgba(176,122,74,.45)}
  .ficha:hover .ficha-foto{transform:scale(1.035)}
}
@media (max-width:980px){ .ficha-info{padding:18px} }
/* en móvil, carrusel lateral como las cifras de la portada */
@media (max-width:760px){
  .equipo-fichas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 16px 24px;margin:20px -16px -24px}
  .equipo-fichas::-webkit-scrollbar{display:none}
  .ficha{scroll-snap-align:center}
}