/* Minification failed. Returning unminified contents.
(18,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-pie'
(25,23): run-time error CSS1039: Token not allowed after unary operator: '-hdc-fuente'
(93,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-tinta'
(94,64): run-time error CSS1039: Token not allowed after unary operator: '-hdc-brillo'
(100,23): run-time error CSS1039: Token not allowed after unary operator: '-hdc-fuente'
(105,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-acento-claro'
(213,27): run-time error CSS1039: Token not allowed after unary operator: '-hdc-fuente'
(216,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto'
(255,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-tinta'
(281,32): run-time error CSS1039: Token not allowed after unary operator: '-hdc-acento-suave'
(282,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-acento-claro'
(387,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(397,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(399,23): run-time error CSS1039: Token not allowed after unary operator: '-hdc-fuente'
(441,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto'
(448,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(470,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto'
(475,32): run-time error CSS1039: Token not allowed after unary operator: '-hdc-acento-fondo'
(476,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-enlace'
(511,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto'
(516,25): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(586,25): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto'
(603,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto'
(610,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(612,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto'
(618,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(634,23): run-time error CSS1039: Token not allowed after unary operator: '-hdc-fuente'
(637,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-enlace'
(675,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(676,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(677,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(678,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(679,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(680,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(681,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(683,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(684,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(686,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(687,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(688,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(689,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(690,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(694,23): run-time error CSS1039: Token not allowed after unary operator: '-hdc-fuente'
(695,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto'
(703,23): run-time error CSS1039: Token not allowed after unary operator: '-hdc-fuente'
(711,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-enlace'
(716,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion-hover'
(720,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto-suave'
(724,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(730,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-tinta'
(734,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-fondo-suave'
(738,24): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(754,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(755,24): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(762,32): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion-hover'
(763,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion-hover'
(777,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-tinta'
(789,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(803,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-tinta'
(808,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(833,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-acento-claro'
(844,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(845,24): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(851,32): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion-hover'
(852,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion-hover'
(870,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(882,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-fondo-suave'
(905,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(923,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-borde'
(943,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto-suave'
(960,39): run-time error CSS1039: Token not allowed after unary operator: '-hdc-borde'
(967,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-texto-suave'
(988,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-acento-fondo'
(992,21): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(998,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-borde'
(1023,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(1024,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(1029,32): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(1030,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(1060,64): run-time error CSS1039: Token not allowed after unary operator: '-hdc-brillo'
(1070,17): run-time error CSS1039: Token not allowed after unary operator: '-hdc-acento-claro'
(1100,25): run-time error CSS1039: Token not allowed after unary operator: '-hdc-tinta'
(1149,32): run-time error CSS1039: Token not allowed after unary operator: '-hdc-borde'
(1160,28): run-time error CSS1039: Token not allowed after unary operator: '-hdc-acento-fondo'
(1161,33): run-time error CSS1039: Token not allowed after unary operator: '-hdc-accion'
(1171,32): run-time error CSS1039: Token not allowed after unary operator: '-hdc-borde'
(1181,32): run-time error CSS1039: Token not allowed after unary operator: '-hdc-borde'
 */
/*
    Estilos propios del sitio publico.

    Existe para no escribir dentro de creative.min.css, que es el tema de terceros
    (Start Bootstrap Creative) y se reemplaza entero cuando se actualiza: lo que
    escribamos ahi se pierde en la siguiente version del tema. Esta hoja se carga
    de ultima, asi que puede sobreescribir al tema sin pelear con la especificidad.

    Se sirve por bundle ("~/Content/front/sitio", registrado en BundleConfig). En
    Release eso significa minificada y con hash de version en la URL, de modo que un
    cambio aqui llega a quien ya tenia la hoja en cache en vez de servirle la vieja;
    los <link> sueltos del layout no tienen esa proteccion.
*/

/* ------------------------------------------------------------------ Pie del sitio */

.pie-sitio {
    background-color: var(--hdc-pie);
    color: #adb5bd;
    padding: 45px 0 22px;
}

.pie-sitio .pie-titulo {
    color: #fff;
    font-family: var(--hdc-fuente);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}

.pie-sitio ul {
    font-size: .93rem;
    line-height: 2.05;
}

.pie-sitio a {
    color: #adb5bd;
    text-decoration: none;
}

