/* Reset */

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body { font-family: "lato", sans-serif; color: #1a2a42; line-height: 1; }

.container{width: 90%;max-width: 1680px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;z-index: 1;}

    /* Header */

header {

    position: fixed;

    top:0; left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding: 14px 0px;

    z-index: 999;

    transition: background .25s ease, box-shadow .25s ease;

  }

.caract-descripcion{

  width: 100%;

}

.feature{

  text-align: center;

  position: relative;

  flex: 1;

  box-sizing: border-box;

  border-right: solid 1px #00b5b0;

}

.feature:first-child{

  flex: none;

  padding: 0 50px 0 0;

}

.feature:last-child{

  border: none;

}

.feature>img{

  margin-bottom: 10px;

}

.feature .number{

  font-size: 20px;

  font-weight: 600;

}

  /* transparente */

  header.transparent {

    background: transparent;

    box-shadow: none;

  }

  /* scrolled */

  header.scrolled {

    background:#fff;

    border-bottom: 1px solid rgba(0, 181, 176, .2);

  }



  .logo img { height:60px; display:block; }

  .logo .logo-dark { display:none; }



  nav a {

    margin-left:22px;

    text-decoration:none;

    font-weight:700;

    position:relative;

    color: var(--dark);

    transition:color .25s ease;

  }

  nav a::after {

    content:"";

    position:absolute;

    left:0; bottom:-6px;

    height:2px; width:0;

    background:var(--accent);

    transition:width .25s ease;

  }

  nav a:hover::after { width:100%; }



  /* links en top */

  header.transparent nav a { color:#fff; }

  header.transparent .logo .logo-light { display:block; }

  header.transparent .logo .logo-dark { display:none; }



  /* links scrolled */

  header.scrolled nav a { color:#1a2a42; }

  header.scrolled .logo .logo-light { display:none; }

  header.scrolled .logo .logo-dark { display:block; }



  /* activo */

  nav a.active {

    border-bottom: solid 2px;

  }

  nav a.active::after {

    width:100%;

  }



    /* Hero */

    .hero {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      justify-content: space-between;

      background: url('../../img/banner.webp') no-repeat center/cover;

      padding: 100px 0px 60px;

      color: white;

      height: 100vh;

      position: relative;

      width: 100%;

    }

    .hero::before{

      content: "";

      position: absolute;

      width: 100%;

      height: 100%;

      background-color: #000;

      top: 0;

      left: 0;

      opacity: .5;

    }

    .hero-text {

      flex: 1 1 50%;

      max-width: 715px;

      animation: fadeInUp 1s ease forwards;

    }

    .hero-text span{

      background: #00b5b0;

      padding: 8px 27px;

      border-radius: 50px;

      font-size: 23px;

    }

    .hero-text h1 {

      font-size: 3.5rem;

      margin-bottom: 25px;

      margin-top: 25px; }

    .hero>.container{

      align-items: end;

    }



    /* Formulario */

      .form-box {

      top: 20px;

      right: 0;

      flex: 0 1 35%;

      background: #00b5b0;

      padding: 25px 40px;

      border-radius: 12px;

      box-shadow: 0 8px 20px rgba(0,0,0,0.2);

      animation: fadeIn 1.5s ease forwards;

      transition: all 0.3s ease;

      display: none;

    }  

    .form-box h3 {

      margin-top: 0;

      text-align: center;

      color: white;

      margin-bottom: 20px;

      font-size: 40px;

    }

    .form-group {

      position: relative;

      margin-bottom: 5px;

    }

    .form-group input,

    .form-group select {

      width: 100%;

      padding: 17px 12px 17px 12px;

      border: none;

      border-radius: 6px;

      outline: none;

      font-size: 14px;

      background: #fff;

    }

    .form-group label {

      position: absolute;

      top: 12px;

      left: 12px;

      font-size: 14px;

      color: #000;

      pointer-events: none;

      transition: all 0.2s ease;

    }

    .form-group input:focus + label,

    .form-group input:not(:placeholder-shown) + label,

    .form-group select:focus + label,

    .form-group select:valid + label {

      top: 0px;

      left: 8px;

      font-size: 12px;

      color: #666;

      background: #fff;

      padding: 0 4px;

      border-radius: 4px;

    }

    .form-box .button, .button {

      width: 100%;

      background: #13426b;

      color: white;

      border: none;

      padding: 12px;

      font-weight: 500;

      border-radius: 6px;

      cursor: pointer;

      transition: transform .3s, background .3s;

      font-size: 20px;

      text-decoration: none;

      display: table;

      text-align: center;

    }

    .form-box .button:hover,.button:hover {

      background: #333;

      transform: scale(1.05);

    }

    form .politicas{

      color:white;

      font-size:15px;

      display:block;

      margin-bottom:10px;

      margin-top: 10px;

      text-align: left;

    }

    form .politicas a{

      font-weight: 600;

      color: white;

      text-decoration: none;

    }

    form .politicas a:hover{

      text-decoration: underline;

    }



    /* Secciones */

    section {

      padding: 60px 0px;

      /*max-width: 1200px;*/

      margin: auto;

      font-size: 20px;

      color: #13426b;

      align-content: center;

    }

    .programa h2 { color: #13426b;font-size: 50px;font-weight: 800;}

    .programa ul { list-style: none; padding: 0;line-height: 33px; }

    .programa ul li::before { content: "✔ "; color: #009688; }



    .ponente {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      opacity: 0;

      transform: translateY(50px);

      transition: all 0.8s ease;

    }

    .ponente.show, .programa.show { opacity: 1; transform: translateY(0); }

    .ponente img {

      max-width: 300px;

      border-radius: 50%;

      margin-right: 40px;

    }

    .columna{

      flex: 1 1 50%;

      display: inline-grid;

      gap: 30px;

    }

    .parrafo{

      line-height: 25px;

    }

    #programa{

      position: relative;

      padding-top: 0;

      animation: fadeInUp 1s ease forwards;

      height: 100vh;

    }

    #ponente{

      position: relative;

      padding-top: 150px;

    }

    #ponente .container{

      align-items: flex-start;

    }

    #ponente h3{

      font-size: 60px;

      font-weight: 800;

    }

    #ponente ul{

      list-style-type: none;

    }

    .about__item {

      margin-bottom: 1rem;

    }

    .about__title {

      display: flex;

      justify-content: space-between;

      padding: 1rem 1rem 1rem 1.5625rem;

      border-radius: 10px;

      background-color: #f3f5f7;

      color: #13426b;

      font-weight: 900;

      font-size: 1.375rem;

    }

     .about__detail {

      padding: 1rem 1rem 1rem 1.5625rem;

      color: #13426b;

    }

    .ondas{

      background-image: url("../../img/ondas.png");

      background-repeat: repeat-x;

      background-position: center center;

      width: 100%;

      height: 220px;

      position: absolute;

      left: 0;

      top: 0;

      bottom: 0;

      margin: auto;

      z-index: -1;

    }

    .bg-onda{

      background-image: url("../../img/bg-onda.webp");

      background-repeat: no-repeat;

      background-position: top right;

      height: 100vh;      

      background-size: contain;

      flex: 0 1 35%;

      position: relative;

    }

    .bg-onda-doc{

      background-image: url("../../img/dr-mario.webp");

      background-repeat: no-repeat;

      background-position: top right;

      height: 100vh;      

      background-size: contain;

      position:sticky;

      top: 30px;

    }

    .bg-onda>.form-box{

      position: absolute;

      width: 100%;

      right: 0;

      top: 20%;

    }

    .bg-onda2{

      position: absolute;

      width: 13%;

      background-image: url(../../img/ondas2.png);

      background-repeat: no-repeat;

      background-position: center center;

      height: 220px;

      animation: fadeIn 1s ease forwards;

      bottom: 27%;

    }

    .izq{left: 0;}

    .der{right: 0;}



