:root {
    --blanco: #fff;
    --negro: #000;
    --fuenteprincipal: ;
    --rojos: #6375;
    --principal: #0a0d35;
    --principal-trans: #0a0d3505;
    --principal_dos: #121e2e;
    --secundara: #cfb16b;
    --secundara-trans: #cfb16b4f;
    --terciario: #c55459;
    --terciario-trans: #c5545a93;
}


/* apply a natural box layout model to all elements, but allowing components to change */

html {
    box-sizing: border-box;
    font-size: 62.5%;
    font-family: "Istok Web", sans-serif;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}


/*Globales*/

body {
    background-color: var(--primario);
    font-size: 1.6rem;
    line-height: 1.5;
}

img {
    max-width: 100%;
}

h2 {
    color: var(--principal);
    text-align: center;
    font-weight: bold;
    font-size: 3.3rem;
}

.contenedor {
    max-width: 80%;
    margin: 0 auto;
}

.contenedor_dos {
    max-width: 180rem;
    margin: 0 auto;
}

.contenedor__tres {
    max-width: 95%;
    margin: 0 auto;
    background-color: rgb(255, 255, 255);
    max-width: 1300px;
}

.contenedor__cuatro {
    width: 80%;
    margin: 0 auto;
}

.contenedor__cinco {
    width: 80%;
    margin: 0 auto;
    gap: 3rem;
}

.contenedor__seis {
    width: 95%;
    margin: 0 auto;
    padding: 8rem 5rem;
    background-color: rgba(255, 255, 255, 0.397);
}

.contenedor__siete {
    width: 80%;
    margin: 0 auto;
}

.contenedor__ocho {
    width: 75%;
    margin: 0 auto;
}

.contenedor__nueve {
    width: 90%;
    margin: 0 auto;
}

.contenedor__diez {
    width: 50%;
    margin: 0 auto;
}

.contenedor_footer {
    width: 90%;
    margin: 0 auto;
}

.barra {
    padding-top: 2rem;
}
.boton-us {
    padding: 2rem;
}

.btn {
    border: none;
    color: var(--principal);
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    font-size: 2rem;
}

.btn-color {}

.warning {
    background-color: #f9f9f941;
}


/*Navegacion*/
.tome{
    animation: rotar 5s linear infinite;
}
@keyframes  rotar{
    from{
        transform: rotateX(180deg);
    }
    to{
        transform: rotateY(180deg);
    }
}
.nav {
    background-color: var(--terciario);
}

.nav__toggle {
    position: absolute;
    cursor: pointer;
    margin: 0 1rem;
    right: 0;
}

.nav__toggle svg {
    width: 2rem;
}

.nav__toggle .close {
    display: none;
}

.nav__toggle .close,
.nav__toggle .menu {
    margin-top: .3rem;
}

.nav__checkbox {
    display: none;
}

.nav__menu {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    margin: 0 auto;
    padding-right: 5rem;
}

.nav__menu li {
    list-style-type: none;
    display: none;
}

.nav__menu li:first-child {
    margin-right: auto;
    display: block;
}

.nav__menu a {
    text-decoration: none;
    color: var(--blanco);
    font-size: 1.8rem;
}

.menu__logo {
    height: 6rem;
}

.nav__menu img {
    height: 100%;
}

#nav__checkbox:checked~ul.nav__menu li {
    display: block;
}

#nav__checkbox:checked~label.nav__toggle .close {
    display: block;
}

#nav__checkbox:checked~label.nav__toggle .menu {
    display: none;
}

@media only screen and (min-width: 768px) {
    .nav__toggle {
        display: none;
    }
    .nav__menu {
        flex-direction: row;
        background-color: var(--principal);
    }
    .nav__menu li {
        display: block;
    }
}

.nav__menu a:hover {
    text-decoration: underline;
    color: var(--secundara);
}

.bienvenidos {
    background-image: url(../img/principal.jpg);
    background-repeat: no-repeat;
    /*no se repita la imagen*/
    background-size: cover;
    /*para que tome el ancho de imagen*/
    height: 700px;
}