.pie-sitio a:hover,
.pie-sitio a:focus {
    color: #fff;
    text-decoration: underline;
}

.pie-legal {
    border-top: 1px solid #343a40;
    margin-top: .5rem;
    padding-top: 18px;
    font-size: .82rem;
    color: #868e96;
}

/* El boton flotante de WhatsApp ocupa los 80px inferiores del lado derecho; sin este
   respiro la cedula juridica queda debajo de el en pantallas angostas. */
@media (max-width: 767.98px) {
    .pie-sitio {
        padding-bottom: 92px;
    }
}

/* --------------------------------------------------- Enlaces sobre fondo de color */

/* Las secciones de fondo naranja o azul llevan texto claro; el color de enlace del
   tema no contrasta contra ellos y se pierde.

   Se excluyen los botones. Un <a class="btn"> trae su propio par de colores, y pintarle
   el texto de blanco lo rompia: el "Contactenos" de la portada es un .btn-light, de fondo
   casi blanco, asi que el rotulo quedaba blanco sobre blanco y solo aparecia al pasar el
   cursor, porque .btn-light:hover tiene mas especificidad que este selector y le devolvia
   el color oscuro. El subrayado tampoco corresponde en un boton. */
.bg-primary a:not(.btn),
.bg-dark .text-faded a:not(.btn) {
    color: #fff;
    text-decoration: underline;
}


/* --------------------------------------------- Portada: el bloque de bienvenida

   La portada abre con <section class="masthead hero-producto"> y no con <header>, para
   que su H1 no lo descarten los extractores de contenido. Desde la fase 2 (octubre de
   2026) el bloque ya no es la foto de stock a pantalla completa: es texto a la izquierda
   y una captura real del sistema a la derecha, sobre fondo oscuro.

   La altura la da el contenido. Antes medía 100vh, lo que en celular empujaba todo lo
   demas fuera de la primera pantalla. */

section.masthead {
    background-color: var(--hdc-tinta);
    background-image: radial-gradient(ellipse at 85% 20%, var(--hdc-brillo), transparent 55%);
    padding-top: 7rem;
    padding-bottom: 4rem;
}

.hero-eyebrow {
    font-family: var(--hdc-fuente);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hdc-acento-claro);
    margin-bottom: 1rem;
}

.hero-titulo {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: 1.25rem;
}

.hero-subtitulo {
    color: rgba(255, 255, 255, .78);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 2rem;
}

section.masthead .hero-acciones {
    justify-content: flex-start;
}

.hero-nota {
    color: rgba(255, 255, 255, .6);
    font-size: .88rem;
    margin: 1rem 0 0;
}

/* La captura va dentro de un marco con la barra de un navegador, para que se lea como
   la pantalla del sistema y no como una imagen suelta. La barra es puro CSS. */
.marco-navegador {
    background-color: #2b3036;
    border-radius: 8px;
    padding-top: 26px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    overflow: hidden;
}

    .marco-navegador::before {
        content: "";
        position: absolute;
        top: 9px;
        left: 12px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #ff6159;
        box-shadow: 14px 0 0 #ffbd2e, 28px 0 0 #28c941;
    }

    .marco-navegador img {
        display: block;
        width: 100%;
        height: auto;
    }

@media (min-width: 768px) {
    .hero-titulo {
        font-size: 2.5rem;
    }
}

@media (min-width: 992px) {
    section.masthead {
        padding-top: 9rem;
        padding-bottom: 5.5rem;
    }

    .hero-titulo {
        font-size: 2.6rem;
    }
}

@media (min-width: 1200px) {
    .hero-titulo {
        font-size: 3rem;
    }
}

@media (max-width: 575.98px) {
    section.masthead .hero-acciones .btn {
        flex: 1 1 100%;
    }
}


/* ------------------------------------------------- Portada: franja de cifras */

.franja-confianza {
    background-color: #fff;
    border-bottom: 1px solid #e3e6ea;
    padding: 2.5rem 0 2rem;
}

.franja-cifras {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
    text-align: center;
}

    .franja-cifras strong {
        display: block;
        font-family: var(--hdc-fuente);
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--hdc-texto);
        line-height: 1.2;
    }

    .franja-cifras span {
        display: block;
        color: #6c757d;
        font-size: .88rem;
        margin-top: .25rem;
    }

