/* =====================================================================
   portada.css - la portada del sitio publico (/ = /Account/About).

   Todo cuelga de #ibp (las secciones nuevas) o de body.ib-portada (la barra
   de navegacion en su version de una fila). El id gana a las reglas del tema
   Inspinia que pintan .landing-page (section p gris y chico, h1 delgado,
   .container con overflow hidden).

   Dos llaves para esconder algo: html.ibp-anima (la pone un script en linea
   de la cabeza SOLO si el visitante no pidio menos movimiento y hay
   IntersectionObserver; portada.js la quita si anime.js no llego) y la media
   query de prefers-reduced-motion. Sin JavaScript, en papel o con "reducir
   movimiento" todo se ve en su estado final. Solo se animan transform y
   opacity.
   ===================================================================== */

#ibp {
    --ibp-navy: #0B1B34;
    --ibp-navy-2: #122744;
    --ibp-tinta: #0B1B34;
    --ibp-tinta-2: #33475B;
    --ibp-gris: #5B6B80;
    --ibp-gris-2: #8A97A8;
    --ibp-linea: #E3E9F1;
    --ibp-fondo: #F5F7FA;
    --ibp-cian: #0A9CD8;
    --ibp-cian-2: #2BE0F5;
    --ibp-cian-texto: #0077A8;                        /* el cian como TEXTO sobre claro: 5:1 */
    --ibp-verde: #0E7D64;                             /* blanco encima: 5.1:1 (el #1AB394 de la marca daba 2.65) */
    --ibp-verde-2: #0B6B55;
    --ibp-ease: cubic-bezier(.455, .03, .515, .955);
    --ibp-ease-micro: cubic-bezier(0, 0, .5, 1);
    position: relative;
    color: var(--ibp-tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Content/style.css: .landing-page .container { overflow: hidden } y
   .landing-page section p { color: #aeaeae; font-size: 13px } y
   .landing-page h1 { font-weight: 200; font-size: 30px }. Aqui mandan estas. */
#ibp .container { position: relative; z-index: 1; overflow: visible !important; }
#ibp p { margin: 0; color: var(--ibp-gris); font-size: 17px; line-height: 1.55; }
#ibp h1, #ibp h2, #ibp h3 { margin: 0; color: var(--ibp-tinta); font-weight: 700; letter-spacing: -.015em; }
#ibp a { text-decoration: none; }
#ibp a:focus { outline: 3px solid #0071E3; outline-offset: 3px; }
#ibp a:focus:not(:focus-visible) { outline: none; }
#ibp ul, #ibp ol { margin: 0; padding: 0; list-style: none; }

/* ---------- Piezas comunes ---------- */
#ibp .ibp-sec { position: relative; padding: 72px 0; scroll-margin-top: 72px; }
#ibp .ibp-cab { max-width: 780px; margin: 0 auto 40px; text-align: center; }
#ibp .ibp-ceja {
    display: inline-block;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ibp-cian-texto);
}
#ibp .ibp-h2 { font-size: 32px; line-height: 1.1; }
#ibp .ibp-sub { max-width: 640px; margin: 16px auto 0; font-size: 18px; }
#ibp .ibp-centro { margin-top: 36px; text-align: center; }
#ibp .ibp-liga { font-weight: 600; color: var(--ibp-cian-texto); }
#ibp .ibp-liga:hover { color: var(--ibp-navy); }
#ibp .ibp-liga .fa { margin-left: 6px; font-size: 13px; }

