/* ============================================================
   BLOG · 02 COLECCIONES — «estante de tomos»
   Modos (los pone el JS en #colecciones):
   · sin clase  → rejilla de 4 tarjetas abiertas (sin JS, ?reduce, JS caído)
   · .is-shelf  → escritorio ≥900: estante 3D (CSS preserve-3d), un tomo abierto como libro
   · .is-car    → celular <900: carrusel rotativo sin fin con scroll-snap
   ============================================================ */
#colecciones{
  --cl-h:560px; --cl-sw:92px; --cl-gap:14px; --cl-bw:820px;
  --cl-paper:linear-gradient(180deg,#0E1C29 0%,#0A1520 55%,#08111A 100%);
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--ink) 0,rgba(5,9,15,0) 340px),radial-gradient(90% 60% at 50% 22%,rgba(16,39,58,.55) 0%,rgba(5,9,15,0) 70%),var(--ink); /* integrador: sin costura con la portada */
}
#colecciones .cl__lamp{position:absolute;left:50%;top:18%;width:min(1200px,120vw);height:70%;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(216,166,70,.13) 0%,rgba(216,166,70,.04) 45%,rgba(216,166,70,0) 72%)}

/* ---------- Cabecera ---------- */
#colecciones .cl__head{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);align-items:end;gap:20px clamp(32px,5vw,90px);margin-bottom:clamp(36px,4.4vw,64px)}
#colecciones .cl__intro{max-width:820px}
#colecciones .cl__title{margin-top:20px}
#colecciones .cl__lead{max-width:40ch;padding-bottom:.4em}
@media (max-width:899px){#colecciones .cl__head{grid-template-columns:minmax(0,1fr)}}
#colecciones .cl__ctrl{display:none}

/* ---------- Lista del índice (común a todos los modos) ---------- */
#colecciones .cl__list{list-style:none;margin:0;padding:0}
#colecciones .cl__list li{border-top:1px solid var(--line)}
#colecciones .cl__list li:first-child{border-top:0}
#colecciones .cl__lnk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;padding:11px 0;min-height:44px;color:var(--cream);text-decoration:none;transition:color .35s var(--ease)}
#colecciones .cl__no{font-size:.74rem;letter-spacing:.06em;color:var(--gold-2);white-space:nowrap;min-width:3.6em}
#colecciones .cl__tt{font:500 .95rem/1.4 var(--sans);text-wrap:pretty;background:linear-gradient(var(--gold-2),var(--gold-2)) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
@media (hover:hover){
  #colecciones .cl__lnk:hover{color:var(--gold-2)}
  #colecciones .cl__lnk:hover .cl__tt{background-size:100% 1px}
}
#colecciones .cl__lnk:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:4px}
#colecciones .cl__idx-t{font:700 .76rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin:0 0 4px;padding-top:3px}
#colecciones .cl__more{margin-top:4px;border-bottom:0}
#colecciones .cl__more:first-of-type{border-top:1px solid var(--line)}
#colecciones .cl__more>summary{font:600 .86rem/1.2 var(--sans);letter-spacing:.02em;color:var(--gold-2);padding:12px 0}
#colecciones .cl__more>summary:after{width:28px;height:28px}
#colecciones .cl__more>summary:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:4px}
#colecciones .cl__kick{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0;font:700 .76rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
#colecciones .cl__kick i{flex:none;width:24px;height:1px;background:var(--hair)}
#colecciones .cl__kick span{white-space:nowrap}
#colecciones .cl__kick b{font-size:.86rem;letter-spacing:0;color:var(--cream);margin-right:.2em}
#colecciones .cl__name{font:500 italic clamp(1.9rem,2.7vw,2.8rem)/1 var(--serif);letter-spacing:-.02em;color:var(--cream);margin:12px 0 0}
#colecciones .cl__foot{padding-top:18px}
#colecciones .cl__all{width:100%;min-height:48px}
#colecciones .cl__all b{font-weight:800;margin-inline:.1em}

/* ---------- Medio del tomo (póster + video + marco de oro líquido) ---------- */
#colecciones .cl__media{position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(160deg,#10273A 0%,#05090F 70%);aspect-ratio:4/3}
#colecciones .cl__media img,#colecciones .cl__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#colecciones .cl__media video{opacity:0;transition:opacity .8s var(--ease)}
#colecciones .cl__media video.is-on{opacity:1}
#colecciones .cl__media[data-cat=pagos] img,#colecciones .cl__media[data-cat=pagos] video{object-position:38% 55%}
#colecciones .cl__media[data-cat=tokeniza] img,#colecciones .cl__media[data-cat=tokeniza] video{object-position:50% 40%}
#colecciones .cl__media[data-cat=tarjeta] img,#colecciones .cl__media[data-cat=tarjeta] video{object-position:68% 62%}
#colecciones .cl__media[data-cat=patrimonio] img,#colecciones .cl__media[data-cat=patrimonio] video{object-position:56% 50%}
#colecciones .cl__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,15,.25) 0%,rgba(5,9,15,0) 30%,rgba(5,9,15,0) 55%,rgba(5,9,15,.7) 100%)}
#colecciones .cl__frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#colecciones .cl__frame rect{width:calc(100% - 2px);height:calc(100% - 2px)}
#colecciones .cl__liq{opacity:.95}
#colecciones .cl__thread{stroke:var(--gold-2);stroke-width:1.2;opacity:.75}
#colecciones .cl__rim{display:none}
#colecciones .cl__playv{position:absolute;right:14px;bottom:14px;z-index:3;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--gold-2);
  box-shadow:0 0 0 4px rgba(216,166,70,.16),0 8px 24px -8px rgba(0,0,0,.8);background:rgba(5,9,15,.72);color:var(--gold-2);display:grid;place-items:center;cursor:pointer;transition:background .3s,border-color .3s}
