/*
Theme Name: Hello Elementor Child V2
Theme URI: https://bramexplus.com/
Description: Tema hijo personalizado para Bramex Plus basado en Hello Elementor. Incluye el sistema visual oficial y todos los componentes de marca.
Author: Bramex Plus
Author URI: https://bramexplus.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child-v2
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/


/* =========================================================
   BRAMEX PLUS — GLOBAL SITE CSS
   Sistema visual oficial · Versión limpia y ordenada
   Fecha: 22 abril 2026 · Revisión móvil

   ÍNDICE
   ─────────────────────────────────────────────────────────
    1.  Variables globales
    2.  Base global (reset + overflow control)
    3.  Tipografía
    4.  Eyebrows / Badges
    5.  Layout / Contenedores
    6.  Botones globales
    7.  Formularios globales
    8.  Cards / Bloques base
    9.  Notas / Avisos
   10.  Heroes globales
   11.  Bloques de contenido
   12.  Beneficios / Opciones / Panels
   13.  Timelines / Pasos (zig-zag)
   14.  Comparativas / Cajas de precio
   15.  FAQ (acordeón)
   16.  CTA final
   17.  Helpers
   18.  Comparator card wrapper
   19.  Ajustes Elementor
   20.  Hero light (v2)
   21.  Hero XL (v3)
   22.  Intro grid / Escenarios / Split panels (v2)
   23.  Cards 3 / Opciones / Split img / Nota inline (v3)
   24.  Coste cards (v3)
   25.  Hero stats / Comparador strip / Precios / Empresa (v4)
   26.  Factor cards / CTA trust (v4)
   27.  Trust pills / Intro cards / Steps row (v5)
   28.  Split media / Niveles / Contadores / Check cards (v5)
   29.  Hero dark / Extra blocks / Detail list (v6)
   30.  Anchor bar / Benefit cards / Coberturas / PKV tabla (home)
   31.  Proceso 5 pasos (home)
   32.  Hero fullscreen / Access cards / Reviews / Why (home nueva)
   33.  Header / Top bar / Mega menú
   34.  Contacto
   35.  Responsive — todos los breakpoints consolidados
          35.1  Breakpoint 1100px (tablet landscape)
          35.2  Breakpoint 1024px (tablet portrait — hero-fs + strip)
          35.3  Breakpoint  980px (ajustes hero global)
          35.4  Breakpoint  900px (contacto)
          35.5  Breakpoint  767px (móvil + fixes específicos)
          35.6  Breakpoint  480px (móvil pequeño)
   36.  Site Footer (4 columnas + legal + copyright)
   ========================================================= */


/* =========================================================
   1. VARIABLES GLOBALES
   ========================================================= */
:root{
  /* Colores marca */
  --bpx-white:#ffffff;
  --bpx-yellow:#ffb905;
  --bpx-navy:#1c244b;
  --bpx-grey:#595757;
  --bpx-grey-2:#686766;

  /* Bordes */
  --bpx-border:#e6e8ef;
  --bpx-border-2:#e7e7e7;

  /* Fondos suaves */
  --bpx-soft-bg:#f6f7fb;
  --bpx-soft-bg-2:#fbfbfd;
  --bpx-soft-yellow:#fff8e3;
  --bpx-soft-blue:#f3f5f8;

  /* Estados */
  --bpx-success-bg:#eef8f0;
  --bpx-success-text:#22663a;
  --bpx-warning-bg:#fff8e8;
  --bpx-warning-text:#8a5b00;
  --bpx-danger-bg:#fff4f1;
  --bpx-danger-border:#f2c7bd;
  --bpx-danger-text:#8f3d2f;

  /* Radios */
  --bpx-radius-input:14px;
  --bpx-radius-btn:16px;
  --bpx-radius-sm:18px;
  --bpx-radius-md:24px;
  --bpx-radius-lg:28px;
  --bpx-radius-xl:32px;

  /* Sombras */
  --bpx-shadow-sm:0 8px 24px rgba(16,24,40,0.06);
  --bpx-shadow-md:0 14px 35px rgba(16,24,40,0.10);
  --bpx-shadow-lg:0 20px 55px rgba(16,24,40,0.14);
  --bpx-shadow-xl:0 24px 80px rgba(12,18,44,0.24);

  /* Layout */
  --bpx-container:1200px;
  --bpx-container-narrow:860px;

  /* Transiciones */
  --bpx-transition:0.22s ease;
}


/* =========================================================
   2. BASE GLOBAL
   ========================================================= */
html{
  scroll-behavior:smooth;
  /* FIX MÓVIL: evitar scroll horizontal global causado por
     elementos que puedan desbordar el viewport (tablas, etc.) */
  overflow-x:hidden;
}

body{
  font-family:"Inter", sans-serif;
  font-size:16px;
  color:var(--bpx-grey);
  background:var(--bpx-white);
  line-height:1.6;
  /* FIX MÓVIL: refuerzo a html */
  overflow-x:hidden;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:var(--bpx-navy);
  text-decoration:none;
  transition:
    color var(--bpx-transition),
    background var(--bpx-transition),
    border-color var(--bpx-transition),
    box-shadow var(--bpx-transition);
}

a:hover,
a:focus{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font-family:inherit;
}

strong{
  color:var(--bpx-navy);
}

::selection{
  background:rgba(255,185,5,0.28);
  color:var(--bpx-navy);
}


/* =========================================================
   3. TIPOGRAFÍA
   ========================================================= */
h1,
h2,
h3,
h4,
h5,
h6{
  color:var(--bpx-navy);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.02em;
  margin:0 0 16px;
  /* FIX MÓVIL: permitir que títulos largos rompan palabra
     sin desbordar el contenedor */
  overflow-wrap:break-word;
  word-wrap:break-word;
}

h1{
  font-size:clamp(36px,5vw,56px);
  letter-spacing:-0.03em;
}

h2{
  font-size:clamp(30px,4vw,42px);
}

h3{
  font-size:clamp(22px,3vw,28px);
}

h4{
  font-size:20px;
}

p{
  margin:0 0 16px;
}

ul,
ol{
  margin:0 0 16px 20px;
}

li{
  margin-bottom:6px;
}

.bpx-lead{
  font-size:18px;
  line-height:1.75;
  color:var(--bpx-grey);
}

.bpx-title-xl{
  font-size:clamp(36px,5vw,58px);
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:800;
  color:var(--bpx-navy);
  margin:0 0 20px;
}

.bpx-title-lg{
  font-size:clamp(30px,4vw,42px);
  line-height:1.12;
  letter-spacing:-0.02em;
  font-weight:800;
  color:var(--bpx-navy);
  margin:0 0 18px;
}

.bpx-title-md{
  font-size:clamp(22px,3vw,30px);
  line-height:1.2;
  font-weight:800;
  color:var(--bpx-navy);
  margin:0 0 14px;
}

.bpx-subtitle{
  font-size:18px;
  line-height:1.75;
  color:var(--bpx-grey);
  margin:0;
}

.bpx-text-center{ text-align:center; }
.bpx-text-left{ text-align:left; }
.bpx-highlight{ color:#b67900; }


/* =========================================================
   4. EYEBROWS / BADGES
   ========================================================= */
.bpx-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,185,5,0.12);
  color:var(--bpx-navy);
  border:1px solid rgba(255,185,5,0.28);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0.03em;
  margin-bottom:18px;
}

.bpx-eyebrow-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--bpx-yellow);
  flex:0 0 auto;
}

.bpx-eyebrow-pill{
  display:inline-flex;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,185,5,0.13);
  border:1px solid rgba(255,185,5,0.30);
  color:var(--bpx-warning-text);
  font-size:12px;
  font-weight:700;
  margin-bottom:18px;
}

.bpx-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:11px;
  font-weight:800;
  letter-spacing:0.05em;
  text-transform:uppercase;
}


/* =========================================================
   5. LAYOUT / CONTENEDORES
   ========================================================= */
.bpx-wrap,
.bpx-container{
  width:100%;
  max-width:var(--bpx-container);
  margin:0 auto;
}

.bpx-wrap{
  padding-left:20px;
  padding-right:20px;
}

.bpx-container--narrow{
  max-width:var(--bpx-container-narrow);
}

.bpx-section{
  position:relative;
  padding:72px 0;
}

.bpx-section--tight{
  padding-top:48px;
  padding-bottom:48px;
}

.bpx-section--large{
  padding-top:96px;
  padding-bottom:96px;
}

.bpx-section--soft{
  background:var(--bpx-soft-bg);
}

.bpx-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  align-items:center;
}

.bpx-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.bpx-grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}


/* =========================================================
   6. BOTONES GLOBALES
   ========================================================= */
.bpx-btn,
a.bpx-btn,
button.bpx-btn,
.elementor-button,
.elementor-button:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:14px 22px;
  border-radius:var(--bpx-radius-btn);
  font-size:15px;
  font-weight:800;
  line-height:1;
  text-align:center;
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:
    background var(--bpx-transition),
    color var(--bpx-transition),
    border-color var(--bpx-transition),
    box-shadow var(--bpx-transition);
}

.bpx-btn:hover,
.bpx-btn:focus,
.bpx-btn:active,
a.bpx-btn:hover,
a.bpx-btn:focus,
a.bpx-btn:active,
.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active{
  text-decoration:none;
  transform:none;
  outline:none;
}

/* Primario — amarillo */
.bpx-btn-primary,
a.bpx-btn-primary{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  border-color:var(--bpx-yellow);
}

.bpx-btn-primary:hover,
.bpx-btn-primary:focus,
.bpx-btn-primary:active,
a.bpx-btn-primary:hover,
a.bpx-btn-primary:focus,
a.bpx-btn-primary:active,
.elementor a.bpx-btn-primary:hover,
.elementor a.bpx-btn-primary:focus{
  background:var(--bpx-navy);
  color:var(--bpx-white);
  border-color:var(--bpx-navy);
}

/* Secundario — blanco/borde navy */
.bpx-btn-secondary,
a.bpx-btn-secondary{
  background:var(--bpx-white);
  color:var(--bpx-navy);
  border-color:var(--bpx-navy);
}

.bpx-btn-secondary:hover,
.bpx-btn-secondary:focus,
.bpx-btn-secondary:active,
a.bpx-btn-secondary:hover,
a.bpx-btn-secondary:focus,
a.bpx-btn-secondary:active,
.elementor a.bpx-btn-secondary:hover,
.elementor a.bpx-btn-secondary:focus{
  background:var(--bpx-navy);
  color:var(--bpx-white);
  border-color:var(--bpx-navy);
}

/* Dark — navy */
.bpx-btn-dark,
a.bpx-btn-dark{
  background:var(--bpx-navy);
  color:var(--bpx-white);
  border-color:var(--bpx-navy);
}

.bpx-btn-dark:hover,
.bpx-btn-dark:focus,
.bpx-btn-dark:active,
a.bpx-btn-dark:hover,
a.bpx-btn-dark:focus,
a.bpx-btn-dark:active{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  border-color:var(--bpx-yellow);
}

/* Secundario sobre fondos oscuros */
.bpx-bg-navy .bpx-btn-secondary,
.bpx-bg-navy a.bpx-btn-secondary,
.bpx-card--dark .bpx-btn-secondary,
.bpx-card--dark a.bpx-btn-secondary,
.bpx-final-cta__box .bpx-btn-secondary,
.bpx-final-cta__box a.bpx-btn-secondary{
  background:transparent;
  color:var(--bpx-white);
  border-color:var(--bpx-white);
}

.bpx-bg-navy .bpx-btn-secondary:hover,
.bpx-bg-navy a.bpx-btn-secondary:hover,
.bpx-card--dark .bpx-btn-secondary:hover,
.bpx-card--dark a.bpx-btn-secondary:hover,
.bpx-final-cta__box .bpx-btn-secondary:hover,
.bpx-final-cta__box a.bpx-btn-secondary:hover{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  border-color:var(--bpx-yellow);
}

/* WooCommerce overrides */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  border-radius:var(--bpx-radius-btn);
  font-weight:800;
  padding:14px 22px;
}


/* =========================================================
   7. FORMULARIOS GLOBALES
   ========================================================= */
.bpx-form{
  display:grid;
  gap:18px;
}

.bpx-form-row{
  display:grid;
  gap:8px;
}

.bpx-form label{
  font-size:14px;
  font-weight:700;
  color:var(--bpx-navy);
}

.bpx-form input[type="text"],
.bpx-form input[type="email"],
.bpx-form input[type="tel"],
.bpx-form input[type="number"],
.bpx-form select,
.bpx-form textarea,
input[type="text"].bpx-input,
input[type="email"].bpx-input,
input[type="tel"].bpx-input,
input[type="number"].bpx-input,
select.bpx-input,
textarea.bpx-input{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-input);
  background:var(--bpx-white);
  color:var(--bpx-navy);
  outline:none;
  transition:
    border-color var(--bpx-transition),
    box-shadow var(--bpx-transition);
}

.bpx-form textarea,
textarea.bpx-input{
  min-height:140px;
  resize:vertical;
}

.bpx-form input:focus,
.bpx-form select:focus,
.bpx-form textarea:focus,
.bpx-input:focus{
  border-color:var(--bpx-yellow);
  box-shadow:0 0 0 4px rgba(255,185,5,0.15);
}


/* =========================================================
   8. CARDS / BLOQUES BASE
   ========================================================= */
.bpx-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:28px;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-card--soft{ background:var(--bpx-soft-bg); }

.bpx-card--yellow-soft{
  background:var(--bpx-soft-yellow);
  border-color:rgba(255,185,5,0.28);
}

.bpx-card--highlight{
  background:var(--bpx-white);
  border:2px solid var(--bpx-yellow);
}

.bpx-card--dark{
  background:var(--bpx-navy);
  border-color:transparent;
  color:rgba(255,255,255,0.88);
  box-shadow:var(--bpx-shadow-md);
}

.bpx-card--dark h2,
.bpx-card--dark h3,
.bpx-card--dark h4,
.bpx-card--dark strong{
  color:var(--bpx-white);
}

.bpx-card--hero{
  border-radius:var(--bpx-radius-lg);
  box-shadow:var(--bpx-shadow-md);
}

