* { 
    /*Quita los margenes por defecto que pone la pagina en si misma*/
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'creato', sans-serif;
}
@font-face {
  font-family: 'creato';
  src: url('/files/fonts/CreatoDisplay-Regular.otf');
  font-weight: normal;
  font-style: normal;
}
:root{
    --blancopalido:#FFF2E0;/*variable de blanco para fondos y demas cosas, se debe de usar mucho*/
    --azulsuave:#C0C9EE;/*azul suave si se usa pero cuidado con el contraste*/
    --azul:#A2AADB;/*esta se usa para parrafos por el contraste alto con el fondo*/
    --azulfuerte: #898AC4; /*si se usa pero mas para resaltar titulos*/
}
body {
    /* sirve para que el fondo sea color blanco y el texto en negro ademas de una fuente*/
    background: linear-gradient(to left, var(--blancopalido) 0%,  #f3e4d0 100%);
    background-color: var(--blancopalido);
}
/*no mover lo de arriba y no poder mas bodys*/

/*seccion de cookies*/
.fondoobscuro{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1005;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cookietarjeta {
    position: fixed;
    width: 500px;
    height: 200px;
    background-color: var(--blancopalido);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--blancopalido);
    z-index: 1010;
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: Aparicion 0.5s ease-out forwards;
}

.cookiecontenido {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    animation: Aparicion 0.7s ease-out forwards;
}


.cookietexto p {
    margin: 0;
    color: var(--azul);
    font-size: 20px;
    line-height: 1.4;
}

.cookietexto strong {
    color: var(--azulfuerte);
    font-size: 30px;
}

.cookiebotones {
    display: flex;
    gap: 10px;
    animation: Aparicion 1s ease-out forwards;
}

.botonaceptar {
    background-color: var(--azulsuave);
    color: var(--azulfuerte);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    transition: all 0.2s;
}

.botonaceptar:hover {
    background-color: var(--azul);
}

.btotonrechazar {
    background-color: transparent;
    color: var(--azulfuerte);
    border: 1px solid var(--blancopalido);
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btotonrechazar:hover {
    background-color: var(--azulsuave);
    border-color: var(--blancopalido);
}
/*todo lo del menu sticky*/
.Baner{
    /*Crea un baner superior con la letra tamano 1rem el texto alineado en el centro y letra en negritas*/
    background: var(--azulfuerte);
    color: var(--blancopalido);
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Menu {
    /*Crea un menu sticky que se pega a la parte superior cuando se baja la pagina ademas con z-index se pone por delante de todo*/
    background-color: var(--azul);
    color: var(--blancopalido);
    position: sticky;
    top: 0;
    display: grid;/*es para crear las columnas sin problemas*/
    grid-template-columns: 1fr 1fr 1fr; /*crea 3 columnas iguales*/
    align-items: center;
    z-index: 1000;/*Se poner por delante de todos los objetos*/
    height: 70px;
    overflow: hidden;
}

.adentro { 
/*Crea una divicion que se adapta a la pantalla*/
    width: 100%; 
    margin: 0 auto; 
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ruta{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    align-self: center;
    margin: 10px;
    gap: 5px;
}
.ruta a{
    text-decoration: none;
    color: var(--blancopalido);
}
#casaicono{
    width: 20px;
    height: 20px;
}
.sesion{
  position: relative;/*esto es mas para agregarle diseno al div*/
    width: 100%;
    display: flex;/*para alinearlo enmedio*/
    justify-content: center;
    align-items: center;
    grid-column: 3;/*la tercera y ultima columna aunque tengo ganas de cambiar esto*/
    justify-self: center;
    transition: all ease 1s;  
}
#noiniciada{
    border: var(--azulsuave) 2px solid;/*esto crea el ovalo del boton empezar para llevar a la area de registro*/
    border-radius: 10px;/*se vea redondeado*/
    width: 30%;/*este medio anchito*/
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;/*espacio de 20px*/
    transition: all 0.5s ease;
}
#noiniciada:hover{
    transform: scale(1.1);
    cursor: pointer;
}
#noiniciada a{
    /*pues el boton de empezar*/
    text-decoration: none;/*quita decoraciones al a*/
    color: var(--blancopalido);
    display: block;/*para que abarque todo el espacio*/
    height: 100%;
    width: 100%;
    text-align: center;
    align-content: center;
}
#logo{
    /*acomoda el texto del logo*/
    width: 360px;
    display: flex;/*para alinear la seccion del logo*/
    gap: 5px;
    align-items: center;
    color: var(--azul);/*la variable azul*/
    transition: all ease 0.5s; /*trancision para que sea grande*/
    position: absolute;
    grid-column: 1;/*lo ajusta en la columna 1*/
    height: 100%;
}
#logo a{
    /*pone un <a> y lo acomoda para que el logo redirija a la pagina*/
    height: 100%;
    z-index: 2; /*lo pongo por arriba para que sea lo que se clickea*/
    /*acomoda el texto del logo*/
    width: 100px;
    display: flex;/*alinear*/
    align-items: center;
    justify-content: start;
    transition: all ease 0.5s; /*trancision para que sea grande*/
    grid-column: 1;/*lo ajusta en la columna 1*/
    padding: 20px;
    left: 50px;

}
#logo a:hover{
    /*animacion de que creece*/
    transform: scale(1.1);
}

