test2
https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css/* =========================================
1. VARIABLES & RESET
========================================= */
:root {
/* Brand Palette */
--accent: #B08D57;
/* Base Bronze */
--accent-light: #d6b88b;
/* Lighter Gold/Bronze */
--accent-dark: #8a6c3e;
/* Darker Bronze */
--accent-bg: rgba(176, 141, 87, 0.08);
/* Neutrals */
--bg: #FAFAFA;
/* Slightly off-white for premium feel */
--surface: #ffffff;
--text-main: #1a1a1a;
--text-muted: #666666;
--border: rgba(0, 0, 0, 0.06);
/* UI Elements */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.03);
--shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 15px 35px rgba(176, 141, 87, 0.15);
/* Typography */
--font-heading: 'Playfair Display', serif;
--font-body: 'Manrope', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--bg);
color: var(--text-main);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
padding-top: 80px;
/* Navbar height compensation */
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: 700;
color: #000;
letter-spacing: -0.02em;
}
a {
text-decoration: none;
transition: all 0.3s ease;
}
p {
margin-bottom: 1.2rem;
}
/* Utilities */
.text-accent {
color: var(--accent) !important;
}
.bg-surface {
background: var(--surface);
}
.fw-medium {
font-weight: 500;
}
.fw-semibold {
font-weight: 600;
}
/* =========================================
2. COMPONENTS
========================================= */
/* Buttons */
.btn {
padding: 0.75rem 1.75rem;
border-radius: 50rem;
/* Pill shape */
font-weight: 600;
letter-spacing: 0.02em;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
font-family: var(--font-body);
}
.btn-accent {
background: var(--accent);
border: 1px solid var(--accent);
color: #fff;
box-shadow: 0 4px 15px rgba(176, 141, 87, 0.3);
}
.btn-accent:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(176, 141, 87, 0.4);
color: #fff;
}
.btn-outline-dark {
border: 1px solid rgba(0, 0, 0, 0.15);
background: transparent;
color: var(--text-main);
}
.btn-outline-dark:hover {
background: #000;
border-color: #000;
color: #fff;
transform: translateY(-2px);
}
/* Eyebrow Label */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.1em;
color: var(--accent);
background: rgba(176, 141, 87, 0.1);
padding: 0.5rem 1rem;
border-radius: 100px;
margin-bottom: 1rem;
}
/* Section Headers */
.section-title {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.section-subtitle {
color: var(--text-muted);
font-size: 1.125rem;
max-width: 700px;
margin-inline: auto;
font-weight: 300;
}
.section {
padding: 100px 0;
position: relative;
}
/* Cards */
.card-soft {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
height: 100%;
z-index: 1;
}
.card-soft:hover {
transform: translateY(-5px);
border-color: rgba(176, 141, 87, 0.3);
box-shadow: var(--shadow-hover);
}
/* Icons inside cards */
.icon-box {
width: 56px;
height: 56px;
border-radius: 50%;
/* Circle */
background: var(--accent-bg);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
.card-soft:hover .icon-box {
background: var(--accent);
color: #fff;
transform: scale(1.1);
}
/* =========================================
3. NAVBAR
========================================= */
.navbar {
background: rgba(255, 255, 255, 0.85);
/* Proper glass effect */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 1rem 0;
transition: all 0.3s ease;
}
.navbar-brand {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.01em;
color: #000;
}
.nav-link {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--text-main) !important;
position: relative;
margin: 0 0.5rem;
padding: 0.5rem 0;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background: var(--accent);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
/* =========================================
4. HERO SECTION
========================================= */
#inicio .hero-wrap {
background: #fff;
border-radius: var(--radius-lg);
padding: 0;
overflow: hidden;
box-shadow: var(--shadow-md);
position: relative;
}
/* Decorative faint gradients */
#inicio .hero-wrap::before {
content: '';
position: absolute;
top: -50%;
left: -20%;
width: 80%;
height: 200%;
background: radial-gradient(circle, rgba(176, 141, 87, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
z-index: 0;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
padding: 3rem;
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.1;
margin-bottom: 1.5rem;
}
.hero-sub {
font-size: 1.2rem;
color: var(--text-muted);
margin-bottom: 2rem;
font-weight: 400;
}
.hero-image-col {
padding: 0;
height: 100%;
min-height: 400px;
position: relative;
}
.hero-img-full {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.5s ease;
}
#inicio:hover .hero-img-full {
transform: scale(1.03);
}
/* =========================================
5. COMPONENT SECTIONS
========================================= */
/* Services / Generic Cards */
.feature-title {
font-family: var(--font-heading);
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
/* Accordion Customization */
.accordion-item {
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 1rem;
background: #fff;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.accordion-button {
font-f
/* ...cortado... */
/* Ajuste del iframe para que se vea bien en mobile */
@media (max-width: 575.98px){
.tienda-embed iframe{ height: 720px; }
}
/* Lightbox customizations */
.gal-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s;
z-index: 10;
}
.gal-lightbox-nav:hover {
background: rgba(255, 255, 255, 0.3);
}
.gal-prev {
left: 10px;
}
.gal-next {
right: 10px;
}
:root{
--wa-accent: #B08D57; /* bronce (PEPA JOYA) */
--wa-border: rgba(0,0,0,.12);
--wa-bg: #ffffff;
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
/* Botón flotante (verde oficial) */
.wa-btn{
width:60px;
height:60px;
border-radius:50%;
border:none;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 10px 30px rgba(37,211,102,.45);
transition:transform .3s, box-shadow .3s;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(37,211,102,.55);
}
/* Ventana */
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:var(--wa-bg);
border-radius:18px;
border:1px solid var(--wa-border);
box-shadow:0 18px 60px rgba(0,0,0,.25);
overflow:hidden;
transform:translateY(10px);
opacity:0;
transition:.3s;
}
.wa-card[aria-modal="true"]{ transform:none; opacity:1; }
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
/* header con bronce */
background:linear-gradient(135deg, var(--wa-accent), color-mix(in srgb, var(--wa-accent) 78%, #000 22%));
color:#fff;
}
.wa-avatar{
width:40px;
height:40px;
background:#fff;
border-radius:10px;
display:grid;
place-items:center;
overflow:hidden;
border:1px solid rgba(255,255,255,.35);
}
.wa-title{ font-weight:800; letter-spacing:.2px; }
.wa-status{ font-size:.85rem; opacity:.95; }
.wa-close{
margin-left:auto;
border:none;
background:transparent;
color:#fff;
font-size:24px;
cursor:pointer;
line-height:1;
}
.wa-body{
padding:14px;
max-height:40vh;
overflow:auto;
background:#f8f9fa;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
font-size:.95rem;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.wa-bot{
background:#ffffff;
border:1px solid var(--wa-border);
align-self:flex-start;
}
.wa-user{
background: rgba(176,141,87,.10);
border:1px solid rgba(176,141,87,.25);
align-self:flex-end;
}
/* Composer */
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid var(--wa-border);
background:#ffffff;
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid var(--wa-border);
font-family:inherit;
}
.wa-send{
background: var(--wa-accent);
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
}
.wa-send:hover{
background: color-mix(in srgb, var(--wa-accent) 82%, #000 18%);
}
@media(max-width:480px){
.wa-card{ width:calc(100vw - 24px); }
}
newlifecentermetodoravenna.com.ar
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@600;700;800&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css*{margin:0;padding:0;box-sizing:border-box}
:root{
--primary:#2E8B57;
--primary-dark:#1E6B47;
--primary-light:#E8F5E9;
--accent:#FF6B6B;
--bg:#ffffff;
--bg-soft:#f6faf7;
--dark:#141414;
--muted:#6b7280;
--line:rgba(0,0,0,.08);
--shadow:0 10px 30px rgba(0,0,0,.07);
--shadow2:0 18px 50px rgba(0,0,0,.10);
--radius:16px;
--transition:all .25s ease;
}
html{scroll-behavior:smooth}
body{
font-family:'Inter',sans-serif;
line-height:1.65;
color:var(--muted);
background:var(--bg);
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit;transition:var(--transition)}
h1,h2,h3,h4{
font-family:'Poppins',sans-serif;
color:var(--dark);
line-height:1.15;
}
/* Layout */
.container{
width:100%;
max-width:1160px;
margin:0 auto;
padding:0 20px;
}
.section{padding:96px 0}
.section.soft{background:var(--bg-soft)}
.section-header{
text-align:center;
margin-bottom:44px;
}
.badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 16px;
border-radius:999px;
font-weight:700;
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--primary-dark);
background:rgba(46,139,87,.10);
border:1px solid rgba(46,139,87,.14);
margin-bottom:14px;
}
.title{
font-size:clamp(28px,3.2vw,44px);
margin-bottom:12px;
}
.subtitle{
max-width:820px;
margin:0 auto;
font-size:1.05rem;
color:var(--muted);
}
/* Navbar */
.navbar{
position:fixed;top:0;left:0;width:100%;
z-index:1000;
background:rgba(255,255,255,.86);
backdrop-filter: blur(12px);
border-bottom:1px solid var(--line);
}
.nav-inner{
height:74px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.logo{
display:flex;align-items:center;gap:10px;
font-weight:900;
font-size:20px;
color:var(--primary);
white-space:nowrap;
}
.logo span{color:var(--accent)}
.nav-links{
display:flex;
align-items:center;
gap:26px;
}
.nav-link{
font-weight:600;
color:var(--dark);
opacity:.85;
position:relative;
padding:6px 0;
}
.nav-link:hover{opacity:1;color:var(--primary)}
.nav-link.active{color:var(--primary);opacity:1}
.nav-link.active::after{
content:'';
position:absolute;
left:0;bottom:-10px;
width:100%;height:2px;
background:var(--primary);
border-radius:2px;
}
.nav-cta{
display:inline-flex;align-items:center;gap:10px;
background:var(--primary);
color:#fff !important;
padding:12px 18px;
border-radius:999px;
font-weight:800;
box-shadow:0 10px 18px rgba(46,139,87,.18);
}
.nav-cta:hover{background:var(--primary-dark);transform:translateY(-1px)}
.mobile-toggle{
display:none;
width:44px;height:44px;
border-radius:12px;
border:1px solid var(--line);
background:#fff;
cursor:pointer;
color:var(--primary);
font-size:22px;
}
/* Hero */
.hero{
padding-top:118px; /* navbar offset + aire */
padding-bottom:88px;
background:radial-gradient(900px 500px at 20% 20%, rgba(46,139,87,.14) 0%, rgba(46,139,87,0) 55%),
radial-gradient(900px 500px at 90% 10%, rgba(255,107,107,.12) 0%, rgba(255,107,107,0) 55%),
linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
border-bottom:1px solid var(--line);
}
.hero-grid{
display:grid;
grid-template-columns: 1.08fr .92fr;
gap:46px;
align-items:center;
}
.hero h1{
font-size:clamp(34px,4vw,54px);
margin-bottom:14px;
letter-spacing:-.02em;
}
.hero h1 .hl{
color:var(--primary);
position:relative;
}
.hero h1 .hl::after{
content:'';
position:absolute;
left:0;bottom:6px;
width:100%;height:10px;
background:rgba(46,139,87,.18);
z-index:-1;
border-radius:10px;
}
.hero p{
font-size:1.1rem;
color:var(--muted);
margin-bottom:22px;
max-width:58ch;
}
.hero-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:14px;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px 20px;
border-radius:999px;
font-weight:800;
border:1px solid transparent;
cursor:pointer;
transition:var(--transition);
user-select:none;
white-space:nowrap;
}
.btn.primary{
background:var(--primary);
color:#fff;
box-shadow:0 12px 24px rgba(46,139,87,.20);
}
.btn.primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn.ghost{
background:#fff;
border-color:var(--line);
color:var(--dark);
}
.btn.ghost:hover{border-color:rgba(46,139,87,.35);color:var(--primary);transform:translateY(-1px)}
.hero-card{
background:#fff;
border:1px solid var(--line);
border-radius:24px;
box-shadow:var(--shadow2);
padding:18px;
}
.hero-card .imgwrap{
border-radius:18px;
border:1px solid var(--line);
background:#fff;
overflow:hidden;
padding:10px;
display:flex;align-items:center;justify-content:center;
min-height: 320px;
}
.hero-card img{
max-height:360px;
width:auto;
object-fit:contain;
}
/* “Prose” (lectura linda) */
.prose{
color:var(--muted);
font-size:1.06rem;
max-width: 75ch;
}
.prose p{margin:0 0 14px}
.prose strong{color:var(--dark)}
.prose ul{margin:10px 0 18px 18px}
.prose li{margin:6px 0}
/* Cards / Panels */
.panel{
background:#fff;
border:1px solid var(--line);
border-radius:24px;
box-shadow:var(--shadow);
padding:34px;
}
.split{
display:grid;
grid-template-columns: 1.15fr .85fr;
gap:26px;
align-items:start;
}
.info-box{
border:1px solid rgba(46,139,87,.22);
background:rgba(46,139,87,.06);
border-radius:18px;
padding:18px;
color:var(--dark);
}
.info-box h4{font-size:1.05rem;margin-bottom:10px}
.info-item{
display:flex;gap:10px;align-items:flex-start;
padding:10px 0;border-top:1px solid rgba(0,0,0,.07);
}
.info-item:first-of-type{border-top:0;padding-top:0}
.info-item i{color:var(--primary);margin-top:2px}
.info-item a{color:var(--primary-dark);font-weight:800}
.quote{
margin-top:16px;
padding:14px 16px;
border-left:6px solid var(--primary);
background:var(--primary-light);
border-radius:14px;
color:var(--primary-dark);
font-style:italic;
}
/* About */
.about-grid{
display:grid;
grid-template-columns: 1fr 420px;
gap:34px;
align-items:center;
}
.about-img{
border-radius:24px;
border:1px solid var(--line);
background:#fff;
padding:10px;
box-shadow:var(--shadow);
}
.about-img img{
width:100%;
aspect-ratio: 4 / 5;
object-fit:contain;
border-radius:18px;
}
/* Servicios */
.services-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
g
/* ...cortado... */
/* ===== Scope: obesity-* (no pisa el resto) ===== */
.obesity-section{
padding: 96px 0;
background: radial-gradient(900px 420px at 15% 20%, rgba(46,139,87,.10) 0%, rgba(46,139,87,0) 55%),
radial-gradient(860px 420px at 95% 0%, rgba(255,107,107,.08) 0%, rgba(255,107,107,0) 55%),
linear-gradient(180deg, #f6faf7 0%, #ffffff 100%);
border-top: 1px solid rgba(0,0,0,.06);
border-bottom: 1px solid rgba(0,0,0,.06);
}
.obesity-wrap{
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.obesity-head{
text-align:center;
margin-bottom: 28px;
}
.obesity-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(46,139,87,.10);
border: 1px solid rgba(46,139,87,.16);
color: #1E6B47;
font-weight: 800;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 12px;
}
.obesity-title{
font-family: 'Poppins', sans-serif;
font-weight: 800;
color: #141414;
line-height: 1.1;
font-size: clamp(28px, 3.1vw, 44px);
margin-bottom: 10px;
}
.obesity-subtitle{
color: #6b7280;
max-width: 820px;
margin: 0 auto;
font-size: 1.05rem;
line-height: 1.65;
}
.obesity-grid{
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 18px;
align-items: start;
margin-top: 22px;
}
.obesity-card{
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 24px;
box-shadow: 0 16px 44px rgba(0,0,0,.08);
overflow: hidden;
}
.obesity-card-inner{
padding: 28px;
}
.obesity-kicker{
display:flex;
align-items:center;
gap:10px;
color: #1E6B47;
font-weight: 900;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 12px;
}
.obesity-kicker i{font-size: 16px}
.obesity-prose{
color: #6b7280;
font-size: 1.06rem;
line-height: 1.75;
max-width: 75ch;
}
.obesity-prose p{margin: 0 0 14px}
.obesity-prose strong{color: #141414}
/* Chips de factores (en vez de lista fea) */
.obesity-chips{
display:flex;
flex-wrap: wrap;
gap: 10px;
margin: 14px 0 18px;
padding: 0;
list-style: none;
}
.obesity-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.02);
color: #141414;
font-weight: 700;
font-size: .95rem;
}
.obesity-chip i{
color: #2E8B57;
font-size: 16px;
}
/* Bloque destacado */
.obesity-highlight{
margin-top: 14px;
border-radius: 18px;
background: rgba(46,139,87,.08);
border: 1px solid rgba(46,139,87,.18);
padding: 16px 16px;
color: #1E6B47;
}
.obesity-highlight p{margin: 0; font-weight: 700}
.obesity-highlight span{color:#141414;font-weight:800}
/* Aside datos */
.obesity-aside{
position: sticky;
top: 92px; /* deja aire bajo navbar */
}
.obesity-aside-head{
padding: 22px 22px 0;
}
.obesity-aside-title{
font-family:'Poppins',sans-serif;
color:#141414;
font-weight:800;
font-size: 1.15rem;
display:flex;
align-items:center;
gap:10px;
margin-bottom: 6px;
}
.obesity-aside-sub{
color:#6b7280;
font-size: .98rem;
margin-bottom: 14px;
}
.obesity-list{
padding: 0 22px 22px;
}
.obesity-item{
display:flex;
gap: 12px;
align-items:flex-start;
padding: 14px 0;
border-top: 1px solid rgba(0,0,0,.08);
}
.obesity-item:first-child{border-top:0}
.obesity-ico{
width: 38px;
height: 38px;
border-radius: 14px;
background: rgba(46,139,87,.10);
border: 1px solid rgba(46,139,87,.18);
display:flex;
align-items:center;
justify-content:center;
color:#2E8B57;
flex: 0 0 auto;
}
.obesity-item strong{color:#141414}
.obesity-item a{
color:#1E6B47;
font-weight: 900;
text-decoration: none;
border-bottom: 1px dashed rgba(46,139,87,.45);
}
.obesity-item a:hover{border-bottom-style: solid}
.obesity-actions{
display:flex;
gap: 10px;
flex-wrap: wrap;
padding: 0 22px 22px;
margin-top: -8px;
}
.obesity-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding: 12px 14px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.10);
background: #fff;
color:#141414;
font-weight: 900;
cursor:pointer;
transition: .2s ease;
text-decoration:none;
flex: 1 1 auto;
}
.obesity-btn.primary{
background:#2E8B57;
border-color:#2E8B57;
color:#fff;
}
.obesity-btn:hover{transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,.10)}
.obesity-btn.primary:hover{background:#1E6B47;border-color:#1E6B47}
/* Responsive */
@media (max-width: 992px){
.obesity-grid{grid-template-columns: 1fr; gap: 14px;}
.obesity-aside{position: static;}
}
@media (max-width: 576px){
.obesity-card-inner{padding: 20px;}
.obesity-actions{padding: 0 16px 16px;}
.obesity-aside-head{padding: 18px 18px 0;}
.obesity-list{padding: 0 18px 18px;}
}
:root{
/* Si tu sitio ya define --primary/--primary-dark, usa esos */
--brand: var(--primary, #2E8B57);
--brand-dark: var(--primary-dark, #1E6B47);
--light-bg:#ffffff;
--light-bg-soft:#f6f8f7;
--light-border:#dde4df;
--dark-text:#141414;
--muted-text:#6b7280;
}
/* IG buttons (2) */
.ig-float{
position:fixed; right:18px;
z-index:9998;
width:54px; height:54px; border-radius:50%;
display:grid; place-items:center; color:#fff; text-decoration:none;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
box-shadow:0 10px 30px rgba(0,0,0,.25);
transition:transform .25s, box-shadow .25s;
}
.ig-float:hover{
transform:translateY(-2px) scale(1.04);
box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.ig-float--top{bottom:156px;}
.ig-float--mid{bottom:92px;}
/* WhatsApp flotante */
.wa-float{
position:fixed; right:18px; bottom:18px;
z-index:9999; font-family:inherit;
}
.wa-btn{
background:#ffffff;
color:var(--brand);
border:2px solid var(--brand);
width:60px; height:60px; border-radius:50%;
display:grid; place-items:center;
box-shadow:0 8px 24px rgba(0,0,0,.18);
cursor:pointer;
transition:transform .3s, box-shadow .3s, background .3s, color .3s, border-color .3s;
position:relative; overflow:hidden;
z-index:9999;
}
.wa-btn svg{color:var(--brand)}
.wa-btn:hover{
background:var(--brand);
border-color:var(--brand-dark);
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(0,0,0,.28);
}
.wa-btn:hover svg{color:#fff}
.wa-card{
position:absolute; right:0; bottom:74px;
width:min(360px,92vw);
background:var(--light-bg);
color:var(--dark-text);
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.25);
border:1px solid var(--light-border);
transform:translateY(10px);
opacity:0;
transition:transform .3s, opacity .3s;
z-index:10000;
}
.wa-card[aria-modal="true"]{transform:translateY(0);opacity:1}
.wa-head{
display:flex; align-items:center; gap:12px;
padding:14px 16px;
background:linear-gradient(135deg, #ffffff, rgba(46,139,87,.10));
border-bottom:1px solid var(--light-border);
}
.wa-avatar{
width:40px; height:40px; border-radius:10px;
background:rgba(46,139,87,.10);
display:grid; place-items:center;
border:1px solid rgba(46,139,87,.18);
overflow:hidden;
}
.wa-title{font-weight:900;font-size:1.02rem;color:var(--dark-text)}
.wa-status{
font-size:.85rem;color:var(--muted-text);
display:flex;align-items:center;gap:6px;
}
.wa-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}
.wa-close{
margin-left:auto;background:transparent;color:var(--muted-text);
border:0;font-size:24px;cursor:pointer;opacity:.75;
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
transition:.2s;
}
.wa-close:hover{opacity:1;background:rgba(0,0,0,.04)}
.wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
background:var(--light-bg-soft);
display:flex;flex-direction:column;gap:8px;
}
.wa-bubble{
max-width:88%;
padding:9px 11px;
border-radius:14px;
line-height:1.35;
box-shadow:0 3px 10px rgba(0,0,0,.06);
font-size:.92rem;
animation:waFade .25s ease;
}
@keyframes waFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.wa-bot{
background:#fff;border:1px solid var(--light-border);
align-self:flex-start;border-bottom-left-radius:4px;
}
.wa-user{
background:var(--brand);color:#fff;
align-self:flex-end;border-bottom-right-radius:4px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px 12px;
background:#fff;
border-top:1px solid var(--light-border);
}
.wa-compose textarea{
resize:none;border-radius:12px;
padding:10px 12px;
border:1px solid var(--light-border);
background:#f9fbfa;color:var(--dark-text);
outline:none;min-height:44px;
font-family:inherit;font-size:.92rem;
transition:.2s;
}
.wa-compose textarea:focus{
border-color:var(--brand);
box-shadow:0 0 0 2px rgba(46,139,87,.15);
background:#fff;
}
.wa-send{
background:var(--brand);color:#fff;border:0;border-radius:12px;
padding:0 16px;font-weight:800;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:.2s;
}
.wa-send:hover{background:var(--brand-dark);transform:scale(1.04)}
.wa-body::-webkit-scrollbar{width:6px}
.wa-body::-webkit-scrollbar-track{background:rgba(0,0,0,.03);border-radius:3px}
.wa-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:3px}
.wa-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.18)}
@media (max-width:480px){
.ig-float{ right:12px; width:52px; height:52px; }
.ig-float--top{ bottom:146px; }
.ig-float--mid{ bottom:86px; }
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width:calc(100vw - 24px); right:0; }
}
netfan_eventos
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swaphttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css/* ====== HOME CATEGORIES SLIDERS (nerd/pro) ====== */
.catwall { position: relative; }
.catblock {
border: 1px solid var(--line);
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
position: relative;
}
.catblock::before{
content:"";
position:absolute;
inset:0;
background: radial-gradient(circle at 15% 20%, rgba(33,150,243,.08), transparent 55%),
radial-gradient(circle at 85% 80%, rgba(33,150,243,.06), transparent 55%);
pointer-events:none;
opacity:.9;
}
.cathead{
position: relative;
z-index: 2;
padding: 22px 22px 10px;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
border-bottom: 1px solid var(--line-subtle);
background: linear-gradient(180deg, rgba(33,150,243,.06), transparent);
}
.catname{
font-weight: 900;
letter-spacing: -0.03em;
margin: 0;
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}
.cattag{
display:inline-flex;
align-items:center;
gap:8px;
padding:.4rem .9rem;
border-radius: 999px;
border: 1px solid rgba(33,150,243,.2);
background: rgba(33,150,243,.06);
color: var(--accent);
font-weight: 800;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .12em;
}
.catmeta{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
color: var(--muted);
font-weight: 600;
font-size: .95rem;
}
.catcontrols{
display:flex;
align-items:center;
gap:10px;
}
.catbtn{
width: 46px;
height: 46px;
border-radius: 16px;
border: 1px solid var(--line);
background: rgba(255,255,255,.9);
box-shadow: var(--shadow-sm);
display:flex;
align-items:center;
justify-content:center;
transition: var(--transition-smooth);
color: var(--text);
}
.catbtn:hover{
transform: translateY(-2px);
border-color: rgba(33,150,243,.25);
box-shadow: var(--shadow-md);
background: rgba(33,150,243,.08);
color: var(--accent);
}
.catscroller{
position: relative;
z-index: 2;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 1fr);
gap: 14px;
padding: 18px 18px 22px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: 18px;
-webkit-overflow-scrolling: touch;
}
.catscroller::-webkit-scrollbar { height: 10px; }
.catscroller::-webkit-scrollbar-thumb {
background: rgba(33,150,243,.22);
border-radius: 999px;
}
.catscroller::-webkit-scrollbar-track { background: rgba(0,0,0,.04); border-radius:999px; }
.svc{
scroll-snap-align: start;
border-radius: 22px;
border: 1px solid var(--line);
background: #fff;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition-smooth);
position: relative;
}
.svc:hover{
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
border-color: rgba(33,150,243,.25);
}
.svc .cover{
height: 170px;
background: #fff;
position: relative;
overflow: hidden;
}
.svc .cover img{
width:100%;
height:100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.svc:hover .cover img{ transform: scale(1.05); }
.svc .cover::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 100%);
}
.svc .badgeTop{
position:absolute;
top: 12px;
left: 12px;
z-index: 3;
padding: .35rem .7rem;
border-radius: 999px;
font-weight: 900;
font-size: .78rem;
color: #fff;
background: rgba(0,0,0,.45);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(8px);
}
.svc .body{
padding: 14px 14px 16px;
}
.svc .title{
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 6px;
font-size: 1.02rem;
}
.svc .loc{
color: rgba(15,23,42,.72);
font-weight: 700;
font-size: .92rem;
display:flex;
align-items:center;
gap:8px;
margin-bottom: 10px;
}
.svc .desc{
color: var(--muted);
font-size: .95rem;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 4.6em;
}
.svc .actions{
display:flex;
gap:10px;
margin-top: 12px;
}
.svc .actions .btn{
padding: .65rem .95rem;
border-radius: 14px;
font-size: .92rem;
}
.svc .actions .btn-outline-accent{ border-width: 2px; }
@media (max-width: 768px){
.catscroller{ grid-auto-columns: minmax(240px, 1fr); }
.catbtn{ width: 42px; height: 42px; border-radius: 14px; }
}
:root {
--accent: #2196f3;
--accent-light: #42a5f5;
--accent-dark: #1976d2;
--accent-glow: rgba(33, 150, 243, 0.15);
--text: #0b0f19;
--text-medium: #1e293b;
--muted: #5b6476;
--muted-light: #64748b;
--line: #e9eef6;
--line-subtle: #f1f5f9;
--bg: #ffffff;
--soft: #f6f9ff;
--soft-blue: #f0f7ff;
--radius: 20px;
--radius-sm: 14px;
--radius-lg: 28px;
--radius-xl: 36px;
--shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.04);
--shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
--shadow-xl: 0 30px 70px rgba(15, 23, 42, 0.16);
--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
--gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
--gradient-subtle: linear-gradient(135deg, rgba(33, 150, 243, 0.08) 0%, rgba(66, 165, 245, 0.04) 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
body {
background: var(--bg);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
font-size: 16px;
line-height: 1.7;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 90% 10%, rgba(33, 150, 243, 0.03) 0%, transparent 50%),
radial-gradient(circle at 10% 90%, rgba(33, 150, 243, 0.02) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition-base);
}
/* ========== NAVBAR PREMIUM ========== */
.navbar {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(233, 238, 246, 0.8);
box-shadow: var(--shadow-sm);
transition: var(--transition-smooth);
padding-top: 1rem;
padding-bottom: 1rem;
}
.navbar.scrolled {
padding-top: 0.7rem;
padding-bottom: 0.7rem;
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.98);
}
.navbar-brand {
font-weight: 800;
font-size: 1.3rem;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 0.75rem;
}
.brand-logo {
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--gradient-accent);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.2rem;
box-shadow: 0 8px 20px rgba(33, 150, 243, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
overflo
/* ...cortado... */
ritmologia.com.ar
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;700;800&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.csscss/style.css:root {
/* PALETA DE COLORES */
--color-bg: #ffffff;
--color-text: #1d1d1d;
--color-text-muted: #4b5563;
/* ACENTOS */
--color-primary: #0f2751;
--color-accent-1: #f69e54;
--color-accent-2: #e05140;
/* UI */
--color-light-gray: #f8f9fa;
--color-border: #e5e7eb;
/* TIPOGRAFÍA */
--font-heading: 'Outfit', sans-serif;
--font-body: 'Inter', sans-serif;
/* ESPACIADO */
--section-padding: 100px 0;
--radius-md: 12px;
--radius-lg: 20px;
}
html { scroll-padding-top: 90px; }
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
color: var(--color-primary);
}
p {
line-height: 1.7;
color: var(--color-text-muted);
margin-bottom: 1.5rem;
}
.text-accent-1 { color: var(--color-accent-1); }
.text-accent-2 { color: var(--color-accent-2); }
.text-primary-custom { color: var(--color-primary); }
/* BOTONES */
.btn-primary-custom {
background: linear-gradient(135deg, var(--color-primary) 0%, #1a3c75 100%);
color: #fff;
border: none;
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(15, 39, 81, 0.2);
}
.btn-primary-custom:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(15, 39, 81, 0.3);
color: #fff;
}
.btn-outline-custom {
border: 2px solid var(--color-accent-1);
color: var(--color-primary);
padding: 10px 28px;
border-radius: 50px;
font-weight: 600;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.btn-outline-custom:hover {
background: var(--color-accent-1);
color: #fff;
}
/* SECTION UTILS */
.section { padding: var(--section-padding); }
.bg-light-alt { background-color: var(--color-light-gray); }
.eyebrow {
font-family: var(--font-heading);
text-transform: uppercase;
color: var(--color-accent-2);
font-weight: 700;
letter-spacing: 3px;
font-size: 0.85rem;
display: block;
margin-bottom: 15px;
}
.section-title { font-size: 2.5rem; margin-bottom: 20px; }
.section-subtitle { font-size: 1.1rem; max-width: 720px; margin: 0 auto 50px; }
/* NAVBAR */
.navbar-custom {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 15px 0;
box-shadow: 0 2px 20px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.navbar-brand {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.5rem;
color: var(--color-primary);
}
.brand-dot { color: var(--color-accent-2); }
.nav-link {
font-weight: 500;
color: var(--color-text) !important;
margin: 0 10px;
position: relative;
transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active { color: var(--color-accent-2) !important; }
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 5px;
left: 0;
background-color: var(--color-accent-1);
transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }
/* HERO */
.hero {
position: relative;
padding: 140px 0 100px;
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: center;
}
.hero-bg-shape {
position: absolute;
top: -20%;
right: -10%;
width: 50%;
height: 120%;
background: linear-gradient(135deg, rgba(246, 158, 84, 0.1) 0%, rgba(224, 81, 64, 0.05) 100%);
border-radius: 0 0 0 200px;
z-index: 0;
}
.hero-content { position: relative; z-index: 2; }
.hero-title { font-size: 3.5rem; margin-bottom: 22px; color: var(--color-primary); }
.hero-title span { position: relative; display: inline-block; }
.hero-title span::after {
content: '';
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
height: 15px;
background: var(--color-accent-1);
opacity: 0.3;
z-index: -1;
border-radius: 4px;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0 0;
}
.hero-badge {
border: 1px solid var(--color-border);
background: #fff;
border-radius: 999px;
padding: 8px 12px;
font-size: .92rem;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.hero-badge i { color: var(--color-accent-2); }
.hero-img-container {
position: relative;
z-index: 2;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: none !important;
border: 4px solid #fff;
}
.hero-img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.hero-img:hover { transform: scale(1.03); }
/* ABOUT / PERFIL */
.about-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
height: 100%;
}
.about-quick {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 16px;
}
.about-pill {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
border-radius: 14px;
background: rgba(246, 158, 84, 0.10);
border: 1px solid rgba(246, 158, 84, 0.25);
}
.about-pill i {
font-size: 1.15rem;
color: var(--color-accent-2);
margin-top: 2px;
}
/* PILLARS */
.pillar-card {
background: #fff;
padding: 30px;
border-radius: var(--radius-md);
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
height: 100%;
border-top: 4px solid var(--color-accent-1);
transition: all 0.3s ease;
}
.pillar-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
border-color: var(--color-accent-2);
}
.pillar-icon { font-size: 2rem; color: var(--color-primary); margin-bottom: 20px; }
.pillar-title { font-size: 1.25rem; margin-bottom: 15px; }
/* SERVICES (MODALIDADES) */
.service-card {
position: relative;
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
border-color: var(--color-accent-1);
}
.service-header {
background: var(--color-primary);
padding: 25px;
color: #fff;
text-align: center;
}
.service-header i {
font-size: 2.5rem;
color: var(--color-accent-1);
margin-bottom: 10px;
display: block;
}
.service-body { padding: 28px; flex: 1; }
.service-title { color: #fff; margin: 0; font-size: 1.3rem; }
/* SERVICIOS EXTRA */
.mini-service {
background: #fff;
border: 1px solid var(--color
/* ...cortado... */
:root{
/* Cambiá este color y se actualiza TODO el acento */
--accent:#f69e54;
--ink:#0f2751; /* texto fuerte */
--text:#121212; /* texto normal */
--muted:#5f6674; /* texto secundario */
--bg:#ffffff; /* fondo section */
--soft:#f6f7fb; /* fondo suave */
--border:#e7e9f2; /* borde */
--shadow: 0 18px 60px rgba(15,39,81,.12);
}
.rl-reviews{
background:var(--bg);
padding:80px 0;
}
.rl-wrap{
width:min(1120px, 92vw);
margin:0 auto;
}
.rl-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
margin-bottom:22px;
border:1px solid var(--border);
background:linear-gradient(135deg, #ffffff 0%, #fff7ef 55%, #ffffff 100%);
border-radius:18px;
padding:18px 18px 16px;
box-shadow:0 10px 35px rgba(0,0,0,.05);
position:relative;
overflow:hidden;
}
/* franjita superior (acento) */
.rl-head::before{
content:"";
position:absolute;
left:0; top:0;
width:100%; height:6px;
background:linear-gradient(90deg, var(--accent), #e05140);
}
.rl-kicker{
margin:0 0 6px 0;
color:var(--muted);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
font-size:.78rem;
}
.rl-title{
margin:0;
font-size:clamp(1.35rem, 2.2vw, 1.85rem);
line-height:1.15;
color:var(--ink);
font-weight:900;
}
.rl-title span{
color:var(--accent);
}
.rl-sub{
margin:8px 0 0 0;
color:var(--muted);
font-size:1rem;
}
.rl-btn{
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
background:var(--ink);
color:#fff;
font-weight:800;
padding:12px 14px;
border-radius:12px;
border:1px solid rgba(15,39,81,.12);
box-shadow:0 12px 30px rgba(15,39,81,.18);
transition:transform .2s, box-shadow .2s, background .2s;
white-space:nowrap;
}
.rl-btn:hover{
transform:translateY(-2px);
box-shadow:0 18px 40px rgba(15,39,81,.24);
background:#0b1d3c;
}
.rl-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
margin-top:14px;
}
.rl-card{
display:flex;
flex-direction:column;
gap:12px;
text-decoration:none;
background:#fff;
border:1px solid var(--border);
border-radius:18px;
padding:16px 16px 14px;
box-shadow:0 10px 35px rgba(0,0,0,.05);
transition:transform .2s, box-shadow .2s, border-color .2s;
position:relative;
overflow:hidden;
color:inherit;
}
/* borde/acento al hover */
.rl-card::after{
content:"";
position:absolute;
inset:0;
border:2px solid transparent;
border-radius:18px;
pointer-events:none;
transition:border-color .2s;
}
.rl-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow);
border-color:rgba(246,158,84,.35);
}
.rl-card:hover::after{
border-color:rgba(246,158,84,.35);
}
.rl-top{
display:flex;
align-items:center;
gap:12px;
}
.rl-avatar{
width:44px; height:44px;
border-radius:14px;
background:linear-gradient(135deg, rgba(246,158,84,.22), rgba(224,81,64,.18));
border:1px solid rgba(246,158,84,.35);
display:grid;
place-items:center;
font-weight:900;
color:var(--ink);
flex:0 0 auto;
}
.rl-meta{ display:flex; flex-direction:column; gap:4px; }
.rl-name{
font-weight:900;
color:var(--ink);
line-height:1.1;
}
.rl-stars{
display:flex;
align-items:center;
gap:10px;
}
.rl-starsTxt{
color:#f6b100;
letter-spacing:1px;
font-size:.95rem;
}
.rl-badge{
font-size:.78rem;
font-weight:800;
color:var(--muted);
background:var(--soft);
border:1px solid var(--border);
padding:5px 8px;
border-radius:999px;
}
.rl-text{
margin:0;
color:#1d2433;
line-height:1.55;
font-size:.98rem;
/* clamp de líneas para prolijidad */
display:-webkit-box;
-webkit-line-clamp:7;
-webkit-box-orient:vertical;
overflow:hidden;
}
.rl-foot{
margin-top:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding-top:10px;
border-top:1px solid var(--border);
color:var(--muted);
font-weight:800;
}
.rl-link{
color:var(--ink);
display:inline-flex;
align-items:center;
gap:8px;
}
.rl-arrow{
width:34px; height:34px;
border-radius:12px;
display:grid;
place-items:center;
background:linear-gradient(135deg, rgba(246,158,84,.18), rgba(224,81,64,.14));
border:1px solid rgba(246,158,84,.25);
color:var(--ink);
font-size:1.05rem;
}
/* Responsive */
@media (max-width: 980px){
.rl-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px){
.rl-reviews{ padding:64px 0; }
.rl-head{
flex-direction:column;
align-items:flex-start;
}
.rl-btn{ width:100%; justify-content:center; }
.rl-grid{ grid-template-columns:1fr; }
.rl-text{-webkit-line-clamp:10;}
}
.gal-gallery .carousel { max-width: 980px; margin-inline: auto; position: relative; }
.gal-frame {
height: clamp(220px, 48vh, 440px);
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.gal-img {
width: auto !important;
max-width: 100%;
height: auto !important;
max-height: 100%;
object-fit: contain !important;
object-position: center;
display: block;
cursor: zoom-in;
}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20;
width: 50px;
height: 50px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
background: rgba(0, 0, 0, .55);
border-radius: 50%;
margin: 0 12px;
}
.gal-gallery .carousel-control-prev { left: 0; }
.gal-gallery .carousel-control-next { right: 0; }
.gal-gallery .gal-ctrl-icon {
width: 2.6rem;
height: 2.6rem;
background-size: 60% 60%;
}
.gal-gallery .carousel-indicators { z-index: 10; bottom: -50px; }
.gal-gallery .carousel-indicators button {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, .5);
border: none;
}
.gal-gallery .carousel-indicators button.active { background: #000; }
.gal-gallery { padding-bottom: 56px; }
#galLightbox .modal-content { background: #000; }
#galLightboxImg {
max-height: 86vh;
width: 100%;
height: auto;
object-fit: contain;
background: #000;
}
.gal-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 0;
width: 44px;
height: 44px;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
color: #fff;
font-size: 30px;
line-height: 44px;
text-align: center;
z-index: 5;
cursor: pointer;
}
.gal-lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
.gal-lightbox-nav.gal-prev { left: 10px; }
.gal-lightbox-nav.gal-next { right: 10px; }
@media (max-width: 575.98px) {
.gal-frame { height: clamp(200px, 40vh, 360px); }
}
/* ========= RitmoLogía (usa variables del sitio) =========
Requiere que ya existan:
--color-primary, --color-accent-1, --color-accent-2, --color-border
*/
/* IG button (arriba del WA) */
.ig-float{
position:fixed; right:18px; bottom:92px;
z-index:9998;
width:54px; height:54px; border-radius:50%;
display:grid; place-items:center; color:#fff; text-decoration:none;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
box-shadow:0 10px 30px rgba(0,0,0,.20);
transition:transform .25s, box-shadow .25s;
}
.ig-float:hover{
transform:translateY(-2px) scale(1.04);
box-shadow:0 14px 36px rgba(0,0,0,.28);
}
.footer-logo {
height: 68px; /* tamaño normal */
width: auto;
}
/* Mantiene el tamaño original */
.footer-brand span {
font-size: inherit;
font-weight: inherit;
}
/* WhatsApp flotante */
.wa-float{
position:fixed; right:18px; bottom:18px;
z-index:9999; font-family:inherit;
}
/* Botón WA: oficial verde, pero con look claro y borde del sitio */
.wa-btn{
background:#ffffff;
color:#25D366; /* color WA */
border:2px solid var(--color-border, #e5e7eb);
width:60px; height:60px; border-radius:50%;
display:grid; place-items:center;
box-shadow:0 10px 28px rgba(0,0,0,.16);
cursor:pointer;
transition:transform .25s, box-shadow .25s, background .25s, border-color .25s;
position:relative;
overflow:hidden;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 16px 40px rgba(0,0,0,.22);
border-color:rgba(37,211,102,.35);
background:rgba(37,211,102,.08);
}
/* Card chat */
.wa-card{
position:absolute; right:0; bottom:74px;
width:min(360px,92vw);
background:#fff;
color:#111827;
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.22);
border:1px solid var(--color-border, #e5e7eb);
transform:translateY(10px);
opacity:0;
transition:transform .28s ease, opacity .28s ease;
}
.wa-card[aria-modal="true"]{
transform:translateY(0);
opacity:1;
}
/* Header con “franjita” del acento del sitio */
.wa-head{
display:flex; align-items:center; gap:12px;
padding:14px 16px;
background: linear-gradient(135deg,
rgba(246,158,84,.20),
rgba(224,81,64,.12)
);
border-bottom:1px solid var(--color-border, #e5e7eb);
position:relative;
}
.wa-head::before{
content:"";
position:absolute; left:0; top:0;
width:100%; height:4px;
background: linear-gradient(90deg, var(--color-accent-1, #f69e54), var(--color-accent-2, #e05140));
}
.wa-avatar{
width:42px; height:42px; border-radius:12px;
background:#fff;
display:grid; place-items:center;
border:1px solid rgba(15,39,81,.08);
overflow:hidden;
box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.wa-title{
font-weight:800;
font-size:1.02rem;
color:var(--color-primary, #0f2751);
line-height:1.1;
}
.wa-status{
font-size:.85rem;
color:rgba(17,24,39,.65);
display:flex; align-items:center; gap:6px;
margin-top:2px;
}
.wa-status::before{
content:""; width:8px; height:8px; border-radius:50%;
background:#25D366;
}
.wa-close{
margin-left:auto;
background:transparent;
color:rgba(17,24,39,.6);
border:0;
font-size:24px;
cursor:pointer;
opacity:.8;
width:34px; height:34px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
transition:.2s;
}
.wa-close:hover{
opacity:1;
background:rgba(0,0,0,.05);
}
.wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
background:#f8f9fa;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:9px 11px;
border-radius:14px;
line-height:1.35;
box-shadow:0 3px 10px rgba(0,0,0,.06);
font-size:0.92rem;
animation:waFade .22s ease;
}
@keyframes waFade{
from{opacity:0; transform:translateY(5px)}
to{opacity:1; transform:none}
}
.wa-bot{
background:#ffffff;
border:1px solid var(--color-border, #e5e7eb);
align-self:flex-start;
border-bottom-left-radius:4px;
}
.wa-user{
background: linear-gradient(135deg, var(--color-primary, #0f2751), #1a3c75);
color:#fff;
align-self:flex-end;
border-bottom-right-radius:4px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px 12px;
background:#fff;
border-top:1px solid var(--color-border, #e5e7eb);
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px 12px;
border:1px solid var(--color-border, #e5e7eb);
background:#fbfbfb;
color:#111827;
outline:none;
min-height:44px;
font-family:inherit;
font-size:0.92rem;
transition:.2s;
}
.wa-compose textarea:focus{
border-color:rgba(246,158,84,.75);
box-shadow:0 0 0 3px rgba(246,158,84,.18);
background:#fff;
}
.wa-send{
background:#25D366; /* WA oficial */
color:#fff;
border:0;
border-radius:12px;
padding:0 16px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}
.wa-send:hover{
background:#1ebd5a;
transform:scale(1.04);
}
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background:rgba(0,0,0,.03); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.14); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.20); }
@media (max-width:480px){
.ig-float{ right:12px; bottom:86px; width:52px; height:52px; }
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width:calc(100vw - 24px); right:0; }
}
.wa-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
take-away
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css:root{
--bg-void:#05060a;
--bg-glass: rgba(18,22,30,.88);
--bg-glass-hover: rgba(28,34,46,.72);
--accent-primary:#60a5fa;
--accent-secondary:#818cf8;
--accent-tertiary:#a78bfa;
--accent-gradient: linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);
--success:#22c55e;
--danger:#ef4444;
--warning:#f59e0b;
--text-main:#f8fafc;
--text-muted:#94a3b8;
--text-dim:#64748b;
--border-glass:1px solid rgba(255,255,255,.08);
--border-glass-hover:1px solid rgba(255,255,255,.15);
--glass-filter: blur(16px);
--radius-xl:24px;
--radius-lg:16px;
--radius-md:12px;
--radius-sm:8px;
/* ✅ MAS ANCHA (como pediste) */
--sidebar-width:380px;
--sidebar-compact:80px;
--transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
html,body{height:100%}
body{
background:var(--bg-void);
color:var(--text-main);
font-family:'Inter',sans-serif;
margin:0;
overflow-x:hidden;
font-size:15px;
line-height:1.35;
background-image:
radial-gradient(circle at 15% 50%, rgba(56,189,248,.04) 0%, transparent 28%),
radial-gradient(circle at 85% 30%, rgba(139,92,246,.06) 0%, transparent 30%);
}
.text-muted,.text-body-secondary{ color:var(--text-muted)!important; }
h1,h2,h3,h4,h5,h6{
font-family:'Outfit',sans-serif;
letter-spacing:-.02em;
color:#fff;
}
.text-gradient{
background:var(--accent-gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
/* SCROLLBAR */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03); border-radius:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
/* SIDEBAR */
.sidebar{
width:var(--sidebar-width);
height:calc(100vh - 24px);
position:fixed;
top:12px; left:12px;
border-radius:var(--radius-xl);
background:var(--bg-glass);
backdrop-filter:var(--glass-filter);
-webkit-backdrop-filter:var(--glass-filter);
border:var(--border-glass);
z-index:1000;
display:flex;
flex-direction:column;
box-shadow:
0 20px 60px rgba(0,0,0,.4),
0 0 0 1px rgba(255,255,255,.03),
inset 0 1px 0 rgba(255,255,255,.05);
overflow:hidden;
transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sidebar.compact{ width:var(--sidebar-compact); transition:var(--transition-smooth); }
.sidebar.compact .sidebar-header .logo-text,
.sidebar.compact .sidebar-section-title,
.sidebar.compact .nav-item .nav-text,
.sidebar.compact .widget-sub,
.sidebar.compact details.sidebar-widget .widget-body,
.sidebar.compact .sidebar-footer .user-info,
.sidebar.compact .sidebar-footer .btn{
display:none!important;
}
.sidebar.compact .nav-item a{ justify-content:center; padding:12px; }
.sidebar.compact .nav-item a i{ margin-right:0; font-size:1.3rem; }
.sidebar.compact .logo-rebote{ margin:0 auto; }
.sidebar-header{
padding:16px 18px;
border-bottom:var(--border-glass);
flex:0 0 auto;
background:rgba(0,0,0,.2);
}
.logo-rebote{
width:46px; height:46px;
border-radius:50%;
background:#fff;
border:3px solid rgba(255,255,255,.15);
box-shadow:
0 0 20px rgba(255,255,255,.25),
0 0 40px rgba(96,165,250,.2);
animation:rebote 3s ease-in-out infinite;
cursor:pointer;
transition:var(--transition-smooth);
}
@keyframes rebote{
0%,100%{transform:translate(0,0) rotate(0deg)}
25%{transform:translate(3px,2px) rotate(2deg)}
50%{transform:translate(-2px,3px) rotate(-2deg)}
75%{transform:translate(2px,-1px) rotate(1deg)}
}
/* CONTENIDO SIDEBAR */
.sidebar-content{
flex:1 1 auto;
min-height:0;
display:flex;
flex-direction:column;
overflow:hidden;
}
/* ✅ cajas ARRIBA pero COMPACTAS */
.sidebar-top{
flex:0 0 auto;
padding:10px 12px 8px;
border-bottom:var(--border-glass);
background:rgba(0,0,0,.13);
}
details.sidebar-widget{
border:var(--border-glass);
border-radius:var(--radius-lg);
overflow:hidden;
background:linear-gradient(135deg, rgba(30,41,59,.25) 0%, rgba(15,23,42,.25) 100%);
margin-bottom:10px; /* mas compacto */
transition:var(--transition-smooth);
}
details.sidebar-widget>summary{
list-style:none;
cursor:pointer;
padding:11px 12px; /* ✅ más compacto */
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
user-select:none;
font-weight:800;
color:#fff;
}
details.sidebar-widget>summary::-webkit-details-marker{display:none}
details.sidebar-widget>summary::after{
content:'';
width:6px;height:6px;
border-right:2px solid var(--text-muted);
border-bottom:2px solid var(--text-muted);
transform:rotate(45deg);
transition:var(--transition-smooth);
margin-right:4px;
}
details.sidebar-widget[open]>summary::after{
transform:rotate(-135deg);
border-color:var(--accent-primary);
}
.widget-sub{
font-size:.76rem;
color:var(--text-muted);
font-weight:700;
background:rgba(255,255,255,.05);
padding:3px 8px;
border-radius:999px;
white-space:nowrap;
}
.widget-body{
padding:10px 12px 12px; /* ✅ más compacto */
animation:fadeIn 0.2s ease-out;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }
.card-elite{
background:linear-gradient(180deg, rgba(30,41,59,.4) 0%, rgba(15,23,42,.4) 100%);
backdrop-filter:blur(12px);
border:var(--border-glass);
border-radius:var(--radius-lg);
box-shadow:0 12px 32px rgba(0,0,0,.3);
overflow:hidden;
}
.card-header-elite{
padding:11px 12px;
border-bottom:1px solid rgba(255,255,255,.08);
background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, transparent 100%);
}
.stat-row{
padding:6px 0;
border-bottom:1px solid rgba(255,255,255,.07);
}
.stat-row:last-child{border-bottom:none}
.stat-val{
font-family:'Outfit',sans-serif;
font-weight:800;
color:#fff;
/* ...cortado... */
#fxProgress { position:absolute; bottom:0; left:0; width:100%; height:2px; background:rgba(255,255,255,0.1); }
#fxProgress span { display:block; height:100%; background:var(--accent-primary); width:0; animation:loading 1s infinite; }
@keyframes loading { 0%{width:0;left:0} 50%{width:50%} 100%{width:0;left:100%} }
servicesindustriales.com.ar
https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css:root {
/* Palette Core */
--color-primario: #f57a04;
/* Naranja Vibrante */
--color-primario-dark: #d66a00;
/* Naranja Oscuro Hover */
--color-secundario: #0d2241;
/* Azul Profundo (Trust/Industrial) */
--color-secundario-light: #1a3b66;
/* Neutrals */
--bg-body: #ffffff;
--bg-light: #f8faff;
/* Azul muy pálido para secciones light */
--text-main: #2b3545;
--text-muted: #64748b;
--border-color: #e2e8f0;
/* Effects */
--shadow-sm: 0 4px 6px -1px rgba(13, 34, 65, 0.05), 0 2px 4px -1px rgba(13, 34, 65, 0.03);
--shadow-md: 0 10px 15px -3px rgba(13, 34, 65, 0.08), 0 4px 6px -2px rgba(13, 34, 65, 0.04);
--shadow-lg: 0 20px 25px -5px rgba(13, 34, 65, 0.1), 0 10px 10px -5px rgba(13, 34, 65, 0.04);
--shadow-hover: 0 25px 50px -12px rgba(245, 122, 4, 0.15);
/* Orange glow subtle */
--radius-md: 12px;
--radius-lg: 20px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
font-family: 'Outfit', system-ui, -apple-system, sans-serif;
color: var(--text-main);
background-color: var(--bg-body);
line-height: 1.6;
padding-top: 80px;
/* Space for fixed navbar */
overflow-x: hidden;
/* Prevent horizontal scroll */
}
/* ===== TYPOGRAPHY & UTILS ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
color: var(--color-secundario);
letter-spacing: -0.02em;
}
.text-primary {
color: var(--color-primario) !important;
}
.text-secondary {
color: var(--color-secundario) !important;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 1rem;
position: relative;
display: block; /* 👈 cambia SOLO esto */
}
.eyebrow {
display: block; /* 👈 cambia SOLO esto */
width: fit-content; /* 👈 para que siga pill y no se estire */
color: var(--color-primario);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 0.75rem;
background: rgba(245, 122, 4, 0.1);
padding: 0.35rem 1rem;
border-radius: 50px;
}
/* si está centrado, lo centramos */
.text-center .eyebrow {
margin-left: auto;
margin-right: auto;
}
section {
padding: 6rem 0;
position: relative;
}
/* ===== BUTTONS ===== */
.btn {
padding: 0.75rem 2rem;
font-weight: 600;
border-radius: 50px;
/* Pill shape */
transition: var(--transition);
letter-spacing: 0.01em;
}
.btn-primary {
background: linear-gradient(135deg, var(--color-primario) 0%, #ff9100 100%);
border: none;
box-shadow: 0 4px 15px rgba(245, 122, 4, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(245, 122, 4, 0.5);
background: linear-gradient(135deg, #ff9100 0%, var(--color-primario) 100%);
}
/* ===== NAVBAR ===== */
.navbar {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 1rem 0;
transition: var(--transition);
}
.navbar-brand {
font-weight: 800;
font-size: 1.5rem;
color: var(--color-secundario);
}
.navbar-brand span {
color: var(--color-primario);
font-weight: 800;
}
.nav-link {
font-weight: 500;
color: var(--color-secundario) !important;
font-size: 0.95rem;
margin: 0 0.5rem;
position: relative;
transition: var(--transition);
}
.nav-link:hover,
.nav-link.active {
color: var(--color-primario) !important;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: var(--color-primario);
transition: var(--transition);
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 100%;
}
/* ===== HERO ===== */
#inicio {
background: radial-gradient(circle at top right, #fff8f0 0%, #fff 40%, #f4f7fa 100%);
padding: 8rem 0 6rem;
overflow: hidden;
}
.hero-img-container {
position: relative;
}
.hero-img {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
object-fit: cover;
transform: perspective(1000px) rotateY(-5deg);
transition: var(--transition);
border: 4px solid #fff;
}
.hero-img:hover {
transform: perspective(1000px) rotateY(0deg);
}
/* Floating Pattern (Decorativo) */
.hero-pattern {
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(135deg, rgba(245, 122, 4, 0.1), rgba(245, 122, 4, 0));
border-radius: 50%;
z-index: -1;
}
.p-1 {
top: -20px;
right: -20px;
}
.p-2 {
bottom: -20px;
left: -20px;
}
/* ===== CARDS (General) ===== */
.feature-card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.03);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem;
height: 100%;
transition: var(--transition);
position: relative;
overflow: hidden;
z-index: 1;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--color-primario);
transform: scaleX(0);
transform-origin: left;
transition: var(--transition);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-icon {
font-size: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: rgba(245, 122, 4, 0.08);
/* Transparent orange */
color: var(--color-primario);
border-radius: 50%;
/* Circle */
margin-bottom: 1.5rem;
transition: var(--transition);
}
.feature-card:hover .feature-icon {
background: var(--color-primario);
color: #fff;
transform: scale(1.1) rotate(5deg);
}
.card-title {
font-size: 1.35rem;
margin-bottom: 1rem;
}
.card-text {
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.list-unstyled li {
margin-bottom: 0.75rem;
display: flex;
align-items: flex-start;
}
.list-unstyled li i {
margin-top: 3px;
}
/* ===== QUIENES SOMOS ===== */
#quienes-somos {
background-color: #fff;
}
#quienes-somos p {
font-size: 1.1rem;
color: #4a5568;
}
#quienes-somos strong {
color: var(--color-secundario);
}
/* ===== TRANSPARENT/SOLID SECTIONS ===== */
.bg-light-pro {
background-color: var(--bg-light);
}
/* ===== FAQ ===== */
.faq-item {
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
margin-bottom: 1rem;
overflow: hidden;
transition: var(--transition);
}
.faq-item:hover {
box-shadow: var(--shadow-md);
border-color: rgba(245, 122, 4, 0.3);
}
.faq-question {
background: none;
border: none;
text-align: left;
/* ...cortado... */
/* ===== WhatsApp Widget (adaptado a paleta A&V) ===== */
:root{
--av-primary: var(--color-primario, #f57a04);
--av-primary-dark: var(--color-primario-dark, #d66a00);
--av-secondary: var(--color-secundario, #0d2241);
--av-bg: #ffffff;
--av-border: #e2e8f0;
--av-muted: #64748b;
}
#wa-float-av.wa-float{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9999;
font-family: inherit; /* usa Outfit */
}
/* Botón verde oficial WhatsApp */
#wa-float-av .wa-btn{
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg,#25D366,#128C7E);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 10px 30px rgba(37,211,102,.45);
transition: transform .25s ease, box-shadow .25s ease;
}
#wa-float-av .wa-btn:hover{
transform: translateY(-3px) scale(1.05);
box-shadow: 0 14px 36px rgba(37,211,102,.55);
}
/* Ventana */
#wa-float-av .wa-card{
position: absolute;
right: 0;
bottom: 74px;
width: min(380px, 92vw);
background: var(--av-bg);
border-radius: 18px;
border: 1px solid var(--av-border);
box-shadow: 0 18px 60px rgba(0,0,0,.25);
overflow: hidden;
transform: translateY(10px);
opacity: 0;
transition: .22s ease;
}
#wa-float-av .wa-card[aria-modal="true"]{
transform: translateY(0);
opacity: 1;
}
/* Header con estética del sitio (Azul + Naranja) */
#wa-float-av .wa-head{
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: linear-gradient(135deg, var(--av-secondary) 0%, var(--av-primary) 140%);
color: #fff;
}
#wa-float-av .wa-avatar{
width: 42px;
height: 42px;
background: rgba(255,255,255,.95);
border-radius: 12px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(255,255,255,.35);
font-weight: 800;
color: var(--av-secondary);
font-size: .85rem;
}
#wa-float-av .wa-avatar img{
width: 28px;
height: 28px;
object-fit: contain;
display: block;
}
#wa-float-av .wa-title{ font-weight: 800; letter-spacing: -.01em; }
#wa-float-av .wa-status{ font-size: .85rem; opacity: .92; }
#wa-float-av .wa-close{
margin-left: auto;
border: none;
background: transparent;
color: #fff;
font-size: 24px;
cursor: pointer;
line-height: 1;
}
/* Body */
#wa-float-av .wa-body{
padding: 14px;
max-height: 42vh;
overflow: auto;
background: #f8faff;
display: flex;
flex-direction: column;
gap: 8px;
}
#wa-float-av .wa-bubble{
max-width: 90%;
padding: 10px 12px;
border-radius: 14px;
font-size: .95rem;
box-shadow: 0 4px 10px rgba(13,34,65,.08);
}
#wa-float-av .wa-bot{
background: #fff;
border: 1px solid var(--av-border);
align-self: flex-start;
color: #2b3545;
}
#wa-float-av .wa-user{
background: rgba(245,122,4,.10);
border: 1px solid rgba(245,122,4,.25);
align-self: flex-end;
color: #2b3545;
}
/* Compose */
#wa-float-av .wa-compose{
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 10px;
border-top: 1px solid var(--av-border);
background: #fff;
}
#wa-float-av .wa-compose textarea{
resize: none;
border-radius: 14px;
padding: 10px 12px;
border: 2px solid #edf2f7;
background: #f8fafc;
font-family: inherit;
outline: none;
}
#wa-float-av .wa-compose textarea:focus{
background: #fff;
border-color: var(--av-primary);
box-shadow: 0 0 0 4px rgba(245,122,4,.12);
}
#wa-float-av .wa-send{
border: none;
border-radius: 14px;
padding: 0 16px;
cursor: pointer;
color: #fff;
background: linear-gradient(135deg, var(--av-primary) 0%, #ff9100 100%);
box-shadow: 0 8px 18px rgba(245,122,4,.25);
transition: transform .2s ease, box-shadow .2s ease;
}
#wa-float-av .wa-send:hover{
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(245,122,4,.35);
}
/* Mobile */
@media (max-width: 480px){
#wa-float-av .wa-card{ width: calc(100vw - 24px); }
}