/* definiciones globales de diseño */
:root
{
    --color-1: #000000;
    --color-2: #fff;
    --color-3: #B2E0E7; /* F7F7F7 B2E0E7 */
    --color-4: #64C1D0;
    --color-5: #17A2B8;
    --font-1: 'Roboto', sans-serif;
    --font-2: 'Roboto', sans-serif;
}

/* definicion de colores en primer plano */
.uv-col-1 { color: var(--color-1) }
.uv-col-2 { color: var(--color-2) }
.uv-col-3 { color: var(--color-3) }
.uv-col-4 { color: var(--color-4) }
.uv-col-5 { color: var(--color-5) }

/* definicion de colores en backgroud */
.uv-back-1 { background-color: var(--color-1) }
.uv-back-2 { background-color: var(--color-2) }
.uv-back-3 { background-color: var(--color-3) }
.uv-back-4 { background-color: var(--color-4) }
.uv-back-5 { background-color: var(--color-5) }

/* fuentes predeterminadas */
.uv-f-title { font-family: var(--font-1) ; font-weight: 300; text-transform: uppercase; }
.uv-f-primary { font-family: var(--font-1); font-weight: 300; }
.uv-f-secondary { font-family: var(--font-1); font-weight: 100; }

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

/* configuracion general body */
html { font-size: 1em; scroll-behavior: smooth; }
body { background-color: var(--color-2); font-family: var(--font-2); }
hr { background-color: var(--color-3); }

/* establece la distancia con el borde superior cuando se utiliza la navegacion por anclas */
.uv-anchor {
    margin-top: -100px; 
    margin-bottom: 100px;
}

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

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

/* personalización de la barra de nenú */
.uv-navbar 
{
    border: none;
    border-bottom: solid 1px;
    border-color: var(--color-3);
    background-color: var(--color-2);
}
.uv-link
{
    display: block;
    padding: 1rem 1rem 1rem 1rem;;
    color: var(--color-1);
    transition-delay: 0.2s;
    text-decoration: none;
}
.uv-link:hover
{
    color: var(--color-5);
    text-decoration: none;
    transform: scale(1.1);
}

/* logo de servicios */
.uv-service
{
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 1.5rem;
}
.uv-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);
}
.uv-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%);
}
.uv-service-letter:hover
{
    text-decoration: none;
}
.uv-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%);
}
.uv-service-line
{
    border-bottom: solid 2px var(--color-4);
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.uv-service:hover { transform: scale(1.1); }
.uv-service:hover .uv-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;
}
.uv-service:hover .uv-service-letter { color: var(--color-5); }
.uv-service:hover .uv-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 */
.uv-footer {
    background-color: var(--color-5);
}
.uv-footer .h3,small {
    color: var(--color-2);
}
.uv-footer-link {
    color: var(--color-2);
    transition-delay: 0.1s;
    text-decoration: none;
}
.uv-footer-link:hover {
    color: var(--color-3);
    text-decoration: none;  
}
.uv-footer hr {
    background-color: var(--color-2);
}

/* personalización del carrousel */
.uv-carr-control span
{
    opacity: 0;
    color: var(--color-5);
    transition-delay: 0.1s;
}
.uv-carr-control:hover span
{
    opacity: 100;
}