/* ==========================================================================
   MAGNETIK DAY · PÁGINA DE SERVICIOS  (/uslugi, antes propiedades.html)
   --------------------------------------------------------------------------
   Tres niveles, siempre en este orden:
     1 · Categorías  (las 6 fijas, con o sin galerías dentro)
     2 · Galerías de la categoría elegida
     3 · Fotos de una galería + visor
   ========================================================================== */

/* ═══════════════════ BASE ═══════════════════ */
/* Las vistas se ocultan con el atributo hidden, pero una regla con display
   (grid/flex) lo anula. Sin esto el esqueleto de carga y el nivel anterior
   se quedan visibles. */
[hidden]{ display:none !important }

/* ═══════════════════ CABECERA ═══════════════════ */
.gal-hero{ height:440px }
.gal-hero .page-hero__img{ object-position:center 42% }
.gal-hero .page-hero__content h1{ letter-spacing:-.025em }
.gal-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.4rem;
  margin-top:.9rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.86rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-light);
}

/* ═══════════════════ MIGAS DE PAN ═══════════════════ */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  margin-bottom:1.6rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.crumbs button{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:var(--gold);
  cursor:pointer;
  transition:color .25s var(--ease);
}
.crumbs button:hover{ color:var(--gold-light) }
.crumbs__sep{ opacity:.45 }
.crumbs__now{ color:#fff }

/* ═══════════════════ NIVEL 1 · CATEGORÍAS ═══════════════════ */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.8rem;
}

.cat-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--black3);
  box-shadow:var(--shadow);
  overflow:hidden;
  cursor:pointer;
  transform-style:preserve-3d;
  opacity:0;
  animation:cardIn .85s var(--ease) both;
  animation-delay:calc(var(--i, 0) * 90ms);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),
             background .45s var(--ease);
}
.cat-card:hover,
.cat-card:focus-visible{
  border-color:var(--border-gold);
  background:var(--black4);
  box-shadow:var(--shadow-lg);
}
.cat-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

.cat-card__img{
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
  background:var(--purple-deep);
}
.cat-card__img img{
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.72) saturate(.92);
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.cat-card:hover .cat-card__img img{ transform:scale(1.1); filter:brightness(.9) }

.cat-card__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(45,28,72,.25) 0%,
    rgba(45,28,72,.35) 45%,
    rgba(45,28,72,.88) 100%);
  pointer-events:none;
}
/* Barrido de luz */
.cat-card__img::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%);
  transform:translateX(-130%);
  transition:transform .9s var(--ease);
  pointer-events:none;
}
.cat-card:hover .cat-card__img::after{ transform:translateX(130%) }

.cat-card__icon{
  position:absolute;
  left:1.2rem;
  bottom:1.1rem;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border:1px solid var(--border-gold);
  border-radius:50%;
  background:rgba(45,28,72,.55);
  backdrop-filter:blur(8px);
  color:var(--gold);
  transition:transform .5s var(--ease-back),background .4s var(--ease),
             border-color .4s var(--ease),color .4s var(--ease);
}
.cat-card__icon svg{ width:26px; height:26px; display:block }
.cat-card:hover .cat-card__icon{
  transform:translateY(-4px) rotate(-8deg) scale(1.08);
  background:var(--gold);
  border-color:var(--gold);
  color:#3a2a0c;
}

.cat-card__soon{
  position:absolute;
  top:1rem; right:1rem;
  z-index:2;
  padding:.3rem .85rem;
  border-radius:var(--radius-pill);
  background:rgba(45,28,72,.7);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(8px);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.cat-card__body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.3rem 1.4rem 1.4rem;
}
.cat-card__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.005em;
  color:#fff;
  margin-bottom:.25rem;
}
.cat-card__meta{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.cat-card__arrow{
  flex-shrink:0;
  font-size:1.5rem;
  line-height:1;
  color:var(--gold);
  transition:transform .45s var(--ease);
}
.cat-card:hover .cat-card__arrow{ transform:translateX(6px) }

/* ═══════════════════ NIVEL 2 · GALERÍAS ═══════════════════ */
.ev-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
  gap:2.2rem;
}

