/* 
   Promise Path - Custom CSS
   This file contains custom styling for the Promise Path landing page
*/

/* ===== GENERAL STYLES ===== */
:root {
   --a1-white-green: #f3f1e5;
   --a1-green: #21362e;
   --a1-dark-green: #35581e;
   --a1-black-green: #0f1c18;
   --a1-violet: rgb(147, 88, 182);
}

body {
   overflow-x: hidden;
   font-family: 'Chivo', sans-serif !important;
   background-color: var(--a1-black-green) !important;
}

button {
   border: 0;
   padding: 1.25rem 2rem;
   font-weight: 500;
   transition: all 0.4s;
}

button.home:hover, button.form-btn:hover {
   background-color: #f3f1e5;
   color: var(--a1-green);
}

input {
   border: 0;
   border-bottom: 2px solid #f3f1e5;
   padding-bottom: 1rem;
   background-color: transparent;
   color: black;
   font-size: 1.1rem !important;
}

input::placeholder, textarea::placeholder {
   color: #f3f1e5;
}

textarea {
   border: 2px solid #dbdbdb;
   height: 10em;
   resize: none !important;
   font-style: italic;
   padding-top: 1rem;
   background-color: transparent;
   color: #f3f1e5;
}

a {
   text-decoration: none !important;
   color: var(--a1-white-green) !important;
}


h5 {
   font-size: 16px !important;
}

.font-amaranth {
   font-family: 'Amaranth', sans-serif;
}

.font-geist-mono {
   font-family: 'Geist Mono', sans-serif;
}

.font-chivo {
	font-family: 'Chivo', sans-serif !important;
}

.cf-input {
	color: white;
}

.wpcf7-response-output, .wpcf7-response-output {
	color: white;
	border-radius: 1rem;
}

.blog-content-section .wp-block-columns p {
	width: 100% !important;
}

.wp-block-heading, .blog-content-section p, .wp-block-columns, .wp-block-list {
	width: 75% !important;
	margin-inline: auto;
}

/* ========== Navbar ==========  */
.navbar {
   border-radius: 20rem;
   margin-top: 4rem;
   transition: padding 0.35s ease, width 0.5s ease, border-radius 0.8s ease;
   padding-top: .5rem !important;
   padding-bottom: .5rem !important;
}

.navbar img {
   width: 140px
}

.navbar-scrolled {
   margin-top: 0 !important;
   padding-top: 0.2rem !important;
   padding-bottom: 0.2rem !important;
   transition: padding 0.3s ease, width 0.5s ease, border-radius 0.75s ease;
   width: 100vw !important;
   border-radius: 0;
}

.nav-link{
   font-weight: 500 !important;
}

.nav-item a {
   transition: all 0.35s;
}

.nav-item a:hover {
   color: #5c9b32 !important;
}

.nav-link.active{
   color: var(--a1-green) !important;
}

.short-line {
   opacity: 0;
   transition: opacity 0.3s ease;
	width: 25%;
}

.short-line.active {
   opacity: 1;
}

/* ========== FIN Navbar ==========  */

/* ========== Footer ==========  */
footer a {
   color: #f3f1e5 !important;
   text-decoration: none;
   transition: all 0.35s;
}

footer a:hover {
   color: #64a837 !important;
}

.footer-logo-top {
   height: 200px;
}

.circle-button {
   background-color: var(--a1-green);
   color: #f3f1e5;
   transition: 0.5s ease-out;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   height: 3rem;
   width: 3rem;
}

.circle-button:hover {
   background-color: var(--a1-dark-green);
}

.circle-photo {
   width: 102% !important;
   height: 100%;
   object-fit: cover;
   display: block;
}
/* ========== FIN Footer ==========  */

/*  ========== Backgrounds ==========  */
.bg-white-green {
   background-color: var(--a1-white-green);
}

.bg-black-green {
   background-color: var(--a1-black-green);
}

.bg-green {
   background-color: var(--a1-green);
}

.bg-violet {
   background-color: var(--a1-violet);
}

.bg-beige {
   background-color: rgb(248, 248, 240);
}

.bg-black-green.transparent {
   background-color: transparent !important;
}

/*  ========== FIN Backgrounds ==========  */

