Preview de mixed.css
/* MIXED CSS PACK */
/* Template: drugstorecanguro.com.ar/index.html */
/* Template mtime: 2025-12-30 22:41:15 */
/* 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.min.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--accent: #fe0000;
--accent-light: #ff3333;
--accent-dark: #cc0000;
--text: #0f172a;
--text-light: #334155;
--muted: #64748b;
--bg: #ffffff;
--soft: #f8fafc;
--card-bg: rgba(255, 255, 255, 0.95);
--border: rgba(15, 23, 42, 0.08);
--border-light: rgba(15, 23, 42, 0.04);
--shadow: 0 20px 60px rgba(2, 6, 23, 0.08);
--shadow-sm: 0 8px 30px rgba(2, 6, 23, 0.06);
--shadow-lg: 0 30px 80px rgba(254, 0, 0, 0.12);
--radius: 24px;
--radius-sm: 16px;
--radius-lg: 32px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--gradient-accent: linear-gradient(135deg, #fe0000 0%, #ff5e5e 100%);
--gradient-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
html, body {
background: var(--bg);
color: var(--text);
scroll-behavior: smooth;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
body {
overflow-x: hidden;
background: var(--gradient-bg);
}
h1, h2, h3, h4, .section-title {
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
}
p { line-height: 1.7; color: var(--text-light); }
.section { padding: 100px 0; position: relative; }
.section::before {
content:'';
position:absolute; top:0; left:0; width:100%; height:1px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.soft { background: var(--soft); position: relative; overflow: hidden; }
.soft::before{
content:'';
position:absolute; width:300px; height:300px;
background: radial-gradient(circle, rgba(254,0,0,0.03) 0%, transparent 70%);
top:-150px; right:-150px; z-index:0;
}
.section-title{
font-weight: 900;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--text) 0%, var(--text-light) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.section-subtitle{
color: var(--muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
padding:10px 20px; border-radius:100px;
font-weight:700; font-size:0.9rem;
background: rgba(254,0,0,0.08);
color: var(--accent);
border:1px solid rgba(254,0,0,0.15);
margin-bottom: 20px;
backdrop-filter: blur(10px);
transition: var(--transition);
position:relative; overflow:hidden;
}
.eyebrow::before{
content:'';
position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transform: translateX(-100%);
}
.eyebrow:hover::before{ animation: shine 1s ease; }
@keyframes shine{ 100%{ transform: translateX(100%);} }
/* Navbar */
.navbar{
background: rgba(255,255,255,0.96);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light);
padding-top:1rem; padding-bottom:1rem;
box-shadow: 0 4px 30px rgba(0,0,0,0.05);
transition: var(--transition);
}
.navbar.scrolled{
padding-top:.75rem; padding-bottom:.75rem;
box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
.brand-mark{
width:48px; height:48px; border-radius:14px;
display:grid; place-items:center;
background: var(--gradient-accent);
color:#fff; font-weight:900; font-size:1.2rem;
box-shadow: 0 8px 24px rgba(254,0,0,0.2);
transition: var(--transition);
}
.navbar-brand:hover .brand-mark{
transform: rotate(10deg) scale(1.05);
box-shadow: 0 12px 32px rgba(254,0,0,0.3);
}
.navbar-brand .brand-name{
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.1;
font-size: 1.3rem;
}
.navbar-brand .brand-name span{
color: var(--accent); position: relative;
}
.navbar-brand .brand-name span::after{
content:'';
position:absolute; bottom:2px; left:0;
width:100%; height:2px; background: var(--gradient-accent);
border-radius: 2px;
}
.nav-link{
color: var(--text);
font-weight: 600;
padding: .5rem 1rem !important;
margin: 0 .2rem;
border-radius: 10px;
transition: var(--transition);
position: relative;
}
.nav-link::before{
content:'';
position:absolute; bottom:0; left:50%;
transform: translateX(-50%);
width:0; height:2px;
background: var(--gradient-accent);
border-radius:2px;
transition: var(--transition);
}
.nav-link:hover{ color: var(--accent); background: rgba(254,0,0,0.04); }
.nav-link:hover::before{ width:70%; }
.nav-link.active{ color: var(--accent); font-weight:700; }
.nav-link.active::before{ width:70%; }
/* Buttons */
.btn-accent{
background: var(--gradient-accent);
border:none; color:white;
border-radius:100px;
font-weight:700;
padding:14px 28px;
box-shadow: 0 12px 40px rgba(254,0,0,0.25);
transition: var(--transition);
position:relative; overflow:hidden; z-index:1;
}
.btn-accent::before{
content:'';
position:absolute; inset:0;
background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
z-index:-1; opacity:0; transition: var(--transition);
}
.btn-accent:hover{ transform: translateY(-3px); box-shadow: 0 20px 50px rgba(254,0,0,0.35); }
.btn-accent:hover::before{ opacity:1; }
.btn-outline-accent{
border: 2px solid rgba(254,0,0,0.3);
color: var(--accent);
background: transparent;
border-radius:100px;
font-weight:700;
padding: 12px 26px;
transition: var(--transition);
position:relative; overflow:hidden;
}
.btn-outline-accent::before{
content:'';
position:absolute; inset:0;
background: rgba(254,0,0,0.05);
z-index:-1;
transform: scaleX(0);
transform-origin: right;
transition: transform .4s cubic-bezier(0.4,0,0.2,1);
}
.btn-outline-accent:hover{
border-color: var(--accent);
color: var(--accent);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(254,0,0,0.15);
}
.btn-outline-accent:hover::before{
transform: scaleX(1);
transform-origin: left;
}
/* Hero */
.hero{
padding-top: 140px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.hero::before{
content:'';
position:absolute; width:600px; height:600px;
background: radial-gradient(circle, rgba(254,0,0,0.08) 0%, transparent 70%);
top:-300px; left:-300px; z-index:0;
}
.hero::after{
content:'';
position:absolute; width:500px; height:500px;
background: radial-gradient(circle, rgba(15,23,42,0.05) 0%, transparent 70%);
bottom:-250px; right:-250px; z-index:0;
}
.hero > .container{ position:relative; z-index:1; }
.hero h1{
font-weight:900;
letter-spacing:-0.03em;
line-height:1.05;
font-size: clamp(2.5rem, 4vw, 3.75rem);
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--text) 0%, #334155 100%);
-webkit-background-clip:text; -webkit-text-fill-color: transparent;
background-clip:text;
}
.hero p{ color: var(--text-light); font-size: 1.15rem; max-width: 600px; }
.hero-card{
background: var(--card-bg);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
transform: perspective(1000px) rotateY(-5deg);
transition: var(--transition);
position:relative;
z-index: 1;
}
.hero-card:hover{
transform: perspective(1000px) rotateY(0deg);
box-shadow: 0 40px 100px rgba(254,0,0,0.15);
}
.hero-img{
width: 100%;
height: clamp(300px, 50vh, 500px);
object-fit: cover;
display:block;
transition: transform .5s ease;
}
.hero-card:hover .hero-img{ transform: scale(1.05); }
.hero-bullets{
display:grid; grid-template-columns: 1fr;
gap:14px; margin: 28px 0;
}
.bullet{
display:flex; gap:14px; align-items:flex-start;
color: var(--text);
font-weight:600;
padding: 12px 16px;
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.6);
border: 1px solid var(--border);
transition: var(--transition);
}
.bullet:hover{
background: #fff;
border-color: rgba(254,0,0,0.2);
transform: translateX(5px);
box-shadow: var(--shadow-sm);
}
.bullet i{ color: var(--accent); font-size: 1.1rem; margin-top: 2px; }
/* Cards */
.card-soft{
background: var(--card-bg);
border: 1px solid var(--border-light);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
height: 100%;
padding: 32px;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.card-soft::before{
content:'';
position:absolute; top:0; left:0;
width:4px; height:100%;
background: var(--gradient-accent);
transform: scaleY(0);
transform-origin: top;
transition: transform .4s cubic-bezier(0.4,0,0.2,1);
}
.card-soft:hover{
transform: translateY(-10px);
box-shadow: var(--shadow);
}
.card-soft:hover::before{ transform: scaleY(1); }
.icon-pill{
width:56px; height:56px;
border-radius: 18px;
display:grid; place-items:center;
background: rgba(254,0,0,0.08);
border: 1px solid rgba(254,0,0,0.15);
color: var(--accent);
font-size: 1.4rem;
flex: 0 0 auto;
transition: var(--transition);
}
.card-soft:hover .icon-pill{
background: var(--gradient-accent);
color:#fff;
transform: rotate(15deg) scale(1.1);
}
.muted{ color: var(--muted); font-size: .95rem; line-height: 1.6; }
/* Contact */
.contact-wrap{
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
background: var(--card-bg);
box-shadow: var(--shadow-lg);
overflow:hidden;
position: relative;
}
.contact-wrap::before{
content:'';
position:absolute; width:200px; height:200px;
background: radial-gradient(circle, rgba(254,0,0,0.05) 0%, transparent 70%);
top:-100px; right:-100px; z-index:0;
}
.contact-info{
background: linear-gradient(135deg, rgba(254,0,0,0.03) 0%, transparent 100%);
position: relative; z-index:1;
}
.form-control, .form-select{
border-radius: 14px;
border: 1px solid var(--border);
padding: 14px 16px;
font-size: 1rem;
transition: var(--transition);
background: #fff;
}
.form-control:focus, .form-select:focus{
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(254,0,0,0.1);
transform: translateY(-2px);
}
/* Footer */
footer{
border-top: 1px solid var(--border-light);
background: var(--card-bg);
position: relative; overflow:hidden;
}
footer::before{
content:'';
position:absolute; width:400px; height:400px;
background: radial-gradient(circle, rgba(254,0,0,0.03) 0%, transparent 70%);
bottom:-200px; left:-200px; z-index:0;
}
footer > .container{ position: relative; z-index:1; }
.footer-title{ font-weight:900; font-size: 1.8rem; letter-spacing: -0.02em; }
.footer-title span{ color: var(--accent); position:relative; }
.footer-title span::after{
content:'';
position:absolute; bottom:2px; left:0;
width:100%; height:2px;
background: var(--gradient-accent);
border-radius:2px;
}
.footer-link{
color: var(--muted);
text-decoration:none;
transition: var(--transition);
padding:4px 0;
display:inline-block;
position:relative;
}
.footer-link::before{
content:'';
position:absolute; bottom:0; left:0;
width:0; height:1px;
background: var(--accent);
transition: var(--transition);
}
.footer-link:hover{
color: var(--accent);
transform: translateX(5px);
}
.footer-link:hover::before{ width: 20px; }
section { scroll-margin-top: 100px; }
/* Scroll anim */
.animate-on-scroll{
opacity:0;
transform: translateY(30px);
transition: opacity .6s ease, transform .6s ease;
}
.animate-on-scroll.animated{ opacity:1; transform: translateY(0); }
/* Gallery */
.gal-gallery{ position: relative; }
.gal-frame{
height: clamp(280px, 50vh, 500px);
background: var(--card-bg);
border-radius: 20px;
overflow:hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
display:flex; align-items:center; justify-content:center;
padding:10px;
border: 1px solid var(--border-light);
transition: var(--transition);
}
.gal-frame:hover{ box-shadow: 0 30px 80px rgba(0,0,0,0.15); transform: translateY(-5px); }
.gal-img{
width:auto !important; max-width:100%;
height:auto !important; max-height:100%;
object-fit: contain !important;
object-position:center;
display:block;
cursor: zoom-in;
transition: transform .5s ease;
}
.gal-img:hover{ transform: scale(1.02); }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next{
z-index:20;
width:60px; height:60px;
top:50%;
transform: translateY(-50%);
opacity:1;
background: rgba(255,255,255,0.9);
border-radius: 50%;
margin: 0 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border: 1px solid var(--border-light);
transition: var(--transition);
}
.gal-gallery .carousel-control-prev:hover,
.gal-gallery .carousel-control-next:hover{
background:#fff;
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
transform: translateY(-50%) scale(1.1);
}
.gal-gallery .gal-ctrl-icon{
width:2.8rem; height:2.8rem;
background-size: 60% 60%;
filter: brightness(0.7);
}
.gal-gallery .carousel-indicators{ z-index:10; bottom:-60px; }
.gal-gallery .carousel-indicators button{
width:12px; height:12px;
border-radius:50%;
background: rgba(0,0,0,0.2);
border:none;
transition: var(--transition);
margin: 0 6px;
}
.gal-gallery .carousel-indicators button.active{
background: var(--accent);
transform: scale(1.3);
}
/* Lightbox */
#galLightbox .modal-content{ background: rgba(0,0,0,0.95); border:none; border-radius:0; }
#galLightboxImg{ max-height: 90vh; width:100%; height:auto; object-fit: contain; background: transparent; }
.gal-lightbox-nav{
position:absolute; top:50%; transform: translateY(-50%);
border:0; width:60px; height:60px; border-radius:50%;
background: rgba(255,255,255,0.15);
color:#fff; font-size: 32px; line-height: 60px;
text-align:center; z-index:5; cursor:pointer;
transition: var(--transition);
backdrop-filter: blur(10px);
}
.gal-lightbox-nav:hover{ background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.1); }
/* Ofertas */
.oferta-card{
background: var(--card-bg);
border: 1px solid var(--border-light);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: var(--transition);
height: 100%;
display:flex;
flex-direction: column;
}
.oferta-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow); }
.oferta-media{
width:100%;
height: 240px;
background: #fff;
display:flex;
align-items:center;
justify-content:center;
border-bottom: 1px solid var(--border-light);
padding: 10px;
}
/* ✅ para que NO recorte: se ve según su contenido */
.oferta-img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display:block;
background: transparent;
}
.oferta-noimg{
width:100%;
height: 240px;
display:grid;
place-items:center;
background: linear-gradient(135deg, rgba(254,0,0,.08), rgba(15,23,42,.02));
border-bottom: 1px solid var(--border-light);
color: var(--muted);
font-weight: 700;
}
.oferta-body{ padding: 22px; flex: 1 1 auto; display:flex; flex-direction: column; }
.oferta-title{ font-weight: 900; margin: 0 0 6px; }
.oferta-price{ color: var(--accent); font-weight: 900; font-size: 1.15rem; margin-bottom: 10px; }
.oferta-desc{ color: var(--muted); margin: 0 0 16px; }
.oferta-actions{ margin-top:auto; }
/* Responsive */
@media (max-width: 991.98px){
.section{ padding: 80px 0; }
.hero{ padding-top: 120px; padding-bottom: 60px; }
.hero-card{ transform:none; margin-top: 40px; }
.hero-card:hover{ transform: translateY(-10px); }
}
@media (max-width: 767.98px){
.section{ padding: 60px 0; }
.section-title{ font-size: 2rem; }
.hero h1{ font-size: 2.2rem; }
.card-soft{ padding: 24px; }
.gal-frame{ height: clamp(220px, 40vh, 350px); }
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next{ width: 50px; height: 50px; margin: 0 10px; }
.gal-lightbox-nav{ width: 50px; height: 50px; font-size: 28px; line-height: 50px; }
.oferta-media{ height: 220px; }
.oferta-noimg{ height: 220px; }
}
/* Scrollbar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--soft); }
::-webkit-scrollbar-thumb{ background: var(--accent); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent-dark); }
/* ===== FOOTER SOLIDO (override) ===== */
footer.footer-solid{
position: relative;
overflow: hidden;
border-top: 0;
background: linear-gradient(135deg,
#070B14 0%,
#0B1220 35%,
#0F172A 70%,
#0A0F1C 100%
);
color: rgba(255,255,255,0.92);
}
/* línea superior con acento */
footer.footer-solid::before{
content:'';
position:absolute; left:0; top:0; width:100%; height:1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
z-index: 0;
}
/* glow rojo + glow frío */
footer.footer-solid::after{
content:'';
position:absolute; inset:-200px;
background:
radial-gradient(circle at 15% 75%, rgba(254,0,0,0.16) 0%, transparent 55%),
radial-gradient(circle at 85% 25%, rgba(255,255,255,0.06) 0%, transparent 60%);
filter: blur(8px);
z-index: 0;
}
footer.footer-solid > .container{ position: relative; z-index: 1; }
/* texto y links dentro del footer */
footer.footer-solid .muted{
color: rgba(255,255,255,0.68) !important;
}
footer.footer-solid .footer-link{
color: rgba(255,255,255,0.72);
}
footer.footer-solid .footer-link:hover{
color: #fff;
transform: translateX(6px);
}
footer.footer-solid .footer-link::before{
background: rgba(254,0,0,0.9);
}
/* título */
footer.footer-solid .footer-title{
color:#fff;
}
footer.footer-solid .footer-title span{
color: #fff;
}
footer.footer-solid .footer-title span::after{
background: var(--gradient-accent);
}
/* íconos sociales en “pills” */
.footer-social{
width:44px; height:44px;
border-radius: 14px;
display:inline-flex;
align-items:center;
justify-content:center;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.85);
transition: var(--transition);
}
.footer-social:hover{
transform: translateY(-3px);
background: rgba(254,0,0,0.14);
border-color: rgba(254,0,0,0.35);
color: #fff;
box-shadow: 0 18px 50px rgba(254,0,0,0.18);
}
/* bloquecitos de contacto */
.footer-chip{
display:flex; gap:10px; align-items:flex-start;
padding: 10px 12px;
border-radius: 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
}
.footer-chip i{
color: rgba(255,255,255,0.92);
margin-top: 2px;
}
/* barra final */
.footer-bottom{
border-top: 1px solid rgba(255,255,255,0.10) !important;
}
.brand-mark {
width: 48px;
height: 48px;
background: #e53935; /* rojo */
border-radius: 12px;
}
.brand-logo-img {
max-width: 70%;
max-height: 70%;
object-fit: contain;
}
.footer-logo {
width: 36px;
height: 36px;
object-fit: contain;
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root{
--wac-accent: var(--accent, #fe0000);
--wac-text: #0f172a;
--wac-muted:#64748b;
--wac-border: rgba(2,6,23,.10);
--wac-shadow: 0 20px 60px rgba(2, 6, 23, .22);
}
.wac-wrap{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family: inherit;
}
/* botón WA oficial */
.wac-fab{
width:60px; height:60px;
border-radius:999px;
border:none;
color:#fff;
cursor:pointer;
display:grid;
place-items:center;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
box-shadow: 0 14px 34px rgba(37, 211, 102, .45);
transition: transform .22s ease, box-shadow .22s ease;
}
.wac-fab:hover{
transform: translateY(-2px) scale(1.04);
box-shadow: 0 18px 42px rgba(37, 211, 102, .55);
}
/* panel plano (sin gradient, sin backdrop) */
.wac-panel{
position:absolute;
right:0;
bottom:74px;
width:min(360px, calc(100vw - 28px));
border-radius:18px;
overflow:hidden;
border:1px solid var(--wac-border);
background:#fff;
box-shadow: var(--wac-shadow);
transform: translateY(10px);
opacity:0;
pointer-events:none;
transition: opacity .2s ease, transform .2s ease;
}
.wac-panel.is-open{
transform: translateY(0);
opacity:1;
pointer-events:auto;
}
.wac-head{
padding:14px;
background:#fff; /* sin gradiente */
border-bottom:1px solid rgba(2,6,23,.08);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.wac-left{ display:flex; align-items:center; gap:10px; }
.wac-avatar{
width:40px; height:40px;
border-radius:12px;
display:grid; place-items:center;
font-weight:800;
color:#fff;
background: var(--wac-accent); /* accent plano */
}
.wac-title{ font-weight:800; color:var(--wac-text); line-height:1.05; }
.wac-sub{ font-size:.85rem; color:var(--wac-muted); margin-top:2px; }
.wac-x{
width:36px; height:36px;
border-radius:12px;
border:1px solid rgba(2,6,23,.12);
background:#fff;
color:var(--wac-text);
font-size:22px;
cursor:pointer;
display:grid; place-items:center;
transition: transform .18s ease;
}
.wac-x:hover{ transform: scale(1.05); }
.wac-body{
padding:14px;
background:#f8fafc; /* plano */
display:flex;
flex-direction:column;
gap:10px;
max-height: 44vh;
overflow:auto;
}
.wac-bubble{
max-width: 90%;
padding:10px 12px;
border-radius:14px;
font-size:.95rem;
line-height:1.35;
box-shadow: 0 6px 14px rgba(2,6,23,.08);
border:1px solid rgba(2,6,23,.08);
background:#fff;
color:var(--wac-text);
}
.wac-bubble.user{
align-self:flex-end;
background: rgba(254,0,0,.06);
border-color: rgba(254,0,0,.16);
}
.wac-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.wac-chip{
border:1px solid rgba(2,6,23,.12);
background:#fff;
color:var(--wac-text);
padding:7px 10px;
border-radius:999px;
cursor:pointer;
font-size:.86rem;
transition: transform .15s ease, border-color .15s ease;
}
.wac-chip:hover{
transform: translateY(-1px);
border-color: rgba(254,0,0,.30);
}
.wac-compose{
display:grid;
grid-template-columns: 1fr auto;
gap:10px;
padding:10px;
background:#fff;
border-top:1px solid rgba(2,6,23,.08);
}
.wac-compose textarea{
resize:none;
border-radius:14px;
border:1px solid rgba(2,6,23,.16);
padding:10px 12px;
font-family: inherit;
font-size:.95rem;
outline:none;
transition: box-shadow .18s ease, border-color .18s ease;
}
.wac-compose textarea:focus{
border-color: rgba(254,0,0,.55);
box-shadow: 0 0 0 4px rgba(254,0,0,.10);
}
/* enviar: verde WA (plano, sin gradient si querés) */
.wac-send{
width:46px; height:46px;
border:none;
border-radius:14px;
cursor:pointer;
color:#fff;
display:grid;
place-items:center;
background:#128C7E;
box-shadow: 0 12px 26px rgba(18,140,126,.25);
transition: transform .18s ease;
}
.wac-send:hover{ transform: translateY(-1px); }
@media (max-width: 480px){
.wac-wrap{ right:14px; bottom:14px; }
.wac-panel{ bottom:72px; }
}