.franja-texto {
    color: #6c757d;
    font-size: .95rem;
    max-width: 46rem;
    margin: 2rem auto 0;
    text-align: center;
}

@media (min-width: 768px) {
    .franja-cifras {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

        .franja-cifras strong {
            font-size: 1.75rem;
        }
}


/* ------------------------------------------- Portada: mostrador y negocios */

.seccion-titulo {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.mostrador {
    background-color: var(--hdc-tinta);
    padding: 5rem 0;
}

.mostrador-equipo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

    .mostrador-equipo li {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .mostrador-equipo i {
        flex: 0 0 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        border-radius: 8px;
        background-color: var(--hdc-acento-suave);
        color: var(--hdc-acento-claro);
    }

    .mostrador-equipo h3 {
        font-size: 1rem;
        margin: 0 0 .25rem;
    }

    .mostrador-equipo p {
        color: rgba(255, 255, 255, .65);
        font-size: .92rem;
        margin: 0;
    }

@media (min-width: 576px) {
    .mostrador-equipo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.negocios {
    background-color: #f5f6f8;
}

/* ------------------------------------------ Paginas de destino de los anuncios

   /punto-de-venta y /veterinarias reciben el trafico de Google Ads y estan armadas
   para que pidan la demo por WhatsApp; las clases ld- (landing) son de ellas. El verde del boton no es el #25D366 de la marca: con texto blanco
   ese verde no llega a 2:1 de contraste y el rotulo se lee mal; este llega a 4.5:1. */

.ld-hero {
    padding-top: 7.5rem;
    padding-bottom: 4rem;
}

.ld-titulo {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.ld-subtitulo {
    font-size: 1.15rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

.ld-nota {
    font-size: .9rem;
    margin-top: .9rem;
    margin-bottom: 0;
}

.ld-captura {
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

.ld-btn-whatsapp {
    background-color: #168a45;
    border-color: #168a45;
    color: #fff;
    font-size: 1.05rem;
}

    .ld-btn-whatsapp:hover,
    .ld-btn-whatsapp:focus {
        background-color: #11703a;
        border-color: #11703a;
        color: #fff;
    }

.ld-btn-final {
    color: #168a45;
    font-size: 1.05rem;
}

.ld-seccion {
    padding: 4.5rem 0;
}

.ld-seccion-titulo {
    font-size: 1.75rem;
    margin-bottom: 2.5rem;
}

.ld-fondo-claro {
    background-color: #f5f6f8;
}

.ld-tarjeta {
    height: 100%;
    padding: 1.75rem 1.5rem;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
}

    .ld-tarjeta p {
        margin-bottom: 0;
        color: #6c757d;
    }

.ld-icono {
    font-size: 2rem;
    color: var(--hdc-accion);
    margin-bottom: 1rem;
}

.ld-paso {
    width: 52px;
    height: 52px;
    line-height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background-color: var(--hdc-accion);
    color: #fff;
    font-family: var(--hdc-fuente);
    font-size: 1.4rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .ld-btn-whatsapp,
    .ld-btn-final {
        display: block;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 992px) {
    .ld-hero {
        padding-top: 9rem;
        padding-bottom: 5.5rem;
    }

    .ld-titulo {
        font-size: 2.6rem;
    }
}


/* ------------------------------------------------------------ Menu principal

   Los desplegables abren con un <button> y no con un <a href="#">. El tema solo da
   estilo a "li.nav-item > a.nav-link", asi que aqui se le da al boton el mismo
   aspecto que a los enlaces, en sus dos estados: transparente sobre la foto de la
   portada y blanco cuando el menu se encoge al bajar (o siempre, en celular). */

#mainNav .navbar-nav > li.nav-item > button.nav-link {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hdc-texto);
    width: 100%;
    text-align: left;
}

    #mainNav .navbar-nav > li.nav-item > button.nav-link:hover,
    #mainNav .navbar-nav > li.nav-item > button.nav-link:focus {
        color: var(--hdc-accion);
    }

/* El clic del raton deja el foco en el boton y Bootstrap le dibuja un recuadro
   negro; el recuadro se conserva solo para quien navega con teclado. */
#mainNav .nav-link:focus:not(:focus-visible),
#mainNav .btn-demo-menu:focus:not(:focus-visible),
#mainNav .navbar-toggler:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

#mainNav .dropdown-menu {
    border: 1px solid rgba(33, 37, 41, .1);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    font-size: .95rem;
    padding: .4rem 0;
}

#mainNav .dropdown-item {
    padding: .45rem 1.25rem;
    color: var(--hdc-texto);
}

    #mainNav .dropdown-item:hover,
    #mainNav .dropdown-item:focus {
        background-color: var(--hdc-acento-fondo);
        color: var(--hdc-enlace);
    }

/* El boton de la demo es la accion principal del menu. En celular va a lo ancho, al
   final de la lista, con aire arriba para que no se confunda con un enlace mas. */
#mainNav .btn-demo-menu {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: .55rem 1.1rem;
    border-radius: 300px;
    color: #fff;
}

#mainNav .nav-item-demo {
    padding: .75rem 0 .5rem;
}

    #mainNav .nav-item-demo .btn-demo-menu {
        display: block;
    }

