/* ===========================
   UESG URBANS – Colecciones & Categorías
   =========================== */

:root{
  --uesg-primary:#111;
  --uesg-accent:#ffd200;      /* Amarillo UESG (detalles) */
  --uesg-corner:#ff8a00;      /* Naranja para “esquinas” en los filtros */
  --uesg-shadow:rgba(0,0,0,.10);

  /* Altura estándar de los cuadros (rectángulos) */
  --tile-height:520px;
}

/* ---------- Títulos ---------- */
.page-header.portfolio-three .theme-heading h1{
  text-transform:uppercase;
  letter-spacing:.08em;
}
.page-header .heading-shape{ letter-spacing:.06em; }

/* =======================================================
   BOTONERA (COLECCIONES / CATEGORÍAS)
   estilo “MISIÓN” con esquinas naranjas
   ======================================================= */
.mixitup-btn{
  display:flex;
  align-items:center;
  justify-content:center;       /* si los quieres a la izquierda: flex-start */
  gap:26px;
  flex-wrap:wrap;
  margin:18px 0 28px;
  text-align:center;
}

/* reset total del “botón blanco” del tema */
.mixitup-btn a{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0;
  color:var(--uesg-primary);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-weight:900;
  font-size:0.98rem;
  line-height:1;
  transition:color .18s ease, transform .12s ease;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  display:inline-block;
}
.mixitup-btn a:hover{ transform:translateY(-1px); }

/* el marco de esquinas va en el span */
.mixitup-btn a > span{
  position:relative;
  display:inline-block;
  padding:4px 12px;
}

/* 8 “rayitas” (dos por esquina) – SOLO en los filtros */
.mixitup-btn a > span::after{
  --w:2px;     /* grosor */
  --len:12px;  /* largo */
  --gap:6px;   /* distancia del marco al texto */

  content:"";
  position:absolute;
  left:calc(-1 * var(--gap));
  right:calc(-1 * var(--gap));
  top:calc(-1 * var(--gap));
  bottom:calc(-1 * var(--gap));
  pointer-events:none;
  opacity:0;                       /* oculto por defecto */
  transition:opacity .15s ease;
  background:
    /* top-left */
    linear-gradient(var(--uesg-corner) 0 0) top left / var(--len) var(--w) no-repeat,
    linear-gradient(var(--uesg-corner) 0 0) top left / var(--w) var(--len) no-repeat,
    /* top-right */
    linear-gradient(var(--uesg-corner) 0 0) top right / var(--len) var(--w) no-repeat,
    linear-gradient(var(--uesg-corner) 0 0) top right / var(--w) var(--len) no-repeat,
    /* bottom-left */
    linear-gradient(var(--uesg-corner) 0 0) bottom left / var(--len) var(--w) no-repeat,
    linear-gradient(var(--uesg-corner) 0 0) bottom left / var(--w) var(--len) no-repeat,
    /* bottom-right */
    linear-gradient(var(--uesg-corner) 0 0) bottom right / var(--len) var(--w) no-repeat,
    linear-gradient(var(--uesg-corner) 0 0) bottom right / var(--w) var(--len) no-repeat;
}

/* activo/hover en filtros */
.mixitup-btn a:hover > span::after,
.mixitup-btn a.active > span::after,
.mixitup-btn a.is-active > span::after{ opacity:1; }

.mixitup-btn a.active,
.mixitup-btn a.is-active{ color:var(--uesg-corner); }

.mixitup-btn a:focus{ outline:none; }
.mixitup-btn a:focus-visible{
  outline:2px dashed var(--uesg-corner);
  outline-offset:4px;
}

@media (max-width:480px){
  .mixitup-btn{ gap:14px; }
  .mixitup-btn a{ font-size:.9rem; letter-spacing:.08em; }
  .mixitup-btn a > span{ padding:3px 9px; }
}

/* =======================================================
   GRID DE PRODUCTOS – RECTÁNGULOS ALTOS (como tu captura)
   ======================================================= */
.mix-default .work-gallery{
  padding:8px;
}

/* plano, sin bordes redondeados ni sombras */
.work-gallery .theme-hover{
  position:relative;
  overflow:hidden;
  border-radius:0 !important;
  background:#fff;
  box-shadow:none !important;
}

/* figura sin aspect-ratio; tomamos altura fija */
.work-gallery figure{
  position:relative;
  margin:0;
  width:100%;
  height:var(--tile-height);           /* altura de los cuadros */
  overflow:hidden;
}

/* MUY IMPORTANTE: NO DIBUJAR esquinas dentro de los cuadros */
.work-gallery figure::after{ content:none !important; }

/* imagen llena el rectángulo */
.work-gallery img{
  position:absolute;
  inset:0;
  width:100%;
  height:100% !important;
  object-fit:cover;
  transition:transform .35s ease;
}

.work-gallery:hover img{ transform:scale(1.03); }

/* overlay fancybox */
.work-gallery figcaption{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .25s ease;
}
.work-gallery:hover figcaption{ opacity:1; }

.work-gallery .content-box i{
  font-size:26px;
  border-radius:50%;
  padding:10px;
  line-height:1;
}

