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




/* ===========================
   ESTADOS BASE (MÓVIL)
=========================== */

.container-primary.white-section {
    padding: 70px 0 30px 0;
}

.container-secondary.white-section {
    padding: 3.125rem 1.625rem 4.375rem 1.625rem;
}

/* ===========================
   TABLET (768px – 1280px)
=========================== */

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

    .container-primary.white-section {
        padding: 90px 0 40px 0; /* si quieres otro valor, lo ajustamos */
    }

    .container-secondary.white-section {
        padding: 3.125rem 3rem 7.625rem 3rem;
    }
}

/* ===========================
   DESKTOP (1281px en adelante)
=========================== */

@media (min-width: 1281px) {

    .container-primary.white-section {
        padding: 130px 0 50px 0;
    }

    .container-secondary.white-section {
        padding: 3.125rem 3.063rem 8.75rem 3.063rem;
    }
}


/*Clases y estilos para la sección blanca primaria*/
.white-section {
	  border-radius: 1.75rem;
	  margin: 4.375rem 0;

	  & .grey-line-container {
		margin-right: 29px;
	  }

	   & .grey-subtitle {
		font-family: 'Boston';
		font-weight: 400;
		font-size: 20px;
		line-height: 130%;
		text-align: right;
		color: var(--grey);
		margin: 0;
	  }

	  & .h2-title {
		font-family: 'Boston';
		font-weight: 700;
		font-size: 30px;
		line-height: 100%;
		color: var(--black);
		letter-spacing: -0.02em;
	  }

	 & .yellow-btn {
		font-family: 'Boston';
		font-weight: 700;
		font-size: 20px;
		line-height: 130%;
		color: var(--white);
		 
		 a {
			color: var(--white);
			background-color: var(--yellow);
			padding: 12px 24px;
			border-radius: 8px;
			display: inline-block;

			&:hover, &:active {background-color: #D6B22E !important;}
		}
	}
	
	


	& hr {
		background-color: #D8D8D8;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		margin: 0;
		border: 0 !important;
	  }

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

	  & .white-section__inner {
		margin-top: 3.125rem;
	  }

	  & .white-section__columns {
		padding: 60px 29px 0 29px;
	  }
	
	   & p {
		font-family: 'Boston';
		font-weight: 600;
		font-size: 20px;
		line-height: 150%;
		color: var(--black);
	  }

	  & .rounded-img {
		width: 100%;
		height: 19.5rem;
		padding: 0.75rem;
		margin: 2.188rem 0;

		& .circle img {
		  width: 30px;
		  height: auto;
		}

		& img {
		  border-radius: 1.313rem;
		  width: 100%;
		}

		& .wp-block-cover__inner-container {
		  height: 100%;

		  & .alignright {
			margin: 0;
		  }
		}
	  }

    & h2 {
		font-family: 'Boston';
		font-weight: 700;
		font-size: 24px;
		line-height: 100%;
		color: var(--black);
		margin: 0;
  }

  & .desktop {
    display: none;
  }

  & .responsive {
    display: block;
  }

  & .first-img {
    height: 312.81px;
	min-height: 0;
    width: auto;
    border-radius: 21px;
    padding-top: 12px;
	padding: 0;
    object-fit: cover;
    margin-top: 45px;

    & .wp-block-cover__inner-container {
      height: 100%;

      & .first-img__inner {
        display: grid;
        height: 100%;

        & .wp-image-131 {
          width: 32px;
        }

        & .wp-block-image {
          width: auto;
          display: flex;
          padding-right: 12px;
          justify-content: end;
        }

        & .linear__inner {
          position: relative;
          height: 100%;
          padding: 0 25px 25px 25px;
          border-radius: 21px;

          &::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #737373 100%);
            mix-blend-mode: multiply;
            z-index: 0;
          }

          & > * {
            position: relative;
            z-index: 1;
          }

          & .wp-block-group__inner-container {
            height: 100%;
            display: flex;
            justify-content: end;
          }
        }
      }
    }
  }

  & .second-img img {
    height: 312.81px;
    width: 100%;
    object-fit: cover;
    border-radius: 21px;
    margin-top: 30px;
  }
	
	
	& .yellow-columns {
		gap: 12px;
		& .yellow-column {
				height: 213px; border-radius: 21px; padding: 25px;

			& .wp-block-group__inner-container {
				height: 100%;
				display: grid;
				gap: 14px;
				
				& figure {
					height: 25px;
					display: flex;
					margin: 0 40px;
					
					& img {object-fit: cover;}
				}
				
				& h3 {
					font-family: 'Boston';
					font-style: normal;
					font-weight: 700;
					font-size: 20px;
					line-height: 120%;
					margin: 0;
				}
				
				& p {
					font-family: 'Boston';
					font-style: normal;
					font-weight: 400;
					font-size: 14px;
					line-height: 130%;
					margin: 0;
				}
			}
			
		}
		
		& .image-column {
			overflow: hidden;
			border-radius: 21px;
			margin: 0;
			height: 100%;
			
				& img {height: 213px; width: 100%; object-fit: cover;}
			}
		}
	}