#colecciones .cl__playv[hidden]{display:none}
#colecciones .cl__playv svg{width:20px;height:20px;margin-left:2px}
#colecciones .cl__playv:hover{background:var(--gold-2);color:var(--ink)}
#colecciones .cl__playv:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
/* gama baja / ?nogl: sin filtro SVG; el marco se llena con un degradado CSS */
#colecciones.is-lite .cl__liq{display:none}
#colecciones.is-lite .cl__rim{display:block;position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(244,213,138,.8);
  -webkit-mask:linear-gradient(0deg,#000 var(--cl-fill,100%),transparent calc(var(--cl-fill,100%) + 1%));
  mask:linear-gradient(0deg,#000 var(--cl-fill,100%),transparent calc(var(--cl-fill,100%) + 1%))}
#colecciones.is-lite .cl__thread{opacity:0}

/* ---------- Pista y puntos (solo en carrusel) ---------- */
#colecciones .cl__under{display:none}
#colecciones .cl__plank{display:none}

/* =========================================================
   MODO REJILLA (sin JS / ?reduce / JS caído)
   ========================================================= */
#colecciones:not(.is-shelf):not(.is-car) .cl__spine{display:none}
#colecciones:not(.is-shelf):not(.is-car) .cl__track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
#colecciones:not(.is-shelf):not(.is-car) .cl__book{height:100%;display:flex;flex-direction:column;gap:18px;padding:16px 16px 20px}
#colecciones:not(.is-shelf):not(.is-car) .cl__page--r{display:flex;flex-direction:column;gap:14px;flex:1;padding:0 6px}
#colecciones:not(.is-shelf):not(.is-car) .cl__body{flex:1}
#colecciones:not(.is-shelf):not(.is-car) .cl__name{font-size:clamp(1.7rem,2vw,2.2rem)}
@media (max-width:1199px){#colecciones:not(.is-shelf):not(.is-car) .cl__track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){
  #colecciones:not(.is-shelf):not(.is-car) .cl__track{grid-template-columns:minmax(0,1fr)}
  #colecciones:not(.is-shelf):not(.is-car) .cl__media{aspect-ratio:16/10}
}

/* =========================================================
   MODO ESTANTE (escritorio ≥ 900)
   ========================================================= */
#colecciones.is-shelf .cl__shelf{position:relative;perspective:1400px;perspective-origin:50% 36%;padding-bottom:34px}
#colecciones.is-shelf .cl__track{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;justify-content:center;gap:var(--cl-gap);height:var(--cl-h);transform-style:preserve-3d;transform-origin:50% 100%}
#colecciones.is-shelf .cl__tomo{position:relative;display:flex;align-items:stretch;height:100%;transform-style:preserve-3d}
/* sombra de contacto sobre la repisa */
#colecciones.is-shelf .cl__tomo:after{content:"";position:absolute;left:-10px;width:calc(var(--cl-sw) + 20px);bottom:-16px;height:26px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,0) 72%);transform:translateZ(-2px)}
#colecciones.is-shelf .cl__tomo.is-open:after{width:calc(var(--cl-sw) + var(--cl-bw) + 10px);background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.8) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 75%)}

/* lomo de cuero tinta con nervios dorados */
#colecciones.is-shelf .cl__spine{position:relative;flex:none;width:var(--cl-sw);height:100%;padding:0;border:0;cursor:pointer;color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;padding-block:22px 20px;border-radius:5px 7px 7px 5px;
  background:
    radial-gradient(140% 40% at 30% 12%,rgba(244,213,138,.07),rgba(0,0,0,0) 60%),
    repeating-linear-gradient(17deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,.02) 2px 5px),
    linear-gradient(90deg,#03070C 0%,#0E1E2D 14%,#13283A 34%,#0C1A27 62%,#060D15 88%,#02050A 100%);
  box-shadow:inset 0 0 0 1px rgba(216,166,70,.16),inset 0 1px 0 rgba(244,213,138,.18),0 30px 50px -24px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.6);
  transform-style:preserve-3d;transform-origin:50% 100%;
  transform:translate3d(0,var(--ty,0px),var(--tz,0px)) rotateY(var(--ry,0deg));
  transition:transform .8s var(--ease),box-shadow .6s var(--ease),filter .6s}
