/*---- Móviles pequeños y normales (≤576px) ----*/
  @media (max-width: 576px) {
    .erge-container {
        display: grid;
    }
    .text-terminos {
        color: var(--Gray-3, #3A3A3C);
    }

    .m{
        display: block !important;
      }
    .hero-section, .banner, .slide, .video-box {
        text-align: center;
        flex-direction: column;
    }
    .col-sm, .col-xs-12 {
        width: 100% !important;
        margin-bottom: 20px;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    .hero-text, .title-success, .text-log, .sub-register, .txt-reg {
      font-size: 23px;
    }
    .text-dos {
      font-size: 20px;
      text-align: center;
    }
    .text-white-m, .text-success-4 {
      font-size: 33px;
    }
    .text-white-sub {
      font-size: 15px;
    }
    .register-txt, .txt-green-register {
      font-size: 16px;
    }
    .nav-link, .nav-link.active {
      font-size: 16px;
      text-align: left;
    }
    .form-check-label, label.form-check-label {
      font-size: 13px;
    }
    .form-control {
      font-size: 12px;
    }
  
    /* --- Layout móviles --- */
    .image-container, .rounded-section, .mov {
      flex-direction: column;
      gap: 20px;
    }
    .registro-box {
      margin-top: 35px;
    }
    .estomach {
      margin: auto;
    }
    .navbar-nav {
      font-size: 15px;
      text-align: left;
    }
    .py-5 {
      padding-bottom: 0 !important;
    }
    .registro {
      background-position: right;
    }
    .bg-menu {
      border-bottom: 2px solid #1e9c52;
    }
    .navbar-toggler:focus, .navbar-toggler {
      box-shadow: none;
      border: none;
    }
    .navbar-desktop {
      display: none !important;
    }
  
    /* --- Mobile menu --- */
    .mobile-menu {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: #1B3159;
      z-index: 9999;
      transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
      padding: 1rem;
      flex-direction: column;
      display: none;
      overflow: hidden;
    }
    .mobile-menu.active {
      left: 0;
      display: flex;
    }
    .mobile-header, .menu-toggle, .close-menu {
        background: #1B3159;
        color: #fff;
    }
    .menu-toggle, .close-menu {
      font-size: 1.5rem;
      border: none;
    }
    .menu-links {
      list-style: none;
      padding-left: 0;
      margin-top: 2rem;
    }
    .menu-links li, .menu-links a {
      margin: 1rem 0;
      font-family: Roboto;
      font-size: 16px;
      font-weight: 400;
      color: #F9F9F9;
      text-decoration: none;
    }
    .logout-btn {
      margin-top: 15%;
      background-color: #0eb34d;
      padding: 16px;
      border-radius: 4px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      text-decoration: none;
    }
    .user-info {
      display: flex;
      align-items: center;
      margin-top: 27px;
      gap: 22px;
      color: #FFF;
      font-family: Roboto;
    }
    .search-box {
      border: 1px solid #00AE42;
      background: #0B2047;
      padding: 16px;
      border-radius: 30px;
      height: 60px;
      display: flex;
      align-items: center;
      color: white;
    }
    .txt-place-movil {
      font-size: 18px;
      width: 100%;
      border: none;
      background: transparent;
      padding-left: 35px;
    }
    .movil-search {
      color: #00AE42;
      position: absolute;
    }
    .img-user {
      border: 4px solid #00AE42;
      border-radius: 50%;
    }
    .menu-header {
        display: flex;
        justify-content: space-between;
    }
    .hero-text-home {
        margin-top: 60px;
    }
    .text-white-m-home {
        font-size: 33px;
    }
    .card-h-home {
        width: fit-content;
        padding: 20px;
        height: auto;
    }
    .hero-text-home {
        font-size: 23px;
        text-align: center;
    }
    .text-white-sub-home {
        font-size: 15px;
    }
    .card-slide-home {
        margin: auto 11px;
        width: 332px;
    }
    .card-slide {
        margin: auto 11px;
        width: 332px;
    }
    .row.gx-4 {
        --bs-gutter-x: 20px;
    }
    .rounded-section {
        padding: 0px;
    }
    .main-content {
        width: 100%;
    }
    .sidebar {
        width: 100%;
    }
    .sidebar-erge {
        width: 100%;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
    .span-erge {
        display: none;
    }
    .pagina-erge {
        display: none;
    }
    .page-select {
        display: none;
    }
    .pagination-container {
        justify-content: center;
    }
    .main-content-w {
        width: 100%;
        margin-bottom: 15px;
    }
    .sidebar-w {
        display: none;
    }
    .read-erge {
        margin-bottom: 15px;
    }
    .title-fexu {
        font-size: 33px;
    }
    .subtitle-fexu {
        font-size: 33px;
    }
    .popup-content {
        max-width: -webkit-fill-available;
    }
    .txt-pop {
        font-size: 17px;
        top: 52%;
        left: 11%;
    }
    .log-b {
        width: 195px !important;
        position: absolute;
        top: 23%;
        left: 4%;
        margin: auto;
    }
    .herramientas-container {
        display: grid;
    }
    .recurso-title {
        margin-top: 15px;
    }
    .recurso-img {
        width: -webkit-fill-available !important;
    }
    .recurso-info {
        display: grid;
    }
    .recurso-download {
        position: absolute;
        right: 40px;
    }
    .mda {
        display: flex;
        flex-direction: column;
    }
    .farmaco {
        background: linear-gradient(180deg, #23315D 0%, rgba(27, 30, 56, 0.93) 100%);
    }
    .formulario-farmacovigilancia {
        border-radius: 8px;
        background: var(--White, #FFF);
    }
    .sub-farmaco {
        font-size: 15px;
        line-height: 21px;
    }
    .correo {
        font-size: 14px;
    }
    .descar-card {
        height: 70px;
    }
    .limitations-list {
        display: grid;
    }
    .benefit-item {
        width: auto;
        height: auto;
    }
    .title-ars {
        margin-left: 0 !important;
    }
    .benefits-grid {
        display: grid;
    }
    .txt-movil-bene {
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 110%;
    }
    .tli {
        font-size: 22px;
        text-align: center;
    }
    .txt-ba {
        font-size: 22px;
    }
    .tooltip-box.active {
        display: block;
        padding-bottom: 15px;
    }
    .tooltip-box {
        display: none;
    }
    .content-wrapper {
        display: grid;
    }
    .txt-22 {
        font-size: 20px;
    }
    .indication-text {
        font-size: 18px;
    }
    .posologia-txt {
        font-size: 27px;
        text-align: center;
    }
    .posology-text {
        text-align: center;
        font-size: 27px;
    }
    .posology-warning {
        text-align: center;
    }
    .section-title-indi {
        font-size: 27px;
    }
    .abcito-logo {
        margin-top: 40px;
    }
    .graphs-container {
        display: grid;
    }
    .study-data {
        width: auto;
    }
    .study-header {
        align-items: center;
    }
    .title-eys {
        font-size: 27px;
    }
    .inciden-txt {
        font-size: 14px;
    }
    .list-epidemio {
        padding: 0;
    }
    .movil-m {
        margin-bottom: 15px !important;
    }
    .contenido {
        padding: 22px 20px;
        width: 135px;
    }
    .contenido-azul {
        padding: 22px 20px;
        width: 135px;
    }
    .grado {
        width: 190px;
    }
    .grados {
        display: grid;
    }
    .txt-epidemio {
        font-size: 14px;
    }
    .txt-mov-eprgs {
        font-size: 16px !important;
    }
    .clas-mov-img{
        display: grid;
        margin: auto;
        justify-content: center;
    }
    .text-primary {
        color: #001689 !important;
        font-size: 14px;
        font-style: normal;
        font-weight: 700 !important;
        line-height: 130%;
    }
    .farmaco-pading{
        padding-top: 100px;
    }
    .comparativo-row {
        justify-content: center;
    }
    .card.m {
        border-radius: 8px !important;
        border: 1.5px solid #03ae44 !important;
    }
    
    .toggle-content {
        display: block; 
    }

    .accordion-btn {
        color: white;
        border: none;
        border-radius: 10px;
        padding: 10px 16px;
        font-weight: bold;
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 8px;
        background: #00AE42;
        box-shadow: 4px 4px 0px 0px #93C69B;
    }
      
      .accordion-btn.sub {
        background-color: #00AE42;
      }
      
      .accordion-content {
        display: none;
        margin-bottom: 20px;
      }
      
      .evaluation-box {
        background: #f4fdf4;
        border: 2px solid #00AE42;
        padding: 10px;
        margin-bottom: 15px;
        border-radius: 10px;
      }
      
      .row-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      
      .option {
        background: #fff;
        border-left: 4px solid #002f87;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
      }
      
      .result-btn {
        background-color: #00AE42;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 6px 12px;
        font-weight: bold;
        margin-top: 8px;
      }
      
      .arrow {
        width: fit-content;
        margin: auto;
    }
    .accordion-btn {
        border: none;
        padding: 10px 16px;
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 8px;
        background: #00AE42;
        box-shadow: 4px 4px 0px 0px #93C69B;
        color: #FFF;
        text-align: center;
        font-family: Poppins;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
      
    .accordion-btn.sub {
        border-radius: 8px;
        border: 1px solid #001689;
        background: #FFF;
        box-shadow: 4px 4px 0px 0px #001689;
        color: #00AE42;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
      
      .accordion-content {
        display: none;
        margin-bottom: 20px;
      }
      
      .content-box {
        border-left: 4px solid #00AE42;
        padding: 12px;
        margin-bottom: 10px;
        border-radius: 8px;
        border: 1px solid #00AE42;
        background: #FFF;
        box-shadow: 4px 4px 0px 0px #65BF73;
        color: #001689;
        text-align: center;
        font-family: Poppins;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: grid;
        justify-content: center;
        align-items: center;
    }
      
    .content-box.blue {
        background-color: #e6f0ff;
        border-left: 4px solid #002f87;
        fill: #E5E9FF;
        filter: drop-shadow(4px 4px 0px #001689);
        box-shadow: 4px 4px 0px 0px #002f87;
        border: 1px solid #002f87;
        color: #001689;
        font-family: 'Poppins', sans-serif;
        font-size: 9px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
        gap: 5px;
        text-align: left;
        border-top-right-radius: 40px;
        border-top-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    .title-epi {
        font-size: 27px;
    }
    .scroll-img-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
      }
      
      .img-scroll-container {
        overflow-x: auto;
        scroll-behavior: smooth;
        white-space: nowrap;
      }
      
      .img-full {
        display: block;
        width: auto;
        height: auto;
        min-width: max-content; 
        max-height: 300px;
        margin: auto;
      }
      
      .arrow-buttons {
        display: flex;
        justify-content: center;
        gap: 40px;
        margin-top: 12px;
      }
      
      .svg-arrow {
        width: 40px;
        height: auto;
        cursor: pointer;
      }
    .txt-mov-1{
        text-align: center;
    }
    .d-contents {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;
        margin-bottom: 15px;
    }
    .list-c-2 {
        margin-left: 0;
    }
    .txt-mov-2{
        font-size: 16px !important;
    }
    .list-asma {
        display: grid;
        gap: 20px;
    }
    .txt-mov-3{
        font-size: 20px !important;
    }
    .txt-dentales {
        font-size: 16px;
    }
    .acordeon-toggle {
        color: white;
        border: none;
        width: 100%;
        padding: 16px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
        border-radius: 8px;
        background: #00AE42;
        box-shadow: 4px 4px 0px 0px #93C69B;
        color: #FFF;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-align: center;
    }
      
      .toggle-icon {
        margin-left: 12px;
        transition: transform 0.3s ease;
      }
      
      .toggle-icon.rotate {
        transform: rotate(180deg);
      }
      
      .flow-img-container {
        margin-top: 12px;
        text-align: center;
      }
      
      .flow-img {
        width: 100%;
        max-width: 420px;
        height: auto;
        display: inline-block;
      }
      .datos {
        font-size: 16px;
    }
    .flow-title {
        font-weight: bold;
      }
      
      .flow-toggle {
        border: none;
        width: 100%;
        padding: 14px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
        border-radius: 8px;
        background: #00AE42;
        box-shadow: 4px 4px 0px 0px #93C69B;
        color: #FFF;
        text-align: center;
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
      
      .toggle-icon {
        margin-left: 10px;
        transition: transform 0.3s ease;
      }
      
      .toggle-icon.rotate {
        transform: rotate(180deg);
      }  
      .flow-img {
        max-width: 100%;
        height: auto;
        display: inline-block;
      }
      
      .flow-footer-text {
        color: #00AE42;
        font-family: 'Poppins', sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
      
      /* Estilo del botón IBP */
      .ibp-button {
        background-color: #E6E9FF;
        color: #002F87;
        font-weight: bold;
        border: none;
        border-radius: 0 20px 0 0;
        padding: 10px 14px;
        font-size: 15px;
        width: 100%;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        box-shadow: 4px 4px 0px #001689;
    }
      
      .ibp-icon {
        transition: transform 0.3s ease;
      }
      
      .ibp-icon.rotate {
        transform: rotate(180deg);
      }
      .text-pirosis {
        color: #001689;
        text-align: center;
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .flow-toggle {
        border: none;
        width: 100%;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        border-radius: 8px;
        background: #00AE42;
        box-shadow: 4px 4px 0px 0px #93C69B;
        color: #FFF;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
      
      .toggle-icon,
      .sub-icon {
        margin-left: 12px;
        transition: transform 0.3s ease;
      }
      
      .toggle-icon.rotate,
      .sub-icon.rotate,
      .txt-icon.rotate {
        transform: rotate(180deg);
      }
      
      .sub-toggle {
        padding: 14px;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        border-radius: 8px;
        border: 1px solid #00AE42;
        background: #FFF;
        box-shadow: 4px 4px 0px 0px #65BF73;
        color: #00AE42;
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
      
      .flow-img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
      }
      
      .flow-footer-text {
        font-family: 'Poppins', sans-serif;
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
      
      /* Estilo específico para los bloques clínicos */
      .txt-toggle-btn {
        background-color: #E5E9FF;
        border: none;
        border-radius: 0 30px 0 0;
        padding: 14px;
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        fill: #E5E9FF;
        filter: drop-shadow(4px 4px 0px #001689);
        margin: auto;
        color: #001689;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-size: 11px;
        font-style: normal;
        font-weight: 700;
        line-height: 14px;
    }
      
      .txt-icon {
        transition: transform 0.3s ease;
        margin-left: 12px;
      }
      
      .txt-block {
        border-left: 2px solid #00AE42;
        border-right: 2px solid #00AE42;
        border-bottom: 2px solid #00AE42;
        padding: 14px;
        border-radius: 8px;
        border: 1px solid #00AE42;
        background: #FFF;
        box-shadow: 4px 4px 0px 0px #65BF73;
        color: #001689;
        font-family: 'Poppins', sans-serif;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: left;
        width: 240px;
        margin: auto;
    }
    .box-diagnostico {
        border-radius: 8px;
        border: 1px solid #001689;
        background: #FFF;
        box-shadow: 4px 4px 0px 0px #001689;
        color: #00AE42;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-size: 10px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding: 8px 16px;
        width: 210px;
        margin: auto;
    }
    .box-verde-suave {
        background: #EAFFF2;
        box-shadow: 4px 4px 0px #00AE42;
        width: 177px;
        margin: auto;
        color: #001689;
        font-family: 'Poppins', sans-serif;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
        padding: 8px 16px;
        border-radius: 0 20px 0 0;
        text-align: left;
    }
    .erge-refractario-toggle {
        border-radius: 8px;
        background: #00AE42;
        box-shadow: 4px 4px 0px 0px #93C69B;
        color: #FFF;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        border: none;
        padding: 8px 16px;
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        text-align: left;
    }
    .erge-sub-toggle {
        border-radius: 8px;
        border: 1px solid #00AE42;
        background: #FFF;
        box-shadow: 4px 4px 0px 0px #65BF73;
        color: #00AE42;
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding: 8px;
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
        margin: auto;
    }
    .erge-box-blue {
        background: #E5E9FF;
        box-shadow: 4px 4px 0px #001689;
        border-radius: 0 30px 0 0;
        padding: 8px;
        color: #001689;
        text-align: center;
        font-family: 'Poppins', sans-serif;
        font-size: 11px;
        font-style: normal;
        font-weight: 700;
        line-height: 14px;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        margin: auto;
    }
    .erge-box-green {
        border-radius: 8px;
        border: 1px solid #00AE42;
        background: #FFF;
        box-shadow: 4px 4px 0px 0px #65BF73;
        color: #001689;
        font-family: 'Poppins', sans-serif;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: auto;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        justify-content: left;
    }
    .erge-box-verde-suave {
        background: #EAFFF2;
        box-shadow: 4px 4px 0px #00AE42;
        color: #001689;
        font-family: 'Poppins', sans-serif;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px;
        padding: 8px 16px;
        border-radius: 0 30px 0 0;
    }
    .txt-20 {
        font-size: 14px;
    }
    .bg-card-home {
        width: 340px;
        margin: auto;
    }
    .recurso-text {
        flex-grow: 1;
        padding-left: 0;
    }
    .number-erge {
        font-size: 18px;
    }
    .mv-p {
        padding: 0 0 0 5px;
    }
    .video-lazy-wrapper {
      height: auto;
    }
    .pulse-button-web{
        padding: 0 52px;
        left: 35%;
        width: 140px;
        bottom: 62px;
    }
    .barra-contenido {
        margin-top: -10px;
        gap: 15px;
    }
         
  }


  /*---- Móviles y Tablets (≤768px) ----*/
  @media (max-width: 768px) {
    /* Carruseles */
    .carousel-control-prev, .carousel-control-next,
    .slider-beneficios-prev, .slider-beneficios-next {
      display: none !important;
    }
    .slider-beneficios-track > .mb-3 {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      margin-right: 0;
    }
    .overflow-hidden,
    .overflow-hidden.slider-ab {
      overflow: hidden !important;
      width: auto;
    }
    .overflow-hidden.sl {
        overflow: hidden !important;
        width: 350px;
      }
    .card-h {
        width: fit-content;
        padding: 25px;
    }
    .slider-beneficios-track {
      gap: 0px;
    }
    .bg-card {
      width: 320px;
      margin: auto;
    }
    .text-card-h {
        font-size: 13px;
    }
  }

  /*---- Móvil muy pequeño (360px hacia abajo) ----*/
    @media (max-width: 360px) {
        .card-slide {
        width: 334px;
        }
    }

  /*---- Tablets (768px - 991.98px) ----*/
  
  @media (min-width: 768px) and (max-width: 991.98px) {
    .study-data {
      width: auto;
    }
  }
  
/*---- Escritorio grande (≥1400px) ----*/
  @media (min-width: 1400px) {
    .bg-img-one, .bg-img-two {
      height: 297px;
    }
    .carousel-control-prev {
      left: 24px;
    }
    .carousel-control-next {
      right: 20px;
    }
    .hero-text-home {
      font-size: 36px;
    }
    .slider-beneficios-prev {
      left: -65px;
    }
    .slider-beneficios-next {
      right: -65px;
    }
    .pulse-button-web {
      bottom: 70px;
      width: 217px;
    }
    .video-lazy-wrapper {
      min-height: 371px;
    }
    .pulse-button-web::before {
      left: 47%;
    }

  }
  
  /*---- Ultra wide (≥1700px) ----*/
  @media (min-width: 1700px) {
    .bg-card-home {
      width: 360px;
    }
    .carousel-control-prev {
      left: 20px;
    }
    .carousel-control-next {
      right: 20px;
    }
    .slider-beneficios-prev {
      left: -70px;
    }
    .slider-beneficios-next {
      right: -70px;
    }
  }

  /*---- Super ultra wide (≥1900px y ≥2000px) ----*/
  @media (min-width: 1900px) {
    .carousel-control-prev {
      left: 15px;
    }
    .carousel-control-next {
      right: 15px;
    }
  }
  
  @media (min-width: 2000px) {
    .carousel-control-prev {
      left: 15px;
    }
    .carousel-control-next {
      right: 15px;
    }
  }