.bpx-icon-box{
  width:56px;
  height:56px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--bpx-soft-yellow);
  color:var(--bpx-navy);
  font-size:24px;
  margin-bottom:18px;
}

.bpx-card--dark .bpx-icon-box{
  background:var(--bpx-yellow);
}


/* =========================================================
   9. NOTAS / AVISOS
   ========================================================= */
.bpx-info-note{
  margin-top:20px;
  padding:16px 20px;
  background:rgba(255,185,5,0.08);
  border-left:3px solid var(--bpx-yellow);
  border-radius:0 12px 12px 0;
  font-size:14px;
  line-height:1.65;
  color:var(--bpx-grey);
}

.bpx-note{
  background:var(--bpx-soft-yellow);
  border-left:4px solid var(--bpx-yellow);
  border-radius:0 18px 18px 0;
  padding:18px 18px 18px 20px;
}

.bpx-note h3,
.bpx-note h4{
  margin:0 0 8px;
}

.bpx-note p:last-child{
  margin-bottom:0;
}

.bpx-warning-box{
  background:var(--bpx-danger-bg);
  border:1px solid var(--bpx-danger-border);
  border-left:6px solid #e67961;
  border-radius:20px;
  padding:24px 24px 24px 22px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-warning-icon{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:14px;
  background:#ffe3db;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.bpx-warning-box h3,
.bpx-warning-box h4{
  margin:0 0 8px;
  color:var(--bpx-danger-text);
}

.bpx-warning-box p{
  margin:0;
  color:var(--bpx-danger-text);
  line-height:1.75;
}


/* =========================================================
   10. HEROES GLOBALES
   ========================================================= */
.bpx-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,185,5,0.12) 0%, rgba(255,185,5,0) 32%),
    radial-gradient(circle at 88% 82%, rgba(28,36,75,0.08) 0%, rgba(28,36,75,0) 34%),
    linear-gradient(180deg,#ffffff 0%,#fbfbfd 100%);
  padding:88px 0 72px;
}

.bpx-hero__inner{
  width:100%;
  max-width:var(--bpx-container);
  margin:0 auto;
  padding:0 20px;
}

.bpx-hero__content{ max-width:700px; }
.bpx-hero__title{ margin-bottom:18px; }

.bpx-hero__text{
  font-size:18px;
  line-height:1.75;
  margin-bottom:28px;
}

.bpx-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:24px;
}

.bpx-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
  margin-top:24px;
  font-size:14px;
  color:var(--bpx-grey-2);
}

.bpx-hero__meta span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.bpx-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);
  gap:44px;
  align-items:center;
}

.bpx-hero__media{ position:relative; }

.bpx-hero__image{
  border-radius:var(--bpx-radius-xl);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-md);
  background:var(--bpx-white);
}

.bpx-hero__image img{
  width:100%;
  height:auto;
  object-fit:cover;
}

.bpx-hero-card{
  position:relative;
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-lg);
  padding:28px;
  box-shadow:var(--bpx-shadow-md);
  overflow:hidden;
}

.bpx-hero-card::before{
  content:"";
  position:absolute;
  top:-80px;
  right:-80px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,185,5,0.12);
  filter:blur(8px);
}

.bpx-hero-floating{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:20px;
  padding:18px;
  box-shadow:0 16px 36px rgba(20,30,60,0.12);
}

.bpx-hero-floating__icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bpx-soft-yellow);
  color:var(--bpx-navy);
  font-size:22px;
}

.bpx-hero-floating__title{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.3;
  font-weight:700;
  color:var(--bpx-navy);
}

.bpx-hero-floating__text{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--bpx-grey);
}

.bpx-proof{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:8px;
  flex-wrap:wrap;
}

.bpx-proof-avatars{
  display:flex;
  align-items:center;
}

.bpx-proof-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  margin-left:-10px;
  border:3px solid #fff;
  background:#dfe4ea;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(28,36,75,0.12);
}

.bpx-proof-avatar:first-child{ margin-left:0; }

.bpx-proof-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.bpx-proof-text{
  font-size:14px;
  color:var(--bpx-grey);
  margin:0;
}


/* =========================================================
   11. BLOQUES DE CONTENIDO
   ========================================================= */
.bpx-heading{
  max-width:860px;
  margin:0 auto 42px;
  text-align:center;
}

.bpx-heading--left{
  max-width:760px;
  margin:0 0 42px;
  text-align:left;
}

.bpx-seo{ padding:72px 0; }

.bpx-seo__box{
  width:100%;
  max-width:var(--bpx-container-narrow);
  margin:0 auto;
  padding:0 20px;
}

.bpx-seo__box h2,
.bpx-seo__box h3{ margin-top:28px; }

.bpx-seo__box p,
.bpx-seo__box li{
  font-size:17px;
  line-height:1.8;
  color:var(--bpx-grey);
}

.bpx-seo__box ul{ padding-left:18px; }

/* -------- Split genérico (2 columnas alternables) -------- */
.bpx-split{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:56px;
  align-items:center;
}

.bpx-split--reverse{
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
}

.bpx-figure{
  border-radius:var(--bpx-radius-lg);
  overflow:hidden;
  box-shadow:0 24px 54px rgba(20,30,60,0.10);
  background:var(--bpx-white);
}

.bpx-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.bpx-copy p{
  font-size:17px;
  line-height:1.78;
}

.bpx-copy p:last-child{ margin-bottom:0; }


/* =========================================================
   12. BENEFICIOS / OPCIONES / PANELS
   ========================================================= */
.bpx-benefit-card,
.bpx-option-card,
.bpx-panel{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:28px 24px;
  box-shadow:var(--bpx-shadow-sm);
  height:100%;
}

.bpx-benefit-card h3,
.bpx-option-card h3,
.bpx-panel h3{ margin-bottom:12px; }

.bpx-benefit-card p:last-child,
.bpx-option-card p:last-child,
.bpx-panel p:last-child{ margin-bottom:0; }

.bpx-panel--dark{
  background:var(--bpx-navy);
  color:rgba(255,255,255,0.88);
  border-color:transparent;
  box-shadow:var(--bpx-shadow-md);
}

.bpx-panel--dark h2,
.bpx-panel--dark h3,
.bpx-panel--dark h4,
.bpx-panel--dark strong{ color:var(--bpx-white); }

.bpx-feature-list{ display:grid; gap:16px; }

.bpx-feature-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:#f9fafc;
  border:1px solid #edf1f5;
  border-radius:18px;
  padding:18px;
}

.bpx-feature-item h4{
  margin:0 0 6px;
  font-size:17px;
  line-height:1.35;
  color:var(--bpx-navy);
  font-weight:700;
}

.bpx-feature-item p{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--bpx-grey);
}

.bpx-panel--dark .bpx-feature-item{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.09);
}

.bpx-panel--dark .bpx-feature-item h4{ color:var(--bpx-yellow); }
.bpx-panel--dark .bpx-feature-item p{ color:rgba(255,255,255,0.84); }

.bpx-feature-icon{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bpx-soft-yellow);
  color:var(--bpx-navy);
  font-size:18px;
  font-weight:700;
}

.bpx-panel--dark .bpx-feature-icon{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
}


/* =========================================================
   13. TIMELINES / PASOS (ZIG-ZAG)
   ---------------------------------------------------------
   Timeline clásico con línea central y pasos alternados
   izquierda/derecha. El CSS desktop mantiene el efecto
   zig-zag; el responsive (sección 35) lo convierte en una
   lista vertical limpia con número + contenido seguidos.
   ========================================================= */
.bpx-timeline{
  position:relative;
  max-width:920px;
  margin:0 auto;
  padding-top:10px;
}

.bpx-timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:#dfe5ee;
  transform:translateX(-50%);
}

.bpx-step{
  position:relative;
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  gap:24px;
  align-items:center;
  margin-bottom:28px;
}

.bpx-step:last-child{ margin-bottom:0; }

.bpx-step-content{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:22px;
  padding:24px;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-step-content h3{
  font-size:22px;
  line-height:1.2;
  color:var(--bpx-navy);
  margin:0 0 10px;
  font-weight:800;
}

.bpx-step-content p{
  font-size:16px;
  line-height:1.7;
  margin:0;
  color:var(--bpx-grey);
}

.bpx-step-dot{
  width:56px;
  height:56px;
  margin:0 auto;
  border-radius:50%;
  background:#fff;
  border:4px solid var(--bpx-navy);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
  color:var(--bpx-navy);
  position:relative;
  z-index:2;
  box-shadow:0 8px 18px rgba(28,36,75,0.12);
}

.bpx-step-highlight .bpx-step-dot{
  background:var(--bpx-yellow);
  border-color:#fff;
}

/* Ocultar contenidos vacíos (del lado opuesto en zig-zag) */
.bpx-step-right .bpx-step-content:first-child,
.bpx-step-left .bpx-step-content:last-child{
  visibility:hidden;
}


/* =========================================================
   14. COMPARATIVAS / CAJAS DE PRECIO
   ========================================================= */
.bpx-compare{ padding:72px 0; }

.bpx-compare__box{
  width:100%;
  max-width:var(--bpx-container);
  margin:0 auto;
  padding:32px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfbfb 100%);
  border:1px solid var(--bpx-border);
  border-radius:32px;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-compare__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:24px;
}

.bpx-compare__col{
  border:1px solid var(--bpx-border);
  border-radius:24px;
  padding:24px;
  background:var(--bpx-white);
}

.bpx-compare__col--highlight{
  background:rgba(255,185,5,0.10);
  border-color:rgba(255,185,5,0.35);
}

/* -------- Price cards -------- */
.bpx-price-grid{
  margin-top:24px;
  align-items:stretch;
}

.bpx-price-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-top:3px solid var(--bpx-yellow);
  border-radius:18px;
  padding:22px 20px;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-price-card__age{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--bpx-grey-2);
  margin:0 0 8px;
}

.bpx-price-card__range{
  font-size:26px;
  font-weight:800;
  color:var(--bpx-navy);
  line-height:1.1;
  margin:0 0 4px;
}

.bpx-price-card__unit{
  font-size:12px;
  color:var(--bpx-grey-2);
  margin:0;
}

.bpx-price-card__employee{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--bpx-border);
  font-size:12px;
  color:var(--bpx-grey);
}

.bpx-price-card__employee strong{
  display:block;
  font-size:16px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:2px;
}


/* =========================================================
   15. FAQ (ACORDEÓN)
   ---------------------------------------------------------
   La pregunta es un <button> en flexbox. Se han reforzado
   reglas clave para permitir que el texto rompa línea sin
   ser cortado (min-width:0 en el span, overflow-wrap, etc.)
   ========================================================= */
.bpx-faq{
  padding:72px 0;
  background:var(--bpx-soft-bg);
}

.bpx-faq__inner{
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:0 20px;
}

.bpx-faq-item{
  border:1px solid var(--bpx-border);
  border-radius:20px;
  overflow:hidden;
  background:var(--bpx-white);
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-faq-item + .bpx-faq-item{ margin-top:16px; }

.bpx-faq-question{
  width:100%;
  border:none;
  background:#fff;
  text-align:left;
  padding:22px 24px;
  display:flex;
  /* FIX MÓVIL: alinear arriba para que el icono "+"
     quede junto a la primera línea cuando hay multilínea */
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  font:inherit;
  /* FIX MÓVIL: permitir que el botón rompa línea */
  white-space:normal;
}

.bpx-faq-question,
.bpx-faq-question:visited,
.bpx-faq-question:hover,
.bpx-faq-question:focus,
.bpx-faq-question:active{
  background:#ffffff;
  color:var(--bpx-navy);
  text-decoration:none;
  outline:none;
  box-shadow:none;
}

.bpx-faq-question span{
  font-size:18px;
  line-height:1.5;
  font-weight:700;
  color:var(--bpx-navy);
  /* FIX MÓVIL: claves para permitir multilínea en flex */
  flex:1 1 auto;
  min-width:0;
  display:block;
  white-space:normal;
  overflow-wrap:break-word;
  word-wrap:break-word;
  hyphens:auto;
}

.bpx-faq-toggle{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:50%;
  background:var(--bpx-soft-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bpx-navy);
  font-size:18px;
  font-weight:800;
  flex-shrink:0;
  /* FIX MÓVIL: pegado arriba cuando la pregunta tiene varias líneas */
  margin-top:2px;
}

.bpx-faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
  background:#fafbfd;
}

.bpx-faq-answer-inner{
  padding:0 24px 24px;
  font-size:16px;
  line-height:1.8;
  color:var(--bpx-grey);
}

.bpx-faq-item.is-open .bpx-faq-answer{ max-height:2000px; }

.bpx-faq-item.is-open .bpx-faq-toggle{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
}

/* Variante dark */
.bpx-faq--dark{ background:transparent; }

.bpx-faq--dark .bpx-faq-item{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.10);
}

.bpx-faq--dark .bpx-faq-question,
.bpx-faq--dark .bpx-faq-question:hover,
.bpx-faq--dark .bpx-faq-question:focus,
.bpx-faq--dark .bpx-faq-question:active{
  background:transparent;
}

