:root {
                                                                                                                                --fuentePrincipal: 'Staatliches', cursive;
                                                                                                                                --primario: #9b27b0;
                                                                                                                                --primarioOscuro: #1e75d8;
                                                                                                                                --secundario: #ffce00;
                                                                                                                            }
                                                                                                                            
                                                                                                                            html {
                                                                                                                                font-size: 62.5%;
                                                                                                                                box-sizing: border-box;
                                                                                                                            }
                                                                                                                            
                                                                                                                            *,
                                                                                                                            *:before,
                                                                                                                            *:after {
                                                                                                                                box-sizing: inherit;
                                                                                                                            }
                                                                                                                            
                                                                                                                            body {
                                                                                                                                background-color: black;
                                                                                                                                /* con var utilizo la variable que he puesto arriba*/
                                                                                                                                line-height: 2;
                                                                                                                                font-size: 2rem;
                                                                                                                            }
                                                                                                                            
                                                                                                                            body.footer-fijo {}
                                                                                                                            
                                                                                                                            h1 {
                                                                                                                                color: var(--secundario);
                                                                                                                                text-align: center;
                                                                                                                                font-size: 4rem;
                                                                                                                                font-family: var(--fuentePrincipal);
                                                                                                                            }
                                                                                                                            
                                                                                                                            p {
                                                                                                                                font-size: 1.8rem;
                                                                                                                                font-family: Arial, Helvetica, sans-serif;
                                                                                                                                color: white;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .contenedor {
                                                                                                                                max-width: 1000px;
                                                                                                                                width: 95%;
                                                                                                                                margin: 0 auto;
                                                                                                                            }
                                                                                                                            
                                                                                                                            img {
                                                                                                                                max-width: 100%;
                                                                                                                                /* nos va hacer todas las imagenes responsivas*/
                                                                                                                            }
                                                                                                                            
                                                                                                                            .header {
                                                                                                                                display: grid;
                                                                                                                                justify-content: center;
                                                                                                                                padding: 3rem 0
                                                                                                                            }
                                                                                                                            
                                                                                                                            .barra {
                                                                                                                                background-color: black;
                                                                                                                                padding: 1rem 0;
                                                                                                                                width: 100%;
                                                                                                                            }
                                                                                                                            
                                                                                                                            @media only screen and (max-widht:768px) {
                                                                                                                                .barra {
                                                                                                                                    max-width: 95%;
                                                                                                                                    justify-content: center;
                                                                                                                                }
                                                                                                                            }
                                                                                                                            
                                                                                                                            .barra nav {
                                                                                                                                display: grid;
                                                                                                                                /* cuando voy a usar display grid, tengo que poner display: grid;  como cuando uso flex box, pongo display: flex;*/
                                                                                                                                grid-template-columns: 300px 300px;
                                                                                                                                /* me los pone uno al lado del otro, creamos dos columnas de  200 px cada una*/
                                                                                                                                grid-column-gap: 1rem;
                                                                                                                                /* crea separacion entre columnas de 1 rem*/
                                                                                                                                justify-content: center;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .barra .nav a {
                                                                                                                                font-family: var(--fuentePrincipal);
                                                                                                                                font-size: 3rem;
                                                                                                                                text-align: center;
                                                                                                                                color: #ffffff;
                                                                                                                                text-decoration: none;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .barra .nav a:hover {
                                                                                                                                /* cambio color al pasar mouse encima*/
                                                                                                                                color: var(--secundario);
                                                                                                                            }
                                                                                                                            
                                                                                                                            .lista-productos {
                                                                                                                                display: grid;
                                                                                                                                grid-template-columns: repeat(2, 1fr);
                                                                                                                                grid-gap: 2rem;
                                                                                                                                /* separacion entre los elementos*/
                                                                                                                            }
                                                                                                                            
                                                                                                                            @media (min-width: 768px) {
                                                                                                                                .lista-productos {
                                                                                                                                    display: grid;
                                                                                                                                    grid-template-columns: repeat(3, 1fr);
                                                                                                                                    /* cuando es mayor de 768 pasan a salir tres productos en linea*/
                                                                                                                                }
                                                                                                                            }
                                                                                                                            
                                                                                                                            .producto {
                                                                                                                                background-color: var(--primarioOscuro);
                                                                                                                                padding: 1rem;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .contenido-producto p {
                                                                                                                                font-family: var(--fuentePrincipal);
                                                                                                                                color: white;
                                                                                                                                text-align: center;
                                                                                                                                margin: 1rem 0;
                                                                                                                                line-height: 1.2;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .contenido-producto .titulo {
                                                                                                                                font-size: 4rem;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .contenido-producto .precio {
                                                                                                                                font-size: 2.8rem;
                                                                                                                                color: var(--secundario);
                                                                                                                            }
                                                                                                                            
                                                                                                                            h3 {
                                                                                                                                text-align: center;
                                                                                                                                color: yellow;
                                                                                                                                text-justify: auto;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .video {
                                                                                                                                width: 100%;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .grafico {
                                                                                                                                min-height: 300px;
                                                                                                                                /* asi si saldra cuando se va en dispositivo mas pequeño*/
                                                                                                                                grid-column: 1 / 3;
                                                                                                                                background-size: cover;
                                                                                                                                background-position: center;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .grafico-1 {
                                                                                                                                background-image: url(../img/IMG_2400.JPG);
                                                                                                                                display: grid;
                                                                                                                                grid-row: 2 / 3;
                                                                                                                                /* con esto la imagen se colocara entre fila 2 y 3 , y columna 1 y 3*/
                                                                                                                            }
                                                                                                                            
                                                                                                                            .grafico-2 {
                                                                                                                                background-image: url(../img/airport.jpg);
                                                                                                                                grid-row: 8 / 9;
                                                                                                                            }
                                                                                                                            
                                                                                                                            @media (min-width:768px) {
                                                                                                                                .grafico-2 {
                                                                                                                                    grid-row: 5 / 6;
                                                                                                                                    grid-column: 2 / 4;
                                                                                                                                }
                                                                                                                            }
                                                                                                                            
                                                                                                                            @media (min-width:768px) {
                                                                                                                                .contenedor-informacion {
                                                                                                                                    display: grid;
                                                                                                                                    grid-template-columns: repeat(2, 1fr);
                                                                                                                                    /* dos columnas de una fraccion*/
                                                                                                                                    /* puedo experimentar con los valores, por eje,plo si pongo 2fr, 1 fr , tomara el texto dos fracciones y la fotos 1 fraccion*/
                                                                                                                                    grid-column-gap: 2rem;
                                                                                                                                    /* me da separación entre las columnas*/
                                                                                                                                }
                                                                                                                            }
                                                                                                                            
                                                                                                                            .imagen-producto {
                                                                                                                                width: 100%;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .footer {
                                                                                                                                background-color: var(--primarioOscuro);
                                                                                                                                padding: 1rem 0;
                                                                                                                                margin-top: 2rem;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .copyright {
                                                                                                                                font-family: var(--fuentePrincipal);
                                                                                                                                color: white;
                                                                                                                                font-size: 2rem;
                                                                                                                                text-align: center;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .formulario-pedido {
                                                                                                                                display: grid;
                                                                                                                                grid-template-columns: repeat (3, 1fr);
                                                                                                                                grid-template-rows: repeat (2, 6rem);
                                                                                                                                grid-gap: 1rem;
                                                                                                                                /* grid-column-gap separación entre las columnas, grid-row-gap aplica a las filas, grid-gap aplica a todos*/
                                                                                                                            }
                                                                                                                            
                                                                                                                            .campo {
                                                                                                                                background-color: transparent;
                                                                                                                                border: 5px solid #ffffff;
                                                                                                                                font-family: var(--fuentePrincipal);
                                                                                                                                font-size: 3rem;
                                                                                                                                padding: 1rem;
                                                                                                                                width: 100%;
                                                                                                                                color: #ffffff;
                                                                                                                                text-align: center;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .talla {
                                                                                                                                -webkit-appearance: none;
                                                                                                                                -webkit-border-radius: 0px;
                                                                                                                                grid-column: 1/3;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .boton {
                                                                                                                                background-color: var(--secundario);
                                                                                                                                font-size: 2rem;
                                                                                                                                font-family: var(--fuentePrincipal);
                                                                                                                                border: none;
                                                                                                                                transition: background-color .3s ease;
                                                                                                                                grid-column: 1/4;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .boton:hover {
                                                                                                                                cursor: pointer;
                                                                                                                                background-color: rgb(233, 187, 2);
                                                                                                                            }
                                                                                                                            
                                                                                                                            .video {
                                                                                                                                text-align: center;
                                                                                                                            }
                                                                                                                            
                                                                                                                            .video1 {
                                                                                                                                display: block;
                                                                                                                                text-decoration: none;
                                                                                                                                text-align: center;
                                                                                                                                cursor: pointer;
                                                                                                                                background-color: rgb(233, 187, 2);
                                                                                                                            }
                                                                                                                            
                                                                                                                            .siguiente {
                                                                                                                                position: inherit;
                                                                                                                                text-align: center;
                                                                                                                            }