/** Snippet para corregir el problema de box model **/
html {
    box-sizing: border-box;
    font-size: 62.5%;/** 1rem = 10px **/
}
*, *:before, *:after{
    box-sizing: inherit;
}
/* Fin snipeet*/

/* Globales*/
@font-face {
    font-family: Raleway;
    src: url(../fonts/Raleway/Raleway-VariableFont_wght.ttf);
}
@font-face {
    font-family: Raleway-Italic;
    src: url(../fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf);
}
@font-face {
    font-family: Playfair-Display;
    src: url(../fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf);
}
@font-face {
    font-family: Playfai-Display-Italic;
    src: url(../fonts/Playfair_Display/PlayfairDisplay-Italic-VariableFont_wght.ttf);
}
body{
    font-family: Playfair-Display;
    font-size: 1.7rem;
}

h1, h2, h3, h4 {
    font-family: Raleway;
}
h1 {
    font-size: 4.5rem;
}
h2 {
    font-size: 3rem;
}
h3 {
    font-size: 2.5rem;
}
h4 {
    font-size: 2rem;
}
a {
    text-decoration: none;
    color: #000;
}

.contenedor {
    max-width: 120rem;
    margin: 0 auto;
}

img {
    max-width: 100%;
}
/* Fin Globales */

/** Utilidades **/
.texto-centrado{
    text-align: center;
}
/** Fin Utilidades **/


/** Header y navegacion **/

.h1-sitio {
    color: rgba(25, 25, 25, 1);
    text-align: center;
}
.h1-sitio span{
    color: #037bc0;
}
.h2-sitio {
    color:  rgba(25, 25, 25, 1);
    text-align: center;
}

.contenedor-navegacion {
    border-top: 1px solid #e1e1e1;
}

.navegacion-principal {
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
}

.hero {
    background-image: url(../images/principal.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 55rem;
}

/** Fin Header y navegacion **/


/* listado de categorias */

.listado-categorias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}
.listado-categorias a{
    
    display: block;
    text-align: center;
    padding: 2rem;
    transition: background-color 0.3s;
}
.listado-categorias a:hover{
    background-color: #037bc0;
    border-radius: 2.5rem 0;
    color: white;
}

/* Fin listado de categorias */


/** sobre nosotros **/


.card-nosotros{
    background-image: linear-gradient(to right, transparent 45%, #037bc0 45%, #037bc0 100%), url(/images/nosotros.jpg);
    height: 35rem;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 100%, 120rem;
    display: flex;
    justify-content: flex-end;
    /* display: grid; */
    /* grid-template-columns: repeat(2, 1fr); */
    /* column-gap: 2rem; */
    
}

.texto-nosotros{
    flex-basis: 50%;
    /* grid-column: 2 / 3; */
    padding: 5rem 5rem;
    color: white;
}
.desarrollo-nosotros{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}
.desarrollo-nosotros p{
    padding: 0 2rem;
}
.desarrollo-nosotros h2{
    text-align: center;
    margin-bottom: 0.5rem;
    padding-top: 3rem;
}
.soluciones-div{
    display: flex;
    justify-content: space-around;
    background-color: #037bc0;
}
.soluciones-div img{
    object-fit: cover;
    object-position: center;
    width: 100%;
    
}
.soluciones-div p{
    padding: 0 2rem;
    color: white;
    flex-basis: 70%;
    margin: auto 0;
}

/** fin sobre nosotros **/

/* productos destacados */

.productos-destacados.contenedor{
    max-width: 140rem;
    margin: 0 auto;
}
.productos-destacados h2,h3 {
    text-align: center;
}
.lista-destacados{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
}

.lista-destacados :nth-child(1){
    grid-column: 1/7;
}
.lista-destacados :nth-child(1) .conten-destacado{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.lista-destacados :nth-child(1) .conten-destacado img{
    grid-column: 1/4;
    height: 35rem;
    width: 100%;
    object-fit: cover;
    object-position: left center;
}
.lista-destacados :nth-child(1) .conten-destacado .texto-destacado{
    grid-column: 4/6;
    margin: 3.5rem 0;
}
.lista-destacados :nth-child(2){
    grid-column: 1/4;
}
.lista-destacados :nth-child(2) img,
.lista-destacados :nth-child(3) img{
    height: 30rem;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.lista-destacados :nth-child(3){
    grid-column: 4/7;
}
.lista-destacados :nth-child(4){
    grid-column: 1/3;
}
/* observar la diferencia de selectores con la pseudoclase :nth-child()
el espacio en blanco antes de los dos puntos marca la diferencia*/
.item-destacado:nth-child(5){
    grid-column: 3/5;
}
/* .lista-destacados :nth-child(5){
    grid-column: 3/5;
}
 */
 .item-destacado:nth-child(6){
    grid-column: 5/7;
}
/* .lista-destacados :nth-child(6){
    grid-column: 5/7;
} */
.item-destacado{
    background-color: #037bc0;
    
}

.texto-destacado{
    text-align: center;
    color: white;
    padding: 0 2rem;
}
.texto-destacado a{
    display: block;
    background-color: #8cbc00;
    margin-bottom: 2rem;
    padding: 0.7rem 0;
    border-radius: 0.5rem;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s ease-out;
}
.texto-destacado a:hover{
    background-color: #769c02;
}
.precio{
    font-weight: 800;
    font-size: 2rem;
}
/* fin productos destacados */

/* footer */
.pie{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}
.derechos {
    grid-column: 2/4;
    text-align: right;
}
/* fin  footer */

/** Blog **/
.contenedor-blog{
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 4rem;
}
.entrada{
    border-bottom: 2px solid #e1e1e1;
    padding-bottom: 4rem;
    margin-bottom: 2rem;
}
.entrada:last-of-type{
    border: none;
}
.entrada-meta{
    display: flex;
    justify-content: space-between;
}
.entrada-meta p{
    font-weight: bold;

}
.entrada-meta span{
    color: #037bc0;
}
.btn {
    display: block;
    background-color: #8cbc00;
    margin-bottom: 2rem;
    padding: 0.7rem 0;
    border-radius: 0.5rem;
    color: white;
    font-weight: bold;
    max-width: 30rem;
    text-align: center;
    transition: background-color 0.3s ease-out;
}
.btn:hover{
    background-color: #769c02;
}

/** Fin Blog **/

/** Entrada **/
.contenedido-entrada-blog{
    width: 60rem;
    margin: 0 auto;
}
/** Fin Entrada **/
/**Galeria fotografica**/
.galeria{
    list-style:none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.galeria img{
    height: 40rem;
    width: 40rem;
    object-fit: cover;
}
/**Fin Galeria fotografica**/

/** formulario **/
.formulario{
    width: 60rem;
    margin: 2rem auto;
}
.formulario fieldset{
    border-color: black;
    border-width: 1px;
}
.formulario legend{
    background-color: #005485;
    width: 100%;
    color: white;
    text-align: center;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 3rem;
}
.campo{
    display: flex;
    margin-bottom: 2rem;
}
.formulario .campo label{
flex-basis: 10rem;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"] {
    flex: 1;
    border: 1px solid #e1e1e1;
}
.campo textarea{
    flex: 1;
    border:1px solid #e1e1e1;
}
.botones-formulario{
    margin-top: 2rem;
    display: flex;
    justify-content: space-around;
}
.botones-formulario input{
    padding: 1rem 4rem;
    transition: background-color 0.3s;
}
.botones-formulario input:hover{
    background-color: #769c02;
    cursor: pointer;
}
/** fin formulario **/