:root {

    --basic-white: rgb(255, 255, 255);
    --basic-black: rgb(0, 0, 0);	

    --specific-morado-1: rgb(114, 51, 115);
    --specific-morado-2: rgb(88, 96, 137);
    --specific-morado-3: rgb(136, 145, 202);
    --specific-naranja-1: rgb(255, 129, 0);
    --specific-naranja-2: rgb(255, 221, 188);
    --specific-verde-1: rgb(152, 203, 4);
    --specific-verde-2: rgb(247, 239, 228);

    --table-gray-1: rgb(66, 73, 73);
	--table-gray-2: rgb(81, 90, 90);
	--table-gray-3: rgb(97, 106, 107);
	--table-gray-4: rgb(112, 123, 124);
	--table-gray-5: rgb(127, 140, 141);
	--table-gray-6: rgb(153, 163, 164);
	--table-gray-7: rgb(178, 186, 187);
	--table-gray-8: rgb(204, 209, 209);
	--table-gray-9: rgb(229, 232, 232);

}

/****************************** GENERALES ******************************/

@font-face {
    font-family: 'Ink Free';
    src: url('/font/Inkfree.ttf');
}

html {
    font-size: 1vw;
}

body {
    font-family: 'Ink Free';
    font-size: 2rem;
    color: var(--table-gray-1);
    text-align: justify;
}

hr {
    margin: 2rem 5rem;
}

a {
    text-decoration: none;
    color: unset;
}

/****************************** INFORMACION PRINCIPAL ******************************/

#informacionPrincipal {
    background: linear-gradient(160deg, var(--basic-white) 0%, var(--specific-naranja-2) 40%);
    border-radius: 0rem 0rem 3rem 3rem;
}

#informacionPrincipal_header {
    padding: 2rem 3rem;
    margin-bottom: -2rem !important;
}

#informacionPrincipal_header_logo_img {
    max-width: 32rem;
    width: 32rem;
}

#informacionPrincipal_body_img img {
    mask-image: linear-gradient(to right, transparent 5%, var(--basic-white) 27%);
    border-radius: 3rem;
    height: 100%;
    object-fit: cover;
}

#informacionPrincipal_header_titulo {
    padding: 2rem 4rem;
    font-size: 3rem;
}

#informacionPrincipal_body {
    padding: 4rem;
}

#informacionPrincipal_body_texto {
    overflow-wrap: anywhere;
}


/****************************** TERAPIAS ONLINE ******************************/

#terapiasOnline {
    padding: 2rem;
}

#terapiasOnline_titulo {
    font-size: 4rem;
}

.terapiasOnline-item {
    width: 23rem;
    padding: 2rem;
}

.terapiasOnline-item-img img {
    width: 100%;
    height: 22rem;
    object-fit: cover;
    transition: 0.2s linear;
    border-radius: 0.5rem;
}

.terapiasOnline-item-img img:hover {
    transform: scale(1.05);
}

.terapiasOnline-item-info {
    text-align: center;
    padding-top: 2rem;
}

.terapiasOnline-item-custom-popover {
    font-family: 'Ink Free';
    font-size: 1.8rem;
    border: 0.1rem solid var(--table-gray-7);
    padding: 1rem;
    opacity: 0.9;
    --bs-popover-body-color: var(--basic-black);
    width: 35rem;
    max-width: 35rem;
    text-align: center;
}

/****************************** TERAPIAS PRESENCIALES ******************************/

#terapiasPresenciales {
    background: radial-gradient(circle, var(--specific-verde-2) 51%, var(--specific-verde-1) 120%);
    margin-bottom: -3rem;
    padding-top: 3rem;
    padding-bottom: 28rem;
}

#terapiasPresenciales_titulo {
    font-size: 4rem;
}

.terapiasPresenciales-item {
    padding: 0rem 5rem;
}

#terapiasPresenciales_imagen {
	width: 40rem;
}

#terapiasPresenciales_imagen img {
	height: 23rem;
}		

/****************************** MULTIMEDIA ******************************/

#multimedia {
    width: 82%;
    background-color: var(--specific-morado-2);
    position: absolute;
    /* transform: translateY(-50%); */
    transform: translate(calc((82% / 2) - 24.5rem), -50%);
    -webkit-transform: translate(calc((82% / 2) - 24.5rem), -50%);
    -ms-transform: translate(calc((82% / 2) - 24.5rem), -50%);
    -moz-transform: translate(calc((82% / 2) - 24.5rem), -50%);
    -o-transform: translate(calc((82% / 2) - 24.5rem), -50%);
    border-radius: 1rem;
    height: 45rem;
    
}

#multimedia_video {
    border-radius: 1rem;
    object-fit: cover;
    height: 45rem;
    width: 100%;
}

/****************************** INFORMACION CONTACTO ******************************/

.infoContacto {
    background: radial-gradient(circle, var(--specific-morado-3) 50%, var(--specific-morado-1) 94%);
    border-radius: 3rem 3rem 0rem 0rem;
    padding-top: 25rem;
    padding-bottom: 5rem;
    color: var(--table-gray-9);
}

#infoContacto_header {
    padding: 0rem 5rem;
    text-align: center;
}

#infoContacto_titulo {
    text-align: center;
    font-size: 4rem;
    font-weight: bold;
}

.infoContacto-item {
    width: 27rem;
    padding: 1rem;
    text-align: center;
}

.infoContacto-item-icono,
.infoContacto-item-titulo {
    font-size: 3rem;
}