/* =========================================================
   site-common.css
   Estilos compartidos entre index.html, blog.html y blindate.html.
   Antes estaban duplicados como <style> inline en cada página;
   al vivir en un solo archivo el navegador los descarga una vez
   y los cachea para el resto del sitio.
   ========================================================= */

/* ---------- Utilidades base / modernas ---------- */
html {
     scroll-behavior: smooth;
}

img {
     max-width: 100%;
}

a:focus-visible,
button:focus-visible,
.blog-tab-btn:focus-visible {
     outline: 3px solid #0575E6;
     outline-offset: 2px;
}

/* Aparición suave al hacer scroll (opt-in vía class="reveal") */
.reveal {
     opacity: 0;
     transform: translateY(24px);
     transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
     opacity: 1;
     transform: none;
}

@media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
     .reveal {
          opacity: 1;
          transform: none;
          transition: none;
     }
}

/* ---------- Iconos sociales flotantes ---------- */
.social-icons {
     position: fixed;
     top: 50%;
     right: 0;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 15px;
     z-index: 1000;
     padding: 5px;
}

.social-icons .icon {
     width: 50px;
     height: 50px;
     background-color: #0575E6;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px 0 0 12px;
     font-size: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transition: transform 0.2s ease, background-color 0.3s ease;
     text-decoration: none;
     border: 2px solid white;
}

.social-icons .icon:hover {
     transform: scale(1.1);
     background-color: #045ec3;
}

/* ---------- Botón flotante de WhatsApp ---------- */
#floating-whatsapp {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 70px;
     height: 70px;
     background-color: #25D366;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 99999;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     cursor: pointer;
}

#floating-whatsapp:hover::after {
     opacity: 1;
}

#floating-whatsapp::after {
     content: 'Contáctanos';
     position: absolute;
     right: 90px;
     background: #ffffff;
     color: #25D366;
     padding: 10px 16px;
     border-radius: 12px;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
     font-size: 16px;
     font-weight: bold;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes vibrate {
     0%, 100% { transform: translateX(0); }
     10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
     20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.vibrating {
     animation: vibrate 1s;
}

/* ---------- SweetAlert2 (usado en index y blindate) ---------- */
.swal2-popup {
     border-radius: 20px !important;
}

.swal2-html-container iframe {
     border-radius: 10px;
     overflow: hidden;
}

.custom-muneco {
     position: absolute;
     top: -70px;
     left: -110px;
     width: 350px;
     transform: rotate(-15deg);
}

/* ---------- Footer: logos ---------- */
.footer-logo {
     width: 70%;
     max-width: 200px;
     height: auto;
}