#Logotipo{
    /*el tamano de logo*/
    width: 130px;
    height: 130px;
}
#Busqueda{
    /*crea la div de la barra de busqueda con un tamano ajustado al icono para que no se active en otro caso*/
    position: relative;
    width: 50px;
    display: flex;/*alinear para alinear dios mio como usamos esto*/
    justify-content: center;
    align-items: center;
    grid-column: 2;/*lo pone en la columna 2*/
    justify-self: center;
    transition: all ease 1s;
    height: 50px;
}
#lupa{
    width: 40px;
    opacity: 1;/*para que sea vea*/
    visibility: visible; /*lo hace visible*/
    transition: all linear 0.5s;
    height: 40px;
    /*icono de la lupa*/
}
#barra{
    /*barra de busqueda ajutada para que sea solo un peuqeno circulo invisible*/
    width: 20px;
    border-radius: 50px;
    position: absolute;
    transition: all ease 1s;
    opacity: 0;
    visibility: unset; /*lo hace invisible*/
    font-size: 16px;
    padding: 5px 15px;
    border: 2px var(--azulsuave);
    outline: none;/*se supone que quita algo de la barra de busqueda pero nah es todo igual*/
}
#Busqueda:hover {
    /*hace la animacion bien pro de la lupa desapareciendo y la barra de busqueda apareciendo*/
    width: 100%;
    cursor: pointer;
    /*esto esta ANIDADO y nos baja una decima pero no es prioridad luego si ocupamos una arreglar esto*/
    #barra{
        opacity: 1;/*lo hace visible*/
        visibility: visible;/*x2 de lo de arriba*/
        width: 100%;
        height: 30px;
        cursor: pointer;}
    #lupa{
        visibility: unset;/*lo hace invisible*/
        opacity: 0;/*igual*/
        transform: scale(0.1);/*y chico para que haga el efecto pro*/
    }
}
/*footer*/
.piepag{
    width: 100%;
    height: 175px;
    background-color: var(--azulfuerte);
    color: var(--blancopalido);
    padding: 5px;
    display: flex;
    flex-direction: column;
}
.piepag hr{
    width: 60%;
    color: var(--blancopalido);
    align-self: center;
}
.copyrigthsactualizados{
    margin: 10px;
    align-self: center;
}
.enlacesabajo{
    display: flex;
    justify-content: space-between;
    width: 20%;
    align-self: center;
    margin: 10px;
}
.atajos a{
    font-size: 1rem;
text-decoration: none;
color: var(--blancopalido);
margin: 5px;
}


