/* ══════════════════════════════════════════════════════════════════
   PRODUCTOS V6 · scroll-snap secuencial + indicador lateral
   ══════════════════════════════════════════════════════════════════ */

/* Snap REMOVED — el sticky stack ya cumple la función de "centrar"
   cada card (la pin a top:120-156 mientras se scrollea). Snap encima
   pelea con sticky y genera saltos. La experiencia es 100% sticky. */

.section-productos.prodv6 {
  position: relative;
  /* Bottom padding chico · evita gap exagerado entre stack y closing-wrap */
  padding: 80px 0 24px;
  background: linear-gradient(180deg, #F7F5FF 0%, #FFFFFF 50%, #F7F5FF 100%);
  color: var(--c-text);
  isolation: isolate;
}

/* Header centered + sizes idénticos a la sección Comunidad */
.prodv6-section-header { margin-bottom: 56px; text-align: center; }
.prodv6 .section-title { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.18; }
.prodv6 .section-kicker { font-size: 10px; padding: 4px 11px; letter-spacing: .14em; }

/* Stack · contenedor de las 4 cards apiladas.
   ─────────────────────────────────────────────────────────────────
   STICKY STACKING (estilo cometaedu / Productos Cometa):
   - Cards SIN margin entre ellas → tightly packed en DOM
   - Cada card position:sticky con `top` progresivo (12px peek)
   - z-index ascendente para que las siguientes cubran las anteriores
     dejando 12px asomando arriba de cada una
   - El stack tiene padding-bottom para que la última card no
     "unstick" al llegar al final · todas las 4 se mantienen
     sticky simultáneamente al pie de la sección
   ──────────────────────────────────────────────────────────────── */
.prodv6-stack {
  position: relative;
  padding: 0 24px;
  /* padding-bottom CHICO: ~15vh de dwell para card 4 · suficiente
     para que el snap-proximity asista al landing sin generar void
     visible debajo del card mientras está sticky. */
  padding-bottom: 15vh;
  max-width: 1280px;
  margin: 0 auto;
}

.prodv6-card {
  position: sticky;
  width: 100%;
  height: clamp(560px, 76vh, 720px);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFE 100%);
  border: 1px solid rgba(155,142,240,.22);
  padding: 40px 44px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* margin-bottom CHICO: cards tightly packed en DOM para que stackeen
     suavemente (la siguiente cubre a la anterior dejando 12px peek).
     El "scroll más largo" de dwell se logra via padding-bottom del
     stack (170vh) que extiende el sticky de la última card. */
  margin-bottom: 24px;
  scroll-margin-top: 96px;
}
.prodv6-card:last-of-type { margin-bottom: 0; }

/* Top progresivo con ~18px de peek por card (montón sutil).
   Card 3 queda en 156px (centrada como antes); cards 0,1,2 suben
   para que cuando estén apiladas se vea un "deck" de 3 capas
   asomando arriba sin sobrecargar.
   Sombras 360° con los 4 morados del brand book — ambient halo + drop
   direccional para que cada card se DESPEGUE claramente del background. */
.prodv6-card[data-idx="0"] {
  top: 102px;
  z-index: 1;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(74,60,174,.05),
    0 -10px 30px -12px rgba(155,142,240,.22),
    0 40px 80px -20px rgba(155,142,240,.55),
    0 18px 40px -16px rgba(155,142,240,.35);
}
.prodv6-card[data-idx="1"] {
  top: 120px;
  z-index: 2;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(74,60,174,.05),
    0 -10px 30px -12px rgba(74,60,174,.22),
    0 40px 80px -20px rgba(74,60,174,.55),
    0 18px 40px -16px rgba(74,60,174,.35);
}
.prodv6-card[data-idx="2"] {
  top: 138px;
  z-index: 3;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(74,60,174,.05),
    0 -10px 30px -12px rgba(107,92,231,.22),
    0 40px 80px -20px rgba(107,92,231,.55),
    0 18px 40px -16px rgba(107,92,231,.35);
}
.prodv6-card[data-idx="3"] {
  top: 156px;
  z-index: 4;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(74,60,174,.05),
    0 -10px 30px -12px rgba(45,37,96,.28),
    0 40px 80px -20px rgba(45,37,96,.60),
    0 18px 40px -16px rgba(45,37,96,.40);
}

/* El div .prodv6-card-bg ya no aplica — la diferenciación va por sombra */
.prodv6-card-bg { display: none; }

/* ────────────────────────────────────────────────────────────────
   ESTADO ACTIVO de card (cuando es la centrada / focus visual)
   ──────────────────────────────────────────────────────────────── */
/* Opacity-based active state · SOLO el contenido interno se atenúa.
   El card (fondo blanco, borde, sombra 360°) se mantiene a opacity 1
   siempre · así la "tarjeta física" sigue legible/destacada mientras
   su contenido (texto + mockups) sí transiciona dim/bright según foco. */
.prodv6-card { cursor: default; transition: border-color .5s ease; }
.prodv6-card.is-active { border-color: rgba(74,60,174,.32); }

/* El interno (.prodv6-card-inner) contiene texto + mockups. Atenúalo
   en inactivas, full opacity en activa. Transición single-property =
   sin flicker. */
.prodv6-card-inner {
  opacity: .42;
  transition: opacity .55s cubic-bezier(.22,1,.36,1);
}
.prodv6-card.is-active .prodv6-card-inner { opacity: 1; }

/* Al scrollear hacia ARRIBA, el "juego de opacidad" se desactiva ·
   todas las cards muestran su contenido full opacity sin transición.
   JS pone data-prodv6-dir="up" en <html> al detectar scroll up. */
html[data-prodv6-dir="up"] .prodv6-card-inner {
  opacity: 1;
  transition: none;
}

/* Cards inactivas son clicables (peek-bar nav · ver JS) */
.prodv6-card:not(.is-active) { cursor: pointer; }

/* Num color reforzado en card activa (refuerzo sutil del focus) */
.prodv6-card-num { transition: color .5s ease; }
.prodv6-card.is-active .prodv6-card-num { color: rgba(74,60,174,.42); }

.prodv6-card-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; width: 100%; }
/* HUÉRFANO 3RA PASADA — revisar (--reverse ya no se aplica en ningún panel)
.prodv6-card-inner--reverse { grid-template-columns: 1.15fr 0.85fr; direction: rtl; }
.prodv6-card-inner--reverse > * { direction: ltr; }
*/

.prodv6-card-text { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* HUÉRFANO 3RA PASADA — revisar (reglas asociadas a --reverse)
.prodv6-card-inner--reverse .prodv6-card-text { align-items: flex-end; text-align: right; }
.prodv6-card-inner--reverse .prodv6-card-block { align-items: flex-end; }
.prodv6-card-inner--reverse .prodv6-card-outcome { justify-content: flex-end; align-self: flex-end; }
*/
.prodv6-card-num { font-size: 60px; font-weight: 200; line-height: 1; color: rgba(74,60,174,.16); font-variant-numeric: tabular-nums; letter-spacing: -.04em; margin-bottom: -2px; }
.prodv6-card-name { font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--c-text); margin: 0; max-width: 480px; }
.prodv6-card-block { display: flex; flex-direction: column; gap: 3px; max-width: 480px; }
.prodv6-card-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(74,60,174,.55); }
.prodv6-card-block p { font-size: 13.5px; line-height: 1.5; color: rgba(45,37,96,.72); margin: 0; }

.prodv6-card-outcome { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; padding: 12px 16px; background: rgba(107,92,231,.08); border-radius: var(--r-md); border: 1px solid rgba(107,92,231,.16); max-width: 480px; }
.prodv6-card-outcome strong { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; color: var(--c-main); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.prodv6-card-outcome span { font-size: 12px; line-height: 1.4; color: rgba(45,37,96,.62); font-weight: 500; }

.prodv6-card-cta { display: inline-flex; align-items: center; gap: 9px; padding: 10px 20px; border-radius: var(--r-pill); background: var(--c-main); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; margin-top: 4px; transition: background .35s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; box-shadow: 0 8px 22px -8px rgba(74,60,174,.45); }
.prodv6-card-cta:hover { background: var(--c-mid); transform: translateX(4px); box-shadow: 0 14px 32px -8px rgba(74,60,174,.55); }
.prodv6-card-cta svg { transition: transform .35s ease; }
.prodv6-card-cta:hover svg { transform: translateX(3px); }

/* Mocks layouts · 3ra pasada (21/05/2026): rotaciones suaves (máx 1°) */
.prodv6-card-mocks--hero { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; min-height: 460px; align-items: center; justify-items: center; }
.prodv6-card-mocks--hero .prodv6-mock--hero { position: relative; z-index: 2; transform: rotate(-1deg); }
.prodv6-card-mocks--hero .prodv6-mock--acc { position: absolute; z-index: 1; }
.prodv6-card-mocks--hero .prodv6-mock--acc1 { top: 12px; right: -12px; transform: rotate(1deg); }
/* HUÉRFANO 3RA PASADA — revisar (.prodv6-mock--acc2 ya no se usa)
.prodv6-card-mocks--hero .prodv6-mock--acc2 { bottom: -8px; left: 0; transform: rotate(-6deg); }
*/

/* --balanced ahora con 2 hijos (acc2 eliminado), grid 2 columnas */
.prodv6-card-mocks--balanced { display: grid; grid-template-columns: repeat(2, 1fr) !important; gap: 18px; align-items: center; }
.prodv6-card-mocks--balanced > .prodv6-mock:nth-child(1) { transform: translateY(8px); }
.prodv6-card-mocks--balanced > .prodv6-mock:nth-child(2) { transform: translateY(-4px); z-index: 2; }
/* HUÉRFANO 3RA PASADA — revisar (3er mockup eliminado)
.prodv6-card-mocks--balanced > .prodv6-mock:nth-child(3) { transform: translateY(20px) rotate(2deg); }
*/

.prodv6-mock { display: flex; align-items: center; justify-content: center; transition: transform .6s cubic-bezier(.22,.61,.36,1); }

/* Mock window/phone reuso */
/* Mockups · borde sutil brand + sombra suave (sin el anillo morado oscuro
   que se veía pegado al edge). */
.prodv6 .mock-window {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid rgba(155,142,240,.20);
  box-shadow:
    0 10px 24px -8px rgba(74,60,174,.18),
    0 4px 10px -4px rgba(74,60,174,.10);
  overflow: hidden;
}
.prodv6 .mock-window .mock-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #FCFCFE; }
.prodv6 .mock-phone {
  width: 200px;
  background: #fff;
  border-radius: 26px;
  border: 1px solid rgba(155,142,240,.20);
  box-shadow:
    0 10px 24px -8px rgba(74,60,174,.18),
    0 4px 10px -4px rgba(74,60,174,.10);
  overflow: hidden;
}
.prodv6 .mock-phone-body { padding: 14px; background: #FCFCFE; min-height: 240px; display: flex; flex-direction: column; gap: 10px; }
.prodv6 .mock-app-cta { margin-top: auto; padding: 9px 12px; background: linear-gradient(135deg, var(--c-mid), var(--c-main)); color: #fff; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 600; text-align: center; }

.prodv6-mock-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(45,37,96,.06); }
.prodv6-mock-bar > strong { font-size: 11px; font-weight: 700; color: var(--c-deep); }
.prodv6-mock-live { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; color: var(--c-main); }
.prodv6-mock-live > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--c-mid); animation: mockLivePulseSlow 1.8s ease-in-out infinite; }

