esteticarush.com
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap:root{
--accent: #b3945d;
--accent-dark: #9a7e4a;
--accent-light: #d4b98c;
--accent-soft: rgba(179, 148, 93, 0.1);
--accent-softer: rgba(179, 148, 93, 0.05);
--text: #0b0b0b;
--text-light: #2d2d2d;
--muted: #5a5a5a;
--muted-light: #8a8a8a;
--border: rgba(0,0,0,0.08);
--border-light: rgba(0,0,0,0.03);
--soft: rgba(0,0,0,.04);
--white: #ffffff;
--off-white: #fafafa;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.08);
--shadow-accent: 0 10px 30px rgba(179, 148, 93, 0.15);
--radius: 16px;
--radius-lg: 24px;
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior:smooth;
}
body{
background: var(--white);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
line-height: 1.2;
color: var(--text);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--off-white);
}
::-webkit-scrollbar-thumb {
background: var(--accent);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-dark);
}
/* Navbar Premium */
.navbar {
background: var(--white) !important;
border-bottom: 1px solid var(--border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 1rem 0;
transition: var(--transition);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
z-index: 1000;
}
.navbar.scrolled {
padding: 0.7rem 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.navbar-brand {
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 1.5rem;
letter-spacing: -.5px;
color: var(--text) !important;
display: flex;
align-items: center;
gap: 8px;
}
.navbar-brand span {
color: var(--accent);
position: relative;
}
.navbar-brand span::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: 2px;
background: var(--accent);
opacity: 0.3;
}
.nav-link {
color: var(--text) !important;
font-weight: 600;
font-size: 0.95rem;
padding: 0.5rem 1rem !important;
margin: 0 0.1rem;
border-radius: 50px;
transition: var(--transition);
position: relative;
}
.nav-link:hover {
color: var(--accent) !important;
background: var(--accent-soft);
}
.nav-link.active {
color: var(--accent) !important;
font-weight: 700;
}
.nav-link.active::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
}
.navbar-toggler {
border: none;
padding: 0.5rem;
font-size: 1.2rem;
color: var(--accent);
transition: var(--transition);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Buttons Premium */
.btn-accent {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
border: none;
color: var(--white);
font-weight: 700;
font-size: 0.95rem;
border-radius: 50px;
padding: 0.85rem 2rem;
transition: var(--transition);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-accent::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: -1;
}
.btn-accent:hover {
color: var(--white);
transform: translateY(-3px);
box-shadow: var(--shadow-accent);
}
.btn-accent:hover::before {
left: 0;
}
.btn-outline-dark.rounded-pill {
border: 2px solid var(--text);
color: var(--text);
font-weight: 700;
padding: 0.85rem 2rem;
transition: var(--transition);
background: transparent;
}
.btn-outline-dark.rounded-pill:hover {
background: var(--text);
color: var(--white);
border-color: var(--text);
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.btn-group .btn-accent.dropdown-toggle-split {
padding: 0.85rem 0.7rem;
border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.dropdown-menu {
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 0.5rem;
margin-top: 0.5rem;
}
.dropdown-item {
padding: 0.7rem 1rem;
border-radius: 8px;
font-weight: 500;
transition: var(--transition);
}
.dropdown-item:hover {
background: var(--accent-soft);
color: var(--accent);
}
/* Sections Premium */
.section {
padding: 100px 0;
position: relative;
}
.section.soft {
background: var(--off-white);
}
.section-title {
font-weight: 900;
letter-spacing: -0.8px;
margin-bottom: 1.5rem;
font-size: clamp(2.2rem, 5vw, 3.5rem);
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: var(--accent);
border-radius: 2px;
}
.section-title.center::after {
left: 50%;
transform: translateX(-50%);
}
.section-subtitle {
color: var(--muted);
max-width: 700px;
font-size: 1.1rem;
line-height: 1.7;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 800;
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.5rem;
padding: 0.5rem 1rem;
background: var(--accent-soft);
border-radius: 50px;
}
/* Hero Section Premium */
#inicio {
padding: 140px 0 100px;
position: relative;
overflow: hidden;
}
#inicio::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: linear-gradient(135deg, var(--accent-softer) 0%, transparent 100%);
z-index: -1;
border-radius: 0 0 0 100px;
}
.hero-wrap {
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--white);
overflow: hidden;
box-shadow: var(--shadow-lg);
position: relative;
z-index: 1;
}
.hero-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1
/* ...cortado... */
:root{
--wa:#6ba1bc;
--wa-dark:#5a8a9f;
--wa-bg:#ffffff;
--wa-border:#e3e6ea;
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
.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);
}
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(380px,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;
background:linear-gradient(135deg,var(--wa),var(--wa-dark));
color:#fff;
}
.wa-avatar{
width:40px;
height:40px;
background:#fff;
border-radius:10px;
display:grid;
place-items:center;
overflow:hidden;
}
.wa-title{ font-weight:800; }
.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:#eaf4f8;
border:1px solid #cfe4ef;
align-self:flex-end;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid var(--wa-border);
background:#ffffff;
}
.wa-select{
grid-column:1 / -1;
border-radius:12px;
padding:10px;
border:1px solid var(--wa-border);
font-family:inherit;
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid var(--wa-border);
font-family:inherit;
width:100%;
}
.wa-send{
background:var(--wa);
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
}
.wa-send:hover{ background:var(--wa-dark); }
@media(max-width:480px){
.wa-card{ width:calc(100vw - 24px); }
}
.lang-float{
position: fixed;
left: 18px;
bottom: 18px;
z-index: 9998;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 999px;
text-decoration: none;
font-family: inherit;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 14px 40px rgba(0,0,0,.18);
backdrop-filter: blur(10px);
transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
opacity: .98;
user-select: none;
}
.lang-float:hover{
transform: translateY(-3px);
box-shadow: 0 18px 55px rgba(0,0,0,.22);
opacity: 1;
}
.lang-flag{
width: 38px;
height: 38px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(255,255,255,.8);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
overflow: hidden;
flex: 0 0 auto;
}
.lang-flag img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lang-text{
display: flex;
flex-direction: column;
line-height: 1.05;
}
.lang-text strong{
font-size: 14px;
letter-spacing: .2px;
}
.lang-text small{
font-size: 12px;
opacity: .85;
}
/* Tema Brasil */
.lang-float-br{
background: linear-gradient(135deg, rgba(37,211,102,.18), rgba(18,140,126,.18));
color: #0b2a22;
}
@media (max-width: 480px){
.lang-float{
left: 12px;
bottom: 12px;
padding: 11px 12px;
}
.lang-flag{ width: 36px; height: 36px; }
}
mercadochoele.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap:root {
--mc-primary: #16a34a;
--mc-primary-dark: #15803d;
--mc-primary-light: #dcfce7;
--mc-primary-ultralight: #f0fdf4;
--mc-secondary: #0ea5e9;
--mc-secondary-dark: #0284c7;
--mc-accent: #f59e0b;
--mc-accent-light: #fef3c7;
--mc-dark: #0f172a;
--mc-dark-light: #1e293b;
--mc-light: #f8fafc;
--mc-light-bg: #f1f5f9;
--mc-gray: #64748b;
--mc-gray-light: #e2e8f0;
--mc-border: rgba(15, 23, 42, 0.08);
--mc-border-light: rgba(15, 23, 42, 0.04);
--mc-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
--mc-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);
--mc-shadow-hover: 0 20px 60px rgba(22, 163, 74, 0.12);
--mc-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.04);
--mc-radius: 14px;
--mc-radius-lg: 20px;
--mc-radius-sm: 10px;
--mc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--mc-glow: 0 0 0 4px rgba(22, 163, 74, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
color: var(--mc-dark);
background: #ffffff;
font-size: 0.95rem;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
letter-spacing: -0.01em;
}
.container {
max-width: 1280px;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
/* Navbar premium */
.mc-navbar {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--mc-border);
padding: 1rem 0;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
position: sticky;
top: 0;
z-index: 1000;
}
.mc-brand {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: 1.4rem;
color: var(--mc-dark);
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
transition: var(--mc-transition);
}
.mc-brand:hover {
transform: translateY(-1px);
}
.mc-brand-badge {
width: 42px;
height: 42px;
background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 8px 20px rgba(22, 163, 74, 0.25);
transition: var(--mc-transition);
}
.mc-brand:hover .mc-brand-badge {
transform: rotate(5deg) scale(1.05);
}
.nav-link {
font-weight: 500;
color: var(--mc-gray) !important;
padding: 0.5rem 1rem !important;
font-size: 0.9rem;
transition: var(--mc-transition);
border-radius: var(--mc-radius-sm);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--mc-primary), var(--mc-secondary));
transition: all 0.3s ease;
transform: translateX(-50%);
border-radius: 1px;
}
.nav-link:hover, .nav-link.active {
color: var(--mc-primary) !important;
background: var(--mc-primary-ultralight);
}
.nav-link.active::after {
width: 60%;
}
.btn-mc {
border-radius: var(--mc-radius-sm);
padding: 0.75rem 1.75rem;
font-weight: 600;
font-size: 0.9rem;
transition: var(--mc-transition);
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn-mc-primary {
background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary));
color: white;
box-shadow: 0 8px 25px rgba(22, 163, 74, 0.25);
position: relative;
overflow: hidden;
}
.btn-mc-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.btn-mc-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(22, 163, 74, 0.35);
}
.btn-mc-primary:hover::before {
left: 100%;
}
.btn-mc-outline {
border: 2px solid var(--mc-primary);
color: var(--mc-primary);
background: transparent;
}
.btn-mc-outline:hover {
background: var(--mc-primary);
color: white;
transform: translateY(-2px);
box-shadow: var(--mc-shadow-hover);
}
/* Hero premium */
.mc-hero {
padding: 6rem 0 5rem;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #ffffff 0%, var(--mc-light-bg) 100%);
}
.mc-hero::before {
content: '';
position: absolute;
top: -30%;
right: -10%;
width: 50%;
height: 160%;
background: radial-gradient(circle at center, rgba(22, 163, 74, 0.1) 0%, transparent 70%);
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero h1 {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.25rem;
color: var(--mc-dark);
background: linear-gradient(135deg, var(--mc-dark) 0%, var(--mc-primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
color: var(--mc-gray);
font-size: 1.1rem;
margin-bottom: 2rem;
max-width: 550px;
}
.mc-chip {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.25rem;
background: white;
border: 1px solid var(--mc-border);
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
color: var(--mc-primary);
margin-bottom: 1.5rem;
box-shadow: var(--mc-shadow);
backdrop-filter: blur(10px);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.hero-img-wrapper {
position: relative;
perspective: 1000px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-img {
width: 100%;
height: auto; /* 🔑 respeta proporción */
max-width: 520px; /* ajustá a gusto */
object-fit: contain; /* 🔑 nunca recorta */
border-radius: var(--mc-radius-lg);
box-shadow: var(--mc-shadow-lg);
border: 8px solid white;
transform: perspective(1000px) rotateY(-8deg) rotateX(2deg);
transition: var(--mc-transition);
display: block;
}
.hero-img:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
.stats {
display: flex;
gap: 2.5rem;
margin-top: 2.5rem;
flex-wrap: wrap;
}
.stat-item {
text-align: left;
position: relative;
padding-left: 1rem;
}
.stat-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 30px;
background: linear-gradient(to bottom, var(--mc-primary), var(--mc-secondary));
border-radius: 2px;
}
.stat-number {
font-size: 2.2rem;
font-weight: 800;
color: var(--mc-primary);
line-height: 1;
/* ...cortado... */
/* === NAV BRAND (solo navbar) === */
.mc-navbar .mc-brand {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: inherit;
}
.mc-navbar .mc-brand-logo {
width: 58px;
height: auto;
}
.mc-navbar .mc-brand-badge {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--mc-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.mc-navbar .mc-brand-text {
font-size: 0.95rem; /* 🔽 más chico */
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 991px) {
.mc-navbar .mc-brand-text {
font-size: 0.9rem;
}
}
.gal-gallery .carousel{max-width:980px;margin-inline:auto;position:relative}
.gal-frame{
height: clamp(220px, 48vh, 440px);
background:#fff;border-radius:16px;overflow:hidden;
box-shadow:0 12px 28px rgba(0,0,0,.12);
display:flex;align-items:center;justify-content:center;padding:8px
}
.gal-img{
width:auto !important;max-width:100%;
height:auto !important;max-height:100%;
object-fit:contain !important;object-position:center;display:block;cursor:zoom-in
}
/* Controles circulares con más contraste */
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next{
z-index:20;width:50px;height:50px;top:50%;transform:translateY(-50%);
opacity:1;background:rgba(0,0,0,.55);border-radius:50%;margin:0 12px
}
.gal-gallery .carousel-control-prev{left:0}
.gal-gallery .carousel-control-next{right:0}
.gal-gallery .gal-ctrl-icon{width:2.6rem;height:2.6rem;background-size:60% 60%}
/* Indicadores: se sitúan fuera; agregamos espacio inferior para que no se corten */
.gal-gallery .carousel-indicators{z-index:10;bottom:-50px}
.gal-gallery .carousel-indicators button{
width:10px;height:10px;border-radius:50%;
background:rgba(0,0,0,.5);border:none
}
.gal-gallery .carousel-indicators button.active{background:#000}
.gal-gallery{padding-bottom:56px} /* espacio para indicadores */
/* Modal */
#galLightbox .modal-content{background:#000}
#galLightboxImg{max-height:86vh;width:100%;height:auto;object-fit:contain;background:#000}
.gal-lightbox-nav{
position:absolute;top:50%;transform:translateY(-50%);
border:0;width:44px;height:44px;border-radius:999px;
background:rgba(255,255,255,.18);color:#fff;font-size:30px;line-height:44px;text-align:center;z-index:5;cursor:pointer
}
.gal-lightbox-nav:hover{background:rgba(255,255,255,.28)}
.gal-lightbox-nav.gal-prev{left:10px}
.gal-lightbox-nav.gal-next{right:10px}
/* Pequeños ajustes móviles */
@media (max-width: 575.98px){
.gal-frame{height: clamp(200px, 40vh, 360px)}
}
/* ===========================
FIX: Modal y controles en PHONE
- Evita que el select (unidad) y el input (cantidad) se aplasten
- Modal fullscreen en pantallas chicas
=========================== */
@media (max-width: 576px) {
/* Fullscreen visual (extra por si el modal-fullscreen-sm-down no aplica) */
.mc-modal .modal-dialog {
max-width: 100%;
margin: 0;
height: 100%;
}
.mc-modal .modal-content {
border-radius: 0;
min-height: 100vh;
}
.mc-modal .modal-header {
padding: 1.25rem 1rem 1rem;
}
.mc-modal .modal-body {
padding: 1rem;
max-height: calc(100vh - 86px);
}
/* Productos: 1 columna, cards más cómodas */
.mc-prod-grid {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.mc-prod-img-wrapper {
height: 150px;
}
/* Controles: wrap + tamaños mínimos */
.mc-prod-actions {
flex-wrap: wrap;
gap: 0.6rem;
}
.mc-prod-actions .form-select,
.mc-prod-actions .form-control {
flex: 1 1 calc(50% - 0.3rem);
min-width: 140px;
font-size: 1rem;
padding: 0.65rem 0.75rem;
height: 44px;
}
.mc-prod-actions .btn {
flex: 1 1 100%;
min-width: 100%;
height: 44px;
padding: 0.65rem 0.75rem;
}
/* Carrito: que no quede pegado */
.mc-cart-box {
position: static;
top: auto;
padding: 1.25rem;
}
#pmCartForm textarea {
font-size: 1rem;
}
}
/* Extra: cuando el ancho es MUY chico (320px) */
@media (max-width: 360px) {
.mc-prod-actions .form-select,
.mc-prod-actions .form-control {
flex: 1 1 100%;
min-width: 100%;
}
}
#choelitoBL{
position: fixed;
left: 14px;
bottom: 14px;
z-index: 2147483647;
display: flex;
align-items: flex-end;
gap: 10px;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
pointer-events: auto;
}
/* Mascota (más grande y animada) */
#choelitoBLMascot{
width: 78px;
height: 78px;
border-radius: 22px;
border: 1px solid rgba(0,0,0,.10);
background: rgba(255,255,255,.90);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 16px 55px rgba(0,0,0,.20);
display: grid;
place-items: center;
cursor: pointer;
overflow: hidden;
position: relative;
transform-origin: 50% 80%;
animation: chbl-float 2.6s ease-in-out infinite;
}
#choelitoBLMascot::before{
content:"";
position:absolute;
inset:-12px;
border-radius: 30px;
background:
radial-gradient(circle at 30% 30%, rgba(43,208,127,.45), transparent 60%),
radial-gradient(circle at 70% 80%, rgba(99,102,241,.22), transparent 60%);
filter: blur(10px);
opacity: .85;
animation: chbl-halo 2.2s ease-in-out infinite;
}
#choelitoBLMascot img{
width: 92%;
height: 92%;
object-fit: contain;
position: relative;
filter: drop-shadow(0 12px 16px rgba(0,0,0,.20));
animation: chbl-wiggle 2.6s ease-in-out infinite;
}
@keyframes chbl-float{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(7px); }
}
@keyframes chbl-wiggle{
0%,100%{ transform: rotate(0deg); }
22%{ transform: rotate(-2.4deg); }
44%{ transform: rotate(2.4deg); }
66%{ transform: rotate(-1.4deg); }
88%{ transform: rotate(1.4deg); }
}
@keyframes chbl-halo{
0%,100%{ transform: scale(1); opacity:.55; }
50%{ transform: scale(1.08); opacity:.9; }
}
/* Bubble minimal (aparece/desaparece) */
#choelitoBLBubble{
width: 250px;
border-radius: 16px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0,0,0,.10);
box-shadow: 0 18px 60px rgba(0,0,0,.20);
padding: 10px;
position: relative;
display: none;
transform-origin: left bottom;
}
/* Flechita hacia la mascota */
#choelitoBLBubble::before{
content:"";
position:absolute;
left:-7px;
bottom: 22px;
width: 14px;
height: 14px;
background: rgba(255,255,255,.92);
border-left: 1px solid rgba(0,0,0,.10);
border-bottom: 1px solid rgba(0,0,0,.10);
transform: rotate(45deg);
}
/* Estados */
#choelitoBL[data-open="1"] #choelitoBLBubble{
display: block;
animation: chbl-in .22s ease-out both;
}
#choelitoBL[data-open="0"] #choelitoBLBubble{
display: none;
}
@keyframes chbl-in{
from{ opacity:0; transform: translateX(-6px) translateY(6px) scale(.98); }
to{ opacity:1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes chbl-out{
from{ opacity:1; transform: translateX(0) translateY(0) scale(1); }
to{ opacity:0; transform: translateX(-6px) translateY(6px) scale(.98); }
}
.chbl-top{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.chbl-pill{
display:inline-flex;
align-items:center;
gap: 8px;
font-weight: 900;
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(31,167,106,.12);
border: 1px solid rgba(31,167,106,.18);
color: rgba(12,40,28,.95);
}
.chbl-dot{
width: 8px;
height: 8px;
border-radius: 999px;
background: #2bd07f;
box-shadow: 0 0 0 4px rgba(43,208,127,.18);
animation: chbl-ping 1.8s ease-out infinite;
}
@keyframes chbl-ping{
0%{ transform: scale(.85); opacity:.9; }
60%{ transform: scale(1.15); opacity:.7; }
100%{ transform: scale(.85); opacity:.9; }
}
#choelitoBLClose{
width: 32px;
height: 32px;
border-radius: 12px;
border: 0;
background: rgba(0,0,0,.06);
cursor: pointer;
color: rgba(0,0,0,.75);
}
#choelitoBLClose:hover{ background: rgba(0,0,0,.09); }
.chbl-actions{
display:flex;
gap: 8px;
flex-wrap: wrap;
}
.chbl-primary, .chbl-ghost{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 9px 10px;
border-radius: 12px;
font-weight: 900;
font-size: 12.5px;
text-decoration:none;
border: 1px solid rgba(0,0,0,.10);
}
.chbl-primary{
background: linear-gradient(180deg, #2bd07f, #1fa76a);
color:#fff;
box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.chbl-ghost{
background: rgba(15,23,42,.06);
color: rgba(15,23,42,.82);
}
/* Mobile */
@media (max-width: 420px){
#choelitoBL{ left: 10px; bottom: 10px; gap: 10px; }
#choelitoBLMascot{ width: 70px; height: 70px; border-radius: 20px; }
#choelitoBLBubble{ width: 235px; }
}
@media (prefers-reduced-motion: reduce){
#choelitoBLMascot, #choelitoBLMascot img, #choelitoBLMascot::before, .chbl-dot{
animation: none !important;
}
}
mercadochoele.com.ar/admin
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css<style> inline en el archivo.vargasservicioselectricos.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.csshttps://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Inter:wght@300;400;500;600;700&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css/* ================== GALLERY (FIX COMPLETO) ================== */
.gallery-section{
background: var(--white);
}
/* contenedor */
#galleryCarousel.gallery-carousel{
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
background: #fff;
}
/* alto del slide */
#galleryCarousel .carousel-item{
height: 520px;
background: #fff;
}
/* ✅ imagen completa (SIN recorte) */
#galleryCarousel .carousel-item img{
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* clave: no corta */
object-position: center;
display: block;
background: #fff;
}
/* Flechas: SIEMPRE visibles y con contraste */
#galleryCarousel .carousel-control-prev,
#galleryCarousel .carousel-control-next{
width: 54px;
height: 54px;
top: 50%;
transform: translateY(-50%);
opacity: 1 !important; /* nada de opacity 0 */
background: rgba(0,0,0,0.55);
border-radius: 50%;
z-index: 10;
}
/* Para que no “tapen” todo el carrusel */
#galleryCarousel .carousel-control-prev,
#galleryCarousel .carousel-control-next{
bottom: auto !important;
}
#galleryCarousel .carousel-control-prev:hover,
#galleryCarousel .carousel-control-next:hover{
background: rgba(0,0,0,0.75);
}
/* Indicadores */
#galleryCarousel .carousel-indicators{
margin-bottom: 1rem;
}
#galleryCarousel .carousel-indicators button{
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--gray-300);
margin: 0 6px;
opacity: 1;
}
#galleryCarousel .carousel-indicators button.active{
background-color: var(--secondary);
}
/* Responsive */
@media (max-width: 768px){
#galleryCarousel .carousel-item{ height: 320px; }
}
@media (max-width: 576px){
#galleryCarousel .carousel-item{ height: 260px; }
}
/* fuerza el eyebrow arriba del título */
.eyebrow{
display: block; /* antes inline-block */
width: fit-content; /* que no se estire */
margin: 0 auto 1rem; /* centrado + separación */
}
/* Eyebrow SIEMPRE arriba y centrado */
.text-center .eyebrow{
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);
width: fit-content;
margin: 0 0 1rem 0;
}
:root {
--primary: #0a2b4a;
--primary-light: #1a3b5a;
--primary-dark: #061d35;
--secondary: #1e88e5;
--success: #25d366;
--accent: #ff9800;
--dark-bg: #0b1220;
--light-bg: #f8fafc;
--white: #ffffff;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-900: #111827;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-full: 999px;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
--shadow-md: 0 8px 30px rgba(0,0,0,0.08);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
--shadow-xl: 0 30px 80px rgba(0,0,0,0.15);
--transition-fast: 0.2s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
font-family: var(--font-body);
background-color: var(--white);
color: var(--gray-900);
line-height: 1.6;
overflow-x: hidden;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
}
.display-5 {
font-family: var(--font-heading);
font-weight: 900;
letter-spacing: -0.03em;
}
/* Navbar Premium */
.navbar {
padding: 1rem 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
transition: all var(--transition-base);
}
.navbar.scrolled {
padding: 0.75rem 0;
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.98);
}
.navbar-brand {
font-weight: 900;
font-size: 1.5rem;
color: var(--primary) !important;
display: flex;
align-items: center;
gap: 0.5rem;
}
.navbar-brand i {
color: var(--secondary);
font-size: 1.8rem;
filter: drop-shadow(0 2px 4px rgba(30, 136, 229, 0.2));
}
.nav-link {
font-weight: 600;
color: var(--gray-700) !important;
padding: 0.5rem 1rem !important;
border-radius: var(--radius-full);
transition: all var(--transition-fast);
position: relative;
}
.nav-link:hover, .nav-link.active {
color: var(--primary) !important;
background: rgba(10, 43, 74, 0.05);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--secondary), var(--accent));
transition: all var(--transition-base);
transform: translateX(-50%);
border-radius: var(--radius-full);
}
.nav-link:hover::after, .nav-link.active::after {
width: 70%;
}
.navbar-toggler {
border: none;
padding: 0.5rem;
border-radius: var(--radius-sm);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 2px rgba(10, 43, 74, 0.1);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border: none;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: var(--radius-full);
transition: all var(--transition-base);
box-shadow: 0 4px 12px rgba(10, 43, 74, 0.2);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(10, 43, 74, 0.3);
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}
.btn-outline-dark {
border: 2px solid var(--gray-300);
color: var(--gray-700);
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: var(--radius-full);
transition: all var(--transition-base);
}
.btn-outline-dark:hover {
border-color: var(--primary);
background-color: rgba(10, 43, 74, 0.05);
color: var(--primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Hero Section Premium */
.hero {
padding-top: 140px;
padding-bottom: 80px;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background:
radial-gradient(circle at 80% 20%, rgba(30, 136, 229, 0.08) 0%, transparent 50%),
radial-gradient(circle at 20% 80%, rgba(37, 211, 102, 0.05) 0%, transparent 50%);
z-index: 0;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, rgba(30, 136, 229, 0.1), rgba(37, 211, 102, 0.1));
border: 1px solid rgba(30, 136, 229, 0.2);
color: var(--primary);
font-weight: 700;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-full)
/* ...cortado... */
/* Inputs SIEMPRE negros */
#contacto .form-control,
#contacto .form-select,
#contacto textarea {
background-color: #ffffff !important;
color: #000000 !important;
border: 1px solid #ced4da !important;
}
#contacto .form-control::placeholder,
#contacto textarea::placeholder {
color: #6c757d !important;
opacity: 1;
}
#contacto .form-control:focus,
#contacto .form-select:focus,
#contacto textarea:focus {
background-color: #ffffff !important;
color: #000000 !important;
border-color: #0d6efd !important;
box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}
#contacto .form-label {
color: #000 !important;
font-weight: 600;
}
:root{
--vg-wa:#25D366;
--vg-wa-dark:#128C7E;
--vg-fb:#1877F2;
--vg-shadow: 0 14px 36px rgba(0,0,0,.28);
--vg-radius: 18px;
}
.vg-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
display:flex;
flex-direction:column;
gap:10px;
align-items:flex-end;
}
/* Botón Facebook */
.vg-fb{
width:52px;height:52px;border-radius:999px;
display:grid;place-items:center;
background:linear-gradient(135deg,var(--vg-fb), #0f5dc7);
color:#fff;text-decoration:none;
box-shadow: var(--vg-shadow);
transition:transform .25s, filter .25s;
}
.vg-fb:hover{ transform:translateY(-2px) scale(1.03); filter:brightness(1.05); }
.vg-fb i{ font-size:20px; }
/* Botón WhatsApp */
.vg-wa-btn{
width:60px;height:60px;border-radius:999px;
border:0;cursor:pointer;
display:grid;place-items:center;
background:linear-gradient(135deg,var(--vg-wa),var(--vg-wa-dark));
color:#fff;
box-shadow: var(--vg-shadow);
transition:transform .25s, filter .25s;
position:relative;
}
.vg-wa-btn:hover{ transform:translateY(-3px) scale(1.05); filter:brightness(1.02); }
.vg-wa-btn i{ font-size:28px; }
/* Card WhatsApp */
.vg-wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
border-radius: var(--vg-radius);
overflow:hidden;
background:#0b1220;
color:#fff;
box-shadow: 0 18px 60px rgba(0,0,0,.55);
border:1px solid rgba(255,255,255,.10);
transform:translateY(10px);
opacity:0;
pointer-events:none;
transition:transform .25s, opacity .25s;
}
.vg-wa-card.is-open{
transform:translateY(0);
opacity:1;
pointer-events:auto;
}
.vg-wa-head{
display:flex;align-items:center;gap:12px;
padding:14px;
background:linear-gradient(180deg,#0f1b34,#0b1220);
border-bottom:1px solid rgba(255,255,255,.08);
}
.vg-wa-avatar{
width:40px;height:40px;border-radius:12px;
display:grid;place-items:center;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
}
.vg-wa-title{ font-weight:800; letter-spacing:-.01em; }
.vg-wa-status{
font-size:.85rem;
color:rgba(255,255,255,.75);
display:flex;align-items:center;gap:6px;
}
.vg-wa-status::before{
content:"";width:8px;height:8px;border-radius:50%;
background:var(--vg-wa);
}
.vg-wa-close{
margin-left:auto;
width:32px;height:32px;border-radius:999px;
border:0;cursor:pointer;
background:transparent;color:#fff;font-size:24px;
opacity:.75;
display:grid;place-items:center;
transition:background .2s, opacity .2s;
}
.vg-wa-close:hover{ opacity:1; background:rgba(255,255,255,.10); }
.vg-wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
display:flex;
flex-direction:column;
gap:8px;
background:#0b1220;
}
.vg-wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
line-height:1.35;
box-shadow:0 4px 14px rgba(0,0,0,.25);
animation:vgFade .2s ease;
}
@keyframes vgFade{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
.vg-bot{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.08);
align-self:flex-start;
border-bottom-left-radius:5px;
}
.vg-user{
background:rgba(37,211,102,.28);
border:1px solid rgba(37,211,102,.25);
align-self:flex-end;
border-bottom-right-radius:5px;
}
.vg-wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid rgba(255,255,255,.10);
background:#0b1220;
}
.vg-wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px 12px;
border:1px solid rgba(255,255,255,.14);
background:#0a1324;
color:#fff;
outline:none;
min-height:44px;
font-family:inherit;
transition:border-color .2s, box-shadow .2s;
}
.vg-wa-compose textarea:focus{
border-color:var(--vg-wa);
box-shadow:0 0 0 2px rgba(37,211,102,.15);
}
.vg-wa-send{
border:0;
border-radius:12px;
padding:0 16px;
background:var(--vg-wa);
color:#0b1220;
font-weight:800;
cursor:pointer;
display:grid;place-items:center;
transition:transform .2s, background .2s;
}
.vg-wa-send:hover{ background:var(--vg-wa-dark); transform:scale(1.05); }
@media (max-width:480px){
.vg-float{ right:12px; bottom:12px; }
.vg-wa-card{ width:calc(100vw - 24px); }
}
tuhuellaestampados.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap:root {
--accent: #153679;
--accent-hover: #1a4189;
--bg: #ffffff;
--text: #0a0a0a;
--muted: #4b5563;
--soft: #f8fafc;
--soft2: #eef3ff;
--border: #e2e8f0;
--shadow-sm: 0 2px 8px rgba(21, 54, 121, .04);
--shadow: 0 8px 24px rgba(21, 54, 121, .08);
--shadow-lg: 0 20px 48px rgba(21, 54, 121, .12);
--radius: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.anchor-offset {
scroll-margin-top: 88px;
}
section {
padding: 100px 0;
}
.section-title {
font-weight: 900;
letter-spacing: -.03em;
color: var(--text);
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.1;
}
.section-subtitle {
color: var(--muted);
max-width: 720px;
margin-inline: auto;
font-size: 1.125rem;
line-height: 1.7;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem 1rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(21, 54, 121, .08), rgba(21, 54, 121, .12));
border: 1px solid rgba(21, 54, 121, .16);
color: var(--accent);
font-weight: 700;
font-size: .875rem;
letter-spacing: .02em;
text-transform: uppercase;
transition: var(--transition);
}
.eyebrow:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
/* Navbar Premium */
.nav-blur {
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(12px) saturate(180%);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.navbar-brand {
color: var(--text) !important;
font-weight: 800;
letter-spacing: -.02em;
transition: var(--transition);
}
.navbar-brand:hover {
transform: translateY(-1px);
}
.navbar .nav-link {
color: var(--text);
font-weight: 600;
font-size: .9375rem;
padding: .5rem 1rem !important;
border-radius: 8px;
transition: var(--transition);
position: relative;
}
.navbar .nav-link::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
width: 0;
height: 2px;
background: var(--accent);
transition: var(--transition);
transform: translateX(-50%);
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
color: var(--accent);
background: var(--soft2);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
width: 24px;
}
.btn-accent {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: #fff;
border: none;
font-weight: 700;
padding: .75rem 1.75rem;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(21, 54, 121, .24);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-accent::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
transition: left 0.5s;
}
.btn-accent:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(21, 54, 121, .32);
color: #fff;
}
.btn-accent:hover::before {
left: 100%;
}
.btn-outline-accent {
border: 2px solid rgba(21, 54, 121, .24);
color: var(--accent);
background: #fff;
font-weight: 700;
padding: .75rem 1.75rem;
border-radius: 12px;
transition: var(--transition);
}
.btn-outline-accent:hover {
background: var(--soft2);
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
/* Hero Premium */
.hero {
padding-top: 140px;
padding-bottom: 80px;
background:
radial-gradient(1400px 800px at 12% 0%, rgba(21, 54, 121, .08), transparent 60%),
radial-gradient(1000px 700px at 88% 5%, rgba(21, 54, 121, .06), transparent 60%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(21, 54, 121, .04), transparent 70%);
border-radius: 50%;
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(-30px, 30px) rotate(5deg);
}
}
.hero-card {
border-radius: calc(var(--radius) + 8px);
background: #fff;
border: 1px solid var(--border);
box-shadow: var(--shadow-lg);
overflow: hidden;
transition: var(--transition);
position: relative;
z-index: 1;
}
.hero-card:hover {
box-shadow: 0 24px 60px rgba(21, 54, 121, .16);
transform: translateY(-4px);
}
.hero-inner {
padding: 56px;
}
.hero h1 {
font-weight: 950;
letter-spacing: -0.04em;
line-height: 1;
margin: 16px 0 12px;
color: var(--text);
font-size: clamp(2.5rem, 6vw, 4rem);
background: linear-gradient(135deg, var(--text), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p.lead {
color: var(--muted);
max-width: 56ch;
margin-bottom: 24px;
font-size: 1.125rem;
line-height: 1.8;
}
.chip {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .65rem .95rem;
border-radius: 999px;
background: var(--soft);
border: 1px solid var(--border);
color: var(--text);
font-weight: 600;
font-size: .875rem;
margin: .3rem .3rem 0 0;
transition: var(--transition);
}
.chip:hover {
background: var(--soft2);
border-color: rgba(21, 54, 121, .24);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.chip i {
color: var(--accent);
font-size: 1rem;
}
.hero-media {
height: 100%;
min-height: 420px;
background: linear-gradient(135deg, var(--soft), var(--soft2));
border-left: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.hero-media::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(21, 54, 121, .04), transparent);
z-index: 1;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.6s ease;
}
.hero-card:hover .hero-media img {
transform: scale(1.05);
}
.hero-media .media-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, .9), transparent 50%);
pointer-events: none;
z-index:
/* ...cortado... */
/* ===== FOOTER PRO (Tu Huella) ===== */
.footer-pro {
background: #193e85;
color: rgba(255, 255, 255, .92);
padding: 72px 0 28px;
position: relative;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, .10);
}
.footer-pro::before {
content: "";
position: absolute;
inset: -40% -30%;
background:
radial-gradient(900px 600px at 15% 10%, rgba(255, 255, 255, .10), transparent 60%),
radial-gradient(800px 520px at 85% 0%, rgba(255, 255, 255, .08), transparent 55%),
radial-gradient(700px 560px at 50% 90%, rgba(0, 0, 0, .12), transparent 60%);
pointer-events: none;
}
.footer-pro .container {
position: relative;
z-index: 2;
}
.footer-pro .footer-title {
color: #fff;
font-weight: 900;
letter-spacing: -.02em;
font-size: 1.15rem;
margin-bottom: 14px;
}
.footer-pro .footer-muted {
color: rgba(255, 255, 255, .78);
line-height: 1.8;
font-weight: 500;
}
.footer-brand {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.footer-logo {
width: 56px;
height: 56px;
border-radius: 14px;
overflow: hidden;
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, .18);
box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
background: rgba(255, 255, 255, .06);
}
.footer-logo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.footer-brand-name {
color: #fff;
font-weight: 900;
letter-spacing: -.02em;
font-size: 1.25rem;
line-height: 1.1;
}
.footer-pro a {
color: rgba(255, 255, 255, .90);
text-decoration: none;
font-weight: 600;
transition: all .25s ease;
}
.footer-pro a:hover {
color: #fff;
transform: translateX(2px);
text-decoration: none;
}
.footer-links a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .10);
}
.footer-links a:hover {
background: rgba(255, 255, 255, .10);
border-color: rgba(255, 255, 255, .18);
}
.footer-contact .row-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .10);
margin-bottom: 10px;
}
.footer-contact .row-item i {
font-size: 1.15rem;
color: rgba(255, 255, 255, .95);
}
.footer-social .btn {
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .22) !important;
color: #fff !important;
background: rgba(255, 255, 255, .08) !important;
font-weight: 800;
padding: .55rem .9rem;
transition: all .25s ease;
}
.footer-social .btn:hover {
background: rgba(255, 255, 255, .14) !important;
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
}
.footer-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
margin: 28px 0 18px;
}
.footer-bottom {
color: rgba(255, 255, 255, .78);
font-weight: 600;
font-size: .95rem;
}
.footer-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
color: rgba(255, 255, 255, .92);
font-weight: 800;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.footer-pro {
padding: 60px 0 22px;
}
.footer-logo {
width: 52px;
height: 52px;
border-radius: 14px;
}
.footer-brand-name {
font-size: 1.12rem;
}
}
:root {
--wa-green: #25D366;
--wa-green-dark: #128C7E;
--wa-text: #111827;
--wa-muted: #6b7280;
--wa-border: #e5e7eb;
--wa-bg: #ffffff;
--wa-body: #f3f4f6;
--wa-user: #dcf8c6;
}
.wa-float {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9999;
font-family: inherit;
}
.wa-btn {
width: 62px;
height: 62px;
border-radius: 999px;
border: none;
cursor: pointer;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg, var(--wa-green), var(--wa-green-dark));
box-shadow: 0 12px 34px rgba(37, 211, 102, .38);
transition: transform .25s ease, box-shadow .25s ease;
position: relative;
overflow: hidden;
}
.wa-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
transform: translateX(-120%);
transition: transform .55s ease;
}
.wa-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 18px 44px rgba(37, 211, 102, .48);
}
.wa-btn:hover::before {
transform: translateX(120%);
}
.wa-card {
position: absolute;
right: 0;
bottom: 76px;
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, .22);
overflow: hidden;
transform: translateY(10px);
opacity: 0;
transition: .25s ease;
}
.wa-card[aria-modal="true"] {
transform: translateY(0);
opacity: 1;
}
.wa-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: linear-gradient(135deg, var(--wa-green-dark), #075E54);
color: #fff;
}
.wa-avatar {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .22);
display: grid;
place-items: center;
overflow: hidden;
flex: 0 0 auto;
}
.wa-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wa-title {
font-weight: 800;
letter-spacing: -.01em;
line-height: 1.1;
}
.wa-status {
font-size: .85rem;
opacity: .9;
}
.wa-close {
margin-left: auto;
border: none;
background: transparent;
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
opacity: .92;
transition: .2s ease;
}
.wa-close:hover {
opacity: 1;
transform: scale(1.08);
}
.wa-body {
padding: 14px;
max-height: 40vh;
overflow: auto;
background:
radial-gradient(900px 420px at 0% 0%, rgba(37, 211, 102, .06), transparent 60%),
radial-gradient(700px 420px at 100% 20%, rgba(18, 140, 126, .06), transparent 60%),
var(--wa-body);
display: flex;
flex-direction: column;
gap: 8px;
}
.wa-bubble {
max-width: 90%;
padding: 10px 12px;
border-radius: 14px;
font-size: .95rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
line-height: 1.45;
color: var(--wa-text);
}
.wa-bot {
background: #fff;
border: 1px solid var(--wa-border);
align-self: flex-start;
}
.wa-user {
background: var(--wa-user);
border: 1px solid rgba(0, 0, 0, .05);
align-self: flex-end;
}
.wa-compose {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 10px;
border-top: 1px solid var(--wa-border);
background: #fff;
}
.wa-compose textarea {
resize: none;
border-radius: 12px;
padding: 10px 10px;
border: 1px solid var(--wa-border);
font-family: inherit;
outline: none;
transition: .2s ease;
}
.wa-compose textarea:focus {
border-color: rgba(18, 140, 126, .55);
box-shadow: 0 0 0 4px rgba(18, 140, 126, .12);
}
.wa-send {
background: linear-gradient(135deg, var(--wa-green), var(--wa-green-dark));
color: #fff;
border: none;
border-radius: 12px;
padding: 0 16px;
cursor: pointer;
transition: transform .2s ease, filter .2s ease;
}
.wa-send:hover {
transform: translateY(-2px);
filter: saturate(1.06);
}
@media (max-width: 480px) {
.wa-card {
width: calc(100vw - 24px);
}
}
edfs.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.csshttps://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Fraunces:opsz,[email protected],400;9..144,600;9..144,700;9..144,800&display=swap:root {
--bg: #ffffff;
--card: rgba(15, 23, 42, .04);
--card2: rgba(15, 23, 42, .06);
--line: rgba(15, 23, 42, .10);
--text: rgba(15, 23, 42, .94);
--muted: rgba(15, 23, 42, .70);
--accent: #d6b36a;
--accent2: #151422;
--accent-light: rgba(214, 179, 106, 0.1);
--shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
--shadow-hover: 0 32px 64px -16px rgba(15, 23, 42, 0.2);
--radius: 20px;
--radius-sm: 14px;
--radius-lg: 28px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
color: var(--text);
background:
radial-gradient(1400px 700px at 15% -8%, rgba(214, 179, 106, 0.18), transparent 65%),
radial-gradient(1000px 600px at 85% 12%, rgba(157, 123, 51, 0.12), transparent 60%),
linear-gradient(180deg, #ffffff 0%, #fafafc 40%, #ffffff 100%);
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, .section-title {
font-family: 'Fraunces', serif;
font-weight: 800; /* podés dejar 700 si querés */
line-height: 1.2;
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition);
}
.container {
max-width: 1200px;
padding-left: 24px;
padding-right: 24px;
}
.section {
padding: 100px 0;
position: relative;
}
@media (max-width: 768px) {
.section {
padding: 70px 0;
}
}
/* ==================== NAVBAR ==================== */
.navbar {
backdrop-filter: blur(20px) saturate(180%);
background: rgba(255, 255, 255, 0.88) !important;
border-bottom: 1px solid rgba(214, 179, 106, 0.15);
padding: 18px 0;
transition: var(--transition);
}
.navbar.scrolled {
padding: 12px 0;
background: rgba(255, 255, 255, 0.95) !important;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.navbar-brand {
font-weight: 900;
letter-spacing: 0.2px;
line-height: 1.1;
font-size: 1.35rem;
}
.brand span {
color: var(--accent);
position: relative;
display: inline-block;
}
.brand span::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent), transparent);
opacity: 0.6;
}
.brand small {
display: block;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.3px;
margin-top: 4px;
font-size: 0.85rem;
}
.nav-link {
color: rgba(15, 23, 42, 0.75) !important;
font-weight: 500;
padding: 8px 16px !important;
border-radius: var(--radius-sm);
margin: 0 2px;
position: relative;
transition: var(--transition);
}
.nav-link:hover {
color: rgba(15, 23, 42, 0.95) !important;
background: rgba(214, 179, 106, 0.08);
}
.nav-link.active {
color: var(--text) !important;
font-weight: 600;
}
.nav-link.active::before {
content: '';
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.navbar-toggler {
border: 1px solid var(--line);
padding: 8px 12px;
transition: var(--transition);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px rgba(214, 179, 106, 0.25);
}
/* ==================== BUTTONS ==================== */
.btn-accent {
background: linear-gradient(135deg, var(--accent), var(--accent2));
border: 0;
color: #1b1407;
font-weight: 700;
padding: 12px 28px;
border-radius: var(--radius-sm);
box-shadow:
0 12px 24px rgba(214, 179, 106, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-accent::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.6s;
}
.btn-accent:hover {
transform: translateY(-3px);
box-shadow:
0 20px 40px rgba(214, 179, 106, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-accent:hover::before {
left: 100%;
}
.btn-ghost {
background: rgba(255, 255, 255, 0.7);
border: 1.5px solid var(--line);
color: rgba(15, 23, 42, 0.9);
font-weight: 600;
padding: 12px 28px;
border-radius: var(--radius-sm);
transition: var(--transition);
backdrop-filter: blur(10px);
}
.btn-ghost:hover {
background: rgba(15, 23, 42, 0.04);
border-color: var(--accent);
color: var(--text);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
}
/* ==================== HERO ==================== */
.hero {
padding-top: 140px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(214, 179, 106, 0.08) 0%, transparent 70%);
z-index: -1;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-radius: 100px;
background: linear-gradient(135deg, rgba(214, 179, 106, 0.15), rgba(157, 123, 51, 0.1));
border: 1px solid rgba(214, 179, 106, 0.25);
color: var(--accent2);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 24px;
transition: var(--transition);
}
.eyebrow:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(214, 179, 106, 0.15);
}
.hero h1 {
font-weight: 900;
letter-spacing: -1px;
font-size: clamp(42px, 5vw, 64px);
line-height: 1.05;
margin: 20px 0 24px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.lead {
color: var(--muted);
font-size: clamp(18px, 1.6vw, 20px);
line-height: 1.7;
margin-bottom: 32px;
}
.hero-bullets {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin: 32px 0;
}
@media (max-width: 768px) {
.hero-bullets {
grid-template-columns: 1fr;
}
}
.bullet {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 20px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--line);
transition: var(--transition);
backdrop-filter: blur(10px);
}
.bullet:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.9);
border-color: var(--accent);
box-shadow: var(--shadow);
}
.bullet i {
color: var(--accent);
font-size: 1.2rem;
mar
/* ...cortado... */
:root{
--accent:#d8ac51;
--wa-green:#25D366;
--wa-green2:#128C7E;
--wa-border:#e6e9ee;
--wa-muted:#6b7280;
--wa-text:#111827;
--wa-bg:#ffffff;
--wa-soft:#f6f7f9;
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family: inherit;
}
/* Botón WhatsApp oficial */
.wa-btn{
width:60px;
height:60px;
border-radius:50%;
border:none;
background:linear-gradient(135deg,var(--wa-green),var(--wa-green2));
color:#fff;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 10px 30px rgba(37,211,102,.40);
transition:transform .25s ease, box-shadow .25s ease;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(37,211,102,.52);
}
/* Card modo claro (normal) */
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:var(--wa-bg);
border-radius:16px;
border:1px solid var(--wa-border);
box-shadow:0 18px 55px rgba(0,0,0,.20);
overflow:hidden;
transform:translateY(10px);
opacity:0;
transition:.25s ease;
}
.wa-card[aria-modal="true"]{ transform:none; opacity:1; }
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:12px 14px;
background:#ffffff;
border-bottom:1px solid var(--wa-border);
}
.wa-avatar{
width:40px;height:40px;border-radius:10px;
border:1px solid var(--wa-border);
background:var(--wa-soft);
display:grid;place-items:center;
overflow:hidden; position:relative;
}
.wa-avatar img{ width:26px;height:26px;object-fit:contain; }
.wa-initials{
position:absolute; inset:0;
display:grid; place-items:center;
font-weight:900;
color:#111827;
opacity:.85;
}
.wa-title{ font-weight:800; color:var(--wa-text); line-height:1.1; }
.wa-status{ font-size:.85rem; color:var(--wa-muted); }
.wa-close{
margin-left:auto;
border:none;
background:transparent;
color:var(--wa-muted);
font-size:24px;
cursor:pointer;
}
.wa-close:hover{ color:var(--wa-text); }
/* Chat */
.wa-body{
padding:14px;
max-height:40vh;
overflow:auto;
background:#f5f7fa; /* chat claro */
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 12px rgba(0,0,0,.08);
}
.wa-bot{
background:#ffffff;
border:1px solid var(--wa-border);
color:var(--wa-text);
align-self:flex-start;
}
.wa-user{
background:#e7f7ee; /* estilo WhatsApp claro */
border:1px solid #cceedd;
color:var(--wa-text);
align-self:flex-end;
}
/* Compose */
.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;
color:var(--wa-text);
background:#fff;
}
.wa-compose textarea:focus{
outline:none;
border-color:rgba(216,172,81,.55); /* accent suave */
box-shadow:0 0 0 4px rgba(216,172,81,.18);
}
/* Botón enviar: verde WhatsApp (normal) */
.wa-send{
background:linear-gradient(135deg,var(--wa-green),var(--wa-green2));
color:#fff;
border:none;
border-radius:12px;
padding:0 16px;
cursor:pointer;
}
.wa-send:hover{ filter:brightness(1.02); }
@media(max-width:480px){
.wa-card{ width:calc(100vw - 24px); }
}
/* ==================================================
EYEBROW EN SECCIONES: centrado real + vertical
EXCEPTO HERO (horizontal)
================================================== */
/* Todas las secciones: centrado real */
section .eyebrow{
display: flex !important; /* <-- clave: deja de ser inline */
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: fit-content !important;
max-width: 100% !important;
margin: 0 auto 24px auto !important; /* <-- clave: centrado real */
gap: 6px !important;
white-space: normal !important;
}
/* Icono arriba en secciones */
section .eyebrow i{
display: block !important;
margin: 0 !important;
line-height: 1 !important;
}
/* HERO: queda como lo tenías (horizontal y alineado a la izquierda) */
.hero .eyebrow{
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
gap: 10px !important;
margin: 0 0 24px 0 !important;
}