.bpx-faq--dark .bpx-faq-question span{ color:#fff; }
.bpx-faq--dark .bpx-faq-toggle{ background:rgba(255,255,255,0.10); color:#fff; }
.bpx-faq--dark .bpx-faq-answer{ background:rgba(255,255,255,0.04); }
.bpx-faq--dark .bpx-faq-answer-inner{ color:rgba(255,255,255,0.84); }

.bpx-faq--dark .bpx-faq-item.is-open .bpx-faq-toggle{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
}


/* =========================================================
   16. CTA FINAL
   ========================================================= */
.bpx-final-cta{ padding:80px 0; }

.bpx-final-cta__box{
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:44px 28px;
  text-align:center;
  border-radius:32px;
  box-shadow:-4px 0 32px rgba(28,36,75,0.10);
  border-left:1px solid var(--bpx-border);
}

.bpx-final-cta__box h2,
.bpx-final-cta__box h3{ margin-bottom:18px; }

.bpx-final-cta__box p{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

.bpx-final-cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:24px;
}

.bpx-final-cta__box--dark{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,185,5,0.18) 0%, rgba(255,185,5,0) 28%),
    linear-gradient(135deg,#1c244b 0%,#243164 100%);
  color:rgba(255,255,255,0.90);
}

.bpx-final-cta__box--dark h2,
.bpx-final-cta__box--dark h3,
.bpx-final-cta__box--dark strong{ color:#fff; }

.bpx-final-cta__box--dark p{ color:rgba(255,255,255,0.82); }

.bpx-final-cta__box--yellow{
  background:var(--bpx-yellow);
  color:rgba(28,36,75,0.90);
}

.bpx-final-cta__box--yellow h2,
.bpx-final-cta__box--yellow h3,
.bpx-final-cta__box--yellow strong{ color:var(--bpx-navy); }

.bpx-final-cta__box--yellow p{ color:rgba(28,36,75,0.86); }

.bpx-final-cta__box--light{
  background:linear-gradient(180deg,#ffffff 0%,#fbfbfd 100%);
  border:1px solid var(--bpx-border);
  color:var(--bpx-grey);
}


/* =========================================================
   17. HELPERS
   ========================================================= */
.bpx-bg-white{ background:var(--bpx-white); }
.bpx-bg-soft{ background:var(--bpx-soft-bg); }
.bpx-bg-soft-2{ background:var(--bpx-soft-bg-2); }

.bpx-bg-navy{
  background:var(--bpx-navy);
  color:rgba(255,255,255,0.90);
}

.bpx-bg-navy h1,
.bpx-bg-navy h2,
.bpx-bg-navy h3,
.bpx-bg-navy h4,
.bpx-bg-navy strong{ color:var(--bpx-white); }

.bpx-shadow-none{ box-shadow:none; }
.bpx-mb-0{ margin-bottom:0; }
.bpx-mx-auto{ margin-left:auto; margin-right:auto; }


/* =========================================================
   18. COMPARATOR CARD WRAPPER
   ========================================================= */
.bpx-comparator-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-xl);
  box-shadow:var(--bpx-shadow-md);
  overflow:hidden;
}

.bpx-comparator-card__intro{
  padding:52px 48px;
  border-right:1px solid var(--bpx-border);
}

.bpx-comparator-card__intro h2{ margin-bottom:12px; }

.bpx-comparator-card__form{
  padding:52px 48px;
  background:var(--bpx-soft-bg);
  display:flex;
  align-items:center;
  justify-content:center;
}


/* =========================================================
   19. AJUSTES ELEMENTOR
   ========================================================= */
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child,
.elementor-widget-text-editor ol:last-child{ margin-bottom:0; }

.elementor-button{ border-radius:var(--bpx-radius-btn); }

.elementor-button:hover,
.elementor-button:focus,
.elementor-button:active{ transform:none; }


/* =========================================================
   20. HERO LIGHT (v2)
   ========================================================= */
.bpx-hero-light{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 8% 10%, rgba(255,185,5,0.10) 0%, transparent 38%),
    radial-gradient(ellipse at 92% 85%, rgba(28,36,75,0.05) 0%, transparent 36%),
    linear-gradient(160deg,#fff8e3 0%,#f6f7fb 40%,#ffffff 100%);
  padding:72px 0 64px;
  border-bottom:1px solid var(--bpx-border);
}

.bpx-hero-light__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:48px;
  align-items:center;
  width:100%;
  max-width:var(--bpx-container);
  margin:0 auto;
  padding:0 20px;
}

.bpx-hero-light__content{}
.bpx-hero-light__media{ position:relative; }

.bpx-hero-img-placeholder{
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--bpx-radius-xl);
  background:linear-gradient(135deg,#e6f0fa 0%,#dce6f5 100%);
  border:1px solid #d8e4f2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  overflow:hidden;
}

.bpx-hero-img-placeholder img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:var(--bpx-radius-xl);
}

.bpx-hero-img-placeholder__label{
  font-size:11px;
  font-weight:600;
  color:#8899bb;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

.bpx-hero-img-badge{
  position:absolute;
  bottom:20px;
  left:20px;
  right:20px;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:18px;
  padding:16px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  box-shadow:0 12px 32px rgba(20,30,60,0.12);
  backdrop-filter:blur(4px);
}

.bpx-hero-img-badge__icon{
  width:40px;
  height:40px;
  border-radius:13px;
  background:var(--bpx-soft-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}

.bpx-hero-img-badge__title{
  font-size:14px;
  font-weight:800;
  color:var(--bpx-navy);
  line-height:1.3;
  margin:0 0 4px;
}

.bpx-hero-img-badge__text{
  font-size:13px;
  color:var(--bpx-grey);
  line-height:1.55;
  margin:0;
}

.bpx-hero-meta{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:18px;
}

.bpx-hero-meta__item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--bpx-grey-2);
}

.bpx-hero-meta__icon{
  width:30px;
  height:30px;
  border-radius:10px;
  background:var(--bpx-soft-bg);
  border:1px solid var(--bpx-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  flex-shrink:0;
}

.bpx-trust-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:18px;
}

.bpx-trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--bpx-grey-2);
}


/* =========================================================
   21. HERO XL (v3)
   ========================================================= */
.bpx-hero-xl{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 5% 5%, rgba(255,185,5,0.10) 0%, transparent 40%),
    linear-gradient(160deg,#fffbf0 0%,#f6f7fb 50%,#ffffff 100%);
  padding:72px 0 64px;
  border-bottom:1px solid var(--bpx-border);
}

.bpx-hero-xl__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:52px;
  align-items:center;
  width:100%;
  max-width:var(--bpx-container);
  margin:0 auto;
  padding:0 20px;
}

.bpx-hero-xl h1,
.bpx-hero-xl h2{
  font-size:clamp(30px,4.5vw,50px);
  font-weight:900;
  color:var(--bpx-navy);
  line-height:1.08;
  letter-spacing:-0.03em;
  margin-bottom:18px;
}

.bpx-hero-xl h1 .bpx-hero-xl__highlight,
.bpx-hero-xl h2 .bpx-hero-xl__highlight{
  color:var(--bpx-yellow);
}

.bpx-hero-xl__media{ position:relative; }

.bpx-hero-xl__img{
  width:100%;
  aspect-ratio:5/4;
  border-radius:var(--bpx-radius-xl);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-md);
  background:linear-gradient(135deg,#d8e8f5 0%,#c4d8ee 100%);
  border:1px solid #ccdaec;
}

.bpx-hero-xl__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.bpx-hero-xl__img-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.bpx-hero-xl__img-label{
  font-size:11px;
  font-weight:600;
  color:#8899bb;
  letter-spacing:0.05em;
  text-transform:uppercase;
}


/* =========================================================
   22. INTRO GRID / ESCENARIOS / SPLIT PANELS (v2)
   ========================================================= */
.bpx-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}

.bpx-intro-text p{
  font-size:16px;
  line-height:1.8;
  color:var(--bpx-grey);
  margin-bottom:14px;
}

.bpx-intro-text p:last-child{ margin-bottom:0; }

.bpx-keynote{
  background:var(--bpx-soft-yellow);
  border-left:4px solid var(--bpx-yellow);
  border-radius:0 20px 20px 0;
  padding:22px 24px;
}

.bpx-keynote__tag{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:800;
  color:var(--bpx-warning-text);
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.bpx-keynote p{
  font-size:15px;
  line-height:1.75;
  color:var(--bpx-grey);
  margin:0;
}

/* -------- Escenarios -------- */
.bpx-scen-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.bpx-scen-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:20px;
  padding:22px;
  display:flex;
  flex-direction:column;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-scen-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:14px;
  flex-shrink:0;
}

.bpx-scen-icon--success{ background:var(--bpx-success-bg); }
.bpx-scen-icon--warning{ background:var(--bpx-soft-yellow); }
.bpx-scen-icon--caution{ background:#fff4e8; }
.bpx-scen-icon--danger{ background:var(--bpx-danger-bg); }

.bpx-scen-card h3{
  font-size:16px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:8px;
  line-height:1.3;
}

.bpx-scen-card p{
  font-size:14px;
  color:var(--bpx-grey);
  line-height:1.65;
  margin-bottom:12px;
  flex:1;
}

.bpx-scen-example{
  background:var(--bpx-soft-bg);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
  color:var(--bpx-grey);
  line-height:1.6;
  margin-top:auto;
}

.bpx-scen-example strong{
  color:var(--bpx-navy);
  font-weight:700;
}

/* -------- Split panels (light + dark) -------- */
.bpx-split-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:stretch;
}

.bpx-split-panel{
  border-radius:24px;
  padding:32px;
}

.bpx-split-panel--light{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-split-panel--dark{ background:var(--bpx-navy); }
.bpx-split-panel--dark h3{ color:var(--bpx-white); }
.bpx-split-panel--dark p{ color:rgba(255,255,255,0.65); }

.bpx-split-panel h3{
  font-size:20px;
  font-weight:900;
  line-height:1.2;
  color:var(--bpx-navy);
  margin-bottom:8px;
}

.bpx-split-panel__sub{
  font-size:14px;
  line-height:1.7;
  margin-bottom:24px;
}

.bpx-panel-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bpx-panel-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius:14px;
  padding:14px;
}

.bpx-split-panel--light .bpx-panel-row{
  background:var(--bpx-soft-bg);
  border:1px solid var(--bpx-border-2);
}

.bpx-split-panel--dark .bpx-panel-row{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.10);
}

.bpx-panel-row__icon{
  width:36px;
  height:36px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}

.bpx-split-panel--light .bpx-panel-row__icon{ background:var(--bpx-soft-yellow); }
.bpx-split-panel--dark .bpx-panel-row__icon{ background:var(--bpx-yellow); }

.bpx-panel-row h4{
  font-size:14px;
  font-weight:800;
  margin-bottom:4px;
  line-height:1.3;
}

.bpx-panel-row p{
  font-size:14px;
  line-height:1.6;
  margin:0;
}

.bpx-split-panel--light .bpx-panel-row h4{ color:var(--bpx-navy); }
.bpx-split-panel--dark .bpx-panel-row h4{ color:var(--bpx-yellow); }
.bpx-split-panel--dark .bpx-panel-row p{ color:rgba(255,255,255,0.60); }


/* =========================================================
   23. CARDS 3 / OPCIONES / SPLIT IMG / NOTA INLINE (v3)
   ========================================================= */
.bpx-cards3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.bpx-card3{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:26px;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-card3__icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--bpx-soft-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin-bottom:16px;
}

.bpx-card3 h3{
  font-size:16px;
  font-weight:800;
  color:var(--bpx-yellow);
  margin-bottom:10px;
  line-height:1.3;
}

.bpx-card3 p{
  font-size:14px;
  color:var(--bpx-grey);
  line-height:1.7;
  margin:0;
}

/* -------- Opciones (3 cards con featured destacada) -------- */
.bpx-opciones{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.bpx-opcion{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:26px;
  box-shadow:var(--bpx-shadow-sm);
  position:relative;
}

.bpx-opcion--featured{
  border:2px solid var(--bpx-yellow);
  padding-top:40px;
}

.bpx-opcion__badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:10px;
  font-weight:800;
  padding:5px 14px;
  border-radius:999px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  white-space:nowrap;
}

.bpx-opcion h3{
  font-size:17px;
  font-weight:900;
  color:var(--bpx-navy);
  margin-bottom:6px;
  line-height:1.25;
}

.bpx-opcion__sub{
  font-size:13px;
  color:var(--bpx-warning-text);
  font-style:italic;
  margin-bottom:14px;
  line-height:1.5;
}

.bpx-opcion p{
  font-size:14px;
  color:var(--bpx-grey);
  line-height:1.7;
  margin-bottom:16px;
}

.bpx-opcion__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.bpx-opcion__list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  color:var(--bpx-grey);
  line-height:1.55;
}

.bpx-opcion__list li::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--bpx-yellow);
  flex-shrink:0;
  margin-top:5px;
}

/* -------- Split img (imagen + texto, lateral) -------- */
.bpx-split-img{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:start;
}

.bpx-split-img__media{
  border-radius:var(--bpx-radius-xl);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-md);
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#d8e8f5 0%,#c4d8ee 100%);
}

.bpx-split-img__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.bpx-split-img__media-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.bpx-split-img__media-label{
  font-size:11px;
  font-weight:600;
  color:#8899bb;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

.bpx-split-img__text p{
  font-size:16px;
  line-height:1.8;
  color:var(--bpx-grey);
  margin-bottom:14px;
}

.bpx-split-img__text p:last-child{ margin-bottom:0; }

/* -------- Nota inline amarilla -------- */
.bpx-nota-inline{
  background:var(--bpx-soft-yellow);
  border-left:4px solid var(--bpx-yellow);
  border-radius:0 16px 16px 0;
  padding:18px 22px;
  margin-top:20px;
}

.bpx-nota-inline h4{
  font-size:14px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:8px;
}

.bpx-nota-inline p{
  font-size:14px;
  color:var(--bpx-grey);
  line-height:1.75;
  margin:0;
}


/* =========================================================
   24. COSTE CARDS (v3)
   ========================================================= */
.bpx-costes{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.bpx-coste-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:22px;
  text-align:center;
  box-shadow:var(--bpx-shadow-sm);
  display:flex;
  flex-direction:column;
}

.bpx-coste-card--featured{
  border:2px solid var(--bpx-yellow);
  padding-top:36px;
  position:relative;
}

.bpx-coste-card__badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:10px;
  font-weight:800;
  padding:5px 12px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  white-space:nowrap;
}

.bpx-coste-card__icon{
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--bpx-soft-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin:0 auto 12px;
}

.bpx-coste-card--featured .bpx-coste-card__icon{ background:var(--bpx-soft-yellow); }

.bpx-coste-card__name{
  font-size:13px;
  font-weight:700;
  color:var(--bpx-navy);
  margin-bottom:6px;
  line-height:1.3;
}

.bpx-coste-card__value{
  font-size:26px;
  font-weight:900;
  color:var(--bpx-navy);
  line-height:1.1;
  margin-bottom:10px;
}

.bpx-coste-card--featured .bpx-coste-card__value{ color:var(--bpx-yellow); }

