/* ═══════════════════════════════════════════════════════════
   KITSTREAM · Capa de interfaz  ·  v2
   Se carga DESPUÉS de kitstream.css y corrige/amplía.
   Tokens tomados del manual de marca (Sistema de Diseño 1.0).
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── Escala fluida: crece con la pantalla, sin saltos ── */
  --t-xs:  clamp(.72rem, .70rem + .10vw, .80rem);
  --t-sm:  clamp(.80rem, .77rem + .16vw, .92rem);
  --t-md:  clamp(.92rem, .88rem + .22vw, 1.05rem);
  --t-lg:  clamp(1.05rem, .98rem + .38vw, 1.30rem);
  --t-xl:  clamp(1.35rem, 1.15rem + .95vw, 2.10rem);
  --t-2xl: clamp(1.85rem, 1.40rem + 2.20vw, 3.40rem);
  --t-3xl: clamp(2.30rem, 1.60rem + 3.40vw, 4.60rem);

  /* ── Espaciado fluido ── */
  --e-xs: clamp(.35rem, .30rem + .25vw, .55rem);
  --e-sm: clamp(.6rem, .50rem + .40vw, .9rem);
  --e-md: clamp(.9rem, .75rem + .70vw, 1.5rem);
  --e-lg: clamp(1.3rem, 1.0rem + 1.4vw, 2.4rem);
  --e-xl: clamp(2.0rem, 1.5rem + 2.4vw, 3.8rem);

  /* ── Profundidad ── */
  --el-1:0 1px 3px rgba(0,0,0,.30);
  --el-2:0 4px 14px rgba(0,0,0,.38);
  --el-3:0 10px 30px rgba(0,0,0,.46);
  --el-4:0 20px 52px rgba(0,0,0,.55);

  /* ── Movimiento ── */
  --d-rapido:160ms; --d-normal:280ms; --d-lento:520ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --muelle:cubic-bezier(.34,1.56,.64,1);
  --suave:cubic-bezier(.16,1,.3,1);

  --ancho:1240px;
  --borde-suave:rgba(255,255,255,.07);
}

/* ═══ 1 · CONTENCIÓN: nada puede desbordar a lo ancho ═══ */
html,body{max-width:100%;overflow-x:clip}
*{min-width:0}                      /* deja que los hijos de grid/flex encojan */
img,video,canvas,svg,iframe{max-width:100%;height:auto}
pre,code{overflow-x:auto;max-width:100%}
h1,h2,h3,h4,p,span,a,li,td{overflow-wrap:anywhere;hyphens:auto}

.contenedor{width:min(100% - 2rem, var(--ancho));margin-inline:auto}
@media(max-width:480px){.contenedor{width:calc(100% - 1.6rem)}}

/* ═══ 2 · PANTALLA DE CARGA ═══════════════════════════════ */
#ks-carga{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(124,58,237,.20), transparent 58%),
    radial-gradient(circle at 50% 42%, rgba(0,229,255,.10), transparent 44%),
    var(--bg,#0B0F1A);
  transition:opacity var(--d-lento) var(--ease), visibility var(--d-lento);
}
#ks-carga.fuera{opacity:0;visibility:hidden;pointer-events:none}
.ks-carga-in{display:flex;flex-direction:column;align-items:center;gap:1.4rem;padding:1.5rem;text-align:center}

