/* =========================================================
   Velvet Kids · V2 (COPIA APARTE: velvet-kids-v2.html). Va encima de v2.css.
   La página de siempre (velvet-kids.html) no se toca.

   · HERO: el mismo (letras de peluche, helado, piruleta y trigo sobre el fieltro verde), sólo pulido:
     más luz en el centro, letras algo más grandes que se inclinan con el ratón, los juguetes entran volando.
   · Lo demás, con el estilo de la portada V2: láminas de una pantalla que se apilan, 3 colores, una letra.
   ========================================================= */

/* ============ HERO ============ */
.khero{position:sticky; top:0; z-index:1; min-height:100svh; display:grid; place-items:center; text-align:center; overflow:hidden; padding:6rem 1.2rem 5rem;
  background:#17443B url(media/kids/textura.jpg) center/cover; perspective:1100px}
.khero::before{content:""; position:absolute; inset:0; pointer-events:none;                 /* luz suave en el centro + bordes más oscuros */
  background:radial-gradient(ellipse 58% 52% at 50% 46%, rgba(150,226,196,.26), transparent 70%),
             radial-gradient(ellipse 120% 100% at 50% 50%, transparent 52%, rgba(6,24,20,.62) 100%)}
.khero__centro{position:relative; z-index:2}
.khero__marca{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 clamp(.2rem,1vw,1rem);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d; transition:transform .5s var(--suave)}
.khero__logo{width:clamp(250px,29vw,560px); height:auto; filter:drop-shadow(0 22px 30px rgba(0,0,0,.4))}
.khero__kids{width:clamp(236px,27vw,524px); height:auto; filter:drop-shadow(0 22px 30px rgba(0,0,0,.4))}
.khero__tag{font-weight:600; color:var(--hueso); font-size:clamp(1.1rem,1.55vw,1.6rem); line-height:1.3; margin:clamp(1.2rem,2.4vh,2rem) auto 0; max-width:24ch; text-shadow:0 2px 14px rgba(0,0,0,.5)}
.khero__cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:clamp(1.3rem,2.6vh,2rem)}
.btn--claro{background:transparent; border-color:rgba(238,240,230,.7); color:var(--hueso)}
.btn--claro:hover{background:var(--hueso); border-color:var(--hueso); color:var(--verde)}
/* los juguetes: el JS los mueve (flotan, siguen al ratón y se pueden arrastrar) */
.float{position:absolute; z-index:1; height:auto; filter:drop-shadow(0 16px 20px rgba(0,0,0,.34)); cursor:grab; touch-action:none; will-change:transform; user-select:none; -webkit-user-drag:none}
.float:active{cursor:grabbing}
.float--helado{width:clamp(90px,13vw,190px); left:4%; bottom:8%}
.float--piruleta{width:clamp(80px,11vw,160px); right:5%; top:16%}
.float--trigo{width:clamp(80px,11vw,160px); right:9%; bottom:10%}
.float--trigo2{width:clamp(70px,9vw,130px); left:8%; top:15%}
@media (prefers-reduced-motion:no-preference){
  .js .khero__logo{animation:kpop 1.1s .15s var(--rebote) both}
  .js .khero__kids{animation:kpop 1.1s .32s var(--rebote) both}
  .js .khero__tag{animation:ksube .9s .6s var(--suave) both}
  .js .khero__cta{animation:ksube .9s .75s var(--suave) both}
  @keyframes kpop{from{opacity:0; transform:translateY(60px) scale(.6) rotate(-8deg)}}
  @keyframes ksube{from{opacity:0; transform:translateY(26px)}}
}
@media(max-width:600px){ .float{pointer-events:none} }
@media(prefers-reduced-motion:reduce){ .float{pointer-events:none} }

/* ============ listas con raya (cumpleaños, alquiler) ============ */
.lista{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--hueco); margin-top:1.4em}
.lista li{padding:.75em 0; font-weight:500; font-size:1.06em; line-height:1.3}

/* ============ 1 · CUMPLEAÑOS ============ */
.cumple__txt{grid-column:1 / span 7; display:flex; flex-direction:column; align-items:flex-start}
.cumple__txt .grande{max-width:27em}
.cumple__txt .lista{align-self:stretch}
.cumple__txt .btn{margin-top:auto}
.cumple__foto{grid-column:9 / span 4}

/* ============ 2 · PACKS ============ */
.packs__intro{margin-top:.9em; max-width:40em}
.packs{grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--hueco); list-style:none}
.pack{position:relative; display:flex; flex-direction:column; border-radius:var(--r-carta); padding:clamp(1.1rem,1.7vw,1.9rem); background:var(--blanco); box-shadow:inset 0 0 0 2px var(--verde);
  transition:transform .45s var(--rebote)}
