/* =====================================================================
   CediPro® by CEDICOL · Tema "Industria Futura"
   Capa visual sobre home.css: no cambia estructura ni funciones.
   Manual de marca: naranja #f15a29, gris #414042, Rubik.
   Acento industrial secundario: amarillo seguridad (barandas, escaleras).
   ===================================================================== */
:root{
  --o:#f15a29; --oh:#ff7a45; --o2:#ff9b6b;
  --o-soft:rgba(241,90,41,.12); --o-line:rgba(241,90,41,.38);
  --y:#ffc21a;                                  /* amarillo seguridad industrial */
  --k:#f2f3f5; --g:#c7cad1; --m:#a0a5ae; --d:#747a85;
  --ln:rgba(255,255,255,.085); --ln2:rgba(255,255,255,.16);
  --bg:#08090b; --bg2:#12141a; --panel:rgba(18,20,25,.78); --panel2:rgba(26,29,36,.86);
  --cg:#414042;                                 /* gris CEDICOL */
  --glow:0 0 0 1px rgba(241,90,41,.35),0 12px 40px rgba(241,90,41,.28);
  --r:20px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(1100px 620px at 78% -8%,rgba(241,90,41,.20),transparent 60%),
    radial-gradient(900px 600px at -10% 30%,rgba(65,64,66,.45),transparent 60%),
    linear-gradient(180deg,#0a0b0e 0%,#08090b 40%,#0b0c10 100%);
  background-attachment:fixed;
  color:var(--k);
  font-feature-settings:"tnum" 1;
}
/* Plano técnico de fondo */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  mask-image:radial-gradient(ellipse at 50% 20%,#000 35%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 35%,transparent 85%);
}
::selection{background:rgba(241,90,41,.45);color:#fff}
a{color:var(--o2)}
em{color:var(--o);text-shadow:0 0 28px rgba(241,90,41,.35)}
h1,h2,h3{color:#fff}
:focus-visible{outline:2px solid var(--o2);outline-offset:3px}

/* barra de progreso de lectura */
.fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:left;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--o),var(--y));box-shadow:0 0 12px rgba(241,90,41,.8);pointer-events:none}

/* ---------- etiquetas HUD ---------- */
.eyebrow{color:var(--o2);letter-spacing:.24em;font-size:11.5px}
.eyebrow::before{width:28px;height:2px;background:linear-gradient(90deg,var(--o),transparent);box-shadow:0 0 10px rgba(241,90,41,.7)}

