/* ComparaFactura.es — visual refresh 2026-08-25
   Design-only layer. Desktop and mobile visual overrides only. */

@media (min-width:1024px){
  :root{
    --cfdr-ink:#101828;
    --cfdr-muted:#526176;
    --cfdr-line:#dfe7f4;
    --cfdr-indigo:#5146e5;
    --cfdr-violet:#6d3df2;
    --cfdr-green:#13a875;
    --cfdr-soft:#f7f9fe;
    --cfdr-shadow:0 24px 70px rgba(15,23,42,.10),0 8px 24px rgba(15,23,42,.05);
    --cfdr-shadow-sm:0 12px 32px rgba(15,23,42,.07),0 3px 10px rgba(15,23,42,.035);
  }

  html{scroll-behavior:smooth}
  body{
    background:
      radial-gradient(1050px 480px at 4% -5%,rgba(124,92,246,.10),transparent 68%),
      radial-gradient(920px 430px at 96% 4%,rgba(34,197,94,.07),transparent 68%),
      #f7f9fd;
    color:var(--cfdr-ink);
  }

  /* Actual React header */
  #root > header.sticky,
  #root header.sticky.top-0{
    top:14px!important;
    width:min(calc(100% - 32px),1240px)!important;
    margin:0 auto!important;
    border:1px solid rgba(218,226,240,.92)!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.84)!important;
    backdrop-filter:blur(18px) saturate(1.08)!important;
    box-shadow:0 14px 38px rgba(15,23,42,.08)!important;
    overflow:hidden;
  }
  #root header.sticky.top-0 > div{max-width:none!important;padding-left:26px!important;padding-right:22px!important}
  #root #header-logo-btn > div:first-child{border-radius:13px!important;box-shadow:0 8px 20px rgba(79,70,229,.22)!important}
  #root #desktop-nav a{position:relative;font-weight:650!important;letter-spacing:-.01em}
  #root #desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:999px;background:linear-gradient(90deg,#5146e5,#16a085);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
  #root #desktop-nav a:hover::after{transform:scaleX(1)}
  /* Header CTA: deliberately visible breathing pulse and sweeping shine. */
  @keyframes cfdrHeaderCtaBreath{
    0%,46%,100%{transform:scale(1);box-shadow:0 12px 25px rgba(79,70,229,.28),0 0 0 0 rgba(129,140,248,0),0 0 20px rgba(99,102,241,0);filter:brightness(1)}
    62%{transform:scale(1.075);box-shadow:0 24px 44px rgba(79,70,229,.56),0 0 0 7px rgba(129,140,248,.18),0 0 40px rgba(99,102,241,.58);filter:brightness(1.14) saturate(1.08)}
    78%{transform:scale(1.025);box-shadow:0 18px 35px rgba(79,70,229,.43),0 0 0 3px rgba(129,140,248,.11),0 0 25px rgba(99,102,241,.36);filter:brightness(1.055)}
  }
  @keyframes cfdrHeaderCtaShine{
    0%,50%{opacity:0;transform:translateX(-185%) skewX(-20deg)}
    68%{opacity:.76}
    89%,100%{opacity:0;transform:translateX(255%) skewX(-20deg)}
  }
  #root #header-analyze-cta{border-radius:16px!important;padding:11px 20px!important;background:linear-gradient(135deg,#5146e5,#653ff1)!important;box-shadow:0 12px 25px rgba(79,70,229,.28)}
  #root #header-analyze-cta:not(:disabled){animation:cfdrHeaderCtaBreath 2.45s ease-in-out infinite;transform-origin:center;will-change:transform,box-shadow,filter}
  #root #header-analyze-cta:not(:disabled)::before{background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,.22) 39%,rgba(255,255,255,.86) 50%,rgba(255,255,255,.18) 61%,transparent 100%);animation:cfdrHeaderCtaShine 2.45s ease-in-out infinite}
  #root #header-analyze-cta:hover{animation-play-state:paused;transform:translateY(-2px) scale(1.06)!important;box-shadow:0 25px 44px rgba(79,70,229,.58),0 0 0 7px rgba(129,140,248,.18),0 0 40px rgba(99,102,241,.58)!important;filter:brightness(1.12) saturate(1.06)}
  #root #header-analyze-cta:hover::before{animation-play-state:paused}

  /* Main hero CTA: stronger pulse, wider glow and brighter sweep. */
  @keyframes cfdrHeroCtaBreath{
    0%,40%,100%{transform:scale(1);box-shadow:0 18px 30px -10px rgba(79,70,229,.44),0 0 0 0 rgba(129,140,248,0),0 0 24px rgba(99,102,241,0);filter:brightness(1)}
    58%{transform:scale(1.09);box-shadow:0 32px 54px -10px rgba(79,70,229,.78),0 0 0 9px rgba(129,140,248,.22),0 0 52px rgba(99,102,241,.72);filter:brightness(1.19) saturate(1.11)}
    76%{transform:scale(1.035);box-shadow:0 24px 43px -10px rgba(79,70,229,.61),0 0 0 4px rgba(129,140,248,.14),0 0 34px rgba(99,102,241,.48);filter:brightness(1.08) saturate(1.05)}
  }
  @keyframes cfdrHeroCtaShine{
    0%,38%{opacity:0;transform:translateX(-190%) skewX(-20deg)}
    60%{opacity:.94}
    84%,100%{opacity:0;transform:translateX(265%) skewX(-20deg)}
  }
  #root #hero-upload-file-btn:not(:disabled){animation:cfdrHeroCtaBreath 2.2s ease-in-out infinite;transform-origin:center;will-change:transform,box-shadow,filter}
  #root #hero-upload-file-btn:not(:disabled)::before{background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,0) 12%,rgba(255,255,255,.28) 37%,rgba(255,255,255,.96) 50%,rgba(255,255,255,.23) 63%,transparent 100%);animation:cfdrHeroCtaShine 2.2s ease-in-out infinite}
  #root #hero-upload-file-btn:not(:disabled):hover{animation-play-state:paused;transform:translateY(-3px) scale(1.075)!important;box-shadow:0 32px 54px -10px rgba(79,70,229,.78),0 0 0 9px rgba(129,140,248,.22),0 0 52px rgba(99,102,241,.72)!important;filter:brightness(1.17) saturate(1.09)}
  #root #hero-upload-file-btn:not(:disabled):hover::before{animation-play-state:paused}

  /* Actual React home hero */
  #root section.relative.pt-10.pb-14.bg-white{
    margin:28px auto 0!important;
    width:min(calc(100% - 32px),1240px)!important;
    min-height:510px!important;
    padding:0!important;
    border:1px solid rgba(218,226,240,.94)!important;
    border-radius:36px!important;
    background:
      radial-gradient(420px 270px at 83% 17%,rgba(99,102,241,.14),transparent 72%),
      radial-gradient(460px 320px at 76% 88%,rgba(16,185,129,.09),transparent 74%),
      linear-gradient(145deg,#ffffff 0%,#fbfbff 52%,#f3f8ff 100%)!important;
    box-shadow:var(--cfdr-shadow)!important;
    overflow:hidden!important;
  }
  #root section.relative.pt-10.pb-14.bg-white::before{
    content:none;
  }
  #root section.relative.pt-10.pb-14.bg-white::after{
    content:"";
    position:absolute;
    right:-2px;
    top:-2px;
    bottom:-2px;
    width:59%;
    height:auto;
    background-image:url('/hero-factura-solo-crop.webp?v=20260828-hd1');
    background-image:-webkit-image-set(url('/hero-factura-solo-crop.webp?v=20260828-hd1') 1x,url('/hero-factura-solo-crop@2x.webp?v=20260828-hd1') 2x);
    background-image:image-set(url('/hero-factura-solo-crop.webp?v=20260828-hd1') 1x,url('/hero-factura-solo-crop@2x.webp?v=20260828-hd1') 2x);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    border:0;
    border-radius:0;
    box-shadow:none;
    transform:none;
    z-index:1;
    /* Fade the artwork into the hero instead of exposing the rectangular
       limits of the source image (left edge + lower edge). */
    -webkit-mask-image:
      linear-gradient(to right,transparent 0%,rgba(0,0,0,.14) 5%,#000 18%,#000 100%),
      linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.82) 90%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right,transparent 0%,rgba(0,0,0,.14) 5%,#000 18%,#000 100%),
      linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.82) 90%,transparent 100%);
    mask-composite:intersect;
    filter:drop-shadow(0 18px 38px rgba(79,70,229,.08));
  }
  #root section.relative.pt-10.pb-14.bg-white > .max-w-4xl{
    position:relative;z-index:2;max-width:none!important;width:100%!important;
    min-height:510px!important;margin:0!important;padding:52px 620px 42px 58px!important;
    text-align:left!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .inline-flex.items-center.rounded-full{
    background:#eef2ff!important;border-color:#d8defd!important;color:#4338ca!important;
    padding:8px 13px!important;font-weight:750!important;box-shadow:0 4px 12px rgba(79,70,229,.05)!important;
  }
  #root section.relative.pt-10.pb-14.bg-white h1{
    max-width:620px!important;margin-bottom:20px!important;
    font-size:clamp(3.1rem,4.25vw,4.4rem)!important;line-height:.96!important;
    letter-spacing:-.058em!important;color:#0f172a!important;
  }
  #root section.relative.pt-10.pb-14.bg-white h1::after{
    content:"";display:block;width:112px;height:6px;margin-top:17px;border-radius:999px;background:linear-gradient(90deg,#5146e5,#16a875)
  }
  #root section.relative.pt-10.pb-14.bg-white p.text-base{
    max-width:570px!important;margin-left:0!important;margin-right:0!important;margin-bottom:16px!important;
    color:#526176!important;font-size:1.12rem!important;line-height:1.65!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-private-pill{
    margin:10px 0 20px!important;padding:10px 14px!important;background:#ecfdf5!important;border-color:#b7ecd6!important;box-shadow:0 5px 14px rgba(16,185,129,.06)!important
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-hero-actions{
    align-items:flex-start!important;margin:0 0 17px!important;max-width:520px!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-hero-primary{
    max-width:480px!important;border-radius:18px!important;background:linear-gradient(135deg,#5146e5,#653ff1 58%,#405cf5)!important;
    box-shadow:0 18px 34px rgba(79,70,229,.25);
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-qr-secondary{justify-content:flex-start!important;padding-left:10px!important}
  #root section.relative.pt-10.pb-14.bg-white .cf-benefit-strip{
    justify-content:flex-start!important;margin:0!important;max-width:550px!important;gap:8px!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-benefit-item{
    background:rgba(255,255,255,.85)!important;border-color:#dce5f0!important;padding:7px 11px!important;box-shadow:0 5px 12px rgba(15,23,42,.035)!important
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-segment-line{max-width:520px!important;margin:13px 0 0!important;line-height:1.45!important}

  /* Process + preview: product-led section */
  #root section.py-12.sm\:py-16.bg-white{
    width:min(calc(100% - 32px),1240px)!important;margin:24px auto!important;padding:44px 46px!important;
    border:1px solid rgba(218,226,240,.94)!important;border-radius:32px!important;
    background:linear-gradient(180deg,#ffffff 0%,#f8faff 100%)!important;box-shadow:var(--cfdr-shadow-sm)!important;
  }
  #root section.py-12.sm\:py-16.bg-white > .max-w-5xl{max-width:none!important;padding:0!important}
  #root section.py-12.sm\:py-16.bg-white .text-center.mb-10{text-align:left!important;margin-bottom:24px!important}
  #root section.py-12.sm\:py-16.bg-white .text-center.mb-10 p{font-size:2.15rem!important;letter-spacing:-.035em!important}
  #root section.py-12.sm\:py-16.bg-white .grid.grid-cols-1.md\:grid-cols-3 > div{
    border-radius:22px!important;border-color:#dfe7f4!important;background:#fff!important;box-shadow:0 9px 24px rgba(15,23,42,.045)!important;
  }
  #root section.py-12.sm\:py-16.bg-white .grid.grid-cols-1.md\:grid-cols-3 > div:hover{transform:translateY(-3px)!important;box-shadow:0 16px 34px rgba(79,70,229,.09)!important}
  #root .cf-result-preview{
    border-radius:28px!important;border-color:#dbe4f0!important;background:linear-gradient(150deg,#fff 0%,#f7f8ff 58%,#eefbf7 100%)!important;
    box-shadow:0 22px 50px rgba(15,23,42,.08)!important;padding:24px!important;
  }
  #root .cf-preview-card{border-radius:17px!important;border-color:#dfe7f4!important;box-shadow:0 7px 18px rgba(15,23,42,.035)!important}
  #root .cf-preview-ranking{border-radius:19px!important;background:linear-gradient(145deg,#171b37,#22275a)!important;box-shadow:0 15px 32px rgba(15,23,42,.18)!important}

  /* Results / funnel */
  #root .cf-funnel-summary{border-radius:30px!important;border-color:#dbe4f0!important;background:linear-gradient(145deg,#fff 0%,#f7f8ff 58%,#eefbf7 100%)!important;box-shadow:var(--cfdr-shadow-sm)!important}
  #root .cf-funnel-kpi{border-radius:19px!important;box-shadow:0 8px 20px rgba(15,23,42,.045)!important}

  /* SEO answer layer on the home */
  .cf-answer-layer{background:transparent!important;border-top:0!important}
  .cf-answer-layer__inner{max-width:1240px!important;padding:18px 16px 58px!important}
  .cf-answer-layer__section{margin:0 0 22px!important;padding:30px!important;border:1px solid #dfe7f4!important;border-radius:28px!important;background:rgba(255,255,255,.94)!important;box-shadow:var(--cfdr-shadow-sm)!important}
  .cf-answer-layer__section h3{letter-spacing:-.025em!important}
  .cf-answer-layer__section h3::before{content:"";display:block;width:54px;height:5px;border-radius:999px;background:linear-gradient(90deg,#5146e5,#16a875);margin-bottom:13px}
  .cf-answer-layer__sources a{border-radius:999px!important;border:1px solid #dfe7f4!important;background:#fff!important;padding:9px 13px!important;box-shadow:0 5px 14px rgba(15,23,42,.035)!important}

  /* Attraction/content pages */
  body.cf-attraction-page{
    background:radial-gradient(1000px 420px at 50% -80px,rgba(99,102,241,.10),transparent 68%),linear-gradient(180deg,#f8faff,#f5f7fb)!important;
  }
  body.cf-attraction-page main{max-width:1080px!important;margin-top:34px!important}
  body.cf-attraction-page .card{border-radius:32px!important;border-color:#dfe7f4!important;background:linear-gradient(180deg,#fff,#fbfcff)!important;box-shadow:var(--cfdr-shadow)!important}
  body.cf-attraction-page .page-nav a{border-radius:999px!important;background:#fff!important;border-color:#dfe7f4!important;box-shadow:0 5px 14px rgba(15,23,42,.035)!important}
  body.cf-attraction-page .mini-card,body.cf-attraction-page .callout,body.cf-attraction-page .geo-answer,body.cf-attraction-page .geo-facts,body.cf-attraction-page .geo-case,body.cf-attraction-page .geo-sources{border-radius:20px!important;border-color:#dfe7f4!important;background:linear-gradient(180deg,#fff,#fbfcff)!important;box-shadow:0 10px 25px rgba(15,23,42,.045)!important}
  body.cf-attraction-page .cf-conversion-hero{border-radius:26px!important;box-shadow:0 16px 36px rgba(79,70,229,.09)!important}

  /* Compi SEO landings */
  .compi-shell{width:min(1160px,calc(100% - 40px))!important}
  .compi-card{border-radius:32px!important;border-color:#dfe7f4!important;box-shadow:var(--cfdr-shadow)!important}
  .compi-hero{position:relative!important;padding:54px 500px 46px 52px!important;min-height:460px!important;background:linear-gradient(145deg,#fff 0%,#f7f8ff 58%,#effbf7 100%)!important}
  .compi-hero::after{content:"";position:absolute;right:52px;top:72px;width:370px;height:226px;border:1px solid #dfe7f4;border-radius:28px;background:linear-gradient(90deg,#5146e5 0 40%,transparent 40%) 28px 48px/110px 11px no-repeat,linear-gradient(90deg,#16a875 0 64%,transparent 64%) 28px 84px/175px 11px no-repeat,linear-gradient(90deg,#cbd5e1 0 80%,transparent 80%) 28px 122px/235px 10px no-repeat,linear-gradient(180deg,#fff,#fbfcff);box-shadow:0 22px 46px rgba(79,70,229,.11)}
  .compi-content{padding:42px 52px 52px!important;background:linear-gradient(180deg,#fff,#fbfcff)!important}
  .compi-mini,.compi-step,.compi-fact,.compi-answer,.compi-callout,.compi-sources{border-radius:20px!important;box-shadow:0 9px 23px rgba(15,23,42,.045)!important}

  /* Generic legal/simple cards */
  body:not(.cf-attraction-page) > main > .card,
  body:not(.cf-attraction-page) main > article.card{
    border-radius:30px!important;border-color:#dfe7f4!important;background:linear-gradient(180deg,#fff,#fbfcff)!important;box-shadow:var(--cfdr-shadow)!important;
  }
  .data-table{border-radius:18px!important;overflow:hidden!important;border:1px solid #dfe7f4!important;box-shadow:0 7px 20px rgba(15,23,42,.04)!important}

  /* Human restrained motion */
  @media (prefers-reduced-motion:no-preference){
    @keyframes cfdrFloatPiggy{0%,100%{translate:0 0}50%{translate:0 -6px}}
  }
}

@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  #root #header-analyze-cta:not(:disabled),
  #root #header-analyze-cta:not(:disabled)::before,
  #root #hero-upload-file-btn:not(:disabled),
  #root #hero-upload-file-btn:not(:disabled)::before{animation:none}
}

/* Restore and keep the residential/business selector visible above hero art. */
@media (min-width:1024px){
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch-wrap{
    position:relative;
    z-index:5;
    justify-content:flex-start;
    max-width:520px;
    margin:0 0 1.15rem!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch{
    background:rgba(255,255,255,.92);
    border-color:#d9e2ef;
    box-shadow:0 7px 18px rgba(15,23,42,.05);
  }
}

/* Hero controls alignment refinement — 2026-08-26
   Keep the privacy notice, mode selector, primary CTA and trust badges on one
   consistent visual grid. Desktop only; mobile remains untouched. */
@media (min-width:1024px){
  #root section.relative.pt-10.pb-14.bg-white .cf-private-pill,
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch-wrap,
  #root section.relative.pt-10.pb-14.bg-white .cf-hero-actions,
  #root section.relative.pt-10.pb-14.bg-white .cf-benefit-strip,
  #root section.relative.pt-10.pb-14.bg-white .cf-segment-line{
    width:480px!important;
    max-width:480px!important;
    box-sizing:border-box!important;
  }

  #root section.relative.pt-10.pb-14.bg-white .cf-private-pill{
    display:flex!important;
    justify-content:center!important;
    text-align:center!important;
  }

  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch-wrap{
    justify-content:flex-start!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch a,
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch button{
    min-width:0!important;
  }

  #root section.relative.pt-10.pb-14.bg-white .cf-hero-actions{
    align-items:stretch!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-hero-primary{
    width:100%!important;
    max-width:none!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-qr-secondary{
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
    padding-left:.6rem!important;
    padding-right:.6rem!important;
  }

  #root section.relative.pt-10.pb-14.bg-white .cf-benefit-strip{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    gap:10px!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-benefit-item{
    width:auto!important;
    min-height:0!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    text-align:left!important;
  }
}


/* --------------------------------------------------------------------------
   ComparaFactura.es — brand refinement 2026-08-28
   Visual-only desktop layer. No behavior, parser, reader or funnel logic.
   Goals: stronger brand signature, clearer type hierarchy, deliberate 3D hero
   composition and less "default SaaS" card treatment.
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  :root{
    --cf-brand-ink:#0b1220;
    --cf-brand-indigo:#4938d8;
    --cf-brand-indigo-deep:#3828bd;
    --cf-brand-teal:#0b9f7a;
    --cf-brand-teal-soft:#e8f8f3;
    --cf-brand-line:#d8e1ec;
    --cf-brand-paper:#fbfcfe;
  }

  /* More distinctive brand mark: ultraviolet + energy-teal, not a generic SaaS tile. */
  #root #header-logo-btn > div:first-child{
    background:linear-gradient(145deg,#4f46e5 0%,#4338ca 100%)!important;
    border-radius:11px!important;
    box-shadow:0 8px 18px rgba(56,40,189,.18)!important;
  }
  #root #header-logo-btn span.text-indigo-600{color:var(--cf-brand-indigo)!important}

  /* Header is crisper and less "floating glass pill" while keeping the current layout. */
  #root > header.sticky,
  #root header.sticky.top-0{
    border-radius:18px!important;
    border-color:rgba(204,214,228,.96)!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 10px 30px rgba(15,23,42,.065)!important;
  }
  #root #desktop-nav a{color:#344054!important;font-weight:680!important}
  #root #desktop-nav a:hover{color:var(--cf-brand-indigo)!important}
  #root #desktop-nav a::after{
    bottom:-10px!important;
    height:3px!important;
    background:linear-gradient(90deg,var(--cf-brand-indigo) 0 68%,var(--cf-brand-teal) 68% 100%)!important;
  }

  /* Keep the requested breathing CTA, but make the surface more brand-specific and less gradient-heavy. */
  #root #header-analyze-cta{
    border-radius:13px!important;
    background:linear-gradient(120deg,var(--cf-brand-indigo) 0 74%,#5748df 74% 100%)!important;
    box-shadow:0 10px 24px rgba(73,56,216,.24),inset 0 -3px 0 rgba(11,159,122,.35)!important;
  }

  /* Hero: intentionally asymmetric. The product visual now behaves as a complete floating
     analysis surface rather than a background image fading/cutting into the page. */
  #root section.relative.pt-10.pb-14.bg-white{
    min-height:548px!important;
    border-radius:28px!important;
    border-color:rgba(205,215,228,.96)!important;
    background:
      radial-gradient(500px 300px at 92% 10%,rgba(73,56,216,.10),transparent 72%),
      linear-gradient(117deg,#fff 0%,#fff 46%,#f8faff 46.1%,#f4f8fb 100%)!important;
    box-shadow:0 22px 58px rgba(15,23,42,.085),0 3px 12px rgba(15,23,42,.035)!important;
  }
  #root section.relative.pt-10.pb-14.bg-white::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    right:26px!important;
    top:56px!important;
    width:45.5%!important;
    height:76%!important;
    border-radius:28px!important;
    border:1px solid rgba(73,56,216,.11)!important;
    background:
      linear-gradient(145deg,rgba(73,56,216,.12),rgba(11,159,122,.06)),
      #f5f7fc!important;
    transform:perspective(1400px) rotateY(-8deg) rotateZ(2.1deg) translateX(14px)!important;
    transform-origin:center right!important;
    box-shadow:0 20px 42px rgba(56,40,189,.08)!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  #root section.relative.pt-10.pb-14.bg-white::after{
    right:-10px!important;
    top:30px!important;
    bottom:auto!important;
    width:51.5%!important;
    height:488px!important;
    border:8px solid rgba(255,255,255,.94)!important;
    border-radius:26px!important;
    background-position:center 31%!important;
    background-size:cover!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    filter:none!important;
    transform:perspective(1500px) rotateY(-7deg) rotateZ(-1.15deg) translateX(18px)!important;
    transform-origin:center right!important;
    box-shadow:0 30px 70px rgba(22,33,62,.18),0 10px 24px rgba(73,56,216,.09)!important;
    z-index:1!important;
  }
  #root section.relative.pt-10.pb-14.bg-white > .max-w-4xl{
    min-height:548px!important;
    padding:52px 57% 42px 58px!important;
    z-index:2!important;
  }

  /* Small product-status rail makes the right-hand visual read as a real product state. */
  #root section.relative.pt-10.pb-14.bg-white > .max-w-4xl::after{
    content:"";
    position:absolute;
    right:32px;
    bottom:24px;
    width:150px;
    height:5px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--cf-brand-indigo) 0 72%,var(--cf-brand-teal) 72% 100%);
    opacity:.85;
    box-shadow:0 6px 18px rgba(73,56,216,.12);
    pointer-events:none;
  }

  /* Typographic hierarchy: retain the literal H1 text, but give the key phrase a recognisable
     brand treatment. Better contrast and less dependence on an underline decoration. */
  #root section.relative.pt-10.pb-14.bg-white h1{
    max-width:540px!important;
    margin-bottom:18px!important;
    font-size:clamp(3rem,4vw,4.12rem)!important;
    line-height:.98!important;
    letter-spacing:-.062em!important;
    color:var(--cf-brand-ink)!important;
    font-weight:850!important;
  }
  #root section.relative.pt-10.pb-14.bg-white h1 .cf-h1-accent{
    display:inline;
    color:var(--cf-brand-indigo);
    background:linear-gradient(102deg,var(--cf-brand-indigo) 0 62%,var(--cf-brand-teal) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  #root section.relative.pt-10.pb-14.bg-white h1::after{
    width:50px!important;
    height:4px!important;
    margin-top:16px!important;
    background:linear-gradient(90deg,var(--cf-brand-indigo) 0 68%,var(--cf-brand-teal) 68% 100%)!important;
  }
  #root section.relative.pt-10.pb-14.bg-white p.text-base{
    max-width:525px!important;
    color:#4b5d73!important;
    font-size:1.08rem!important;
    line-height:1.62!important;
    letter-spacing:-.012em!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .inline-flex.items-center.rounded-full{
    border-radius:10px!important;
    background:#f3f2ff!important;
    border-color:#dedaff!important;
    color:#4134bf!important;
    box-shadow:none!important;
  }

  /* Controls: fewer over-rounded pills and more disciplined borders. */
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch{
    border-radius:13px!important;
    border-color:#d4dde9!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 5px 14px rgba(15,23,42,.045)!important;
    padding:4px!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch a,
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch button{
    border-radius:9px!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch .is-home{
    background:var(--cf-brand-indigo)!important;
    box-shadow:0 5px 12px rgba(73,56,216,.18)!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch .is-business{
    color:#16725d!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-hero-primary{
    border-radius:14px!important;
    background:linear-gradient(120deg,var(--cf-brand-indigo) 0 76%,#5445de 76% 100%)!important;
    box-shadow:0 16px 30px rgba(73,56,216,.24),inset 0 -3px 0 rgba(11,159,122,.36)!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-benefit-item{
    border-radius:9px!important;
    background:rgba(255,255,255,.76)!important;
    border-color:#d9e2ec!important;
    box-shadow:none!important;
  }

  /* Down-page surfaces: retain separation, remove some "template card" softness. */
  #root section.py-12.sm\:py-16.bg-white{
    border-radius:22px!important;
    box-shadow:0 13px 34px rgba(15,23,42,.06)!important;
  }
  #root section.py-12.sm\:py-16.bg-white .grid.grid-cols-1.md\:grid-cols-3 > div{
    border-radius:15px!important;
    box-shadow:none!important;
  }
  #root .cf-result-preview,
  #root .cf-funnel-summary{
    border-radius:20px!important;
  }
  #root .cf-preview-card,
  #root .cf-funnel-kpi{
    border-radius:13px!important;
  }
  .cf-answer-layer__section{
    border-radius:19px!important;
    box-shadow:0 9px 26px rgba(15,23,42,.045)!important;
  }
  .cf-answer-layer__section h3::before{
    width:38px!important;
    height:4px!important;
    background:linear-gradient(90deg,var(--cf-brand-indigo) 0 68%,var(--cf-brand-teal) 68% 100%)!important;
  }
}


/* --------------------------------------------------------------------------
   ComparaFactura.es — mobile brand refinement 2026-08-28
   Applies the same visual language to tablet/mobile without touching behavior.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  :root{
    --cf-brand-ink:#0b1220;
    --cf-brand-indigo:#4938d8;
    --cf-brand-indigo-deep:#3828bd;
    --cf-brand-teal:#0b9f7a;
  }

  body{
    background:
      radial-gradient(520px 240px at 8% -4%,rgba(73,56,216,.08),transparent 68%),
      radial-gradient(420px 220px at 100% 0%,rgba(11,159,122,.06),transparent 70%),
      #f7f9fd!important;
  }

  #root > header.sticky,
  #root header.sticky.top-0{
    top:10px!important;
    width:calc(100% - 16px)!important;
    margin:0 auto!important;
    border:1px solid rgba(208,217,230,.96)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.94)!important;
    backdrop-filter:blur(16px) saturate(1.06)!important;
    box-shadow:0 10px 26px rgba(15,23,42,.07)!important;
  }
  #root header.sticky.top-0 > div{
    padding-left:14px!important;
    padding-right:12px!important;
  }
  #root #header-logo-btn{gap:.65rem!important}
  #root #header-logo-btn > div:first-child{
    background:linear-gradient(145deg,#4f46e5 0%,#4338ca 100%)!important;
    border-radius:12px!important;
    box-shadow:0 7px 16px rgba(79,70,229,.22)!important;
  }
  #root #header-logo-btn span.text-indigo-600{color:var(--cf-brand-indigo)!important}

  #root section.relative.pt-10.pb-14.bg-white{
    margin:16px auto 0!important;
    width:calc(100% - 16px)!important;
    min-height:unset!important;
    padding:0!important;
    border:1px solid rgba(205,215,228,.96)!important;
    border-radius:28px!important;
    background:
      radial-gradient(280px 140px at 95% 0%,rgba(73,56,216,.10),transparent 70%),
      linear-gradient(180deg,#ffffff 0%,#fafcff 56%,#f4f8fb 100%)!important;
    box-shadow:0 20px 44px rgba(15,23,42,.07),0 3px 12px rgba(15,23,42,.035)!important;
    overflow:hidden!important;
    position:relative!important;
  }
  #root section.relative.pt-10.pb-14.bg-white::before{
    content:""!important;
    position:absolute!important;
    left:22px!important;
    right:22px!important;
    bottom:22px!important;
    height:214px!important;
    border-radius:24px!important;
    border:1px solid rgba(73,56,216,.11)!important;
    background:linear-gradient(145deg,rgba(73,56,216,.12),rgba(11,159,122,.05)),#f5f7fc!important;
    box-shadow:0 16px 30px rgba(56,40,189,.06)!important;
    transform:rotate(-1.4deg)!important;
    z-index:0!important;
    pointer-events:none!important;
  }
  #root section.relative.pt-10.pb-14.bg-white::after{
    content:""!important;
    position:absolute!important;
    left:16px!important;
    right:16px!important;
    bottom:16px!important;
    height:228px!important;
    border:7px solid rgba(255,255,255,.96)!important;
    border-radius:24px!important;
    background-image:url('/hero-factura-solo-crop.webp?v=20260828-hd1')!important;
    background-image:-webkit-image-set(url('/hero-factura-solo-crop.webp?v=20260828-hd1') 1x,url('/hero-factura-solo-crop@2x.webp?v=20260828-hd1') 2x)!important;
    background-image:image-set(url('/hero-factura-solo-crop.webp?v=20260828-hd1') 1x,url('/hero-factura-solo-crop@2x.webp?v=20260828-hd1') 2x)!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center 24%!important;
    box-shadow:0 24px 46px rgba(22,33,62,.14),0 8px 18px rgba(73,56,216,.08)!important;
    transform:rotate(-2.1deg)!important;
    z-index:1!important;
    pointer-events:none!important;
  }
  #root section.relative.pt-10.pb-14.bg-white > .max-w-4xl{
    position:relative!important;
    z-index:2!important;
    max-width:none!important;
    width:100%!important;
    margin:0!important;
    padding:28px 18px 272px!important;
    text-align:left!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .inline-flex.items-center.rounded-full{
    margin-bottom:18px!important;
    padding:7px 11px!important;
    border-radius:10px!important;
    background:#f3f2ff!important;
    border-color:#dedaff!important;
    color:#4134bf!important;
    box-shadow:none!important;
  }
  #root section.relative.pt-10.pb-14.bg-white h1{
    margin-bottom:14px!important;
    font-size:clamp(2.35rem,11vw,3.35rem)!important;
    line-height:.95!important;
    letter-spacing:-.06em!important;
    text-align:left!important;
    color:var(--cf-brand-ink)!important;
  }
  #root section.relative.pt-10.pb-14.bg-white h1 .cf-h1-accent{
    color:var(--cf-brand-indigo)!important;
    background:linear-gradient(102deg,var(--cf-brand-indigo) 0 62%,var(--cf-brand-teal) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  #root section.relative.pt-10.pb-14.bg-white h1::after{
    content:"";
    display:block;
    width:48px;
    height:4px;
    margin-top:14px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--cf-brand-indigo) 0 68%,var(--cf-brand-teal) 68% 100%);
  }
  #root section.relative.pt-10.pb-14.bg-white p.text-base{
    margin:0 0 16px!important;
    max-width:34rem!important;
    color:#4b5d73!important;
    font-size:1rem!important;
    line-height:1.56!important;
    text-align:left!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch-wrap{
    margin:0 0 14px!important;
    justify-content:flex-start!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch{
    width:100%!important;
    padding:4px!important;
    border-radius:13px!important;
    border-color:#d4dde9!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 5px 14px rgba(15,23,42,.045)!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch a,
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch button{
    border-radius:9px!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch .is-home{
    background:var(--cf-brand-indigo)!important;
    box-shadow:0 5px 12px rgba(73,56,216,.18)!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-mode-switch .is-business{color:#16725d!important}
  #root section.relative.pt-10.pb-14.bg-white .cf-hero-actions{
    align-items:stretch!important;
    margin:0 0 14px!important;
    max-width:none!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-hero-primary{
    width:100%!important;
    max-width:none!important;
    border-radius:14px!important;
    background:linear-gradient(120deg,var(--cf-brand-indigo) 0 76%,#5445de 76% 100%)!important;
    box-shadow:0 16px 30px rgba(73,56,216,.24),inset 0 -3px 0 rgba(11,159,122,.36)!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-benefit-strip{
    justify-content:flex-start!important;
    gap:8px!important;
    margin:0!important;
    flex-wrap:wrap!important;
  }
  #root section.relative.pt-10.pb-14.bg-white .cf-benefit-item{
    border-radius:9px!important;
    background:rgba(255,255,255,.82)!important;
    border-color:#d9e2ec!important;
    box-shadow:none!important;
  }
}

/* 2026-08-29: anclaje estable para todos los CTA de análisis. */
#root #step1-upload-container{scroll-margin-top:108px}
@media(max-width:767px){#root #step1-upload-container{scroll-margin-top:82px}}


/* CNMC trust strip on the home — premium variant */
.cf-cnmc-trust-strip{
  width:min(calc(100% - 32px),1240px);
  margin:18px auto 18px;
}
.cf-cnmc-trust-card{
  border:1px solid #dfe7f4;
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 32px rgba(15,23,42,.05);
  overflow:hidden;
}
.cf-cnmc-trust-card__top{
  display:grid;
  grid-template-columns:110px minmax(260px,1fr) 1px minmax(380px,520px);
  align-items:center;
  gap:26px;
  padding:26px 30px 20px;
}
.cf-cnmc-trust-card__badge{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#4f46e5;
}
.cf-cnmc-trust-card__badge svg{
  width:72px;
  height:72px;
}
.cf-cnmc-trust-card__message p{
  margin:0;
  font-size:1.08rem;
  line-height:1.42;
  letter-spacing:-.015em;
  font-weight:760;
  color:#1d3557;
}
.cf-cnmc-trust-card__divider{
  width:1px;
  align-self:stretch;
  background:linear-gradient(180deg,rgba(79,70,229,.08),rgba(148,163,184,.55),rgba(79,70,229,.08));
}
.cf-cnmc-trust-card__source{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:6px;
  min-width:0;
}
.cf-cnmc-trust-card__source-label{
  display:block;
  color:#667085;
  font-size:.68rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cf-cnmc-trust-card__logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  text-decoration:none;
}
.cf-cnmc-trust-card__logo img{
  display:block;
  width:min(100%,620px);
  height:auto;
  max-height:74px;
  object-fit:contain;
}
.cf-cnmc-trust-card__bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  border-top:1px solid #e7edf6;
  padding:16px 24px 18px;
}
.cf-cnmc-mini-fact{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#4a5b75;
  font-size:.98rem;
  font-weight:560;
  line-height:1.35;
}
.cf-cnmc-mini-fact svg{
  width:20px;
  height:20px;
  color:#6b6ee8;
  flex:0 0 auto;
}
.cf-cnmc-mini-sep{
  color:#98a2b3;
  font-size:1rem;
  line-height:1;
}

@media (min-width:1024px){
  .cf-cnmc-trust-strip{margin:22px auto 22px;}
}

@media (max-width:1023.98px){
  .cf-cnmc-trust-strip{
    width:min(calc(100% - 24px),780px);
    margin:14px auto 16px;
  }
  .cf-cnmc-trust-card__top{
    grid-template-columns:1fr;
    gap:14px;
    padding:22px 18px 16px;
    text-align:center;
  }
  .cf-cnmc-trust-card__badge svg{width:60px;height:60px;}
  .cf-cnmc-trust-card__message p{font-size:1rem;}
  .cf-cnmc-trust-card__divider{display:none;}
  .cf-cnmc-trust-card__logo{justify-content:center;}
  .cf-cnmc-trust-card__logo img{max-height:62px;width:min(100%,560px);}
  .cf-cnmc-trust-card__bottom{gap:10px 14px;padding:14px 16px 16px;}
  .cf-cnmc-mini-fact{font-size:.94rem;justify-content:center;}
}

@media (max-width:639.98px){
  .cf-cnmc-trust-strip{
    width:min(calc(100% - 20px),560px);
    margin:12px auto 14px;
  }
  .cf-cnmc-trust-card{border-radius:20px;}
  .cf-cnmc-trust-card__top{padding:18px 14px 14px;gap:12px;}
  .cf-cnmc-trust-card__badge svg{width:54px;height:54px;}
  .cf-cnmc-trust-card__message p{font-size:.97rem;line-height:1.38;}
  .cf-cnmc-trust-card__logo img{max-height:44px;width:100%;}
  .cf-cnmc-trust-card__bottom{
    flex-direction:column;
    align-items:center;
    gap:9px;
    padding:13px 14px 15px;
  }
  .cf-cnmc-mini-fact{
    width:min(100%,260px);
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    align-items:center;
    column-gap:9px;
    justify-content:stretch;
    font-size:.92rem;
    line-height:1.32;
    text-align:left;
  }
  .cf-cnmc-mini-fact svg{
    width:20px;
    height:20px;
    justify-self:center;
  }
  .cf-cnmc-mini-fact > span{min-width:0;}
  .cf-cnmc-mini-sep{display:none;}
}


/* 2026-08-31: compactar primera pantalla escritorio + ajustar bloque CNMC */
@media (min-width:1024px){
  #root .cf-hero-shell{
    padding-top:72px!important;
    padding-bottom:32px!important;
  }
  #root .cf-hero-shell .cf-hero-inner{
    max-width:940px!important;
  }
  #root .cf-hero-shell .inline-flex.items-center.rounded-full{
    margin-bottom:14px!important;
  }
  #root .cf-hero-shell h1{
    margin-bottom:12px!important;
    font-size:clamp(3.4rem,5vw,5.5rem)!important;
    line-height:.95!important;
  }
  #root .cf-hero-shell p.text-base{
    margin-bottom:16px!important;
    max-width:760px!important;
    font-size:1.02rem!important;
    line-height:1.5!important;
  }
  #root .cf-hero-shell .cf-mode-switch-wrap{
    margin-bottom:12px!important;
  }
  #root .cf-hero-shell .cf-hero-actions{
    margin-bottom:12px!important;
  }
  #root .cf-hero-shell .cf-hero-primary{
    min-height:0!important;
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
  #root .cf-hero-shell .cf-benefit-strip{
    gap:10px!important;
  }
  .cf-cnmc-trust-strip{
    margin:10px auto 12px!important;
  }
  .cf-cnmc-trust-card{
    border-radius:22px!important;
  }
  .cf-cnmc-trust-card__top{
    grid-template-columns:88px minmax(250px,1fr) 1px minmax(330px,480px)!important;
    gap:20px!important;
    padding:18px 24px 14px!important;
  }
  .cf-cnmc-trust-card__badge svg{
    width:58px!important;
    height:58px!important;
  }
  .cf-cnmc-trust-card__message p{
    font-size:1.02rem!important;
    line-height:1.35!important;
  }
  .cf-cnmc-trust-card__logo img{
    max-height:60px!important;
    width:min(100%,520px)!important;
  }
  .cf-cnmc-trust-card__bottom{
    padding:12px 18px 14px!important;
    gap:14px!important;
  }
  .cf-cnmc-mini-fact{
    font-size:.94rem!important;
  }
}