#colecciones.is-shelf .cl__tomo.is-l .cl__spine{--ry:11deg}
#colecciones.is-shelf .cl__tomo.is-r .cl__spine{--ry:-11deg}
/* grosor del lomo: caras laterales (solo se ve la que mira al espectador) */
#colecciones.is-shelf .cl__side{position:absolute;top:2px;bottom:2px;width:22px;pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:
    linear-gradient(180deg,transparent 0 26px,rgba(216,166,70,.55) 26px 27px,transparent 27px calc(100% - 27px),rgba(216,166,70,.55) calc(100% - 27px) calc(100% - 26px),transparent calc(100% - 26px)),
    linear-gradient(90deg,#0B1824,#03070C)}
#colecciones.is-shelf .cl__side--r{left:100%;transform-origin:0 50%;transform:rotateY(90deg)}
#colecciones.is-shelf .cl__side--l{right:100%;transform-origin:100% 50%;transform:rotateY(-90deg);background:
    linear-gradient(180deg,transparent 0 26px,rgba(216,166,70,.55) 26px 27px,transparent 27px calc(100% - 27px),rgba(216,166,70,.55) calc(100% - 27px) calc(100% - 26px),transparent calc(100% - 26px)),
    linear-gradient(90deg,#03070C,#0B1824)}
#colecciones.is-shelf .cl__spine:before{content:"";position:absolute;inset:0 auto 0 0;width:6px;border-radius:5px 0 0 5px;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
#colecciones.is-shelf .cl__band{display:block;width:100%;height:30px;flex:none;
  background:
    linear-gradient(180deg,transparent 0 5px,rgba(167,121,39,.9) 5px 6px,#F4D58A 6px 7px,rgba(167,121,39,.9) 7px 8px,transparent 8px 13px,
      rgba(167,121,39,.8) 13px 14px,#E7C277 14px 15px,rgba(167,121,39,.8) 15px 16px,transparent 16px 22px,rgba(167,121,39,.9) 22px 23px,#F4D58A 23px 24px,rgba(167,121,39,.9) 24px 25px,transparent 25px);
  opacity:.8;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
#colecciones.is-shelf .cl__spine-rom{font:500 1.5rem/1 var(--serif);color:var(--gold-2);letter-spacing:.02em}
#colecciones.is-shelf .cl__spine-name{flex:1;min-height:0;writing-mode:vertical-rl;font:500 italic clamp(1.45rem,1.75vw,1.95rem)/1 var(--serif);letter-spacing:-.005em;
  color:var(--cream);white-space:nowrap;display:flex;align-items:center;justify-content:center;transition:color .5s}
#colecciones.is-shelf .cl__spine-n{font-size:1.35rem;color:var(--gold-2);line-height:1}
#colecciones.is-shelf .cl__spine:hover,#colecciones.is-shelf .cl__spine:focus-visible{--ty:-14px;--tz:34px;
  box-shadow:inset 0 0 0 1px rgba(216,166,70,.4),inset 0 1px 0 rgba(244,213,138,.3),0 40px 60px -24px rgba(0,0,0,.95),0 0 40px -12px rgba(216,166,70,.35)}
#colecciones.is-shelf .cl__spine:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}
#colecciones.is-shelf .cl__spine[aria-expanded=true]{--ty:-20px;--tz:56px;--ry:7deg;
  box-shadow:inset 0 0 0 1px rgba(244,213,138,.6),inset 0 1px 0 rgba(244,213,138,.45),0 44px 70px -24px rgba(0,0,0,.95),0 0 60px -16px rgba(216,166,70,.5)}
