/* CSS */
.countdown-wrapper {
  display: flex;
  justify-content: center; /* centra horizontalmente siempre */
  align-items: center;
  width: 100%;
  margin: 40px 0px;
}

.countdown-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color:var(--color-primary);
  border-radius: 20px;
  /*padding: 14px 28px;*/
  width: 50%;
  padding: 12px 10px;
  justify-content: space-evenly;
}

.countdown-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}

.countdown-numero {
  font-size: 40px;
  font-weight: 700;
  font-style: italic;
  color: var(--color-white);
  line-height: 1;
}

.countdown-label {
  font-size: 17px;
  color: var(--color-white);
  margin-top: 2px;
  text-transform: capitalize;
}

.countdown-separador {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 12px; /* empuja el : hacia arriba para alinearlo con los números */
}

/*esto es para el producto ocupe el 100%*/
.bg-gry-ligh .full-width{
    width: 100%;
   /* padding: 50px 0px;*/
}
.title-flash{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;

}






/*FARMA RUTINAS */
.container-farma-rutinas{

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}


/* Card */
.contenedor-rutinas {
    background: var(--color-white);
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 20px 15px;
    max-width:360px;
}

.contenedor-rutinas:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Imagen */
.img-rutinas {
    width: 100%;
    display: block;
}