#ibp .ibp-btn, #ibp-cierre .ibp-btn {
    display: inline-block;
    min-height: 50px;
    padding: 14px 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #fff;
    background: var(--ibp-verde);
    box-shadow: 0 14px 30px -14px rgba(14, 125, 100, .9);
    transition: background-color .2s var(--ibp-ease-micro), transform .2s var(--ibp-ease-micro), box-shadow .2s var(--ibp-ease-micro);
}
#ibp .ibp-btn:hover, #ibp .ibp-btn:focus, #ibp-cierre .ibp-btn:hover, #ibp-cierre .ibp-btn:focus { color: #fff; background: var(--ibp-verde-2); transform: translateY(-1px); }
#ibp .ibp-btn .fa, #ibp-cierre .ibp-btn .fa { margin-right: 8px; }
#ibp .ibp-btn--fantasma, #ibp-cierre .ibp-btn--fantasma { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); box-shadow: none; }
#ibp .ibp-btn--fantasma:hover, #ibp .ibp-btn--fantasma:focus, #ibp-cierre .ibp-btn--fantasma:hover, #ibp-cierre .ibp-btn--fantasma:focus { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
#ibp .ibp-btn--secundario { color: var(--ibp-navy); background: #fff; border-color: var(--ibp-linea); box-shadow: 0 2px 6px rgba(11, 27, 52, .06); }
#ibp .ibp-btn--secundario:hover, #ibp .ibp-btn--secundario:focus { color: var(--ibp-navy); background: var(--ibp-fondo); border-color: #CBD5E1; }
#ibp .ibp-btn--navy { background: var(--ibp-navy); box-shadow: 0 14px 30px -16px rgba(11, 27, 52, .8); }
#ibp .ibp-btn--navy:hover, #ibp .ibp-btn--navy:focus { background: #1B3557; }

@media (min-width: 768px) {
    #ibp .ibp-sec { padding: 104px 0; }
    #ibp .ibp-cab { margin-bottom: 56px; }
    #ibp .ibp-h2 { font-size: 42px; }
}
@media (min-width: 1069px) {
    #ibp .ibp-h2 { font-size: 48px; line-height: 1.06; }
    #ibp .ibp-sub { font-size: 20px; }
}

/* =====================================================================
   HERO
   ===================================================================== */
#ibp .ibp-hero {
    position: relative;
    padding: 108px 0 56px;
    color: #fff;
    background: linear-gradient(165deg, #071428 0%, #0B1B34 52%, #0F2648 100%);
}
#ibp .ibp-hero-fondo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
#ibp .ibp-aura { position: absolute; display: block; border-radius: 50%; }
#ibp .ibp-aura--a { top: -260px; left: 50%; width: 900px; height: 900px; margin-left: -620px; background: radial-gradient(circle closest-side, rgba(43, 224, 245, .16), rgba(43, 224, 245, 0)); }
#ibp .ibp-aura--b { right: -320px; bottom: -380px; width: 820px; height: 820px; background: radial-gradient(circle closest-side, rgba(26, 179, 148, .17), rgba(26, 179, 148, 0)); }
#ibp .ibp-malla {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 100%);
}

#ibp .ibp-hero-grid { display: block; }
#ibp .ibp-hero-txt { text-align: center; }
#ibp .ibp-hero .ibp-ceja { color: #7EE0FF; }
#ibp .ibp-h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: -.02em;
}
#ibp .ibp-linea { display: block; }
#ibp .ibp-mascara { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
#ibp .ibp-mascara > span { display: inline-block; }
#ibp .ibp-grad { color: #7EE0FF; padding-bottom: .14em; margin-bottom: -.14em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    #ibp .ibp-grad {
        background-image: linear-gradient(95deg, #7EE0FF 0%, #2BE0F5 45%, #4AE3B5 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
@media (forced-colors: active) {
    #ibp .ibp-grad { background: none; color: CanvasText; }
}
#ibp .ibp-rota { white-space: nowrap; }
#ibp .ibp-rota-txt { display: inline-block; }
#ibp .ibp-lead { max-width: 560px; margin: 0 auto; color: #C3D0DF; font-size: 18px; line-height: 1.5; }
#ibp .ibp-micro-liga { color: #DCE6F0; font-weight: 600; border-bottom: 1px solid rgba(220, 230, 240, .4); }
#ibp .ibp-micro-liga:hover { color: #fff; border-color: #fff; }
#ibp .ibp-ctas { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; margin: 28px 0 14px; }
#ibp .ibp-ctas .ibp-btn { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; }
#ibp .ibp-micro { color: #8FA3B8; font-size: 14px; }
#ibp .ibp-micro b { color: #DCE6F0; font-weight: 600; }

/* Los dos caminos del proveedor, discretos bajo el hero. */
#ibp .ibp-prov { margin: 22px 0 0; text-align: center; font-size: 14px; color: #8FA3B8; }
#ibp .ibp-prov a { color: #B9CCDD; font-weight: 600; border-bottom: 1px solid rgba(185, 204, 221, .35); }
#ibp .ibp-prov a:hover { color: #fff; border-color: #fff; }
#ibp .ibp-prov .ibp-sep { margin: 0 10px; color: rgba(255, 255, 255, .25); }

/* ---------- La escena: el portal recibiendo una factura ---------- */
#ibp .ibp-hero-escena { position: relative; max-width: 520px; margin: 40px auto 0; }
#ibp .ibp-stage {
    position: relative;
    border-radius: 20px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .2) inset;
}
#ibp .ibp-st-barra { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 12px; color: #8FA3B8; }
#ibp .ibp-st-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
#ibp .ibp-st-barra i:nth-child(1) { background: #FF6B6B; opacity: .8; }
#ibp .ibp-st-barra i:nth-child(2) { background: #FFD166; opacity: .8; }
#ibp .ibp-st-barra i:nth-child(3) { background: #4AE3B5; opacity: .8; }
#ibp .ibp-st-barra span { margin-left: 8px; }
#ibp .ibp-st-cuerpo { padding: 18px 16px 20px; }