/* 2026-08-31: los tres pasos en azul corporativo */
#root .cf-process-section .grid.grid-cols-1.md\:grid-cols-3 > div > div:first-child > div:first-child{
  background:#4f46e5!important;
  border-color:#4f46e5!important;
  color:#ffffff!important;
  box-shadow:0 8px 18px rgba(79,70,229,.18)!important;
}
#root .cf-process-section .grid.grid-cols-1.md\:grid-cols-3 > div > div:first-child > div:first-child span{
  color:#ffffff!important;
}

/* 2026-08-31: restaurar contraste del bloque de transparencia y seguridad */
#root .cf-trust-section{
  background:linear-gradient(180deg,#0f172a 0%,#111827 100%)!important;
  color:#ffffff!important;
  border-top:1px solid rgba(255,255,255,.02)!important;
  border-bottom:1px solid rgba(255,255,255,.02)!important;
}
#root .cf-trust-section h2,
#root .cf-trust-section h3{
  color:#ffffff!important;
}
#root .cf-trust-section .text-slate-400{
  color:#94a3b8!important;
}
#root .cf-trust-section .text-slate-300,
#root .cf-trust-section p{
  color:#cbd5e1!important;
}
#root .cf-trust-section .grid > div{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}
#root .cf-trust-section .grid > div > div:first-child{
  background:rgba(16,185,129,.14)!important;
  color:#34d399!important;
}


