/*
Theme Name: PIR 2025
Author: Martin R. (+51997938043)
Version: 1.0
*/

:root{
    --dark: #232323;
    --light: white;
    --tealblue: 81, 170, 185;
    --skyblue: 82, 145, 190;
    --sky: 115, 191, 234;
    --green: 176, 199, 84;
    --blue: 31, 70, 123;
    --grey: #E8E8E8;
    --spacer-sm: 8px;
    --spacer-md: 16px;
    --spacer-lg: 32px;
    --spacer-xl: 52px;
    --pageWidth: 1160px;
  }
  p{
    line-height: 1.4;
    text-wrap: pretty;
  }
  
  h2, h3, h4, h5{
    line-height: 1.2;
  }

 
  .color-01{
    color: rgb(var(--blue));
  }
  .color-02{
    color: rgb(var(--skyblue));
  }
  .color-03{
    color: rgb(var(--tealblue));
  }
  .color-04{
    color: rgb(var(--sky));
  }
  .color-05{
    color: rgb(var(--green));
  }

  .color-06{
    color: var(--light);
  }

  .bgc-01{
    background-color: rgb(var(--blue)) !important;
  }
  .bgc-02{
    background-color: rgb(var(--skyblue)) !important;
  }
  .bgc-03{
    background-color: rgb(var(--tealblue)) !important;
  }
  .bgc-04{
    background-color: rgb(var(--sky)) !important;
  }
  .bgc-05{
    background-color: rgb(var(--green)) !important;
  }
  .bgc-06{
    background-color: var(--grey) !important;
  }

  .letters-list{
    display: grid;
    gap: 5px;
    margin: 30px 0;
    > li{
      display: flex;
      align-items: center;
      gap: 50px;
      background-color: var(--grey);
      padding: 0 0 0 40px;
      border-radius: 0 10px 10px 0;
      @media (width < 768px){
        padding: 15px;
        border-radius: 10px;
        gap: 30px;
      }
      img:first-child{
        flex-shrink: 0;
        @media (width < 768px){
          width: 150px;
        }
        @media (width < 540px){
          width: 100px;
        }
      }
      img:last-child{
        flex-shrink: 0;
        margin-left: auto;
        border-radius: 10px;
        @media (width < 768px){
          display: none;
        }
      }
    }
  }

  .hidden{
    display: none;
  }
  *{
    box-sizing: border-box;
    font-family: inherit;
  }

  ul{
    list-style: none;
    padding: 0;
    margin: 0;
  }

  img{
    max-width: 100%;
  }

  html{
    scroll-behavior: smooth;
  }
  
  body{
    margin: 0;
    font-family: Roboto, helvetica, sans-serif;
    line-height: 1.6;
    
    color: var(--dark);
  }

  section{
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .text-center{
    text-align: center;
  }


  .fade-in {
    @supports (animation-timeline:view()) {
        opacity: 0;
        transform: scale(.25);
        animation: appear 1s ease forwards;
        animation-timeline: view(0% -110%);
        animation-range: contain;
        animation-fill-mode:forwards
        
        transform-origin: bottom right;
        
    }
  }

  @keyframes appear {
    100% {
        opacity: 1;
        transform: scale(1)
    }
  }

  .card{
    background-color: var(--grey);
    padding: var(--spacer-xl);
    gap: var(--spacer-lg);
    border-radius: var(--spacer-md);

    @media (width < 768px){
        padding: var(--spacer-md);
    }
    
    &.card--two-columns{
      /*display: grid;
      grid-template-columns: repeat(2, 1fr);*/
      display: flex;
      @media (width < 768px){
        flex-direction: column;
      }
      > *:first-child {
        width: 65%;
        @media (width < 768px){
          width: auto;
        }
      }
      > *:last-child {
        width: 35%;
        @media (width < 768px){
          width: auto;
        }
      }
    }
    &.card--align-center{
      align-items: center;  
    }
    .card__image{
      &:not([src*="logo"]){
        border-radius: var(--spacer-md);
      }
      
      &.card__image--full{
        width: 100%;
      }
      &.card__image--centered{
        display: block;
        margin: 0 auto 40px;
      }
    }
    .swiper-pagination{
      bottom: -5px !important;
    }
    .swiper-pagination-bullet{
      width: 11px;
      height: 11px;
      background-color: #B5B5B5;
      opacity: 1;
      &.swiper-pagination-bullet-active{
        background-color: rgb(var(--blue));
      }
    }
  }

  .card-mini{
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 30px;
    background-color: var(--grey);
    img{
      border-radius: 20px;
      width: calc(100% - 30px);
      margin: 15px 15px 0;
      object-fit: cover;
      display: block;
    }
    .card-mini__body{
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: space-between;
      padding: 15px 20px;
      background-color: var(--grey);
      border-radius: 0 0 30px 30px;
      &.card-mini__body--center{
        text-align: center;
        align-items: center;
      }
    }
  }

  .tabs-targets{
    margin-bottom: var(--spacer-lg);
  }

  .tabs{
    display: flex;
    gap: 22.5px;
    margin: 32px 0;
    @media (width < 768px){
      gap: 10px;
      overflow: auto;
    }
    a{
      display: inline-flex;
      white-space: nowrap;
      align-items: center;
      padding: 5px 30px;
      border-radius: 40px;
      border: solid 2px rgb(var(--tealblue));
      color: rgb(var(--tealblue));
      transition: background 300ms, color 300ms;
      @media (width < 768px){
        padding: 5px 10px;
        border-radius: 16px;
        line-height: 1;
        text-align: center;
      }
      &.active, &:hover{
        background-color: rgb(var(--tealblue));
        color: var(--light);
      }
    }
  }

  .dotted-list{
    list-style: disc;
    li::marker{
      color: rgb(var(--tealblue));
    }
  }

  .numbered-list{
    list-style: none;
    display: grid;
    gap: 20px;
    padding: 0;
    margin: 30px 0;
    > li{
      counter-increment: my-counter;
      padding-left: 64px;
      position: relative;
      letter-spacing: 0.15%;
      background-color: var(--grey);
      border-radius: 50px;
      display: flex;
      gap: 30px;
      align-items: center;
      padding: 0 0 0 10px;
      line-height: 1.25;

      @media (width < 768px){
        flex-direction: column;
        align-items: start;
        gap: 5px;
        padding: 10px 10px 10px 70px;
        border-radius: 24px;
      }
      &::before{
          /*position: absolute;
          left: 16px;
          top: 0;*/
          content: counter(my-counter);
          width: 54px;
          height: 54px;
          font-size: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background-color: rgb(var(--tealblue));
          color: var(--light);
          flex-shrink: 0;
          @media (width < 768px){
            width: 36px;
            height: 36px;
            font-size: 20px;
            position: absolute;
            left: 10px;
            top: 50%;
            translate: 0 -50%;
          }
      }
      h3{
        width: 30%;
        color: rgb(var(--blue));
        @media (width < 768px){
          width: auto;
          margin-bottom: 5px;
        }
      }
      ul{
        width: 40%;
        @media (width < 768px){
          width: auto;
          list-style-position: inside;
        }
      }
      img{
        border-radius: 10px 0 0 10px;
        @media (width < 768px){
          display: none;
        }
      }
    }
    &.numbered-list--columns{
      > li {
        padding: 5px 0 5px 10px;
        @media (width < 768px){
          padding: 10px 15px 10px 60px;
        }
      }
    }
    &.numbered-list--tiny{
      gap: 9px;
      > li {
        gap: 8px;
        padding: 5px 10px;
        font-weight: 500;
        color: var(--light);
        @media (width < 768px){
            padding: 14px 15px 14px 50px;
        }
        &::before{
          background-color: var(--light);
          color: var(--dark);
          font-size: 20px;
          width: 34px;
          height: 34px;
        }
      }
    }
  }

  .publicaciones-list{
    display: grid;
    gap: 43px;
    padding: 43px 0;
    .publicaciones-list__media{
      display: inline-block;
      position: relative;
      &::before{
        content: "";
        background-color: #DCDCDC;
        position: absolute;
        inset: 0;
        scale: 0.9;
        rotate: 90deg;
        width: 100%;
      }
      img{
        position: relative;
        box-shadow: 0 2px 10px rgb(0 0 0 / 91%);
      }
    }
  }


  .team-list{
    display: grid;
    padding: 50px 150px;
    margin: 0;
    list-style: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    @media (width < 768px){
      padding: 15px 0;
      grid-template-columns: 1fr;
    }
    li{
      background-color: #E0E0E0;
      border-radius: 15px;
      padding: 10px;
    }
    img{
      display: block;
    }
    .team-list__image{
      height: 180px;
      display: block;
      margin: 0 auto;
    }
    .team-list__body{
      display: flex;
      justify-content: space-between;
      align-items: end;
    }
    .team-list__content{
      background-color: #fff;
      border-radius: 10px;
      padding: 12px 17px;
      height: 90px;
      h3{
        margin: 0;
        font-size: 13.92px;
      }
      p{
        margin: 0;
        font-size: 13.92px;
      }
    }
    .team-list__links{
      display: flex;
      gap: 5px;
      align-items: center;
      position: relative;
      top: -5px;
      a{
        display: flex;
        align-items: center;
        width: 14px;
        height: 14px;
      }
      img{
        object-fit: contain;
        object-position: center bottom;
        height: 100%;
      }
    }
  }

  .support-list{
    list-style: none;
    padding: 0 120px;
    margin: 60px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    @media (width < 768px){
      grid-template-columns: 1fr;
      padding: 0;
      gap: 15px;
      margin: 30px 0;
    }
    li{
      border: solid 2px #51AAB9;
      border-radius: 15px;
      padding: 10px 20px;
    }

    h3, p{
      margin: 0;
    }
    
    .support-list__body{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .hands{
    padding: 0;
    margin: 60px 0;
    @media (width < 768px){
      padding: 0 15px;
    }
    .container{
      color: var(--light);
      background-color: rgb(var(--blue));
      background-image: url(images/icono-manos.svg);
      background-position: center right;
      background-size: auto 104%;
      background-repeat: no-repeat;
      padding: 60px 120px;
      border-radius: 40px;
      @media (width < 1024px){
        background-image: none;
      }
      @media (width < 768px){
        padding: 10px 20px 30px;
      }
    }
    
  }

  .list-stylish{
    list-style: disc;
    list-style-position: inside;
    display: grid;
    padding: 0;
    margin: 20px 0;
  }
  
  a{
    color: inherit;
    text-decoration: none;
  }

  .h1{
    font-size: 62px;
    line-height: 1.1;
    @media (width < 768px){
      font-size: 40px;
    }
  }


  .h2{
    font-size: 30px;
    @media (width < 768px){
      font-size: 24px;
    }
    &.h2--lg{
      font-size: 40px;
    }
  }

  .h3{
    font-size: 20px;
    @media (width < 768px){
      font-size: 18px;
    }
  }

  .h4{
    font-size: 16px;
  }

  .h5{
    font-size: 14px;
  }

  .h6{
    font-size: 13px;
  }
  
  .cta{
    display: inline-block;
    text-align: center;
    border: none;
    color: var(--light);
    background-color: var(--dark);
    padding: 10px 26px;
    border-radius: 50px;
    transition: scale 300ms;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.225);
    line-height: 1.2;
    cursor: pointer;
    &.cta--inverted{
      filter: invert(2)
    }
    &:hover{
      scale: 1.10;
    }
  }

  .consejo-members-list{
    padding: 60px 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    @media ( width < 1024px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media ( width < 768px) {
      grid-template-columns: 1fr;
    }
    .consejo-members-list__media{
      /*filter: drop-shadow(-10px 5px 0 rgba(114, 191, 235, 0.2));*/
      filter: drop-shadow(-10px 5px 0 rgba(var(--sky), 0.4));
      img {
        -webkit-mask-image: url('images/polygon-mask.svg');
        mask-image: url('images/polygon-mask.svg');
        mask-size: cover;
        width: 180px;
        height: 200px;
        background-color: rgb(var(--sky));
        object-fit: scale-down;
        object-position: right bottom;
      }
    }

    li{
      display: flex;
      flex-direction: column;
    }

    .consejo-members-list__body{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 0;
      gap: 5px;
      flex-grow: 1;
    }

    h3{
      font-weight: 600;
    }

    h3, p, span{
      margin: 0;
      font-size: 13px;
    }

    p{
      font-weight: 600;
    }
    span{
      font-weight: 300;
    }

    a{
      margin-top: auto;
      display: inline-block;
    }
    
  }

  .video-wrapper {
    padding-bottom:56.25%;
    position:relative;
    height:0;
    iframe {
      border:none;
      border-radius:16px;
      overflow:hidden;
      position:absolute;
      top:0;
      left:0;
      display:block;
      width: 100%;
      height: 100%;
    }
  }
  

  .full{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 30px;
    /* margin-bottom: 60px; */
    @media ( width < 768px) {
      grid-template-columns: 1fr;
    }
    .full__col{
      &:first-child{
        display: flex;
        justify-content: end;
        @media ( width < 768px) {
          justify-content: start;
        }
      }
      &:last-child{
        background-color: var(--grey);
        border-radius: 20px 0 0 20px;
        .full__content{
          padding: 30px;
        }
      }
    }
    .full__content{
      width: calc(var(--pageWidth) / 2);
      max-width: 100%;
      padding: 0 15px;
      @media ( width < 768px) {
        width: auto;
      }
      
    }
    & + .full{
      margin-top: var(--spacer-xl);
    }
  }

  .faq-list {
    margin-top: var(--spacer-xl);

    > li:not(:first-child){
      margin-top: 20px;
    }

    .faq-list__title {
      padding:26px 0 26px 0;
      margin:0;
      position:relative;
      cursor:pointer;
      background-color: var(--grey);
      &::after {
        content:url(/wp-content/themes/xfitnex/images/icon-chevron-down.svg);
        position:absolute;
        right:26px;
        transition:rotate 300ms
      }
      &.active {
        &::after {
          rotate:180deg
        }
        strong{
          max-height: 50px;
        }
      }
      .container{
        display: flex;
        flex-direction: column;
        position: relative;
      }
      strong{
        font-size: 16px;
        display: inline-block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 300ms;
      }
      span{
        display: block;
        position: absolute;
        right: 10px;
        top: 50%;
        translate: 0 -50%;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background-color: rgb(var(--green));
        margin-left: auto;
        &::before, &::after{
          position: absolute;
          margin: auto;
          background-color: var(--light);
          content: "";
          display: block;
          width: 30px;
          height: 6px;
        }
        &::before{
          translate: -50% -50%;
          top: 50%;
          left: 50%;
        }
        &::after{
          translate: -50% -50%;
          top: 50%;
          left: 50%;
          rotate: 90deg;  
        }
      }
    }
    h3 + .container {
      max-height:0;
      overflow:hidden;
      transition:max-height 300ms,padding 300ms;
      &.active {
        max-height: 4000px;
        padding-top: 10px;
      }
    }
  }

  .benefits-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    margin: 30px 0;

    @media ( width < 768px) {
      grid-template-columns: 1fr;
    }
    
    li{
      position: relative;
      padding-left: 65px;
      &:before{
        position: absolute;
        content: url(images/icono-check.svg);
        left: 0;
      }
    }
  }
  
  .container{
    width: var(--pageWidth);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;

    
  }

  
.testimonials{
  background-color: var(--grey);
  margin: 50px 0;

  .testimonial{
    display: grid;
    grid-template-columns: 3fr 1fr;
    margin: 0;
    padding: 0 15px;
    overflow: hidden;
    @media ( width < 768px) {
      grid-template-columns: 1fr;
    }
    .contenedor-imagen{
      width: 50%;
      margin: 0 auto;
      transform-origin: right top;
      img{
        background-color: #6B6B6B;
      }
    }
    strong{
      padding-left: 60px;
      @media ( width < 768px) {
        padding-left: 0;
      }
    }
    p{
      padding-left: 60px;
      margin-bottom: 68px;
      @media ( width < 768px) {
        padding-left: 0;
        margin-bottom: 30px;
      }
    }
    cite{
      padding-left: 60px;
      font-weight: 700;
      font-style: normal;
      @media ( width < 768px) {
        padding-left: 0;
      }
    }
  }
  .testimonial__body{
    border-left: solid 8px #DFDFDF;
    margin-bottom: var(--spacer-xl);
    @media ( width < 768px) {
      border-left: none;
    }
  }
  .testimonial__media{
    text-align: center;
    @media ( width < 768px) {
      order: -1;
    }
  }

  .swiper-pagination-bullet{
    width: 11px;
    height: 11px;
    background-color: #B5B5B5;
    opacity: 1;
    &.swiper-pagination-bullet-active{
      background-color: rgb(var(--blue));
    }
  }

}
  
  .subscription-form{
    label[for="email"]{
      display: block;
      margin: var(--spacer-sm) 0;
    }

    label[for="aceptacion"]{
      display: inline-block;
      margin-left: var(--spacer-sm);
    }
    input[type="email"]{
      padding: var(--spacer-sm) var(--spacer-md);
      border-radius: 4px;
      border: none;
      width: 250px;
      max-width: 100%;
      margin: var(--spacer-sm) 0;
    }

    input[type="submit"]{
      margin-top: var(--spacer-lg);
    }
  }
  

  .breadcrumbs{
    display: flex;
    align-items: center;
    margin: 60px 0 30px;
    @media (width < 768px){
      margin: 30px 0;
      align-items: start;
      line-height: 1;
    }
    a{
      display: flex;
      align-items: center;
      font-weight: 700;
      color: rgb(var(--blue));
    }
    span{
      display: inline-block;
      background-color: rgb(var(--blue));
      color: var(--light);
      padding: 5px 20px;
      @media (width < 768px){
        padding: 5px 8px;
      }
    }
  }

  .page .header{
    position: sticky;
    top: 0;
  }
  .header{
    position: fixed;
    z-index: 10;
    padding-top: 15px;
    width: 100%;
    @media (width < 768px){
      padding-top: 0;
      
      img{
        width: 100px;
      }
    }
    .header__container{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--light);
      border-radius: 50px;
      padding: 15px 30px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.529);
      @media (width < 768px){
        border-radius: 0;
        padding: 8px 15px;
      }
    }
    .menu-toggle {
      display: block;
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--dark);
      @media ( width > 768px) {
        display: none;
      }
    }
    .menu{
      @media ( width < 768px) {
        position: fixed; /* Para sobreponer el menú */
        top: 0;
        right: 0;
        height: 100vh;
        width: 250px;
        background-color: var(--light);
        box-shadow: -2px 0 5px rgba(0,0,0,0.3);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        padding-top: 60px; /* espacio para el header, si se mantiene fijo */
        z-index: 20;
        flex-direction: column;
        overflow-y: auto;
        &.open {
          transform: translateX(0);
        }
      }
    }
    .menu__list{
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      gap: 30px;

      @media ( width < 768px) {
        flex-direction: column;
        gap: 15px;
      }

      button{
        display: flex;
        background-color: transparent;
        border: none;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        color: rgb(var(--skyblue));

        @media ( width < 768px) {
          width: 100%;
          justify-content: space-between;
        }

        &.open{
          svg{
            scale: 1 -1;
          }
        }
      }
      svg{
        width: 18px;
        height: auto;
      }
      a{
        color: var(--dark);
        text-decoration: none;
        font-weight: 700;
      }
    }

    .menu__submenu{
      padding: 10px 15px;
      list-style: none;
      position: absolute;
      background-color: #ffffffda;
      border-radius: 10px;
      box-shadow: 0 0 5px #00000022;
      display: flex;
      flex-direction: column;
      gap: 5px;
      transition: clip-path 300ms, box-shadow 300ms, opacity 300ms;
      clip-path: polygon(0% 0%, 100% 0%, 100% 1px, 0% 1px);
      box-shadow: 0 0 0 transparent;
      opacity: 0;
      margin-top: 8px;

      @media ( width < 768px) {
        position: static;
        background-color: transparent;
        box-shadow: none;
        clip-path: none !important;
        opacity: 1;
        margin-top: 5px;
        padding-left: 15px;
        display: none;
        border-radius: 0;
      }

      &.visible {
        clip-path: polygon(-5% -5%, 105% -5%, 105% 105%, -5% 105%) !important;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.427);
        opacity: 1;
        @media ( width < 768px) {
          display: flex;
        }
      }
      
    }
  }

  .logos-list{
    
    &:not(.swiper){
      list-style: none;
      padding: 0;
      display: flex;
      gap: 40px;
      flex-wrap: wrap;
      @media ( width < 768px) {
        gap: 0 30px;
      }
      li{
        height: 100px;
        display: flex;
        align-items: center;
      }
      img{
        max-height: 100%;
        /*
        width: 270px;
        height: 100%;
        */
        /*max-width: 200px;
        height: 90px;*/
        object-fit: contain;
        width: 100%;
      }
      .swiper-slide{
        /*height: 70px;*/
      }
    }
    &.logos-list--justified{
      justify-content: center;
      @media ( width < 768px) {
        justify-content: start;
      }
    }

    &.logos-list--baseline{
      align-items: baseline;
    }

    .swiper-slide{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
    }

    img{
      max-width: 100%;
      max-height: 100px;
    }

  }

  .quote{
    text-align: center;
    font-weight: 700;
    margin: 40px 0;
    p{
      &::before,
      &::after{
        margin: 0 10px;
        position: relative;
        top: -3px;
      }
      &::before{
        content: url(images/comilla-left.svg);
      }
      &::after{
        content: url(images/comilla-right.svg);
      }
    }
  }

  .contenedor-imagen {
    svg{
      position: absolute;
      inset: 0;
      &:first-child{
        translate: 7.5px 7.5px;
        z-index: 0;
      }
      &:last-child{
        translate: -7.5px -7.5px;
        z-index: 2;
      }
    }
    img {
      display: block;
      width: 100%;
      z-index: 1;
      height: auto;
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
    }
    &.enmascarado-forma-unica{
      img {
        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 243 268" xmlns="http://www.w3.org/2000/svg"><path d="M242.35 179.72V87.38C242.35 72.66 234.5 59.06 221.75 51.7L141.78 5.52C129.03 -1.84 113.32 -1.84 100.58 5.52L20.6 51.69C7.85 59.05 0 72.66 0 87.38V179.72C0 194.44 7.85 208.04 20.6 215.4L100.57 261.57C113.32 268.93 129.03 268.93 141.77 261.57L221.74 215.4C234.49 208.04 242.34 194.44 242.34 179.72H242.35Z"/></svg>');
        mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 243 268" xmlns="http://www.w3.org/2000/svg"><path d="M242.35 179.72V87.38C242.35 72.66 234.5 59.06 221.75 51.7L141.78 5.52C129.03 -1.84 113.32 -1.84 100.58 5.52L20.6 51.69C7.85 59.05 0 72.66 0 87.38V179.72C0 194.44 7.85 208.04 20.6 215.4L100.57 261.57C113.32 268.93 129.03 268.93 141.77 261.57L221.74 215.4C234.49 208.04 242.34 194.44 242.34 179.72H242.35Z"/></svg>');
        background-color: #F6F7F2;
      }
    }
  }
  
  
  


  .pillow{
    padding: 30px 40px;
    background-color: var(--grey);
    border-radius: 30px;
    line-height: 1.4;
    border-left: solid 10px var(--green);
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 40px;
    margin: 100px 0;
    @media ( width < 768px) {
      display: flex;
      flex-direction: column-reverse;
      gap: 0;
      margin: 100px 0 0;
    }
    > div{
      position: relative;
      @media ( width < 768px) {
        &:first-child{
          margin-top: 0;
        }
      }
    }
    cite{
      font-weight: 700;
      font-style: normal;
    }
    .contenedor-imagen{
      position: absolute;
      /*width: 243px; /* Coincide con el ancho del SVG */
      /*height: 268px; /* Coincide con la altura del SVG */
      scale: 1.1;
      translate: 20% -25%;
      svg{
        max-width: 100%;
        max-height: 100%;
      }
      @media ( width < 768px) {
        position: relative;
        scale: 1;
        translate: none;
        max-width: 50%;
        margin: -30% auto 0;
        svg{
          width: 100%;
          height: 100%;
          transform-origin: center center;
        }
      }
    }
  }
  
  .hero{
    min-height: 100vh;
    background-image: url("images/imagen-banner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: end;
    border-bottom: solid 30px transparent;
    border-image: linear-gradient(to right, rgb(var(--tealblue)),rgb(var(--green))) 1;
    .hero__title{
      display: flex;
      gap: 30px;
      width: 60%;
      @media ( width < 768px) {
        gap: 0;
        flex-direction: column;
        width: auto;
      }
    }
    .hero__container{
      h1{
        color: white;
        span{
          display: block;
          font-weight: 400;
        }
      }
    }
  }
  
  .timeline{
    padding: 30px 0;
    &::before{
      content: url(images/icono-abeja.svg);
      position: absolute;
      display: block;
      width: 60px;
      left: 50%;
      margin-left: -50px;
      z-index: 2;
      @media (width < 768px){
        margin-left: 0;
        left: 5px;
        transform: scaleX(-1);
      }
    }
    .timeline__item{
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* height: 230px; */
      align-items: center;
      @media (width < 768px){
        display: flex;
        flex-direction: column;
      }
      &:first-child{
        &::before{
          clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%, 0 10px);
          border-radius: 30px 30px 0 0;
        }
      }
      &:last-child{
        &::before{
          clip-path: polygon(50% 0, 100% 10px, 100% 100%, 50% 100%, 0 100%, 0 10px);
          border-radius: 0 0 30px 30px;
        }
      }
      &::before{
        content: "";
        position: absolute;
        top: -3px;
        bottom: -3px;
        width: 30px;
        background-color: red;
        left: 50%;
        margin-left: -15px;
        clip-path: polygon(50% 0, 100% 10px, 100% 100%, 50% calc(100% - 10px), 0 100%, 0 10px);
        @media (width < 768px){
          left: 15px;
        }
      }
      > div{
        padding: 40px;
        &:last-child{
          @media (width < 768px){
            display: none;
          }
        }
      }
      img{
        width: 100%;
        height: 100%;
        border: solid 10px rgb(var(--green));
      }
      h3{
        display: inline-block;
        border-bottom: solid 4px;
        width: 80px;
        font-size: 30px;
        margin-bottom: 0;
      }
      &:nth-child(2n+1){
        text-align: right;
        @media (width < 768px){
          text-align: left;
        }
        &::before{
          background-color: rgb(var(--green));
        }
        h3{
          border-bottom-color: rgb(var(--green));
        }
      }
      &:nth-child(2n){
        &::before{
          background-color: rgb(var(--tealblue));
        }
        > div:first-child{
          order: 2;
          @media (width < 768px){
            order: initial;
          }
        }
        h3{
          border-bottom-color: rgb(var(--tealblue));
        }
        img{ border: solid 10px rgb(var(--tealblue));}
      }
    }
  }

  .lineactions{
    padding: 30px 0;
    .lineactions__item{
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      height: 300px;
      @media (width < 768px){
        grid-template-columns: 1fr;
      }
      &::before{
        content: "";
        position: absolute;
        top: -3px;
        bottom: -3px;
        width: 30px;
        background-color: var(--color-shape);
        left: 50%;
        margin-left: -15px;
        scale: 0.8 1;
        /* clip-path: polygon(50% 0, 100% 5%, 100% 100%, 50% 95%, 0 100%, 0 5%); */
        @media (width < 768px){
          left: 60px;
        }
      }
      > div{
        padding: 40px;
        @media (width < 768px){
          padding: 0 15px 0 0;
        }
        &:first-child{
          @media (width < 768px){
            width: auto;
            margin-left: 150px;
            display: grid;
            align-items: center;
          }
        }
      }
      .lineactions__media{
        max-width: 300px;
        position: relative;
        display: flex;
        align-items: center;
        @media (width < 768px){
          position: absolute;
          padding: 0;
          left: 0;
          top: 50%;
          translate: 0 -50%;
        }
        &::before{
          content: "";
          display: block;
          width: 40px;
          height: 10px;
          background-color: var(--color-shape);
          top: 50%;
          position: absolute;
          left: 0;
          transform-origin: center center;
          transform: translateY(-50%) scaleX(1.1);
          @media (width < 768px){
            display: none;
          }
        }
        &::after{
          content: "";
          display: block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #fff;
          border: solid 10px var(--color-shape);
          top: 50%;
          position: absolute;
          left: 0;
          transform-origin: center center;
          transform: translateY(-50%) translateX(-50%) scale(1.1);
          @media (width < 768px){
            display: none;
          }
        }
      }
      .lineactions__text{
        max-width: 300px;
        text-align: center;
        @media (width < 768px){
          text-align: left;
        }
      }
      .lineactions__media__mask{
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--light);
        border: solid 8px var(--color-shape);
        border-radius: 50%;
        @media (width < 768px){
          width: 120px;
          height: 120px;
        }
        img{
          width: 80px;
          @media (width < 768px){
            width: 60px;
          }
        }
      }
      h3{
        display: inline-block;
        width: 80px;
        margin-bottom: 0;
        font-size: 20px;
      }
      p{
        text-wrap: pretty;
      }
      &:first-child{
        &::before{
          border-radius: 50px 50px 0 0;
        }
      }
      &:last-child{
        &::before{
          border-radius: 0 0 50px 50px;
        }
      }
      &:nth-child(2n+1){
        text-align: right;
        
        
        .lineactions__media{
          margin-right: auto;
        }
        .lineactions__text{
          margin-left: auto;
          @media (width < 768px){
            margin-left: 0;
          }
        }
      }
      &:nth-child(2n){
        
        > div:first-child{
          order: 2;
          @media (width < 768px){
            margin-left: 150px;
          }
        }
        h3{
          border-bottom-color: var(--tealblue)
        }

        .lineactions__media{
          margin-left: auto;
          &::before{
            right: 0;
            left: auto;
          }
          &::after{
            right: 0;
            left: auto;
            transform: translateY(-50%) translateX(50%) scale(1.1);
          }
        }
        /* img{ background-color: var(--chami);} */
      }
    }
  }
  
  .footer{
    border-top: solid 30px transparent;
    border-image: linear-gradient(to right, rgb(var(--tealblue)),rgb(var(--green))) 1;
    background-color: #e0e0e0;
    
    .footer__top {
      padding-top: var(--spacer-xl);
      padding-bottom: var(--spacer-xl);
      display: grid;
      grid-template-columns: 1fr 2fr 1.5fr;
      @media (width < 768px){
        grid-template-columns: 1fr;
      }
      h4{
        text-transform: uppercase;
        margin-bottom: var(--spacer-sm);
      }
    }

    .footer__bottom{
      padding-top: var(--spacer-sm);
      padding-bottom: var(--spacer-sm);
      background-color: var(--dark);
      color: var(--light);
      .container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        @media (width < 768px){
          flex-direction: column;
          text-align: center;
        }
      }
    }
    .menu{
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
      z-index: 20;
    }
    .explore-list{
      columns: 2;
    }
  }

  .contact-list{
    display: inline-grid;
    gap: var(--spacer-sm);
    @media (width < 768px){
      grid-template-columns: 1fr 1fr;
      gap: var(--spacer-md);
    }
    i{
      display: inline-flex;
      justify-content: center;
      align-items: center;
      color: var(--light);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #000;
    }
  }
  
  .socials-list{
    display: flex;
    gap: var(--spacer-sm);
    list-style: none;
    padding: 0;
    a{
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--light);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #000;
    }
    
  }

