/* Cinta de fotos del inicio y rejilla de espacios.
   Sólo se anima `transform`, en capas propias: el desfile no repinta nada. */

.vitrina{position:relative; overflow:hidden; padding:clamp(56px,7vw,88px) 0 clamp(48px,6vw,72px)}
.vitrina__head{margin-bottom:30px}
.vitrina__fila{overflow:hidden; padding:7px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vitrina__pista{
  display:flex; gap:14px; width:max-content; padding-right:16px;
  animation:desfile 52s linear infinite; will-change:transform;
}
.vitrina__fila--rev .vitrina__pista{animation-duration:64s; animation-direction:reverse}
@keyframes desfile{ to { transform:translate3d(-50%,0,0) } }

.vitrina:hover .vitrina__pista,
.vitrina:focus-within .vitrina__pista{animation-play-state:paused}

.vit{margin:0; flex:0 0 auto; width:min(52vw,260px)}
.vit img{
  width:100%; height:auto; aspect-ratio:760/1009; object-fit:cover;
  border-radius:18px; border:1px solid var(--line);
  box-shadow:0 16px 44px rgba(0,0,0,.42);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.vit img:hover{
  transform:translateY(-4px) scale(1.015);
  border-color:color-mix(in srgb, var(--t1,#63a5ff) 55%, transparent);
  box-shadow:0 24px 62px rgba(0,0,0,.55),
             0 0 44px color-mix(in srgb, var(--t1,#63a5ff) 26%, transparent);
}

/* --- espacios --- */
.espacios__grid{display:grid; gap:18px; margin-top:44px; list-style:none; padding:0}
.esp{
  border:1px solid var(--line-soft); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s var(--ease);
}
.esp:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--t1,#63a5ff) 48%, transparent);
  box-shadow:0 20px 54px rgba(0,0,0,.45),
             0 0 40px color-mix(in srgb, var(--t1,#63a5ff) 20%, transparent);
}
.esp img{width:100%; height:auto; aspect-ratio:1; object-fit:cover}
.esp div{padding:20px 22px 24px}
.esp h3{font-size:19px; margin-bottom:8px}
.esp p{color:var(--txt-2); font-size:14.5px}

@media(min-width:700px){ .espacios__grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .espacios__grid{grid-template-columns:repeat(4,1fr); gap:20px} }

@media (prefers-reduced-motion:reduce){
  .vitrina__pista{animation:none}
  .vit img,.esp{transition:none}
}

/* --- carrusel de guías del inicio --- */
.gcar{overflow:hidden}
.gcar__head{display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap}
.gcar__arrows{display:none; gap:10px; margin-left:auto}
@media(min-width:900px){ .gcar__arrows{display:flex} }

.gcar__rail{
  display:flex; gap:18px; margin-top:38px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding-block:8px;
  margin-inline:calc(50% - 50vw);
  padding-inline:max(22px, calc(50vw - var(--maxw)/2));
}
.gcar__rail::-webkit-scrollbar{display:none}
.gcar__rail:focus-visible{outline:2px solid var(--blue-2); outline-offset:4px}

.gcard{flex:0 0 auto; width:min(82vw,340px); scroll-snap-align:start}
.gcard a{
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--line-soft); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s var(--ease);
}
.gcard a:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--t1,#63a5ff) 52%, transparent);
  box-shadow:0 22px 56px rgba(0,0,0,.5),
             0 0 40px color-mix(in srgb, var(--t1,#63a5ff) 22%, transparent);
}
.gcard__img{overflow:hidden; background:var(--bg-3)}
.gcard__img img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s var(--ease)}
.gcard a:hover .gcard__img img{transform:scale(1.05)}
.gcard__body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1}
.gcard__kicker{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-2); font-weight:700}
.gcard h3{font-size:19px; line-height:1.2; letter-spacing:-.02em}
.gcard__body p{color:var(--txt-2); font-size:14.5px; flex:1}
.gcard__mas{font-size:13.5px; color:var(--txt-3); transition:color .35s}
.gcard a:hover .gcard__mas{color:var(--blue-2)}
.gcard--hub a{
  background:linear-gradient(160deg, color-mix(in srgb, var(--t1,#63a5ff) 16%, transparent), transparent 70%);
  justify-content:center;
}
.gcard--hub .gcard__body{padding:30px 24px}
.gcar__foot{margin-top:30px}

@media (prefers-reduced-motion:reduce){
  .gcard a,.gcard__img img{transition:none}
}

/* flechas del carrusel de guías: el inicio no carga la hoja de /maxi-01/ */
.gcar__arrows button{
  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), opacity .3s;
}
.gcar__arrows button:hover{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.28); transform:translateY(-1px)}
.gcar__arrows button:disabled{opacity:.3; cursor:default; transform:none}
.gcar__arrows svg{width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}