/* ============================================================
   BRANDING v2 — tres casos con libro de marca
   Usa solo los tokens de style.css (--ink, --cream, --lime, --s*, --t-*).
   Los colores de cada cliente viven dentro de su caso (logo, paleta,
   punto de la marca), nunca en la identidad de Cultivana.
   ============================================================ */

/* ---------- índice de casos (suelo crema) ---------- */
.bidx{background:var(--cream);color:var(--ink);padding:var(--s14) 0 var(--s15)}
.bidx__note{margin-top:var(--s5);color:rgba(20,20,20,.5);font-size:var(--t-xs)}
.bidx__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s12)}
.bidx__a{display:flex;flex-direction:column;gap:var(--s3);transition:transform .6s var(--ease)}
.bidx__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;
  background:#d9d6cc;box-shadow:0 1px 0 rgba(20,20,20,.08)}
.bidx__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .6s var(--ease),transform 1s var(--ease)}
.bidx__hov{opacity:0;transform:scale(1.06)}
.bidx__a:hover .bidx__hov,.bidx__a:focus-visible .bidx__hov{opacity:1;transform:scale(1)}
.bidx__k{display:flex;align-items:center;gap:8px;color:rgba(20,20,20,.55);font-size:var(--t-2xs)}
.bidx__k i,.bsw__a i{width:9px;height:9px;border-radius:50%;background:var(--dot);flex:none;
  box-shadow:0 0 0 1px rgba(20,20,20,.18)}
.bidx__n{font-family:veneer,Impact,sans-serif;font-weight:400;font-size:var(--t-3xl);line-height:.95}
.bidx__a:focus-visible{outline:2px solid var(--lime-ink);outline-offset:6px;border-radius:4px}
@media (max-width:1100px){.bidx__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .bidx__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s4)}
  .bidx__a:first-child{grid-column:1/-1}
}

/* ---------- rasgado oscuro antes de los casos ---------- */
/* El PNG negro es #070707 y el caso de abajo es --ink (#141414): se veía una franja.
   Aquí el PNG solo da la forma (máscara) y el color es el mismo --ink del caso. */
.tear--dark{background:var(--ink);
  -webkit-mask:url("assets/brand/black-div.png") no-repeat center bottom/100% 100%;
  mask:url("assets/brand/black-div.png") no-repeat center bottom/100% 100%}

/* ---------- barra de marcas pegada arriba ---------- */
/* .bcases no lleva position: si fuera "relative" su fondo tapa el rasgado de abajo */
/* fondo sólido: con transparencia + blur, la barra chupaba el crema de arriba del rasgado
   y salía más clara que el caso de abajo */
.bsw{position:sticky;top:var(--navh,58px);z-index:60;background:var(--ink);
  border-bottom:1px solid rgba(241,239,232,.1)}
.bsw__in{max-width:var(--maxw);margin-inline:auto;padding:10px var(--pad);
  display:flex;align-items:center;gap:var(--s5)}
.bsw__lbl{color:rgba(241,239,232,.4);font-size:var(--t-2xs)}
.bsw__list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
          mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.bsw__list::-webkit-scrollbar{display:none}
.bsw__a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;
  padding:9px 14px;min-height:38px;border-radius:100px;font-size:var(--t-2xs);
  color:rgba(241,239,232,.72);border:1px solid rgba(241,239,232,.16);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.bsw__a:hover{color:var(--cream);border-color:rgba(241,239,232,.45)}
.bsw__a[aria-current="true"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.bsw__a i{box-shadow:0 0 0 1px rgba(241,239,232,.35)}
.bsw__cta{flex:none;padding:9px 16px;min-height:38px;display:inline-flex;align-items:center;gap:6px;
  border-radius:100px;background:var(--lime);color:var(--ink);font-size:var(--t-2xs);
  transition:background .4s var(--ease)}
.bsw__cta:hover{background:var(--cream)}
@media (max-width:760px){
  .bsw__lbl{display:none}
  .bsw__in{padding:8px 12px;gap:8px}
  .bsw__a{padding:8px 12px}
  .bsw__cta{padding:8px 12px}
}

/* ---------- un caso ---------- */
.bc{padding:var(--s14) 0 var(--s15);scroll-margin-top:calc(var(--navh,58px) + 40px)}
.bc--light{background:var(--cream);color:var(--ink);--line:rgba(20,20,20,.16);--soft:rgba(20,20,20,.55);--card:#fff}
.bc--dark{background:var(--ink);color:var(--cream);--line:rgba(241,239,232,.14);--soft:rgba(241,239,232,.55);--card:#1d1d1d}
.bc--dark .eyebrow{color:rgba(241,239,232,.55);border-color:rgba(241,239,232,.18)}
.bc--dark .eyebrow span{color:var(--lime)}
.bc__head .eyebrow{margin-bottom:var(--s8)}
.bc__head .eyebrow::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--dot);
  margin-left:auto;box-shadow:0 0 0 1px var(--line)}
.bc__lead{margin-top:var(--s6);max-width:48ch;font-size:var(--t-lead);line-height:1.4;color:var(--soft)}
.bc__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:var(--s8);
  margin-top:var(--s11);align-items:start}