.ev-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--black3);
  box-shadow:var(--shadow);
  overflow:hidden;
  cursor:pointer;
  transform-style:preserve-3d;
  opacity:0;
  animation:cardIn .85s var(--ease) both;
  animation-delay:calc(var(--i, 0) * 90ms);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),
             background .45s var(--ease);
}
.ev-card:hover{
  border-color:var(--border-gold);
  background:var(--black4);
  box-shadow:var(--shadow-lg);
}
.ev-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

.ev-card__cover{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--purple-deep);
}
.ev-card__cover img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease),filter .6s var(--ease);
  filter:brightness(.9);
}
.ev-card:hover .ev-card__cover img{ transform:scale(1.09); filter:brightness(1) }
.ev-card__cover::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
  pointer-events:none;
}
.ev-card:hover .ev-card__cover::after{ transform:translateX(120%) }

.ev-card__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(45,28,72,.05) 0%,rgba(45,28,72,.15) 55%,rgba(45,28,72,.72) 100%);
  pointer-events:none;
}
.ev-card__count{
  position:absolute;
  top:1rem; right:1rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.34rem .85rem;
  border-radius:var(--radius-pill);
  background:rgba(45,28,72,.72);
  border:1px solid var(--border-gold);
  backdrop-filter:blur(8px);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--gold-light);
}
.ev-card__zoom{
  position:absolute;
  left:50%; top:50%;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:62px; height:62px;
  margin:-31px 0 0 -31px;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:50%;
  background:rgba(45,28,72,.35);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  opacity:0;
  transform:scale(.6);
  transition:opacity .4s var(--ease),transform .5s var(--ease-back);
}
.ev-card:hover .ev-card__zoom{ opacity:1; transform:scale(1) }

.ev-card__body{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding:1.4rem 1.4rem 1.5rem;
}
.ev-card__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.005em;
  color:#fff;
}
.ev-card__tipo{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
.ev-card__strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.4rem;
  margin-top:.2rem;
}
.ev-card__strip span{
  display:block;
  aspect-ratio:1;
  border-radius:6px;
  overflow:hidden;
  background:var(--purple-deep);
}
.ev-card__strip img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.75;
  transition:opacity .35s var(--ease),transform .5s var(--ease);
}
.ev-card:hover .ev-card__strip img{ opacity:1 }
.ev-card__strip span:nth-child(1) img{ transition-delay:0ms }
.ev-card__strip span:nth-child(2) img{ transition-delay:40ms }
.ev-card__strip span:nth-child(3) img{ transition-delay:80ms }
.ev-card__strip span:nth-child(4) img{ transition-delay:120ms }
.ev-card__strip span:hover img{ transform:scale(1.15) }
.ev-card__more{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--text-muted);
}

/* ═══════════════════ NIVEL 3 · GALERÍA ═══════════════════ */
/* Al cambiar de nivel se hace scrollIntoView: sin este margen el título y la
   barra quedan escondidos bajo el menú fijo. */
#gal-head{ scroll-margin-top:calc(var(--nav-h) + 26px) }

/* ═══════════════════ NIVEL 2 · FICHA DEL SERVICIO ═══════════════════ */
/* Orden pedido: descripción del servicio (qué incluye + personalización)
   → fotos del proyecto → botón «Escríbenos por Viber».
   El texto y los botones de contacto salen SIEMPRE, aunque la categoría
   todavía no tenga fotos subidas.                                          */
.svc-intro{
  position:relative;
  margin-bottom:2.6rem;
  padding:2.4rem 2.2rem;
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(232,199,102,.10),rgba(115,96,242,.10));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.svc-intro::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:3px;
  background:linear-gradient(90deg,var(--gold),#8b7cff,transparent);
}
.svc-intro__eyebrow{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.7rem;
}
.svc-intro__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.8rem,3.4vw,2.5rem);
  font-weight:700;
  line-height:1.2;
  color:#fff;
  margin-bottom:1.1rem;
}
.svc-intro__text{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.24rem;
  line-height:1.9;
  color:rgba(255,255,255,.9);
}
.svc-intro__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:2rem;
  padding-top:1.7rem;
  border-top:1px solid var(--border);
}