@media (min-width: 768px) and (max-width: 1280px) {
		.white-section .grey-subtitle {font-size: 23px;}

		.white-section .white-section__inner {margin-top: 7.625rem; }

		.white-section .white-section__columns {padding: 90px 29px 0 29px;}

		.white-section .h2-title {font-size: 52px;}

		.white-section p {font-size: 24px;}

		.white-section .yellow-line {
			display: flex;
			justify-content: center;
			margin: 3rem 0;
		}

		.white-section .yellow-line figure { margin: 0; width: 100%; }
		.white-section .yellow-line figure img { width: 100%; }

		.white-section .rounded-img {
			height: 794px !important;
			padding: 1.563rem;
		}

		.white-section .rounded-img .circle img { width: 75px; }

		.white-section h2 {font-size: 32px;}

		.white-section .first-img { height: 467px; }

		.white.section .second-img img { height: 326px; width: auto; }

		.white-section .yellow-columns {
			gap: 12px;
		}

		.white-section .yellow-columns .yellow-column {
			height: 257px;
		}

		.white-section .yellow-columns .yellow-column .wp-block-group__inner-container figure {
			margin: 0 40px;
		}

		.white-section .yellow-columns .yellow-column .wp-block-group__inner-container h3 {
			font-size: 20px;
		}

		.white-section .yellow-columns .yellow-column .wp-block-group__inner-container p {
			font-size: 14px;
		}

		.white-section .yellow-columns .image-column .wp-block-group__inner-container figure {
			height: 257px;
			margin: 0;
		}

		.white-section .yellow-columns .image-column img {
			height: 257px;
		}

	}


 @media (min-width: 1281px) {
    .white-section .grey-subtitle {font-size: 23px;}
	 
	.white-section .white-section__inner {margin-top: 8.75rem;}

    .white-section .h2-title {font-size: 80px;}

    .white-section .white-section__columns {
      padding: 122px 42px 0 42px;
      align-items: start;
    }
	 
	 .white-section .white-section__columns div .wp-block-group__inner-container {
		 display: flex;
		 flex-direction: column;
		 height: 100%;
	 }
	 
	 .white-section .white-section__columns div .wp-block-group__inner-container .wp-block-group .wp-block-group__inner-container {
		 height: 100%;
		 justify-content: end;
		width: 100%;
	 }

    .white-section p {font-size: 30px;}

    .white-section .yellow-line {
      display: flex;
      justify-content: center;
      margin: 4.375rem 0;
    }

    .white-section .rounded-img {
      height: 794px;
      padding: 1.875rem;
      margin-bottom: 0;
    }
	 
	 .white-section .rounded-img .circle img {width: 75px;}

   .white-section h2 {font-size: 52px; }

    .white-section .mt-112 { margin-top: 112px; }

    .white-section .desktop { display: flex;}

    .white-section .responsive {display: none;}

    .white-section .first-img {
        height: 794px;
        padding-top: 48px;
    }

    .white-section .first-img .wp-image-131 { width: 75px !important;}

    .white-section .first-img 
    .wp-block-cover__inner-container 
    .first-img__inner 
    .linear__inner {
        padding: 0 48px 48px 48px;
    }

    .white-section .second-img img {
      height: 555px;
      width: auto;
    }
	 
    .white-section .yellow-columns {
        gap: 40px;
    }

    .white-section .yellow-columns .yellow-column {
        height: 257px;
    }

    .white-section .yellow-columns .image-column .wp-block-group__inner-container figure {
			height: 257px;
			margin: 0;
	}

	 .white-section .yellow-columns .image-column img {
		 height: 257px;
	 }
	 
    .white-section .yellow-columns .yellow-column .wp-block-group__inner-container h3 {
        font-size: 32px;
    }

    .white-section .yellow-columns .yellow-column .wp-block-group__inner-container p {
        font-size: 23px;
    }

}









