/* ==========================================================================
   experiencias.css — Módulo "Experiencias": vitrina de recorridos y demos.
   Página oscura (petróleo). Reusa los tokens de variables.css. Scope .exp /
   html.page-experiencias para no tocar otras páginas. Reveal vía .reveal
   (animations.css) + initReveal(). CSP-safe (sin inline, capturas 'self').
   ========================================================================== */

html.page-experiencias,
html.page-experiencias body { background: var(--c-ink-900); }

.exp {
  background: var(--g-hero);
  padding: clamp(110px, 16vh, 168px) var(--gutter) clamp(64px, 9vh, 104px);
}
.exp-wrap { max-width: var(--container); margin-inline: auto; }

/* ----- Encabezado ----- */
.exp-hero { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 6vw, 68px); }
.exp-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--font-sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--c-teal-200);
}
.exp-kicker::before { content: ""; width: 28px; height: 1px; background: var(--c-teal-200); }
.exp-title {
  margin: 0; font-family: var(--font-serif); font-weight: 600; color: var(--c-on-dark);
  font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.01em;
}
.exp-lead { margin: 22px auto 0; max-width: 640px; color: var(--c-on-dark-soft); font-size: var(--fs-lead); line-height: 1.6; }
.exp-lead strong { color: var(--c-on-dark); font-weight: 600; }

/* ----- Vitrina (grid de tarjetas) ----- */
.exp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 32px); }
.exp-grid__item { min-width: 0; }
.exp-grid__item--feat { grid-column: 1 / -1; }   /* la destacada ocupa todo el ancho */

.exp-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  text-decoration: none; color: inherit; border-radius: var(--r-lg);
  background: var(--g-card); border: 1px solid rgba(127, 208, 204, .14);
  box-shadow: var(--sh-card);
  transition: transform var(--t-acc), border-color var(--t-acc), box-shadow var(--t-acc);
}
a.exp-card:hover, a.exp-card:focus-visible {
  transform: translateY(-5px); border-color: rgba(127, 208, 204, .5);
  box-shadow: var(--sh-card-strong), 0 0 0 1px rgba(127, 208, 204, .25);
}
a.exp-card:focus-visible { outline: 2px solid var(--c-teal-200); outline-offset: 3px; }

/* Media + badge de tipo */
.exp-card__media { position: relative; overflow: hidden; background: #0b1a24; aspect-ratio: 16 / 10; }
.exp-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s var(--t-acc); }
a.exp-card:hover .exp-card__media img { transform: scale(1.035); }
.exp-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(12,27,38,.55)); pointer-events: none; }
.exp-card__type {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  font: 700 .68rem var(--font-sans); letter-spacing: .04em; color: #06262a;
  background: var(--c-teal-200); border-radius: var(--r-pill); padding: 5px 12px;
}

/* Cuerpo */
.exp-card__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 30px); flex: 1; }
.exp-card__product { margin: 0; font: 700 .72rem var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--c-teal-200); }
.exp-card__title { margin: 0; font-family: var(--font-serif); font-weight: 600; color: var(--c-on-dark); font-size: var(--fs-h3); line-height: 1.12; }
.exp-card__desc { margin: 0; color: var(--c-on-dark-mut); font-size: var(--fs-sm); line-height: 1.6; }
.exp-card__points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.exp-card__points li {
  font-size: .76rem; color: var(--c-on-dark-soft); background: rgba(127, 208, 204, .08);
  border: 1px solid rgba(127, 208, 204, .2); border-radius: var(--r-pill); padding: 4px 11px;
}
.exp-card__cta { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-teal-200); font-size: .92rem; }
.exp-card__arrow { transition: transform var(--t-acc); }
a.exp-card:hover .exp-card__arrow { transform: translateX(4px); }

/* Tarjeta destacada: media | cuerpo lado a lado en desktop */
@media (min-width: 760px) {
  .exp-card--feat { display: grid; grid-template-columns: 1.05fr .95fr; }
  .exp-card--feat .exp-card__media { aspect-ratio: auto; height: 100%; min-height: 340px; }
  .exp-card--feat .exp-card__body { padding: clamp(28px, 3vw, 48px); gap: 14px; justify-content: center; }
  .exp-card--feat .exp-card__title { font-size: var(--fs-h2); }
  .exp-card--feat .exp-card__desc { font-size: var(--fs-body); max-width: 46ch; }
}

