Preview de mixed.css
/* MIXED CSS PACK */
/* Template: piedrafirme.com.ar/index.php */
/* Template mtime: 2025-12-02 17:30:01 */
/* 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;600;700;800&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--primary: #006164;
--primary-soft: #0b7f83;
--primary-light: #e6f4f5;
--accent: #d9bd7d;
--accent-dark: #c4a862;
--dark: #12212a;
--muted: #6b7280;
--line: #e2e8f0;
--bg: #f5f7fb;
--radius: 20px;
--shadow: 0 10px 30px rgba(0, 97, 100, .08);
--shadow-lg: 0 20px 50px rgba(0, 97, 100, .14);
--shadow-xl: 0 25px 70px rgba(0, 97, 100, .20);
--grad: linear-gradient(135deg, #006164 0%, #0b7f83 50%, #d9bd7d 100%);
--transition: .35s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
color: var(--dark);
background: #fff;
line-height: 1.7;
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
right: 0;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(217, 189, 125, .06), transparent 70%);
pointer-events: none;
z-index: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
line-height: 1.2;
}
/* ===== NAVBAR ===== */
.navbar-piedra {
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(0, 97, 100, .08);
box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
transition: var(--transition);
padding: 1rem 0;
}
.navbar-piedra.scrolled {
background: rgba(255, 255, 255, .98);
box-shadow: 0 4px 30px rgba(0, 0, 0, .08);
}
.navbar-piedra .navbar-brand {
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
font-size: .95rem;
color: var(--dark);
transition: var(--transition);
display: flex;
align-items: center;
gap: .8rem;
}
.navbar-piedra .navbar-brand:hover {
color: var(--primary);
transform: translateY(-1px);
}
.navbar-piedra .nav-link {
font-weight: 600;
letter-spacing: .03em;
font-size: .88rem;
color: #1f2933;
padding: .6rem 1.1rem !important;
margin: 0 .15rem;
border-radius: 12px;
transition: var(--transition);
position: relative;
}
.navbar-piedra .nav-link::after {
content: '';
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 24px;
height: 3px;
background: var(--accent);
border-radius: 999px;
transition: var(--transition);
}
.navbar-piedra .nav-link:hover,
.navbar-piedra .nav-link.active {
color: var(--primary);
background: var(--primary-light);
}
.navbar-piedra .nav-link:hover::after,
.navbar-piedra .nav-link.active::after {
transform: translateX(-50%) scaleX(1);
}
.brand-img {
height: 86px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .1));
transition: var(--transition);
}
.navbar-brand:hover .brand-img {
transform: rotate(-3deg) scale(1.05);
}
.brand-text {
white-space: nowrap;
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===== HERO ===== */
.hero {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
background:
radial-gradient(ellipse at 15% 20%, rgba(217, 189, 125, .12), transparent 50%),
radial-gradient(ellipse at 85% 10%, rgba(0, 97, 100, .08), transparent 55%),
linear-gradient(180deg, #fafbfc 0%, #f0f4f8 100%);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(217, 189, 125, .15), transparent 65%);
border-radius: 50%;
animation: float 20s ease-in-out infinite;
}
.hero::after {
content: '';
position: absolute;
bottom: -150px;
left: -150px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(0, 97, 100, .1), transparent 65%);
border-radius: 50%;
animation: float 25s ease-in-out infinite reverse;
}
@keyframes float {
0%,
100% {
transform: translate(0, 0) rotate(0deg)
}
33% {
transform: translate(30px, -30px) rotate(5deg)
}
66% {
transform: translate(-20px, 20px) rotate(-3deg)
}
}
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
padding-top: 5rem;
padding-bottom: 4rem;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .45rem 1rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(0, 97, 100, .1), rgba(0, 97, 100, .05));
border: 1px solid rgba(0, 97, 100, .15);
color: var(--primary);
font-size: .82rem;
font-weight: 600;
margin-bottom: 1rem;
animation: slideDown .8s ease;
box-shadow: 0 4px 15px rgba(0, 97, 100, .08);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.hero-eyebrow {
text-transform: uppercase;
letter-spacing: .25em;
font-size: .8rem;
color: var(--accent-dark);
font-weight: 700;
margin-bottom: .8rem;
animation: slideDown .8s .1s ease both;
}
.hero-title {
font-size: clamp(2.4rem, 4vw, 4rem);
line-height: 1.15;
margin-bottom: 1.3rem;
color: var(--dark);
animation: slideDown .8s .2s ease both;
font-weight: 800;
}
.hero-highlight {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
display: inline-block;
}
.hero-highlight::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 12px;
background: linear-gradient(135deg, rgba(217, 189, 125, .25), rgba(0, 97, 100, .15));
border-radius: 999px;
z-index: -1;
}
.hero-text {
color: var(--muted);
max-width: 580px;
font-size: 1.08rem;
line-height: 1.8;
animation: slideDown .8s .3s ease both;
}
.hero-cta-main {
background: linear-gradient(135deg, var(--primary), var(--primary-soft));
border: none;
border-radius: 999px;
padding: .85rem 2rem;
font-weight: 700;
color: #fff !important;
box-shadow: 0 8px 25px rgba(0, 97, 100, .25);
transition: var(--transition);
animation: slideDown .8s .4s ease both;
position: relative;
overflow: hidden;
}
.hero-cta-main::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent);
transform: translateX(-100%);
transition: var(--transition);
}
.hero-cta-main:hover::before {
transform: translateX(100%);
}
.hero-cta-main:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 97, 100, .35);
}
.hero-cta-secondary {
border-radius: 999px;
padding: .85rem 1.8rem;
font-weight: 600;
border: 2px solid rgba(0, 97, 100, .2);
color: var(--dark);
background: #fff;
transition: var(--transition);
animation: slideDown .8s .5s ease both;
}
.hero-cta-secondary:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-light);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 97, 100, .15);
}
.hero-side {
position: relative;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0, 97, 100, .25);
background: #000;
min-height: 320px;
animation: slideLeft .8s .3s ease both;
transform-origin: right center;
}
@keyframes slideLeft {
from {
opacity: 0;
transform: translateX(50px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
.hero-side::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 97, 100, .15), transparent 60%);
z-index: 1;
pointer-events: none;
}
.hero-side img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .92;
transition: var(--transition);
}
.hero-side:hover img {
transform: scale(1.08);
opacity: 1;
}
.hero-stamp {
position: absolute;
left: 16px;
bottom: 16px;
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(10px);
padding: .8rem 1.1rem;
border-radius: 16px;
display: flex;
align-items: center;
gap: .65rem;
font-size: .85rem;
box-shadow: 0 12px 35px rgba(0, 0, 0, .2);
z-index: 2;
border: 1px solid rgba(255, 255, 255, .5);
}
.hero-stamp span:first-child {
width: 32px;
height: 32px;
border-radius: 12px;
background: linear-gradient(135deg, var(--primary), var(--primary-soft));
display: grid;
place-items: center;
color: #fff;
font-size: 1.1rem;
box-shadow: 0 4px 12px rgba(0, 97, 100, .3);
}
/* ===== SECTIONS ===== */
.section {
padding: clamp(3.5rem, 6vw, 5.5rem) 0;
position: relative;
}
.section-title {
position: relative;
display: inline-flex;
align-items: center;
gap: .8rem;
margin-bottom: 1.3rem;
}
.section-title span {
display: inline-block;
width: 42px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--primary), var(--accent));
box-shadow: 0 2px 8px rgba(0, 97, 100, .2);
}
.section-title strong {
font-size: 1.8rem;
font-weight: 800;
background: linear-gradient(135deg, var(--dark), var(--primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.lead-muted {
color: var(--muted);
font-size: 1.05rem;
line-height: 1.8;
}
.card-soft {
border-radius: var(--radius);
border: 1px solid rgba(0, 97, 100, .12);
background: #fff;
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.card-soft::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
transform: scaleX(0);
transition: var(--transition);
}
.card-soft:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: rgba(0, 97, 100, .25);
}
.card-soft:hover::before {
transform: scaleX(1);
}
.pill {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .35rem .85rem;
border-radius: 999px;
font-size: .8rem;
background: linear-gradient(135deg, rgba(0, 97, 100, .08), rgba(0, 97, 100, .04));
border: 1px solid rgba(0, 97, 100, .15);
opacity: 0;
transition: var(--transition);
}
.proj-card:hover .proj-img-wrap::after {
opacity: 1;
}
.proj-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s cubic-bezier(0.4, 0, 0.2, 1);
}
.proj-card:hover .proj-img-wrap img {
transform: scale(1.12);
}
.proj-tag {
position: absolute;
left: 14px;
top: 14px;
padding: .35rem .85rem;
border-radius: 999px;
background: rgba(0, 0, 0, .75);
backdrop-filter: blur(10px);
color: #fff;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .1em;
font-weight: 700;
z-index: 2;
border: 1px solid rgba(255, 255, 255, .2);
box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.proj-body {
padding: 1.3rem 1.4rem 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.proj-title {
font-weight: 700;
font-size: 1.12rem;
margin-bottom: .5rem;
color: var(--dark);
transition: var(--transition);
}
.proj-card:hover .proj-title {
color: var(--primary);
}
.proj-link {
margin-top: .8rem;
display: inline-flex;
align-items: center;
gap: .4rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
font-size: .92rem;
transition: var(--transition);
}
.proj-link i {
transition: var(--transition);
}
.proj-link:hover {
color: var(--accent-dark);
gap: .7rem;
}
.proj-link:hover i {
transform: translateX(5px);
}
/* ===== PROCESO ===== */
.step-badge {
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(0, 97, 100, .1), rgba(0, 97, 100, .05));
border: 2px solid rgba(0, 97, 100, .2);
display: grid;
place-items: center;
color: var(--primary);
font-weight: 800;
font-size: 1.3rem;
margin-bottom: .8rem;
transition: var(--transition);
}
.card-soft:hover .step-badge {
background: linear-gradient(135deg, var(--primary), var(--primary-soft));
color: #fff;
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(0, 97, 100, .3);
}
/* ===== CONTACTO ===== */
.contact-card {
border-radius: 28px;
background: linear-gradient(135deg, rgba(0, 97, 100, 1), rgba(11, 127, 131, .95));
color: #e5f2f3;
padding: 2.5rem 2.8rem;
box-shadow: var(--shadow-xl);
position: relative;
overflow: hidden;
}
.contact-card::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(217, 189, 125, .3), transparent 70%);
border-radius: 50%;
}
.contact-card h2 {
color: #fff;
font-weight: 800;
font-size: 2.2rem;
position: relative;
z-index: 1;
}
.contact-tag {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .4rem 1rem;
border-radius: 999px;
background: rgba(255, 255, 255, .15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .2);
color: #fff;
font-size: .85rem;
font-weight: 600;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.contact-card a {
color: #fff;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
position: relative;
z-index: 1;
}
.contact-card a:hover {
color: var(--accent);
text-decoration: underline;
}
.contact-form-card {
border-radius: 24px;
border: 1px solid rgba(0, 97, 100, .15);
background: #fff;
box-shadow: var(--shadow-lg);
padding: 2rem 2.2rem;
transition: var(--transition);
}
.contact-form-card:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-4px);
}
.form-label {
font-weight: 600;
color: var(--dark);
margin-bottom: .5rem;
font-size: .92rem;
}
.form-control,
.form-select {
border-radius: 12px;
border: 2px solid #e2e8f0;
padding: .75rem 1rem;
transition: var(--transition);
font-size: .95rem;
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(0, 97, 100, .1);
outline: none;
}
.btn-primary-pf {
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
border: none;
color: #1f2933;
font-weight: 700;
border-radius: 999px;
padding: .8rem 2.2rem;
transition: var(--transition);
box-shadow: 0 8px 25px rgba(217, 189, 125, .3);
position: relative;
overflow: hidden;
}
.btn-primary-pf::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent);
transform: translateX(-100%);
transition: var(--transition);
}
.btn-primary-pf:hover::before {
transform: translateX(100%);
}
.btn-primary-pf:hover {
background: linear-gradient(135deg, #e3c78b, var(--accent));
color: #111827;
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(217, 189, 125, .4);
}
/* ===== FOOTER ===== */
.site-footer {
margin-top: 4rem;
background: linear-gradient(180deg, #0d1519 0%, #0b1418 100%);
color: #9ca3af;
padding-top: 3rem;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(217, 189, 125, .3), transparent);
}
.site-footer a {
color: #d1d5db;
text-decoration: none;
transition: var(--transition);
position: relative;
}
.site-footer a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--accent);
transition: var(--transition);
}
.site-footer a:hover {
color: var(--accent);
}
.site-footer a:hover::after {
width: 100%;
}
.footer-logo {
height: 78px;
filter: brightness(1.2) drop-shadow(0 2px 8px rgba(217, 189, 125, .3));
}
.footer-title {
color: #f9fafb;
font-weight: 700;
margin-bottom: 1rem;
font-size: 1.1rem;
position: relative;
padding-bottom: .5rem;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, var(--accent), transparent);
border-radius: 999px;
}
.footer-sep {
border-color: rgba(75, 85, 99, .5);
margin: 2rem 0;
}
.site-footer .bi {
transition: var(--transition);
}
.site-footer a:hover .bi {
transform: translateY(-3px) scale(1.1);
color: var(--accent);
}
/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
}
.whatsapp-btn {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #25D366, #128C7E);
display: grid;
place-items: center;
color: #fff;
font-size: 32px;
box-shadow: 0 12px 35px rgba(37, 211, 102, .5);
text-decoration: none;
transition: var(--transition);
position: relative;
}
.whatsapp-btn::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: linear-gradient(135deg, #25D366, #128C7E);
opacity: .3;
animation: ripple 2s ease infinite;
}
@keyframes ripple {
0% {
transform: scale(1);
opacity: .3
}
100% {
transform: scale(1.3);
opacity: 0
}
}
.whatsapp-btn:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 20px 50px rgba(37, 211, 102, .6);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
.hero {
min-height: auto
}
.hero-inner {
padding-top: 4rem
}
.hero-side {
margin-top: 2rem
}
.section-title strong {
font-size: 1.5rem
}
.contact-card {
padding: 2rem 1.8rem
}
}
@media (max-width: 576px) {
.navbar-brand .brand-text {
max-width: 50vw;
font-size: .8rem
}
.brand-img {
height: 40px
}
.hero-title {
font-size: 2.2rem
}
.section {
padding: 2.5rem 0
}
.section-title strong {
font-size: 1.3rem
}
.contact-card {
padding: 1.8rem 1.4rem
}
.contact-form-card {
padding: 1.5rem 1.2rem
}
.whatsapp-btn {
width: 56px;
height: 56px;
font-size: 28px
}
}
/* ===== ANIMACIONES AL SCROLL ===== */
@media (prefers-reduced-motion: no-preference) {
.card-soft,
.proj-card {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp .8s ease forwards;
}
.card-soft:nth-child(1) {
animation-delay: .1s
}
.card-soft:nth-child(2) {
animation-delay: .2s
}
.card-soft:nth-child(3) {
animation-delay: .3s
}
.card-soft:nth-child(4) {
animation-delay: .4s
}
.proj-card:nth-child(1) {
animation-delay: .1s
}
.proj-card:nth-child(2) {
animation-delay: .2s
}
.proj-card:nth-child(3) {
animation-delay: .3s
}
.proj-card:nth-child(4) {
animation-delay: .4s
}
.proj-card:nth-child(5) {
animation-delay: .5s
}
.proj-card:nth-child(6) {
animation-delay: .6s
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0)
}
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root{
--wa:#25D366;
--wa-dark:#128C7E;
--wa-text:#12212a;
--wa-muted:#6b7280;
--wa-bg:#ffffff;
--wa-border:#e4e4e4;
/* color cabeza acorde a la web (primary Piedra Firme) */
--wa-head:#006164;
}
.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;
}
.wa-btn::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), 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(--wa-bg);
color:var(--wa-text);
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.25);
border:1px solid var(--wa-border);
transform:translateY(10px);
opacity:0;
transition:transform .3s, opacity .3s;
}
.wa-card[aria-modal="true"]{
transform:translateY(0);
opacity:1;
}
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:var(--wa-head);
border-bottom:1px solid var(--wa-border);
color:#f9fafb;
}
.wa-avatar{
width:40px;
height:40px;
border-radius:8px;
background:#fff;
display:grid;
place-items:center;
border:1px solid var(--wa-border);
overflow:hidden;
}
.wa-title{
font-weight:700;
font-size:1.05rem;
}
.wa-status{
font-size:.85rem;
color:var(--wa-muted);
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:#000;
border:0;
font-size:24px;
cursor:pointer;
opacity:.6;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}
.wa-close:hover{
opacity:1;
background:rgba(0,0,0,.06);
}
.wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
background:#ffffff;
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 10px rgba(0,0,0,.08);
animation:fadeIn .25s ease;
font-size:.95rem;
}
@keyframes fadeIn{
from{opacity:0; transform:translateY(5px);}
to{opacity:1; transform:none;}
}
.wa-bot{
background:#f7f7f7;
border:1px solid #e8e8e8;
align-self:flex-start;
border-bottom-left-radius:4px;
}
.wa-user{
background:#e9fdf1;
border:1px solid #c4f1d8;
align-self:flex-end;
border-bottom-right-radius:4px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
background:#fafafa;
border-top:1px solid var(--wa-border);
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px 12px;
border:1px solid var(--wa-border);
background:#ffffff;
color:var(--wa-text);
outline:none;
min-height:44px;
font-family:inherit;
font-size:.95rem;
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:#ffffff;
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);
}
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background:rgba(0,0,0,.02); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.3); }
@media (max-width:480px){
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width:calc(100vw - 24px); right:0; }
}