/* 2026-08-31 v19 — bloqueo definitivo de contraste del bloque de confianza */
#root section.cf-trust-section,
#root .cf-trust-section,
section.cf-trust-section{
  position:relative!important;
  isolation:isolate!important;
  background:#07101f!important;
  background-image:linear-gradient(145deg,#07101f 0%,#0f172a 58%,#172554 100%)!important;
  color:#ffffff!important;
  opacity:1!important;
  filter:none!important;
}
#root section.cf-trust-section::before,
#root .cf-trust-section::before,
section.cf-trust-section::before{
  content:""!important;
  position:absolute!important;
  width:34rem!important;
  height:34rem!important;
  right:-12rem!important;
  top:-17rem!important;
  border-radius:50%!important;
  background:rgba(79,70,229,.13)!important;
  opacity:1!important;
  filter:blur(2px)!important;
  pointer-events:none!important;
  z-index:0!important;
}
#root .cf-trust-section > div{
  position:relative!important;
  z-index:1!important;
  opacity:1!important;
}
#root .cf-trust-section h2,
#root .cf-trust-section h3,
#root .cf-trust-section .text-white{
  color:#ffffff!important;
  opacity:1!important;
}
#root .cf-trust-section p,
#root .cf-trust-section .text-slate-300{
  color:#cbd5e1!important;
  opacity:1!important;
}
#root .cf-trust-section .text-slate-400{
  color:#94a3b8!important;
  opacity:1!important;
}
#root .cf-trust-section .grid > div{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.10)!important;
  opacity:1!important;
  filter:none!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}
