AVSIM - Obra Social para Mascotas

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>AVSIM - Obra Social para Mascotas</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes"> <meta content="AVSIM - Obra Social para Mascotas" name="description">  <link rel="shortcut icon" href="img/favicon.ico" > <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">  <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"> <link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />  <link href="css/style.css?v=1.1" rel="stylesheet"> <link href="css/bloques.css?v=1.1" rel="stylesheet"> <link href="css/planes.css?v=1.1" rel="stylesheet">  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> /* Fuentes */ @font-face { font-family: 'Mazzard Soft'; src: url('fonts/mazzardsofth-medium.otf') format('opentype'); } /* Estilos generales */ body { font-family: 'Mazzard Soft', sans-serif; /* Texto normal */ } /* Estilos para títulos */ h1, h2, h3, h4, h5, h6 { font-family: 'Mazzard Soft', sans-serif; /* Títulos */ } /* Menú flotante */ #floating-menu { width: 100%; margin: 0 auto; position: fixed; top: 0px; left: 0px; right: 0px; background-color: #FCAA12; padding: 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: flex; justify-content: space-between; z-index: 9998; font-size: 18px; /* Tamaño de letra ajustado */ } #floating-menu ul { list-style: none; padding: 0; margin: 0; display: flex; } #floating-menu ul li { margin-right: 10px; } #floating-menu ul li a { text-decoration: none; color: #FCAA12; /* Color del texto */ padding: 5px 10px; } #floating-menu ul li a:hover { color: #fff; } /* Logo */ .logo-al-frente { position: fixed; top: 0px; right: 15px; z-index: 9999; transition: opacity 0.3s ease, visibility 0.3s ease; /* Transiciones más suaves */ opacity: 1; visibility: visible; transform: scale(1.3); /* Aumenta el tamaño sin cambiar la posición */ transform-origin: top right; /* Fija el origen del escalado en la esquina superior derecha */ } /* Estilos para pantallas menores a 990px */ @media only screen and (max-width: 990px) { /* Cambiar la alineación del logo */ .logo-al-frente { right: auto; /* Quitar margen derecho */ left: 15px; /* Ajustar margen izquierdo */ } #floating-menu { justify-content: flex-start; /* Alinear el contenido al lado izquierdo */ } } /* Estilos para pantallas menores a 576px */ @media only screen and (max-width: 576px) { #floating-menu { position: relative; top: 0; left: 0; background-color: #FCAA12; /* Mantener color de fondo */ box-shadow: none; /* Quitar sombra en pantallas pequeñas */ justify-content: flex-start; /* Alinear todo el contenido al lado izquierdo */ } #floating-menu ul { display: none; /* Ocultar menú en pantallas pequeñas */ } .dropdown-menu { display: block; /* Mostrar menú desplegable */ width: 100%; padding: 10px; background-color: #FCAA12; /* Mantener color de fondo */ border: none; border-radius: 4px; margin-bottom: 10px; } /* Alineación específica para el logo en móviles */ .logo-al-frente { left: 30px; /* Mover logo hacia la izquierda */ right: auto; /* Asegurarse de que no esté posicionado a la derecha */ top: 0; /* Puedes ajustar este valor para alinear verticalmente */ transform: scale(1.3); /* Aumenta el tamaño sin cambiar la posición */ } } /* Ocultar el logo cuando el menú está oculto */ .logo-hidden { opacity: 0; /* Hacer el logo invisible */ visibility: hidden; /* Ocultar logo */ } .opciones-container { background-color: rgba(252, 170, 18, 0.1); /* Fondo con tonalidad de tu color (#FCAA12) */ border: 1px solid #FCAA12; /* Borde usando el color del menú */ border-radius: 8px; /* Bordes redondeados */ padding: 10px 15px 5px 15px; /* Ajuste del padding para menos espacio inferior */ max-width: 600px; /* Limita el ancho máximo */ margin: 20px auto; /* Centra el bloque */ } </style> <script> document.addEventListener('DOMContentLoaded', function () { // Variables para controlar el último scroll y el menú flotante let lastScrollTop = 0; const menu = document.getElementById("floating-menu"); const logo = document.querySelector('.logo-al-frente'); if (menu && logo) { // Función que controla la visibilidad del menú y el logo window.onscroll = function() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > lastScrollTop) { // Desplazamiento hacia abajo menu.style.top = "-80px"; // Ocultar menú si existe logo.classList.add('logo-hidden'); // Ocultar logo } else { // Desplazamiento hacia arriba menu.style.top = "0"; // Mostrar menú si existe logo.classList.remove('logo-hidden'); // Mostrar logo } lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // Actualizar posición del scroll }; // Llamar a la función al cargar la página para establecer la visibilidad correcta window.dispatchEvent(new Event('scroll')); } else { console.error("El menú flotante o el logo no se encontraron en el DOM."); } }); </script>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-T4JQ7LJQ');</script>  </head> <body>  <noscript><iframe src="ns " height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <div class="container-fluid p-0 nav-bar"> <nav class="navbar navbar-expand-lg bg-none navbar-dark py-3"> <a href="index.html" class="navbar-brand px-lg-4 m-0"> <h1 class="m-0 display-4 text-uppercase text-white"></h1> </a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>  <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse"> <div class="navbar-nav ml-auto p-4"> <div id="floating-menu"> <ul> <a href="index.php" class="nav-item nav-link active"> <i class="fas fa-home"></i>  </a> <a href="index.php#avsim" class="nav-item nav-link">Quienes Somos</a> <a href="index.php#planes" class="nav-item nav-link">Planes</a> <a href="prestadores.php" class="nav-item nav-link">Cartilla</a> <a href="franquicia.php" class="nav-item nav-link">Quiero una Franquicia</a>  <a href="index.php#novedades" class="nav-item nav-link">Novedades</a> <a href="index.php#contacto" class="nav-item nav-link">Contacto</a>  <div class="nav-item-divider" style="margin-right: 20px;"></div>  <a href="#" class="nav-item nav-link active">Acceso</a>  <div class="d-flex align-items-center"> <a href="gestion/login.php" target="_blank" class="btn btn-secondarybis btn-sm mr-2">Afiliados</a> <a href="gestion/login.php" target="_blank" class="btn btn-secondarybis btn-sm">Prestadores</a> </div> </ul> <div class="dropdown-menu"> <a href="index.php" class="nav-item nav-link active"> <i class="fas fa-home"></i>  </a> <a href="index.php#avsim" class="nav-item nav-link">Quienes Somos</a> <a href="index.php#planes" class="nav-item nav-link">Planes</a> <a href="prestadores.php" class="nav-item nav-link">Cartilla</a> <a href="franquicia.php" class="nav-item nav-link">Quiero una Franquicia</a>  <a href="index.php#novedades" class="nav-item nav-link">Novedades</a> <a href="index.php#contacto" class="nav-item nav-link">Contacto</a>  <div class="nav-item-divider" style="margin-right: 20px;"></div>  <a href="#" class="nav-item nav-link active">Acceso</a>  <div class="d-flex align-items-center"> <a href="gestion/login.php" target="_blank" class="btn btn-secondarybis btn-sm mr-2">Afiliados</a> <a href="gestion/login.php" target="_blank" class="btn btn-secondarybis btn-sm">Prestadores</a> </div> </div> </div> </div> </div>  <a href="index.php" class="navbar-brand ml-auto logo-al-frente"> <img src="img/logo-avsim.png" alt="Logo" style="height: 48px; max-width: 100%; margin-top: -4px;"> </a> </nav>  <div class="social-bar text-left" style="background-color: #5633C1; padding: 2px 15px; margin-top: -8px;">  <span class="text-white" style="font-size: 0.8rem;">PRIMERA OBRA SOCIAL DE ARGENTINA</span> </div> </div> <div class="container-fluid p-0 mb-5" id="inicio"> <div id="blog-carousel" class="carousel slide overlay-bottom" data-ride="carousel"> <div class="carousel-inner">  <div class="carousel-item active"> <img class="w-100" src="img/carousel-1.png" alt="Image"> <div class="carousel-caption"> <button class="menu_bloque_item_slider" onclick="openSocialModal()">Seguinos en nuestras redes</button> </div> </div> <div class="carousel-item"> <img class="w-100" src="img/carousel-2.png" alt="Image"> <div class="carousel-caption"> <a href="http://avsim.com.ar/index.php#contacto" class="menu_bloque_item_slider">¿Quieres ser prestador de Avsim?</a> </div> </div> <div class="carousel-item"> <img class="w-100" src="img/carousel-3.png" alt="Image"> <div class="carousel-caption"> <a href="http://avsim.com.ar/index.php#contacto" class="menu_bloque_item_slider">¿Quieres ser prestador de Avsim?</a> <button class="menu_bloque_item_slider" onclick="openSocialModal()">Seguinos en nuestras redes</button> </div> </div> </div>  <a class="carousel-control-prev" href="#blog-carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#blog-carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>   <div id="socialModal" class="modal"> <div class="modal-content" onclick="event.stopPropagation();"> <h2>Seguinos en nuestras redes</h2> <div class="d-flex justify-content-center"> <a class="btn btn-sm btn-outline-dark btn-square mr-2" href="https://www.facebook.com/AVSIM.ROSARIO" target="_blank"> <i class="fab fa-facebook-f"></i> </a> <a class="btn btn-sm btn-outline-dark btn-square mr-2" href="https://www.linkedin.com/company/avsim-obra-social-para-mascotas?trk=public_post_feed-actor-name" target="_blank"> <i class="fab fa-linkedin-in"></i> </a> <a class="btn btn-sm btn-outline-dark btn-square mr-2" href="https://www.instagram.com/avsimobrasocialparamascotas/" target="_blank"> <i class="fab fa-instagram"></i> </a> <a class="btn btn-sm btn-outline-dark btn-square" href="https://www.youtube.com/@avsimobrasocialparamascotas" target="_blank"> <i class="fab fa-youtube"></i> </a> </div> </div> </div>  <style> .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .modal-content { background-color: white; padding: 15px; border-radius: 10px; width: 220px; text-align: center; position: relative; } .close { position: absolute; top: 5px; right: 10px; font-size: 20px; cursor: pointer; } .bloques { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; padding: 8px; margin-top: -20px; /* Ajusta el valor negativo según lo necesites */ padding-bottom: 0px; /* Ajusta según el espacio deseado */ } /* Bloques */ .menu_bloque_item { background-color: #ff9800; color: white; border: none; cursor: pointer; border-radius: 5px; padding: 50px 20px; font-size: 12px; text-align: center; width: calc(25% - 20px); /* Cada bloque ocupa el 25% */ box-sizing: border-box; display: flex; justify-content: center; /* Centra el contenido horizontalmente */ align-items: center; /* Centra el contenido verticalmente */ text-decoration: none; } /* Asegurar que el <h2> esté centrado */ .menu_bloque_item h2 { margin: 0; /* Eliminar márgenes */ text-align: center; /* Asegurar centrado de texto */ width: 100%; /* Asegurar que ocupe todo el ancho disponible */ } /* Media query para pantallas medianas (notebooks) */ @media (max-width: 1366px) { .menu_bloque_item { padding: 19px 18px; width: calc(25% - 20px); /* Mantener 4 bloques por fila */ } } /* Media query para pantallas más pequeñas (celulares) */ @media (max-width: 768px) { .menu_bloque_item { padding: 19px 18px; width: calc(50% - 20px); /* 2 bloques por fila en pantallas más pequeñas */ } } /* Media query para pantallas muy pequeñas (típicamente celulares más pequeños) */ @media (max-width: 480px) { .menu_bloque_item { padding: 19px 18px; width: calc(100% - 20px); /* 1 bloque por fila en pantallas muy pequeñas */ } } @keyframes slideIn { from { transform: translateY(50px); /* Empieza más abajo */ opacity: 0; /* Inicialmente invisible */ } to { transform: translateY(0); /* Llega al centro */ opacity: 1; /* Completamente visible */ } } .menu_bloque_item_slider, a.menu_bloque_item_slider { background-color: #ff9800; color: white; border: none; padding: 15px 25px; /* Padding consistente */ cursor: pointer; border-radius: 5px; font-size: 16px; /* Fuente consistente */ margin-top: 51vh; /* Ajuste opcional */ display: inline-block; text-align: center; width: auto; box-sizing: border-box; /* Animación */ animation: slideIn 0.8s ease-out forwards; } .menu_bloque_item_slider:nth-child(1) { animation-delay: 0.25s; } .menu_bloque_item_slider:nth-child(2) { animation-delay: 0.30s; } .menu_bloque_item_slider:nth-child(3) { animation-delay: 0.35s; } /* Media query para pantallas medianas como notebooks */ @media (max-width: 1366px) { .menu_bloque_item_slider, a.menu_bloque_item_slider { margin-top: 49vh; /* Reduce el margen superior en notebooks */ } } /* Media query para pantallas pequeñas (celulares) */ @media (max-width: 768px) { .menu_bloque_item_slider, a.menu_bloque_item_slider { font-size: 13px; /* Tamaño de fuente más pequeño */ padding: 10px 18px; /* Padding más compacto */ margin-top: 18vh; /* Ajusta el margen superior */ } } .carousel-caption { background-color: transparent !important; /* Elimina el fondo opaco */ opacity: 1 !important; /* Asegura que la opacidad sea completa */ } .btn-square { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 5px; } </style>  <script> function openSocialModal() { document.getElementById("socialModal").style.display = "flex"; } function closeSocialModal() { document.getElementById("socialModal").style.display = "none"; } // Cerrar el modal al hacer clic fuera del contenido document.getElementById("socialModal").addEventListener("click", closeSocialModal); </script>  <div class="bloques_wrapper"> <div class="bloques">  <a style="text-decoration: none !important;" href="cotizador.php" target="_blank" rel="noopener" class="menu_bloque_item"> <h2>Cotizá Ahora</h2> </a>  <a style="text-decoration: none !important;" href="afiliarme.php" target="_blank" rel="noopener" class="menu_bloque_item"> <h2>Quiero Afiliarme</h2> </a>  <a style="text-decoration: none !important;" href="index.php#planes" class="menu_bloque_item"> <h2>Quiero conocer Planes</h2> </a>  <a style="text-decoration: none !important;" href="franquicia.php" class="menu_bloque_item"> <h2>Quiero una Franquicia</h2> </a> </div> </div> <style> .avsim-container { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1200px; margin: 0 auto; padding: 20px; } .avsim-header { margin-bottom: 40px; } .avsim-header p { font-size: 1.5rem; font-weight: bold; } .avsim-section { display: flex; align-items: center; justify-content: center; text-align: left; gap: 20px; margin-bottom: 30px; width: 100%; } .avsim-image-left { max-width: 200px; width: 90%; /* Para hacer que sea responsive */ flex-shrink: 0; /* Evitar que la imagen se reduzca demasiado */ } .avsim-image-right { flex-shrink: 0; /* Evitar que la imagen se reduzca demasiado */ } .avsim-text { max-width: 800px; } .avsim-text p { font-size: 1.2rem; line-height: 1.5; margin: 0 0 15px 0; } .avsim-centered-text { text-align: center; margin-top: 20px; } .avsim-centered-text p { font-size: 1.2rem; line-height: 1.5; margin: 10px 0; } /* Estilo para pantallas grandes (monitores) */ .img-logo { max-width: 60%; /* Tamaño por defecto para monitores */ height: auto; margin-top: -24px; /* Ajusta el valor negativo según lo necesites */ } @media (max-width: 768px) { .img-logo { max-width: 90%; /* Ajusta el tamaño de la imagen en celulares */ } .avsim-section { flex-direction: column; text-align: center; } .avsim-text { max-width: 100%; } .avsim-image-left { margin-bottom: 20px; } } </style> <div class="container-fluid py-5"> <div class="container"> </br></br>  <div style="text-align: center;"> <img src="img/avsim_violeta.png" alt="AVSIM Logo" class="img-logo"> </div> </div> </div>  <div class="swiper-container" id="planes"> <div class="section-title"> <h1 class="display-4">PLANES</h1> </div> <div class="container" style="display: flex; justify-content: center; align-items: center;">  <div> </div> </div> <div class="swiper-wrapper">  <div class="swiper-slide plan-card card-color210"> <div class="plan-card-container"> <div class="plan-card-title-container color210"> <h3 class="plan-card-title">PLAN 105</h3> </div> <div class="plan-card-detail"> <div class="plan-card-image"> <div class="plan-card-overlay"> <span>Haz clic en "Conocé más" para obtener más detalles.</span> </div> <img src="img/PLAN_105.jpg" alt="Imagen del PLAN 105"> </div> </div> <div class="plan-card-button-container"> <a class="button blanco" onclick="showInfoPlanes('PLAN 105')">CONOCÉ MÁS</a> </div> </div> </div>  <div class="swiper-slide plan-card card-color310"> <div class="plan-card-container"> <div class="plan-card-title-container color310"> <h3 class="plan-card-title">PLAN 210</h3> </div> <div class="plan-card-detail"> <div class="plan-card-image"> <div class="plan-card-overlay"> <span>Haz clic en "Conocé más" para obtener más detalles.</span> </div> <img src="img/PLAN_210.jpg" alt="Imagen del PLAN 210"> </div> </div> <div class="plan-card-button-container"> <a class="button blanco" onclick="showInfoPlanes('PLAN 210')">CONOCÉ MÁS</a> </div> </div> </div>  <div class="swiper-slide plan-card card-color410"> <div class="plan-card-container"> <div class="plan-card-title-container color410"> <h3 class="plan-card-title">PLAN 315</h3> </div> <div class="plan-card-detail"> <div class="plan-card-image"> <div class="plan-card-overlay"> <span>Haz clic en "Conocé más" para obtener más detalles.</span> </div> <img src="img/PLAN_315.jpg" alt="Imagen del PLAN 315"> </div> </div> <div class="plan-card-button-container"> <a class="button blanco" onclick="showInfoPlanes('PLAN 315')">CONOCÉ MÁS</a> </div> </div> </div>  <div class="swiper-slide plan-card card-color510"> <div class="plan-card-container"> <div class="plan-card-title-container color510"> <h3 class="plan-card-title">PLAN PREMIUM</h3> </div> <div class="plan-card-detail"> <div class="plan-card-image"> <div class="plan-card-overlay"> <span>Haz clic en "Conocé más" para obtener más detalles.</span> </div> <img src="img/PLAN_PREMIUM.jpg" alt="Imagen del PLAN PREMIUM"> </div> </div> <div class="plan-card-button-container"> <a class="button blanco" onclick="showInfoPlanes('PLAN PREMIUM')">CONOCÉ MÁS</a> </div> </div> </div>  <div class="swiper-slide plan-card card-color210"> <div class="plan-card-container"> <div class="plan-card-title-container color210"> <h3 class="plan-card-title">PLAN GLOBAL</h3> </div> <div class="plan-card-detail"> <div class="plan-card-image"> <div class="plan-card-overlay"> <span>Haz clic en "Conocé más" para obtener más detalles.</span> </div> <img src="img/PLAN_GLOBAL.jpg" alt="Imagen del PLAN GLOBAL"> </div> </div> <div class="plan-card-button-container"> <a class="button blanco" onclick="showInfoPlanes('PLAN GLOBAL')">CONOCÉ MÁS</a> </div> </div> </div>  <div class="swiperplan-button-next"></div> <div class="swiperplan-button-prev"></div> </div>  <div class="container-fluid my-5" id="infoPlanesForm" style="display: none;"> <div class="container"> <div class="row align-items-stretch">  <div class="col-lg-6 d-flex"> <img id="planImage" src="" alt="Imagen del plan" class="img-fluid align-self-center enlargeable-image" style="width: 100%; object-fit: cover;"> </div>  <div class="col-lg-6 d-flex"> <div class="reservation position-relative overlay-top overlay-bottom flex-fill"> <div class="text-center p-5" style="background: #5633C1;"> <h3 class="text-white">Necesito más Información Planes</h3> <form method="post" action="procesos/guardar_info.php" onsubmit="return validarCaptcha();"> <div class="form-group"> <input type="text" name="nombre_apellido" class="form-control bg-transparent p-2" placeholder="Nombre y Apellido" required /> </div> <div class="form-group"> <input type="tel" name="tel" class="form-control bg-transparent p-2" placeholder="Tel de Contacto" required /> </div> <div class="form-group"> <input type="email" name="email" class="form-control bg-transparent p-2" placeholder="Email" required /> </div> <div class="form-group"> <input type="text" name="mascotas" class="form-control bg-transparent p-2" placeholder="Mascota/s y Edades" required /> </div> <div class="form-group"> <input type="text" name="localidad" class="form-control bg-transparent p-2" placeholder="Localidad" required /> </div> <div class="form-group"> <textarea id="mensaje" name="mensaje" class="form-control bg-transparent py-3 px-4" rows="5" placeholder="Mensaje" required></textarea> </div>  <div class="form-group"> <p id="captchaPregunta" class="text-white font-weight-bold"></p> <input type="number" id="captchaRespuesta" class="form-control bg-transparent p-4" style="color: black; background-color: rgba(255, 255, 255, 0.2); width: 150px; margin: 0 auto; display: block; text-align: center;" placeholder="Respuesta" required /> </div> <button type="submit" class="btn btn-primary btn-block font-weight-bold py-3" name="inf_submit">Solicitar Información</button>  <a href="afiliarme.php" class="btn btn-warning btn-block font-weight-bold py-3 mt-3">Quiero Afiliarme</a> </form> </div> </div> </div> <script> // Generar números aleatorios y mostrar la pregunta del CAPTCHA let num1 = Math.floor(Math.random() * 10) + 1; // Número entre 1 y 10 let num2 = Math.floor(Math.random() * 10) + 1; // Número entre 1 y 10 let suma = num1 + num2; document.getElementById('captchaPregunta').innerText = `¿Cuánto es ${num1} + ${num2}?`; // Validar la respuesta del CAPTCHA function validarCaptcha() { let respuestaUsuario = parseInt(document.getElementById('captchaRespuesta').value); if (respuestaUsuario !== suma) { alert("La respuesta al CAPTCHA es incorrecta. Inténtalo de nuevo."); return false; // Detener el envío del formulario } return true; // Permitir el envío del formulario } </script> </div> </div> </div> <style> /* Imagen dentro del contenedor antes de hacer clic */ #planImage { /*cursor: pointer; Cambia el cursor a una mano al pasar sobre la imagen */ } /* Estilos del modal */ .modal { display: none; /* Oculto por defecto */ position: fixed; /* Posición fija */ z-index: 1000; /* Asegura que el modal esté delante */ left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); /* Fondo negro semi-transparente */ justify-content: center; align-items: center; flex-direction: column; } /* Imagen dentro del modal */ .modal-content { margin: auto; display: block; max-width: 90%; /* Tamaño máximo de la imagen más grande */ max-height: 90%; /* Ocupa el 90% de la pantalla */ width: auto; height: auto; object-fit: contain; /* Ajuste dentro del modal */ } /* Botón de cerrar */ .close { position: absolute; top: 20px; right: 35px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* Estilos específicos para pantallas pequeñas */ @media (max-width: 768px) { .close { position: relative; /* Cambia la posición a relativa en lugar de absoluta */ top: 20px; /* Añade un pequeño margen superior */ right: auto; /* Elimina el margen derecho */ bottom: 20px; /* Coloca la "X" debajo de la imagen */ text-align: center; /* Centra la "X" debajo de la imagen */ display: block; margin: 20px auto 0 auto; /* Alinea el botón en el centro */ font-size: 30px; /* Ajusta el tamaño del botón */ } } </style>  <div id="imageModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="modalImage"> </div> <script> // Obtener el modal var modal = document.getElementById("imageModal"); // Obtener la imagen y el modalImage para mostrar la imagen ampliada var img = document.getElementById("planImage"); var modalImg = document.getElementById("modalImage"); // Obtener el botón de cerrar var closeModal = document.getElementsByClassName("close")[0]; // Cuando se hace clic en la imagen, mostrarla en el modal // img.onclick = function() { // modal.style.display = "block"; // modalImg.src = this.src; // } // Cuando se hace clic en la "x", cerrar el modal closeModal.onclick = function() { modal.style.display = "none"; } // También puedes cerrar el modal haciendo clic fuera de la imagen modal.onclick = function(event) { if (event.target === modal) { modal.style.display = "none"; } } </script> <script> // Función para mostrar la imagen y el formulario del plan seleccionado function showInfoPlanes(plan) { var form = document.getElementById("infoPlanesForm"); var mensaje = document.getElementById("mensaje"); var image = document.getElementById("planImage"); var modal = document.getElementById("imageModal"); var modalImg = document.getElementById("modalImage"); // Muestra el formulario form.style.display = "block"; // Establece el mensaje predeterminado en el textarea mensaje.value = "Quiero información sobre el " + plan + "."; // Carga la imagen del plan correspondiente var imagePath = "img/" + plan.replace(' ', '_') + ".jpg"; // Usa el nombre del plan para formar la ruta de la imagen image.src = imagePath; // Cambia la fuente de la imagen image.alt = "Imagen del " + plan; // Coloca el foco en el formulario form.scrollIntoView({ behavior: "smooth" }); // Desplaza suavemente hasta el formulario image.focus(); // Establece el foco en el campo del mensaje } // Oculta el formulario al hacer clic fuera de él document.addEventListener('click', function(event) { var form = document.getElementById("infoPlanesForm"); var isClickInside = form.contains(event.target) || event.target.matches('.button'); if (!isClickInside) { form.style.display = "none"; // Oculta el formulario si se hace clic fuera } }); </script> </div>  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script> // Inicialización de Swiper document.addEventListener('DOMContentLoaded', function () { var swiper = new Swiper('#planes', { slidesPerView: 1, spaceBetween: 20, navigation: { prevEl: '.swiperplan-button-next', // Clase corregida nextEl: '.swiperplan-button-prev', // Clase corregida }, breakpoints: { 640: { slidesPerView: 1 }, 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 }, }, loop: true, // Permite la navegación infinita }); }); </script>   <div class="container-fluid my-5" id="novedades"> <div class="container"> <div class="section-title"> <h1 class="display-4">NOVEDADES</h1> <h4 class="text-uppercase">Mantente informado sobre nuestras últimas noticias</h4> </div> <div class="row novedades-container"> <article class="col-12 novedad-card full-width mb-4"> <div class="card h-100">  <a href="novedad_ampliada.php?id=15"> <img src="gestion/novedades/WhatsApp Image 2025-02-10 at 18.50.52.jpeg" class="card-img-top" alt="Mascotas antes que hijos" itemprop="image"> </a> <div class="card-body"> <h5 class="card-title"> <a href="novedad_ampliada.php?id=15" class="text-decoration-none text-dark" itemprop="url"> <span itemprop="headline">Mascotas antes que hijos</span> </a> </h5> <p class="card-text" itemprop="description"> Mascotas antes que hijos: la tendencia que dispara la demanda de veterinarios. El cambio en las prioridades de las familias modernas impulsa un auge en el sector veterinario y el cuidado animal Este fenómeno, conocido como la “mascotización” del hogar, no solo refleja una transformación en los valores sociales y culturales, sino que también ha generado un impacto económico notable, es... </p> <p class="card-text"><small class="text-muted" itemprop="datePublished">13 Feb, 2025</small></p> </div> </div> </article> <article class="col-12 novedad-card full-width mb-4"> <div class="card h-100">  <a href="novedad_ampliada.php?id=14"> <img src="gestion/novedades/una imagen alusiva al texto sobre Obra Social para Mascotas.png" class="card-img-top" alt="Obra Social para Mascotas, el crecimiento de un sector que revoluciona el bienestar animal" itemprop="image"> </a> <div class="card-body"> <h5 class="card-title"> <a href="novedad_ampliada.php?id=14" class="text-decoration-none text-dark" itemprop="url"> <span itemprop="headline">Obra Social para Mascotas, el crecimiento de un sector que revoluciona el bienestar animal</span> </a> </h5> <p class="card-text" itemprop="description"> Según la revista Dogs & Pets, la popularidad de las pólizas para animales refleja un cambio en la forma de garantizar su salud. Las nuevas generaciones lideran la tendencia de asegurar a sus mascotas, priorizando su calidad de vida. En el contexto actual, las mascotas adquirieron un rol protagónico en los hogares, consolidándose como parte esencial de las familias. Esta relación generó... </p> <p class="card-text"><small class="text-muted" itemprop="datePublished">21 Jan, 2025</small></p> </div> </div> </article> <article class="col-12 novedad-card full-width mb-4"> <div class="card h-100">  <a href="novedad_ampliada.php?id=13"> <img src="gestion/novedades/IMG-20241206-WA0030.jpg" class="card-img-top" alt="Por unas fiestas sin pirotecnia!" itemprop="image"> </a> <div class="card-body"> <h5 class="card-title"> <a href="novedad_ampliada.php?id=13" class="text-decoration-none text-dark" itemprop="url"> <span itemprop="headline">Por unas fiestas sin pirotecnia!</span> </a> </h5> <p class="card-text" itemprop="description"> ¡Celebremos unas fiestas sin estrés para todos! La pirotecnia puede ser divertida para algunos, pero para nuestras mascotas es una verdadera pesadilla. Los fuertes ruidos y destellos los aterrorizan, causándoles ansiedad, miedo y, en algunos casos, lesiones. AVSIM Obra Social para Mascotas te invita a unirte a esta iniciativa y celebrar estas fiestas de forma más tranquila y respetuosa. Ima... </p> <p class="card-text"><small class="text-muted" itemprop="datePublished">10 Dec, 2024</small></p> </div> </div> </article> </div> <div class="mt-4" style="text-align: left;"> <a href="listado_novedades.php" class="btn btn-secondarybis btn-lg">Más Novedades</a> </div> </div> </div>  <style> /* Contenedor de las novedades usando Flexbox */ .novedades-container { display: flex; justify-content: space-between; flex-wrap: wrap; } .novedades-container .novedad-card { flex: 1 1 30%; /* Por defecto, las tarjetas ocupan el 30% del espacio */ margin-bottom: 30px; } .novedades-container .novedad-card.full-width { flex: 1 1 100%; /* Si hay solo una tarjeta, ocupará el 100% del espacio */ } .novedades-container .novedad-card.two-cards { flex: 1 1 48%; /* Si hay dos tarjetas, ocuparán el 48% del espacio */ } /* Limitar el tamaño de la imagen y centrarla */ .card-img-top { max-width: 470px; max-height: 473px; width: 100%; height: auto; /* Mantener la proporción de la imagen */ object-fit: cover; /* Asegura que la imagen se recorte si es demasiado grande */ display: block; margin-left: auto; margin-right: auto; } /* Asegurar que las tarjetas tengan el mismo tamaño */ .card { display: flex; flex-direction: column; height: 100%; align-items: center; /* Centra el contenido de la tarjeta */ } </style>  <div class="container-fluid py-5" id="avsim"> <div class="container"> <div class="section-title"> </div> <div class="avsim-container">  <div class="avsim-header"> <p>AVSIM es la primera obra social para animales de compañía en el país.</p> </div>  <div class="avsim-section"> <img src="img/logo-avsim-ori.png" alt="Logo AVSIM" class="avsim-image-left" /> <div class="avsim-text"> <p>Nació en 2013, gracias a la visión innovadora de su fundador, quien supo adelantarse a una tendencia que ha ido creciendo: considerar a los perros, gatos y otros animales como parte de la familia. Esto ha llevado a que los tutores se enfoquen cada vez más en su salud, bienestar y calidad de vida.</p> </div> </div>  <div class="avsim-section"> <img src="img/avsim_local.png" alt="Logo AVSIM" class="avsim-image-left" /> <div class="avsim-text"> <p>Después de un año de esfuerzo, AVSIM se posicionó como la obra social innovadora que brinda un servicio integral para mejorar la salud de los animales de compañía, con un enfoque moderno y cercano en la asistencia veterinaria.</p> </div> </div>  <div class="avsim-section avsim-image-right"> <div class="avsim-text"> <p>En 2015, dimos un paso importante con la apertura de nuestra primera franquicia, adquirida por Juan Pablo Ponce, quien hoy es nuestro director general, fiel a la misión de cuidar a los animales que forman parte de nuestras vidas.</p> </div> <img src="img/juan_tucho.png" alt="Juan AVSIM" class="avsim-image-right" /> </div>  <div class="avsim-centered-text"> <p>El sistema de AVSIM funciona de manera similar a una obra social para personas.</p> <p>Quienes se afilian, a cambio de una cuota mensual, acceden a consultas y servicios veterinarios de los profesionales incluidos en nuestra red.</p> <p>Además, ofrecemos descuentos en Pets shops, peluquerías, guarderías, paseadores, taxis para animales, adiestramiento y otros beneficios, dependiendo del plan elegido.</p> <p>Queremos que tus animales de compañía sean parte de nuestra gran familia, porque sabemos que cuando ellos están bien, vos también lo estás.</p> </div> <div class="avsim-header"> <p><strong>Tu familia merece AVSIM.</strong></p> </div> </div> </div> </div>   <div class="container-fluid pt-5" id="contacto"> <div class="container"> <div class="section-title"> <h1 class="display-4 text-primary font-weight-bold">Contacto</h1> </div> <div class="row d-flex justify-content-center"> <div class="col-md-6 pb-5"> <div class="contact-form"> <div id="form-status-message"> </div> <form id="contactForm" action="procesos/guardar_consulta.php" method="post">  <div class="opciones-container"> <div class="row mb-4"> <div class="col-md-6"> <label style="font-size: 1.2rem;"> <input type="radio" name="tipoConsulta" value="franquicia" style="transform: scale(1.5); margin-right: 20px;" onclick="redireccionarFranquicia();"> Quiero una franquicia </label><br> <label style="font-size: 1.2rem;"> <input type="radio" name="tipoConsulta" value="prestador" style="transform: scale(1.5); margin-right: 20px;" onclick="document.getElementById('tipoConsultaHidden').value='prestador';"> Quiero ser prestador </label> </div> <div class="col-md-6"> <label style="font-size: 1.2rem;"> <input type="radio" name="tipoConsulta" value="afiliarme" style="transform: scale(1.5); margin-right: 20px;" onclick="redireccionarAfiliarme();"> Quiero afiliarme </label><br> <label style="font-size: 1.2rem;"> <input type="radio" name="tipoConsulta" value="consulta" style="transform: scale(1.5); margin-right: 20px;" onclick="document.getElementById('tipoConsultaHidden').value='consulta';" checked> Solo Consulta </label> </div> </div> </div> <input type="hidden" id="tipoConsultaHidden" name="tipoConsultaHidden" value="consulta" />  <div class="control-group mb-3"> <input type="text" class="form-control bg-transparent p-4" name="name" placeholder="Tu Nombre" required="required" style="font-size: 1.1rem;" /> </div> <div class="control-group mb-3"> <input type="email" class="form-control bg-transparent p-4" name="email" placeholder="Tu Email" required="required" style="font-size: 1.1rem;" /> </div> <div class="control-group mb-3"> <input type="text" class="form-control bg-transparent p-4" name="localidad" placeholder="Localidad" required="required" style="font-size: 1.1rem;" /> </div>  <div class="control-group mb-3"> <input type="text" class="form-control bg-transparent p-4" name="tel" placeholder="Teléfono" style="font-size: 1.1rem;" /> </div>  <div class="prestador-field" style="display:none;">  <div class="control-group mb-3"> <label for="servicios" style="font-size: 1.2rem;">Selecciona los servicios que ofreces</label> <select class="form-control bg-transparent p-4" name="servicios[]" id="servicios" required="required" multiple style="font-size: 1.1rem;"> <option value="veterinario">Veterinario</option> <option value="pet_shop">Pet Shop</option> <option value="paseador">Paseador</option> <option value="guarderia">Guardería</option> <option value="peluqueria">Peluquería</option> </select> </div> </div>  <div class="control-group mb-4"> <textarea class="form-control bg-transparent py-3 px-4" rows="5" name="message" placeholder="Mensaje" required="required" style="font-size: 1.1rem;"></textarea> </div>  <div class="control-group mb-3 text-center"> <label for="captcha">CAPTCHA: ¿Cuánto es 7 + 3?</label> <input type="number" class="form-control bg-transparent p-4" name="captcha" id="captcha" placeholder="Respuesta" style="color: black; background-color: rgba(255, 255, 255, 0.2); width: 150px; margin: 0 auto; display: block; text-align: center;" required="required" style="font-size: 1.1rem;" /> <input type="hidden" name="captcha_resultado" value="10" /> </div> <script> document.getElementById('contactForm').addEventListener('submit', function(event) { var captchaInput = document.getElementById('captcha').value; if (isNaN(captchaInput) || captchaInput.trim() === "") { event.preventDefault(); // Evita el envío del formulario alert("Por favor, ingresa una respuesta válida (número)."); } }); </script> <div class="control-group text-center"> <button class="btn btn-secondarybis font-weight-bold py-3 px-5" type="submit" name="sendMessageButton" style="font-size: 1.2rem;">Enviar Mensaje</button> </div> </form> </div> </div> </div> </div> </div>  <script> function redireccionarFranquicia() { window.location.href = 'franquicia.php'; } function redireccionarAfiliarme() { window.location.href = 'afiliarme.php'; } document.querySelectorAll('input[name="tipoConsulta"]').forEach(function(el) { el.addEventListener('change', function() { // Ocultar todos los campos opcionales y quitar required document.querySelectorAll('.prestador-field, .consulta-field').forEach(function(field) { field.style.display = 'none'; field.querySelectorAll('input, textarea').forEach(function(input) { input.removeAttribute('required'); }); }); // Mostrar campos según el tipo de consulta seleccionado if (this.value === 'prestador') { document.querySelectorAll('.prestador-field').forEach(function(field) { field.style.display = 'block'; field.querySelectorAll('input').forEach(function(input) { input.setAttribute('required', 'required'); }); }); } else if (this.value === 'consulta') { document.querySelectorAll('.consulta-field').forEach(function(field) { field.style.display = 'block'; field.querySelectorAll('input').forEach(function(input) { input.setAttribute('required', 'required'); }); }); } }); }); // Mostrar campos correspondientes para la opción "Consulta" por defecto document.querySelectorAll('.consulta-field').forEach(function(field) { field.style.display = 'block'; field.querySelectorAll('input').forEach(function(input) { input.setAttribute('required', 'required'); }); }); </script>  <div class="container-fluid footer text-white mt-5 pt-5 px-0 position-relative overlay-top" id="footer"> <div class="row mx-0 pt-5 px-sm-3 px-lg-5 mt-4">  <div class="col-lg-4 col-md-6 mb-5"> <h4 class="text-white text-uppercase mb-4" style="letter-spacing: 3px;">Mantenete informado siguiendo las redes</h4> <div class="d-flex justify-content-start">  <a class="btn btn-lg btn-outline-light btn-lg-square mr-2" href="https://www.facebook.com/AVSIM.ROSARIO" target="_blank"><i class="fab fa-facebook-f"></i></a> <a class="btn btn-lg btn-outline-light btn-lg-square mr-2" href="https://www.linkedin.com/company/avsim-obra-social-para-mascotas?trk=public_post_feed-actor-name" target="_blank"><i class="fab fa-linkedin-in"></i></a> <a class="btn btn-lg btn-outline-light btn-lg-square mr-2" href="https://www.instagram.com/avsimobrasocialparamascotas/" target="_blank"><i class="fab fa-instagram"></i></a> <a class="btn btn-lg btn-outline-light btn-lg-square" href="https://www.youtube.com/@avsimobrasocialparamascotas" target="_blank"><i class="fab fa-youtube"></i></a> </div> </div>  <div class="col-lg-4 col-md-6 mb-5"> <h4 class="text-white text-uppercase mb-4" style="letter-spacing: 3px;">Contactanos</h4> <p class="m-0"> <i class="fa fa-envelope mr-2"></i> <a href="mailto:info@avsim.com.ar" class="text-white">info@avsim.com.ar</a> </p> </div>  <div class="col-lg-4 col-md-12 mb-5"> <h4 class="text-white text-uppercase mb-4" style="letter-spacing: 3px;">Gestionar Solicitudes</h4>  <div id="form-status-message"> </div> <div class="d-flex justify-content-start mb-3"> <button class="btn btn-outline-light mr-2" onclick="showForm('quejas')">Libro de Quejas</button> <button class="btn btn-outline-light mr-2" onclick="showForm('baja')">Baja del Servicio</button> <button class="btn btn-outline-light" onclick="showForm('arrepentimiento')">Trámite de Arrepentimiento</button> </div>  <div id="quejas-form" style="display:none;"> <h6 class="text-white">Libro de Quejas</h6> <form method="post" action="procesos/libro_queja.php"> <input type="text" class="form-control mb-2" name="nombre_apellido" placeholder="Nombre y Apellido" required /> <input type="text" class="form-control mb-2" name="afiliado" placeholder="Afiliado" required /> <input type="email" class="form-control mb-2" name="mail" placeholder="Mail" required /> <textarea class="form-control mb-2" name="queja" placeholder="Queja o Sugerencia" required></textarea>  <label class="text-white" id="captcha-label-quejas"></label> <input type="number" class="form-control mb-2" name="captcha_result" placeholder="Resultado de la suma" required /> <input type="hidden" id="captcha-hidden-quejas" name="captcha_correct" /> <button type="submit" name="quejas_submit" class="btn btn-secondarybis btn-block">Enviar</button> </form> </div>  <div id="baja-form" style="display:none;"> <h6 class="text-white">Baja del Servicio</h6> <form method="post" action="procesos/baja_servicio.php"> <input type="text" class="form-control mb-2" name="nombre_apellido" placeholder="Nombre y Apellido" required /> <input type="text" class="form-control mb-2" name="afiliado" placeholder="Afiliado" required /> <input type="email" class="form-control mb-2" name="mail" placeholder="Mail" required /> <input type="text" class="form-control mb-2" name="motivo" placeholder="Motivo" required />  <label class="text-white" id="captcha-label-baja"></label> <input type="number" class="form-control mb-2" name="captcha_result" placeholder="Resultado de la suma" required /> <input type="hidden" id="captcha-hidden-baja" name="captcha_correct" /> <button type="submit" name="baja_submit" class="btn btn-secondarybis btn-block">Enviar</button> </form> </div>  <div id="arrepentimiento-form" style="display:none;"> <h6 class="text-white">Trámite de Arrepentimiento</h6> <form method="post" action="procesos/tramite_arrepentimiento.php"> <input type="text" class="form-control mb-2" name="nombre_apellido" placeholder="Nombre y Apellido" required /> <input type="text" class="form-control mb-2" name="afiliado" placeholder="Afiliado" required /> <input type="email" class="form-control mb-2" name="mail" placeholder="Mail" required /> <p class="text-white"> Importante: Esta cancelación de solicitud es válida para afiliados que hayan efectuado un alta con vigencia dentro de los últimos 10 días. En caso de haber registrado consumos, se cursará la baja del servicio a esa fecha y deberá abonar el mes obligatoriamente. </p>  <label class="text-white" id="captcha-label-arrepentimiento"></label> <input type="number" class="form-control mb-2" name="captcha_result" placeholder="Resultado de la suma" required /> <input type="hidden" id="captcha-hidden-arrepentimiento" name="captcha_correct" /> <button type="submit" name="arrepentimiento_submit" class="btn btn-secondarybis btn-block">Enviar</button> </form> </div> </div> </div> <script> // Función para generar CAPTCHA function generarCaptcha(labelId, hiddenId) { const num1 = Math.floor(Math.random() * 10); const num2 = Math.floor(Math.random() * 10); const resultado = num1 + num2; // Mostrar la suma y guardar el resultado document.getElementById(labelId).innerText = `¿Cuánto es ${num1} + ${num2}?`; document.getElementById(hiddenId).value = resultado; } // Generar CAPTCHAs al cargar la página document.addEventListener('DOMContentLoaded', function () { generarCaptcha('captcha-label-quejas', 'captcha-hidden-quejas'); generarCaptcha('captcha-label-baja', 'captcha-hidden-baja'); generarCaptcha('captcha-label-arrepentimiento', 'captcha-hidden-arrepentimiento'); }); </script> <div class="container-fluid text-center text-white border-top mt-4 py-4 px-sm-3 px-md-5" style="border-color: rgba(256, 256, 256, .1) !important;"> <p class="mb-2 text-white">Copyright © <a class="font-weight-bold" href="#">Avsim</a>. Todos los derechos reservados.</p> </div> </div>   <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="fa fa-angle-double-up"></i></a>  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script> <script src="lib/easing/easing.min.js"></script> <script src="lib/waypoints/waypoints.min.js"></script> <script src="lib/owlcarousel/owl.carousel.min.js"></script> <script src="lib/tempusdominus/js/moment.min.js"></script> <script src="lib/tempusdominus/js/moment-timezone.min.js"></script> <script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>   <script src="js/main.js"></script> <script> // Function to show the selected form and hide the others function showForm(formId) { document.getElementById('quejas-form').style.display = (formId === 'quejas') ? 'block' : 'none'; document.getElementById('baja-form').style.display = (formId === 'baja') ? 'block' : 'none'; document.getElementById('arrepentimiento-form').style.display = (formId === 'arrepentimiento') ? 'block' : 'none'; } // Hide forms when clicking outside document.addEventListener('click', function(event) { const forms = ['quejas-form', 'baja-form', 'arrepentimiento-form']; const isFormVisible = forms.some(form => document.getElementById(form).style.display === 'block'); if (isFormVisible && !event.target.closest('.footer')) { forms.forEach(form => { document.getElementById(form).style.display = 'none'; }); } }); </script>

CINXE.COM

AVSIM - Obra Social para Mascotas