/* /maxi-01/ — galería de láminas. Carrusel con snap, arrastre nativo y visor.
   Pensado primero para celular: a pantalla completa, con la siguiente lámina
   asomando. No toca variables globales ni la sección protegida. */

.laminas{position:relative; overflow:hidden; padding:6px 0 clamp(40px,5vw,64px)}
.laminas__head{display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:6px}
.laminas__kicker{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-3); font-weight:600; margin:0}
.laminas__arrows{display:none; gap:10px; margin-left:auto}
.laminas__arrow{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--txt);
  display:grid; place-items:center; transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.laminas__arrow:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); transform:translateY(-1px)}
.laminas__arrow:disabled{opacity:.3; cursor:default; transform:none}
.laminas__arrow svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}

.laminas__rail{
  display:flex; gap:16px; margin-top:18px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-block:10px;
  /* a pantalla completa en celular, alineado al wrap en escritorio */
  margin-inline:calc(50% - 50vw);
  padding-inline:max(22px, calc(50vw - var(--maxw)/2));
}
.laminas__rail::-webkit-scrollbar{display:none}
.laminas__rail:focus-visible{outline:2px solid var(--blue-2); outline-offset:4px}

.lam{margin:0; flex:0 0 auto; scroll-snap-align:center; width:min(82vw,300px)}
.lam__btn{
  display:block; width:100%; padding:0; cursor:zoom-in; background:none;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.lam__btn img{width:100%; height:auto; aspect-ratio:760/1009; object-fit:cover; display:block}
.lam__btn:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.3);
  box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 44px rgba(59,130,246,.3)}
.lam__btn:focus-visible{outline:2px solid var(--blue-2); outline-offset:4px}

/* la lámina centrada crece; las vecinas se atenúan */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .lam{
      animation:enfoque linear both;
      animation-timeline:view(x);
      animation-range:entry 12% exit 88%;
    }
    @keyframes enfoque{
      0%,100%{opacity:.5; transform:scale(.9)}
      45%,55%{opacity:1; transform:scale(1)}
    }
  }
}

.laminas__foot{display:flex; align-items:center; gap:16px; margin-top:20px}
/* El punto mide 7 px pero el botón que lo contiene mide 24×24: el objetivo
   táctil cumple el mínimo de WCAG 2.5.8 sin que el diseño del punto cambie. */
.laminas__dots{display:flex; gap:0}
.laminas__dot{
  width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.laminas__dot::before{
  content:""; width:7px; height:7px; border-radius:100px;
  background:rgba(255,255,255,.22); transition:width .4s var(--ease), background .4s;
}
.laminas__dot[aria-current="true"]::before{width:26px; background:var(--blue-2)}
.laminas__hint{font-size:12.5px; color:var(--txt-3); margin-left:auto}

/* ---------- visor ---------- */
.visor{
  border:0; padding:0; background:transparent; max-width:100vw; max-height:100dvh;
  width:100%; height:100%; overflow:hidden;
}
.visor::backdrop{background:rgba(4,6,10,.92); backdrop-filter:blur(6px)}
.visor__inner{position:relative; width:100%; height:100%; display:grid; place-items:center; padding:16px}
.visor__img{
  max-width:min(92vw,560px); max-height:86dvh; width:auto; height:auto;
  border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.7);
  animation:visorIn .4s var(--ease) both;
}
@keyframes visorIn{from{opacity:0; transform:scale(.94)}to{opacity:1; transform:none}}
.visor__close,.visor__nav{
  position:absolute; width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff;
  display:grid; place-items:center; transition:background .3s}
.visor__close:hover,.visor__nav:hover{background:rgba(255,255,255,.2)}
.visor__close{top:14px; right:14px}
.visor__nav svg,.visor__close svg{width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.visor__nav--prev{left:14px; top:50%; margin-top:-23px}
.visor__nav--next{right:14px; top:50%; margin-top:-23px}
.visor__cap{position:absolute; left:0; right:0; bottom:16px; text-align:center;
  font-size:12.5px; color:rgba(255,255,255,.65); padding:0 70px}

/* en celular los controles del visor bajan para no tapar la lámina */
@media(max-width:700px){
  .visor__nav--prev{left:calc(50% - 88px); top:auto; bottom:14px; margin-top:0}
  .visor__nav--next{right:calc(50% - 88px); top:auto; bottom:14px; margin-top:0}
  .visor__cap{bottom:78px; padding:0}
  .visor__img{max-height:76dvh}
}
@media(min-width:900px){
  .laminas__arrows{display:flex}
  .lam{width:288px}
  .laminas__hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lam__btn,.laminas__arrow,.laminas__dot,.laminas__dot::before{transition:none}
  .visor__img{animation:none}
}