/*hero*/
.hero{
    position: relative;
    width: 100%;
    height: 700px;
    background-image: url('../files/hero/hero.webp');/*pongo una imagen de fondo para darle el efecto de sombreado que normalmente no ocurre no se porque*/
    box-shadow: 0px 0px 100px 2px #000 inset;/*efecto de sombreado, lo saque del libro*/
    display: flex;
    justify-content: center;
    opacity: 5px var(--blancopalido);
}
#servi{
    position: absolute;
    color: var(--azul);
    top: 20%;
    font-size: 3.0rem;
    animation: Aparicion 0.5s ease-out forwards;
}
#slogan{
    position: absolute;
    top: 27%;
    color: var(--azulsuave);
    font-size: 2.0rem;
    animation: Aparicion 0.8s ease-out forwards;
}
#descrip{
    position: absolute;
    width: 500px;
    top: 35%;
    color: var(--azulfuerte);
    animation: Aparicion 1.1s ease-out forwards;
    text-align: center;
}

/*tarjetas de las empresas*/
.contenedor{
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    animation: Aparicion 0.5s ease-out forwards;
    margin-top: 10px;
}
.tarj{
    position: relative;
    border: #000 2px solid;
    width: 40%;
    height: 400px;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;/*para que los objetos se alineen como columnas horizontales cada objeto una columna*/
    transition: all ease 1s;
}
.tarj:hover{
    transform: scale(1.01);
}
#imagenempresa{
    width: 100%;
    height: 250px;
    top: 0%;
    flex-basis: 250px;/*para que la columna de la imagen sea mas grande aunque no se que tan obligatoria se esta linea*/
}
.desc{
    flex-grow: 1;/*para que se adapte*/
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: center;
    justify-content: space-between;/*para que este separado y alinea la primera al imicio*/
    gap: 20px;
    padding: 20px;
}
#calificacion{
    white-space: nowrap;/* quita los espacios feos*/
    color: #efc315;
    font-size: 1.2rem;
    width: 50%;
    margin: 5px;
}
#descripcion{
    width: 50%;
}
#precio{
    color: var(--azul);
    margin: 5px;
}
.botoninfo{
    color: var(--azulfuerte);
    background-color: var(--azulsuave);
    width: 150px;
    height: 40px;
    border: #000 2px solid;
    border-radius: 20px;
    margin: 5px;
    transition: all ease 0.5s;
    text-decoration: none;
    display: flex;
    justify-self: center;/*se auto alinea encentro porque habia un bug medio raro*/
}
.botoninfo:hover{
    background-color: var(--azulsuave);
    cursor: pointer;
    transform: scale(1.1);
}
#masinfo{
    color: var(--azulfuerte);
    text-decoration: none;
    display: block;/*para que abarque todo el espacio el <a>*/
    height: 100%;
    width: 100%;
    text-align: center;
    align-content: center;
}

/*seccio individual de cada empresa*/
.fotos{
    /*crea una seccion para las fotos de todo el acnho de la pantalla dodne agrupa 5 fotos o mas con limite*/
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    margin: 10px;
    animation: Aparicion 0.5s ease-out forwards;
}
#hora{
  color: var(--azul);  
}
.imagenesemp{
    /*acomodo las imagenes de la seccion de fotos con el tamano y todo*/
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    transition: all ease 0.8s;
}
.imagenesemp:hover{
    /*pa q las fotos crescan un poquito cuando se les pone arriba el cursor*/
    transform: scale(1.05);
    cursor: pointer;
}
.imagenesemp:active{
    /*hace que las fotos se vuelvan grandes y se centren cuando se les mantiene el click hay un problema que se mueven las demas fotos luego agregare eso y a futuro quiero que haya un blur defondo cuando se seleccione una imagen eso se hace con Js*/
    position: absolute;
    transform: scale(3.0);
    z-index: 100;
    left: 40%;
}