/*  Color textos  */
.text-darkgreen {
   color: var(--a1-dark-green) !important;
}

.text-violet {
   color: var(--a1-violet);
}

.text-white {
   color: #f3f1e5 !important;
}

.text-white2 {
   color: #f3f1e5 !important;
}


/* ========== Hero ========== */
.hero-img-div {
   width: 95%;
   height: 1200px;
   margin-inline: auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.hero-text {
   text-align: center;
   top: 0;
   transform: translateY(40%);
}

.hero-text h5 {
   font-size: 21px !important;
}

.hero-text h1 {
   margin-top: 7rem;
   margin-bottom: 4rem;
   font-size: 5rem;
}

.hero-text h6 {
   font-size: 22px;
   font-weight: 400;
}

.hero-arrow-btn {
   margin-top: 150px;
}

.form-btn {
   border-radius: 2rem !important;
   background-color: #f3f1e5;
}

.club-info-section {
   min-height: 600px;
   padding-bottom: 50px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
}

.club-info-section h2, 
.club-info-section h6,
.club-info-section #buttons,
.club-info-section #violet-line-1 {
   width: 80%;
   margin-inline: auto;
}

.violet-line-first {
   width: 50px; 
   border-bottom: 8px solid #a756d6ff
}

.violet-line-second {
   margin-left: 20px; 
   width: 20px; 
   border-bottom: 8px solid #a756d6ff
}

#membresia-y-comunidad,
#productos-certificados {
   height: 525px;
}

#celda-2 {
   border-left: 2px solid black; 
   border-right: 2px solid black;
}

.border-end-black {
   border-right: 0px solid rgb(29, 29, 29);
}

.image-wrapper {
   overflow: hidden;
   position: relative;
}

.object-cover {
   width: 100% !important;
   height: 100%;
   object-fit: cover;
   display: block;
}

.image-wrapper.circular-img {
   height: 150px;
}


/* ===== PREGUNTAS FRECUENTES ===== */
.div-preguntas {
   transition: 0.5s ease-in;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   padding-block: 2.5vh;
   border: 1px solid #f3f1e5;
   color: #f3f1e5;
}

.div-preguntas:hover {
   cursor: pointer;
   background-color: #7070703f;
}

.div-preguntas .info {
   max-height: 0;
   overflow: hidden;
   transition: 0.4s ease-out;
}

.div-preguntas.expanded {
   background-color: transparent;
}

.div-preguntas.expanded .info {
   max-height: 14vh;
}

#blog-section a{
   text-decoration: none;
   color: #f3f1e5;
}
.blog-section-img {
   height: 300px;
}

#circle-answer {
   height: 13vw; 
   width: 13vw; 
   border-radius: 50%;
}