#root .cf-trust-section .grid > div > div:first-child{
  background:rgba(16,185,129,.12)!important;
  color:#34d399!important;
  opacity:1!important;
}

@media (max-width:1023.98px){
  .cf-cnmc-trust-card__source{align-items:center;}
  .cf-cnmc-trust-card__source-label{text-align:center;}
}


/* 2026-08-31 v23 — banda sutil de comercializadoras entre CNMC y analizador */
.cf-market-band{
  position:relative;
  width:100%;
  margin:22px 0 28px;
  border-top:1px solid rgba(203,213,225,.72);
  border-bottom:1px solid rgba(203,213,225,.72);
  background:linear-gradient(180deg,rgba(239,244,251,.82) 0%,rgba(244,247,252,.92) 48%,rgba(239,244,251,.82) 100%);
  overflow:hidden;
}
.cf-market-band::before,
.cf-market-band::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(198,215,242,.78) 18%,rgba(255,255,255,0) 50%,rgba(198,215,242,.78) 82%,rgba(255,255,255,0) 100%);
  opacity:.55;
  pointer-events:none;
}
.cf-market-band::before{top:58%; bottom:auto; transform:translateY(-50%);} 
.cf-market-band::after{top:70%; bottom:auto; opacity:.34;}
.cf-market-band__inner{
  width:min(calc(100% - 32px),1320px);
  margin:0 auto;
  padding:34px 0 14px;
}
.cf-market-band__viewport{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:82px;
}
.cf-market-band__viewport::before,
.cf-market-band__viewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:92px;
  z-index:2;
  pointer-events:none;
}
.cf-market-band__viewport::before{
  left:-1px;
  background:linear-gradient(90deg,rgba(241,245,252,.98) 0%,rgba(241,245,252,.9) 24%,rgba(241,245,252,0) 100%);
}
.cf-market-band__viewport::after{
  right:-1px;
  background:linear-gradient(270deg,rgba(241,245,252,.98) 0%,rgba(241,245,252,.9) 24%,rgba(241,245,252,0) 100%);
}
.cf-market-band__track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:cf-market-band-scroll 28s linear infinite;
  will-change:transform;
}
.cf-market-band__set{
  display:flex;
  align-items:center;
  gap:64px;
  flex:0 0 auto;
  padding-right:64px;
}
.cf-market-band__logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.cf-market-band__logo img{
  display:block;
  width:auto;
  height:48px;
  max-width:180px;
  object-fit:contain;
  opacity:.62;
  filter:saturate(.78) contrast(.96) brightness(1.01);
}
.cf-market-band__note{
  max-width:1120px;
  margin:14px auto 0;
  text-align:center;
  font-size:.76rem;
  line-height:1.45;
  color:#7083a3;
}
@keyframes cf-market-band-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .cf-market-band__track{animation:none; transform:translateX(0)!important;}
}
@media (min-width:1024px){
  .cf-market-band{margin:26px 0 32px;}
  .cf-market-band__inner{padding:36px 0 15px;}
}
@media (max-width:1023.98px){
  .cf-market-band{margin:18px 0 24px;}
  .cf-market-band__inner{width:min(calc(100% - 24px),900px); padding:24px 0 12px;}
  .cf-market-band__viewport{min-height:72px;}
  .cf-market-band__set{gap:48px; padding-right:48px;}
  .cf-market-band__logo img{height:40px; max-width:150px;}
  .cf-market-band__note{font-size:.72rem; max-width:820px;}
}
@media (max-width:767.98px){
  .cf-market-band{margin:16px 0 20px;}
  .cf-market-band__inner{padding:20px 0 12px;}
  .cf-market-band__viewport{min-height:58px;}
  .cf-market-band__viewport::before,
  .cf-market-band__viewport::after{width:48px;}
  .cf-market-band__set{gap:28px; padding-right:28px;}
  .cf-market-band__logo img{height:28px; max-width:118px; opacity:.64;}
  .cf-market-band__note{font-size:.64rem; line-height:1.4; padding:0 6px;}
}

/* 2026-08-31 v25 — ajuste final de movimiento de los CTA de la home */
/* Header: completamente estable, sin respiración ni barrido de brillo. */
#root #header-analyze-cta:not(:disabled),
#root #header-analyze-cta:not(:disabled):hover,
#root #header-analyze-cta:not(:disabled):active{
  animation:none!important;
  transform:none!important;
  filter:none!important;
  will-change:auto!important;
  box-shadow:0 10px 24px rgba(73,56,216,.24),inset 0 -3px 0 rgba(11,159,122,.35)!important;
}
#root #header-analyze-cta:not(:disabled)::before,
#root #header-analyze-cta:not(:disabled):hover::before,
#root #header-analyze-cta:not(:disabled):active::before{
  content:none!important;
  animation:none!important;
  opacity:0!important;
}

/* Hero: sin respiración; conserva únicamente el barrido luminoso actual. */
#root #hero-upload-file-btn:not(:disabled){
  animation:none!important;
  will-change:auto!important;
}
#root #hero-upload-file-btn:not(:disabled)::before{
  animation:cfdrHeroCtaShine 2.2s ease-in-out infinite!important;
}
#root #hero-upload-file-btn > svg{
  display:none!important;
}
#root .cf-hero-shell .cf-hero-actions{
  align-items:center!important;
  max-width:none!important;
}
#root .cf-hero-shell #hero-upload-file-btn{
  width:fit-content!important;
  min-width:0!important;
  max-width:calc(100% - 24px)!important;
  padding-left:2.25rem!important;
  padding-right:2.25rem!important;
  margin-left:auto!important;
  margin-right:auto!important;
  white-space:nowrap!important;
}
@media(max-width:420px){
  #root .cf-hero-shell #hero-upload-file-btn{
    padding-left:1.35rem!important;
    padding-right:1.35rem!important;
    font-size:.92rem!important;
  }
}