/* CASINO inner */
.prodv6-cas-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.prodv6-day { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 8px; background: rgba(155,142,240,.08); }
.prodv6-day-num { font-size: 16px; font-weight: 800; color: var(--c-deep); line-height: 1; font-variant-numeric: tabular-nums; transition: color .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.prodv6-day-num.prodv6-tick { color: var(--c-mid); transform: translateY(-2px); }
.prodv6-day span:last-child { font-size: 8px; text-transform: uppercase; color: var(--c-muted); letter-spacing: .04em; font-weight: 600; margin-top: 4px; }
.prodv6-day--peak { background: linear-gradient(135deg, rgba(107,92,231,.20), rgba(155,142,240,.12)); border: 1px solid rgba(107,92,231,.24); }
.prodv6-day--peak .prodv6-day-num { color: var(--c-main); }
.prodv6-cas-foot { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--c-muted); padding-top: 6px; border-top: 1px solid rgba(45,37,96,.06); }
.prodv6-cas-dot { width: 5px; height: 5px; border-radius: 50%; background: #28C840; box-shadow: 0 0 6px rgba(40,200,64,.6); }
.prodv6-cas-push { background: rgba(45,37,96,.95); color: #fff; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.prodv6-push-head { display: flex; justify-content: space-between; font-size: 8px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .04em; }
.prodv6-cas-push strong { font-size: 10px; color: #fff; }
.prodv6-cas-push p { font-size: 8.5px; line-height: 1.4; color: rgba(255,255,255,.7); margin: 0; }
.prodv6-push-cta { font-size: 9px; font-weight: 600; color: var(--c-light); margin-top: 2px; }
.prodv6-cas-balance { display: flex; flex-direction: column; align-items: center; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(107,92,231,.10), rgba(155,142,240,.06)); border: 1px solid rgba(107,92,231,.16); gap: 2px; }
.prodv6-bal-lab { font-size: 9px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.prodv6-bal-amt { font-size: 22px; font-weight: 800; color: var(--c-main); font-variant-numeric: tabular-nums; }
.prodv6-bal-meta { font-size: 9px; color: #C53A3F; font-weight: 600; }
.prodv6-bal-bar { width: 100%; height: 4px; background: rgba(229,72,77,.18); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.prodv6-bal-bar-fill { width: 18%; height: 100%; background: linear-gradient(90deg, #E5484D, #F5A623); }

/* CPA inner */
.prodv6-cpa-flow-head { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(45,37,96,.06); }
.prodv6-cpa-flow-head strong { font-size: 11px; color: var(--c-deep); }
.prodv6-cpa-flow-amt { font-size: 12px; color: var(--c-main); font-weight: 700; }
.prodv6-cpa-steps { display: flex; flex-direction: column; gap: 5px; }
.prodv6-cpa-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 10px; background: rgba(155,142,240,.05); border: 1px solid rgba(155,142,240,.10); }
.prodv6-cpa-step--done { background: rgba(40,200,64,.06); border-color: rgba(40,200,64,.18); }
.prodv6-cpa-step--active { background: rgba(245,166,35,.08); border-color: rgba(245,166,35,.24); }
.prodv6-cpa-step-num { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; background: rgba(107,92,231,.14); color: var(--c-main); }
.prodv6-cpa-step--done .prodv6-cpa-step-num { background: rgba(40,200,64,.20); color: #2E7B4A; }
.prodv6-cpa-step--active .prodv6-cpa-step-num { background: rgba(245,166,35,.22); color: #C77A14; }
.prodv6-cpa-step strong { font-size: 9.5px; color: var(--c-deep); display: block; }
.prodv6-cpa-step span:not(.prodv6-cpa-step-num):not(.prodv6-cpa-step-check):not(.prodv6-cpa-step-pulse) { font-size: 8.5px; color: var(--c-muted); }
.prodv6-cpa-step-check { color: #2E7B4A; font-weight: 700; }
.prodv6-cpa-step-pulse { width: 9px; height: 9px; border-radius: 50%; background: #F5A623; animation: prodv6Pulse 1.6s ease-out infinite; }
@keyframes prodv6Pulse { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,.5); } 70% { box-shadow: 0 0 0 8px rgba(245,166,35,0); } 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); } }
.prodv6-cpa-colecta { display: flex; flex-direction: column; align-items: center; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(107,92,231,.10), rgba(155,142,240,.06)); border: 1px solid rgba(107,92,231,.16); gap: 2px; }
.prodv6-col-lab { font-size: 9px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.prodv6-col-amt { font-size: 22px; font-weight: 800; color: var(--c-main); font-variant-numeric: tabular-nums; }
.prodv6-col-goal { font-size: 9px; color: var(--c-muted); }
.prodv6-col-progress { width: 100%; height: 5px; background: rgba(107,92,231,.16); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.prodv6-col-progress-fill { width: 74%; height: 100%; background: linear-gradient(90deg, var(--c-mid), var(--c-light)); }
.prodv6-cpa-reminder { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 1px 8px; padding: 7px 10px; border-radius: 8px; background: rgba(245,166,35,.06); }
.prodv6-cpa-reminder--done { background: rgba(40,200,64,.06); }
.prodv6-rem-dot { width: 7px; height: 7px; border-radius: 50%; background: #F5A623; grid-row: 1 / 3; align-self: center; }
.prodv6-rem-dot--ok { background: #28C840; }
.prodv6-cpa-reminder strong { font-size: 9.5px; color: var(--c-deep); grid-column: 2; }
.prodv6-cpa-reminder span:last-child { font-size: 8.5px; color: var(--c-muted); grid-column: 2; }
.prodv6-rendi-pdf { font-size: 9px; font-weight: 700; color: #2E7B4A; background: rgba(40,200,64,.10); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.prodv6-rendi-rows { display: flex; flex-direction: column; gap: 3px; }
.prodv6-rendi-row { display: flex; justify-content: space-between; padding: 4px 6px; font-size: 10px; color: var(--c-muted); }
.prodv6-rendi-row strong { color: #2E7B4A; font-variant-numeric: tabular-nums; }
.prodv6-rendi-row--out strong { color: #C53A3F; }
.prodv6-rendi-row--total { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(45,37,96,.08); color: var(--c-deep); font-weight: 600; }
.prodv6-rendi-row--total strong { color: var(--c-main); font-size: 12px; }

/* GESTIÓN inner */
.prodv6-gest-pct { font-size: 9px; font-weight: 700; color: #2E7B4A; background: rgba(40,200,64,.10); padding: 3px 8px; border-radius: 999px; }
.prodv6-gest-pct--big { font-size: 13px; padding: 4px 10px; }
.prodv6-gest-sectors { display: flex; flex-direction: column; gap: 4px; }
.prodv6-gest-sector { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; font-size: 10px; color: var(--c-muted); border-radius: 6px; }
.prodv6-gest-sector--ok { color: var(--c-deep); }
.prodv6-gest-sector--active { background: rgba(245,166,35,.08); }
.prodv6-gest-sector > span:first-child { width: 14px; height: 14px; border-radius: 50%; background: rgba(107,92,231,.18); color: var(--c-light); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.prodv6-gest-sector--ok > span:first-child { background: #28C840; color: #fff; }
.prodv6-gest-sector span:last-child { font-size: 9px; color: var(--c-muted); }
.prodv6-gest-sector--ok span:last-child { color: #2E7B4A; font-weight: 600; }
.prodv6-gest-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(245,166,35,.25); border-top-color: #F5A623; animation: prodv6Spin 1s linear infinite; background: transparent !important; }
.prodv6-gest-dot { background: rgba(107,92,231,.2) !important; }
@keyframes prodv6Spin { to { transform: rotate(360deg); } }
.prodv6-gest-claim { display: flex; flex-direction: column; gap: 5px; }
.prodv6-claim-tag { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: rgba(40,200,64,.10); color: #2E7B4A; align-self: flex-start; }
.prodv6-gest-claim strong { font-size: 11px; color: var(--c-deep); }
.prodv6-claim-reporter { font-size: 9px; color: var(--c-muted); }
.prodv6-claim-photo { height: 60px; border-radius: 6px; background: linear-gradient(135deg, rgba(107,92,231,.40), rgba(45,37,96,.55)), radial-gradient(ellipse at 30% 50%, rgba(155,142,240,.5), transparent 70%); margin-top: 4px; }
.prodv6-claim-time { font-size: 9px; color: #2E7B4A; font-weight: 600; margin-top: 2px; }
.prodv6-gest-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-items: end; height: 56px; padding: 4px 0; }
.prodv6-gest-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: end; }
.prodv6-gest-bar > span { width: 100%; height: var(--h); background: linear-gradient(180deg, rgba(107,92,231,.55), rgba(107,92,231,.25)); border-radius: 4px 4px 0 0; }
.prodv6-gest-bar--peak > span { background: linear-gradient(180deg, var(--c-mid), var(--c-main)); }
.prodv6-gest-bar em { font-size: 8px; color: var(--c-muted); font-style: normal; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* LIGAS inner */
.prodv6-lig-taller { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 10px; background: rgba(107,92,231,.08); gap: 2px; }
.prodv6-lig-cat { font-size: 8px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.prodv6-lig-taller strong { font-size: 12px; color: var(--c-deep); }
.prodv6-lig-fee { font-size: 10px; color: var(--c-main); font-weight: 700; }
.prodv6-lig-cupos { display: flex; flex-direction: column; gap: 4px; }
.prodv6-lig-cupos-head { display: flex; justify-content: space-between; font-size: 10px; color: var(--c-muted); }
.prodv6-lig-cupos-head strong { color: var(--c-deep); font-variant-numeric: tabular-nums; }
.prodv6-lig-cupos-bar { width: 100%; height: 6px; background: rgba(107,92,231,.16); border-radius: 999px; overflow: hidden; }
.prodv6-lig-cupos-bar-fill { width: 90%; height: 100%; background: linear-gradient(90deg, var(--c-mid), var(--c-light)); }
.prodv6-lig-match-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: rgba(107,92,231,.08); border-radius: 8px; }
.prodv6-lig-match-head strong { font-size: 12px; color: var(--c-deep); }
.prodv6-lig-min { font-size: 9px; font-weight: 700; color: var(--c-main); background: rgba(155,142,240,.18); padding: 3px 8px; border-radius: 999px; }
.prodv6-lig-events { display: flex; flex-direction: column; gap: 4px; }
.prodv6-lig-event { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; font-size: 10px; color: var(--c-deep); border-radius: 6px; background: rgba(107,92,231,.04); }
.prodv6-lig-event--new { background: rgba(245,166,35,.08); }
.prodv6-lig-event-ic { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.prodv6-lig-event-ic--goal { background: linear-gradient(135deg, var(--c-light), var(--c-mid)); }
.prodv6-lig-event-ic--yellow { background: linear-gradient(135deg, var(--c-mid), var(--c-main)); position: relative; }
.prodv6-lig-event-ic--yellow::before { content: ""; width: 7px; height: 9px; background: #F5C141; border-radius: 1.5px; }
.prodv6-lig-event span:last-child { font-size: 9px; color: var(--c-muted); font-weight: 600; }
.prodv6-lig-att-pct { font-size: 13px; font-weight: 700; color: var(--c-main); background: rgba(155,142,240,.18); padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.prodv6-lig-attendance { display: flex; align-items: center; gap: 12px; padding: 10px; background: rgba(107,92,231,.06); border-radius: 10px; }
.prodv6-lig-att-ring { width: 52px; height: 52px; position: relative; flex-shrink: 0; }
.prodv6-lig-att-ring svg { width: 100%; height: 100%; }
.prodv6-lig-att-ring > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--c-main); }
.prodv6-lig-att-ring > span i { font-size: 8px; font-style: normal; font-weight: 600; }
.prodv6-lig-att-meta { display: flex; flex-direction: column; }
.prodv6-lig-att-meta strong { font-size: 11px; color: var(--c-deep); }
.prodv6-lig-att-meta span { font-size: 9px; color: var(--c-muted); }

/* INDICADOR LATERAL */
.prodv6-progress { position: fixed; top: 50%; right: 32px; transform: translateY(-50%) translateX(40px); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.prodv6-progress.is-visible { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.prodv6-progress-num { font-size: 28px; font-weight: 700; color: var(--c-main); line-height: 1; font-variant-numeric: tabular-nums; transition: color .4s ease; }
.prodv6-progress-total { font-size: 11px; color: var(--c-muted); letter-spacing: .08em; }
.prodv6-progress-track { position: relative; width: 3px; height: 140px; background: rgba(107,92,231,.16); border-radius: 999px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.prodv6-progress-fill { position: absolute; top: 0; left: 0; right: 0; height: 25%; background: linear-gradient(180deg, var(--c-mid), var(--c-main)); border-radius: 999px; transition: height .6s cubic-bezier(.22,.61,.36,1); pointer-events: none; }
.prodv6-progress-num { transition: color .4s ease; }
.prodv6-progress-dot {
  /* Reset de button para mantener visual idéntico al span original */
  appearance: none; padding: 0; font: inherit; margin: 0;
  /* Visual */
  width: 10px; height: 10px; border-radius: 50%; background: rgba(107,92,231,.30); border: 2px solid #F7F5FF;
  position: relative; z-index: 1; cursor: pointer;
  transition: background .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
/* Hit area invisible expandida (10px → 28px) · evita clicks fallidos
   por mira muy chica. Pseudo-elemento que no afecta el layout visual. */
.prodv6-progress-dot::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
.prodv6-progress-dot:hover:not(.is-active) { background: rgba(107,92,231,.55); transform: scale(1.15); }
.prodv6-progress-dot.is-active { background: var(--c-main); transform: scale(1.3); }
.prodv6-progress-dot:focus-visible { outline: 2px solid var(--c-main); outline-offset: 4px; }

/* Focus-visible accesible en el CTA de las cards */
.prodv6-card-cta:focus-visible { outline: 3px solid var(--c-main); outline-offset: 4px; }

/* Cierre Sofía */
.prodv6-closing-wrap { background: linear-gradient(180deg, #F7F5FF 0%, #FFFFFF 100%); padding: 72px 0 72px; }
.prodv6-closing {
  /* layout flotante — sin pill contenedor */
}
.prodv6-closing-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.prodv6-closing-text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.eco-cta-btn { margin-top: 28px; }
.prodv6-closing-title { font-size: clamp(26px, 2.6vw, 36px); font-weight: 400; line-height: 1.2; margin: 0; letter-spacing: -.018em; color: var(--c-deep); }
.prodv6-closing-title .cn-em {
  display: block;
  font-weight: 700;
  background: linear-gradient(140deg, #5B4EDB 0%, #9B8EF0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.025em;
  line-height: 1.12;
}
.prodv6-closing-title .cn-2 {
  display: block;
  font-weight: 400;
  color: var(--c-deep);
  letter-spacing: -.018em;
  line-height: 1.22;
}
.prodv6-closing-title .cn-2 strong {
  display: block;
  font-weight: 700;
  color: var(--c-deep);
  -webkit-text-fill-color: var(--c-deep);
  background: none;
  letter-spacing: -.025em;
}
.prodv6-closing-body { font-size: 15px; line-height: 1.65; color: rgba(45,37,96,.72); margin: 0; }
.prodv6-closing-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(107,92,231,.06) 0%, transparent 70%); border-radius: 24px; }
/* HUÉRFANO 3RA PASADA — revisar (la órbita decorativa y .prodv6-orbit-dot ya no se usan)
.prodv6-closing-orbit { position: absolute; inset: 16px; pointer-events: none; z-index: 2; }
.prodv6-orbit-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--c-light), var(--c-mid)); box-shadow: 0 0 16px rgba(155,142,240,.8), 0 0 32px rgba(107,92,231,.4); top: 0; left: 0; animation: prodv6Orbit 12s linear infinite; }
@keyframes prodv6Orbit { 0% { top: 12%; left: 22%; } 25% { top: 12%; left: 72%; } 50% { top: 72%; left: 72%; } 75% { top: 72%; left: 22%; } 100% { top: 12%; left: 22%; } }
*/

/* Live tiles (3ra pasada 21/05/2026): cada celda es un mini-mockup animado */
.prodv6-closing-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  min-height: 200px;
  background: #fff;
  border: 1px solid rgba(107, 92, 231, 0.32);
  border-radius: 18px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px -6px rgba(74, 60, 174, 0.12), 0 12px 32px -12px rgba(74, 60, 174, 0.16);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, opacity 0.25s ease;
}
.prodv6-closing-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -10px rgba(74, 60, 174, 0.30);
}
.prodv6-closing-grid:hover .prodv6-closing-cell { opacity: 0.7; }
.prodv6-closing-grid:hover .prodv6-closing-cell:hover { opacity: 1; }

.prodv6-closing-cell-head { display: flex; align-items: center; gap: 8px; }
.prodv6-closing-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(107,92,231,.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: #6B5CE7; flex-shrink: 0;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.prodv6-closing-cell-head strong { font-size: 13px; color: var(--c-text); font-weight: 700; }
.prodv6-closing-cell-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70px;
}
/* Ver módulo pill: aparece al hover con fade + slide */
.prodv6-closing-cell-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #5B4EDB;
  background: rgba(107,92,231,.08);
  border: 1px solid rgba(107,92,231,.18);
  border-radius: 999px;
  padding: 5px 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  align-self: flex-start;
}
.prodv6-closing-cell:hover .prodv6-closing-cell-link {
  opacity: 1;
  transform: translateY(0);
}
/* Pause all inner animations on hover for legibility */
.prodv6-closing-cell:hover * { animation-play-state: paused; }
.prodv6-closing-cell:hover *::before { animation-play-state: paused; }
.prodv6-closing-cell:hover::after { opacity: 0; transition: opacity 0.2s ease; }

/* Card-level flash ring via ::after — communica cuál card envía / recibe */
.prodv6-closing-cell::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 5;
}
.prodv6-closing-cell[data-eco-cell="comedor"]::after { animation: ecoCellSend     8s ease-in-out infinite; }
.prodv6-closing-cell[data-eco-cell="gestion"]::after { animation: ecoCellReceive  8s ease-in-out infinite; }
.prodv6-closing-cell[data-eco-cell="cpa"]::after     { animation: ecoCellSend2    8s ease-in-out infinite; }
.prodv6-closing-cell[data-eco-cell="ligas"]::after   { animation: ecoCellReceive2 8s ease-in-out infinite; }

/* SVG arrow inside the pill link */
.prodv6-closing-cell-link svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Live counter del Comedor */
.prodv6-closing-live-counter { display: flex; align-items: baseline; gap: 6px; }
.prodv6-closing-live-num { font-size: 24px; font-weight: 800; color: var(--c-main); line-height: 1; font-variant-numeric: tabular-nums; }
.prodv6-closing-live-lab { font-size: 10px; color: rgba(45,37,96,.68); }
.prodv6-closing-live-feed {
  margin-top: 10px;
  background: rgba(40,200,64,.06);
  border: 1px solid rgba(40,200,64,.18);
  border-radius: 8px;
  padding: 5px 9px 5px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.prodv6-closing-live-feed::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #28C840;
  flex-shrink: 0;
  animation: feedDotPulse 2s ease-in-out infinite;
}
@keyframes feedDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(40,200,64,.55); }
  50%      { box-shadow: 0 0 0 3px rgba(40,200,64,.0); }
}
.prodv6-closing-live-feed-item { font-size: 10.5px; color: rgba(45,37,96,.82); font-weight: 500; }
.prodv6-closing-live-feed-item.is-entering { animation: prodv6FeedEnter 0.4s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes prodv6FeedEnter {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Número del Comedor: pulso al actualizarse */
@keyframes ecoNumTick {
  0%   { transform: scale(1.16); }
  65%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.prodv6-closing-live-num.is-updated { animation: ecoNumTick 0.45s cubic-bezier(0.22,1,0.36,1); }

/* Live bingo del CPA */
.prodv6-closing-live-bingo { display: flex; flex-direction: column; gap: 4px; }
.prodv6-closing-live-bingo-lab { font-size: 10px; color: rgba(45,37,96,.68); }
.prodv6-closing-live-bingo-pct { font-size: 20px; font-weight: 800; color: var(--c-main); line-height: 1; font-variant-numeric: tabular-nums; }
.prodv6-closing-live-bingo-bar { height: 4px; background: rgba(155,142,240,.18); border-radius: 2px; overflow: hidden; }
.prodv6-closing-live-bingo-fill { height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, #9B8EF0, #6B5CE7); border-radius: 2px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.prodv6-closing-live-bingo-raised { font-size: 9px; color: rgba(45,37,96,.50); margin-top: 2px; display: block; font-variant-numeric: tabular-nums; }

/* Live checklist de Gestión */
.prodv6-closing-live-check { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.prodv6-closing-live-check li { font-size: 10px; color: rgba(45,37,96,.62); padding-left: 14px; position: relative; transition: color 0.3s ease; line-height: 1.4; }
.prodv6-closing-live-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(107,92,231,.3);
  transition: background 0.35s ease;
}
.prodv6-closing-live-check li.is-done { color: rgba(45,37,96,.80); }
.prodv6-closing-live-check li.is-done::before { background: #28C840; box-shadow: 0 0 5px rgba(40,200,64,.4); }
.prodv6-closing-live-check.is-all-done li { color: rgba(40,160,64,.85); }
.prodv6-closing-live-check.is-all-done li::before { background: #28C840; box-shadow: 0 0 8px rgba(40,200,64,.6); }

/* Live cupos de Talleres */
.prodv6-closing-live-cupos { display: flex; flex-direction: column; gap: 3px; }
.prodv6-closing-live-cupos-taller { font-size: 10px; color: rgba(45,37,96,.68); }
.prodv6-closing-live-cupos-num { font-size: 22px; font-weight: 800; color: var(--c-main); line-height: 1; font-variant-numeric: tabular-nums; transition: color 0.5s ease; }
.prodv6-closing-live-cupos-num.is-full { color: #DC2626; }
.prodv6-closing-live-cupos-status { font-size: 9px; color: rgba(46,123,74,.85); font-weight: 600; transition: color 0.4s ease; }
.prodv6-closing-live-cupos-status.is-urgent { color: #D97706; }
.prodv6-closing-live-cupos-status.is-full   { color: #DC2626; }

/* Conectores SVG eliminados — animación inalámbrica via keyframes */

/* CTA ecosistema — estilo ghost/outline, diferente a los CTAs sólidos */
.eco-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px 11px 20px;
  border-radius: 999px;
  background: rgba(107,92,231,.07);
  border: 1.5px solid rgba(107,92,231,.32);
  color: #5B4EDB;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease,
              transform .5s cubic-bezier(.25, 1, .5, 1), box-shadow .5s ease;
  align-self: flex-start;
  white-space: nowrap;
  will-change: transform, box-shadow;
}
.eco-cta-btn:hover {
  background: rgba(107,92,231,.14);
  border-color: rgba(107,92,231,.62);
  color: #4A3CAE;
  transform: translateY(-6px);
  box-shadow: 0 12px 32px -4px rgba(107,92,231,.30), 0 20px 48px -8px rgba(74,60,174,.16);
}
.eco-cta-btn:active {
  transform: translateY(-2px);
  transition-duration: .15s;
}
.eco-cta-btn svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 5px;
  background: rgba(107,92,231,.12);
  border-radius: 999px;
  box-sizing: border-box;
  transition: transform .4s cubic-bezier(.25, 1, .5, 1), background .2s ease;
}
.eco-cta-btn:hover svg {
  transform: translateX(5px) scale(1.12);
  background: rgba(107,92,231,.2);
}

/* Kicker pill del ecosistema — override del .section-kicker base */
.eco-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(107,92,231,.09);
  color: #5B4EDB;
  border: 1px solid rgba(107,92,231,.22);
  letter-spacing: .07em;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px 5px 12px;
  margin-bottom: 0;
}
/* Dot verde pulsante — señal "live / en tiempo real" + conexión */
.eco-kicker .kicker-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28C840;
  box-shadow:
    0 0 0 0 rgba(40,200,64,.6),
    0 0 8px rgba(40,200,64,.5);
  flex-shrink: 0;
  animation: ecoKickerPulse 2.2s ease-in-out infinite;
}
@keyframes ecoKickerPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(40,200,64,.55),
      0 0 8px rgba(40,200,64,.5);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(40,200,64,0),
      0 0 12px rgba(40,200,64,.65);
  }
}

/* ── Activación de cards: ciclo 12s · delays escalonados ──────────
   Comedor: delay 0s  · CPA: delay 3s  · Talleres: delay 6s  · Gestión: delay 9s */

/* Borde de card (::after) */
.prodv6-closing-cell[data-eco-cell="comedor"]::after { animation: ecoCellActive 12s ease-in-out infinite 0s; }
.prodv6-closing-cell[data-eco-cell="cpa"]::after     { animation: ecoCellActive 12s ease-in-out infinite 3s; }
.prodv6-closing-cell[data-eco-cell="ligas"]::after   { animation: ecoCellActive 12s ease-in-out infinite 6s; }
.prodv6-closing-cell[data-eco-cell="gestion"]::after { animation: ecoCellActive 12s ease-in-out infinite 9s; }

@keyframes ecoCellActive {
  0%        { border-color: transparent;          box-shadow: none; }
  2.5%      { border-color: rgba(107,92,231,.56); box-shadow: 0 0 24px -4px rgba(107,92,231,.34); }
  20.83%    { border-color: rgba(107,92,231,.52); box-shadow: 0 0 20px -4px rgba(107,92,231,.28); }
  25%, 100% { border-color: transparent;          box-shadow: none; }
}

/* Ícono badge */
.prodv6-closing-cell[data-eco-cell="comedor"] .prodv6-closing-icon { animation: ecoIconActive 12s ease-in-out infinite 0s; }
.prodv6-closing-cell[data-eco-cell="cpa"]     .prodv6-closing-icon { animation: ecoIconActive 12s ease-in-out infinite 3s; }
.prodv6-closing-cell[data-eco-cell="ligas"]   .prodv6-closing-icon { animation: ecoIconActive 12s ease-in-out infinite 6s; }
.prodv6-closing-cell[data-eco-cell="gestion"] .prodv6-closing-icon { animation: ecoIconActive 12s ease-in-out infinite 9s; }

@keyframes ecoIconActive {
  0%, 2%    { transform: scale(1);    background: rgba(107,92,231,.12); box-shadow: none; }
  7%        { transform: scale(1.10); background: rgba(107,92,231,.24); box-shadow: 0 0 14px rgba(107,92,231,.40); }
  14%, 100% { transform: scale(1);    background: rgba(107,92,231,.12); box-shadow: none; }
}

/* Contenido específico: bingo (CPA) y cupos (Talleres) */
.prodv6-closing-cell[data-eco-cell="cpa"]   .prodv6-closing-live-bingo-fill { animation: ecoBingoGlow   12s ease-in-out infinite 3s; }
.prodv6-closing-cell[data-eco-cell="cpa"]   .prodv6-closing-live-bingo-pct  { animation: ecoContentPop 12s ease-in-out infinite 3s; }
.prodv6-closing-cell[data-eco-cell="ligas"] .prodv6-closing-live-cupos-num  { animation: ecoContentPop 12s ease-in-out infinite 6s; }

@keyframes ecoBingoGlow {
  0%, 2%    { box-shadow: none; }
  7%        { box-shadow: 0 0 12px rgba(107,92,231,.7), 0 0 22px rgba(107,92,231,.3); }
  14%, 100% { box-shadow: none; }
}
@keyframes ecoContentPop {
  0%, 2%    { transform: scale(1); }
  7%        { transform: scale(1.10); }
  14%, 100% { transform: scale(1); }
}

/* ────────────────────────────────────────────────────────────────
   prefers-reduced-motion · respetar usuarios con motion sensitivity
   ────────────────────────────────────────────────────────────────
   - Desactiva sticky stack (cards se vuelven flujo normal)
   - Desactiva entry stagger
   - Reduce transiciones de hover/focus a casi instantáneas
   - Los intervals de mockups se desactivan via JS */
@media (prefers-reduced-motion: reduce) {
  .prodv6-card {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 40px;
    transition: none !important;
  }
  .prodv6-card-inner { opacity: 1 !important; transition: none !important; }
  .prodv6-stack { padding-bottom: 80px; }
  .prodv6-card-cta,
  .prodv6-progress-num,
  .prodv6-progress-dot,
  .prodv6-progress-fill { transition: none !important; }
  html[data-prodv6-active="true"] { scroll-snap-type: none; }
  .prodv6-closing-cell[data-eco-cell] .prodv6-closing-icon,
  .prodv6-closing-cell[data-eco-cell] .prodv6-closing-live-bingo-fill,
  .prodv6-closing-cell[data-eco-cell] .prodv6-closing-live-bingo-pct,
  .prodv6-closing-cell[data-eco-cell] .prodv6-closing-live-cupos-num,
  .prodv6-closing-cell[data-eco-cell]::after,
  .eco-kicker .kicker-dot { animation: none !important; }
}

/* Scroll-snap removido · pelaba con la navegación programada via
   smoothScrollTo desde los dots del progress bar. El padding-bottom
   del stack (15vh) ya da suficiente dwell para card 4. */

/* Responsive */
@media (max-width: 1100px) {
  .prodv6-card { padding: 32px 28px; height: auto; min-height: 540px; margin-top: -50px; }
  .prodv6-card-inner { grid-template-columns: 1fr; gap: 32px; }
  .prodv6-card-inner--reverse { direction: ltr; }
  .prodv6-card-mocks--hero { min-height: 360px; }
  .prodv6-progress { display: none; }
  .prodv6-closing-inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  html[data-prodv6-active="true"] { scroll-snap-type: none; }
  .section-productos.prodv6 { padding: 48px 0; }
  .prodv6-card { padding: 28px 20px; margin-top: -32px; }
  .prodv6-card-mocks--balanced { grid-template-columns: 1fr; gap: 14px; }
  .prodv6-card-mocks--balanced > .prodv6-mock { transform: none !important; }
  /* En mobile: grid 1×4 (una sola columna) */
  .prodv6-closing-grid { grid-template-columns: 1fr; background: none; }
  .eco-cta-btn { font-size: 13px; padding: 11px 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCTOS V7 · tabs + 1 panel grande (Diego 19/05/2026)
   Reemplaza el stack sticky por un tab-switcher con auto-rotación.
   Reutiliza la diagramación de las .prodv6-card pero solo muestra
   el panel activo a la vez (los demás display:none).
   ══════════════════════════════════════════════════════════════════ */

/* Sobreescritura del comportamiento sticky cuando la sección está en modo v7
   2da pasada 20/05/2026: alto reducido, padding/fonts más compactos para que
   la sección entre completa en 1080p. Crossfade real entre paneles (no slide). */
.section-productos.prodv7 { padding: 64px 0 80px; }
.section-productos.prodv7 .prodv7-stack {
  position: relative;
  padding: 0 24px;
  max-width: 1280px;
  margin: 0 auto;
  /* 3ra pasada: alturas reducidas tras eliminar el 3er mockup */
  min-height: clamp(400px, 50vh, 520px);
}

/* Crossfade: todos los paneles superpuestos via position:absolute,
   solo el .is-active es visible y interactivo. */
.section-productos.prodv7 .prodv6-card {
  position: absolute;
  inset: 0;
  top: auto !important;
  height: auto;
  min-height: clamp(400px, 50vh, 520px);
  margin-bottom: 0;
  padding: 36px 40px;
  z-index: 1;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  pointer-events: none;
  transition:
    opacity .35s cubic-bezier(.4,0,.2,1),
    transform .35s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .35s;
}
.section-productos.prodv7 .prodv6-card.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
  transition:
    opacity .35s cubic-bezier(.4,0,.2,1),
    transform .35s cubic-bezier(.4,0,.2,1),
    visibility 0s linear 0s;
}
/* Ajustes tipográficos para que el panel respire en menos alto */
.section-productos.prodv7 .prodv6-card-name { font-size: clamp(20px, 1.8vw, 26px); }
.section-productos.prodv7 .prodv7-card-bullets li { line-height: 1.45; }
.section-productos.prodv7 .prodv6-card-outcome { padding: 9px 14px; }

/* Tabs · 4 botones horizontales con underline indicador del activo.
   En mobile, scroll horizontal si no caben. */
.prodv7-tabs-wrap {
  margin: 0 auto 48px;
  max-width: 1100px;
  padding: 0 24px;
}
.prodv7-tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  border-bottom: 1px solid rgba(155,142,240,.18);
  overflow-x: auto;
  scrollbar-width: none;
}
.prodv7-tabs::-webkit-scrollbar { display: none; }
.prodv7-tab {
  flex: 1 1 auto;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  font-family: var(--font, 'Poppins', sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(45,37,96,.55);
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease;
  position: relative;
  z-index: 1;
}
.prodv7-tab:hover { color: var(--c-main, #4A3CAE); }
.prodv7-tab.is-active {
  color: var(--c-main, #4A3CAE);
  font-weight: 600;
}
.prodv7-tab-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: .8;
}
.prodv7-tab.is-active .prodv7-tab-icon { opacity: 1; }
/* Underline morado animado bajo el tab activo · 3ra pasada: reforzado a 3px + glow */
.prodv7-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--tab-w, 25%);
  height: 3px;
  background: linear-gradient(90deg, #9B8EF0, #6B5CE7);
  border-radius: 2px;
  transform: translateX(var(--tab-x, 0));
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(107, 92, 231, 0.25);
}

/* Bullets de beneficios — reemplazan los bloques "El problema" / "Cómo lo resuelve" */
.prodv7-card-bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prodv7-card-bullets li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(45,37,96,.78);
  font-weight: 500;
}
.prodv7-card-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 3px, transparent 4px),
    linear-gradient(135deg, #9B8EF0, #6B5CE7);
  box-shadow: 0 2px 6px rgba(107,92,231,.28);
}

/* Responsive de tabs · R2: en mobile (≤720px) los módulos pasan de
   "tabs + 1 panel crossfade" a un CARRUSEL CENTRADO deslizable (card grande
   al centro + peek de las vecinas). Desktop (≥721px) queda idéntico. */
@media (max-width: 720px) {
  .section-productos.prodv7 { padding: 56px 0 64px; }

  /* Tabs ocultas: el swipe reemplaza la navegación */
  .prodv7-tabs-wrap { display: none; }

  /* Stack → carrusel horizontal con snap. padding-inline 7vw deja que la 1ª
     y la última también se centren con peek de las vecinas. */
  .section-productos.prodv7 .prodv7-stack {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    /* R2.2 · Padding vertical generoso: overflow-x:auto recorta el overflow
       vertical, así que sin esto la sombra de las cards se cortaba abajo.
       18px arriba + 34px abajo dejan respirar la sombra (compacta, abajo). */
    padding: 18px 7vw 34px;
    min-height: 0;
    max-width: none;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .section-productos.prodv7 .prodv7-stack::-webkit-scrollbar { display: none; }

  /* Cards: salen del apilamiento absoluto (crossfade) y se muestran TODAS en
     fila. height:auto + sin min-height clamp = el nombre del módulo deja de
     recortarse arriba. Esta regla RECONCILIA la previa (min-height:0; padding).
     Usamos el id #productos para subir especificidad (1,2,0) y ganarle a la
     regla base `.section-productos.prodv7 .prodv6-card { position:absolute
     !important }` (línea ~2193, misma especificidad pero posterior). */
  #productos.prodv7 .prodv6-card {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    flex: 0 0 80%;
    scroll-snap-align: center;
    min-height: 0 !important;
    height: auto !important;
    padding: 26px 20px;
    /* R2.2 · Sombra compacta para el carrusel (la del deck de desktop era de
       ~80px y se cortaba). Cabe dentro del padding del stack. */
    box-shadow:
      0 14px 30px -12px rgba(74,60,174,.28),
      0 4px 12px -6px rgba(74,60,174,.18) !important;
  }
  /* R2.1 · Todas las cards SIEMPRE a opacidad plena: antes la no-centrada
     quedaba atenuada (.55) y, si el JS no la re-marcaba al deslizar, la card
     se veía "inactiva". Sin atenuación → ninguna card queda apagada. */

  /* R2.1 · En mobile NO mostramos los mockups: se ven muy chicos y ocupan
     mucho alto. Ocultarlos achica la card y centra el foco en el texto. */
  #productos.prodv7 .prodv6-card-mocks { display: none !important; }

  /* R2.3 · Pill de producto arriba del panel (la inyecta el JS desde la tab
     correspondiente). Estilo kicker morado, ícono + nombre del módulo. */
  #productos.prodv7 .prodv7-mobile-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 6px 13px 6px 10px;
    border-radius: 999px;
    background: rgba(107,92,231,.09);
    border: 1px solid rgba(107,92,231,.22);
    color: var(--c-main, #4A3CAE);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
  }
  #productos.prodv7 .prodv7-mobile-pill .prodv7-tab-icon {
    width: 16px;
    height: 16px;
    opacity: .9;
  }
  #productos.prodv7 .prodv7-mobile-pill svg { width: 15px; height: 15px; }

  /* R2.3 · CTA en la MISMA posición (abajo) en todos los paneles + tamaño
     parejo. Las cards ya quedan a igual alto por el flex stretch del stack;
     hacemos que el contenido llene la card y empujamos el CTA al fondo. */
  #productos.prodv7 .prodv6-card { align-items: stretch !important; }
  #productos.prodv7 .prodv6-card-inner {
    display: flex !important;
    flex-direction: column;
    height: 100%;
  }
  #productos.prodv7 .prodv6-card-text {
    flex: 1 1 auto;
    width: 100%;
  }
  #productos.prodv7 .prodv6-card-cta {
    margin-top: auto;
    font-size: 13px;
    padding: 11px 22px;
    line-height: 1.3;
  }
}

/* ══════════════════════════════════════════════════════════════════
   R3 · TABLET / iPad (721–1100px) — MÓDULOS: mantiene TABS + crossfade.
   Se divide por orientación:
   · VERTICAL → texto-solo (el mockup no entra a este ancho), top-alineado
     y con más margen lateral del panel hacia el borde.
   · HORIZONTAL → recupera el mockup en 2 columnas (como desktop), con el
     tamaño ajustado para que entre sin recortes.
   Las tabs se compactan en ambas orientaciones para que entren las 4.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 721px) and (max-width: 1100px) {
  /* Tabs compactas para que entren las 4 sin desbordarse (ambas orient.). */
  .section-productos.prodv7 .prodv7-tabs-wrap { padding: 0 28px !important; }
  .section-productos.prodv7 .prodv7-tab {
    padding: 12px 8px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }
  .section-productos.prodv7 .prodv7-tab .prodv7-tab-icon {
    width: 15px !important;
    height: 15px !important;
  }
}

/* R3a · VERTICAL — sin mockup (no entra), texto-solo top-alineado + más
   margen lateral del panel hacia el borde de la pantalla. */
@media (min-width: 721px) and (max-width: 1100px) and (orientation: portrait) {
  /* Más gutter: el panel deja de estar pegado al borde lateral. Como las
     cards son position:absolute con inset:0, el padding del stack no las
     mete hacia adentro → angostamos el stack y lo centramos: las cards lo
     rellenan y quedan con 28px de aire a cada lado. */
  .section-productos.prodv7 .prodv7-stack {
    padding: 0 !important;
    width: calc(100% - 56px) !important;
    margin: 0 auto !important;
  }
  /* Sin mockup: el panel queda texto-solo (nombre, stat, bullets, CTA). */
  #productos.prodv7 .prodv6-card-mocks { display: none !important; }
  /* Top-align: el contenido arranca arriba → se ve el nombre completo. */
  #productos.prodv7 .prodv6-card {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  #productos.prodv7 .prodv6-card-inner {
    align-items: start !important;
    align-content: start !important;
  }
}

/* R3b · HORIZONTAL — recupera el mockup en 2 columnas (como desktop).
   Rango extendido hasta 1279 (cubre iPad landscape de 1112/1180/1194px que
   caen en layout desktop pero NO son PC ≥1280). El mockup se capa a un ancho
   fijo y se centra: así no se desborda a la derecha aunque el iPad no soporte
   container-queries (en cuyo caso usaba el fallback scale 0.39 = ~702px y se
   salía de pantalla). */
@media (min-width: 721px) and (max-width: 1279px) and (orientation: landscape) {
  /* Mismo aire lateral que en vertical (las cards abs rellenan el stack). */
  .section-productos.prodv7 .prodv7-stack {
    padding: 0 !important;
    width: calc(100% - 64px) !important;
    margin: 0 auto !important;
  }
  #productos.prodv7 .prodv6-card-mocks { display: grid !important; }
  /* Centrado vertical (texto + mockup) como en desktop. */
  #productos.prodv7 .prodv6-card { align-items: center !important; }
  #productos.prodv7 .prodv6-card-inner { align-items: center !important; }
  /* Columna del mockup un poco más ancha para que el mock entre más grande. */
  #productos.prodv7 .prodv6-card-inner { grid-template-columns: 0.85fr 1.15fr !important; gap: 36px !important; }
  /* Mock capado + centrado en su columna → tamaño parejo y sin desborde. */
  .section-productos.prodv7 .cmodulo-stage {
    max-width: 440px !important;
    margin: 0 auto !important;
  }
  /* Escala FIJA del iframe (NO depende de container-queries). El iframe es
     1800px de ancho natural; 1800 × 0.244 ≈ 440px = ancho del stage capado.
     Usamos !important en una media query normal para ganarle TANTO a la regla
     base con cqi (scale(calc(100cqi/1800px))) COMO al fallback fijo
     (scale(0.31)/scale(0.39)). Así el mock mide 440px en CUALQUIER navegador
     —Chrome moderno o el Safari viejo del iPad 6ª gen— sin sorpresas. */
  .section-productos.prodv7 .cmodulo-iframe {
    transform: scale(0.244) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   3RA PASADA · 21/05/2026 · ajustes home
   - Mini-strip "Otros módulos" debajo del CTA
   - Mockups animados nuevos: Comedor (cas-1/cas-2), CPA (cpa-1/cpa-2),
     Gestión (gest-1/gest-2), Talleres (lig-1/lig-2)
   ══════════════════════════════════════════════════════════════════ */

/* Mini-strip · navegación a los otros módulos del panel activo */
.prodv7-others {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.prodv7-others-lab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45, 37, 96, 0.45);
  margin-right: 4px;
}
.prodv7-others-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(155, 142, 240, 0.30);
  border-radius: 999px;
  font-family: var(--font, 'Poppins', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: rgba(45, 37, 96, 0.72);
  cursor: pointer;
  transition: all 0.25s ease;
}
.prodv7-others-chip:hover {
  background: rgba(155, 142, 240, 0.10);
  border-color: rgba(107, 92, 231, 0.55);
  color: var(--c-main);
  transform: translateY(-1px);
}
.prodv7-others-chip svg { opacity: 0.75; }
.prodv7-others-chip:hover svg { opacity: 1; }

/* ── COMEDOR · Mockup 1 (cas-1) — dashboard con KPIs + feed + footer swap ── */
.prodv6-cas-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0;
}
.prodv6-cas-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(155, 142, 240, 0.06);
  border-radius: 10px;
}
.prodv6-cas-kpi-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-main);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prodv6-cas-kpi span {
  font-size: 10px;
  color: rgba(45, 37, 96, 0.55);
  margin-top: 4px;
}

.prodv6-cas-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}
.prodv6-cas-feed-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(155, 142, 240, 0.16);
  border-radius: 8px;
  font-size: 11px;
}
.prodv6-cas-feed-item--new {
  animation: prodv6CasFeedIn 0.4s ease-out;
}
@keyframes prodv6CasFeedIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.prodv6-cas-feed-conciliado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(46, 123, 74, 0.10);
  color: #2E7B4A;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  animation: prodv6CasConciliadoPulse 1.4s ease-out;
}
@keyframes prodv6CasConciliadoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 123, 74, 0.40); }
  60%  { box-shadow: 0 0 0 8px rgba(46, 123, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 123, 74, 0); }
}
.prodv6-cas-feed-time {
  font-size: 9px;
  color: rgba(45, 37, 96, 0.45);
}

/* Footer intercambiable */
.prodv6-cas-foot-swap {
  position: relative;
  min-height: 60px;
}
.prodv6-cas-foot-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.prodv6-cas-foot-pane.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
.prodv6-cas-foot-pane--a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--c-muted);
  padding-top: 6px;
  border-top: 1px solid rgba(45, 37, 96, 0.06);
}
.prodv6-cas-foot-pane--b {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prodv6-cas-foot-pane-head strong {
  font-size: 10px;
  color: var(--c-deep);
  font-weight: 700;
}
.prodv6-cas-days-mini {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: end;
  height: 38px;
}
.prodv6-cas-day-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  height: 100%;
  justify-content: flex-end;
}
.prodv6-cas-day-mini span {
  width: 100%;
  background: linear-gradient(180deg, #9B8EF0, #6B5CE7);
  border-radius: 3px 3px 0 0;
  height: var(--h, 50%);
  transform-origin: bottom;
  animation: prodv6CasBarRise 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes prodv6CasBarRise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.prodv6-cas-day-mini--peak span {
  background: linear-gradient(180deg, #6B5CE7, #4A3CAE);
}
.prodv6-cas-day-mini em {
  font-size: 8px;
  font-style: normal;
  color: rgba(45, 37, 96, 0.55);
}
.prodv6-cas-day-mini b {
  position: absolute;
  top: -10px;
  font-size: 8px;
  font-weight: 700;
  color: var(--c-main);
}
.prodv6-cas-foot-pane-note {
  font-size: 9px;
  color: rgba(46, 123, 74, 0.85);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

/* ── COMEDOR · Mockup 2 (cas-2) — validaciones + push apoderado ── */
.prodv6-cas-valid-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px 6px;
  border-bottom: 1px solid rgba(155, 142, 240, 0.16);
  margin-bottom: 8px;
}
.prodv6-cas-valid-head strong {
  font-size: 12px;
  color: var(--c-text);
}
.prodv6-cas-valid-head span {
  font-size: 10px;
  color: rgba(45, 37, 96, 0.55);
}
.prodv6-cas-valid-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.prodv6-cas-valid-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid rgba(155, 142, 240, 0.14);
  border-radius: 7px;
  font-size: 10.5px;
}
.prodv6-cas-valid-row--ok {
  animation: prodv6CasValidRowIn 0.4s ease-out backwards;
}
.prodv6-cas-valid-row--ok:nth-child(1) { animation-delay: 0.1s; }
.prodv6-cas-valid-row--ok:nth-child(2) { animation-delay: 0.3s; }
.prodv6-cas-valid-row--ok:nth-child(3) { animation-delay: 0.5s; }
.prodv6-cas-valid-row--alert {
  background: rgba(255, 168, 80, 0.08);
  border-color: rgba(255, 168, 80, 0.32);
  animation: prodv6CasValidRowIn 0.4s ease-out 0.7s backwards;
}
@keyframes prodv6CasValidRowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.prodv6-cas-valid-check {
  color: #2E7B4A;
  font-weight: 800;
}
.prodv6-cas-valid-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C97A22;
  animation: prodv6CasValidAlertPulse 1.4s ease-in-out infinite;
}
@keyframes prodv6CasValidAlertPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.1); }
}
.prodv6-cas-valid-name {
  color: var(--c-text);
  font-weight: 500;
}
.prodv6-cas-valid-saldo {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-main);
  font-variant-numeric: tabular-nums;
}
.prodv6-cas-valid-saldo--zero { color: #C97A22; }

.prodv6-cas-valid-push {
  padding: 10px;
  background: linear-gradient(135deg, #2D2560, #4A3CAE);
  color: #fff;
  border-radius: 10px;
  margin-bottom: 8px;
  animation: prodv6CasValidPushIn 0.5s ease-out 1.4s backwards;
  box-shadow: 0 8px 20px -8px rgba(74, 60, 174, 0.5);
}
@keyframes prodv6CasValidPushIn {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.prodv6-cas-valid-push-head {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  opacity: 0.7;
  margin-bottom: 4px;
}
.prodv6-cas-valid-push strong {
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}
.prodv6-cas-valid-push p {
  font-size: 10px;
  margin: 0;
  opacity: 0.85;
  line-height: 1.4;
}
.prodv6-cas-valid-foot {
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(45, 37, 96, 0.55);
  padding-top: 4px;
}

/* ── CPA · Mockup 1 (cpa-1) — reveal de steps ── */
.prodv6-cpa-step {
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.prodv6-cpa-step.is-revealed {
  opacity: 1;
  animation: prodv6CpaStepReveal 0.4s ease-out;
}
@keyframes prodv6CpaStepReveal {
  from { transform: translateX(-6px); }
  to   { transform: translateX(0); }
}

/* ── CPA · Mockup 2 (cpa-2) — colecta con feed de aportes ── */
.prodv6-col-progress-fill {
  width: var(--w, 0%) !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.prodv6-cpa-col-feed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.prodv6-cpa-col-feed-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  background: rgba(46, 123, 74, 0.06);
  border-radius: 6px;
  font-size: 10px;
  animation: prodv6CpaColFeedIn 0.4s ease-out;
}
@keyframes prodv6CpaColFeedIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.prodv6-cpa-col-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2E7B4A;
}
.prodv6-cpa-col-feed-name {
  color: var(--c-text);
  font-weight: 500;
}
.prodv6-cpa-col-feed-amt {
  color: #2E7B4A;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── GESTIÓN · Mockup 2 (gest-2) — claim con 3 estados cíclicos ── */
.prodv6-claim-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid rgba(155, 142, 240, 0.18);
  margin-top: 6px;
}
.prodv6-claim-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: background 0.4s ease;
}
.prodv6-claim-status-dot--pending { background: #C97A22; animation: gestPendingPulse 1.4s infinite; }
.prodv6-claim-status-dot--review  { background: #5C7BD9; animation: gestReviewSpin 1s linear infinite; }
.prodv6-claim-status-dot--done    { background: #2E7B4A; box-shadow: 0 0 0 4px rgba(46, 123, 74, 0.18); }
@keyframes gestPendingPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes gestReviewSpin {
  0% { box-shadow: 0 0 0 0 rgba(92, 123, 217, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(92, 123, 217, 0); }
}
.prodv6-claim-status-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-text);
}

/* ── TALLERES · Mockup 1 (lig-1) — cupos llenándose ── */
.prodv6-lig-cupos-bar-fill {
  width: var(--w, 0%) !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.prodv6-lig-cupos-overlay {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(46, 123, 74, 0.12);
  border: 1px solid rgba(46, 123, 74, 0.32);
  border-radius: 8px;
  margin: 8px 0;
  animation: ligCuposPulse 1.4s ease-out;
}
.prodv6-lig-cupos-overlay.is-visible { display: flex; }
@keyframes ligCuposPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 123, 74, 0.40); }
  60%  { box-shadow: 0 0 0 10px rgba(46, 123, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 123, 74, 0); }
}
.prodv6-lig-cupos-overlay-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2E7B4A;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
}
.prodv6-lig-cupos-overlay strong {
  font-size: 11px;
  font-weight: 700;
  color: #2E7B4A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mock-app-cta.is-full {
  background: rgba(155, 142, 240, 0.15);
  color: var(--c-main);
}

/* ── TALLERES · Mockup 2 (lig-2) — planilla del partido en vivo ── */
.prodv6-lig-event.prodv6-lig-event--new {
  animation: ligEventIn 0.4s ease-out;
}
@keyframes ligEventIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════
   4TA PASADA · 25/05/2026 · revisión completa #productos
   ══════════════════════════════════════════════════════════════════ */

/* Subtítulo de sección */
.prodv7-section-sub {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(45,37,96,.52);
  max-width: 560px;
  margin: 8px auto 0;
  text-align: center;
}

/* Viewport fit — section completa en ≈900px */
.section-productos.prodv7 { padding: 40px 0 40px; }
.prodv7-tabs-wrap { margin-bottom: 16px !important; }
.prodv6-section-header { margin-bottom: 24px !important; }
.section-productos.prodv7 .prodv6-card {
  min-height: 0;
  height: auto;
  padding: 24px 32px;
}
.section-productos.prodv7 .prodv6-card-inner { gap: 36px; }
.section-productos.prodv7 .prodv6-card-text { gap: 8px; }

/* Outcome — número grande como elemento dominante */
.section-productos.prodv7 .prodv6-card-outcome {
  background: transparent;
  border: none;
  padding: 2px 0 4px;
  gap: 12px;
  align-items: baseline;
  max-width: none;
}
.section-productos.prodv7 .prodv6-card-outcome strong {
  font-size: clamp(40px, 3.8vw, 56px);
  font-weight: 900;
  background: linear-gradient(135deg, #6B5CE7 0%, #9B8EF0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.04em;
  line-height: .95;
}
.section-productos.prodv7 .prodv6-card-outcome span {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(45,37,96,.58);
  max-width: 230px;
}

/* Bullets — gap compacto en v7 */
.section-productos.prodv7 .prodv7-card-bullets { gap: 11px; margin: 6px 0 14px; }
.section-productos.prodv7 .prodv7-card-bullets li { font-size: 13.5px; }

/* Cross-sell chips — movidos arriba de los bullets */
.section-productos.prodv7 .prodv7-others {
  margin-top: 4px;
  margin-bottom: 10px;
  gap: 6px;
}
.section-productos.prodv7 .prodv7-others-lab { font-size: 10px; }
.section-productos.prodv7 .prodv7-others-chip { padding: 4px 10px; font-size: 11px; gap: 5px; }

/* Primer bullet — tratamiento hero */
.prodv7-card-bullets li.prodv7-bullet--hero {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(45,37,96,.90);
  background: rgba(107,92,231,.07);
  border: 1px solid rgba(107,92,231,.14);
  border-radius: 10px;
  padding: 7px 12px 7px 34px;
  margin-bottom: 4px;
  line-height: 1.42;
}
.prodv7-card-bullets li.prodv7-bullet--hero::before {
  top: 13px;
  left: 9px;
  width: 15px;
  height: 15px;
  box-shadow: 0 2px 8px rgba(107,92,231,.38);
}
.prodv7-card-bullets li.prodv7-bullet--hero strong {
  color: var(--c-main);
}
/* Keywords bold dentro de bullets normales */
.prodv7-card-bullets li strong {
  color: var(--c-deep);
  font-weight: 700;
}

/* Tab activo — pill con fondo propio */
.prodv7-tab.is-active {
  background: rgba(107,92,231,.10);
  border-radius: 8px 8px 0 0;
}

/* Barra de progreso del auto-rotate — bajo el indicador activo */
.prodv7-tab-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 3px;
  width: 0%;
  background: rgba(155,142,240,.40);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

/* ── CPA DESKTOP MOCKUP (cpa-desk) ── */
.prodv6-cpa-desk-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 8px;
}
.prodv6-cpa-desk-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  background: rgba(155,142,240,.06);
  border-radius: 8px;
}
.prodv6-cpa-desk-kpi-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--c-main);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prodv6-cpa-desk-kpi-num i { font-style: normal; font-weight: 500; color: rgba(45,37,96,.45); font-size: 12px; }
.prodv6-cpa-desk-kpi span { font-size: 9px; color: rgba(45,37,96,.5); margin-top: 3px; }
.prodv6-cpa-desk-colecta-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(45,37,96,.5);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.prodv6-cpa-desk-bar {
  width: 100%;
  height: 5px;
  background: rgba(107,92,231,.14);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.prodv6-cpa-desk-bar-fill {
  width: var(--w, 67%);
  height: 100%;
  background: linear-gradient(90deg, var(--c-mid), var(--c-light));
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.prodv6-cpa-desk-feed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  min-height: 56px;
}
.prodv6-cpa-desk-feed-item {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 7px;
  align-items: center;
  padding: 5px 8px;
  background: rgba(46,123,74,.05);
  border-radius: 6px;
  font-size: 10px;
  animation: cpaDeskFeedIn .35s ease-out;
}
@keyframes cpaDeskFeedIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.prodv6-cpa-desk-feed-dot { width: 6px; height: 6px; border-radius: 50%; background: #2E7B4A; }
.prodv6-cpa-desk-feed-name { color: var(--c-text); font-weight: 500; }
.prodv6-cpa-desk-feed-amt { color: #2E7B4A; font-weight: 700; font-variant-numeric: tabular-nums; }
.prodv6-cpa-desk-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--c-muted);
  padding-top: 6px;
  border-top: 1px solid rgba(45,37,96,.06);
}

/* ── LIGAS DESKTOP MOCKUP (lig-desk) ── */
.prodv6-lig-desk-count {
  font-size: 9px;
  font-weight: 700;
  color: var(--c-main);
  background: rgba(155,142,240,.15);
  padding: 3px 8px;
  border-radius: 999px;
}
.prodv6-lig-desk-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0;
}
.prodv6-lig-desk-row {
  display: grid;
  grid-template-columns: 8px 1fr 60px auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(107,92,231,.03);
  font-size: 10px;
}
.prodv6-lig-desk-row--active { background: rgba(107,92,231,.07); }
.prodv6-lig-desk-row--full { background: rgba(46,123,74,.05); }
.prodv6-lig-desk-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(155,142,240,.30);
}
.prodv6-lig-desk-dot--active { background: var(--c-main); animation: ligDeskDotPulse 1.8s ease-in-out infinite; }
.prodv6-lig-desk-dot--full { background: #2E7B4A; }
@keyframes ligDeskDotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(107,92,231,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(107,92,231,0); }
}
.prodv6-lig-desk-name { color: var(--c-text); font-weight: 500; }
.prodv6-lig-desk-bar-wrap {
  height: 4px;
  background: rgba(155,142,240,.18);
  border-radius: 2px;
  overflow: hidden;
}
.prodv6-lig-desk-bar-fill {
  height: 100%;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--c-mid), var(--c-light));
  border-radius: 2px;
  transition: width .5s ease;
}
.prodv6-lig-desk-row--full .prodv6-lig-desk-bar-fill { background: linear-gradient(90deg, #2E7B4A, #3DAA62); }
.prodv6-lig-desk-cupos { font-size: 9.5px; font-weight: 700; color: var(--c-deep); text-align: right; font-variant-numeric: tabular-nums; }
.prodv6-lig-desk-badge {
  font-size: 8.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .03em;
}
.prodv6-lig-desk-badge--full { background: rgba(46,123,74,.12); color: #2E7B4A; }
.prodv6-lig-desk-badge--open { background: rgba(155,142,240,.14); color: var(--c-main); }
.prodv6-lig-desk-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 7px;
  border-top: 1px solid rgba(45,37,96,.06);
  font-size: 9.5px;
  color: var(--c-muted);
}
.prodv6-lig-desk-foot strong { color: var(--c-main); font-variant-numeric: tabular-nums; }
.prodv6-lig-desk-foot-ok { color: #2E7B4A; font-weight: 600; font-size: 9px; }

/* ══════════════════════════════════════════════════════════════════
   5TA PASADA · 25/05/2026 · Flow animations — mockups desktop
   ══════════════════════════════════════════════════════════════════ */

/* ── Mock flow body — contenedor de pantallas ── */
.mock-body.mock-body--flow {
  padding: 0;
  gap: 0;
  position: relative;
  overflow: hidden;
  height: 290px;
  min-width: 290px; /* breaks intrinsic-width collapse from abs-positioned screens */
}

/* ── Screen base ── */
.mock-screen {
  position: absolute;
  inset: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FCFCFE;
  opacity: 0;
  pointer-events: none;
}
.mock-screen.is-idle    { opacity: 1; pointer-events: auto; }
.mock-screen.is-enter   { animation: msIn  .38s ease both;  pointer-events: auto; }
.mock-screen.is-exit    { animation: msOut .38s ease forwards; }
@keyframes msIn  { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes msOut { from { opacity:1; transform:translateX(0); }   to { opacity:0; transform:translateX(-20px); } }

/* ── Flow CTA button (shared) ── */
.cas-flow-cta {
  margin-top: auto;
  padding: 8px 14px;
  background: linear-gradient(135deg, #6B5CE7 0%, #9B8EF0 100%);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
  letter-spacing: .01em;
}
.cas-flow-cta.is-ready { animation: casCtaPulse .8s ease-in-out 2; }
@keyframes casCtaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(107,92,231,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(107,92,231,0); }
}

/* ── Casino · Screen 1 — Menú del día ── */
.cas-menu-list { display: flex; flex-direction: column; gap: 5px; }
.cas-menu-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(107,92,231,.04);
  border-radius: 7px;
  font-size: 10.5px;
}
.cas-menu-item--free { background: rgba(46,123,74,.04); }
.cas-menu-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-main); }
.cas-menu-dot--free { background: #2E7B4A; }
.cas-menu-name { color: var(--c-text); font-weight: 500; }
.cas-menu-price { color: var(--c-main); font-weight: 700; font-size: 10px; white-space: nowrap; }
.cas-menu-price--free { color: #2E7B4A; }
.cas-flow-kpi {
  display: flex;
  gap: 10px;
  font-size: 9px;
  color: var(--c-muted);
}
.cas-flow-kpi strong { color: var(--c-deep); font-weight: 700; }

/* ── Casino · Screen 2 — Calendario ── */
.cas-cal-days { display: flex; gap: 5px; }
.cas-cal-day {
  flex: 1;
  padding: 8px 3px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(45,37,96,.40);
  background: rgba(45,37,96,.04);
  border-radius: 8px;
  border: 1.5px solid transparent;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.cas-cal-day.is-checked {
  color: var(--c-main);
  background: rgba(107,92,231,.10);
  border-color: rgba(107,92,231,.25);
}
.cas-cal-total { font-size: 12px; color: var(--c-text); font-weight: 500; }
.cas-cal-total strong { color: var(--c-main); }
.cas-cal-note  { font-size: 9.5px; color: var(--c-muted); }
.cas-cal-note strong { color: var(--c-deep); }

/* ── Casino · Screen 3 — Confirmación (shared with CPA sent) ── */
.cas-confirm-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #2E7B4A, #3DAA62);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 700;
  margin: 6px auto 2px;
  animation: confirmPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes confirmPop {
  from { opacity:0; transform:scale(.5); }
  to   { opacity:1; transform:scale(1); }
}
.cas-confirm-title  { font-size: 14px; font-weight: 700; color: var(--c-deep); text-align: center; }
.cas-confirm-amount { font-size: 22px; font-weight: 900; color: var(--c-main); text-align: center; letter-spacing: -.03em; }
.cas-confirm-sub    { font-size: 10px; color: var(--c-muted); text-align: center; }
.cas-confirm-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; color: var(--c-muted);
  padding-top: 8px;
  border-top: 1px solid rgba(45,37,96,.06);
}

/* ── CPA · Screen 2 — Nueva colecta ── */
.cpa-new-badge {
  font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(107,92,231,.12); color: var(--c-main);
}
.cpa-new-title { font-size: 14px; font-weight: 700; color: var(--c-deep); }
.cpa-new-fields { display: flex; flex-direction: column; gap: 5px; }
.cpa-new-field {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px;
  background: rgba(107,92,231,.04);
  border-radius: 6px; font-size: 10.5px;
}
.cpa-new-field span { color: var(--c-muted); }
.cpa-new-field strong { color: var(--c-deep); font-weight: 700; }

/* ── CPA · Screen 3 — Confirmación ── */
.cpa-sent-first-pay {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: rgba(46,123,74,.06);
  border-radius: 8px; font-size: 10.5px; color: var(--c-text);
  opacity: 0;
}
.cpa-sent-first-pay.is-visible { animation: cpaSentPayIn .45s ease both; }
@keyframes cpaSentPayIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.cpa-sent-pay-ok { margin-left: auto; color: #2E7B4A; font-weight: 700; }

/* Override spacing for CPA dash screen within flow */
.mock-screen .prodv6-cpa-desk-kpis { margin: 4px 0 2px; }
.mock-screen .prodv6-cpa-desk-bar  { margin-bottom: 4px; }
.mock-screen .prodv6-cpa-desk-feed { margin-bottom: 2px; }

/* ══════════════════════════════════════════════════════════════════
   6TA PASADA · 25/05/2026 · UI polish — altura uniforme, outcomes,
   tipografía de títulos, CTA button
   ══════════════════════════════════════════════════════════════════ */

/* ── Altura uniforme — todos los paneles = 510px ── */
.section-productos.prodv7 .prodv6-card {
  height: 510px;
}
.section-productos.prodv7 .prodv6-card-text {
  justify-content: space-between;
}

/* ── Tipografía de títulos — más grandes y con más carácter ── */
.section-productos.prodv7 .prodv6-card-name {
  font-size: clamp(23px, 2.1vw, 31px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--c-deep);
}

/* ── Outcome — nuevo diseño: card contenedor, número dominante ── */
.section-productos.prodv7 .prodv6-card-outcome {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 12px;
  background: rgba(107,92,231,.05);
  border: 1px solid rgba(107,92,231,.11);
  border-radius: 14px;
  align-items: flex-start;
  max-width: none;
}

/* Fila superior: número + badge */
.outcome-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.section-productos.prodv7 .prodv6-card-outcome strong {
  font-size: clamp(44px, 4.2vw, 62px);
  font-weight: 900;
  background: linear-gradient(140deg, #5B4EDB 0%, #9B8EF0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.05em;
  line-height: .88;
}
.outcome-denom {
  font-style: normal;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 700;
  color: rgba(107,92,231,.38);
  letter-spacing: -.03em;
  line-height: 1;
}
.outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(107,92,231,.12);
  color: var(--c-main);
  align-self: center;
}
.outcome-badge--green {
  background: rgba(46,123,74,.12);
  color: #2E7B4A;
}

/* Texto descriptivo */
.outcome-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(45,37,96,.52);
  font-weight: 500;
}

/* Barra de progreso */
.outcome-bar {
  width: 100%;
  height: 3px;
  background: rgba(107,92,231,.12);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
.outcome-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--fill, 0%);
  background: linear-gradient(90deg, #5B4EDB, #9B8EF0);
  border-radius: 999px;
}

/* Ligas: número en verde */
.prodv6-card-outcome--ligas .outcome-top strong {
  background: linear-gradient(140deg, #1E6B3A 0%, #3DAA62 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.prodv6-card-outcome--ligas .outcome-denom {
  color: rgba(46,123,74,.38);
}

/* ── CTA button — rediseño completo ── */
.section-productos.prodv7 .prodv6-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px 14px 20px;
  border-radius: 13px;
  background: linear-gradient(135deg, #5B4EDB 0%, #7C6FE8 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  margin-top: 0;
  box-shadow: 0 6px 20px -8px rgba(74,60,174,.3), inset 0 1px 0 rgba(255,255,255,.16);
  will-change: transform, box-shadow;
  transition:
    transform .85s cubic-bezier(.22, 1, .36, 1),
    box-shadow .85s ease;
}
.section-productos.prodv7 .prodv6-card-cta:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 14px 28px -10px rgba(74,60,174,.38),
    0 22px 44px -16px rgba(45,37,96,.18);
}
.section-productos.prodv7 .prodv6-card-cta:active {
  transform: translateY(-2px);
  transition-duration: .25s;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 8px 20px -4px rgba(74,60,174,.4);
}
.section-productos.prodv7 .prodv6-card-cta svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 6px;
  background: rgba(255,255,255,.18);
  border-radius: 8px;
  box-sizing: border-box;
  transition:
    transform .8s cubic-bezier(.34, 1.4, .64, 1),
    background .5s ease;
}
.section-productos.prodv7 .prodv6-card-cta:hover svg {
  transform: translateX(5px) scale(1.12);
  background: rgba(255,255,255,.3);
}

/* ══════════════════════════════════════════════════════════════════
   7MA PASADA · 25/05/2026 · bullets 3×, titulos mixed-weight, CTA compacto
   ══════════════════════════════════════════════════════════════════ */

/* ── Título: base regular, partes bold-gradient y bold-dark ── */
.section-productos.prodv7 .prodv6-card-name {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.018em;
  color: var(--c-deep);
}
.prodv6-card-name .cn-em {
  display: block;
  font-weight: 800;
  background: linear-gradient(140deg, #5B4EDB 0%, #9B8EF0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.prodv6-card-name .cn-soft {
  display: block;
  font-weight: 400;
  color: rgba(45,37,96,.42);
  letter-spacing: -.018em;
  line-height: 1.2;
}
.prodv6-card-name > strong {
  display: block;
  font-weight: 800;
  color: var(--c-deep);
  background: none;
  -webkit-text-fill-color: var(--c-deep);
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* ── CTA button — compacto, pill, sin ancho forzado ── */
.section-productos.prodv7 .prodv6-card-cta {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  justify-content: flex-start;
  padding: 10px 14px 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  gap: 8px;
}
.section-productos.prodv7 .prodv6-card-cta svg {
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 999px;
}

/* ══════════════════════════════════════════════════════════════════
   8VA PASADA · 25/05/2026 · CTA fijo abajo, bullets discretos,
   títulos 2 líneas, verde ligas vibrante
   ══════════════════════════════════════════════════════════════════ */

/* ── CTA siempre al fondo: texto se estira + CTA empuja hacia abajo ── */
.section-productos.prodv7 .prodv6-card-text {
  align-self: stretch;
}
.section-productos.prodv7 .prodv6-card-cta {
  margin-top: auto;
}

/* ── Bullet circles: pequeños y discretos ── */
.section-productos.prodv7 .prodv7-card-bullets li {
  padding-left: 16px;
  font-size: 13px;
}
.section-productos.prodv7 .prodv7-card-bullets li::before {
  width: 5px;
  height: 5px;
  top: 6px;
  background: rgba(107,92,231,.45);
  box-shadow: none;
}

/* ── Títulos: segunda línea (cn-2) con inline strong bold ── */
.prodv6-card-name .cn-2 {
  display: block;
  font-weight: 400;
  color: var(--c-deep);
  letter-spacing: -.018em;
  line-height: 1.2;
}
.prodv6-card-name .cn-2 strong {
  font-weight: 800;
  background: linear-gradient(90deg, #4A3CAE 0%, #5B4EDB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Ligas outcome: verdes del mockup ── */
.section-productos.prodv7 .prodv6-card-outcome--ligas {
  background: rgba(40,200,64,.07);
  border: 1px solid rgba(46,123,74,.2);
}
.section-productos.prodv7 .prodv6-card-outcome--ligas .outcome-desc {
  color: rgba(45,37,96,.55);
}
.section-productos.prodv7 .prodv6-card-outcome--ligas .outcome-top strong {
  background: linear-gradient(140deg, #28C840 0%, #22A63C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-productos.prodv7 .prodv6-card-outcome--ligas .outcome-denom {
  color: #2E7B4A;
  -webkit-text-fill-color: #2E7B4A;
}
.section-productos.prodv7 .prodv6-card-outcome--ligas .outcome-badge--green {
  background: rgba(46,123,74,.12);
  color: #2E7B4A;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ── Números grandes: sin corte lateral ni vertical ── */
.section-productos.prodv7 .prodv6-card-outcome strong {
  line-height: 1;
  padding: 4px 4px 0;
}

/* ── Tag pill: más margen inferior hacia el título ── */
.section-productos.prodv7 .prodv6-card-name {
  margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════════════
   9NA PASADA · 26/05/2026 · Animaciones fluidas v3
   ══════════════════════════════════════════════════════════════════ */

/* Panel: dissolve puro — cero movimiento, cero scale.
   TODOS los cards siempre position: absolute para eliminar el
   reflow de layout que causaba el efecto "costado" al cambiar.
   El stack obtiene su altura sólo del min-height (sin carta relativa).
   Sin ningún transform: SOLO opacity cambia → dissolve limpio. */
.section-productos.prodv7 .prodv6-card,
.section-productos.prodv7 .prodv6-card.is-active {
  position: absolute !important;
  top: 0 !important;
  left: 0; right: 0; bottom: 0;
  margin-top: 0;
  transform: none;
}
.section-productos.prodv7 .prodv6-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition:
    opacity .8s ease,
    visibility 0s linear .8s;
}
.section-productos.prodv7 .prodv6-card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition:
    opacity .8s ease,
    visibility 0s linear 0s;
}

/* ── Tabs: fondo track + pill que desliza ──
   El indicador deja de ser un underline y pasa a ser un pill
   de altura completa que se mueve entre tabs (iOS-style).
   El track tiene un fondo sutil para que el pill tenga contraste. */
.section-productos.prodv7 .prodv7-tabs {
  background: rgba(107,92,231,.06);
  border-radius: 12px;
  border-bottom: none;
  padding: 4px;
  gap: 0;
}

/* El pill ocupa toda la altura del track (top/bottom = padding del track) */
.prodv7-tab-indicator {
  top: 4px;
  bottom: 4px;
  height: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow:
    0 1px 4px rgba(74,60,174,.10),
    0 0 0 1px rgba(107,92,231,.09);
  /* Slide fluido — más lento, sin bounce, puro desliz */
  transition:
    transform .52s cubic-bezier(0.4, 0, 0.2, 1),
    width     .52s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Barra de progreso: invisible con el nuevo pill */
.section-productos.prodv7 .prodv7-tab-progress { display: none; }

/* Tab labels: color y opacidad con fade suave */
.prodv7-tab {
  transition: color .25s ease;
}
.prodv7-tab-icon {
  transition: opacity .25s ease;
}

/* ══════════════════════════════════════════════════════════════════
   COMEDOR · Mockup integrado del módulo (apoderado paga → admin
   concilia en vivo). Embedido como iframe del archivo standalone
   mockups/mockup-comedor-modulo.html (900×520 px). Se escala
   responsivamente usando container queries.
   ══════════════════════════════════════════════════════════════════ */
.prodv6-mock--modulo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: none !important; /* anula el rotate del .prodv6-mock--hero */
}

.cmodulo-stage {
  width: 100%;
  max-width: 920px;
  aspect-ratio: 900 / 600;
  position: relative;
  /* Sin recuadro: el mockup standalone ya trae su propio card framing.
     Solo posicionamos / escalamos. overflow:visible para que la sombra
     interna del mockup pueda respirar fuera del bounding box. */
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  container-type: inline-size;
  margin: 0 auto;
}

/* Paneles Comedor + CPA: mantener el grid default 0.85fr 1.15fr de
   .prodv6-card-inner · el mockup integrado se acomoda al ancho natural
   de la columna sin apretar el texto de la izquierda. */

.cmodulo-iframe {
  position: absolute;
  top: 0;
  left: 0;
  /* HiDPI: iframe natural a 2x (1800×1200) y mockup interno con
     transform:scale(2). Al escalar hacia abajo el iframe vía CSS,
     el browser downsample una imagen rasterizada a doble densidad
     → texto, sombras y SVGs significativamente más nítidos en
     pantallas retina/4k. */
  width: 1800px;
  height: 1200px;
  border: 0;
  display: block;
  transform-origin: top left;
  transform: scale(calc(100cqi / 1800px));
  pointer-events: none; /* mockup decorativo · no interactivo */
  background: transparent;
  image-rendering: -webkit-optimize-contrast;
  will-change: transform;
}

/* Fallback para navegadores sin container queries: usa media queries
   sobre viewport con escala fija. Iframe natural ahora es 1800px. */
@supports not (container-type: inline-size) {
  .cmodulo-iframe { transform: scale(0.39); }
  @media (max-width: 1100px) { .cmodulo-iframe { transform: scale(0.31); } }
  @media (max-width: 820px)  { .cmodulo-iframe { transform: scale(0.25); } }
  @media (max-width: 540px)  { .cmodulo-iframe { transform: scale(0.20); } }
}

/* En el panel del producto en home, ajustar al ancho real de la
   columna de mocks (~640px). En desktop ≥1100px funciona bien con
   max-width: 720px del .cmodulo-stage. */
@media (max-width: 820px) {
  .cmodulo-stage { max-width: 100%; border-radius: 18px; }
}

/* ─── R1 · Ecosistema centrado en mobile ─────────────────────────────
   Solo mobile (≤540px). El desktop conserva la columna izquierda
   alineada a flex-start (regla base intacta). */
@media (max-width: 540px) {
  .prodv6-closing-text {
    align-items: center;
    text-align: center;
    margin-inline: auto;
    gap: 14px;
  }
  .eco-kicker { align-self: center; margin-bottom: 4px; }
  .prodv6-closing-title,
  .prodv6-closing-body { text-align: center; }
  .prodv6-closing-body { margin-inline: auto; }
  .eco-cta-btn { align-self: center; margin-top: 22px; }
}

/* ─── R3 · Ecosistema en iPad/tablet ──────────────────────────────────
   A ≤1100px la regla base ya pasa .prodv6-closing-inner a 1 columna
   (texto arriba, grid 2×2 abajo). El texto quedaba alineado a la izquierda
   → desbalanceado (vacío a la derecha). Lo dividimos por orientación:
   · VERTICAL  → 1 columna con el texto CENTRADO (como en celular).
   · HORIZONTAL (1024 del iPad 6) → volvemos a 2 columnas (texto | grid),
     igual que ya ven en landscape los iPad ≥1101px. */
@media (min-width: 541px) and (max-width: 1100px) and (orientation: portrait) {
  .prodv6-closing-text {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }
  .eco-kicker { align-self: center; margin-bottom: 4px; }
  .prodv6-closing-title,
  .prodv6-closing-body { text-align: center; }
  .prodv6-closing-body { margin-inline: auto; }
  .eco-cta-btn { align-self: center; }
  /* Un respiro menos gigante entre texto y grid que el gap base (80px). */
  .prodv6-closing-inner { gap: 40px !important; }
}

@media (min-width: 721px) and (max-width: 1100px) and (orientation: landscape) {
  /* 2 columnas (texto | grid) como desktop, con gap más ajustado al ancho. */
  .prodv6-closing-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: center;
  }
}