.stats{
  margin: 45px 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  color: var(--light);
  @media (width < 768px){
    text-align: left;
    grid-template-columns: 1fr;
    > p {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 30px;
      align-items: center;
    }
  }
  strong{
    display: block;
    @media (width < 768px){
      text-align: right;
    }
  }
  p{
    padding: 30px 50px;
    margin: 0;
  }
  p:first-child{
    border-radius: 30px 0 0 30px;
    @media (width < 768px){
      border-radius: 15px 15px 0 0;
    }
  }
  p:last-child{
    border-radius: 0 30px 30px 0;
    @media (width < 768px){
      border-radius: 0 0 30px 30px;
    }
  }
}

.row{
  display: grid;
  gap: 30px;
  &.row--1-1{
    grid-template-columns: repeat(2, 1fr);
    @media (width < 768px){
      grid-template-columns: 1fr;
    }
  }
  &.row--2-1{
    grid-template-columns: 2fr 1fr;
    @media (width < 768px){
      grid-template-columns: 1fr;
    }
  }
  &.row--1-3{
    grid-template-columns: 1fr 3fr;
    @media (width < 768px){
      grid-template-columns: 1fr;
    }
  }
  &.row--1-1-1{
    grid-template-columns: repeat(3, 1fr);
    @media (width < 1024px){
      grid-template-columns: repeat(2, 1fr);
    }
    @media (width < 768px){
      grid-template-columns: 1fr;
    }
  }
  &.row--align-center{
    align-items: center;
  }
  &.row--gap-xl{
    gap: 45px;
  }
}