.secondary-white-section {
  border-radius: 21px;
  padding: 30px 29px;

  & .first-column {
    padding: 50px 30px 70px 30px;
    border-radius: 21px;
    margin-bottom: 30px;
	  
	  & hr {
		 border: 0 !important;
		 border-radius: 2px;
		 background: var(--black);
		 width: 100%;
		 height: 2px;
	  }

    & h2 {
      font-family: 'Boston';
      font-weight: 700;
      font-size: 32px;
      line-height: 120%;
      text-align: center;
      color: var(--black);
      margin: 70px 0;
    }
	  
	 
	& .h2-title {
      font-family: 'Boston';
      font-weight: 700;
      font-size: 24px;
      line-height: 120%;
      text-align: center;
      color: var(--black);
      margin: 70px 0;
    }

    & p {
      font-family: 'Boston';
      font-weight: 400;
      font-size: 14px;
      line-height: 130%;
      text-align: center;
      color: var(--black);
      margin-top: 70px;
    }

    & .wp-image-154 {
      padding: 0 42px;
      height: 25px;
      object-fit: cover;
    }
  }
	
  & .secondary-second-column {height: 257px !important;}

  & .second-column {
    height: 577px;

    & div {
      height: 100%;

      & .wp-block-cover {
        border-radius: 21px;
        padding: 30px;
      }

      & .two-rows {
        & .wp-block-group__inner-container {
          display: grid;
          grid-template-rows: auto auto;
          gap: 35px;
          height: 100%;
          align-content: end;

          & .wp-block-group {
            border-radius: 15px;
            padding: 21px 21px 60px 21px;
            display: flex;
            flex-direction: row;

            & p {
              font-family: 'Boston';
              font-weight: 600;
              font-size: 14px;
              line-height: 130%;
              color: var(--black);
            }
          }
        }
      }
		
		& .four-rows {
			display: grid; gap: 10px;
			& .wp-block-group {
				padding: 21px;
				border-radius: 15px;
				height: 140px;
				width: 175px;
				
				& p {
					font-family: 'Boston';
					font-style: normal;
					font-weight: 600;
					font-size: 14px;
					line-height: 130%;
					margin: 0;
				}
			}
		}
    }
  }

  @media (min-width: 768px) and (max-width: 1280px) {
    padding: 84px 27px;

    & .first-column {
      padding: 50px 55px 50px 55px;
      height: 864px;
		
	  & .h2-title {font-size: 32px;}

      & h2 {
        font-size: 52px;
        margin: 182px 0 70px 0;
      }

      & p {
        font-size: 23px !important;
      }
    }
	  
	& .secondary-second-column {height: 614px !important;}

    & .second-column {
      height: 864px;

      & .wp-block-cover {
        padding: 48px;
      }

      & .two-rows .wp-block-group__inner-container .wp-block-group {
        padding: 47px 21px !important;

        & p {
          font-size: 24px !important;
        }
      }
    }
	  
	  
	& .four-rows {
		grid-template-columns: 247px 247px;
		gap: 20px; 
		justify-content: center; 
		align-content: end;
			& .wp-block-group {
				height: auto !important;
				width: 247px !important;
				& p {font-size: 24px !important;}
			}
		}
  }

  @media (min-width: 1281px) {
    padding: 130px 29px;

    & .first-column {
      height: 100%;
      padding: 50px 55px 55px 55px;
		
	 & .h2-title {font-size: 52px !important;}


      & h2 {
        font-size: 52px !important;
        margin: 182px 0 70px 0;
      }

      & p {
        font-size: 23px;
      }
    }
	  
    & .secondary-second-column {height: 100% !important;}

    & .second-column {
      height: 100%;

      & .wp-block-cover {
        padding: 48px;
      }

      & .two-rows .wp-block-group__inner-container {
        gap: 48px !important;

        & .wp-block-group {
          padding: 35px 21px !important;

          & p {
            font-size: 30px !important;
          }
        }
      }
    }
	  
	& .four-rows {
		grid-template-columns: 372px 372px;
		gap: 20px !important; 
		justify-content: end; 
		align-content: end;
			& .wp-block-group {
				height: auto !important;
				width: 372px !important;
				& p {font-size: 30px !important;}
			}
		}  
  }
}

	
	


	

	