#colecciones.is-shelf .cl__spine[aria-expanded=true] .cl__spine-name{color:var(--gold-2)}

/* el libro abierto junto a su lomo */
#colecciones.is-shelf .cl__bookwrap{position:relative;width:0;height:100%;transform-style:preserve-3d}
#colecciones.is-shelf .cl__tomo.is-open .cl__bookwrap{width:var(--cl-bw)}
/* cambio de tomo: mientras los lomos se deslizan, un hilo dorado marca el pliegue y un velo de oro ocupa el hueco */
#colecciones.is-shelf .cl__bookwrap:before,#colecciones.is-shelf .cl__bookwrap:after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease)}
#colecciones.is-shelf .cl__bookwrap:before{top:4%;bottom:4%;left:calc(50% + var(--cl-gap) / 2);width:1px;margin-left:-.5px;transform:scaleY(.2);
  background:linear-gradient(180deg,rgba(244,213,138,0),#F4D58A 18%,#D8A646 50%,#F4D58A 82%,rgba(244,213,138,0));box-shadow:0 0 18px 2px rgba(216,166,70,.45)}
#colecciones.is-shelf .cl__bookwrap:after{top:0;bottom:0;left:var(--cl-gap);right:0;border-radius:8px;
  background:radial-gradient(60% 70% at 50% 50%,rgba(216,166,70,.16) 0%,rgba(216,166,70,.05) 55%,rgba(216,166,70,0) 80%),linear-gradient(90deg,rgba(14,28,41,.55),rgba(10,21,32,.75) 50%,rgba(14,28,41,.55))}