.bpx-coste-card p{
  font-size:15px;
  color:var(--bpx-grey-2);
  line-height:1.6;
  margin:0;
  margin-top:auto;
}


/* =========================================================
   25. HERO STATS / COMPARADOR STRIP / PRECIOS / EMPRESA (v4)
   ========================================================= */
.bpx-hero-stats{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:20px;
}

.bpx-hero-stat{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:14px;
  padding:12px 16px;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-hero-stat__value{
  display:block;
  font-size:18px;
  font-weight:900;
  color:var(--bpx-navy);
  line-height:1.1;
}

.bpx-hero-stat__label{
  display:block;
  font-size:11px;
  color:var(--bpx-grey-2);
  margin-top:3px;
  line-height:1.4;
}

/* -------- Comparador strip (banda navy CTA) -------- */
.bpx-comparador-strip{
  background:linear-gradient(135deg,var(--bpx-navy) 0%,#243164 100%);
  padding:56px 0;
}

.bpx-comparador-strip__inner{
  display:grid;
  grid-template-columns:1fr auto;
  gap:52px;
  align-items:center;
  width:100%;
  max-width:var(--bpx-container);
  margin:0 auto;
  padding:0 20px;
}

.bpx-comparador-strip__left h2{
  color:var(--bpx-white);
  font-size:clamp(20px,2.4vw,28px);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-0.02em;
  margin-bottom:10px;
}

.bpx-comparador-strip__left p{
  color:rgba(255,255,255,0.65);
  font-size:15px;
  line-height:1.7;
  margin:0;
}

.bpx-comparador-strip__box{
  background:var(--bpx-white);
  border-radius:22px;
  padding:28px 32px;
  min-width:320px;
  max-width:380px;
  box-shadow:0 20px 56px rgba(0,0,0,0.22);
}

.bpx-comparador-strip__box p{
  font-size:14px;
  color:var(--bpx-grey);
  line-height:1.65;
  margin-bottom:18px;
  text-align:center;
}

/* -------- Contadores en banda navy (3 cifras destacadas) -------- */
.bpx-counters-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}

.bpx-counter-item{
  text-align:center;
  padding:0 32px;
  border-right:1px solid rgba(255,255,255,0.12);
}

.bpx-counter-item:last-child{
  border-right:none;
}

.bpx-counter-value{
  font-size:52px;
  font-weight:900;
  color:var(--bpx-yellow);
  line-height:1;
  margin-bottom:8px;
  letter-spacing:-0.02em;
  /* FIX: no romper en líneas — el valor se mantiene entero */
  white-space:nowrap;
}

.bpx-counter-prefix,
.bpx-counter-suffix{
  font-size:36px;
  font-weight:900;
}

.bpx-counter-label{
  font-size:15px;
  color:rgba(255,255,255,0.65);
  line-height:1.4;
}

/* -------- Price cards v4 (rejilla 4 cols) -------- */
.bpx-price-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

.bpx-price-card__employee-section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--bpx-border);
}

.bpx-price-card__employee-label{
  font-size:11px;
  color:var(--bpx-grey-2);
  margin-bottom:3px;
}

.bpx-price-card__employee-value{
  font-size:15px;
  font-weight:800;
  color:var(--bpx-navy);
}

/* -------- Empresa split (texto + highlight 30%) -------- */
.bpx-empresa-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:center;
}

.bpx-empresa-text p{
  font-size:16px;
  line-height:1.8;
  color:var(--bpx-grey);
  margin-bottom:16px;
}

.bpx-empresa-text p:last-child{ margin-bottom:0; }

.bpx-empresa-highlight{
  background:var(--bpx-soft-yellow);
  border:1px solid rgba(255,185,5,0.30);
  border-radius:24px;
  padding:40px 32px;
  text-align:center;
}

.bpx-empresa-highlight__pct{
  font-size:80px;
  font-weight:900;
  color:var(--bpx-yellow);
  line-height:1;
  margin-bottom:10px;
  letter-spacing:-0.03em;
}

.bpx-empresa-highlight__label{
  font-size:15px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:10px;
}

.bpx-empresa-highlight__sub{
  font-size:13px;
  color:var(--bpx-grey);
  line-height:1.65;
}


/* =========================================================
   26. FACTOR CARDS / CTA TRUST (v4)
   ========================================================= */
.bpx-factores{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.bpx-factor{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:18px;
  padding:24px;
  box-shadow:var(--bpx-shadow-sm);
  display:flex;
  flex-direction:column;
}

.bpx-factor__num{
  font-size:35px;
  font-weight:800;
  color:var(--bpx-yellow);
  letter-spacing:0.07em;
  margin-bottom:10px;
}

.bpx-factor h3{
  font-size:20px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:8px;
  line-height:1.3;
}

.bpx-factor p{
  font-size:15px;
  color:var(--bpx-grey);
  line-height:1.65;
  margin-bottom:12px;
  flex:1;
}

.bpx-factor__tag{
  display:inline-flex;
  padding:4px 12px;
  border-radius:999px;
  background:var(--bpx-soft-bg);
  border:1px solid var(--bpx-border);
  font-size:14px;
  font-weight:700;
  color:var(--bpx-navy);
  align-self:flex-start;
}

/* -------- CTA trust (badges con checks) -------- */
.bpx-cta-trust{
  display:flex;
  gap:24px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:16px;
}

.bpx-cta-trust__item{
  font-size:13px;
  color:rgba(255,255,255,0.65);
  display:flex;
  align-items:center;
  gap:7px;
}

.bpx-cta-trust__item::before{
  content:'✓';
  color:var(--bpx-yellow);
  font-weight:800;
}


/* =========================================================
   27. TRUST PILLS / INTRO CARDS / STEPS ROW (v5)
   ========================================================= */
.bpx-trust-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.bpx-trust-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.85);
  border:1px solid var(--bpx-border);
  box-shadow:var(--bpx-shadow-sm);
  font-size:13px;
  font-weight:700;
  color:var(--bpx-navy);
}

/* -------- Hero badge dark (posicionado sobre imagen) -------- */
.bpx-hero-badge-dark{
  position:absolute;
  bottom:18px;
  left:18px;
  right:18px;
  background:rgba(28,36,75,0.92);
  border-radius:16px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow:0 18px 40px rgba(12,18,44,0.28);
}

.bpx-hero-badge-dark__text{ flex:1; }

.bpx-hero-badge-dark__title{
  font-size:13px;
  font-weight:800;
  color:var(--bpx-white);
  margin-bottom:4px;
  line-height:1.3;
}

.bpx-hero-badge-dark__sub{
  font-size:12px;
  color:rgba(255,255,255,0.75);
  line-height:1.45;
  margin:0;
}

.bpx-hero-badge-dark__tag{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:11px;
  font-weight:800;
  padding:7px 12px;
  border-radius:999px;
  white-space:nowrap;
  flex-shrink:0;
}

/* -------- Intro cards (3 cols) -------- */
.bpx-intro-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.bpx-intro-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:28px;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-intro-card--yellow{
  background:var(--bpx-soft-yellow);
  border-color:rgba(255,185,5,0.25);
}

.bpx-intro-card h3{
  font-size:17px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:12px;
  line-height:1.3;
}

.bpx-intro-card p{
  font-size:14px;
  color:var(--bpx-grey);
  line-height:1.75;
  margin:0;
}

/* -------- Steps row (3 cards con número circular) -------- */
.bpx-steps-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.bpx-step-row{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:24px;
  box-shadow:var(--bpx-shadow-sm);
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.bpx-step-row__num{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:16px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.bpx-step-row h4{
  font-size:14px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:8px;
  line-height:1.3;
}

.bpx-step-row p{
  font-size:13px;
  color:var(--bpx-grey);
  line-height:1.65;
  margin:0;
}


/* =========================================================
   28. SPLIT MEDIA / NIVELES / CONTADORES / CHECK CARDS (v5)
   ========================================================= */
.bpx-split-media{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  border-radius:var(--bpx-radius-xl);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-md);
}

.bpx-split-media__img{
  width:100%;
  min-height:400px;
  object-fit:cover;
  display:block;
}

.bpx-split-media__img-placeholder{
  width:100%;
  min-height:400px;
  background:linear-gradient(135deg,#d8e8f5,#c4d8ee);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.bpx-split-media__panel{
  background:var(--bpx-soft-bg);
  padding:40px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.bpx-split-media__panel h2{
  font-size:clamp(20px,2.6vw,30px);
  font-weight:900;
  color:var(--bpx-navy);
  line-height:1.15;
  letter-spacing:-0.02em;
  margin-bottom:16px;
}

.bpx-split-media__panel p{
  font-size:15px;
  color:var(--bpx-grey);
  line-height:1.8;
  margin-bottom:14px;
}

.bpx-split-media__panel p:last-of-type{ margin-bottom:24px; }

/* -------- Niveles (4 cards con featured/popular) -------- */
.bpx-niveles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.bpx-nivel{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:26px 22px;
  box-shadow:var(--bpx-shadow-sm);
  position:relative;
}

.bpx-nivel--popular{ border:2px solid var(--bpx-yellow); }

.bpx-nivel__badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:10px;
  font-weight:800;
  padding:5px 14px;
  border-radius:999px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  white-space:nowrap;
}

.bpx-nivel h3{
  font-size:22px;
  font-weight:900;
  color:var(--bpx-navy);
  margin-bottom:10px;
  line-height:1.1;
}

.bpx-nivel__desc{
  font-size:13px;
  color:var(--bpx-grey);
  line-height:1.65;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--bpx-border);
}

.bpx-nivel ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.bpx-nivel ul li{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:13px;
  color:var(--bpx-grey);
  line-height:1.5;
}

.bpx-nivel ul li::before{
  content:'•';
  color:var(--bpx-yellow);
  font-weight:900;
  flex-shrink:0;
  margin-top:1px;
}

/* -------- Grid note debajo de rejillas -------- */
.bpx-grid-note{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:22px 28px;
  margin-top:16px;
  font-size:14px;
  color:var(--bpx-grey);
  line-height:1.75;
  box-shadow:var(--bpx-shadow-sm);
}

/* -------- Counters split (panel navy + imagen) -------- */
.bpx-counters-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  border-radius:var(--bpx-radius-xl);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-md);
}

.bpx-counters-panel{
  background:var(--bpx-navy);
  padding:52px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:36px;
}

.bpx-counter{ text-align:left; }

.bpx-counter__value{
  font-size:52px;
  font-weight:900;
  color:var(--bpx-yellow);
  line-height:1;
  letter-spacing:-0.03em;
  margin-bottom:6px;
}

.bpx-counter__prefix{ font-size:36px; font-weight:900; }

.bpx-counter__label{
  font-size:15px;
  color:rgba(255,255,255,0.65);
  line-height:1.4;
}

.bpx-counters-img{
  width:100%;
  min-height:360px;
  object-fit:cover;
  display:block;
}