.contenedor__dem {
    background-color: rgba(15, 15, 15, 0.459);
    color: var(--blanco);
    width: 85%;
    height: 100%;
    margin: 10rem auto;
}

.contendor__dem--logo {
    margin: 5rem;
    display: flex;
    justify-content: center;
}

.logo {
    padding: 0;
    text-align: center;
    margin: .1 0 .1 0;
    font-weight: 700;
    font-size: 2.2rem;
}

.bienvenidos__logo {
    width: 50%;
}

.bienvenido__title {
    font-weight: 400;
    text-align: center;
}

.bienvendio__contenido {
    position: absolute;
    background-color: rgba(0, 0, 0, .0);
    /**Anterior( etiequeta que  da la transparencia de )**/
    /*es nueva forma aunque no muy esable porque es nueva la herramienta*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.textp {
    text-align: center;
}

.bienvenidos__titulo {
    display: flex;
    justify-content: center;
}

.bienvenidos__titulo--tex {
    color: var(--negro)
}


/**iconos**/

.iconos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    padding-top: 0;
    margin-top: 0;
}

@media (min-width:768px) {
    .iconos {
        grid-template-columns: repeat(5, 1fr);
    }
}


/* Nuestros Servicios*/

.servicios-ad {
    background-image: url(../img/CABAÑASUNO.JPG);
    background-repeat: no-repeat;
    background-size: contain;
}

.titulos-servicio {
    padding-top: 22rem;
}

.titulos-s {
    color: var(--terciario);
    font-size: 4.5rem;
}

.titulos-tar {
    height: 10rem;
    color: var(--principal);
    padding: 1rem;
}

.text-tar1 {
    padding: 1rem;
    font-family:'Courier New', Courier, monospace;
    display: flex;
    justify-content: center;
}

.img-ser {
    padding: 3rem;
}

@media (min-width:780px) {
    .all-tarjetas {
        padding-top: 1rem;
        display: grid;
        grid-template-columns: 25% 25% 25%;
        gap: 5rem;
        justify-content: center;
        padding-bottom: 1rem;
    }
}

.tarjeta-ser {
    background-color: #f9f9f9ea;
    border-radius: 2rem;
}

@media (min-width:768px) {
    .tarjetas {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4rem;
    }
}

.tarjetas__img {
    display: flex;
    justify-content: center;
}

.tarjetas__t--texto {
    text-align: center;
    font-style: oblique;
    font-size: 1.5rem;
    margin: 3rem 3rem;
}

.tarjetas__t--img {
    border-radius: 10px;
    width: 85%;
    height: 100%;
}

.tarjetas__t--boton {
    width: 20%;
    background-color: var(--blanco);
    border-color: var(--secundara);
    color: var(--principal);
    height: 4rem;
    border-radius: 5px;
    margin-bottom: 3rem;
}


/*revista*/

.revista__contenido {
    margin-bottom: 3rem;
    align-items: center;
    display: flex;
    justify-content: center;
}


/*@media (min-width:768px) {
    .revista__contenido {
        grid-template-columns: repeat(2, 1fr);
    }
}*/

.revista__t {
    color: var(--terciario);
    text-decoration: none;
}

.boton {
    display: flex;
    justify-content: center;
    cursor: pointer;
    height: 4rem;
    width: 8rem;
    background-color: var(--blanco);
    border-color: var(--terciario);
    color: var(--principal);
    border-radius: 3px;
}

.revista__contenido--boton {
    text-decoration: none;
    display: flex;
    justify-content: center;
}

.revista__contenido--boton input:hover {
    background-color: var(--terciario);
    color: var(--blanco);
    border-color: var(--principal);
}

.hngo {
    width: 5%;
}
/*pueblos*/
.pueblos{
    display: flex;
    justify-content: center;
}

/*mapa*/

.mapa {
    display: flex;
    justify-content: center;
    padding-bottom: 5rem;
    padding-top: 8rem;
}


/*footer*/

