/* ──────────────── HERO ──────────────── */
.kd-hero{
  position:relative; min-height:560px; display:flex; align-items:center;
  padding:5.5rem 0 5rem; overflow:hidden;
  background-image:url('/assets/hero-kitdigital.png');
  background-repeat:no-repeat; background-position:right center; background-size:cover;
  background-color:#F5F2EE;
}
.kd-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 35%, rgba(255,255,255,.4) 60%, rgba(255,255,255,0) 80%);
}
.kd-hero .w{position:relative; z-index:2; width:100%}
.kd-hero-inner{max-width:600px; margin:0; text-align:left}
.kd-hero .eyebrow{color:var(--p)}
.kd-hero h1{
  font-family:var(--display); font-weight:600; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(2.1rem,4.2vw,3.5rem); margin:.9rem 0 1rem; color:var(--bk);
}
.kd-hero h1 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.kd-hero p.lead{max-width:52ch; font-size:clamp(1rem,1.25vw,1.15rem); color:var(--g7); line-height:1.6; margin-top:.85rem}
.kd-hero-subtitle{font-family:var(--display); font-size:clamp(1.05rem,1.5vw,1.3rem); font-weight:500; color:var(--g7); letter-spacing:-.01em; margin-top:.5rem; line-height:1.3}
.kd-hero .badges{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.5rem}
.kd-hero .badge{display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border-radius:999px; background:var(--wh); border:1px solid var(--g3); font-size:.8rem; font-weight:600; color:var(--g7); box-shadow:0 6px 18px -10px rgba(46,16,101,.18)}
.kd-hero .badge .dot{width:6px;height:6px;background:var(--p);border-radius:50%}
.kd-hero .ctas{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem}
@media(max-width:780px){
  .kd-hero{background-position:center top; padding-top:3rem}
  .kd-hero::before{background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,1) 100%)}
}

/* ──────────────── Floating Marketing Center CTA ──────────────── */
.mkc-float{
  position:fixed; bottom:1.25rem; right:1.25rem; z-index:55;
  display:inline-flex; align-items:center; gap:.65rem;
  padding:.85rem 1.15rem; border-radius:999px;
  background:var(--bk); color:var(--wh); font-weight:600; font-size:.88rem;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.45), 0 0 0 1px rgba(207,255,101,.25);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mkc-float:hover{transform:translateY(-3px); box-shadow:0 24px 48px -14px rgba(0,0,0,.55), 0 0 0 1px var(--lm)}
.mkc-float .pulse{width:8px; height:8px; border-radius:50%; background:var(--lm); box-shadow:0 0 0 0 rgba(207,255,101,.7); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(207,255,101,.7)}70%{box-shadow:0 0 0 10px rgba(207,255,101,0)}100%{box-shadow:0 0 0 0 rgba(207,255,101,0)}}
@media(max-width:560px){.mkc-float{bottom:.85rem; right:.85rem; padding:.7rem .95rem; font-size:.8rem}}

/* ──────────────── Section header common ──────────────── */
.sec{padding:5rem 0}
.sec-head{text-align:center; max-width:48rem; margin:0 auto 3rem}
.sec-head h2{font-size:clamp(1.85rem,3.4vw,2.7rem); margin-bottom:.85rem}
.sec-head h2 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--p)}
.sec-head p{color:var(--g7); font-size:1.05rem; line-height:1.55}

/* ──────────────── Memorias (PRIORIDAD) ──────────────── */
.mem-section{padding:5rem 0; background:linear-gradient(165deg, #2A0B5A 0%, #4A0EA0 50%, #6D16DF 100%); color:var(--wh); position:relative; overflow:hidden}
.mem-section::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(207,255,101,.18), transparent 50%),
             radial-gradient(circle at 15% 85%, rgba(255,255,255,.08), transparent 55%);
  pointer-events:none;
}
.mem-section .w{position:relative; z-index:2}
.mem-head{text-align:center; max-width:46rem; margin:0 auto 2.75rem}
.mem-head .eyebrow{color:var(--lm); justify-content:center; display:inline-flex}
.mem-head h2{color:var(--wh); font-size:clamp(2rem,3.6vw,2.9rem); margin:.85rem 0 .85rem; line-height:1.08}
.mem-head h2 .accent{color:var(--lm); font-family:var(--serif); font-style:italic; font-weight:400}
.mem-head p{color:rgba(255,255,255,.82); font-size:1.05rem; line-height:1.6; max-width:38rem; margin:0 auto}

.mem-benefit{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:2.5rem}
.mem-benefit .chip{display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:999px; font-size:.85rem; font-weight:500; color:rgba(255,255,255,.92); backdrop-filter:blur(8px)}
.mem-benefit .chip svg{width:14px; height:14px; color:var(--lm); flex-shrink:0}