#imagenprimera{
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    /*para que la imagen se adapte al completo a su contenedor*/
}
.encabezadosecciones{
    /*esto es para la parte del titulo y la pare de nuestro servicio para que los dos textos esten alineados*/
    margin: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--azulfuerte);
    font-size: 1.7rem;
}
.encabezadosecciones h1{
    /*para que el titulo sea mas grande*/
    font-size: 3rem;
}
.informacion{
    /*la seccion de informacio separa los dos bloques*/
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: space-between;
    margin: 10px;
    padding: 10px 100px;
}
.apartados{
    /*el bloque de la descripcion aunque creo que no hay mucho cambio igual son dos clases distintas este y la de horarios y costos*/
    border: #000 2px solid;
    background-color: var(--blancopalido);
    border-radius: 20px;
    width: 400px;
    height: 500px;
    overflow: hidden;
    text-align:center;
    padding: 5px;
    flex-direction: column;
    overflow: hidden;
    text-align:center;
}

.apartados1{
    /*la de horarios costos e informacion en general*/
    border: #000 2px solid;
    background-color: var(--blancopalido);
    border-radius: 20px;
    width: 400px;
    height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align:center;
    padding: 5px;
    color: var(--azulfuerte);
}
.apartados1 h3{
    /*para que las letras grandes en el apartado de informacion sean mas grandes*/
    font-size: 1.5rem;   
}
.apartados1 p{
    /*para que los textos tengan un tamano mas pqueno para darle jerarquia*/
    color: var(--azul);
    font-size: 1.3rem;
}
.apartados1 h4{
    /*parte de los horarios*/
    font-size: 1.4rem;
}

.apartados1 div{
    /*esto es para que cada apartado en la parte de informacion abarque 1/4 de la seccion y se vean uniformes aunque no me encanta el resultado*/
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#acomodobaner{
    /*acomoda la seccion del baner*/
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banerempresa{
    /*el contorno del baner adaptado para que luego cresca*/
    width: 60%;
    height: 400px;
    border-radius: 20px;
    border: #000 2px solid;
    overflow: hidden;
    position: relative;
    margin: 10px;
    transition: all ease 0.5s;
}
.banerempresa:hover{
    transform: scale(1.05);
}
#imagenbaner{
    /*la imagen del baner adaptada*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#estrellas{
    /*las estrellas*/
    color: var(--azul);
    font-size: 1.3rem;
}
#pfp{
    /*para que la foto de perfil se vea como un circulo alado del nombre de la empresa*/
    height: 50px;
    width: 50px;
    border-radius: 50%;
}
#encabezadoap{
    /*para que el encabezado en la seccion de descripcion se vea a la izquierda el encabezado es la imagen y nombre de la empresa*/
    gap: 20px;
    display: flex;
    align-items: center;
    justify-content: start;
    color: var(--azulfuerte);
}
.descripcion{
    /*cambia el color de la descripcion*/
    font-size: 1.5rem;
    color: var(--azul);
    margin: 10px;
}


/*seccion de nosotros*/
.divisor-naranja {
    width: 80px;
    height: 5px;
    background-color: var(--azul);
    border: none; /* Elimina cualquier borde que traiga el navegador por defecto. */
    margin: 40px auto 60px auto;/* 40px arriba: Distancia de la sección anterior, auto a los lados: Centra la línea horizontalmente, 60px abajo: Espacio grande antes de que empiece el equipo.*/
    border-radius: 10px;
}

/* Crea una cuadrícula automática que se adapta al tamaño de la pantalla */
.rejilla-equipo {
    display: grid; /*permite controlar filas y columnas simultáneamente.*/
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Crea columnas automáticas:  - Mínimo 280px por columna, Si hay espacio extra, se expanden (1fr), Se ajustan solas al ancho de la pantalla (responsivo). */
    gap: 30px; /* Separación interna */
    align-items: start; /* Alineación vertical superior */
}

