/*
Theme Name: Soljac Medical
Theme URI: https://soljacmedical.com.mx
Author: Jixnet
Author URI: https://soljacmedical.com.mx
Description: Plantilla oficial completa e idéntica a la maqueta para Soljac Medical
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soljac-medical
*/

/*


/* JUSTIFICAR SOLO PÁRRAFOS, LISTAS Y TEXTOS DE CONTENIDO */
p, 
li, 
.hero-text-1, 
.text-2-desc, 
.div-p-text, 
.why-us-intro-text, 
.card-desc,
.footer-accordion-list li {
  text-align: justify !important;
  text-justify: inter-word;
}

/* MANTENER TÍTULOS Y BOTONES CENTRADOS O ALINEADOS */
h1, h2, h3, h4, .title-block-center, .why-us-center-title {
  text-align: center !important;
} =====================================================================
   1. VARIABLES Y REGLAS GENERALES
   ===================================================================== */
:root {
  --red-soljac: #c8102e;
  --dark-red-soljac: #8b0000;
  --blue-soljac: #0b1b4f;
  --white: #ffffff;
  --light-bg: #f8f9fa;
  --text-dark: #333333;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
}

body {
  background-color: var(--light-bg);
  color: var(--text-dark);
  line-height: 1.5;
}

a {
  text-decoration: none;
}

/* =====================================================================
   2. SECCIONES CON IMAGEN DE FONDO
   ===================================================================== */
.sec-hero-bg, 
.sec-red-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  padding: 30px 20px 50px;
  position: relative;
}

/* =====================================================================
   3. CABECERA Y MENÚ PRINCIPAL
   ===================================================================== */