.footer {

  background: #f7f8fb;

  padding: 20px 0px;

  font-family: 'Lato', sans-serif;

  font-size: 14px;

  color: #1a2a42;

}



.footer-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  margin-bottom: 10px;

}



.footer-left a {

  color: #003366;

  font-weight: bold;

  text-decoration: none;

  font-size: 1rem;

}



.footer-left a:hover {

  text-decoration: underline;

}



.footer-center p {

  text-align: center;

  font-size: 12px;

  color: #666;

  margin: 0;

}



.footer-right {

  display: flex;

  align-items: center;

  gap: 20px;

}



.footer-right .phone {

  color: #003366;

  font-weight: bold;

  text-decoration: none;

  font-size: 1rem;

}



.footer-right .phone i {

  color: #00b3a4;

  margin-right: 6px;

}



.social-icons a {

  width: 35px;

  height: 35px;

  border: 1px solid #00b3a4;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-left: 8px;

  color: #00b3a4;

  text-decoration: none;

  transition: all 0.3s ease;

}



.social-icons a:hover {

  background: #00b3a4;

  color: #fff;

}



.footer-credits {

  text-align: right;

  margin-top: 15px;

  font-size: 11px;

  color: #666;

}

.footer__credits-rights {

    order: initial;

    text-align: left;

}