#colecciones.is-shelf .cl__tomo.is-grow .cl__bookwrap:before{opacity:1;transform:scaleY(1);transition-duration:.25s}
#colecciones.is-shelf .cl__tomo.is-grow .cl__bookwrap:after{opacity:1;transition-duration:.2s}
#colecciones.is-shelf .cl__book{position:absolute;left:var(--cl-gap);top:0;width:calc(var(--cl-bw) - var(--cl-gap));height:100%;padding:0;border:0;border-radius:0;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;display:grid;grid-template-columns:1fr 1fr;transform-style:preserve-3d;visibility:hidden}
#colecciones.is-shelf .cl__tomo.is-open .cl__book{visibility:visible;transform:translate3d(0,-10px,30px)}
#colecciones.is-shelf .cl__tomo.is-open{z-index:2}
#colecciones.is-shelf .cl__page{position:relative;height:100%;min-height:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--cl-paper);border:1px solid var(--hair)}
#colecciones.is-shelf .cl__page--l{border-radius:8px 2px 2px 8px;padding:16px;border-right:0;transform-origin:100% 50%;transform:rotateY(5deg);
  box-shadow:-2px 3px 0 -1px #0A1520,-2px 3px 0 0 rgba(216,166,70,.22),-4px 6px 0 -1px #08111A,-4px 6px 0 0 rgba(216,166,70,.14),0 40px 70px -30px rgba(0,0,0,.95)}
#colecciones.is-shelf .cl__page--l:after{content:"";position:absolute;top:0;right:0;bottom:0;width:38px;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.45))}
#colecciones.is-shelf .cl__page--r{transform-origin:0 50%;transform:rotateY(-5deg);border-radius:2px 8px 8px 2px;padding:clamp(20px,2.2vw,34px) clamp(20px,2.2vw,34px) clamp(18px,2vw,28px);display:flex;flex-direction:column;
  box-shadow:2px 3px 0 -1px #0A1520,2px 3px 0 0 rgba(216,166,70,.22),4px 6px 0 -1px #08111A,4px 6px 0 0 rgba(216,166,70,.14),0 40px 70px -30px rgba(0,0,0,.95)}
#colecciones.is-shelf .cl__page--r:before{content:"";position:absolute;top:0;left:0;bottom:0;width:34px;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
#colecciones.is-shelf .cl__media{height:100%;aspect-ratio:auto;border-radius:6px}
#colecciones.is-shelf .cl__frame rect{rx:6px}
#colecciones.is-shelf.is-lite .cl__rim{border-radius:6px}
#colecciones.is-shelf .cl__meta{margin-bottom:auto}
#colecciones.is-shelf .cl__body{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-top:18px;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(216,166,70,.4) transparent}
#colecciones.is-shelf .cl__tt{font-size:clamp(.88rem,.95vw,.98rem)}
#colecciones.is-shelf .cl__lnk{padding:9px 0}
@media (max-height:820px){
  #colecciones.is-shelf .cl__page--r{padding:18px 22px 16px}
  #colecciones.is-shelf .cl__name{font-size:clamp(1.6rem,2.2vw,2.2rem);margin-top:8px}
  #colecciones.is-shelf .cl__body{margin-top:12px}
  #colecciones.is-shelf .cl__tt{font-size:.86rem;line-height:1.35}
  #colecciones.is-shelf .cl__lnk{padding:7px 0}
  #colecciones.is-shelf .cl__more>summary{padding:9px 0}
  #colecciones.is-shelf .cl__foot{padding-top:12px}
}

/* repisa */
#colecciones.is-shelf .cl__plank{display:block;position:absolute;left:-2%;right:-2%;bottom:6px;height:28px;border-radius:3px;
  background:linear-gradient(180deg,rgba(244,213,138,.55) 0,rgba(167,121,39,.5) 1px,#0F1E2C 2px,#091520 60%,#04080D 100%);
  box-shadow:0 30px 60px -10px rgba(0,0,0,.9),0 -1px 30px rgba(216,166,70,.08);transform:perspective(900px) rotateX(38deg);transform-origin:50% 0}