/* --------------------------------------------------------------------------
   ComparaFactura.es — redesign visual del bloque de resultados de comparación
   Mantiene la estructura y funcionalidades actuales; solo cambia la exposición.
   -------------------------------------------------------------------------- */
#step3-comparison-container{
  width:min(1160px,calc(100% - 32px))!important;
  max-width:1160px!important;
  margin:0 auto!important;
  padding:24px 0 126px!important;
  gap:22px!important;
}
#step3-comparison-container > *{scroll-margin-top:110px}

/* 1) Resumen superior */
#step3-comparison-container .cf-funnel-summary{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid #dbe5f2!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcff 58%,#f6fbf8 100%)!important;
  box-shadow:0 18px 48px rgba(15,23,42,.08)!important;
  padding:28px!important;
}
#step3-comparison-container .cf-funnel-summary::after{
  content:""!important;
  position:absolute!important;
  inset:auto -58px -78px auto!important;
  width:220px!important;
  height:220px!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(79,70,229,.10),rgba(79,70,229,0) 68%)!important;
  pointer-events:none!important;
}
#step3-comparison-container .cf-funnel-summary-head{
  margin-bottom:18px!important;
  max-width:760px!important;
}
#step3-comparison-container .cf-funnel-eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:6px 11px!important;
  border-radius:999px!important;
  background:#eef2ff!important;
  color:#4338ca!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  box-shadow:inset 0 0 0 1px #d9ddfe!important;
}
#step3-comparison-container .cf-funnel-summary h2{
  margin:12px 0 0!important;
  color:#0f172a!important;
  font-size:clamp(2rem,3vw,3rem)!important;
  line-height:1.04!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
#step3-comparison-container .cf-funnel-summary-head p{
  margin-top:10px!important;
  color:#566579!important;
  font-size:15px!important;
  line-height:1.6!important;
  max-width:68ch!important;
}
#step3-comparison-container .cf-funnel-kpis{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}
#step3-comparison-container .cf-funnel-kpi{
  min-height:152px!important;
  padding:20px 20px 18px!important;
  border-radius:22px!important;
  border:1px solid #dde5f1!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(15,23,42,.045)!important;
}
#step3-comparison-container .cf-funnel-kpi > span{
  font-size:12px!important;
  color:#5c6a7c!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  margin-bottom:10px!important;
}
#step3-comparison-container .cf-funnel-kpi > strong{
  font-size:clamp(2rem,2.4vw,2.6rem)!important;
  line-height:1.05!important;
  letter-spacing:-.03em!important;
  color:#07164a!important;
  margin-bottom:10px!important;
}
#step3-comparison-container .cf-funnel-kpi > small{
  font-size:13px!important;
  color:#66758a!important;
  line-height:1.45!important;
  margin-top:auto!important;
}
#step3-comparison-container .cf-funnel-kpi-best{
  border-color:#ced3ff!important;
  background:linear-gradient(180deg,#ffffff 0%,#f7f7ff 100%)!important;
}
#step3-comparison-container .cf-funnel-kpi-best > strong{color:#4338ca!important}
#step3-comparison-container .cf-funnel-kpi-save{
  border-color:#bdeccd!important;
  background:linear-gradient(180deg,#ffffff 0%,#f3fcf6 100%)!important;
}
#step3-comparison-container .cf-funnel-kpi-save > strong{color:#0c8d63!important}
#step3-comparison-container .cf-funnel-flowline{
  margin-top:18px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  border:1px solid #dbe4f0!important;
  background:#f8fbff!important;
  color:#4c5d72!important;
  font-size:13px!important;
  line-height:1.55!important;
}

/* 2) Cabecera del ranking */
#step3-comparison-container > .cf-funnel-summary + div{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:4px 0 2px!important;
  border:0!important;
}
#step3-comparison-container > .cf-funnel-summary + div > div:first-child{
  flex:1 1 auto!important;
  min-width:0!important;
}
#step3-comparison-container > .cf-funnel-summary + div h2{
  margin:0!important;
  color:#0f172a!important;
  font-size:clamp(1.85rem,2.7vw,2.45rem)!important;
  line-height:1.08!important;
  letter-spacing:-.03em!important;
}
#step3-comparison-container > .cf-funnel-summary + div p{
  margin-top:8px!important;
  color:#59697f!important;
  font-size:14px!important;
  line-height:1.62!important;
  max-width:72ch!important;
}
#step3-comparison-container > .cf-funnel-summary + div > div:last-child{
  min-width:250px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  border:1px solid #dce4ef!important;
  background:#f8fafc!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04)!important;
}
#step3-comparison-container #back-to-summary-btn{
  margin:0 0 8px!important;
  color:#6a778a!important;
  text-decoration:none!important;
  font-weight:700!important;
}
#step3-comparison-container #back-to-summary-btn:hover{color:#1f2937!important}
#step3-comparison-container .cf-comparison-top-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:16px!important;
}
#step3-comparison-container .cf-inline-pdf-btn,
#step3-comparison-container .cf-inline-wa-btn{
  min-height:46px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:900!important;
}
#step3-comparison-container .cf-inline-pdf-btn{
  background:#fff!important;
  border:1px solid #d2d9e5!important;
  color:#162132!important;
  box-shadow:0 8px 18px rgba(15,23,42,.04)!important;
}
#step3-comparison-container .cf-inline-wa-btn{
  background:#ecfdf5!important;
  border:1px solid #97e8ba!important;
  color:#166534!important;
  box-shadow:0 8px 18px rgba(5,150,105,.08)!important;
}

/* 3) Tarifa recomendada */
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid #101b56!important;
  border-radius:28px!important;
  background:linear-gradient(135deg,#071a5b 0%,#0b1e63 45%,#07164a 100%)!important;
  box-shadow:0 22px 52px rgba(7,22,74,.20)!important;
  padding:28px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .absolute.top-0.right-0{
  width:260px!important;
  height:260px!important;
  background:radial-gradient(circle,rgba(99,102,241,.18),rgba(99,102,241,0) 65%)!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 > .relative.z-10.space-y-6{
  display:grid!important;
  gap:18px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:nth-child(2){
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(310px,.95fr)!important;
  gap:18px!important;
  align-items:stretch!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:nth-child(2) > div:first-child{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 h3{
  font-size:clamp(2rem,2.2vw,2.45rem)!important;
  line-height:1.04!important;
  letter-spacing:-.03em!important;
  margin-top:4px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md{
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important;
  padding:20px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .text-2xl,
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .sm\:text-3xl{
  font-size:2.2rem!important;
  line-height:1.04!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .text-xl,
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .sm\:text-2xl{
  font-size:1.45rem!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding-top:16px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child > div:last-child{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 #best-offer-conditions-btn{
  min-height:46px!important;
  padding:0 16px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.14)!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 #best-offer-select-btn{
  min-height:48px!important;
  padding:0 20px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#574cf7,#4f46e5)!important;
  box-shadow:0 14px 32px rgba(79,70,229,.30)!important;
}

/* 4) Filtros */
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div{
  border:1px solid #dde5ef!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 10px 26px rgba(15,23,42,.045)!important;
  padding:18px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div button{
  min-height:40px!important;
  border-radius:999px!important;
  padding:0 15px!important;
  font-size:12px!important;
  font-weight:800!important;
}

/* 5) Ranking */
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div + .space-y-4{
  padding-top:4px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div + .space-y-4 > h3{
  color:#0f172a!important;
  font-size:1.55rem!important;
  line-height:1.2!important;
  letter-spacing:-.02em!important;
  margin:0!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div + .space-y-4 > p{
  margin-top:-6px!important;
  color:#617186!important;
}
#step3-comparison-container .space-y-3\.5{
  counter-reset:cf-offer-row!important;
}
#step3-comparison-container .space-y-3\.5 > div{
  position:relative!important;
  counter-increment:cf-offer-row!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.3fr) minmax(210px,.8fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  padding:20px 20px 20px 78px!important;
  border:1px solid #dde5ef!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 10px 24px rgba(15,23,42,.042)!important;
}
#step3-comparison-container .space-y-3\.5 > div::before{
  content:counter(cf-offer-row)!important;
  position:absolute!important;
  left:22px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:36px!important;
  height:36px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#eef2ff!important;
  color:#4338ca!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:inset 0 0 0 1px #d9ddfe!important;
}
#step3-comparison-container .space-y-3\.5 > div:first-child{
  border-color:#bce9cd!important;
  background:linear-gradient(180deg,#ffffff 0%,#f6fcf8 100%)!important;
}
#step3-comparison-container .space-y-3\.5 > div:first-child::before{
  background:#10b981!important;
  color:#fff!important;
  box-shadow:none!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:first-child{
  min-width:0!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:first-child .font-extrabold.text-slate-900.text-base{
  font-size:1rem!important;
  line-height:1.25!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:first-child p.text-xs.text-slate-500.mt-1{
  margin-top:6px!important;
  font-size:12px!important;
  line-height:1.5!important;
  color:#68778b!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:first-child .flex.items-center.gap-4.text-xs.text-slate-600.mt-2{
  flex-wrap:wrap!important;
  gap:10px 14px!important;
  margin-top:10px!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  border:0!important;
  padding:0!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
  text-align:left!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xl.font-extrabold.text-slate-900{
  font-size:1.9rem!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
  color:#07164a!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600.block.mt-0\.5,
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600{
  font-size:13px!important;
  color:#0d9a6c!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  min-width:220px!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:first-child{
  min-height:44px!important;
  padding:0 16px!important;
  border-radius:14px!important;
  background:#f4f7fb!important;
  color:#334155!important;
  border:1px solid #dbe3ee!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:last-child{
  min-height:46px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#584cf5,#4f46e5)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(79,70,229,.20)!important;
}
#step3-comparison-container #show-all-offers-btn{
  min-height:48px!important;
  padding:0 20px!important;
  border-radius:999px!important;
  background:#f4f7fb!important;
  border:1px solid #dbe3ef!important;
  box-shadow:0 8px 18px rgba(15,23,42,.04)!important;
}

/* 6) Promociones temporales */
#step3-comparison-container #cf-temporary-promotions{
  border:1px solid #e6ddff!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#fcfbff 0%,#f6f3ff 100%)!important;
  box-shadow:0 12px 28px rgba(79,70,229,.05)!important;
  padding:22px!important;
}
#step3-comparison-container #cf-temporary-promotions > div:first-child .text-\[11px\].font-bold.uppercase.tracking-wider.text-amber-700.bg-amber-100{
  background:#ede9fe!important;
  color:#5b21b6!important;
}
#step3-comparison-container #cf-temporary-promotions h3{
  margin-top:14px!important;
  color:#0f172a!important;
  font-size:1.45rem!important;
  letter-spacing:-.02em!important;
}
#step3-comparison-container #cf-temporary-promotions .space-y-3 > div{
  border-radius:20px!important;
  border-color:#e7dcff!important;
  background:#fff!important;
  box-shadow:0 8px 20px rgba(15,23,42,.04)!important;
}
#step3-comparison-container #cf-temporary-promotions a[href][target="_blank"]{
  min-height:44px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#584cf5,#4f46e5)!important;
  color:#fff!important;
}
#step3-comparison-container #cf-temporary-promotions > p{
  color:#756957!important;
  font-size:11px!important;
}

/* 7) PVPC + aviso metodológico */
#step3-comparison-container #cf-temporary-promotions + div{
  border:1px solid #dce6f5!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#f8fbff 0%,#f2f7ff 100%)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.04)!important;
  padding:22px!important;
}
#step3-comparison-container #cf-temporary-promotions + div > div{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
}
#step3-comparison-container #cf-temporary-promotions + div h3{
  font-size:1.25rem!important;
  line-height:1.3!important;
  color:#0f172a!important;
}
#step3-comparison-container #cf-temporary-promotions + div .text-xl.font-black.text-slate-900{
  font-size:2rem!important;
  color:#0b1f66!important;
  letter-spacing:-.03em!important;
}
#step3-comparison-container #cf-temporary-promotions + div + div.p-4.rounded-2xl{
  border:1px solid #f1d59a!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#fffdf6 0%,#fff9eb 100%)!important;
  box-shadow:0 10px 22px rgba(245,158,11,.06)!important;
  padding:18px!important;
  color:#7c5d17!important;
}
#step3-comparison-container #cf-temporary-promotions + div + div.p-4.rounded-2xl p:first-child{
  font-size:14px!important;
  color:#78571a!important;
}

