:root{ color-scheme: light dark; }
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.backdrop-blur{ backdrop-filter: blur(10px); }
.mask-gradient{
  -webkit-mask-image:linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0) 60%, #000000 100%);
  mask-image:linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0) 60%, #000000 100%);
}
.mask-gradient{
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,.6) 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0 / 59%) 60%, #0000001f 100%);
}
.nav-wrap{ transition: transform .5s cubic-bezier(.2,.8,.2,1), background-color .3s, height .3s; }
.nav-wrap.shrink{ transform: translateY(-6px); background: rgba(17,24,39,.7) !important }
.nav-brand{ transition: transform .3s; }
.shrink .nav-brand{ transform: scale(.92); }
.magnetic:hover{ transform: translateY(-2px); }
.chip{ border:1px solid rgba(255,255,255,.35); }
.filter-btn.active{ background:#a11b54; color:#fff; } /* brand-600 */


/* ===== Galería expandible con transición SUAVE ===== */
.xp-gallery{
  display:flex; gap:clamp(8px,1.5vw,16px);
  height:clamp(240px,38vh,460px);
  align-items:stretch;
}
.xp-card{
  position:relative;
  /* clave: animamos width en % */
  width:var(--w, 33.333%);
  flex:0 0 auto;
  border-radius: 3px; overflow:hidden; cursor:pointer;
  transition: width .75s cubic-bezier(.22,.61,.36,1), filter .3s ease, box-shadow .3s ease;
  will-change: width, filter;
  outline:none;
}
.xp-card:not(.active){ filter:grayscale(.15) brightness(.9); }
.xp-card.active{ filter:none; box-shadow:0 12px 30px rgba(0,0,0,.25); }

/* imagen */
.xp-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition: transform .75s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.xp-card.active .xp-img{ transform:scale(1.08); }

/* overlay & textos (igual que antes) */
.xp-gradient{ position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.0) 60%); pointer-events:none;
}
.xp-gradient{
    background:
      linear-gradient(to top, rgba(0,0,0,.46), rgba(0,0,0,0) 60%),
      radial-gradient(120% 60% at 0% 100%, rgba(161,27,84,.18), transparent 60%);
  }
.xp-badge{ position:absolute; left:14px; top:14px; display:inline-flex; gap:8px;
  font-size:12px; padding:8px 12px; border-radius:12px;
  background:rgba(255,255,255,.75); color:#0f172a; backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.45);
}
.xp-badge{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.45);
  color: #111; /* legible sobre blanco translúcido */
}
.xp-copy{ position:absolute; left:16px; right:16px; bottom:16px; color:#fff; text-shadow:0 6px 20px rgba(0,0,0,.35); }
.xp-title{ font-weight:800; font-size:clamp(18px,2.4vw,26px); line-height:1.1; }
.xp-desc{ margin-top:6px; font-size:14px; opacity:.92; }

/* foco teclado */
.xp-card:focus-visible{ box-shadow:0 0 0 3px rgba(76,123,255,.55); }

/* Contenedor del texto dentro de cada tarjeta */
.xp-info{
  position:absolute; inset:auto 16px 16px 16px; /* abajo = overlay */
  opacity:0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none; /* no clickeable si está oculto */
}

/* Oculta/enseña con “stagger” por elemento (badge, h3, p, botón…) */
.xp-info > *{
  opacity:0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

/* Cuando la tarjeta está activa (expandida) */
.xp-card.active .xp-info{
  opacity:1; transform: translateY(0);
  pointer-events:auto;
}

/* Stagger suave */
.xp-card.active .xp-info > *:nth-child(1){ opacity:1; transform:none; transition-delay:.05s; }
.xp-card.active .xp-info > *:nth-child(2){ opacity:1; transform:none; transition-delay:.12s; }
.xp-card.active .xp-info > *:nth-child(3){ opacity:1; transform:none; transition-delay:.18s; }
.xp-card.active .xp-info > *:nth-child(4){ opacity:1; transform:none; transition-delay:.24s; }

/* Accesible: si navegan con teclado (focus-visible) también muestra */
.xp-card:focus-visible .xp-info{
  opacity:1; transform: translateY(0); pointer-events:auto;
}
.xp-card:focus-visible .xp-info > *{
  opacity:1; transform:none;
}

.xp-info .xp-copy{
  position: static; /* anula el absolute previo */
  left:auto; right:auto; bottom:auto;
}

.xp-card.active .xp-img{ filter: brightness(.9) saturate(1.05); }

.active-nav:not(.contc)
  {
  background: #722F37 !important;
  color: #fff !important;
  border-radius: 0.2rem;       /* 12px */
  padding: 0.5rem 0.75rem;      /* px-3 py-2 aprox */
}

.contc
  {
  border: 1px solid #797979 !important;
  color: #fff !important;
  border-radius: 0.2rem;       /* 12px */
  padding: 0.5rem 0.75rem;      /* px-3 py-2 aprox */
}

/* Marco con efecto “card fotográfica” del mockup */
.fx-img{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;                 /* para mezclar sin afectar fuera */
  box-shadow:0 18px 48px rgba(0,0,0,.35); /* sombra profunda */
}
/* 1) Luz de canto (highlight diagonal) + micro-ring */
.fx-img::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  /* micro ring sutil */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  /* highlight diagonal arriba-derecha + leve luz superior */
  background:
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,0) 45%) no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,0) 38%) no-repeat;
  mix-blend-mode:soft-light;
}
/* 2) Halo exterior hacia la esquina sup. derecha (color de marca) + 3) Vignette */
.fx-img::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 80% at 92% 8%, rgba(199,51,116,.28), transparent 58%),
    radial-gradient(140% 100% at 50% 120%, rgba(0,0,0,.24), transparent 60%);
  /* el primero es el halo “rosa”, el segundo un vignette suave inferior */
}

/* Imagen interna */
.fx-img > img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter: saturate(1.02) contrast(1.03);   /* punch sutil */
}