Preview de mixed.css
/* MIXED CSS PACK */
/* Template: irasesoriaregistral.com/index.html */
/* Template mtime: 2025-10-21 13:16:25 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--primary: #1e7a5b;
--primary-dark: #176149;
--primary-light: #e8f5f0;
--secondary: #2c66c3;
--secondary-dark: #214e95;
--secondary-light: #e8efff;
--accent: #ff6b35;
--dark: #0f172a;
--light: #f8fafc;
--gray: #64748b;
--gray-light: #f1f5f9;
--white: #ffffff;
--shadow: 0 10px 30px rgba(0,0,0,0.08);
--shadow-lg: 0 20px 40px rgba(0,0,0,0.12);
--radius: 16px;
--radius-sm: 8px;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: var(--dark);
background-color: var(--light);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
p {
margin-bottom: 1rem;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
.btn {
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-sm);
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border: none;
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(30, 122, 91, 0.3);
}
.btn-secondary {
background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
border: none;
color: white;
}
.btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(44, 102, 195, 0.3);
}
.btn-outline {
background: transparent;
border: 2px solid var(--dark);
color: var(--dark);
}
.btn-outline:hover {
background: var(--dark);
color: white;
transform: translateY(-2px);
}
.section {
padding: 100px 0;
position: relative;
}
.section-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
font-size: 1.25rem;
color: var(--gray);
margin-bottom: 2rem;
}
/* Navbar */
.navbar {
padding: 1rem 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: var(--transition);
}
.navbar.scrolled {
padding: 0.75rem 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-weight: 800;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.brand-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--primary);
position: relative;
}
.brand-dot::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--primary);
top: -3px;
left: -3px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.8);
opacity: 1;
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(0.8);
opacity: 0;
}
}
.nav-link {
font-weight: 500;
position: relative;
padding: 0.5rem 1rem !important;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 1rem;
width: 0;
height: 2px;
background: var(--primary);
transition: var(--transition);
}
.nav-link:hover::after,
.nav-link.active::after {
width: calc(100% - 2rem);
}
/* Hero Section */
.hero {
position: relative;
padding: 160px 0 100px;
background: linear-gradient(135deg, rgba(30, 122, 91, 0.1) 0%, rgba(44, 102, 195, 0.1) 100%);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.03"><polygon fill="%231e7a5b" points="0,1000 1000,0 1000,1000"/></svg>');
background-size: cover;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.hero .lead {
font-size: 1.25rem;
color: var(--gray);
margin-bottom: 2rem;
}
.hero-card {
background: var(--white);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
transition: var(--transition);
}
.hero-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, var(--primary), var(--secondary));
}
.hero-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.trust-badges {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
}
.trust-badge {
background: var(--white);
border: 1px solid #e2e8f0;
color: var(--dark);
padding: 0.75rem 1.25rem;
border-radius: 50px;
box-shadow: var(--shadow);
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: var(--transition);
}
.trust-badge:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.trust-badge i {
color: var(--primary);
}
/* Steps Section */
.steps-section {
background: var(--white);
}
.step-card {
background: var(--white);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow);
height: 100%;
position: relative;
overflow: hidden;
transition: var(--transition);
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.step-number {
position: absolute;
top: 1rem;
right: 1rem;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
}
/* Services Section */
.service-card {
background: var(--white);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow);
height: 100%;
position: relative;
overflow: hidden;
transition: var(--transition);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.service-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
color: var(--primary);
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
/* Insurance Section */
.insurance-section {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
position: relative;
overflow: hidden;
}
.insurance-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.03"><polygon fill="%232c66c3" points="0,0 1000,1000 0,1000"/></svg>');
background-size: cover;
}
.logo-pill {
background: var(--white);
border: 1px solid #e2e8f0;
border-radius: 50px;
padding: 0.75rem 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: var(--shadow);
transition: var(--transition);
}
.logo-pill:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Why Choose Us Section */
.feature-card {
background: var(--white);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow);
height: 100%;
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, var(--primary), var(--secondary));
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.feature-icon {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
color: var(--primary);
font-size: 1.75rem;
margin: 0 auto 1.5rem;
}
/* Gallery Section */
.gallery-section {
background: var(--white);
}
.gallery-item {
position: relative;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.gallery-item:hover {
transform: scale(1.03);
box-shadow: var(--shadow-lg);
}
.gallery-item img {
width: 100%;
height: 300px;
object-fit: cover;
transition: var(--transition);
}
.gallery-item:hover img {
transform: scale(1.1);
}
/* FAQ Section */
.faq-section {
background: var(--gray-light);
}
.accordion-item {
border: none;
border-radius: var(--radius) !important;
margin-bottom: 1rem;
box-shadow: var(--shadow);
overflow: hidden;
}
.accordion-button {
background: var(--white);
border: none;
font-weight: 600;
padding: 1.5rem;
}
.accordion-button:not(.collapsed) {
background: var(--white);
color: var(--primary);
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border: none;
}
.accordion-body {
padding: 1.5rem;
background: var(--white);
}
/* Contact Section */
.contact-card {
background: var(--white);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow-lg);
}
.form-control {
padding: 0.75rem 1rem;
border: 1px solid #e2e8f0;
border-radius: var(--radius-sm);
transition: var(--transition);
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.25rem rgba(30, 122, 91, 0.25);
}
/* Footer */
footer {
background: var(--dark);
color: #cbd5e1;
padding: 4rem 0 2rem;
}
footer h5 {
color: white;
margin-bottom: 1.5rem;
}
footer a {
color: #cbd5e1;
transition: var(--transition);
}
footer a:hover {
color: white;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
/* Floating WhatsApp */
.wa-float {
position: fixed;
right: 2rem;
bottom: 2rem;
z-index: 1000;
}
.wa-float .btn {
border-radius: 50px;
padding: 1rem 1.5rem;
font-weight: 700;
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
}
/* Responsive */
@media (max-width: 991.98px) {
.hero h1 {
font-size: 2.75rem;
}
.section {
padding: 80px 0;
}
.section-title {
font-size: 2rem;
}
}
@media (max-width: 767.98px) {
.hero h1 {
font-size: 2.25rem;
}
.section {
padding: 60px 0;
}
.section-title {
font-size: 1.75rem;
}
.trust-badges {
justify-content: center;
}
}
@media (max-width: 575.98px) {
.hero {
padding: 120px 0 60px;
}
.hero h1 {
font-size: 1.875rem;
}
.btn {
width: 100%;
justify-content: center;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
.navbar-brand {
display: flex;
align-items: center;
font-size: 1rem; /* achica la letra */
font-weight: 700;
gap: 6px; /* espacio entre logo y texto */
}
.navbar-brand img {
height: 32px; /* ajustá el tamaño del logo */
width: auto;
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* ===== HERO - Estilos v2 ===== */
.hero-v2 {
padding: clamp(2.25rem, 3vw + 1rem, 3.5rem) 0;
}
/* LOGO más grande (sin deformar) */
.brand-card {
background: #fff;
border: 1px solid rgba(0,0,0,.06);
border-radius: 14px;
padding: clamp(8px, 1.2vw, 14px);
box-shadow: 0 6px 22px rgba(0,0,0,.04);
}
.brand-logo-box {
display: grid;
place-items: center;
height: clamp(230px, 26vw, 320px); /* ↑ Aumenté el alto para dar protagonismo */
background: #f7f9fb;
border-radius: 12px;
padding: clamp(8px, 1.2vw, 14px);
}
.brand-logo {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.06));
}
/* Highlights ultra compactos */
.highlights-card.ultra-slim {
background: #fff;
border: 1px solid rgba(0,0,0,.06);
border-radius: 14px;
padding: 10px; /* Compacto */
box-shadow: 0 6px 22px rgba(0,0,0,.04);
}
.hl-item.xs {
display: grid;
grid-template-columns: 18px 1fr; /* icono más chico */
gap: 6px;
align-items: start;
border: 1px dashed rgba(0,0,0,.06);
border-radius: 10px;
padding: 8px 10px; /* Muy compacto */
background: #fcfdff;
min-height: 0;
}
.hl-item.xs i {
color: var(--bs-success);
font-size: 16px; /* icono reducido */
line-height: 1;
margin-top: 1px;
}
.hl-title {
font-weight: 600;
font-size: .9rem; /* título más pequeño */
color: #0f172a;
line-height: 1.15;
margin-top: 1px;
}
.hl-note {
font-size: .78rem; /* nota mini */
color: var(--bs-secondary-color, #6b7280);
margin-top: 1px;
line-height: 1.2;
}
/* Badges de confianza */
.trust-badges { display: flex; flex-wrap: wrap; gap: .4rem .75rem; margin-top: .5rem; }
.trust-badge { font-size: .9rem; color: #334155; background: #f1f5f9; border-radius: 999px; padding: .3rem .65rem; display: inline-flex; align-items: center; gap: .35rem; }
.trust-badge i { color: #16a34a; }
/* Responsive */
@media (max-width: 991.98px) {
.brand-logo-box { height: 240px; } /* buen tamaño en mobile */
.highlights-card.ultra-slim { padding: 8px; }
.hl-item.xs { padding: 8px 9px; }
.hl-title { font-size: .92rem; } /* un toque más legible en phone */
.hl-note { display: none !important; } /* oculto notas en mobile para dejar más lugar al logo */
}
/* ===== INLINE <style> BLOCK #4 ===== */
:root{
--hero-g1: rgba(30,122,91,.08); /* verde suave */
--hero-g2: rgba(44,102,195,.08); /* azul suave */
--card-b: #e8edf3;
--shadow: 0 10px 24px rgba(0,0,0,.06);
}
/* Hero */
.hero-v2{
position:relative;
padding:120px 0 80px;
background:linear-gradient(135deg, var(--hero-g1), var(--hero-g2));
}
.fw-800{font-weight:800}
/* Badges de confianza */
.trust-badges{display:flex;gap:.6rem 1rem;flex-wrap:wrap}
.trust-badge{
background:#fff;border:1px solid var(--card-b);border-radius:999px;
padding:.55rem .8rem; display:inline-flex; gap:.5rem; align-items:center;
box-shadow:var(--shadow);
}
/* Tarjeta del logo: fija tamaño y evita saltos cuando carga */
.brand-card{
background:#fff;border:1px solid var(--card-b);border-radius:16px;
padding:14px; box-shadow:var(--shadow);
}
.brand-logo-box{
min-height:120px; /* alto mínimo → no “empuja” las cards al cargar */
display:grid; place-items:center;
border-radius:12px;
background:linear-gradient(180deg,#f7fafc,#eef3f9);
}
.brand-logo{
max-width:100%; max-height:120px;
width:auto; height:auto; object-fit:contain; /* nunca se deforma */
}
/* Tarjeta de highlights (lista con checks) */
.highlights-card{
background:#fff;border:1px solid var(--card-b);border-radius:16px;
padding:18px 20px; box-shadow:var(--shadow);
}
/* Ajustes responsive */
@media (max-width: 991.98px){
.hero-v2{ padding:90px 0 60px; }
.brand-logo{ max-height:100px; }
}
/* ===== INLINE <style> BLOCK #5 ===== */
.aseguradoras-nombres {
background: #fff;
border-top: 1px solid #e1e6eb;
padding: 10px 0;
}
/* ===== INLINE <style> BLOCK #6 ===== */
/* Faja con fondo para que los PNG blancos se vean */
.logos-ticker { padding: 48px 0; background: #edf2f7; }
.logos-ticker .ticker { overflow: hidden; position: relative; border-radius: 12px; }
.logos-ticker .track{
--gap: 28px; /* separación entre logos */
--speed: 28s; /* velocidad del scroll (menor = más rápido) */
display: flex; gap: var(--gap);
width: max-content;
padding: 10px 6px;
animation: logos-scroll var(--speed) linear infinite;
will-change: transform;
}
.logos-ticker .ticker:hover .track{ animation-play-state: paused; }
/* “Pills” para que resalten los logos */
.logos-ticker .item{
flex: 0 0 auto;
display: grid; place-items: center;
padding: 10px 16px;
border-radius: 12px;
background: #e6ecf3;
border: 1px solid #d7dee6;
}
.logos-ticker .item img{
height: 34px; width: auto; object-fit: contain;
filter: drop-shadow(0 0 1px rgba(0,0,0,.35)); /* ayuda con PNG/SVG claros */
transition: transform .2s ease, filter .2s ease, opacity .2s ease;
opacity: .95;
}
.logos-ticker .item:hover img{ transform: translateY(-2px); opacity: 1; }
@keyframes logos-scroll{
from{ transform: translateX(0); }
to { transform: translateX(calc(-50% - var(--gap)/2)); }
}
@media (prefers-reduced-motion: reduce){
.logos-ticker .track{ animation: none; }
}
.aseguradoras-nombres {
background: #fff;
border-top: 1px solid #e1e6eb;
padding: 10px 0;
}
/* ===== INLINE <style> BLOCK #7 ===== */
/* ===== Base sección ===== */
.gallery-section{ padding: clamp(2rem,4vw,3.5rem) 0; }
/* ===== Flip 3D card ===== */
.flip3d{
position:relative;
width:100%;
height: clamp(260px, 35vw, 360px); /* visible siempre (tu valor original) */
perspective: 1200px;
border-radius:16px;
}
.flip-inner{
position:absolute; inset:0;
transform-style:preserve-3d;
transition: transform .8s cubic-bezier(.2,.7,.2,1);
will-change: transform;
}
@media (hover:hover){
.flip3d:hover .flip-inner{ transform: rotateY(180deg); } /* gira al pasar */
}
.flip-face{
position:absolute; inset:0;
border-radius:16px; overflow:hidden;
backface-visibility:hidden;
background: #eef3fb; /* se ve algo mientras carga */
border:1px solid rgba(0,0,0,.06);
box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.flip-front{ transform: rotateY(0deg); }
.flip-back { transform: rotateY(180deg); }
.flip-img{
width:100% !important;
height:100% !important;
object-fit: contain !important; /* SIN RECORTE: respeta contenido */
background:#f6f8fb;
display:block;
}
/* Indicador en el dorso */
.flip-overlay{
position:absolute; inset:auto 12px 12px auto;
display:grid; place-items:center;
width:42px; height:42px;
border-radius:10px;
background:rgba(0,0,0,.55);
color:#fff; font-size:20px;
}
/* capa clickeable para modal */
.flip-hit{ position:absolute; inset:0; z-index:5; border-radius:16px; }
/* Modal */
#galleryModal .modal-content{ background:rgba(0,0,0,.75); }
#galleryModalImg{ object-fit:contain; max-height:85vh; }
/* Mobile: altura cómoda (opcional) */
@media (max-width: 991.98px){
.flip3d{ height: clamp(230px, 48vw, 320px); }
}
/* ===== INLINE <style> BLOCK #8 ===== */
/* Faja con fondo para que los PNG blancos se vean */
.logos-ticker { padding: 48px 0; background: #edf2f7; } /* podés usar #f3f6fa también */
.logos-ticker .ticker { overflow: hidden; position: relative; border-radius: 12px; }
.logos-ticker .track{
--gap: 28px;
--speed: 28s; /* velocidad del scroll */
display: flex; gap: var(--gap);
width: max-content;
padding: 10px 6px;
animation: logos-scroll var(--speed) linear infinite;
will-change: transform;
}
.logos-ticker .ticker:hover .track{ animation-play-state: paused; }
/* Pills para que resalten los logos blancos */
.logos-ticker .item{
flex: 0 0 auto;
display: grid; place-items: center;
padding: 10px 16px;
border-radius: 12px;
background: #e6ecf3; /* contraste suave */
border: 1px solid #d7dee6;
}
.logos-ticker .item img{
height: 34px; width: auto; object-fit: contain;
/* sombra sutil para PNG blancos */
filter: drop-shadow(0 0 1px rgba(0,0,0,.35));
transition: transform .2s ease, filter .2s ease, opacity .2s ease;
opacity: .95;
}
.logos-ticker .item:hover img{ transform: translateY(-2px); opacity: 1; }
@keyframes logos-scroll{
from{ transform: translateX(0); }
to { transform: translateX(calc(-50% - var(--gap)/2)); }
}
@media (prefers-reduced-motion: reduce){
.logos-ticker .track{ animation: none; }
}
/* ===== INLINE <style> BLOCK #9 ===== */
/* Faja con fondo para que los PNG blancos se vean */
.logos-ticker { padding: 48px 0; background: #edf2f7; }
.logos-ticker .ticker { overflow: hidden; position: relative; border-radius: 12px; }
.logos-ticker .track{
--gap: 28px; /* separación entre logos */
--speed: 28s; /* velocidad del scroll (menor = más rápido) */
display: flex; gap: var(--gap);
width: max-content;
padding: 10px 6px;
animation: logos-scroll var(--speed) linear infinite;
will-change: transform;
}
.logos-ticker .ticker:hover .track{ animation-play-state: paused; }
/* “Pills” para que resalten los logos */
.logos-ticker .item{
flex: 0 0 auto;
display: grid; place-items: center;
padding: 10px 16px;
border-radius: 12px;
background: #e6ecf3;
border: 1px solid #d7dee6;
}
.logos-ticker .item img{
height: 34px; width: auto; object-fit: contain;
filter: drop-shadow(0 0 1px rgba(0,0,0,.35)); /* ayuda con PNG/SVG claros */
transition: transform .2s ease, filter .2s ease, opacity .2s ease;
opacity: .95;
}
.logos-ticker .item:hover img{ transform: translateY(-2px); opacity: 1; }
@keyframes logos-scroll{
from{ transform: translateX(0); }
to { transform: translateX(calc(-50% - var(--gap)/2)); }
}
@media (prefers-reduced-motion: reduce){
.logos-ticker .track{ animation: none; }
}
.aseguradoras-nombres {
background: #fff;
border-top: 1px solid #e1e6eb;
padding: 10px 0;
}
/* ===== INLINE <style> BLOCK #10 ===== */
/* Contenedor flotante con stack vertical */
.wa-float{
position: fixed;
right: 2rem;
bottom: 2rem;
z-index: 1000;
display: flex;
flex-direction: column;
gap: .75rem; /* espacio entre los dos botones */
}
/* Botón WhatsApp (ya lo tenías) */
.wa-float .btn{
border-radius: 50px;
padding: 1rem 1.5rem;
font-weight: 700;
transition: all .2s ease;
}
.wa-float .btn.btn-success{
box-shadow: 0 10px 30px rgba(16,185,129,.4);
animation: pulse-green 2s infinite;
}
@keyframes pulse-green{
0%{ box-shadow: 0 0 0 0 rgba(16,185,129,.7); }
70%{ box-shadow: 0 0 0 15px rgba(16,185,129,0); }
100%{ box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
/* Botón Instagram */
.btn-instagram{
border: none;
color: #fff;
background: linear-gradient(45deg,#f58529,#f56040,#fd1d1d,#e1306c,#c13584,#833ab4,#5851db,#405de6);
box-shadow: 0 10px 30px rgba(193,53,132,.35);
animation: pulse-ig 2s infinite;
}
.btn-instagram:hover{ transform: translateY(-2px); }
@keyframes pulse-ig{
0%{ box-shadow: 0 0 0 0 rgba(193,53,132,.6); }
70%{ box-shadow: 0 0 0 15px rgba(193,53,132,0); }
100%{ box-shadow: 0 0 0 0 rgba(193,53,132,0); }
}
/* Responsivo: acercar a los bordes en pantallas chicas */
@media (max-width: 575.98px){
.wa-float{ right: 1rem; bottom: 1rem; }
.wa-float .btn{ padding: .9rem 1.2rem; }
}