#colecciones.is-shelf .cl__plank:after{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent);opacity:.8}

#colecciones.is-shelf .cl__under{display:flex;justify-content:center;margin-top:clamp(18px,2.4vw,30px)}
#colecciones.is-shelf .cl__dots{display:none}
#colecciones.is-shelf .cl__hint{display:flex}
#colecciones.is-shelf .cl__hint-m{display:none}

/* =========================================================
   MODO CARRUSEL (celular < 900)
   ========================================================= */
#colecciones.is-car{--cl-gap:var(--gut);--cl-cw:calc(100vw - var(--gut) - var(--cl-gap) - 15vw);display:flex;flex-direction:column}
#colecciones.is-car>.cl__head{order:1}
#colecciones.is-car>.cl__under{order:2}
#colecciones.is-car>.cl__stage{order:3}
#colecciones.is-car .cl__head{flex-direction:column;align-items:stretch;gap:22px;margin-bottom:22px}
#colecciones.is-car .cl__ctrl{display:flex;align-items:center;gap:8px}
#colecciones.is-car .cl__count{display:flex;align-items:center;gap:8px;margin:0 auto 0 0;font-size:.95rem;color:var(--cream-2)}
#colecciones.is-car .cl__total{opacity:.6}
#colecciones.is-car .cl__count b{color:var(--gold-2);font-size:1.3rem;font-weight:800}
#colecciones.is-car .cl__count i{width:1px;height:16px;background:var(--cream-2);opacity:.6;transform:rotate(22deg)}
#colecciones.is-car .cl__arrow,#colecciones.is-car .cl__play{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(5,9,15,.5);
  color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:border-color .3s,color .3s,background .3s;padding:0}
#colecciones.is-car .cl__arrow{border-color:var(--hair);color:var(--gold-2)}
#colecciones.is-car .cl__arrow svg,#colecciones.is-car .cl__play svg{width:20px;height:20px}
#colecciones.is-car .cl__arrow:active,#colecciones.is-car .cl__play:active{transform:scale(.94)}
#colecciones.is-car .cl__arrow:focus-visible,#colecciones.is-car .cl__play:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
#colecciones .cl__ic-b{display:none;fill:currentColor;stroke-width:1.2}
#colecciones.is-paused .cl__ic-a{display:none}
#colecciones.is-paused .cl__ic-b{display:inline}
#colecciones.is-paused .cl__play{border-color:var(--hair);color:var(--gold-2)}

#colecciones.is-car .cl__stage{padding-inline:0}
#colecciones.is-car .cl__track{list-style:none;margin:0;display:flex;align-items:stretch;gap:var(--cl-gap);overflow-x:auto;overflow-y:hidden;
  padding:4px var(--gut) 8px;scroll-padding-inline:var(--gut);scroll-snap-type:x mandatory;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
#colecciones.is-car .cl__track::-webkit-scrollbar{display:none}
#colecciones.is-car .cl__tomo{flex:0 0 var(--cl-cw);max-width:520px;scroll-snap-align:start;scroll-snap-stop:always;display:flex}
#colecciones.is-car .cl__spine{display:none}
#colecciones.is-car .cl__bookwrap{display:flex;width:100%}
#colecciones.is-car .cl__book{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;align-content:start;padding:0;overflow:hidden;
  border-color:var(--hair);border-radius:20px;background:var(--cl-paper);backdrop-filter:none;-webkit-backdrop-filter:none;transition:border-color .5s}