/* Responsivo: baja altura en pantallas pequeñas */
@media (max-width:992px){
  :root{ --tile-height:440px; }
}
@media (max-width:600px){
  :root{ --tile-height:340px; }
}

/* =======================================================
   Breadcrumb & Paginación
   ======================================================= */
.breadcrumb-box .breadcrumb{ background:transparent; margin-bottom:0; }

.pagination ul{
  display:flex;
  gap:8px;
  justify-content:center;
}
.pagination ul li a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  border-radius:8px; border:1px solid #e6e6e6;
  color:#111; transition:background .2s, border-color .2s;
}
.pagination ul li a:hover{ background:#f7f7f7; border-color:#dcdcdc; }

/* Suavizado MixItUp */
.mix{ will-change:transform, opacity; }

/* Texto de soporte bajo títulos */
.theme-heading p{ max-width:800px; margin:8px auto 0; }


/* ====== GRID ====== */
.colecciones-3d{
  --uesg-bg:#111; --uesg-card:#1a1a1a; --uesg-gold:#ffb300; --uesg-gold2:#ff8a00;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px; padding:20px; perspective:1200px;
}

/* ====== CARD BASE ====== */
.card3d{
  position:relative; display:block; height:360px; border-radius:18px; overflow:hidden;
  background:var(--uesg-card); box-shadow:0 15px 35px rgba(0,0,0,.35);
  transform-style:preserve-3d; transform:rotateX(0) rotateY(0); transition:transform .6s ease, box-shadow .6s ease;
  isolation:isolate; text-decoration:none; color:#eaeaea;
}
.card3d:hover{
  transform:rotateX(8deg) rotateY(-10deg) translateY(-4px);
  box-shadow:0 30px 60px rgba(255,179,0,.25), 0 20px 40px rgba(0,0,0,.55);
}

/* Fondo (capa) */
.card3d__layer.bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(.85) contrast(1.05) saturate(1.05);
  transform:translateZ(-30px) scale(1.15); /* profundidad del fondo */
}

/* Brillo diagonal dorado */
.card3d__layer.glow{
  position:absolute; inset:-20%;
  background:conic-gradient(from 210deg at 50% 50%, transparent 0 35%, rgba(255,179,0,.15) 38% 42%, transparent 45% 100%);
  mix-blend-mode:screen; opacity:.5; animation:spin 6s linear infinite;
  transform:translateZ(1px);
}
@keyframes spin { to{ transform:translateZ(1px) rotate(360deg); } }

/* Contenido en 3D */
.card3d__content{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px; background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.0) 60%);
  transform:translateZ(30px);
}

/* Título con degradado dorado */
.card3d__title{
  margin:0 0 8px; font:700 1.35rem/1.1 'Bebas Neue', system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(90deg, var(--uesg-gold), var(--uesg-gold2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 8px rgba(255,138,0,.25));
  transform:translateZ(30px);
}

/* Descripción y CTA con profundidad */
.card3d__desc{ margin:0 0 14px; color:#d7d7d7; line-height:1.45; transform:translateZ(22px); }
.card3d__cta{
  align-self:flex-start; padding:8px 16px; border-radius:28px; font-weight:700; letter-spacing:.02em;
  border:1px solid var(--uesg-gold); color:#111; background:linear-gradient(90deg, var(--uesg-gold), var(--uesg-gold2));
  box-shadow:0 6px 16px rgba(255,179,0,.35); transform:translateZ(40px); transition:transform .3s ease, box-shadow .3s ease;
}
.card3d:hover .card3d__cta{ transform:translateZ(60px) translateY(-2px); box-shadow:0 10px 22px rgba(255,179,0,.55); }

/* Borde activo al hover */
.card3d::before{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,179,0,.0), rgba(255,179,0,.25), rgba(255,138,0,.0));
  opacity:0; transition:opacity .35s ease;
}
.card3d:hover::before{ opacity:1; }

/* Accesibilidad: reducir motion */
@media (prefers-reduced-motion: reduce){
  .card3d, .card3d__layer.glow{ animation:none; transition:none; transform:none; }
}



.colecciones-3d {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
  padding: 40px 0;
  margin: 5px 30px 30px 10px;
}

/* Base de la card */
.card3d {
  position: relative;
  display: block;
  width: 320px;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background: #0e0e0e;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card3d:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(255, 179, 0, 0.4);
}

/* Imagen */
.card3d__layer.bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: brightness(0.85);
}

.card3d:hover .card3d__layer.bg {
  transform: scale(1.08);
  filter: brightness(1);
}

/* Contenido */
.card3d__content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25px;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.9) 90%);
  color: #fff;
}

/* Título */
.card3d__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffb300, #ff8a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

/* Descripción */
.card3d__desc {
  font-size: 0.95rem;
  color: #ccc;
  line-height: 1.4;
  margin-bottom: 15px;
}

/* Botón */
.card3d__cta {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(90deg, #ffb300, #ff8a00);
  border-radius: 25px;
  font-weight: bold;
  color: #111;
  transition: all 0.3s ease;
}

.card3d__cta:hover {
  background: #fff;
  color: #111;
  transform: translateY(-3px);
}