.w-100{
  width: 100%;
}

.modal {
  display: none;
  transition: display 300ms, opacity 300ms, overlay 300ms;
  opacity: 0;
  justify-content:center;
  align-items:center;
  position:fixed;
  z-index:100;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:#3A3D4ACC;
  transition-behavior: allow-discrete;
  @starting-style{
    opacity: 0;
    display: none;
  }
  .close {
    color:#fff;
    float:right;
    font-size:28px;
    font-weight:700;
    position:absolute;
    right:0;
    bottom:100%;
    width: 30px;
    height: 30px;
    background: rgb(var(--green));
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  .close:hover,
  .close:focus {
    color:#d9d9d9;
    text-decoration:none;
    cursor:pointer
  }
  .modal-content {
    width:1120px;
    position: relative;
    max-width:calc(100% - 30px);
    background-color: var(--light);
    border-radius: 20px;
    padding: 30px;
    .modal-images{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      position: absolute;
      width: 100%;
      bottom: 100%;
      left: 0;
      padding: 0 40px;
      gap: 40px;
      @media (width < 768px){
        grid-template-columns: 1fr;
      }
      img{
        border-radius: 20px 20px 0 0;
        width: 100%;
        @media (width < 768px){
          &:not(:first-child){
            display: none;
          }
        }
      }
    }
    .modal-body {
      position:relative;
      
      &.modal-body--gallery {
        height:auto;
        padding:0
      }
    }
    iframe {
      border:none;
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      border-radius:16px
    }
    img {
      display:block;
      max-width:100%;
      max-height:100%;
      margin:auto;
      height:auto
    }
  }
}

.cover{
  filter: drop-shadow(2px 4px 6px black);
  border-radius: 35px;
  margin: 15px 0;
}

.m-0{
  margin: 0 !important;
}

/*  */
.mt-0{
  margin-top: 0;
}
.mt-lg{
  margin-top: 50px;
}


.search-class-form {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 30px;
  
  @media (width < 768px){
      /*
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      margin: 30px 0;
      > :last-child{
        grid-column: 1 / 4;
      }
  }
  label{
      display: block;
      color: #494C62;
      font-size: 12px;
      line-height: 21px;
      display: none;
  }
  
  select{
      width: 100%;
      background-color: transparent;
      padding: 5px 20px 5px 10px;
      border: none;
      outline: none;
      font-size: inherit;
      color: #519EAD;
      font-weight: bold;
  }
  
}

.backdrop {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 15; /* menor que el menú que tiene 20 */
}

/* Cuando el menú está abierto, mostrar el backdrop */
.menu.open ~ .backdrop {
  opacity: 1;
  visibility: visible;
}

.body-no-scroll {
  width: 100%;
  overflow: hidden !important;
}

.hide-sm{
  @media (width < 768px){
    display: none;
  }
}