.bc__side{display:grid;gap:var(--s6);position:sticky;top:calc(var(--navh,58px) + 76px);margin-top:var(--bvoff,66px)}
.bc__h{display:block;font-size:var(--t-xs);color:var(--soft);padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);margin:0 0 var(--s5)}
.bc__h small{font-size:inherit;opacity:.7}
.bc__link{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:10px 16px;
  border-radius:100px;border:1px solid var(--line);font-size:var(--t-xs);
  transition:background .4s var(--ease),color .4s var(--ease)}
.bc__link:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.bc__row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s9);margin-top:var(--s12)}
@media (max-width:1000px){
  .bc__main{grid-template-columns:1fr}
  .bc__side{position:static;grid-template-columns:minmax(0,1fr);margin-top:0}
  .bc__row{grid-template-columns:1fr;gap:var(--s10)}
}

/* ---------- visor del libro ---------- */
.bv{min-width:0}
.bv__top{display:flex;align-items:center;gap:var(--s5);font-size:var(--t-xs);color:var(--soft);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s4)}
.bv__n{display:flex;align-items:baseline;gap:4px;margin-left:auto;min-width:0}
.bv__n b{color:inherit;font-weight:700}
.bc--dark .bv__n b{color:var(--lime)} .bc--light .bv__n b{color:var(--lime-ink)}
.bv__t{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch}
.bv__full{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);
  color:inherit;font:inherit;letter-spacing:inherit;border-radius:100px;padding:7px 12px;min-height:36px;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease)}
.bv__full svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.bv__full:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.bv__stage{position:relative}
.bv__track{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;border-radius:6px;overscroll-behavior-x:contain;
  background:var(--card);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.bv__track::-webkit-scrollbar{display:none}
.bv__track:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.bv__pg{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;aspect-ratio:16/9}
.bv__pg img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.bv__arr{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(20,20,20,.72);color:var(--cream);font-size:20px;
  display:grid;place-items:center;opacity:0;transition:opacity .35s var(--ease),background .35s var(--ease)}
.bv__arr--prev{left:12px}.bv__arr--next{right:12px}
.bv__stage:hover .bv__arr,.bv__arr:focus-visible{opacity:1}
.bv__arr:hover{background:var(--lime);color:var(--ink)}
.bv__arr:disabled{opacity:0!important;pointer-events:none}
.bv__hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);pointer-events:none;
  background:rgba(20,20,20,.72);color:var(--cream);font-size:var(--t-2xs);padding:6px 12px;border-radius:100px;
  transition:opacity .6s var(--ease)}
.bv.is-used .bv__hint{opacity:0}
@media (hover:none){.bv__arr{opacity:1;width:40px;height:40px;font-size:16px}}
.bv__thumbs{display:flex;gap:8px;margin-top:var(--s4);overflow-x:auto;padding:4px 2px 8px;
  scrollbar-width:thin;scroll-snap-type:x proximity}
.bv__th{position:relative;flex:0 0 clamp(78px,8.5vw,118px);aspect-ratio:16/9;padding:0;border:0;
  border-radius:4px;overflow:hidden;cursor:pointer;background:var(--card);scroll-snap-align:start;
  opacity:.5;outline:2px solid transparent;outline-offset:2px;transition:opacity .3s var(--ease),outline-color .3s var(--ease)}
.bv__th img{width:100%;height:100%;object-fit:cover}
.bv__th span{position:absolute;left:4px;bottom:3px;font-size:9px;letter-spacing:.08em;
  background:rgba(20,20,20,.7);color:var(--cream);padding:1px 4px;border-radius:2px}
.bv__th:hover{opacity:.85}
.bv__th[aria-current="true"]{opacity:1;outline-color:var(--dot)}
.bc--dark .bv__th[aria-current="true"]{outline-color:var(--cream)}
.bc--light .bv__th[aria-current="true"]{outline-color:var(--ink)}
.bv__th:focus-visible{outline-color:var(--lime);opacity:1}

