/*
========================================================================================================================
BASE - MOBILE FIRST!!!
========================================================================================================================
Definimos los elementos HTML comunes y los elementos estructurales de la página                                       */
	

body {
    font-size: var(--14px);
}

p {
    margin-bottom: 0rem;
}

ol {
    padding-left: 1.1rem;
    margin-bottom: 0;
}	

.gallery-hide { display:none; }
.gallery-hide-reactions { display:none; }
    
    
.container {
    padding-left: var(--30px);
    padding-right: var(--30px);
}

.treatment section h1, #custom-title {
    text-align: center;
    color: #676767;
    font-size: var(--30px);
    padding-top: 0;
    font-weight: bold;
    border: 0;
    line-height: 1.2;
}

.treatment section h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1.2;
    font-size: var(--20px);
    text-align: center;
    color: #676767;
    font-weight: bold;
    border: 0;
}

.treatment section h3 {
    margin-bottom: 0;
    padding-bottom: 10px;
    line-height: 1.6;
    font-size: var(--18px);
    color: #4c4c4b;
    font-weight: bold;
    border: 0;
}

.btn {
    font-size: var(--13px);
    border-width: var(--4px);
    padding: var(--5px) var(--10px);
    color: #878787;
    cursor: pointer;
}

.SLIDER {
    white-space: wrap  !important;
}

.SLIDER .slider-dots {
    padding: 0 !important;
}

.SLIDER .slider-dots>.slider-dot:after {
    color: #97908e !important;
}

.divider {
    border:1px solid #97908e;
    max-width:25px;
    margin-top: var(--15px);
    margin-bottom: var(--25px);
}

.SLIDER, .SLIDER[data-imagefit=true]>.slide img {
    width: 100%;
    height: auto;
}


/* --------------------------------------------- SECCIONES PRINCIPALES -----------------------------------------------*/	
.section1 {
    background-color: #f7e7e2;
    padding-top: 30px;
    padding-bottom: 30px;
}

#section1 {
    padding-top: 40px;
    padding-bottom: 30px;
}

#section1 .divider:first-of-type {
      margin-top: 0px;
}

#section-gif {
    height: 20vh;
    background-image: 
    url(https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2024/08/lipoprohealth-mobile.gif);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#section-faqs .titulo-relacionados {
    margin-top: 20px;
    margin-bottom: 20px;
}	


/* ---------------------------------------------- FORMULARIO CONTACTO ------------------------------------------------*/
#section-formulario-tratamiento {
    padding-top: var(--50px);
    padding-bottom: var(--50px);
    background-color: #e9bbac;	
}

.background-form {
        background-image: url( '{{ path_assets }}/assets/home/fondo1b.{{ function | @webp }}{{ function | @cache }}' );
        background-color: #DBE2E2;
        background-repeat: no-repeat;			
        background-position: 30%;
        background-size:cover;

    }

.background-form .row {
    grid-gap: 0;
}

.p-after-form {
    padding-top: var(--20px);
    margin-bottom: 0;
    font-size: var(--14px);
    text-align: center !important;
}

.container-form {
    padding: var(--space) calc( var(--space) * 2 );
    border: var(--5px) solid #fff;
    overflow: hidden;
}

.form-style-tratamiento {
    padding-top: var(--20px);
}

.form-style-tratamiento .form input[type="text"] {
    border-top: 0 !important;
    border: var(--3px) solid #9d9f9e;
    padding: 3px;
    border-left: 0;
    border-right: 0;
    line-height: var(--17px) !important;
    padding-bottom: var(--8px) !important;
    margin-top: var(--5px) !important;
    border-radius: 0;
    font-weight: bold;
}

.form-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    margin: 0;
    top: 0;
    z-index: -1;
    width: var(--16px);
    height: var(--16px);
}





/* ----------------------------------------------- SECCIÓN 3 TARJETAS ------------------------------------------------*/

#contenedor-tarjetas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 350px;
    height: 280px;
    padding: var(--30px) var(--20px);
    margin: 5px 0;
}

    .card p {
        font-size: var(--13px);
        font-weight: bold;
        color: #878787;
        padding-top: 1rem;
    }

    .card-1, .card-2, .card-3 {
        background-size: 300px;
        background-repeat: no-repeat;
        background-position: 70% 80%;
    }

    .card-1 {
        background-image: 
        url(https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2024/08/tarjeta-1-visita-gratuita.png);
        background-color: #f2c9a9;
    }

    .card-2 {
        background-image: 
        url(https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2024/08/tarjeta-2-calculadora-imc.png);
        background-color: #c9ccbc;
    }

    .card-3 {
        background-image: 
        url(https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2024/08/tarjeta-3-financiacion.png);
        background-color: #e9bbac;
    }