.footer {
    background-color: var(--principal);
    color: #fff;
}

.complet {
    text-align: center;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 3rem;
}

@media (min-width:768px) {
    .complet {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

.direccion,
.tel,
.hotel__casona,
.redes {
    margin-top: 3rem;
}

.redes {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

.derechos {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 1rem;
}

.tel a {
    color: #fff;
    text-decoration: none;
}


/*nosotros*/

.mision {
    color: var(--secundara);
    font-size: 3rem;
    font-style: initial;
    display: flex;
    justify-content: center;
}

.color-p {
    background-color: var(--principal);
    border-right: 5px solid var(--secundara);
}



.warning:hover {
    background: var(--blanco);
    color: var(--terciario);
}

@media (min-width:780px) {
    .us-ded {
        display: grid;
        grid-template-columns: 43% 50%;
        column-gap: 1rem;
    }
}

.us-line {
    display: flex;
    margin-left: 15rem;
    margin-top: 15rem;
}

.textos-v {
    margin-top: 10rem;
    padding-bottom: 5rem;
    margin-left: 10rem;
}

.vision-t {
    text-align: justify;
}

.line-us {
    height: 25rem;
    width: .9rem;
    background-color: var(--secundara);
    margin-right: 2rem;
}

.text-us {
    color: var(--blanco);
    font-size: 7rem;
    font-weight: 400
}

.text-ultimo {
    padding-bottom: 5rem;
}

.text-di {
    padding-right: 10rem;
    font-style: oblique;
    background-color: var(--principal);
    color: var(--blanco);
}

.redondo-e {
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    margin: 2rem;
}

.redondo {
    border-radius: 50%;
    width: 30%;
}


/*servicios*/

.nuestrosservicios__centro {
    margin-top: 8rem;
    padding-top: 1rem;
    text-align: center;
}

.nuestrosservicios__tarjetas {
    width: 60%;
}

.nuestrosservicios__tarjetas img {
    border-radius: 10% 30% 50% 70%;
    display: flex;
    justify-content: center;
}

.tarjetas_s {
    padding-top: 5rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
}

.nuestrosservicios__tarjetas p {
    text-align: center;
}

@media (min-width: 768px) {
    .tarjetas_s {
        grid-template-columns: repeat(2, 1fr);
    }
}

.apoyo {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    height: 100%;
    z-index: 3;
    opacity: 0;
}

.tarjetas__t--boton-servicios {
    width: 30%;
    background-color: var(--blanco);
    border-color: var(--secundara);
    color: var(--principal);
    height: 4rem;
    border-radius: 5px;
    margin-bottom: 3rem;
    text-decoration: none;
}


/*FACQS*/

.faqs__img img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.titulo__faqs {
    color: var(--secundara);
    font-size: 4rem;
    text-align: center;
}

.reglamento__faqs{
    display: flex;
    justify-content: center;

}
.faqs__texto {
    text-align: center;
}

.dude {
    margin-bottom: 2rem;
}

.more {
    width: 1.5%;
}

.prueba {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
}

.inf {
    color: #d3a05f;
    padding-left: 5rem;
}

.esc {
    color: var(--principal);
}

details {
    border-color: #fff;
    border-radius: 4px;
    padding: .5em;
    font-size: 2.2rem;
    background-color: #f9f9f9;
    color: #3a77a1;
}

summary::marker {
    content: none;
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}

details[open] {
    padding: 0.5em;
}

details[open] summary::marker {
    content: none;
    border-color: #fff;
    margin-bottom: 0.5em;
}

.faqs__contenedor {
    justify-content: center;
    margin-top: 7rem;
    margin-bottom: 5rem;
}


/*restaurante*/

.contenedor-hd {
    max-width: 30%;
    margin: 0 auto;
}

.colores-redes {
    display: flex;
    justify-content: space-between;
}

.color-titulo {
    color: var(--terciario);
    padding-bottom: 2rem;
    display: flex;
    justify-content: end;
}

.res-horario {
    padding-bottom: 2rem;
}

.res-horario-t {
    display: flex;
    justify-content: end;
}

.dos-textos {
    text-align: justify;
    padding: 10rem;
    font-style: italic;
}

.texto-res {
    font-weight: bold;
}

.texto-res-j {
    font-size: 2rem;
}

@media (min-width:768px) {
    .informacion-res {
        display: grid;
        grid-template-columns: 50% 50%;
        padding-left: 10rem;
        padding-right: 10rem;
    }
}

.uno-platillos {
    display: flex;
    justify-content: center;
    padding-top: 10rem;
}

.platillos {
    border-radius: 5rem;
    width: 65%;
    max-width: 100%;
}

.informacio-webs {
    padding-top: 4rem;
    display: flex;
    justify-content: center;
}

.carrusel-res {
    padding-top: 3rem;
    padding-bottom: 9rem;
}


/*tag*/

.serviciostag {
    margin-bottom: 10rem;
}

.serviciostag__tar {
    margin-bottom: 5rem;
}

.serviciostag__icones {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 5rem;
}

@media (min-width:768px) {
    .serviciostag__icones {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 10rem;
    }
}

.serviciostag__img {}

.tarjetas__t--imgs {
    border-radius: 10% 30% 50% 70%;
    width: 40%;
}

.tarjetas__t--textos {
    text-align: center;
    font-style: oblique;
    font-size: 1.5rem;
}

.serviciostagdos {
    display: grid;
    grid-template-columns: repeat(31 1fr);
    column-gap: 3rem;
}

@media (min-width:768px) {
    .serviciostagdos {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

video {
    width: 100%;
}


/* habitaciones*/

.inicio-habitacion {
    background-image: url(../img/habitacion-hab1.JPG);
    background-repeat: no-repeat;
    /*no se repita la imagen*/
    background-size: cover;
    /*para que tome el ancho de imagen*/
    min-height: 950px;
}

.habitaciones {
    display: flex;
    justify-content: left;
    padding-top: 20%;
    padding-left: 3%;
}

.habitaciones--texto {
    background-color: rgba(14, 14, 15, 0.281);
    padding: 3rem;
}

.habitaciones--texto__titulo {
    color: var(--secundara);
    font-weight: bold;
    font-size: 5rem;
}

.habitaciones h2 {
    color: var(--principal);
    font-size: 3rem;
}

.habitaciones--texto p {
    color: var(--blanco);
    font-size: 2.5rem;
    display: flex;
    font-weight: bold;
    justify-content: center;
}

.inicio-habitacion__img {
    background-color: rgba(245, 243, 243, 0.137);
    color: var(--blanco);
    display: flex;
    justify-content: center;
}

.contendor__dem--logo {
    margin: 5rem;
    display: flex;
    justify-content: center;
}

@media (min-width:780px) {
    .servicio-atencion {
        display: grid;
        grid-template-columns: 33.3% 33.3% 33.3%;
        padding-top: 5rem;
        padding-bottom: 5rem;
        line-height: 1;
    }
}

.servicio-atencion__numero {
    font-size: 7rem;
    color: var(--principal);
    display: flex;
    justify-content: center;
    font-weight: 550;
}

.servicio-atencion__texto {
    display: flex;
    justify-content: center;
    font-size: 3rem;
    color: var(--terciario);
    font-weight: bold;
}

@media (min-width:780px) {
    .tarjetas-habitaciones {
        display: grid;
        grid-template-columns: 25% 25% 25%;
        column-gap: 7rem;
        gap: ;
        justify-content: center;
        padding-bottom: 10rem;
        padding-top: 10rem;
    }
}

.alojamiento {
    display: flex;
    justify-content: center;
    padding-top: 4rem;
    font-size: 3rem;
    font-weight: bold;
    padding-bottom: 5rem;
    color: #fdfdfd;
    background-color: var(--terciario-trans);
}

.tarjetas-habitaciones__img {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.tarjetas-habitaciones__reservas {
    display: flex;
    justify-content: space-between;
    padding: 5rem;
}

.tarjetas-habitaciones__terraza {
    background-color: var(--principal-trans);
    border-radius: 2rem;
    border: 2px solid var(--terciario);
}

.tarjetas-habitaciones__titulo {
    font-size: 4.5rem;
    color: var(--terciario);
    font-weight: bold;
    line-height: 1.1;
    margin-left: 1rem;
}

.tarjetas-habitaciones__reservas a {
    background-color: #fff;
    width: 10rem;
    display: flex;
    justify-content: center;
    padding: 10px;
    color: #c55459;
    border: 1.5px solid var(--terciario);
    border-radius: 3rem;
}

.tarjetas-habitaciones__reservas a:hover {
    text-decoration: none;
    color: var(--blanco);
    background-color: #c55459;
}

.tarjetas-habitaciones__text {
    color: var(--principal);
    font-style: oblique;
    font-size: medium;
    margin-right: 10rem;
    padding: 1rem;
}

.titulos-habi {
    font-size: 3rem;
    font-weight: bold;
    color: var(--terciario);
}

.text-habitacion-p {
    text-align: center;
    font-style: oblique;
    color: #f9f9f9;
}

.img-habp-2 {
    width: 30%;
    border-radius: 2%;
}

.hab-texto {
    margin: 10%;
}

.boton-resevar-hab {
    display: flex;
    justify-content: center;
}

.fotos-hab {
    display: flex;
    justify-content: center;
    column-gap: 2rem;
}

.img-habp {
    max-width: 30%;
    height: 30%;
    border-radius: 100%;
}

.contenedor_habitaciones {
    margin-bottom: 15rem;
}

.habitacion {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    gap: 15rem;
}

@media (min-width:768px) {
    .habitacion {
        grid-template-columns: repeat(2, 1fr);
    }
}

.habitacion__primera p,
h1 {
    display: flex;
    justify-content: center;
}

.habitacion__primera a {
    display: flex;
    justify-content: center;
    text-decoration: ;
    color: var(--primario);
    font-size: 2rem;
    font-weight: bold;
}

.habitacion__primera--icons {
    display: flex;
    justify-content: center;
    gap: 10rem;
    padding-bottom: 5rem;
}

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
    width: 100%;
    margin: auto;
}


/*cabañas*/

.inicio-cabaña {
    background-image: url(../img/cabaña-cab.JPG);
    background-repeat: no-repeat;
    /*no se repita la imagen*/
    background-size: cover;
    /*para que tome el ancho de imagen*/
    min-height: 950px;
}

.cabaña {
    display: flex;
    justify-content: left;
    padding-top: 20%;
    padding-left: 3%;
}

.cabaña--texto {
    background-color: rgba(14, 14, 15, 0.281);
    padding: 3rem;
}

.cabaña--texto__titulo {
    color: var(--secundara);
    font-weight: bold;
    font-size: 5rem;
}

.habitaciones h2 {
    color: var(--principal);
    font-size: 3rem;
}

.cabaña--texto p {
    color: var(--blanco);
    font-size: 2.5rem;
    display: flex;
    font-weight: bold;
    justify-content: center;
}

.inicio-habitacion__img {
    background-color: rgba(245, 243, 243, 0.137);
    color: var(--blanco);
    display: flex;
    justify-content: center;
}

.contendor__dem--logo {
    margin: 5rem;
    display: flex;
    justify-content: center;
}

@media (min-width:780px) {
    .servicio-atencion--cabaña {
        display: grid;
        grid-template-columns: 33.3% 33.3% 33.3%;
        padding-top: 5rem;
        padding-bottom: 5rem;
        line-height: 1;
    }
}

.servicio-atencion--cabaña__numero {
    font-size: 7rem;
    color: var(--secundara);
    display: flex;
    justify-content: center;
    font-weight: 550;
}

.servicio-atencion--cabaña__texto {
    display: flex;
    justify-content: center;
    font-size: 3rem;
    color: var(--principal);
    font-weight: bold;
}

@media (min-width:780px) {
    .tarjetas-cabañas {
        display: grid;
        grid-template-columns: 50% 50%;
        column-gap: 7rem;
        gap;
        justify-content: center;
        padding-bottom: 10rem;
        padding-top: 10rem;
    }
}

.alojamiento-cabaña {
    display: flex;
    justify-content: center;
    padding-top: 5rem;
    font-size: 4rem;
    font-weight: bold;
    padding-bottom: 5rem;
    color: var(--terciario);
    background-color: var(--secundara-trans);
}

.tarjetas-habitaciones__img {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.tarjetas-habitaciones__reservas {
    display: flex;
    justify-content: space-between;
    padding: 5rem;
}

.tarjetas-cabaña__terraza-cabaña {
    background-color: var(--principal-trans);
    border-radius: 2rem;
    border: 2px solid var(--secundara);
}

.tarjetas-habitaciones__titulo {
    font-size: 4.5rem;
    color: var(--terciario);
    font-weight: bold;
    line-height: 1.1;
    margin-left: 1rem;
}

.tarjetas-habitaciones__reservas a {
    background-color: #fff;
    width: 10rem;
    display: flex;
    justify-content: center;
    padding: 10px;
    color: #c55459;
    border: 1.5px solid var(--terciario);
    border-radius: 3rem;
}

.tarjetas-habitaciones__reservas a:hover {
    text-decoration: none;
    color: var(--blanco);
    background-color: #c55459;
}

.tarjetas-habitaciones__text {
    color: var(--principal);
    font-style: oblique;
    font-size: medium;
    margin-right: 10rem;
    padding: 1rem;
}

.titulos-habi {
    font-size: 3rem;
    font-weight: bold;
    color: var(--terciario);
}

.text-habitacion-p {
    text-align: center;
    font-style: oblique;
    color: #f9f9f9;
}

.img-habp-2 {
    width: 30%;
    border-radius: 2%;
}

.hab-texto {
    margin: 10%;
}

.boton-resevar-hab {
    display: flex;
    justify-content: center;
}

.fotos-hab {
    display: flex;
    justify-content: center;
    column-gap: 2rem;
}

.img-habp {
    max-width: 30%;
    height: 30%;
    border-radius: 100%;
}

.contenedor_habitaciones {
    margin-bottom: 15rem;
}

.habitacion {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    align-items: center;
    gap: 15rem;
}

@media (min-width:768px) {
    .habitacion {
        grid-template-columns: repeat(2, 1fr);
    }
}

.habitacion__primera p,
h1 {
    display: flex;
    justify-content: center;

}

.habitacion__primera a {
    display: flex;
    justify-content: center;
    text-decoration: ;
    color: var(--primario);
    font-size: 2rem;
    font-weight: bold;
}

.habitacion__primera--icons {
    display: flex;
    justify-content: center;
    gap: 10rem;
    padding-bottom: 5rem;
}

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
    width: 100%;
    margin: auto;
}


/*masajes*/
.boton-us-spa {
    padding: 0rem
}
.btn {
    border: none;
    color: var(--principal);
    cursor: pointer;
    text-decoration: none;
    font-size: 1.5rem;
}

.warning {
    background-color: #f9f9f941;
}

.sub-spa{
    background-color:var(--terciario-trans) ;
    
}
.sub-spa h1 {
    margin: 0em 0;
}
.sub-spa p{
    margin: 0 0 0px;
}
.spa-img {
    max-width: 100%;
    
}
.fotos-spa p{
display: flex;
justify-content: center;

}
.spa-masajes {
    display: grid;
    grid-template-columns: 40% 40%;
    background-color: #f9f9f959;
   
}
.tsamaño-spa{
    width: 300px;
    height: 200px;
    padding-bottom: 1rem;
}
@media (min-width:768px) {
    .spa-carrete{
    padding-top: 2rem;
    display: grid;
    column-gap:.5rem;
    justify-content:center ;
    grid-template-columns: 14% 14% 14% 14% 14% 14% 14%;
    padding-bottom: 1rem;
    background-color: var(--terciario-trans);
}
}