.pack:hover{transform:translateY(-8px) rotate(-1deg)}
.pack--top{background:var(--verde); color:var(--hueso); box-shadow:none}
.pack__nombre{font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase}
.pack__precio{font-weight:800; font-stretch:75%; font-size:calc(var(--u) * 3.5); line-height:.9; letter-spacing:-.03em; margin-top:.28em}
.pack--top .pack__precio{color:var(--amarillo)}
.pack__precio small{font-size:.3em; font-weight:600; font-stretch:100%; letter-spacing:0; margin-left:.2em}
.pack__sub{font-size:.92em; font-weight:600; margin-top:.5em; opacity:.8}
.pack__feats{list-style:none; margin:.9em 0 1.1em; font-size:.9em; line-height:1.3}
.pack__feats li{padding:.42em 0; border-top:1px solid rgba(16,48,41,.18)}
.pack--top .pack__feats li{border-top-color:rgba(238,240,230,.22)}
.pack .btn{margin-top:auto; align-self:flex-start; padding:.7em 1.3em}
.pack__sello{position:absolute; top:-.9em; right:1.1rem; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:var(--amarillo); color:var(--verde); padding:.42em .9em; border-radius:100px}
.packs__temas{margin-top:1.1em; font-size:.92em}
.packs__temas b{font-weight:700}

/* en ventanas bajas (portátil pequeño) los packs van más apretados para que quepa todo */
@media (min-width:900px) and (max-height:760px){
  .pack{padding:1rem 1.1rem}
  .pack__sub{display:none}
  .pack__feats{margin:.6em 0 .7em; font-size:.86em}
  .pack__feats li{padding:.3em 0}
  .pack .btn{padding:.55em 1.1em}
  .packs__temas{margin-top:.7em; font-size:.84em}
}

/* ============ 3 · ALQUILER (lámina amarilla) ============ */
.alquiler{background:var(--amarillo)}
.alquiler__foto{grid-column:1 / span 4}
.alquiler__txt{grid-column:6 / span 7; display:flex; flex-direction:column; align-items:flex-start}
.alquiler__txt .lista{align-self:stretch}
.alquiler__pie{margin-top:auto; padding-top:1.2em; display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; align-self:stretch; flex-wrap:wrap}
.alquiler__precio{font-weight:800; font-stretch:75%; font-size:calc(var(--u) * 5.6); line-height:.82; letter-spacing:-.04em}
.alquiler__precio small{display:block; font-size:.19em; font-weight:600; font-stretch:100%; letter-spacing:0; line-height:1.3; margin-top:.5em}

/* ============ 4 · ZONA DE JUEGO: las normas (lámina verde) ============ */
.zona{background:var(--verde); color:var(--hueso)}
.zona .titular{color:var(--amarillo)}
.zona__intro{margin-top:.8em}
.normas{grid-column:1 / span 9; list-style:none; counter-reset:n; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:0 var(--hueco)}
.normas li{counter-increment:n; padding:.7em 0 .7em 2.1em; position:relative; font-size:.95em; line-height:1.32}
.normas li::after{content:counter(n); position:absolute; left:0; top:.72em; font-weight:800; font-stretch:75%; font-size:1.15em; color:var(--amarillo); font-variant-numeric:tabular-nums}
.normas b{font-weight:700}
.zona__foto{grid-column:10 / span 3}

/* ============ 5 · JUEGA EN VELVET (lámina amarilla, fichas con los dulces) ============ */
.juega{background:var(--amarillo)}
.juega__txt{grid-column:1 / span 4; display:flex; flex-direction:column; align-items:flex-start}
.juega__txt .lista{grid-template-columns:1fr; align-self:stretch}
.juega__txt .btn{margin-top:auto}
.juegos{grid-column:6 / span 7; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:calc(var(--hueco) * .7)}
.juegos li{min-height:0; display:flex}
.juego{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--blanco); color:var(--verde); text-decoration:none;
  border-radius:var(--r-carta); padding:clamp(.75rem,1.1vw,1.25rem); transition:transform .45s var(--rebote)}
.juego__dib{flex:1; min-height:0; position:relative}
.juego__dib img{position:absolute; inset:4% 9% 8%; width:82%; height:88%; object-fit:contain; transition:transform .55s var(--rebote)}
.juego__n{font-weight:800; font-stretch:75%; font-size:clamp(1.05rem, calc(var(--u) * 1.5), 1.75rem); line-height:1; letter-spacing:-.01em}
.juego__c{font-size:.82rem; font-weight:600; opacity:.68; margin-top:.35em}
.juego:hover{transform:translateY(-8px) rotate(-1.5deg)}
.juegos li:nth-child(even) .juego:hover{transform:translateY(-8px) rotate(1.5deg)}
.juego:hover .juego__dib img{transform:scale(1.14) rotate(7deg)}
.juegos li:nth-child(even) .juego:hover .juego__dib img{transform:scale(1.14) rotate(-7deg)}

