:root                         {
  --color-primario:          #0EA9E1;
}

/* WTSP */
.icof4e 						          {background: rgb(45, 175, 45); transition: .3s; animation: wtsp 1s infinite; cursor: pointer; position: fixed; bottom: 20px; right: 20px; z-index: 90; color: white; display: flex; font-size: 32px; width: 56px; height: 56px; justify-content: center; align-items: center; border-radius: 18px 18px 0px 18px;
	&:hover 					          {background: black; transform: scale(1.1); animation: both;}
	&:active 					          {transform: scale(1);}
}
@keyframes wtsp 				      {
	0%                          {transform: scale(1);}
	50%                         {transform: scale(1.08);}
	100%                        {transform: scale(1);}
}


body                          {font-size: 18px; font-weight: 400; font-family: "Barlow", sans-serif;}
.main                         {}


/* LUGAR Y FECHA FLOTANTE */
.dataFlot                     {position: fixed; top: 0px; left: 0px; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: 10px; z-index: 5;
  .item                       {display: flex; flex-direction: column; color: var(--color-primario);}
  .title                      {background: var(--color-primario); width: fit-content; color: white; text-transform: uppercase; font-weight: 600; padding: 8px 10px 7px 10px; margin: 0px 0px 7px 0px;}
  .subtitle                   {font-weight: 600; font-size: 26px; width: 258px;}
  .txtFech                    {color: black;}
  .hora                       {font-size: 13px;}
  .fet                        {align-items: flex-end; text-align: right;}
}

@media ( width <= 1200px )    {
  .dataFlot                   {background: white;}
}

@media ( width <= 770px )     {
  .dataFlot                   {background: white;
    .title                    {font-size: 14px; padding: 4px;}
    .subtitle                 {width: 130px; font-size: 12px;}
    .hora                     {font-size: 10px;}
  }
}


/* SECCIONES TOP BOTTOM */
.top                          {display: flex; width: 100%; flex-wrap: wrap; flex-direction: column; align-items: center; text-align: center; margin: 60px 0px 0px 0px;}
.bottom                       {display: flex; flex-direction: column; align-items: center;}

@media ( width <= 770px )     {
  .top                        {margin: 140px 0px 0px 0px;}
}


/* TITULO */
.logo                         {width: 270px;}
.banderas                     {width: 90%; max-width: 434px; margin: 40px 0px 0px 0px;}
.titleGen                     {font-size: 32px; font-weight: 700; width: 490px; margin: 30px 0px 0px 0px;
  .cl1                        {color: #0EA9E1;}
  .cl2                        {color: #58B565;}
}
@media ( width <= 770px )     {
  .titleGen                   {width: 100%;}
  .logo                         {width: 240px;}
}


/* ICONOS */
.icons                        {display: flex; margin: 20px 0px 0px 0px; flex-wrap: wrap; justify-content: center; gap: 30px; width: 100%; max-width: 840px;
  .item                       {display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; width: 120px;}
  .icoIn                      {border: 1px solid black; border-radius: 250px; width: 56px; height: 56px; padding: 5px;}
  .name                       {}
  .itemIcon1                  {width: 44%; max-width: 180px;}
}
@media ( width <= 770px )     {
  .icons                      {display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 300px;}
}



/* BOTONES */
.btns                         {display: flex; flex-wrap: wrap; margin: 40px 0px 0px 0px; width: 100%; justify-content: center; gap: 20px 20px; padding: 0px 20px; position: relative; z-index: 1;
  .line                       {width: 40px; height: 5px; background: var(--color-primario); margin: 0px auto 0px auto;}
  .title1                     {width: 100%; font-weight: 700; font-size: 34px; color: var(--color-primario);}
  .title                      {width: 100%;}
  .bt                         {background: gray; width: 220px; display: flex; flex-direction: column; gap: 2px; font-size: 22px; justify-content: flex-start; padding: 30px 0px 10px 0px; border-radius: 30px; cursor: pointer; transition: .2s; color: white; position: relative; 
    &:hover                   {}    
    &:active                  {transform: scale(.9);}
  }
  .icoReg                     {font-size: 40px;}
  .list                       {font-size: 14px; font-weight: 500;}
  strong                      {font-weight: 700;}
  .price                      {font-weight: 700; margin: 10px 0px 5px 0px;}
}

.clBt1                        {background: #24A3DD !important;}
.clBt2                        {background: #48A1BC !important;}
.clBt3                        {background: #10A89E !important;}
.clBt4                        {background: #31AD72 !important;}

@media ( width <= 960px )     {
  .btns                       {
    .bt                       {width: 100%;}
    br                        {display: none;}
  }
}



/* FOOTER */
.caja                         {margin: -70px 0px 70px 0px; position: relative;
  .sombra                     {width: 100%; height: 100px; position: absolute; bottom: 0px; background: white; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 90%);}
}
.packing                      {width: 100%; max-width: 700px;}
.footer                       {width: 100%; background: url(../images/footer.svg); background-repeat: no-repeat; background-size: cover; background-position: top; height: 130px; display: flex; justify-content: center; align-items: flex-end; padding: 0px 0px 18px 0px;
  .item                       {color: white; font-weight: 500;}
  .line                       {width: 2px; background: white; height: 20px; margin: 0px 10px;}
}

@media ( width <= 770px )     {
  .footer                     {flex-direction: column; align-items: center; height: 290px; justify-content: flex-end;
    .line                     {width: 40px; height: 1px; margin: 10px 0px;}
    .item                     {font-size: 16px;}
  }
}



.auspician                  {width: 90%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px; max-width: 1170px; margin: 0px 0px 50px 0px;
  .title                    {width: 100%; text-align: center;}
  .aus                      {width: 48%; max-width: 120px; border: 1px solid lightgray;}
}



.programaImg                {width: 90%; max-width: 1040px; margin: 0px auto 40px auto; display: block;}

.bt1                        {background: var(--color-primario); width: fit-content; margin: 0px auto 60px auto; color: white; font-weight: 600; padding: 10px 12px; font-size: 26px; border-radius: 12px;}
.btHome                     {margin: 50px 0px -50px 0px; position: relative; z-index: 7;}