.top-nav-bar {
  max-width: 1200px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.logo-img {
  max-height: 60px;
  width: auto;
}

/* Arreglo para menú horizontal */
.nav-circular {
  display: flex;
  align-items: center;
}

.nav-circular ul, 
.soljac-menu-list {
  display: flex !important;
  flex-direction: row !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 25px !important;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25px;
  gap: 20px;
  align-items: center;
}

.nav-circular li, 
.soljac-menu-list li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-circular a, 
.soljac-menu-list a {
  color: var(--blue-soljac) !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color 0.2s;
}

.nav-circular a:hover, 
.soljac-menu-list a:hover {
  color: var(--red-soljac) !important;
}

.btn-cv-pill {
  background: var(--dark-red-soljac);
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: bold;
  border: 1px solid #fff;
  display: inline-block;
}

/* =====================================================================
   4. HERO / SECCIÓN PRINCIPAL
   ===================================================================== */
.hero-content-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.hero-text-1 {
  font-size: 1.1rem;
  margin-bottom: 25px;
}

.btn-blue-pill {
  background: var(--blue-soljac);
  color: #fff;
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: bold;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.hero-img-main {
  width: 100%;
  max-width: 450px;
  border-radius: 15px;
  display: block;
  margin: 0 auto 15px;
}

.mini-galeria-3-grid {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.mini-galeria-3-grid img {
  width: 80px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #fff;
}

/* =====================================================================
   5. BARRA DE REDES SOCIALES
   ===================================================================== */
.social-bar-wrapper {
  background: #fff;
  text-align: center;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.social-bar-wrapper a {
  color: var(--blue-soljac);
  font-size: 1.4rem;
  margin: 0 12px;
}

/* =====================================================================
   6. TÍTULOS OVALADOS Y SECCIÓN VIDEO
   ===================================================================== */
.title-block-center {
  text-align: center;
  margin: 20px 0 30px;
}

.pill-blue-header {
  background: var(--blue-soljac);
  color: #fff;
  padding: 8px 25px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 1.2rem;
  display: inline-block;
}

.pill-red-header {
  background: var(--red-soljac);
  color: #fff;
  padding: 8px 25px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 1.2rem;
  display: inline-block;
}

.text-2-desc {
  max-width: 850px;
  margin: 15px auto 0;
  font-size: 1.05rem;
}

.video-responsive-box {
  max-width: 800px;
  margin: 0 auto 40px;
  position: relative;
  padding-bottom: 45%;
  height: 0;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.video-responsive-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =====================================================================
   7. SOLJAC MEDICAL DIVISION (DOS COLUMNAS)
   ===================================================================== */
.division-two-cols {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.icon-badge {
  width: 50px;
  height: auto;
  margin-bottom: 10px;
}

.div-p-text {
  font-size: 0.95rem;
  margin-bottom: 15px;
  text-align: justify;
}

.photo-personal-box img {
  width: 180px;
  border-radius: 12px;
  display: block;
  margin: 15px auto;
  border: 3px solid #fff;
}

.text-center-btn {
  text-align: center;
  margin-bottom: 20px;
}

/* =====================================================================
   8. CARRUSELES Y GALERÍAS
   ===================================================================== */
.carrusel-5-box, 
.big-gallery-container {
  max-width: 800px;
  margin: 20px auto 0;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.carrusel-slides, 
.big-gallery-viewport {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.carrusel-slides img, 
.big-gallery-viewport img {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.gallery-title-header {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 20px;
}

/* =====================================================================
   9. SECCIÓN POR QUÉ CONTRATAR SOLJAC
   ===================================================================== */
.sec-why-us {
  padding: 50px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.why-us-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: center;
  margin-bottom: 30px;
}

.avatar-left, 
.cartoon-right {
  width: 120px;
  height: auto;
}

.why-us-intro-text {
  max-width: 600px;
  margin: 15px auto;
  font-size: 0.95rem;
  color: #444;
}

.linea-roja-divider {
  height: 2px;
  background: var(--red-soljac);
  width: 80%;
  margin: 15px auto 0;
}

/* Tarjetas con borde rojo */
.cards-soljac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.card-white-redborder {
  background: #fff;
  border: 2px solid var(--red-soljac);
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-top-logo {
  width: 40px;
  margin-bottom: 10px;
}

.card-title {
  color: var(--blue-soljac);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.card-desc {
  font-size: 0.9rem;
  color: #555;
  text-align: justify;
}

/* =====================================================================
   10. PIE DE PÁGINA (FOOTER)
   ===================================================================== */
.footer-soljac-blue {
  background: var(--blue-soljac);
  color: #fff;
  padding-top: 40px;
}

.footer-top-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 0 20px 30px;
}

.map-frame-box iframe {
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: 12px;
}

.footer-social-icons {
  margin-bottom: 20px;
}

.footer-social-icons a {
  color: #fff;
  font-size: 1.3rem;
  margin-right: 15px;
}

.footer-accordion-list {
  list-style: none;
  margin-bottom: 20px;
}

.footer-accordion-list li {
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 5px;
}

.footer-mini-galeria {
  display: flex;
  gap: 10px;
}

.footer-mini-galeria img {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}

.footer-copyright-bar {
  background: #000;
  text-align: center;
  padding: 15px;
  font-size: 0.85rem;
  color: #ccc;
}

/* =====================================================================
   11. ADAPTACIÓN A MÓVILES (RESPONSIVE)
   ===================================================================== */
@media (max-width: 768px) {
  .hero-content-grid, 
  .division-two-cols, 
  .footer-top-container {
    grid-template-columns: 1fr;
  }
  
  .why-us-header-flex {
    flex-direction: column;
  }
}
/* =====================================================================
   AJUSTES M�VILES (RESPONSIVE) - SOLJAC MEDICAL
   ===================================================================== */
@media (max-width: 768px) {
  /* Cabecera y Men� */
  .top-nav-bar {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .nav-circular ul, 
  .soljac-menu-list {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 15px !important;
  }

  /* Hero Section */
  .hero-content-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-img-main {
    max-width: 100%;
  }

  /* Secciones de 2 columnas */
  .division-two-cols, 
  .footer-top-container {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  /* Encabezado �Por qu� contratar? */
  .why-us-header-flex {
    flex-direction: column;
  }

  .avatar-left, 
  .cartoon-right {
    width: 90px;
  }

  /* Tarjetas */
  .cards-soljac-grid {
    grid-template-columns: 1fr;
  }

  /* Galer�as y Carruseles */
  .carrusel-slides img, 
  .big-gallery-viewport img {
    height: 220px;
  }
  
  .map-frame-box iframe {
    height: 200px;
  }
}
/* CORRECCI�N DE COLORES Y BOTONES */
.soljac-main-wrap .btn-blue-pill {
  background-color: #0b1b4f !important;
  color: #ffffff !important;
  padding: 12px 28px;
  border-radius: 25px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.soljac-main-wrap .pill-blue-header {
  background-color: #0b1b4f !important;
  color: #ffffff !important;
}

.soljac-main-wrap .pill-red-header {
  background-color: #c8102e !important;
  color: #ffffff !important;
}

.soljac-main-wrap .sec-red-bg p,
.soljac-main-wrap .sec-hero-bg p {
  color: #ffffff !important;
}

/* MARCO TIPO MINI-GALER�A UNO (BORDE BLANCO FINO) */
.personal-mini-gallery-container {
  max-width: 1100px;
  margin: 25px auto 0;
  text-align: center;
}

.personal-mini-gallery-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
}

.mini-frame-photo {
  width: 150px;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid #ffffff; /* Marco blanco como mini galer�a 1 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
  .personal-mini-gallery-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .mini-frame-photo {
    width: 120px;
    height: 150px;
  }
}
/* RESTAURAR AZUL DEL FOOTER */
.footer-soljac-blue {
  background-color: #0b1b4f !important;
  color: #ffffff !important;
}

.footer-soljac-blue h3,
.footer-soljac-blue ul li,
.footer-soljac-blue a {
  color: #ffffff !important;
}

/* T�TULO DE FOTO GALER�A SOLJAC SOBRE FONDO ROJO */
.gallery-title-header {
  color: #ffffff !important;
  font-size: 2.2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* FORZAR COLOR BLANCO EN EL T�TULO SOLJAC MEDICAL HERO */
.sec-hero-bg .hero-title,
.hero-col-left .hero-title,
.hero-title {
  color: #ffffff !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 15px !important;
}

/* ASEGURAR QUE EL TEXTO EXPLICATIVO TAMBI�N SEA BLANCO */
.sec-hero-bg .hero-text-1 {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 1. HACE M�S GRUESO EL BORDE BLANCO DE "cv Soljac" */
.btn-cv-pill {
  border: 3px solid #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* 2. SOMBRA M�S MARCADA DETR�S DE LAS TARJETAS Y TEXTOS EN AZUL */
.card-white-redborder {
  background: #ffffff !important;
  border: 2px solid #c8102e !important;
  border-radius: 14px !important;
  padding: 25px 20px !important;
  text-align: center !important;
  /* Sombra proyectada profunda */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card-white-redborder:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
}

/* T�TULOS Y TEXTOS INTERNOS DE LAS TARJETAS EN AZUL CORPORATIVO */
.card-white-redborder .card-title {
  color: #0b1b4f !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}

.card-white-redborder .card-desc {
  color: #0b1b4f !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-align: justify !important;
  line-height: 1.5 !important;
}
/* =====================================================================
   1. COLOR AZUL CORPORATIVO PARA REDES SOCIALES SUPERIORES
   ===================================================================== */
.social-bar-wrapper a {
  color: #0b1b4f !important; /* Azul corporativo Soljac */
  font-size: 1.6rem !important;
  margin: 0 15px !important;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

.social-bar-wrapper a:hover {
  color: #c8102e !important; /* Rojo Soljac al pasar el cursor */
  transform: translateY(-3px) scale(1.1) !important;
}

/* =====================================================================
   2. EFECTO SUAVE DE MOVIMIENTO (HOVER) EN ELEMENTOS CLAVE
   ===================================================================== */

/* Transici�n suave base para todos los elementos indicados */
.logo-img,
.nav-circular ul li,
.btn-cv-pill,
.hero-img-main,
.mini-frame-photo,
.avatar-left,
.cartoon-right {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
  will-change: transform;
}

/* Movimiento sutil para el Logo */
.logo-img:hover {
  transform: scale(1.05) translateY(-2px) !important;
}

/* Movimiento sutil para las opciones del Men� de Inicio */
.nav-circular ul li:hover {
  transform: translateY(-2px) !important;
}

/* Movimiento y realce para el bot�n CV Soljac */
.btn-cv-pill:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Movimiento suave para la imagen Principal de la Ambulancia */
.hero-img-main:hover {
  transform: translateY(-6px) scale(1.02) !important;
}

/* Movimiento suave para las im�genes del Personal M�dico */
.mini-frame-photo:hover {
  transform: translateY(-5px) scale(1.04) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3) !important;
}

/* Movimiento sutil para los personajes (Avatar y Ambulancia Cartoon) */
.avatar-left:hover {
  transform: translateY(-5px) rotate(-2deg) !important;
}

.cartoon-right:hover {
  transform: translateY(-5px) rotate(2deg) !important;
}
/* EFECTO DE MOVIMIENTO SUAVE PARA MINI GALER�A SUPERIOR Y FOOTER */
.mini-galeria-3-grid img,
.mini-hero-img,
.footer-mini-galeria img,
.mini-footer-img {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
  will-change: transform;
}

.mini-galeria-3-grid img:hover,
.mini-hero-img:hover,
.footer-mini-galeria img:hover,
.mini-footer-img:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35) !important;
}

/* BOTONES GRANDES RECTANGULARES BLANCOS SENCILLOS BAJO LA GALER�A */
.big-gallery-container-stacked {
  max-width: 950px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-controls-bottom {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
}

.gal-btn-rect {
  background: #ffffff !important;
  color: #0b1b4f !important;
  border: 2px solid #ffffff !important;
  padding: 12px 30px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}

.gal-btn-rect:hover {
  background: #0b1b4f !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
}

/* CENTRADO DE �CONOS DE LA SECCI�N DIVISI�N */
.icon-center-box {
  text-align: center !important;
  margin-bottom: 15px !important;
  width: 100%;
}

.icon-center-box .icon-badge {
  display: inline-block !important;
  margin: 0 auto !important;
}

.boton-emergencia {
  animation: sirena 0.8s infinite alternate;
}

@keyframes sirena {
  0% {
    background-color: #dc3545;
    box-shadow: 0 0 5px #dc3545;
  }
  100% {
    background-color: #ff0000;
    box-shadow: 0 0 20px #ff0000;
    transform: scale(1.04);
  }
}
/* Correcci�n de animaci�n para m�viles y PC */
.boton-emergencia {
  display: inline-block !important; /* Indispensable para que el celular procese el tama�o */
  animation: latido 1.5s infinite ease-in-out;
  -webkit-animation: latido 1.5s infinite ease-in-out;
  will-change: transform;
}

@keyframes latido {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(220, 53, 69, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* Fuerza a que el contenedor sea visible en celulares */
@media screen and (max-width: 768px) {
  .top-btn-download {
    display: block !important;
  }
}
/* EFECTO SIRENA TOTAL (Optimizado para M�viles y PC) */
.boton-emergencia {
  /* Asegura que el m�vil renderice el tama�o y color */
  display: inline-block !important;
  background-color: #dc3545 !important;
  color: white !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);

  /* Animaci�n robusta con prefijos */
  -webkit-animation: sirenaParpadeo 1.2s infinite ease-in-out;
  animation: sirenaParpadeo 1.2s infinite ease-in-out;
  
  /* Ayuda al m�vil a suavizar la animaci�n */
  will-change: background-color, transform;
}

/* Definici�n de la animaci�n de sirena (cambio de color de fondo) */
@keyframes sirenaParpadeo {
  0% {
    background-color: #dc3545; /* Rojo normal */
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
  }
  50% {
    background-color: #ff0000; /* Rojo brillante (SIRENA) */
    transform: scale(1.05); /* Pulso suave */
    box-shadow: 0 4px 25px rgba(255, 0, 0, 0.8);
  }
  100% {
    background-color: #dc3545; /* Vuelve al normal */
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
  }
}

/* Prefijos para navegadores antiguos de m�vil (Safari/Chrome viejo) */
@-webkit-keyframes sirenaParpadeo {
  0% { background-color: #dc3545; -webkit-transform: scale(1); }
  50% { background-color: #ff0000; -webkit-transform: scale(1.05); }
  100% { background-color: #dc3545; -webkit-transform: scale(1); }
}

/* Fuerza visibilidad del contenedor en m�viles */
@media screen and (max-width: 768px) {
  .top-btn-download {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* Centra y alinea las im�genes de 40x50 con el bot�n */
.top-btn-download {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important; /* Espacio entre los GIFs y el bot�n */
}

/* Fuerza las medidas exactas de 40x50 px en los GIFs */
.gif-sirena {
  width: 40px !important;
  height: 50px !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* Mantiene el dise�o y animaci�n de sirena en el bot�n */
.boton-emergencia {
  display: inline-block !important;
  background-color: #dc3545 !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-weight: bold;
  animation: sirenaParpadeo 1.2s infinite ease-in-out;
  -webkit-animation: sirenaParpadeo 1.2s infinite ease-in-out;
}

@keyframes sirenaParpadeo {
  0% { background-color: #dc3545; transform: scale(1); }
  50% { background-color: #ff0000; transform: scale(1.04); }
  100% { background-color: #dc3545; transform: scale(1); }
}
/* 1. Contenedor compatible con iOS y Android */
.top-btn-download {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* 2. GIFs ajustados de 40x50 px */
.gif-sirena {
  width: 40px !important;
  height: 50px !important;
  object-fit: contain !important;
  display: inline-block !important;
}

/* 3. Bot�n con aceleraci�n por GPU para iPhones y WebKit */
.boton-emergencia {
  display: inline-block !important;
  background-color: #dc3545 !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-weight: bold !important;

  /* Activa la GPU en iOS (iPhone) para forzar el movimiento */
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* Asignaci�n de animaci�n con prefijos WebKit */
  -webkit-animation: sirenaIOS 1.2s infinite ease-in-out !important;
  animation: sirenaIOS 1.2s infinite ease-in-out !important;
}

/* Animaci�n para motores WebKit (Safari / Chrome en iOS) */
@-webkit-keyframes sirenaIOS {
  0% {
    background-color: #dc3545;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    background-color: #ff0000;
    -webkit-transform: translate3d(0, 0, 0) scale(1.06);
  }
  100% {
    background-color: #dc3545;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Animaci�n Est�ndar */
@keyframes sirenaIOS {
  0% {
    background-color: #dc3545;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    background-color: #ff0000;
    transform: translate3d(0, 0, 0) scale(1.06);
  }
  100% {
    background-color: #dc3545;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.btn-blue-pill.btn-instagram {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important; /* Espacio entre el icono y el texto */
  text-decoration: none !important;
}

.btn-blue-pill.btn-instagram .icon-ig {
  flex-shrink: 0;
  fill: currentColor; /* Mantiene el color blanco del texto del bot�n */
}