.bpx-counters-img-placeholder{
  width:100%;
  min-height:360px;
  background:linear-gradient(135deg,#d8e8f5,#c4d8ee);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* -------- Check cards (2 cols con icono check) -------- */
.bpx-check-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.bpx-check-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-md);
  padding:28px;
  box-shadow:var(--bpx-shadow-sm);
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.bpx-check-card__icon{
  width:36px;
  height:36px;
  border-radius:11px;
  background:var(--bpx-soft-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:900;
  color:var(--bpx-navy);
  flex-shrink:0;
}

.bpx-check-card h3{
  font-size:16px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:8px;
  line-height:1.3;
}

.bpx-check-card p{
  font-size:14px;
  color:var(--bpx-grey);
  line-height:1.7;
  margin:0;
}


/* =========================================================
   29. HERO DARK / EXTRA BLOCKS / DETAIL LIST (v6)
   ========================================================= */
.bpx-hero-dark{
  background:
    radial-gradient(ellipse at 15% 50%, rgba(255,185,5,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(255,255,255,0.04) 0%, transparent 40%),
    linear-gradient(160deg,#1c244b 0%,#0f1630 100%);
  padding:88px 0 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.bpx-hero-dark__inner{
  width:100%;
  max-width:var(--bpx-container-narrow);
  margin:0 auto;
  padding:0 20px;
  position:relative;
  z-index:1;
}

.bpx-hero-dark h1,
.bpx-hero-dark h2{
  font-size:clamp(30px,4.5vw,52px);
  font-weight:900;
  color:var(--bpx-white);
  line-height:1.08;
  letter-spacing:-0.03em;
  margin-bottom:20px;
}

.bpx-hero-dark h1 .bpx-hero-dark__highlight,
.bpx-hero-dark h2 .bpx-hero-dark__highlight{
  color:var(--bpx-yellow);
}

.bpx-hero-dark__text{
  font-size:18px;
  line-height:1.75;
  color:rgba(255,255,255,0.70);
  max-width:640px;
  margin:0 auto 32px;
}

.bpx-hero-dark__actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:48px;
}

/* Botón secundario en hero dark (sobre fondo oscuro) */
.bpx-hero-dark .bpx-hero-dark__actions .bpx-btn-secondary,
.bpx-hero-dark .bpx-hero-dark__actions a.bpx-btn-secondary{
  color:var(--bpx-navy);
  background:var(--bpx-white);
  border-color:var(--bpx-white);
}

.bpx-hero-dark .bpx-hero-dark__actions .bpx-btn-secondary:hover,
.bpx-hero-dark .bpx-hero-dark__actions a.bpx-btn-secondary:hover{
  color:var(--bpx-white);
  background:transparent;
  border-color:var(--bpx-white);
}

.bpx-hero-dark__extras{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.bpx-hero-dark__extra-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-radius:16px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--bpx-white);
  font-size:14px;
  font-weight:700;
}

.bpx-hero-dark__extra-pill span{ font-size:20px; }

/* -------- Exclusive badge -------- */
.bpx-exclusive-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 14px;
  border-radius:999px;
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:10px;
  font-weight:800;
  letter-spacing:0.07em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.bpx-exclusive-badge--white{
  background:rgba(255,255,255,0.15);
  color:var(--bpx-white);
}

/* -------- Extra blocks (imagen + contenido lateral alternable) -------- */
.bpx-extra-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  border-radius:var(--bpx-radius-xl);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-md);
  margin-bottom:32px;
}

.bpx-extra-block:last-child{ margin-bottom:0; }

.bpx-extra-block--reverse{ direction:rtl; }
.bpx-extra-block--reverse > *{ direction:ltr; }

.bpx-extra-block__img{
  width:100%;
  min-height:380px;
  object-fit:cover;
  object-position:center;
  display:block;
}

.bpx-extra-block__img-placeholder{
  width:100%;
  min-height:380px;
  background:linear-gradient(135deg,#d8e8f5 0%,#c4d8ee 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.bpx-extra-block__img-label{
  font-size:11px;
  font-weight:600;
  color:#8899bb;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

.bpx-extra-block__content{
  padding:44px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.bpx-extra-block--light .bpx-extra-block__content{ background:var(--bpx-white); }
.bpx-extra-block--soft .bpx-extra-block__content{ background:var(--bpx-soft-bg); }
.bpx-extra-block--navy .bpx-extra-block__content{ background:var(--bpx-navy); }

/* Textos en bloque navy — especificidad suficiente sin !important */
.bpx-extra-block--navy .bpx-extra-block__content h2,
.bpx-extra-block--navy .bpx-extra-block__content h3{
  color:var(--bpx-white);
}

.bpx-extra-block--navy .bpx-extra-block__content p{
  color:rgba(255,255,255,0.92);
}

.bpx-extra-block--navy .bpx-extra-block__content .bpx-detail-list--dark li{
  color:rgba(255,255,255,0.92);
}

.bpx-extra-block__icon{
  width:64px;
  height:64px;
  border-radius:20px;
  background:var(--bpx-soft-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin-bottom:20px;
  flex-shrink:0;
}

.bpx-extra-block--navy .bpx-extra-block__icon{ background:rgba(255,185,5,0.18); }

.bpx-extra-block__content h2{
  font-size:clamp(22px,2.6vw,30px);
  font-weight:900;
  color:var(--bpx-navy);
  line-height:1.15;
  letter-spacing:-0.02em;
  margin-bottom:14px;
}

.bpx-extra-block__content p{
  font-size:15px;
  line-height:1.8;
  color:var(--bpx-grey);
  margin-bottom:14px;
}

.bpx-extra-block__content p:last-of-type{ margin-bottom:20px; }

/* -------- Detail list (lista con icono cuadrado) -------- */
.bpx-detail-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bpx-detail-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.6;
}

.bpx-detail-list--light li{ color:var(--bpx-grey); }
.bpx-detail-list--dark li{ color:rgba(255,255,255,0.75); }

.bpx-detail-list__icon{
  width:22px;
  height:22px;
  border-radius:6px;
  background:var(--bpx-soft-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:var(--bpx-navy);
  flex-shrink:0;
  margin-top:1px;
}

.bpx-extra-block--navy .bpx-detail-list__icon{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
}


/* =========================================================
   30. ANCHOR BAR / BENEFIT CARDS / COBERTURAS / PKV TABLA (home)
   ---------------------------------------------------------
   La anchor bar se oculta en móvil (ver sección 35.4)
   La tabla PKV mantiene su ancho y permite scroll
   horizontal en móvil, con indicador visual
   ========================================================= */
.bpx-anchor-bar{
  background:var(--bpx-white);
  border-top:3px solid var(--bpx-yellow);
  border-bottom:1px solid var(--bpx-border);
  box-shadow:0 4px 20px rgba(16,24,40,0.07);
  position:sticky;
  top:0;
  z-index:100;
  width:100%;
}

.bpx-anchor-bar__inner{
  max-width:var(--bpx-container);
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
}

.bpx-anchor-bar__inner::-webkit-scrollbar{ display:none; }

.bpx-anchor-bar__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:14px 16px;
  font-size:13px;
  font-weight:700;
  color:var(--bpx-navy);
  white-space:nowrap;
  border-bottom:3px solid transparent;
  margin-bottom:-3px;
  transition:color .2s, border-color .2s;
  text-decoration:none;
}

.bpx-anchor-bar__link:hover,
.bpx-anchor-bar__link.is-active{
  color:var(--bpx-yellow);
  border-bottom-color:var(--bpx-yellow);
}

.bpx-anchor-bar__link span{ font-size:15px; }

/* -------- Benefits grid (3 cards grandes) -------- */
.bpx-benefits-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-bottom:20px;
}

.bpx-benefit-lg{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-lg);
  padding:32px 28px;
  box-shadow:var(--bpx-shadow-sm);
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s, transform .2s;
}

.bpx-benefit-lg:hover{
  box-shadow:var(--bpx-shadow-md);
  transform:translateY(-3px);
}

.bpx-benefit-lg__icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--bpx-soft-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  margin-bottom:18px;
  flex-shrink:0;
}

.bpx-benefit-lg h3{
  font-size:18px;
  font-weight:800;
  color:var(--bpx-navy);
  line-height:1.25;
  margin-bottom:12px;
}

.bpx-benefit-lg p{
  font-size:14px;
  line-height:1.75;
  color:var(--bpx-grey);
  margin:0 0 12px;
  flex:1;
}

.bpx-benefit-lg p:last-child{ margin-bottom:0; }

.bpx-benefit-lg__note{
  background:var(--bpx-soft-yellow);
  border-radius:12px;
  padding:14px 16px;
  margin-top:12px;
}

.bpx-benefit-lg__note p{
  font-size:13px;
  line-height:1.65;
  color:var(--bpx-navy);
  margin:0;
}

.bpx-benefit-lg__note ul{
  margin:6px 0 0 16px;
  padding:0;
}

.bpx-benefit-lg__note li{
  font-size:13px;
  color:var(--bpx-navy);
  font-weight:600;
  margin-bottom:4px;
}

/* -------- Benefits grid mediana (2 cards con icono lateral) -------- */
.bpx-benefits-grid-md{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.bpx-benefit-md{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-lg);
  padding:28px;
  box-shadow:var(--bpx-shadow-sm);
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.bpx-benefit-md__icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:var(--bpx-soft-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}

.bpx-benefit-md h3{
  font-size:16px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:8px;
  line-height:1.25;
}

.bpx-benefit-md p,
.bpx-benefit-md ul{
  font-size:14px;
  line-height:1.7;
  color:var(--bpx-grey);
  margin:0;
}

.bpx-benefit-md ul{ padding-left:16px; }
.bpx-benefit-md li{ margin-bottom:3px; }

/* -------- Coberturas grid (4 tarifas BASIC/SMART/PRO/MAX) -------- */
.bpx-coberturas-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:start;
}

.bpx-cobertura-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-lg);
  padding:28px 22px 24px;
  box-shadow:var(--bpx-shadow-sm);
  position:relative;
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s, transform .2s;
}

.bpx-cobertura-card:hover{
  box-shadow:var(--bpx-shadow-md);
  transform:translateY(-3px);
}

.bpx-cobertura-card--popular{
  border:2px solid var(--bpx-yellow);
  padding-top:36px;
}

.bpx-cobertura-card__badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:10px;
  font-weight:800;
  padding:5px 16px;
  border-radius:999px;
  white-space:nowrap;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.bpx-cobertura-card__name{
  font-size:24px;
  font-weight:900;
  color:var(--bpx-yellow);
  margin:0 0 6px;
  letter-spacing:-.01em;
}

.bpx-cobertura-card__desc{
  font-size:13px;
  color:var(--bpx-grey);
  line-height:1.6;
  margin:0 0 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--bpx-border);
  min-height:52px;
}

.bpx-cobertura-card__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}

.bpx-cobertura-card__list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  line-height:1.5;
  color:var(--bpx-grey);
  margin:0;
}

.bpx-cobertura-card__list li strong{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--bpx-navy);
  margin-bottom:1px;
}

.bpx-cobertura-card__list li .bpx-cob-icon{
  font-size:16px;
  flex-shrink:0;
  margin-top:1px;
}

.bpx-cobertura-card__cta{
  margin-top:20px;
  display:block;
  text-align:center;
  padding:11px 16px;
  border-radius:var(--bpx-radius-btn);
  background:var(--bpx-soft-yellow);
  color:var(--bpx-navy);
  font-size:13px;
  font-weight:700;
  transition:background .2s;
}

.bpx-cobertura-card__cta:hover{ background:var(--bpx-white); color:var(--bpx-navy); box-shadow:0 0 0 2px var(--bpx-navy) inset; }
.bpx-cobertura-card--popular .bpx-cobertura-card__cta{ background:var(--bpx-yellow); }
.bpx-cobertura-card--popular .bpx-cobertura-card__cta:hover{ background:var(--bpx-white); color:var(--bpx-navy); box-shadow:0 0 0 2px var(--bpx-navy) inset; }

/* -------- PKV section (aside imagen + tabla comparativa) -------- */
.bpx-pkv-section{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:44px;
  align-items:center;
}

.bpx-pkv-section__aside{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.bpx-pkv-section__img{
  border-radius:var(--bpx-radius-xl);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-md);
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center;
  width:100%;
}

.bpx-pkv-section__img-placeholder{
  border-radius:var(--bpx-radius-xl);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-md);
  aspect-ratio:3/4;
  background:linear-gradient(135deg,#d8e8f5,#c4d8ee);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.bpx-pkv-section__aside-text{
  font-size:14px;
  line-height:1.75;
  color:var(--bpx-grey);
}

/* -------- PKV tabla comparativa -------- */
/* FIX MÓVIL: contenedor permite scroll horizontal para que la
   tabla no fuerce el ancho del body (ver sección 35.4) */
.bpx-pkv-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.bpx-pkv-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:var(--bpx-radius-xl);
  overflow:hidden;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-pkv-table thead tr{ background:var(--bpx-white); }

.bpx-pkv-table thead th{
  padding:18px 20px;
  font-size:13px;
  font-weight:700;
  border-bottom:1px solid var(--bpx-border);
  text-align:left;
}

.bpx-pkv-table thead th:first-child{
  color:var(--bpx-grey);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:11px;
}

.bpx-pkv-table__col-pkv{
  background:rgba(255,185,5,0.07);
  border-left:1px solid rgba(255,185,5,0.25);
  border-right:1px solid rgba(255,185,5,0.25);
}

.bpx-pkv-table__col-pkv-head{
  background:rgba(255,185,5,0.10);
  border-left:1px solid rgba(255,185,5,0.3);
  border-right:1px solid rgba(255,185,5,0.3);
}

.bpx-pkv-table__head-inner{
  display:flex;
  align-items:center;
  gap:10px;
}

.bpx-pkv-table__head-badge{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  flex-shrink:0;
}

.bpx-pkv-table__head-badge--yellow{ background:var(--bpx-yellow); }
.bpx-pkv-table__head-badge--grey{ background:var(--bpx-soft-bg); border:1px solid var(--bpx-border); }

.bpx-pkv-table__head-title{
  font-size:15px;
  font-weight:800;
  color:var(--bpx-navy);
  margin:0;
  line-height:1.2;
}

.bpx-pkv-table__head-sub{
  font-size:11px;
  font-weight:500;
  color:var(--bpx-grey);
  margin:0;
}

.bpx-pkv-table tbody tr{ border-bottom:1px solid var(--bpx-border); }
.bpx-pkv-table tbody tr:last-child{ border-bottom:none; }
.bpx-pkv-table tbody tr:nth-child(even){ background:#f9fafc; }
.bpx-pkv-table tbody tr:nth-child(even) .bpx-pkv-table__col-pkv{ background:rgba(255,185,5,0.09); }

.bpx-pkv-table tbody td{
  padding:15px 20px;
  font-size:14px;
  color:var(--bpx-grey);
  vertical-align:middle;
  border-bottom:1px solid var(--bpx-border);
}

.bpx-pkv-table tbody td:first-child{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:var(--bpx-navy);
}

.bpx-pkv-table__cell-icon{
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--bpx-soft-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  flex-shrink:0;
}

.bpx-pkv-check{ color:#22a04b; font-weight:700; font-size:14px; }
.bpx-pkv-cross{ color:#cc3b2e; font-weight:700; font-size:14px; }
.bpx-pkv-neutral{ color:var(--bpx-grey); font-size:14px; }


/* =========================================================
   31. PROCESO 5 PASOS (home)
   ---------------------------------------------------------
   5 pasos horizontales con línea conectora amarilla.
   En móvil (ver sección 35) se apila en 1 o 2 columnas
   según el breakpoint.
   ========================================================= */
.bpx-proceso{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  position:relative;
}

.bpx-proceso::before{
  content:"";
  position:absolute;
  top:36px;
  left:calc(10% + 16px);
  right:calc(10% + 16px);
  height:2px;
  background:linear-gradient(90deg,var(--bpx-yellow),rgba(255,185,5,0.3));
  z-index:0;
}

.bpx-proceso-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
}

.bpx-proceso-step__icon{
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--bpx-white);
  border:3px solid var(--bpx-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin-bottom:16px;
  box-shadow:var(--bpx-shadow-sm);
  transition:background .2s, transform .2s;
}

.bpx-proceso-step:hover .bpx-proceso-step__icon{
  background:var(--bpx-yellow);
  transform:scale(1.08);
}

.bpx-proceso-step h4{
  font-size:14px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:8px;
  line-height:1.3;
}

.bpx-proceso-step p{
  font-size:12px;
  color:var(--bpx-grey);
  line-height:1.65;
  margin:0;
}


/* =========================================================
   32. HERO FULLSCREEN / ACCESS / REVIEWS / WHY (home nueva)
   ========================================================= */

/* -------- Hero fullscreen (split 50/50 con foto) -------- */
.bpx-hero-fs{
  position:relative;
  min-height:92vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  overflow:hidden;
  background:var(--bpx-white);
  margin-top:-32px;
}

.bpx-hero-fs__accent{
  position:absolute;
  bottom:-120px;
  left:-120px;
  width:560px;
  height:560px;
  background:radial-gradient(ellipse at 20% 80%, rgba(255,185,5,0.18) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
}

.bpx-hero-fs__left{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  padding:10px 56px 80px 40px;
  background:
    radial-gradient(ellipse at 0% 100%, rgba(255,185,5,0.13) 0%, transparent 50%),
    var(--bpx-white);
}

.bpx-hero-fs__content{ max-width:580px; }

.bpx-hero-fs__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:999px;
  background:var(--bpx-soft-yellow);
  border:1px solid rgba(255,185,5,0.45);
  color:#8a5b00;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:24px;
}

.bpx-hero-fs h1,
.bpx-hero-fs h2{
  font-size:clamp(30px,3.8vw,52px);
  font-weight:900;
  color:var(--bpx-navy);
  line-height:1.08;
  letter-spacing:-0.03em;
  margin-bottom:20px;
}

.bpx-hero-fs__highlight{
  color:var(--bpx-yellow);
  text-decoration:underline;
  text-decoration-color:rgba(255,185,5,0.35);
  text-underline-offset:6px;
  text-decoration-thickness:3px;
}

.bpx-hero-fs__text{
  font-size:17px;
  line-height:1.75;
  color:var(--bpx-grey);
  margin-bottom:36px;
}

.bpx-hero-fs__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:36px;
}

.bpx-hero-fs__meta{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.bpx-hero-fs__meta-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--bpx-grey-2);
}

