/* ===========================
   Clases para el CTA con botón
=========================== */
.cta-btn {
    border-radius: 28px;
    padding: 29px;

    & .wp-block-group {
        border-radius: 28px;
        padding: 70px 29px;

        & .images-row {
            padding: 24px 24px 48px 24px;
			display: grid;
			gap: 24px;

            & figure {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
		
		& h2 {
            font-family: 'Boston';
            font-weight: 700;
            font-size: 20px;
            line-height: 100%;
            text-align: center;
            color: var(--black);
            margin-bottom: 30px;
        }


        & h3,
        & h4 {
            font-family: 'Boston';
            font-weight: 700;
            font-size: 20px;
            line-height: 120%;
            text-align: center;
            color: var(--black);
            margin-bottom: 30px;
        }

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

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

    /* TABLET */
    @media (min-width: 768px) and (max-width: 1280px) {
        & .wp-block-group {
            padding: 130px 55px;

            & .images-row {
                padding-bottom: 75px;
            }

			& h2 { font-size: 32px; }
            & h3 { font-size: 32px; }
            & h4 { font-size: 24px; }
            & p  { font-size: 24px; }
        }
    }

    /* DESKTOP */
    @media (min-width: 1281px) {
        & .wp-block-group {
            padding: 80px 175px 120px 175px;

            & .images-row {
                padding-top: 50px;
                padding-bottom: 50px;
            }

			& h2 { font-size: 52px; margin-bottom: 8px;}
            & h3 { font-size: 52px; margin-bottom: 8px; }
            & h4 { font-size: 32px; }
            & p  { font-size: 30px; margin-bottom: 66px; }
        }
    }
}

@media (min-width: 1281px) {
	.cta-btn__inner {padding-left: 100px !important; padding-right: 100px !important;}
}


/* ===========================
   Clases para el CTA con imágenes
=========================== */

.cta-img {

  /* ===========================
     BASE (móvil)
  ============================ */

  & .wp-block-cover {
    border-radius: 28px;
	padding: 0 15px;
    height: 309px;
	  
	  & span {mix-blend-mode: multiply;}

    /* Título */
    & h2 {
      font-family: 'Boston';
      font-weight: 700;
      font-size: 20px !important;
      line-height: 120%;
      margin: 0;
    }

    /* Flechas */
    & .left-arrow,
    & .right-arrow {
      display: flex;
      align-items: center;
      opacity: .5;
    }

    & .left-arrow {
      justify-content: start;
    }

    & .right-arrow {
      justify-content: end;
    }
	  
	& .arrows-text-grid { 
			& figure {
				 & img {width: 25.64px; height: 18.5px; max-width: 25.64px;}
			}
	}
	  
	
  }

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

    & .wp-block-cover {
      height: 400px;
	  padding: 0 29px;

      & h2 {
        font-size: 32px !important;
      }
    }
  }

  /* ===========================
     DESKTOP (1025px+)
  ============================ */
  @media (min-width: 1281px) {

    & .wp-block-cover {
      height: 669px;

      & h2 {
        font-size: 52px !important;
      }
		
		& .arrows-text-grid { 
			gap: 80px;
			
			& figure {
				 & img {width: 51px; height: 37px; max-width: 51px;}
			}
		}

      /* Gutenberg grid */
      & .is-layout-grid {
        gap: 100px;
      }
    }
  }
}




/* ===========================
   Clases para el CTA con botón
=========================== */
.cta-columns-img {
    border-radius: 28px;
    padding: 29px;

    & .wp-block-group {
        border-radius: 28px;
        padding: 70px 40px;

        & .images-row {
            padding: 0;
			display: flex;
			flex-direction: column;
			gap: 24px;

            & figure {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
		
		

        & h3 {
            font-family: 'Boston';
            font-weight: 700;
            font-size: 20px;
            line-height: 120%;
            text-align: center;
            color: var(--black);
            margin-bottom: 30px;
        }
		
		& h3:nth-child(1) {margin-bottom: 24px;}
		& h3:nth-child(3) {margin-top: 48px; margin-bottom: 48px;}
  
    }

    /* TABLET */
    @media (min-width: 768px) and (max-width: 1280px) {
        & .wp-block-group {
            padding: 120px 55px;
			display: grid !important;

            & .images-row {padding: 0 !important;}
            & h3 { font-size: 24px; }
			
			& h3:nth-child(1) {margin-bottom: 23px;}
			& h3:nth-child(3) {margin-top: 70px; margin-bottom: 7px;}
        }
    }

    /* DESKTOP */
    @media (min-width: 1281px) {
        & .wp-block-group {
            padding: 80px 175px 80px 175px;
			display: grid !important;

            & .images-row {
				padding: 0 !important;
                padding-top: 40px;
            }

            & h3 { font-size: 32px; margin-bottom: 8px; }
			
			& h3:nth-child(1) {margin-bottom: 48px;}
			& h3:nth-child(3) {margin-top: 50px; margin-bottom: 25px;}
        }
    }
}