/* Tienda de DGAssistant (FastSpring) - version 3.
 *
 * Mismo aspecto que dgassistant.com: la cabecera es su portada (la foto bajo
 * el degradado azul-naranja), el pie lleva el mismo degradado, y se repiten la
 * tipografia de la web (Arial en el texto y Poppins en los titulos), el
 * naranja #e46c0a de las letras DG del logotipo en los textos y los botones
 * (como en la web; al pasar el raton, los de compra se oscurecen a #c85200)
 * y el azul #2a3b71 de los rotulos. Solo se viste la
 * plantilla y las piezas que pinta FastSpring; el resto lo aporta su propia
 * hoja (base.css), que se carga antes que esta.
 *
 * base.css pinta los enlaces con "!important", asi que los colores de los
 * enlaces, los botones y el menu lo llevan tambien: sin el, el rotulo activo
 * del menu sale blanco sobre blanco. Es lo mismo que hacia la version 2.
 */

@font-face {
    font-family: "Poppins";
    src: url("poppins-v6-latin-regular.woff2") format("woff2"),
         url("poppins-v6-latin-regular.woff") format("woff"),
         url("poppins-v6-latin-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* El texto va en Arial, como el de dgassistant.com, con la misma lista de
   reserva para el chino; Poppins queda para los titulos. */
body.core-body-window {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #45505b;
    font-family: Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

#dg-store a {
    color: #074ca0 !important;
    text-decoration: none !important;
}

#dg-store a:hover,
#dg-store a:focus {
    color: #e46c0a !important;
    text-decoration: none !important;
}

.dg-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- cabecera ------------------------------------------------------------ */

/* La cabecera es la portada de la web: la misma foto, cubierta por el mismo
   degradado al 93 %, y encima los botones, el menu y el titulo. El logotipo
   queda a 30 pixeles del borde de arriba, como en la web desde 768 pixeles
   de ancho; por debajo, a 10. */
.dg-header {
    position: relative;
    background: #074ca0 url("https://www.dgassistant.com/assets/img/bgimg-1600.jpg") center / cover no-repeat;
    padding: 30px 0 0;
}

.dg-header__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(119deg, #074ca0 0%, #e57010 100%);
    opacity: 0.93;
}

.dg-header > .dg-container {
    position: relative;
}

/* La web declara "Open Sans" en el menu y en los botones, sin cargarla: cada
   visitante ve la del sistema. La tienda copia la declaracion para verse
   igual. */
#dg-store .dg-nav a,
.dg-featured,
#dg-store .dg-featured a,
#dg-store .dg-btn {
    font-family: "Open Sans", sans-serif;
}

.dg-header__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Panel blanco del logotipo: los mismos 30 pixeles de redondeo y el mismo
   relleno que #logo en dgassistant.com. */
.dg-logo {
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    border-radius: 30px;
    background: #ffffff;
}

#dg-store .dg-logo:hover {
    background: rgba(255, 255, 255, 0.9);
    text-decoration: none !important;
}

.dg-logo img {
    display: block;
    width: 275px;
    height: auto;
    border: 0;
}

.dg-header__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Botones con las medidas de la web: pastilla de 37 pixeles con borde blanco
   de dos, letra de 12 en negrita y 150 de ancho como minimo. Al pasar el raton
   los dos se rellenan del naranja de la marca. */
.dg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 150px;
    height: 37px;
    padding: 8px 10px;
    border: 2px solid #ffffff;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

#dg-store .dg-btn--filled {
    background: #e46c0a !important;
    color: #ffffff !important;
}

#dg-store .dg-btn--outline {
    background: transparent !important;
    color: #ffffff !important;
}

#dg-store .dg-btn--filled:hover,
#dg-store .dg-btn--outline:hover {
    background: #e46c0a !important;
    border-color: #e46c0a;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Menu con las medidas de la web: los elementos van seguidos, sin hueco
   entre ellos, y cada enlace mide 40 pixeles de alto, con el relleno de 5,
   15 y 15 de dgassistant.com. */
