/* ============ HERO + NAV + CLIENTS + CHAT SECTION ============ */


  html, body { margin: 0; background: #05021A; color: #fff; min-height: 100%; }
  a { text-decoration: none; color: inherit; }
  button { font-family: var(--font-sans); }

  /* ----- Page shell ----- */
  .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #05021A;
  }

  /* ----- Hero shell -----
     The hero is a fixed-ratio STAGE that matches the video aspect. All inner
     sizes use container query units (cqw / cqh) so text stays in the exact
     same place relative to the video — regardless of viewport size or browser
     zoom. The aspect ratio is overwritten via JS once video metadata loads. */
  .hero {
    --ar-num: 1.7778;          /* width / height (overwritten by JS) */
    position: relative;
    width: 100%;
    max-width: 2560px;         /* el video se muestra a 2560×1440 (16:9) como máximo */
    aspect-ratio: var(--ar-num);
    min-height: 540px;
    overflow: hidden;
    isolation: isolate;
    container-type: size;
    margin: 0 auto;
  }
  .hero-video, .hero-video-fb {
    position: absolute; inset: 0; width: 100%; height: 100%;
    /* CONTAIN: el video se ve íntegro siempre, sin recortes.
       Las franjas que aparecen en pantallas más anchas/altas que el
       video se rellenan con el fondo de marca abajo (.hero-bg). */
    object-fit: contain;
    object-position: center center;
    background: transparent;
    z-index: 1;
    display: block;
  }
  /* Branded letterbox — fills the bands left when the video is
     contained inside a viewport with a different aspect ratio. */
  .hero-bg {
    position: absolute; inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 60% 80% at 30% 35%, rgba(255, 91, 217, .22), transparent 60%),
      radial-gradient(ellipse 70% 70% at 75% 65%, rgba(143, 169, 251, .18), transparent 60%),
      #05021A;
  }

  /* RESPONSIVE BREAKPOINTS for the hero stage
     -------------------------------------------------------------- */

  /* Wide-and-short viewports: keep the 16:9 stage (and its 2560×1440 cap)
     so the video always renders at its true ratio and the text overlaid on
     it stays anchored in the same place. The stage scales down on narrower
     screens but never breaks its aspect ratio. */
  @media (min-aspect-ratio: 16/10) {
    .hero {
      aspect-ratio: var(--ar-num);
      height: auto;
    }
  }

  /* Ultra-wide (>2:1) — same behaviour, just makes sure the headline
     still has breathing room by raising the minimum. */
  @media (min-aspect-ratio: 2/1) {
    .hero {
      min-height: 600px;
    }
  }
  /* Fallback gradient (in case video fails / before play) */
  .hero-video-fb { background: var(--grad-spark); object-fit: cover; }

  /* The HTML logo — sits INSIDE .hero-content above the headline
     so it shares the same anchor / padding / alignment as the text and
     moves with it across viewport sizes. */
  .hero-logo-mark {
    display: block;
    width: 22cqw;
    max-width: 320px;
    min-width: 160px;
    height: auto;
    margin-bottom: 2.5cqh;
    filter: drop-shadow(0 10px 36px rgba(0, 0, 0, .35));
    user-select: none;
    pointer-events: none;
  }
  .hero[data-align="center"] .hero-logo-mark { align-self: center; }
  @media (max-width: 720px) {
    .hero-logo-mark { width: 44cqw; max-width: 220px; margin-bottom: 18px; }
  }

  /* Tinted overlay – tuned per tweak */
  .hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(80% 60% at 20% 30%, rgba(11, 37, 253, .35), transparent 70%),
      radial-gradient(70% 70% at 85% 90%, rgba(126, 91, 217, .35), transparent 70%),
      linear-gradient(180deg, rgba(14, 11, 46, .35) 0%, rgba(14, 11, 46, .55) 60%, rgba(14, 11, 46, .85) 100%);
  }
  .hero-grain {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    opacity: .08; mix-blend-mode: overlay;
    background-image:
      radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
      radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
  }

  /* ----- Nav ----- */
  .nav-bar {
    position: relative; z-index: 20;
    background: #05021A;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nav {
    display: flex; align-items: center;
    gap: clamp(18px, 2.2vw, 36px);
    padding: clamp(16px, 1.6vw, 22px) clamp(24px, 3vw, 48px);
    max-width: 1600px; width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .nav-brand { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
  .nav-logo {
    height: clamp(38px, 3.2vw, 52px);
    width: auto;
    display: block;
  }
  .nav-eyebrow {
    display: inline-block;
    font-size: clamp(11px, 0.78vw, 13px);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tf-spark);
    padding-left: 14px;
    border-left: 2px solid rgba(255, 91, 217, .55);
    line-height: 1.25;
    white-space: nowrap;
  }
  @media (max-width: 1080px) { .nav-eyebrow { display: none; } }
  .nav-links {
    display: flex; gap: clamp(18px, 2vw, 30px);
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 500;
    color: rgba(255,255,255,.82);
    align-items: center;
    margin-left: auto;
  }
  .nav-links a { transition: color var(--dur-1) var(--ease-out); white-space: nowrap; }
  .nav-links a:hover { color: #fff; }
  .nav-cta { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }

  /* ----- Buttons ----- */
  /* ----- Buttons (scale with stage in desktop) ----- */
  .btn {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95cqw;
    border-radius: 999px;
    padding: 0.85cqw 1.6cqw;
    border: none; cursor: pointer;
    transition: all 200ms var(--ease-out);
    display: inline-flex; align-items: center; gap: 0.5cqw;
    white-space: nowrap;
  }
  .btn-primary {
    background: #fff; color: var(--tf-navy);
    box-shadow: 0 8px 28px rgba(255, 255, 255, .25), 0 2px 4px rgba(11, 12, 50, .35);
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(255,255,255,.32), 0 4px 8px rgba(11,12,50,.4); }
  .btn-primary:active { transform: scale(.98); }
  .btn-ghost {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px);
  }
  .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }
  .btn-link {
    background: transparent; color: rgba(255,255,255,.85);
    padding: 12px 6px; font-size: 14px;
  }
  .btn-sm { padding: 10px 18px; font-size: 13px; }

  /* ----- Hero content (anchored to bottom-left, lives in the lower
     half of the stage so it never collides with the video logo) ----- */
  /* ----- Hero content (anchored to bottom-left, can fill the full
     stage now that we use our own HTML logo instead of one baked into
     the video) ----- */
  .hero-content {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 5;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 4cqh 6cqw 4cqh;
    box-sizing: border-box;
    gap: 0;
  }

  .eyebrow-row {
    display: inline-flex; align-items: center; gap: 10px;
    align-self: flex-start;
    /* Push the rest of the content (eyebrow → ctas) to the bottom of
       the hero while keeping the logo anchored to the top, so the logo
       can't get clipped by overflow. */
    margin-top: auto;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-pill);
    padding: 7px 14px 7px 8px;
    margin-bottom: 28px;
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
  }
  .eyebrow-dot {
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--tf-spark);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px;
    box-shadow: 0 0 0 4px rgba(255, 91, 217, .25);
  }
  .eyebrow-product { color: var(--tf-spark); }

  .h-pretag {
    display: inline-flex; align-items: center; gap: 0.6cqw;
    align-self: flex-start;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95cqw;
    padding: 0.7cqw 1.3cqw;
    border-radius: 999px;
    margin-bottom: 2.4cqh;
    cursor: pointer;
    transition: all 200ms var(--ease-out);
    text-shadow: 0 1px 6px rgba(5, 2, 26, .35);
    white-space: nowrap;
  }
  .h-pretag:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .38);
    transform: translateY(-1px);
  }
  .h-pretag .arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5cqw; height: 1.5cqw;
    min-width: 18px; min-height: 18px;
    border-radius: 999px;
    background: var(--tf-spark);
    color: #fff;
    font-size: 0.85cqw;
    line-height: 1;
  }

  .h-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.6cqw;
    line-height: 1.05;
    letter-spacing: -0.026em;
    color: #fff;
    margin: 0;
    text-wrap: balance;
    max-width: 15ch;
    text-shadow: 0 2px 24px rgba(5, 2, 26, .35);
  }
  .h-headline .stanza-gap { display: block; height: 0.25em; }
  .h-headline .strike {
    color: rgba(255,255,255,.40);
    position: relative;
    display: inline-block;
    font-weight: 600;
  }
  .h-headline .strike::after {
    content: ""; position: absolute;
    left: -2%; right: -2%; top: 54%;
    height: 0.18em;
    background: linear-gradient(90deg, rgba(255, 91, 217, .95), rgba(143, 169, 251, .95));
    transform: rotate(-2.4deg);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(255, 91, 217, .55);
  }
  .h-headline .accent {
    background: linear-gradient(110deg, #FFC0E5 0%, #FF5BD9 40%, #8FA9FB 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .h-headline em {
    font-style: normal;
    color: #FFC0E5;
  }

  .h-sub {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.05cqw;
    line-height: 1.5;
    color: rgba(255,255,255,.88);
    margin: 1.6cqh 0 0;
    max-width: 46cqw;
    text-wrap: pretty;
    text-shadow: 0 1px 12px rgba(5, 2, 26, .35);
  }

  .h-ctas {
    display: flex; gap: 0.8cqw; align-items: center;
    margin-top: 2cqh;
    flex-wrap: wrap;
  }
  .h-meta {
    margin-top: 1.4cqh;
    font-size: 0.82cqw;
    color: rgba(255,255,255,.6);
    display: inline-flex; align-items: center; gap: 0.6cqw;
  }
  .h-meta::before {
    content: ""; width: 0.5cqw; height: 0.5cqw;
    min-width: 5px; min-height: 5px;
    background: #1FB582; border-radius: 999px;
    box-shadow: 0 0 0 0.25cqw rgba(31, 181, 130, .22);
  }
  .h-demo-meta {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 4px;
  }
  .h-demo-meta::before {
    content: ""; width: 6px; height: 6px;
    background: #1FB582; border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(31, 181, 130, .25);
  }

  .pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8cqw;
    margin-top: 3cqh;
    width: min(56cqw, 100%);
  }
  .pillar {
    position: relative;
    padding: 1.1cqw 1.1cqw 1.2cqw;
    border-radius: 1cqw;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    transition: all 200ms var(--ease-out);
  }
  .pillar:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
    transform: translateY(-2px);
  }
  .pillar-num {
    font-family: var(--font-display);
    font-size: 0.7cqw;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(255,255,255,.40);
    margin-bottom: 0.4cqw;
  }
  .pillar-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.05cqw;
    color: #fff;
    margin: 0 0 0.3cqw;
    letter-spacing: -0.005em;
  }
  .pillar-desc {
    font-size: 0.82cqw;
    line-height: 1.45;
    color: rgba(255,255,255,.62);
    margin: 0;
  }
  .pillar-icon {
    position: absolute; top: 0.9cqw; right: 0.9cqw;
    width: 1.9cqw; height: 1.9cqw;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(255, 91, 217, .14);
    color: var(--tf-spark);
  }
  .pillar-icon svg { display: block; width: 55%; height: 55%; }

  /* ----- Floating "vs" comparison card ----- */
  .vs-card {
    position: absolute;
    z-index: 8;
    right: 40px; top: 50%;
    transform: translateY(-46%);
    width: 320px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 70px rgba(11, 12, 50, .45), 0 0 0 1px rgba(255,255,255,.5) inset;
    padding: 22px 22px 18px;
    color: var(--tf-navy);
  }
  .vs-card h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--tf-navy);
    margin: 0 0 14px;
  }
  .vs-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--tf-haze);
  }
  .vs-row:first-of-type { border-top: 0; }
  .vs-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--tf-slate);
  }
  .vs-bar {
    position: relative; height: 8px; border-radius: 999px;
    background: var(--tf-haze); overflow: hidden;
  }
  .vs-bar > i {
    display: block; height: 100%;
    border-radius: 999px;
    background: var(--tf-mist);
  }
  .vs-bar.full > i {
    background: linear-gradient(90deg, var(--tf-blue), var(--tf-violet));
    box-shadow: 0 0 12px rgba(126, 91, 217, .55);
  }
  .vs-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tf-haze);
  }
  .vs-tag {
    font-size: 10.5px;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
  }
  .vs-tag.basic { background: var(--tf-haze); color: var(--tf-slate); }
  .vs-tag.brand {
    background: var(--grad-blue); color: #fff;
    box-shadow: var(--shadow-glow-blue);
  }
  .vs-vs {
    font-family: var(--font-display); font-weight: 700;
    font-size: 13px; color: var(--tf-steel);
  }

  /* ----- Scroll cue ----- */
  .scroll-cue {
    position: absolute; bottom: 2cqh; right: 2cqw;
    z-index: 6;
    display: inline-flex; align-items: center; gap: 0.5cqw;
    color: rgba(255,255,255,.55);
    font-size: 0.72cqw;
    letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  }
  .scroll-cue::after {
    content: "↓";
    display: inline-block;
    font-size: 1.05em;
    color: var(--tf-spark);
    animation: scroll-cue 2.2s ease-in-out infinite;
  }
  @keyframes scroll-cue {
    0%, 100% { transform: translateY(0); opacity: .7; }
    50%      { transform: translateY(4px); opacity: 1; }
  }

  /* ----- Sparkles ----- */
  .sparkle {
    position: absolute; z-index: 7;
    color: var(--tf-spark);
    filter: drop-shadow(0 0 10px rgba(255, 91, 217, .55));
    animation: sparkle 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes sparkle {
    0%, 100% { opacity: .35; transform: scale(.85) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.1) rotate(20deg); }
  }

  /* ----- Layout mode: left vs center ----- */
  .hero[data-align="center"] .hero-content { align-items: center; text-align: center; }
  .hero[data-align="center"] .eyebrow-row,
  .hero[data-align="center"] .h-headline,
  .hero[data-align="center"] .h-sub { align-self: center; }
  .hero[data-align="center"] .h-sub { max-width: 60cqw; }
  .hero[data-align="center"] .h-ctas { justify-content: center; }
  .hero[data-align="center"] .pillars { margin-left: auto; margin-right: auto; }

  /* =========================================================
     CHAT SECTION — "Hablemos ahora"
     The widget slot (#talkinfor-chat-widget) is the message area
     of a real-looking chat window. Header + composer are part of
     the page itself, so when you embed your widget inside the
     slot it inherits the same frame and never reads as a patch.
     ========================================================= */
  /* =========================================================
     CLIENTS STRIP — infinite marquee
     - Sits between hero and chat-bridge, on the same #05021A canvas
       so it reads as a natural continuation of the hero.
     - Logos default to white-monochrome at 55% opacity. Hover reveals
       the original color (recommended for conversion: trust without
       stealing attention from the CTA).
     - Track duplicated 2x so the loop is seamless. Adding more logos
       only requires extending the CLIENTS array — no JS change.
     ========================================================= */
  .clients {
    position: relative;
    background: #05021A;
    padding: 70px 0 64px;
    overflow: hidden;
    isolation: isolate;
  }
  /* Bottom glow that anticipates the chat-bridge atmosphere —
     same blue/violet/spark blobs leaking up from below, so the eye
     reads clients + bridge as one continuous region instead of two
     stacked bands. */
  .clients::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -120px;
    height: 320px;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(50% 70% at 50% 100%, rgba(126, 91, 217, .42), transparent 70%),
      radial-gradient(40% 60% at 22% 110%, rgba(11, 37, 253, .35), transparent 70%),
      radial-gradient(40% 60% at 80% 105%, rgba(255, 91, 217, .25), transparent 70%);
    filter: blur(24px);
  }
  .clients > * { position: relative; z-index: 1; }
  .clients-head {
    text-align: center;
    margin: 0 auto 40px;
    padding: 0 24px;
    max-width: 820px;
  }
  .clients-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 16px;
  }
  .clients-eyebrow::before, .clients-eyebrow::after {
    content: ""; width: 28px; height: 1px;
    background: rgba(255,255,255,.22);
  }
  .clients-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.018em;
    color: #fff;
    margin: 0;
    text-wrap: balance;
  }
  .clients-title em {
    font-style: normal;
    background: linear-gradient(110deg, #FFC0E5 0%, #FF5BD9 40%, #8FA9FB 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* viewport with edge-fade masks so logos drift in/out softly */
  .clients-viewport {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .clients-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: clients-scroll 90s linear infinite;
    will-change: transform;
  }
  .clients-viewport:hover .clients-track { animation-play-state: paused; }
  @keyframes clients-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  .logo-item {
    flex-shrink: 0;
    height: 220px;
    min-width: 340px;
    display: inline-flex; align-items: center; justify-content: center;
    /* Los PNG ya son blancos sobre transparente. Aplicamos opacidad
       para integración + un sutil contrast/brightness boost en hover. */
    opacity: .55;
    transition: opacity 220ms var(--ease-out), filter 220ms var(--ease-out), transform 220ms var(--ease-out);
    /* placeholder styling cuando no hay src */
    color: rgba(255,255,255,.62);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .logo-item:hover {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(255, 91, 217, .35));
    transform: scale(1.05);
    color: #fff;
  }
  .logo-item img {
    max-height: 100%;
    max-width: 600px;
    width: auto; height: auto;
    display: block;
    object-fit: contain;
  }

  @media (max-width: 640px) {
    .clients { padding: 56px 0 52px; }
    .clients-track { gap: 16px; animation-duration: 70s; }
    .logo-item { height: 130px; min-width: 220px; font-size: 16px; }
    .logo-item img { max-width: 320px; }
  }

  /* ---- transition zone above the chat section ----
     A tall, full-bleed band that sits AFTER the hero ends and BEFORE
     the chat composition begins. It hosts decorative elements that
     bridge the two regions: a soft glow continuation, a floating
     "incoming message" bubble that pokes up out of the chat into the
     hero's tail, and a handful of sparkles. */
  .chat-bridge {
    position: relative;
    height: 180px;
    background: transparent;
    margin-top: -40px;
    overflow: visible;
    isolation: isolate;
  }
  .chat-bridge-glow {
    position: absolute; left: 0; right: 0; top: -200px; bottom: -120px;
    background:
      radial-gradient(55% 70% at 50% 60%, rgba(126, 91, 217, .42), transparent 70%),
      radial-gradient(40% 55% at 22% 70%, rgba(11, 37, 253, .38), transparent 70%),
      radial-gradient(40% 55% at 80% 65%, rgba(255, 91, 217, .26), transparent 70%);
    filter: blur(28px);
    z-index: 0; pointer-events: none;
  }
  /* organic curved "melt" line drawn with a soft gradient — the eye reads
     it as the two regions dissolving into each other, not a seam */
  .chat-bridge-melt {
    position: absolute; left: 50%; top: 0;
    width: 140%; height: 220px;
    transform: translate(-50%, -55%);
    background: radial-gradient(closest-side, rgba(14, 11, 46, .9) 0%, rgba(14, 11, 46, .5) 40%, transparent 75%);
    z-index: 1; pointer-events: none;
    filter: blur(10px);
  }
  /* floating "preview" chat bubble straddling the seam */
  .chat-preview {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 20px 14px 14px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(18px);
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 14px; font-weight: 500;
    box-shadow: 0 24px 60px rgba(11, 12, 50, .55), 0 0 60px rgba(255, 91, 217, .18);
    white-space: nowrap;
    transform-origin: center;
    animation:
      chat-preview-in 900ms var(--ease-out) both,
      chat-preview-float 16s ease-in-out 900ms infinite,
      chat-preview-glow 3.4s ease-in-out 900ms infinite;
  }
  .chat-preview-avatar {
    width: 28px; height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF5BD9 0%, #8FA9FB 100%);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 0 16px rgba(255, 91, 217, .55);
    flex-shrink: 0;
  }
  .chat-preview-text strong { color: #fff; font-weight: 700; }
  .chat-preview-text {
    color: rgba(255,255,255,.88);
    line-height: 1.2;
  }
  .chat-preview-time {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    margin-top: 2px;
    letter-spacing: .04em;
  }
  @keyframes chat-preview-in {
    0%   { transform: translate(-50%, calc(-50% + 18px)) rotate(0deg) scale(.92); opacity: 0; }
    60%  { transform: translate(-50%, calc(-50% - 4px))  rotate(0deg) scale(1.02); opacity: 1; }
    100% { transform: translate(-50%, -50%)              rotate(0deg) scale(1);    opacity: 1; }
  }
  /* Free float across the viewport — horizontal drift, vertical bob,
     and a gentle rotation sway that crosses zero (never locked tilted). */
  @keyframes chat-preview-float {
    0%   { transform: translate(calc(-50% - 30vw), -50%) rotate(0deg)    translateY(0); }
    15%  { transform: translate(calc(-50% - 18vw), -50%) rotate(1.5deg)  translateY(-12px); }
    30%  { transform: translate(calc(-50% - 4vw),  -50%) rotate(-1.2deg) translateY(-6px); }
    45%  { transform: translate(calc(-50% + 12vw), -50%) rotate(2deg)    translateY(-14px); }
    60%  { transform: translate(calc(-50% + 26vw), -50%) rotate(-0.8deg) translateY(-5px); }
    75%  { transform: translate(calc(-50% + 6vw),  -50%) rotate(1.8deg)  translateY(-11px); }
    90%  { transform: translate(calc(-50% - 14vw), -50%) rotate(-1.5deg) translateY(-7px); }
    100% { transform: translate(calc(-50% - 30vw), -50%) rotate(0deg)    translateY(0); }
  }
  @keyframes chat-preview-glow {
    0%, 100% { box-shadow: 0 24px 60px rgba(11, 12, 50, .55), 0 0 50px rgba(255, 91, 217, .15); }
    50%      { box-shadow: 0 28px 70px rgba(11, 12, 50, .60), 0 0 90px rgba(255, 91, 217, .35); }
  }
  /* pulse ring on the avatar to signal "live" */
  .chat-preview-avatar::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 2px solid rgba(255, 91, 217, .5);
    animation: chat-preview-ring 2.2s ease-out infinite;
  }
  .chat-preview-avatar { position: relative; }
  @keyframes chat-preview-ring {
    0%   { transform: scale(.85); opacity: .9; }
    100% { transform: scale(1.6); opacity: 0; }
  }
  /* sparkles scattered through the bridge */
  .bridge-spark {
    position: absolute;
    color: var(--tf-spark);
    filter: drop-shadow(0 0 12px rgba(255, 91, 217, .65));
    animation: sparkle 5s ease-in-out infinite;
    z-index: 3; pointer-events: none;
  }

  .chat-section {
    position: relative;
    background: transparent;
    margin-top: -40px;
    padding: 80px 40px 140px;
    overflow: hidden;
    isolation: isolate;
  }
  /* base canvas under the chat section so the bridge glow can still bleed */
  .chat-section::after {
    content: "";
    position: absolute; inset: 0;
    background: #05021A;
    z-index: -2;
  }
  .chat-glow {
    position: absolute; z-index: 0; pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
  }
  .chat-glow-1 {
    top: -10%; left: -8%;
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(11, 37, 253, .55), transparent 70%);
  }
  .chat-glow-2 {
    bottom: -20%; right: -10%;
    width: 65%; height: 75%;
    background: radial-gradient(circle, rgba(126, 91, 217, .45), transparent 70%);
  }
  .chat-glow-3 {
    top: 30%; right: 20%;
    width: 25%; height: 25%;
    background: radial-gradient(circle, rgba(255, 91, 217, .35), transparent 70%);
    opacity: .6;
  }

  .chat-inner {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 540px;
    gap: 80px;
    max-width: 1280px;
    margin: 0 auto;
    align-items: center;
  }

  /* ---- left column: copy ---- */
  .chat-copy { color: #fff; }
  .chat-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.92);
    margin-bottom: 28px;
  }
  .chat-eyebrow svg { color: var(--tf-spark); filter: drop-shadow(0 0 8px rgba(255,91,217,.6)); }
  .chat-eyebrow .live-dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: #1FB582;
    box-shadow: 0 0 0 4px rgba(31, 181, 130, .22);
  }

  .chat-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 4.2vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0 0 22px;
    text-wrap: balance;
  }
  .chat-headline em {
    font-style: normal;
    color: rgba(255,255,255,.4);
    font-weight: 600;
    position: relative;
    display: inline-block;
  }
  .chat-headline em::after {
    content: "";
    position: absolute;
    left: -2%; right: -2%; top: 56%;
    height: 0.14em;
    background: linear-gradient(90deg, rgba(255, 91, 217, .9), rgba(143, 169, 251, .9));
    transform: rotate(-2deg);
    border-radius: 999px;
  }
  .chat-headline .accent {
    background: linear-gradient(110deg, #FFC0E5 0%, #FF5BD9 40%, #8FA9FB 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  .chat-sub {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255,255,255,.78);
    margin: 0 0 32px;
    max-width: 46ch;
    text-wrap: pretty;
  }

  .chat-prompts {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .chat-prompts-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: 6px;
  }
  .chat-prompt {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.88);
    cursor: pointer;
    transition: all 180ms var(--ease-out);
    text-align: left;
    width: 100%;
    font-family: var(--font-sans);
  }
  .chat-prompt:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255, 91, 217, .35);
    transform: translateX(2px);
  }
  .chat-prompt .arrow-mini {
    margin-left: auto;
    color: var(--tf-spark);
    opacity: 0; transform: translateX(-4px);
    transition: all 180ms var(--ease-out);
  }
  .chat-prompt:hover .arrow-mini { opacity: 1; transform: translateX(0); }

  /* ---- WhatsApp CTA ---- */
  .wa-block {
    margin-top: 26px;
  }
  .wa-label {
    margin-bottom: 16px;
  }
  .wa-live {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.62);
  }
  .wa-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 0 0 rgba(37,211,102,.6);
    animation: wa-pulse 2s infinite;
  }
  @keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  .wa-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex; align-items: center; gap: 16px;
    width: 100%;
    padding: 17px 22px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2bdd6e 0%, #1aa850 100%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 40px -14px rgba(37,211,102,.6), inset 0 1px 0 rgba(255,255,255,.28);
    color: #052b16;
    font-family: var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  }
  .wa-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 52px -14px rgba(37,211,102,.75), inset 0 1px 0 rgba(255,255,255,.34);
  }
  .wa-cta-shine {
    position: absolute; top: 0; left: -120%;
    width: 70%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg);
    animation: wa-shine 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes wa-shine {
    0%, 60%  { left: -120%; }
    85%, 100% { left: 130%; }
  }
  .wa-cta-icon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border-radius: 50%;
    background: #fff;
    color: #1aa850;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,.25);
  }
  .wa-cta-copy {
    position: relative;
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
  }
  .wa-cta-text {
    font-size: 16px; font-weight: 800; line-height: 1.2;
    letter-spacing: -.01em;
  }
  .wa-cta-sub {
    font-size: 12.5px; font-weight: 600; line-height: 1.2;
    color: rgba(5,43,22,.66);
  }
  .wa-cta-arrow {
    position: relative;
    flex: none;
    font-size: 20px; font-weight: 700;
    transition: transform 220ms var(--ease-out);
  }
  .wa-cta:hover .wa-cta-arrow { transform: translateX(4px); }

  /* ---- right column: chat frame ---- */
  .chat-frame {
    position: relative;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    backdrop-filter: blur(24px);
    box-shadow:
      0 40px 80px rgba(11, 12, 50, .55),
      0 0 0 1px rgba(255,255,255,.04) inset,
      0 0 80px rgba(255, 91, 217, .12);
    overflow: hidden;
    height: 620px;
    display: flex; flex-direction: column;
  }
  /* Halo behind the frame so it doesn't read as a flat card */
  .chat-frame::before {
    content: "";
    position: absolute; inset: -2px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(255, 91, 217, .35) 0%, transparent 35%, transparent 65%, rgba(143, 169, 251, .35) 100%);
    z-index: -1;
    filter: blur(1px);
    opacity: .8;
  }

  /* header strip — AI identity */
  .chat-frame-header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .chat-avatar {
    position: relative;
    width: 44px; height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF5BD9 0%, #8FA9FB 100%);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 0 24px rgba(255, 91, 217, .45);
    flex-shrink: 0;
  }
  .chat-avatar::after {
    content: "";
    position: absolute;
    right: -2px; bottom: -2px;
    width: 12px; height: 12px;
    border-radius: 999px;
    background: #1FB582;
    border: 2px solid #07041F;
  }
  .chat-identity { line-height: 1.25; flex: 1; min-width: 0; }
  .chat-name {
    font-family: var(--font-display);
    font-weight: 700; font-size: 16px;
    color: #fff;
    letter-spacing: -0.01em;
  }
  .chat-status {
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,.6);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .chat-status::before {
    content: "";
    width: 6px; height: 6px;
    background: #1FB582; border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(31, 181, 130, .22);
  }
  .chat-controls { display: inline-flex; gap: 4px; }
  .chat-control {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: transparent; border: none;
    color: rgba(255,255,255,.55);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 150ms var(--ease-out);
  }
  .chat-control:hover { background: rgba(255,255,255,.08); color: #fff; }

  /* === THE EMBED SLOT === */
  /* This is where the user will paste their widget code.
     We pre-render a faux-conversation as a visual placeholder so
     designers can see the section in context. When the widget code
     is dropped in (replacing the placeholder children), it will
     inherit the frame's rounded bottom, padding and background. */
  #talkinfor-chat-widget {
    flex: 1; min-height: 0;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(11, 37, 253, .04) 100%);
    display: flex; flex-direction: column;
  }

  .chat-placeholder-body {
    flex: 1; min-height: 0;
    overflow: hidden;
    padding: 22px 22px 8px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .msg {
    max-width: 78%;
    padding: 12px 16px;
    font-size: 14px; line-height: 1.45;
    border-radius: 18px;
    font-family: var(--font-sans);
  }
  .msg-ai {
    align-self: flex-start;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    border-bottom-left-radius: 6px;
  }
  .msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #4F6BFF 0%, #7E5BD9 100%);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 20px rgba(79, 107, 255, .35);
  }
  .msg-meta {
    font-size: 11px;
    color: rgba(255,255,255,.4);
    align-self: flex-start;
    padding: 0 4px;
    letter-spacing: .04em;
  }
  .typing {
    align-self: flex-start;
    display: inline-flex; gap: 4px;
    padding: 14px 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    border-bottom-left-radius: 6px;
  }
  .typing span {
    width: 6px; height: 6px;
    background: rgba(255,255,255,.7);
    border-radius: 999px;
    animation: typing 1.4s ease-in-out infinite;
  }
  .typing span:nth-child(2) { animation-delay: .2s; }
  .typing span:nth-child(3) { animation-delay: .4s; }
  @keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%           { transform: translateY(-4px); opacity: 1; }
  }

  .chat-composer {
    padding: 14px 16px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.18);
    display: flex; gap: 10px; align-items: center;
  }
  .chat-input {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    padding: 13px 18px;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 14px;
    outline: none;
    transition: all 150ms var(--ease-out);
  }
  .chat-input::placeholder { color: rgba(255,255,255,.45); }
  .chat-input:focus {
    border-color: rgba(255, 91, 217, .55);
    background: rgba(255,255,255,.09);
    box-shadow: 0 0 0 4px rgba(255, 91, 217, .12);
  }
  .chat-send {
    width: 44px; height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF5BD9 0%, #8FA9FB 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(255, 91, 217, .35);
    transition: all 180ms var(--ease-out);
    flex-shrink: 0;
  }
  .chat-send:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 10px 28px rgba(255, 91, 217, .45); }
  .chat-send:active { transform: scale(.96); }

  .chat-foot {
    text-align: center;
    margin-top: 14px;
    font-size: 11px;
    color: rgba(255,255,255,.4);
    letter-spacing: .04em;
  }
  .chat-foot strong { color: rgba(255,255,255,.7); font-weight: 700; }

  /* developer-only hint shown until embed is in place */
  .embed-hint {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 5;
    font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 91, 217, .85);
    background: rgba(255, 91, 217, .12);
    border: 1px dashed rgba(255, 91, 217, .5);
    padding: 5px 10px;
    border-radius: 999px;
    font-family: var(--font-mono, ui-monospace, monospace);
    pointer-events: none;
  }

  @media (max-width: 1080px) {
    .chat-inner { grid-template-columns: 1fr; gap: 56px; max-width: 620px; }
    .chat-frame { height: 580px; }
    .chat-preview { font-size: 13px; padding: 12px 18px 12px 12px; }
  }
  @media (max-width: 640px) {
    .chat-bridge { height: 140px; }
    .chat-preview { font-size: 12px; max-width: 86%; white-space: normal; }
    .chat-preview-text { line-height: 1.3; }
    .chat-section { padding: 60px 20px 100px; }
    .chat-headline { font-size: clamp(34px, 9vw, 48px); }
    .chat-sub { font-size: 15px; }
    .chat-frame { height: 540px; border-radius: 22px; }
    .chat-frame-header { padding: 14px 16px; }
    .chat-avatar { width: 38px; height: 38px; }
    .chat-name { font-size: 15px; }
    .chat-prompt { font-size: 13px; padding: 10px 14px; }
  }

  @media (max-width: 640px) {
    .hero {
      aspect-ratio: auto !important;
      width: 100% !important;
      max-height: none;
      min-height: calc(100dvh - var(--nav-h, 70px));
      container-type: normal;
    }
    .hero-content { position: relative; padding: 32px 28px 80px; }
    .pillars { grid-template-columns: repeat(2, 1fr); width: 100%; gap: 12px; }
    .pillar { padding: 16px; border-radius: 16px; }
    .pillar-num { font-size: 11px; margin-bottom: 6px; }
    .pillar-title { font-size: 16px; }
    .pillar-desc { font-size: 12.5px; }
    .pillar-icon { width: 28px; height: 28px; top: 14px; right: 14px; }
    .pillar-icon svg { width: 14px; height: 14px; }
    .h-headline { font-size: clamp(36px, 7vw, 56px); max-width: 18ch; }
    .h-headline .stanza-gap { height: 0.3em; }
    .h-sub { font-size: 16px; max-width: 60ch; margin-top: 22px; }
    .h-ctas { gap: 10px; margin-top: 22px; }
    .btn { font-size: 14px; padding: 12px 22px; gap: 8px; }
    .h-meta { font-size: 12.5px; margin-top: 12px; gap: 8px; }
    .h-meta::before { width: 6px; height: 6px; box-shadow: 0 0 0 4px rgba(31,181,130,.22); }
    .scroll-cue { font-size: 11px; bottom: 16px; right: 20px; gap: 8px; }
  }
  @media (max-width: 480px) {
    .pillars { grid-template-columns: 1fr; }
    .nav-links { display: none; }
  }