/* 8) Modal de condiciones */
#step3-comparison-container .fixed.inset-0.z-50 .bg-white.rounded-3xl{
  border-radius:28px!important;
  box-shadow:0 26px 80px rgba(15,23,42,.28)!important;
}

/* Responsive: móvil y tablet */
@media (max-width:1023px){
  #step3-comparison-container{
    width:calc(100% - 16px)!important;
    padding:18px 0 118px!important;
    gap:18px!important;
  }
  #step3-comparison-container .cf-funnel-summary,
  #step3-comparison-container > .cf-funnel-summary + div,
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900,
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div,
  #step3-comparison-container #cf-temporary-promotions,
  #step3-comparison-container #cf-temporary-promotions + div,
  #step3-comparison-container #cf-temporary-promotions + div + div.p-4.rounded-2xl{
    border-radius:22px!important;
  }
  #step3-comparison-container .cf-funnel-summary{
    padding:20px 16px!important;
  }
  #step3-comparison-container .cf-funnel-summary h2{
    font-size:2.1rem!important;
  }
  #step3-comparison-container .cf-funnel-summary-head p{
    font-size:14px!important;
  }
  #step3-comparison-container .cf-funnel-kpis{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  #step3-comparison-container .cf-funnel-kpi{
    min-height:auto!important;
    padding:16px!important;
  }
  #step3-comparison-container .cf-funnel-kpi > strong{
    font-size:1.95rem!important;
  }

  #step3-comparison-container > .cf-funnel-summary + div{
    flex-direction:column!important;
    gap:14px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div > div:last-child{
    width:100%!important;
    min-width:0!important;
  }
  #step3-comparison-container .cf-comparison-top-actions{
    flex-direction:column!important;
  }
  #step3-comparison-container .cf-inline-pdf-btn,
  #step3-comparison-container .cf-inline-wa-btn{
    width:100%!important;
  }

  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900{
    padding:18px 16px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:nth-child(2){
    grid-template-columns:1fr!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md{
    padding:16px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .flex.flex-wrap.items-center.gap-4{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child > div:last-child{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 #best-offer-conditions-btn,
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 #best-offer-select-btn{
    width:100%!important;
  }

  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div{
    padding:16px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div .flex.flex-wrap.items-center.gap-2\.5.text-xs,
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div .flex.flex-wrap.items-center.gap-2\.5.text-xs.pt-1{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div .flex.flex-wrap.items-center.gap-2\.5.text-xs button,
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div .flex.flex-wrap.items-center.gap-2\.5.text-xs.pt-1 button{
    width:100%!important;
  }

  #step3-comparison-container .space-y-3\.5 > div{
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:18px 16px 16px 16px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div::before{
    position:static!important;
    transform:none!important;
    margin-bottom:2px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:first-child{
    margin-top:-2px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:first-child .flex.items-start.gap-4{
    align-items:flex-start!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
    padding:14px 14px 0!important;
    border-top:1px solid #edf2f7!important;
    margin-top:2px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child{
    min-width:0!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:first-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:last-child,
  #step3-comparison-container #show-all-offers-btn,
  #step3-comparison-container #cf-temporary-promotions a[href][target="_blank"]{
    width:100%!important;
  }

  #step3-comparison-container #cf-temporary-promotions{
    padding:18px 16px!important;
  }
  #step3-comparison-container #cf-temporary-promotions .space-y-3 > div{
    padding:16px!important;
  }
  #step3-comparison-container #cf-temporary-promotions .space-y-3 > div > div:last-child{
    width:100%!important;
    border-top:1px solid #efe7ff!important;
    padding-top:14px!important;
  }
  #step3-comparison-container #cf-temporary-promotions + div,
  #step3-comparison-container #cf-temporary-promotions + div > div{
    display:block!important;
  }
  #step3-comparison-container #cf-temporary-promotions + div > div > div:last-child{
    margin-top:14px!important;
    text-align:left!important;
  }
  #step3-comparison-container #cf-temporary-promotions + div + div.p-4.rounded-2xl{
    padding:16px!important;
  }
}

@media (max-width:560px){
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .flex.flex-wrap.items-center.gap-4,
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div .flex.flex-wrap.items-center.gap-2\.5.text-xs,
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div .flex.flex-wrap.items-center.gap-2\.5.text-xs.pt-1{
    grid-template-columns:1fr!important;
  }
  #step3-comparison-container .cf-funnel-summary h2{font-size:1.95rem!important}
  #step3-comparison-container > .cf-funnel-summary + div h2{font-size:1.75rem!important}
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xl.font-extrabold.text-slate-900{font-size:1.65rem!important}
}

/* --------------------------------------------------------------------------
   Ajuste fino para acercar aún más el diseño al mockup elegido.
   -------------------------------------------------------------------------- */
#step3-comparison-container{
  width:min(1210px,calc(100% - 28px))!important;
  max-width:1210px!important;
  padding-top:28px!important;
  gap:24px!important;
}

/* Resumen principal más cercano al mockup */
#step3-comparison-container .cf-funnel-summary{
  border-radius:26px!important;
  padding:30px 28px 24px!important;
}
#step3-comparison-container .cf-funnel-summary-head{
  margin-bottom:22px!important;
}
#step3-comparison-container .cf-funnel-summary-head p{max-width:760px!important}
#step3-comparison-container .cf-funnel-kpi{
  position:relative!important;
  min-height:170px!important;
  padding:22px 22px 18px!important;
}
#step3-comparison-container .cf-funnel-kpi::after{
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:42px;
  height:42px;
  border-radius:999px;
  background:#eef2ff;
  box-shadow:inset 0 0 0 1px #d8ddff;
  opacity:.96;
}
#step3-comparison-container .cf-funnel-kpi:nth-child(1)::after{
  background:
    linear-gradient(to top,#4f46e5 0 12px,transparent 12px),
    linear-gradient(to top,#4f46e5 0 18px,transparent 18px),
    linear-gradient(to top,#4f46e5 0 24px,transparent 24px),
    #eef2ff;
  background-size:4px 12px,4px 18px,4px 24px,100% 100%;
  background-position:12px 24px,19px 24px,26px 24px,0 0;
  background-repeat:no-repeat;
}
#step3-comparison-container .cf-funnel-kpi:nth-child(2)::after{
  background:#eef2ff!important;
}
#step3-comparison-container .cf-funnel-kpi:nth-child(2)::before{
  content:"★";
  position:absolute;
  right:31px;
  top:28px;
  z-index:2;
  font-size:18px;
  color:#4f46e5;
}
#step3-comparison-container .cf-funnel-kpi:nth-child(3)::after{
  background:#eafaf1!important;
  box-shadow:inset 0 0 0 1px #cbeedb;
}
#step3-comparison-container .cf-funnel-kpi:nth-child(3)::before{
  content:"◔";
  position:absolute;
  right:29px;
  top:26px;
  z-index:2;
  font-size:18px;
  font-weight:900;
  color:#10b981;
  transform:rotate(-35deg);
}
#step3-comparison-container .cf-funnel-kpi > span{max-width:calc(100% - 62px)!important}
#step3-comparison-container .cf-funnel-kpi > strong{max-width:calc(100% - 8px)!important}
#step3-comparison-container .cf-funnel-flowline{
  margin-top:16px!important;
  border-radius:20px!important;
  padding:18px 18px 16px!important;
  background:#f9fbff!important;
}

/* Título ranking más limpio */
#step3-comparison-container > .cf-funnel-summary + div{
  align-items:flex-end!important;
  gap:20px!important;
}
#step3-comparison-container > .cf-funnel-summary + div h2{
  font-size:clamp(1.95rem,2.8vw,2.65rem)!important;
}
#step3-comparison-container > .cf-funnel-summary + div > div:last-child{
  min-width:300px!important;
  border-radius:16px!important;
}

