.menu-scroll{
    max-height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.ourProducts-swiper .swiper-pagination{
    bottom: 0;
}

/*.button-float{*/
/*    display: none;*/
/*    bottom: 90px;*/
/*    width: 250px;*/
/*}*/

/*.button-float-button__text{*/
/*    position: absolute;*/
/*    right: 100px;*/
/*}*/

/*.button-float-button {*/
/*    position: fixed;*/
/*    bottom: 25px;*/
/*    right: 20px;*/
/*    z-index: 10;*/
/*}*/

/*.button-float-box{*/
/*   padding-bottom: 0; */
/*   width: 250px;*/
/*}*/

/*.button-float-button__circle {*/
/*    width: 60px;*/
/*    height: 60px;*/
/*    background-color: #007bff;*/
/*    border-radius: 50%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
/*    cursor: pointer;*/
/*}*/

/*@media screen and (min-width: 992px) {*/
/*    .button-float, .button-float-box {*/
/*        width: 310px;*/
/*    }*/
/*}*/

/*@media screen and (max-width: 360px) {*/
/*    .button-float, .button-float-box {*/
/*        width: 230px;*/
/*    }*/
/*    .button-float-button__text.open{*/
/*        width: 175px;*/
/*    }*/
/*    .button-float-button__text{*/
/*        padding: 8px 14px;*/
/*    }*/
/*}*/

a:focus-visible, 
button:focus-visible, 
[role="button"]:focus-visible, 
input:focus-visible, 
select:focus-visible {
    outline: 3px solid #F0BB22 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
}

.tabs-tertiary__button .nav-link:focus-visible {
    outline: 3px solid #0A99D6 !important;
    outline-offset: -2px; 
    background-color: rgba(10, 153, 214, 0.1);
}

/* --- Layout Principal --- */
.custom-header {
    background-color: var(--bg-light, #ffffff);
    box-shadow: var(--shadow-main, 0 4px 15px rgba(0, 0, 0, 0.08));
    position: relative;
    z-index: 999999; /* ¡Z-index súper alto para sobreponerse al banner oscuro! */
    padding: 12px 20px;
    width: 100%;
    box-sizing: border-box; 
}

.custom-header__container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; 
    gap: 10px; 
}

/* --- Logo Flex --- */
.custom-header__logo {
    flex-shrink: 1; 
    display: flex;
    align-items: center;
}

.custom-header__logo img {
    height: 40px; 
    width: auto;
    max-width: 100%; 
    object-fit: contain;
    transition: height 0.3s ease;
}

/* --- Controles Derecha --- */
.custom-header__actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0; 
    transition: gap 0.3s ease;
}

