Preview de mixed.css
/* MIXED CSS PACK */
/* Template: elclubdelguardapolvo.com.ar/index.html */
/* Template mtime: 2025-10-20 20:29:13 */
/* 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=Nunito:wght@600;700;800;900&display=swap */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root {
--acua: #25c2c8;
--acua-600: #18a9af;
--acua-200: #a6e9ec;
--rosa: #ff6aa5;
--rosa-600: #e25791;
--rosa-200: #ffc2db;
--gris-900: #0f172a;
--gris-700: #334155;
--gris-500: #64748b;
--gris-300: #cbd5e1;
--gris-100: #f1f5f9;
--fondo: #f8fafc;
--card: #ffffff;
--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
--border-radius: 16px;
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
* {
box-sizing: border-box;
}
html, body {
font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
color: var(--gris-900);
background: var(--fondo);
scroll-behavior: smooth;
overflow-x: hidden;
}
a {
color: var(--acua);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--acua-600);
}
.btn-acua {
background: linear-gradient(135deg, var(--acua) 0%, var(--acua-600) 100%);
border: none;
color: #fff;
font-weight: 700;
padding: 0.85rem 1.75rem;
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-acua:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: #fff;
}
.btn-acua::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.7s;
}
.btn-acua:hover::after {
left: 100%;
}
.btn-rosa {
background: linear-gradient(135deg, var(--rosa) 0%, var(--rosa-600) 100%);
border: none;
color: #fff;
font-weight: 700;
padding: 0.85rem 1.75rem;
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-rosa:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: #fff;
}
.btn-rosa::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.7s;
}
.btn-rosa:hover::after {
left: 100%;
}
.btn-outline-secondary {
border: 2px solid var(--gris-300);
color: var(--gris-700);
font-weight: 600;
padding: 0.85rem 1.75rem;
border-radius: 12px;
transition: var(--transition);
}
.btn-outline-secondary:hover {
border-color: var(--acua);
background-color: rgba(37, 194, 200, 0.05);
color: var(--acua);
transform: translateY(-2px);
}
.badge-soft {
background: linear-gradient(135deg, rgba(37,194,200,0.15), rgba(255,106,165,0.15));
color: var(--acua);
border: 1px solid rgba(37,194,200,0.25);
padding: 0.5rem 1rem;
font-weight: 700;
letter-spacing: 0.5px;
border-radius: 50px;
box-shadow: var(--shadow-sm);
}
.section {
padding: 100px 0;
position: relative;
}
.section-title {
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 1rem;
}
.section-subtitle {
color: var(--gris-700);
font-size: 1.15rem;
line-height: 1.6;
}
.card-soft {
background: var(--card);
border: 1px solid rgba(229, 231, 235, 0.6);
border-radius: var(--border-radius);
box-shadow: var(--shadow-sm);
transition: var(--transition);
overflow: hidden;
}
.card-soft:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(37, 194, 200, 0.2);
}
.icon-lg {
width: 64px;
height: 64px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(37,194,200,0.18), rgba(255,106,165,0.18));
font-size: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: var(--shadow-sm);
}
.gradient-text {
background: linear-gradient(135deg, var(--acua) 0%, var(--rosa) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
.lead-hero {
font-size: 1.25rem;
color: var(--gris-700);
line-height: 1.6;
}
/* Floating Elements */
.floating-element {
position: absolute;
border-radius: 50%;
opacity: 0.1;
z-index: -1;
animation: float 6s ease-in-out infinite;
}
.floating-element:nth-child(odd) {
animation-delay: 0s;
}
.floating-element:nth-child(even) {
animation-delay: 3s;
}
@keyframes float {
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
100% { transform: translateY(0) rotate(360deg); }
}
/* Navbar */
.navbar {
backdrop-filter: saturate(180%) blur(10px);
background: rgba(255, 255, 255, 0.95) !important;
border-bottom: 1px solid rgba(2, 6, 23, 0.06);
padding: 1rem 0;
transition: var(--transition);
}
.navbar.scrolled {
box-shadow: var(--shadow-sm);
padding: 0.75rem 0;
}
.navbar-brand {
font-weight: 800;
letter-spacing: -0.02em;
font-size: 1.5rem;
}
.navbar-brand span {
color: var(--acua);
}
.nav-link {
font-weight: 600;
position: relative;
padding: 0.5rem 1rem !important;
border-radius: 8px;
transition: var(--transition);
}
.nav-link:hover {
background: rgba(37, 194, 200, 0.08);
color: var(--acua);
}
.nav-cta {
margin-left: 0.5rem;
}
/* Hero */
#hero {
padding: 140px 0 80px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, rgba(37,194,200,0.03) 0%, rgba(255,106,165,0.03) 100%);
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(800px 400px at 10% -10%, rgba(37,194,200,0.15), transparent 60%),
radial-gradient(800px 400px at 110% 10%, rgba(255,106,165,0.12), transparent 60%);
pointer-events: none;
}
.hero-title {
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.hero-cta .btn {
padding: 1rem 1.75rem;
font-weight: 700;
border-radius: 12px;
}
/* Steps */
.step {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.step-num {
flex: 0 0 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--acua) 0%, var(--acua-600) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
box-shadow: var(--shadow-sm);
}
/* Pricing */
.price {
font-size: 3.5rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
background: linear-gradient(135deg, var(--acua) 0%, var(--rosa) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Ticker */
.ticker-wrap {
position: relative;
overflow: hidden;
padding: 2rem 0;
}
.ticker-track {
display: flex;
gap: 1.5rem;
will-change: transform;
}
.tk-item {
flex: 0 0 auto;
width: 280px;
height: 280px;
border-radius: 16px;
overflow: hidden;
border: 1px solid #e5e7eb;
background: #fff;
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.tk-item:hover {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.tk-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: var(--transition);
}
.tk-item:hover img {
transform: scale(1.1);
}
@media (min-width: 768px) {
.tk-item {
width: 340px;
height: 340px;
}
}
.ticker-controls {
position: absolute;
inset-block: 0;
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none;
width: 100%;
padding: 0 1rem;
}
.ticker-btn {
pointer-events: auto;
border: none;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #e5e7eb;
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.ticker-btn:hover {
background: #fff;
transform: scale(1.1);
}
/* Testimonios */
.avatar-square {
width: 84px;
height: 84px;
border-radius: 14px;
overflow: hidden;
flex: 0 0 84px;
border: 1px solid #e5e7eb;
box-shadow: var(--shadow-sm);
}
.avatar-square img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* FAQ */
.accordion-button {
font-weight: 700;
padding: 1.25rem 1.5rem;
border: none;
background: transparent;
}
.accordion-button:not(.collapsed) {
color: var(--acua);
background: rgba(37,194,200,0.08);
box-shadow: none;
}
.accordion-button:focus {
box-shadow: 0 0 0 0.25rem rgba(37,194,200,0.25);
}
.accordion-body {
padding: 1rem 1.5rem 1.5rem;
}
.accordion-item {
border: 1px solid rgba(229, 231, 235, 0.6);
border-radius: 12px !important;
margin-bottom: 1rem;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
/* Footer */
footer {
background: #green;
border-top: 1px solid #e5e7eb;
}
.footer-top {
padding: 60px 0 40px;
}
.footer-bar {
background: linear-gradient(90deg, var(--acua), var(--rosa));
color: #fff;
padding: 1.5rem 0;
}
/* Custom Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.8s ease forwards;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.section {
padding: 60px 0;
}
.hero-title {
font-size: 2.5rem;
}
.price {
font-size: 2.5rem;
}
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root{
--font-headings: "Nunito", Manrope, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.hero-title,
.section-title,
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-headings);
letter-spacing: -0.01em;
}
.section-subtitle,
.lead-hero,
.navbar-brand,
.price {
font-family: var(--font-headings);
font-weight: 700;
}
@media (max-width: 768px){
.section-title { letter-spacing: 0; }
}
/* ===== INLINE <style> BLOCK #3 ===== */
/* Marca compacta con logo */
.navbar-brand.brand-mini{
display:flex; align-items:center; gap:.55rem;
font-weight:700; line-height:1;
font-size: .95rem; /* ↓ más chico que el default */
letter-spacing:.1px;
}
.brand-logo{
height: 26px; /* tamaño del logo */
width:auto; aspect-ratio:auto; object-fit:contain;
}
/* “a tu medida” con gradiente (si ya tenés .gradient-text, podés usarla) */
.brand-gradient{
background: linear-gradient(135deg,#25c2c8,#ff6aa5);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Escala un toque en pantallas grandes */
@media (min-width: 992px){
.navbar-brand.brand-mini{ font-size: 1.05rem; }
.brand-logo{ height: 30px; }
}
/* Ultra-compacto en móviles muy chicos: oculta el texto si hace falta */
@media (max-width: 360px){
.brand-text{ display:none; }
.brand-logo{ height: 32px; } /* deja solo el logo, un pelín más grande */
}
/* ===== INLINE <style> BLOCK #4 ===== */
/* ====== Estilos de la sección (imagen sin recortes) ====== */
#experiencia{ position: relative; }
/* Contenedor visual (no fija alto, no fuerza relación de aspecto) */
#experiencia .xp-media--natural{
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(0,0,0,.06);
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
isolation: isolate;
}
/* Imagen: ancho 100%, alto automático => NO se deforma ni recorta */
#experiencia .xp-media--natural img{
display: block;
width: 100%;
height: auto; /* <- clave para que no se corte ni se estire */
object-fit: contain; /* por si el navegador decide forzar algo */
object-position: center;
transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s;
}
#experiencia .xp-media--natural:hover{
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
#experiencia .xp-media--natural:hover img{
transform: scale(1.02); /* micro-zoom sutil, sin afectar recorte */
}
/* Glow decorativo opcional */
#experiencia .xp-media--natural .xp-glow{
position: absolute; inset: -30%;
background:
radial-gradient(40% 40% at 30% 30%, rgba(37,194,200,.18), transparent 60%),
radial-gradient(35% 35% at 70% 70%, rgba(255,106,165,.16), transparent 60%);
filter: blur(18px);
pointer-events: none;
animation: xp-float 9s ease-in-out infinite;
z-index: -1;
}
@keyframes xp-float{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-6px,0)} }
/* Tag (chip) arriba a la izquierda */
#experiencia .xp-tag{
position: absolute; top:12px; left:12px;
background: rgba(255,255,255,.92);
backdrop-filter: saturate(140%) blur(2px);
color:#0b2239; font-weight:600; font-size:.85rem;
padding:6px 10px; border-radius:999px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
/* Listas */
#experiencia .feature-list li i{ line-height: 1.3; }
#experiencia .section-title{ letter-spacing:.2px; }
/* Accesibilidad: menos animación */
@media (prefers-reduced-motion: reduce){
#experiencia .xp-media--natural,
#experiencia .xp-media--natural img,
#experiencia .xp-media--natural .xp-glow{
transition:none; animation:none;
}
}
/* ===== INLINE <style> BLOCK #5 ===== */
:root{
--qs-acua:#25c2c8; --qs-rosa:#ff6aa5; --qs-amar:#ffcc00;
}
.quienes-section .section-title{position:relative;display:inline-block;font-weight:700;margin-bottom:1.25rem}
.quienes-section .section-title::after{content:"";position:absolute;left:0;bottom:-10px;width:64px;height:4px;background:linear-gradient(90deg,var(--qs-acua),var(--qs-rosa));border-radius:2px}
.quienes-section .gradient-text{background:linear-gradient(135deg,var(--qs-acua),var(--qs-rosa));-webkit-background-clip:text;background-clip:text;color:transparent}
.quienes-section .card-soft{background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-radius:16px;border:1px solid rgba(255,255,255,.25);box-shadow:0 10px 30px rgba(0,0,0,.06)}
/* Stage del logo */
.qs-stage{position:relative;background:linear-gradient(135deg,rgba(37,194,200,.12),rgba(255,106,165,.12))}
.qs-stage .qs-stage-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;contain:layout paint}
/* LOGO: arriba de todo y con eventos */
.qs-logo{
position:absolute; z-index:3; /* <— clave: por encima de shapes */
width:min(82%,520px); height:min(82%,520px);
object-fit:contain; filter:drop-shadow(0 10px 20px rgba(0,0,0,.12));
animation:qs-float 6s ease-in-out infinite, qs-pulse 4s ease-in-out infinite;
touch-action:none; cursor:grab; user-select:none; -webkit-user-drag:none;
transform:translate(0,0);
}
.qs-logo:active{cursor:grabbing}
/* Decorativos debajo del logo y SIN capturar eventos */
.qs-glow,.qs-shape{position:absolute;pointer-events:none} /* <— clave */
.qs-glow{width:220px;height:220px;filter:blur(22px);opacity:.7;z-index:0;animation:qs-pulse 8s ease-in-out infinite}
.qs-glow-1{top:-60px;left:-60px;background:radial-gradient(circle,rgba(37,194,200,.28),rgba(255,106,165,.18) 55%,transparent 70%)}
.qs-glow-2{bottom:-60px;right:-60px;background:radial-gradient(circle,rgba(255,106,165,.28),rgba(37,194,200,.18) 55%,transparent 70%)}
.qs-shape{border-radius:50%;opacity:.75;z-index:1}
.qs-shape-1{width:100px;height:100px;top:8%;left:8%;background:linear-gradient(135deg,var(--qs-acua),transparent);animation:qs-float 8s ease-in-out infinite,qs-rotate 22s linear infinite}
.qs-shape-2{width:84px;height:84px;bottom:12%;right:12%;background:linear-gradient(135deg,var(--qs-rosa),transparent);animation:qs-float 7s ease-in-out infinite reverse,qs-morph 12s ease-in-out infinite}
.qs-shape-3{width:64px;height:64px;top:50%;right:8%;background:linear-gradient(135deg,var(--qs-amar),transparent);animation:qs-float 9s ease-in-out infinite,qs-pulse 5s ease-in-out infinite}
/* Partículas y entrada */
.qs-particles{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.fade-in-up{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.fade-in-up.active{opacity:1;transform:none}
/* Animaciones base */
@keyframes qs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes qs-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}
@keyframes qs-rotate{to{transform:rotate(360deg)}}
@keyframes qs-morph{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
/* Reduce motion */
@media (prefers-reduced-motion:reduce){
.qs-logo,.qs-shape,.qs-glow{animation:none!important}
.fade-in-up{transition:none!important;opacity:1!important;transform:none!important}
}
/* ===== INLINE <style> BLOCK #6 ===== */
/* ======= estilos locales (no rompen lo demás) ======= */
#cfb-pro{position:relative;overflow:hidden}
/* Encabezado */
#cfb-pro .section-title{margin-bottom:.25rem}
#cfb-pro .section-subtitle{margin-bottom:1.25rem}
/* PASOS: usa tus cards y classes; solo grid y pequeños ajustes */
#cfb-pro .steps .card-soft{height:100%}
#cfb-pro .icon-lg{
width:56px;height:56px;border-radius:16px;
display:grid;place-items:center;margin:0 auto 10px;
background:linear-gradient(135deg, rgba(37,194,200,.18), rgba(255,106,165,.18));
font-size:22px
}
#cfb-pro .step{gap:.6rem}
#cfb-pro .step-num{min-width:30px;height:30px;border-radius:999px;font-weight:700;line-height:30px;text-align:center;
background:#eaf8fa;border:1px solid #cdeff3;color:#0b2239}
/* FRANJA combinada (beneficios + pricing) */
#cfb-pro .combo-band{
margin-top:1.5rem;border-radius:18px;padding:24px;
background:linear-gradient(135deg, rgba(37,194,200,.06), rgba(255,106,165,.06));
border:1px solid rgba(0,0,0,.06)
}
@media (min-width:992px){
#cfb-pro .combo-band{padding:26px 28px}
}
/* Beneficios como chips */
#cfb-pro .benefit-chip{
display:inline-flex;align-items:center;gap:.5rem;
background:#fff;border:1px solid rgba(0,0,0,.08);
border-radius:999px;padding:.5rem .85rem;margin:.25rem 0;
box-shadow:0 2px 10px rgba(0,0,0,.04);font-size:.95rem
}
#cfb-pro .benefit-chip i{font-size:18px;color:#25c2c8}
/* Pricing compacto (usa tu estética) */
#cfb-pro .price-card.card-soft{
background:#fff;
box-shadow:0 8px 28px rgba(0,0,0,.06)
}
#cfb-pro .price-card .price{font-size:3rem;line-height:1}
@media (max-width:768px){ #cfb-pro .price-card .price{font-size:2.4rem} }
/* Badge de precio chico */
#cfb-pro .price-badge{
display:inline-flex;gap:.5rem;align-items:center;
background:#0b2239;color:#fff;border-radius:999px;
padding:.45rem .8rem;font-weight:700;font-size:.9rem
}
/* A11y: menos animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
#cfb-pro *{transition:none !important;animation:none !important}
}
/* ===== INLINE <style> BLOCK #7 ===== */
/* Estilos sutiles para los items */
#beneficios .benefit-item{
background:#fff;
border:1px solid rgba(0,0,0,.06);
border-radius:14px;
padding:14px 16px;
box-shadow:0 6px 20px rgba(0,0,0,.04);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
height:100%;
}
#beneficios .benefit-item:hover{
transform: translateY(-2px);
box-shadow:0 10px 26px rgba(0,0,0,.06);
border-color: rgba(37,194,200,.25);
}
#beneficios .benefit-ico{
width:40px; height:40px; min-width:40px;
display:flex; align-items:center; justify-content:center;
border-radius:10px;
background: linear-gradient(135deg, rgba(37,194,200,.15), rgba(255,106,165,.15));
color:#25c2c8;
margin-right:12px;
font-size:20px;
}
#beneficios .benefit-text{
text-align:left;
line-height:1.4;
}
/* Ajustes responsivos */
@media (max-width: 575.98px){
#beneficios .benefit-item{ padding:12px 14px; }
#beneficios .benefit-ico{ margin-right:10px; }
}
/* ===== INLINE <style> BLOCK #8 ===== */
/* ---------- Carrousel base ---------- */
.gallery-carousel{
position:relative; width:100%; max-width:1280px; margin-inline:auto;
overflow:hidden; border-radius:22px;
}
.gc-track{
display:flex; flex-wrap:nowrap; will-change:transform;
transition: transform .5s cubic-bezier(.2,.7,.2,1);
touch-action: pan-y; /* permite swipe vertical de página */
}
/* Cada slide ocupa 100% del ancho. Centrado del contenido */
.gallery-carousel .work-card{
flex: 0 0 100%; /* una por vista */
display:flex; align-items:center; justify-content:center;
padding:24px; margin:0; background:transparent; border:0; cursor:pointer;
aspect-ratio: 16/10; /* altura estable y estética */
max-width:100%; /* sin límite de 300px */
box-shadow:none; /* sombra de grid desactivada en carrusel */
position:relative; border-radius:0; /* el marco animado hace el borde */
}
.gallery-carousel .work-card img{
width:min(92vw, 1100px); height:100%; object-fit:contain;
background:#fff; border-radius:18px;
transition:transform .35s ease, filter .35s ease;
}
.gallery-carousel .work-card:hover img{ transform:scale(1.02); filter:saturate(1.06); }
/* Marco animado (tu estilo original) */
.gallery-carousel .work-card::before{
content:""; position:absolute; inset:16px; border-radius:22px;
padding:2px;
background: conic-gradient(from 0deg, rgba(37,194,200,0.9), rgba(255,106,165,0.9), rgba(37,194,200,0.9));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity:.45; animation:spin 10s linear infinite; z-index:1; pointer-events:none;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Controles */
.gc-ctrl{
position:absolute; top:50%; transform:translateY(-50%);
z-index:3; width:52px; height:72px; border:none; cursor:pointer;
font-size:28px; color:#fff; background:rgba(0,0,0,.35);
display:flex; align-items:center; justify-content:center; border-radius:12px;
}
.gc-ctrl:hover{ background:rgba(0,0,0,.55); }
.gc-ctrl.prev{ left:12px; }
.gc-ctrl.next{ right:12px; }
/* Indicadores */
.gc-indicators{
position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
display:flex; gap:8px; z-index:3; padding:6px 8px; border-radius:999px;
background:rgba(0,0,0,.25); backdrop-filter: blur(4px);
}
.gc-indicators button{
width:10px; height:10px; border-radius:50%; border:0; background:#d0d0d0; opacity:.7; cursor:pointer;
}
.gc-indicators button.is-active{ background:#fff; opacity:1; }
/* ------- LIGHTBOX (tu estilo original, intacto) ------- */
.lb{ position:fixed; inset:0; display:none; z-index:9999; align-items:center; justify-content:center; }
.lb.show{ display:flex; }
.lb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.88); }
#lb-img{ max-width:100vw; max-height:100vh; object-fit:contain; position:relative; z-index:2; user-select:none; }
.lb-close{
position:absolute; top:12px; right:12px; z-index:3;
width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
font-size:28px; line-height:44px; color:#fff; background:rgba(0,0,0,.55);
display:flex; align-items:center; justify-content:center;
}
.lb-close:hover{ background:rgba(0,0,0,.7); }
.lb-nav{
position:absolute; top:50%; transform:translateY(-50%);
z-index:3; width:48px; height:64px; border:none; cursor:pointer;
font-size:28px; color:#fff; background:rgba(0,0,0,.4);
display:flex; align-items:center; justify-content:center; border-radius:10px;
}
.lb-prev{ left:12px; } .lb-next{ right:12px; }
.lb-nav:hover{ background:rgba(0,0,0,.6); }
/* Accesibilidad / móviles */
@media (prefers-reduced-motion: reduce) {
.gc-track{ transition:none !important; }
.gallery-carousel .work-card::before{ animation:none !important; }
}
@media (max-width: 575.98px){
.gallery-carousel .work-card{ padding:12px; aspect-ratio: 4/3; }
}
/* ===== INLINE <style> BLOCK #9 ===== */
/* ===== INLINE <style> BLOCK #10 ===== */
:root{ --fc-acua:#25c2c8; --fc-rosa:#ff6aa5; }
.floating-contacts{
position:fixed; right:18px; bottom:18px; z-index:9990;
display:flex; flex-direction:column; gap:10px;
}
.fc-btn{
display:flex; align-items:center; gap:10px;
height:46px; border-radius:999px; padding:0 14px;
color:#fff; text-decoration:none; font-weight:600;
box-shadow:0 8px 24px rgba(0,0,0,.18);
transform: translateZ(0);
transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
backdrop-filter: blur(4px);
}
.fc-btn i{ font-size:20px; line-height:1; }
.fc-btn span{
white-space:nowrap; max-width:0; overflow:hidden;
transition:max-width .3s ease;
}
/* Colores */
.fc-ig{ background: radial-gradient(90% 120% at 0% 0%, #ff6aa5, #ff8c4d); }
.fc-mail{ background: linear-gradient(135deg, #6b7cff, #6bc8ff); }
.fc-wa{ background: linear-gradient(135deg, #25D366, #14b65a); }
/* Efectos */
.fc-btn:hover{ transform: translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.22); }
.floating-contacts:hover .fc-btn span{ max-width:260px; }
/* Mobile: etiquetas ocultas, solo íconos (tocar abre igual) */
@media (max-width: 576px){
.fc-btn{ height:48px; padding:0 14px; }
.fc-btn span{ display:none; }
.floating-contacts{ right:14px; bottom:14px; gap:12px; }
}
/* Evita tapar toasts/modales si usás Bootstrap */
.modal.show ~ .floating-contacts{ z-index: 1040; }