/* Ajustes solo para celular. Pegar al final del <style>, despues del media query actual. */
@media (max-width:768px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    background-attachment:scroll;
  }

  .container{
    padding:0 18px;
  }

  .nav-wrapper{
    height:68px;
  }

  .logo h2{
    font-size:1.18rem;
    letter-spacing:2px;
  }

  .logo small{
    font-size:.55rem;
    letter-spacing:1.4px;
  }

  .nav-links{
    width:min(86vw,320px);
    padding:88px 24px 32px;
    align-items:stretch;
    justify-content:flex-start;
    background:rgba(5,10,18,.96);
    overflow-y:auto;
  }

  .nav-links a{
    text-align:center;
  }

  .nav-links a.btn{
    width:100%;
  }

  .hero{
    min-height:auto;
    padding-top:98px;
    padding-bottom:28px;
  }

  .hero-grid{
    gap:24px;
  }

  .hero-text h1{
    font-size:clamp(2rem, 9vw, 2.35rem);
    line-height:1.12;
    letter-spacing:-.8px;
  }

  .hero-text p{
    font-size:.94rem;
    line-height:1.65;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-image img{
    height:auto;
    max-height:260px;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:18px;
  }

  .fiber-light{
    width:115%;
    left:-7.5%;
  }

  .section-title{
    margin-bottom:22px;
  }

  .section-title small{
    letter-spacing:2px;
    font-size:.72rem;
  }

  .section-title h2,
  .about-content h2{
    font-size:clamp(1.45rem, 7vw, 1.7rem);
    line-height:1.18;
  }

  .course{
    border-radius:14px;
  }

  .course-media{
    height:auto;
    aspect-ratio:16 / 10;
  }

  .course-content h3{
    font-size:1.12rem;
    line-height:1.28;
  }

  .about-content{
    padding:22px 18px;
    border-radius:16px;
  }

  .about-image img{
    height:auto;
    aspect-ratio:16 / 10;
    border-radius:16px;
  }

  .about-item{
    align-items:flex-start;
  }

  .contact-card{
    padding:18px;
    gap:14px;
    overflow-wrap:anywhere;
  }

  .contact-buttons .btn,
  .popup-actions .btn{
    width:100%;
  }

  .whatsapp{
    right:16px;
    bottom:16px;
    min-width:56px;
    height:50px;
    padding:0 15px;
    border-radius:15px 15px 15px 6px;
    font-size:1.55rem;
  }

  footer{
    padding-bottom:86px;
  }
}

@media (max-width:768px){
  .popup-overlay{
    padding:0;
    align-items:stretch;
  }

  .popup-content{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    border-left:0;
    border-right:0;
  }

  .popup-layout{
    height:100dvh;
    max-height:100dvh;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    min-height:0;
  }

  .popup-side{
    display:contents;
  }

  .popup-video-side{
    grid-column:1;
    width:100%;
    height:180px;
    min-height:180px;
  }

  .popup-video{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .popup-kicker{
    max-width:calc(100% - 76px);
    padding:8px 11px;
    font-size:.64rem;
    line-height:1.1;
  }

  .popup-tabs{
    display:none;
    grid-template-columns:none;
    width:100%;
    margin:0;
    padding:10px 14px;
    gap:8px;
    overflow-x:auto;
    border-radius:0;
    border-left:0;
    border-right:0;
    scroll-snap-type:x proximity;
  }

  .popup-tab{
    flex:0 0 auto;
    min-height:40px;
    max-width:210px;
    padding:9px 12px;
    white-space:normal;
    scroll-snap-align:start;
    font-size:.78rem;
  }

  .popup-body{
    grid-column:1;
    width:100%;
    min-height:0;
    max-height:none;
    height:auto;
    padding:24px 18px 24px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .popup-body h3{
    padding-right:42px;
    font-size:clamp(1.35rem, 7vw, 1.65rem);
    line-height:1.18;
  }

  .popup-body > p{
    margin-bottom:20px;
    line-height:1.65;
  }

  .module-block{
    margin-top:14px;
    padding:16px;
  }

  .module-block h4{
    gap:10px;
    margin-bottom:14px;
    font-size:.96rem;
  }

  .module-block li{
    font-size:.88rem;
    line-height:1.45;
  }

  .popup-meta{
    margin-top:22px;
    padding-top:18px;
  }

  .popup-pill{
    width:100%;
    justify-content:flex-start;
    border-radius:12px;
  }
}

@media (max-width:380px){
  .container{
    padding:0 14px;
  }

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

  .popup-video-side{
    height:150px;
    min-height:150px;
  }

  .popup-tab{
    max-width:185px;
    font-size:.74rem;
  }
}