/* pantalla completa (API nativa o, si no hay, capa fija) */
.bv.is-full{position:fixed;inset:0;z-index:9500;background:#0d0d0d;color:var(--cream);
  padding:clamp(12px,2.4vw,32px);display:flex;flex-direction:column;--line:rgba(241,239,232,.16);--soft:rgba(241,239,232,.6);--card:#0d0d0d}
.bv:fullscreen{background:#0d0d0d;color:var(--cream);padding:clamp(12px,2.4vw,32px);display:flex;flex-direction:column;
  --line:rgba(241,239,232,.16);--soft:rgba(241,239,232,.6);--card:#0d0d0d}
.bv.is-full .bv__stage,.bv:fullscreen .bv__stage{flex:1;min-height:0;display:flex}
.bv.is-full .bv__track,.bv:fullscreen .bv__track{flex:1;box-shadow:none}
.bv.is-full .bv__pg,.bv:fullscreen .bv__pg{aspect-ratio:auto;height:100%}
.bv.is-full .bv__n b,.bv:fullscreen .bv__n b{color:var(--lime)}
.bv.is-full .bv__th[aria-current="true"],.bv:fullscreen .bv__th[aria-current="true"]{outline-color:var(--cream)}
.bv.is-full .bv__arr,.bv:fullscreen .bv__arr{opacity:1}

/* ---------- logo en claro / oscuro ---------- */
.blab{margin:0;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.blab__stage{position:relative;aspect-ratio:4/3;background:var(--lab-claro);
  transition:background-color .7s var(--ease)}
.blab[data-mode="oscuro"] .blab__stage{background:var(--lab-oscuro)}
.blab__img{position:absolute;inset:14% 12%;width:76%;height:72%;object-fit:contain;
  transition:opacity .6s var(--ease),transform .7s var(--ease)}
.blab__img--oscuro{opacity:0;transform:scale(.96)}
.blab[data-mode="oscuro"] .blab__img--claro{opacity:0;transform:scale(.96)}
.blab[data-mode="oscuro"] .blab__img--oscuro{opacity:1;transform:none}
.blab__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:12px;background:var(--card)}
.blab__sw{display:inline-flex;padding:3px;border-radius:100px;border:1px solid var(--line)}
.blab__sw button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:inherit;
  font-size:var(--t-2xs);padding:8px 12px;min-height:36px;border-radius:100px;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease)}
.blab__sw button i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px rgba(127,127,127,.5)}
.blab__sw button[aria-pressed="true"]{background:var(--lime);color:var(--ink)}
.blab__cap{font-size:var(--t-2xs);color:var(--soft)}

/* ---------- paleta: toca para copiar ---------- */
.bpal__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.sw{display:flex;flex-direction:column;align-items:stretch;width:100%;padding:0;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:var(--card);color:inherit;text-align:left;cursor:copy;font:inherit;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.sw:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(0,0,0,.5)}
.sw:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.sw__chip{position:relative;display:grid;place-items:center;height:clamp(84px,9vw,128px);background:var(--c);
  transition:height .5s var(--ease)}
.sw:hover .sw__chip{height:clamp(96px,10vw,142px)}
.sw--edge .sw__chip{box-shadow:inset 0 -1px 0 var(--line)}
.sw__ok{color:var(--fg);font-size:var(--t-2xs);opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sw.is-copied .sw__ok{opacity:1;transform:none}
.sw__meta{display:grid;gap:2px;padding:10px 12px 12px}
/* Safari le pone align-items:flex-start a los botones: sin esto el color no llena la tarjeta */
.sw__chip,.sw__meta{width:100%;align-self:stretch}
.sw__meta b{font-weight:650;font-size:var(--t-base)}
.sw__hex{font-size:var(--t-xs);letter-spacing:.08em}
.sw__meta small{font-size:var(--t-2xs);color:var(--soft);line-height:1.35}

/* ---------- tipografía ---------- */
.btype__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tf{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:var(--s5);
  padding:12px 0;border-bottom:1px solid var(--line)}
.tf__box{display:grid;place-items:center;width:62px;height:52px;border-radius:4px;background:var(--card);
  border:1px solid var(--line)}
.tf__aa{font-size:28px;line-height:1}
.tf__aa--file svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;opacity:.5}
.tf__n{display:grid;gap:2px;min-width:0}
.tf__n b{font-weight:600;font-size:var(--t-base)}
.tf__n small{font-size:var(--t-2xs);color:var(--soft);letter-spacing:.1em}
.tf__go{border:1px solid var(--line);background:none;color:inherit;border-radius:100px;cursor:pointer;
  padding:7px 11px;min-height:34px;font-size:var(--t-2xs);white-space:nowrap;
  transition:background .4s var(--ease),color .4s var(--ease)}