.terciary-white-section {
  border-radius: 28px;
  padding: 70px 0 70px 29px;
	
 & hr {
		background-color: #D8D8D8;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		margin: 0;
		border: 0 !important;
	  }
	
  & .grey-p {
		font-family: 'Boston';
		font-style: normal;
		font-weight: 400;
		font-size: 20px;
		line-height: 130%;
		color: #C4C4C4;
	    margin: 0;
  }

  & .first-column {
    & h4 {
      font-family: 'Boston';
      font-weight: 600;
      font-size: 24px;
      line-height: 100%;
      color: var(--yellow);
      margin-bottom: 27px;
    }

    & h3 {
      font-family: 'Boston';
      font-weight: 700;
      font-size: 32px;
      line-height: 120%;
      color: var(--black);
      margin: 0 0 40px 0;
    }

    & p {
      font-family: 'Boston';
      font-weight: 600;
      font-size: 14px;
      line-height: 130%;
      color: var(--black);
	  padding-right: 29px;
    }
  }
	

  & .second-column {
    & .grey-line {
      margin-bottom: 30px;

      & p {
        margin: 0;
      }
    }

    & .sector-grid {
		  gap: 30px;
		  padding-right: 29px;
    }

    & .sector-column {
      border-radius: 21px;
      padding: 16px;
      height: 100%;

      & .first-row {
        display: flex;
        align-items: end;
        margin-bottom: 30px;
      }

      & p {
        font-family: 'Boston';
        font-weight: 400;
        font-size: 14px;
        line-height: 130%;
        color: var(--black);
        margin-bottom: 20px;
      }

      & a {
        font-family: 'Boston';
        font-weight: 700;
        font-size: 14px;
        line-height: 130%;
        color: var(--black);
		  
			&:hover, &:active {
				background-color: var(--black) !important;
				color: var(--white) !important;
			}

			
      }

      & figure {
        margin: 0;

        & img {
          width: 100%;
          height: 235.6px;
          border-radius: 10px;
          object-fit: cover;
        }
      }
    }

    div.sector-column:nth-child(2) > div:nth-child(1),
    div.sector-column:nth-child(1) > div:nth-child(1) {
      display: grid;
      grid-template-rows: calc(468px - 235.6px) 235.6px;
      height: auto;
    }
  }

  @media (min-width: 768px) and (max-width: 1280px) {
    padding: 75px 0 70px 29px;
	  
	 & .grey-p {font-size: 23px;}

    & .first-column {
      & h4 {font-size: 24px;}

      & h3 {font-size: 32px; }

      & p { font-size: 24px !important;}
    }

    & .second-column {
      & .grey-line {
        margin-bottom: 50px;
      }

      & .sector-grid {
        gap: 25px;
      }

      & .sector-column {
        height: 100%;

        & .first-row {
          margin-bottom: 37px;
        }

        & p {
          font-size: 20px;
          margin-bottom: 40px;
        }

        & figure img {
          width: 100%;
          height: 345.41px;
        }
      }

      div.sector-column:nth-child(2) > div:nth-child(1),
      div.sector-column:nth-child(1) > div:nth-child(1) {
        grid-template-rows: calc(670px - 345.41px) 345.41px;
      }
    }
  }

  @media (min-width: 1281px) {
    position: relative;
    padding: 200px 0 120px 48px;
	  
	& .grey-p {font-size: 23px;}

    & .first-column {
      & h4 {
        font-size: 30px;
      }

      & h3 {
        font-size: 52px;
      }

      & p {
        font-size: 30px !important;
      }
    }

    & .second-column {
      & .grey-line {
        margin-bottom: 55px;
      }

      & .sector-grid {
        gap: 48px;
      }

      & .sector-column {
        padding: 20px;
        height: 869px;
		z-index: 1;

        & .first-row {
          margin-bottom: 48px;
        }

        & p {
          font-size: 23px;
          margin-bottom: 40px;
        }

        & figure img {
          width: 341px;
          height: 448px;
        }
      }

      div.sector-column:nth-child(2) > div:nth-child(1),
      div.sector-column:nth-child(1) > div:nth-child(1) {
        grid-template-rows: calc(829px - 448px) 448px !important;
      }
    }
  }
}

@media (min-width: 1281px) {
	
   & .grey-line {
		  position: absolute;
		  bottom: 124px;
		  left: 42px;
		  width: 50vw !important;
		  background-color: #D8D8D8 !important;
	      border-radius: 2px;
		  height: 2px; 
	   	  border: 0 !important;
	}
	
	
	& .secondary-grey-line {
		position: absolute;
		bottom: 150px;
		left: 42px;
		width: 50vw !important;
		background-color: #D8D8D8;
		border-radius: 2px;
		height: 2px; 
		border: 0 !important;
	}
	
	
	& .left-line {
		position: absolute;
		bottom: 148px !important;
		left: 29px !important;
		width: 50vw !important;
		background-color: #D8D8D8;
		border-radius: 2px;
		height: 2px; 
		border: 0 !important;
	}

}