fundacionandradsalud.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap:root{
--brand: #0f4fb3;
--brand-light: #4a7ad3;
--brand-dark: #0c3f8f;
--brand-2: #189a8a;
--brand-2-light: #2dc0ae;
--ink: #0b1220;
--ink-light: #374151;
--muted: #6b7280;
--bg-soft: #f6f8fb;
--bg-white: #ffffff;
--shadow: 0 10px 30px rgba(0,0,0,.08);
--shadow-lg: 0 20px 40px rgba(0,0,0,.12);
--ticker-size: 620px;
--nav-height: 80px;
--border-radius: 16px;
--transition: all 0.3s ease;
}
html{ scroll-behavior:smooth; }
body{
font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
color: var(--ink);
line-height: 1.6;
overflow-x: hidden; /* evita desplazamiento horizontal por el ticker */
}
img{ max-width:100%; height:auto; display:block; }
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
font-family: 'Outfit', sans-serif;
font-weight: 700;
}
/* Navbar */
.navbar{
box-shadow: var(--shadow);
background: var(--bg-white);
height: var(--nav-height);
padding: 0 1rem;
transition: var(--transition);
}
.navbar-brand { display:flex; align-items:center; gap:12px; }
.navbar-brand img{ height: 42px; transition: var(--transition); }
.navbar-brand strong {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 1.4rem;
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav-link { font-weight: 500; position: relative; padding: 0.5rem 1rem !important; transition: var(--transition); }
.nav-link::after {
content: ''; position:absolute; bottom:0; left:50%; width:0; height:3px;
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%); border-radius: 10px; transition: var(--transition); transform: translateX(-50%);
}
.nav-link:hover::after, .nav-link.active::after { width: 70%; }
.btn-brand{
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
color:#fff; border:none; font-weight:600; padding: .75rem 1.5rem; border-radius:12px;
transition:var(--transition); box-shadow:0 4px 14px rgba(15,79,179,.4);
}
.btn-brand:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(15,79,179,.5); color:#fff; }
.btn-outline-primary{ border:2px solid var(--brand); color:var(--brand); font-weight:600; padding:.75rem 1.5rem; border-radius:12px; transition:var(--transition); }
.btn-outline-primary:hover{ background:var(--brand); color:#fff; transform:translateY(-2px); box-shadow:0 6px 20px rgba(15,79,179,.3); }
/* Hero */
#inicio{ padding-top: calc(var(--nav-height) + 40px); position:relative; overflow:hidden; }
.hero{ background: linear-gradient(135deg, #ffffff 0%, #f7fbff 60%, #eef8ff 100%); position:relative; }
.hero::before{
content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%;
background: linear-gradient(135deg, rgba(15,79,179,.1) 0%, rgba(24,154,138,.1) 100%);
z-index:0;
}
.hero::after{
content:''; position:absolute; bottom:-100px; left:-100px; width:300px; height:300px; border-radius:50%;
background: linear-gradient(135deg, rgba(24,154,138,.1) 0%, rgba(15,79,179,.1) 100%);
z-index:0;
}
.hero-content{ position:relative; z-index:2; }
.hero .badge-soft{ background:linear-gradient(90deg, rgba(15,79,179,.1) 0%, rgba(24,154,138,.1) 100%); color:var(--brand); border-radius:100px; font-weight:600; padding:.5rem 1.25rem; display:inline-flex; align-items:center; gap:.5rem; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.5); }
.hero h1.display-5{ font-size:3rem; font-weight:800; line-height:1.2; margin-bottom:1.2rem;
background: linear-gradient(90deg, var(--ink) 0%, var(--brand) 50%, var(--brand-2) 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero .lead{ font-size:1.2rem; color:var(--ink-light); margin-bottom:1.5rem; }
.hero-figure{ border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--shadow-lg); border:8px solid white; }
.hero-figure img{ width:100%; height:auto; }
.badge-kpis{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.badge-kpis span{ display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.25rem; border-radius:100px; background:#fff; box-shadow:var(--shadow); font-weight:500; border:1px solid rgba(15,79,179,.1); }
.badge-kpis i{ color:var(--brand); font-size:1.1rem; }
.hero-ctas{ display:grid; gap:.75rem; grid-template-columns:1fr; }
.hero-ctas .btn{ width:100%; }
@media(min-width: 576px){ .hero-ctas{ grid-template-columns: auto auto; } .hero-ctas .btn{ width:auto; } }
/* Sections */
.section{ padding: 100px 0; position:relative; }
.section-title{ font-weight:800; letter-spacing:-.5px; margin-bottom:1rem; font-size:2.5rem; }
.section-title::after{ content:''; display:block; width:60px; height:5px; background:linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%); border-radius:10px; margin-top:1rem; }
.text-center .section-title::after{ margin-left:auto; margin-right:auto; }
.subtle{ color:var(--muted); font-size:1.1rem; }
.bg-light{ background: var(--bg-soft) !important; }
/* Cards */
.card-soft{ border:0; border-radius:var(--border-radius); box-shadow:var(--shadow); transition: var(--transition); overflow:hidden; background:#fff; }
.card-soft:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.badge-soft{ background:rgba(15,79,179,.1); color:var(--brand); border-radius:100px; font-weight:600; padding:.5rem 1rem; }
/* Ticker */
.ticker-wrap{ overflow:hidden; position:relative; padding:1rem 0; }
.ticker-track{ display:flex; gap:24px; width:max-content; animation: slide 40s linear infinite; will-change:transform; }
.ticker-item{ flex:0 0 auto; width:var(--ticker-size); height:var(--ticker-size); border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; display:grid; place-items:center; transition:var(--transition); position:relative; }
.ticker-item img{ width:100%; height:100%; object-fit:cover; }
.ticker-item:hover{ transform:scale(1.05); box-shadow:var(--shadow-lg); }
.ticker-controls{ margin-top:2rem; display:flex; gap:12px; justify-content:center; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-wrap:hover .ticker-track{ animation-play-state:paused; }
/* Tienda */
.shop-embed{ aspect-ratio:16/9; width:100%; border:0; border-radius:var(--border-radius); box-shadow:var(--shadow-lg); background:#fff; }
/* Contacto */
.contact-card{ background:#fff; border-radius:var(--border-radius); box-shadow:var(--shadow); padding:2rem; }
.form-control, .form-select{ padding:.875rem 1rem; border-radius:12px; border:1px solid #e5e7eb; transition:var(--transition); }
.form-control:focus, .form-select:focus{ box-shadow:0 0 0 3px rgba(15,79,179,.2); border-color:var(--brand); }
/* WhatsApp widget */
.whats-widget{ position:fixed; right:24px; bottom:24px; z-index:1050; }
.whats-bubble{ background:#25d366; color:#fff; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:var(--transition); animation:pulse 2s infinite; text-decoration:none; z-index:2; }
.whats-bubble:hover{ color:#fff; background:#1ebe57; transform:scale(1.1); }
.whats-chat{ position:absolute; right:78px; bottom:0; width:320px; max-width:calc(100vw - 120px
/* ...cortado... */
/* Desktop: misma altura para imagen y carrusel */
@media (min-width: 992px){
.hero .hero-media,
.hero .hero-figure,
.hero .hero-figure .carousel,
.hero .hero-figure .carousel-inner,
.hero .hero-figure .carousel-item{
height: 460px;
}
.hero .hero-media img{
width: 100%;
height: 100%;
object-fit: contain; /* no deforma la pieza del cliente */
border-radius: .75rem;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.hero .hero-figure .carousel-item img{
width: 100%;
height: 100%;
object-fit: cover; /* el carrusel llena con recorte suave */
border-radius: .75rem;
}
}
/* Mobile: crecimiento natural */
@media (max-width: 991.98px){
.hero .hero-media img,
.hero .hero-figure .carousel-item img{
width: 100%;
height: auto;
}
}
.hero .hero-figure .carousel-inner{ overflow: hidden; border-radius: .75rem; }
.hero .carousel-control-prev, .hero .carousel-control-next{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
/* Cards tienda */
.product-card{ border:0; border-radius:var(--border-radius); background:#fff; box-shadow:var(--shadow); overflow:hidden; transition:var(--transition); }
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.product-thumb{ position:relative; overflow:hidden; aspect-ratio:3/4; background:#f5f8ff; padding:10px; display:grid; place-items:center; }
.product-thumb img{ width:100%; height:100%; object-fit:contain; }
.product-thumb.poster{ border-radius:12px; box-shadow:var(--shadow); }
.product-body{ padding:1rem 1rem 1.25rem; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ background:#eaf2ff; color:var(--brand); border-radius:999px; font-weight:600; font-size:.85rem; padding:.35rem .6rem; }
/* --- Mobile navbar fixes --- */
.navbar{ z-index: 1100; }
@media (max-width: 576px){
:root{ --nav-height: 60px; }
.navbar{ height: var(--nav-height) !important; background:#fff !important; }
.navbar .container{ display:flex; align-items:center; }
.navbar-brand img{ height: 36px; }
.navbar-toggler{
height: var(--nav-height);
display:flex; align-items:center; justify-content:center;
padding: 0 .75rem; margin-left:auto; border:0;
transform: translateY(-4px); /* un poco más arriba */
}
.navbar-toggler-icon{ background-size: 1.5rem 1.5rem; }
/* Collapse con fondo sólido y sombra para que NO se vea transparente */
.navbar-collapse{
background: #ffffff;
box-shadow: 0 10px 24px rgba(0,0,0,.08);
padding: .5rem .75rem 1rem;
}
.navbar-nav .nav-link{
padding: .6rem .75rem !important;
border-radius: 10px;
}
}
/* Backdrop cuando el menú está abierto */
.nav-backdrop{
position: fixed;
top: var(--nav-height);
left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,.15);
z-index: 1000;
display: none;
}
body.nav-open .nav-backdrop{ display:block; }
body.nav-open{ overflow:hidden; }
aulavirtual
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css:root{--brand:#6c63ff;--brand2:#00c2ff;--muted:#6c757d}
body{background:#f8f9fa;color:#212529}
.navbar{background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.05)}
.brand-gradient{background:linear-gradient(135deg,var(--brand),var(--brand2));
-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero{background:linear-gradient(180deg,#e9ecef,#fff);padding:80px 0}
.card-soft{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px}
.btn-brand{background:var(--brand);color:#fff;border:none}
.btn-brand:hover{background:#5a52ff}
footer{background:#fff;border-top:1px solid #e9ecef}
/* Estilos para el cubo 3D TRANSPARENTE */
.cube-container {
perspective: 1200px;
width: 300px;
height: 300px;
margin: 40px auto;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotateCube 25s infinite linear;
}
.cube-face {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.cube-face img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
transition: all 0.4s ease;
opacity: 0.9;
}
.cube-face:hover img {
transform: scale(1.08);
opacity: 1;
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
}
.cube-face-front {
transform: translateZ(150px);
}
.cube-face-back {
transform: rotateY(180deg) translateZ(150px);
}
.cube-face-right {
transform: rotateY(90deg) translateZ(150px);
}
.cube-face-left {
transform: rotateY(-90deg) translateZ(150px);
}
.cube-face-top {
transform: rotateX(90deg) translateZ(150px);
}
.cube-face-bottom {
transform: rotateX(-90deg) translateZ(150px);
}
@keyframes rotateCube {
0% { transform: rotateY(0) rotateX(15deg); }
16.6% { transform: rotateY(90deg) rotateX(15deg); }
33.3% { transform: rotateY(180deg) rotateX(15deg); }
50% { transform: rotateY(270deg) rotateX(15deg); }
66.6% { transform: rotateY(360deg) rotateX(15deg); }
83.3% { transform: rotateY(360deg) rotateX(75deg); }
100% { transform: rotateY(360deg) rotateX(15deg); }
}
/* Responsive */
@media (max-width: 768px) {
.cube-container {
width: 250px;
height: 250px;
}
.cube-face-front { transform: translateZ(125px); }
.cube-face-back { transform: rotateY(180deg) translateZ(125px); }
.cube-face-right { transform: rotateY(90deg) translateZ(125px); }
.cube-face-left { transform: rotateY(-90deg) translateZ(125px); }
.cube-face-top { transform: rotateX(90deg) translateZ(125px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(125px); }
}
@media (max-width: 576px) {
.cube-container {
width: 200px;
height: 200px;
}
.cube-face-front { transform: translateZ(100px); }
.cube-face-back { transform: rotateY(180deg) translateZ(100px); }
.cube-face-right { transform: rotateY(90deg) translateZ(100px); }
.cube-face-left { transform: rotateY(-90deg) translateZ(100px); }
.cube-face-top { transform: rotateX(90deg) translateZ(100px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(100px); }
}
andreaalvarezcoach.com
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swaphttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css:root {
--brand-primary: #e5706f;
--brand-secondary: #edb590;
--brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
--dark: #12131a;
--dark-light: #1f2937;
--muted: #6b7280;
--light: #f8fafc;
--light-gray: #f1f5f9;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-md: 0 10px 15px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
background: #fff;
color: var(--dark-light);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
scroll-behavior: smooth;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
.section-title {
font-size: 2.5rem;
letter-spacing: -0.5px;
position: relative;
display: inline-block;
margin-bottom: 2rem;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: var(--brand-gradient);
border-radius: 2px;
}
.text-center .section-title::after {
left: 50%;
transform: translateX(-50%);
}
/* Navbar */
.navbar {
--bs-navbar-padding-y: 0.75rem;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.navbar-brand {
font-weight: 700;
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.brand-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--brand-primary);
display: inline-block;
position: relative;
}
.brand-dot::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 50%;
background: rgba(111, 82, 237, 0.2);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}
.nav-link {
font-weight: 500;
position: relative;
padding: 0.5rem 1rem !important;
transition: var(--transition);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--brand-gradient);
transition: var(--transition);
transform: translateX(-50%);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 70%;
}
.btn {
border-radius: var(--radius-md);
font-weight: 500;
padding: 0.625rem 1.5rem;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-brand {
background: var(--brand-gradient);
border: none;
color: white;
box-shadow: var(--shadow-md);
}
.btn-brand:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
color: white;
}
.btn-ghost {
border: 1px solid rgba(17, 17, 17, 0.12);
background: transparent;
}
.btn-ghost:hover {
background: rgba(111, 82, 237, 0.05);
border-color: var(--brand-primary);
}
/* Hero Section */
.hero {
padding: 150px 0 100px;
background:
radial-gradient(1200px 600px at 120% -20%, rgba(0, 176, 166, 0.15), transparent 60%),
radial-gradient(1000px 500px at -20% -30%, rgba(111, 82, 237, 0.15), transparent 60%),
linear-gradient(180deg, #fff 0%, #fafbff 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(111, 82, 237, 0.05);
z-index: 0;
}
.hero::after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(0, 176, 166, 0.05);
z-index: 0;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 3.8rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
background: linear-gradient(120deg, var(--dark) 0%, var(--brand-primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p.lead {
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
color: var(--dark-light);
margin-bottom: 2rem;
}
.badge-soft {
background: rgba(111, 82, 237, 0.1);
color: var(--brand-primary);
padding: 0.5rem 1rem;
border-radius: 100px;
font-weight: 500;
font-size: 0.85rem;
border: 1px solid rgba(111, 82, 237, 0.2);
display: inline-block;
margin-bottom: 1.5rem;
}
.feature-item {
border: 1px solid rgba(17, 17, 17, 0.06);
border-radius: var(--radius-xl);
padding: 1.5rem;
background: #fff;
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.icon-bullet {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f4f5ff;
color: var(--brand-primary);
border: 1px solid rgba(111, 82, 237, 0.25);
font-size: 1.2rem;
flex-shrink: 0;
}
/* Sections */
.section {
padding: 5rem 0;
position: relative;
}
.bg-light-subtle {
background: var(--light-gray) !important;
}
.small-muted {
color: var(--muted);
font-size: 0.95rem;
}
/* About Section */
.about-img {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: var(--transition);
}
.about-img:hover {
transform: scale(1.02);
}
.about-img img {
width: 100%;
height: auto;
display: block;
}
/* Services */
.service-card {
border: 1px solid rgba(17, 17, 17, 0.08);
border-radius: var(--radius-xl);
padding: 2rem;
background: #fff;
box-shadow: var(--shadow-md);
transition: var(--transition);
height: 100%;
display: flex;
flex-direction: column;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.service-card .title {
font-weight: 700;
font-size: 1.3rem;
margin-bottom: 1rem;
}
.list-check {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 1.5rem;
}
.list-check li {
padding-left: 2rem;
position: relative;
margin: 0.5rem 0;
}
.list-check li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--brand-
/* ...cortado... */
/* Keep brand inline and tidy */
.navbar-brand, .brand-title {
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 0;
font-family: inherit;
}
.brand-logo { height: 52px; width: auto; }
/* Prevent brand text from pushing layout */
.navbar-brand .brand-title span,
.brand-title span {
display: inline-block;
max-width: 60vw;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Tighter default paddings */
.navbar { padding-left: .5rem; padding-right: .5rem; }
/* Mobile-specific adjustments */
@media (max-width: 576px) {
.brand-logo { height: 42px; }
.brand-title { font-size: .98rem; gap: .45rem; }
.brand-dot { display: none; } /* ahorra un poco de ancho */
/* Make sure toggler is tappable and spaced */
.navbar-toggler { padding: .35rem .5rem; }
/* Add breathing room below a fixed-top navbar (if used) */
.navbar.fixed-top + main,
.navbar.fixed-top + .container,
.navbar.sticky-top + main,
.navbar.sticky-top + .container,
.navbar.fixed-top + section,
.navbar.sticky-top + section {
margin-top: 72px;
}
}
.brand-title {
display: flex;
align-items: center;
gap: .8rem; /* más espacio entre logo y texto */
font-size: 1.1rem; /* texto más chico */
font-weight: 500; /* menos pesado para que no compita con el logo */
font-family: inherit; /* mantiene la tipografía del resto del sitio */
margin: 0;
}
.brand-logo {
height: 60px; /* logo más grande */
width: auto;
border-radius: 0%; /* opcional: redondo */
}
.img-btn{
padding:0; border:0; background:transparent; display:block; width:100%;
cursor:pointer; line-height:0; border-radius: var(--radius-xl, 18px); overflow:hidden;
}
.gallery-card{ position:relative; z-index:1; border-radius: var(--radius-xl, 18px); overflow:hidden; box-shadow: var(--shadow-md, 0 10px 26px rgba(15,23,42,.10)); background:#fff; }
.gallery-card img{ width:100%; height:auto; display:block; }
.flyer-col{ position: relative; }
.flyer-col.is-active::after{
content:""; position:absolute; inset:-10px; border-radius:26px;
background: conic-gradient(from 0deg,#ff6b6b,#f7b267,#ffd166,#06d6a0,#4cc9f0,#a78bfa,#ff6b6b);
filter: blur(14px); opacity:.45; animation: spin 2.2s linear infinite, pulseGlow 1.6s ease-in-out infinite;
z-index:0; pointer-events:none;
}
@keyframes spin{ to{ transform: rotate(360deg);} }
@keyframes pulseGlow{ 0%,100%{opacity:.30} 50%{opacity:.55} }
.flyer-panel{
position:relative; z-index:2; margin-top:.6rem;
border:1px solid #e9ecef; border-radius:.9rem; padding:1rem;
background: linear-gradient(135deg,#ffffff 0%,#ffffff 55%,#f8fafc 100%);
box-shadow:0 10px 28px rgba(15,23,42,.12);
animation: gradientShift .8s ease-in-out;
}
.flyer-panel::before{
content:""; position:absolute; left:0; top:0; right:0; height:4px;
border-top-left-radius:.9rem; border-top-right-radius:.9rem;
background: linear-gradient(90deg,#ff6b6b,#f7b267,#ffd166,#06d6a0,#4cc9f0,#a78bfa);
background-size:200% 100%; animation: barFlow 2.8s linear infinite;
}
@keyframes barFlow{ to{ background-position:200% 0; } }
@keyframes gradientShift{ from{ opacity:0; transform: translateY(-4px);} to{ opacity:1; transform:none;} }
.flyer-panel .close-btn{
position:absolute; top:6px; right:10px; border:none; background:transparent;
font-size:1.35rem; line-height:1; cursor:pointer; color:#94a3b8;
}
.flyer-panel .close-btn:hover{ color:#0f172a; }
.btn-whatsapp{
background-color:#25D366; border:none;
display:inline-flex; align-items:center; justify-content:center;
width:46px; min-width:46px; height:38px; border-radius:.6rem;
}
.btn-whatsapp i{ color:#fff; font-size:1.25rem; }
.d-none{ display:none !important; }
/* grid interno: no toca la grilla de Bootstrap ni el footer */
#ebook .ebook-wrap{
display: grid;
grid-template-columns: 1fr min(35%, 300px);
align-items: center;
gap: 1rem 1.25rem;
}
@media (max-width: 992px){
#ebook .ebook-wrap{
grid-template-columns: 1fr; /* apilado en mobile/tablet */
}
}
/* Contenedor de botones flotantes */
.social-float-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
gap: 15px;
align-items: flex-end;
}
/* Estilos base para todos los botones sociales */
.social-float {
position: relative;
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.social-float:hover {
transform: translateY(-5px) rotate(5deg) scale(1.1);
}
.social-button {
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
position: relative;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
color: white;
text-decoration: none;
}
.social-button:hover {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.social-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
}
.social-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite;
}
.social-pulse-delayed {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite 0.5s;
}
.social-tooltip {
position: absolute;
right: 90px;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
padding: 12px 15px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
width: 200px;
text-align: center;
}
.social-tooltip small {
display: block;
font-size: 12px;
color: #666;
font-weight: normal;
margin-top: 3px;
}
.tooltip-arrow {
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
.social-float:hover .social-tooltip {
opacity: 1;
visibility: visible;
right: 80px;
}
/* Estilos específicos para cada botón */
.whatsapp-button {
background: #25D366;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
}
.whatsapp-button:hover {
background: #128C7E;
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}
.whatsapp-pulse, .social-pulse.whatsapp-pulse {
background: rgba(37, 211, 102, 0.6);
}
.whatsapp-pulse-delayed, .social-pulse-delayed.whatsapp-pulse-delayed {
background: rgba(37, 211, 102, 0.4);
}
.instagram-button {
background: #E1306C;
box-shadow: 0 10px 25px rgba(225, 48, 108, 0.3);
}
.instagram-button:hover {
background: #C13584;
box-shadow: 0 15px 30px rgba(193, 53, 132, 0.4);
}
.instagram-pulse, .social-pulse.instagram-pulse {
background: rgba(225, 48, 108, 0.6);
}
.instagram-pulse-delayed, .social-pulse-delayed.instagram-pulse-delayed {
background: rgba(193, 53, 132, 0.4);
}
.facebook-button {
background: #1877F2;
box-shadow: 0 10px 25px rgba(24, 119, 242, 0.3);
}
.facebook-button:hover {
background: #166FE5;
box-shadow: 0 15px 30px rgba(22, 111, 229, 0.4);
}
.facebook-pulse, .social-pulse.facebook-pulse {
background: rgba(24, 119, 242, 0.6);
}
.facebook-pulse-delayed, .social-pulse-delayed.facebook-pulse-delayed {
background: rgba(22, 111, 229, 0.4);
}
.linkedin-button {
background: #0077B5;
box-shadow: 0 10px 25px rgba(0, 119, 181, 0.3);
}
.linkedin-button:hover {
background: #005582;
box-shadow: 0 15px 30px rgba(0, 85, 130, 0.4);
}
.linkedin-pulse, .social-pulse.linkedin-pulse {
background: rgba(0, 119, 181, 0.6);
}
.linkedin-pulse-delayed, .social-pulse-delayed.linkedin-pulse-delayed {
background: rgba(0, 85, 130, 0.4);
}
/* Animaciones */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.3); opacity: 0.4; }
100% { transform: scale(1.4); opacity: 0; }
}
/* Efecto de latido al cargar */
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Animación inicial para los botones */
.social-button {
animation: heartbeat 1.5s ease 2s 2, float 3s ease-in-out infinite 3s;
}
/* Mostrar botones con un pequeño retraso entre ellos */
.linkedin-float { animation: fadeInUp 0.5s ease 0.1s both; }
.instagram-float { animation: fadeInUp 0.5s ease 0.3s both; }
.facebook-float { animation: fadeInUp 0.5s ease 0.5s both; }
.whatsapp-float { animation: fadeInUp 0.5s ease 0.7s both; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 768px) {
.social-float-container {
bottom: 20px;
right: 20px;
}
.social-button {
width: 60px;
height: 60px;
}
.social-icon {
font-size: 25px;
}
.social-tooltip {
display: none;
}
}
camperasegresadosfull.com
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swaphttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css:root {
--primary-color: #6a11cb;
--secondary-color: #2575fc;
--accent-color: #ff3e9d;
--light-color: #f8f9fa;
--dark-color: #212529;
--transition: all 0.3s ease;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--dark-color);
overflow-x: hidden;
scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
/* Navbar */
.navbar {
background-color: rgba(255, 255, 255, 0.98) !important;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
padding: 20px 0;
transition: var(--transition);
}
.navbar.scrolled {
padding: 15px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.navbar-brand {
font-weight: 800;
font-size: 1.8rem;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-nav .nav-link {
color: var(--dark-color) !important;
font-weight: 600;
padding: 8px 15px;
margin: 0 5px;
position: relative;
transition: var(--transition);
}
.navbar-nav .nav-link:before {
content: '';
position: absolute;
width: 0;
height: 3px;
bottom: 0;
left: 0;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
transition: var(--transition);
}
.navbar-nav .nav-link:hover:before {
width: 100%;
}
.navbar-nav .nav-link:hover {
color: var(--primary-color) !important;
}
/* Hero Section */
.hero-section {
background: url('img/herocampe.png') center/cover no-repeat;
min-height: 100vh;
display: flex;
align-items: center;
color: white;
position: relative;
padding: 120px 0 80px;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.hero-title {
font-size: 4rem;
margin-top: 700px; /* o ajustalo a gusto */
margin-bottom: 20px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
animation: fadeInDown 1s ease;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.5rem;
margin-bottom: 30px;
animation: fadeInUp 1s ease 0.3s both;
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 15px;
animation: fadeIn 1s ease 0.6s both;
}
.btn-gradient {
background: linear-gradient(45deg, var(--accent-color), #ff6b6b);
border: none;
color: white;
font-weight: 600;
letter-spacing: 0.5px;
padding: 12px 30px;
border-radius: 50px;
transition: var(--transition);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.btn-gradient:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
color: white;
}
.btn-outline-light {
border: 2px solid white;
color: white;
font-weight: 600;
padding: 12px 30px;
border-radius: 50px;
transition: var(--transition);
}
.btn-outline-light:hover {
background-color: white;
color: var(--primary-color);
}
/* Section Styles */
.section {
padding: 100px 0;
position: relative;
}
.section-title {
position: relative;
display: inline-block;
margin-bottom: 60px;
color: var(--dark-color);
}
.section-title:after {
content: '';
position: absolute;
width: 60px;
height: 4px;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
bottom: -15px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.section-light {
background-color: var(--light-color);
}
.section-dark {
background-color: var(--dark-color);
color: white;
}
.section-gradient {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
}
/* About Section */
.about-img {
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
transition: var(--transition);
transform: perspective(1000px) rotateY(-5deg);
}
.about-img:hover {
transform: perspective(1000px) rotateY(0deg);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}
.about-badge {
display: inline-block;
background: linear-gradient(45deg, var(--accent-color), #ff6b6b);
color: white;
padding: 8px 20px;
border-radius: 50px;
font-weight: 600;
margin-bottom: 15px;
}
/* Services Section */
.service-card {
background: white;
border-radius: 15px;
padding: 40px 30px;
margin-bottom: 30px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
z-index: 1;
}
.service-card:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.service-icon {
font-size: 2.5rem;
margin-bottom: 20px;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.service-card h3 {
margin-bottom: 15px;
color: var(--dark-color);
}
/* Features Section */
.feature-box {
text-align: center;
padding: 40px 25px;
border-radius: 15px;
background: #f054b5;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
transition: var(--transition);
margin-bottom: 50px; /* Más separación */
height: 100%;
border: 3px solid #007bff; /* Borde azul */
}
.feature-box:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2rem;
color: white;
}
/* Portfolio Section */
.portfolio-section {
background-color: #f5f5f5;
}
.portfolio-filter {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
gap: 10px;
}
.filter-btn {
padding: 10px 25px;
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
border-radius: 50px;
transition: var(--transition);
font-weight: 600;
}
.filter-btn:hover, .filter-btn.active {
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
color: white;
border-color: transparent;
}
.portfolio-item {
position: relative;
margin-bottom: 3
/* ...cortado... */
/* Estilos para la barra de catálogos */
.catalog-bar {
background-color: #2c3e50;
color: white;
padding: 15px 0;
cursor: pointer;
text-align: center;
margin: 20px 0;
border-radius: 5px;
transition: all 0.3s ease;
}
.catalog-bar:hover {
background-color: #34495e;
}
.catalog-bar h3 {
margin: 0;
font-size: 1.5rem;
}
.catalog-content {
display: none;
padding: 20px 0;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.catalog-card {
background: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin-bottom: 20px;
text-align: center;
}
.catalog-btn {
background-color: #3498db;
color: white;
padding: 8px 20px;
border-radius: 20px;
text-decoration: none;
display: inline-block;
margin-top: 10px;
transition: background-color 0.3s;
}
.catalog-btn:hover {
background-color: #2980b9;
color: white;
}
.img-ticker {
width: 300px;
height: auto;
border-radius: 8px;
flex-shrink: 0;
}
.ticker {
transition: transform 0.3s ease;
}
/* Estilos base */
.social-float {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
}
.social-buttons {
display: flex;
flex-direction: column;
gap: 20px;
}
.social-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.social-icon {
font-size: 28px;
color: white;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: 2;
}
.social-tooltip {
position: absolute;
right: 70px;
background: white;
padding: 8px 15px;
border-radius: 30px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 14px;
color: #333;
opacity: 0;
pointer-events: none;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.social-tooltip:before {
content: "";
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid white;
}
/* Efecto de onda para WhatsApp */
.pulse-effect {
position: absolute;
width: 100%;
height: 100%;
background: inherit;
border-radius: 50%;
z-index: 1;
opacity: 0;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.8);
opacity: 0.7;
}
70% {
transform: scale(1.3);
opacity: 0;
}
100% {
transform: scale(0.8);
opacity: 0;
}
}
/* Colores y efectos hover */
.whatsapp {
background: linear-gradient(45deg, #25D366, #128C7E);
}
.instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.facebook {
background: linear-gradient(45deg, #3b5998, #0078d7);
}
.social-btn:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.social-btn:hover .social-tooltip {
opacity: 1;
right: 80px;
}
/* Efecto de brillo al pasar el mouse */
.social-btn:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.social-btn:hover:after {
opacity: 1;
}
/* Animación de entrada */
.social-btn {
animation: floatIn 0.5s ease-out forwards;
opacity: 0;
transform: translateY(20px);
}
.whatsapp { animation-delay: 0.1s; }
.instagram { animation-delay: 0.2s; }
.facebook { animation-delay: 0.3s; }
@keyframes floatIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive */
@media (max-width: 768px) {
.social-float {
bottom: 20px;
right: 15px;
}
.social-btn {
width: 50px;
height: 50px;
}
.social-icon {
font-size: 24px;
}
.social-tooltip {
display: none;
}
}
testchat.netfan.host
<link rel="stylesheet"> en el archivo.:root{
--bg:#0f172a; --card:#0b1220; --me:#22c55e; --meText:#052914;
--bot:#ffffff; --botText:#0b1220; --muted:#94a3b8;
}
html,body{height:100%}
body{
background:#0f172a; margin:0; color:#e2e8f0;
font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
display:flex; align-items:center; justify-content:center;
}
.phone{
width:360px; max-width:92vw; height:92vh; min-height:640px;
background:var(--card); border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.55);
display:flex; flex-direction:column; overflow:hidden; margin:24px auto;
}
header{height:56px; display:flex; align-items:center; gap:10px; padding:10px 12px; background:#0d1728}
.avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#7c3aed,#22c55e); display:grid; place-items:center; font-weight:800}
.meta{display:flex; flex-direction:column}
.name{font-weight:700}
.status{font-size:12px; color:var(--muted)}
.log{flex:1; overflow:auto; padding:10px; background:#0b1220}
.b{display:flex; gap:8px; margin:8px 0}
.msg{max-width:78%; padding:10px 12px; border-radius:12px; font-size:14px; line-height:1.35; word-wrap:break-word; white-space:pre-wrap}
.bot .msg{background:var(--bot); color:var(--botText); border-top-left-radius:4px}
.me{justify-content:flex-end}
.me .msg{background:var(--me); color:var(--meText); border-top-right-radius:4px}
.time{display:block; margin-top:4px; font-size:11px; color:#667789}
form{display:flex; gap:8px; padding:10px; background:#0d1728}
input[type=text]{
flex:1; padding:10px 14px; border-radius:999px; border:1px solid transparent;
background:#0f1a2f; color:#e2e8f0; outline:none;
}
button{
padding:10px 16px; border-radius:999px; border:none; background:var(--me); color:var(--meText);
font-weight:800; cursor:pointer;
}
/* Typing dots (WhatsApp-like) */
.typing{display:inline-flex; gap:4px; align-items:center}
.dot{width:6px; height:6px; border-radius:50%; background:#9aa6b2; opacity:.6; animation:bounce 1.2s infinite}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}
a{color:#0ea5e9; text-decoration:none}
a:hover{text-decoration:underline}
@media (min-width:900px){
/* estilo “teléfono al medio” en desktop */
body{padding:36px 0}
}
diagnosisgrupoforense.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swaphttps://unpkg.com/[email protected]/dist/aos.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css:root {
--clr-primary: #17b7b7; /* Azul principal más intenso */
--clr-secondary: #14c6b8; /* Rosa más vibrante */
--clr-accent: #ff9e3f; /* Naranja complementario */
--clr-light: #f8f9fa;
--clr-dark: #212529;
--clr-cream: #fbf6e9;
--gradient-primary: linear-gradient(135deg, var(--clr-primary) 0%, #0d2b52 100%);
--gradient-secondary: linear-gradient(135deg, var(--clr-secondary) 0%, #9a0060 100%);
--card-size: 500px;
--section-padding: 6rem 0;
--border-radius: 16px;
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
@media(max-width: 768px) {
:root {
--card-size: 300px;
--section-padding: 4rem 0;
--border-radius: 12px;
}
}
/* Base Styles */
body {
font-family: 'Montserrat', sans-serif;
color: var(--clr-dark);
line-height: 1.7;
scroll-behavior: smooth;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4 {
font-family: 'Playfair Display', serif;
font-weight: 700;
line-height: 1.2;
}
a {
text-decoration: none;
transition: var(--transition);
}
/* Navbar */
.navbar {
padding: 1.5rem 0;
transition: var(--transition);
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.9) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.navbar.scrolled {
padding: 1rem 0;
background-color: rgba(255, 255, 255, 0.98) !important;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
color: var(--clr-primary) !important;
letter-spacing: -0.5px;
}
.nav-link {
font-weight: 500;
color: var(--clr-dark) !important;
padding: 0.5rem 1rem !important;
position: relative;
}
.nav-link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--clr-secondary);
transition: var(--transition);
}
.nav-link:hover::before {
width: 100%;
}
.nav-link.active {
color: var(--clr-secondary) !important;
}
.nav-link.active::before {
width: 100%;
}
.navbar-toggler {
border: none;
padding: 0.5rem;
}
.navbar-toggler:focus {
box-shadow: none;
}
/* Hero Section */
#hero {
background: url('img/herodia4.png') center/cover no-repeat;
min-height: 100vh;
position: relative;
color: #fff;
display: flex;
align-items: center;
overflow: hidden;
}
#hero::before {
content: "";
position: absolute;
inset: 0;
background:
}
#hero .content {
position: relative;
z-index: 2;
padding-top: 6rem;
}
.hero-title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 1.1;
margin-bottom: 1.5rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero-subtitle {
font-size: clamp(1.1rem, 2vw, 1.5rem);
margin-bottom: 2.5rem;
max-width: 700px;
opacity: 0.9;
}
.btn-primary {
background: var(--clr-secondary);
border: none;
color: white;
padding: 0.8rem 2.5rem;
font-weight: 600;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
transition: var(--transition);
box-shadow: 0 10px 20px rgba(209, 0, 125, 0.3);
}
.btn-primary:hover {
background: var(--clr-primary);
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(209, 0, 125, 0.4);
}
.btn-outline {
background: transparent;
border: 2px solid white;
color: white;
padding: 0.8rem 2.5rem;
font-weight: 600;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
transition: var(--transition);
margin-left: 1rem;
}
.btn-outline:hover {
background: white;
color: var(--clr-primary);
transform: translateY(-3px);
}
/* Section Titles */
.section-title {
font-size: clamp(1.8rem, 4vw, 3rem);
margin-bottom: 3rem;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: var(--clr-secondary);
border-radius: 2px;
}
.text-center .section-title::after {
left: 50%;
transform: translateX(-50%);
}
.section-padding {
padding: var(--section-padding);
}
/* About Section */
#quienes {
background: var(--clr-cream);
position: relative;
}
.about-text {
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
}
/* Services Section */
.service-card {
border: none;
border-radius: var(--border-radius);
overflow: hidden;
transition: var(--transition);
height: 100%;
background: white;
box-shadow: var(--box-shadow);
position: relative;
z-index: 1;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
opacity: 0;
transition: var(--transition);
z-index: -1;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.service-card:hover::before {
opacity: 1;
}
.service-card:hover .card-title,
.service-card:hover .card-text,
.service-card:hover .bi {
color: white !important;
}
.service-card .card-body {
padding: 2rem;
}
.service-card .card-title {
font-size: 1.3rem;
margin-bottom: 1rem;
color: var(--clr-primary);
transition: var(--transition);
}
.service-card .card-text {
color: var(--clr-dark);
transition: var(--transition);
}
.service-card .bi {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--clr-secondary);
transition: var(--transition);
}
/* Why Choose Us Section */
#elegirnos {
background: var(--gradient-primary);
position: relative;
overflow: hidden;
}
#elegirnos::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="rgba(255,255,255,0.05)"><path d="M30,10 Q50,5 70,30 T90,70 Q95,50 70,30 T10,30 Q5,50 30,70 T30,10"/></svg>') center/contain no-repeat;
animation: rotate 30s linear infinite;
}
#elegirnos::after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="rgba(255,255,255,0.05)"><circle cx="50" cy="50" r="40" stroke-width="5" stroke="rgba(255,255,255,0.1)" fill="none"/></svg>') center/contain no-repeat;
animation: rotateReverse 40s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes rotateReverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.why-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--border-radius);
padding: 2rem;
height: 100%;
transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.why-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.why-item i {
font-size: 2.5rem;
color: white;
margin-bottom: 1.5rem;
display: inline-block;
background: rgba(255, 255, 255, 0.2);
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
border-radius: 50%;
transition: var(--transition);
}
.why-item:hover i {
background: var(--clr-secondary);
transform: scale(1.1);
}
.why-item h5 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
/* Testimonials Section */
#trabajos {
background: var(--clr-cream);
position: relative;
}
.ticker {
overflow: hidden;
position: relative;
padding: 2rem 0;
}
.ticker-track {
display: flex;
/* ...cortado... */
.ticker-item{
display:flex;
align-items:center;
justify-content:center;
height:auto !important;
}
.ticker-item img{
width:100%;
height:auto !important;
object-fit:contain !important;
}
/* FIX: permitir que el click atraviese el overlay del ticker */
.ticker-item::after { pointer-events: none !important; }
/* Cursor de zoom */
.ticker img { cursor: zoom-in; }
/* Pausar cuando el lightbox esté abierto */
body.lb-open .ticker-track { animation-play-state: paused !important; }
/* gradiente global: ajustá los colores si usás otras vars */
:root{
--grad-start:#0ab3c9;
--grad-end:#003b6d;
}
/* tarjeta con gradiente + borde interior */
.grad-card{
background:linear-gradient(135deg,var(--grad-start) 0%,var(--grad-end) 100%);
border-radius:1rem;
color:#fff;
border:1px solid rgba(255,255,255,.18); /* borde exterior sutil */
box-shadow:
inset 0 0 0 3px rgba(255,255,255,.05), /* “marco” interior */
0 1.25rem 2rem rgba(0,0,0,.25); /* sombra exterior */
transition:transform .25s ease, box-shadow .25s ease;
}
.grad-card:hover{
transform:translateY(-6px);
}
/* chip profesional */
.chip{
display:block;
width:100%;
padding:.45rem .9rem;
font-size:.85rem;
text-align:center;
color:#fff;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25);
border-radius:50rem;
backdrop-filter:blur(4px);
}
/* íconos alineados */
.list-unstyled i{vertical-align:middle;}
.contact-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.15);
}
.contact-item i{
font-size:1.4rem;
color:#0d6efd;
margin-right:.75rem;
}
/* Contenedor de botones flotantes */
.social-float-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
gap: 15px;
align-items: flex-end;
}
/* Estilos base para todos los botones sociales */
.social-float {
position: relative;
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.social-float:hover {
transform: translateY(-5px) rotate(5deg) scale(1.1);
}
.social-button {
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
position: relative;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
color: white;
text-decoration: none;
}
.social-button:hover {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.social-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
}
.social-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite;
}
.social-pulse-delayed {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite 0.5s;
}
.social-tooltip {
position: absolute;
right: 90px;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
padding: 12px 15px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
width: 200px;
text-align: center;
}
.social-tooltip small {
display: block;
font-size: 12px;
color: #666;
font-weight: normal;
margin-top: 3px;
}
.tooltip-arrow {
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
.social-float:hover .social-tooltip {
opacity: 1;
visibility: visible;
right: 80px;
}
/* Estilos específicos para cada botón */
.whatsapp-button {
background: #25D366;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
}
.whatsapp-button:hover {
background: #128C7E;
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}
.whatsapp-pulse {
background: rgba(37, 211, 102, 0.6);
}
.whatsapp-pulse-delayed {
background: rgba(37, 211, 102, 0.4);
}
.instagram-button {
background: #E1306C;
box-shadow: 0 10px 25px rgba(225, 48, 108, 0.3);
}
.instagram-button:hover {
background: #C13584;
box-shadow: 0 15px 30px rgba(193, 53, 132, 0.4);
}
.instagram-pulse {
background: rgba(225, 48, 108, 0.6);
}
.instagram-pulse-delayed {
background: rgba(193, 53, 132, 0.4);
}
.facebook-button {
background: #1877F2;
box-shadow: 0 10px 25px rgba(24, 119, 242, 0.3);
}
.facebook-button:hover {
background: #166FE5;
box-shadow: 0 15px 30px rgba(22, 111, 229, 0.4);
}
.facebook-pulse {
background: rgba(24, 119, 242, 0.6);
}
.facebook-pulse-delayed {
background: rgba(22, 111, 229, 0.4);
}
.youtube-button {
background: #FF0000;
box-shadow: 0 10px 25px rgba(255, 0, 0, 0.3);
}
.youtube-button:hover {
background: #CC0000;
box-shadow: 0 15px 30px rgba(204, 0, 0, 0.4);
}
.youtube-pulse {
background: rgba(255, 0, 0, 0.6);
}
.youtube-pulse-delayed {
background: rgba(204, 0, 0, 0.4);
}
/* Animaciones */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.3); opacity: 0.4; }
100% { transform: scale(1.4); opacity: 0; }
}
/* Efecto de latido al cargar */
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Animación inicial para los botones */
.social-button {
animation: heartbeat 1.5s ease 2s 2, float 3s ease-in-out infinite 3s;
}
/* Mostrar botones con un pequeño retraso entre ellos */
.youtube-float { animation: fadeInUp 0.5s ease 0.1s both; }
.instagram-float { animation: fadeInUp 0.5s ease 0.2s both; }
.facebook-float { animation: fadeInUp 0.5s ease 0.3s both; }
.whatsapp-float { animation: fadeInUp 0.5s ease 0.4s both; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 768px) {
.social-float-container {
bottom: 20px;
right: 20px;
}
.social-button {
width: 60px;
height: 60px;
}
.social-icon {
font-size: 25px;
}
.social-tooltip {
display: none;
}
}
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:1055;padding:2rem;}
.lb-overlay.open{display:flex;}
.lb-img{max-width:96vw;max-height:92vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.6);border-radius:10px;}
.lb-close{position:absolute;top:1rem;right:1rem;font-size:2rem;line-height:1;color:#fff;background:transparent;border:0;cursor:pointer;opacity:.9}
.lb-close:hover{opacity:1}