:root{
    --blanco: #FFFFFF;
    --obscuro: #000000;
    --primario: pink;
    --secundario: #c5a2b8;
    --header: #FFB5D5; 
    
    }
    
    html{
        font-size: 100%;
        box-sizing: border-box;
       
    
    }
    
}
*, *:before, *:after {
    box-sizing: inherit;
  }

  
.cintillo{
    background-color: var(--header);
 justify-content: flex;
    text-align: center;
    margin: 0 auto;
 max-width: 94rem; 
 padding: .5rem; /**tamaño rosa ancho**/
}

body{
    font-size: 1rem;
    font-family: "BentonSansBook" ,Helvetica,Arial,sans-serif;;
   background-color: var(--blanco);
   
   }

   

h1{
    font-size: 2rem;
}
h2{
    font-size: 2.8rem;
    
}
h3{
    font-size: 1rem;
    color: var(--header);
}
h4{
    font-size: 5rem;
    color: var(--header);
}

h1,h2,h3,h4{
    text-align: center;
}

/**utilidades **/
.w-100{
    width: 100%;
}
@media (min-width:768px){
   .w-100{
       width: auto;
   }

}

.alinear-derecha{
    justify-content: flex-end;
  
  }
  
  .flex{
  display: flex;
  
  }
  .contenedor{
     max-width: 120rem;
      /**
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0rem;
      margin-left: auto;
  
      esta forma es igual a la siguente tambuen 
      como abajo se puede quedar en 0 auto 
  */
  
       margin:  0 auto;
       background-color: white;
  }
  

/**.nav-bg {

    background-color: var(--obscuro);
   

}
**/

.navegacion-principal , .navegacion-secundaria{

    display: flex;
    flex-direction: column;
    
    align-items: center;
    justify-content: space-between;
    
    }

    @media (min-width:768px){
        .navegacion-principal , .navegacion-secundaria{
            flex-direction: row;
            justify-content: space-between;
        }
    }      
    .navegacion-principal ,  a{
        display: flex;
        text-align: center;
      color: var(--blanco);
       text-decoration: none;
       font-size: 1rem;
       font-weight: 500;
       padding:  .2rem;
      
       grid-template-columns: repeat(7, 1fr);
       column-gap: .5rem;
       background-color: var(--obscuro);
    
        
        }

        .a2{
            background-color: white;
            color: var(--obscuro);
        }
.navegacion-secundaria{
    background-color: white;
}
      
        .navegacion-principal a:hover ,
        .navegacion-secundaria a:hover
         {

            background-color: var(--primario);
            color: var(--obscuro);
           
             
             }

           
      
         .search{
background-color: var(--blanco);

             border: none;
             color: #333333;
             font-size: 0.75rem;
 display: flex;
 justify-content: flex-end;
 flex-direction: column;
 
                       
         }

      .nombre span{

             font-size: 2.5rem; /* cambia medida del uruapan**/
         }

         .hero{
            background-image: url(chica.png);
            background-repeat: no-repeat;
            background-size: cover;
            height: 45rem;/**tamaño de la imagen**/
           
            position: relative;
        margin-bottom: 1rem;
        
        }
        
        .contenedor-hero{
            position: absolute ;
            background-color: rgb(0,0,0,.5);  /** transparencia negra **/
        
            width: 100%;
           height: 100%;
           
          display: flex;
          flex-direction: column;
          align-items: center;
        
           
        }
        .contenedor-hero h2, p{
        color: var(--obscuro); /*color del texto*/
              }
        /**scroll snap*/
              .servicios, .navegacion-principal, .formulario{
                scroll-snap-align: center;
                scroll-snap-stop: always;
        
              }

              .botton{
                background-color: var(--secundario); /**color fondo de boton*/
                color: var(--blanco); /*color de la letra**/
                padding: 1rem 2rem; /*medidas boton*/
                margin-top: auto;
                font-size: 1.5rem; /*tamaño letra*/
                text-decoration: none;
                text-transform: uppercase; /*letras mayusculas*/
                font-weight: bold;
                border-radius: .5rem;/*redondeo de esquinas de botom*/
                width: 70%;
                text-align: center;
                border:none;
            }

            
@media (min-width:768px){  /* hace resetear el tamaño y ajutar*/
    .botton{
       width: auto;
    
    }
 /**
    .final{
        background-color: #333333;
        text-align: center;

        width: 100%;
        display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto;

justify-content: space-between;
        
    }
   

    .campo:nth-child(1),.campo:nth-child(2),.campo:nth-child(3){
grid-column: 1/2;
    }

    
    .contenedor-final{
        display: flex;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        column-gap: 1rem;

    }
    
    .campo{
        padding: .2rem;
      /*  margin-bottom: 1rem;
        text-align: center;
    }
    .campo label{
        color: var(--blanco);
        font-weight: bold;
        margin-bottom: .5rem;
        display: block;
                }

                */



                @media (min-width:768px){

                .contenedor-final h3, p{
                    color: var(--obscuro); /*color del texto*/
                          }
                 
                          @media (min-width:768px){
                           /*servicios*/
                    .final{
                        display: grid;
                        grid-template-columns: repeat(3 , 1fr); /*fracciona en 3 tamaños iguales*/
                        column-gap: 1rem;
                        }
                            }
                            @media (min-width:768px){
                                .contenedor-campos{
                        
                                    display: grid;
                                    width: 30%;
                                    grid-template-columns: 30% 30% ;  /**comulmnas y asignas tamaño**/
                                    grid-template-rows: auto auto 10rem;/**filas **/
                                    column-gap: 1rem;
                        
                                }
                    
                            .campo{
                    display: grid;

                    flex-direction: row;  /*liston de redes */
                    align-items: center;
                    background-color: var(--obscuro);
                    
                            }
                    .campo h3{
                    color: var(--blanco);
                    font-weight: normal;
                    }
                    
                    .campo p{
                    line-height: 2;
                    text-align: center;
                    }
                    .campo .iconos{
                                height: 3rem;
                                width: 3rem;
                                background-color: var(--primario);
                                border-radius: 50%;
                                display:flex;
                    
                                justify-content: space-evenly;
                                align-items: center;
                            }
                        }
                    
.servicios-final{
    text-align: center;
}





    .footer{
background-color:var(--header);
/*color: var(--header);*/
text-align: center;
text-decoration: #FFFFFF;
    }