.custom-header__zoom {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Botones Zoom --- */
.custom-zoom-btn {
    font-size: 18px;
    font-weight: 500;
    color: var(--blue-400, #0D8ABC);
    font-family: inherit;
    background-color: transparent;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.custom-zoom-btn:hover {
    color: var(--gold-hover, #F0BB22);
    transform: scale(1.1);
}

/* --- Autenticación y Saludo --- */
.custom-header__auth { position: relative !important; display: block; }

.auth-logged-in, .auth-logged-out {
    display: flex;
    align-items: center;
    gap: 12px;
}
.auth-greeting {
    font-size: 14px;
    font-weight: 600;
    color: var(--blue-400, #0D8ABC);
}

/* --- Botón Avatar --- */
.profile-avatar-btn {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.default-avatar-icon {
    font-size: 16px;
    font-weight: bold;
    color: var(--bg-light, #ffffff);
    background-color: var(--blue-400, #0D8ABC);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.profile-avatar-btn:hover {
    border-color: var(--gold-hover, #F0BB22);
}

/* --- Menú Desplegable --- */
.custom-header__auth .auth-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 15px) !important;
    right: 0 !important;
    width: 280px !important;
    background-color: var(--bg-light, #ffffff) !important; /* Respaldo en blanco forzado */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 24px;
    
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999999 !important; /* Capa extrema para sobreponerse */
}

.custom-header__auth .auth-dropdown-menu.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0);
}

/* Textos del menú y Formulario */
.auth-dropdown-header h4 { margin: 0 0 5px 0; color: var(--blue-400, #0D8ABC); font-size: 18px; font-weight: 600; }
.auth-dropdown-header p { margin: 0 0 20px 0; color: var(--text-dark, #333333); font-size: 13px; line-height: 1.4; }

.login-form { display: flex; flex-direction: column; gap: 16px; }
.input-group { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.input-group label { font-size: 13px; font-weight: 500; color: var(--text-dark, #333333); margin: 0; }
.input-group input {
    padding: 10px 12px; border: 1px solid var(--border-color, #e0e0e0); border-radius: 6px;
    font-size: 14px; outline: none; box-shadow: none; transition: border-color 0.3s ease; width: 100%; box-sizing: border-box;
}
.input-group input:focus { border-color: var(--blue-400, #0D8ABC); box-shadow: 0 0 0 3px rgba(13, 138, 188, 0.1); }
.btn-ingresar {
    background-color: var(--blue-400, #0D8ABC); color: #ffffff; border: none; padding: 12px;
    border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background-color 0.3s ease; margin-top: 8px; width: 100%;
}
.btn-ingresar:hover { background-color: var(--gold-hover, #F0BB22); }

/* Lista Perfil */
.auth-menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.auth-menu-list li a { text-decoration: none; color: var(--text-dark, #333333); font-size: 14px; display: block; padding: 10px 12px; border-radius: 6px; transition: all 0.2s ease; }
.auth-menu-list li a:hover { background-color: #f5f5f5; color: var(--blue-400, #0D8ABC); }
.auth-menu-list li a.text-danger { color: #d9534f; }
.auth-menu-list li a.text-danger:hover { background-color: #fdf2f2; }

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media (max-width: 576px) {
    .custom-header { padding: 10px 15px; }
    .custom-header__logo img { height: 32px; }
    .custom-header__actions { gap: 12px; }
    .custom-zoom-btn { width: 28px; height: 28px; font-size: 16px; }
    .default-avatar-icon { width: 36px; height: 36px; font-size: 14px; }
    .custom-header__auth .auth-dropdown-menu {
        width: 280px !important; max-width: 90vw !important; right: -5px !important;
    }
}

@media (max-width: 360px) {
    .custom-header { padding: 8px 10px; }
    .custom-header__logo img { height: 26px; }
    .custom-header__actions { gap: 8px; }
    .custom-zoom-btn { width: 24px; height: 24px; font-size: 14px; }
    .custom-header__zoom { gap: 2px; }
    .default-avatar-icon { width: 32px; height: 32px; font-size: 13px; }
    .default-avatar-icon svg { width: 18px; height: 18px; }
}

/* --- Contenedor del Modal --- */
.custom-alert-content {
    border-radius: 16px; /* Bordes suaves */
    border: none;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}

/* --- Botón Cerrar Superior --- */
.custom-alert-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #999999;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 10;
}
.custom-alert-close:hover {
    color: #333333;
}

/* --- Círculo del Ícono --- */
.custom-alert-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 38px;
    transition: all 0.3s ease;
}

/* --- Estados de Color (Puedes aplicarlos con JS) --- */
/* Éxito (Azul corporativo o Verde) */
.custom-alert-icon-wrapper.state-success {
    background-color: rgba(13, 138, 188, 0.1); /* Fondo azul clarito */
    color: #0D8ABC; /* Azul Seguros Mundial */
}
/* Error (Rojo) */
.custom-alert-icon-wrapper.state-error {
    background-color: rgba(220, 53, 69, 0.1); /* Fondo rojo clarito */
    color: #dc3545; /* Rojo alerta */
}
/* Advertencia (Amarillo/Naranja) */
.custom-alert-icon-wrapper.state-warning {
    background-color: rgba(255, 193, 7, 0.1); 
    color: #ffc107; 
}

/* --- Tipografía --- */
.custom-alert-title {
    font-size: 24px;
    font-weight: 700;
    color: #043D56;
    margin-bottom: 12px;
}
.custom-alert-text {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- Botón Inferior --- */
.custom-alert-btn {
    background-color: #001a33; /* Azul muy oscuro casi negro (como en tu imagen) */
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}
.custom-alert-btn:hover {
    background-color: #0D8ABC; /* Hover azul corporativo */
}
.custom-alert-btn:active {
    transform: scale(0.97); /* Pequeño efecto al hacer clic */
}


.swiper-navigation-icon{
    display:none;
}

.card-benefits__img{
    width: 120px;
    height: 120px;
}








/* ===================== PAGOS landing (section 6525) ===================== */
.pg-hero{ background:#E0F3FE; }
.pg-hero__row{ min-height:520px; padding:48px 0; }
.pg-hero__eyebrow{ font-size:14px; line-height:1.5; font-weight:400; text-transform:uppercase; letter-spacing:0; margin-bottom:18px; }
.pg-hero__title{ font-size:40px; line-height:1.2; margin:0 0 22px; max-width:16ch; }
.pg-hero__sub{ font-size:18px; line-height:1.5; color:#526077; max-width:34ch; margin:0 0 30px; }
.pg-hero__btn{ display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1.5; padding:14px 30px; border-radius:34px; }
.pg-hero__media{ text-align:right; }
.pg-hero__media img{ width:100%; max-width:560px; height:auto; margin-left:auto; }
@media (max-width:991px){
  .pg-hero__row{ min-height:0; padding:34px 0; }
}

/* ===================== PAGOS · módulo métodos (section 6525) ===================== */
.pg-scope{ --pg-navy:var(--neutral-900,#033243); --pg-ink:var(--neutral-900,#033243); --pg-muted:#526077;
  --pg-primary:#065F86; --pg-blue:#065F86; --pg-gold:var(--tertiary-600,#FBBB21);
  --pg-line:#D5DAE2; --pg-soft:#E0F3FE; --pg-card:#fff; }
.pg-metodos{ padding:68px 0 80px; }
.pg-metodos h2{ font-size:34px; font-weight:700; color:var(--pg-navy); margin:0 0 14px; }
.pg-metodos__intro{ font-size:18px; color:var(--pg-muted); margin:0 0 34px; }
.pg-tabs{ position:relative; border-bottom:1px solid var(--pg-line); margin-bottom:30px; }
.pg-tablist{ display:flex; gap:40px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab; }
.pg-tablist::-webkit-scrollbar{ display:none; }
.pg-tablist.is-dragging{ cursor:grabbing; }
.pg-tab{ display:inline-flex; align-items:center; gap:10px; background:0; border:0; cursor:pointer;
  white-space:nowrap; padding:8px 2px 16px; font-family:inherit; font-size:16px; color:var(--pg-primary);
  border-bottom:3px solid transparent; margin-bottom:-1px; transition:color .2s ease; }
.pg-tab svg{ width:22px; height:22px; flex:0 0 22px; }
/* el icono de la pestaña viene del campo «Icon Class Tab» de la playlist y se pinta
   con la tipografia de iconos del sitio (icons-seguros), como el resto del modulo */
.pg-tab .pg-tab__ico{ font-size:22px; line-height:1; color:inherit; flex:0 0 auto; }
.pg-tab:hover{ color:var(--pg-navy); }
.pg-tab[aria-selected="true"]{ color:var(--pg-navy); font-weight:700; border-bottom-color:var(--pg-gold); }
.pg-method{ display:none; }
.pg-method.is-active{ display:block; animation:pgfade .25s ease; }
@keyframes pgfade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.pg-lead{ font-size:18px; color:var(--pg-ink); margin:0 0 28px; }
.pg-note{ font-size:15px; color:var(--pg-muted); line-height:1.55; margin:28px 0 0; }
.pg-note b{ color:var(--pg-ink); }
.pg-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pg-cards--2{ grid-template-columns:repeat(2,1fr); }
.pg-cards--3{ grid-template-columns:repeat(3,1fr); }
.pg-card{ border:1px solid var(--pg-line); border-radius:16px; padding:30px 28px 34px; background:var(--pg-card); }
.pg-card--flat{ border-radius:14px; }
.pg-card h3{ font-size:21px; font-weight:700; color:var(--pg-navy); margin:22px 0 12px; }
.pg-card p{ font-size:16px; color:var(--pg-muted); line-height:1.5; margin:0; }
.pg-badge{ width:70px; height:70px; position:relative; display:grid; place-items:center; }
.pg-badge .clover{ position:absolute; inset:0; width:100%; height:100%; }
/* si el articulo trae una imagen, ESA es la insignia completa (trebol + icono),
   editable desde el admin; el trebol dibujado en el skin es solo el respaldo */
.pg-badge__img{ width:100%; height:100%; object-fit:contain; display:block; }
.pg-badge .pg-ico{ position:relative; width:30px; height:30px; color:var(--pg-primary); }
.pg-link{ display:inline-flex; align-items:center; gap:10px; color:var(--pg-primary); font-weight:700; font-size:16px; margin-top:18px; text-decoration:none; }
.pg-link svg{ width:18px; height:18px; transition:transform .2s ease; }
.pg-link:hover{ color:#044A68; } .pg-link:hover svg{ transform:translateX(4px); }
.pg-split{ display:grid; grid-template-columns:320px 1fr; gap:0; }
.pg-alts{ border-right:1px solid var(--pg-line); padding-right:26px; }
.pg-alts h3,.pg-side h3{ font-size:22px; font-weight:700; color:var(--pg-primary); margin-bottom:20px; }
.pg-alt{ width:100%; text-align:left; background:0; border:0; border-left:3px solid transparent; cursor:pointer; font-family:inherit; padding:16px; border-radius:10px; transition:background .2s ease; }
.pg-alt+.pg-alt{ margin-top:6px; }
.pg-alt b{ display:block; color:var(--pg-navy); font-size:17px; margin-bottom:6px; }
.pg-alt span{ display:block; color:var(--pg-muted); font-size:15px; line-height:1.45; }
.pg-alt[aria-selected="true"]{ background:var(--pg-soft); border-left-color:var(--pg-primary); }
.pg-side{ padding-left:34px; }
.pg-subpanel{ display:none; } .pg-subpanel.is-active{ display:block; }
.pg-side__intro{ font-size:16px; color:var(--pg-muted); margin:0 0 24px; }
.pg-h4{ font-size:22px; font-weight:700; color:var(--pg-primary); margin:40px 0 20px; }
/* OFICINAS — medido sobre el Figma: tarjeta blanca de borde 1px #0D647D y radio 12,
   direccion en una sola columna a todo el ancho y horario en dos columnas
   (un parrafo del RTE por columna: etiqueta en negrita y debajo sus franjas). */
.pg-offices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
.pg-office{ background:#FFFFFF; border:1px solid var(--pg-card-line,#0D647D); border-radius:12px; padding:21px 24px 24px; }
.pg-office h4{ font-size:20px; line-height:1.3; font-weight:700; color:var(--pg-navy); margin:0 0 27px; }
.pg-row{ display:flex; align-items:center; gap:12px; color:var(--pg-ink); font-size:16px; line-height:1.5; margin:0 0 30px; }
.pg-row:last-child{ margin-bottom:0; }
.pg-row svg{ width:20px; height:20px; flex:0 0 20px; color:var(--pg-primary); }
.pg-row > span{ flex:1 1 auto; min-width:0; }
.pg-row--hours{ gap:20px; }
.pg-hours{ flex:1 1 auto; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; font-size:14px; color:var(--pg-ink); }
.pg-hours p{ margin:0; }
.pg-hours b{ display:block; font-size:16px; line-height:1.4; font-weight:700; color:var(--pg-navy); }
/* el RTE escribe <b>etiqueta</b><br>franja: con la etiqueta en bloque ese <br> abriria
   una linea vacia, asi que se anula y es el propio bloque el que baja de renglon. */
.pg-hours b + br{ display:none; }
.pg-banksimg{ max-width:720px; width:100%; height:auto; display:block; margin-top:8px; }
/* bancos y corresponsales: un logo por articulo, 5 por fila en escritorio y
   2 por fila mas pequenos en movil, como el Figma */
.pg-banks{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px 14px; align-items:center; margin:16px 0 6px; }
.pg-bank{ display:flex; align-items:center; justify-content:center; }
/* cada SVG viene recortado sobre el MISMO lienzo, asi que con un ancho comun
   todos conservan el tamano relativo del diseno sin reglas por logo */
.pg-bank img{ width:100%; max-width:150px; height:auto; display:block; }
@media (max-width:991px){ .pg-banks{ grid-template-columns:repeat(3,1fr); } .pg-bank img{ max-width:140px; } }
@media (max-width:767px){ .pg-banks{ grid-template-columns:repeat(2,1fr); gap:6px 10px; } .pg-bank img{ max-width:120px; } }
.pg-logos3{ display:flex; align-items:center; gap:44px; flex-wrap:wrap; margin:10px 0 30px; }
.pg-logos3 img{ height:40px; width:auto; }
/* CONVENIO — todas las lineas con la MISMA separacion: el interlineado fijo de 42px
   (medido en el Figma) vale igual para el titulo que para los datos, y el <br> que
   sigue al <b> se anula porque si no abre una linea vacia debajo del titulo. */
.pg-info{ border:1px solid var(--pg-line); border-radius:16px; padding:16px 24px; max-width:420px; font-size:18px; line-height:42px; color:var(--pg-ink); }
.pg-info b{ display:block; color:var(--pg-navy); font-size:20px; font-weight:700; margin:0; }
.pg-info b + br{ display:none; }
.pg-info p{ margin:0; font-size:18px; color:var(--pg-ink); }
.pg-allies{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:8px; }
.pg-ally{ display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--pg-line); border-radius:14px; padding:22px 24px; transition:border-color .2s ease,box-shadow .2s ease; }
.pg-ally:hover{ border-color:#bcd6e8; box-shadow:0 6px 20px rgba(11,92,135,.08); }
.pg-ally img{ max-height:40px; max-width:150px; width:auto; height:auto; }
.pg-ally svg{ width:22px; height:22px; color:var(--pg-navy); flex:0 0 22px; }
.pg-afterbtn{ font-size:17px; color:var(--pg-ink); margin:30px 0 20px; }
@media (max-width:991px){
  .pg-metodos{ padding:44px 0 52px; } .pg-metodos h2{ font-size:26px; }
  .pg-split{ grid-template-columns:1fr; }
  .pg-alts{ border-right:0; border-left:2px solid var(--pg-line); padding-right:0; margin-bottom:26px; }
  .pg-side{ padding-left:0; } .pg-allies{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){ .pg-cards,.pg-cards--2,.pg-cards--3,.pg-offices,.pg-allies{ grid-template-columns:1fr; } }
/* OFICINAS en movil: la tarjeta deja de usar el reparto de escritorio — la direccion
   sigue siendo un bloque horizontal con su icono y el horario pasa a UNA columna,
   con la etiqueta en la misma linea que su franja (como el Figma de 390). */
@media (max-width:767px){
  .pg-offices{ gap:16px; }
  .pg-office{ padding:16px 20px 20px; }
  .pg-office h4{ margin-bottom:11px; }
  .pg-row{ margin-bottom:9px; }
  .pg-row--hours{ gap:12px; }
  .pg-hours{ display:block; }
  .pg-hours p + p{ margin-top:3px; }
  .pg-hours b{ display:inline; font-size:14px; font-weight:400; color:inherit; margin-right:4px; }
  .pg-hours b + br{ display:none; }
}

/* PAGOS methods v2 — JS-assembled groups + sub-nav */
.pg-panels{ margin-top:0; }
.pg-method{ display:none; }
.pg-method.is-active{ display:block; animation:pgfade .25s ease; }
.pg-method__inner{ width:100%; }
.pg-side > .pg-method{ display:none; animation:none; }
.pg-side > .pg-method.pg-sub-active{ display:block; }

/* PAGOS button (was missing — hero/financiación/encargos use .pg-btn) */
.pg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--pg-primary,#065F86); color:#fff; font-weight:500; font-size:16px; line-height:1.5; border:0; border-radius:34px; padding:14px 30px; cursor:pointer; text-decoration:none; transition:background .2s ease, transform .2s ease; }
.pg-btn:hover{ background:#044A68; color:#fff; transform:translateY(-1px); }
.pg-btn svg{ width:20px; height:20px; }

/* PAGOS badge icons (icon-font) + clover tint rotation to match the design */
.pg-badge i.pg-ico{ font-size:28px; line-height:1; color:var(--pg-primary,#065F86); position:relative; }
.pg-cards .pg-card:nth-child(3n+1) .clover g{ fill:#FEF2C7; }
.pg-cards .pg-card:nth-child(3n+2) .clover g{ fill:#E0F3FE; }
.pg-cards .pg-card:nth-child(3n+3) .clover g{ fill:#DFF9E5; }

/* ============================================================
   COMPARADOR DE PRODUCTOS (SkinV2/058ComparadorProductos)
   Layout only — colors/typography reuse the V2 palette (with hex fallbacks).
   ============================================================ */
.v2-comparador{
  /* TEXT: #033243 (ink: eyebrow + title) and #526077 (muted: description, bullets, note)
     ACCENT #065F86: price amount, bullet icons, swiper arrows · BUTTONS #0077AA */
  --cmp-ink:#033243;
  --cmp-muted:#526077;
  --cmp-accent:#065F86;
  --cmp-primary:#0077AA;
  --cmp-primary-dark:#004766;
  --cmp-line:#E3E8EC;
  padding:56px 0 64px;
}
.v2-comparador__head{ margin-bottom:28px; text-align:left; }
.v2-comparador__title{ line-height:1.15; font-weight:700; color:var(--cmp-ink); margin:0 0 12px; text-align:left; }
/* el subtitulo va en UNA sola linea: sin ancho maximo, ocupa el del contenedor */
.v2-comparador__subtitle{ font-size:18px; line-height:1.5; color:var(--cmp-muted); margin:0; max-width:none; text-align:left; }

.v2-comparador__viewport{ padding:0; }
.v2-comparador__swiper{ padding:6px 4px 8px; }
.v2-comparador__swiper .swiper-slide{ height:auto; display:flex; }

/* card — everything left aligned (the site centres by default) */
.v2-cmp-card{
  display:flex; flex-direction:column; width:100%; text-align:left;
  background:#fff; border:1px solid var(--cmp-line); border-radius:16px; overflow:hidden;
  color:var(--cmp-ink);
}
.v2-cmp-card *{ text-align:left; }
/* image box: full-bleed to the card edges, no inner margin */
.v2-cmp-card__media{ padding:0; display:block; }
.v2-cmp-card__media img{ width:100%; height:140px; object-fit:cover; display:block; }
.v2-cmp-card__media-ph{ display:block; width:100%; height:140px;
  background:linear-gradient(135deg,#cfe6f4,#eaf4fb); }
.v2-cmp-card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:18px 18px 20px; }
.v2-cmp-card__eyebrow{ font-size:14px; line-height:1.4; color:var(--cmp-ink); margin-bottom:2px; }
.v2-cmp-card__title{ font-size:22px; line-height:1.2; font-weight:700; color:var(--cmp-ink); margin:0 0 8px; }
.v2-cmp-card__desc{ font-size:14px; line-height:1.5; color:var(--cmp-ink); margin:0 0 16px; }

.v2-cmp-card__bullets{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:10px; }
.v2-cmp-card__bullets li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.4; color:var(--cmp-muted); }
.v2-cmp-card__ico{ font-size:18px; line-height:1; color:var(--cmp-accent); flex:0 0 auto; margin-top:1px; }

/* el precio NO se empuja al fondo: arranca justo despues de las vinetas, que el JS
   deja a la misma altura en todas las tarjetas; los botones son los que bajan. */
.v2-cmp-card__price{ font-size:16px; color:var(--cmp-ink); margin:0 0 4px; }
.v2-cmp-card__price b{ font-size:22px; font-weight:700; color:var(--cmp-accent); }
.v2-cmp-card__price span{ font-size:16px; color:var(--cmp-ink); }
.v2-cmp-card__note{ font-size:14px; line-height:1.4; color:var(--cmp-muted); margin:6px 0 16px; }

.v2-cmp-card__actions{ display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.v2-cmp-card__btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px;
  border-radius:28px; font-size:16px; font-weight:500; line-height:1; text-decoration:none; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease; }
.v2-cmp-card__btn--primary{ background:var(--cmp-primary); color:#fff; border:1px solid var(--cmp-primary); }
.v2-cmp-card__btn--primary:hover{ background:var(--cmp-primary-dark); border-color:var(--cmp-primary-dark); color:#fff; }
.v2-cmp-card__btn--ghost{ background:#fff; color:var(--cmp-primary); border:1px solid var(--cmp-primary); }
.v2-cmp-card__btn--ghost:hover{ background:var(--cmp-primary); color:#fff; }

/* nav arrows — OUTSIDE the track, solid #065F86 circle, 30% opacity when there is nothing more to scroll */
.v2-comparador__nav{ position:absolute; top:45%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:0; background:var(--cmp-accent); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; opacity:1;
  transition:opacity .2s ease, background .2s ease; }
.v2-comparador__nav:hover{ background:#054A69; color:#fff; }
.v2-comparador__nav i{ font-size:18px; line-height:1; color:#fff; }
.v2-comparador__nav--prev{ left:-56px; }
.v2-comparador__nav--next{ right:-56px; }
.v2-comparador__nav.is-disabled{ opacity:.3; pointer-events:none; }

/* pagination dots */
.v2-comparador__dots{ position:static; margin-top:22px; display:flex; justify-content:center; gap:8px; }
.v2-comparador__dots .swiper-pagination-bullet{ width:9px; height:9px; background:var(--cmp-line); opacity:1; border-radius:9px; transition:width .2s ease, background .2s ease; }
.v2-comparador__dots .swiper-pagination-bullet-active{ width:26px; background:var(--cmp-accent); }

@media (max-width:991px){
  .v2-comparador{ padding:40px 0 48px; }
  .v2-comparador__subtitle{ font-size:16px; }
  .v2-comparador__nav{ display:none; }
}

/* ============================================================
   PREGUNTAS FRECUENTES (SkinV2/059ComparadorFaq)
   Plain Bootstrap collapse — no .accordion-* classes, so nothing to override.
   ============================================================ */
.v2-faq{
  --faq-ink:#033243;
  --faq-muted:#526077;
  --faq-band:#E0F3FE;
  --faq-card:#FDFEFE;
  background:var(--faq-band);
  padding:48px 0 56px;
}
.v2-faq *{ text-align:left; }
.v2-faq__title{ line-height:1.2; font-weight:700; color:var(--faq-ink); margin:0 0 24px; }
.v2-faq__list{ display:flex; flex-direction:column; gap:16px; }
.v2-faq__item{ background:var(--faq-card); border-radius:12px; overflow:hidden; }
.v2-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  background:transparent; border:0; padding:18px 24px 10px; cursor:pointer;
  font-size:20px; font-weight:700; line-height:1.3; color:var(--faq-ink); text-align:left;
}
.v2-faq__q:focus-visible{ outline:2px solid var(--faq-ink); outline-offset:-2px; }
.v2-faq__ico{ font-size:14px; line-height:1; color:var(--faq-ink); flex:0 0 auto; transition:transform .2s ease; }
.v2-faq__q[aria-expanded="false"] .v2-faq__ico{ transform:rotate(180deg); }
.v2-faq__a{ padding:0 24px 20px; font-size:16px; line-height:1.5; color:var(--faq-muted); }
.v2-faq__a p{ margin:0 0 8px; }
.v2-faq__a p:last-child{ margin-bottom:0; }

@media (max-width:767px){
  .v2-faq{ padding:36px 0 40px; }
  .v2-faq__q{ padding:16px 18px 8px; font-size:18px; }
  .v2-faq__a{ padding:0 18px 16px; }
}

/* ===== MODULO DE ACCESIBILIDAD + GALERIA DE MODULOS (inicio) ===== */
/* =========================================================================
   MÓDULO DE ACCESIBILIDAD · bloque BEM  .v2-a11y
   Capa V2 aditiva: no toca ninguna regla existente. Las medidas salen de los
   mockups (riel 72px, panel 356px, fichas 40px, radio 20px, superficie
   #F6F7F9, fichas #295E83, apagado #8097A0).
   ========================================================================= */
.v2-a11y{
  --v2-a11y-brand:#065F86;
  --v2-a11y-brand-dark:#054A68;
  --v2-a11y-surface:#F6F7F9;
  --v2-a11y-border:#D5DAE2;
  --v2-a11y-ink:#033243;
  --v2-a11y-title:#000000;
  --v2-a11y-link:#0077AA;
  --v2-a11y-off:var(--neutral-500,#8097A0);
  --v2-a11y-knob:var(--neutral-000,#FDFEFE);
  --v2-a11y-radius:16px;
  /* Capa a pantalla completa SIN transform: así la barra del lector y la capa
     oscura se posicionan contra la ventana y no contra el riel. El riel y el
     panel van dentro del dock, que es quien los mantiene juntos. */
  position:fixed;
  inset:0;
  z-index:1090;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-family:var(--font-primary,"Ubuntu",system-ui,sans-serif);
  color:var(--v2-a11y-ink);
  pointer-events:none;
}
.v2-a11y__dock{position:relative;pointer-events:none}
.v2-a11y *,
.v2-a11y *::before,
.v2-a11y *::after{box-sizing:border-box}

/* --- capa oscura (solo móvil) --- */
.v2-a11y__overlay{
  position:fixed;
  inset:0;
  z-index:0;
  background:#00000040;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}

/* --- riel lanzador --- */
.v2-a11y__launcher{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px;
  background:var(--v2-a11y-surface);
  border-radius:var(--v2-a11y-radius) 0 0 var(--v2-a11y-radius);
  /* El borde de 1px va INSET (como el stroke interior de Figma) para que el
     módulo mida exactamente 72px = 16 + 40 + 16 y no 74. Sin sombra. */
  box-shadow:inset 0 0 0 1px var(--v2-a11y-border);
  pointer-events:auto;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.v2-a11y--open .v2-a11y__launcher{
  opacity:0;
  visibility:hidden;
  transform:translateX(16px);
}

/* --- botón del riel --- */
.v2-a11y__trigger{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:8px;
  background:var(--v2-a11y-brand);
  color:#fff;
  cursor:pointer;
  transition:background-color .2s ease,transform .2s ease;
}
.v2-a11y__trigger:hover{background:var(--v2-a11y-brand-dark)}
.v2-a11y__trigger:active{transform:scale(.95)}
.v2-a11y__trigger:focus-visible{outline:2px solid var(--v2-a11y-brand);outline-offset:3px}
.v2-a11y__trigger svg{display:block;width:22px;height:22px}

/* --- panel --- */
.v2-a11y__panel{
  position:absolute;
  top:0;
  right:0;
  z-index:2;
  width:356px;
  max-width:100vw;
  padding:24px;
  background:var(--v2-a11y-surface);
  border-radius:var(--v2-a11y-radius) 0 0 var(--v2-a11y-radius);
  /* mismo fondo, borde y radio que el módulo cerrado */
  box-shadow:inset 0 0 0 1px var(--v2-a11y-border);
  opacity:0;
  visibility:hidden;
  transform:translateX(24px);
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
.v2-a11y--open .v2-a11y__panel{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

.v2-a11y__head{
  position:relative;
  margin:0 0 20px;
}
.v2-a11y__title{
  margin:0;
  font-size:20px;
  line-height:1.2;
  font-weight:700;
  color:var(--v2-a11y-title);
}
.v2-a11y__close{
  display:none;
  position:absolute;
  top:-6px;
  right:-4px;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--v2-a11y-ink);
  cursor:pointer;
  transition:background-color .2s ease;
}
.v2-a11y__close:hover{background:var(--neutral-200,#DEE4E7)}
.v2-a11y__close:focus-visible{outline:2px solid var(--v2-a11y-brand);outline-offset:2px}
.v2-a11y__close svg{display:block;width:18px;height:18px}

/* --- lista de opciones --- */
.v2-a11y__list{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
.v2-a11y__item{
  display:grid;
  grid-template-columns:40px 1fr auto;
  align-items:center;
  gap:16px;
}
.v2-a11y__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:8px;
  background:var(--v2-a11y-brand);
  color:#fff;
}
.v2-a11y__icon svg{display:block;width:22px;height:22px}
.v2-a11y__label{
  margin:0;
  font-size:18px;
  line-height:1.5;
  font-weight:400;
  color:var(--v2-a11y-ink);
  cursor:pointer;
}
.v2-a11y__control{display:flex;align-items:center;justify-content:flex-end}

/* --- A- / A+ --- */
.v2-a11y__steps{display:flex;align-items:center;gap:4px}
.v2-a11y__step{
  min-width:34px;
  height:34px;
  padding:0 6px;
  border:0;
  border-radius:8px;
  background:transparent;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1;
  color:var(--v2-a11y-ink);
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.v2-a11y__step:hover{background:var(--neutral-200,#DEE4E7)}
.v2-a11y__step:focus-visible{outline:2px solid var(--v2-a11y-brand);outline-offset:2px}
.v2-a11y__step[disabled]{opacity:.4;cursor:not-allowed;background:transparent}

/* --- interruptores --- */
.v2-a11y__switch{
  position:relative;
  display:inline-flex;
  flex:none;
  width:40px;
  height:24px;
}
.v2-a11y__switch-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.v2-a11y__switch-track{
  position:absolute;
  inset:0;
  border-radius:50px;
  background:var(--v2-a11y-off);
  transition:background-color .2s ease;
}
.v2-a11y__switch-track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--v2-a11y-knob);
  box-shadow:0 2px 4px #0000002e;
  transition:transform .2s ease;
}
.v2-a11y__switch-input:checked + .v2-a11y__switch-track{background:var(--v2-a11y-brand)}
.v2-a11y__switch-input:checked + .v2-a11y__switch-track::after{transform:translateX(16px)}
.v2-a11y__switch-input:focus-visible + .v2-a11y__switch-track{outline:2px solid var(--v2-a11y-brand);outline-offset:3px}

/* --- restablecer --- */
.v2-a11y__reset{
  display:block;
  margin:24px auto 0;
  padding:4px 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  font-family:inherit;
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  color:var(--v2-a11y-link);
  text-decoration:underline;
  cursor:pointer;
  transition:color .2s ease,background-color .2s ease;
}
.v2-a11y__reset:hover{color:var(--v2-a11y-brand-dark);background:var(--neutral-200,#DEE4E7)}
.v2-a11y__reset:focus-visible{outline:2px solid var(--v2-a11y-brand);outline-offset:2px}

/* --- barra del lector de página --- */
.v2-a11y__player{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:calc(100vw - 48px);
  padding:12px 16px;
  background:var(--v2-a11y-surface);
  border-radius:var(--v2-a11y-radius);
  box-shadow:inset 0 0 0 1px var(--v2-a11y-border);
  pointer-events:auto;
}
.v2-a11y__player[hidden]{display:none}
.v2-a11y__player-status{
  margin:0;
  font-size:14px;
  line-height:1.4;
  color:var(--v2-a11y-ink);
  max-width:34ch;
}
.v2-a11y__player-controls{display:flex;align-items:center;gap:8px}
.v2-a11y__player-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:8px;
  background:var(--v2-a11y-brand);
  color:#fff;
  cursor:pointer;
  transition:background-color .2s ease;
}
.v2-a11y__player-btn:hover{background:var(--v2-a11y-brand-dark)}
.v2-a11y__player-btn:focus-visible{outline:2px solid var(--v2-a11y-brand);outline-offset:3px}
.v2-a11y__player-btn[disabled]{opacity:.4;cursor:not-allowed}
.v2-a11y__player-btn svg{display:block;width:18px;height:18px}
.v2-a11y__player-select{
  height:40px;
  padding:0 8px;
  border:1px solid var(--v2-a11y-border);
  border-radius:8px;
  background:#fff;
  font-family:inherit;
  font-size:14px;
  color:var(--v2-a11y-ink);
  cursor:pointer;
}
.v2-a11y__player-select:focus-visible{outline:2px solid var(--v2-a11y-brand);outline-offset:2px}
@media (max-width:991.98px){
  .v2-a11y__player{
    left:16px;
    right:16px;
    bottom:88px;
    max-width:none;
    justify-content:space-between;
  }
  .v2-a11y__player-status{font-size:13px;max-width:20ch}
}

/* --- resalte del bloque que se está leyendo --- */
.v2-a11y-speaking{
  background-color:#FFF3C4!important;
  box-shadow:0 0 0 3px #FFF3C4,0 0 0 5px var(--v2-a11y-brand,#065F86);
  border-radius:4px;
  scroll-margin:96px;
}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y-speaking,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y-speaking *{
  background-color:#FF0!important;
  color:#000!important;
}

/* --- texto solo para lectores de pantalla --- */
.v2-a11y__sr{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* =======================  TABLET / MÓVIL  ======================= */
@media (max-width:991.98px){
  /* La barra queda pegada al fondo de la pantalla, sin efecto flotante:
     esquinas inferiores a 0 y sin borde inferior. */
  .v2-a11y{
    justify-content:center;
    align-items:flex-end;
  }
  .v2-a11y__launcher{
    flex-direction:row;
    gap:16px;
    border-radius:var(--v2-a11y-radius) var(--v2-a11y-radius) 0 0;
    /* sin línea inferior: la barra termina en el borde de la pantalla */
    box-shadow:inset 0 1px 0 0 var(--v2-a11y-border),
               inset 1px 0 0 0 var(--v2-a11y-border),
               inset -1px 0 0 0 var(--v2-a11y-border);
  }
  .v2-a11y--open .v2-a11y__launcher{transform:translateY(16px)}
  .v2-a11y--open .v2-a11y__overlay{opacity:1;visibility:visible;pointer-events:auto}

  .v2-a11y__panel{
    position:fixed;
    top:50%;
    left:50%;
    right:auto;
    width:min(300px,calc(100% - 40px));
    padding:20px;
    border-radius:var(--v2-a11y-radius);
    transform:translate(-50%,-46%);
  }
  .v2-a11y--open .v2-a11y__panel{transform:translate(-50%,-50%)}

  /* La X va arriba a la derecha y el título ocupa todo el ancho, centrado
     debajo, para que "Personalizar visualización" quepa en una sola línea. */
  .v2-a11y__head{margin-bottom:16px;padding:18px 0 0}
  .v2-a11y__title{font-size:18px;line-height:24px;text-align:center}
  .v2-a11y__close{display:flex;top:-12px;right:-6px}
  .v2-a11y__list{gap:16px}
  .v2-a11y__item{grid-template-columns:36px 1fr auto;gap:12px}
  .v2-a11y__icon{width:36px;height:36px;border-radius:8px}
  .v2-a11y__icon svg{width:20px;height:20px}
  .v2-a11y__trigger{width:40px;height:40px}
  .v2-a11y__reset{margin-top:18px}

  /* ---- hueco para que la barra no tape el pie ----
     En tablet y móvil el módulo se apoya en el borde inferior de la pantalla y
     se queda encima de la franja negra del pie (el footer de Expresia). Se le
     reserva justo el alto de la barra, que el propio módulo mide y publica en
     --v2-a11y-barra, más 16 px de aire. La regla sólo actúa en las páginas que
     llevan el módulo, porque la clase la pone su JavaScript. */
  html.v2-a11y-fijo .footer-bbt{
    margin-bottom:calc(var(--v2-a11y-barra, 72px) + 16px);
  }
  /* Si una página no tuviera esa franja, el hueco se reserva al final del body. */
  html.v2-a11y-fijo body:not(:has(.footer-bbt)){
    padding-bottom:calc(var(--v2-a11y-barra, 72px) + 16px);
  }
}
@media (prefers-reduced-motion:reduce){
  .v2-a11y,
  .v2-a11y *{transition:none!important;animation:none!important}
}

/* ---- red de seguridad mientras el texto está ampliado ----
   Solo se activa con la clase que pone el módulo, así que el sitio sin
   ampliar queda exactamente igual. Evita que el texto más grande rompa
   alturas fijas o desborde en palabras largas. */
html.v2-a11y-text-scaled body{overflow-wrap:break-word}
html.v2-a11y-text-scaled .v2-button-primary,
html.v2-a11y-text-scaled .v2-button-secondary,
html.v2-a11y-text-scaled .v2-button-tertiary,
html.v2-a11y-text-scaled .button-primary,
html.v2-a11y-text-scaled .button-secondary,
html.v2-a11y-text-scaled .lab__btn{
  height:auto;
  min-height:36px;
  white-space:normal;
}
html.v2-a11y-text-scaled .lab__tag{height:auto}

/* Nada de texto recortado mientras el texto está ampliado o separado: se
   anulan los recortes de línea y los puntos suspensivos, y las palabras muy
   largas se parten en vez de desbordar. Las cajas con ALTO FIJO las arregla
   el JavaScript (no se pueden detectar desde CSS), dejándolas crecer con su
   alto original como mínimo. */
html.v2-a11y-text-scaled.v2-a11y-text-scaled.v2-a11y-text-scaled :is(p,h1,h2,h3,h4,h5,h6,li,a,span,strong,em,small,td,th,dd,dt,label,figcaption,button,div),
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading :is(p,h1,h2,h3,h4,h5,h6,li,a,span,strong,em,small,td,th,dd,dt,label,figcaption,button,div){
  -webkit-line-clamp:unset!important;
  text-overflow:clip!important;
  overflow-wrap:break-word;
}

/* Las clases `.text-elipsis-1…8` del sitio (72 usos sólo en la galería) recortan
   a N líneas con `display:-webkit-box`, la caja de WebKit antigua. Al quitarles
   el recorte de línea, esa caja se queda con ALTO CERO dentro de una columna
   flex y el texto pinta fuera de ella: en las tarjetas de noticias el titular y
   la fecha arrancaban en la misma línea, uno encima del otro. Vuelven a ser
   cajas normales, que es lo que necesitan para ocupar lo que miden. El selector
   incluye los descendientes porque la regla del sitio también lo hace. */
html.v2-a11y-text-scaled :is([class*="text-elipsis-"], [class*="text-elipsis-"] *),
html.v2-a11y-reading :is([class*="text-elipsis-"], [class*="text-elipsis-"] *){
  display:block!important;
  overflow:visible!important;
}

/* Las columnas de enlaces del pie (`.quickLinks__items`, que usan «Enlaces de
   interés» y «Medios de pago») tienen un ANCHO FIJO de 175 px y van de dos en
   dos en el móvil: con el texto ampliado y separado a la vez, una etiqueta de
   dos líneas se mete en la columna vecina. En pantalla estrecha pasan a ocupar
   toda la fila, una debajo de otra. */
@media (max-width:767.98px){
  html.v2-a11y-text-scaled .quickLinks__items,
  html.v2-a11y-reading .quickLinks__items{
    width:auto!important;
    flex:0 0 100%!important;
    max-width:100%!important;
  }
}

/* Dos módulos colocan el texto EN CAPAS (tarjetas absolutas en abanico, una
   rejilla con el año montado sobre el título): ahí no hay alto que soltar, hay
   que deshacer la capa. Con el texto ampliado o separado se apilan en vertical,
   que es legible; sin esas clases el sitio queda exactamente igual. */
html.v2-a11y-text-scaled [class*="benefits-"][class*="__display"],
html.v2-a11y-reading [class*="benefits-"][class*="__display"]{
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column;
  gap:16px;
}
html.v2-a11y-text-scaled [class*="benefits-"][class*="__display"] > *,
html.v2-a11y-reading [class*="benefits-"][class*="__display"] > *{
  position:static!important;
  width:100%!important;
  max-width:none!important;
  transform:none!important;
}
/* El riel de categorías de «Nuestros productos» son botones de 120 px con la
   etiqueta más ancha que su propia pestaña: al crecer el texto se mete en la
   pestaña vecina. Se deja crecer el botón y se encierra la etiqueta. */
html.v2-a11y-text-scaled .v2-nuestros-productos__tabs-swiper .nav-link,
html.v2-a11y-reading .v2-nuestros-productos__tabs-swiper .nav-link{
  height:auto!important;
  min-height:120px;
}
html.v2-a11y-text-scaled .v2-nuestros-productos__tabs-swiper .nav-link p,
html.v2-a11y-reading .v2-nuestros-productos__tabs-swiper .nav-link p{
  width:100%!important;
  max-width:100%!important;
  margin-bottom:12px!important;
  overflow-wrap:break-word;
}

html.v2-a11y-text-scaled .v2-timeline-history__item,
html.v2-a11y-reading .v2-timeline-history__item{display:block!important}
html.v2-a11y-text-scaled .v2-timeline-history__item-year,
html.v2-a11y-reading .v2-timeline-history__item-year{
  position:static!important;
  height:auto!important;
  margin-bottom:8px;
}
html.v2-a11y-text-scaled .v2-timeline-history__item-badge,
html.v2-a11y-reading .v2-timeline-history__item-badge{height:auto!important}

/* La pastilla «(Aplica únicamente para…)» de las tarjetas de instrucciones
   (.card-instructions y .card-instructions--large) va ABSOLUTA, colgada del
   borde del título con top:-15px, sobre una columna de ALTO CERO: nadie le
   reserva sitio. Al ampliar o separar el texto crece a dos o tres líneas y se
   planta encima del primer paso. Se mete en el FLUJO conservando el mismo
   tirón de 15 px hacia arriba, así que la pastilla se sigue viendo donde el
   diseño la quiere, pero ahora empuja el contenido lo que ella ocupa. El
   :has() evita tocar las tarjetas que llevan la etiqueta vacía (ahí el margen
   negativo subiría el contenido 15 px). */
html.v2-a11y-text-scaled .card-instructions .card-instructions-disclaimer:has(> .card-instructions-disclaimer__content),
html.v2-a11y-reading .card-instructions .card-instructions-disclaimer:has(> .card-instructions-disclaimer__content){
  position:static!important;
  top:auto!important;
  margin:-15px 0 0!important;
}
/* Y que la pastilla parta el texto en vez de salirse de la tarjeta (la tarjeta
   recorta con overflow:hidden), sobre todo en móvil con el texto al 150 %. */
html.v2-a11y-text-scaled .card-instructions .card-instructions-disclaimer__content,
html.v2-a11y-reading .card-instructions .card-instructions-disclaimer__content{
  max-width:100%;
  overflow-wrap:break-word;
}

/* ================= DETENER ANIMACIONES =================
   WCAG 2.2.2 (Pausar, detener, ocultar) y 2.3.3 (Animación por interacción).
   Las duraciones se ponen a 0,001 ms en vez de `none` a propósito: así los
   eventos `animationend` / `transitionend` SIGUEN disparándose y el JavaScript
   del sitio que los espera no se queda colgado. Lo que CSS no puede parar
   —GSAP y los carruseles— lo detiene el módulo desde JavaScript. */
html.v2-a11y-still.v2-a11y-still.v2-a11y-still *,
html.v2-a11y-still.v2-a11y-still.v2-a11y-still *::before,
html.v2-a11y-still.v2-a11y-still.v2-a11y-still *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  animation-delay:0s!important;
  transition-duration:.001ms!important;
  transition-delay:0s!important;
}
html.v2-a11y-still{scroll-behavior:auto!important}

/* ================= MEJORAR LECTURA =================
   Composición tipográfica según la WCAG 2.1 §1.4.12 (Text Spacing) y §1.4.8
   (Visual Presentation), que es también lo que recomienda hoy la tipografía
   web: interlineado 1.6 (la pauta pide ≥1.5), separación entre párrafos de
   2em (≥2×), 0.12em entre letras y 0.16em entre palabras, medida de 70
   caracteres por línea (AAA pide ≤80), alineación a la izquierda —nunca
   justificada—, nada de VERSALITAS ni textos recortados con puntos
   suspensivos, y enlaces subrayados.
   Los titulares reciben solo el interlineado: separar las letras en texto de
   display empeora la lectura en vez de mejorarla. El propio módulo se queda
   como está, igual que con el tamaño de texto. */
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading p,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading li,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading dd,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading dt,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading td,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading th,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading blockquote,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading figcaption,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading label,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading small,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading span,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading a,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading button,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading input,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading textarea,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading select{
  line-height:1.6!important;
  letter-spacing:.12em!important;
  word-spacing:.16em!important;
  text-transform:none!important;
  -webkit-line-clamp:unset!important;
  text-overflow:clip!important;
}
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading p,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading li,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading blockquote{
  max-width:70ch!important;
  text-align:start!important;
}
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading p{margin-bottom:2em!important}
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading h1,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading h2,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading h3,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading h4,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading h5,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading h6{
  line-height:1.3!important;
  letter-spacing:normal!important;
  word-spacing:normal!important;
  text-transform:none!important;
}
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading a{text-decoration:underline!important}
/* se subrayan los enlaces, no los botones que están hechos con <a> */
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading a[class*="button"],
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading a[class*="btn"],
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading a[role="button"]{text-decoration:none!important}
/* el módulo mantiene su propia tipografía */
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading .v2-a11y__title,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading .v2-a11y__label,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading .v2-a11y__reset,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading .v2-a11y__step{
  letter-spacing:normal!important;
  word-spacing:normal!important;
  max-width:none!important;
  margin-bottom:0!important;
}
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading .v2-a11y__title{line-height:1.2!important}
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading .v2-a11y__label,
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading .v2-a11y__reset{line-height:1.5!important}
html.v2-a11y-reading.v2-a11y-reading.v2-a11y-reading .v2-a11y__reset{margin:24px auto 0!important}

/* ================= ALTO CONTRASTE =================
   Práctica estándar (la misma de los modos de alto contraste del sistema):
   fondo negro, texto blanco → 21:1, muy por encima del 7:1 que pide la WCAG
   AAA; enlaces y controles en amarillo #FFFF00 (19.6:1 sobre negro) para que
   se distingan del texto por color Y por subrayado; foco siempre visible.
   Las imágenes y los vídeos NO se tocan —son contenido—, pero sí se quitan
   los fondos decorativos, que son los que suelen dejar texto ilegible.
   Solo actúa con la clase puesta por el módulo: sin ella el sitio queda igual.
   OJO con la especificidad: el sitio trae 116 reglas del tipo
   .v2 .v2-color-neutral-900 (color con !important), así que la clase del
   módulo se repite tres veces para ganarles sin tocar su CSS.
   Y html y body quedan FUERA de la regla universal: si también se volvieran
   transparentes, el lienzo se quedaría blanco y el texto blanco desaparecería. */
html.v2-a11y-contrast,
html.v2-a11y-contrast body{background:#000!important;color:#fff!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast *:not(img):not(picture):not(video):not(canvas):not(iframe):not(body){
  background-color:transparent!important;
  background-image:none!important;
  color:#fff!important;
  border-color:#fff!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast a,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast a *{color:#FF0!important;text-decoration:underline!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast button,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast button *,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-button-primary,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-button-secondary,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-button-tertiary,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .button-primary,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .lab__btn,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast input[type=submit]{
  background:#FF0!important;
  color:#000!important;
  border:2px solid #FF0!important;
  text-decoration:none!important;
}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast input:not([type=submit]),
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast select,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast textarea{background:#000!important;color:#fff!important;border:2px solid #fff!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast :focus-visible{outline:3px solid #FF0!important;outline-offset:2px!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast img{background:#fff!important;border-radius:4px}

/* el propio módulo también cambia: debe seguir siendo legible en este modo */
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__launcher,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__panel{background:#000!important;box-shadow:inset 0 0 0 2px #fff!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__trigger,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__icon{background:#000!important;color:#FF0!important;box-shadow:inset 0 0 0 2px #FF0!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__step,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__reset,
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__close{background:transparent!important;color:#FF0!important;border:0!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__switch-track{box-shadow:inset 0 0 0 2px #fff!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__switch-track::after{background:#fff!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__switch-input:checked + .v2-a11y__switch-track{background:#FF0!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__switch-input:checked + .v2-a11y__switch-track::after{background:#000!important}
html.v2-a11y-contrast.v2-a11y-contrast.v2-a11y-contrast .v2-a11y__overlay{background:rgba(0,0,0,.8)!important}

/* ------------------------------------------------------------------
   GALERIA DE MODULOS (pagina interna de pruebas de accesibilidad)
   ------------------------------------------------------------------ */
.mg-wrap{ background:#EEF2F5; padding:0 0 40px; }
.mg-wrap > .container{ padding-top:32px; padding-bottom:8px; }
.mg-kicker{ font-size:14px; line-height:1.5; letter-spacing:.04em; text-transform:uppercase; color:#065F86; margin:0 0 6px; font-weight:700; }
.mg-h1{ font-size:30px; line-height:1.25; color:#033243; font-weight:700; margin:0 0 10px; }
.mg-lead{ font-size:16px; line-height:1.6; color:#526077; margin:0 0 6px; max-width:72ch; }
.mg-item{ display:block; margin:0 0 26px; background:#FFFFFF; border-top:3px solid #065F86; }
.mg-item__bar{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding:10px 16px; background:#F6F8FA; border-bottom:1px solid #D5DAE2; }
.mg-item__tag{ padding:2px 9px; border-radius:20px; background:#E0F3FE; color:#065F86; font-size:12px; font-weight:700; white-space:nowrap; }
.mg-item__title{ margin:0; font-size:15px; font-weight:700; color:#033243; }
.mg-item__meta{ margin:0; font-size:12px; color:#526077; flex:1 1 240px; }
.mg-stage{ position:relative; overflow:hidden; }
@media (max-width:767px){
  .mg-wrap > .container{ padding-top:24px; }
  .mg-h1{ font-size:24px; }
}

/* ===== MODULO DE ACCESIBILIDAD + GALERIA DE MODULOS (fin) ===== */

/* ============================================================
   BOTONES · field_link_cta  (inicio)
   ------------------------------------------------------------
   Sistema de botones entregado por el cliente (documento
   "Documentation-buttons-seguros-mundial"): 5 variantes, 4
   tamanos, 6 estados, 2 modos y 2 anchos.

   Se anade como capa NUEVA, sin tocar ninguna regla anterior.
   La clase base es .v2-btn: lleva "btn" a proposito, para que
   el modo lectura del modulo de accesibilidad la trate como
   boton y no como enlace, y no colisiona con el .btn de
   Bootstrap, que ya viene cargado en todas las paginas.

   Los colores se midieron sobre el pliego "Component-seguros-
   mundial" del propio cliente; los espaciados son los tokens
   Spacing / Sizing / Border de su documentacion.

   ORDEN: este bloque va ANTES del de titulos H2, que tiene que
   seguir siendo el ultimo del archivo.
   ============================================================ */

.v2-btn{
  /* --- tokens: el unico sitio donde se cambia el sistema --- */
  --btn-bg:#065F87;            /* interactive/primary/default */
  --btn-bg-hover:#08324A;      /* interactive/primary/hover   */
  --btn-bg-active:#041F30;     /* interactive/primary/active  */
  --btn-text:#FFFFFF;          /* text/inverse                */
  --btn-border:transparent;    /* border/*                    */
  --btn-focus:#0171A3;         /* border/focus                */
  --btn-focus-gap:#FFFFFF;     /* border/white                */
  --btn-radio:999px;           /* Corner/full                 */
  --btn-borde:1px;             /* Border/01                   */
  --btn-gap:8px;               /* Spacing/08                  */
  --btn-icono:24px;            /* Sizing/24                   */
  --btn-pad-y:12px;            /* Spacing/12  (large)         */
  --btn-pad-x:40px;            /* Spacing/40  (large)         */
  --btn-alto:48px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--btn-gap);
  box-sizing:border-box;
  min-height:var(--btn-alto);
  /* El borde de 1px se descuenta del relleno para que el alto final sea
     exactamente el del token (48/40/32/24) y para que un boton con borde
     y uno sin el midan lo mismo. */
  padding:max(0px, calc(var(--btn-pad-y) - var(--btn-borde)))
          max(0px, calc(var(--btn-pad-x) - var(--btn-borde)));
  border:var(--btn-borde) solid var(--btn-border);
  border-radius:var(--btn-radio);
  background-color:var(--btn-bg);
  color:var(--btn-text);
  font-family:var(--font-primary, 'Ubuntu', sans-serif);
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  position:relative;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
.v2-btn:hover{ background-color:var(--btn-bg-hover); color:var(--btn-text); text-decoration:none; }
.v2-btn:active{ background-color:var(--btn-bg-active); color:var(--btn-text); }

/* Foco: anillo doble (2px blancos pegados al boton y 2px de color
   fuera). El sitio pinta un aro amarillo global con !important
   sobre cualquier elemento enfocado, asi que aqui hace falta
   !important para que gane el anillo del sistema. */
.v2-btn:focus-visible{
  outline:2px solid var(--btn-focus) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 2px var(--btn-focus-gap);
}
.v2-btn:focus:not(:focus-visible){ outline:none !important; box-shadow:none; }

/* --- partes --- */
.v2-btn__ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:var(--btn-icono);
  height:var(--btn-icono);
  font-size:var(--btn-icono);
  line-height:1;
}
.v2-btn__ico svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.v2-btn__txt{ display:inline-block; }
.v2-btn p{ margin:0; line-height:inherit; }

/* --- variantes --- */
.v2-btn--primary{
  --btn-bg:#065F87; --btn-bg-hover:#08324A; --btn-bg-active:#041F30;
  --btn-text:#FFFFFF; --btn-border:transparent;
}
.v2-btn--secondary{
  --btn-bg:#FFFFFF; --btn-bg-hover:#B9E9FF; --btn-bg-active:#7CD8FD;
  --btn-text:#065F87; --btn-border:#065F87;
}
.v2-btn--secondary:hover,
.v2-btn--secondary:active{ color:#065F87; }
.v2-btn--success{
  --btn-bg:#1E7735; --btn-bg-hover:#1A4E28; --btn-bg-active:#092B12;
  --btn-text:#FFFFFF; --btn-border:transparent;
}
.v2-btn--destructive{
  --btn-bg:#BF1717; --btn-bg-hover:#821A1B; --btn-bg-active:#480808;
  --btn-text:#FFFFFF; --btn-border:transparent;
}
.v2-btn--tertiary{
  --btn-bg:transparent; --btn-bg-hover:transparent; --btn-bg-active:transparent;
  --btn-text:#065F87; --btn-border:transparent;
  --btn-pad-y:0; --btn-pad-x:0; --btn-alto:24px;
  --btn-borde:0;            /* tertiary no lleva borde: el alto es exacto 24px */
  border-radius:4px;
}
.v2-btn--tertiary:hover{ color:#08324A; text-decoration:underline; text-underline-offset:3px; }
.v2-btn--tertiary:active{ color:#041F30; text-decoration:underline; text-underline-offset:3px; }

/* --- tamanos (tertiary usa siempre el unico de 24px) --- */
.v2-btn--large { --btn-pad-y:12px; --btn-pad-x:40px; --btn-alto:48px; }
.v2-btn--medium{ --btn-pad-y:8px;  --btn-pad-x:40px; --btn-alto:40px; }
.v2-btn--small { --btn-pad-y:4px;  --btn-pad-x:12px; --btn-alto:32px; }
.v2-btn--unique{ --btn-pad-y:0;    --btn-pad-x:0;    --btn-alto:24px; }

/* --- ancho --- */
.v2-btn--fill{ display:flex; width:100%; white-space:normal; }
@media (max-width:767.98px){
  .v2-btn--fill-movil{ display:flex; width:100%; white-space:normal; }
}

/* --- deshabilitado: 40% sobre el componente completo --- */
.v2-btn:disabled,
.v2-btn[disabled],
.v2-btn[aria-disabled="true"],
.v2-btn.is-disabled{
  opacity:.4;
  pointer-events:none;
  cursor:default;
}

/* --- cargando: el contenido se oculta pero conserva su espacio,
       asi el ancho no cambia; el giro va centrado --- */
.v2-btn[aria-busy="true"]{ pointer-events:none; cursor:default; }
.v2-btn[aria-busy="true"] > *{ visibility:hidden; }
.v2-btn[aria-busy="true"]::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:20px; height:20px;
  margin:-10px 0 0 -10px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:v2-btn-giro .7s linear infinite;
}
@keyframes v2-btn-giro{ to{ transform:rotate(360deg); } }
/* Quien pide menos animacion no pierde el indicador —seguiria sin saber que
   la accion esta en curso—, pero gira mucho mas despacio. */
@media (prefers-reduced-motion: reduce){
  .v2-btn[aria-busy="true"]::after{ animation-duration:3s; }
}

/* ------------------------------------------------------------
   MODO OSCURO. No es una propiedad del boton: lo da el tema de
   la seccion que lo contiene (data-theme="dark"). Se admite
   tambien .v2-btn--inverse por si un boton suelto cae sobre un
   fondo oscuro sin que su contenedor lleve el tema.
   ------------------------------------------------------------ */
[data-theme="dark"] .v2-btn,
.v2-btn--inverse{
  --btn-focus:#35C5FA;
  --btn-focus-gap:#FFFFFF;
}
[data-theme="dark"] .v2-btn--primary,
.v2-btn--inverse.v2-btn--primary{
  --btn-bg:#FFFFFF; --btn-bg-hover:#EDEEF2; --btn-bg-active:#D5D9E2;
  --btn-text:#065F87; --btn-border:transparent;
}
[data-theme="dark"] .v2-btn--secondary,
.v2-btn--inverse.v2-btn--secondary{
  --btn-bg:transparent; --btn-bg-hover:#FFFFFF; --btn-bg-active:#D5D9E2;
  --btn-text:#FFFFFF; --btn-border:#FFFFFF;
}
[data-theme="dark"] .v2-btn--secondary:hover,
[data-theme="dark"] .v2-btn--secondary:active,
.v2-btn--inverse.v2-btn--secondary:hover,
.v2-btn--inverse.v2-btn--secondary:active{ color:#065F87; }
[data-theme="dark"] .v2-btn--success,
.v2-btn--inverse.v2-btn--success{
  --btn-bg:#90E6A5; --btn-bg-hover:#56D274; --btn-bg-active:#30B751;
  --btn-text:#1E7735; --btn-border:transparent;
}
[data-theme="dark"] .v2-btn--destructive,
.v2-btn--inverse.v2-btn--destructive{
  --btn-bg:#FFA2A2; --btn-bg-hover:#FD6D6D; --btn-bg-active:#F54D4D;
  --btn-text:#BF1717; --btn-border:transparent;
}
[data-theme="dark"] .v2-btn--tertiary,
.v2-btn--inverse.v2-btn--tertiary{ --btn-text:#FFFFFF; }
[data-theme="dark"] .v2-btn--tertiary:hover,
[data-theme="dark"] .v2-btn--tertiary:active,
.v2-btn--inverse.v2-btn--tertiary:hover,
.v2-btn--inverse.v2-btn--tertiary:active{ color:#FFFFFF; }

/* Lienzo oscuro de referencia, para montar una seccion en modo
   oscuro sin inventar el color de fondo. */
.v2-tema-oscuro{ background-color:#033242; color:#FFFFFF; }

/* Con el modulo de accesibilidad activo el boton debe poder
   crecer en vez de recortar la etiqueta. */
html.v2-a11y-text-scaled .v2-btn,
html.v2-a11y-reading .v2-btn{ height:auto; white-space:normal; }

/* ===== BOTONES · field_link_cta (fin) ===== */

/* ============================================================
   BOTONES · capa de sustitucion  (inicio)
   ------------------------------------------------------------
   Pasa los botones que YA existen en el sitio al sistema nuevo,
   sin tocar un solo skin: se reapuntan sus clases a los mismos
   tokens de .v2-btn. Asi el cambio alcanza a todas las paginas
   a la vez, es reversible (basta borrar este bloque) y no hay
   que editar la generacion antigua de skins, que sigue siendo
   la que pinta la mayoria de las paginas de producto.

   QUE SE SUSTITUYE: solo los botones de accion.
   QUE NO: los controles de interfaz (flechas de carrusel,
   acordeon, cerrar, pestanas, buscador, menu, widget flotante),
   el boton redondo de icono —que en el sistema nuevo es otro
   componente, Icon Button— y .button-tertiary, que pese al
   nombre no es un boton sino una fila-enlace a ancho completo.

   Se usa !important a proposito: es una capa de tema que tiene
   que ganar a la anterior, y algunas reglas viejas llevan mas
   especificidad (p. ej. .v2-llegar-rapido .v2-btn-llegar-rapido).
   El alto contraste del modulo de accesibilidad sigue ganando a
   esta capa, porque repite su clase tres veces.
   ============================================================ */

.button-primary, .button-secondary, .button-quaternary, .button-quinary,
.v2-button-primary, .v2-button-secondary, .v2-button-tertiary,
.v2-btn-llegar-rapido, .v2-btn-canales-primary, .v2-btn-canales-link,
.v2-cmp-card__btn, .pg-btn,
.link_boton_amarillo, .btn_pse{
  --btn-bg:#065F87; --btn-bg-hover:#08324A; --btn-bg-active:#041F30;
  --btn-text:#FFFFFF; --btn-border:transparent;
  --btn-focus:#0171A3; --btn-focus-gap:#FFFFFF;
  --btn-radio:999px; --btn-borde:1px; --btn-gap:8px; --btn-icono:24px;
  --btn-pad-y:8px; --btn-pad-x:40px; --btn-alto:40px;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:var(--btn-gap);
  box-sizing:border-box;
  min-height:var(--btn-alto) !important;
  height:auto !important;
  padding:max(0px, calc(var(--btn-pad-y) - var(--btn-borde)))
          max(0px, calc(var(--btn-pad-x) - var(--btn-borde))) !important;
  border:var(--btn-borde) solid var(--btn-border) !important;
  border-radius:var(--btn-radio) !important;
  background-color:var(--btn-bg) !important;
  color:var(--btn-text) !important;
  font-family:var(--font-primary, 'Ubuntu', sans-serif);
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
  text-align:center;
  text-decoration:none !important;
  text-transform:none;
  cursor:pointer;
  position:relative;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.button-primary:hover, .button-secondary:hover, .button-quaternary:hover, .button-quinary:hover,
.v2-button-primary:hover, .v2-button-secondary:hover, .v2-button-tertiary:hover,
.v2-btn-llegar-rapido:hover, .v2-btn-canales-primary:hover, .v2-btn-canales-link:hover,
.v2-cmp-card__btn:hover, .pg-btn:hover,
.link_boton_amarillo:hover, .btn_pse:hover{
  background-color:var(--btn-bg-hover) !important;
  color:var(--btn-text) !important;
}
.button-primary:active, .button-secondary:active, .button-quaternary:active, .button-quinary:active,
.v2-button-primary:active, .v2-button-secondary:active, .v2-button-tertiary:active,
.v2-btn-llegar-rapido:active, .v2-btn-canales-primary:active, .v2-btn-canales-link:active,
.v2-cmp-card__btn:active, .pg-btn:active,
.link_boton_amarillo:active, .btn_pse:active{
  background-color:var(--btn-bg-active) !important;
  color:var(--btn-text) !important;
}
.button-primary:focus-visible, .button-secondary:focus-visible,
.button-quaternary:focus-visible, .button-quinary:focus-visible,
.v2-button-primary:focus-visible, .v2-button-secondary:focus-visible,
.v2-button-tertiary:focus-visible, .v2-btn-llegar-rapido:focus-visible,
.v2-btn-canales-primary:focus-visible, .v2-btn-canales-link:focus-visible,
.v2-cmp-card__btn:focus-visible, .pg-btn:focus-visible,
.link_boton_amarillo:focus-visible, .btn_pse:focus-visible{
  outline:2px solid var(--btn-focus) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 2px var(--btn-focus-gap) !important;
}

/* --- que variante le toca a cada clase antigua --- */
/* accion principal: relleno */
.button-primary, .button-quinary,
.v2-button-primary, .v2-btn-llegar-rapido, .v2-btn-canales-primary,
.v2-cmp-card__btn--primary, .pg-btn,
.link_boton_amarillo, .btn_pse{
  --btn-bg:#065F87; --btn-bg-hover:#08324A; --btn-bg-active:#041F30;
  --btn-text:#FFFFFF; --btn-border:transparent;
}
/* alternativa: contorno */
.button-secondary, .button-quaternary,
.v2-button-secondary, .v2-cmp-card__btn--ghost{
  --btn-bg:#FFFFFF; --btn-bg-hover:#B9E9FF; --btn-bg-active:#7CD8FD;
  --btn-text:#065F87; --btn-border:#065F87;
}
.button-secondary:hover, .button-quaternary:hover,
.v2-button-secondary:hover, .v2-cmp-card__btn--ghost:hover,
.button-secondary:active, .button-quaternary:active,
.v2-button-secondary:active, .v2-cmp-card__btn--ghost:active{ color:#065F87 !important; }
/* baja jerarquia: solo texto */
.v2-button-tertiary, .v2-btn-canales-link{
  --btn-bg:transparent; --btn-bg-hover:transparent; --btn-bg-active:transparent;
  --btn-text:#065F87; --btn-border:transparent;
  --btn-pad-y:0; --btn-pad-x:0; --btn-alto:24px; --btn-borde:0;
  border-radius:4px !important;
}
.v2-button-tertiary:hover, .v2-btn-canales-link:hover,
.v2-button-tertiary:active, .v2-btn-canales-link:active{
  color:#08324A !important; text-decoration:underline !important; text-underline-offset:3px;
}

/* --- tamanos antiguos → tamanos del sistema --- */
.button-primary--sm, .button-secondary--sm, .button-quaternary--sm, .button-quinary--sm{
  --btn-pad-y:4px; --btn-pad-x:12px; --btn-alto:32px;
}
.button-primary--md, .button-secondary--md, .v2-button--lg{
  --btn-pad-y:8px; --btn-pad-x:40px; --btn-alto:40px;
}
.button-primary--lg, .button-secondary--lg, .button-quaternary--lg, .button-quinary--lg,
.button-primary--xl, .button-secondary--xl, .button-quaternary--xl, .button-quinary--xl,
.v2-button--xl{
  --btn-pad-y:12px; --btn-pad-x:40px; --btn-alto:48px;
}

/* --- deshabilitado, igual que en el sistema --- */
.button-primary:disabled, .button-secondary:disabled,
.button-quaternary:disabled, .button-quinary:disabled,
.v2-button-primary:disabled, .v2-button-secondary:disabled, .v2-button-tertiary:disabled,
.pg-btn:disabled, .v2-cmp-card__btn:disabled,
.button-primary[aria-disabled="true"], .v2-button-primary[aria-disabled="true"]{
  opacity:.4 !important; pointer-events:none; cursor:default;
}

/* --- el modulo de accesibilidad los deja crecer --- */
html.v2-a11y-text-scaled .button-primary,
html.v2-a11y-text-scaled .button-secondary,
html.v2-a11y-text-scaled .v2-button-primary,
html.v2-a11y-text-scaled .v2-button-secondary,
html.v2-a11y-text-scaled .pg-btn,
html.v2-a11y-reading .button-primary,
html.v2-a11y-reading .button-secondary,
html.v2-a11y-reading .v2-button-primary,
html.v2-a11y-reading .v2-button-secondary,
html.v2-a11y-reading .pg-btn{ height:auto !important; white-space:normal !important; }

/* ===== BOTONES · capa de sustitucion (fin) ===== */

/* ===== BOTONES · pagina de inventario (inicio) ===== */
.bt-body{background:#F7FAFB;font-family:var(--font-primary,'Ubuntu',sans-serif);color:#033243;margin:0}
.bt-top{position:sticky;top:0;z-index:30;background:#033243;color:#fff;padding:14px 20px}
.bt-top h1{font-size:18px;font-weight:700;margin:0}
.bt-top p{margin:2px 0 0;font-size:13px;color:#BFCBCF}
.bt-main{max-width:1180px;margin:0 auto;padding:24px 20px 96px}
.bt-nav{position:sticky;top:62px;z-index:20;background:#fff;border:1px solid #DEE4E7;border-radius:12px;
  padding:10px;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:6px}
.bt-nav a{font-size:13px;font-weight:500;color:#065F87;text-decoration:none;padding:6px 10px;border-radius:50px}
.bt-nav a:hover{background:#E0F3FE}
.bt-sec{background:#fff;border:1px solid #DEE4E7;border-radius:16px;padding:24px;margin:0 0 24px;scroll-margin-top:120px}
.bt-sec--oscuro{background:#033242;border-color:#0b4356;color:#fff}
.bt-h2{font-size:24px;font-weight:700;margin:0 0 4px}
.bt-lead{font-size:15px;color:#526077;margin:0 0 18px;max-width:78ch}
.bt-sec--oscuro .bt-lead{color:#B9D4DE}
.bt-h3{font-size:14px;font-weight:700;margin:24px 0 10px;text-transform:uppercase;letter-spacing:.05em;color:#416471}
.bt-sec--oscuro .bt-h3{color:#9CC4D2}
.bt-h3:first-of-type{margin-top:4px}
.bt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bt-tabla{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:13px}
.bt-tabla th,.bt-tabla td{padding:12px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid #E6EDF0}
.bt-sec--oscuro .bt-tabla th,.bt-sec--oscuro .bt-tabla td{border-bottom-color:#0d4a5f}
.bt-tabla thead th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8097A0;font-weight:700;
  border-bottom:1px solid #D5DAE2;white-space:nowrap}
.bt-tabla tbody th{font-weight:700;color:inherit;white-space:nowrap}
.bt-tabla--datos td{font-size:12px}
.bt-chip{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.15);
  vertical-align:-2px;margin-right:6px}
.bt-tabla code{font-size:12px;color:inherit;background:none;padding:0}
.bt-nota{font-size:12px;color:#8097A0}
.bt-medida{display:block;font-size:11px;color:#8097A0;margin-top:6px;letter-spacing:.02em}
.bt-sec--oscuro .bt-medida{color:#7FA7B6}
.bt-fila{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:0 0 14px;max-width:100%;overflow-x:auto}
.bt-caja{border:1px dashed #C9D6DC;border-radius:12px;padding:16px;margin:0 0 14px}
.bt-sec--oscuro .bt-caja{border-color:#17556B}
.bt-reglas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:0}
.bt-regla{border:1px solid #DEE4E7;border-radius:12px;padding:16px}
.bt-regla h4{font-size:13px;font-weight:700;margin:0 0 8px;text-transform:uppercase;letter-spacing:.05em}
.bt-regla--si h4{color:#1E7735}
.bt-regla--no h4{color:#BF1717}
.bt-regla p{font-size:13px;color:#526077;margin:10px 0 0;line-height:1.55}
.bt-cod{display:block;background:#0B2B38;color:#CFE9F5;border-radius:10px;padding:12px 14px;font-size:12px;
  line-height:1.6;overflow-x:auto;white-space:pre;margin:10px 0 0}
/* Estados simulados: la tabla tiene que mostrar hover/active/focus sin el puntero encima. */
.is-demo-hover{background-color:var(--btn-bg-hover)!important}
.v2-btn--secondary.is-demo-hover,.v2-btn--tertiary.is-demo-hover{color:var(--btn-text)!important}
.v2-btn--tertiary.is-demo-hover{text-decoration:underline;text-underline-offset:3px}
.is-demo-active{background-color:var(--btn-bg-active)!important}
.v2-btn--tertiary.is-demo-active{text-decoration:underline;text-underline-offset:3px}
.is-demo-focus{outline:2px solid var(--btn-focus)!important;outline-offset:2px!important;
  box-shadow:0 0 0 2px var(--btn-focus-gap)!important}
@media (max-width:767px){ .bt-main{padding:16px 12px 72px} .bt-sec{padding:16px} .bt-h2{font-size:20px} }
/* ===== BOTONES · pagina de inventario (fin) ===== */

/* ============================================================
   TITULOS DE MODULO (H2) — un solo tamaño para todos los modulos
   de la landing, en escritorio y en movil. Va al final del archivo
   a proposito: asi ninguna regla posterior lo puede sobrescribir.
   Cualquier modulo nuevo se agrega a esta lista de selectores.
   ============================================================ */
.v2-comparador__title,
.v2-faq__title{ font-size:32px; }

@media (max-width:991px){
  .v2-comparador__title,
  .v2-faq__title{ font-size:30px; }
}
@media (max-width:767px){
  .v2-comparador__title,
  .v2-faq__title{ font-size:26px; }
}