@media (min-width: 992px) {
    #mainNav .navbar-nav > li.nav-item > button.nav-link {
        padding: .5rem .85rem;
        width: auto;
        color: rgba(255, 255, 255, .7);
    }

        #mainNav .navbar-nav > li.nav-item > button.nav-link:hover,
        #mainNav .navbar-nav > li.nav-item > button.nav-link:focus {
            color: #fff;
        }

    #mainNav.navbar-shrink .navbar-nav > li.nav-item > button.nav-link {
        color: var(--hdc-texto);
    }

        #mainNav.navbar-shrink .navbar-nav > li.nav-item > button.nav-link:hover,
        #mainNav.navbar-shrink .navbar-nav > li.nav-item > button.nav-link:focus {
            color: var(--hdc-accion);
        }

    /* Con seis opciones y el boton, el relleno del tema (1rem por lado) no cabe
       en una linea a 992px. */
    #mainNav .navbar-nav > li.nav-item > a.nav-link {
        padding: .5rem .85rem;
    }

    #mainNav .nav-item-demo {
        padding: 0 0 0 .75rem;
    }

        #mainNav .nav-item-demo .btn-demo-menu {
            display: inline-block;
        }
}

/* Entre 992 y 1199 px el contenedor mide 960 y el menu completo no cabe en una
   linea con el relleno de arriba: se aprieta un poco en vez de partirse en dos. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #mainNav .navbar-nav > li.nav-item > a.nav-link,
    #mainNav .navbar-nav > li.nav-item > button.nav-link {
        padding: .5rem .5rem;
        font-size: .82rem;
    }

    #mainNav .btn-demo-menu {
        padding: .5rem .9rem;
        font-size: .75rem;
    }

    #mainNav .nav-item-demo {
        padding-left: .4rem;
    }
}

/* El menu en celular, con los desplegables abiertos, puede ser mas alto que la
   pantalla; sin esto la parte de abajo queda fuera de alcance. */
@media (max-width: 991.98px) {
    #mainNav .navbar-collapse {
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }

    #mainNav .dropdown-menu {
        border: 0;
        box-shadow: none;
        padding: 0 0 .4rem;
    }
}


/* ------------------------------------------------- Portada: botones del hero */

.hero-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

    /* El tema le quita el borde a todos los .btn; sin el, el boton de contorno se
       queda en texto suelto sobre la foto. */
    .hero-acciones .btn-outline-light {
        border: 2px solid rgba(255, 255, 255, .85);
    }

        .hero-acciones .btn-outline-light:hover,
        .hero-acciones .btn-outline-light:focus {
            color: var(--hdc-texto);
        }


/* ------------------------------------------- Portada: modulos y herramientas

   Cada modulo es una tarjeta que enlaza a su pagina. Todo el bloque es el enlace,
   pero el texto no se pinta de color de enlace: se lee como una tarjeta y el rotulo
   de abajo dice a donde lleva. */

.modulo {
    display: block;
    height: 100%;
    padding: 1.6rem 1.5rem 1.4rem;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    background-color: #fff;
    color: var(--hdc-texto);
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}

    .modulo:hover,
    .modulo:focus {
        border-color: var(--hdc-accion);
        box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
        color: var(--hdc-texto);
        text-decoration: none;
    }

    .modulo i {
        font-size: 1.75rem;
        color: var(--hdc-accion);
        margin-bottom: .9rem;
    }

    .modulo h3 {
        font-size: 1.15rem;
        margin-bottom: .5rem;
    }

    .modulo p {
        color: #6c757d;
        font-size: .95rem;
        margin-bottom: .75rem;
    }