/* Diseño de cada tarjeta individual */
.tarjeta-persona {
    background: var(--blancopalido);
    padding: 35px 25px; /* Espaciado interno: 35px arriba/abajo y 25px a los lados */
    border-radius: 20px; 
    text-align: center;
    box-shadow: 0 5px 15px var(--azul); /* Sombra ligera con tono azulado */
    transition: transform 0.3s ease, border-color 0.3s ease; /* Prepara la tarjeta para animarse suavemente (en 0.3 segundos) cuando cambie su posición o el color del borde */
    border: 1px solid var(--azulsuave); /* Línea de contorno muy fina */
}
.tarjeta-persona:hover {
    transform: translateY(-10px); /* La tarjeta sube un poco */
    border-color: #FEB05D;        /* El borde cambia a naranja */
}
/* Estilo de las fotos de perfil circulares */
.foto-perfil {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;/* Corta la imagen para que rellene el círculo sin estirarse ni verse deforme.*/
    border: 4px solid var(--azul); /* Borde naranja #FEB05D */
    margin-bottom: 15px;
    padding: 3px;
    background-color: var(--blancopalido);
}

/* Nombre de la persona */
.tarjeta-persona h3 {
    font-size: 1.3rem; /* Es un 30% más grande que el texto base para que se lo primero que leamos después de ver la foto. */
    color: var(--azulfuerte);
    margin: 10px 0 5px 0; /* Controla el espacio alrededor del nombre: 10px arriba: Para separarse del puesto de trabajo, 0px a los lados: No necesita espacio extra lateral, 5px abajo: Para no pegarse al párrafo de descripción.*/
}
/* Texto de descripción de la persona */
.tarjeta-persona p {
    font-size: 0.95rem;
    color: #000;
    line-height: 1.5; /* Da espacio entre renglones. Es como dejar un renglón en blanco pequeño para que las letras no se choquen entre sí. */
}
.img-btn img{
    width: 200px;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-btn img:hover{
    transform: scale(1.08);
    box-shadow: 0 10px 20px #000;
}
.titulo-principal{
    display: flex;
    align-items: baseline;
    font-size: 2.2rem;
    margin-left: 450px;
    color: var(--azul);
    transition: all 1s;
}
.titulo-principal:hover{
    border-radius: 20px;
    font-size: 200%;
}
.texto{
    font-size: 4rem;
    margin-top: 20px;
    margin-left: 18px;  
    color: var(--azulfuerte);
    align-items: baseline;
}
.texto-nosotros{
font-size: 3.2rem;
margin-top: 20px;
margin-left: 670px;
}
.mp{
    font-size: 2rem;
    margin: center;
}
.agradecimientos{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}
.seccionagra{
    border: #000 3px solid;
    width: 70%;
    height: 700px;
    border-radius: 20px;
    margin: 20px;
    box-shadow: 0 10px 30px var(--azul);
    padding: 10px;
    background: var(--blancopalido);

}
/*--PAGINAS DE MAMAMAMARIO--*/

.superior{ 
    color: #e6e1e1;/*aqui nisiquiera se usa el mismo blanco dios mio pero fue porque yo lo puse asi que esta ok*/
    top: 0;
    align-items: start;
    height: 50px;
    padding: 10px 10px;
    display: flex;
    justify-content: start;
    align-items: center;/*alinea todo al inicio osea el boton para regresar*/
}
#regresa{
    text-decoration: none;
    display: block;/*para que llene el contenedor*/
    height: 100%;
    width: 100%;
    text-align: center;
    align-content: center;
    color: #000;/*para el color de la letra sea negro*/
}
.botonregresar{
    border: #000 2px solid;/*la parte de bprde del boton y para que creesca*/
    border-radius: 10px;
    width: 100px;
    gap: 20px;
    transition: all 0.5s ease;
}
.botonregresar:hover{
    transform: scale(1.1);
    cursor: pointer;/*La animacion para que el usuario vea que es interactuable*/
}

