Preview de mixed.css
/* MIXED CSS PACK */
/* Template: herreriaelpela.com.ar/index.html */
/* Template mtime: 2025-11-10 13:50:30 */
/* 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&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ===== FIX HERO EN PHONE ===== */
@media (max-width: 576px){
/* Títulos y párrafos más legibles y sin cortes raros */
header.section-hero h1.display-5{
font-size: clamp(1.55rem, 7vw, 1.95rem) !important;
line-height: 1.15 !important;
letter-spacing: normal !important;
word-spacing: normal !important;
}
header.section-hero .lead{
font-size: clamp(.98rem, 3.7vw, 1.06rem) !important;
line-height: 1.35 !important;
letter-spacing: normal !important;
word-spacing: normal !important;
text-align: left !important;
}
/* Lista con tilde: SIN d-flex, sin sangrías absurdas, wraps prolijos */
header.section-hero .hero-bullets{
display: block !important; /* anula d-flex heredado */
list-style: none !important;
padding-left: 0 !important;
margin: 0 0 1rem 0 !important;
justify-content: initial !important; /* por si quedó algo suelto */
text-wrap: pretty; /* cortes lindos */
}
header.section-hero .hero-bullets li{
display: flex !important;
align-items: flex-start !important;
gap: .5rem !important;
margin: .38rem 0 !important;
line-height: 1.35 !important;
letter-spacing: normal !important;
word-spacing: normal !important;
white-space: normal !important; /* evita estirar palabras */
flex-wrap: wrap !important; /* permite bajar a 2 líneas */
text-align: left !important;
}
header.section-hero .hero-bullets li::before{
content: "✓";
flex: 0 0 auto;
margin-top: .08rem;
font-weight: 700;
font-size: 1rem;
color: var(--brand, #1e6bff);
}
/* Imagen del hero: SIEMPRE completa, sin recorte */
header.section-hero .hero-media{
display: grid !important;
place-items: center !important;
padding: 12px !important;
min-height: 230px !important;
background: #fff;
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
overflow: visible !important;
}
header.section-hero .hero-media img{
width: 100% !important;
height: auto !important; /* respeta proporción */
max-height: 280px !important; /* limita altura en phone */
object-fit: contain !important; /* NO recorta */
object-position: center !important;
display: block !important;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root {
--brand: #0d6efd;
--brand-600: #0b5ed7;
--brand-500: #3d8bfd;
--brand-400: #6ea8fe;
--brand-50: #e7f1ff;
--text: #0b1320;
--text-light: #4a5568;
--muted: #6c757d;
--surface: #ffffff;
--surface-2: #f5f7fb;
--surface-3: #e9ecef;
--radius: 1rem;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
--gradient: linear-gradient(135deg, var(--brand) 0%, var(--brand-500) 100%);
--gradient-light: linear-gradient(135deg, var(--brand-50) 0%, #f8f9fa 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-family: 'Inter', sans-serif;
background: #fff;
color: var(--text);
scroll-behavior: smooth;
line-height: 1.6;
overflow-x: hidden;
}
img {
max-width: 100%;
display: block;
}
/* Tipografía mejorada */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.5rem;
}
.display-5 {
font-weight: 800;
letter-spacing: -0.02em;
}
.section-title {
font-weight: 800;
letter-spacing: -0.02em;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 4px;
background: var(--gradient);
border-radius: 2px;
}
.text-center .section-title::after {
left: 50%;
transform: translateX(-50%);
}
/* Navbar mejorada */
.navbar {
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
padding: 1rem 0;
}
.navbar.scrolled {
padding: 0.5rem 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-weight: 800;
letter-spacing: -0.02em;
font-size: 1.5rem;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.navbar .nav-link {
font-weight: 500;
position: relative;
padding: 0.5rem 1rem !important;
transition: color 0.3s ease;
}
.navbar .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 1rem;
right: 1rem;
height: 2px;
background: var(--gradient);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
color: var(--brand) !important;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
transform: scaleX(1);
}
.btn-brand {
background: var(--gradient);
color: #fff;
border: none;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(13, 110, 253, 0.3);
}
.btn-brand:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
color: #fff;
}
.btn-outline-brand {
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
transition: all 0.3s ease;
}
.btn-outline-brand:hover {
background: var(--brand);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(13, 110, 253, 0.3);
}
/* Sections mejoradas */
.section {
padding: 6rem 0;
position: relative;
}
.section-alt {
padding: 6rem 0;
background: var(--surface-2);
position: relative;
}
.section-hero {
padding: 8rem 0 6rem;
background: var(--gradient-light);
position: relative;
overflow: hidden;
}
.section-hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 C30,0 40,100 100,100 L100,0 Z" fill="rgba(13,110,253,0.03)"/></svg>');
background-size: cover;
}
/* Cards modernas mejoradas */
.card-modern {
background: #fff;
border: 1px solid rgba(13, 110, 253, 0.1);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: all 0.3s ease;
overflow: hidden;
position: relative;
}
.card-modern:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.card-modern:hover::before {
transform: scaleX(1);
}
.rounded-xl {
border-radius: 1.25rem;
}
.shadow-soft {
box-shadow: 0 10px 30px rgba(13, 110, 253, 0.08);
}
/* Hero mejorado */
.hero-wrap {
display: flex;
align-items: center;
min-height: 80vh;
}
.hero-media {
width: 100%;
max-width: 640px;
aspect-ratio: 16/11;
background: #fff;
border-radius: var(--radius);
display: grid;
place-items: center;
padding: 1rem;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.hero-media::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: var(--gradient);
opacity: 0.1;
transform: rotate(30deg);
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: calc(var(--radius) - 0.25rem);
position: relative;
z-index: 1;
}
.hero-bullets {
gap: 0.5rem;
}
.hero-bullets li {
list-style: none;
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.hero-bullets li::before {
content: '✓';
color: var(--brand);
font-weight: bold;
flex-shrink: 0;
margin-top: 0.25rem;
}
/* Badge mejorado */
.badge-modern {
background: var(--gradient);
color: white;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.875rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Servicios / Elegirnos mejorados */
.icon-badge {
width: 64px;
height: 64px;
border-radius: 1rem;
display: grid;
place-items: center;
background: rgba(13, 110, 253, 0.08);
color: var(--brand);
font-size: 24px;
transition: all 0.3s ease;
}
.card-modern:hover .icon-badge {
background: var(--gradient);
color: white;
transform: scale(1.1);
}
/* Ticker mejorado */
.ticker-frame {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: white;
box-shadow: var(--shadow);
}
.ticker-track {
display: flex;
gap: 1rem;
align-items: center;
transition: transform 0.5s ease;
padding: 1rem;
}
.ticker-item {
flex: 0 0 auto;
width: min(90vw, 300px);
height: min(90vw, 300px);
background: #fff;
border-radius: 1rem;
display: grid;
place-items: center;
padding: 0.5rem;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.ticker-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.ticker-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.75rem;
transition: transform 0.5s ease;
}
.ticker-item:hover img {
transform: scale(1.05);
}
.ticker-controls {
position: absolute;
inset: 0;
pointer-events: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
}
.ticker-btn {
pointer-events: auto;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
display: grid;
place-items: center;
background: white;
color: var(--brand);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.ticker-btn:hover {
background: var(--brand);
color: white;
transform: scale(1.1);
}
.ticker-btn:focus {
outline: 3px solid rgba(13, 110, 253, 0.35);
}
/* FAQs mejorados */
.accordion-modern .accordion-item {
border: 1px solid rgba(13, 110, 253, 0.1);
border-radius: 0.75rem;
overflow: hidden;
margin-bottom: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.accordion-modern .accordion-button {
background: white;
color: var(--text);
font-weight: 600;
padding: 1.25rem;
box-shadow: none;
}
.accordion-modern .accordion-button:not(.collapsed) {
background: var(--brand-50);
color: var(--brand);
}
.accordion-modern .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d6efd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-modern .accordion-body {
padding: 1.25rem;
background: white;
}
/* Contacto mejorado */
.contact-item {
display: flex;
gap: 1rem;
align-items: center;
padding: 1rem;
background: white;
border-radius: 1rem;
box-shadow: var(--shadow);
transition: all 0.3s ease;
}
.contact-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.contact-icon {
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: var(--brand-50);
display: grid;
place-items: center;
color: var(--brand);
font-size: 1.25rem;
flex-shrink: 0;
}
.contact-item:hover .contact-icon {
background: var(--gradient);
color: white;
}
/* Footer mejorado */
footer {
background: var(--text);
color: #e9eef6;
padding: 4rem 0 2rem;
}
footer a {
color: #cdd8ff;
text-decoration: none;
transition: color 0.3s ease;
}
footer a:hover {
color: #fff;
text-decoration: none;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
/* Animaciones */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeInUp 0.6s ease forwards;
}
.delay-1 {
animation-delay: 0.1s;
}
.delay-2 {
animation-delay: 0.2s;
}
.delay-3 {
animation-delay: 0.3s;
}
/* Efectos de scroll */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 768px) {
.section, .section-alt, .section-hero {
padding: 4rem 0;
}
.hero-wrap {
min-height: auto;
text-align: center;
}
.display-5 {
font-size: 2.5rem;
}
.section-hero::before {
width: 100%;
opacity: 0.05;
}
.footer-links {
justify-content: center;
}
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* ---------- HERO: imagen "según su contenido" ---------- */
.hero-media{
display:grid;
place-items:center;
border-radius: 1rem;
background:#fff; /* o el color que uses de card */
padding: clamp(12px, 2vw, 20px);
box-shadow: 0 10px 30px rgba(0,0,0,.06);
/* Alturas responsivas sin recorte */
min-height: clamp(220px, 40vh, 520px);
}
.hero-media img{
width: 100%;
height: auto; /* respeta proporción */
max-height: clamp(220px, 40vh, 520px);
object-fit: contain; /* se ve completa */
object-position: center;
display:block;
}
/* ---------- QUIÉNES SOMOS: imagen "según su contenido" ---------- */
#quienes .img-wrap{
position: relative;
border-radius: 1rem;
background:#fff; /* para “letterboxing” prolijo */
box-shadow: 0 10px 30px rgba(0,0,0,.06);
padding: clamp(8px, 1.5vw, 16px);
/* Contenedor flexible sin recorte */
min-height: clamp(220px, 38vh, 480px);
display:grid;
place-items:center;
}
#quienes .img-wrap img{
width: 100%;
height: auto;
max-height: clamp(220px, 38vh, 480px);
object-fit: contain; /* clave */
object-position: center;
display:block;
}
/* Opcional: en pantallas muy chicas, que no se pase de ancho */
@media (max-width: 576px){
.hero-media, #quienes .img-wrap{
min-height: 240px;
}
}
/* ===== INLINE <style> BLOCK #4 ===== */
/* === HERO OVERRIDES (scoped, safe) === */
header.section-hero .hero-media{
display:grid;
place-items:center;
width:100%;
max-width:640px;
background:#fff;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: clamp(10px,2vw,18px);
min-height: clamp(220px,38vh,520px);
overflow: visible;
}
header.section-hero .hero-media img{
width:100% !important;
height:auto !important;
max-height: clamp(220px,38vh,520px);
object-fit: contain !important;
object-position: center !important;
border-radius: calc(var(--radius) - 0.25rem);
}
/* Bullets sin flex raro ni espacios absurdos */
header.section-hero .hero-bullets{
display:block !important;
padding-left:0;
margin:0 0 1rem 0;
list-style:none;
}
header.section-hero .hero-bullets li{
display:flex;
align-items:flex-start;
gap:.5rem;
margin:.35rem 0;
line-height:1.35;
letter-spacing: normal;
word-spacing: normal;
}
header.section-hero .hero-bullets li::before{
content:"✓";
flex:0 0 auto;
margin-top:.1rem;
font-weight:700;
color: var(--brand);
}
@media (max-width: 576px){
header.section-hero .hero-bullets li{ font-size:.98rem; }
}
/* ===== INLINE <style> BLOCK #5 ===== */
/* ====== SOLO afecta a la sección #trabajos ====== */
#trabajos .grid-videos{
display: grid;
gap: clamp(12px, 2.5vw, 24px);
grid-template-columns: 1fr; /* mobile */
}
@media (min-width: 576px){
#trabajos .grid-videos{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
#trabajos .grid-videos{
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"v1 v2 v4"
". v3 .";
}
#trabajos .grid-videos .v1{ grid-area: v1; }
#trabajos .grid-videos .v2{ grid-area: v2; }
#trabajos .grid-videos .v4{ grid-area: v4; }
#trabajos .grid-videos .v3{ grid-area: v3; }
}
#trabajos .video-card{
display: flex;
flex-direction: column;
gap: .5rem;
}
#trabajos .video-wrap{
background: #fff;
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0,0,0,.06);
padding: clamp(8px, 1.2vw, 14px);
aspect-ratio: 16 / 9; /* “caja” uniforme */
display: grid;
place-items: center;
}
#trabajos .video-wrap video{
width: 100%;
height: 100%;
object-fit: contain; /* se ve completo, sin recortes */
border-radius: .75rem;
display: block;
}
#trabajos .video-title{
margin: .25rem 0 0 0;
font-weight: 600;
font-size: .95rem;
text-align: center;
/* usa color del body si existe, no toca el footer */
color: var(--bs-body-color, #222);
}
/* ===== INLINE <style> BLOCK #6 ===== */
#site-footer.footer-strong{
--bg:#0b1320; /* fondo oscuro */
--ink:#eef3ff; /* texto principal */
--muted:#a8b2c7; /* texto secundario */
--line:rgba(255,255,255,.12);
--brand:#2d6bff; /* acento */
background: radial-gradient(1200px 600px at 20% -10%, #122036 0%, var(--bg) 55%);
color: var(--ink);
padding: clamp(32px, 6vw, 64px) 0;
border-top: 1px solid var(--line);
}
#site-footer .brand{
display:flex; align-items:center; gap:.75rem;
font-weight: 700; font-size: 1.15rem;
letter-spacing:.2px;
}
#site-footer .brand .dot{
width:10px; height:10px; border-radius:999px; background:var(--brand);
box-shadow:0 0 0 4px rgba(45,107,255,.15), 0 0 18px rgba(45,107,255,.45);
}
#site-footer .sub{
color:var(--muted); margin-top:.25rem; font-size:.95rem;
}
#site-footer .links{
display:flex; gap: clamp(12px, 2.5vw, 24px); flex-wrap:wrap;
}
#site-footer .links a{
color:var(--ink); text-decoration:none; font-weight:600;
padding:.35rem .55rem; border-radius:.5rem;
background: transparent; border:1px solid transparent;
transition: .2s ease;
}
#site-footer .links a:hover,
#site-footer .links a:focus{
background: rgba(255,255,255,.06);
border-color: var(--line);
outline: none;
}
#site-footer .cta{
display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem;
}
#site-footer .btn-wa{
display:inline-flex; align-items:center; gap:.5rem;
padding:.65rem .9rem; border-radius:.75rem;
background:linear-gradient(180deg,#35d16f,#1ab14f);
color:#06210e; font-weight:800; text-decoration:none;
box-shadow:0 8px 24px rgba(26,177,79,.35);
transition:.2s ease;
}
#site-footer .btn-wa:hover{ transform: translateY(-1px); }
#site-footer .meta{
display:flex; gap:1.25rem; flex-wrap:wrap; color:var(--muted);
font-size:.95rem; margin-top:.75rem;
}
#site-footer .meta i{ opacity:.9; margin-right:.35rem; }
#site-footer .divider{
height:1px; background:var(--line); margin:clamp(20px,4vw,36px) 0;
}
#site-footer .copy{
color:var(--muted); font-size:.9rem;
}
/* Layout responsivo */
@media (min-width: 992px){
#site-footer .grid{
display:grid; grid-template-columns: 1.2fr .8fr;
align-items:center; gap: clamp(16px, 4vw, 40px);
}
#site-footer .cta{ justify-content:flex-end; margin-top:0; }
#site-footer .right{ text-align:right; }
}
/* ===== INLINE <style> BLOCK #7 ===== */
:root{
--wa:#25D366; --wa-dark:#128C7E; --wa-darker:#075E54;
--dark-bg:#0b0f18; --darker-bg:#0a1324;
--light-text:#ffffff; --muted-text:rgba(255,255,255,.7);
--ig:#E4405F; --ig-dark:#C13584;
}
/* IG button (arriba del WA) */
.ig-float{
position:fixed; right:18px; bottom:92px;
z-index:9998; /* Reducido para que quede detrás del chat de WhatsApp */
width:54px; height:54px; border-radius:50%;
display:grid; place-items:center; color:#fff; text-decoration:none;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
box-shadow:0 10px 30px rgba(0,0,0,.25); transition:transform .25s, box-shadow .25s, opacity .25s;
}
.ig-float:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 36px rgba(0,0,0,.35); }
/* WhatsApp */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:9999; font-family:inherit; }
.wa-btn{
background:linear-gradient(135deg,var(--wa),var(--wa-dark));
color:#fff; border:0; width:60px; height:60px; border-radius:50%;
display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
z-index:9999; /* Mantener el botón siempre visible */
}
.wa-btn::after{ content:""; position:absolute; inset:0;
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
opacity:0; transition:opacity .3s;
}
.wa-btn:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35); }
.wa-btn:hover::after{ opacity:1; }
.wa-card{
position:absolute; right:0; bottom:74px; width:min(360px,92vw);
background:var(--dark-bg); color:var(--light-text); border-radius:18px; overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
transform:translateY(10px); opacity:0; transition:transform .3s, opacity .3s;
z-index:10000; /* Chat por encima de todo */
}
.wa-card[aria-modal="true"]{ transform:translateY(0); opacity:1; }
.wa-head{ display:flex; align-items:center; gap:12px; padding:14px;
background:linear-gradient(180deg,#0d162c,var(--darker-bg)); border-bottom:1px solid rgba(255,255,255,.06);
}
.wa-avatar{ width:40px; height:40px; border-radius:8px; background:#0e1a33;
display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.wa-title{ font-weight:700; font-size:1.05rem; }
.wa-status{ font-size:.85rem; color:var(--muted-text); display:flex; align-items:center; gap:6px; }
.wa-status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--wa); }
.wa-close{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; opacity:.7;
width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s; }
.wa-close:hover{ opacity:1; background:rgba(255,255,255,.1); }
.wa-body{ padding:12px 14px; max-height:40vh; overflow:auto; background:var(--dark-bg);
display:flex; flex-direction:column; gap:8px; }
.wa-bubble{ max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.25); animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
.wa-bot{ background:#0c1428; border:1px solid rgba(255,255,255,.06); align-self:flex-start; border-bottom-left-radius:4px; }
.wa-user{ background:var(--wa-darker); align-self:flex-end; border-bottom-right-radius:4px; }
.wa-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background:var(--dark-bg); border-top:1px solid rgba(255,255,255,.08); }
.wa-compose textarea{
resize:none; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.12);
background:#0a1324; color:var(--light-text); outline:none; min-height:44px; font-family:inherit; transition:.2s;
}
.wa-compose textarea:focus{ border-color:var(--wa); box-shadow:0 0 0 2px rgba(37,211,102,.15); }
.wa-send{ background:var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.wa-send:hover{ background:var(--wa-dark); transform:scale(1.05); }
/* Scrollbar */
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.3); }
/* Responsive */
@media (max-width:480px){
.ig-float{ right:12px; bottom:86px; width:52px; height:52px; }
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width:calc(100vw - 24px); right:0; }
}