Preview de mixed.css
/* MIXED CSS PACK */
/* Template: laicromados.com.ar/index.html */
/* Template mtime: 2025-07-30 13:30:55 */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Montserrat:wght@700;800;900&display=swap */
/* external link (no embedded): https://unpkg.com/aos@next/dist/aos.css */
/* ===== INLINE <style> BLOCK #1 ===== */
/* ✅ Mostrar contenido mientras AOS aún no cargó */
[data-aos]{opacity:1 !important; transform:none !important}
/* Cuando AOS esté listo, sí aplicamos el pre-oculto + transición */
html.aos-ready [data-aos]{opacity:0 !important; transform:translateY(14px) !important;
transition:opacity .6s ease, transform .6s ease}
/* Y cuando AOS dispara la animación, aparece */
html.aos-ready [data-aos].aos-animate{opacity:1 !important; transform:none !important}
/* ===== INLINE <style> BLOCK #2 ===== */
:root {
--red: #FF3B2F;
--red-dark: #D13228;
--graphite: #1E1E1E;
--graphite-light: #2A2A2A;
--gunmetal: #2B2E34;
--steel: #C0C7CF;
--steel-light: #E1E6EC;
--white: #FFFFFF;
--black: #0A0B0C;
--black-light: #101214;
--ticker-size: 500px;
--ticker-gap: 20px;
--ticker-speed: 120s;
--container: 1200px;
--radius-xl: 16px;
--radius-2xl: 28px;
--radius-3xl: 40px;
--shadow-1: 0 10px 30px rgba(0,0,0,.25);
--shadow-2: 0 12px 40px rgba(0,0,0,.35);
--shadow-red: 0 8px 24px rgba(255,59,47,.35);
--shadow-red-hover: 0 12px 30px rgba(255,59,47,.45);
--grad-hero: radial-gradient(1200px 600px at 20% 10%, rgba(255,59,47,.15), transparent 50%),
radial-gradient(900px 500px at 80% 0%, rgba(192,199,207,.12), transparent 60%),
linear-gradient(180deg, #101214, #0A0B0C);
--grad-card: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
--grad-accent: linear-gradient(90deg, #FF3B2F, #FF6B3B);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
background: var(--black);
color: var(--steel-light);
font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Montserrat', 'Outfit', sans-serif;
font-weight: 800;
line-height: 1.1;
}
a {
color: var(--red);
text-decoration: none;
transition: all 0.3s ease;
}
img {
max-width: 100%;
display: block;
}
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 20px;
}
/* Navbar */
.navbar {
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: saturate(180%) blur(12px);
background: rgba(20, 22, 25, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.navbar.scrolled {
background: rgba(10, 11, 12, 0.98);
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 14px 0;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
letter-spacing: 0.5px;
}
.brand-logo {
width: 42px;
height: 42px;
border-radius: 50%;
background: conic-gradient(from 200deg, #9EA7B2, #E6EBF1 30%, #9EA7B2 60%, #CAD2DA);
border: 2px solid rgba(255, 255, 255, 0.18);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.brand-logo img {
width: 80%;
height: 80%;
object-fit: contain;
}
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.nav-links a {
padding: 8px 16px;
border-radius: var(--radius-xl);
color: var(--steel-light);
font-weight: 500;
opacity: 0.9;
transition: all 0.3s ease;
}
.nav-links a:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
opacity: 1;
transform: translateY(-1px);
}
.nav-cta {
display: flex;
align-items: center;
gap: 12px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius-xl);
border: 1px solid transparent;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-primary {
background: var(--red);
color: var(--white);
box-shadow: var(--shadow-red);
}
.btn-primary:hover {
background: var(--red-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-red-hover);
}
.btn-outline {
border-color: rgba(255, 255, 255, 0.18);
color: var(--steel-light);
background: transparent;
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
border-color: rgba(255, 255, 255, 0.25);
}
.mobile-toggle {
display: none;
background: transparent;
border: 0;
color: var(--white);
font-size: 24px;
cursor: pointer;
padding: 8px;
}
@media (max-width: 980px) {
.mobile-toggle {
display: inline-flex;
}
.nav-links {
display: none;
flex-direction: column;
width: 100%;
margin-top: 10px;
}
.nav-links.open {
display: flex;
}
.nav-cta {
display: none;
}
.nav-inner {
flex-wrap: wrap;
}
}
/* Hero Section */
.hero {
background: var(--grad-hero);
position: relative;
overflow: hidden;
padding: 120px 0 80px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hero .grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: center;
}
@media (max-width: 980px) {
.hero .grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
.hero-card {
background: linear-gradient(145deg, rgba(30, 30, 30, 0.8), rgba(20, 22, 25, 0.9));
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2);
padding: 40px;
backdrop-filter: blur(8px);
position: relative;
overflow: hidden;
}
.hero-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 59, 47, 0.1) 0%, transparent 70%);
z-index: -1;
}
.eyebrow {
display: inline-block;
font-weight: 700;
color: var(--steel);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 12px;
margin-bottom: 12px;
position: relative;
padding-left: 16px;
}
.eyebrow::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: var(--red);
border-radius: 50%;
}
.hero h1 {
font-size: clamp(36px, 5vw, 52px);
margin: 12px 0 16px;
line-height: 1.05;
background: linear-gradient(to right, var(--steel-light), var(--white));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
font-size: clamp(16px, 2.2vw, 18px);
opacity: 0.92;
margin: 0 0 20px;
color: var(--steel);
}
.ticks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 20px;
margin: 22px 0 28px;
}
.tick {
display: flex;
gap: 10px;
align-items: flex-start;
}
.tick svg {
flex: 0 0 auto;
margin-top: 4px;
color: var(--red);
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-showpiece {
aspect-ratio: 1/1;
border-radius: var(--radius-2xl);
background: radial-gradient(400px 240px at 60% 30%, rgba(255, 59, 47, 0.25), transparent 60%), linear-gradient(145deg, #16181B, #0D0F12);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--shadow-1);
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.hero-showpiece::before {
content: '';
position: absolute;
inset: 0;
background: url('img/logolai.png') center/contain no-repeat;
opacity: 0.9;
z-index: 1;
}
.chrome-ring {
width: min(85%, 520px);
height: min(85%, 520px);
border-radius: 50%;
background: conic-gradient(from 220deg, #9EA7B2 0 20%, #E6EBF1 20% 35%, #9EA7B2 35% 55%, #CAD2DA 55% 75%, #9EA7B2 75% 100%);
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
position: relative;
z-index: 2;
mix-blend-mode: overlay;
}
.chrome-ring::after {
content: "";
position: absolute;
inset: 10%;
border-radius: 50%;
background: radial-gradient(100% 100% at 60% 40%, #1E2227, #0C0E11);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}
/* Sections */
section {
padding: 100px 0;
position: relative;
}
section:nth-child(even) {
background: linear-gradient(180deg, var(--black-light), var(--black));
}
.section-head {
display: block;
margin-bottom: 32px;
}
.section-title {
font-size: clamp(28px, 4vw, 42px);
margin: 0;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 4px;
background: var(--grad-accent);
border-radius: 2px;
}
.section-sub {
opacity: 0.85;
margin: 10px 0 0 0;
font-size: 18px;
max-width: 65ch;
}
/* Cards */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
@media (max-width: 980px) {
.cards {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.cards {
grid-template-columns: 1fr;
}
}
.card {
background: var(--grad-card);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-xl);
padding: 28px;
box-shadow: var(--shadow-1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--grad-accent);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.2);
}
.card:hover::before {
width: 6px;
}
.card h3 {
margin: 0 0 12px;
font-size: 20px;
color: var(--white);
}
.muted {
opacity: 0.85;
color: var(--steel);
}
/* Features */
.features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
@media (max-width: 780px) {
.features {
grid-template-columns: 1fr;
}
}
.feat {
display: flex;
gap: 16px;
align-items: flex-start;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: var(--radius-xl);
transition: all 0.3s ease;
}
.feat:hover {
background: rgba(255, 255, 255, 0.06);
transform: translateY(-3px);
}
.feat svg {
flex: 0 0 auto;
margin-top: 4px;
color: var(--red);
}
.feat div {
flex: 1;
}
.feat strong {
display: block;
margin-bottom: 6px;
color: var(--white);
}
/* Ticker */
.ticker-wrap {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
border: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
padding: 20px;
}
.ticker-track {
display: flex;
gap: var(--ticker-gap);
animation: ticker var(--ticker-speed) linear infinite;
will-change: transform;
width: max-content;
}
.ticker-track:hover {
animation-play-state: paused;
}
.ticker-item {
flex: 0 0 auto;
width: var(--ticker-size);
height: var(--ticker-size);
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--black-light);
display: grid;
place-items: center;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
}
.ticker-item:hover {
transform: scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
}
.ticker-item img {
width: 100%;
height: 100%;
object-fit: contain;
background: linear-gradient(180deg, #0E1114, #0A0B0C);
padding: 20px;
}
.ticker-item img.fit-contain {
object-fit: contain;
background: linear-gradient(180deg, #0E1114, #0A0B0C);
padding: 20px;
}
@keyframes ticker {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-50% - var(--ticker-gap)));
}
}
@media (max-width: 1200px) {
:root {
--ticker-size: 420px;
}
}
@media (max-width: 980px) {
:root {
--ticker-size: 340px;
}
}
@media (max-width: 640px) {
:root {
--ticker-size: 280px;
--ticker-gap: 14px;
}
}
/* Contact Form */
.contact-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 32px;
}
@media (max-width: 980px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
.form {
background: var(--grad-card);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-xl);
padding: 28px;
box-shadow: var(--shadow-1);
}
label {
display: block;
margin: 14px 0 8px;
font-weight: 600;
color: var(--steel-light);
}
input,
select,
textarea {
width: 100%;
padding: 14px 16px;
border-radius: var(--radius-xl);
border: 1px solid rgba(255, 255, 255, 0.14);
background: var(--black-light);
color: var(--steel-light);
outline: none;
font-family: inherit;
font-size: 16px;
transition: all 0.3s ease;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(255, 59, 47, 0.2);
color: var(--white);
}
textarea {
min-height: 140px;
resize: vertical;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 640px) {
.grid-2 {
grid-template-columns: 1fr;
}
}
/* FAQ */
details {
background: var(--grad-card);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-xl);
padding: 20px;
margin-bottom: 12px;
transition: all 0.3s ease;
}
details:hover {
border-color: rgba(255, 255, 255, 0.2);
}
details[open] {
background: var(--black-light);
}
summary {
font-weight: 600;
color: var(--white);
cursor: pointer;
position: relative;
padding-right: 30px;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: var(--red);
transition: all 0.3s ease;
}
details[open] summary::after {
content: '-';
}
details p {
margin-top: 12px;
opacity: 0.85;
}
/* Footer */
.footer {
background: linear-gradient(180deg, var(--black), #070809);
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 60px 0 40px;
margin-top: 30px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 30px;
}
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.footer-grid {
grid-template-columns: 1fr;
}
}
.footer h3 {
color: var(--white);
margin-bottom: 16px;
font-size: 20px;
}
.footer h4 {
color: var(--white);
margin-bottom: 16px;
font-size: 18px;
}
.footer small {
opacity: 0.7;
display: block;
margin-top: 20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.footer li {
opacity: 0.8;
transition: all 0.3s ease;
}
.footer li:hover {
opacity: 1;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.8s ease forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
.delay-3 {
animation-delay: 0.6s;
}
/* Particles */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
pointer-events: none;
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* === Compact & aligned navbar === */
.nav-inner{display:flex;align-items:center;gap:16px;padding:6px 0 !important;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{width:40px;height:40px;border-radius:50%;}
.brand-name{font-size:16px;line-height:1.1;margin:0}
.mobile-toggle{min-width:40px;min-height:40px;line-height:1;border:0}
.nav-links{align-items:center;gap:6px}
.nav-links a{padding:6px 10px !important;font-size:14px !important;line-height:1.1 !important}
.nav-cta .btn{padding:8px 12px !important;font-size:14px !important;line-height:1.1 !important}
.navbar .btn{line-height:1.1}
@media (max-width: 640px){
.brand-name{font-size:15px}
.nav-links a{padding:8px 10px}
}
/* === Map embed style === */
.map-embed{margin-top:16px;border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-xl);overflow:hidden;background:var(--black-light);box-shadow:var(--shadow-1)}
.map-embed iframe{width:100%;height:320px;border:0;}
@media (max-width: 640px){.map-embed iframe{height:260px}}
/* ===== INLINE <style> BLOCK #4 ===== */
/* HERO: imagen de fondo (no se toca el contenido de arriba).
Cambiá la ruta en la línea marcada para usar tu foto. */
.hero{ background:none !important; position:relative; overflow:hidden; }
.hero::before{
content:""; position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(10,11,12,.22) 0%, rgba(10,11,12,.65) 70%),
radial-gradient(900px 500px at 20% 15%, rgba(0,0,0,.30), transparent 65%),
url('img/herolai4.png') center/cover no-repeat; /* ← IMAGEN DESKTOP (cambiá esta ruta para escritorio) */
z-index:-2; filter:saturate(.98) contrast(1.02);
}
/* ================= TRANSPARENCIA DE LO QUE ESTÁ SOBRE LA IMAGEN ================
Ajustá los valores (0–1). Cuanto más chico, más transparente.
No modifica el fondo del hero, solo las “cajas” encima.
*/
/* Panel de texto (izquierda) */
.hero-card{
background: linear-gradient(145deg,
rgba(30,30,30,.50), /* ← opacidad 1 */
rgba(20,22,25,.55) /* ← opacidad 2 */
) !important;
border-color: rgba(255,255,255,.10) !important;
backdrop-filter: blur(8px);
}
/* Panel del logo / showpiece (derecha) */
.hero-showpiece{
background: linear-gradient(145deg,
rgba(22,24,27,.35), /* ← opacidad 1 */
rgba(13,15,18,.38) /* ← opacidad 2 */
) !important;
border-color: rgba(255,255,255,.08) !important;
backdrop-filter: blur(6px);
}
.hero-showpiece::before{
opacity: .88 !important; /* ← transparencia del logo/imagen dentro del panel derecho */
}
/* ===== INLINE <style> BLOCK #5 ===== */
/* IMPORTANTE
- Desktop usa la imagen marcada más abajo como "IMAGEN DESKTOP".
- Phone (≤640px) usa OTRA imagen vertical. Cambiá la ruta en la línea marcada "IMAGEN MOBILE".
*/
@media (max-width: 640px){
.hero::before{
/* === IMAGEN MOBILE (VERTICAL) — CAMBIAR ESTA RUTA === */
background:
linear-gradient(180deg, rgba(10,11,12,.24) 0%, rgba(10,11,12,.85) 86%),
radial-gradient(800px 420px at 22% 12%, rgba(0,0,0,.35), transparent 62%),
url('img/herovertical3.png') center/cover no-repeat !important; /* ← IMAGEN MOBILE */
}
}
/* ===== INLINE <style> BLOCK #6 ===== */
#faqs [data-aos], #contacto [data-aos] { opacity:1 !important; transform:none !important }
/* ===== INLINE <style> BLOCK #7 ===== */
.video-container {
display: flex;
justify-content: center;
gap: 20px;
padding: 40px 10px;
max-width: 100vw;
flex-wrap: wrap;
background-color: #000;
}
.video-wrapper {
position: relative;
width: 19vw;
height: 33.8vw;
min-width: 216px;
min-height: 384px;
border-radius: 12px;
overflow: hidden;
background-color: #000;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 🎯 Enmascarado más alto todavía para tapar completamente */
.video-wrapper.center::before,
.video-wrapper.center::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 22.1%; /* antes 18%, ahora más */
background: #000;
z-index: 2;
}
.video-wrapper.center::before {
top: 0;
}
.video-wrapper.center::after {
bottom: 0;
}
@media (max-width: 768px) {
.video-container {
flex-direction: column;
align-items: center;
gap: 30px;
}
.video-wrapper {
width: 80vw;
height: 140vw;
}
}
/* ===== INLINE <style> BLOCK #8 ===== */
:root{
--wa-right: 20px;
--wa-bottom: 20px;
}
/* Chips (siempre sin contenedor, position:fixed) */
.wa-chip{
position: fixed;
right: calc(var(--wa-right) + env(safe-area-inset-right));
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 16px; border-radius: 28px; text-decoration: none;
color:#fff; font-weight:700; background:#25D366;
box-shadow: 0 6px 24px rgba(37,211,102,.45);
transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
z-index: 9999;
}
.wa-chip svg{ width:22px; height:22px; fill:#fff; }
.wa-chip:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.55); }
/* Posiciones independientes (sin wrapper) */
.wa-1{ bottom: calc(var(--wa-bottom) + env(safe-area-inset-bottom) + 80px); background:#25D366; }
.wa-2{ bottom: calc(var(--wa-bottom) + env(safe-area-inset-bottom) + 140px); background:#128C7E; }
/* FAB */
.wa-fab{
position: fixed;
right: calc(var(--wa-right) + env(safe-area-inset-right));
bottom: calc(var(--wa-bottom) + env(safe-area-inset-bottom));
display: inline-flex; align-items:center; gap:10px;
padding: 14px 18px; border-radius: 28px; border:0; cursor:pointer; outline:0;
background:#25D366; color:#fff; box-shadow: 0 8px 26px rgba(0,0,0,.25);
transition: transform .2s, box-shadow .2s; z-index: 9999;
}
.wa-fab svg{ width:22px; height:22px; fill:#fff; }
.wa-badge{
display:inline-flex; align-items:center; justify-content:center;
min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#0b7b62;
font-size:12px; font-weight:700;
}
.wa-fab[aria-expanded="true"]{ transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.28); }
/* Mobile (<992px): chips ocultos hasta abrir */
@media (max-width: 991.98px){
.wa-chip{ opacity:0; pointer-events:none; transform: translateY(6px); }
body.wa-open .wa-chip{ opacity:1; pointer-events:auto; transform: translateY(0); }
.wa-fab{ display:inline-flex; }
}
/* Desktop (>=992px): chips visibles, FAB oculto */
@media (min-width: 992px){
.wa-chip{ opacity:1; pointer-events:auto; transform:none; }
.wa-fab{ display:none; }
}
/* Muy angosto: ocultar texto para que entren */
@media (max-width: 360px){
.wa-chip span{ display:none; }
}