.alineador{
    /*alinea las cosas enmedio aunque no se alinea bien pero eso luego lo veremos*/
    display: flex;
    justify-content: center;
    align-items: center;
    animation: Aparicion 0.5s ease-out forwards;/*animacion fade in para cuando carge la pagina*/
    margin-top: 3%;
    margin-bottom: 80px;
}
.contenedorm{
    /*crea el contenedor para las empresas o clientes*/
    background: var(--blancopalido);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;/*lo alinea en columnas*/
}
.titulo {
    /*alinea el texto de las secciones*/
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--azulfuerte);
    font-size: 1.8rem;
}

.bloque {
    /*hacer un espaciado su unica funcion*/
    margin-bottom: 1.2rem;
}

.etiqueta{
    /*la parte para pedir datos*/
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--azulsuave);
}

.entrada {
    /*decorar el input*/
    width: 100%;
    padding: 12px;
    border: 1px solid var(--azulfuerte);
    border-radius: 20px;
    outline: none;
    transition: border-color 0.3s;
}

.entrada:focus {
    /*pa cuando se seleccione el input*/
    border-color: var(--azulfuerte);
}

.accion {
    /*el boton de enviar la informacion*/
    width: 100%;
    padding: 12px;
    background-color: var(--azulfuerte);
    color: white;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}

.accion:hover {
    /*para que se cambie el color el boton y el usuario vea que es interactuable*/
  background-color: var(--azulsuave);
}

.pie {
    margin-top: 1.5rem;
    text-align: center;
}

.texto-secundario {
    /*el texto para cambiar de pestana entre registrarse e iniciar sesion*/
    font-size: 0.9rem;
    color: var(--azul);
}

.resaltado {
    /*para resaltar el texto*/
    color: var(--azulfuerte);
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s;
}

.resaltado:hover{
  color: var(--azulsuave);
}

.contenedorp {
    /*el contenedor de cliente o empresa o bueno solo la parte para alinear el texto*/
    width: 100%;
    text-align: center;
    padding: 20px;
    animation: Aparicion 0.5s ease-out forwards;
    margin-bottom: 80px;
}

.cabecera h1 {
    /*ajusta el titulo de la cabecera*/
    font-size: 2.5rem;
    color: var(--azulfuerte);
    margin-bottom: 10px;
}

.cabecera p {
    /*para que el texto sea gris y espacio abajo*/
    color: #7f8c8d;
    margin-bottom: 40px;
}