/* Aureola giratoria alrededor de Kit */
.ks-halo{position:relative;width:clamp(112px,26vw,152px);aspect-ratio:1;display:grid;place-items:center}
.ks-halo::before,.ks-halo::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;
}
.ks-halo::before{
  border-top-color:var(--purple,#B94DFF);border-right-color:var(--violet,#7C3AED);
  animation:ks-gira 1.15s linear infinite;
}
.ks-halo::after{
  inset:11px;border-bottom-color:var(--cyan,#00E5FF);border-left-color:rgba(0,229,255,.35);
  animation:ks-gira 1.7s linear infinite reverse;
}
@keyframes ks-gira{to{transform:rotate(360deg)}}

.ks-halo img{
  width:62%;height:auto;
  filter:drop-shadow(0 0 14px rgba(124,58,237,.75));
  animation:ks-latido 1.9s var(--suave) infinite;
}
@keyframes ks-latido{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.ks-marca{
  font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(1.4rem,6vw,2.3rem);letter-spacing:-.02em;line-height:1.1;
}
.ks-marca i{font-style:normal;background:linear-gradient(115deg,#B94DFF,#00E5FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ks-dominio{
  font-size:var(--t-sm);color:var(--muted,#8892A4);letter-spacing:.22em;
  text-transform:uppercase;margin-top:.15rem;
}
.ks-dominio::after{content:'';display:inline-block;width:1ch;text-align:left;animation:ks-puntos 1.4s steps(4,end) infinite}
@keyframes ks-puntos{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* Barra de progreso */
.ks-barra{width:min(230px,62vw);height:3px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.ks-barra span{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--violet,#7C3AED),var(--purple,#B94DFF),var(--cyan,#00E5FF));
  transition:width var(--d-normal) var(--ease)}

/* ═══ 3 · CABECERA RESPONSIVE + MENÚ LATERAL ══════════════ */
header{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;gap:var(--e-sm);
  padding:0 var(--e-md);height:64px;
  background:rgba(11,15,26,.86);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--borde-suave);
}
header .logo{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
header .logo b{font-family:'Sora',sans-serif;font-size:clamp(.95rem,3.4vw,1.18rem);white-space:nowrap}
header nav{display:flex;gap:.2rem;margin-inline:auto;flex-wrap:nowrap;overflow:hidden}
header nav a{padding:.5rem .7rem;border-radius:9px;font-size:var(--t-sm);white-space:nowrap;
  color:var(--muted,#8892A4);transition:color var(--d-rapido),background var(--d-rapido)}
header nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
header nav a.on{color:#fff;position:relative}
header nav a.on::after{content:'';position:absolute;left:.7rem;right:.7rem;bottom:.25rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--violet,#7C3AED),var(--cyan,#00E5FF))}

.cab-der{display:flex;align-items:center;gap:.45rem;flex-shrink:0;margin-left:auto}
.cab-der .btn{white-space:nowrap;max-width:44vw;overflow:hidden;text-overflow:ellipsis}

/* Zonas táctiles mínimas de 44px */
.ico-btn{
  display:grid;place-items:center;
  min-width:42px;min-height:42px;border-radius:11px;
  background:var(--card,#141B2D);border:1px solid var(--borde-suave);
  position:relative;transition:transform var(--d-rapido) var(--muelle),background var(--d-rapido);
}
.ico-btn:hover{background:var(--card-2,#1A2236);transform:translateY(-1px)}
.ico-btn:active{transform:scale(.94)}
.ico-btn .pin{
  position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:99px;font-size:.66rem;font-weight:700;
  background:linear-gradient(135deg,var(--violet,#7C3AED),var(--purple,#B94DFF));color:#fff;
  box-shadow:0 0 0 2px var(--bg,#0B0F1A);
}
.ico-btn .pin:empty{display:none}

/* Menú deslizante para móvil */
.ks-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(300px,84vw);z-index:400;
  background:var(--card,#141B2D);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform var(--d-normal) var(--suave);
  display:flex;flex-direction:column;padding:1.1rem;gap:.3rem;
  box-shadow:-12px 0 44px rgba(0,0,0,.6);overscroll-behavior:contain;overflow-y:auto;
}
.ks-menu.abierto{transform:none}
.ks-menu a{padding:.85rem .9rem;border-radius:11px;font-size:var(--t-md);min-height:46px;
  display:flex;align-items:center;gap:.6rem;transition:background var(--d-rapido)}
.ks-menu a:active{background:rgba(124,58,237,.18)}
.ks-menu a.on{background:rgba(124,58,237,.16);color:#fff}
.ks-menu-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.ks-velo{position:fixed;inset:0;z-index:390;background:rgba(4,7,14,.68);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--d-normal),visibility var(--d-normal)}
.ks-velo.abierto{opacity:1;visibility:visible}

@media(max-width:900px){
  header nav{display:none}
  [data-menu]{display:grid!important}
}
@media(min-width:901px){
  .ks-menu,.ks-velo{display:none}
}

/* ═══ 4 · CUADROS SEPARATIVOS (secciones y tarjetas) ══════ */
.ks-seccion{
  background:var(--card,#141B2D);
  border:1px solid var(--borde-suave);
  border-radius:clamp(12px,2.4vw,18px);
  padding:var(--e-md);
  margin-bottom:var(--e-md);
  box-shadow:var(--el-2);
  position:relative;overflow:hidden;
}
/* Filo superior degradado, como en el mockup */
.ks-seccion::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.55),rgba(0,229,255,.35),transparent);
}
.ks-seccion-cab{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-sm);
  margin-bottom:var(--e-md);flex-wrap:wrap;
}
.ks-seccion-cab h2{
  font-size:var(--t-lg);display:flex;align-items:center;gap:.5rem;margin:0;
  text-transform:uppercase;letter-spacing:.02em;
}
.ks-seccion-cab .ks-ver{
  font-size:var(--t-xs);color:var(--muted,#8892A4);padding:.45rem .8rem;border-radius:9px;
  border:1px solid var(--borde-suave);background:var(--card-2,#1A2236);
  min-height:34px;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  transition:color var(--d-rapido),border-color var(--d-rapido);
}
.ks-seccion-cab .ks-ver:hover{color:#fff;border-color:rgba(124,58,237,.55)}

/* ═══ 5 · CARRUSEL ARRASTRABLE ════════════════════════════ */
.ks-carrusel{position:relative;margin-inline:calc(var(--e-md) * -1);padding-inline:var(--e-md)}
.ks-pista{
  display:flex;gap:var(--e-sm);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:.4rem .8rem;
  cursor:grab;
  overscroll-behavior-x:contain;
}
.ks-pista::-webkit-scrollbar{display:none}
.ks-pista.arrastrando{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
.ks-pista.arrastrando *{pointer-events:none}
.ks-pista > *{scroll-snap-align:start;flex:0 0 auto}

/* Difuminado en los extremos, indica que hay más contenido */
.ks-carrusel::before,.ks-carrusel::after{
  content:'';position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:2;
  transition:opacity var(--d-normal);
}
.ks-carrusel::before{left:0;background:linear-gradient(90deg,var(--card,#141B2D),transparent);opacity:0}
.ks-carrusel::after{right:0;background:linear-gradient(270deg,var(--card,#141B2D),transparent)}
.ks-carrusel[data-ini]::before{opacity:1}
.ks-carrusel[data-fin]::after{opacity:0}

/* Flechas: solo con ratón */
.ks-flecha{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:38px;height:38px;border-radius:50%;display:none;place-items:center;
  background:rgba(20,27,45,.94);border:1px solid var(--line);color:#fff;cursor:pointer;
  box-shadow:var(--el-2);transition:transform var(--d-rapido) var(--muelle),opacity var(--d-rapido);
}
.ks-flecha:hover{transform:translateY(-50%) scale(1.1)}
.ks-flecha.izq{left:2px} .ks-flecha.der{right:2px}
.ks-flecha[disabled]{opacity:.3;pointer-events:none}
@media(hover:hover) and (pointer:fine){.ks-flecha{display:grid}}

/* Píldora de marca dentro del carrusel */
.ks-marca-chip{
  display:flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border-radius:12px;min-height:48px;
  background:var(--card-2,#1A2236);border:1px solid var(--borde-suave);
  font-weight:600;font-size:var(--t-sm);white-space:nowrap;
  transition:transform var(--d-rapido) var(--muelle),border-color var(--d-rapido),box-shadow var(--d-rapido);
}
.ks-marca-chip:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.5);box-shadow:0 8px 22px rgba(124,58,237,.22)}
.ks-marca-chip img,.ks-marca-chip svg{height:22px;width:auto;flex-shrink:0}

/* Servicio en círculo (sección "servicios populares") */
.ks-servicio{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  width:clamp(72px,19vw,92px);text-align:center;
}
.ks-servicio-circ{
  width:clamp(52px,13vw,62px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:var(--card-2,#1A2236);border:1px solid var(--borde-suave);
  transition:transform var(--d-normal) var(--muelle),box-shadow var(--d-normal),border-color var(--d-normal);
  position:relative;overflow:hidden;
}
.ks-servicio-circ img,.ks-servicio-circ svg{width:58%;height:auto}
.ks-servicio:hover .ks-servicio-circ{
  transform:translateY(-5px) scale(1.06);
  border-color:rgba(124,58,237,.6);
  box-shadow:0 10px 26px rgba(124,58,237,.35);
}
.ks-servicio span{font-size:var(--t-xs);color:var(--muted,#8892A4);line-height:1.25}

/* ═══ 6 · REJILLAS QUE NUNCA DESBORDAN ════════════════════ */
.ks-rejilla{display:grid;gap:var(--e-sm)}
.ks-rejilla.c2{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.ks-rejilla.c3{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.ks-rejilla.c4{grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr))}
@media(max-width:400px){
  .ks-rejilla.c3,.ks-rejilla.c4{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
}

/* ═══ 7 · TARJETA DE PRODUCTO ═════════════════════════════ */
.ks-prod{
  background:var(--card-2,#1A2236);border:1px solid var(--borde-suave);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--d-normal) var(--muelle),border-color var(--d-normal),box-shadow var(--d-normal);
  position:relative;
}
@media(hover:hover){
  .ks-prod:hover{transform:translateY(-6px);border-color:rgba(124,58,237,.55);box-shadow:0 16px 38px rgba(0,0,0,.5)}
}
.ks-prod:active{transform:scale(.985)}
.ks-prod-img{
  aspect-ratio:16/10;display:grid;place-items:center;position:relative;
  background:linear-gradient(150deg,rgba(124,58,237,.10),rgba(0,229,255,.05));
  overflow:hidden;
}
.ks-prod-img img,.ks-prod-img svg{width:56%;max-height:64%;object-fit:contain;
  transition:transform var(--d-lento) var(--suave)}
.ks-prod:hover .ks-prod-img img{transform:scale(1.09)}
.ks-prod-cuerpo{padding:.7rem .8rem .8rem;display:flex;flex-direction:column;gap:.28rem;flex:1}
.ks-prod-nom{font-size:var(--t-sm);font-weight:700;line-height:1.3}
.ks-prod-det{font-size:var(--t-xs);color:var(--muted,#8892A4);line-height:1.35}
.ks-prod-pie{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:auto;padding-top:.5rem}
.ks-prod-precio{font-family:'Sora',sans-serif;font-weight:800;font-size:var(--t-md)}
.ks-etiq{
  position:absolute;top:.5rem;right:.5rem;z-index:2;
  font-size:.63rem;font-weight:700;padding:.24rem .5rem;border-radius:6px;
  background:rgba(11,15,26,.82);backdrop-filter:blur(6px);border:1px solid var(--borde-suave);
  letter-spacing:.02em;
}
.ks-etiq.verde{color:#22C55E;border-color:rgba(34,197,94,.4)}
.ks-etiq.vio{color:#B94DFF;border-color:rgba(185,77,255,.4)}

/* ═══ 8 · ANIMACIONES ═════════════════════════════════════ */
[data-revelar]{opacity:0;transform:translateY(22px);
  transition:opacity var(--d-lento) var(--suave),transform var(--d-lento) var(--suave)}
[data-revelar].visible{opacity:1;transform:none}

/* Contorno RGB que recorre la silueta — el que le gustó, refinado */
@keyframes ks-orbita{
  0%  {filter:drop-shadow(  0px  -7px 11px rgba(124,58,237,.85)) drop-shadow(  7px  0px 11px rgba(0,229,255,.55)) drop-shadow( 0px  7px 11px rgba(185,77,255,.75)) drop-shadow(-7px  0px 11px rgba(0,229,255,.45))}
  25% {filter:drop-shadow(  7px   0px 11px rgba(124,58,237,.85)) drop-shadow(  0px  7px 11px rgba(0,229,255,.55)) drop-shadow(-7px  0px 11px rgba(185,77,255,.75)) drop-shadow( 0px -7px 11px rgba(0,229,255,.45))}
  50% {filter:drop-shadow(  0px   7px 11px rgba(124,58,237,.85)) drop-shadow( -7px  0px 11px rgba(0,229,255,.55)) drop-shadow( 0px -7px 11px rgba(185,77,255,.75)) drop-shadow( 7px  0px 11px rgba(0,229,255,.45))}
  75% {filter:drop-shadow( -7px   0px 11px rgba(124,58,237,.85)) drop-shadow(  0px -7px 11px rgba(0,229,255,.55)) drop-shadow( 7px  0px 11px rgba(185,77,255,.75)) drop-shadow( 0px  7px 11px rgba(0,229,255,.45))}
  100%{filter:drop-shadow(  0px  -7px 11px rgba(124,58,237,.85)) drop-shadow(  7px  0px 11px rgba(0,229,255,.55)) drop-shadow( 0px  7px 11px rgba(185,77,255,.75)) drop-shadow(-7px  0px 11px rgba(0,229,255,.45))}
}
.ks-kit img{animation:ks-orbita 4.5s linear infinite;will-change:filter}
.ks-kit.lento img{animation-duration:7s}

/* Flotación suave del personaje */
@keyframes ks-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.ks-flota{animation:ks-flota 5s var(--suave) infinite}

/* Brillo que barre un botón al pasar el cursor */
.btn-1,.ks-btn-brillo{position:relative;overflow:hidden}
.btn-1::after,.ks-btn-brillo::after{
  content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left var(--d-lento) var(--ease);
}
@media(hover:hover){.btn-1:hover::after,.ks-btn-brillo:hover::after{left:135%}}

/* Aparición escalonada */
.ks-escalon > *{opacity:0;animation:ks-entra .5s var(--suave) forwards}
@keyframes ks-entra{to{opacity:1;transform:none}}
.ks-escalon > *{transform:translateY(14px)}
.ks-escalon > *:nth-child(1){animation-delay:.04s} .ks-escalon > *:nth-child(2){animation-delay:.08s}
.ks-escalon > *:nth-child(3){animation-delay:.12s} .ks-escalon > *:nth-child(4){animation-delay:.16s}
.ks-escalon > *:nth-child(5){animation-delay:.20s} .ks-escalon > *:nth-child(6){animation-delay:.24s}
.ks-escalon > *:nth-child(7){animation-delay:.28s} .ks-escalon > *:nth-child(8){animation-delay:.32s}
.ks-escalon > *:nth-child(n+9){animation-delay:.36s}

/* ═══ 9 · HERO RESPONSIVE ═════════════════════════════════ */
.ks-hero{
  position:relative;overflow:hidden;
  border-radius:clamp(14px,2.6vw,20px);
  padding:var(--e-lg);
  background:
    radial-gradient(ellipse at 78% 42%, rgba(124,58,237,.30), transparent 56%),
    radial-gradient(ellipse at 22% 78%, rgba(0,229,255,.13), transparent 52%),
    linear-gradient(150deg,#151B31,#0D1120);
  border:1px solid var(--borde-suave);
  display:grid;gap:var(--e-md);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
.ks-hero h1{font-size:var(--t-2xl);margin-bottom:var(--e-sm)}
.ks-hero p{font-size:var(--t-md);color:var(--muted,#8892A4);max-width:52ch}
.ks-hero-fig{display:grid;place-items:center;position:relative;min-width:0}
.ks-hero-fig img{width:min(100%,340px);height:auto}
.ks-hero-acciones{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--e-md)}
.ks-hero-acciones .btn{min-height:46px;flex:1 1 auto;justify-content:center;min-width:150px}

@media(max-width:860px){
  .ks-hero{grid-template-columns:1fr;text-align:center}
  .ks-hero p{margin-inline:auto}
  .ks-hero-fig{order:-1}
  .ks-hero-fig img{width:min(74%,250px)}
  .ks-hero-acciones{justify-content:center}
}
@media(max-width:480px){
  .ks-hero{padding:var(--e-md)}
  .ks-hero-acciones .btn{flex:1 1 100%}
}

/* Sellos de confianza */
.ks-confianza{display:flex;gap:var(--e-sm);flex-wrap:wrap;margin-top:var(--e-md)}
.ks-confianza > div{display:flex;align-items:center;gap:.45rem;font-size:var(--t-xs);
  color:var(--muted,#8892A4);line-height:1.25}
.ks-confianza b{display:block;color:#fff;font-size:var(--t-sm)}
@media(max-width:860px){.ks-confianza{justify-content:center}}
@media(max-width:420px){.ks-confianza{gap:.6rem}.ks-confianza > div{flex:1 1 44%}}

/* ═══ 10 · AJUSTES FINOS POR TAMAÑO ═══════════════════════ */
@media(max-width:768px){
  .sec,.contenido{padding:var(--e-md) var(--e-sm)}
  .tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
  table{min-width:520px}
  .toasts{left:.8rem;right:.8rem;bottom:.8rem;max-width:none}
  .panel{grid-template-columns:1fr}
  .wallets{grid-template-columns:1fr}
}
@media(max-width:480px){
  header{height:58px;padding:0 .8rem;gap:.4rem}
  header .logo img{width:32px;height:32px}
  .cab-der{gap:.35rem}
  .cab-der .btn{padding:.5rem .7rem;font-size:var(--t-xs)}
  .ks-seccion{padding:var(--e-sm);border-radius:13px}
  .ks-seccion-cab h2{font-size:var(--t-md)}
}
@media(max-width:360px){
  .ks-seccion-cab .ks-ver{display:none}
  .cab-der .btn{max-width:38vw}
}

/* Táctil: sin hover pegajoso, con respuesta al toque */
@media(hover:none){
  .ks-prod:hover,.ks-marca-chip:hover{transform:none;box-shadow:none}
  .ks-prod:active{transform:scale(.97);transition:transform 90ms}
  a,button{-webkit-tap-highlight-color:rgba(124,58,237,.22)}
}

/* Respeta a quien prefiere menos movimiento */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ks-kit img{animation:none;filter:drop-shadow(0 0 10px rgba(124,58,237,.6))}
  [data-revelar]{opacity:1;transform:none}
  .ks-escalon > *{opacity:1;transform:none;animation:none}
}

/* ═══ 11 · ZONAS TÁCTILES ═════════════════════════════════
   Apple y Google piden 44px; por debajo de 40 se falla mucho.
   Solo en pantallas táctiles: en escritorio el ratón es preciso.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .btn,button.btn,a.btn{
    min-height:44px;
    padding-block:.62rem;
    display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  }
  .btn-sm{min-height:40px;padding-block:.5rem}
  .ks-ver{min-height:40px}
  header .logo{min-height:44px;display:flex;align-items:center}

  /* Enlaces sueltos de texto: se agranda el área sin mover el diseño */
  a.peq,a.muted.peq,.ks-enlace-min{
    position:relative;display:inline-flex;align-items:center;min-height:24px;
  }
  a.peq::after,a.muted.peq::after,.ks-enlace-min::after{
    content:'';position:absolute;left:-8px;right:-8px;top:50%;
    height:44px;transform:translateY(-50%);
  }
}

/* ═══ 12 · NADA SE CORTA POR DENTRO ═══════════════════════ */
.ks-seccion,.caja,.card,.tarjeta{max-width:100%;overflow-wrap:anywhere}
/* Un hijo ancho no debe estirar a su padre: que haga scroll él */
.ks-seccion > .tabla-caja,.caja > .tabla-caja{max-width:100%;overflow-x:auto}
h1,h2,h3,h4{max-width:100%}
/* El carrusel sí puede pasarse del borde del cuadro, es su gracia */
.ks-seccion > .ks-carrusel{max-width:none}