/* INDEX
------variables------
------layout------
------tipografia------
------menu------
------formulario------
------footer------
*/
/* ------variables------ */
:root {
    --primario: rgb(242, 208, 39);
    --secundario: rgb(242, 191, 94);
    --terciario: rgb(191, 110, 63);
    --cuaternario: rgb(249, 95, 20);
    --quinario: rgb(154, 191, 73);
    --senario: rgb(127, 217, 37);
    --encabezados: "Courgette", cursive;
    --texto-general: "Libre Baskerville", serif;
    scroll-behavior: smooth;
}

/* ------layout------ */
header{
    position: fixed;
    background-color: white;
    width: 100%;
    left: 0;
    padding: 0px 20px;
    box-shadow: 0 5px 5px 0 #4f322040;
}
#sobremi{
    padding-top: 190px;
}
#sobremi img {
    height: 100%;
    object-fit: cover;
}
#titulo-encabezado {
    background-color: var(--cuaternario);
    border-radius: 15%;
}

.seccion {
    border: 4px solid;
    border-radius: 15% 0%;
    border-color: var(--terciario);
    padding: 40px 40px;
}

.tituloseccion {
    background-color: var(--primario);
    border-radius: 15%;
    margin: 15px 75px 15px 75px;
}

.fila {
    margin: 10px;
}

.columna {
    margin: 5px 10px;
}

.col-izq {
    text-align: left;
    padding-left: 10px;
}

.col-cent {
    text-align: center;
}

.col-der {
    text-align: right;
}

.foto {
    border: 4px solid;
    border-radius: 35% 0%;
    border-color: var(--senario);
    padding: 25px;
}

#sobremi .tituloseccion h2 span {
    background-image: url(img/iconabout.png);
}
#servicios .tituloseccion h2 span {
    background-image: url(img/iconservicios.png);
}
#equipo .tituloseccion h2 span {
    background-image: url(img/iconequipo.png);
}
#mitrabajo .tituloseccion h2 span {
    background-image: url(img/iconproyecto.png);
}
#contacto .tituloseccion h2 span {
    background-image: url(img/iconcontacto.png);
}
h2 span {
    background-repeat: no-repeat;
    background-size: contain;
    padding-right: 40px;
    background-position: 100%;
}
#literatura span {
    background-image: url(img/iconliteratura.png);
}
#tv span {
    background-image: url(img/icontv.png);
}
#merchandising span {
    background-image: url(img/iconmerchandising.png);
}

.linkservicio a span{
    background-repeat: no-repeat;
    background-size: contain;
    padding-right: 40px;
    background-position: 100%;
}
/* ------tipografia------ */
body {
    font-family: var(--texto-general);
    color: var(--terciario);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--encabezados);
}

h1 {
    color: var(--primario);
}

h2 {
    color: var(--cuaternario);
}

h3 {
    color: var(--quinario);
}

h4 {
    color: var(--secundario);
}


/* ------menu------ */
.menu {
    display: flex;
    list-style-type: none;
}

.menu li {
    margin-right: 30px;
}

.menu a {
    color: var(--primario);
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

.linkservicio a {
    color: var(--primario);
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border: 4px solid;
    border-radius: 15% 0%;
    background-color: var(--cuaternario);
    padding: 10px 10px;
}

.linkservicio a:hover {
    color: var(--senario);
    border-bottom: 4px solid var(--senario);
}

.menu a:hover {
    color: var(--senario);
    border-bottom: 4px solid var(--senario);
}

/* ------formulario------ */
/* ------footer------ */