.card .btn {
    margin-top: var(--10px);
}

.card-divider {
    border: 2px solid #4c4c4b;
    max-width: 25px;
    margin: 0;
}

.card-title h3 {
    font-size: var(--28px) !important;
    margin-bottom: 0;
}

/* -------------------------------------------- SECCIÓN VÍDEOS ESPECÍFICA --------------------------------------------*/

.VIDEO img {
    max-height: 85vw;
    object-fit: cover;
    object-position: center;
}

#videos, #videos2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: calc( var(--space) * 2 );
    list-style: none;
    margin: 0;
    padding-left: 0;
}

    #videos li {
        padding: 0;
        position: relative;
    }

    #videos a {
        text-decoration: none;
    }

    #videos img {
        max-width: 100%;
    }

    #videos h3, .slide h3 {
        text-align: center;
        margin: 0 0 var(--15px) 0;
        padding: var(--10px) var(--10px) var(--20px) var(--10px);
        font-size: var(--22px);
        color: #4f4f4f;
        font-weight: 500;
        position: relative;
    }

    #videos p, #videos2 p {
        text-align: center;
        font-size: var(--18px);
        color: #000;
        padding: 0 var(--15px);
    }


    .VIDEO:not(.no-icon):before,
    .VIDEO:not(.no-icon):after {
        display: none !important;
    }




/* ---------------------------------------------- PREGUNTAS FRECUENTES -----------------------------------------------*/
    .accordion {
		margin: 0;
		padding: 0;
		list-style: none;
	}
		.accordion li {
			padding: 0 0 var(--3px) 0 !important;
		}

		.accordion h3 {
            padding: var(--10px);
            padding-right: 50px;
            font-size: 15px !important;
            font-style: italic;
			margin: 0;
			background: #eee;
			position: relative;
			cursor: pointer;
			transition: all .3s ease;
		}

		.accordion h3:hover {
			background: #ddd;
		}
        .accordion h3:after {
            content: "\e913";
            font-family: clinicaplanas;
            font-size: var(--18px);
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: var(--45px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .3s ease;
        }
			.accordion li > h3 + div {
				display: none;
				padding: var(--15px) var(--30px);
				border: 1px solid transparent !important;
			}
			
			.accordion li.open > h3 + div {
				display: block;
			}
			.accordion li.open h3:after {
				transform: rotate(180deg);
			}


	.accordion li > h3 + div {
		border: 1px solid transparent;
	}


/* ------------------------------------ SECCIÓN VIDEOS, TRATAMIENTOS Y ARTÍCULOS -------------------------------------*/

    #section-videos, #section-tratamientos, #section-articulos {
        padding-top: var(--30px);
        padding-bottom: var(--40px);
        background-color: #ebebeb;
    }

    #section-videos .titulo-relacionados h2,
    #section-tratamientos .titulo-relacionados h2,
    #section-articulos .titulo-relacionados h2,
    #section-faqs .titulo-relacionados h2 {
        padding: 10px;
        font-size: var(--15px);
        font-weight: bolder;
        text-transform: uppercase;
        color: #505050;
    }

    #section-videos h3,
    #section-tratamientos h3,
    #section-articulos h3 {
        margin-bottom: var(--20px);
        font-size: var(--16px) !important;
        padding-top: 10px;
        padding-bottom: 20px;
        text-align: center;
        color: #505050;
        font-weight: 700;
    }

    #section-videos span,
    #section-tratamientos span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis; 
        max-height: 3em; 
        line-height: 1.5em; 
        color: #828282;
        font-weight: 700;
    }

    #section-articulos span {
        display: none;
    }

    #section-articulos .SLIDER>.slide,
    #section-tratamientos .SLIDER>.slide {
        margin-bottom: 40px;
    }

        #section-articulos #our-treatments .container,
        #section-videos #our-treatments .container {
            padding-left: 0;
            padding-right: 0;
        }


    .titulo-relacionados {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .titulo-relacionados::before,
        .titulo-relacionados::after {
            content: "";
            margin: 30px 0;
            flex-grow: 1;
            height: 3px;
            background-color: #c3c3c3;
        }

    .category-list>li {
        border: var(--1px) solid transparent;
        transition: .3s;
        background: transparent;
    }

        .category-list>li:hover {
            border: var(--1px) solid transparent;
        }



/*
========================================================================================================================
RESPONSIVE - DESKTOP - MIN:WIDTH 1024px
========================================================================================================================
																										              */
@media (min-width: 1024px) {
/* ----------------------------------------------- ELEMENTOS COMUNES -------------------------------------------------*/

body {
    font-size: var(--22px) !important;
}

ol {
    padding-left: 1.3rem;
}

.divider {
    border:2px solid #97908e;
    max-width:45px;
    margin-top: var(--20px) !important;
    margin-bottom: var(--50px);
}

.treatment section {
    padding-top: var(--60px);
    padding-bottom: var(--60px);
}

.treatment section h1, #custom-title {
    font-size: var(--65px) !important;
}

.treatment section h2 {
    font-size: var(--50px) !important;
}

.treatment section h3 {
    font-size: var(--40px) !important;
    padding-bottom: var(--20px);
}

.btn {
    font-size: var(--18px);
    border-width: var(--4px);
    padding: var(--10px) var(--15px);
}

.d-none-ls {
    display: none;
}

#section-gif {
    height: 40vh;
    background-image:
        url(https://www.clinicaplanas.com/ka/apps/clinicaplanas/media/es/2024/08/360totalchange-desktop.gif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ---------------------------------------- SECCIÓN CON SLIDER TRATAMIENTOS ------------------------------------------*/

#tratamientos-corporales, #tratamientos-corporales2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: calc( var(--space) 1 );
    list-style: none;
    margin: 0;
    padding-left: 0;
}

    #tratamientos-corporales li {
        padding: 0;
        position: relative;
    }

    #tratamientos-corporales a,
    #tratamientos-corporales2 a {
        text-decoration: none;
    }

    #tratamientos-corporales img {
        max-width: 100%;
    }

    #tratamientos-corporales h3, #tratamientos-corporales2 h3, .slide h3 {
        text-align: center;
        margin: 0 0 var(--15px) 0;
        padding: var(--10px) var(--10px) var(--20px) var(--10px);
        font-size: var(--22px);
        color: #4f4f4f;
        font-weight: 500;
        position: relative;
    }

    #tratamientos-corporales p, #tratamientos-corporales2 p {
        text-align: center;
        font-size: var(--17px);
        color: #000;
        min-height: 100px;
        padding-left: var(--70px);
        padding-right: var(--70px);
        padding-bottom: var(--30px);
    }

    .divider-section-tratamientos {
        border:2px solid #97908e;
        max-width:35px !important;
        margin-bottom: var(--20px);
    }

    .slide .btn {
        font-size: 12px;
        margin-bottom: 40px;
        padding: var(--10px);
    }

    .slide p {
        text-align: center;
        padding-bottom: var(--25px);
    }