/* ---------- botones: forma biselada + barrido de luz ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:12px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  letter-spacing:.01em;
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .25s;
}
.btn:focus-visible{clip-path:none}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.32) 45%,transparent 60%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-o{background:linear-gradient(135deg,#ff6a35 0%,var(--o) 45%,#d9441a 100%);color:#fff;box-shadow:0 0 0 1px rgba(255,140,100,.35) inset,0 10px 30px rgba(241,90,41,.30)}
.btn-o:hover{background:linear-gradient(135deg,#ff7d4c,#f46534 50%,#e04d22);box-shadow:0 0 0 1px rgba(255,170,130,.55) inset,0 14px 44px rgba(241,90,41,.5)}
.btn-g{background:rgba(255,255,255,.04);color:var(--k);border-color:var(--ln2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-g:hover{border-color:var(--o);color:#fff;background:rgba(241,90,41,.10);box-shadow:0 0 24px rgba(241,90,41,.18)}
.btn-k{background:linear-gradient(135deg,#2a2b2f,#1a1b1f);color:#fff;border:1px solid rgba(255,194,26,.45)}
.btn-k:hover{background:linear-gradient(135deg,#34353a,#202126);border-color:var(--y);box-shadow:0 0 26px rgba(255,194,26,.22)}
.btn-k svg{color:var(--y)}
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:fxrip .6s var(--ease) forwards;z-index:-1}
@keyframes fxrip{to{transform:scale(1);opacity:0}}

/* ---------- barra superior ---------- */
.top{background:rgba(8,9,11,.62);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(241,90,41,.55),transparent) 1;transition:padding .3s var(--ease),background .3s}
.top.fx-scrolled{padding-block:8px;background:rgba(8,9,11,.85)}
.brand{color:#fff}
.brand img{box-shadow:0 0 0 1px rgba(241,90,41,.5),0 0 22px rgba(241,90,41,.45)}
.brand b{color:#fff}
.brand b sup{font-size:.5em;color:var(--o2);margin-left:1px;vertical-align:super}
.brand small{color:var(--m)}
.topnav a{position:relative;color:var(--g)}
.topnav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);box-shadow:0 0 10px rgba(241,90,41,.8)}
.topnav a:hover{color:#fff}
.topnav a:hover::after{transform:scaleX(1)}

/* ---------- hero ---------- */
.hero h1{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.4)}
.hero h1 em{text-shadow:none;filter:drop-shadow(0 0 22px rgba(241,90,41,.32));background:linear-gradient(100deg,#ff8a5c 0%,var(--o) 40%,#ffb08a 55%,var(--o) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxshine 6s linear infinite}
@keyframes fxshine{to{background-position:-220% 0}}
.lede{color:var(--m)}
.proof li{background:var(--panel);border:1px solid var(--ln);border-radius:14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;overflow:hidden}
.proof li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--o),transparent);box-shadow:0 0 10px var(--o)}
.proof b{color:#fff}
.proof b::first-letter{color:var(--o)}
.h3{background:#0e1014;border:1px solid var(--ln2);box-shadow:0 0 0 1px rgba(241,90,41,.15),0 40px 90px rgba(0,0,0,.55),0 0 80px rgba(241,90,41,.12)}
.h3::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.h3-tag span{background:rgba(12,13,16,.86);color:var(--g);border:1px solid var(--ln2);backdrop-filter:blur(8px)}
.h3-tag i{border-color:#0e1014;box-shadow:0 0 0 2px var(--o),0 0 16px var(--o)}
.h3-day{background:rgba(12,13,16,.82);border:1px solid var(--ln2)}
.h3-bar{background:rgba(255,255,255,.12)}
.h3-bar i{background:linear-gradient(90deg,var(--o),var(--y));box-shadow:0 0 10px var(--o)}
.h3-replay{background:rgba(12,13,16,.86);color:#fff;border:1px solid var(--ln2)}
.h3-replay:hover{border-color:var(--o);color:var(--o2)}
.hero-3d figcaption{color:var(--m)}
.hero-3d figcaption b{color:#fff}

/* ---------- paneles de vidrio con esquinas HUD ---------- */
.card,.res-side,.eng,.used,.tips,.stage,.tools a,.law div,.err.err-card,.drop,.thumb,.how-g{
  --c:rgba(241,90,41,.75);
  background:
    linear-gradient(var(--c),var(--c)) top left/14px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/1.5px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/14px 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/1.5px 14px no-repeat,
    radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(241,90,41,.10),transparent 45%),
    var(--panel);
  border:1px solid var(--ln);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.card{border-radius:26px;border-color:rgba(241,90,41,.22);box-shadow:0 40px 100px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03) inset}
.res-side,.eng,.used,.tips,.stage{border-radius:18px}

/* pasos */
.steps li{background:rgba(255,255,255,.03);border-color:var(--ln);color:var(--d)}
.steps i{background:transparent;border-color:var(--ln2);color:var(--m)}
.steps li.on{color:#fff;background:rgba(241,90,41,.12);border-color:var(--o-line);box-shadow:0 0 24px rgba(241,90,41,.2)}
.steps li.on i{background:var(--o);border-color:var(--o);color:#fff;box-shadow:0 0 14px var(--o)}
.steps li.done{color:var(--g)}
.steps li.done i{background:rgba(255,194,26,.14);border-color:rgba(255,194,26,.5);color:var(--y)}
.pane:not([hidden]){animation:fxpane .5s var(--ease)}
@keyframes fxpane{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* paso 1: subida */
.drop{border:1.5px dashed rgba(241,90,41,.45);border-radius:20px}
.drop.over{border-color:var(--o);box-shadow:0 0 0 6px rgba(241,90,41,.12),0 0 60px rgba(241,90,41,.25) inset}
.drop.has{border-style:solid;border-color:var(--ln2)}
.drop-empty::before{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(241,90,41,.55),transparent);animation:fxscan 3.2s ease-in-out infinite alternate;pointer-events:none}
.drop-empty{position:relative}
@keyframes fxscan{from{transform:translateY(-150px);opacity:.2}50%{opacity:.9}to{transform:translateY(150px);opacity:.2}}
.drop-ic{border-radius:18px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);box-shadow:0 0 40px rgba(241,90,41,.55)}
.drop-empty b{color:#fff}
.fmt{color:var(--d)}
.chip{background:rgba(12,13,16,.86);color:#fff;border:1px solid var(--ln2)}
.chip:hover{color:var(--o2);border-color:var(--o)}
.tips li::before{background:rgba(255,194,26,.12);color:var(--y)}
.tips strong{color:#fff}
.tip-ex figcaption{background:rgba(12,13,16,.86);color:#fff}

/* paso 2: datos */
.thumb{background-color:#0e1014}
.needs span{background:rgba(255,255,255,.03);border-color:var(--ln);transition:border-color .2s,background .2s,box-shadow .2s,transform .2s var(--ease)}
.needs label:hover span{border-color:var(--ln2);transform:translateY(-1px)}
.needs b{color:#fff}
.needs input:checked+span{background:rgba(241,90,41,.10);border-color:var(--o);box-shadow:0 0 0 1px var(--o) inset,0 0 28px rgba(241,90,41,.22)}
.f label{color:var(--m)}
.f input,.f select,.f textarea{background:rgba(8,9,11,.6);color:#fff;border:1px solid var(--ln2);border-radius:10px;transition:border-color .2s,box-shadow .2s}
.f input::placeholder,.f textarea::placeholder{color:#5f646d}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--o);box-shadow:0 0 0 3px rgba(241,90,41,.22),0 0 24px rgba(241,90,41,.18)}
.f select option{background:#14161a;color:#fff}
.f.bad::after{color:#ff8a6b}
.consent{color:var(--m)}

/* paso 3: análisis y resultado */
.scan .line{background:linear-gradient(90deg,transparent,var(--o),var(--y),var(--o),transparent);box-shadow:0 0 26px 10px rgba(241,90,41,.55)}
.scan::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(rgba(241,90,41,.10) 1px,transparent 1px) 0 0/100% 32px,
  linear-gradient(90deg,rgba(241,90,41,.10) 1px,transparent 1px) 0 0/32px 100%}
.scan-msg{background:rgba(10,11,14,.88);color:#fff;border:1px solid var(--o-line);box-shadow:0 0 40px rgba(241,90,41,.25);backdrop-filter:blur(10px)}
.scan-msg small{color:var(--m)}
.ba,.scan,.ba.big{box-shadow:0 0 0 1px var(--ln2),0 30px 70px rgba(0,0,0,.55)}
.ba-bar::before{background:linear-gradient(var(--y),var(--o),var(--y));box-shadow:0 0 16px var(--o)}
.ba-bar b{border-color:#0e1014;box-shadow:0 0 0 2px var(--o),0 0 26px var(--o)}
.ba-lab.l{background:rgba(10,11,14,.8);border:1px solid var(--ln2)}
.res-side h3{color:#fff}
.brands span{background:rgba(241,90,41,.10);border-color:var(--o-line);color:var(--o2)}
.next li{color:var(--g)}
.next li::before{box-shadow:0 0 10px var(--o)}
.used-h{color:var(--g)}
.used dd{color:#fff}
.dl-img{color:var(--m)}
.eng-h{color:var(--g)}
.eng-conf{background:rgba(255,194,26,.12);color:var(--y);border:1px solid rgba(255,194,26,.35)}
.eng-dl dd{color:#fff}
.eng-hz span{background:rgba(255,90,40,.10);color:#ffb08f;border-color:rgba(241,90,41,.35)}
.eng-why{background:rgba(255,255,255,.035);color:var(--k)!important}
.eng h4{color:#fff}
.eng-tw{border-color:var(--ln)}
.eng-t th{background:rgba(255,255,255,.04);color:var(--m)}
.eng-t td{border-color:var(--ln);color:var(--g)}
.eng-t td b{color:#fff}
.eng-t td.q{color:var(--y)}
.eng-d{border-color:var(--ln);background:rgba(255,255,255,.02)}
.eng-d summary{color:#fff}
.eng-ul{color:var(--g)}
.err{background:var(--panel);color:#ff9d84;border-color:rgba(241,90,41,.4)}
.err-ic{background:rgba(241,90,41,.14);box-shadow:0 0 22px rgba(241,90,41,.35)}
.err-t{color:#fff}
.err-m{color:var(--g)}

/* ---------- experiencias ---------- */
.xp-one{border:1px solid var(--ln2);box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 60px rgba(241,90,41,.12);position:relative}
.xp-one::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(120deg,transparent 30%,rgba(241,90,41,.16) 50%,transparent 70%);background-size:250% 100%;animation:fxsweep 7s linear infinite}
@keyframes fxsweep{to{background-position:-250% 0}}
.xp-steps b{box-shadow:0 0 16px rgba(241,90,41,.7)}

/* ---------- cómo funciona ---------- */
.how-g{gap:0;border-radius:20px;overflow:hidden}
.how-g li{background:transparent;border-right:1px solid var(--ln);position:relative;transition:background .3s}
.how-g li:last-child{border-right:0}
.how-g li:hover{background:rgba(241,90,41,.06)}
.how-g b{font-size:30px;font-weight:800;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--o);text-shadow:0 0 30px rgba(241,90,41,.35)}
.how-g strong{color:#fff}
.law div{border-radius:16px}
.law b{color:#fff}

/* ---------- caso ---------- */
.case dt{color:var(--m)}
.case dd{color:#fff}
.case-g img{border-radius:14px;border:1px solid var(--ln2);filter:saturate(1.05) contrast(1.03);transition:transform .5s var(--ease),filter .5s}
.case-g img:hover{transform:scale(1.02);filter:saturate(1.15) contrast(1.06)}

/* ---------- herramientas ---------- */
.tools a{color:#fff;border-radius:16px;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.tools a:hover{border-color:var(--o);box-shadow:0 0 30px rgba(241,90,41,.18)}
.tools i{color:var(--o2)}

/* ---------- banda de valor CediPro® ---------- */
.trust{padding-block:clamp(44px,6vw,84px);display:flex;flex-direction:column;gap:20px}
.trust h2{font-size:clamp(30px,4vw,50px);line-height:1.02;font-weight:700}
.trust-lead{color:var(--m);max-width:62ch;font-size:16px}
.trust-g{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.trust-g li{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 18px 22px;border-radius:16px;border:1px solid var(--ln);background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(241,90,41,.12),transparent 45%),var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.trust-g li:hover{transform:translateY(-4px);border-color:var(--o-line)}
.trust-g li::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:linear-gradient(90deg,var(--o),var(--y));transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--ease);box-shadow:0 0 10px var(--o)}
.trust-g li:hover::after{transform:scaleX(1)}
.trust-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(241,90,41,.12);border:1px solid var(--o-line);color:var(--o2);box-shadow:0 0 18px rgba(241,90,41,.25)}
.trust-g b{font-size:16.5px;color:#fff;font-weight:600}
.trust-g span{font-size:13.5px;color:var(--m);line-height:1.45}
.trust-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--y);font-weight:600}
.trust-seal{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 18px;border-radius:14px;border:1px dashed var(--o-line);color:var(--m);font-size:13.5px;background:rgba(241,90,41,.05)}
.trust-seal b{color:#fff;font-weight:600}
.trust-seal i{font-style:normal;color:var(--o2);font-weight:700}
@media (max-width:1060px){.trust-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.trust-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.trust-g li:last-child{grid-column:1/-1}}
@media (max-width:420px){.trust-g{grid-template-columns:minmax(0,1fr)}}

/* ---------- pie ---------- */
.foot{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(241,90,41,.5),transparent) 1}
.foot-big{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22)}
.foot-big em{-webkit-text-stroke:0;color:var(--o);text-shadow:0 0 40px rgba(241,90,41,.4)}
.foot-row{color:var(--m)}
.foot-row b{color:#fff}
.foot-legal{font-size:12px;color:var(--d);display:flex;flex-wrap:wrap;gap:6px 18px}

/* ---------- mini dossier (modal) ---------- */
.dz-bg{background:rgba(4,5,7,.7);backdrop-filter:blur(8px)}
.dz-card{background:linear-gradient(180deg,rgba(24,26,32,.96),rgba(14,15,19,.98));border:1px solid var(--o-line);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 40px 120px rgba(0,0,0,.7),0 0 80px rgba(241,90,41,.18)}
.dz-card p{color:var(--m)}
.dz-x{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--ln2)}
.dz-inc{color:var(--g)}
.dz-err{color:#ff9d84!important}
.dz-ok{background:rgba(241,90,41,.14);box-shadow:0 0 30px rgba(241,90,41,.4)}

/* ---------- chat Max (sobrescribe los estilos inyectados) ---------- */
body .as-fab{background:linear-gradient(135deg,#1d1f24,#121318);border:1px solid var(--o-line);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 14px 40px rgba(0,0,0,.6),0 0 30px rgba(241,90,41,.3);border-radius:14px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
body .as-fab::before{content:"";position:absolute;right:9px;top:9px;width:8px;height:8px;border-radius:50%;background:#35d07f;box-shadow:0 0 10px #35d07f;animation:fxpulse 2s ease-in-out infinite}
@keyframes fxpulse{50%{opacity:.35}}
body .as-fab:hover,body .as-fab.on{background:linear-gradient(135deg,#ff6a35,var(--o))}
body .as-panel{background:linear-gradient(180deg,#16181d,#0e0f13);color:var(--k);border:1px solid var(--o-line);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 60px rgba(241,90,41,.18)}
body .as-h{background:linear-gradient(90deg,rgba(241,90,41,.22),rgba(255,255,255,.02));border-bottom:1px solid var(--ln)}
body .as-av{box-shadow:0 0 0 2px #0e1014,0 0 0 3px var(--o),0 0 18px var(--o)}
body .as-log{background:transparent}
body .as-m.a{background:rgba(255,255,255,.05);border-color:var(--ln);color:var(--k)}
body .as-m.u{background:linear-gradient(135deg,#ff6a35,var(--o));box-shadow:0 8px 24px rgba(241,90,41,.3)}
body .as-chips{background:transparent}
body .as-chip{background:rgba(241,90,41,.08);color:var(--o2);border-color:var(--o-line)}
body .as-chip:hover{background:rgba(241,90,41,.18);color:#fff}
body .as-f{background:rgba(8,9,11,.6);border-top-color:var(--ln)}
body .as-f textarea{background:rgba(255,255,255,.04);color:#fff;border-color:var(--ln2)}
body .as-disc{background:transparent;color:var(--d)}
body .as-card{background:rgba(255,255,255,.04);color:var(--k)}
body .as-card dt{color:var(--d)}
body .as-ok{color:var(--m)}

/* ---------- revelado al hacer scroll (solo si el script está activo) ---------- */
.fx .rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.fx .rv.in{opacity:1;transform:none;filter:none}
.fx .rv-d1{transition-delay:.08s}.fx .rv-d2{transition-delay:.16s}.fx .rv-d3{transition-delay:.24s}.fx .rv-d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .hero h1 em,.xp-one::before,.drop-empty::before,body .as-fab::before{animation:none}
  .btn::after{display:none}
  .fx .rv{opacity:1;transform:none;filter:none;transition:none}
  .pane:not([hidden]){animation:none}
}
@media (max-width:640px){
  body{background-attachment:scroll}
  .how-g li{border-right:0;border-bottom:1px solid var(--ln)}
  .how-g li:last-child{border-bottom:0}
}
@media (max-width:960px) and (min-width:641px){
  .how-g li:nth-child(2){border-right:0}
  .how-g li:nth-child(-n+2){border-bottom:1px solid var(--ln)}
}

/* ===== Marcas autorizadas (logos oficiales, monocromo para no hacer ruido) ===== */
.brandbar{margin-top:18px;padding:18px 22px;border:1px solid var(--ln);border-radius:16px;background:var(--panel);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brandbar-k{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mu,#9a9ca3);white-space:nowrap}
.brandbar ul{list-style:none;margin:0;padding:0;flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 28px;align-items:center}
.brandbar li{display:flex;align-items:center;justify-content:center;height:34px}
.brandbar img{max-height:30px;max-width:100%;width:auto;filter:brightness(0) invert(1);opacity:.5;transition:opacity .35s var(--ease,ease),transform .35s var(--ease,ease)}
.brandbar li:hover img{opacity:1;transform:translateY(-2px)}
@media (max-width:820px){.brandbar{flex-direction:column;align-items:flex-start;gap:14px}.brandbar ul{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}}
/* logos en el resultado del ingeniero */
.brands span.has-logo{display:inline-flex;align-items:center;padding:6px 12px;background:rgba(255,255,255,.04);border-color:var(--ln)}
.brands span.has-logo img{height:16px;width:auto;max-width:110px;filter:brightness(0) invert(1);opacity:.85}
/* peso visual equilibrado: los logos cuadrados necesitan más altura que los horizontales */
.brandbar li{height:44px}
.brandbar img[src*="rothoblaas"]{max-height:26px}.brandbar img[src*="protekt"]{max-height:22px}.brandbar img[src*="genesi"]{max-height:30px}
.brandbar img[src*="longdyes"]{max-height:32px}.brandbar img[src*="kaya"]{max-height:40px}.brandbar img[src*="horn"]{max-height:44px}
.brands span.has-logo img[src*="kaya"],.brands span.has-logo img[src*="horn"]{height:24px}.brands span.has-logo img[src*="rothoblaas"],.brands span.has-logo img[src*="protekt"]{height:14px}
/* pie de página: sello de marca discreto */
.foot-brands{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:18px 0;margin-top:8px;border-top:1px solid var(--ln)}
.foot-brands span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mu,#8d9098);margin-right:6px}
.foot-brands img{height:18px;width:auto;filter:brightness(0) invert(1);opacity:.38;transition:opacity .3s}
.foot-brands img:hover{opacity:.9}
.foot-brands img[src*="kaya"],.foot-brands img[src*="horn"]{height:26px}.foot-brands img[src*="protekt"]{height:13px}.foot-brands img[src*="rothoblaas"]{height:15px}
/* 7 marcas autorizadas */
.brandbar ul{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:820px){.brandbar ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
.brandbar img[src*="deltaplus"]{max-height:40px}.foot-brands img[src*="deltaplus"]{height:24px}
.brands span.has-logo img[src*="deltaplus"]{height:22px}
/* menú visible en celular: segunda fila desplazable bajo la barra */
.xp-cta{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:640px){
  .top{flex-wrap:wrap;row-gap:8px}
  .top .topnav{display:flex;order:3;flex:1 1 100%;margin-left:0;gap:18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 4px;mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .top .topnav::-webkit-scrollbar{display:none}
  .top .topnav a{font-size:13px;white-space:nowrap}
  .top.fx-scrolled .topnav{padding-bottom:2px}
}

/* EPP Delta Plus en el resultado */
.epp-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:2px 0 4px;padding:10px 12px;border:1px solid var(--ln);border-radius:12px;background:rgba(255,255,255,.03)}
.epp-line span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--o2)}
.epp-line img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.epp-line small{flex-basis:100%;font-size:12px;color:var(--mu,#9a9ca3)}

/* sello de marca bajo la comparación (no tapa la ilustración) */
.seal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:10px;padding:10px 14px;border:1px solid var(--ln);border-left:3px solid var(--o);border-radius:12px;background:rgba(255,255,255,.03)}
.seal span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--o2)}
.seal-l{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.seal-l img{height:16px;width:auto;filter:brightness(0) invert(1);opacity:.88}
.seal-l img[data-k="kaya"],.seal-l img[data-k="horn"],.seal-l img[data-k="deltaplus"]{height:24px}
.seal-l img[data-k="rothoblaas"],.seal-l img[data-k="protekt"]{height:13px}