#ibp .ibp-st-factura { padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--ibp-tinta); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7); }
#ibp .ibp-st-f-cab { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 6px; }
#ibp .ibp-st-f-folio { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ibp-gris); }
#ibp .ibp-st-f-estado { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #7A5A00; background: #FFF1C2; }
#ibp .ibp-st-f-estado.ibp-st-ok { color: #0F6B3A; background: #DDF5E7; }
#ibp .ibp-st-f-prov { font-size: 15px; font-weight: 600; }
#ibp .ibp-st-f-pie { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--ibp-gris); }
#ibp .ibp-st-f-pie b { font-size: 16px; color: var(--ibp-tinta); font-variant-numeric: tabular-nums; }

#ibp .ibp-st-checks { margin: 14px 0 0; }
#ibp .ibp-st-checks li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 7px 4px; font-size: 14px; color: #DCE6F0; }
#ibp .ibp-st-checks svg { width: 20px; height: 20px; -ms-flex: 0 0 20px; flex: 0 0 20px; border-radius: 50%; background: rgba(74, 227, 181, .14); }
#ibp .ibp-st-tick { fill: none; stroke: #4AE3B5; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

#ibp .ibp-st-pasos { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .14); }
#ibp .ibp-st-pasos li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 6px 4px; font-size: 14px; color: #fff; }
#ibp .ibp-st-pasos .fa { width: 20px; text-align: center; color: #7EE0FF; }

#ibp .ibp-st-sello {
    position: absolute; right: -8px; bottom: 54px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--ibp-verde); color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: 0 14px 28px -12px rgba(26, 179, 148, .9);
}
#ibp .ibp-st-replay {
    display: none;
    position: absolute; right: 12px; top: 8px;
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    color: #8FA3B8; background: rgba(255, 255, 255, .08); cursor: pointer;
}
#ibp .ibp-st-replay:hover { color: #fff; background: rgba(255, 255, 255, .16); }
#ibp .ibp-st-replay:focus { outline: 2px solid #7EE0FF; outline-offset: 2px; }
#ibp .ibp-st-replay[hidden] { display: none !important; }