/* ------------------------------------------- SECCIÓN CON APARATOLOGÍA ----------------------------------------------*/
    #aparatologia {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: calc( var(--space) * 2 );
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    #aparatologia li {
        padding: 0;
        position: relative;
    }

    #aparatologia a {
        text-decoration: none;
    }

    #aparatologia img {
        max-width: 100%;
    }

    #aparatologia h3, #aparatologia h3, .slide h3 {
        text-align: center;
        margin: 0 0 var(--15px) 0;
        padding: var(--10px) var(--10px) var(--20px) var(--10px);
        font-size: var(--22px);
        color: #4f4f4f;
        font-weight: 500;
        position: relative;
    }

    #aparatologia p {
        text-align: center;
        font-size: var(--18px);
        color: #000;
        min-height: 100px;
        padding-bottom: var(--30px);
    }

/* ------------------------------------ SECCIÓN VIDEOS, TRATAMIENTOS Y ARTÍCULOS -------------------------------------*/
    #section-videos .titulo-relacionados h2,
    #section-tratamientos .titulo-relacionados h2,
    #section-articulos .titulo-relacionados h2,
    #section-faqs .titulo-relacionados h2 {
        padding-top: 0;
        padding: 20px;
        font-size: var(--25px) !important;
    }

    #section-videos h3,
    #section-tratamientos h3,
    #section-articulos h3 {
        font-size: var(--24px) !important;
        font-weight: 700;
        margin-bottom: 10px;
        padding: 10px !important;
        padding-bottom: 0;
    }

    #section-faqs h3 {
        font-size: var(--22px) !important;
        font-weight: 400;
        margin-bottom: 5px;
        padding: 10px !important;
        padding-bottom: 0;
    }

    #section-articulos h3 {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    #section-tratamientos span,
    #section-articulos span {
        font-size: var(--16px);
    }