/* ========== NOSOTROS ========== */
.nosotros-hero {
   width: 96%;
   height: 1200px;
   margin-inline: auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.nosotros-hero-text {
   left: 4%;
   right: 4%;
   bottom: 4%;
}

.nosotros-hero-text h5 {
   font-size: 19px !important;
}

.nosotros-hero-text h1 {
   font-size: 60px;
}

.nosotros-hero-text h6 {
   font-size: 16px;
   font-weight: 400;
}

.mision-box, .vision-box {
   width: 45%;
   padding: auto;
   transition: 0.5s ease;
}

.mision-box:hover, .vision-box:hover {
   background-color: var(--a1-green);
   cursor: pointer;
}

.mision-box h6, .vision-box h6{
   font-size: 16px;
}

.mision-box .inside, .vision-box .inside {
   border: 2px solid var(--a1-dark-green);
   height: 350px;
   padding: 2rem 2rem;
   display: flex;
   flex-direction: column;
   justify-content: end;
}

.back-box {
   background-color: #35581e;
}

.nosotros-line {
   background-color: var(--a1-violet);
   height: 12px;
   width: 70%;
}

.white-line {
   background-color: #f3f1e5;
   height: 1px;
   margin-bottom: 1px !important;
   width: 80%;
}

.historia-img-height {
   height: 240px;
}

.circle-people-div {
   border: 1px solid #f3f1e5;
   padding: 10px;
   border-radius: 50%;
   height: 225px;
   width: 225px;
   margin-inline: auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

#circle-people-img {
   height: 180px;
   width: 180px;
   border-radius: 50%;
}

/* ========== PROCESO ========== */
.proceso-hero-container{
   padding-block: 120px;
}

.fs-proceso-hero {
   font-size: 50px;
}

.proceso-swiper-height{
   height: 750px;
}

.overlay-texto {
   position: absolute;
   top: 10%;
   right: 0;
   width: 50%;
   height: 60%;
   
   /* Flexbox para centrar el contenido */
   display: flex;
   justify-content: center; /* Centrado horizontal */
   align-items: end;     /* Centrado vertical */

   background-color: rgba(0, 0, 0, 0.041);
   
   text-align: center;
   padding: 20px;
   z-index: 10;
}

.overlay-texto h1 {
   font-size: 44px;
}

.overlay-texto h2 {
   font-size: 40px;
}

.overlay-texto h6 {
   font-size: 1rem;
}

.custom-pagination {
   z-index: 10;
}

.custom-pagination .swiper-pagination-bullet {
   width: 10px;
   height: 10px;
   background: rgb(37, 37, 37);
   border: 1px solid #f3f1e5;
   margin: 0 4px;
   opacity: 0.5;
   transition: 0.3s;
}

.custom-pagination .swiper-pagination-bullet-active, .swiper-pagination-planos .swiper-pagination-bullet-active,
.swiper-pagination-gallery .swiper-pagination-bullet-active {
   opacity: 1;
   background: #f3f1e5;
}

.bottom-25 {
   top: 85% !important;
}

.image-fullwide {
   height: 600px;
}

.image-fullwide-nosotros {
   height: 550px;
}

.image-fullwide-proceso {
   height: 450px;
   background-color: #000;
}

#main-proceso-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: opacity 0.5s ease-in-out;
}

.item-beneficio {
   cursor: pointer;
   transition: transform 0.25s ease;
   padding-bottom: 30px;
}

.item-beneficio:hover {
   transform: translateY(-2px);
}

.item-beneficio .bottom-line {
   position: absolute;
   bottom: 0;
   height: 2px;
   width: 40%;
   background-color: var(--a1-violet);
}

.section-title {
   font-size: 20px !important;
}

/* Blog SECTION */
.hero-single-post {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
	height: 450px;
}

.hero-single-post::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,.45);
   border-radius: inherit;
}

.hero-single-post > div {
   position: relative;
   z-index: 2;
}

.wp-block-post-featured-image img {
   border-radius: 0.35rem !important;
}

.blog-content-section {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

.blog-content-section h2, .blog-content-section h3, .blog-content-section h4 {
   margin-top: 50px;
   margin-bottom: 50px;
}

.blog-content-section p{
   margin-top: 50px;
   margin-bottom: 50px;
   font-weight: 300;
   line-height: 1.55rem;
}

.wp-block-image :where(figcaption) {
   color: rgb(173, 173, 173);
}

.position-prod-certificados {
   top: 60px; 
   left: 50px
}

.position-membresia {
   top: 60px; 
   left: 50px;
}

.position-comunidad {
   bottom: 60px; 
   left: 50px
}

.reprocan-table {
   border-top: 2px solid black; 
   border-left: 2px solid black; 
   border-right: 2px solid black;
}

.history-box {
   opacity: 0;
}

.hero-fade-nosotros {
   transition: opacity 0.6s ease-in-out;
}


@media only screen and (max-width: 1400px) {
   .hero-img-div {
      height: 950px;
   }

   .hero-text {
      transform: translateY(35%);
   }

   .hero-text h5 {
      font-size: 1.5rem;
   }

   .hero-text h1 {
      margin-top: 5rem;
      margin-bottom: 4rem;
      font-size: 5rem;
   }

   .hero-text h6 {
      font-size: 1.5rem;
      font-weight: 400;
   }

   .hero-arrow-btn {
      margin-top: 100px;
   }

   #membresia-y-comunidad,
   #productos-certificados {
      height: 500px;
   }

   .image-fullwide {
      height: 450px;
   }

   .footer-logo-top {
      height: 220px;
   }

   .nosotros-hero {
      width: 98%;
      height: 1200px;
   }

   .nosotros-hero-text {
      left: 2%;
      right: 2%;
      bottom: 4%;
   }

   .nosotros-hero-text h5 {
      font-size: 1.3rem;
   }

   .nosotros-hero-text h1 {
      font-size: 4.5rem;
   }

   .nosotros-hero-text h6 {
      font-size: 1.1rem;
   }

   .mision-box, .vision-box {
      width: 47%;
      padding: auto;
   }

   .mision-box .inside, .vision-box .inside {
      height: 340px;
      padding: 1.75rem 1.75rem;
   }

   .circle-people-div {
      height: 200px;
      width: 200px;
   }

   #circle-people-img {
      height: 170px;
      width: 170px;
   }

   .blog-section-img {
      height: 250px;
   }

   .proceso-hero-container{
      padding-block: 110px;
   }

   .fs-proceso-hero {
      font-size: 46px;
   }

   .proceso-swiper-height{
      height: 700px;
   }

   .overlay-texto {
      top: 10%;
      right: 0;
      width: 45%;
      height: 65%;
      padding: 15px;
   }

   .overlay-texto h2 {
      font-size: 36px;
   }
}

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

   .footer-logo-top {
      height: 180px;
   }

   .historia-img-height {
      height: 15vw;
   }

   .border-end-black {
      border-right: 0px solid rgb(29, 29, 29);
   }

   .nosotros-hero-text {
      left: 3.5%;
      right: 3.5%;
      bottom: 4%;
   }

   .nosotros-hero-text h1 {
      font-size: 4rem;
   }

   .nosotros-hero-text h6 {
      font-size: 1.04rem;
   }

   .white-line.violet {
      background-color: #a756d6ff;
   }

   #circle-answer {
      height: 15vw; 
      width: 15vw; 
      border-radius: 50%;
   }
}

