/* definiciones globales de diseño */
:root
{
    --color-1: #000000;
    --color-2: #f1efe2;
    --color-3: #ed6663;
    --color-4: #0f4c81;
    --color-5: #3f709a;
    --font-1: 'MoserratMedium', sans-serif;
    --font-2: 'MoserratLight', sans-serif;
    --vel-1: 3000ms;
}

/* definicion de colores en primer plano */
.sa-c-primary { color: var(--color-1) }
.sa-c-secondary { color: var(--color-2) }
.sa-c-red { color: var(--color-3) }
.sa-c-blue { color: var(--color-4) }
.sa-c-light-blue { color: var(--color-5) }

/* definicion de colores en backgroud */
.sa-b-primary { background-color: var(--color-1) }
.sa-b-secondary { background-color: var(--color-2) }
.sa-b-red { background-color: var(--color-3) }
.sa-b-blue { background-color: var(--color-4) }
.sa-b-light-blue { background-color: var(--color-5) }

/* fuentes predeterminadas */
.sa-f-title { font-family: var(--font-1) ; text-transform: uppercase; }
.sa-f-primary { font-family: var(--font-1) ; }
.sa-f-secondary { font-family: var(--font-2); }

/* botones */
.sa-btn-primary { background-color: var(--color-3); border-color: var(--color-3); color: var(--color-2); transition-delay: 0.1s; }
.sa-btn-primary:hover { background-color: var(--color-2); color: var(--color-3);}

/* bordes */
.sa-border 
{
    border-top: solid 1px var(--color-4);
    border-right: solid 1px var(--color-3);
    border-bottom: solid 1px var(--color-3);
    border-left: solid 1px var(--color-4);
    border-radius: 5px;
}

/* configuracion general body */
html { font-size: 1em; }
body { background-color: var(--color-2); font-family: var(--font-2); margin: 0; padding: 0; }

/* logo */
.sa-brand { max-width: 15rem; }

/* qr container */
.sa-qr { max-width: 15rem; padding: 1rem; border: solid 1px var(--color-3); }

/* titulos y textos de sección */
.sa-section-title
{
    font-family: var(--font-1);
    font-size: 2.5rem;
    text-transform: uppercase;
}
.sa-section-description
{
    font-family: var(--font-2);
    padding-left: 10%;
    padding-right: 10%;
}

/* personalización de la barra de nenú */
.sa-navbar 
{
    border: none;
    border-bottom: solid 2px;
    border-color: var(--color-3);
}
.sa-dropdown { width: max-content; }
.sa-link {
    display: block;
    padding: 1rem 1rem 1rem 1rem;;
    color: var(--color-1);
    transition-delay: 0.1s;
    text-decoration: none;
    font-size: 18px;
}
.sa-link:hover
{
    color: var(--color-3);
    text-decoration: none;
}

/* logo de servicios */
.sa-service
{
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 1.5rem;
}
.sa-service-border
{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 0.75rem solid;
    border-radius: 100% 100% 100% 100%;
    border-top-color: var(--color-4);
    border-bottom-color: var(--color-3);
    border-left-color: var(--color-4);
    border-right-color: var(--color-3);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.sa-service-letter
{   
    position: absolute;
    top: 40%;
    left: 50%;
    font-family: var(--font-1);
    font-size: 6rem;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--color-4);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.sa-service-letter:hover
{
    text-decoration: none;
}
.sa-service-title
{
    position: absolute;
    top: 70%;
    left: 50%;
    font-family: var(--font-1);
    font-size: 1.25em;
    text-transform: uppercase;
    text-align: center;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.sa-service-line
{
    border-bottom: solid 2px var(--color-4);
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.sa-service:hover { transform: scale(1.1); }
.sa-service:hover .sa-service-border
{
    -webkit-animation-name: spin;
    -webkit-animation-duration: var(--vel-1);
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: var(--vel-1);
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: var(--vel-1);
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: var(--vel-1);
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.sa-service:hover .sa-service-letter { color: var(--color-5); }
.sa-service:hover .sa-service-title { color: var(--color-5); }

/* efectos */
@-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } }
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* footer */
.sa-footer-link
{
    color: var(--color-2);
    transition-delay: 0.1s;
    text-decoration: none;
}
.sa-footer-link:hover
{
    color: var(--color-3);
    text-decoration: none;  
}