/* ---------- Las cifras ---------- */
#ibp .ibp-prueba {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: 44px 0 0; padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
#ibp .ibp-prueba > div { -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%; padding: 10px 8px; text-align: center; }
#ibp .ibp-prueba dt { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8FA3B8; }
#ibp .ibp-prueba dd { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; }
#ibp .ibp-num { display: inline-block; }
#ibp .ibp-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (min-width: 480px) {
    #ibp .ibp-ctas .ibp-btn { -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: 200px; }
}
@media (max-width: 479px) {
    #ibp .ibp-h1 { font-size: 31px; }
}
@media (min-width: 768px) {
    #ibp .ibp-hero { padding: 150px 0 64px; }
    #ibp .ibp-h1 { font-size: 48px; }
    #ibp .ibp-lead { font-size: 20px; }
    #ibp .ibp-prueba > div { -ms-flex: 1 1 25%; flex: 1 1 25%; }
    #ibp .ibp-prueba dd { font-size: 30px; }
}
@media (min-width: 992px) {
    #ibp .ibp-hero { padding: 160px 0 72px; min-height: 92vh; }
    #ibp .ibp-hero-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 48px; }
    #ibp .ibp-hero-txt { -webkit-box-flex: 1; -ms-flex: 1 1 52%; flex: 1 1 52%; text-align: left; }
    #ibp .ibp-lead { margin: 0; }
    #ibp .ibp-ctas { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
    #ibp .ibp-hero-escena { -ms-flex: 0 0 440px; flex: 0 0 440px; margin: 0; }
    #ibp .ibp-prov { text-align: left; }
    #ibp .ibp-prueba { margin-top: 64px; }
}
@media (min-width: 1200px) {
    #ibp .ibp-h1 { font-size: 56px; }
    #ibp .ibp-hero-escena { -ms-flex-preferred-size: 480px; flex-basis: 480px; }
}

/* =====================================================================
   FLUJO: una factura, cinco pasos
   ===================================================================== */
#ibp .ibp-flujo { background: #fff; }
#ibp .ibp-pasos { position: relative; max-width: 560px; margin: 0 auto; padding-left: 4px; }
#ibp .ibp-pasos-linea { display: none; }
#ibp .ibp-paso { position: relative; padding: 0 0 28px 56px; }
#ibp .ibp-paso::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--ibp-linea); }
#ibp .ibp-paso:last-child::before { display: none; }
#ibp .ibp-paso-n {
    position: absolute; left: 0; top: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ibp-navy); color: #fff;
    font-size: 15px; font-weight: 700; line-height: 40px; text-align: center;
    box-shadow: 0 10px 20px -10px rgba(11, 27, 52, .7);
}
#ibp .ibp-paso h3 { margin: 6px 0 6px; font-size: 20px; }
#ibp .ibp-paso p { font-size: 16px; }
@media (min-width: 900px) {
    #ibp .ibp-pasos { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: none; padding: 0; }
    #ibp .ibp-pasos-linea { display: block; position: absolute; left: 10%; right: 10%; top: 19px; height: 2px; width: 80%; overflow: visible; }
    #ibp .ibp-pasos-linea path { fill: none; stroke: var(--ibp-cian); stroke-width: 2; stroke-linecap: round; opacity: .6; }
    #ibp .ibp-paso { -webkit-box-flex: 1; -ms-flex: 1 1 20%; flex: 1 1 20%; padding: 60px 14px 0; text-align: center; }
    #ibp .ibp-paso::before { display: none; }
    #ibp .ibp-paso-n { left: 50%; margin-left: -20px; }
    #ibp .ibp-paso h3 { font-size: 22px; }
}

/* =====================================================================
   PILARES: cumplimiento, control, dinero
   ===================================================================== */
#ibp .ibp-pilares { background: var(--ibp-fondo); }
#ibp .ibp-tarjetas { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 18px; }
#ibp .ibp-tarjeta {
    -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%;
    padding: 28px 26px 26px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--ibp-linea);
    box-shadow: 0 24px 48px -36px rgba(11, 27, 52, .4);
}
#ibp .ibp-ico {
    display: inline-block; width: 48px; height: 48px; margin-bottom: 18px;
    border-radius: 14px; font-size: 20px; line-height: 48px; text-align: center;
    color: var(--ibp-cian); background: rgba(10, 156, 216, .10);
}
#ibp .ibp-pilar--control .ibp-ico { color: #7C3AED; background: rgba(124, 58, 237, .10); }
#ibp .ibp-pilar--dinero .ibp-ico { color: var(--ibp-verde-2); background: rgba(26, 179, 148, .12); }
#ibp .ibp-tarjeta h3 { margin: 0 0 10px; font-size: 24px; }
#ibp .ibp-tarjeta p { font-size: 16px; }
#ibp .ibp-tarjeta .ibp-liga { display: inline-block; margin-top: 18px; font-size: 15px; }
@media (min-width: 768px) {
    #ibp .ibp-tarjeta { -ms-flex: 1 1 calc(33.333% - 12px); flex: 1 1 calc(33.333% - 12px); padding: 34px 30px 30px; }
}