/* Título sobre la rejilla de fotos */
.svc-photos__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.svc-photos__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.45rem;
  font-weight:700;
  color:#fff;
}
.svc-photos__count{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.95rem;
  letter-spacing:.06em;
  color:var(--text-muted);
}

/* Cierre de la categoría: recordatorio del contacto por Viber */
.svc-outro{
  margin-top:2.8rem;
  padding:2.2rem 1.8rem;
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg);
  background:rgba(115,96,242,.13);
  text-align:center;
}
.svc-outro__title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.6rem;
}
.svc-outro__text{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.12rem;
  line-height:1.8;
  color:var(--text-muted);
  max-width:620px;
  margin:0 auto;
}
.svc-outro__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  justify-content:center;
  margin-top:1.5rem;
}


.gal-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-bottom:2.2rem;
}
.gal-toolbar__info{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.95rem;
  letter-spacing:.08em;
  color:var(--text-muted);
}
.gal-toolbar__info strong{ color:var(--gold); font-weight:700 }

.gal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));
  gap:1rem;
}
.gal-item{
  position:relative;
  aspect-ratio:1;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--purple-deep);
  cursor:pointer;
  opacity:0;
  animation:cardIn .7s var(--ease) both;
  animation-delay:calc(var(--i, 0) * 45ms);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),
             transform .5s var(--ease);
}
.gal-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease);
}
.gal-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(45,28,72,.55) 100%);
  opacity:0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.gal-item__n{
  position:absolute;
  left:.8rem; bottom:.7rem;
  z-index:2;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--gold-light);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.gal-item:hover{
  border-color:var(--gold);
  box-shadow:var(--shadow-lg),0 0 0 1px var(--border-gold);
  transform:translateY(-5px);
}
.gal-item:hover img{ transform:scale(1.1) }
.gal-item:hover::after{ opacity:1 }
.gal-item:hover .gal-item__n{ opacity:1; transform:translateY(0) }

/* Mosaico: solo cuando hay fotos suficientes para que no queden huecos */
.gal-grid--mosaic .gal-item:nth-child(11n + 1){ grid-column:span 2; grid-row:span 2 }
.gal-grid--mosaic .gal-item:nth-child(11n + 7){ grid-row:span 2 }

/* ═══════════════════ ESTADO VACÍO DE UN NIVEL ═══════════════════ */
.nivel-vacio{
  padding:4rem 2rem;
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05);
  text-align:center;
  animation:viewIn .5s var(--ease) both;
}
.nivel-vacio__icon{ font-size:2.6rem; margin-bottom:1rem }
.nivel-vacio h3{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.6rem;
}
.nivel-vacio p{
  max-width:520px;
  margin:0 auto 1.8rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.1rem;
  line-height:1.85;
  color:var(--text-muted);
}