.bpx-hero-fs__meta-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--bpx-yellow);
  flex-shrink:0;
}

.bpx-hero-fs__right{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.bpx-hero-fs__photo-cta{
  position:absolute;
  bottom:calc(25% - 60px);
  left:28px;
  right:28px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,0.92);
  border:1px solid var(--bpx-border);
  border-left:4px solid var(--bpx-yellow);
  border-radius:var(--bpx-radius-md);
  padding:14px 18px;
  box-shadow:var(--bpx-shadow-md);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.bpx-hero-fs__photo-cta-icon{
  font-size:22px;
  flex-shrink:0;
}

.bpx-hero-fs__photo-cta-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}

.bpx-hero-fs__photo-cta-text strong{
  font-size:14px;
  font-weight:800;
  color:var(--bpx-navy);
  line-height:1.2;
}

.bpx-hero-fs__photo-cta-text span{
  font-size:12px;
  color:var(--bpx-grey);
  line-height:1.3;
}

.bpx-hero-fs__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  z-index:1;
}

.bpx-hero-fs__photo--placeholder{
  background:linear-gradient(145deg,var(--bpx-soft-blue) 0%,var(--bpx-soft-bg) 60%,var(--bpx-border) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.bpx-hero-fs__photo-label{
  font-size:12px;
  font-weight:600;
  color:#9aa3b8;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

.bpx-hero-fs__right::before{
  content:"";
  position:absolute;
  inset:0;
  left:0;
  width:80px;
  background:linear-gradient(to right,var(--bpx-white),transparent);
  z-index:2;
  pointer-events:none;
}

.bpx-hero-fs__scroll{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--bpx-grey-2);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0.6;
  transition:opacity var(--bpx-transition);
}

.bpx-hero-fs__scroll:hover{ opacity:1; }

.bpx-hero-fs__scroll-arrow{
  width:32px;
  height:32px;
  border:2px solid var(--bpx-border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bpx-navy);
  animation:bpx-bounce 2s infinite;
}

@keyframes bpx-bounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
}

/* -------- Access grid (3 cards de acceso rápido) -------- */
.bpx-access-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.bpx-access-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-lg);
  padding:28px 24px;
  box-shadow:var(--bpx-shadow-sm);
  display:flex;
  flex-direction:column;
  gap:12px;
  text-decoration:none;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  position:relative;
  overflow:hidden;
}

.bpx-access-card::after{
  content:"→";
  position:absolute;
  bottom:20px;
  right:20px;
  font-size:18px;
  font-weight:700;
  color:var(--bpx-border);
  transition:color .2s, transform .2s;
}

.bpx-access-card:hover{
  box-shadow:var(--bpx-shadow-md);
  transform:translateY(-4px);
  border-color:var(--bpx-yellow);
}

.bpx-access-card:hover::after{
  color:var(--bpx-yellow);
  transform:translateX(3px);
}

.bpx-access-card__icon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:var(--bpx-soft-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex-shrink:0;
}

.bpx-access-card h3{
  font-size:16px;
  font-weight:800;
  color:var(--bpx-navy);
  line-height:1.25;
  margin:0;
}

.bpx-access-card p{
  font-size:15px;
  line-height:1.65;
  color:var(--bpx-grey);
  margin:0;
  padding-right:24px;
}

/* -------- Reviews grid (3 cards de opiniones) -------- */
.bpx-reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.bpx-review-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-lg);
  padding:28px;
  box-shadow:var(--bpx-shadow-sm);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.bpx-review-stars{ display:flex; gap:3px; }
.bpx-review-star{ color:var(--bpx-yellow); font-size:16px; }

.bpx-review-text{
  font-size:16px;
  line-height:1.75;
  color:var(--bpx-grey);
  margin:0;
  flex:1;
  font-style:italic;
}

.bpx-review-author{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
}

.bpx-review-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:var(--bpx-soft-bg);
  border:2px solid var(--bpx-border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.bpx-review-avatar img{ width:100%; height:100%; object-fit:cover; }
.bpx-review-name{ font-size:14px; font-weight:700; color:var(--bpx-navy); margin:0 0 2px; }
.bpx-review-meta{ font-size:12px; color:var(--bpx-grey); margin:0; }

.bpx-reviews-cta{
  text-align:center;
  margin-top:32px;
  font-size:14px;
  color:var(--bpx-grey);
}

.bpx-reviews-cta a{
  color:var(--bpx-navy);
  font-weight:700;
  text-decoration:underline;
}

/* -------- Why grid (4 cards "por qué nosotros") -------- */
.bpx-why-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.bpx-why-card{
  background:var(--bpx-navy);
  border-radius:var(--bpx-radius-lg);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .2s, box-shadow .2s;
}

.bpx-why-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--bpx-shadow-lg);
}

.bpx-why-card__icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:rgba(255,185,5,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.bpx-why-card h3{
  font-size:16px;
  font-weight:800;
  color:var(--bpx-white);
  line-height:1.25;
  margin:0;
}

.bpx-why-card p{
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,0.70);
  margin:0;
}


/* =========================================================
   33. HEADER / TOP BAR / MEGA MENÚ
   ========================================================= */
.bpx-topbar{
  background:var(--bpx-navy);
  padding:9px 0;
  font-size:13px;
  font-weight:500;
  line-height:1;
}

.bpx-topbar__inner{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  max-width:var(--bpx-container);
  margin:0 auto;
  padding:0 24px;
}

.bpx-topbar__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,0.72);
  text-decoration:none;
  transition:color var(--bpx-transition);
  white-space:nowrap;
}

.bpx-topbar__link:hover{ color:var(--bpx-yellow); }
.bpx-topbar__link svg{ flex-shrink:0; }

.bpx-topbar__divider{
  width:1px;
  height:14px;
  background:rgba(255,255,255,0.18);
  flex-shrink:0;
}

.bpx-topbar__whatsapp{ color:rgba(255,255,255,0.72); }
.bpx-topbar__whatsapp:hover{ color:#25d366; }

/* -------- Header principal -------- */
.bpx-header-nav{
  background:var(--bpx-white);
  border-bottom:1px solid var(--bpx-border);
  box-shadow:0 2px 12px rgba(28,36,75,0.06);
  position:sticky;
  top:0;
  z-index:900;
  transition:box-shadow var(--bpx-transition);
}

.bpx-header-nav__inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  max-width:var(--bpx-container);
  margin:0 auto;
  padding:0 24px;
  height:72px;
}

.bpx-header-nav__logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
  text-decoration:none;
}

.bpx-header-nav__logo-text{
  font-size:20px;
  font-weight:800;
  color:var(--bpx-navy);
  letter-spacing:-0.03em;
}

/* -------- Navegación principal -------- */
.bpx-nav{
  flex:1;
  display:flex;
  justify-content:flex-end;
}

.bpx-nav__list{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
}

.bpx-nav__item{
  position:static;
  list-style:none;
}

.bpx-nav__link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:8px 13px;
  border-radius:9px;
  font-size:14.5px;
  font-weight:600;
  color:var(--bpx-navy);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--bpx-transition), background var(--bpx-transition);
  cursor:pointer;
}

.bpx-nav__link:hover,
.bpx-nav__item--active > .bpx-nav__link{
  color:var(--bpx-navy);
  background:var(--bpx-soft-bg);
}

.bpx-nav__chevron{
  display:flex;
  align-items:center;
  transition:transform var(--bpx-transition);
  color:var(--bpx-grey);
  margin-left:1px;
}

.bpx-nav__item--open > .bpx-nav__link .bpx-nav__chevron{
  transform:rotate(180deg);
  color:var(--bpx-yellow);
}

.bpx-nav__item--active > .bpx-nav__link{ position:relative; }

.bpx-nav__item--active > .bpx-nav__link::after{
  content:'';
  position:absolute;
  bottom:2px;
  left:13px;
  right:13px;
  height:2px;
  background:var(--bpx-yellow);
  border-radius:2px;
}

/* -------- Variantes de menú -------- */
.menu-destacado > .bpx-nav__link{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-weight:700;
  border-radius:9px;
}

.menu-destacado > .bpx-nav__link:hover{
  background:var(--bpx-navy);
  color:var(--bpx-white);
}

.menu-destacado > .bpx-nav__link::after{ display:none; }

.menu-btn-contacto > .bpx-nav__link{
  background:var(--bpx-navy);
  color:var(--bpx-white);
  padding:9px 20px;
  border-radius:var(--bpx-radius-btn);
  font-weight:700;
  box-shadow:var(--bpx-shadow-sm);
  transition:background var(--bpx-transition), box-shadow var(--bpx-transition), transform var(--bpx-transition);
}

.menu-btn-contacto > .bpx-nav__link:hover{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  box-shadow:var(--bpx-shadow-md);
  transform:translateY(-1px);
}

.menu-btn-contacto > .bpx-nav__link::after{ display:none; }

/* -------- Mega menú -------- */
.bpx-nav__item--has-mega{ position:static; }

.bpx-megamenu__panel{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:min(960px, calc(100vw - 48px));
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:20px;
  box-shadow:var(--bpx-shadow-md);
  padding:36px 40px;
  z-index:9000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.bpx-nav__item--open .bpx-megamenu__panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.bpx-megamenu__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}

.bpx-megamenu__col{ padding:0 28px 0 0; }

.bpx-megamenu__col:not(:first-child){
  padding-left:28px;
  border-left:1px solid var(--bpx-border);
}

.bpx-megamenu__col:last-child{ padding-right:0; }

.bpx-megamenu__col-title{
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.09em;
  color:var(--bpx-grey);
  margin:0 0 12px 10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--bpx-border);
}

.bpx-megamenu__list{
  list-style:none;
  margin:0;
  padding:0;
}

.bpx-megamenu__item{ list-style:none; }

.bpx-megamenu__link{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:10px;
  font-size:13.5px;
  font-weight:500;
  color:var(--bpx-navy);
  text-decoration:none;
  line-height:1.35;
  transition:background var(--bpx-transition), padding-left var(--bpx-transition), color var(--bpx-transition);
}

.bpx-megamenu__link:hover{
  background:var(--bpx-soft-yellow);
  padding-left:14px;
  color:var(--bpx-navy);
}

.bpx-megamenu__dot{
  flex-shrink:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--bpx-yellow);
  transition:transform var(--bpx-transition);
}

.bpx-megamenu__link:hover .bpx-megamenu__dot{ transform:scale(1.4); }

/* -------- Toggle hamburguesa (visible en móvil) -------- */
.bpx-nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  padding:8px;
  background:transparent;
  border:1.5px solid var(--bpx-border);
  border-radius:10px;
  cursor:pointer;
  transition:border-color var(--bpx-transition);
  position:relative;
  z-index:10001;
}

.bpx-nav__toggle:hover{ border-color:var(--bpx-navy); }

.bpx-nav__toggle-bar{
  display:block;
  width:100%;
  height:2px;
  background:var(--bpx-navy);
  border-radius:2px;
  transition:transform var(--bpx-transition), opacity var(--bpx-transition);
}


/* =========================================================
   34. CONTACTO
   ========================================================= */
.bpx-contact-hero{
  padding-bottom:0;
  text-align:center;
}

.bpx-contact-hero__inner{
  max-width:var(--bpx-container-narrow);
  margin:0 auto;
}

.bpx-contact-hero__inner h2{
  font-size:clamp(32px,4vw,48px);
  margin-bottom:16px;
}

.bpx-contact-hero__inner p{
  font-size:18px;
  line-height:1.75;
  color:var(--bpx-grey);
  max-width:580px;
  margin:0 auto;
}

.bpx-contact-hero .bpx-eyebrow{
  justify-content:center;
  margin-bottom:16px;
}

/* -------- Grid principal contacto -------- */
.bpx-contact-grid{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:40px;
  align-items:start;
}

