Preview de mixed.css
/* MIXED CSS PACK */
/* Template: capellanessinfronteras.com.ar/index.html */
/* Template mtime: 2026-01-31 14:26:37 */
/* 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://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
y/o links CSS propios como estaban) -->
<style>
:root {
/* Colores base según especificación */
--color-black: #0b0b0b;
--color-white: #ffffff;
--color-primary: #1d297a; /* Azul profundo */
--color-secondary: #009d89; /* Verde turquesa */
--color-accent1: #00afe0; /* Azul claro */
--color-accent2: #9c2f53; /* Granate */
--color-accent3: #fcdd69; /* Amarillo suave */
/* Colores derivados */
--color-gray-50: #f8f9fa;
--color-gray-100: #f1f3f5;
--color-gray-200: #e9ecef;
--color-gray-300: #dee2e6;
--color-gray-400: #ced4da;
--color-gray-500: #adb5bd;
--color-gray-600: #868e96;
--color-gray-700: #495057;
--color-gray-800: #343a40;
--color-gray-900: #212529;
/* Tipografía */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
--font-secondary: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;
/* Espaciados */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 3rem;
/* Bordes */
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 16px;
--border-radius-xl: 20px;
--border-radius-round: 50%;
/* Sombras */
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12);
/* Transiciones */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 350ms ease;
}
/* Reset y estilos base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
font-family: var(--font-primary);
color: var(--color-black);
background-color: var(--color-white);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary);
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--spacing-md);
}
h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
@media (max-width: 768px) {
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.25rem; }
}
p {
margin-bottom: var(--spacing-md);
color: var(--color-gray-700);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-accent1);
}
.container {
max-width: 1200px;
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
/* Componentes reutilizables */
.section {
padding: var(--spacing-xxl) 0;
position: relative;
}
.section-title {
position: relative;
margin-bottom: var(--spacing-lg);
}
.section-title::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--color-secondary), var(--color-accent1));
border-radius: 2px;
}
.section-title.text-center::after {
left: 50%;
transform: translateX(-50%);
}
.eyebrow {
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-secondary);
margin-bottom: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-md);
background-color: rgba(0, 157, 137, 0.1);
border-radius: var(--border-radius-sm);
}
.lead {
font-size: 1.25rem;
color: var(--color-gray-600);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Botones */
.btn {
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius-md);
font-weight: 600;
transition: all var(--transition-normal);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
border: 2px solid transparent;
}
.btn-primary {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.btn-primary:hover {
background-color: #151f5c;
border-color: #151f5c;
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
color: white;
}
.btn-secondary:hover {
background-color: #008577;
border-color: #008577;
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background-color: transparent;
border-color: var(--color-gray-300);
color: var(--color-gray-700);
}
.btn-outline:hover {
background-color: var(--color-gray-100);
border-color: var(--color-gray-400);
color: var(--color-gray-900);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
/* Navbar Premium */
.navbar {
padding: var(--spacing-md) 0;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-gray-200);
position: sticky;
top: 0;
z-index: 1000;
transition: all var(--transition-normal);
}
.navbar.scrolled {
padding: var(--spacing-sm) 0;
box-shadow: var(--shadow-sm);
}
.navbar-brand {
font-family: var(--font-secondary);
font-weight: 700;
font-size: 1.5rem;
color: var(--color-primary);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.navbar-brand .logo-dot {
width: 10px;
height: 10px;
border-radius: var(--border-radius-round);
background: linear-gradient(135deg, var(--color-secondary), var(--color-accent1));
display: inline-block;
}
.nav-link {
font-weight: 500;
color: var(--color-gray-700);
padding: var(--spacing-sm) var(--spacing-md) !important;
border-radius: var(--border-radius-md);
transition: all var(--transition-fast);
position: relative;
}
.nav-link:hover, .nav-link.active {
color: var(--color-primary);
background-color: rgba(29, 41, 122, 0.05);
}
.nav-link::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--color-secondary), var(--color-accent1));
transition: all var(--transition-normal);
transform: translateX(-50%);
}
.nav-link:hover::after, .nav-link.active::after {
width: 60%;
}
.btn-wa {
background: linear-gradient(135deg, #25D366, #128C7E);
color: white;
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius-md);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
border: none;
}
.btn-wa:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
color: white;
}
/* Hero Section - Rediseñada completamente */
.hero {
padding: calc(var(--spacing-xxl) * 2) 0 var(--spacing-xxl);
background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(255, 255, 255, 1) 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(0, 175, 224, 0.1) 0%, rgba(0, 175, 224, 0) 70%);
border-radius: var(--border-radius-round);
z-index: 0;
}
.hero::after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(0, 157, 137, 0.1) 0%, rgba(0, 157, 137, 0) 70%);
border-radius: var(--border-radius-round);
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: var(--spacing-lg);
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--color-gray-600);
margin-bottom: var(--spacing-xl);
max-width: 600px;
}
.hero-highlight {
color: var(--color-secondary);
font-weight: 700;
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: var(--spacing-xs);
}
.stat-label {
font-size: 0.875rem;
color: var(--color-gray-600);
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.hero-image-container {
position: relative;
border-radius: var(--border-radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
transform: perspective(1000px) rotateY(-5deg);
transition: transform var(--transition-normal);
}
.hero-image-container:hover {
transform: perspective(1000px) rotateY(0deg);
}
.hero-image {
width: 100%;
height: auto;
display: block;
}
.hero-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
color: white;
padding: var(--spacing-lg);
}
/* Cards Premium */
.card {
border: none;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
height: 100%;
background-color: var(--color-white);
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.card-icon {
width: 60px;
height: 60px;
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: var(--spacing-md);
color: white;
}
.card-icon.color-1 { background: linear-gradient(135deg, var(--color-primary), var(--color-accent1)); }
.card-icon.color-2 { background: linear-gradient(135deg, var(--color-secondary), var(--color-accent1)); }
.card-icon.color-3 { background: linear-gradient(135deg, var(--color-accent2), #c44569); }
.card-icon.color-4 { background: linear-gradient(135deg, var(--color-accent3), #f8c471); }
.card-title {
font-family: var(--font-primary);
font-weight: 700;
color: var(--color-gray-900);
margin-bottom: var(--spacing-sm);
}
.card-text {
color: var(--color-gray-600);
font-size: 0.95rem;
}
/* Áreas de trabajo con iconos de colores */
.service-area {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-md);
background-color: var(--color-gray-100);
border-radius: var(--border-radius-md);
font-weight: 500;
margin: 0 var(--spacing-sm) var(--spacing-sm) 0;
transition: all var(--transition-fast);
}
.service-area:hover {
background-color: var(--color-gray-200);
transform: translateY(-2px);
}
.service-area i {
font-size: 1.1rem;
}
.service-area.area-1 i { color: var(--color-primary); }
.service-area.area-2 i { color: var(--color-secondary); }
.service-area.area-3 i { color: var(--color-accent1); }
.service-area.area-4 i { color: var(--color-accent2); }
.service-area.area-5 i { color: var(--color-accent3); }
/* FAQ Accordion Premium */
.accordion-item {
border: 1px solid var(--color-gray-200);
border-radius: var(--border-radius-md) !important;
margin-bottom: var(--spacing-sm);
overflow: hidden;
}
.accordion-button {
font-weight: 600;
padding: var(--spacing-lg);
background-color: white;
color: var(--color-gray-900);
}
.accordion-button:not(.collapsed) {
background-color: rgba(29, 41, 122, 0.05);
color: var(--color-primary);
box-shadow: none;
}
.accordion-button:focus {
border-color: var(--color-gray-300);
box-shadow: 0 0 0 0.25rem rgba(29, 41, 122, 0.1);
}
.accordion-body {
padding: var(--spacing-lg);
color: var(--color-gray-700);
background-color: white;
}
/* Formulario de contacto mejorado */
.contact-form {
background-color: var(--color-white);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
}
.form-control, .form-select {
padding: 0.75rem 1rem;
border-radius: var(--border-radius-md);
border: 1px solid var(--color-gray-300);
font-family: var(--font-primary);
transition: all var(--transition-fast);
}
.form-control:focus, .form-select:focus {
border-color: var(--color-accent1);
box-shadow: 0 0 0 0.25rem rgba(0, 175, 224, 0.2);
}
.form-label {
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: var(--spacing-xs);
}
/* Footer Premium */
.footer {
background-color: var(--color-gray-900);
color: var(--color-gray-300);
padding: var(--spacing-xxl) 0 var(--spacing-lg);
}
.footer-title {
color: white;
font-size: 1.25rem;
margin-bottom: var(--spacing-md);
font-weight: 700;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: var(--spacing-sm);
}
.footer-links a {
color: var(--color-gray-400);
transition: color var(--transition-fast);
}
.footer-links a:hover {
color: white;
padding-left: var(--spacing-xs);
}
.footer-bottom {
border-top: 1px solid var(--color-gray-800);
padding-top: var(--spacing-lg);
margin-top: var(--spacing-xl);
color: var(--color-gray-500);
font-size: 0.875rem;
}
.social-links {
display: flex;
gap: var(--spacing-md);
}
.social-link {
width: 40px;
height: 40px;
border-radius: var(--border-radius-round);
background-color: var(--color-gray-800);
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.social-link:hover {
background-color: var(--color-primary);
transform: translateY(-2px);
}
/* Animaciones y efectos */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 992px) {
.hero-title {
font-size: 2.75rem;
}
.hero-stats {
justify-content: center;
}
.carousel-control-prev, .carousel-control-next {
display: none;
}
}
@media (max-width: 768px) {
.section {
padding: var(--spacing-xl) 0;
}
.hero {
padding: calc(var(--spacing-xxl) * 1.5) 0 var(--spacing-xl);
}
.hero-title {
font-size: 2.25rem;
}
.hero-subtitle {
font-size: 1.125rem;
}
.hero-cta {
flex-direction: column;
align-items: stretch;
}
.btn {
width: 100%;
justify-content: center;
}
.contact-form {
padding: var(--spacing-lg);
}
}
@media (max-width: 576px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
.navbar-brand {
font-size: 1.25rem;
}
.stat-number {
font-size: 2rem;
}
.card {
margin-bottom: var(--spacing-md);
}
}
.navbar-brand .brand-text {
font-size: 0.9rem; /* achica el texto */
line-height: 1.1;
font-weight: 600;
}
/* ===== INLINE <style> BLOCK #2 ===== */
.gal-gallery .carousel{max-width:980px;margin-inline:auto;position:relative}
.gal-frame{
height: clamp(220px, 48vh, 440px);
background:#fff;border-radius:16px;overflow:hidden;
box-shadow:0 12px 28px rgba(0,0,0,.12);
display:flex;align-items:center;justify-content:center;padding:8px
}
.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
}
/* Controles circulares con más contraste */
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next{
z-index:20;width:50px;height:50px;top:50%;transform:translateY(-50%);
opacity:1;background:rgba(0,0,0,.55);border-radius:50%;margin:0 12px
}
.gal-gallery .carousel-control-prev{left:0}
.gal-gallery .carousel-control-next{right:0}
.gal-gallery .gal-ctrl-icon{width:2.6rem;height:2.6rem;background-size:60% 60%}
/* Indicadores: se sitúan fuera; agregamos espacio inferior para que no se corten */
.gal-gallery .carousel-indicators{z-index:10;bottom:-50px}
.gal-gallery .carousel-indicators button{
width:10px;height:10px;border-radius:50%;
background:rgba(0,0,0,.5);border:none
}
.gal-gallery .carousel-indicators button.active{background:#000}
.gal-gallery{padding-bottom:56px} /* espacio para indicadores */
/* Modal */
#galLightbox .modal-content{background:#000}
#galLightboxImg{max-height:86vh;width:100%;height:auto;object-fit:contain;background:#000}
.gal-lightbox-nav{
position:absolute;top:50%;transform:translateY(-50%);
border:0;width:44px;height:44px;border-radius:999px;
background:rgba(255,255,255,.18);color:#fff;font-size:30px;line-height:44px;text-align:center;z-index:5;cursor:pointer
}
.gal-lightbox-nav:hover{background:rgba(255,255,255,.28)}
.gal-lightbox-nav.gal-prev{left:10px}
.gal-lightbox-nav.gal-next{right:10px}
/* Pequeños ajustes móviles */
@media (max-width: 575.98px){
.gal-frame{height: clamp(200px, 40vh, 360px)}
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* =========================
WhatsApp Floating Chat — Estilo alineado a tu sitio
Usa tus variables CSS ya definidas en :root
========================= */
.cc-wa{
position:fixed;
right:18px;
bottom:18px;
z-index:99999;
font-family: var(--font-primary);
}
/* Panel */
.cc-wa-panel{
position:absolute;
right:0;
bottom:76px;
width:min(380px, 92vw);
border-radius: var(--border-radius-lg);
overflow:hidden;
border:1px solid rgba(0,0,0,.12);
box-shadow: var(--shadow-xl);
background: var(--color-white);
transform: translateY(10px);
opacity:0;
pointer-events:none;
transition: var(--transition-normal);
}
.cc-wa-panel.open{
transform: translateY(0);
opacity:1;
pointer-events:auto;
}
/* Header (coherente con paleta) */
.cc-wa-head{
display:flex;
align-items:center;
justify-content:space-between;
padding: 12px 12px;
color:#fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.cc-wa-brand{
display:flex;
align-items:center;
gap: 10px;
}
.cc-wa-dot{
width:12px;height:12px;border-radius:999px;
background: var(--color-accent3);
box-shadow: 0 0 0 6px rgba(252,221,105,.18);
}
.cc-wa-title{ font-weight: 800; line-height:1.1; }
.cc-wa-sub{ font-size:.85rem; opacity:.92; }
.cc-wa-x{
border:none;background:transparent;color:#fff;
font-size:28px; line-height:1; cursor:pointer;
opacity:.9;
}
.cc-wa-x:hover{ opacity:1; transform: rotate(90deg); transition:.2s; }
/* Body tipo chat */
.cc-wa-body{
padding: 12px;
background: #f3f6fb;
background-image:
radial-gradient(rgba(29,41,122,.08) 1px, transparent 1px);
background-size: 16px 16px;
max-height: 42vh;
overflow:auto;
display:flex;
flex-direction:column;
gap: 8px;
}
.cc-wa-bubble{
max-width: 90%;
padding: 10px 12px;
border-radius: 14px;
font-size: .95rem;
box-shadow: 0 10px 22px rgba(0,0,0,.10);
border: 1px solid rgba(0,0,0,.08);
}
.cc-wa-bubble.bot{
align-self:flex-start;
background:#fff;
color: var(--color-gray-800);
}
.cc-wa-bubble.user{
align-self:flex-end;
background: rgba(0,157,137,.14);
border-color: rgba(0,157,137,.22);
color: var(--color-gray-900);
}
/* Quick chips */
.cc-wa-quick{
display:flex;
flex-wrap:wrap;
gap: 8px;
margin-top: 6px;
}
.cc-wa-chip{
border: 1px solid rgba(0,0,0,.12);
background:#fff;
color: var(--color-gray-800);
padding: 8px 10px;
border-radius: 999px;
font-weight: 600;
font-size: .85rem;
cursor:pointer;
transition: var(--transition-fast);
}
.cc-wa-chip:hover{
transform: translateY(-1px);
border-color: rgba(0,175,224,.35);
box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
/* Compose */
.cc-wa-compose{
display:grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 10px;
background: #fff;
border-top: 1px solid rgba(0,0,0,.10);
}
.cc-wa-compose textarea{
resize:none;
border-radius: var(--border-radius-md);
border: 1px solid rgba(0,0,0,.18);
padding: 10px 12px;
outline:none;
}
.cc-wa-compose textarea:focus{
border-color: var(--color-accent1);
box-shadow: 0 0 0 .25rem rgba(0,175,224,.18);
}
.cc-wa-send{
border:none;
border-radius: var(--border-radius-md);
padding: 0 16px;
cursor:pointer;
color:#fff;
background: linear-gradient(135deg, var(--color-secondary), var(--color-accent1));
display:grid;
place-items:center;
box-shadow: var(--shadow-md);
transition: var(--transition-fast);
}
.cc-wa-send:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.cc-wa-send svg{ width:18px;height:18px; }
/* FAB (siempre visible, bien contrastado) */
.cc-wa-fab{
width:64px;height:64px;border-radius:999px;
border:none; cursor:pointer;
color:#fff;
background: linear-gradient(135deg,#25D366,#128C7E);
box-shadow: 0 18px 46px rgba(18,140,126,.35);
display:grid;
place-items:center;
position:relative;
transition: transform .25s ease, box-shadow .25s ease;
}
.cc-wa-fab:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 26px 68px rgba(18,140,126,.45); }
.cc-wa-icon{ width:34px;height:34px; display:block; }
.cc-wa-ring{
position:absolute; inset:-6px;
border-radius:999px;
border: 2px solid rgba(37,211,102,.35);
animation: ccRing 1.8s infinite;
pointer-events:none;
}
@keyframes ccRing{
0%{ transform: scale(.92); opacity:.9; }
70%{ transform: scale(1.08); opacity:.2; }
100%{ transform: scale(.92); opacity:.0; }
}
/* Pill */
.cc-wa-pill{
position:absolute;
right: 76px;
bottom: 12px;
border:1px solid rgba(0,0,0,.10);
background:#fff;
color: var(--color-gray-900);
border-radius:999px;
padding:.55rem .85rem;
font-weight:800;
cursor:pointer;
box-shadow: var(--shadow-md);
display:inline-flex;
align-items:center;
gap:.5rem;
}
.cc-wa-live{
width:10px;height:10px;border-radius:999px;
background: var(--color-secondary);
box-shadow: 0 0 0 6px rgba(0,157,137,.14);
}
/* Mobile: oculto pill y panel más ancho */
@media (max-width: 480px){
.cc-wa{ right:14px; bottom:14px; }
.cc-wa-pill{ display:none; }
.cc-wa-panel{ width: calc(100vw - 24px); }
}