.dg-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

/* El enlace abre su propio contexto de apilamiento: asi la pastilla, que va
   por debajo del texto, no se queda tambien por debajo de la portada. */
#dg-store .dg-nav a {
    position: relative;
    z-index: 0;
    display: block;
    padding: 5px 15px 15px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 20px;
    text-transform: uppercase;
}

/* La tienda es la pagina de precios del sitio: su elemento lleva la
   pastilla blanca de la web, fina (25 pixeles de alto) y detras del texto.
   Al pasar el raton, la misma pastilla en cualquier enlace del menu y de
   los enlaces destacados, y nunca subrayado. */
#dg-store .dg-nav .dg-nav__current::after,
#dg-store .dg-nav a:hover::after,
#dg-store .dg-featured a:hover::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 0;
    left: 0;
    z-index: -1;
    height: 25px;
    border-radius: 20px;
    background: #ffffff;
}

#dg-store .dg-nav .dg-nav__current,
#dg-store .dg-nav a:hover,
#dg-store .dg-featured a:hover {
    color: #e46c0a !important;
    text-decoration: none !important;
}

/* Fila de enlaces destacados: las medidas del menu, con la letra de 13 y
   sin espaciado. Sube 3 pixeles para quedar a 37 del menu, como en la web.
   El rotulo va en cursiva y sin enlace. */
.dg-featured {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -3px 0 0;
    padding: 0;
    list-style: none;
}

.dg-featured__label {
    padding: 5px 15px 15px;
    color: #ffffff;
    font-size: 13px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 20px;
    text-transform: uppercase;
}

#dg-store .dg-featured a {
    position: relative;
    z-index: 0;
    display: block;
    padding: 5px 15px 15px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 20px;
    text-transform: uppercase;
}

/* --- titulo de la tienda -------------------------------------------------- */

/* Va dentro de la portada, como el titulo de cada pagina de la web: a 9
   pixeles de los enlaces destacados, blanco, en mayusculas y con el
   espaciado de la clase imo_heading. */
.dg-hero {
    padding: 9px 15px 40px;
    text-align: center;
}

.dg-hero h1 {
    margin: 0 0 10px;
    color: #ffffff;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 4px;
    line-height: 50px;
    text-transform: uppercase;
}

/* En Poppins, como el subtitulo de la portada de la web. */
.dg-hero p {
    max-width: 820px;
    margin: 0 auto;
    color: #ffffff;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    font-size: 16px;
}

/* --- contenido de FastSpring --------------------------------------------- */

.dg-main {
    padding: 30px 15px 10px;
}

#content h1,
#content h2,
#content h3,
#content h4,
.core-section-header,
.store-product-detail-title,
.store-product-list-item-title {
    color: #2a3b71;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

#content h1 {
    font-size: 26px;
}

#content h2,
.core-section-header,
.store-product-detail-title {
    font-size: 21px;
}

#content h3,
.store-product-list-item-title {
    font-size: 18px;
}

/* FastSpring marca los encabezados de la descripcion con la clase del titulo
   del producto, y su hoja los deja en linea. Un elemento en linea ignora los
   margenes verticales, de modo que el encabezado quedaba pegado al parrafo
   de encima. */
.store-product-detail-description .store-product-detail-title,
.store-product-detail-description-short .store-product-detail-title {
    display: block;
    margin: 26px 0 10px;
}

#content ul {
    padding-left: 20px;
}

#content li {
    margin-bottom: 6px;
}

.core-section {
    margin-bottom: 26px;
    padding: 0;
    border: 1px solid #e6e9ec;
    border-radius: 6px;
    background: #ffffff;
}

.core-section-header {
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid #e6e9ec;
    background: #f7f8fa;
}

.core-section-body,
.core-form-field-group-body {
    padding: 18px 20px;
}

