/*
Theme Name: Portafolio Web
Theme URI: https://gi.blas.laboratoriodiseno.cl/
Author: Gian Carlos Blas Lujan
Author URI: https://gi.blas.laboratoriodiseno.cl/
Description: tema para portafolio web
Version: Versión del tema
*/

/* Estilos CSS comienzan aquí */
a {
    text-decoration: none;
}

:root {
    --bg-naranjo: #FEFAFA;
    --naranjo: #F45A2B;
    --azul: #257CFF;
    --azul-oscuro: #002D5B;
}

/* header */
header {
   background-color: #0e2a47;
}

#logo-gian {
    height: 60px;
}

#item-nav-proyectos {
    background-color: var(--naranjo);
    color: white;
    border-radius: 12px;
}

#item-nav-proyectos:hover{
    background-color: #b94421;
}

/* Banner */
#img-banner {
    width: 100%;
}

.row {
    width: 100%;
}

#btn-certificaciones {
    background-color: var(--azul);
    border: none;
    border-radius: 12px;
}

#btn-certificaciones>a {
    color: white;
    text-decoration: none;
}

#btn-certificaciones:hover{
    background-color: #1d67d6;
}

.redes-sociales {
    font-size: 34px;
}

#contenedorBanner{
    background-image: url("img/bg-img.svg");
    background-size: cover;
   
}

/* Sección Proyectos */

#seccionProyectos {
    background-image: url("./img/bg-img2.svg");
    background-position: bottom;
}

.miVideo {
    width: 80%;
    padding: 20px;
    border-radius: 10px;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.imgs-proyectos {
    width: 80%;
}

.descripcion-proyectos {
    width: 60%;
}

.btn-ver-mas-proyectos {
    background-color: var(--naranjo);
    border: none;
    border-radius: 12px;
}

.btn-ver-mas-proyectos>a {
    color: white;
}

.btn-ver-mas-proyectos:hover{
    background-color: #b94421;
}

/* Sección habilidades técnicas */
.container-habilidades-tecnicas {
    background-color: var(--bg-naranjo);
}

.logos-habilidades-tecnicas {
    width: 50px;
}

.tarjetas-habilidades-tecnicas {
    width: 98%;
    background-color: white;
    border-radius: 12px;
}

/* Footer */
footer {
    background-color: var(--azul-oscuro);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Página Proyectos */
#seccionUXUI {
    background-image: url("./img/bg-img2.svg");
    background-size: contain;
    background-repeat: repeat-y;
    background-position: left;
    /* background-position: center; */
}

#seccion-frontend{
    background-image: url("./img/bg-img2.svg");
    background-size: contain;
    background-position: bottom;
    background-repeat: repeat-y;
}

#seccionCMS{
    background-image: url("./img/bg-img2.svg");
    background-size: contain;
    background-position: bottom;
    background-repeat: repeat-y;
}

#tituloDiseñoCentradoUsuario {
    background-color: var(--azul);
    width: fit-content;
    padding: 5px 10px;
    border-radius: 10px;
}

.parrafoDiseñoUxUi {
    background-color: var(--azul);
    padding: 5px 10px;
    border-radius: 10px;
}

#tituloFrontEnd {
    background-color: var(--naranjo);
    width: fit-content;
    padding: 5px 10px;
    border-radius: 10px;
}

.parrafoFrontEnd {
    background-color: var(--naranjo);
    padding: 5px 10px;
    border-radius: 10px;
}

#tituloFrameworks {
    background-color: var(--azul-oscuro);
    width: fit-content;
    padding: 5px 10px;
    border-radius: 10px;
}

.parrafoFramework {
    background-color: var(--azul-oscuro);
    padding: 5px 10px;
    border-radius: 10px;
}

.subrayado {
    display: block;
    width: 138px;
    /* Ajusta el ancho del subrayado según sea necesario */
    height: 3px;
    /* Ajusta la altura del subrayado según sea necesario */
    background-color: orange;
    /* Color naranja */
    margin: 0 auto;
    /* Centra el subrayado horizontalmente */
    margin-top: 5px;
    /* Ajusta el margen superior según sea necesario */
}

.subrayadoWordpress{
    display: block;
    width: 290px;
    /* Ajusta el ancho del subrayado según sea necesario */
    height: 3px;
    /* Ajusta la altura del subrayado según sea necesario */
    background-color: orange;
    /* Color naranja */
    margin: 0 auto;
    /* Centra el subrayado horizontalmente */
    margin-top: 5px;
}

.subrayadoGasfiteriaTotal{
    display: block;
    width: 212px;
    /* Ajusta el ancho del subrayado según sea necesario */
    height: 3px;
    /* Ajusta la altura del subrayado según sea necesario */
    background-color: orange;
    /* Color naranja */
    margin: 0 auto;
    /* Centra el subrayado horizontalmente */
    margin-top: 5px;
}

.subrayadoTechFix{
    display: block;
    width: 105px;
    /* Ajusta el ancho del subrayado según sea necesario */
    height: 3px;
    /* Ajusta la altura del subrayado según sea necesario */
    background-color: orange;
    /* Color naranja */
    margin: 0 auto;
    /* Centra el subrayado horizontalmente */
    margin-top: 5px;
}

#seccion-frontend {
    background-color: var(--bg-naranjo);
}

/* Proyecto Diseño UX/UI - ZonaTech */
#banner-zonatech {
    width: 100%;
}

/* Sección publico objetivo */
#publico-objetivo {
    background-color: var(--bg-naranjo);
}

.usuarios {
    width: 100%;
}

#img-publico-objetivo-zonatech {
    width: 100%;
}

/* Sección benchmark */
#seccion-benchmark {
    background-color: var(--bg-naranjo);
}

#benchmark-zonatech {
    width: 100%;
}

#img-mapa-de-sitio-zonatech {
    width: 100%;
}

/* Sección wireframes */
#seccion-wireframes {
    background-color: var(--bg-naranjo);
}

.wireframes-zonatech>img {
    width: 100%;
}

.mockups-zonatech>img {
    width: 100%;
}

/* Videos CMS */
.videosCMS{
    width: 100%;
}

#parrafoWordpress{
    width: 60%;
}

/* botones */
#parrafoWordpress{
    width: 60%;
}
.btnVerProyectoUXUI{
    border: none;
    background-color: var(--azul);
    border-radius: 10px;
}
.btnVerProyectoUXUI:hover{
    background-color: var(--azul-oscuro);
}

.btnVerProyectoFrontEnd{
    border: none;
    background-color: var(--naranjo);
    border-radius: 10px;
}
.btnVerProyectoFrontEnd:hover{
    background-color: #d45129;
}

.btnVerProyectoFrameworks{
    border: none;
    background-color: var(--azul-oscuro);
    border-radius: 10px;
}
.btnVerProyectoFrameworks:hover{
    background-color: #005fbe;
}