/* ===== Kidzapproved Carousel (aislado) ===== */
.wkidz{
  --wk-accent:#A169AE;        /* morado banner */
  --wk-accent-dark:#A169AE;   /* morado oscuro (mismo tono, como tu CSS) */
  --wk-title:#fff;
  --wk-card:#fff;
  --wk-text:#B278C0;
  --wk-shadow:0 18px 28px rgba(0,0,0,.08);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
.wkidz *{ box-sizing:border-box }

/* Banner morado */
.wkidz .wk-hero{
  position:relative;
  margin:32px auto 96px; /* 👈 espacio inferior para que las cards salidas no choquen con lo siguiente */
  width:min(1280px,92vw);
  background:linear-gradient(135deg,var(--wk-accent) 0%, var(--wk-accent-dark) 85%);
  border-radius:26px;
  padding:48px 28px 44px; /* 👈 padding más corto, dejamos que las cards salgan hacia abajo */
  overflow:visible;       /* 👈 permite que las cards sobresalgan del borde */
}
/* círculos decorativos */
.wkidz .wk-hero::before,
.wkidz .wk-hero::after{
  content:""; position:absolute; border-radius:50%;
  background:rgba(255,255,255,.08); filter:blur(1px);
}
.wkidz .wk-hero::before{ right:-120px; top:-60px; width:380px; height:380px }
.wkidz .wk-hero::after{  right:-40px;  top:140px; width:260px; height:260px }

.wkidz .wk-title{
  color:var(--wk-title);
  margin:0 0 22px;
  font-weight:800;
  letter-spacing:.3px;
  font-size:clamp(26px,4vw,40px);
}

/* Carrusel */
.wkidz .wk-carousel{ position:relative }
.wkidz .wk-viewport{
  position:relative;
  overflow:visible; /* 👈 deja ver sombras y la salida hacia abajo */
  /* máscara de desvanecido en los bordes laterales */
}

.wkidz .wk-track{
  display:grid;
  grid-auto-flow: column;      /* sigue siendo horizontal */
  grid-template-rows: repeat(2, 1fr); /* 👈 DOS FILAS */
  grid-auto-columns: minmax(220px, 100px);
  gap: 28px 28px;              /* fila / columna */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:12px 8px 0;
  scrollbar-width:none;
  margin-bottom:-150px;
}

/* .wkidz .wk-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px,280px);
  gap:28px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:12px 8px 0;   
  scrollbar-width:none;
  margin-bottom:-150px;  /
} */
.wkidz .wk-track::-webkit-scrollbar{ display:none }

/* Cards */
.wkidz .wk-card{
  scroll-snap-align:start;
  background:var(--wk-card);
  border-radius:20px;
  /* padding:26px 20px 48px; */
  box-shadow:var(--wk-shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:220px;
  position:relative;
  z-index:3; /* 👈 por encima del banner */
}
.wkidz .wk-icon{
  width:72px; height:72px; margin-bottom:18px;
  object-fit:contain; display:block;
}

.wk-card {
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}

.wk-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 24px rgba(0,0,0,.15);
}


.wkidz .wk-card h3{
  margin:0 0 18px;
  text-align:center;
  line-height:1.25;
  font-weight:800;
  color:var(--wk-text);
  font-size:20px;
}
.wkidz .wk-pill{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#f4f5ff,#eef1ff);
  box-shadow:0 6px 16px rgba(102,78,167,.18);
}
.wkidz .wk-pill svg{ width:18px; height:18px; opacity:.75 }

/* Flechas */
.wkidz .wk-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:none; cursor:pointer; border-radius:999px;
  background:radial-gradient(120px 120px at 50% 40%, rgba(135,181,255,.28), rgba(135,181,255,0) 60%), #fff;
  box-shadow:0 14px 28px rgba(67,124,255,.22);
  display:grid; place-items:center; z-index:4;
}
.wkidz .wk-arrow--left{ left:-68px }
.wkidz .wk-arrow--right{ right:-68px }
.wkidz .wk-arrow svg{ width:22px; height:22px }

/* Responsive */
@media (max-width:980px){
  .wkidz .wk-hero::before{ right:-80px; top:-40px; width:300px; height:300px }
}
@media (max-width:680px){
  .wkidz .wk-track{ grid-auto-columns:78%; gap:18px } 
}

/* ===== Flechas responsivas (solo posiciones) ===== */
/* Desktop grande (default): ya están a -68px */

/* <= 1280px: acércalas un poco */
@media (max-width:1280px){
  .wkidz .wk-arrow--left{ left:-48px }
  .wkidz .wk-arrow--right{ right:-48px }
}

/* <= 1100px: más cerca para evitar recorte lateral */
@media (max-width:1100px){
  .wkidz .wk-arrow--left{ left:-32px }
  .wkidz .wk-arrow--right{ right:-32px }
}

/* <= 980px: casi pegadas al contenedor morado */
@media (max-width:980px){
  .wkidz .wk-arrow--left{ left:-16px }
  .wkidz .wk-arrow--right{ right:-16px }
}

/* <= 680px: ya estaban ocultas (mantengo tu regla) */