/* ============ 6 · VÍDEOS (Instagram de Velvet Kids) ============ */
.kvideos__cab{display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem 3rem; flex-wrap:wrap}
.kvideos{grid-column:1 / -1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--hueco); list-style:none; min-height:0; align-items:start}
.kvideos li{min-height:0; max-height:100%}
.kvideo{position:relative; display:block; width:100%; aspect-ratio:9/16; max-height:calc(100svh - var(--nav) - 14vh - var(--u) * 6); border-radius:var(--r-foto); overflow:hidden; background:var(--verde); transition:transform .5s var(--rebote)}
.kvideos li:nth-child(even) .kvideo{transform:translateY(4%)}
.kvideos li .kvideo:hover{transform:translateY(-3%) rotate(-1.5deg) scale(1.03)}
.kvideo video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.kvideo__ov{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; padding:1.6rem .8rem .7rem; font-weight:700; font-size:.84rem; color:var(--blanco);
  background:linear-gradient(transparent, rgba(8,18,15,.85)); opacity:0; transition:opacity .35s ease}
.kvideo:hover .kvideo__ov{opacity:1}
.kvideo__ov span:last-child{color:var(--amarillo)}

/* ============ TABLET Y MÓVIL: minimalista, como la portada ============ */
@media (max-width:899px), (max-height:599px){
  .khero{position:relative; padding:5.4rem 1rem 4.2rem}
  .khero__logo{width:min(74vw,440px)} .khero__kids{width:min(70vw,410px); margin-top:-.8rem}
  .khero__tag{font-size:1.1rem; font-weight:500}
  .lista{grid-template-columns:1fr; margin-top:0}
  .lista li{font-size:.98rem; font-weight:400; padding:.75em 0}
  /* cumpleaños: titular → texto → foto → lista → botón */
  .cumple__txt{display:contents}
  .cumple__txt .grande{order:1} .cumple__foto{order:2} .cumple__txt .lista{order:3} .cumple__txt .btn{order:4; align-self:flex-start; margin-top:0}
  /* packs: se pasan con el dedo */
  .packs__intro{font-size:1rem}
  .packs{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--lado); margin-inline:calc(var(--lado) * -1); padding:1rem var(--lado) .4rem; gap:.8rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .packs::-webkit-scrollbar{display:none}
  .pack{flex:0 0 76vw; max-width:310px; scroll-snap-align:start; padding:1.3rem; box-shadow:inset 0 0 0 1px var(--verde)}
  .pack__precio{font-size:2.9rem}
  .pack__feats{font-size:.92rem}
  .packs__temas{font-size:.9rem; margin-top:0}
  /* alquiler */
  .alquiler__txt{display:contents}
  .alquiler__txt .grande{order:1} .alquiler__foto{order:2} .alquiler__txt .lista{order:3} .alquiler__pie{order:4; padding-top:0; margin-top:0}
  .alquiler__precio{font-size:3.6rem}
  .alquiler .lamina__in{padding-bottom:3.4rem}
  /* normas */
  .zona__intro{font-size:1.06rem}
  .normas{grid-template-columns:1fr; grid-auto-rows:auto}
  .normas li{font-size:.96rem; padding:.72em 0 .72em 2rem; border-top:1px solid rgba(238,240,230,.2)}
  .normas li::after{top:.7em}
  .normas b{font-weight:600}
  .zona__foto{order:-1}
  .zona .lamina__in{padding-bottom:3.4rem}
  /* juega en velvet: titular → texto → fichas que se pasan con el dedo → botón */
  .juega__txt{display:contents}
  .juega__txt .grande{order:1} .juegos{order:2} .juega__txt .lista{display:none} .juega__txt .btn{order:3; align-self:flex-start; margin-top:0}
  .juegos{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--lado); margin-inline:calc(var(--lado) * -1); padding-inline:var(--lado); gap:.7rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .juegos::-webkit-scrollbar{display:none}
  .juegos li{flex:0 0 42vw; max-width:190px; scroll-snap-align:start}
  .juego{aspect-ratio:4/5; padding:.85rem; border-radius:10px}
  .juego__n{font-size:1.12rem}
  .juego:hover, .juegos li:nth-child(even) .juego:hover{transform:none}
  .juega .lamina__in{padding-bottom:3.4rem}
  /* vídeos */
  .kvideos__cab{flex-direction:column; align-items:flex-start}
  .kvideos{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--lado); margin-inline:calc(var(--lado) * -1); padding-inline:var(--lado); gap:.7rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .kvideos::-webkit-scrollbar{display:none}
  .kvideos li{flex:0 0 52vw; max-width:230px; scroll-snap-align:start; display:block}
  .kvideo{max-height:none; border-radius:4px}
  .kvideos li:nth-child(even) .kvideo{transform:none}
}