.mem-flow{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; align-items:stretch; margin-bottom:2rem; position:relative}
@media(max-width:980px){.mem-flow{grid-template-columns:repeat(2,1fr); gap:1.5rem}}
@media(max-width:520px){.mem-flow{grid-template-columns:1fr}}
.mem-step{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:1.6rem 1.4rem; display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; backdrop-filter:blur(10px); transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease)}
.mem-step:hover{transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
/* Variaciones de color por paso para crear contraste */
.mem-step.s1{background:linear-gradient(180deg, rgba(207,255,101,.18) 0%, rgba(207,255,101,.04) 100%); border-color:rgba(207,255,101,.45)}
.mem-step.s1 .mem-step-num{color:var(--lm)}
.mem-step.s1 .mem-step-ico{background:var(--lm); border-color:var(--lm); color:#1A0A33}
.mem-step.s2{background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 100%); border-color:rgba(255,255,255,.32)}
.mem-step.s2 .mem-step-num{color:#fff}
.mem-step.s2 .mem-step-ico{background:rgba(255,255,255,.92); border-color:#fff; color:var(--p-deep)}
.mem-step.s3{background:linear-gradient(180deg, rgba(167,108,255,.28) 0%, rgba(109,22,223,.10) 100%); border-color:rgba(207,255,101,.35)}
.mem-step.s3 .mem-step-num{color:#E9D6FF}
.mem-step.s3 .mem-step-ico{background:rgba(207,255,101,.22); border-color:rgba(207,255,101,.55); color:var(--lm)}
.mem-step.s4{background:linear-gradient(180deg, var(--lm) 0%, var(--lm-deep) 100%); border-color:var(--lm-deep); color:#1A0A33}
.mem-step.s4 .mem-step-num{color:#1A0A33; opacity:.75}
.mem-step.s4 .mem-step-ico{background:#1A0A33; border-color:#1A0A33; color:var(--lm)}
.mem-step.s4 h4{color:#1A0A33}
.mem-step.s4 p{color:rgba(26,10,51,.82)}
.mem-step.s4 p code{background:rgba(26,10,51,.18); color:#1A0A33}
.mem-step-num{font-family:var(--display); font-weight:700; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase}
.mem-step-ico{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; box-shadow:0 8px 22px -10px rgba(0,0,0,.45)}
.mem-step-ico svg{width:22px; height:22px}
.mem-step h4{color:var(--wh); font-size:1.05rem; font-weight:600; line-height:1.25}
.mem-step p{color:rgba(255,255,255,.82); font-size:.88rem; line-height:1.5; margin:0}
.mem-step p code{background:rgba(207,255,101,.18); color:var(--lm); padding:.05rem .4rem; border-radius:5px; font-family:var(--body); font-weight:600; font-size:.85em}
/* Flechas entre pasos */
.mem-step .mem-arrow{position:absolute; top:50%; right:-1rem; transform:translateY(-50%); width:1.75rem; height:1.75rem; border-radius:50%; background:rgba(207,255,101,.95); color:#1A0A33; display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); z-index:3}
.mem-step .mem-arrow svg{width:14px; height:14px}
.mem-step:last-child .mem-arrow{display:none}
@media(max-width:980px){
  .mem-step .mem-arrow{right:auto; left:50%; top:auto; bottom:-1.1rem; transform:translateX(-50%) rotate(90deg)}
  .mem-step:nth-child(2) .mem-arrow{display:none}
}
@media(max-width:520px){
  .mem-step:nth-child(2) .mem-arrow{display:grid}
}

.mem-warn{display:flex; align-items:center; gap:.85rem; padding:1rem 1.25rem; background:rgba(0,0,0,.25); border:1px solid rgba(255,200,80,.35); border-radius:14px; max-width:46rem; margin:0 auto 2rem}
.mem-warn svg{width:24px; height:24px; color:#FFC850; flex-shrink:0}
.mem-warn p{margin:0; color:rgba(255,255,255,.92); font-size:.92rem; line-height:1.45}
.mem-warn b{color:#FFC850; font-weight:700}

.mem-cta{text-align:center}
.mem-cta .btn{font-size:1rem; padding:1.05rem 2rem}
.mem-cta-help{margin-top:.85rem; font-size:.82rem; color:rgba(255,255,255,.65)}

/* ──────────────── Soluciones grid ──────────────── */
.sol-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem}
@media(max-width:880px){.sol-grid{grid-template-columns:1fr}}
.sol-card{background:var(--wh); border:1px solid var(--g2); border-radius:24px; padding:2rem; display:flex; flex-direction:column; gap:1.1rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.sol-card:hover{transform:translateY(-4px); box-shadow:0 30px 60px -28px rgba(46,16,101,.22); border-color:var(--g3)}
.sol-card-head{display:flex; align-items:center; gap:.85rem}
.sol-ico{width:46px; height:46px; border-radius:13px; background:var(--p-soft); color:var(--p); display:grid; place-items:center; flex-shrink:0}
.sol-ico svg{width:23px; height:23px}
.sol-card h3{font-size:1.3rem; font-weight:600; letter-spacing:-.02em; line-height:1.2; color:var(--bk)}
.sol-card .sol-tag{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--p); margin-bottom:.25rem}
.sol-card p.sol-desc{color:var(--g7); font-size:.95rem; line-height:1.6}
.sol-card ul.sol-feats{display:flex; flex-direction:column; gap:.55rem; margin-top:.25rem}
.sol-card ul.sol-feats li{display:flex; gap:.55rem; align-items:flex-start; font-size:.9rem; color:var(--ink); line-height:1.45}
.sol-card ul.sol-feats li::before{content:""; flex-shrink:0; margin-top:.45rem; width:6px; height:6px; background:var(--lm-deep); border-radius:50%}
.sol-card .sol-foot{margin-top:auto; display:flex; flex-wrap:wrap; gap:.6rem; padding-top:.5rem}

/* ──────────────── Puesto de trabajo seguro (ordenadores) ──────────────── */
.pts-section{padding:5rem 0; background:var(--g1)}
.pts-head{text-align:center; max-width:48rem; margin:0 auto 2.5rem}
.pts-head .eyebrow{color:var(--p); justify-content:center; display:inline-flex}
.pts-head h2{margin:.75rem 0 .85rem}
.pts-head p{color:var(--g7); line-height:1.6}

/* Carrusel de modelos */
.pts-carousel{position:relative}
.pts-track-wrap{overflow:hidden; margin:0 -.5rem; padding:.5rem}
.pts-track{display:flex; gap:1.1rem; scroll-snap-type:x mandatory; overflow-x:auto; scroll-behavior:smooth; padding-bottom:.5rem; scrollbar-width:none}
.pts-track::-webkit-scrollbar{display:none}
.pts-track > .pts-card{flex:0 0 calc((100% - 3.3rem) / 4); scroll-snap-align:start; min-width:240px}
@media(max-width:1100px){.pts-track > .pts-card{flex-basis:calc((100% - 2.2rem) / 3)}}
@media(max-width:840px){.pts-track > .pts-card{flex-basis:calc((100% - 1.1rem) / 2)}}
@media(max-width:520px){.pts-track > .pts-card{flex-basis:85%}}
.pts-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; background:var(--wh); border:1px solid var(--g3); color:var(--p); display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 24px -10px rgba(46,16,101,.25); z-index:3; transition:background .2s, transform .2s}
.pts-nav:hover{background:var(--p); color:var(--wh); transform:translateY(-50%) scale(1.05)}
.pts-nav.prev{left:-18px}
.pts-nav.next{right:-18px}
.pts-nav svg{width:20px; height:20px}
@media(max-width:600px){.pts-nav.prev{left:4px} .pts-nav.next{right:4px}}

.pts-card{background:var(--wh); border:1px solid var(--g2); border-radius:18px; padding:1.4rem 1.2rem; display:flex; flex-direction:column; gap:.6rem; position:relative; transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.pts-card:hover{transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(46,16,101,.18)}
.pts-card.is-out{opacity:.85}
.pts-card .pts-brand{height:22px; display:flex; align-items:center; font-family:var(--display); font-weight:700; font-size:.85rem; letter-spacing:-.01em; color:var(--g7)}
.pts-card .pts-img{height:110px; display:grid; place-items:center; background:linear-gradient(180deg, var(--g1) 0%, transparent 100%); border-radius:12px; color:var(--g5)}
.pts-card .pts-img svg{width:88px; height:88px}
.pts-card h4{font-family:var(--display); font-size:1rem; font-weight:600; line-height:1.25; color:var(--bk); min-height:2.4em}
.pts-specs{display:flex; flex-direction:column; gap:.3rem; padding:0; margin:0; list-style:none}
.pts-specs li{font-size:.78rem; color:var(--g7); line-height:1.35; display:flex; gap:.4rem; align-items:flex-start}
.pts-specs li::before{content:"·"; color:var(--p); font-weight:900; flex-shrink:0}
.pts-price{display:flex; align-items:baseline; gap:.45rem; padding-top:.5rem; border-top:1px dashed var(--g3); margin-top:.5rem}
.pts-price .old{font-size:.85rem; color:var(--g5); text-decoration:line-through}
.pts-price .new{font-family:var(--display); font-weight:800; color:var(--p); font-size:1.35rem}
.pts-out-badge{position:absolute; top:.75rem; right:.75rem; background:#FEE2E2; color:#B91C1C; font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .55rem; border-radius:999px}
.pts-warranty{margin-top:1.5rem; text-align:center; font-size:.85rem; color:var(--g6)}
.pts-warranty b{color:var(--p)}

/* ──────────────── Marketing Center embed (reuse) ──────────────── */
.mkc-section{padding:5rem 0}

/* ──────────────── Bono / Red.es CTA banner ──────────────── */
.bono-banner{background:var(--wh); border:1px solid var(--g2); border-radius:24px; padding:2rem; display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:center; box-shadow:0 18px 40px -22px rgba(46,16,101,.15)}
@media(max-width:720px){.bono-banner{grid-template-columns:1fr; text-align:left}}
.bono-banner h3{font-size:1.3rem; line-height:1.2; margin-bottom:.4rem}
.bono-banner p{color:var(--g7); font-size:.95rem; line-height:1.5; max-width:55ch}
.bono-banner .btns{display:flex; flex-wrap:wrap; gap:.6rem}