.modulo-enlace {
    font-family: var(--hdc-fuente);
    font-size: .85rem;
    font-weight: 700;
    color: var(--hdc-enlace);
}

    .modulo-enlace::after {
        content: " \2192";
    }

.incluido p {
    font-size: .92rem;
}

.herramientas {
    padding-top: 4rem;
    padding-bottom: 3rem;
}

    .herramientas .modulo p {
        margin-bottom: 0;
    }



/* ------------------------------------------------------------ Identidad visual

   Fase 2 de la renovacion (octubre de 2026). Los colores y la tipografia del sitio
   salen de aqui, en variables, y no del tema de terceros: el naranja #F05F40 y la
   combinacion Merriweather + Open Sans venian con la plantilla Start Bootstrap
   Creative, no con la marca. La marca es el azul marino del logo (#212e6b) y del
   propio sistema (#153d77, con acentos en #3b7ddd).

   Las reglas de abajo sobreescriben al tema donde hace falta (cuerpo, titulos,
   botones, menu, enlaces y fondos de color). Lo demas del sitio usa las variables.

   Va al final de la hoja a proposito: las reglas del menu de mas arriba, escritas en
   la fase 1, todavia forzaban mayusculas y tamanos, y con la misma especificidad gana
   la que aparece despues. Las variables, en cambio, valen en cualquier parte. */

:root {
    --hdc-fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --hdc-tinta: #0f1a3c;
    --hdc-pie: #0a1230;
    --hdc-texto: #1d2433;
    --hdc-texto-suave: #5b6476;
    --hdc-fondo-suave: #f4f6fb;
    --hdc-borde: #e1e5ee;
    /* Accion: botones principales e iconos. Con texto blanco cumple 4.5:1. */
    --hdc-accion: #2563d9;
    --hdc-accion-hover: #1d4fb0;
    /* Enlaces dentro del texto, un tono mas oscuro para leerse sobre blanco. */
    --hdc-enlace: #1d4fb0;
    --hdc-acento-claro: #9cbcf7;
    --hdc-acento-suave: rgba(37, 99, 217, .18);
    --hdc-acento-fondo: #eef3fd;
    --hdc-brillo: rgba(59, 125, 221, .22);
}

body {
    font-family: var(--hdc-fuente);
    color: var(--hdc-texto);
}

h1, h2, h3, h4, h5, h6,
.btn,
#mainNav,
#mainNav .navbar-brand,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
    font-family: var(--hdc-fuente);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.01em;
}

a {
    color: var(--hdc-enlace);
}

    a:hover,
    a:focus {
        color: var(--hdc-accion-hover);
    }

.text-muted {
    color: var(--hdc-texto-suave) !important;
}

.text-primary {
    color: var(--hdc-accion) !important;
}

/* Los bloques de color de la plantilla pasan a azul marino. */
.bg-primary,
.bg-dark {
    background-color: var(--hdc-tinta) !important;
}

.bg-light {
    background-color: var(--hdc-fondo-suave) !important;
}

hr {
    border-color: var(--hdc-accion);
}

/* Botones: sin mayusculas forzadas y con esquinas menos redondas que la pildora del tema. */
.btn {
    text-transform: none;
    letter-spacing: 0;
    border-radius: 10px;
}

.btn-xl {
    padding: .95rem 1.8rem;
    font-size: 1.02rem;
}

.btn-primary {
    background-color: var(--hdc-accion);
    border-color: var(--hdc-accion);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary:not(:disabled):not(.disabled):active {
        background-color: var(--hdc-accion-hover) !important;
        border-color: var(--hdc-accion-hover) !important;
        color: #fff;
    }

/* Menu sin mayusculas. El tema las forzaba en la marca y en cada opcion. */
#mainNav .navbar-brand,
#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > button.nav-link,
#mainNav .btn-demo-menu {
    text-transform: none;
    letter-spacing: 0;
}

#mainNav .navbar-brand {
    color: var(--hdc-tinta);
    font-size: 1.15rem;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > button.nav-link {
    font-size: .95rem;
    font-weight: 600;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
    color: var(--hdc-accion);
}

#mainNav .btn-demo-menu {
    font-size: .9rem;
    border-radius: 10px;
}

