test

<link href="https://fonts.googleapis.com/css2?family=Anek+Tamil:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  body {
    background: #00231C;
    font-family: 'Anek Tamil', sans-serif;
    /* overflow:scroll; */
  }
  .contenido {
    max-width: 1304px;
    width:98vw;
    margin: 0 auto;
    text-align:center;

        /* max-width: 1304px;
    position: relative;
    width: 98vw;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 752px;
    overflow:hidden; */
  }
  .navbar {
    display: flex;
    justify-content: space-between;
  }
  .logo {
    width: 122px;
    height: 34px;
  }
  .currency-selector {
    position: relative;
    display: inline-block;
    cursor: pointer;
    top: -4px;
  }

  .selected-currency {
    display: flex;
    align-items: center;
    background-color: transparent; /* Fondo transparente */
    padding: 10px;
    border-radius: 5px;
  }

  .selected-currency img {
    width: 23px;
    height: 16px;
    margin-right: 8px;
  }

  .selected-currency span {
    color: white;
  }

  .arrow {
    width: 25px;
    height: 25px;
    transition: transform 0.3s;
  }

  .currency-options {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    /* margin-top: 5px; */
    top: 34px;
    z-index: 1;
  }

  .currency-options div {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
  }

  .currency-options div img {
    width: 23px;
    height: 16px;
    margin-right: 8px;
  }

  .currency-options div:hover {
    background-color: #ddd;
  }

  .currency-selector.active .currency-options {
    display: block;
    z-index:3;
  }

  .currency-selector.active .arrow {
    transform: rotate(180deg);
  }
  .banner{
    position:relative;
  }
  .banner-img,.rectangle30-1{
    max-width: 100%;
    height: 754px;
    object-fit: none;
    border-radius: 20px;
    margin:0px auto;
  }
  .rectangle30-1{
    position:absolute;
    left:0px;
  }
  .rectangle30-2{
    display:none;
  }
  .page-title{
    position:absolute;
    text-align:center;
    letter-spacing:-1px;
    width:576px;
    z-index:2;
    top:288px;
    left:76px;
  }
  .page-title>.tipo1{
    font-weight:300;
    font-size:71px;
    line-height:68px;
    color:#DEFA5C;
  }
  .page-title>.tipo2{
    font-weight:700;
    font-size:71px;
    line-height:74px;
    color:#FFF;
  }
  .page-title>.tipo3{
    font-weight:300;
    font-size:31px;
    line-height:42px;
    color:#FFF;
  }
  .subbanner{
    display:flex;
    flex-wrap:wrap;
    position:absolute;
    bottom:0px;
    align-items:end;
    width:100%;
    justify-content: space-around;
    gap:20px;
    z-index:3;
  }
  .beneficios{
    font-weight:500;
    font-size:20px;
    line-height:25px;
    color: #DEFA5C;
    z-index: 2;
    text-align:left;
    /* margin:0px 0px 20px 70px; */
    margin-bottom:20px;
  }
  .beneficios-container,.puntos-container{
    display:flex;
    gap:20px;
    justify-content:left;
    align-items:center;
    z-index: 3;
    color:#FFF;
  }
  .puntos-container{
    position:absolute;
    top:125px;
    justify-content:space-evenly;
    gap:30px;
    overflow:overlay;
    width:100%;
  }
  .beneficios-card{
    width: 237px;
    height: 115px;
    border-radius: 11px;
    border: 1px solid #FFFFFF1A;
    background: #FFFFFF1C;
    font-family: Anek Telugu;
    font-size: 20px;
    font-weight: 400;
    line-height: 21.4px;
    text-align: left;
  }
  .beneficios-card span{
    color: #DEFA5C;
    font-family: Anek Telugu;
    font-size: 20px;
    font-weight: 700;
    line-height: 21.4px;
    text-align: left;
  }
  .beneficios-card div{
    padding: 22px 19px;
  }
  .get-product{
    width: 249px;
    height: 60px;
    border-radius: 45px;
    border:none;
    font-family: Anek Malayalam;
    font-size: 20px;
    font-weight: 700;
    line-height: 28.65px;
    color: #0B2E1A;
    background: #DEFA5C;
    z-index: 3;
    cursor:pointer;
  }
  .seccion-obtienes{
    position:relative;
    height:700px;
  }
  .seccion-obtienes>img{
    position:absolute;
    /* top:-151px; */
    top:-329px;
    left:0px;
    z-index:2;
    width:100%;
  }
  .podras-obtener{
    font-family: Anek Tamil;
    font-size: 28px;
    font-weight: 400;
    line-height: 39.42px;
    text-align: center;
    color:#FFF;
    z-index:3;
    position:absolute;
    top:83px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .puntos-card{
    border: 1px solid #FFFFFF1A;
    background: #FFFFFF1C;
    width: 340px;
    height: 435px;
    top: 1366px;
    left: 452px;
    border-radius: 11px;
    text-align:center;
  }
  .puntos-card>.number{
    font-family: Anek Tamil;
    font-size: 64px;
    font-weight: 800;
    line-height: 23px;
    padding:32px;
  }
  .puntos-card>.text{
    font-family: Anek Tamil;
    font-size: 24px;
    font-weight: 800;
    line-height: 23px;
    color: #DEFA5C;
    padding:22px 10px;
  }
  .pago{
    position:absolute;
    bottom:0px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    width:100%;
    z-index:3;
    flex-wrap:wrap;
  }
  .pago>.text{
    font-family: Anek Tamil;
    font-size: 28px;
    font-weight: 400;
    line-height: 39.42px;
    text-align: center;
    color:#FFF;
  }
  .pago>.valor{
    font-family: Anek Tamil;
    font-size: 48px;
    font-weight: 700;
    line-height: 67.58px;
    text-align: left;
    color: #DEFA5C;
  }
  .seccion-que-encontraras{
    height:1014px;
    margin-top:-226px;
    background: linear-gradient(157deg, #000000 -3.92%, #002520 36.44%, #FFF 84.52%);
    position:relative;
  }
  .seccion-que-encontraras>.container{
    position:relative;
    top:260px;
  }
  .seccion-que-encontraras>.container>.wide{
    width:100%;
    height:754px;
    object-fit: none;
    border-radius: 20px;
    position:relative;
    z-index: 2;
  }
  .seccion-que-encontraras>.container>.rectangle59-1{
    position:absolute;
    right:0px;
    width:830px;
    height:100%;
    z-index: 2;
  }
  .seccion-que-encontraras .container .title{
    font-family: Anek Tamil;
    font-size: 30px;
    font-weight: 800;
    line-height: 23px;
    text-align: left;
    color:#FFF;
    width:262px;
    position:absolute;
    bottom:500px;
    right:219px;
    z-index:2;
  }
  .seccion-que-encontraras .container .subtitle{
    font-family: Anek Tamil;
    font-size: 51px;
    font-weight: 300;
    line-height: 50px;
    letter-spacing: -0.04em;
    text-align: center;
    color:#FFF;
    width:578px;
    border:none;
    position:absolute;
    bottom:225px;
    right:75px;
    z-index:2;
  }
  .seccion-que-encontraras button{
    background:#DEFA5C;
    width: 138px;
    height:46px;
    border-radius:13px;
    position:absolute;
    border:none;
    cursor:pointer;
    top:685px;
    right:20px;
    z-index:2;
  }
  .seccion-que-encontraras button p {
    font-weight: 700;
    font-size:20px;
    line-height: 29px;
    color:#000;
    margin:0px;
    display:inline-block;
    width:91px;
    padding:8px 0px;
  }
  .tatiana{
    width: 262px;
    height: 371px;
    position:relative;
    left: 30px;
    border-radius: 20px;
    background: linear-gradient(0deg, #DEFA5C 0%, #E2F09F 100%);
    color: #0E2623;
    text-align: left;
    margin-top:-162px;
    z-index:3;
  }
  .tatiana img{
    position: absolute;
    top: -198px;
    width: 262px;
  }
  .tatiana .text1{
    width:237px;
    font-family: Anek Tamil;
    font-size: 31px;
    font-weight: 500;
    line-height: 36px;
    position:absolute;
    left:10px;
    bottom:130px;
  }
  .tatiana .text2{
    width:190px;
    font-family: Anek Tamil;
    font-size: 17px;
    font-weight: 800;
    line-height: 16px;
    position:absolute;
    left:10px;
    bottom:105px;
  }
  .tatiana .text3{
    width:216px;
    font-family: Anek Tamil;
    font-size: 17px;
    font-weight: 500;
    line-height: 19px;
    position:absolute;
    left:10px;
    bottom:60px;
  }
  .tatiana button{
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    bottom: 5px;
    left: 5px;
  }
  .seccion-testimonios{
    background: #F2F3F6;
    height: 780px;
    margin-top: -209px;
    position:relative;
  }
  .seccion-testimonios .elipse16{
    box-sizing: border-box;
    position: absolute;
    width: 786px;
    max-width:90vw;
    height: 786px;
    left: 50%;
    transform: translate(-50%,50%);
    top: -579px;
    border: 0.3px solid #B4B5B8;
    border-radius:50%;
    z-index: 1;
  }
  .seccion-testimonios .elipse15{
    box-sizing: border-box;
    position: absolute;
    width: 940px;
    height: 940px;
    max-width:98vw;
    left: 50%;
    transform: translate(-50%,50%);
    top: -675px;
    border: 0.3px solid #B4B5B8;
    border-radius:50%;
    z-index: 1;
  }
  .seccion-testimonios .elipse19{
    box-sizing: border-box;
    position: absolute;
    width: 18px;
    height: 18px;
    transform: translate(-50%,50%);
    top: 50%;
    right:-18px;
    border: 9px solid #777677;
    border-radius:50%;
    z-index: 1;
  }
  .seccion-testimonios>.title{
    text-align:center;
    position:absolute;
    left: 50%;
    transform: translate(-50%,50%);
    top:8%;
    width:411px;
  }
  .seccion-testimonios>.title .text1{
    font-family: Anek Tamil;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.53px;
  }
  .seccion-testimonios>.title .text2{
    font-family: Anek Tamil;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
  }
  .seccion-testimonios>.title .text2 span{
    font-family: Anek Tamil;
    font-size: 32px;
    font-weight: 600;
    line-height: 30px;
  }
  .testimonios{
    display: flex;
    width: 94vw;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%,50%);
    gap: 40px;
    top:13%;
    z-index:3;
  }
  .testimonios-card{
    width: 311.86px;
    height: 354px;
    background:#FFF;
    text-align: left;
    position:relative;
  }
  .rotate-left{
    transform: rotate(-6.74deg);
    margin-top:38px;
  }
  .rotate-right{
    transform: rotate(6.74deg);
    margin-top:38px;
  }
  .testimonios-card>.text{
    font-family: Anek Tamil;
    font-size: 21px;
    font-weight: 700;
    line-height: 29.57px;
    color: #393939;
    padding:50px;
  }
  .testimonios-card>.person{
    padding:20px 50px;
    position:absolute;
    bottom:10px;
  }
  .testimonios-card>.person>span{
    font-family: Anek Tamil;
    font-size: 10px;
    font-weight: 700;
    line-height: 14.08px;
    color: #393939;
  }
  .seccion-recomendaciones {
    background: #F2F3F6;
    height: 847px;
    position:relative;
    z-index: 1;
    margin-top:-40px;
  }
  .seccion-recomendaciones>.titulo{
    position:absolute;
    top:0px;
    left: 50%;
    transform: translate(-50%,50%);
    max-width:90vw;
  }
  
  .seccion-recomendaciones>.titulo>.text1{
    font-family: Anek Tamil;
    font-size: 20px;
    font-weight: 700;
    line-height: 28.16px;
    max-width:90vw;    
  }
  .seccion-recomendaciones>.titulo>.text2{
    font-family: Anek Tamil;
    font-size: 24px;
    font-weight: 400;
    line-height: 33.79px;
    width: 493px;
    max-width:90vw;    
    margin:auto;
  }
  .flex-productos{
    display:flex;
    gap:20px;
    justify-content:center;
    align-items:center;
    position:absolute;
    left: 50%;
    transform: translate(-50%,50%);
    top:-70px;
    z-index: 3;
  }
  .product-card{
    width:313px;  
    height:583px;
    position:relative;
  }
  .product-img{
    width:309px;  
    height:583px;
    border-radius:25px;
  }
  .rectangle57{
    width: 309px;
    height: 309px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(to bottom, transparent, #01221C);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .product-text{
    position: absolute;
    bottom: 80px;
    left: 0px;
    text-align:center;
    padding: 0px 18px;
  }
  .product-title-narrow{
    font-weight: 300;
    font-size:32px;
    line-height: 34px;
    color:#fff;
    margin:0px;
  }
  .product-title-wide{
    font-weight: 700;
    font-size:32px;
    line-height: 34px;
    color:#fff;
    margin:0px;
  }
  .product-subtitle{
    font-weight: 400;
    font-size:16px;
    line-height: 18px;
    color:#fff;
    margin:0px;
  }
  .product-see-more{
    position: absolute;
    bottom: -84px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .seccion-preguntas {
    background: #F2F3F6;
    height: auto;
    position:relative;
    z-index: 1;
  }
  .seccion-preguntas>.titulo{
    font-family: Anek Tamil;
    font-size: 20px;
    font-weight: 700;
    line-height: 28.16px;
    text-align: center;
  }
  .accordion {
      width: 629px;
      max-width:94vw;
      margin: 40px auto 0px auto;
      
  }

  .accordion-item {
      background-color: #faf8ee;
      margin-bottom: 10px;
      border-radius: 5px;
      overflow: hidden;
      border: 1px solid #ddd;
  }

  .accordion-header {
      padding: 15px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      color: #3b3b3b;
      background-color: #fcf8e3;
  }

  .accordion-header.active {
      background-color: #173C36;
      color: #d4ed4b;
  }

  .accordion-content {
      display: none;
      padding: 15px;
      background-color: #1c4338;
      color: #ffffff;
      /* border-top: 1px solid #ddd; */
  }

  .accordion-content.active {
      display: block;
  }

  .arrow {
      font-size: 18px;
  }

  .accordion-header.active .arrow {
      transform: rotate(180deg);
  }
  .arabesco{
    position: absolute;
    z-index: 2;
    width: 500px;
  }
  @media only screen and (max-width: 978px){
    .seccion-que-encontraras>.container>.wide{
      object-position: -191px;
    }
    .seccion-que-encontraras>.container>.rectangle59-1{
      width:700px;
    }
    .seccion-testimonios>.title{
      top:13%;
    }
  }
  @media only screen and (max-width: 768px){
    .rectangle30-1{
      display:none;
    }
    .rectangle30-2{
          display: block;
          width: 100%;
          z-index: 2;
          position: absolute;
          bottom: -73px;
          height: 400px;
    }
    .page-title{
      width:358px;
      top:auto;
      bottom:50px;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .page-title>.tipo1{
      font-weight:300;
      font-size:41px;
      line-height:40px;
      color:#DEFA5C;
    }
    .page-title>.tipo2{
      font-weight:700;
      font-size:41px;
      line-height:40px;
      color:#FFF;
    }
    .page-title>.tipo3{
      font-weight:300;
      font-size:28px;
      line-height:42px;
      color:#FFF;
    }
    .subbanner{
      bottom:-150px;
    }
    .beneficios{
      text-align:center;
      z-index:3;
    }
    .beneficios-container{
      bottom:-240px;
      left:0px;
      overflow:overlay;
      width:98vw;
    }
    .beneficios-card{
      width: 264px !important;
      height: 131px !important;
      flex-shrink: 0;
    }
    .beneficios-card span{
      color: #DEFA5C;
      font-family: Anek Telugu;
      font-size: 20px;
      font-weight: 700;
      line-height: 21.4px;
      text-align: left;
    }
    .beneficios-card div{
      padding: 22px 19px;
    }
    .seccion-obtienes>img{
      top:0px;
    }
    .podras-obtener{
      top:236px;
    }
    .puntos-container{
      top:311px;
      justify-content:left;
      gap:20px;
      
    }
    .pago{
      bottom:-200px;
      gap:10px;
      justify-content:space-around;
    }
    .seccion-que-encontraras>.container>.wide{
      margin-top:220px;
      height:632px;
    }
    .seccion-que-encontraras>.container>.rectangle59-1{
      width:300px;
    }
    .seccion-que-encontraras .container .title{
      line-height: 32px;
      text-align: center;
      width:179px;
      bottom:425px;
      right:0px;
      left:50%;

    }
    .seccion-que-encontraras .container .subtitle{
      font-size: 30px;
      line-height: 42px;
      letter-spacing: -0.04em;
      width:95vw;
      bottom:-160px;
      right:0px;
    }
    .seccion-que-encontraras button{
      top:785px;
    }
    .tatiana{
      left:0px;
      margin: 434px auto 340px auto;
      z-index:2;
    }
    .seccion-testimonios {
      margin-top: -550px;
      z-index: 1;
    }
    .seccion-testimonios .elipse15{
      display:none;
    }
    .seccion-testimonios .elipse16{
      display:none;
    }
    .seccion-testimonios>.title{
      top:23%;
    }
    .testimonios{
      justify-content: left;
      overflow:auto;
      top:25%;
    }
    .testimonios-card{
      min-width:311px;
    }
    .rotate-left{
      transform: none;
      margin-top:0px;
    }
    .rotate-right{
      transform: none;
      margin-top:0px;
    }
    .flex-productos{
      overflow:overlay;
      justify-content:left;
      width:94vw;
    }
  }
  @media only screen and (max-width: 416px){
    .pago{
      bottom:-246px;
      justify-content:space-around;
    }
    .seccion-que-encontraras .container .subtitle{
      bottom:-200px;
    }
  }
  </style>
  <div class="contenido">
    <div class="navbar">
      <svg
        width="25"
        height="25"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M3 12h18M3 6h18M3 18h18"
          stroke="#ffffff"
          stroke-width="2"
          stroke-linecap="round"
        />
      </svg>
      <img
        class="logo"
        src="https://zeed.com.co/wp-content/uploads/2024/04/logo.300x87.png"
      />
      <div style="margin-top: -5px">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="25px"
          viewBox="0 0 24 24"
          width="25px"
          fill="#FFFFFF"
        >
          <path d="M0 0h24v24H0z" fill="none" />
          <path
            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
          />
        </svg>
        <div class="currency-selector" id="currencySelector">
          <div class="selected-currency">
            <img
              src="https://zeed.com.co/wp-content/uploads/2024/09/bandera-colombia.png"
              id="selectedFlag"
              alt="Bandera COP"
              height="26"
              width="39"
            />
            <span id="selectedCurrency">COP</span>
            <svg
              id="arrowIcon"
              class="arrow"
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <polyline points="6 9 12 15 18 9" />
            </svg>
          </div>
          <div class="currency-options">
            <div
              onclick="selectCurrency('COP', 'https://zeed.com.co/wp-content/uploads/2024/09/bandera-colombia.png')"
            >
              <img
                src="https://zeed.com.co/wp-content/uploads/2024/09/bandera-colombia.png"
                alt="Bandera COP"
                height="26"
                width="39"
              />
              COP
            </div>
            <div
              onclick="selectCurrency('USD', 'https://zeed.com.co/wp-content/uploads/2024/09/bandera-estadosUnidos.webp')"
            >
              <img
                src="https://zeed.com.co/wp-content/uploads/2024/09/bandera-estadosUnidos.webp"
                alt="Bandera USD"
                height="26"
                width="39"
              />
              USD
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner">
      <img
        class="banner-img"
        src="https://zeed.com.co/wp-content/uploads/2024/09/young-woman-praying-and-meditating-alone-at-sunset.png"
      />
      <img class="rectangle30-1" src="https://zeed.com.co/wp-content/uploads/2024/09/Rectangle-2-30.png">
      <img class="rectangle30-2" src="https://zeed.com.co/wp-content/uploads/2024/09/Rectangle30.png">
      <div class="page-title">
        <div class="tipo1">Mapa</div>
        <div class="tipo2">DE PERSONALIDAD</div>
        <div class="tipo3">Conócete y descubre todo tu potencial</div>
      </div>
      <div class="subbanner">
        <div>
          <div class="beneficios">BENEFICIOS</div>
          <div class="beneficios-container">
            <div class="beneficios-card">
              <div>
                Descubre <span>tu propósito, tus talentos</span> y esencia interna
              </div>
            </div>
            <div class="beneficios-card">
              <div>
                Revela cómo te expresas al mundo e impactas a quienes te rodean
              </div>
            </div>
            <div class="beneficios-card">
              <div>
                Describe desafíos a 
                <span>enfrentar y enfoque hacia la vida</span>
              </div>
            </div>
          </div>
        </div>
        
        <button class="get-product">Obtén tu Mapa Ahora</button>
      </div>
    </div>
    <div class="seccion-obtienes">
      <img src="https://zeed.com.co/wp-content/uploads/2024/09/Image-dark-leaves-in-the-forest-foliage-background-in-nature.png">
      <div class="podras-obtener">Con este mapa podrás obtener</div>
      <div class="puntos-container">
        <div class="puntos-card">
          <div class="number">1</div>
          <div class="text">Tu esencia interna y emocional, tu propósito,  talentos, y enfoque hacia la vida</div>
          <img src="https://zeed.com.co/wp-content/uploads/2024/09/foto-medita.png">
        </div>
        <div class="puntos-card">
          <div class="number">2</div>
          <div class="text">Lecciones principales y desafíos que enfrentarás a lo largo de tu vida</div>
          <img src="https://zeed.com.co/wp-content/uploads/2024/09/foto-medita.png" style="margin-top:23px;">
        </div>
        <div class="puntos-card">
          <div class="number">3</div>
          <div class="text">Las metas que deberías esforzarte por alcanzar, y cómo impactas a quienes te rodean</div>
          <img src="https://zeed.com.co/wp-content/uploads/2024/09/foto-medita.png">
        </div>
      </div>
      <div class="pago">
        <div class="text">Pago único</div>
        <div class="valor" id="valor">COP $17.000</div>
        <button class="get-product">Obtén tu Mapa Ahora</button>
      </div>
    </div>
    <div class="seccion-que-encontraras">
      <div class="container">
        <img class="wide" src="https://zeed.com.co/wp-content/uploads/2024/09/Present-moment-mindful-meditation.png" alt="">
        <img class="rectangle59-1" src="https://zeed.com.co/wp-content/uploads/2024/09/Rectangle59-1.png">
        <div class="title">¿Qué encontrarás?</div>
        <div class="subtitle">Una visión completa de tu ser interno, propósito, talentos, desafíos a enfrentar y enfoque hacia la vida</div>
        <button>
          <svg width="16" height="21" viewBox="0 0 21 15" fill="black" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0L16 10.5L0 21V0Z" fill="black"/>
          </svg>    
          <p>Ver video</p>
        </button>
      </div>
    </div>
    <div class="tatiana">
      <img src="https://zeed.com.co/wp-content/uploads/2024/09/ZEED-TATIANA-SORIANO.png" alt="Zeed Tatiana Ruiz Soriano">
      <div class="text1">¿Quién diseñó esta guía?</div>
      <div class="text2">Tatiana Ruiz Soriano</div>
      <div class="text3">Psicoterapeuta con más de 5 mil pacientes a nivel mundial</div>
      <button>
        <svg width="40px" height="40px" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" fill="#163C37" />
        <rect x="18" y="10" width="4" height="20" fill="#DEFA5C" />
        <rect x="10" y="18" width="20" height="4" fill="#DEFA5C" />
        </svg>
      </button>
    </div>
    <div class="seccion-testimonios">
      <img class="arabesco" src="https://zeed.com.co/wp-content/uploads/2024/09/D7.png" style="top:-262px;left:-71px;">
      <img class="arabesco" src="https://zeed.com.co/wp-content/uploads/2024/09/D7.png" style="top:417px;right:-59px;">
      <div class="elipse15"><div class="elipse19"></div></div>
      <div class="elipse16"></div>
      <div class="title">
        <div class="text1">Testimonios</div>
        <div class="text2">
          Hemos transformado la vida de <span>cientos de personas</span> ayudándoles a su crecimiento personal
        </div>
      </div>
      <div class="testimonios">
        <div class="testimonios-card rotate-left">
          <div class="text">“Este mapa describió gran parte de como soy, increíble”</div>
          <div class="person">
            <span>
              <svg width="54px" height="54px" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
                <circle cx="27" cy="27" r="27" fill="#21544E" />
                <circle cx="19" cy="20" r="3" fill="#21544E" />
                <circle cx="35" cy="20" r="3" fill="#21544E" />
                <path d="M17 32 C22 40, 32 40, 37 32" stroke="#21544E" stroke-width="3" fill="none" />
              </svg>
              Angela R.
            </span>
          </div>
        </div>
        <div class="testimonios-card">
          <div class="text">“Confirma cosas que pensaba de mí y que no estaba seguro”</div>
          <div class="person">
            <span>
              <svg width="54px" height="54px" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
                <circle cx="27" cy="27" r="27" fill="#21544E" />
                <circle cx="19" cy="20" r="3" fill="#21544E" />
                <circle cx="35" cy="20" r="3" fill="#21544E" />
                <path d="M17 32 C22 40, 32 40, 37 32" stroke="#21544E" stroke-width="3" fill="none" />
              </svg>
              Juan Manuel T.
            </span>
          </div>
        </div>
        <div class="testimonios-card rotate-right">
          <div class="text">“Es muy rápido y muy económico para toda la información que trae”</div>
          <div class="person">
            <span>
              <svg width="54px" height="54px" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
                <circle cx="27" cy="27" r="27" fill="#21544E" />
                <circle cx="19" cy="20" r="3" fill="#21544E" />
                <circle cx="35" cy="20" r="3" fill="#21544E" />
                <path d="M17 32 C22 40, 32 40, 37 32" stroke="#21544E" stroke-width="3" fill="none" />
              </svg>
              María Isabel C.
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="seccion-recomendaciones">
      <img class="arabesco" src="https://zeed.com.co/wp-content/uploads/2024/09/D7.png" style="top:250px;left:-76px;">
      <div class="titulo">
        <div class="text1">Recomendaciones</div>
        <div class="text2">Sabemos que tu crecimiento personal es importante para ti, por eso te recomendamos nuestras otras guías:</div>
      </div>
      <div class="flex-productos">
          <div class=product-card>
            <img class="product-img" src="https://zeed.com.co/wp-content/uploads/2024/09/ZEED-AUTOESTIMA.jpg" alt="">
            <div class="rectangle57"></div>
            <div class="product-text">
              <div class="product-title-narrow">Guía de</div>
              <div class="product-title-wide">Autoestima & Abundancia</div>
              <div class="product-subtitle">Ofrece una visión completa de tu ser interno, propósito, talentos, desafíos a enfrentar y enfoque hacia la vida.</div>
              <a href="#" class="product-see-more"><img src="https://zeed.com.co/wp-content/uploads/2024/09/ver-mas.png"></a>
            </div>
          </div>
          <div class=product-card>
            <img class="product-img" src="https://zeed.com.co/wp-content/uploads/2024/09/manos.png" alt="">
            <div class="rectangle57"></div>
            <div class="product-text">
              <div class="product-title-narrow">Guía de</div>
              <div class="product-title-wide">SANACIÓN DE HERIDAS EMOCIONALES</div>
              <div class="product-subtitle">Descubre cuál es tu herida o trauma, de dónde proviene y cómo la puedes sanar.</div>
              <a href="#" class="product-see-more"><img src="https://zeed.com.co/wp-content/uploads/2024/09/ver-mas.png"></a>
            </div>
          </div>
          <div class=product-card>
            <img class="product-img" src="https://zeed.com.co/wp-content/uploads/2024/09/ZEED-ZEEDY.jpg" alt="">
            <div class="rectangle57"></div>
            <div class="product-text">
              <div class="product-title-wide">ZEEDY GPT</div>
              <div class="product-title-narrow">Coach de crecimiento personal a un clic</div>
              <div class="product-subtitle">El chat GPT del crecimiento personal</div>
              <a href="#" class="product-see-more"><img src="https://zeed.com.co/wp-content/uploads/2024/09/ver-mas.png"></a>
            </div>
          </div>
      </div>
    </div>
    <div class="seccion-preguntas">
      <div class="titulo">Preguntas frecuentes</div>
      <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <span>¿Qué incluye el pago?</span>
                <span class="arrow">▼</span>
            </div>
            <div class="accordion-content">
                <p>Es un único pago por $17 mil pesos ($5 dólares) que incluye un mapa de personalidad el cual podrás acceder con tu usuario en nuestra página, en el cual podrás encontrar una visión completa de tu ser interno, propósito, talentos, desafíos a enfrentar y enfoque hacia la vida. Cómo te expresas al mundo e impactas a quienes te rodean. Prepárate para recibir una guía hacia el autoconocimiento y el crecimiento personal.</p>
            </div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <span>¿Qué técnica utilizan para lograr estos resultados?</span>
                <span class="arrow">▼</span>
            </div>
            <div class="accordion-content">
                <p>Están basados en una variedad de disciplinas, incluyendo la numerología, la astrología y otras ciencias que son interpretadas por expertos, que te permitirán un mejor autoconocimiento. Nuestra curadora y experta que construye todos los reportes es la dra Tatiana Ruiz, Psicoterapeuta con más de 5 mil pacientes a nivel mundial, si quieres conocer más de ella puedes entrar a <a href="https://yosoytatianaruiz.com">https://yosoytatianaruiz.com</a></p>
            </div>
        </div>
        <div class="accordion-item active">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <span>¿Es un curso?</span>
                <span class="arrow">▼</span>
            </div>
            <div class="accordion-content">
                <p>No, no somos un curso. Brindamos herramientas que puedes comprar a unos pocos clics y por el precio de 2 cafés y que pagas una sola vez. Tus resultados los puedes ver con tu usuario en nuestra página.</p>
            </div>
        </div>
        <div class="accordion-item">
            <div class="accordion-header" onclick="toggleAccordion(this)">
                <span>¿Esto adivina el futuro y lo que pasará con mi vida?</span>
                <span class="arrow">▼</span>
            </div>
            <div class="accordion-content">
                <p>No somos una “bola de cristal” que predice el futuro, tan solo damos guías para que navegues tu autoconocimiento y crecimiento personal con mayor facilidad. No somos reemplazo de ayuda psicológica profesional, somos apenas una semilla que te guía en este camino de conocimiento.</p>
            </div>
        </div>
      </div>
    </div>
  <script>
    const currencySelector = document.getElementById("currencySelector");
    const selectedCurrency = document.getElementById("selectedCurrency");
    const selectedFlag = document.getElementById("selectedFlag");

    // Toggle the display of the currency options
    currencySelector.addEventListener("click", function (event) {
      this.classList.toggle("active");
      event.stopPropagation(); // Detiene la propagación del evento para que no se cierre inmediatamente
    });

    // Function to select a currency and update the display
    function selectCurrency(currency, flagUrl) {
      selectedCurrency.textContent = currency;
      selectedFlag.src = flagUrl;
      currencySelector.classList.remove("active");
    }

    // Prevent closing when clicking inside the currency selector
    currencySelector
      .querySelector(".currency-options")
      .addEventListener("click", function (event) {
        event.stopPropagation(); // Evita que al hacer clic en una opción, se vuelva a abrir
      });

    // Close the currency options when clicking outside
    document.addEventListener("click", function (event) {
      if (!currencySelector.contains(event.target)) {
        currencySelector.classList.remove("active");
      }
    });
    function toggleAccordion(element) {
    const content = element.nextElementSibling;
    const isActive = content.classList.contains('active');

    // Cierra todos los elementos excepto el clicado
    document.querySelectorAll('.accordion-content').forEach((cont) => {
        if (cont !== content) {
            cont.classList.remove('active');
            cont.previousElementSibling.classList.remove('active');
            cont.previousElementSibling.querySelector('.arrow').textContent = '▼';
        }
    });

    // Alternar el estado del elemento clicado (fuera del bucle)
    if (isActive) {
        content.classList.remove('active');
        element.classList.remove('active');
        // element.querySelector('.arrow').textContent = '▼';
    } else {
        content.classList.add('active');
        element.classList.add('active');
        // element.querySelector('.arrow').textContent = '▼';
    }
}



  </script>    

Necesitas ayuda? Chatea con nosotros