Preview de mixed.css
/* MIXED CSS PACK */
/* Template: fundacionandradsalud.com.ar/index.html */
/* Template mtime: 2025-10-02 13:08:05 */
/* 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=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
: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); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow-lg); transform:translateY(10px); opacity:0; visibility:hidden; transition:var(--transition); z-index:1; }
.whats-widget.show .whats-chat{ transform:translateY(0); opacity:1; visibility:visible; }
.whats-chat::after{ content:""; position:absolute; right:-8px; bottom:16px; border:8px solid transparent; border-left-color:#fff; filter:drop-shadow(-1px 1px 0 rgba(0,0,0,.05)); }
.whats-header{ background:#075E54; color:#fff; padding:12px 14px; display:flex; align-items:center; gap:10px; }
.whats-header .avatar{ width:38px; height:38px; border-radius:50%; background:#1ebe57; display:grid; place-items:center; color:#fff; font-weight:700; }
.w-name{ font-weight:700; line-height:1; } .w-status{ font-size:.8rem; opacity:.9; }
.w-body{ padding:12px; background:#ECE5DD; }
.w-bubble{ background:#fff; border-radius:0 8px 8px 8px; padding:.65rem .8rem; max-width:90%; box-shadow:0 1px 0 rgba(0,0,0,.1); font-size:.95rem; }
.w-time{ float:right; font-size:.75rem; color:#667781; margin-top:.25rem; }
.w-actions{ padding:10px 12px; display:flex; gap:8px; justify-content:flex-end; background:#fff; border-top:1px solid #f0f0f0; }
.w-actions .btn{ border-radius:10px; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.7); } 70%{ box-shadow:0 0 0 12px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } }
@media(max-width:576px){ .whats-chat{ width:300px; right:70px; } }
/* Footer */
footer{ background: linear-gradient(135deg, #0c2a64 0%, #0b1220 100%); color:#e7eefc; position:relative; overflow:hidden; }
footer::before{ content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4-4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%230c3f8f' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity:.3; }
footer .muted{ color:#b8c6e5; }
footer a{ transition:var(--transition); } footer a:hover{ color:#fff !important; transform:translateX(5px); }
/* Hash offset fix */
.scroll-offset{ scroll-margin-top: calc(var(--nav-height) + 20px); }
/* Accordion */
.accordion-button{ font-weight:600; padding:1.25rem; border-radius:12px !important; }
.accordion-button:not(.collapsed){ background:linear-gradient(90deg, rgba(15,79,179,.1) 0%, rgba(24,154,138,.1) 100%); color:var(--brand); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 3px rgba(15,79,179,.2); border-color:var(--brand); }
.accordion-body{ padding:1.25rem; }
/* Back to top button */
.back-to-top{ position:fixed; bottom:100px; right:24px; width:50px; height:50px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; z-index:1040; box-shadow:var(--shadow); transition:var(--transition); opacity:0; visibility:hidden; }
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ background:var(--brand-dark); transform:translateY(-5px); }
/* Responsive adjustments */
@media (max-width: 1200px){ :root{ --ticker-size: 540px; } }
@media (max-width: 992px){ :root{ --ticker-size: 460px; } }
@media (max-width: 768px){
:root{ --nav-height: 70px; }
.hero h1.display-5{ font-size:2rem; }
.hero .lead{ font-size:1.05rem; }
.badge-kpis{ justify-content:center; }
.navbar-brand strong{ font-size:1.1rem; }
}
@media (max-width: 576px){
.ticker-item{ width:94vw; height:94vw; } /* Cuadrado en móvil, sin cortes */
.ticker-wrap{ padding:0 8px; }
}
/* --- 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; }
/* ===== INLINE <style> BLOCK #2 ===== */
/* 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)); }
/* ===== INLINE <style> BLOCK #3 ===== */
/* 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; }