@media (min-width: 992px) {
    #mainNav .navbar-brand {
        color: #fff;
    }

    #mainNav.navbar-shrink .navbar-brand {
        color: var(--hdc-tinta);
    }

    #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
    #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
        color: var(--hdc-accion);
    }
}

/* Menos aire entre secciones: el tema daba 8rem arriba y abajo a cada una. */
section {
    padding: 4.5rem 0;
}

@media (min-width: 992px) {
    section {
        padding: 6rem 0;
    }
}

.portfolio-box .portfolio-box-caption {
    background: rgba(15, 26, 60, .88);
}

/* Enlaces sobre los bloques azul marino (contacto, encabezados de pagina). El azul de
   los enlaces esta pensado para fondo blanco; sobre el marino no se lee. La regla de
   .bg-dark .text-faded de mas arriba, que los pone blancos y subrayados, sigue mandando
   en los parrafos de introduccion porque es mas especifica. */
.bg-dark a:not(.btn):not(.dropdown-item),
.bg-primary a:not(.btn):not(.dropdown-item) {
    color: var(--hdc-acento-claro);
}

    .bg-dark a:not(.btn):not(.dropdown-item):hover,
    .bg-primary a:not(.btn):not(.dropdown-item):hover {
        color: #fff;
    }

/* El boton del menu con el id delante: /Home/Planes carga hojas propias despues de
   esta que vuelven a pintar .btn-primary con el azul de Bootstrap. */
#mainNav .btn-demo-menu {
    background-color: var(--hdc-accion);
    border-color: var(--hdc-accion);
    color: #fff;
}

    #mainNav .btn-demo-menu:hover,
    #mainNav .btn-demo-menu:focus {
        background-color: var(--hdc-accion-hover);
        border-color: var(--hdc-accion-hover);
    }

/* El tema escribe las reglas del menu tambien para :focus y .active, que son mas
   especificas que "a.nav-link" a secas: al hacer clic en una opcion, el foco le
   devolvia las mayusculas, y la que marca el scrollspy salia en naranja con
   !important. Se repiten aqui con los mismos estados. */
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus,
#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active,
#mainNav .navbar-nav > li.nav-item > button.nav-link:focus {
    text-transform: none;
    font-size: .95rem;
    font-weight: 600;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
    color: var(--hdc-accion) !important;
}


/* ------------------------------------------------------- Planes y precios (F3) */

.planes-hero {
    padding-top: 7.5rem;
    padding-bottom: 3rem;
}

.planes-incluye {
    background-color: var(--hdc-fondo-suave);
    padding: 2.75rem 0;
}

.planes-incluye-lista {
    list-style: none;
    margin: 0 auto 1.25rem;
    padding: 0;
    max-width: 56rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem 1rem;
}

    .planes-incluye-lista li,
    .planes-lista li {
        display: flex;
        gap: .55rem;
        align-items: baseline;
    }

    .planes-incluye-lista i,
    .planes-lista i {
        color: var(--hdc-accion);
        font-size: .85rem;
    }

@media (min-width: 768px) {
    .planes-incluye-lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.planes-precios {
    padding-top: 3.5rem;
}

.planes-calculadora {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem;
    border: 1px solid var(--hdc-borde);
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(15, 26, 60, .07);
}

    .planes-calculadora label {
        font-weight: 700;
        display: block;
        margin-bottom: .6rem;
    }

    .planes-calculadora input {
        font-size: 1.1rem;
        height: auto;
        padding: .7rem .9rem;
    }

.planes-calculadora-resultado {
    margin: .9rem 0 0;
    color: var(--hdc-texto-suave);
    min-height: 3em;
}

.planes-tabla-envoltura {
    overflow-x: auto;
}

.planes-tabla {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

    .planes-tabla th,
    .planes-tabla td {
        padding: .85rem .75rem;
        border-bottom: 1px solid var(--hdc-borde);
        vertical-align: middle;
    }

    .planes-tabla thead th {
        font-size: .8rem;
        font-weight: 700;
        color: var(--hdc-texto-suave);
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom-width: 2px;
    }

    .planes-tabla tbody th {
        font-weight: 600;
    }

    .planes-tabla tbody tr {
        transition: background-color .2s;
    }

.planes-precio {
    font-weight: 700;
    white-space: nowrap;
}

/* La fila que corresponde a lo que el visitante escribio en la calculadora. */
.planes-tabla tbody tr.planes-fila-elegida {
    background-color: var(--hdc-acento-fondo);
}

    .planes-tabla tbody tr.planes-fila-elegida th {
        color: var(--hdc-accion);
    }

.planes-tarjeta {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--hdc-borde);
    border-radius: 12px;
}

.planes-tarifa-fija .planes-precio {
    font-size: 2rem;
    margin-right: .4rem;
}

.planes-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.planes-cta {
    text-align: center;
    margin-top: 2rem;
}

    .planes-cta .hero-acciones {
        justify-content: center;
    }

.btn-outline-primary {
    color: var(--hdc-accion);
    border: 2px solid var(--hdc-accion);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--hdc-accion);
        border-color: var(--hdc-accion);
        color: #fff;
    }

