/* ===========================
   VARIABLES
=========================== */
:root {
  /* Colors */
  --yellow: #F7CE35;
  --beige: #FDF4D5;
  --grey: #C4C4C4;
  --white: #ffffff;
  --black: #000000;
	
  /*Sizes*/
  --122: 122px;
  --70: 70px;
}


@font-face {
  font-family: 'Boston';
  src: url('/wp-content/uploads/fonts/Boston/Boston-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Boston';
  src: url('/wp-content/uploads/fonts/Boston/Boston-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Boston';
  src: url('/wp-content/uploads/fonts/Boston/Boston-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}



.heading-margin-section {margin-top: var(--122);}
.section-margin {margin-top: var(--70);}


@media (min-width: 768px) {
  .heading-margin-section {margin-top: var(--70);}
}


/* ===========================
   ESTADOS BASE (sin media queries)
=========================== */

/* Por defecto: solo móvil visible */
.mobile-section {display: grid !important;}

.responsive-section {display: grid;}

.desktop-white-section,
.tablet-white-section,
.tablet-section,
.desktop-section {
    display: none !important;
}

/* ===========================
   TABLET (768px – 1280px)
=========================== */
@media (min-width: 768px) and (max-width: 1280px) {

    .mobile-section {
        display: none !important;
    }

    .tablet-section {
        display: grid !important;
    }

    .desktop-section {
        display: none !important;
    }
}

/* ===========================
   DESKTOP (1281px en adelante)
=========================== */
@media (min-width: 1281px) {

    .mobile-section {
        display: none !important;
    }

    .tablet-section {
        display: none !important;
    }
	
	.responsive-section {display: none !important;}

    .desktop-section {
        display: grid !important;
    }
}

@media (min-width: 1501px) {
	.desktop-white-section {display: grid !important;}
}



@media (min-width: 768px) and (max-width: 1500px) {
	.tablet-white-section {display: grid !important;}
}



/**
 * Remove the margin in all browsers.
 */

html {overflow-x: hidden;}

body {
	margin: 0;
	background-color: var(--beige);
	overflow: hidden;
	font-family: 'Boston';
}


/*Styles for the templates of the pages*/
.site-main {
	background: var(--beige);
	padding: 0 3rem 0 3rem;
}

@media (min-width: 1281px) {
	.site-main {padding: 0 5rem 0 5rem; }
}

.entry-header {
	padding-top: 8.125rem;
}




/*Styles for the titles*/
h1 {
	font-family: 'Boston';
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 120%;
	color: var(--black);
	margin: 0;
}

h2 {
	font-family: 'Boston';
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 120%;
	color: var(--black);
}

h3 {
	font-family: 'Boston';
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 120%;
	color: var(--black);
}



@media (min-width: 768px) and (max-width: 1280px) {
    h1 { font-size: 52px;} 
	h2 { font-size: 32px;} 
	h3 {font-size: 24px;}
	h4 {font-size: 20px;}
}

@media (min-width: 1281px) {
    h1 { font-size: 80px;}
	h2 { font-size: 52px;} 
	h3 {font-size: 32px;}
	h4 {font-size: 24px;}
}



.legal-page {
	padding: 70px 48px 70px 48px;
	
	& h4 {
		font-family: 'Boston';
		font-style: normal;
		font-weight: 700;
		font-size: 18px;
		line-height: 120%;
		color: var(--black);
	}
	
	@media (min-width: 768px) and (max-width: 1280px) {
		padding: 122px 48px 70px 48px;
		& h4 {font-size: 20px;}
	}

	@media (min-width: 1281px) {
		padding: 122px 300px 70px 300px;
		& h4 {font-size: 24px;}
	}
	
	& ul {
		margin: 0;
		& li {
			font-family: 'Boston';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 150%;
			color: var(--black);	
		}
	}
	& p {
		font-family: 'Boston';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 150%;
		color: var(--black);
	}
	
	& a {
		font-family: 'Boston';
		font-style: normal;
		font-weight: 600;
		text-decoration: none;
		font-size: 14px;
		line-height: 150%;
		color: var(--black);
	}
	
	
}


.video-margin {margin-top: 70px;}

@media (min-width: 1281px) {
	.video-margin {margin-top: 79px;}

}


@media (min-width: 900px) {
  .cmplz-cookiebanner {
     padding: 26px 0 50px 50px !important;
  }
	
  .cmplz-body { padding-right: 50px !important;}
  .cmplz-buttons {padding-right: 50px !important;}

 
}


.left-line {
    position: relative;
}

.left-line::after {
    content: "";
    position: absolute;
    bottom: 148px;
    left: 29px;
    width: 60%;
    height: 2px;
    background-color: #C4C4C4;
    border-radius: 2px;

    transform-origin: left;
    transform: scaleX(var(--left-scale, 0));
    opacity: var(--left-opacity, 0);
}












/* Clases y estilos para la cuarta sección blanca */
.quartenary-white-section {
  border-radius: 28px;
  padding: 40px 29px 70px 29px;
	
	& p {
		font-family: 'Boston';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 150%;
	}
	
	& .rounded-img {
		border-radius: 21px;
		height: 359px;
		
		& .wp-block-cover__inner-container {
			height: 100%;
			
			& .circle {
				& figure {& img {width: 33px; height: 33px;}}
			}
		}
	}
	
	& .yellow-line {
		margin: 35px 0;
	}
	
	& h2 {
		font-family: 'Boston';
		font-style: normal;
		font-weight: 700;
		font-size: 24px;
		line-height: 100%;
	}
	
	 & .mt {margin-top: 60px;}

  
  /* TABLET */
  @media (min-width: 768px) and (max-width: 1280px) {
    padding: 50px 29px 100px 29px;
	  
		& p {font-size: 24px;}
	
		& .rounded-img {
			height: 794px;

			& .wp-block-cover__inner-container {
				& .circle {
					& figure {& img {width: 75px; height: 75px;}}
				}
			}
		}
	
		& .yellow-line {
			margin: 50px 0;
		}

		& h2 {font-size: 32px;}
	    & .mt {margin-top: 86px;}
	}


	/* DESKTOP */
	@media (min-width: 1281px) {
		padding: 45px 48px 130px 48px;
		
		& p {font-size: 30px;}

		& .rounded-img {
			height: 794px;

			& .wp-block-cover__inner-container {
				& .circle {
					& figure {& img {width: 75px; height: 75px;}}
				}
			}
		}

		& .yellow-line {margin: 70px 0;}

		& h2 {font-size: 52px;}
		& .mt {margin-top: 112px;}
	
	}
	
	
}


.no-select {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}