/* Info */
.container-info-rutina {
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.flex-calender-rutinas {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.flex-calender-rutinas i{
    color:var(--red-2) ;
}
.contenedor-rutinas h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.5rem;
    color: var(--color-secondary);
    line-height: 1.2;
}

.contenedor-rutinas .descripcion-rutina {
    font-size: 15px;
    color: var(--color-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
    font-weight: 500;
    line-height: 1.3;
}

/* Botón */
.btn-detalle-rutina{
    width: 100%;
}
.btn-detalle-rutina button {
    width: 100%;
    border: none;
    cursor: pointer;
    display: block;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 10px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-detalle-rutina button:hover {
    background: var(--color-primary-hover);
}
/*ACABA FARMA RUTINAS*/

/*aqui va stilos de detalle rutinas*/
 .page {

      margin: 0 auto;

    }


    .blog-grid {
      display: grid;
      grid-template-columns: 1fr 370px;
      gap: 2.5rem;
      align-items: start;
      margin-bottom:50px;
    }


    .contenedor-blog {border-right: 1px solid var(--color-gray-light); padding-right: 2.5rem;}


    .title-blog-rutinadet {

      font-size: 35px;
      font-weight: 700;
      line-height: 1.2;
      color: var(--color-secondary);
      margin-bottom: 15px;
    }




    .container-img-detrutina {
      width: 100%;

      border-radius: 10px;
      overflow: hidden;

      margin: 15px 0px;
    }
    .container-img-detrutina img{
        width: 100%;
    }



    .text-det-rutina {
      font-size: 15px;
      line-height: 1.8;
      color: var(--color-secondary);
      margin-bottom: 16px;
    }

    .section-title {

      font-size: 1.05rem;
      font-weight: 600;
      color: #1E1E1E;
      margin: 10px 0px;
    }


    .list-det-text {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .4rem;
      padding-left: 0;
      margin-bottom: 14px;
    }

    .list-det-text li {
      display: flex;
      gap: .5rem;
      font-size: .87rem;
      line-height: 1.65;
      color: #3a3a38;
    }

    .list-det-text li::before {
      content: '';
      width: 6px;
      height: 6px;
      background-color: var(--color-black);
      border-radius: 50%;
      margin-top: 8px;
      flex-shrink: 0;
    }


    .text-recomendacion {

      font-size: 15px;
      line-height: 1.7;
      color: var(--color-secondary);
      margin: 1.2rem 0;
      line-height: 1.3;
    }

    .text-recomendacion  strong {
      display: block;
      line-height: 1.2;
      font-size: 20px;
      margin-bottom: 8px;
      color: var(--color-secondary);
    }


    .dl-btn {
      display: inline-block;
      background: var(--color-black);
      color: var(--color-white);
      padding: 12px 40px;
      border-radius: 24px;
      font-size: 18px;
      cursor: pointer;
      border: none;
      margin-top: .8rem;
      letter-spacing: .04em;
      transition: background .2s;
      font-style: italic;
      font-weight: 500;
      transition:all ease .3s;
    }

    .dl-btn:hover { background: var(--color-primary); }


    .sidebar-blog {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .sidebar-title-blog {
      font-size: 30px;
      text-align: center;
      line-height: 1.1;


      text-transform: uppercase;
      color: var(--color-primary);
      font-weight: 600;
      padding-bottom: 10px;

      margin-bottom: .75rem;
    }


    .sidebar-card-blog {
      display: flex;
      flex-direction: column;
      gap:10px;
      padding: 15px 10px;

    }

    .sidebar-card-blog:last-child { border-bottom: none;  }

    .card-img {
      width: 100%;
      flex-shrink: 0;
      overflow: hidden;

    }
    .card-img img{
        width: 100%;
    }


    .container-info-blog {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;

    }


    .card-text {
      font-size: 16px;
      line-height: 1.1;
      padding: 8px 0px;
      color: var(--color-secondary);
      font-weight: 400;
    }

     .card-text2 {
      font-size: 16px;
      line-height: 1.1;
      padding: 8px 0px;
      color: var(--color-secondary);
      font-weight: 400;
      text-align:center;
    }

    .leer-btn {
        width: 100%;
      display: inline-block;
      background: var(--color-primary);
      color: var(--color-white);
      padding: 10px 0px;
      border-radius: 10px;
      font-size: 18px;
      margin-top: 4px;
      cursor: pointer;
      border: none;
      letter-spacing: .03em;
        text-align:center;
      transition: background .2s;
    }

    .leer-btn:hover { background: var(--color-primary-hover); }


/*formacion eventos o proximos eventos*/
.flex-promociones{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .flex-promociones p:nth-child(1){
        padding: 4px 8px;
        border-radius: 8px;
        font-size: 10px;
        text-transform: uppercase;
      }


      .flex-promociones p:nth-child(2){
        color: var(--color-secondary);
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
      }
      .flex-calender-eventos{
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--color-secondary);
      }
      .flex-icon-events{
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .flex-icon-events span{
        font-size: 14px;
      }
      .flex-icon-events .calen{
        color: var(--red-2)
      }
      .container-events-text-icon{
        display: flex; flex-direction: column; gap: 6px;
      }
      .flex-calender-eventos i{
        font-size:12px;
        color:var(--color-secondary);
      }

/*fin formacion eventos o proximos eventos*/
/*detalle eventos*/
.flex-events-detalle-icon-presencial{
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 15px;
}
.text-events-details{
  line-height: 1.1;
  font-size: 17px;
  color:var(--color-secondary);
  font-weight:600;
}
.button-wasp{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--green);
      color: var(--color-white);
      padding:7px 25px;
      border-radius: 24px;
      font-size: 18px;
      cursor: pointer;
      border: none;
      margin-top: .8rem;
      letter-spacing: .04em;
      transition: background .2s;
      font-style: italic;
      font-weight: 500;
      transition: all ease .3s;
      cursor: pointer;
    }

    .button-wasp i{
      font-size: 24px;
    }


    .button-wasp:hover{
      background-color: var(--green-hover);

    }
/*fin detalle eventos*/


.extra-imagen {
    margin-bottom: 30px;
}

.text-det-rutina ul li,.text-det-rutina ol li{
    margin-left:25px;
}

.text-det-rutina ul li{
    list-style: disc;
}

.text-det-rutina ol li{
    list-style: decimal;
}



@media (max-width:1000px ) {
 .countdown-container{
    width: 65%;
 }
}

  @media (max-width:900px ) {
     .blog-grid {

        grid-template-columns: 1fr 300px;

      }
    }

    /*esto es de detalle eventos*/
    @media (max-width: 820px) {
    .events-font-size-details span{
      font-size: 12px;
     }
    }
    /*fin detalle evento*/

    @media (max-width:800px ) {

      .blog-grid {
        grid-template-columns: 1fr;
      }
      .sidebar-title-blog{
        font-size:25px;
      }
    }

@media (max-width:700px ) {
 .countdown-container{
    width: 90%;
 }
 /*rtuina detalle*/
 .blog-grid {
        grid-template-columns: 1fr;
      }
      .contenedor-blog{
        border: none;
        padding-right: 0px;
      }

      .contenedor-blog { order: 1; }
      .sidebar-blog   { order: 2; margin-top:80px; }

      .title-blog-rutinadet{ font-size: 1.4rem; }
}
@media (max-width:500px ) {
 .countdown-container{
    width: 100%;
}
.button-wasp, .button-wasp i{
    font-size:14px;
}
}
/* Responsive: en móvil se achica un poco */
/* Mobile: menos padding y texto más chico */
@media (max-width: 480px) {
  .countdown-container {
    padding: 10px 16px;
    gap: 4px;
    border-radius:10px;
  }

  .countdown-numero {
    font-size: 26px;  /* era 28px */
  }

  .countdown-label {
    font-size: 9px;   /* era 11px */
  }

  .countdown-separador {
    font-size: 16px;  /* era 26px */
    margin-bottom: 10px;
  }

  .countdown-bloque {
    min-width: 32px;  /* era 48px */
  }
}
@media (max-width: 400px) {
 .container-farma-rutinas{
  width: 100%;
  grid-template-columns: 1fr;
 }
 .contenedor-rutinas{
  width: 100%;
 }
}

/*promixos eventos o promicion eventos */


      @media (max-width:350px ) {
       .flex-calender-eventos{
        flex-direction: column;
        gap: 4px;
        align-items: self-start;
       }
       .linea-none{
        display: none;
       }
      }