/* --------------------------------------------------- FORMULARIO ----------------------------------------------------*/

	#section-formulario-tratamiento {
		padding-top: var(--80px);
		padding-bottom: var(--80px);
	}
	
	#formulario-tratamiento {
		padding-left: 0 !important;
	}

/* ----------------------------------------------- SECCIÓN 3 TARJETAS ------------------------------------------------*/
	#seccion-tarjetas {
		padding-top: var(--10px);
		padding-bottom: var(--20px);
	}

	#seccion-tarjetas #contenedor-tarjetas {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.card {
		flex: 1;
		text-align: start !important;
		width: 400px;
		min-height: 300px;
		padding: var(--30px) var(--30px);
		margin: 15px 0;
		gap: 30px;
	}

		.card-1, .card-2, .card-3 {
			background-size: 80%;
		}

		.card p {
            margin-top: -15px;
			font-size: var(--18px);
			padding-top: 0;
		}

	.card-divider {
		margin: 0;
	}

	.card-title h3 {
		font-size: var(--45px) !important;
		margin-bottom: .5rem;
		padding-bottom: 5px !important;
	}

	.card .btn {
		margin-top: 0;
		margin-bottom: 30px;
		padding: var(--5px) var(--15px);
	}
}


/*
========================================================================================================================
RESPONSIVE - DESKTOP - MIN:WIDTH 768px
========================================================================================================================
																										              */
		
 @media (min-width: 769px) {  

/* -------------------------------------------- ELEMENTOS COMUNES ----------------------------------------------------*/
    body {
		font-size: var(--19px);
	}

	.treatment section h1 {
			font-size: var(--45px);
		}

	.treatment section h2 {
		font-size: var(--30px);
	}

	.treatment section h3 {
		font-size: var(--25px);
		padding-bottom: var(--20px);
	}

/* ---------------------------------------- SECCIÓN CON SLIDER TRATAMIENTOS ------------------------------------------*/
    #tratamientos-corporales {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        list-style: none;
        margin: 0;
        padding-left: 0;
        margin-bottom: var(--80px);
    }

    #tratamientos-corporales h3 {
        text-align: center;
        margin: 0;
        padding: var(--10px) var(--10px) var(--20px) var(--10px);
        padding-bottom: var(--2px);
        color: #4f4f4f;
        font-weight: 500;
        position: relative;
        font-size: var(--28px) !important;
        font-weight: 700;
    }

    #tratamientos-corporales2 {
        display: grid;
        grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
        grid-gap: calc( var(--space));
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    #tratamientos-corporales p, #tratamientos-corporales2 p {
        text-align: center;
        padding-bottom: var(--20px);

    }

    .img-tratamientos, #tratamientos-corporales2 .img-tratamientos {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .img-tratamientos img, #tratamientos-corporales2 .img-tratamientos img {
        max-width: 80% !important;
    }

    
    #tratamientos-corporales2 h3 {
        text-align: center;
        margin: 0;
        padding: var(--10px) var(--10px) var(--20px) var(--10px);
        padding-bottom: var(--2px);
        color: #4f4f4f;
        font-weight: 500;
        position: relative;
        font-size: var(--28px) !important;
        font-weight: 700;
    }

    .divider-section-tratamientos {
        border:2px solid #97908e;
        max-width:35px !important;
        margin-bottom: var(--20px);
    }