/* =====================================================================
   LOGOS
   ===================================================================== */
#ibp .ibp-logos { padding: 56px 0 48px; background: #fff; border-top: 1px solid var(--ibp-linea); }
#ibp .ibp-logos-t { margin: 0 0 28px; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--ibp-gris); }
#ibp .ibp-logos-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px 8px; }
#ibp .ibp-logos-grid li { -ms-flex: 0 0 calc(33.333% - 6px); flex: 0 0 calc(33.333% - 6px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 64px; padding: 8px 12px; border-radius: 12px; background: #fff; }
#ibp .ibp-logos-grid img {
    max-width: 100%; max-height: 40px; width: auto; height: auto;
    mix-blend-mode: multiply;
    -webkit-filter: grayscale(1) opacity(.62);
    filter: grayscale(1) opacity(.62);
    transition: -webkit-filter .25s var(--ibp-ease-micro), filter .25s var(--ibp-ease-micro);
}
#ibp .ibp-logos-grid li:hover img { -webkit-filter: none; filter: none; }
@media (min-width: 768px) {
    #ibp .ibp-logos { padding: 72px 0 64px; }
    #ibp .ibp-logos-grid li { -ms-flex: 0 0 calc(16.666% - 7px); flex: 0 0 calc(16.666% - 7px); height: 72px; }
    #ibp .ibp-logos-grid img { max-height: 44px; }
}

/* =====================================================================
   MODULOS: la rejilla del catalogo
   ===================================================================== */
#ibp .ibp-modulos { background: #fff; }
#ibp .ibp-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; }
#ibp .ibp-grid li { -ms-flex: 0 0 calc(50% - 5px); flex: 0 0 calc(50% - 5px); display: -webkit-box; display: -ms-flexbox; display: flex; }
#ibp .ibp-mod {
    display: block; width: 100%;
    padding: 16px 14px;
    border-radius: 16px;
    border: 1px solid var(--ibp-linea);
    background: #fff;
    color: var(--ibp-tinta);
    transition: border-color .2s var(--ibp-ease-micro), box-shadow .2s var(--ibp-ease-micro), transform .2s var(--ibp-ease-micro);
}
#ibp .ibp-mod:hover, #ibp .ibp-mod:focus { color: var(--ibp-tinta); border-color: rgba(10, 156, 216, .45); box-shadow: 0 18px 36px -24px rgba(11, 27, 52, .45); transform: translateY(-2px); }
#ibp .ibp-mod { position: relative; }
#ibp .ibp-nuevo { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(26, 179, 148, .14); color: #0F6B3A; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#ibp .ibp-mod .fa { display: block; margin-bottom: 10px; font-size: 20px; color: var(--ibp-cian); }
#ibp .ibp-mod b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
#ibp .ibp-mod span { display: none; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ibp-gris); }
@media (min-width: 768px) {
    #ibp .ibp-grid { gap: 14px; }
    #ibp .ibp-grid li { -ms-flex: 0 0 calc(33.333% - 10px); flex: 0 0 calc(33.333% - 10px); }
    #ibp .ibp-mod { padding: 22px 20px; }
    #ibp .ibp-mod span { display: block; }
}
@media (min-width: 1069px) {
    #ibp .ibp-grid li { -ms-flex: 0 0 calc(25% - 11px); flex: 0 0 calc(25% - 11px); }
}

/* =====================================================================
   PRECIOS: los tres planes del catalogo
   ===================================================================== */