/* ═══════════════════ VISOR ═══════════════════ */
.lb{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:1.5rem;
  background:rgba(30,18,52,.94);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease);
}
.lb.is-open{ opacity:1; pointer-events:auto }
.lb__figure{
  position:relative;
  max-width:min(1200px,92vw);
  max-height:78vh;
  transform:scale(.94);
  opacity:0;
  transition:transform .5s var(--ease),opacity .4s var(--ease);
}
.lb.is-open .lb__figure{ transform:scale(1); opacity:1 }
.lb__img{
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transition:opacity .25s var(--ease);
}
.lb__img.is-swapping{ opacity:0 }
.lb__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  border:1px solid var(--border-gold);
  border-radius:50%;
  background:rgba(58,42,90,.6);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease),
             border-color .3s var(--ease);
}
.lb__btn:hover{ background:var(--gold); color:#3a2a0c; border-color:var(--gold) }
.lb__btn--prev{ left:-1.5rem }
.lb__btn--next{ right:-1.5rem }
.lb__btn--prev:hover{ transform:translateY(-50%) translateX(-4px) }
.lb__btn--next:hover{ transform:translateY(-50%) translateX(4px) }
.lb__close{
  position:absolute;
  top:1.5rem; right:1.5rem;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px; height:50px;
  border:1px solid var(--border-gold);
  border-radius:50%;
  background:rgba(58,42,90,.6);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.lb__close:hover{ background:var(--gold); color:#3a2a0c; transform:rotate(90deg) }
.lb__bar{
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin-top:1.4rem;
  font-family:'Cormorant Garamond',Georgia,serif;
  color:rgba(255,255,255,.85);
}
.lb__counter{ font-size:1rem; letter-spacing:.16em }
.lb__counter strong{ color:var(--gold); font-weight:700 }
.lb__thumbs{
  display:flex;
  gap:.45rem;
  max-width:min(90vw,900px);
  padding:.4rem;
  overflow-x:auto;
  scrollbar-width:none;
}
.lb__thumbs::-webkit-scrollbar{ display:none }
.lb__thumb{
  flex:0 0 auto;
  width:56px; height:56px;
  padding:0;
  border:1.5px solid transparent;
  border-radius:8px;
  overflow:hidden;
  background:none;
  opacity:.5;
  cursor:pointer;
  transition:opacity .3s var(--ease),border-color .3s var(--ease),
             transform .3s var(--ease);
}
.lb__thumb img{ width:100%; height:100%; object-fit:cover }
.lb__thumb:hover{ opacity:.85; transform:translateY(-2px) }
.lb__thumb.is-active{ opacity:1; border-color:var(--gold); transform:translateY(-3px) }

/* ═══════════════════ CARGA ═══════════════════ */
.gal-skeleton{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.8rem;
}
.gal-skeleton span{
  display:block;
  aspect-ratio:16/11;
  border-radius:var(--radius-lg);
  background:linear-gradient(100deg,
    rgba(255,255,255,.06) 30%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.06) 70%);
  background-size:220% 100%;
  animation:shine 1.4s linear infinite;
}

/* ═══════════════════ TRANSICIÓN ENTRE NIVELES ═══════════════════ */
.view-in{ animation:viewIn .55s var(--ease) both }

/* ═══════════════════ ANIMACIONES ═══════════════════ */
@keyframes cardIn{
  0%   { opacity:0; transform:translateY(34px) rotateX(-14deg) scale(.96) }
  60%  { opacity:1 }
  100% { opacity:1; transform:translateY(0) rotateX(0deg) scale(1) }
}
@keyframes viewIn{
  from { opacity:0; transform:translateY(18px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes shine{
  from { background-position:120% 0 }
  to   { background-position:-120% 0 }
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:1100px){
  .cat-grid{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:900px){
  .gal-hero{ height:340px }
  .ev-grid{ grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:1.8rem }
  .gal-grid{ grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)); gap:.8rem }
  .gal-skeleton{ grid-template-columns:repeat(2,1fr) }
  .lb__btn--prev{ left:.4rem }
  .lb__btn--next{ right:.4rem }
  .lb__btn{ width:46px; height:46px; font-size:1.4rem }
  .svc-intro{ padding:1.9rem 1.5rem }
}

@media (max-width:640px){
  .gal-hero{ height:300px }
  .cat-grid{ grid-template-columns:1fr; gap:1.2rem }
  .ev-grid{ grid-template-columns:1fr }
  .gal-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.6rem }
  .gal-skeleton{ grid-template-columns:1fr }
  .gal-grid--mosaic .gal-item:nth-child(11n + 1),
  .gal-grid--mosaic .gal-item:nth-child(11n + 7){ grid-column:auto; grid-row:auto }
  .ev-card__strip{ display:none }
  .gal-toolbar{ flex-direction:column; align-items:flex-start; gap:.8rem }
  .lb__thumbs{ display:none }
  /* El cierre de categoría: «Пишете ни във Viber» + icono no cabía en una
     línea (necesitaba 255 px en un hueco de 208 px), así que se partía en
     dos y el botón quedaba con 78 px de alto. Menos relleno en la tarjeta y
     en los botones, y estos pasan a ocupar todo el ancho en una sola línea. */
  .svc-outro{ padding:2rem 1.2rem }
  .svc-outro__actions .btn{
    flex:1 1 100%;
    padding:.85rem .5rem;
    font-size:.78rem;
    letter-spacing:.08em;
  }
}

@media (prefers-reduced-motion: reduce){
  .cat-card,
  .ev-card,
  .gal-item{ opacity:1 !important; animation:none !important }
  .gal-skeleton span{ animation:none !important }
}