.tf__go:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}

/* ---------- aplicaciones ---------- */
.bapps{margin-top:var(--s12)}
.bapps__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4)}
.bapp{margin:0;grid-column:span 2;cursor:zoom-in;position:relative;border-radius:6px;overflow:hidden;
  background:var(--card);outline-offset:3px}
.bapps__grid[data-n="4"] .bapp,
.bapps__grid[data-n="5"] .bapp:nth-child(-n+2){grid-column:span 3}
.bapp__img{display:block;aspect-ratio:4/3;overflow:hidden}
.bapp__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.bapp--contain .bapp__img{background:#f4f2ec}
.bapp--contain .bapp__img img{object-fit:contain;padding:6%}
.bapp:hover .bapp__img img,.bapp:focus-visible .bapp__img img{transform:scale(1.05)}
.bapp figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:3px;padding:28px 14px 12px;
  color:var(--cream);background:linear-gradient(transparent,rgba(10,10,10,.82));
  transform:translateY(calc(100% - 52px));transition:transform .5s var(--ease)}
.bapp figcaption b{font-weight:600;font-size:var(--t-base);line-height:1.2}
.bapp figcaption .mono{font-size:var(--t-2xs);color:var(--lime);letter-spacing:.1em;opacity:0;
  transition:opacity .4s var(--ease)}
.bapp:hover figcaption,.bapp:focus-visible figcaption{transform:none}
.bapp:hover figcaption .mono,.bapp:focus-visible figcaption .mono{opacity:1}
.bapp:focus-visible{outline:2px solid var(--lime)}
/* en pantallas táctiles la etiqueta siempre se ve */
@media (hover:none){
  .bapp figcaption{transform:none}
  .bapp figcaption .mono{opacity:1}
}
@media (max-width:900px){
  .bapps__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bapps__grid[data-n] .bapp:nth-child(n){grid-column:span 1}
  .bapps__grid[data-n="5"] .bapp:nth-child(1){grid-column:1/-1}
}
@media (max-width:520px){
  .bapps__grid{gap:10px}
  .bapp figcaption{padding:22px 10px 9px}
  .bapp figcaption b{font-size:var(--t-sm)}
}

/* ---------- lo que trae un libro ---------- */
.binc{background:var(--cream);color:var(--ink);padding:var(--s14) 0 var(--s12)}
.binc__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s10);
  margin-top:var(--s11);align-items:start}
.binc__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(20,20,20,.18)}
.binc__i{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:var(--s5);row-gap:4px;
  padding:var(--s5) var(--s3);border-bottom:1px solid rgba(20,20,20,.18);cursor:default;
  transition:background .4s var(--ease),padding .4s var(--ease)}
