@import url(global.css);



/* --------------------------------------------------- */
/* ---------- seccion SLIDER organizaciones ---------- */
/* --------------------------------------------------- */

.fp_section {
    /* background: rgb(245, 245, 245); */
    background: var(--back-gray-plunge);
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding-2);
  }
  
  .fp_container {
    margin: 0 auto;
    padding: 0 18px;
  }
  
  .fp_title {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 30px;
    line-height: var(--line-height-title1);
  }
  
  .fp_slider_wrapper {
    overflow: hidden;
  }
  
  .fp_slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 12px;
    scrollbar-width: none;
  }
  
  .fp_slider::-webkit-scrollbar {
    height: 0;
  }
  
  .fp_card {
    flex: 0 0 88%;
    scroll-snap-align: start;
    height: fit-content;
    overflow: hidden;
  }
  
  .fp_card_img {
    width: 100%;
    height: 46vh;
    display: block;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .fp_card_body {
    padding: 16px 0px;
    width: 96%;
    margin: 0 auto;
  }
  
  .fp_chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-gradient-gradient-blue);
    color: white;
    font-size: var(--font-size-xs);
    font-weight:var(--font-weight-semibold);
    margin-bottom: 8px;
  }

  .fp_name {
    font-size: var(--font-size-lg);
    font-weight:var(--font-weight-bold);
    margin-bottom: 6px;
  }
  
  .fp_text {
    font-size: var(--font-size-md);
    font-weight:var(--font-weight-regular);
    color: #4b5563;
    margin-bottom: 10px;
    line-height: var(--line-height-text4);
  }
  
  .fp_list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
  }
  
  .fp_list li {
    font-size: var(--font-size-sm);
    font-weight:var(--font-weight-regular);
    color: #374151;
    margin-bottom: 4px;
  }
  
  @media (min-width: 768px) {
    .fp_card {
      flex: 0 0 55%;
      max-width: 480px;
    }
  }
  
  .fp_nav_row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .fp_nav_btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .fp_progress {
    flex: 1;
    position: relative;
    height: 4px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
  }
  
  .fp_progress_bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;                  /* JS la desplaza */
    width: 40%;               /* JS ajusta ancho real */
    border-radius: inherit;
    background: var(--apple-gradient);
    transition: left 0.2s ease-out, width 0.2s ease-out;
  }














/* --------------------------------------------------- */
/* ---------- colores de cada terapia ---------------- */
/* --------------------------------------------------- */

  .chamber{
    background: linear-gradient(white, white) padding-box, var(  --color-gradient-chamber) border-box;
}

  .chamber2{
    background: var(--color-gradient-chamber);
  }

  .crio{
    background: linear-gradient(white, white) padding-box, var(--color-gradient-crio) border-box;
}
  
  .crio2{
    background: var(--color-gradient-crio);
  }

  .redlight{
    background: linear-gradient(white, white) padding-box, var(--color-gradient-redlight) border-box;
  }

  .redlight2{
    background: var(--color-gradient-redlight);
  }

  .sauna{
    background: linear-gradient(white, white) padding-box, var(--color-gradient-sauna) border-box;
  }

  .sauna2{
    background: var(--color-gradient-sauna);
  }

  .preso{
    background: linear-gradient(white, white) padding-box, var(--color-gradient-preso) border-box;
  }

  .preso2{
    background: var(--color-gradient-preso);
  }

  .mat{
    background: linear-gradient(white, white) padding-box, var(--color-gradient-mat) border-box;
  }

  .mat2{
    background: var(--color-gradient-mat);
  }









  

  
/* ------------------------------------- */
/* ---------- BENEFICIOS GRID ---------- */
/* ------------------------------------- */

/* .benefits_plunge_style {
    background-color: rgb(245, 245, 245);
    padding: 50px 20px 80px 20px;
    text-align: center;
    color: black;
}

.bp_title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 50px;
    line-height: 1.3;
}

.bp_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px; 
}

.bp_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.bp_item p {
    font-size: 20px;
    font-weight: 700;
}

.bp_icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .bp_list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 60px 30px;
    }
} */


.benefits_plunge_style {
  /* background-color: rgb(245, 245, 245); */
  background: var(--back-gray-plunge);
  text-align: center;
  color: #000;
}

.benefits_container{
  display: flex;
  flex-direction: column;
  padding-bottom: var(--section-padding-2);
  padding-top: var(--section-padding-xs);
}

.bp_title {
  font-size: var(--font-size-xxl);
  font-weight:var(--font-weight-bold);
  line-height: var(--line-height-title1);
  margin-bottom: 50px;
  line-height: 1.3;
}

.bp_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
  width: 90%;
  margin: 0 auto;
}

.bp_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.bp_item p {
  font-size: var(--font-size-lg);
  font-weight:var(--font-weight-bold);
  line-height: var(--line-height-title1);
}

/* ---------------- ICONO CON MÁSCARA ---------------- */

.bp_icon_mask {
  width: 64px;
  height: 64px;
  display: inline-block;

  /* mejora visual */
  /* border-radius: 2px; */
}

/* SVGs como máscara (data-URI) */
/* 1) inmune */
.bp_immune{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L5 6v6c0 4.6 3.1 7.7 7 9 3.9-1.3 7-4.4 7-9V6l-7-3Z'/%3E%3Cpath d='M12 7v6M9 10h6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L5 6v6c0 4.6 3.1 7.7 7 9 3.9-1.3 7-4.4 7-9V6l-7-3Z'/%3E%3Cpath d='M12 7v6M9 10h6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* 2) salud mental */
.bp_mental{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-7-10a4.2 4.2 0 0 1 7-2.2A4.2 4.2 0 0 1 19 11c0 5.4-7 10-7 10Z' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-7-10a4.2 4.2 0 0 1 7-2.2A4.2 4.2 0 0 1 19 11c0 5.4-7 10-7 10Z' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 3) resiliencia */
.bp_resilience{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15c3-6.5 13-6.5 16 0'/%3E%3Cpath d='M12 19V6'/%3E%3Cpath d='M9.5 8.5 12 6l2.5 2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15c3-6.5 13-6.5 16 0'/%3E%3Cpath d='M12 19V6'/%3E%3Cpath d='M9.5 8.5 12 6l2.5 2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* 4) músculo */
.bp_muscle{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9c1.6-2 4-2.2 5.6-.6l2 2c1.7 1.7 1.7 4.5 0 6.2l-1.4 1.4c-1.6 1.6-4.1 1.6-5.7 0l-2.1-2.1c-1.7-1.7-1.7-4.5 0-6.2L7 9Z' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9c1.6-2 4-2.2 5.6-.6l2 2c1.7 1.7 1.7 4.5 0 6.2l-1.4 1.4c-1.6 1.6-4.1 1.6-5.7 0l-2.1-2.1c-1.7-1.7-1.7-4.5 0-6.2L7 9Z' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Desktop grid */
@media (min-width: 768px) {
  .bp_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px 30px;
    align-items: start;
  }
}












/* ----------------------------------- */
/* ---------- CIRCUITOS CTA ---------- */
/* ----------------------------------- */

.section_circuits {
    padding: 30px 20px 50px;
}

.circuits_content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 auto;
    background: #111827;
    color: #ffffff;
    border-radius: 26px;
    padding: 24px 20px;
    text-align: left;
}

.circuits_content h2 {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-black);
}

.circuits_content p {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    margin-bottom: 14px;
    color: #e5e7eb;
}

.btn_outline_gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    border: 2px solid transparent;
    background-image:
        linear-gradient(#111827, #111827),
        var(--apple-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: #ffffff;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}