*{
    font-size: 20px;
}
/*Paleta de diseño */
:root {
  /* Colores */
  --fondo-todo:  rgb(22,13,33);
  --destacado:  rgb(43, 26, 65);
  --color-principal:hsla(280, 100%, 97%, 0.684);
  /* (header/footer/links) */
  --color-secundario: hsl(50, 93%, 48%);
  /* (sección equipo) */
  --color-texto-oscuro: hsl(279, 85%, 35%);
  /* Títulos */
  --color-texto-medio: hsl(0 0% 25%);
  /* Cuerpo de texto */
  --color-claro: whitesmoke;
  /* Fondos y textos claros */
 --color-secciones: hsl(52, 81%, 69%);
  --max: 920px;
  --font: "Times New Roman", serif;
  /* Tipografías */
  --fuente-principal: serif; 
  --fuente-titulos: system-ui, sans-serif;
  --altura-linea-textos: 1.6;
  --altura-linea-titulos: 1.1;
  /* Espaciado y Estructura */
  --ancho-contenedor: min(75rem, calc(100% - 2rem));
  /* ancho igual al valor mínimo entre 1200px (75rem) o el 100% del ancho disponible menos 2rem (32px). Esto garantiza margen en pantallas pequeñas sin usar padding */
  --espaciado-base: 1rem;
  /* Sombras */
  --sombra-caja: 0 4px 4px hsla(0, 7%, 82%, 0.118);

}
html {
  scroll-behavior: smooth;
}
/*HEADER*/
header nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  margin: none;
}
header .monograma {
    width: 3em;
    display: flex;
    justify-items: left;
}
header ul{
   display: inline-flex;
   list-style: none;
 }
 header a {
   background-color:var(--fondo-todo);
   color: var(--color-principal);
   border: 0.1em solid var(--color-secundario);
   text-decoration: none;
   font-weight: bolder;
   display: block;
   width: fit-content;
   padding: 0.5em;
   margin: 0.3em;
 }
 /*BODYYY*/
body {
    background-color: var(--fondo-todo);
}
body {
    margin: 2em;
}
main .guada {
    max-width: 100%;
    width: 50em;
    margin: var(--altura-linea-textos);
    display: flex;
    justify-content: space-between;
    margin: 2em;
}
main .cuadrocolor2 {
    grid-row-start: 5;
    grid-column-start: 1;
}
main .patuuu{
    max-width: 100%;
    width: 30em;
}
.botones {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: none;
  background-color: var(--fondo-todo)
}
.botones2 {
     display: flex;
   list-style: none;
   background-color: var(--fondo-todo);
   border: none;
   font-style: italic;
   font-weight: lighter;
 }
 .botones2 a{
 background-color: var(--fondo-todo);
   color: var(--color-principal);
   border: 0.1em solid var(--color-principal);
   text-decoration: none;
   font-weight: bolder;
   display: block;
   width: fit-content;
   padding: 0.8em;
   margin: 0.6em;
 }
h2, h3, h4{
color:var(--color-claro);
}
#quiensoy {
    display: flex;
    align-items: center;
    gap: 20px;
}
.qs img{
display: flex;
  flex-direction: column; 
  align-items: center;
  max-width: 40em;
}
.qs p{
margin-top: 2em;
  font-size: 1em;
}
.gustos .imggusto {
    max-width: 100%;
    width: 60em;
}
#gustos li{
    background-color: var(--fondo-todo);
    display:inline-block;
    align-items: center;
    padding: 1em;
    margin: 3em;
    border-left: 0.1em solid var(--color-texto-oscuro);
}
#gustos img {
    width: 5em;
    display: flex;
  flex-direction: column; 
  align-items: center;
}
#gustos p{
    margin-top: 1em;
    font-size: 1em;
    align-items: center;
}
.cuadrocolor1 {
    background-color: var(--fondo-todo);
    display: inline-block;
    padding: 0.1em; 
    margin: 0.2em;
}
.da{
font-size: 0.5em;
color: var(--color-texto-medio);
}
p {
    color: var(--color-claro);
}
#formacion{
    background-image: url(imagenes/yoooooo.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 15em;
}
#formacion ul{
    background-image: url(imagenes/recibida.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 15em;
}
.formasao li{
    list-style: none;
}
.formasao h5{
    color: var(--color-secciones);
    font-size: 2em;
    margin: 0.5em;
    display: flex;
    text-decoration: underline;
}
.formasao p{
    margin-top: 2em;
    display: flex;
}
/*cambiar color y agregar subrayado o punteado con color en textos de h2, h3*/
.cuadrocolor {
    background-color: var(--fondo-todo);
    border: 0.2em solid var(--color-principal);
    display: inline-block;
    padding: 0.1em; 
    margin: 0.2em;
}
body img {
    width: 15em;
}
/*cambiar color y forma al punteo de una lista desordenada*/
.nocambiar{
color: initial;
text-decoration:underline;
}
/*en el html se puso en el footer- <h3 class="nocambiar"> para solamente seleccionar ese texto para modificarlo tanto color como subrayado o tipografia*/
/*en el html se puso en los integrantes <h4 class="color1"> para solamente seleccionar ese texto para modiciarlo tanto color como subrayado o tipografia*/
/* en header se creo nav que es para la aplicacion de la linea rosa y ubicar los botones (con sus links), dentro estan los links y el padding es la distancia de los botones que queden dentro de la linea sin tocar los bordes*/
.trabajosp li{
    background-color: none;
    display:inline-block;
    padding: 1em;
    margin: 0.5em;
    border: 0.1em solid rgb(198, 146, 247);
}
.trabajosp img {
    width: 9em;
}
#trabajos .trabimg {
    margin-top: 2em;
}
.trabajosp a{
    text-decoration: none;
    background-color: none;
    color: var(--color-texto-oscuro)
}
/*en el html se creo en el ul class="cuadrocolor" y es para el interior del cuadro rosa, margin es para que los objetos fuera del contenedor no toquen los bordes*/
main a {
    color: var(--fondo-todo);
    list-style: none;
    font-style: italic;
    
}
main nav ul{
 display: flex;
   list-style: none;
   justify-content: center;
}
#contacto a{
background-color:var(--color-texto-oscuro);
background-image: url(imagenes/fondovioleta.jpg);
   color: var(--color-claro);
   font-style: italic;
   text-decoration: none;
   font-weight: bolder;
   display: inline-block;
   width: fit-content;
   padding: 0.5em;
   margin: 1em;
}
.compas ul{
    list-style: none;
    color: var(--color-claro);
    font-style: italic;
    font-weight: lighter;
    padding: 1em
}
.compas li{
    border-left:  0.1em solid var(--color-secundario);
    display: inline-block;
    margin: 2em;
    padding: 1em;
    justify-content: center;
    align-items: center;
}
.compas li img{
    width: 10em;
    border-radius: 100em;
}
.compas h6{
    margin: 0.3em;
    justify-content: center;
    font-size: 2em;
    text-shadow: 0.1em 0.1em 0.1em var(--color-texto-medio);
}
.compas a{
    color: var(--color-secciones);
    text-decoration: none;
    font-weight: lighter;
    font-size: 0.7em;
    display: flex;
}
.prototipo  {
    display: flex;
    flex-direction: column; /* Coloca los elementos en columna */
    align-items: center;    /* Centra horizontalmente */
    gap: 10px;
}
footer p {
    font-size: 0.7em;
    font-weight: lighter;
}