/* ============ COMPARATIVA · MODELO CONVERSACIONAL ============ */
.mc { color: var(--fg1); }


  

  /* ===============================================================
     SECTION SHELL — light "daylight" panel following the dark hero.
     The Modelo Conversacional is the brand's IP, so the section
     leads with it confidently and treats Speech Analytics as the
     foil, not the spine.
     =============================================================== */
  .mc {
    position: relative;
    overflow: hidden;
    padding: 120px 40px 140px;
    background:
      radial-gradient(60% 50% at 88% -10%, rgba(126, 91, 217, .14), transparent 60%),
      radial-gradient(40% 35% at -2% 18%, rgba(90, 132, 247, .12), transparent 60%),
      radial-gradient(45% 55% at 5% 95%, rgba(255, 91, 217, .08), transparent 60%),
      linear-gradient(180deg, var(--tf-canvas) 0%, var(--tf-paper) 100%);
  }
  .mc::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      radial-gradient(rgba(255, 91, 217, .30) 1px, transparent 1.6px),
      radial-gradient(rgba(126, 91, 217, .22) 1px, transparent 1.6px);
    background-size: 220px 220px, 380px 380px;
    background-position: 0 0, 110px 130px;
    opacity: .22;
    pointer-events: none;
  }
  .mc-shell { position: relative; max-width: 1320px; margin: 0 auto; }

  /* ===============================================================
     SECTION HEADER
     =============================================================== */
  .mc-header { max-width: 1080px; }
  .mc-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tf-navy);
    padding: 8px 16px 8px 12px;
    background: var(--tf-white);
    border: 1px solid var(--tf-haze);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
  }
  .mc-eyebrow .dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--tf-spark);
    box-shadow: 0 0 0 4px rgba(255, 91, 217, .22);
  }
  .mc-eyebrow .sep { width: 1px; height: 12px; background: var(--tf-haze); }

  .mc-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.028em;
    color: var(--tf-navy);
    margin: 28px 0 0;
    text-wrap: balance;
    max-width: 18ch;
  }
  .mc-headline em {
    font-style: normal;
    background: linear-gradient(110deg, var(--tf-blue) 0%, var(--tf-violet) 55%, var(--tf-spark) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .mc-headline .strike {
    color: var(--tf-steel);
    font-weight: 600;
    position: relative;
    display: inline-block;
  }
  .mc-headline .strike::after {
    content: ""; position: absolute;
    left: -2%; right: -2%; top: 54%;
    height: 0.16em;
    background: linear-gradient(90deg, var(--tf-spark), var(--tf-blue));
    transform: rotate(-2.6deg);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(255, 91, 217, .35);
  }

  .mc-sub {
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1.5;
    color: var(--fg3);
    margin: 24px 0 0;
    max-width: 64ch;
    text-wrap: pretty;
  }
  .mc-sub strong { color: var(--tf-navy); font-weight: 600; }

  /* ===============================================================
     THE THREE PILLARS — the heart of the section.
     One bold card per pillar. Each carries: its own gradient
     header, the framing question, the brand definition, and a
     mini SA-vs-Talkinfor strip at the bottom.
     =============================================================== */
  .mc-pillars {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .mc-pillar {
    position: relative;
    background: var(--tf-white);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid rgba(27, 20, 100, .06);
    box-shadow:
      0 28px 60px rgba(27, 20, 100, .10),
      0 0 0 1px rgba(255, 255, 255, .6) inset;
    display: flex; flex-direction: column;
    transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  }
  .mc-pillar:hover {
    transform: translateY(-4px);
    box-shadow:
      0 40px 80px rgba(27, 20, 100, .16),
      0 0 0 1px rgba(255, 255, 255, .6) inset;
  }

  /* The colored "cap" on each pillar.
     Slightly shorter padding here — the num label is longer now
     ("Componente 01 · Conocimiento") so the cap needs less vertical
     air to keep the proportions feeling tight. */
  .mc-pillar-cap {
    position: relative;
    padding: 22px 28px 22px;
    color: var(--tf-white);
    overflow: hidden;
  }
  .mc-pillar-cap::after {
    content: "";
    position: absolute; right: -40px; top: -40px;
    width: 180px; height: 180px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    filter: blur(8px);
    pointer-events: none;
  }
  .mc-pillar--saber .mc-pillar-cap {
    background: linear-gradient(135deg, #5A84F7 0%, #0B25FD 100%);
  }
  .mc-pillar--sentir .mc-pillar-cap {
    background: linear-gradient(135deg, #FF5BD9 0%, #7E5BD9 100%);
  }
  .mc-pillar--actuar .mc-pillar-cap {
    background: linear-gradient(135deg, #1B1464 0%, #4769E8 100%);
  }

  .mc-pillar-cap-row {
    display: flex; align-items: center; justify-content: space-between;
    position: relative; z-index: 1;
  }
  .mc-pillar-num {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
  }
  .mc-pillar-glyph {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    display: inline-flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
  }
  .mc-pillar-glyph svg { width: 20px; height: 20px; }
  .mc-pillar-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.022em;
    margin: 12px 0 6px;
    position: relative; z-index: 1;
  }
  .mc-pillar-tagline {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.86);
    margin: 0;
    position: relative; z-index: 1;
  }

  /* Body of the pillar card */
  .mc-pillar-body {
    padding: 26px 28px 22px;
    flex: 1;
    display: flex; flex-direction: column;
  }
  .mc-pillar-q-lbl {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tf-steel);
    margin: 0 0 8px;
  }
  .mc-pillar-q {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: var(--tf-navy);
    margin: 0 0 16px;
    text-wrap: balance;
  }
  .mc-pillar-def {
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fg3);
    margin: 0;
    text-wrap: pretty;
  }

  /* The mini SA-vs-TF strip at the bottom of each pillar */
  .mc-pillar-strip {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--tf-haze);
    display: flex; flex-direction: column; gap: 10px;
  }
  .mc-strip-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 12px;
    align-items: start;
  }
  .mc-strip-mark {
    width: 24px; height: 24px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .mc-strip-mark svg { display: block; width: 12px; height: 12px; }
  .mc-strip-row--sa .mc-strip-mark {
    background: var(--tf-haze);
    color: var(--tf-steel);
  }
  .mc-strip-row--tf .mc-strip-mark {
    color: #fff;
  }
  .mc-pillar--saber .mc-strip-row--tf .mc-strip-mark {
    background: linear-gradient(135deg, #5A84F7, #0B25FD);
    box-shadow: 0 4px 10px rgba(90, 132, 247, .35);
  }
  .mc-pillar--sentir .mc-strip-row--tf .mc-strip-mark {
    background: linear-gradient(135deg, #FF5BD9, #7E5BD9);
    box-shadow: 0 4px 10px rgba(255, 91, 217, .35);
  }
  .mc-pillar--actuar .mc-strip-row--tf .mc-strip-mark {
    background: linear-gradient(135deg, #1B1464, #4769E8);
    box-shadow: 0 4px 10px rgba(27, 20, 100, .35);
  }
  .mc-strip-who {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tf-steel);
    display: block;
    margin-bottom: 2px;
  }
  .mc-strip-row--tf .mc-strip-who { color: var(--tf-navy); }
  .mc-strip-text {
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--fg2);
    margin: 0;
  }
  .mc-strip-row--sa .mc-strip-text { color: var(--tf-slate); text-decoration: line-through; text-decoration-color: var(--tf-mist); text-decoration-thickness: 1px; }

  /* Elementos evaluados — small chips listing the BDC elements
     each pillar measures (Atención, Preguntas, Empatía, Escasez…) */
  .mc-pillar-elements {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--tf-haze);
  }
  .mc-pillar-elements-label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tf-steel);
    margin: 0 0 8px;
  }
  .mc-pillar-elements-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .mc-pillar-elements-chips span {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid;
    line-height: 1.2;
    white-space: nowrap;
  }
  .mc-pillar--saber .mc-pillar-elements-chips span {
    background: rgba(90, 132, 247, .08);
    border-color: rgba(90, 132, 247, .28);
    color: var(--tf-blue-600);
  }
  .mc-pillar--sentir .mc-pillar-elements-chips span {
    background: rgba(255, 91, 217, .08);
    border-color: rgba(255, 91, 217, .28);
    color: #C9359E;
  }
  .mc-pillar--actuar .mc-pillar-elements-chips span {
    background: rgba(27, 20, 100, .06);
    border-color: rgba(27, 20, 100, .20);
    color: var(--tf-navy);
  }

  /* Coverage chip in the cap corner */
  .mc-pillar-cov {
    position: absolute; right: 28px; bottom: 22px;
    z-index: 2;
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(0, 0, 0, .18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
  }
  .mc-pillar-cov::before {
    content: ""; width: 18px; height: 18px; border-radius: 999px;
    background:
      conic-gradient(#fff 0% 100%, rgba(255,255,255,.25) 100% 100%);
  }
  .mc-pillar-cov b { font-weight: 700; }

  /* ===============================================================
     COVERAGE BANNER — reframed.
     Speech analytics is 100% words — no context, intent or model.
     Talkinfor is 100% conversation — evaluated by 3 pillars.
     =============================================================== */
  .mc-coverage {
    margin-top: 56px;
    background: var(--tf-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--tf-haze);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    overflow: hidden;
  }

  /* The two sides share structure but invert tone */
  .mc-cov-side {
    padding: 28px 30px;
    display: flex; flex-direction: column;
    gap: 18px;
    position: relative;
    min-width: 0;
  }
  .mc-cov-side--sa {
    background:
      linear-gradient(180deg, #FBFBFD 0%, #F4F4F8 100%);
    border-right: 1px dashed var(--tf-haze);
  }
  .mc-cov-side--tf {
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(255, 91, 217, .10) 0%, transparent 55%),
      radial-gradient(80% 60% at 0% 100%, rgba(90, 132, 247, .12) 0%, transparent 60%),
      linear-gradient(180deg, var(--tf-white) 0%, #FAFBFF 100%);
  }

  .mc-cov-headline {
    display: flex; align-items: baseline; gap: 12px;
    flex-wrap: wrap;
    line-height: 1.15;
    /* Lock both sides to the same row height so SA and TF align. */
    min-height: 72px;
  }
  .mc-cov-headline .pct {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 56px;
    /* Round glyphs (the two 0s in 100%) overshoot the cap-height of
       MMR Text by ~6% on top. With -webkit-background-clip: text
       this overshoot was being clipped on the TF side. Give the box
       enough room AND let it overflow visibly. */
    line-height: 1.2;
    letter-spacing: -0.025em;
    display: inline-block;
    padding: 0.08em 0.02em 0.04em;
    overflow: visible;
  }
  .mc-cov-side--sa .pct { color: var(--tf-steel); }
  .mc-cov-side--tf .pct {
    background: linear-gradient(110deg, var(--tf-blue) 0%, var(--tf-violet) 60%, var(--tf-spark) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .mc-cov-headline .of {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.015em;
  }
  .mc-cov-side--sa .of { color: var(--tf-slate); }
  .mc-cov-side--tf .of { color: var(--tf-navy); }

  .mc-cov-brand {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0;
  }
  .mc-cov-side--sa .mc-cov-brand { color: var(--tf-slate); }
  .mc-cov-side--tf .mc-cov-brand { color: var(--tf-blue-600); }

  /* SA word cloud — chaos of raw keywords without structure */
  .mc-cov-cloud {
    display: flex; flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .mc-cov-cloud span {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--tf-slate);
    background: var(--tf-white);
    border: 1px solid var(--tf-haze);
    border-radius: 6px;
    padding: 4px 8px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .mc-cov-cloud span.lg { font-size: 14px; font-weight: 700; color: var(--tf-graphite); }
  .mc-cov-cloud span.sm { font-size: 10.5px; opacity: .7; }
  .mc-cov-cloud span.kw {
    background: rgba(232, 161, 0, .12);
    border-color: rgba(232, 161, 0, .35);
    color: #855600;
    font-weight: 600;
  }

  /* SA gaps — the three things it does NOT have */
  .mc-cov-gaps {
    display: flex; flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .mc-cov-gap {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tf-slate);
    background: var(--tf-white);
    border: 1px dashed var(--tf-mist);
    border-radius: 999px;
    padding: 5px 11px 5px 8px;
  }
  .mc-cov-gap::before {
    content: "✕";
    font-size: 10px;
    font-weight: 700;
    color: var(--danger);
    background: rgba(229, 65, 74, .12);
    width: 16px; height: 16px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
  }

  /* TF pillar pills (structured) */
  .mc-cov-pillars {
    display: flex; gap: 8px;
    flex-wrap: wrap;
  }
  .mc-cov-pillar {
    flex: 1; min-width: 110px;
    background: linear-gradient(135deg, var(--tf-navy), var(--tf-blue-600));
    color: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex; flex-direction: column;
    gap: 4px;
    box-shadow: 0 8px 20px rgba(27, 20, 100, .22);
    position: relative;
    overflow: hidden;
  }
  .mc-cov-pillar--sentir { background: linear-gradient(135deg, #7E5BD9, #FF5BD9); box-shadow: 0 8px 20px rgba(255, 91, 217, .28); }
  .mc-cov-pillar--hacer  { background: linear-gradient(135deg, #1B1464, #4769E8); box-shadow: 0 8px 20px rgba(27, 20, 100, .28); }
  .mc-cov-pillar .name {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
  }
  .mc-cov-pillar .v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.012em;
    color: #fff;
  }
  .mc-cov-pillar .v em {
    font-style: normal;
    font-size: 12px;
    margin-left: 1px;
    opacity: .8;
  }

  /* TF wins — the three things it HAS */
  .mc-cov-haves {
    display: flex; flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .mc-cov-have {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tf-navy);
    background: rgba(90, 132, 247, .10);
    border: 1px solid rgba(90, 132, 247, .28);
    border-radius: 999px;
    padding: 5px 11px 5px 8px;
  }
  .mc-cov-have::before {
    content: "✓";
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--tf-blue-600);
    width: 16px; height: 16px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
  }

  /* VS pill between sides */
  .mc-cov-vs {
    align-self: center;
    margin: 0 -18px;
    z-index: 2;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tf-white);
    background: var(--tf-navy);
    width: 52px; height: 52px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 24px rgba(27, 20, 100, .35), 0 0 0 6px var(--tf-white);
    white-space: nowrap;
  }

  /* ===============================================================
     CALL DEMO — same call, two readings.
     The MC view scores the call by Saber/Sentir/Hacer.
     =============================================================== */
  .mc-demo {
    margin-top: 88px;
    background: var(--tf-white);
    border-radius: var(--radius-2xl);
    box-shadow:
      0 40px 80px rgba(27, 20, 100, .14),
      0 0 0 1px var(--tf-haze) inset;
    overflow: hidden;
  }
  .mc-demo-head {
    padding: 30px 36px 26px;
    border-bottom: 1px solid var(--tf-haze);
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, #FAFBFF 0%, var(--tf-white) 100%);
  }
  .mc-demo-head-left { max-width: 560px; }
  .mc-demo-eyebrow {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tf-blue-600);
    margin-bottom: 8px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .mc-demo-eyebrow::before {
    content: ""; width: 18px; height: 1px; background: var(--tf-blue);
  }
  .mc-demo-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    color: var(--tf-navy);
    margin: 0;
    letter-spacing: -0.012em;
  }
  .mc-demo-desc {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg3);
    margin: 10px 0 0;
  }

  .mc-toggle {
    display: inline-flex;
    background: var(--tf-paper);
    border: 1px solid var(--tf-haze);
    border-radius: var(--radius-pill);
    padding: 4px;
    gap: 0;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
  }
  .mc-toggle button {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fg3);
    background: transparent;
    border: 0;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 200ms var(--ease-out);
    display: inline-flex; align-items: center; gap: 8px;
    white-space: nowrap;
  }
  .mc-toggle .d-sa {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--tf-steel);
  }
  .mc-toggle .d-mc {
    width: 10px; height: 10px; border-radius: 999px;
    background:
      conic-gradient(#5A84F7 0 33%, #FF5BD9 33% 66%, #1B1464 66% 100%);
  }
  .mc-toggle button.on {
    background: var(--tf-navy);
    color: var(--tf-white);
    box-shadow: var(--shadow-md);
  }
  .mc-toggle button.on .d-sa { background: var(--tf-mist); }

  .mc-demo-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    min-height: 640px;
  }

  /* --- Transcript pane (left) --- */
  .mc-call {
    padding: 28px 28px 28px 32px;
    border-right: 1px solid var(--tf-haze);
    background: linear-gradient(180deg, #FAFBFF 0%, var(--tf-white) 70%);
    display: flex; flex-direction: column;
    gap: 12px;
  }
  .mc-call-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--tf-haze);
  }
  .mc-call-id {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--tf-slate);
  }
  .mc-call-id b { color: var(--tf-navy); font-weight: 700; }
  .mc-call-meta {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 12px;
    color: var(--tf-slate);
  }
  .mc-call-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .mc-call-meta .live {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(229, 65, 74, .2);
    animation: pulseLive 1.6s ease-in-out infinite;
  }
  @keyframes pulseLive {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
  }

  .mc-turn {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 12px;
    align-items: start;
  }
  .mc-turn-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tf-steel);
    padding-top: 12px;
  }
  .mc-turn-time b {
    font-weight: 700;
    color: var(--tf-navy);
    display: block;
  }
  .mc-bubble {
    position: relative;
    padding: 12px 14px;
    border-radius: 16px;
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.5;
  }
  .mc-bubble--cli {
    background: var(--tf-paper);
    color: var(--tf-graphite);
    border-bottom-left-radius: 4px;
  }
  .mc-bubble--agt {
    background: linear-gradient(180deg, var(--tf-blue-50) 0%, var(--tf-blue-100) 100%);
    color: var(--tf-navy);
    border-bottom-left-radius: 4px;
  }
  .mc-bubble-role {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 4px;
    opacity: .65;
  }
  .mc-bubble--cli .mc-bubble-role { color: var(--tf-graphite); }
  .mc-bubble--agt .mc-bubble-role { color: var(--tf-blue-600); }

  /* SA view: keyword highlights */
  .kw {
    background: rgba(232, 161, 0, .28);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600;
    color: var(--tf-graphite);
    box-shadow: inset 0 -2px 0 rgba(232, 161, 0, .55);
  }

  /* MC view: per-turn evaluation rows.
     Each row shows a pillar chip + the BDC element evaluated + a
     short note. Stacked vertically for readability. */
  .mc-turn-tags {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 10px;
    padding-left: 2px;
  }
  .mc-tag-row {
    display: flex; align-items: flex-start; gap: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.45;
    flex-wrap: wrap;
  }
  .mc-tag-element {
    color: var(--fg3);
    padding-top: 3px;
    flex: 1; min-width: 0;
  }
  .mc-tag-element b {
    color: var(--tf-navy);
    font-weight: 700;
  }
  .mc-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid;
    background: var(--tf-white);
    white-space: nowrap;
  }
  .mc-tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor;
  }
  .mc-tag--saber  { color: var(--tf-blue-600);  border-color: rgba(90, 132, 247, .35);  background: rgba(90, 132, 247, .06); }
  .mc-tag--sentir { color: #C9359E;             border-color: rgba(255, 91, 217, .35);  background: rgba(255, 91, 217, .06); }
  .mc-tag--actuar { color: var(--tf-navy);      border-color: rgba(27, 20, 100, .25);   background: rgba(27, 20, 100, .04); }
  .mc-tag.bad { box-shadow: inset 0 0 0 1px currentColor; }
  .mc-tag.bad::after {
    content: "✕"; font-size: 11px; margin-left: 2px;
  }
  .mc-tag.good::after {
    content: "✓"; font-size: 11px; margin-left: 2px;
  }

  /* --- Insight pane (right) --- */
  .mc-insight {
    padding: 28px 32px 28px;
    background: var(--tf-white);
    display: flex; flex-direction: column;
    gap: 18px;
    position: relative;
  }
  .mc-insight-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--tf-haze);
  }
  .mc-insight-name {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tf-navy);
  }
  .mc-insight-name .badge {
    width: 26px; height: 26px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
  }
  .mc-insight-name.is-sa .badge { background: var(--tf-slate); }
  .mc-insight-name.is-mc .badge {
    background:
      conic-gradient(from 200deg, #5A84F7 0 33%, #FF5BD9 33% 66%, #1B1464 66% 100%);
  }
  .mc-insight-status {
    font-size: 11px;
    color: var(--tf-steel);
    font-family: var(--font-mono);
  }

  /* SA insights — sparse */
  .sa-block {
    background: var(--tf-canvas);
    border: 1px solid var(--tf-haze);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
  }
  .sa-block-label {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tf-slate);
    margin: 0 0 12px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .sa-block-label::before { content: ""; width: 14px; height: 1px; background: var(--tf-mist); }
  .sa-kw {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .sa-kw span {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(232, 161, 0, .14);
    color: #855600;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid rgba(232, 161, 0, .35);
  }
  .sa-kw span b { font-weight: 700; }
  .sa-flag {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--tf-haze);
    font-size: 13px;
    color: var(--tf-graphite);
  }
  .sa-flag:first-of-type { border-top: 0; padding-top: 4px; }
  .sa-flag .v {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--tf-slate);
  }
  .sa-flag .v.neg { color: var(--danger); font-weight: 700; }
  .sa-verdict {
    margin-top: 4px;
    padding: 14px 16px;
    background: var(--tf-paper);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--tf-steel);
    font-size: 13px;
    color: var(--fg3);
    font-style: italic;
    line-height: 1.5;
  }

  /* MC insights — the 3-pillar scorecard */
  .mc-scorecard {
    display: flex; flex-direction: column;
    gap: 10px;
  }
  .mc-score {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    column-gap: 14px;
    align-items: center;
    padding: 14px 18px;
    background: var(--tf-canvas);
    border: 1px solid var(--tf-haze);
    border-radius: var(--radius-lg);
  }
  .mc-score-glyph {
    width: 36px; height: 36px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
  }
  .mc-score--saber  .mc-score-glyph { background: linear-gradient(135deg, #5A84F7, #0B25FD); }
  .mc-score--sentir .mc-score-glyph { background: linear-gradient(135deg, #FF5BD9, #7E5BD9); }
  .mc-score--actuar .mc-score-glyph { background: linear-gradient(135deg, #1B1464, #4769E8); }
  .mc-score-mid h5 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    color: var(--tf-navy);
    margin: 0 0 5px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .mc-score-mid h5 .pill-mini {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mc-score--saber  .pill-mini { background: rgba(90, 132, 247, .14); color: var(--tf-blue-600); }
  .mc-score--sentir .pill-mini { background: rgba(255, 91, 217, .14); color: #C9359E; }
  .mc-score--actuar .pill-mini { background: rgba(27, 20, 100, .10); color: var(--tf-navy); }
  .mc-score-mid p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--fg3);
  }
  .mc-score-mid p b { color: var(--tf-navy); font-weight: 700; }
  .mc-score-meter {
    text-align: center;
    flex-shrink: 0;
    min-width: 56px;
  }
  .mc-meter-ring {
    width: 48px; height: 48px;
    border-radius: 999px;
    display: grid; place-items: center;
    margin: 0 auto;
    position: relative;
  }
  .mc-meter-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
  .mc-meter-ring b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
  }
  .mc-meter-status {
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tf-slate);
  }
  .mc-meter-status.bad  { color: var(--danger); }
  .mc-meter-status.warn { color: #B27800; }
  .mc-meter-status.ok   { color: var(--success); }

  /* Next-best-action card */
  .mc-nba {
    background: linear-gradient(135deg, var(--tf-navy) 0%, #2a1f8a 100%);
    color: var(--tf-white);
    border: 0;
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-top: 4px;
  }
  .mc-nba-label {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.66);
    margin: 0 0 12px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .mc-nba-label::before { content: ""; width: 14px; height: 1px; background: rgba(255,255,255,.3); }
  .mc-nba-row {
    display: flex; align-items: flex-start; gap: 14px;
  }
  .mc-nba-glyph {
    width: 36px; height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tf-spark), var(--tf-violet));
    box-shadow: 0 8px 20px rgba(255, 91, 217, .35);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
  }
  .mc-nba-body { flex: 1; min-width: 0; }
  .mc-nba-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    margin: 0 0 4px;
  }
  .mc-nba-desc {
    font-size: 13px;
    color: rgba(255,255,255,.78);
    line-height: 1.5;
    margin: 0;
  }
  .mc-nba-meta {
    display: flex; gap: 18px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .mc-nba-meta div { flex: 1; min-width: 0; }
  .mc-nba-meta .lbl {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    font-weight: 700;
  }
  .mc-nba-meta .val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    margin-top: 2px;
    letter-spacing: -0.01em;
  }
  .mc-nba-meta .val em {
    font-style: normal;
    color: var(--tf-spark);
  }
  .mc-nba-meta .val.small { font-size: 15px; }

  /* ===============================================================
     FOOT / MINI-CTA — talk-to-AI or schedule a video call
     =============================================================== */
  .mc-foot {
    margin-top: 80px;
    position: relative;
    border-radius: 20px;
    padding: 30px 36px;
    background: var(--tf-white);
    border: 1px solid var(--tf-haze);
    box-shadow:
      0 18px 44px rgba(11, 12, 50, .08),
      0 0 0 1px var(--tf-haze);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    overflow: hidden;
  }
  .mc-foot::before {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 91, 217, .22) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
  }
  .mc-foot-glyph {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--tf-blue) 0%, var(--tf-violet) 60%, var(--tf-spark) 100%);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow:
      0 10px 24px rgba(126, 91, 217, .35),
      0 0 0 1px rgba(255, 255, 255, .18) inset;
    flex-shrink: 0;
  }
  .mc-foot-glyph svg { width: 26px; height: 26px; }
  .mc-foot-text { position: relative; }
  .mc-foot-eyebrow {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tf-spark);
    margin: 0 0 4px;
  }
  .mc-foot-line {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    color: var(--tf-navy);
    margin: 0;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .mc-foot-line strong {
    background: linear-gradient(110deg, var(--tf-blue) 0%, var(--tf-violet) 60%, var(--tf-spark) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-weight: 700;
  }
  .mc-foot-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .mc-foot-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    border: 0;
    transition: all 200ms var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.005em;
  }
  .mc-foot-btn-primary {
    background: linear-gradient(110deg, #FF5BD9 0%, #FF7BE0 100%);
    color: #fff;
    box-shadow:
      0 10px 24px rgba(255, 91, 217, .42),
      0 0 0 1px rgba(255, 255, 255, .14) inset;
  }
  .mc-foot-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
      0 16px 32px rgba(255, 91, 217, .55),
      0 0 0 1px rgba(255, 255, 255, .22) inset;
  }
  .mc-foot-btn-secondary {
    background: var(--tf-white);
    color: var(--tf-navy);
    border: 1px solid var(--tf-mist);
    box-shadow: 0 6px 14px rgba(11, 12, 50, .06);
  }
  .mc-foot-btn-secondary:hover {
    transform: translateY(-2px);
    background: var(--tf-paper);
    box-shadow: 0 10px 22px rgba(11, 12, 50, .10);
  }
  .mc-foot-btn .ico {
    width: 20px; height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit;
    flex-shrink: 0;
  }
  .mc-foot-btn-secondary .ico {
    background: rgba(27, 20, 100, .08);
  }
  .mc-foot-btn .ico svg { width: 11px; height: 11px; }

  @media (max-width: 1140px) {
    .mc-foot {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 20px;
      padding: 30px 24px;
    }
    .mc-foot-glyph { justify-self: center; }
    .mc-foot-actions { justify-content: center; flex-wrap: wrap; }
  }
  @media (max-width: 540px) {
    .mc-foot-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .mc-foot-btn { justify-content: center; }
  }

  /* ===============================================================
     Responsive
     =============================================================== */
  @media (max-width: 1140px) {
    .mc-pillars { grid-template-columns: 1fr; gap: 22px; }
    .mc-coverage { grid-template-columns: 1fr; }
    .mc-cov-side--sa { border-right: 0; border-bottom: 1px dashed var(--tf-haze); }
    .mc-cov-vs { margin: -26px auto; }
    .mc-demo-body { grid-template-columns: 1fr; }
    .mc-call { border-right: 0; border-bottom: 1px solid var(--tf-haze); }
  }
  @media (max-width: 720px) {
    .mc { padding: 80px 20px 100px; }
    .mc-headline { font-size: clamp(34px, 9vw, 56px); }
    .mc-sub { font-size: 17px; }
    .mc-pillar-cap { padding: 22px 22px; }
    .mc-pillar-name { font-size: 36px; }
    .mc-pillar-body { padding: 22px; }
    .mc-pillar-q { font-size: 19px; }
    .mc-demo-head { padding: 22px 22px 20px; }
    .mc-demo-title { font-size: 24px; }
    .mc-call, .mc-insight { padding: 22px; }
    .mc-turn { grid-template-columns: 44px 1fr; column-gap: 10px; }
    .mc-nba-meta { flex-wrap: wrap; gap: 12px; }
  }


/* ============ PLATAFORMA · DASHBOARD SHOWCASE ============ */


  

  /* =====================================================
     SECTION SHELL — Night mode for the platform showcase.
     Comparativa runs in 'daylight'; we descend into night here
     so the dashboard glows. A 'sunset' bridge fades the top from
     paper into navy, stitching the seam between sections. */
  .pf {
    position: relative;
    overflow: hidden;
    padding: 200px 40px 140px;
    background:
      radial-gradient(60% 50% at 92% 6%,  rgba(126, 91, 217, .45), transparent 60%),
      radial-gradient(48% 55% at -4% 92%, rgba(11, 37, 253, .38), transparent 60%),
      radial-gradient(42% 42% at 62% 76%, rgba(255, 91, 217, .12), transparent 70%),
      linear-gradient(180deg, #15104F 0%, #0E0A3A 100%);
    color: rgba(255, 255, 255, .92);
  }
  /* Cosmic dust particles — brand 'sparkle' motif scaled tiny */
  .pf::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      radial-gradient(rgba(255, 255, 255, .85) 1px, transparent 1.4px),
      radial-gradient(rgba(255, 91, 217, .55) 1px, transparent 1.4px),
      radial-gradient(rgba(143, 169, 251, .55) 1px, transparent 1.4px);
    background-size: 220px 220px, 340px 340px, 280px 280px;
    background-position: 0 0, 110px 170px, 60px 80px;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
  }
  /* 'Sunset' bridge — the top fades from Comparativa's paper bg into navy
     so the section seam reads as a soft horizon, not a hard cut. */
  .pf::after {
    content: ""; position: absolute;
    top: 0; left: 0; right: 0;
    height: 240px;
    background: linear-gradient(180deg,
      var(--tf-paper)         0%,
      rgba(248, 246, 241, .65) 18%,
      rgba(27, 20, 100, 0)    100%);
    pointer-events: none;
    z-index: 1;
  }
  .pf-shell { position: relative; max-width: 1320px; margin: 0 auto; z-index: 2; }

  /* ===== Header ===== */
  .pf-header { max-width: 1080px; }
  .pf-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: #fff;
    padding: 8px 16px 8px 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-pill);
  }
  .pf-eyebrow .dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--tf-spark);
    box-shadow: 0 0 0 4px rgba(255, 91, 217, .22);
  }
  .pf-eyebrow .sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .22); }

  .pf-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.028em;
    color: #fff;
    margin: 28px 0 0;
    text-wrap: balance;
    max-width: 19ch;
    text-shadow: 0 2px 24px rgba(5, 2, 26, .35);
  }
  .pf-headline em {
    font-style: normal;
    background: linear-gradient(110deg, #8FA9FB 0%, #B7A1ED 55%, #FFC0E5 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .pf-sub {
    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
    margin: 24px 0 0;
    max-width: 64ch;
    text-wrap: pretty;
    text-shadow: 0 1px 12px rgba(5, 2, 26, .25);
  }
  .pf-sub strong { color: #fff; font-weight: 600; }

  /* ===== Tabs row ===== */
  .pf-tabs {
    margin: 56px 0 22px;
    display: flex; align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--tf-white);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-pill);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
  }
  .pf-tab {
    appearance: none; border: none; background: transparent;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fg3);
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 200ms var(--ease-out);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .pf-tab .pf-tab-n {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--tf-steel);
    letter-spacing: .14em;
  }
  .pf-tab:hover { color: var(--tf-navy); background: var(--tf-blue-50); }
  .pf-tab.on {
    background: var(--tf-navy);
    color: #fff;
    box-shadow: 0 6px 16px rgba(27, 20, 100, .28);
  }
  .pf-tab.on .pf-tab-n { color: rgba(255,255,255,.6); }

  /* ===== Browser frame wrapper =====
     The dashboard is full-width. Callouts live in a strip BELOW the
     frame so the UI is never covered, and pins on the UI link to them. */
  .pf-frame-wrap {
    position: relative;
    margin-top: 14px;
  }
  .pf-frame {
    position: relative;
    background: var(--tf-white);
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
      0 48px 100px rgba(0, 0, 0, .45),
      0 12px 32px rgba(0, 0, 0, .25),
      0 0 0 1px rgba(255, 255, 255, .08),
      0 0 80px rgba(126, 91, 217, .12);
    isolation: isolate;
  }
  .pf-browser-chrome {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #F7F7FB 0%, #ECECF2 100%);
    border-bottom: 1px solid var(--tf-haze);
  }
  .pf-dot { width: 12px; height: 12px; border-radius: 999px; background: #DADAE0; }
  .pf-dot.r { background: #ED6F5C; }
  .pf-dot.y { background: #F5BD50; }
  .pf-dot.g { background: #60C551; }
  .pf-url {
    flex: 1; margin-left: 14px;
    background: var(--tf-white);
    border: 1px solid var(--tf-mist);
    border-radius: 999px;
    padding: 7px 16px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--fg3);
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 540px;
  }
  .pf-url .lock { color: var(--success); }
  .pf-url b { color: var(--tf-navy); font-weight: 600; }

  /* ===== App layout inside frame ===== */
  .pf-app {
    display: grid;
    grid-template-columns: 58px 1fr;
    min-height: 720px;
    background: var(--tf-paper);
  }
  .pf-rail {
    background: var(--tf-navy);
    background: linear-gradient(180deg, #15104F 0%, #0E0A3A 100%);
    padding: 18px 10px;
    display: flex; flex-direction: column; gap: 6px;
    align-items: center;
    color: rgba(255,255,255,.6);
  }
  .pf-rail-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 200ms var(--ease-out);
  }
  .pf-rail-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
  .pf-rail-btn.on {
    background: var(--tf-blue);
    color: #fff;
    box-shadow: 0 6px 16px rgba(11, 37, 253, .35);
  }
  .pf-rail-spacer { flex: 1; }
  .pf-rail svg { width: 18px; height: 18px; }

  .pf-app-main { display: flex; flex-direction: column; min-width: 0; }

  /* Top bar inside the app — BRAND VERSION (navy → blue, not navy → red) */
  .pf-topbar {
    display: flex; align-items: stretch;
    background: linear-gradient(90deg, #15104F 0%, #2D2A8E 55%, #5A84F7 100%);
    color: #fff;
    border-bottom: 1px solid var(--tf-mist);
  }
  .pf-topbar-brand {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    min-width: 280px;
  }
  .pf-topbar-logo {
    background: var(--tf-white);
    border-radius: 10px;
    padding: 6px 10px;
    display: inline-flex; align-items: center;
    height: 30px;
    box-shadow: 0 2px 6px rgba(11, 12, 50, .25);
  }
  .pf-topbar-logo img { height: 18px; display: block; }
  .pf-topbar-title {
    display: flex; flex-direction: column;
    line-height: 1.15;
  }
  .pf-topbar-title b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -0.005em;
  }
  .pf-topbar-title span {
    font-size: 11.5px; color: rgba(255,255,255,.72); font-weight: 500;
  }
  .pf-topbar-mid { flex: 1; }
  .pf-topbar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-left: 1px solid rgba(255,255,255,.18);
    font-family: var(--font-sans);
  }
  .pf-topbar-user b {
    display: block; font-size: 13px; font-weight: 600; line-height: 1.1;
  }
  .pf-topbar-user span {
    font-size: 10.5px; color: rgba(255,255,255,.65); letter-spacing: .08em; text-transform: uppercase;
  }
  .pf-topbar-avatar {
    width: 32px; height: 32px; border-radius: 999px;
    background: linear-gradient(135deg, var(--tf-spark), var(--tf-violet));
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 12.5px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.4);
  }

  /* Page sub-bar (with the page title + client logo slot) */
  .pf-pagebar {
    display: flex; align-items: center;
    background: var(--tf-ink);
    background: linear-gradient(90deg, #0E0A3A 0%, #1B1464 50%, #2A2289 100%);
    color: #fff;
    padding: 16px 22px;
    gap: 18px;
    border-bottom: 1px solid var(--tf-mist);
  }
  .pf-pagebar-logo {
    background: rgba(255,255,255,.10);
    border: 1px dashed rgba(255,255,255,.22);
    border-radius: 8px;
    padding: 4px 10px;
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: .14em;
    color: rgba(255,255,255,.55);
    text-align: center;
    line-height: 1.15;
  }
  .pf-pagebar h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.005em;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .pf-pagebar h3 svg { width: 18px; height: 18px; opacity: .95; }
  .pf-pagebar-spacer { flex: 1; }
  .pf-pagebar-pill {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff;
  }
  .pf-pagebar-pill .live {
    width: 7px; height: 7px; border-radius: 999px; background: #1FB582;
    box-shadow: 0 0 0 4px rgba(31, 181, 130, .25);
  }

  .pf-content {
    padding: 24px 26px 28px;
    background: var(--tf-paper);
    flex: 1;
    min-height: 0;
  }

  /* ====================== CARDS (shared) ====================== */
  .pf-card {
    background: var(--tf-white);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(11, 12, 50, .04), 0 0 0 1px var(--tf-haze);
    overflow: hidden;
  }
  .pf-card-head {
    background: var(--tf-navy);
    color: #fff;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: -0.005em;
  }
  .pf-card-head svg { width: 16px; height: 16px; }
  .pf-card-head.green { background: var(--success); }
  .pf-card-head.red { background: var(--danger); }
  .pf-card-head.blue { background: var(--tf-blue); }
  .pf-card-body { padding: 16px 18px; }

  /* ====================== DETAIL VIEW ====================== */
  .det-header {
    background: linear-gradient(90deg, #0E0A3A, #1B1464);
    color: #fff;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1.4fr auto auto auto;
    align-items: center;
    padding: 14px 18px;
    gap: 18px;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(11, 12, 50, .15);
  }
  .det-header .agent {
    font-family: var(--font-sans);
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.005em;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .det-header .agent .av {
    width: 28px; height: 28px; border-radius: 999px;
    background: var(--tf-blue-300);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tf-navy);
    font-weight: 700; font-size: 12px;
  }
  .det-header .score {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-family: var(--font-display);
  }
  .det-header .score b { font-size: 22px; font-weight: 700; }
  .det-header .score em {
    font-style: normal; font-size: 13px; color: rgba(255,255,255,.65);
    letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-sans);
    font-weight: 600;
  }
  .det-header .meta {
    display: inline-flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,.78); font-size: 12.5px;
  }
  .det-header .meta svg { width: 13px; height: 13px; opacity: .8; }
  .det-header .meta i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
  .det-header .dl {
    background: var(--tf-white);
    color: var(--tf-navy);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 12.5px;
    padding: 8px 14px;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
  }
  .det-header .dl svg { width: 13px; height: 13px; }

  .det-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr 1.05fr;
    gap: 16px;
  }
  .det-card .pf-card-head .badge {
    margin-left: auto;
    background: rgba(255,255,255,.18);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
  }

  /* Radar chart container */
  .det-radar {
    padding: 14px 14px 6px;
    display: flex; flex-direction: column; align-items: center;
  }
  .det-radar svg { width: 100%; height: auto; max-width: 360px; }
  .det-pillar-legend {
    margin-top: 10px;
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center;
  }
  .det-pillar-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--fg3);
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--tf-blue-50);
    border: 1px solid var(--tf-haze);
  }
  .det-pillar-chip i {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--tf-blue);
  }
  .det-pillar-chip.s i { background: var(--tf-blue); }
  .det-pillar-chip.f i { background: var(--tf-violet); }
  .det-pillar-chip.h i { background: var(--tf-spark); }

  /* Elements list */
  .det-elements { padding: 4px 0 4px; }
  .det-el {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px 18px;
    border-top: 1px solid var(--tf-haze);
    font-family: var(--font-sans);
  }
  .det-el:first-of-type { border-top: 0; }
  .det-el-name {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tf-navy);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .det-el-name .p {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--tf-blue);
  }
  .det-el-name .p.f { background: var(--tf-violet); }
  .det-el-name .p.h { background: var(--tf-spark); }
  .det-el-score {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 8px;
    color: #fff;
    min-width: 44px;
    text-align: center;
  }
  .det-el-score.good { background: var(--success); }
  .det-el-score.bad { background: var(--danger); }
  .det-el-score.warn { background: #E89B2A; }

  /* Audio + transcript */
  .det-audio-card .pf-card-body { padding: 14px 16px 16px; }
  .det-audio {
    background: var(--tf-blue-50);
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid var(--tf-haze);
  }
  .det-audio-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
    font-size: 11.5px;
    color: var(--fg3);
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
  }
  .det-audio-row b { color: var(--tf-navy); font-weight: 700; }
  .det-audio-bar {
    position: relative;
    height: 6px;
    background: var(--tf-mist);
    border-radius: 999px;
    overflow: hidden;
  }
  .det-audio-bar i {
    display: block;
    width: 38%;
    height: 100%;
    background: linear-gradient(90deg, var(--tf-blue), var(--tf-violet));
    border-radius: 999px;
  }
  .det-audio-controls {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px;
  }
  .det-audio-btn {
    width: 30px; height: 30px;
    border-radius: 999px;
    background: var(--tf-navy);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 13px;
  }
  .det-audio-btn.s { background: var(--tf-white); color: var(--tf-navy); box-shadow: 0 0 0 1px var(--tf-mist); }
  .det-audio-vol {
    margin-left: auto;
    font-size: 11px;
    color: var(--fg3);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .det-audio-vol .v {
    width: 56px; height: 4px; background: var(--tf-mist); border-radius: 999px; overflow: hidden;
  }
  .det-audio-vol .v i { display: block; width: 80%; height: 100%; background: var(--tf-blue); }

  .det-transcript {
    margin-top: 14px;
    background: var(--tf-white);
    border-radius: 10px;
    border: 1px solid var(--tf-haze);
    padding: 10px 12px 4px;
    max-height: 220px;
    overflow-y: auto;
  }
  .det-turn {
    padding: 8px 4px;
    border-top: 1px solid var(--tf-haze);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.45;
    color: var(--fg2);
  }
  .det-turn:first-child { border-top: 0; }
  .det-turn-head {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 3px;
  }
  .det-turn-head.cl { color: #16976A; }
  .det-turn-head.ag { color: var(--tf-blue-600); }
  .det-turn-head .t { color: var(--fg4); font-weight: 600; }
  .det-turn-tag {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--tf-spark);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .det-turn-tag.s { background: var(--tf-blue); }
  .det-turn-tag.f { background: var(--tf-violet); }
  .det-turn-tag.h { background: var(--tf-spark); }
  .det-turn-tag.bad { background: var(--danger); }

  /* ===== Callouts strip (below the frame) =====
     A row of light cards. Each card has a number that matches a pin on
     the dashboard. The UI itself is never covered. */
  .pf-callouts-strip {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
  }
  .pf-callout {
    position: relative;
    background: var(--tf-white);
    color: var(--tf-navy);
    border: 1px solid var(--tf-haze);
    border-left: 3px solid var(--tf-spark);
    border-radius: 12px;
    padding: 14px 16px 14px 18px;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 4px 14px rgba(11, 12, 50, .06);
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
  }
  .pf-callout-num {
    width: 26px; height: 26px;
    border-radius: 999px;
    background: var(--tf-spark);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(255, 91, 217, .35);
    margin-top: 1px;
  }
  .pf-callout b {
    color: var(--tf-spark);
    font-weight: 700;
    display: block;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  /* Pin marker inside the frame — small spark dot with halo + number */
  .pf-pins-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 9;
  }
  .pf-pin {
    position: absolute;
    width: 24px; height: 24px;
    border-radius: 999px;
    background: var(--tf-spark);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    box-shadow:
      0 0 0 4px rgba(255, 91, 217, .22),
      0 0 0 8px rgba(255, 91, 217, .10),
      0 4px 10px rgba(255, 91, 217, .35);
    transform: translate(-50%, -50%);
    animation: pin-pulse 2.6s ease-in-out infinite;
  }
  @keyframes pin-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 91, 217, .22), 0 0 0 8px rgba(255, 91, 217, .10), 0 4px 10px rgba(255, 91, 217, .35); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 91, 217, .28), 0 0 0 14px rgba(255, 91, 217, 0),    0 4px 10px rgba(255, 91, 217, .35); }
  }

  /* ====================== RENDIMIENTO VIEW ====================== */
  .ren-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
  }
  .ren-kpi {
    background: var(--tf-white);
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: 0 2px 6px rgba(11, 12, 50, .04), 0 0 0 1px var(--tf-haze);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
  }
  .ren-kpi-ico {
    width: 32px; height: 32px;
    border-radius: 999px;
    background: var(--tf-blue-100);
    color: var(--tf-blue-600);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
  }
  .ren-kpi-ico.violet { background: var(--tf-violet-100); color: var(--tf-violet); }
  .ren-kpi-ico.spark { background: rgba(255, 91, 217, .14); color: var(--tf-spark); }
  .ren-kpi-ico.success { background: var(--success-soft); color: var(--success); }
  .ren-kpi-ico svg { width: 16px; height: 16px; }
  .ren-kpi-label {
    font-size: 11.5px;
    color: var(--fg3);
    font-family: var(--font-sans);
    font-weight: 500;
    margin-bottom: 6px;
  }
  .ren-kpi-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--tf-navy);
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .ren-kpi-val.green { color: var(--success); }
  .ren-kpi-val.violet { color: var(--tf-violet); }
  .ren-kpi-val.blue { color: var(--tf-blue-600); }
  .ren-kpi-foot {
    font-size: 10.5px;
    color: var(--fg4);
    margin-top: 4px;
    font-family: var(--font-sans);
  }

  .ren-row {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr;
    gap: 14px;
    margin-bottom: 18px;
  }
  .ren-chart-card .pf-card-body { padding: 16px 18px 12px; }
  .ren-chart-rank {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--tf-navy);
    margin-bottom: 6px;
  }
  .ren-chart-rank span { color: var(--tf-spark); }
  .ren-chart svg { width: 100%; height: auto; max-height: 220px; display: block; }
  .ren-chart-legend {
    margin-top: 6px;
    display: flex; gap: 16px;
    font-size: 11px;
    color: var(--fg3);
    font-family: var(--font-sans);
  }
  .ren-chart-legend i {
    display: inline-block;
    width: 16px; height: 2px;
    vertical-align: middle;
    margin-right: 6px;
    background: var(--tf-blue);
    border-radius: 2px;
  }
  .ren-chart-legend i.avg {
    background: transparent;
    border-top: 2px dashed var(--tf-steel);
  }

  .ren-elem {
    padding: 12px 14px 14px;
  }
  .ren-elem-row {
    margin-top: 12px;
  }
  .ren-elem-row:first-child { margin-top: 0; }
  .ren-elem-name {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    color: var(--tf-navy);
    margin-bottom: 6px;
  }
  .ren-elem-pair {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--fg3);
    margin-bottom: 4px;
  }
  .ren-elem-bar {
    position: relative; height: 10px;
    background: var(--tf-mist);
    border-radius: 999px;
    overflow: hidden;
  }
  .ren-elem-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
  }
  .ren-elem-bar.ag i { background: var(--tf-blue); }
  .ren-elem-bar.emp i { background: var(--tf-graphite); opacity: .85; }
  .ren-elem-pair b {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--tf-navy);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
  }

  /* Bottom row: best/worst/avg call cards */
  .ren-calls-title {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg2);
    font-weight: 600;
    margin: 6px 0 10px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .ren-calls-title svg { width: 14px; height: 14px; color: var(--tf-spark); }
  .ren-calls {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  .ren-call .pf-card-head { padding: 10px 14px; font-size: 12.5px; }
  .ren-call .pf-card-head .agent {
    font-family: var(--font-display); font-weight: 700; font-size: 13.5px; margin-top: 2px;
    display: block;
  }
  .ren-call-body {
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: center;
  }
  .ren-call-body svg.mini { width: 100%; height: auto; }
  .ren-call-stats {
    font-family: var(--font-sans);
    font-size: 11.5px;
    color: var(--fg3);
    display: flex; flex-direction: column; gap: 5px;
  }
  .ren-call-stats .row { display: inline-flex; align-items: center; gap: 6px; }
  .ren-call-stats .row svg { width: 11px; height: 11px; color: var(--fg4); }
  .ren-call-stats .row b {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--tf-navy);
    font-size: 11.5px;
  }
  .ren-call-stats .row b.score {
    color: #fff; padding: 2px 8px; border-radius: 6px;
    font-size: 11px;
    background: var(--success);
  }
  .ren-call-stats .row b.score.warn { background: #E89B2A; }
  .ren-call-stats .row b.score.bad { background: var(--danger); }
  .ren-call-stats .row b.score.blue { background: var(--tf-blue); }
  .ren-call-stats .row b.good { color: var(--success); }
  .ren-call-stats .row b.bad { color: var(--danger); }

  /* ====================== RESULTADOS VIEW ====================== */
  .res-summary {
    background: var(--tf-white);
    border: 1px solid var(--tf-haze);
    border-radius: 12px;
    padding: 16px 22px;
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-xs);
  }
  .res-summary svg { width: 18px; height: 18px; color: var(--tf-navy); }
  .res-summary h4 {
    margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 16px;
    color: var(--tf-navy);
  }
  .res-summary-spacer { flex: 1; }
  .res-summary-meta {
    font-family: var(--font-sans); font-size: 12.5px; color: var(--fg3);
    display: flex; gap: 12px;
  }
  .res-summary-meta b { color: var(--tf-navy); font-weight: 700; }
  .res-summary-meta span:not(:last-child)::after {
    content: "|"; margin-left: 12px; color: var(--tf-mist);
  }
  .res-filterbar {
    background: var(--tf-white);
    border: 1px solid var(--tf-haze);
    border-radius: 12px;
    padding: 12px 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
  }
  .res-filter-label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--tf-navy);
    margin-bottom: 4px;
  }
  .res-filter-input {
    border: 1px solid var(--tf-mist);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg3);
    background: var(--tf-paper);
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
  }
  .res-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tf-blue-100);
    border: 1px solid var(--tf-blue-300);
    color: var(--tf-navy);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11.5px;
    font-weight: 600;
  }
  .res-filter-chip .x { color: var(--tf-blue-600); cursor: pointer; }
  .res-vista {
    background: var(--tf-paper);
    border-radius: 8px;
    padding: 3px;
    display: inline-flex; align-items: center;
    border: 1px solid var(--tf-haze);
  }
  .res-vista button {
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--fg3);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 200ms var(--ease-out);
  }
  .res-vista button.on {
    background: var(--tf-blue);
    color: #fff;
    box-shadow: 0 2px 6px rgba(11, 37, 253, .25);
  }
  .res-vista svg { width: 12px; height: 12px; }

  /* Cards grid */
  .res-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .res-card {
    background: var(--tf-white);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(11, 12, 50, .04), 0 0 0 1px var(--tf-haze);
    overflow: hidden;
  }
  .res-card-head {
    background: var(--tf-navy);
    color: #fff;
    padding: 12px 14px;
    font-family: var(--font-sans);
  }
  .res-card-head.green { background: var(--success); }
  .res-card-head.red { background: var(--danger); }
  .res-card-head b {
    display: block;
    font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
    margin-bottom: 2px;
  }
  .res-card-head span { font-size: 11px; color: rgba(255,255,255,.75); }
  .res-card-body {
    padding: 12px 14px 14px;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    align-items: center;
  }
  .res-card-body svg.mini { width: 100%; height: auto; }
  .res-card-stats {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--fg3);
    display: flex; flex-direction: column; gap: 4px;
  }
  .res-card-stats .row { display: inline-flex; align-items: center; gap: 6px; }
  .res-card-stats .row svg { width: 11px; height: 11px; color: var(--fg4); }
  .res-card-stats .row b.score {
    color: #fff; padding: 2px 8px; border-radius: 6px;
    font-family: var(--font-display); font-weight: 700; font-size: 11px;
    background: var(--success);
  }
  .res-card-stats .row b.score.blue { background: var(--tf-blue); }
  .res-card-stats .row b.score.red { background: var(--danger); }
  .res-card-stats .row b { color: var(--tf-navy); font-weight: 700; font-family: var(--font-display); font-size: 11px; }

  /* Table view */
  .res-table {
    background: var(--tf-white);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(11, 12, 50, .04), 0 0 0 1px var(--tf-haze);
    overflow: hidden;
  }
  .res-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 12.5px;
  }
  .res-table thead th {
    text-align: left;
    background: var(--tf-paper);
    padding: 12px 16px;
    color: var(--tf-navy);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--tf-haze);
  }
  .res-table thead th.right { text-align: right; }
  .res-table thead th.center { text-align: center; }
  .res-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--tf-haze);
    color: var(--fg2);
    vertical-align: middle;
  }
  .res-table tbody tr:last-child td { border-bottom: 0; }
  .res-table tbody td b {
    color: var(--tf-navy); font-weight: 600;
  }
  .res-table .score-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-display); font-weight: 700;
    font-size: 12px;
    background: var(--tf-blue);
    font-variant-numeric: tabular-nums;
  }
  .res-table .score-pill.green { background: var(--success); }
  .res-table .score-pill.warn { background: #E89B2A; }
  .res-table .score-pill.bad { background: var(--danger); }
  .res-table .mini-radar { width: 56px; height: 56px; }

  /* ====================== CARGA / PROCESAMIENTO ====================== */
  .car-week {
    background: var(--tf-white);
    border: 1px solid var(--tf-haze);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
  }
  .car-week-label {
    font-family: var(--font-sans); font-size: 12px; color: var(--fg3);
    font-weight: 500;
    display: block;
  }
  .car-week-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--tf-blue-600);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .car-week-val svg { width: 14px; height: 14px; }
  .car-week-spacer { flex: 1; }
  .car-week-quota {
    background: linear-gradient(90deg, #FFC56B, #FF9A3D);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font-family: var(--font-display); font-weight: 700;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(255, 154, 61, .35);
  }

  .car-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.05fr;
    gap: 14px;
    margin-bottom: 16px;
  }
  .car-col-head {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--tf-navy);
    margin-bottom: 8px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .car-col-head svg { width: 13px; height: 13px; color: var(--tf-blue); }

  .car-select {
    background: var(--tf-white);
    border: 1px solid var(--tf-mist);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--fg3);
    display: flex; align-items: center;
    margin-bottom: 12px;
    box-shadow: var(--shadow-xs);
  }
  .car-select::after {
    content: "▾"; margin-left: auto; color: var(--fg4);
  }
  .car-drop {
    background: var(--tf-white);
    border: 2px dashed var(--tf-blue-300);
    border-radius: 14px;
    padding: 26px 18px;
    text-align: center;
    color: var(--fg3);
    font-family: var(--font-sans);
    box-shadow: var(--shadow-xs);
  }
  .car-drop .ico {
    width: 48px; height: 48px;
    border-radius: 999px;
    background: var(--tf-blue-100);
    color: var(--tf-blue-600);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
  }
  .car-drop .ico svg { width: 22px; height: 22px; }
  .car-drop h4 {
    margin: 0; font-family: var(--font-sans); font-weight: 700;
    font-size: 14px; color: var(--tf-navy);
  }
  .car-drop p { margin: 4px 0 12px; font-size: 12px; }
  .car-drop .fmts {
    font-size: 11px;
    color: var(--fg4);
    letter-spacing: .12em;
    font-weight: 700;
    text-transform: uppercase;
  }

  .car-pending {
    background: var(--tf-white);
    border: 1px solid var(--tf-haze);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--shadow-xs);
  }
  .car-pending-empty {
    color: var(--fg4); font-size: 12.5px;
    text-align: center; padding: 20px 0;
    font-family: var(--font-sans);
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .car-pending-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--tf-haze);
    font-family: var(--font-sans);
    font-size: 12px;
  }
  .car-pending-item:first-child { border-top: 0; }
  .car-pending-item .icon-mic {
    width: 28px; height: 28px;
    border-radius: 999px;
    background: var(--tf-violet-100);
    color: var(--tf-violet);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .car-pending-item .icon-mic svg { width: 14px; height: 14px; }
  .car-pending-item b { color: var(--tf-navy); font-weight: 700; }
  .car-pending-item .progress {
    width: 110px; height: 4px;
    background: var(--tf-mist); border-radius: 999px; overflow: hidden;
    margin-top: 4px;
  }
  .car-pending-item .progress i {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--tf-blue), var(--tf-violet));
  }
  .car-pending-item .status {
    font-size: 11px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--tf-blue);
  }
  .car-pending-item .status.evaluated { background: var(--success); }
  .car-pending-item .status.error { background: var(--danger); }

  /* Right column: calls in the week */
  .car-table {
    background: var(--tf-white);
    border: 1px solid var(--tf-haze);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
  }
  .car-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 11.5px;
  }
  .car-table thead th {
    text-align: left;
    background: var(--tf-paper);
    color: var(--tf-navy);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tf-haze);
  }
  .car-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--tf-haze);
    color: var(--fg2);
    vertical-align: middle;
  }
  .car-table tbody tr:last-child td { border-bottom: 0; }
  .car-table .file {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; color: var(--tf-navy);
  }
  .car-table .file .ck {
    color: var(--success);
  }
  .car-table .file .er { color: var(--danger); }
  .car-table .agent { color: var(--fg3); font-size: 11px; line-height: 1.25; }
  .car-table .dur { font-variant-numeric: tabular-nums; }
  .car-table .status {
    display: inline-block;
    font-size: 10.5px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--success);
  }
  .car-table .status.error { background: var(--danger); }

  /* Procesamiento progress block */
  .car-proc {
    margin-top: 10px;
    background: var(--tf-white);
    border: 1px solid var(--tf-haze);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: var(--shadow-xs);
  }
  .car-proc h4 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--tf-navy);
  }
  .car-proc-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 12px;
  }
  .car-proc-stat-label {
    font-family: var(--font-sans);
    font-size: 11.5px;
    color: var(--fg3);
    margin-bottom: 4px;
  }
  .car-proc-stat-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--tf-navy);
    letter-spacing: -0.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .car-proc-stat-val.green { color: var(--success); }
  .car-proc-stat-val.violet { color: var(--tf-violet); }
  .car-proc-stat-foot { font-size: 11px; color: var(--fg4); margin-top: 3px; font-family: var(--font-sans); }
  .car-proc-bar {
    height: 8px;
    background: var(--tf-mist);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
  }
  .car-proc-bar i {
    display: block; height: 100%;
    width: 96%;
    background: linear-gradient(90deg, var(--tf-blue), var(--tf-violet));
    border-radius: 999px;
  }

  /* Big primary CTA inside the carga view */
  .car-cta {
    background: linear-gradient(90deg, #0E0A3A 0%, #2A2289 50%, #5A84F7 100%);
    color: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 14px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 8px 22px rgba(11, 37, 253, .28);
    cursor: pointer;
  }
  .car-cta svg { width: 16px; height: 16px; }

  /* ====================== CAPABILITY BULLETS ====================== */
  .pf-caps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 28px;
  }
  .pf-cap {
    background: var(--tf-white);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .04);
  }
  .pf-cap .ico {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--tf-blue-100);
    color: var(--tf-blue-600);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
  }
  .pf-cap .ico svg { width: 16px; height: 16px; }
  .pf-cap h5 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--tf-navy);
    margin: 0 0 5px;
    letter-spacing: -0.005em;
  }
  .pf-cap p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg3);
    text-wrap: pretty;
  }

  /* ====================== VOZ DEL CLIENTE MODULE ====================== */
  .pf-voc {
    margin-top: 60px;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    padding: 36px 40px;
    background:
      radial-gradient(55% 100% at 100% 0%, rgba(255, 91, 217, .42), transparent 60%),
      radial-gradient(45% 90% at 0% 100%,  rgba(143, 169, 251, .26), transparent 60%),
      linear-gradient(135deg, #2E1654 0%, #3F1A6B 60%, #5B1E83 100%);
    box-shadow:
      0 30px 80px rgba(255, 91, 217, .22),
      0 0 100px rgba(255, 91, 217, .12);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 36px;
    align-items: center;
    isolation: isolate;
  }
  /* luminous gradient border ring */
  .pf-voc::before {
    content: ""; position: absolute; inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(135deg,
      rgba(255, 138, 184, .85) 0%,
      rgba(255, 91, 217, .55) 30%,
      rgba(126, 91, 217, .30) 65%,
      rgba(143, 169, 251, .60) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
  }
  /* particle layer */
  .pf-voc::after {
    content: ""; position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(rgba(255, 138, 184, .42) 1px, transparent 1.6px),
      radial-gradient(rgba(143, 169, 251, .30) 1px, transparent 1.6px);
    background-size: 200px 200px, 320px 320px;
    background-position: 0 0, 100px 80px;
    opacity: .50;
    mix-blend-mode: screen;
  }
  .pf-voc > * { position: relative; z-index: 1; }

  .pf-voc-glyph {
    width: 76px; height: 76px;
    border-radius: 22px;
    background: linear-gradient(135deg, #FF8AB8, #FF5BD9 50%, #7E5BD9 100%);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow:
      0 12px 30px rgba(255, 91, 217, .45),
      inset 0 0 0 1px rgba(255, 255, 255, .22);
    flex-shrink: 0;
  }

  .pf-voc-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .pf-voc-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-sans);
    font-size: 11px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: #FFC0E5;
  }
  .pf-voc-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: #FF5BD9;
    box-shadow: 0 0 0 3px rgba(255, 91, 217, .25);
  }
  .pf-voc-eyebrow .badge-add {
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF5BD9, #8FA9FB);
    color: #fff;
    font-size: 9.5px;
    letter-spacing: .14em;
  }
  .pf-voc-body h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.18;
    color: #fff;
    margin: 0;
    letter-spacing: -.014em;
    text-wrap: balance;
    max-width: 42ch;
  }
  .pf-voc-body h3 em {
    font-style: normal;
    background: linear-gradient(110deg, #FFC0E5 0%, #FF5BD9 40%, #8FA9FB 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .pf-voc-body p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    margin: 0;
    max-width: 62ch;
  }
  .pf-voc-body p b { color: #fff; font-weight: 600; }
  .pf-voc-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 4px;
  }
  .pf-voc-pill {
    font-size: 11.5px; font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 138, 184, .35);
    color: #fff;
  }
  .pf-voc-pill .num {
    color: #FF8AB8;
    margin-right: 5px;
    font-weight: 700;
  }

  .pf-voc-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF5BD9, #8FA9FB);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600; font-size: 14px;
    box-shadow: 0 12px 30px rgba(255, 91, 217, .42);
    transition: transform 180ms ease-out, box-shadow 180ms;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
  }
  .pf-voc-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 38px rgba(255, 91, 217, .55); }

  @media (max-width: 980px) {
    .pf-voc { grid-template-columns: 1fr; gap: 22px; padding: 30px 26px; }
    .pf-voc-cta { justify-self: stretch; justify-content: center; }
    .pf-voc-body h3 { font-size: 22px; }
  }

  /* ====================== WORKFLOW STRIP ====================== */
  .pf-flow {
    margin-top: 60px;
    background: linear-gradient(135deg, #7E5BD9 0%, #4769E8 60%, #0B25FD 100%);
    border-radius: 20px;
    padding: 38px 32px;
    color: #fff;
    box-shadow: 0 24px 60px rgba(11, 37, 253, .35), 0 0 0 1px rgba(255, 255, 255, .08);
    position: relative;
    overflow: hidden;
  }
  .pf-flow::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(50% 70% at 95% 5%,  rgba(255, 91, 217, .35), transparent 70%),
      radial-gradient(38% 65% at 5% 100%, rgba(255, 192, 229, .20), transparent 70%);
    pointer-events: none;
  }
  .pf-flow-head {
    position: relative;
    display: grid; grid-template-columns: 1fr auto; gap: 24px;
    align-items: end;
    margin-bottom: 28px;
  }
  .pf-flow-eyebrow {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 12px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  }
  .pf-flow-eyebrow .dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--tf-spark);
    box-shadow: 0 0 0 4px rgba(255, 91, 217, .35), 0 0 12px rgba(255, 91, 217, .9);
  }
  .pf-flow-eyebrow .dot {
    width: 7px; height: 7px; border-radius: 999px; background: var(--tf-spark);
    box-shadow: 0 0 0 4px rgba(255, 91, 217, .22);
  }
  .pf-flow-head h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.05;
    margin: 0;
    max-width: 22ch;
    letter-spacing: -0.02em;
  }
  .pf-flow-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tf-white);
    color: var(--tf-navy);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13.5px;
    padding: 12px 22px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255,255,255,.18);
    transition: all 200ms var(--ease-out);
  }
  .pf-flow-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(255,255,255,.24); }
  .pf-flow-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .pf-flow-step {
    background: rgba(15, 11, 65, .42);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    padding: 22px 20px 20px;
    backdrop-filter: blur(14px);
    position: relative;
    transition: all 250ms var(--ease-out);
  }
  .pf-flow-step:hover {
    background: rgba(15, 11, 65, .58);
    border-color: rgba(255, 255, 255, .32);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(11, 12, 50, .35);
  }
  /* Hide step connector arrows — versions are alternatives, not a sequence */
  .pf-flow-step::after { display: none; }

  /* Tier row — icon + badge side by side */
  .pf-flow-step-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
  }
  .pf-flow-step-ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
  }
  .pf-flow-step-ico svg { stroke-width: 1.8; }
  .pf-flow-step--basic .pf-flow-step-ico {
    background: linear-gradient(135deg, var(--tf-blue), var(--tf-blue-600));
    box-shadow: 0 8px 20px rgba(90, 132, 247, .45), inset 0 0 0 1px rgba(255,255,255,.15);
  }
  .pf-flow-step--business .pf-flow-step-ico {
    background: linear-gradient(135deg, var(--tf-violet), var(--tf-blue-600));
    box-shadow: 0 8px 20px rgba(126, 91, 217, .45), inset 0 0 0 1px rgba(255,255,255,.15);
  }
  .pf-flow-step--enterprise .pf-flow-step-ico {
    background: linear-gradient(135deg, var(--tf-spark), #FFC0E5);
    box-shadow: 0 8px 22px rgba(255, 91, 217, .55), inset 0 0 0 1px rgba(255,255,255,.18);
  }

  /* Tier badge replaces the step number */
  .pf-flow-tier {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
  }
  .pf-flow-step h4 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
    letter-spacing: -0.01em;
  }
  .pf-flow-step p {
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
    margin: 0;
    text-wrap: pretty;
  }

  /* ====================== Responsive ======================

     ANIMATIONS — reusable keyframes + utility classes.
     Re-trigger on tab change via key remount in JSX. */
  @keyframes pf-fade-up {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes pf-fade-in {
    from { opacity: 0; } to { opacity: 1; }
  }
  @keyframes pf-pop-in {
    0%   { opacity: 0; transform: scale(.86); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes pf-bar-fill {
    from { transform: scaleX(0); } to { transform: scaleX(1); }
  }
  @keyframes pf-stroke-draw {
    from { stroke-dashoffset: var(--dash, 1200); }
    to   { stroke-dashoffset: 0; }
  }
  @keyframes pf-radar-rotate-in {
    0%   { opacity: 0; transform: scale(.4) rotate(-90deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }

  /* Stagger KPI grid */
  .ren-kpis .ren-kpi { animation: pf-fade-up 520ms var(--ease-out) both; }
  .ren-kpis .ren-kpi:nth-child(1) { animation-delay: 80ms; }
  .ren-kpis .ren-kpi:nth-child(2) { animation-delay: 160ms; }
  .ren-kpis .ren-kpi:nth-child(3) { animation-delay: 240ms; }
  .ren-kpis .ren-kpi:nth-child(4) { animation-delay: 320ms; }

  /* Stagger result cards */
  .res-grid > .res-card { animation: pf-fade-up 480ms var(--ease-out) both; }
  .res-grid > .res-card:nth-child(1) { animation-delay: 80ms; }
  .res-grid > .res-card:nth-child(2) { animation-delay: 160ms; }
  .res-grid > .res-card:nth-child(3) { animation-delay: 240ms; }
  .res-grid > .res-card:nth-child(4) { animation-delay: 320ms; }
  .res-grid > .res-card:nth-child(5) { animation-delay: 400ms; }
  .res-grid > .res-card:nth-child(6) { animation-delay: 480ms; }

  /* Table rows */
  .res-table tbody tr,
  .car-table tbody tr {
    animation: pf-fade-up 380ms var(--ease-out) both;
  }
  .res-table tbody tr:nth-child(1) { animation-delay: 80ms; }
  .res-table tbody tr:nth-child(2) { animation-delay: 140ms; }
  .res-table tbody tr:nth-child(3) { animation-delay: 200ms; }
  .res-table tbody tr:nth-child(4) { animation-delay: 260ms; }
  .car-table tbody tr:nth-child(1) { animation-delay: 50ms; }
  .car-table tbody tr:nth-child(2) { animation-delay: 100ms; }
  .car-table tbody tr:nth-child(3) { animation-delay: 150ms; }
  .car-table tbody tr:nth-child(4) { animation-delay: 200ms; }
  .car-table tbody tr:nth-child(5) { animation-delay: 250ms; }
  .car-table tbody tr:nth-child(6) { animation-delay: 300ms; }
  .car-table tbody tr:nth-child(7) { animation-delay: 350ms; }

  /* Detalle: elements rows + transcript turns */
  .det-elements .det-el { animation: pf-fade-up 420ms var(--ease-out) both; }
  .det-elements .det-el:nth-child(1) { animation-delay: 240ms; }
  .det-elements .det-el:nth-child(2) { animation-delay: 300ms; }
  .det-elements .det-el:nth-child(3) { animation-delay: 360ms; }
  .det-elements .det-el:nth-child(4) { animation-delay: 420ms; }
  .det-elements .det-el:nth-child(5) { animation-delay: 480ms; }
  .det-elements .det-el:nth-child(6) { animation-delay: 540ms; }
  .det-transcript .det-turn { animation: pf-fade-up 460ms var(--ease-out) both; }
  .det-transcript .det-turn:nth-child(1) { animation-delay: 320ms; }
  .det-transcript .det-turn:nth-child(2) { animation-delay: 400ms; }
  .det-transcript .det-turn:nth-child(3) { animation-delay: 480ms; }
  .det-transcript .det-turn:nth-child(4) { animation-delay: 560ms; }

  /* Bar fills */
  .ren-elem-bar i,
  .det-audio-bar i,
  .car-proc-bar i,
  .car-pending-item .progress i {
    transform-origin: left center;
    animation: pf-bar-fill 900ms var(--ease-out) both;
    animation-delay: 360ms;
  }

  /* Score pills pop in */
  .det-el-score, .ren-elem-pair b, .res-card-stats .score, .ren-call-stats .score, .score-pill {
    animation: pf-pop-in 520ms var(--ease-out) both;
    animation-delay: 320ms;
  }

  /* Radar polygons — only animate the filled value-poly (last one). The grid
     rings are also <polygon> elements but they have fill:none so we target by attr. */
  .det-radar svg polygon[fill^="rgba(90"] {
    transform-origin: center;
    animation: pf-radar-rotate-in 900ms var(--ease-out) both;
    animation-delay: 220ms;
  }
  .det-radar svg circle {
    animation: pf-pop-in 320ms var(--ease-out) both;
    animation-delay: 820ms;
  }

  /* Line chart paths trace in */
  .ren-chart svg path[stroke="#5A84F7"],
  .ren-chart svg path[stroke="#5C57A1"] {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: pf-stroke-draw 1400ms var(--ease-out) both;
    animation-delay: 320ms;
  }
  .ren-chart svg circle {
    animation: pf-fade-in 320ms var(--ease-out) both;
    animation-delay: 1100ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .pf * { animation: none !important; }
  }

  /* ====================== CTA CIERRE ====================== */
  .pf-cta {
    margin-top: 64px;
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    padding: 76px 56px;
    background:
      radial-gradient(45% 75% at 86% 50%,  rgba(255, 91, 217, .55), transparent 65%),
      radial-gradient(40% 60% at 14% 50%,  rgba(126, 91, 217, .40), transparent 65%),
      radial-gradient(80% 100% at 50% 120%, rgba(11, 37, 253, .55), transparent 70%),
      linear-gradient(135deg, #0E0A3A 0%, #15104F 60%, #2A2289 100%);
    box-shadow:
      0 30px 80px rgba(11, 12, 50, .55),
      0 0 0 1px rgba(255, 255, 255, .08),
      0 0 120px rgba(126, 91, 217, .25);
    text-align: center;
    color: #fff;
  }
  /* Cosmic dust over the CTA */
  .pf-cta::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      radial-gradient(rgba(255, 255, 255, .8) 1px, transparent 1.4px),
      radial-gradient(rgba(255, 91, 217, .55) 1px, transparent 1.4px);
    background-size: 220px 220px, 320px 320px;
    background-position: 0 0, 110px 90px;
    opacity: .25;
    pointer-events: none;
  }
  /* Spark orb behind */
  .pf-cta::after {
    content: "";
    position: absolute;
    top: 50%; left: 86%;
    transform: translate(-50%, -50%);
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 91, 217, .6) 0%, transparent 60%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
  }
  .pf-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
  }
  .pf-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 28px;
    backdrop-filter: blur(10px);
  }
  .pf-cta-eyebrow .dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--tf-spark);
    box-shadow: 0 0 0 4px rgba(255, 91, 217, .25), 0 0 14px rgba(255, 91, 217, .9);
    animation: pf-cta-pulse 2.4s ease-in-out infinite;
  }
  @keyframes pf-cta-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 91, 217, .25), 0 0 14px rgba(255, 91, 217, .9); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 91, 217, 0),     0 0 24px rgba(255, 91, 217, 1); }
  }
  .pf-cta h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(5, 2, 26, .35);
  }
  .pf-cta h3 em {
    font-style: normal;
    background: linear-gradient(110deg, #FFC0E5 0%, #FF5BD9 60%, #B7A1ED 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .pf-cta p {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
    margin: 18px auto 36px;
    max-width: 56ch;
    text-wrap: pretty;
  }
  .pf-cta-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  .pf-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.005em;
    cursor: pointer;
    border: none;
    transition: all 220ms var(--ease-out);
    text-decoration: none;
  }
  .pf-cta-btn-primary {
    background: linear-gradient(110deg, #FF5BD9 0%, #FF7BE0 100%);
    color: #fff;
    box-shadow:
      0 12px 28px rgba(255, 91, 217, .45),
      0 0 0 1px rgba(255, 255, 255, .14) inset;
  }
  .pf-cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
      0 18px 38px rgba(255, 91, 217, .55),
      0 0 0 1px rgba(255, 255, 255, .22) inset;
  }
  .pf-cta-btn-secondary {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(10px);
  }
  .pf-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .42);
    transform: translateY(-2px);
  }
  .pf-cta-btn .ico {
    width: 22px; height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pf-cta-btn .ico svg { width: 12px; height: 12px; }
  .pf-cta-foot {
    margin-top: 22px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .58);
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .pf-cta-foot span {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .pf-cta-foot svg { width: 11px; height: 11px; color: var(--success); }
  .pf-cta-foot .sep {
    width: 4px; height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
  }

  @media (max-width: 720px) {
    .pf-cta { padding: 60px 26px; }
    .pf-cta-buttons { flex-direction: column; align-items: stretch; }
    .pf-cta-btn { justify-content: center; }
  }

  /* ====================== Responsive (real) ====================== */
  @media (max-width: 1100px) {
    .det-grid { grid-template-columns: 1fr 1fr; }
    .det-audio-card { grid-column: 1 / -1; }
    .ren-row { grid-template-columns: 1fr; }
    .ren-calls { grid-template-columns: 1fr; }
    .res-grid { grid-template-columns: repeat(2, 1fr); }
    .pf-caps { grid-template-columns: repeat(2, 1fr); }
    .pf-flow-steps { grid-template-columns: repeat(2, 1fr); }
    .pf-flow-step::after { display: none; }
    .pf-flow-steps { grid-template-columns: 1fr; }
    .car-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    /* Callouts collapse to 1 col on phone */
    .pf-callouts-strip { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .pf { padding: 80px 20px 100px; }
    .pf-headline { font-size: clamp(34px, 9vw, 56px); }
    .pf-sub { font-size: 17px; }
    .ren-kpis { grid-template-columns: repeat(2, 1fr); }
    .det-grid { grid-template-columns: 1fr; }
    .det-header { grid-template-columns: 1fr; gap: 8px; }
    .res-grid { grid-template-columns: 1fr; }
    .pf-caps { grid-template-columns: 1fr; }
    .pf-flow-head { grid-template-columns: 1fr; }
    .pf-flow-steps { grid-template-columns: 1fr; }
  }


/* ============================================================
   HOMEPAGE BRIDGE — cintillo CTA between Comparativa & Plataforma
   ------------------------------------------------------------
   The CTA card "¿Quieres saber cómo implementar Talkinfor?" is
   repurposed as a full-bleed brand-gradient strap that straddles
   the daylight↔night seam. The Plataforma's sunset gradient is
   removed so the seam is a clean cut instead of a fade.
   ============================================================ */

/* Kill the sunset bridge at the top of Plataforma. */
.home-root .pf::after { display: none !important; }
/* Trim Plataforma's top padding — strap sits flush against it. */
.home-root .pf { padding-top: 100px !important; }
/* Trim Comparativa's bottom padding so the cintillo sits flush at the seam,
   but leave breathing room between the demo card and the strap above it. */
.home-root .mc { padding-bottom: 0 !important; }
.home-root .mc-foot { margin-top: 96px !important; }

/* The cintillo itself — full-bleed, brand gradient, flush band at the seam.
   No overlap: .pf has isolation:isolate (own stacking context), which would
   cover any strap content extending into it. Instead the strap IS the
   transition — a single bold horizontal cut between daylight and night. */
.home-root .mc-foot {
  /* Break out of .mc-shell to span the full viewport width. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  border: 0;
  position: relative;
  z-index: 1;
  /* Always-centered vertical stack — glyph, eyebrow+headline, buttons.
     This keeps the strap responsive at every viewport size without
     breakpoint guesswork. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: 56px max(24px, 5vw);
  /* Brand gradient — readable on top of daylight AND night canvases. */
  background:
    radial-gradient(60% 120% at 92% 0%, rgba(255, 91, 217, .35), transparent 60%),
    radial-gradient(50% 140% at 0% 100%, rgba(11, 37, 253, .35), transparent 65%),
    linear-gradient(110deg, #2A2289 0%, #3F37B0 35%, #4769E8 65%, #7E5BD9 100%);
  color: #fff;
  box-shadow:
    0 28px 60px rgba(11, 12, 50, .45),
    0 0 0 1px rgba(255, 255, 255, .06) inset;
  overflow: hidden;
}

/* Constrain the text block so long headlines wrap nicely on wide screens. */
.home-root .mc-foot-text { max-width: 760px; }
.home-root .mc-foot-actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Decorative curves — SVG flow-lines that visually bridge the daylight
   Comparativa above and the night Plataforma below. Pink/coral echoes the
   pillars/accent colors used in .mc; cyan/violet echoes chart colors used
   in .pf. Two layered ribbons at different opacities + a soft pink glow. */
.home-root .mc-foot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* soft warm glow on the right (replaces the old pink blob) */
    radial-gradient(38% 90% at 96% 30%, rgba(255, 122, 184, .22), transparent 70%),
    /* layer 1 — broad ribbon, pink→cyan, echoes both palettes */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'><defs><linearGradient id='g1' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%23FF7AB8' stop-opacity='0.55'/><stop offset='0.55' stop-color='%23B58CFF' stop-opacity='0.45'/><stop offset='1' stop-color='%234FD4E8' stop-opacity='0.55'/></linearGradient></defs><path d='M-20,140 C 200,40 420,200 660,110 S 1080,30 1320,130 1620,80 1620,80' fill='none' stroke='url(%23g1)' stroke-width='2.2' stroke-linecap='round'/></svg>"),
    /* layer 2 — thinner counter-curve, cyan/violet only */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'><defs><linearGradient id='g2' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%2371E1F2' stop-opacity='0.0'/><stop offset='0.45' stop-color='%2371E1F2' stop-opacity='0.45'/><stop offset='1' stop-color='%23B58CFF' stop-opacity='0.0'/></linearGradient></defs><path d='M-20,60 C 240,160 500,20 760,90 S 1180,170 1400,80 1620,120 1620,120' fill='none' stroke='url(%23g2)' stroke-width='1.4' stroke-linecap='round'/></svg>"),
    /* layer 3 — tiny upper hairline, pink, sits near the seam with .mc */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'><defs><linearGradient id='g3' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%23FFB7DF' stop-opacity='0.0'/><stop offset='0.5' stop-color='%23FFB7DF' stop-opacity='0.35'/><stop offset='1' stop-color='%23FFB7DF' stop-opacity='0.0'/></linearGradient></defs><path d='M-20,30 C 320,90 700,5 1020,55 S 1380,40 1620,20' fill='none' stroke='url(%23g3)' stroke-width='1' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: center;
  /* Keep ::before below content but above the gradient base. */
  z-index: 0;
  /* Reset prior blob sizing/blur. */
  top: 0; right: 0; left: 0; bottom: 0;
  width: auto; height: auto;
  filter: none;
}
/* Make sure the content sits above the curves. */
.home-root .mc-foot > * { position: relative; z-index: 1; }

/* Glyph: pink→violet on the strap looks brighter than the original. */
.home-root .mc-foot-glyph {
  background: linear-gradient(135deg, #FF5BD9 0%, #8FA9FB 100%);
  box-shadow:
    0 10px 28px rgba(255, 91, 217, .45),
    0 0 0 1px rgba(255, 255, 255, .22) inset;
}

/* Text on dark. */
.home-root .mc-foot-eyebrow { color: #FFC0E5; }
.home-root .mc-foot-line    { color: #fff; }
.home-root .mc-foot-line strong {
  background: linear-gradient(110deg, #FFC0E5 0%, #FF5BD9 45%, #8FA9FB 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Primary CTA already pink — keep. Secondary needs dark-mode treatment. */
.home-root .mc-foot-btn-secondary {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.home-root .mc-foot-btn-secondary:hover {
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .32);
}
.home-root .mc-foot-btn-secondary .ico {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* Stacked layout is the default now. Only narrow phones need to switch
   buttons to full-width column. */
.home-root .mc-foot-btn { white-space: nowrap; }
@media (max-width: 540px) {
  .home-root .mc-foot-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .home-root .mc-foot-btn { justify-content: center; }
}