/* ------------------------------------------- SECCIÓN CON APARATOLOGÍA ----------------------------------------------*/
    #aparatologia {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: calc( var(--space) * 2 );
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    #aparatologia h3 {
        text-align: center;
        padding-bottom: var(--2px);
        margin: 0;
        font-size: var(--28px) !important;
        font-weight: 700;
    }

    #aparatologia p {
        text-align: center;
        padding-bottom: var(--10px);
    }

    .img-aparatologia {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .img-aparatologia img {
        max-width: 100%;
    }


    .divider-section-tratamientos {
        border:2px solid #97908e;
        max-width:35px !important;
        margin-bottom: var(--20px);
    }







	#seccion-tarjetas #contenedor-tarjetas {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	#section-videos .titulo-relacionados h2 {
		font-size: var(--25px) !important;
	}



	#videos {
		grid-template-columns: 1fr 1fr 1fr;
	}

		#videos h3 {
			font-size: var(--24px) !important;
			font-weight: 700;
		}

        .category-list span {
			padding: 0;
		}

        
		.background-form {
			background-image: url( 'https://www.clinicaplanas.com/ka/apps/clinicaplanas_assets/assets/home/fondo1b.webp' );
			background-color: #DBE2E2;
			background-repeat: no-repeat;
			background-position: 30%;
			background-size: cover;
		}

        .p-after-form {
			padding-top: var(--20px);
			font-size: var(--18px);
			text-align: center !important;
		}

		.container-form {
			padding: var(--space) calc( var(--space) * 2 );
			border: var(--5px) solid #fff;
			overflow: hidden;
		}		

			.container-form h2 {
				font-size: var(--26px) !important;
				line-height: var(--30px) !important;
				color: #a2a4a1 !important;
				font-weight: 500 !important;
				line-height: 1 !important;
				text-align: left !important;
				text-transform: uppercase !important;
				position: relative !important;
				padding-top: calc( var(--space) + var(--5px) ) !important;
				padding-bottom: calc( var(--space)) !important;
			}

			.container-form h2:after {
				content: " ";
				position: absolute;
				left: 0;
				width: var(--40px);
				bottom: 0;
				border-bottom: var(--5px) solid #c5c5c6;
			}
			#formulario-tratamiento {
			padding-left: 50%;
			}

            #form-terms {
                line-height: 1.3;
            }
                #form-terms p {
                    font-size: var(--16px);
                    padding-bottom: 5px;
            }
        }

/*
========================================================================================================================
RESPONSIVE - MAX:WIDTH 768px
========================================================================================================================
																										              */

@media screen and (max-width: 768px) {

#seccion-tarjetas {
    padding-top: var(--10px);
}

.d-none-ss {
    display: none;
}

.background-form {
    background-image: url( 'https://www.clinicaplanas.com/ka/apps/clinicaplanas_assets/assets/home/fondo_form_xs.webp' );
    background-size: cover;
    background-position: 22%;
}

#formulario-tratamiento {
    padding-left: 120px;
}

.container-form .form-style-tratamiento p {
    font-size: 8px;
    line-height: 12px;
}

.background-form .form-style-tratamiento .form .form-check label {
    width: 230px;
    padding-left: 22px;
    margin-bottom: 5px;
}

.background-form .form-check>label {
    font-size: 11px;
    line-height: 12px;
    font-weight: 700;
}

.container-form h2 {
    font-size: var(--33px) !important;
    line-height: var(--33px) !important;
    color: #a2a4a1 !important;
    font-weight: 500 !important;
    text-align: left !important;
    text-transform: uppercase;
    position: relative;
    padding-bottom: calc( var(--space)) !important;
    margin-bottom: var(--space);
}

.background-form  .form-style-tratamiento .form input[type="text"] {
padding-bottom: 5px;
margin-top: 5px;
font-weight: bold;
}

.background-form .form input {
    padding:0px;
}
.background-form .form-style-tratamiento .form input[type="text"] {
    padding-bottom:5px;
    margin-top:5px;
    font-weight: bold;
}

.background-form .form-style-tratamiento .form .form-check input[type="checkbox"] {
    width:12px;
    height:12px;
}

.background-form .form-style-tratamiento .form .form-check input[type="radio"]+label::before {
    border-color:#666;
}	
.background-form .form-style-tratamiento .form .form-check .form-check>label::before {
    border-color:#666;
}	

.background-form .form-style-tratamiento .form .form-check input[type="checkbox"]:checked+label::after {
    background-size: var(--12px);
background-position: -12% -8%;
}	

.background-form .form-style-tratamiento .form .form-check label:before {
    width:16px;
    height:16px;
    border-color:#666;
}

.container-form h2:after {
    content: " ";
    position: absolute;
    left: 0;
    width: var(--30px);
    bottom: 0;
    border-bottom: var(--3px) solid #c5c5c6;
}

.divider-section-tratamientos {
    border:2px solid #97908e;
    max-width:35px !important;
    margin-bottom: var(--20px);
}

.slide p {
    text-align: center;
    padding-bottom: var(--30px);
}

.slide .btn {
    margin-bottom: 40px;
}
.d-none-ss {
    display: none;
}

.btn-centrado-ss {
    display: flex;
    place-content: center;
}

.btn-centrado-ss .btn {
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 0;
}
}

@media screen and (max-width: 480px) {
    .card {
        width: 100%;
    }
}