.store-product-list-item {
    padding: 18px 0;
    border-bottom: 1px solid #e6e9ec;
}

.store-product-list-item-description,
.store-product-detail-description {
    color: #45505b;
}

/* Botones de la tienda: los de comprar y los de seguir adelante. Llevan el
   identificador delante porque el color de enlace del sitio, que si lo lleva,
   les ganaria el pulso. */
#dg-store .store-action-command,
#dg-store .store-decorate-button,
#dg-store .store-order-action-list a {
    display: inline-block;
    padding: 9px 24px;
    border: 1px solid #e46c0a;
    border-radius: 22px;
    background: #e46c0a !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#dg-store .store-action-command:hover,
#dg-store .store-decorate-button:hover,
#dg-store .store-order-action-list a:hover {
    background: #c85200 !important;
    border-color: #c85200;
    color: #ffffff !important;
    text-decoration: none !important;
}

.core-form-field-label {
    color: #2a3b71;
    font-weight: 600;
}

.core-form-field-required {
    color: #e46c0a;
}

.dg-secure {
    margin: 26px 0 0;
    color: #6b757e;
    font-size: 13px;
    text-align: center;
}

.dg-secure img {
    vertical-align: middle;
    margin-right: 8px;
    border: 0;
}

/* --- pie ------------------------------------------------------------------ */

.dg-footer {
    margin-top: 40px;
    padding: 34px 0 18px;
    background: #074ca0;
    background: linear-gradient(119deg, #074ca0 0%, #e57010 100%);
    color: #ffffff;
    font-size: 15px;
}

.dg-footer__columns {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.dg-footer__columns ul {
    flex: 1 1 220px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dg-footer__columns li {
    margin-bottom: 7px;
}

.dg-footer__title {
    margin-bottom: 12px;
    font-size: 15px;
}

#dg-store .dg-footer a,
#dg-store .dg-footer strong {
    color: #ffffff !important;
}

/* El relleno y el redondeo van siempre puestos para que la pastilla del raton
   no mueva la linea al aparecer. */
#dg-store .dg-footer a {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
}

/* El <strong> de los titulos de columna lleva el blanco con !important, asi
   que la pastilla del raton tiene que tenirlo tambien: de lo contrario el
   titulo queda en blanco sobre blanco y desaparece. */
#dg-store .dg-footer a:hover {
    background: #ffffff !important;
    text-decoration: none !important;
}

#dg-store .dg-footer a:hover,
#dg-store .dg-footer a:hover strong {
    color: #e46c0a !important;
}

.dg-footer__legal {
    max-width: 1170px;
    margin: 26px auto 0;
    padding: 14px 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 14px;
    text-align: center;
}

.dg-footer__legal a {
    margin-left: 10px;
}

/* --- escritura de derecha a izquierda (arabe) ----------------------------- */

/* El resto lo resuelve el propio navegador con dir="rtl": el reparto de las
   columnas y la alineacion del texto se invierten solos. */
[dir="rtl"] .dg-footer__legal a {
    margin-left: 0;
    margin-right: 10px;
}

[dir="rtl"] .dg-secure img {
    margin-right: 0;
    margin-left: 8px;
}

/* --- pantallas estrechas -------------------------------------------------- */

@media (max-width: 767px) {
    .dg-header {
        padding-top: 10px;
    }

    .dg-header__top {
        justify-content: center;
        text-align: center;
    }

    .dg-header__buttons {
        justify-content: center;
    }

    /* Sin el relleno inferior de escritorio: el menu ocupa varias lineas y
       cada una mide 30 pixeles, con la pastilla dentro. */
    #dg-store .dg-nav a {
        padding: 5px 9px;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .dg-featured__label,
    #dg-store .dg-featured a {
        padding: 5px 7px;
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .dg-hero h1 {
        font-size: 22px;
        letter-spacing: 1.5px;
        line-height: 32px;
    }

    .dg-footer__columns {
        gap: 18px;
    }
}