/* Tarjeta "próximamente" (sin enlace) */
.exp-card--soon { opacity: .72; cursor: default; }
.exp-card--soon .exp-card__type { background: rgba(127, 208, 204, .18); color: var(--c-teal-200); border: 1px solid rgba(127,208,204,.3); }
.exp-card--soon .exp-card__cta { color: var(--c-on-dark-faint); }

/* ----- Teaser "hay más en camino" ----- */
.exp-more { margin: clamp(40px, 6vw, 72px) auto 0; max-width: 680px; text-align: center; padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-lg); border: 1px solid rgba(127, 208, 204, .16); background: linear-gradient(150deg, rgba(127,208,204,.06), rgba(12,27,38,.3)); }
.exp-more__t { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--c-on-dark); }
.exp-more__d { margin: 10px 0 0; color: var(--c-on-dark-mut); font-size: var(--fs-sm); }
.exp-more__cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ----- Botones del módulo ----- */
.exp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px;
  border-radius: var(--r-pill); font: 700 .92rem var(--font-sans); text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.exp-btn--teal { background: var(--g-teal); color: #fff; box-shadow: var(--sh-cta); }
.exp-btn--teal:hover { transform: translateY(-2px); }
.exp-btn--ghost { background: transparent; color: var(--c-on-dark); border: 1px solid rgba(127, 208, 204, .4); }
.exp-btn--ghost:hover { border-color: var(--c-teal-200); background: rgba(127, 208, 204, .08); }
.exp-btn:focus-visible { outline: 2px solid var(--c-teal-200); outline-offset: 3px; }

/* ----- Responsive ----- */
@media (max-width: 760px) {
  .exp-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Experience Center (F1) — filtros, tiles con ícono, badges, grid ampliada.
   Solo tokens de variables.css. Los filtros son JS progresivo: sin JS se
   ocultan y las cards se ven todas (html.no-js).
   ========================================================================== */

/* Utilidad: oculto visualmente, presente para lectores de pantalla */
.xp-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----- Mini-métricas del hero ----- */
.xp-stats {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
}
.xp-stats li { font: 500 .9rem var(--font-sans); color: var(--c-on-dark-mut); }
.xp-stats li strong { color: var(--c-teal-200); font-weight: 700; }

/* ----- Barra de filtros ----- */
html.no-js .xp-filtros-sec { display: none; }
.xp-filtros-sec { margin: 0 0 clamp(28px, 4vw, 44px); }
.xp-filtros {
  display: grid; gap: 16px; padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--r-lg); border: 1px solid rgba(127, 208, 204, .16);
  background: linear-gradient(150deg, rgba(127, 208, 204, .05), rgba(12, 27, 38, .35));
}
.xp-fgrupo { display: grid; gap: 8px; }
.xp-flabel {
  margin: 0; font: 700 .7rem var(--font-sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-teal-200);
}
.xp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px;
  border-radius: var(--r-pill); cursor: pointer;
  font: 600 .82rem var(--font-sans); letter-spacing: .01em;
  color: var(--c-on-dark-soft); background: transparent;
  border: 1px solid rgba(127, 208, 204, .25);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.xp-chip:hover { border-color: rgba(127, 208, 204, .55); color: var(--c-on-dark); }
.xp-chip[aria-pressed="true"] { background: var(--c-teal-200); border-color: var(--c-teal-200); color: #06262a; }
.xp-chip:focus-visible { outline: 2px solid var(--c-teal-200); outline-offset: 3px; }
.xp-count { margin: 2px 0 0; font: 500 .82rem var(--font-sans); color: var(--c-on-dark-faint); }

/* ----- Grid ampliada (hasta 3 columnas con catálogo completo) ----- */
@media (min-width: 1080px) {
  .xp-grid { grid-template-columns: repeat(3, 1fr); }
}
.exp-grid__item[hidden] { display: none; }

/* ----- Card: enlace estirado + hover/focus sin <a> envolvente ----- */
.xp-card { position: relative; }
.xp-card__link { color: inherit; text-decoration: none; }
.xp-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.xp-card:not(.exp-card--soon):hover,
.xp-card:focus-within {
  transform: translateY(-5px); border-color: rgba(127, 208, 204, .5);
  box-shadow: var(--sh-card-strong), 0 0 0 1px rgba(127, 208, 204, .25);
}
.xp-card:focus-within { outline: 2px solid var(--c-teal-200); outline-offset: 3px; }
.xp-card .xp-card__link:focus-visible { outline: none; } /* el anillo lo pone la card */
.xp-card:not(.exp-card--soon):hover .exp-card__arrow { transform: translateX(4px); }

/* ----- Tile de ícono (media sin captura; F2 trae los webp) ----- */
.xp-tile { display: grid; place-items: center; }
.xp-tile::after { content: none; } /* sin veil: el tile ya es oscuro */
.xp-tile__icon {
  display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%;
  color: var(--c-teal-200); background: rgba(12, 27, 38, .4);
  border: 1px solid rgba(127, 208, 204, .28);
}
.exp-card--feat .xp-tile__icon { width: 96px; height: 96px; }
/* Glow por familia de solución (solo colores de marca) */
.xp-tile { background-image: radial-gradient(85% 95% at 72% 18%, var(--xp-glow, rgba(28,122,130,.4)), transparent 62%), var(--g-card); }
.xp-tile--crm,
.xp-tile--dashboard-reportes   { --xp-glow: rgba(47, 140, 147, .42); }  /* ventas/teal */
.xp-tile--diagnostico-360,
.xp-tile--erp-pyme             { --xp-glow: rgba(61, 110, 146, .42); }  /* tecnología/azul */
.xp-tile--agenda-online,
.xp-tile--menu-qr-pedidos      { --xp-glow: rgba(94, 158, 126, .42); }  /* finanzas/verde */
.xp-tile--automatizaciones-ia,
.xp-tile--website-corporativo,
.xp-tile--landing-conversion,
.xp-tile--documentos-marca     { --xp-glow: rgba(28, 122, 130, .5); }   /* teal marca */

/* ----- Badges sobre el tile ----- */
.xp-badges {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px);
}
.xp-badge {
  font: 700 .66rem var(--font-sans); letter-spacing: .04em;
  border-radius: var(--r-pill); padding: 5px 11px;
  background: var(--c-teal-200); color: #06262a;
}
.xp-badge--recomendado  { background: var(--c-cream); color: var(--c-ink); }
.xp-badge--sandbox      { background: var(--c-tec-ink); color: #fff; }
.xp-badge--producto     { background: transparent; color: var(--c-teal-200); border: 1px solid rgba(127, 208, 204, .45); }
.xp-badge--proximamente { background: var(--c-ink-900); color: var(--c-teal-200); border: 1px solid rgba(127, 208, 204, .45); }

/* Card "pronto" accesible (AA, hallazgo revisión F1): NO atenuar el texto — la
   card completa mantiene opacidad 1 (anula el .72 heredado de .exp-card--soon);
   lo "apagado" se comunica con borde discontinuo + ícono atenuado (decorativo). */
.xp-card.exp-card--soon { opacity: 1; border-style: dashed; }
.xp-card.exp-card--soon .xp-tile__icon { opacity: .6; }
.xp-card.exp-card--soon .exp-card__cta { color: var(--c-on-dark-soft); }

/* ----- Textos nuevos de la card ----- */
.xp-tagline { margin: -4px 0 0; font: 600 .92rem var(--font-sans); color: var(--c-on-dark-soft); }
.xp-hint { margin: 6px 0 0; font: 500 .74rem var(--font-sans); color: var(--c-on-dark-faint); }

/* La destacada mantiene su layout lado a lado; su tile llena el alto */
@media (min-width: 760px) {
  .exp-card--feat .xp-tile { min-height: 340px; }
}

/* ==========================================================================
   Experience Center (F2) — pie de card con "Quiero esto" + Teatro (D-03).
   ========================================================================== */

/* ----- Pie de card: CTA primario + atribución secundaria ----- */
.xp-card__foot {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.xp-card__foot .exp-card__cta { margin-top: 0; padding-top: 0; }
.xp-card__quiero {
  position: relative; z-index: 2; /* clickeable por sobre el enlace estirado */
  flex: none; font: 700 .8rem var(--font-sans); text-decoration: none;
  color: var(--c-on-dark-soft); border: 1px solid rgba(127, 208, 204, .3);
  border-radius: var(--r-pill); padding: 7px 13px; min-height: 34px;
  display: inline-flex; align-items: center;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.xp-card__quiero:hover { color: var(--c-on-dark); border-color: var(--c-teal-200); background: rgba(127, 208, 204, .08); }
.xp-card__quiero:focus-visible { outline: 2px solid var(--c-teal-200); outline-offset: 3px; }

/* ----- Teatro: <dialog> a pantalla completa con banda Tríada ----- */
html.xp-teatro-abierto, html.xp-teatro-abierto body { overflow: hidden; }
.xp-teatro {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--c-ink-900); color: var(--c-on-dark);
  display: none; flex-direction: column;
}
.xp-teatro[open] { display: flex; }
.xp-teatro::backdrop { background: rgba(6, 15, 20, .82); }
.xp-teatro__band {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 8px clamp(14px, 3vw, 26px);
  background: var(--c-ink-950); border-bottom: 1px solid rgba(127, 208, 204, .22);
}
.xp-teatro__title { margin: 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.xp-teatro__kicker {
  flex: none; font: 700 .66rem var(--font-sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-teal-200);
}
.xp-teatro__nombre {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; color: var(--c-on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xp-teatro__acts { flex: none; display: flex; align-items: center; gap: 10px; }
.xp-teatro__quiero {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 16px;
  border-radius: var(--r-pill); font: 700 .82rem var(--font-sans); text-decoration: none;
  background: var(--g-teal); color: #fff; box-shadow: var(--sh-cta);
  transition: transform var(--t-fast);
}
.xp-teatro__quiero:hover { transform: translateY(-1px); }
.xp-teatro__ext {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 12px;
  border-radius: var(--r-pill); font: 600 .8rem var(--font-sans); text-decoration: none;
  color: var(--c-on-dark-soft); border: 1px solid rgba(127, 208, 204, .3);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.xp-teatro__ext:hover { color: var(--c-on-dark); border-color: var(--c-teal-200); }
.xp-teatro__close {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; cursor: pointer; color: var(--c-on-dark);
  background: transparent; border: 1px solid rgba(127, 208, 204, .3);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.xp-teatro__close:hover { border-color: var(--c-teal-200); background: rgba(127, 208, 204, .1); }
.xp-teatro__quiero:focus-visible, .xp-teatro__ext:focus-visible, .xp-teatro__close:focus-visible {
  outline: 2px solid var(--c-teal-200); outline-offset: 3px;
}
.xp-teatro__cuerpo { flex: 1; display: flex; min-height: 0; }
.xp-teatro__frame { flex: 1; width: 100%; min-width: 0; border: 0; background: #0b1a24; }

/* Banda del teatro en móvil: "Abrir aparte" queda solo como ícono */
@media (max-width: 560px) {
  .xp-teatro__ext span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .xp-teatro__kicker { display: none; }
}

/* ----- Tour guiado (F4, D-07): panel narrativo junto a la demo ----- */
/* Escudo [hidden]: los display de estas clases (flex/inline-flex) le ganarían
   a la regla UA de [hidden]; sin esto, el CTA final y "Seguir el tour" se ven
   desde el paso 1. */
.xp-teatro [hidden] { display: none !important; }
.xp-tour {
  flex: none; width: min(340px, 36vw); display: flex; flex-direction: column; gap: 12px;
  padding: clamp(16px, 2.4vw, 26px); overflow-y: auto;
  background: var(--c-ink-950); border-right: 1px solid rgba(127, 208, 204, .18);
}
.xp-tour__vivo { display: flex; flex-direction: column; gap: 10px; }
.xp-tour__meta { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.xp-tour__kicker {
  font: 700 .64rem var(--font-sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-teal-200);
}
.xp-tour__pos { font: 600 .74rem var(--font-sans); color: var(--c-on-dark-soft); }
.xp-tour__titulo {
  margin: 0; font-family: var(--font-serif); font-weight: 600;
  font-size: 1.32rem; line-height: 1.22; color: var(--c-on-dark);
}
.xp-tour__texto { margin: 0; font-size: .93rem; line-height: 1.58; color: var(--c-on-dark-soft); }
.xp-tour__hint {
  margin: 0; padding: 10px 13px; border-radius: 10px;
  font-size: .86rem; line-height: 1.5; color: var(--c-on-dark);
  background: rgba(127, 208, 204, .1); border: 1px solid rgba(127, 208, 204, .25);
}
.xp-tour__cta {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 10px 16px; border-radius: var(--r-pill); text-decoration: none;
  font: 700 .92rem var(--font-sans); background: var(--g-teal); color: #fff;
  box-shadow: var(--sh-cta); transition: transform var(--t-fast);
}
.xp-tour__cta:hover { transform: translateY(-1px); }
.xp-tour__nav { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xp-tour__btn {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px;
  border-radius: var(--r-pill); cursor: pointer; font: 600 .8rem var(--font-sans);
  color: var(--c-on-dark-soft); background: transparent; border: 1px solid rgba(127, 208, 204, .3);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.xp-tour__btn:hover:not(:disabled) { color: var(--c-on-dark); border-color: var(--c-teal-200); }
.xp-tour__btn:disabled { opacity: .35; cursor: default; }
.xp-tour__btn--next { background: var(--g-teal); color: #fff; border: 0; font-weight: 700; }
.xp-tour__btn--next:hover { color: #fff; }
.xp-tour__dots { display: flex; gap: 6px; }
.xp-tour__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(127, 208, 204, .25); }
.xp-tour__dot.is-on { background: var(--c-teal-200); }
.xp-tour__libre {
  align-self: center; padding: 4px 6px; cursor: pointer;
  font: 600 .78rem var(--font-sans); color: var(--c-on-dark-soft);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px;
}
.xp-tour__libre:hover { color: var(--c-on-dark); }
.xp-tour__btn:focus-visible, .xp-tour__cta:focus-visible, .xp-tour__libre:focus-visible {
  outline: 2px solid var(--c-teal-200); outline-offset: 3px;
}

/* Tour en móvil: la demo arriba, la guía abajo (compacta y con scroll propio) */
@media (max-width: 760px) {
  .xp-teatro__cuerpo { flex-direction: column-reverse; }
  .xp-tour {
    width: 100%; max-height: 42dvh; gap: 10px; padding: 14px 16px 16px;
    border-right: 0; border-top: 1px solid rgba(127, 208, 204, .18);
  }
  .xp-tour__titulo { font-size: 1.12rem; }
  .xp-tour__texto { font-size: .88rem; }
  .xp-tour__nav { margin-top: 2px; }
}

/* ==========================================================================
   F6 · «PULSO» — coreografía del hub (contrato: EXPERIENCE-CENTER-MOTION.md).
   Un solo easing (--t-acc, el maestro medido de los reels). Solo transform/
   opacity (+ stroke-dashoffset en SVG). Sin JS todo queda visible; el estado
   final SIEMPRE es el estilo de reposo (inmune a pestañas congeladas).
   ========================================================================== */

/* ── ENTRADA · cascada de cards (experiencias.js pone .is-in y --xp-d) ── */
html:not(.no-js) .exp-grid__item {
  opacity: 0; transform: translateY(34px) scale(.97);
  transition: opacity .65s var(--t-acc), transform .65s var(--t-acc);
  transition-delay: var(--xp-d, 0s);
}
html:not(.no-js) .exp-grid__item.is-in { opacity: 1; transform: none; }
/* micro-asentamiento de la captura al entrar (animation one-shot: no pisa el hover) */
html:not(.no-js) .exp-grid__item.is-in .exp-card__media img { animation: xpAsentar .7s var(--t-acc); }
@keyframes xpAsentar { from { transform: scale(1.06); } to { transform: scale(1); } }
/* destello de bienvenida: el filo barre la card una vez al entrar */
html:not(.no-js) .exp-grid__item.is-in .xp-card::before { animation: xpFiloWelcome .9s var(--t-acc) .12s; }
@keyframes xpFiloWelcome {
  0% { opacity: 0; transform: translateX(-101%); }
  45% { opacity: .85; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

/* ── RESPUESTA · el "encendido" (LA FIRMA: los 3 colores del isotipo) ── */
.xp-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, #3D6E92, #2F8C93, #6BA083);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.xp-card:not(.exp-card--soon):hover, .xp-card:focus-within { transform: translateY(-7px); border-color: rgba(127, 208, 204, .75); }
.xp-card:not(.exp-card--soon):hover::before, .xp-card:focus-within::before {
  opacity: 1;
  /* el filo respira SOLO mientras la mano está encima (Respuesta sostenida) */
  animation: xpFiloVivo 2.4s ease-in-out .35s infinite alternate;
}
@keyframes xpFiloVivo { from { filter: brightness(1); } to { filter: brightness(1.4); } }
.xp-card:not(.exp-card--soon):hover .exp-card__media img { transform: scale(1.05); }
.xp-card:not(.exp-card--soon):hover .exp-card__arrow { transform: translateX(6px); }
.xp-card:not(.exp-card--soon):active { transform: translateY(-7px) scale(.985); }
.xp-stats strong { font-variant-numeric: tabular-nums; } /* contadores sin salto de layout */

/* ── TRASPASO · crossfade al filtrar (coreografía en experiencias.js) ── */
html:not(.no-js) .exp-grid__item.is-out { opacity: 0; transition: opacity .14s ease; transition-delay: 0s; }
html:not(.no-js) .exp-grid__item.is-new { opacity: 0; transform: translateY(8px); transition: none; }
html:not(.no-js) .exp-grid__item.is-new.is-in2 {
  opacity: 1; transform: none;
  transition: opacity .22s var(--t-acc), transform .22s var(--t-acc); /* delay: inline por lote */
}

/* ── TRASPASO · el teatro nace de la card (transform-origin lo fija el JS).
   @starting-style: navegadores sin soporte abren sin animación (fallback ok). ── */
.xp-teatro[open] {
  opacity: 1; transform: none;
  transition: opacity .28s var(--t-acc), transform .28s var(--t-acc);
}
@starting-style { .xp-teatro[open] { opacity: 0; transform: scale(.92) translateY(12px); } }
.xp-teatro.is-closing { opacity: 0; transform: scale(.96) translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.xp-teatro[open]::backdrop { opacity: 1; transition: opacity .24s ease; }
@starting-style { .xp-teatro[open]::backdrop { opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .xp-teatro::backdrop { backdrop-filter: blur(4px); } /* solo desktop: el móvil no paga el blur */
}
/* la banda se arma escalonada al abrir (el escenario se enciende) */
.xp-teatro[open] .xp-teatro__title,
.xp-teatro[open] .xp-teatro__acts > * { opacity: 1; transform: none; transition: opacity .3s var(--t-acc), transform .3s var(--t-acc); }
.xp-teatro[open] .xp-teatro__acts > :nth-child(1) { transition-delay: .06s; }
.xp-teatro[open] .xp-teatro__acts > :nth-child(2) { transition-delay: .12s; }
.xp-teatro[open] .xp-teatro__acts > :nth-child(3) { transition-delay: .18s; }
.xp-teatro[open] .xp-teatro__acts > :nth-child(4) { transition-delay: .24s; }
@starting-style {
  .xp-teatro[open] .xp-teatro__title,
  .xp-teatro[open] .xp-teatro__acts > * { opacity: 0; transform: translateY(-6px); }
}

/* ── TRASPASO · skeleton del iframe: el isotipo se traza mientras carga (R1) ── */
.xp-teatro__stage { position: relative; flex: 1; display: flex; min-width: 0; }
.xp-teatro__skel {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  background: #0b1a24;
}
.xp-teatro__skel svg { width: 92px; height: 92px; }
.xp-teatro__skel path {
  stroke-dasharray: 90; stroke-dashoffset: 90; opacity: .75;
  animation: xpTrace 3.6s var(--t-acc) infinite; /* trazo + pulso + reposo largo */
}
.xp-teatro__skel path:nth-child(2) { animation-delay: .12s; }
.xp-teatro__skel path:nth-child(3) { animation-delay: .24s; }
@keyframes xpTrace {
  0% { stroke-dashoffset: 90; opacity: .75; }
  17% { stroke-dashoffset: 0; opacity: .75; }
  24% { opacity: 1; } 34% { opacity: .8; }
  55% { stroke-dashoffset: 0; }
  70% { stroke-dashoffset: -90; } 100% { stroke-dashoffset: -90; }
}
.xp-teatro__skel p {
  position: absolute; padding-top: 148px; margin: 0;
  font: 600 .72rem var(--font-sans); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.xp-teatro__skel p::after { content: '…'; animation: xpDots 1.4s ease-in-out infinite; }
@keyframes xpDots { 0%, 15% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0; } }
/* la demo se revela al terminar de cargar (load del iframe → .is-cargado) */
html:not(.no-js) .xp-teatro__frame { opacity: 0; transform: scale(1.01); transition: opacity .4s ease, transform .55s var(--t-acc); }
html:not(.no-js) .xp-teatro__frame.is-cargado { opacity: 1; transform: none; }

/* ── TRASPASO · tour: crossfade del paso + CTA final que aparece una vez ── */
html:not(.no-js) .xp-tour__vivo.is-cambio { animation: xpPaso .2s var(--t-acc); }
html:not(.no-js) .xp-tour__cta:not([hidden]) { animation: xpPaso .24s var(--t-acc); }
@keyframes xpPaso { from { opacity: 0; transform: translateY(6px); } }

/* ── Reduced-motion, capa 2: ESTADOS FINALES explícitos (la capa 1 global de
   animations.css mata animation/transition; esto garantiza lo LEGIBLE). ── */
@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .exp-grid__item { opacity: 1; transform: none; transition: none; }
  html:not(.no-js) .exp-grid__item.is-out,
  html:not(.no-js) .exp-grid__item.is-new { opacity: 1; transform: none; }
  .xp-card::before { transition: none; animation: none; }
  .xp-teatro[open], .xp-teatro[open] .xp-teatro__title,
  .xp-teatro[open] .xp-teatro__acts > * { opacity: 1; transform: none; transition: none; }
  .xp-teatro__skel path { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; animation: none; }
  .xp-teatro__skel p::after { animation: none; opacity: 1; }
  html:not(.no-js) .xp-teatro__frame { opacity: 1; transform: none; transition: none; }
  html:not(.no-js) .xp-tour__vivo.is-cambio, html:not(.no-js) .xp-tour__cta:not([hidden]) { animation: none; }
}

/* ==========================================================================
   P2 · Catálogo en móvil: hero compacto + filtros densos → el usuario llega a
   los productos ~45% antes (medido: primer producto 1390px → 767px @375px).
   Los chips pasan a una fila con scroll horizontal (con fade que sugiere "hay
   más") en vez de envolverse en muchas líneas; nada se pierde. Solo <=760px;
   el escritorio queda igual.
   ========================================================================== */
@media (max-width: 760px) {
  .exp { padding-top: clamp(84px, 22vw, 104px); padding-bottom: 52px; }
  .exp-hero { margin-bottom: 22px; }
  .exp-kicker { margin-bottom: 10px; }
  .exp-title { font-size: clamp(2rem, 8vw, 2.6rem); }
  .exp-lead { margin-top: 12px; font-size: .98rem; }
  .xp-stats { margin-top: 14px; gap: 4px 14px; }
  .xp-stats li { font-size: .8rem; }

  .xp-filtros-sec { margin-bottom: 20px; }
  .xp-filtros { gap: 10px; padding: 14px; }
  .xp-fgrupo { grid-template-columns: max-content 1fr; align-items: center; column-gap: 12px; }
  .xp-flabel { font-size: .6rem; letter-spacing: .12em; }
  .xp-chips {
    flex-wrap: nowrap; overflow-x: auto; min-width: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .xp-chips::-webkit-scrollbar { display: none; }
  .xp-chip { flex: 0 0 auto; min-height: 38px; }
}