@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

       body {
           font-family: 'Montserrat', sans-serif;
           padding-top: 110px;
       }

       .top-bar {

           top: 0;
           left: 0;
           width: 100%;
           height: 20px;
           background: #002A5C;
           /* color de la barra */
           color: #e8f9d0;
           overflow: hidden;
           z-index: 9999;
           display: flex;
           align-items: center;
           letter-spacing: 0.5px;
           padding: 12px;
       }

       .top-bar__text {
           white-space: nowrap;
           display: inline-block;
           padding-left: 100%;
           animation: scroll-text 15s linear infinite;
           font-size: 14px;
           font-weight: 400;


       }

       @keyframes scroll-text {
           0% {
               transform: translateX(0);
           }

           100% {
               transform: translateX(-100%);
           }
       }



       /* ========================= */
       /*   POPUP MÁS PEQUEÑO       */
       /* ========================= */

       /* ========================= */
       /*   OVERLAY GENERAL         */
       /* ========================= */

       /* Popup principal en la esquina inferior derecha */
       /* Base para TODOS los overlays (aviso + configuración) */
       .cookie-overlay {
           position: fixed;
           inset: 0;
           background: rgba(0, 0, 0, 0.55);
           display: none;
           align-items: center;
           justify-content: center;
           z-index: 99999;
       }

       /* AVISO principal en esquina inferior derecha */
       #cookie-overlay {
           inset: auto;
           /* anulamos el inset:0 */
           bottom: 20px;
           right: 20px;
           left: auto;
           top: auto;
           background: none;
           /* sin oscurecer la pantalla para el aviso */
           align-items: flex-end;
           justify-content: flex-end;
       }





       /* ========================= */
       /*   POPUP REDUCIDO          */
       /* ========================= */

       .cookie-popup,
       .cookie-settings-popup {
           background: linear-gradient(to right, #1a357c, #3c6cf0);
           max-width: 420px;
           width: 92%;
           padding: 18px 20px;
           border-radius: 8px;
           font-family: system-ui;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
       }

       /* ========================= */
       /*   TEXTOS REDUCIDOS        */
       /* ========================= */

       .cookie-popup h2,
       .cookie-settings-popup h2 {
           font-size: 17px;
           margin-bottom: 10px;
       }

       .cookie-popup p,
       .cookie-settings-popup p {
           font-size: 13px;
           line-height: 1.35;
       }

       /* ========================= */
       /*   BOTONES REDUCIDOS       */
       /* ========================= */

       .btn-primary,
       .btn-outline,
       .btn-link {
           font-size: 13px;
           padding: 6px 14px;
           border-radius: 4px;
           cursor: pointer;
           border: 1px solid transparent;
       }

       .btn-primary {
           background: #1a73e8;
           color: #fff;
           border-color: #1a73e8;
       }

       .btn-outline {
           background: #fff;
           color: #1a73e8;
           border-color: #1a73e8;
       }

       .btn-link {
           color: #1a73e8;
           text-decoration: underline;
       }

       .cookie-actions {
           display: flex;
           flex-wrap: wrap;
           gap: 6px;
           justify-content: flex-end;
           margin-top: 10px;
       }

       /* ========================= */
       /* SWITCHES REDUCIDOS        */
       /* ========================= */

       .switch {
           position: relative;
           width: 40px;
           height: 20px;
           display: inline-block;
       }

       .switch input {
           opacity: 0;
       }

       .slider {
           position: absolute;
           cursor: pointer;
           inset: 0;
           background: #ccc;
           border-radius: 20px;
           transition: .3s;
       }

       .slider:before {
           content: "";
           position: absolute;
           height: 14px;
           width: 14px;
           left: 3px;
           bottom: 3px;
           background: white;
           border-radius: 50%;
           transition: .3s;
       }

       input:checked+.slider {
           background: #1a73e8;
       }

       input:checked+.slider:before {
           transform: translateX(20px);
       }

       /* ========================= */
       /* BLOQUES Y ACCIONES        */
       /* ========================= */

       .cookie-block {
           margin-bottom: 18px;
       }

       .cookie-settings-actions {
           display: flex;
           gap: 6px;
           margin-bottom: 14px;
       }

       .full {
           width: 100%;
           padding: 8px 0 !important;
       }







       /* Botón contorno (Customize / Reject) */
       .btn-outline {
           background: #ffffff;
           color: #1a73e8;
           border-color: #1a73e8;
       }

       .btn-outline:hover {
           background: #e8f0fe;
       }

       /* Botón principal (Accept All) */
       .btn-primary {
           background: #1a73e8;
           color: #ffffff;
           border-color: #1a73e8;
       }

       .btn-primary:hover {
           background: #1557b0;
       }


       h1 {
           font-weight: 700;
           font-size: 48px;
           /*  Puedes ajustar el peso de la fuente si lo deseas */
       }

       h2 {
           font-weight: 700;
           font-size: 32px;
           /*  Puedes ajustar el peso de la fuente si lo deseas */
       }

       h3 {
           font-weight: 700;
           font-size: 24px;
           /*  Puedes ajustar el peso de la fuente si lo deseas */
       }




       .fa-solid {
           margin-right: 20px;
       }

       .fa-brands:hover {
           color: #016fa2 !important;
       }

       .section-title {
           font-weight: bold;
           font-size: 1.5rem;
       }

       .step-title {
           font-weight: bold;
           font-size: 1.2rem;
       }

       .step-description {
           font-size: 1rem;
       }

       .step-image {
           width: 100%;
           height: auto;
       }

       .btn.rounded-pill {
           transition: all 0.3s ease;
           border: 1px solid #ccc;
       }

       .btn.rounded-pill {
           border-color: #1d9dd8;
       }

       .btn.rounded-pill:hover {
           background: linear-gradient(to right, #1a357c, #3c6cf0);
           color: #fff;
       }

       .btn.rounded-pill.active {
           background: linear-gradient(to right, #1a357c, #3c6cf0);
           color: #fff;
       }

       .contact-wrapper {
           border-radius: 1rem;
           overflow: hidden;
           background-color: #fff;
       }

       .form-section {
           background: linear-gradient(to right, #1a357c, #3c6cf0);
           color: white;
           padding: 3rem;
       }

       .form-section h2 {
           font-weight: bold;
           margin-bottom: 2rem;
       }

       .form-section h2 span {
           border-bottom: 4px solid #d86b48;
           padding-bottom: 4px;
       }

       .form-control {
           background-color: transparent;
           border: none;
           border-bottom: 1px solid #ccc;
           border-radius: 0;
           color: white;
       }

       .form-control::placeholder {
           color: #aaa;
       }

       .form-check-label {
           color: #ddd;
       }

       .btn-submit {
           background-color: #d86b48;
           border: none;
           padding: 0.6rem 2rem;
           font-weight: bold;
           border-radius: 0.5rem;
       }

       .info-section {
           padding: 3rem;
       }

       .map-box {
           border-radius: 0.8rem;
           overflow: hidden;
           margin: 1rem 0;
       }

       .map-label {
           position: absolute;
           top: 10px;
           right: 10px;
           background: white;
           padding: 0.5rem 1rem;
           border-radius: 0.5rem;
           font-weight: bold;
           color: #d86b48;
           font-size: 0.9rem;
       }

       .icon-text {
           display: flex;
           align-items: center;
           gap: 0.5rem;
           margin-bottom: 1rem;
           font-size: 1rem;
       }

       .social-icons i {
           font-size: 1.3rem;
           margin-right: 1rem;
           color: black;
       }

       .scroll-to-top {
           position: fixed;
           bottom: 20px;
           right: 20px;
           display: none;
           /* Oculto por defecto */
       }

       .hero-section {
           background: url('../html/img/image.html\ 24.png') center/cover no-repeat;
           color: white;
           padding: 120px 0;
           text-align: center;
       }

       .gradient-bg {
           background: linear-gradient(to right, #1a357c, #3c6cf0);
           color: white;
       }

       .scroll-to-top {
           position: fixed;
           bottom: 30px;
           right: 30px;
           z-index: 999;
           border-radius: 50%;
           padding: 12px 15px;
           font-size: 18px;
           transition: opacity 0.3s ease, background-color 0.3s ease;
           /* Sobrescribe el azul por defecto de Bootstrap (.btn-primary) para
              usar el azul de marca de Biofy */
           background-color: #2D4A8C !important;
           border-color: #2D4A8C !important;
       }

       .scroll-to-top:hover {
           background-color: #1a357c !important;
           border-color: #1a357c !important;
       }
#whatsapp-chat {
    position: fixed;
    bottom: 150px;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.30);
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease;
}
#whatsapp-chat:hover {
    background-color: #1ebe5d;
    transform: scale(1.06);
}
#whatsapp-chat .whatsapp-icon,
#whatsapp-chat .whatsapp-icon svg {
    width: 38px;
    height: 38px;
    display: block;
}






       /* Botón flotante para abrir el widget */
#accessibility-toggle {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #2D4A8C, #0C1426);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.22);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}
#accessibility-toggle:hover {
    transform: scale(1.06);
}
#accessibility-toggle .accessibility-icon,
#accessibility-toggle .accessibility-icon svg {
    width: 34px;
    height: 34px;
    display: block;
}


       /* Panel de accesibilidad (oculto por defecto, se abrirá con JS) */
       /* Se abre hacia arriba, por encima de toda la columna de widgets
          (Agendar, WhatsApp, Accesibilidad) para no taparlos */
       #accessibility-widget {
           display: none;
           /* <-- Solo esta línea para ocultarlo al inicio */
           position: fixed;
           bottom: 290px;
           right: 20px;
           z-index: 10000;
           background: #fff;
           border: 1px solid #ccc;
           border-radius: 8px;
           padding: 12px;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
           flex-direction: column;
           gap: 8px;
           font-family: sans-serif;
       }

       /* Estilo para botones del widget (min. 44px de alto para un área táctil accesible) */
       #accessibility-widget button {
           background: #2D4A8C;
           color: white;
           border: none;
           padding: 12px 14px;
           min-height: 44px;
           font-size: 14px;
           cursor: pointer;
           border-radius: 4px;
           transition: background 0.3s ease;
       }

       #accessibility-widget button:hover {
           background: #1a357c;
       }

       /* Accesibilidad visual */
       .high-contrast {
           background-color: #000 !important;
           color: #fff !important;
       }

       .high-contrast a {
           color: #0ff !important;
       }

       .grayscale {
           filter: grayscale(100%);
       }




       .texto-peque {
           font-size: 12px;
           /* tamaño normal */
           color: #827c7c;
       }

       @media (max-width: 768px) {
           .texto-peque {
               font-size: 8px !important;
               color: #827c7c;
               /* más pequeño en móvil */
           }
       }


       .p.lead {
           width: 100%;
       }


       .text-decoration-none:hover {
           color: #aeb0b4 !important;
       }

       .nav-link:hover {
           color: #1d9dd8 !important;
       }

       .dropdown-item:hover {
           color: #ffffff !important;
           background-color: #42329c !important;
       }





       .step-circle {
           width: 80px;
           height: 80px;
           background: #007BFF;
           color: white;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 24px;
           margin: auto;
       }

       .rounded-circle-img {
           width: 150px;
           height: 150px;
           object-fit: cover;
           border-radius: 50%;
       }

       .circle-option {
           width: 160px;
           height: 160px;
           border-radius: 50%;
           overflow: hidden;
           position: relative;
           background-color: rgb(255, 255, 255);
       }

       .circle-option .fa-solid {
           margin-right: 0px;
       }

       .circle-option:hover {
           background-color: #1d9dd8;
           color: white;
           transform: scale(1.05);
       }



       .accordion-button:hover {
           background-color: aliceblue;
           border: none;
       }

       .card-body:hover {
           background-color: aliceblue !important;
       }

       .faq-question {
           cursor: pointer;
       }

       .logo-slider {
           overflow: hidden;
           position: relative;
       }


       .logo-track {
           display: flex;
           animation: scroll 25s linear infinite;
           gap: 40px;
       }

       .logo-track img {
           height: 200px;
           object-fit: contain;
           filter: grayscale(100%);
           transition: filter 0.3s;
       }

       .logo-track img:hover {
           filter: grayscale(0%);
       }

       .carousel-control-prev-icon {
           filter: brightness(0) invert(0);
           /* negro puro */
       }

       .carousel-control-next-icon {
           filter: brightness(0) invert(0);
           /* negro puro */
           padding-right: 0%;
       }


       @keyframes scroll {
           0% {
               transform: translateX(0%);
           }

           100% {
               transform: translateX(-50%);
           }
       }



       footer {
           background: #002A5C;
           color: white;
           padding: 40px 0;
       }


       @media (max-width: 768px) {
           .no-gap-mobile {
               margin-bottom: 0 !important;
               padding-left: 0 !important;
               padding-right: 0 !important;
           }

           .no-gap-mobile>div {
               margin-bottom: 0 !important;
           }

           .container-fluid {
               padding: 0 !important;
           }


           h1 {
               font-size: 28px;
           }

           h2 {
               font-size: 24px;
           }

           h3 {
               font-size: 20px;
           }

           h4 {
               font-size: 18px;
           }

           p {
               font-weight: 300;
               font-size: 16px !important;
               /*  Puedes ajustar el peso de la fuente si lo deseas */
           }

           .hero-section {
               padding-top: 40px;
               padding-bottom: 40px;
           }

           section,
           .container,
           .bg-white,
           p {
               max-width: 100%;
               overflow-wrap: break-word;
               word-wrap: break-word;
               word-break: break-word;
               box-sizing: border-box;
           }

           body {
               overflow-x: hidden;
           }

           p a {
               word-break: break-word;
           }

           .icon-box img {
               width: 50px;
           }

           .container {
               text-align: left;
           }

           .carousel-control-next {
               right: 5px !important;
           }

           .gradient-bg {
               background: linear-gradient(to right, #1a357c, #3c6cf0);
               color: white;
           }

           #carouselLogos {
               position: relative;
               overflow-x: hidden;
           }

           .form-control {
               border-radius: 25px;
           }

           .cert-logos img {
               max-height: 60px;
               margin: 0 20px;
           }

           .card {
               border: none !important;
               box-shadow: none;
               /* si deseas quitar sombra también */
           }

           .img-hover-container img {
               transition: transform 0.4s ease-in-out;
           }

           .img-hover-container:hover img {
               filter: brightness(0.8);
           }

           .product-card img {
               width: 100%;
               height: auto;
           }



           .form-section,
           .info-section {
               padding: 2rem;
           }
       }

       /* ========================= */
       /*   WIDGET AGENDAR         */
       /* ========================= */

       #btn-agendar {
           position: fixed;
           bottom: 220px;
           right: 20px;
           background: linear-gradient(135deg, #2D4A8C, #0C1426);
           color: white;
           border: none;
           border-radius: 50px;
           padding: 10px 20px;
           font-size: 13px;
           z-index: 9999;
           font-weight: bold;
           cursor: pointer;
           box-shadow: 0 4px 15px rgba(45, 74, 140, 0.4);
           display: flex;
           align-items: center;
           gap: 10px;
           transition: all 0.3s ease;
           width: auto;
           height: auto;
       }

       #btn-agendar:hover {
           background: linear-gradient(135deg, #1a357c, #0C1426);
           transform: translateY(-2px);
           box-shadow: 0 6px 20px rgba(45, 74, 140, 0.6);
       }

       #btn-agendar .ok-icon {
           font-size: 20px;
       }

       /* Responsive: hide text on very small screens if needed, or adjust position */
       @media (max-width: 576px) {
           #btn-agendar {
               bottom: 220px;
               right: 20px;
               padding: 12px;
               border-radius: 50%;
               width: 60px;
               height: 60px;
               justify-content: center;
           }

           #btn-agendar .btn-text {
               display: none;
           }

           #btn-agendar .ok-icon {
               margin: 0;
               font-size: 24px;
           }
       }

       /* Modal Agendar Styles - APPLIED GLOBALLY */
       #modalAgendar {
           z-index: 10000 !important;
           /* Safely above the button */
       }

       #modalAgendar .modal-content {
           background: linear-gradient(135deg, #0056b3, #002a80) !important;
           color: white !important;
       }

       #modalAgendar .modal-header .btn-close {
           filter: invert(1) grayscale(100%) brightness(200%);
       }

       #modalAgendar .modal-title {
           color: white !important;
       }

       #modalAgendar .text-muted {
           color: rgba(255, 255, 255, 0.8) !important;
       }

       #modalAgendar .form-label {
           color: rgba(255, 255, 255, 0.9) !important;
       }

       /* Fix invisible icons: make inputs transparent on blue bg */
       #modalAgendar .input-group-text {
           background-color: transparent !important;
           border: none;
           border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
           color: white !important;
       }

       #modalAgendar .form-control {
           background-color: transparent !important;
           border: none;
           border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
           color: white !important;
       }

       #modalAgendar .form-control::placeholder {
           color: rgba(255, 255, 255, 0.6) !important;
       }

       #modalAgendar .form-select {
           background-color: transparent !important;
           border: none;
           border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
           color: white !important;
       }

       #modalAgendar .form-select option {
           background-color: #0056b3;
           color: white;
       }



/* BIOFY - widgets: exact Font Awesome icon artwork, no layout redesign */
#btn-agendar {
    position: fixed !important;
    bottom: 220px !important;
    right: 50px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 42px !important;
    width: auto !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #2D4A8C, #0C1426) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    box-shadow: 0 4px 15px rgba(45,74,140,.4) !important;
    cursor: pointer !important;
}
#btn-agendar > svg { width: 18px !important; height: 20px !important; display:block !important; flex:none !important; }
#btn-agendar .btn-text { display:inline !important; }

#whatsapp-chat {
    position: fixed !important;
    bottom: 150px !important;
    right: 50px !important;
    z-index: 9999 !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: #25D366 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.30) !important;
}
#whatsapp-chat > svg { width: 37px !important; height: 42px !important; display:block !important; }

#accessibility-toggle {
    position: fixed !important;
    bottom: 80px !important;
    right: 50px !important;
    z-index: 9999 !important;
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #2D4A8C, #0C1426) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.20) !important;
    cursor: pointer !important;
}
#accessibility-toggle > svg { width: 30px !important; height: 34px !important; display:block !important; }

@media (max-width: 576px) {
  #btn-agendar, #whatsapp-chat, #accessibility-toggle { right:20px !important; }
}