/* Tarjeta destacada más parecida al mockup */
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900{
  border-radius:24px!important;
  padding:22px 24px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6{
  gap:16px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .flex.flex-wrap.items-center.gap-2{
  margin-bottom:2px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:nth-child(2){
  grid-template-columns:minmax(280px,.95fr) minmax(0,1.35fr)!important;
  gap:20px!important;
  padding-bottom:14px!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:nth-child(2) > div:first-child p.text-xs.text-slate-300.mt-1{
  max-width:38ch!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md{
  padding:14px 16px!important;
  border-radius:18px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .flex.flex-wrap.items-center.gap-4{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .flex.flex-wrap.items-center.gap-4 > div{
  padding:4px 12px 4px 0!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .flex.flex-wrap.items-center.gap-4 > div+div{
  padding-left:14px!important;
  border-left:1px solid rgba(255,255,255,.12)!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .mt-2.pt-3.border-t{
  margin-top:10px!important;
  padding-top:10px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child{
  padding-top:2px!important;
  border-top:0!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child > div:first-child{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:18px 24px!important;
  color:#e2e8f0!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child > div:first-child p{
  margin:0!important;
  font-size:13px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child > div:last-child{
  flex-direction:row!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 #best-offer-select-btn{
  min-width:290px!important;
}

/* Filtros y ordenación */
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div{
  border-radius:18px!important;
  padding:16px 18px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div .flex.flex-wrap.items-center.gap-2\.5.text-xs,
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div .flex.flex-wrap.items-center.gap-2\.5.text-xs.pt-1{
  gap:8px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div button{
  min-height:38px!important;
  padding:0 14px!important;
}

/* Pseudo cabecera de tabla para el ranking */
#step3-comparison-container .space-y-3\.5{
  position:relative!important;
  padding-top:44px!important;
}
#step3-comparison-container .space-y-3\.5::before{
  content:"POS.   COMPAÑÍA Y TARIFA   PRECIO TOTAL ESTIMADO   AHORRO ESTIMADO   VER DETALLES";
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1.35fr) minmax(220px,.75fr) minmax(170px,.6fr) 180px!important;
  align-items:center!important;
  color:#637187!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  padding:0 14px 14px!important;
  border-bottom:1px solid #e5ebf3!important;
  white-space:pre!important;
}
#step3-comparison-container .space-y-3\.5 > div{
  grid-template-columns:minmax(0,1.25fr) minmax(210px,.78fr) auto!important;
  gap:14px!important;
  min-height:104px!important;
  padding:16px 18px 16px 70px!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
#step3-comparison-container .space-y-3\.5 > div::before{
  left:18px!important;
  width:28px!important;
  height:28px!important;
  font-size:11px!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:first-child .flex.items-start.gap-4{
  gap:12px!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:first-child .cf-company-logo{
  width:44px!important;
  height:36px!important;
  flex-basis:44px!important;
  border-radius:11px!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:first-child .text-xs.px-2.py-0\.5.rounded{
  border-radius:999px!important;
  padding:4px 8px!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child{
  grid-template-columns:minmax(185px,.9fr) 170px!important;
  gap:18px!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
  position:relative!important;
  padding-left:0!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child::before{
  content:"PRECIO TOTAL ESTIMADO";
  display:block;
  margin-bottom:4px;
  color:#7b8798;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-[11px].text-slate-500.block,
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600.block.mt-0\.5{
  margin-top:4px!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child{
  min-width:170px!important;
  align-self:center!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:first-child,
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:last-child{
  min-height:40px!important;
  font-size:12px!important;
}
#step3-comparison-container #show-all-offers-btn{
  min-height:44px!important;
}

/* Promociones y PVPC más cercanos al mockup */
#step3-comparison-container #cf-temporary-promotions{
  border-radius:20px!important;
  padding:18px 20px!important;
}
#step3-comparison-container #cf-temporary-promotions > div:first-child{margin-bottom:2px!important}
#step3-comparison-container #cf-temporary-promotions .space-y-3 > div{
  padding:16px 18px!important;
  border-radius:16px!important;
}
#step3-comparison-container #cf-temporary-promotions + div{
  border-radius:20px!important;
  padding:18px 20px!important;
}
#step3-comparison-container #cf-temporary-promotions + div + div.p-4.rounded-2xl{
  border-radius:20px!important;
  padding:16px 18px!important;
}

/* Mobile: limpiar y evitar pseudo cabecera comprimida */
@media (max-width:1023px){
  #step3-comparison-container{
    width:calc(100% - 14px)!important;
    gap:16px!important;
  }
  #step3-comparison-container .cf-funnel-summary{padding:18px 14px 16px!important}
  #step3-comparison-container .cf-funnel-kpi{
    min-height:auto!important;
    padding:16px 16px 14px!important;
  }
  #step3-comparison-container .cf-funnel-kpi::after{
    width:34px!important;
    height:34px!important;
    right:14px!important;
    top:14px!important;
  }
  #step3-comparison-container .cf-funnel-kpi:nth-child(2)::before,
  #step3-comparison-container .cf-funnel-kpi:nth-child(3)::before{
    right:24px!important;
    top:21px!important;
    font-size:15px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div{
    align-items:stretch!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div > div:last-child{
    min-width:0!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900{
    padding:16px 14px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:nth-child(2){
    grid-template-columns:1fr!important;
    padding-bottom:10px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .flex.flex-wrap.items-center.gap-4{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .flex.flex-wrap.items-center.gap-4 > div+div{
    border-left:0!important;
    padding-left:0!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child > div:first-child{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child > div:last-child{
    flex-direction:column!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 #best-offer-select-btn{
    min-width:0!important;
    width:100%!important;
  }
  #step3-comparison-container .space-y-3\.5{
    padding-top:0!important;
  }
  #step3-comparison-container .space-y-3\.5::before{
    content:none!important;
  }
  #step3-comparison-container .space-y-3\.5 > div{
    min-height:auto!important;
    padding:16px 14px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div::before{
    position:static!important;
    margin-bottom:6px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:first-child .flex.items-start.gap-4{
    gap:10px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
    border-top:1px solid #edf2f7!important;
    padding-top:12px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child::before{
    content:"Precio total estimado";
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child{
    min-width:0!important;
  }
  #step3-comparison-container #cf-temporary-promotions,
  #step3-comparison-container #cf-temporary-promotions + div,
  #step3-comparison-container #cf-temporary-promotions + div + div.p-4.rounded-2xl{
    padding:16px 14px!important;
  }
}

@media (max-width:560px){
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .flex.flex-wrap.items-center.gap-4,
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .relative.z-10.space-y-6 > div:last-child > div:first-child{
    grid-template-columns:1fr!important;
  }
}

/* --------------------------------------------------------------------------
   Ajustes finos 2: iconos, aviso discreto y ahorros con mayor jerarquía.
   -------------------------------------------------------------------------- */

/* Iconos de los KPI superiores más limpios y legibles */
#step3-comparison-container .cf-funnel-kpi::after{
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:18px 18px!important;
}
#step3-comparison-container .cf-funnel-kpi:nth-child(1)::before,
#step3-comparison-container .cf-funnel-kpi:nth-child(2)::before,
#step3-comparison-container .cf-funnel-kpi:nth-child(3)::before{
  content:none!important;
}
#step3-comparison-container .cf-funnel-kpi:nth-child(1)::after{
  background-color:#eef2ff!important;
  box-shadow:inset 0 0 0 1px #d8ddff!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='12' width='3' height='7' rx='1' fill='%234f46e5'/%3E%3Crect x='10.5' y='8' width='3' height='11' rx='1' fill='%234f46e5'/%3E%3Crect x='17' y='5' width='3' height='14' rx='1' fill='%234f46e5'/%3E%3Cpath d='M3.5 19.5h17' stroke='%23a5b4fc' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}
#step3-comparison-container .cf-funnel-kpi:nth-child(2)::after{
  background-color:#eef2ff!important;
  box-shadow:inset 0 0 0 1px #d8ddff!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.2l2.1 4.32 4.77.69-3.45 3.36.82 4.75L12 15.15 7.76 17.3l.82-4.75-3.45-3.36 4.77-.69L12 4.2z' fill='%234f46e5'/%3E%3C/svg%3E")!important;
}
#step3-comparison-container .cf-funnel-kpi:nth-child(3)::after{
  background-color:#ebfbf2!important;
  box-shadow:inset 0 0 0 1px #caeed9!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.3 4.5c4.28 0 7.2 2.77 7.2 6.8 0 4.54-3.45 8.22-8.36 8.22-3.77 0-6.64-2.46-6.64-6.12 0-3.02 2.12-5.4 5.14-5.9.8-1.8 1.68-3 2.66-3z' fill='none' stroke='%2310b981' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M10.2 11.1c1.5.24 2.96 1.56 3.45 3.9' stroke='%2310b981' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}

/* Aviso histórico: mucho más discreto y compacto */
#step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50{
  margin-top:14px!important;
  padding:10px 14px!important;
  border-radius:16px!important;
  background:#fffaf0!important;
  border-color:#ecd9b2!important;
  box-shadow:none!important;
  font-size:0!important;
}
#step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50 strong{
  display:inline-block!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:900!important;
  color:#815719!important;
}
#step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50 .block.mt-1{
  display:none!important;
}

/* Ocultar textos auxiliares que añaden ruido en la cabecera del ranking */
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div + .space-y-4 > p,
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div + .space-y-4 > h3 .text-xs.font-normal.text-slate-500{
  display:none!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 + div + .space-y-4 > h3{
  margin-bottom:2px!important;
}
#step3-comparison-container .space-y-3\.5{
  padding-top:38px!important;
}

/* Ahorros con la misma jerarquía visual que el precio del 1er año */
#step3-comparison-container .cf-funnel-kpi-save > strong{
  font-size:clamp(2rem,2.4vw,2.6rem)!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .mt-2.pt-3.border-t{
  margin-top:12px!important;
  padding-top:12px!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .mt-2.pt-3.border-t .text-xs{
  display:block!important;
  margin-bottom:4px!important;
  font-size:11px!important;
  color:#c7d2fe!important;
}
#step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .mt-2.pt-3.border-t strong{
  display:block!important;
  font-size:2.2rem!important;
  line-height:1.02!important;
  letter-spacing:-.03em!important;
  color:#19d69b!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600.block.mt-0\.5,
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600{
  display:block!important;
  margin-top:8px!important;
  font-size:1.9rem!important;
  line-height:1.02!important;
  letter-spacing:-.03em!important;
  color:#0f9f6b!important;
  white-space:nowrap!important;
}

@media (max-width:1023px){
  #step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50{
    padding:9px 12px!important;
  }
  #step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50 strong{
    font-size:11px!important;
  }
  #step3-comparison-container .space-y-3\.5{
    padding-top:0!important;
  }
  #step3-comparison-container > .cf-funnel-summary + div + div.bg-slate-900 .bg-white\/10.backdrop-blur-md .mt-2.pt-3.border-t strong{
    font-size:1.8rem!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600.block.mt-0\.5,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600{
    font-size:1.55rem!important;
    white-space:normal!important;
  }
}

/* --------------------------------------------------------------------------
   Ajustes finos 3: fecha en aviso, quitar cabecera POS, icono ahorro y listado.
   -------------------------------------------------------------------------- */

/* Cuadro de aviso: compacto, con fecha visible y ancho adaptado al texto */
#step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50,
#step3-comparison-container .cf-funnel-summary .cf-funnel-flowline{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:100%!important;
}
#step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50{
  padding:9px 13px!important;
  min-height:0!important;
}
#step3-comparison-container .cf-funnel-summary .cf-historical-notice-compact{
  display:inline-flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  align-items:center!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:800!important;
  color:#7a5717!important;
}
#step3-comparison-container .cf-funnel-summary .cf-funnel-flowline{
  padding:10px 14px!important;
}

/* Icono verde del ahorro: sustituir hoja por símbolo más claro de ahorro */
#step3-comparison-container .cf-funnel-kpi:nth-child(3)::after{
  background-color:#ebfbf2!important;
  box-shadow:inset 0 0 0 1px #caeed9!important;
  background-size:19px 19px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.2' fill='none' stroke='%2310b981' stroke-width='1.9'/%3E%3Cpath d='M14.6 8.6c-.55-.55-1.34-.9-2.28-.9-1.57 0-2.77.94-2.77 2.24 0 1.38 1.2 1.86 2.64 2.12 1.3.25 2 .5 2 1.34 0 .78-.72 1.3-1.86 1.3-1 0-1.9-.38-2.58-1.06' fill='none' stroke='%2310b981' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M12 6.3v11.4' fill='none' stroke='%2310b981' stroke-width='1.6' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E")!important;
}

/* Quitar la línea pseudo cabecera que empieza por POS. */
#step3-comparison-container .space-y-3\.5::before{
  content:none!important;
}
#step3-comparison-container .space-y-3\.5{
  padding-top:8px!important;
}

/* Ahorro del listado: etiqueta más pequeña, cifra protagonista, sin invadir. */
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600.block.mt-0\.5,
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:4px!important;
  white-space:normal!important;
  margin-top:8px!important;
  font-size:0!important;
  line-height:1!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-label{
  font-size:11px!important;
  line-height:1.15!important;
  letter-spacing:0!important;
  color:#5d6b7d!important;
  font-weight:800!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-value{
  font-size:1.9rem!important;
  line-height:1.02!important;
  letter-spacing:-.03em!important;
  color:#0f9f6b!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

@media (max-width:1023px){
  #step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50,
  #step3-comparison-container .cf-funnel-summary .cf-funnel-flowline{
    display:block!important;
    width:100%!important;
  }
  #step3-comparison-container .cf-funnel-summary .cf-historical-notice-compact{
    font-size:11px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-label{
    font-size:10px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-value{
    font-size:1.55rem!important;
  }
}

/* --------------------------------------------------------------------------
   Ajustes finos 4: icono ahorro simple, avisos centrados y ahorro alineado.
   -------------------------------------------------------------------------- */

/* KPI ahorro: un único símbolo $ limpio */
#step3-comparison-container .cf-funnel-kpi:nth-child(3)::after{
  background:#ebfbf2!important;
  box-shadow:inset 0 0 0 1px #caeed9!important;
  background-image:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#10b981!important;
  font-weight:950!important;
  font-size:20px!important;
  line-height:1!important;
  content:"$"!important;
}

/* Los dos avisos compactos quedan centrados respecto al bloque superior */
#step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50,
#step3-comparison-container .cf-funnel-summary .cf-funnel-flowline{
  display:flex!important;
  width:max-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:center!important;
  text-align:center!important;
}
#step3-comparison-container .cf-funnel-summary .cf-historical-notice-compact{
  justify-content:center!important;
  text-align:center!important;
}

/* Cada oferta: el ahorro ocupa siempre una tercera línea alineada */
#step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
  display:grid!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xl.font-extrabold.text-slate-900{
  grid-row:1!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-\[11px\].text-slate-500.block,
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-\[11px\].text-indigo-600.block.font-bold{
  grid-row:2!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600.block.mt-0\.5,
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600{
  grid-row:3!important;
  display:flex!important;
  align-items:baseline!important;
  flex-wrap:nowrap!important;
  gap:5px!important;
  margin-top:7px!important;
  min-height:30px!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-label{
  flex:0 0 auto!important;
  font-size:10px!important;
  line-height:1!important;
  color:#607086!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
#step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-value{
  flex:0 0 auto!important;
  font-size:1.9rem!important;
  line-height:1!important;
  color:#0f9f6b!important;
  font-weight:950!important;
  white-space:nowrap!important;
}

@media (max-width:1023px){
  #step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50,
  #step3-comparison-container .cf-funnel-summary .cf-funnel-flowline{
    width:max-content!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-label{
    font-size:10px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-value{
    font-size:1.55rem!important;
  }
}

/* --------------------------------------------------------------------------
   Ajustes finos 5: quitar "Tu resultado", separar el flujo y equilibrar ranking.
   -------------------------------------------------------------------------- */

/* Quitar la píldora "TU RESULTADO" del resumen superior */
#step3-comparison-container .cf-funnel-eyebrow{
  display:none!important;
}
#step3-comparison-container .cf-funnel-summary h2{
  margin-top:0!important;
}

/* Separación correcta entre "sencillo:" y "analiza" */
#step3-comparison-container .cf-funnel-summary .cf-funnel-flowline{
  gap:5px!important;
  align-items:baseline!important;
}
#step3-comparison-container .cf-funnel-summary .cf-funnel-flowline strong{
  margin-right:1px!important;
  white-space:nowrap!important;
}

/* Ranking escritorio: dos zonas reales (oferta | cifras+acciones), sin columna vacía */
@media (min-width:1024px){
  #step3-comparison-container .space-y-3\.5 > div{
    grid-template-columns:minmax(0,1.55fr) minmax(430px,.95fr)!important;
    gap:24px!important;
    min-height:116px!important;
    padding:18px 20px 18px 70px!important;
  }

  #step3-comparison-container .space-y-3\.5 > div > div:last-child{
    display:grid!important;
    grid-template-columns:minmax(235px,1fr) 170px!important;
    align-items:center!important;
    gap:22px!important;
    width:100%!important;
    min-width:0!important;
  }

  /* Columna de cifras: jerarquía clara y líneas estables */
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
    display:block!important;
    min-width:0!important;
    text-align:left!important;
    padding:0!important;
    border:0!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child::before{
    content:"PRECIO TOTAL ESTIMADO"!important;
    display:block!important;
    margin:0 0 3px!important;
    color:#7b8798!important;
    font-size:10px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:.03em!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.text-slate-400.block{
    display:block!important;
    margin:0 0 1px!important;
    color:#8390a2!important;
    font-size:10px!important;
    line-height:1.2!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xl.font-extrabold.text-slate-900{
    display:block!important;
    margin:0 0 7px!important;
    font-size:1.9rem!important;
    line-height:1!important;
    color:#07164a!important;
    white-space:nowrap!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-\[11px\].text-slate-500.block,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-\[11px\].text-indigo-600.block.font-bold{
    display:inline-block!important;
    margin:0 10px 0 0!important;
    font-size:10px!important;
    line-height:1.25!important;
    vertical-align:baseline!important;
    white-space:nowrap!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-\[11px\].text-indigo-600.block.font-bold{
    color:#4f46e5!important;
    font-weight:800!important;
  }

  /* Tercera línea: ahorro; etiqueta discreta y número protagonista */
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600.block.mt-0\.5,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600{
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    min-height:31px!important;
    margin:9px 0 0!important;
    white-space:nowrap!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-label{
    font-size:10px!important;
    line-height:1!important;
    color:#65758a!important;
    font-weight:800!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-value{
    font-size:1.9rem!important;
    line-height:1!important;
    color:#0f9f6b!important;
    font-weight:950!important;
    letter-spacing:-.03em!important;
  }

  /* Acciones: columna fija para que no invada cifras */
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:9px!important;
    width:170px!important;
    min-width:170px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button{
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    line-height:1.15!important;
  }
}

/* Tablet/móvil: mantener la cifra y el ahorro ordenados sin solapamientos */
@media (max-width:1023px){
  #step3-comparison-container .cf-funnel-summary .cf-funnel-flowline{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
    display:block!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-\[11px\].text-slate-500.block,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-\[11px\].text-indigo-600.block.font-bold{
    display:inline-block!important;
    margin-right:8px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600.block.mt-0\.5,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600{
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    margin-top:8px!important;
  }
}

/* --------------------------------------------------------------------------
   Ajuste fino 4: reducir tamaño del texto en aviso y flowline.
   -------------------------------------------------------------------------- */
#step3-comparison-container .cf-funnel-summary .cf-historical-notice-compact{
  font-size:11px!important;
  line-height:1.25!important;
}
#step3-comparison-container .cf-funnel-summary .cf-funnel-flowline{
  font-size:11px!important;
  line-height:1.3!important;
  padding:9px 13px!important;
}
#step3-comparison-container .cf-funnel-summary .cf-funnel-flowline strong{
  font-size:11px!important;
  line-height:1.3!important;
  margin-right:4px!important;
}
@media (max-width:1023px){
  #step3-comparison-container .cf-funnel-summary .cf-historical-notice-compact,
  #step3-comparison-container .cf-funnel-summary .cf-funnel-flowline,
  #step3-comparison-container .cf-funnel-summary .cf-funnel-flowline strong{
    font-size:10px!important;
    line-height:1.25!important;
  }
}

/* --------------------------------------------------------------------------
   Ajuste fino 5: optimización móvil del bloque de resultados.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  /* KPI superiores: más aire, iconos más pequeños y sin invadir cifras */
  #step3-comparison-container .cf-funnel-summary{
    padding:20px 14px 18px!important;
  }
  #step3-comparison-container .cf-funnel-kpi{
    min-height:156px!important;
    padding:18px 58px 16px 16px!important;
    border-radius:20px!important;
  }
  #step3-comparison-container .cf-funnel-kpi::after{
    width:30px!important;
    height:30px!important;
    right:12px!important;
    top:12px!important;
    background-size:15px 15px!important;
  }
  #step3-comparison-container .cf-funnel-kpi > span{
    max-width:none!important;
    font-size:11px!important;
    line-height:1.22!important;
    margin-bottom:8px!important;
  }
  #step3-comparison-container .cf-funnel-kpi > strong{
    max-width:100%!important;
    font-size:clamp(2rem,8.2vw,2.6rem)!important;
    line-height:1.02!important;
    white-space:nowrap!important;
  }
  #step3-comparison-container .cf-funnel-kpi > small{
    font-size:11px!important;
    line-height:1.32!important;
    margin-top:10px!important;
  }

  /* Mensaje de excedentes / aviso: menor protagonismo y más separación */
  #step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50{
    margin-top:16px!important;
    padding:10px 12px!important;
  }
  #step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50,
  #step3-comparison-container .cf-funnel-summary .rounded-2xl.border.border-amber-300.bg-amber-50 *,
  #step3-comparison-container .cf-funnel-summary .cf-historical-notice-compact{
    font-size:10px!important;
    line-height:1.32!important;
  }
  #step3-comparison-container .cf-funnel-summary .cf-funnel-flowline{
    margin-top:12px!important;
    font-size:10px!important;
    line-height:1.32!important;
    padding:9px 12px!important;
  }

  /* Ranking móvil: precio arriba y botones debajo, lado a lado */
  #step3-comparison-container .space-y-3\.5 > div{
    padding:16px 14px 14px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    align-items:start!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
    grid-column:1 / -1!important;
    padding-top:12px!important;
    margin-top:2px!important;
    border-top:1px solid #edf2f7!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child a,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child > *{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:first-child{
    min-height:44px!important;
    border-radius:14px!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:last-child{
    min-height:44px!important;
    border-radius:999px!important;
    font-size:12px!important;
    line-height:1.12!important;
    white-space:normal!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xl.font-extrabold.text-slate-900{
    font-size:1.75rem!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .text-xs.font-bold.text-emerald-600 .cf-saving-value{
    font-size:1.45rem!important;
  }
}

@media (max-width:560px){
  /* Ajuste extra en móviles estrechos */
  #step3-comparison-container .cf-funnel-kpi{
    min-height:148px!important;
    padding:16px 52px 15px 15px!important;
  }
  #step3-comparison-container .cf-funnel-kpi > strong{
    font-size:clamp(1.9rem,7.6vw,2.35rem)!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child{
    gap:8px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:first-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:last-child{
    font-size:11px!important;
  }
}

/* --------------------------------------------------------------------------
   Ajuste fino 6: botones del ranking móvil anclados abajo, lado a lado.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  #step3-comparison-container .space-y-3\.5 > div{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:first-child{
    width:100%!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    gap:12px!important;
    margin-top:auto!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
    width:100%!important;
    text-align:left!important;
    padding-top:12px!important;
    border-top:1px solid #edf2f7!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    min-width:0!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child > *,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > *{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    align-self:stretch!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:first-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > button:first-child{
    min-height:46px!important;
    border-radius:14px!important;
    padding:10px 10px!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:last-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > button:last-child{
    min-height:46px!important;
    border-radius:18px!important;
    padding:10px 12px!important;
    font-size:12px!important;
    line-height:1.12!important;
    white-space:normal!important;
  }
}

@media (max-width:560px){
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2{
    gap:8px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:first-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child button:last-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > button:first-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > button:last-child{
    font-size:11px!important;
  }
}

/* --------------------------------------------------------------------------
   Ajuste fino 7: en móvil, botones de cada operador abajo del todo.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  #step3-comparison-container .space-y-3\.5 > div{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 148px!important;
    grid-template-areas:
      "rank rank"
      "info price"
      "actions actions"!important;
    align-items:start!important;
    column-gap:14px!important;
    row-gap:12px!important;
    padding:16px 14px 14px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div::before{
    grid-area:rank!important;
    position:static!important;
    transform:none!important;
    margin:0!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:first-child{
    grid-area:info!important;
    width:100%!important;
    min-width:0!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child{
    grid-area:auto!important;
    display:contents!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
    grid-area:price!important;
    width:100%!important;
    min-width:0!important;
    text-align:left!important;
    padding-top:0!important;
    margin-top:0!important;
    border-top:0!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2{
    grid-area:actions!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
    min-width:0!important;
    gap:10px!important;
    margin-top:2px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child > *,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > *{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    align-self:stretch!important;
  }
}

@media (max-width:560px){
  #step3-comparison-container .space-y-3\.5 > div{
    grid-template-columns:minmax(0,1fr) 138px!important;
    column-gap:12px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2{
    gap:8px!important;
  }
}

/* --------------------------------------------------------------------------
   Ajuste fino 8: botones exactamente en los dos huecos inferiores señalados.
   En móvil: Ver condiciones abajo a la izquierda y asesoramiento abajo derecha.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  #step3-comparison-container .space-y-3\.5 > div{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 148px!important;
    grid-template-areas:
      "rank rank"
      "info price"
      "conditions advice"!important;
    align-items:start!important;
    column-gap:14px!important;
    row-gap:12px!important;
    padding:16px 14px 14px!important;
  }

  #step3-comparison-container .space-y-3\.5 > div::before{
    grid-area:rank!important;
    position:static!important;
    transform:none!important;
    margin:0!important;
  }

  #step3-comparison-container .space-y-3\.5 > div > div:first-child{
    grid-area:info!important;
    width:100%!important;
    min-width:0!important;
  }

  #step3-comparison-container .space-y-3\.5 > div > div:last-child{
    display:contents!important;
  }

  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:first-child{
    grid-area:price!important;
    width:100%!important;
    min-width:0!important;
    text-align:left!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
  }

  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2{
    display:contents!important;
  }

  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child > button:first-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > button:first-child{
    grid-area:conditions!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    margin:0!important;
    border-radius:14px!important;
    padding:10px 12px!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:normal!important;
    align-self:end!important;
  }

  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child > button:last-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > button:last-child{
    grid-area:advice!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    margin:0!important;
    border-radius:18px!important;
    padding:10px 10px!important;
    font-size:12px!important;
    line-height:1.12!important;
    white-space:normal!important;
    align-self:end!important;
  }
}

@media (max-width:560px){
  #step3-comparison-container .space-y-3\.5 > div{
    grid-template-columns:minmax(0,1fr) 138px!important;
    column-gap:12px!important;
    row-gap:10px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child > button:first-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child > div:last-child > button:last-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > button:first-child,
  #step3-comparison-container .space-y-3\.5 > div > div:last-child .flex.flex-col.sm\:flex-row.gap-2 > button:last-child{
    font-size:11px!important;
  }
}

/* --------------------------------------------------------------------------
   Ajuste home escritorio: H1 en una sola línea para mostrar más bloque CNMC.
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  #root .cf-hero-shell{
    padding-top:64px!important;
    padding-bottom:26px!important;
  }
  #root .cf-hero-shell .cf-hero-inner{
    max-width:1120px!important;
  }
  #root .cf-hero-shell h1{
    white-space:nowrap!important;
    font-size:clamp(3.45rem,4.45vw,5.05rem)!important;
    line-height:.92!important;
    letter-spacing:-.045em!important;
  }
  #root .cf-hero-shell h1 .cf-h1-accent{
    display:inline!important;
    white-space:nowrap!important;
  }
}


/* --------------------------------------------------------------------------
   Ajuste fino 7: aumentar ligeramente los textos de la zona izquierda del
   ranking en escritorio (compañía, tarifa y meta descriptiva).
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  #step3-comparison-container .space-y-3\.5 > div > div:first-child .font-extrabold.text-slate-900.text-base{
    font-size:1.08rem!important;
    line-height:1.28!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:first-child p.text-xs.text-slate-500.mt-1{
    font-size:13px!important;
    line-height:1.52!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:first-child .flex.items-center.gap-4.text-xs.text-slate-600.mt-2{
    font-size:13px!important;
    line-height:1.42!important;
    gap:10px 14px!important;
  }
  #step3-comparison-container .space-y-3\.5 > div > div:first-child .text-xs.px-2.py-0\.5.rounded{
    font-size:11px!important;
    padding:4px 9px!important;
  }
}