@media only screen and (max-width: 992px) {
   h5 {
      font-size: 20px !important;
   }
   
   .hero-img-div {
      height: 900px;
      width: 100%;
   }

   .hero-text h1 {
      font-size: 4rem;
   }

   .club-info-section {
      min-height: 500px;
      padding-bottom: 20px;
   }

   #celda-2 {
      border-left: 0px solid black; 
      border-right: 0px solid black;
      border-block: 1px solid black;
   }

   #circle-answer {
      height: 120px; 
      width: 120px; 
      border-radius: 50%;
   }

   .nosotros-hero {
      width: 100%;
      height: 1100px;
   }

   .nosotros-hero-text {
      left: 4%;
      right: 4%;
      bottom: 3%;
   }

   .nosotros-hero-text h1 {
      font-size: 4.5rem;
   }

   .mision-box, .vision-box {
      width: 48%;
      padding: auto;
   }

   .historia-img-height {
      height: 150px;
   }

   .white-line {
      width: 90%;
   }

   .image-fullwide {
      height: 350px;
   }

   .circle-people-div {
      height: 180px;
      width: 180px;
   }

   #circle-people-img {
      height: 150px;
      width: 150px;
   }

   .proceso-hero-container{
      padding-block: 75px;
   }

   .bottom-25 {
      top: 90% !important;
   }

   .proceso-swiper-height{
      height: 600px;
   }

   .overlay-texto {
      top: 8%;
      width: 50%;
      height: 70%;
      padding: 10px;
   }

   .overlay-texto h1 {
      font-size: 38px;
   }

   .overlay-texto h2 {
      font-size: 34px;
   }

   .overlay-texto h6 {
      font-size: 16px;
   }

   #productos-certificados,
   #membresia-y-comunidad {
      height: 450px !important;
   }

   .position-prod-certificados {
      top: 30px; 
      left: 25px
   }

   .position-membresia {
      top: 35px; 
      left: 25px
   }

   .position-comunidad {
      bottom: 30px; 
      left: 25px
   }

   .blog-section-img {
      height: 220px;
   }
}

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

   .circle-people-div {
      height: 155px;
      width: 155px;
   }

   #circle-people-img {
      height: 135px;
      width: 135px;
   }

   .blog-section-img {
      height: 200px;
   }

   .footer-logo-top {
      height: 160px;
   }

   .navbar img {
      width: 130px
   }

   #circle-answer {
      height: 95px; 
      width: 95px; 
      border-radius: 50%;
   }
	
	.wp-block-heading, .blog-content-section p, .wp-block-columns, .wp-block-list {
		width: 100% !important;
		margin-inline: auto;
	}
	
	.blog-content-section h2, .blog-content-section h3, .blog-content-section h4 {
		margin-top: 30px;
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 576px) {
   h5 {
      font-size: 16px !important;
   }

   .section-title {
      font-size: 18px !important;
   }

   .navbar {
      margin-top: 2rem;
      padding-top: .4rem !important;
      padding-bottom: .4rem !important;
   }

   button {
      padding: 0.85rem 1.25rem;
      font-size: 15px !important;
   }

   .hero-text {
      transform: translateY(30%);
      width: 100%;
   }

   .hero-text h1{
      font-size: 3.25rem;
      margin-top: 3.25rem;
   }

   .hero-text h5 {
      font-size: 1rem !important;
   }

   .hero-text h6 {
      font-size: 1rem;
      width: 95%;
   }

   .hero-arrow-btn {
      margin-top: 70px;
   }

   #membresia-y-comunidad {
      height: 400px !important;
   }

   #productos-certificados h2, 
   #membresia-y-comunidad h2 {
      font-size: 1.4rem !important;
   }

   #productos-certificados h5, 
   #membresia-y-comunidad h5 {
      font-size: 0.9rem;
   }

   .club-info-section h2, 
   .club-info-section h5,
   .club-info-section #buttons,
   .club-info-section #violet-line-1 {
      width: 94%;
   }

   .violet-line-first {
      width: 30px; 
      border-bottom: 7px solid #a756d6ff
   }

   .violet-line-second {
      margin-left: 10px; 
      width: 16px; 
      border-bottom: 7px solid #a756d6ff
   }

   .div-preguntas h5 {
      font-size: 1.1rem;
   }

   .blog-section-img {
      height: 150px;
      width: 150px;
   }

   .border-end-black {
      border-right: 0px solid rgb(29, 29, 29);
      border-bottom: 1px solid rgb(255, 255, 255);
      padding-bottom: 35px;
      margin-bottom: 20px;
      width: 85%;
   }

   .border-end-black.top {
      padding-top: 20px;
      border-top: 0px solid rgb(255, 255, 255);
   }

   .mision-box .inside, .vision-box .inside {
      height: 125px;
      padding: 1.5rem 1.5rem;
   }

   .mision-box, .vision-box {
      width: 45%;
   }

   .footer-logo-top {
      height: 140px;
   }

   .navbar img {
      width: 110px
   }

   .proceso-hero-container{
      padding-block: 60px;
   }

   .fs-proceso-hero {
      font-size: 36px;
   }

   .overlay-texto {
      top: 7%;
      width: 94%;
      height: 70%;
      padding: 8px;
   }

   .overlay-texto h1 {
      font-size: 34px;
   }

   .overlay-texto h2 {
      font-size: 28px;
   }

   .overlay-texto h6 {
      font-size: 15px;
   }

   .blog-content-section {
      width: 85%;
      position: relative;
   }

   .blog-content-section p{
      margin-top: 40px;
      margin-bottom: 40px;
      line-height: 1.4rem;
   }

   #tabla-reprocann h6 {
      font-size: 14px !important;
   }

   .reprocan-table {
      border-top: 0px solid black; 
      border-left: 0px solid black; 
      border-right: 0px solid black;
   }

   .short-line {
      width: 10%;
   }

   .nosotros-hero {
      height: 950px;
   }

   .nosotros-hero-text h1 {
      font-size: 3.5rem;
   }

   .nosotros-hero-text h6 {
      font-size: 15px;
   }

   .image-fullwide-nosotros {
      height: 250px;
   }

   .circle-people-div {
      height: 144px;
      width: 135px;
   }

   #circle-people-img {
      height: 120px;
      width: 120px;
   }

   #blog-title {
      font-size: 18px;
   }

   .bg-black-green.transparent {
      background-color: var(--a1-black-green) !important;
   }

   .white-line {
      width: 0;
   }

   .history-box {
      overflow-y: hidden;
   }

   .history-box h6 {
      font-size: 14px;
      font-weight: 100 !important;
   }
}

@media only screen and (max-width: 420px) {
   .blog-section-img {
      height: 110px;
      width: 110px;
   }
}