#ibp .ibp-precios { background: var(--ibp-fondo); }
#ibp .ibp-planes { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 18px; }
#ibp .ibp-plan {
    position: relative;
    -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
    padding: 30px 26px 26px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--ibp-linea);
    box-shadow: 0 24px 48px -36px rgba(11, 27, 52, .4);
}
#ibp .ibp-plan h3 { font-size: 22px; }
#ibp .ibp-plan-res { margin: 6px 0 18px; font-size: 15px; min-height: 44px; }
#ibp .ibp-plan-precio { margin: 0; color: var(--ibp-tinta); font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
#ibp .ibp-plan-precio small { margin-left: 4px; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--ibp-gris); }
#ibp .ibp-plan-anio { margin: 8px 0 0; font-size: 14px; color: var(--ibp-gris); }
#ibp .ibp-plan-lista { margin: 22px 0 26px; padding-top: 20px; border-top: 1px solid var(--ibp-linea); -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }
#ibp .ibp-plan-lista li { position: relative; padding: 5px 0 5px 26px; font-size: 15px; color: var(--ibp-tinta-2); }
#ibp .ibp-plan-lista li .fa { position: absolute; left: 0; top: 8px; color: var(--ibp-verde); font-size: 13px; }
#ibp .ibp-plan .ibp-btn { width: 100%; }
#ibp .ibp-plan-sello { position: absolute; top: -13px; left: 26px; padding: 5px 12px; border-radius: 999px; background: var(--ibp-verde); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#ibp .ibp-plan--destacado { background: var(--ibp-navy); border-color: var(--ibp-navy); color: #fff; box-shadow: 0 40px 70px -40px rgba(11, 27, 52, .9); }
#ibp .ibp-plan--destacado h3, #ibp .ibp-plan--destacado .ibp-plan-precio { color: #fff; }
#ibp .ibp-plan--destacado .ibp-plan-res, #ibp .ibp-plan--destacado .ibp-plan-anio, #ibp .ibp-plan--destacado .ibp-plan-precio small { color: #B9CCDD; }
#ibp .ibp-plan--destacado .ibp-plan-lista { border-color: rgba(255, 255, 255, .14); }
#ibp .ibp-plan--destacado .ibp-plan-lista li { color: #DCE6F0; }
#ibp .ibp-plan--destacado .ibp-plan-lista li .fa { color: #4AE3B5; }
#ibp .ibp-precios-nota { margin: 26px auto 0; max-width: 680px; text-align: center; font-size: 14px; color: var(--ibp-gris); }
/* En el telefono el plan de la prueba gratis va primero. */
@media (max-width: 767px) {
    #ibp .ibp-plan--destacado { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; margin-top: 14px; }
}
@media (min-width: 768px) {
    #ibp .ibp-plan { -ms-flex: 1 1 calc(33.333% - 12px); flex: 1 1 calc(33.333% - 12px); padding: 34px 30px 30px; }
    #ibp .ibp-plan--destacado { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}

/* =====================================================================
   CIERRE (About.cshtml, despues de los testimonios): el ultimo empujon.
   Vive fuera de #ibp porque el asistente y los testimonios van en medio.
   ===================================================================== */
#ibp-cierre {
    position: relative;
    padding: 88px 0 80px;
    text-align: center;
    color: #fff;
    background: linear-gradient(160deg, #0B1B34 0%, #0F2648 60%, #0B1B34 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
#ibp-cierre *, #ibp-cierre *::before, #ibp-cierre *::after { box-sizing: border-box; }
#ibp-cierre .container { overflow: visible !important; }
#ibp-cierre .ibp-cierre-h2 { margin: 0 0 16px; color: #fff; font-size: 36px; line-height: 1.06; font-weight: 700; letter-spacing: -.02em; }
#ibp-cierre .ibp-cierre-linea { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
#ibp-cierre .ibp-cierre-linea > span { display: inline-block; }
#ibp-cierre .ibp-cierre-grad { color: #7EE0FF; padding-bottom: .14em; margin-bottom: -.14em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    #ibp-cierre .ibp-cierre-grad { background-image: linear-gradient(95deg, #7EE0FF 0%, #2BE0F5 45%, #4AE3B5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
#ibp-cierre p { margin: 0; color: #C3D0DF; font-size: 18px; line-height: 1.5; }
#ibp-cierre .ibp-cierre-ctas { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; margin: 28px 0 18px; }
#ibp-cierre .ibp-cierre-ctas .ibp-btn { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; }
#ibp-cierre .ibp-cierre-mini { font-size: 14px; color: #8FA3B8; }
#ibp-cierre .ibp-cierre-mini a { color: #DCE6F0; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(220, 230, 240, .4); }
#ibp-cierre .ibp-cierre-mini a:hover { color: #fff; border-color: #fff; }
#ibp-cierre a:focus { outline: 3px solid #7EE0FF; outline-offset: 3px; }
#ibp-cierre a:focus:not(:focus-visible) { outline: none; }
@media (min-width: 480px) {
    #ibp-cierre .ibp-cierre-ctas .ibp-btn { -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: 200px; }
}
@media (min-width: 768px) {
    #ibp-cierre { padding: 120px 0 112px; }
    #ibp-cierre .ibp-cierre-h2 { font-size: 52px; }
    #ibp-cierre p { font-size: 20px; }
}
@media (min-width: 1069px) {
    #ibp-cierre .ibp-cierre-h2 { font-size: 64px; }
}

/* =====================================================================
   BARRA FIJA DEL TELEFONO: aparece cuando el hero sale de pantalla y se
   esconde en el asistente, en el pie y cuando Bini esta abierto. Solo
   portada.js la enciende (sin JS no existe: hidden).
   ===================================================================== */
.ibp-barra {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #0B1B34;
    box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .6);
    -webkit-transform: translateY(110%);
    transform: translateY(110%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.ibp-barra[hidden] { display: none; }
.ibp-barra-bt {
    -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0;
    display: block; min-height: 46px; padding: 12px 10px;
    border-radius: 999px; text-align: center; text-decoration: none;
    font-size: 15px; font-weight: 700; line-height: 1.3;
    color: #fff; background: var(--ibp-verde, #0E7D64);
}
.ibp-barra-bt--sec { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); }
.ibp-barra-bt:hover, .ibp-barra-bt:focus { color: #fff; text-decoration: none; }
@media screen and (prefers-reduced-motion: no-preference) {
    .ibp-barra { transition: -webkit-transform .35s cubic-bezier(.215, .61, .355, 1); transition: transform .35s cubic-bezier(.215, .61, .355, 1); }
}
@media (max-width: 767px) {
    .ibp-barra { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; }
    body.ibp-barra-visible .ibp-barra { -webkit-transform: none; transform: none; }
    /* Bini sube para no tapar la barra; con Bini abierto, la barra se va. */
    body.ibp-barra-visible .bi { bottom: 76px !important; }
    body.ibp-barra-visible:has(.bi:not(.bi--min)) .ibp-barra { -webkit-transform: translateY(110%); transform: translateY(110%); }
}

/* =====================================================================
   El asistente embebido y los testimonios: solo se les quita aire de
   arriba, que traian para librar la barra fija cuando eran pagina propia.
   ===================================================================== */
#ibp-asistente { background: #F7F9FC; scroll-margin-top: 72px; }
#ibp-asistente .asis { padding-top: 56px; }
#asisApp { scroll-margin-top: 80px; }
@media (min-width: 768px) {
    #ibp-asistente .asis { padding-top: 80px; }
}

/* =====================================================================
   MOVIMIENTO. Dos llaves: html.ibp-anima y la media query. El resto lo
   hace portada.js con anime.js (transform y opacity nada mas).
   ===================================================================== */
@media screen and (prefers-reduced-motion: no-preference) {
    html.ibp-anima #ibp .ibp-hr,
    html.ibp-anima #ibp .ibp-rv,
    html.ibp-anima #ibp-cierre .ibp-rv,
    html.ibp-anima #ibp .ibp-paso,
    html.ibp-anima #ibp .ibp-grid li { opacity: 0; }
    html.ibp-anima #ibp .ibp-st-replay { display: block; opacity: 0; }
    html.ibp-anima #ibp .ibp-pasos-linea path { opacity: .9; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
    html.ibp-anima #ibp .ibp-cerca .ibp-hr { will-change: transform, opacity; }
}

@media print {
    #ibp .ibp-hero-fondo, #ibp .ibp-ctas, #ibp .ibp-st-replay { display: none !important; }
    #ibp .ibp-hero { background: #fff; color: #000; }
    #ibp .ibp-h1, #ibp .ibp-lead, #ibp .ibp-prueba dd { color: #000; }
}

/* =====================================================================
   LA BARRA en la portada: una sola fila. Transparente sobre el hero
   oscuro (letras blancas) y blanca al bajar (.navbar-scroll la pone el
   script de siempre del pie, a los 200 px).
   ===================================================================== */
body.ib-portada .navbar-default { background: transparent; border: 0; }
body.ib-portada .navbar-wrapper .navbar { padding: 6px 15px; transition: background-color .25s ease, padding .25s ease, box-shadow .25s ease; }
body.ib-portada .navbar-wrapper .navbar.navbar-scroll { padding: 0 15px; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 #E7EAEC, 0 10px 30px -20px rgba(11, 27, 52, .35); border: 0 !important; }
body.ib-portada .navbar-brand.brand-logo.ib-logo { padding: 10px 0 !important; margin-left: 0; }
body.ib-portada .ib-logo .ib-logo-nom { color: #fff; transition: color .25s ease; }
body.ib-portada .ib-logo .ib-logo-nom b { color: #7EE0FF; }
body.ib-portada .ib-logo .ib-logo-sub { color: #8FA3B8; }
body.ib-portada .navbar-scroll .ib-logo .ib-logo-nom { color: #0B1B34; }
body.ib-portada .navbar-scroll .ib-logo .ib-logo-nom b { color: #0A9CD8; }
body.ib-portada .navbar-scroll .ib-logo .ib-logo-sub { color: #7A8AA0; }

body.ib-portada .navbar-default .ib-nav > li > a,
body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a {
    padding: 22px 11px;
    border: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, .86);
    background: transparent;
    transition: color .2s ease;
}
body.ib-portada .navbar-default .ib-nav > li > a:hover,
body.ib-portada .navbar-default .ib-nav > li > a:focus { color: #fff; background: transparent; }
body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a { color: #33475B; }
body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a:hover,
body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a:focus { color: #0A9CD8; }

body.ib-portada .navbar-default .ib-nav > li > a.ib-nav-entrar,
body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a.ib-nav-entrar {
    margin: 14px 4px 0 6px; padding: 8px 16px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
}
body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a.ib-nav-entrar { border-color: #CBD5E1; }
body.ib-portada .navbar-default .ib-nav > li > a.ib-nav-cta,
body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a.ib-nav-cta {
    margin: 14px 0 0 4px; padding: 9px 18px;
    border-radius: 999px; color: #fff; background: #0E7D64;
    box-shadow: 0 10px 20px -12px rgba(14, 125, 100, .9);
}
body.ib-portada .navbar-default .ib-nav > li > a.ib-nav-cta:hover,
body.ib-portada .navbar-default .ib-nav > li > a.ib-nav-cta:focus,
body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a.ib-nav-cta:hover,
body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a.ib-nav-cta:focus { color: #fff; background: #0B6B55; }

/* El boton de la hamburguesa: blanco sobre el hero, oscuro al bajar. */
body.ib-portada .navbar .navbar-header .navbar-toggle { margin: 14px 0 0; border: 1px solid rgba(255, 255, 255, .3); background-color: transparent !important; }
body.ib-portada .navbar .navbar-header .navbar-toggle .icon-bar { background-color: #fff !important; }
body.ib-portada .navbar-scroll .navbar-header .navbar-toggle { border-color: #CBD5E1; background-color: #fff !important; }
body.ib-portada .navbar-scroll .navbar-header .navbar-toggle .icon-bar { background-color: #0B1B34 !important; }

@media (max-width: 767px) {
    body.ib-portada .navbar-wrapper .navbar { padding: 0 12px; }
    body.ib-portada #navbar { margin: 0 -12px; padding: 6px 12px 14px; border-top: 1px solid rgba(255, 255, 255, .1); background: #0B1B34; }
    body.ib-portada .navbar-scroll #navbar { background: #fff; border-top-color: #E7EAEC; }
    body.ib-portada .navbar-default .ib-nav > li > a,
    body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a { padding: 12px 8px; font-size: 16px; }
    body.ib-portada .navbar-default .ib-nav > li > a.ib-nav-entrar,
    body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a.ib-nav-entrar,
    body.ib-portada .navbar-default .ib-nav > li > a.ib-nav-cta,
    body.ib-portada .navbar-scroll.navbar-default .ib-nav > li > a.ib-nav-cta { display: block; margin: 10px 8px 0; text-align: center; }
}