.b1-dual{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin:0}
.b1-col{flex:1 1 300px;max-width:500px}
.b1-card{position:relative;cursor:pointer;overflow:hidden;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:all .3s ease;height:320px}
.b1-card:hover{transform:translateY(-5px);box-shadow:0 10px 32px rgba(0,0,0,.4)}
.b1-card-bg{width:100%;height:100%;background-size:cover;background-position:center;transition:filter .4s ease,transform .4s ease;filter:grayscale(50%) brightness(.85)}
.b1-card:hover .b1-card-bg,.b1-card.active .b1-card-bg{filter:grayscale(0%) brightness(1.05);transform:scale(1.05)}
.b1-label{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:#fff;font-family:'Sora',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.05em;text-transform:uppercase;padding:12px 32px;border-radius:50px;white-space:nowrap;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.b1-label-funciona{background:#f97316}
.b1-label-coste{background:var(--v-primary,#0b2d5b)}
.b1-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);z-index:99999;align-items:center;justify-content:center}
.b1-modal.open{display:flex}
.b1-modal-box{position:relative;max-width:860px;width:92%;max-height:85vh;overflow-y:auto;background:#fff;border-radius:20px;box-shadow:0 24px 48px rgba(0,0,0,.4);padding:40px 36px 32px;animation:b1pop .25s ease}
@keyframes b1pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.b1-modal-close{position:absolute;top:14px;right:18px;font-size:26px;font-weight:700;cursor:pointer;color:#999;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.2s;line-height:1}
.b1-modal-close:hover{background:#f0f0f0;color:#000;transform:rotate(90deg)}
.b1-intro{font-size:1.1rem;line-height:1.6;margin-bottom:22px;padding-bottom:18px;border-bottom:2px solid #f0f0f0}
.b1-list{list-style:none}
.b1-item{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid #eee}
.b1-item:last-child{border-bottom:none;margin-bottom:0}
.b1-item-t{font-size:1.05rem;font-weight:700;color:#1e293b;margin-bottom:5px}
.b1-item-b{font-size:.95rem;line-height:1.55;color:#475569}
.blnz-embed{margin-top:20px;padding:20px;background:#f8f9fa;border-radius:12px}
.blnz-embed-title{font-size:1.1rem;font-weight:700;margin-bottom:8px;color:#00796b}
.blnz-embed-sub{font-size:.9rem;line-height:1.5;color:#555;margin-bottom:12px}
.fuente-jef{font-size:.85rem;color:#666;margin:12px 0;padding:10px;background:#fff;border-radius:8px;border-left:4px solid #00bcd4}
.lumi-scroll{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:14px 10px;margin:16px 0;background:#f5f5f5;border-radius:8px;min-height:200px}
.lumi-card{flex:0 0 auto;min-width:140px;background:#fff;border-radius:12px;padding:12px 8px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.baliza-wrap{height:70px;display:flex;align-items:center;justify-content:center}
.baliza-img{max-width:100%;max-height:60px;object-fit:contain}
.lumi-card h4{font-size:13px;margin:6px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.lumi-card .cd{font-weight:700;color:#00796b;font-size:15px}
.lumi-arrows{display:flex;justify-content:center;gap:12px;margin:10px 0}
.lumi-arrow{padding:7px 22px;background:#00796b;color:#fff;border:none;border-radius:25px;cursor:pointer;font-size:1.1rem}
.lumi-scale{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.lumi-left,.lumi-right{font-weight:700;color:#00796b;font-size:.85rem}
.lumi-line{flex-grow:1;height:3px;background:linear-gradient(to right,#ff9800,#f44336);margin:0 16px}
.iframe-container{width:100%;min-height:400px;background:#f0f0f0;border-radius:12px;margin-top:16px;display:flex;align-items:center;justify-content:center;color:#666;border:2px dashed #ccc}
.iframe-container iframe{width:100%;height:400px;border:none;border-radius:12px}
.blnz-iframe-wrap{position:relative;margin-top:16px}
.price-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:#fff;border:none;width:38px;height:38px;border-radius:50%;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10}
.price-arrow.left{left:8px}
.price-arrow.right{right:8px}
@media(max-width:768px){.b1-dual{flex-direction:column}.b1-col{max-width:100%}.b1-card{height:250px}.b1-modal-box{padding:28px 20px}}
</style>
{/literal}

<!-- =========================
     TODO EL HTML SIGUE IGUAL
     No necesitas cambiar NADA en la estructura HTML
========================= -->
<div class="canal-identity-bar" id="canal-identity-bar">
  <div class="canal-name" id="canal-identity-nombre">Canal balizas.pro</div>
  <div class="canal-tagline" id="canal-identity-tagline">Tu canal de confianza · <span class="city"></span></div>
  <div class="canal-donacion-badge" id="canal-donacion-badge">
    <span class="donacion-icon">♥</span>
    <span id="canal-donacion-badge-texto">Donamos por cada venta</span>
  </div>
</div>

<!-- =========================
     HERO (integrada)
========================= -->
<section id="hero-torre" class="hero-vertical">
  <div class="vertical-container">
    <div class="hero-wrap">
      <div class="hero-left">
        <div id="hero-logo-empresa" style="display:none; margin-bottom:15px;">
          <img id="hero-logo-img" style="max-height:70px;" />
        </div>
        <div class="hero-canal-identity" id="hero-canal-identity" style="margin-bottom:18px;">
          <span class="amigos-pre">Canal de</span>
          <span class="amigos-display" id="hero-amigos-nombre">balizas.pro</span>
        </div>
        <h1 id="hero-titulo"></h1>
        <div class="hero-badge" id="hero-subtitulo"></div>

        <p class="hero-price">
          <strong id="hero-price-main"></strong> · <span class="precio-vertical"></span>
        </p>

        <p class="hero-legal" id="hero-detalle"></p>
      </div>

      <div class="hero-right">
        <div class="hero-visual">
          <div class="hero-halo"></div>
          <img class="hero-img" src="https://balizas.pro/img/cms/verticales/torreultimo.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<!-- =========================
     BANDA PREMIUM (vertical)
========================= -->
<section class="banda-premium banda-vertical">
  <div class="banda-inner" style="display:flex;align-items:center;justify-content:center;gap:0;">
    <h2 id="banda-premium-text"></h2>
    <span class="banda-canal-firma" id="banda-canal-firma"></span>
  </div>
</section>

<!-- ===========================
     BLOQUE PRODUCTO PRINCIPAL (slider)
=========================== -->
<section class="producto-main" style="display:none;">
  <div class="vertical-container">
    <div class="autoridad-slider">
      <button class="slider-btn left" onclick="moveSlider(-1)" aria-label="Anterior">‹</button>
      <div class="slider-track" id="sliderTrack"></div>
      <button class="slider-btn right" onclick="moveSlider(1)" aria-label="Siguiente">›</button>
      <div class="slider-dots" id="sliderDots"></div>
    </div>
  </div>
</section>

<!-- ===========================
     BLOQUE AUTORIDAD
=========================== -->
<section class="bloque-autoridad">
  <div class="vertical-container">
    <h2 class="autoridad-titulo" id="autoridad-titulo"></h2>
    <p class="autoridad-sub" id="autoridad-sub"></p>
    <div class="hr-soft"></div>
    <div id="autoridad-wrapper"></div>
  </div>
</section>

<!-- ===================================================
     ZONA COMERCIAL
=================================================== -->
<section class="producto-analisis product-theme">
  <div class="vertical-container">
    <h2 class="producto-seccion-titulo" id="producto-seccion-titulo"></h2>

    <div class="ficha-producto-wrap">

      <div class="ficha-col-izq">
        <div class="ficha-cabecera-canal">
          <div class="ficha-cabecera-texto">
            <h2 class="ficha-cabecera-titulo" id="cabecera-baliza-titulo"></h2>
          </div>
          <div class="ficha-cabecera-logo" id="cabecera-baliza-logo-wrap" style="display:none;">
            <img id="cabecera-baliza-logo" src="" alt="">
          </div>
        </div>

        <div class="ficha-galeria">
          <div class="ficha-galeria-main">
            <img id="mainImage" src="" alt="">
          </div>
          <div class="ficha-galeria-thumbs thumbs"></div>
        </div>
      </div>

      <div class="ficha-col-der">
        <div class="producto-card-cabecera" id="ficha-der-cabecera">
          <img src="" class="producto-card-logo-fab" id="producto-card-logo-fab" alt="" style="display:none;">
          <span class="producto-card-marca-nombre" id="producto-card-marca-nombre"></span>
        </div>

        <h3 class="producto-nombre producto-card" id="producto-nombre-ficha">GeoBlueShield49</h3>

        <p class="producto-canal-tag" id="producto-canal-tag"></p>

        <div class="precios-wrapper">
          <span class="precio-antiguo" id="precio-antiguo-card"></span>
          <div class="precio-actual-wrapper">
            <span class="precio-actual" id="precio-actual-card"></span>
          </div>
          <span class="precio-amigos-texto" id="precio-amigos-texto"></span>
        </div>
        <p class="iva">IVA incluido</p>

 <!-- CARACTERÍSTICAS DESDE JSON -->
<div class="producto-caracteristicas" id="producto-caracteristicas"></div>

<a id="main-buy" class="btn-vertical btn-compra-principal" href="#">
  Comprar ahora
</a>

<div style="display:none;">
  <div class="producto-card">
    <img class="producto-img" id="producto-img-principal" src="" alt="">
    <div class="podium-img-container"><img></div>
  </div>
</div>
      </div>

    </div>
  </div>
</section>

<!-- ALTERNATIVAS -->
<section class="producto-alternativas" id="alt_section" style="display:none;">
  <div class="vertical-container">
    <h2 class="alternativas-titulo" id="alternativas-titulo">Y si quieres gastar un poco menos...</h2>
    <p class="alternativas-subtitulo" id="alternativas-subtitulo">ALTERNATIVAS SELECCIONADAS · CON GARANTÍA Y POSVENTA EN ESPAÑA</p>
    <div class="alt-grid" id="alt_grid"></div>
  </div>
</section>
<!-- =====================================================
     SECCIÓN COMISIONES - MENSAJE DEL CANAL
===================================================== -->
<section class="comisiones-section" id="comisiones-section" style="display: none;">
  <div class="comisiones-banda">
    <div class="vertical-container">

      <div class="comisiones-inner">
        <!-- Logo -->
        <div class="comisiones-logo-wrap" id="comisiones-logo-wrap">
          <img src="" class="comisiones-logo" id="comisiones-logo" alt="">
        </div>

        <!-- Eyebrow -->
        <div class="comisiones-eyebrow">Canal · Compromiso</div>

        <!-- Título -->
        <h3 class="comisiones-titulo" id="comisiones-titulo">
          Lo que hacemos con las comisiones
        </h3>

        <!-- Mensaje -->
        <div class="comisiones-mensaje" id="comisiones-mensaje">
          El 100% de las comisiones generadas se destina a financiar las becas de estudio
          y el mantenimiento de instalaciones de nuestra comunidad.
          Comprando una baliza, apoyas directamente a tu comunidad.
        </div>

        <!-- Badge -->
        <div class="comisiones-badge">
          <span class="comisiones-icon">🔍</span>
          <span>Compromiso de transparencia</span>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- SECCIÓN ANALÍTICA -->
<section class="analitica-wrap">

  <!-- B1 — Cabecera + tarjetas — estilo unificado con enemigos -->
  <div class="analitica-b1">
    <div class="vertical-container">

      <!-- Cabecera estilo s-ana -->
      <div class="b1-header">
        <div class="lbl" style="color:var(--enemigos-texto-2,#f97316);">Análisis</div>
        <h2 class="h2" style="color:var(--enemigos-texto-1,#ffffff);font-family:'Sora',sans-serif;font-size:clamp(1.7rem,3.5vw,2.7rem);font-weight:800;line-height:1.1;letter-spacing:-0.03em;margin-bottom:14px;">Qué exige alguien obligado<br>a comprar una baliza.</h2>
        <p class="lead" style="color:var(--enemigos-texto-1,#ffffff);opacity:.55;margin-bottom:48px;">Que funcione el día que la necesita. Que no cueste una fortuna mantenerla.</p>
      </div>

      <div class="b1-dual">
        <div class="b1-col">
          <div class="b1-card" data-b1="funciona">
            <div class="b1-card-bg" style="background-image:url('https://balizas.pro/img/cms/verticales/balizasfuncionando.jpg');"></div>
            <span class="b1-label b1-label-funciona">QUE FUNCIONE</span>
          </div>
        </div>
        <div class="b1-col">
          <div class="b1-card" data-b1="coste">
            <div class="b1-card-bg" style="background-image:url('https://balizas.pro/img/cms/verticales/balizassulfatadaguantera.jpg');"></div>
            <span class="b1-label b1-label-coste">QUE NO CUESTE</span>
          </div>
        </div>
      </div>

      <div id="b1-modal-funciona" class="b1-modal">
        <div class="b1-modal-box">
          <div class="b1-modal-close" data-b1-close>&#x2715;</div>
          <div class="b1-intro"><strong>La simple homologación no supone ninguna garantía de seguridad vial.</strong><br>El día que se necesita, la baliza tiene que responder.</div>
          <ul class="b1-list">
            <li class="b1-item">
              <div class="b1-item-t">a) Que se vea.</div>
              <div class="b1-item-b">La homologación permite desde <strong>40 candelas</strong>. En condiciones reales de tráfico, eso suele ser insuficiente.</div>
              <div class="blnz-embed">
                <div class="blnz-embed-head">
                  <div class="blnz-embed-title">Iluminación real comparada</div>
                  <div class="blnz-embed-sub">Hay balizas que iluminan <strong>6–7 veces más</strong> que la mayoría de modelos homologados. De hecho, más del 95% de las balizas homologadas no reportan candelas o se limitan a &gt;40 candelas.</div>
                </div>
                <div class="fuente-jef">Fuente: <strong>Carrusel de balizas ordenadas de menos a más candelas. Candelas analizadas en el estudio de CTAG para Netum (Help Flash)</strong> · <a href="https://eolo.hosting.augure.com/Augure_Eolo/r/ContenuEnLigne/Download?id=B130787E-D46F-4FAE-9346-879CD605F57B&filename=20251112%20Informe%20de%20medidas%2011%20balizas%20V16.pdf" target="_blank">Ver informe técnico</a></div>
                <div id="lumiScroll" class="lumi-scroll"></div>
                <div class="lumi-arrows">
                  <button class="lumi-arrow left" aria-label="Anterior">&#x2039;</button>
                  <button class="lumi-arrow right" aria-label="Siguiente">&#x203a;</button>
                </div>
                <div class="lumi-scale">
                  <span class="lumi-left">&gt; 40 cd</span>
                  <span class="lumi-line"></span>
                  <span class="lumi-right">&gt; 200 cd</span>
                </div>
              </div>
            </li>
            <li class="b1-item"><div class="b1-item-t">b) Que se encienda.</div><div class="b1-item-b"><strong>Si las pilas están descargadas, la baliza no funciona.</strong></div></li>
            <li class="b1-item"><div class="b1-item-t">c) Que conecte con la DGT.</div><div class="b1-item-b">Si no transmite su posición al sistema DGT 3.0, <strong>legalmente no funciona (sanción o multa)</strong>.</div></li>
            <li class="b1-item"><div class="b1-item-t">d) Que siga funcionando con el paso del tiempo.</div><div class="b1-item-b"><strong>Debe hacerlo dentro de 5, 8 o 12 años</strong>, soportando las temperaturas extremas que se dan en gran parte de España.</div></li>
          </ul>
        </div>
      </div>

      <div id="b1-modal-coste" class="b1-modal">
        <div class="b1-modal-box">
          <div class="b1-modal-close" data-b1-close>&#x2715;</div>
          <div class="b1-intro">El precio se ve el primer día.<br>El coste real aparece durante los próximos años. <strong>TCO (Total Cost of Ownership) a 12 años.</strong></div>
          <ul class="b1-list">
            <li class="b1-item">
              <div class="b1-item-t">a) Precio.</div>
              <div class="b1-item-b">Adjuntamos un carrusel de precios actuales de venta en tienda, ordenados de menor a mayor. Incluimos la estimación de coste de mantenimiento (TCO 12 años).</div>
              <div class="blnz-iframe-wrap price-carousel">
                <div id="price-container" class="iframe-container">
                  <p>El carrusel de precios se cargará al abrir este pop-up</p>
                </div>
                <button class="price-arrow left" aria-label="Anterior">&#x2039;</button>
                <button class="price-arrow right" aria-label="Siguiente">&#x203a;</button>
              </div>
            </li>
            <li class="b1-item"><div class="b1-item-t">b) Pilas y reposiciones.</div><div class="b1-item-b">Cuando se descargan, la baliza no se enciende, lo que supone riesgo de sanción o multa.</div></li>
            <li class="b1-item"><div class="b1-item-t">c) Calor y sulfatación.</div><div class="b1-item-b">El calor acelera la degradación química. En la guantera de un vehículo se alcanzan frecuentemente temperaturas superiores a los 60 grados.</div></li>
            <li class="b1-item"><div class="b1-item-t">d) Multas.</div><div class="b1-item-b">Si no funciona, la sanción es real.</div></li>
          </ul>
        </div>
      </div>

    </div>
  </div>

  <!-- B2 — Calidad y Coste (columnas texto) -->
  <div class="analitica-b2">
    <div class="vertical-container">
      <section class="iframe-contexto">
        {include file='module:iqitelementor/views/templates/widgets/customtpls/analisis-calidad-coste.tpl'}
      </section>
    </div>
  </div>

</section>

<!-- ═══════════════════════════════════════════════════════════ -->
<!-- S1 · ANÁLISIS — LOS DOS GRANDES ENEMIGOS                   -->
<!-- ═══════════════════════════════════════════════════════════ -->
<section class="sec s-ana" id="analisis">
  <div class="si">
    <div class="lbl">Análisis</div>
    <h2 class="h2">Los dos grandes enemigos<br>de las balizas en España.</h2>
    <p class="lead" style="margin-bottom:14px;">Un dispositivo que debería reforzar la seguridad vial y que incluso aplaude la Unión Europea.</p>
    <!-- EL ENLACE HA SIDO ELIMINADO -->
    <div style="margin-bottom:44px;"></div>

    <div class="fichas">
      <!-- FICHA 1: DGT -->
      <div class="ficha">
        <span class="ficha-num">01</span>
        <div class="ficha-top">
          <div class="ficha-logo">
            <img src="https://balizas.pro/img/cms/dgt2.png" alt="DGT" onerror="this.style.display='none';this.parentNode.innerHTML='<span style=\'font-size:2rem\'>🚦</span>';">
          </div>
          <div>
            <div class="ficha-ttl">La Dirección General de Tráfico</div>
            <div class="ficha-sub2">El origen del problema</div>
          </div>
        </div>
        <div class="ficha-body">
          La DGT ha fijado un mínimo de homologación de tan solo <strong style="color:rgba(255,255,255,.8);">40 candelas</strong> — una potencia luminosa que resulta prácticamente invisible bajo la luz del sol. El 95% de las balizas del mercado ha aprobado justamente por ese mínimo. Solo unas pocas han apostado por <strong style="color:var(--enemigos-texto-2);">más de 200 candelas</strong>, las únicas con visibilidad real de día.<br><br>
          Desgraciadamente, esta iniciativa aparentemente beneficiosa se ha vuelto en su propia contra una vez confirmados los bajísimos estándares de calidad. 40 candelas son escasas para lo que pretende ser una señal luminosa para salvar vidas.
        </div>
        <span class="ficha-tag">📊 95% del mercado: solo 40 candelas</span>
      </div>

      <!-- FICHA 2: CALOR -->
      <div class="ficha">
        <span class="ficha-num">02</span>
        <div class="ficha-top">
          <div class="ficha-logo">
            <img src="https://balizas.pro/img/cms/sol.png" alt="Calor" onerror="this.style.display='none';this.parentNode.innerHTML='<span style=\'font-size:2rem\'>☀️</span>';">
          </div>
          <div>
            <div class="ficha-ttl">El calor extremo en España</div>
            <div class="ficha-sub2">El enemigo invisible</div>
          </div>
        </div>
        <div class="ficha-body">
          Al tratarse de un dispositivo que funciona a pilas, el principal enemigo en España es el calor extremo. Esta baliza dormirá en la guantera de un coche los próximos 12 años. En España hay provincias donde durante <strong style="color:rgba(255,255,255,.8);">más de 90 días al año se alcanzan +65°C en la guantera</strong>. Esto provoca:
        </div>
        <div class="calor-grid">
          <div class="calor-item">
            <div class="calor-ico">🔋</div>
            <div class="calor-lbl">Descarga de pilas</div>
            <div class="calor-val">Pila descargada = multa cuando más se necesita la baliza</div>
          </div>
          <div class="calor-item bad">
            <div class="calor-ico">⚠️</div>
            <div class="calor-lbl">Sulfatación</div>
            <div class="calor-val">Fugas y pérdidas en los contactos. Daño irreversible sin señal externa</div>
          </div>
        </div>
        <div class="tbar-wrap"><div class="tbar" id="tbar"></div></div>
        <div class="tbar-labels"><span>20°C · Invierno</span><span>65°C+ · Guantera verano</span></div>
        <span class="ficha-tag">⚠️ Riesgo silencioso · Indetectable</span>
      </div>
    </div>
  </div>
</section>

<!-- ======================================
     POR QUÉ HEMOS ELEGIDO
====================================== -->
<section class="por-que-elegido-wrap product-theme">

  <!-- Banda cabecera: ancho completo, gradiente canal→PM, mismo tamaño que decision-final -->
  <div class="elegido-banda-header">
    <p class="elegido-banda-label">★ Elegido por nosotros ★</p>
    <img id="elegido-logo" class="elegido-banda-logo" src="" alt="Logo producto">
    <h2 class="elegido-banda-titulo" id="elegido-titulo">Por qué hemos elegido distribuir GeoBlueShield49</h2>
  </div>

  <div class="vertical-container">
    <div class="elegido-header">
      <h3 class="section-title">Conclusión objetiva tras analizar calidad y coste</h3>
      <p class="section-sub">La única baliza que lidera ambos criterios simultáneamente.</p>
      <div class="hr-soft"></div>
    </div>

    <div class="elegido-grid">
      <div class="elegido-card calidad">
        <div class="elegido-card-header">
          <div class="rank-arrow calidad">CALIDAD <span id="rank-calidad">1</span></div>
          <h3 id="elegido-h3-calidad">La baliza más sólida del mercado</h3>
        </div>
        <div class="elegido-card-body">
          <ul id="liderazgo-calidad-list"></ul>
          <div class="elegido-conclusion" id="elegido-conclusion-calidad">
            La baliza más sólida en rendimiento real.
          </div>
        </div>
      </div>

      <div class="elegido-card coste">
        <div class="elegido-card-header">
          <div class="rank-arrow coste">COSTE <span id="rank-coste">1</span></div>
          <h3 id="elegido-h3-coste">El menor coste real a 12 años</h3>
        </div>
        <div class="elegido-card-body">
          <p class="coste-intro" id="coste-intro">
            El coste real no depende del precio de compra.
            Depende del funcionamiento y la reposición de pilas.
          </p>
          <div class="coste-grid" id="elegido-coste-grid"></div>
          <div class="coste-solucion" id="coste-solucion"></div>
          <p class="coste-conclusion" id="coste-conclusion"></p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ======================================
     DECISIÓN FINAL
====================================== -->
<section class="decision-final product-theme">
  <div class="decision-titulo-editorial">
    <p class="decision-editorial-label">AHORA DECIDE</p>
    <h2 class="decision-editorial-titulo">Cuánto te merece la pena pagar hoy para estar cubierto los próximos 12 años</h2>
    <p class="decision-editorial-sub">Precio inicial · Coste real · Diferencia real entre opciones</p>
  </div>

  <div class="decision-grid">
    <div class="decision-row decision-row-bills">
      <div class="decision-card decision-bill-card bill-left">
        <p class="bill-titulo-seccion">Precio de compra</p>
        <div class="bill-caption-top">
          <span class="bill-tag bill-tag-entry">Producto de Entrada</span>
        </div>
        <img src="https://balizas.pro/img/cms/verticales/20y10.png" class="bill-img" alt="Billetes producto entrada">
        <p class="bill-desc">Más reposiciones · Mayor riesgo de sulfatación · Coste real más alto</p>
      </div>
      <div class="decision-card decision-bill-card bill-right">
        <p class="bill-titulo-seccion">Precio de compra</p>
        <div class="bill-caption-top">
          <span class="bill-tag bill-tag-premium" id="bill-nombre-premium">GeoBlueShield49</span>
        </div>
        <img src="https://balizas.pro/img/cms/verticales/20y10y5.png" class="bill-img" alt="Billetes producto premium">
        <p class="bill-desc">Solo 3 reposiciones · Pila Energizer premium · Funda térmica EVA incluida</p>
      </div>
    </div>

    <div class="decision-row">
      <div class="decision-card decision-max">
        <div class="decision-header">
          <div class="decision-header-text">
            <h3>Coste previsto a 12 años</h3>
            <span class="decision-chip-provincia" id="chip-provincia-max">—</span>
          </div>
          <img class="decision-mini-img" src="" alt="">
        </div>
        <div class="decision-tco decision-tco-red">
          <span id="df-max-tco">—</span> €
        </div>
        <div class="decision-breakdown decision-breakdown-big">
          <div>
            <span>Reposiciones previstas</span>
            <strong id="max-repos">—</strong>
          </div>
          <div>
            <span>Coste cambio pilas</span>
            <strong><span id="max-cambio-pilas">—</span> €</strong>
          </div>
          <div>
            <span>Riesgo sulfatación 3 años</span>
            <strong><span id="max-sulf-3">—</span> %</strong>
          </div>
          <div>
            <span>Riesgo sulfatación 12 años</span>
            <strong><span id="max-sulf-12">—</span> %</strong>
          </div>
        </div>
      </div>

      <div class="decision-card decision-geo">
        <div class="decision-header">
          <div class="decision-header-text">
            <h3 id="geo-marca-modelo">Coste previsto GeoBlueShield49</h3>
            <span class="decision-chip-provincia" id="chip-provincia-geo">—</span>
          </div>
          <img class="decision-mini-img" src="" alt="">
        </div>
        <div class="decision-tco decision-tco-blue">
          <span id="df-geo-tco">—</span> €
        </div>
        <div class="decision-breakdown decision-breakdown-big">
          <div>
            <span>Reposiciones previstas</span>
            <strong id="geo-repos">—</strong>
          </div>
          <div>
            <span>Coste cambio pilas</span>
            <strong><span id="geo-cambio-pilas">—</span> €</strong>
          </div>
          <div>
            <span>Riesgo sulfatación 3 años</span>
            <strong><span id="geo-sulf-3">—</span> %</strong>
          </div>
          <div>
            <span>Riesgo sulfatación 12 años</span>
            <strong><span id="geo-sulf-12">—</span> %</strong>
          </div>
        </div>
      </div>
    </div>

    <div class="decision-row decision-row-clima-compra">
      <div class="decision-card decision-clima">
        <div class="clima-header">
          <div class="clima-icon">☀️</div>
          <div class="clima-header-text">
            <h4>Condiciones térmicas</h4>
            <p class="clima-sub">Impacto real sobre vida útil y riesgo de sulfatación</p>
          </div>
          <span class="decision-chip-provincia" id="df-provincia-clima">—</span>
        </div>

        <div class="clima-grid">
          <div class="clima-col">
            <div class="clima-item">
              <span>Interior guantera extrema</span>
              <strong id="clima-guantera">—</strong>
            </div>
            <div class="clima-item">
              <span>Máxima anual</span>
              <strong id="clima-max-anual">—</strong>
            </div>
            <div class="clima-item">
              <span>Media anual</span>
              <strong id="clima-media">—</strong>
            </div>
            <div class="clima-item">
              <span>Mínima anual</span>
              <strong id="clima-min">—</strong>
            </div>
          </div>
          <div class="clima-col">
            <div class="clima-item">
              <span>Días >30°C</span>
              <strong id="clima-dias30">—</strong>
            </div>
            <div class="clima-item">
              <span>Factor provincia</span>
              <strong id="clima-factor-prov">—</strong>
            </div>
            <div class="clima-item">
              <span>Multiplicador total fuga</span>
              <strong id="clima-mult-fuga">—</strong>
            </div>
            <div class="clima-item">
              <span>Reducción vida útil (%)</span>
              <strong id="clima-reduccion">—</strong>
            </div>
          </div>
        </div>

        <div class="clima-fuentes">
          Fuente: AEMET · Modelización térmica interior vehículo · 
          Base técnica battery_types y provincias
        </div>
      </div>

      <div class="card-oro">
        <div class="podium-img-container">
          <img src="" class="podium-img" id="podium-img-final" alt="">
        </div>
        <h3 id="final-titulo">GeoBlueShield49</h3>
        <div class="precio-amigos-texto" id="precio-amigos-texto-final">
          Precio amigos de <span class="slug-highlight" id="slug-display">—</span>
        </div>
        <p class="precio">
          <span id="geo-final-price"></span>
          <span>IVA incluido</span>
        </p>
        <a id="final-buy" href="#" class="btn-vertical">
          Comprar ahora
        </a>
        <p id="detalle-final" class="detalle">
          Incluye funda térmica EVA (–15/20 °C) y pila 9V premium desconectable.
        </p>
        <div class="donacion-bloque" id="donacion-bloque">
          <p class="donacion-titulo" id="donacion-titulo">Comprometidos con tu comunidad</p>
          <p class="donacion-texto" id="donacion-texto">
            Con cada baliza vendida a través de este canal, <strong id="donacion-canal-nombre">este canal</strong>
            destina una contribución solidaria a <strong id="donacion-destino">—</strong>.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CABECERA COMPARATIVA -->
<section class="section-pad-sm comparativa-header">
  <div class="comparativa-branding">
    <img src="https://balizas.pro/comparador/images/logo-200x60.png" alt="balizas.pro" class="comparativa-logo">
  </div>
  <p class="comparativa-nota-canal" id="comparativa-nota-canal" style="display:none;"></p>
  <h2 class="section-title" id="comparativa-titulo">
    Comparativa real por tienda y ranking calidad/coste
  </h2>
  <p class="section-sub">
    Datos de coste para: <strong id="comparativa-provincia">—</strong>
    Precio actual · Coste total estimado (12 años) · Decisión informada
  </p>
  <div class="hr-soft"></div>
</section>

<!-- COMPARADOR TIENDAS — integrado v3 -->
<section class="section-comparador-tiendas comp-wrap-section">

<style>
:root {
  --v-primary:   #002e7a;
  --v-accent:    #e63b7a;
  --p-primary:   #1e3a8a;
  --p-accent:    #f59e0b;
  --v-btn-bg:    #e63b7a;
  --v-btn-text:  #ffffff;
  --font-main:   'Sora', system-ui, sans-serif;
  --c-riesgo:    #dc2626;
  --c-coste:     #2563eb;
  --c-calidad:   #f97316;
  --c-muted:     #64748b;
  --c-text:      #0f172a;
  --c-card:      #ffffff;
  --c-border:    #e2e8f0;
  --radius:      16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-main);background:transparent;color:var(--c-text);-webkit-font-smoothing:antialiased;}

/* =============================================
   COMPARADOR TIENDAS — estilos integrados v3
   Hereda tokens del sistema: --v-primary, --v-accent, --p-primary, --p-accent
   Fuente: Sora (ya cargada en el TPL)
============================================= */

:root {
  --c-riesgo:   #dc2626;
  --c-coste:    #2563eb;
  --c-calidad:  #f97316;
  --c-muted:    #64748b;
  --c-text:     #0f172a;
  --c-card:     #ffffff;
  --c-border:   #e2e8f0;
  --comp-radius: 16px;
}

/* ── Cabecera fusionada ────────────────────── */
.comp-cabecera-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 36px 20px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.comp-cabecera-izq {
  flex-shrink: 0;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo baliza con animación float */
.comp-logo-baliza-anim {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 8px 20px rgba(var(--v-primary-rgb,0,46,122), 0.20));
  animation: compBalizaFloat 3s ease-in-out infinite;
}

/* Logo canal: mismo contenedor, sin animación float */
.comp-logo-canal {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(var(--v-primary-rgb,0,46,122), 0.12);
}

@keyframes compBalizaFloat {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50%       { transform: translateY(-8px) rotate(2deg); }
}

.comp-cabecera-der {
  flex: 1;
  min-width: 0;
}

.comp-nota-canal {
  font-size: 13px;
  font-weight: 700;
  color: var(--v-accent, #e63b7a);
  margin-bottom: 6px;
  font-family: var(--font-primary,'Sora',sans-serif);
  letter-spacing: 0.02em;
}

.comp-titulo-principal {
  font-family: var(--font-primary,'Sora',sans-serif);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(90deg,
    var(--v-primary,#002e7a) 0%,
    var(--p-primary,#1e3a8a) 40%,
    var(--v-accent,#e63b7a) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Info inline junto al chip ───────────────── */
.comp-sub-info {
  font-size: 11px;
  color: var(--c-muted, #64748b);
  font-family: var(--font-primary,'Sora',sans-serif);
  font-weight: 500;
  flex: 1;
  padding: 0 8px;
}

/* ── Wrapper sección — fondo continuo de la sección anterior ── */
.section-comparador-tiendas {
  padding: 0;
  background: #f8fafc; /* mismo fondo gris suave de la sección decisión final */
}

#comparador-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 32px;
}

/* ── Cabecera interna — OCULTA (ya está en comparativa-header) */
.comp-header { display: none; }

/* ── Chip provincia — reposicionado flotante sobre el scroll */
.comp-chip-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 4px;
  flex-wrap: wrap;
}

.comp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(var(--v-primary-rgb,0,46,122), .08);
  border: 1px solid rgba(var(--v-primary-rgb,0,46,122), .18);
  border-radius: 40px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 800;
  color: var(--v-primary, #002e7a);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--font-primary, 'Sora', sans-serif);
}

.comp-nav { display: flex; gap: 8px; }
.comp-nav button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  background: var(--c-card);
  color: var(--c-text);
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.comp-nav button:hover {
  background: var(--v-primary, #002e7a);
  color: #fff;
  border-color: var(--v-primary, #002e7a);
}

/* ── Scroll carrusel ───────────────────────── */
.comp-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 20px;
  -webkit-overflow-scrolling: touch;
}
.comp-scroll::-webkit-scrollbar { height: 4px; }
.comp-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.comp-scroll::-webkit-scrollbar-thumb { background: rgba(var(--v-primary-rgb,0,46,122),.25); border-radius: 10px; }

/* ── Card base ─────────────────────────────── */
.comp-card {
  flex: 0 0 252px;
  scroll-snap-align: start;
  border-radius: var(--comp-radius);
  background: var(--c-card);
  border: 1.5px solid var(--c-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font-primary, 'Sora', sans-serif);
}
.comp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* ── Card CANAL ────────────────────────────── */
.comp-card.canal {
  flex: 0 0 280px;
  border: 2px solid var(--v-primary, #002e7a);
  box-shadow: 0 6px 28px rgba(var(--v-primary-rgb,0,46,122),.15);
}
.comp-card.canal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--v-accent,#e63b7a), var(--v-primary,#002e7a));
  z-index: 2;
}

.canal-badge { display: none; } /* quitado — info ya visible en tienda/precio */

/* ── Media ─────────────────────────────────── */
.comp-media {
  height: 96px;
  background: #f8fafc;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  flex-shrink: 0;
  position: relative;
}
.comp-card.canal .comp-media {
  background: linear-gradient(135deg,rgba(var(--v-primary-rgb,0,46,122),.06),rgba(var(--v-accent-rgb,230,59,122),.04));
  height: 110px;
}
.comp-media img { max-height: 82px; max-width: 90px; object-fit: contain; }
.comp-card.canal .comp-media img { max-height: 96px; max-width: 105px; }

.cd-badge {
  position: absolute;
  bottom: 5px; left: 7px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .04em;
}
.comp-card.canal .cd-badge {
  background: linear-gradient(90deg,var(--v-primary,#002e7a),var(--p-primary,#1e3a8a));
}

/* ── Cuerpo ────────────────────────────────── */
.comp-body {
  padding: 12px 14px 13px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.comp-tienda {
  font-size: 13px; font-weight: 800;
  color: var(--c-text);
  line-height: 1.2; margin-bottom: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comp-card.canal .comp-tienda {
  font-size: 14px;
  background: linear-gradient(90deg, var(--v-primary,#002e7a), var(--v-accent,#e63b7a));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.comp-baliza {
  font-size: 10px; color: var(--c-muted);
  margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Precio ──────────────────────────────────── */
.comp-precio-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-muted); margin-bottom: 1px;
}
.comp-card.canal .comp-precio-label { color: var(--v-accent,#e63b7a); font-weight: 800; font-size: 9px; }
.comp-card.canal .comp-precio { font-size: 28px; font-weight: 900; color: var(--v-primary,#002e7a); letter-spacing: -.03em; }

.comp-precio {
  font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1;
  color: var(--c-text);
  margin-bottom: 1px;
}
.comp-precio.rojo { color: var(--c-text); } /* precio compra — neutro, no rojo */
.comp-precio.canal-c {
  color: var(--v-primary, #002e7a);
  font-size: 16px;
  -webkit-text-fill-color: unset;
}
.comp-pvp { font-size: 10px; color: var(--c-muted); text-decoration: line-through; margin-bottom: 4px; }

/* Bloque total desglosado ──────────────────── */
.comp-total {
  background: #f8fafc;
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 8px;
}
.comp-card.canal .comp-total {
  background: linear-gradient(135deg,rgba(var(--v-primary-rgb,0,46,122),.06),rgba(var(--p-accent-rgb,245,158,11),.05));
}

.comp-total-desglose { display: flex; flex-direction: column; gap: 2px; margin-bottom: 5px; }
.comp-total-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
}
.comp-total-line-label { color: var(--c-muted); font-weight: 500; }
.comp-total-line-val { font-weight: 700; color: var(--c-text); font-size: 12px; }
.comp-total-line-val.riesgo { color: var(--p-accent, var(--c-coste, #2563eb)); font-size: 12px; font-weight: 800; }

.comp-total-bottom {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--c-border);
  padding-top: 6px; margin-top: 3px;
}
.comp-total-num {
  font-size: 28px; font-weight: 900;
  color: var(--c-coste);
  letter-spacing: -.04em; line-height: 1;
}
.comp-card.canal .comp-total-num { color: var(--v-primary, #002e7a); }
.comp-total-tag { font-size: 8px; font-weight: 600; color: var(--c-muted); margin-top: 1px; }

/* Arrows ranking ──────────────────────────── */
.rank-arrow {
  width: 64px; height: 42px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; line-height: 1;
  clip-path: polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);
  flex-shrink: 0;
  font-family: var(--font-primary,'Sora',sans-serif);
}
.rank-arrow span { font-size: 16px; font-weight: 900; margin-top: 1px; }
.rank-arrow.calidad { background: var(--c-calidad); }
.rank-arrow.coste   { background: var(--c-coste); }

/* Valoración ──────────────────────────────── */
.comp-rate {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 7px;
}
.stars { position: relative; display: inline-block; font-size: 12px; letter-spacing: 1px; }
.stars .bg { color: #e5e7eb; }
.stars .fg { position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; color: #f59e0b; }
.comp-val-num { font-size: 11px; font-weight: 800; color: var(--c-text); }

/* Info filas ──────────────────────────────── */
.comp-info {
  border-top: 1px solid var(--c-border);
  padding-top: 7px; margin-top: auto; margin-bottom: 10px;
}
.comp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 0; font-size: 11px;
}
.comp-row-k { color: var(--c-muted); font-weight: 600; }

.pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.pill.fabrica      { background: #b6f2b6; color: #166534; }
.pill.ensamblaje   { background: #fff3b0; color: #713f12; }
.pill.distribucion { background: #ffc1c1; color: #7f1d1d; }
.pill.canal-f      { background: linear-gradient(90deg,#b6f2b6,#d1fae5); color: #166534; }

/* Botón ───────────────────────────────────── */
.comp-btn { display: none; } /* ocultar "Ver precio" en cards tienda */
.comp-card.canal .comp-btn {
  display: block; text-align: center;
  padding: 13px 14px; border-radius: 12px;
  background: var(--p-primary, #1e3a8a);
  color: var(--p-accent, #f59e0b);
  font-weight: 900; font-size: 14px;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  font-family: var(--font-primary,'Sora',sans-serif);
  box-shadow: 0 4px 18px rgba(var(--p-primary-rgb,30,58,138),.35);
  margin-top: auto;
  letter-spacing: -0.01em;
}
.comp-card.canal .comp-btn:hover { opacity: .88; transform: translateY(-2px); }

/* Divisor canal/resto ─────────────────────── */
.comp-divider {
  flex: 0 0 1.5px;
  background: linear-gradient(to bottom, transparent, var(--c-border), transparent);
  align-self: stretch; border-radius: 1px; margin: 6px 0;
}

/* Responsive ──────────────────────────────── */
@media (max-width: 640px) {
  .comp-card       { flex: 0 0 80vw; }
  .comp-card.canal { flex: 0 0 86vw; }
}