/* En celular la tabla va mas compacta para que las tres columnas quepan sin desplazar. */
@media (max-width: 575.98px) {
    .planes-tabla th,
    .planes-tabla td {
        padding: .7rem .4rem;
        font-size: .88rem;
    }

    .planes-tabla thead th {
        font-size: .7rem;
    }

    .planes-tarjeta {
        padding: 1.25rem;
    }
}


/* --------------------------------------- Paginas de producto y de negocio (F4)

   ERP, facturacion electronica, encomiendas, API y las paginas por tipo de negocio
   comparten estructura: encabezado con su llamado a la accion, cuerpo de lectura y un
   cierre destacado antes de las lecturas relacionadas. /punto-de-venta y
   /veterinarias no la usan: son destino de anuncios y tienen la suya (clases ld-). */

.pagina-hero {
    background-image: radial-gradient(ellipse at 85% 10%, var(--hdc-brillo), transparent 55%);
    padding-top: 7.5rem;
    padding-bottom: 3.5rem;
}

.pagina-eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hdc-acento-claro);
    margin-bottom: .9rem;
}

.pagina-titulo {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: 1.1rem;
}

.pagina-hero .text-faded {
    color: rgba(255, 255, 255, .8);
    font-size: 1.08rem;
    line-height: 1.7;
}

.pagina-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

    .pagina-acciones .btn-outline-light {
        border: 2px solid rgba(255, 255, 255, .85);
    }

        .pagina-acciones .btn-outline-light:hover,
        .pagina-acciones .btn-outline-light:focus {
            color: var(--hdc-tinta);
        }

@media (min-width: 992px) {
    .pagina-hero {
        padding-top: 9rem;
        padding-bottom: 4.5rem;
    }

    .pagina-titulo {
        font-size: 2.6rem;
    }
}

@media (max-width: 575.98px) {
    .pagina-acciones .btn {
        flex: 1 1 100%;
    }
}

.pagina-cuerpo {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
}

    .pagina-cuerpo p,
    .pagina-cuerpo li {
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .pagina-cuerpo h2.h4 {
        font-size: 1.55rem;
        font-weight: 700;
        margin-bottom: .9rem;
    }

    .pagina-cuerpo h2.h4.mt-5 {
        margin-top: 3.25rem !important;
    }

    .pagina-cuerpo h3.h6 {
        font-size: 1.08rem;
        font-weight: 700;
        margin-bottom: .4rem;
    }

    .pagina-cuerpo picture img,
    .pagina-cuerpo img.img-fluid {
        border: 1px solid var(--hdc-borde);
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(15, 26, 60, .1);
    }

/* El cierre ("Veelo funcionando", "Pida la documentacion"...) es la parte con mas
   intencion de la pagina: va en un recuadro para que no se pierda al final del texto. */
.pagina-cierre {
    margin-top: 3.25rem;
    padding: 1.75rem 1.75rem 1.25rem;
    border-radius: 12px;
    background-color: var(--hdc-acento-fondo);
    border-left: 4px solid var(--hdc-accion);
}

    .pagina-cierre h2.h4.mt-5 {
        margin-top: 0 !important;
    }

.pagina-lecturas {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hdc-borde);
}

    .pagina-lecturas a {
        font-weight: 600;
    }

/* El detalle largo de /punto-de-venta (fase 5) sigue a las preguntas rapidas, que
   tambien van sobre blanco: la linea marca donde empieza la lectura larga. */
.ld-detalle {
    border-top: 1px solid var(--hdc-borde);
}