#colecciones.is-car .cl__tomo.is-act .cl__book{border-color:rgba(244,213,138,.55)}
#colecciones.is-car .cl__page--l{grid-row:1;grid-column:1}
#colecciones.is-car .cl__page--r{display:contents}
/* regla del dueño: en celular el video del tomo se ve completo; el encabezado va debajo, en el panel del índice */
#colecciones.is-car .cl__media{aspect-ratio:4/5;max-height:58svh;min-height:220px;width:100%;border-radius:0}
#colecciones.is-car .cl__frame rect{rx:0}
#colecciones.is-car .cl__meta{grid-row:2;grid-column:1;position:relative;z-index:2;padding:16px 18px 0}
#colecciones.is-car .cl__name{font-size:clamp(1.7rem,7.4vw,2.2rem);margin-top:8px}
#colecciones.is-car .cl__shade{background:linear-gradient(180deg,rgba(5,9,15,0) 80%,rgba(5,9,15,.45) 100%)}
#colecciones.is-car .cl__kick i{background:var(--gold-2);opacity:.7}
@media (max-height:700px){#colecciones.is-car .cl__media{max-height:56svh;min-height:200px}}
#colecciones.is-car .cl__body{grid-row:3;padding:10px 18px 0}
#colecciones.is-car .cl__foot{grid-row:4;align-self:end;padding:6px 18px 18px}
#colecciones.is-car .cl__playv{top:12px;bottom:auto;right:12px;width:44px;height:44px}
#colecciones.is-car .cl__playv svg{width:18px;height:18px}
#colecciones.is-car .cl__more{margin-top:0}
#colecciones.is-car .cl__more>summary{padding:10px 0}
#colecciones.is-car .cl__tt{font-size:.94rem}
/* tarjetas parejas: el título del índice ocupa como mucho 2 líneas (el enlace completo sigue en el texto accesible) */
#colecciones.is-car .cl__list:not(.cl__list--rest) .cl__tt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
#colecciones.is-car .cl__no{font-size:.75rem;min-width:0}
#colecciones.is-car .cl__lnk{gap:10px;padding:9px 0}

#colecciones.is-car .cl__under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 10px;margin:-12px auto 6px}
#colecciones.is-car .cl__dots{margin-left:-18px}
#colecciones.is-car .cl__hint{font-size:.72rem;letter-spacing:.1em}
#colecciones.is-car .cl__dots{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:0}
#colecciones.is-car .cl__dot{width:44px;min-width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
#colecciones.is-car .cl__dot i{position:relative;display:block;width:8px;height:8px;border-radius:8px;background:rgba(243,234,219,.35);overflow:hidden;transition:width .5s var(--ease),background .4s}
#colecciones.is-car .cl__dot i:after{content:"";position:absolute;inset:0;background:var(--gold-2);transform-origin:0 50%;transform:scaleX(var(--cl-p,0))}
#colecciones.is-car .cl__dot.is-on i{width:30px;background:rgba(244,213,138,.3)}
#colecciones.is-car .cl__dot.is-on:not(.is-run) i{background:var(--gold-2)}
#colecciones.is-car .cl__dot:focus-visible{outline:2px solid var(--gold-2);outline-offset:-4px;border-radius:8px}
#colecciones.is-car .cl__hint{display:flex}
#colecciones.is-car .cl__hint-d{display:none}
#colecciones.is-still .cl__play{display:none!important}

#colecciones .cl__hint{align-items:center;gap:10px;margin:0;font:600 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);transition:opacity .8s var(--ease)}
#colecciones .cl__hint svg{width:30px;height:12px;color:var(--gold-2)}
#colecciones.is-hinted.is-car .cl__hint{opacity:0;visibility:hidden}

/* JS de la sección caído: sin controles, rejilla */
#colecciones.is-nojs .cl__ctrl,#colecciones.is-nojs .cl__under{display:none!important}
@media (max-width:420px){
  #colecciones.is-car .cl__body{padding-inline:16px}
  #colecciones.is-car .cl__foot{padding-inline:16px}
  #colecciones.is-car .cl__meta{padding-inline:16px}
}
/* integrador: la cola de la portada ya da aire; se recorta la entrada para que no quede un vacío de ~330px */
#colecciones{padding-top:calc(var(--sec-y)*.55)}