.footer__credits {

  display: flex;

    justify-content: space-between;

}

.footer__credits-exe {

    order: initial;

    text-align: right;

}

.footer__credits-exe address, .footer__credits-rights address {

    color: #999;

    font-size: 10px;

    font-style: normal;

    text-transform: uppercase;

    opacity: 1;

}

.footer__credits-exe address a, .footer__credits-rights address a {

    color: #999;

    text-decoration: none;

}

.footer__credits-exe address a:hover{

  text-decoration: underline;

}

footer .container{display: block;}

#programa>.container{gap: 90px;}

.content-sticky{

  position: absolute;

  width: 90%;

  max-width: 1680px;

  height: 200vh;

  margin: auto;

  left: 0;

  right: 0;

}

.sticky{

  position: sticky;

  top: 20%;

  height: fit-content;

  width: 35%;

  z-index: 2;

  float: right;

  display: block;

}

    /* Animaciones */

    @keyframes fadeInUp {

      0% { opacity: 0; transform: translateY(40px); }

      100% { opacity: 1; transform: translateY(0); }

    }

    @keyframes fadeIn {

      from { opacity: 0; }

      to { opacity: 1; }

    }

    @media (max-width: 1367px){

      .hero{align-content: end;}

      .hero-text h1{font-size: 2.7rem;}

      .feature .number {font-size: 16px;}

      .programa h2{font-size: 40px;}

      .parrafo{font-size: 16px;line-height: 20px;text-align: left;}

      .programa ul{font-size: 16px;line-height: 27px;}

      .about__title{font-size: 20px;text-align: left;}

      .about__detail{font-size: 16px;text-align: left;}

      #ponente h3{font-size: 50px;}

      #ponente{padding-top: 125px;}

      .bg-onda2{width: 4%;background-size: cover;height: 121px;bottom: 20%;}

      .sticky{top: 14%;}

      .logo img{height: 50px;}

      .form-group input, .form-group select{padding: 15px 12px 13px 12px;}

    }

    @media (max-width: 768px) {

      .bg-onda-doc{height: 55vh;flex: none;width: 100%;background-position: top center;}

      .container{display: flex; flex-direction: column;}

      .container .logo{margin-bottom: 20px;}

      header { padding:12px 18px; }

      nav a { margin-left:12px; font-size:15px; }

      .hero { flex-direction: column; text-align: center;padding-top: 370px;background: url(../../img/banner-movil.webp) no-repeat top / contain;height: auto;padding-bottom: 0;}

      .hero>.container{width: 100%;}

      .hero-text { margin:0 auto 20px; width: 85%;}

      .ponente { flex-direction: column; text-align: center; }

      .ponente img { margin: 0 0 20px 0; }

      .hero-text h1{font-size: 2rem;}

      .caract-descripcion{display: flex!important;flex-direction: row;}

      #ponente{padding-top: 0;width: 85%;padding: 60px 0px;}

      #ponente>.container>.columna:first-child{order:2}

      #ponente>.container>.columna:last-child{order:1}

      #programa{padding: 60px 0px 60px 0px;height: auto;width: 85%;}

      #programa .container, #ponente .container{width: 100%;gap: 0;}

      .form-box{width: 100%;margin-top: 15px;border-radius: 0;padding: 25px 30px;display: block;}

      .footer-container{flex-direction: column;gap: 20px;margin-bottom: 20px;}

      .footer-right{flex-direction: column;}

      .footer__credits{flex-direction: column;}

      .footer__credits-rights, .footer__credits-exe{text-align: center;}

      .bg-onda>.form-box{display: none;}

      .feature:first-child{flex: 1;padding: 0;}

      .form-group input, .form-group select{height: 50px;}

      form .politicas{margin-bottom: 20px;margin-top: 20px;}

      .sticky{display: none;}

      .bg-onda-doc{position: relative;}

    }