.seccionc {
    /*para que no se ensime todo*/
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.tarjeta {
    /*la parte de las tarjetas con una transision y un efect de que estan flotando bastante cool*/
    background: var(--blancopalido);
    border-radius: 15px;
    overflow: hidden;
    width: 300px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.5s;
}

.tarjeta:hover {
    /*para que se eleve solo un poquito porque luego se puede buguear*/
    transform: translateY(-10px);
}

.tarjetaimg img {
    /*para acomodar las imagenes y adaptarlas*/
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.tarjetac {
    /*para que se acomode todo dentro de las tarjetas ademas que sea centrado*/
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tarjetac h2 {
    /*para que los textos de titulo sean azules aunque se les agranda el tamano para darle mas visibilidad*/
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--azulsuave);
}

.tarjetac p {
    /*para que tenga el texto un color gris*/
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* Botones específicos */
.botonr {
    /*acomoda el boto y usa la paleta de colores rojo para el de la empresa aunque se va a cambiar*/
    background-color: var(--azul);
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    color: var(--blancopalido);
    letter-spacing: 1px;
    width: 150px;
    height: 40px;
}

.botonr:hover {
    filter: brightness(1.2);
    /*para que brille de echo yo ta habia experimentado con el filter por eso lo entiendo pero porfavor mario*/
}

.botona {
    /*lo mismo con la azul*/
    background-color: var(--azulfuerte);
    border: none;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    color: var(--blancopalido);
    letter-spacing: 1px;
    width: 150px;
    height: 40px;
}
#botones{
    /*para que tengan el color y la altura pre definido*/
    color: #ffffff;
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    align-content: center;
}
.botona:hover {
    /*cambia el color del fondo*/
    background-color: var(--azulsuave);
}
.registro{
    color: var(--azulfuerte);
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    align-content: center;
}
.registro:hover{
  color: #3498db;
}
/* mensaje de error en javascript*/
.mensajeerror{
    font-size: 0.9rem;
}

@keyframes Aparicion {
    /*animacion para cuando abra la pagina web*/
    0%{
    opacity: 0;
    transform: translateY(30px); /* que empiezen abajo e invisible*/
}
    70%{
        opacity: 1;
    transform: translateY(-5px);
    }
    100%{
     opacity: 1;
    transform: translateY(0); /*acomode su posicion y sean visibles*/
    }
}
@media (min-width: 300px) and (max-width: 900px){
    #servi{
        font-size: 2.0rem;
    }
}
@media (min-width: 300px) and (max-width: 900px){
    #descrip{
        width: 80%;
    }
}
@media (min-width: 300px) and (max-width: 900px){
    #slogan{
        font-size: 1.5rem;
    }
}
@media (min-width: 300px) and (max-width: 900px){
    .menu{
        width: 100%;
    }
}
@media (min-width: 300px) and (max-width: 900px){
    .Enlaces{
        font-size: 0.8rem;
        gap: 1.5rem;
    }
}
@media (min-width: 300px) and (max-width: 900px){
    #logo{
    /*acomoda el texto del logo*/
    width: 360px;
    display: flex;
    gap: 3px;
    font-size: 0.5rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
#logo a{
    /*pone un <a> y lo acomoda para que el logo redirija a la pagina*/
    height: 50%;
    /*acomoda el texto del logo*/
    width: 360px;
    gap: 3px;
}
}
@media (min-width: 300px) and (max-width: 900px){
#logo:hover{
    /*animacion de que creece*/
    transform: scale(1);
}
}
@media (min-width: 300px) and (max-width: 900px){
#Logotipo{
    /*el tamano de logo*/
    width: 50px;
    height: 50px;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .tarj{
    width: 100%;
    height: 400px;
    border-radius: 30px;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .tarj:hover{
    transform: none;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .contenedor{
    padding: 0px;
    margin: 3px;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .banerempresa{
    width: 100%; 
}
}
@media (min-width: 300px) and (max-width: 900px){
    .encabezadosecciones h1{
    font-size: 2rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .encabezadosecciones h1{
    font-size: 2rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .titulo-principal{
    font-size: 1.5rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .titulo-principal:hover{
    font-size: 100%;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .texto{
    font-size: 2rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .texto{
    font-size: 2rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .texto-nosotros{
font-size: 2rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .mp{
    font-size: 1rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .fotos{
    width: 100%;
    height: 250px;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .encabezadosecciones{
    margin: 5px;
    font-size: 1rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
    .encabezadosecciones h1{
    font-size: 2rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
  .informacion{
    margin: 5px;
    padding: 5px 50px;
}
}
@media (min-width: 300px) and (max-width: 900px){
  .apartados1 h3{
    font-size: 1rem;   
}
}
@media (min-width: 300px) and (max-width: 900px){
  .apartados1 p{
    font-size: 1rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
  .apartados1 h4{
    /*parte de los horarios*/
    font-size: 1.2rem;
}
}
@media (min-width: 300px) and (max-width: 900px){
 .imagenesemp:active{
    position: absolute;
    transform: scale(2.0);
    z-index: 100;
    left: 45%;
}
}
@media (min-width: 300px) and (max-width: 900px){
  .fotos{
    /*crea una seccion para las fotos de todo el acnho de la pantalla dodne agrupa 5 fotos o mas con limite*/
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    margin: 10px;
    animation: Aparicion 0.5s ease-out forwards;
}
}