.binc__k{grid-row:span 2;color:var(--lime-ink);padding-top:6px}
.binc__i b{font-family:veneer,Impact,sans-serif;font-weight:400;font-size:var(--t-4xl);line-height:1}
.binc__d{color:rgba(20,20,20,.62);font-size:var(--t-base)}
.binc__i.is-on{background:var(--ink);color:var(--cream);padding-left:var(--s6)}
.binc__i.is-on .binc__d{color:rgba(241,239,232,.7)}
.binc__i.is-on .binc__k{color:var(--lime)}
.binc__img{display:none}
.binc__peek{position:sticky;top:calc(var(--navh,58px) + 30px);aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:#e2dfd6;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.binc__peek img{width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.binc__peek img.is-swap{opacity:0}
@media (max-width:900px){
  .binc__wrap{grid-template-columns:1fr}
  .binc__peek{display:none}
  .binc__img{display:block;grid-column:2;width:100%;max-width:420px;height:auto;aspect-ratio:16/9;object-fit:cover;
    border-radius:4px;margin-top:var(--s3)}
  .binc__i.is-on{padding-left:var(--s3);background:none;color:inherit}
  .binc__i.is-on .binc__d{color:rgba(20,20,20,.62)}
  .binc__i.is-on .binc__k{color:var(--lime-ink)}
}

/* la región que anuncia "copiado" a los lectores de pantalla */
.bcopy-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- entradas: el mismo lenguaje que el resto del sitio ----------
   app.js le pone .is-in a cada .reveal cuando entra en pantalla.
   branding-casos.js reparte el turno de cada pieza (--d) y lo quita
   cuando ya entró, para que el hover responda enseguida. */

/* índice: el bloque no se mueve, entran las tres tarjetas una detrás de otra.
   Se usa "translate" porque "transform" lo usa el tilt de las tarjetas. */
.bidx__grid.reveal{opacity:1;transform:none}
.bidx__grid.reveal .bidx__a{opacity:0;translate:0 34px;
  transition:opacity .8s var(--ease) calc(var(--d,0) * 90ms),translate .9s var(--ease) calc(var(--d,0) * 90ms),transform .5s var(--ease)}
.bidx__grid.reveal.is-in .bidx__a{opacity:1;translate:none}
.bidx__cue{margin-top:var(--s10)}

/* aplicaciones: cada foto entra con la cortina de las fotos del portafolio */
.bc--dark{--curtain:var(--ink)}
.bc--light{--curtain:var(--cream)}
.bapps__grid.reveal{opacity:1;transform:none}
.bapps__grid.reveal .bapp{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease) calc(var(--d,0) * 90ms),transform .9s var(--ease) calc(var(--d,0) * 90ms)}
.bapps__grid.reveal.is-in .bapp{opacity:1;transform:none}
.bapp__img{position:relative}
.bapps__grid.reveal .bapp__img::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--curtain,var(--cream));transform-origin:bottom;transform:scaleY(1);
  transition:transform 1s var(--ease) calc(var(--d,0) * 90ms + 120ms)}
.bapps__grid.reveal.is-in .bapp__img::before{transform:scaleY(0)}
.bapps__grid.reveal .bapp__img img{transform:scale(1.06);
  transition:transform 1.3s var(--ease) calc(var(--d,0) * 90ms + 120ms)}
.bapps__grid.reveal.is-in .bapp__img img{transform:scale(1)}
.bapps__grid.reveal.is-in .bapp:hover .bapp__img img,
.bapps__grid.reveal.is-in .bapp:focus-visible .bapp__img img{transform:scale(1.05)}

/* paleta, tipografía y "lo que trae": las piezas salen en fila */
.bpal.reveal .bpal__list>li,
.btype.reveal .btype__list>li{opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease) calc(var(--d,0) * 60ms + 150ms),transform .6s var(--ease) calc(var(--d,0) * 60ms + 150ms)}
.bpal.reveal.is-in .bpal__list>li,
.btype.reveal.is-in .btype__list>li{opacity:1;transform:none}
.binc__list.reveal .binc__i{opacity:0;transform:translateY(14px);
  transition:background .4s var(--ease),padding .4s var(--ease),
    opacity .7s var(--ease) calc(var(--d,0) * 70ms + 120ms),transform .7s var(--ease) calc(var(--d,0) * 70ms + 120ms)}
.binc__list.reveal.is-in .binc__i{opacity:1;transform:none}

/* ya entró: el hover de las fotos responde sin esperar turno */
.bapps__grid.reveal.is-done .bapp__img img{transition:transform 1.1s var(--ease)}
.bapps__grid.reveal.is-done .bapp__img::before{display:none}

/* el visor en pantalla completa nunca se queda a medio entrar */
.bv.is-full{opacity:1;transform:none}

/* ---------- reducir movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .bv__track{scroll-behavior:auto}
  .bidx__img img,.blab__img,.blab__stage,.sw,.sw__chip,.bapp__img img,.bapp figcaption,.binc__i,.binc__peek img{transition:none}
  .bidx__hov{transform:none}
  .sw:hover{transform:none}
  .bapp:hover .bapp__img img{transform:none}
  .bapps__grid.reveal.is-in .bapp:hover .bapp__img img,
  .bapps__grid.reveal.is-in .bapp:focus-visible .bapp__img img{transform:scale(1)}
}

/* ---------- móvil ---------- */
@media (max-width:600px){
  .bc{padding:var(--s13) 0 var(--s14)}
  .bv__t{max-width:14ch}
  .bv__full span{display:none}
  .bv__lbl{display:none}
  .bv__n{margin-left:0}
  .bv__full{margin-left:auto}
  .bv__hint{display:none}
  .bpal__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tf{grid-template-columns:48px minmax(0,1fr) auto;gap:12px}
  .tf__box{width:48px;height:44px}
  .tf__aa{font-size:22px}
}