.bpx-contact-info{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.bpx-contact-info__title{
  font-size:20px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:4px;
}

.bpx-contact-card{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-lg);
  padding:24px;
  box-shadow:var(--bpx-shadow-sm);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.bpx-contact-card__row{
  display:flex;
  gap:14px;
  align-items:center;
}

.bpx-contact-card__icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:var(--bpx-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.bpx-contact-card__icon svg{ fill:var(--bpx-navy); }

.bpx-contact-card__title{
  font-size:15px;
  font-weight:800;
  color:var(--bpx-navy);
  margin:0 0 2px;
}

.bpx-contact-card__text{
  font-size:13px;
  color:var(--bpx-grey);
  margin:0;
}

.bpx-contact-card__highlight{
  font-size:13px;
  font-weight:700;
  color:var(--bpx-navy);
  margin:4px 0 0;
}

/* -------- Formulario -------- */
.bpx-contact-form-box{
  background:var(--bpx-white);
  border:1px solid var(--bpx-border);
  border-radius:var(--bpx-radius-xl);
  padding:40px 36px;
  box-shadow:var(--bpx-shadow-sm);
}

.bpx-contact-form-box h3{
  font-size:22px;
  font-weight:800;
  color:var(--bpx-navy);
  margin-bottom:8px;
}

.bpx-contact-form-box__intro{
  font-size:14px;
  color:var(--bpx-grey);
  margin-bottom:28px;
  line-height:1.6;
}

/* -------- Sección "extra" (canales adicionales) -------- */
.bpx-contact-extra{ background-color:var(--bpx-navy); }

.bpx-contact-extra__heading{
  text-align:center;
  margin-bottom:40px;
}

.bpx-contact-extra__heading h2{
  color:var(--bpx-white);
  font-size:clamp(24px,3vw,36px);
  margin-bottom:12px;
}

.bpx-contact-extra__heading p{
  color:rgba(255,255,255,0.70);
  font-size:16px;
  max-width:560px;
  margin:0 auto;
}

.bpx-contact-extra-card{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:var(--bpx-radius-lg);
  padding:32px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  position:relative;
  overflow:hidden;
}

.bpx-contact-extra-card__icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--bpx-yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.bpx-contact-extra-card__icon svg{ fill:var(--bpx-navy); }
.bpx-contact-extra-card__icon--disabled{ background:rgba(255,255,255,0.20); }
.bpx-contact-extra-card__icon--disabled svg{ fill:rgba(255,255,255,0.5); }

.bpx-contact-extra-card h3{
  color:var(--bpx-white);
  font-size:16px;
  font-weight:800;
  margin:0;
}

.bpx-contact-extra-card h3.is-disabled{ color:rgba(255,255,255,0.50); }

.bpx-contact-extra-card p{
  color:rgba(255,255,255,0.70);
  font-size:13px;
  line-height:1.65;
  margin:0;
}

.bpx-contact-extra-card p.is-disabled{ color:rgba(255,255,255,0.45); }

.bpx-contact-extra-card__badge{
  position:absolute;
  top:12px;
  right:12px;
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:9px;
  font-weight:800;
  padding:3px 10px;
  border-radius:999px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.bpx-contact-extra-card__btn{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-weight:700;
  padding:10px 20px;
  border-radius:var(--bpx-radius-btn);
  font-size:13px;
  margin-top:4px;
  display:inline-block;
  text-decoration:none;
  transition:background .2s;
}

.bpx-contact-extra-card__btn:hover{ background:var(--bpx-white); color:var(--bpx-navy); }

.bpx-contact-extra-card__btn--disabled{
  background:rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.40);
  cursor:default;
}

.bpx-contact-extra-card__btn--disabled:hover{ background:rgba(255,255,255,0.10); }

/* =========================================================
   35. RESPONSIVE — TODOS LOS BREAKPOINTS CONSOLIDADOS
   ---------------------------------------------------------
   Breakpoints definidos (de mayor a menor):
     35.1  1100px → tablet landscape   (apila grids 2 cols)
     35.2  1024px → tablet portrait    (hero-fs + strip)
     35.3   980px → ajustes hero global
     35.4   900px → contacto apilado
     35.5   767px → MÓVIL (apilado total + fixes específicos)
     35.6   480px → móvil pequeño (ajustes finales)

   Reglas generales del diseño responsive:
   • Todos los componentes con efecto zig-zag / lateral
     (.bpx-extra-block, .bpx-split-media, .bpx-split-img,
     .bpx-split-panels, .bpx-counters-split, .bpx-hero-xl,
     .bpx-hero-light, .bpx-hero-fs, .bpx-pkv-section,
     .bpx-empresa-split, .bpx-comparator-card,
     .bpx-compare__grid, .bpx-intro-grid) se apilan a
     1 columna en el breakpoint 1100px o 1024px.
   • El timeline (.bpx-step) pasa de 3 columnas zig-zag a
     2 columnas (número + contenido) a partir de 1100px.
   • La anchor bar se oculta por completo en móvil.
   • La tabla PKV mantiene ancho mínimo y scroll horizontal.
   • Las preguntas largas de FAQ pueden romper en varias líneas.
   ========================================================= */


/* =========================================================
   35.1  BREAKPOINT 1100px — tablet landscape
   ---------------------------------------------------------
   El más importante: apila la mayoría de grids de 2 cols
   a 1 col. Activa el modo hamburguesa del header.
   ========================================================= */
@media (max-width:1100px){

  /* -------- Layout base: apilar grids 2 cols -------- */
  .bpx-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bpx-grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bpx-hero__grid,
  .bpx-split,
  .bpx-split--reverse,
  .bpx-grid-2,
  .bpx-compare__grid,
  .bpx-comparator-card{ grid-template-columns:1fr; }

  /* -------- Comparator card (intro + form apilados) -------- */
  .bpx-comparator-card__intro{
    border-right:none;
    border-bottom:1px solid var(--bpx-border);
    padding:36px 32px;
  }
  .bpx-comparator-card__form{ padding:36px 32px; }

  /* -------- Timeline zig-zag → lista vertical --------
     En desktop el HTML alterna contenido-vacío-contenido
     con un div marcado como aria-hidden="true" que sirve
     de "hueco". Aquí ocultamos ese hueco y forzamos
     con grid-column que el dot vaya a col. 1 y el
     contenido a col. 2 independientemente del orden. */
  .bpx-timeline::before{
    left:28px;
    transform:none;
  }

  .bpx-step,
  .bpx-step-right,
  .bpx-step-left{
    grid-template-columns:56px minmax(0,1fr);
    grid-template-rows:auto;
    gap:18px;
    align-items:flex-start;
  }

  .bpx-timeline .bpx-step-content[aria-hidden="true"]{
    display:none;
  }

  .bpx-timeline .bpx-step-dot{
    grid-column:1;
    grid-row:1;
  }

  .bpx-timeline .bpx-step-content:not([aria-hidden="true"]){
    grid-column:2;
    grid-row:1;
    visibility:visible;
  }

  /* -------- Hero light (v2) -------- */
  .bpx-hero-light__grid{ grid-template-columns:1fr; }
  .bpx-hero-light__media{ max-width:560px; margin:0 auto; }

  /* -------- Escenarios y split panels (v2) -------- */
  .bpx-scen-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bpx-split-panels,
  .bpx-intro-grid{ grid-template-columns:1fr; }

  /* -------- Hero XL y contenidos v3 -------- */
  .bpx-hero-xl__grid{ grid-template-columns:1fr; }
  .bpx-hero-xl__media{ max-width:540px; margin:0 auto; }
  .bpx-cards3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bpx-opciones{ grid-template-columns:1fr; max-width:600px; margin:0 auto; }
  .bpx-split-img,
  .bpx-split-img--reverse{ grid-template-columns:1fr; }
  .bpx-split-img > div:first-child{
    max-width:320px;
    margin:0 auto;
  }

  /* -------- Comparador strip / Precios / Empresa (v4) -------- */
  .bpx-comparador-strip__inner{ grid-template-columns:1fr; }
  .bpx-comparador-strip__box{ max-width:100%; min-width:0; }
  .bpx-price-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bpx-empresa-split{ grid-template-columns:1fr; }
  .bpx-factores{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* -------- Intro / Steps / Split media / Niveles (v5) -------- */
  .bpx-intro-cards{ grid-template-columns:1fr; }
  .bpx-steps-row{ grid-template-columns:1fr; }
  .bpx-split-media,
  .bpx-counters-split{ grid-template-columns:1fr; }
  .bpx-split-media__img,
  .bpx-split-media__img-placeholder,
  .bpx-counters-img,
  .bpx-counters-img-placeholder{ min-height:300px; }
  .bpx-niveles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bpx-check-cards{ grid-template-columns:1fr; }
  .bpx-counters-panel{
    padding:40px 32px;
    flex-direction:row;
    flex-wrap:wrap;
    gap:24px;
  }

  /* -------- Extra blocks (v6) → apilado -------- */
  .bpx-extra-block{
    grid-template-columns:1fr;
    direction:ltr;
  }
  .bpx-extra-block--reverse > *{ direction:ltr; }
  .bpx-extra-block__img,
  .bpx-extra-block__img-placeholder{ min-height:260px; }
  .bpx-extra-block__content{ padding:32px 28px; }

  /* -------- Home: benefits / coberturas / PKV / proceso -------- */
  .bpx-benefits-grid{ grid-template-columns:1fr; }
  .bpx-benefits-grid-md{ grid-template-columns:1fr; }
  .bpx-coberturas-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .bpx-pkv-section{ grid-template-columns:1fr; }
  .bpx-pkv-section__img,
  .bpx-pkv-section__img-placeholder{ aspect-ratio:16/9; }

  .bpx-proceso{ grid-template-columns:1fr 1fr; gap:24px; }
  .bpx-proceso::before{ display:none; }

  /* -------- Home nueva: access / why / reviews -------- */
  .bpx-access-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bpx-why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bpx-reviews-grid{ grid-template-columns:1fr; }

  /* -------- Header → modo hamburguesa -------- */
  .bpx-nav__toggle{ display:flex; }

  .bpx-nav{
    position:fixed;
    top:0;
    right:-100%;
    width:min(320px,90vw);
    height:100dvh;
    background:var(--bpx-white);
    box-shadow:var(--bpx-shadow-xl);
    flex-direction:column;
    justify-content:flex-start;
    padding:24px 20px;
    overflow-y:auto;
    transition:right .3s cubic-bezier(0.4,0,0.2,1);
    z-index:10000;
  }

  .bpx-nav--open{ right:0; }

  .bpx-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    width:100%;
    margin-top:48px;
  }

  .bpx-nav__link{
    padding:11px 14px;
    font-size:15px;
    justify-content:space-between;
  }

  .bpx-megamenu__panel{
    position:static;
    transform:none;
    width:100%;
    box-shadow:none;
    border:none;
    border-radius:12px;
    background:var(--bpx-soft-bg);
    padding:16px 12px;
    margin-top:4px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    display:none;
    z-index:auto;
  }

  .bpx-nav__item--open .bpx-megamenu__panel{ display:block; }
  .bpx-megamenu__grid{ grid-template-columns:1fr; gap:16px; }
  .bpx-megamenu__col{ padding:0; border-left:none; }
  .bpx-megamenu__col-title{ margin-left:0; }
  .menu-btn-contacto > .bpx-nav__link{
    display:block;
    text-align:center;
    margin-top:8px;
  }
  .bpx-topbar__inner{ justify-content:center; gap:16px; }
}


/* =========================================================
   35.2  BREAKPOINT 1024px — tablet portrait
   ---------------------------------------------------------
   Componentes específicos que necesitan apilarse antes
   del breakpoint general de móvil (767px):
     • Hero fullscreen (.bpx-hero-fs) — apila vertical.
     • Card CTA flotante (.bpx-hero-fs__photo-cta) — se
       OCULTA en tablet/móvil porque estorba sobre la foto
       y los botones del hero izquierdo ya cumplen la
       función CTA.
     • Comparador strip (.bpx-comparador-strip__box) —
       la caja blanca se ajusta para no desbordar.
   ========================================================= */
@media (max-width:1024px){

  /* -------- Hero fullscreen: apilar columnas -------- */
  .bpx-hero-fs{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .bpx-hero-fs__left{
    padding:64px 24px 48px;
    background:
      radial-gradient(ellipse at 5% 5%, rgba(255,185,5,0.13) 0%, transparent 50%),
      var(--bpx-white);
  }

  .bpx-hero-fs__content{ max-width:100%; }

  .bpx-hero-fs__right{
    min-height:420px;
    order:2;
    position:relative;
  }

  /* Degradado blanco izquierdo oculto (no hay col izquierda al lado) */
  .bpx-hero-fs__right::before{ display:none; }

  /* Card CTA flotante oculta en tablet/móvil: estorba sobre
     la foto y los botones del hero izquierdo ya cumplen
     la función de CTA principal */
  .bpx-hero-fs__photo-cta{
    display:none;
  }

  /* Scroll indicator oculto al apilar */
  .bpx-hero-fs__scroll{ display:none; }

  /* -------- Comparador strip: caja ajustada -------- */
  .bpx-comparador-strip__box{
    min-width:0;
    width:100%;
    max-width:100%;
    padding:24px 22px;
  }
}


/* =========================================================
   35.3  BREAKPOINT 980px — ajustes hero global
   ========================================================= */
@media (max-width:980px){
  .bpx-hero{ padding-top:72px; }
  .bpx-hero__image img{
    max-height:2000px;
    object-fit:cover;
  }
}


/* =========================================================
   35.4  BREAKPOINT 900px — contacto
   ========================================================= */
@media (max-width:900px){
  .bpx-contact-grid{ grid-template-columns:1fr; }
  .bpx-contact-form-box{ padding:28px 24px; }
}


/* =========================================================
   35.5  BREAKPOINT 767px — MÓVIL
   ---------------------------------------------------------
   Fixes específicos de la revisión del 22 abril 2026:
     FIX 1 → Ocultar anchor bar
     FIX 2 → Tabla PKV scroll horizontal + min-width
     FIX 3 → Timeline con números y contenido bien alineados
     FIX 4 → FAQ con preguntas multilinea

   Los componentes zig-zag ya vienen apilados desde el
   breakpoint 1100px. Aquí hacemos los ajustes finos:
   padding, tipografía, botones full-width, etc.
   ========================================================= */
@media (max-width:767px){

  /* -------- Padding general de contenedores -------- */
  .bpx-wrap,
  .bpx-hero__inner,
  .bpx-seo__box,
  .bpx-faq__inner{
    padding-left:14px;
    padding-right:14px;
    max-width:100%;
  }

  .bpx-section,
  .bpx-seo,
  .bpx-faq,
  .bpx-compare,
  .bpx-final-cta{
    padding-top:56px;
    padding-bottom:56px;
  }

  /* -------- Grids -------- */
  .bpx-grid-3,
  .bpx-grid-4{ grid-template-columns:1fr; }

  /* -------- Botones full-width en móvil -------- */
  .bpx-hero__actions,
  .bpx-final-cta__actions{
    flex-direction:column;
    align-items:stretch;
  }

  .bpx-btn,
  a.bpx-btn{ width:100%; }

  /* -------- Cards (padding reducido) -------- */
  .bpx-card,
  .bpx-benefit-card,
  .bpx-option-card,
  .bpx-panel,
  .bpx-step-content,
  .bpx-hero-card{ padding:22px 18px; }

  .bpx-compare__box,
  .bpx-final-cta__box{ padding:28px 20px; }

  /* -------- Tipografía -------- */
  .bpx-lead,
  .bpx-subtitle,
  .bpx-hero__text{ font-size:17px; }

  /* -------- Miscelánea -------- */
  .bpx-proof{ align-items:flex-start; }
  .bpx-warning-box{ flex-direction:column; }
  .bpx-hero-floating{ position:static; margin-top:16px; }

  .bpx-comparator-card__intro,
  .bpx-comparator-card__form{ padding:28px 22px; }


  /* ═══════════════════════════════════════════════════════
     FIX MÓVIL 1 — OCULTAR ANCHOR BAR
     En desktop funciona bien como banda de anclajes, pero
     en móvil se corta y aporta ruido visual → se oculta.
     ═══════════════════════════════════════════════════════ */
  .bpx-anchor-bar{
    display:none;
  }


  /* ═══════════════════════════════════════════════════════
     FIX MÓVIL 2 — TABLA PKV CON SCROLL HORIZONTAL
     La tabla mantiene un ancho mínimo de 560px para que
     se sigan viendo las 3 columnas (característica /
     privado / público). El contenedor permite scroll
     horizontal sin afectar al resto del layout.
     ═══════════════════════════════════════════════════════ */
  .bpx-pkv-table{
    min-width:560px;
    font-size:14px;
  }

  .bpx-pkv-table th,
  .bpx-pkv-table td{
    padding:10px 12px;
  }

  .bpx-pkv-table-wrap{
    border-radius:16px;
    /* Sombra interior derecha: pista visual de scroll */
    box-shadow:inset -12px 0 14px -12px rgba(0,0,0,0.15);
  }


  /* ═══════════════════════════════════════════════════════
     FIX MÓVIL 3 — TIMELINE CON NÚMEROS + CONTENIDO
     Refinamiento de tamaños sobre el comportamiento base
     que ya viene aplicado desde el breakpoint 1100px.
     ═══════════════════════════════════════════════════════ */
  .bpx-timeline::before{ left:22px; }

  .bpx-step,
  .bpx-step-right,
  .bpx-step-left{
    grid-template-columns:48px minmax(0,1fr);
    gap:14px;
    align-items:flex-start;
  }

  .bpx-step-dot{
    width:44px;
    height:44px;
    font-size:15px;
    border-width:3px;
    margin:4px 0 0;
  }

  .bpx-step-content{
    padding:18px 16px;
  }

  .bpx-step-content h3{
    font-size:17px;
    line-height:1.3;
  }

  .bpx-step-content p{
    font-size:14px;
    line-height:1.6;
  }


  /* ═══════════════════════════════════════════════════════
     FIX MÓVIL 4 — FAQ MULTILINEA
     Ajustes de padding y tamaños. Las reglas base que
     permiten multilinea están en la sección 15.
     ═══════════════════════════════════════════════════════ */
  .bpx-faq-question{
    padding:18px 16px;
    gap:12px;
  }

  .bpx-faq-question span{
    font-size:16px;
    line-height:1.45;
  }

  .bpx-faq-toggle{
    width:30px;
    height:30px;
    min-width:30px;
    font-size:16px;
  }

  .bpx-faq-answer-inner{
    padding:0 16px 18px;
    font-size:15px;
    line-height:1.7;
  }


  /* -------- Hero light (v2) -------- */
  .bpx-hero-light{ padding:52px 0 44px; }
  .bpx-scen-grid{ grid-template-columns:1fr; }
  .bpx-split-panel{ padding:24px 20px; }
  .bpx-hero-img-badge{ position:static; margin-top:14px; }
  .bpx-hero-meta{ gap:12px; }

  /* -------- Hero XL (v3) -------- */
  .bpx-hero-xl{ padding:52px 0 44px; }
  .bpx-cards3{ grid-template-columns:1fr; }
  .bpx-costes{ grid-template-columns:1fr; }
  .bpx-opcion--featured{ padding-top:42px; }
  .bpx-trust-row{ gap:12px; }

  /* -------- Hero stats / Precios / Empresa / CTA trust (v4) -------- */
  .bpx-hero-stats{ gap:10px; }
  .bpx-price-cards{ grid-template-columns:1fr; }
  .bpx-factores{ grid-template-columns:1fr; }
  .bpx-empresa-highlight__pct{ font-size:60px; }
  .bpx-comparador-strip{ padding:44px 0; }
  .bpx-cta-trust{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  /* -------- Niveles / Split media / Contadores (v5) -------- */
  .bpx-niveles{ grid-template-columns:1fr; }
  .bpx-split-media__panel{ padding:28px 24px; }
  .bpx-counter__value{ font-size:40px; }

  /* Contadores en banda navy: en móvil, 3 en fila con scroll horizontal.
     Cada contador tiene un min-width para que los números grandes no se
     corten. Se añade snap y fade visual para UX pulida. */
  .bpx-counters-row{
    grid-template-columns:repeat(3,minmax(200px,1fr));
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    /* Fade a la derecha: insinúa que hay más contenido al deslizar */
    -webkit-mask-image:linear-gradient(to right, #000 88%, transparent 100%);
            mask-image:linear-gradient(to right, #000 88%, transparent 100%);
  }

  .bpx-counters-row::-webkit-scrollbar{ display:none; }
  .bpx-counters-row{ scrollbar-width:none; }

  .bpx-counter-item{
    scroll-snap-align:start;
    padding:0 22px;
    min-width:0;
  }

  .bpx-counter-value{ font-size:46px; }
  .bpx-counter-prefix,
  .bpx-counter-suffix{ font-size:32px; }

  .bpx-hero-badge-dark{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  /* -------- Hero dark / Extra blocks (v6) -------- */
  .bpx-hero-dark{ padding:64px 0 56px; }
  .bpx-hero-dark__extras{
    flex-direction:column;
    align-items:center;
  }
  .bpx-hero-dark__extra-pill{
    width:100%;
    justify-content:center;
  }
  .bpx-extra-block__content{ padding:24px 20px; }

  /* -------- Home: coberturas / proceso / benefits -------- */
  .bpx-coberturas-grid{ grid-template-columns:1fr; }
  .bpx-proceso{ grid-template-columns:1fr; }
  .bpx-benefit-md{
    flex-direction:column;
    gap:14px;
  }

  /* -------- Home nueva: access / why -------- */
  .bpx-access-grid{ grid-template-columns:1fr; }
  .bpx-why-grid{ grid-template-columns:1fr; }

  /* -------- Hero fullscreen: refinamiento móvil -------- */
  .bpx-hero-fs__left{
    padding:52px 18px 40px;
  }

  .bpx-hero-fs__right{
    min-height:320px;
  }

  .bpx-hero-fs__actions{
    flex-direction:column;
    align-items:stretch;
  }

  .bpx-hero-fs__actions .bpx-btn{ width:100%; }

  /* -------- Comparador strip: refinamiento móvil -------- */
  .bpx-comparador-strip__box{
    padding:22px 18px;
  }

  /* -------- Contacto -------- */
  .bpx-contact-hero__inner h2{ font-size:28px; }
}


/* =========================================================
   35.6  BREAKPOINT 480px — móvil pequeño
   ---------------------------------------------------------
   Ajustes finales para pantallas muy estrechas.
   ========================================================= */
@media (max-width:480px){
  .bpx-header-nav__inner{
    padding:0 16px;
    height:62px;
  }
  .bpx-topbar{
    font-size:12px;
    padding:7px 0;
  }
}


/* =========================================================
   36. SITE FOOTER
   ---------------------------------------------------------
   Footer profesional de 4 columnas:
     1. Marca  (logo + tagline + CTA contacto)
     2. Navegación  (enlaces internos)
     3. Información legal  (impressum, aviso, privacidad, etc.)
     4. Contacto  (ubicación, horario, redes sociales)

   Estructura:
     .bpx-site-footer              → wrapper exterior (fondo navy)
     .bpx-site-footer__wrap        → contenedor centrado
     .bpx-site-footer__main        → grid 4 cols de contenido
     .bpx-site-footer__legal       → disclaimer legal de correduría
     .bpx-site-footer__bottom      → barra copyright + mini-links

   Responsive:
     >  960px  →  4 columnas
     ≤  960px  →  2 columnas
     ≤  600px  →  1 columna
   ========================================================= */
.bpx-site-footer{
  background:var(--bpx-navy);
  color:rgba(255,255,255,0.70);
  padding:64px 0 0;
  font-size:14px;
  line-height:1.65;
}

.bpx-site-footer__wrap{
  width:100%;
  max-width:var(--bpx-container);
  margin:0 auto;
  padding:0 24px;
}

/* -------- Bloque principal: 4 columnas -------- */
.bpx-site-footer__main{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:48px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.bpx-site-footer__col h4{
  font-size:13px;
  font-weight:800;
  color:var(--bpx-white);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:0 0 18px;
}

/* -------- Columna de marca -------- */
.bpx-site-footer__logo{
  display:inline-flex;
  margin-bottom:18px;
  text-decoration:none;
}

.bpx-site-footer__logo img{
  max-height:48px;
  width:auto;
  height:auto;
  display:block;
}

.bpx-site-footer__tagline{
  font-size:14px;
  line-height:1.7;
  color:rgba(255,255,255,0.65);
  margin:0 0 22px;
  max-width:320px;
}

.bpx-site-footer__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 22px;
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  font-size:14px;
  font-weight:800;
  border-radius:var(--bpx-radius-btn);
  text-decoration:none;
  transition:background var(--bpx-transition), color var(--bpx-transition);
}

.bpx-site-footer__cta:hover,
.bpx-site-footer__cta:focus{
  background:var(--bpx-white);
  color:var(--bpx-navy);
}

/* -------- Listas de enlaces -------- */
.bpx-site-footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bpx-site-footer__links li{ margin:0; }

.bpx-site-footer__links a{
  color:rgba(255,255,255,0.70);
  font-size:14px;
  text-decoration:none;
  transition:color var(--bpx-transition);
  display:inline-block;
}

.bpx-site-footer__links a:hover,
.bpx-site-footer__links a:focus{
  color:var(--bpx-yellow);
}

/* -------- Contacto (ubicación + horario + redes) -------- */
.bpx-site-footer__contact-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:16px;
  color:rgba(255,255,255,0.85);
  font-size:14px;
  line-height:1.5;
}

.bpx-site-footer__contact-item svg{
  width:20px;
  height:20px;
  flex-shrink:0;
  color:var(--bpx-yellow);
  margin-top:2px;
}

.bpx-site-footer__contact-dim{
  color:rgba(255,255,255,0.55);
  font-size:13px;
}

.bpx-site-footer__hours{
  font-size:14px;
  color:rgba(255,255,255,0.70);
  line-height:1.6;
  margin:0 0 20px;
}

.bpx-site-footer__hours strong{
  color:var(--bpx-white);
  font-weight:700;
}

/* -------- Redes sociales -------- */
.bpx-site-footer__social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.bpx-site-footer__social-icon{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  color:rgba(255,255,255,0.80);
  text-decoration:none;
  transition:
    background var(--bpx-transition),
    color var(--bpx-transition),
    border-color var(--bpx-transition),
    transform var(--bpx-transition);
}

.bpx-site-footer__social-icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.bpx-site-footer__social-icon:hover,
.bpx-site-footer__social-icon:focus{
  background:var(--bpx-yellow);
  color:var(--bpx-navy);
  border-color:var(--bpx-yellow);
  transform:translateY(-2px);
}

/* -------- Disclaimer legal de correduría -------- */
.bpx-site-footer__legal{
  padding:32px 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.bpx-site-footer__legal p{
  font-size:12px;
  line-height:1.7;
  color:rgba(255,255,255,0.50);
  margin:0 0 10px;
}

.bpx-site-footer__legal p:last-child{ margin-bottom:0; }

.bpx-site-footer__legal strong{
  color:rgba(255,255,255,0.70);
  font-weight:700;
}

.bpx-site-footer__legal em{
  font-style:italic;
  color:rgba(255,255,255,0.58);
}

.bpx-site-footer__legal a{
  color:rgba(255,255,255,0.75);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,0.30);
  text-underline-offset:2px;
  transition:color var(--bpx-transition), text-decoration-color var(--bpx-transition);
}

.bpx-site-footer__legal a:hover,
.bpx-site-footer__legal a:focus{
  color:var(--bpx-yellow);
  text-decoration-color:var(--bpx-yellow);
}

/* -------- Barra inferior (copyright + mini-enlaces) -------- */
.bpx-site-footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:24px 0 28px;
  flex-wrap:wrap;
}

.bpx-site-footer__copy{
  font-size:13px;
  color:rgba(255,255,255,0.55);
  margin:0;
}

.bpx-site-footer__mini-links{
  display:flex;
  gap:20px;
  list-style:none;
  padding:0;
  margin:0;
  flex-wrap:wrap;
}

.bpx-site-footer__mini-links li{ margin:0; }

.bpx-site-footer__mini-links a{
  color:rgba(255,255,255,0.55);
  font-size:13px;
  text-decoration:none;
  transition:color var(--bpx-transition);
}

.bpx-site-footer__mini-links a:hover,
.bpx-site-footer__mini-links a:focus{
  color:var(--bpx-yellow);
}

/* -------- Responsive footer -------- */
@media (max-width:960px){
  .bpx-site-footer__main{
    grid-template-columns:1fr 1fr;
    gap:40px 32px;
  }
}

@media (max-width:600px){
  .bpx-site-footer{ padding-top:52px; }

  .bpx-site-footer__main{
    grid-template-columns:1fr;
    gap:36px;
    padding-bottom:36px;
  }

  .bpx-site-footer__tagline{ max-width:100%; }

  .bpx-site-footer__cta{ width:100%; }

  .bpx-site-footer__bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .bpx-site-footer__mini-links{ gap:16px; }

  .bpx-site-footer__legal p{ font-size:11.5px; }
}


/* =========================================================
   FIN DEL ARCHIVO · BRAMEX PLUS style.css
   22 abril 2026 · Revisión móvil completa
   ========================================================= */