estudiocornagliayasociados.com
https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500&display=swaphttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css/* === Tipografías iguales al sitio WP === */
:root{
--font-head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
--font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
/* texto general */
body{
font-family: var(--font-body) !important;
font-weight: 400;
}
/* títulos y marcas */
h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
.navbar .navbar-brand,.footer-brand{
font-family: var(--font-head) !important;
font-weight: 800; /* bajá a 700 si lo ves muy grueso */
}
/* menús/cta (si querés look más firme) */
.navbar .nav-link,.btn,.btn-brand{
font-family: var(--font-head) !important;
font-weight: 600;
letter-spacing: .02em;
text-transform: none; /* poné uppercase si querés */
}
:root {
--brand: #0a3643;
--brand-light: #1a4e60;
--accent: #c9a467;
--accent-dark: #a88446;
--dark: #0f172a;
--muted: #6b7280;
--light: #f8f9fa;
--lighter: #f1f5f9;
--white: #ffffff;
--shadow: 0 10px 30px rgba(10, 54, 67, 0.12);
--shadow-hover: 0 20px 40px rgba(10, 54, 67, 0.18);
--radius: 16px;
--radius-lg: 24px;
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #374151;
line-height: 1.7;
overflow-x: hidden;
background: var(--white);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', Georgia, serif;
color: var(--dark);
letter-spacing: -0.01em;
font-weight: 700;
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800;
}
/* NAVBAR */
.navbar {
padding: 1rem 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
transition: var(--transition);
background: transparent;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.navbar.scrolled {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 20px rgba(10, 54, 67, 0.1);
padding: 0.6rem 0;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.navbar .navbar-brand {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800;
font-size: 1.5rem;
color: var(--brand);
display: flex;
align-items: center;
}
.navbar .navbar-brand::before {
content: "";
margin-right: 8px;
font-size: 1.8rem;
}
.navbar .nav-link {
color: var(--dark);
font-weight: 500;
margin: 0 0.5rem;
position: relative;
padding: 0.5rem 0.8rem !important;
transition: var(--transition);
}
.navbar .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--accent);
transition: var(--transition);
transform: translateX(-50%);
}
.navbar .nav-link:hover {
color: var(--brand);
}
.navbar .nav-link:hover::after {
width: 70%;
}
.navbar .btn-brand {
background: var(--brand);
color: var(--white);
border: none;
border-radius: 10px;
padding: 0.6rem 1.2rem;
font-weight: 600;
transition: var(--transition);
box-shadow: 0 4px 12px rgba(10, 54, 67, 0.2);
}
.navbar .btn-brand:hover {
background: var(--brand-light);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(10, 54, 67, 0.3);
}
.navbar-toggler {
border: none;
padding: 0.5rem;
font-size: 1.5rem;
color: var(--brand);
}
.navbar-toggler:focus {
box-shadow: none;
}
@media (max-width: 991.98px) {
.navbar-collapse {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
padding: 1rem;
border-radius: var(--radius);
margin-top: 1rem;
box-shadow: var(--shadow);
}
.navbar .nav-link {
margin: 0.3rem 0;
padding: 0.8rem 1rem !important;
border-radius: 8px;
}
.navbar .nav-link:hover {
background: rgba(10, 54, 67, 0.05);
}
}
.hero {
min-height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('https://nodo25.netfan.com.ar/estudiocornagliayasociados.com/img/hero.png')
center/cover no-repeat;
display: flex;
align-items: center;
position: relative;
padding-top: 76px;
color: var(--white);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
opacity: 0.4;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
color: var(--white);
}
.hero .lead {
font-size: 1.25rem;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
}
.highlight {
background: linear-gradient(120deg, rgba(201, 164, 103, 0.3) 0%, rgba(201, 164, 103, 0.1) 100%);
padding: 0.1rem 0.4rem;
border-radius: 6px;
border-left: 3px solid var(--accent);
}
.btn-brand {
background: var(--accent);
color: var(--dark);
border: none;
border-radius: 10px;
padding: 1rem 2rem;
font-weight: 600;
transition: var(--transition);
box-shadow: 0 10px 25px rgba(201, 164, 103, 0.3);
}
.btn-brand:hover {
background: var(--accent-dark);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(201, 164, 103, 0.4);
}
.btn-outline-light {
border: 2px solid rgba(255, 255, 255, 0.8);
color: var(--white);
border-radius: 10px;
padding: 1rem 2rem;
font-weight: 600;
transition: var(--transition);
}
.btn-out
/* ...cortado... */
.carousel-indicators{display:none!important;}
/* Fondo negro y textos blancos */
.navbar.bg-black { background:#000 !important; }
.navbar-dark .navbar-nav .nav-link { color:#fff; opacity:.9; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color:#fff; opacity:1; }
/* Toggler con líneas blancas (usa el SVG de Bootstrap) */
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler { border-color: rgba(255,255,255,.4); }
.navbar-toggler:focus { box-shadow: 0 0 0 .1rem rgba(255,255,255,.4); }
/* Menú desplegado en mobile con fondo negro */
@media (max-width: 991.98px) {
.navbar .navbar-collapse {
background:#000;
padding: .75rem 1rem;
border-radius: .5rem;
margin-top:.5rem;
}
}
/* Botón WhatsApp con contraste sobre negro (ajustá a tu paleta) */
.btn-brand {
background:#25D366;
color:#000;
border:0;
}
.btn-brand:hover { filter: brightness(0.9); color:#000; }
/* === HERO + STICKER (consolidado) === */
/* Reservo espacio para el sticker y evito 100vh duro en mobile */
.hero{
--sticker-h: clamp(200px, 26vw, 360px); /* alto del carrusel “pegatina” */
padding-top: 84px; /* bajo navbar fija */
padding-bottom: calc(var(--sticker-h) + 28px); /* espacio para el sticker */
min-height: 85vh; /* más amable que 100vh en phone */
position: relative;
overflow: visible;
}
.hero .hero-content{ margin-top: 0; }
@media (min-width: 992px){
.hero .hero-content{ transform: translateY(-16px); } /* un leve lift en desktop */
}
/* Sticker pegado al borde inferior del hero */
.hero-sticker{
--sticker-overlap: 0px; /* si querés que “cuelgue”: -12px */
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: var(--sticker-overlap);
z-index: 5;
width: 100%; /* ancho real del hero (no 100vw) */
max-width: 1700px; /* límite opcional en pantallas enormes */
box-shadow: 0 14px 40px rgba(0,0,0,.35);
border-radius: 0;
}
/* Grilla multi-item: 3 desktop / 2 tablet / 1 phone */
.sticker-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 0; padding: 0;
}
.sticker-tile{
height: var(--sticker-h);
overflow: hidden;
}
.sticker-img{
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block; user-select: none; -webkit-user-drag: none;
}
/* Controles del carrusel */
.hero-sticker .carousel-indicators{ margin-bottom: .6rem; }
.hero-sticker .carousel-indicators [data-bs-target]{
width:10px;height:10px;border-radius:50%;
background: rgba(255,255,255,.85);
}
.hero-sticker .carousel-indicators .active{ background:#c9a467; }
.hero-sticker .carousel-control-prev-icon,
.hero-sticker .carousel-control-next-icon{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
/* Responsive */
@media (max-width: 992px){
.sticker-grid{ grid-template-columns: repeat(2, 1fr); }
.sticker-grid .sticker-tile:nth-child(3){ display:none; } /* muestra 2 por slide */
}
@media (max-width: 576px){
.sticker-grid{ grid-template-columns: 1fr; }
.sticker-grid .sticker-tile:nth-child(n+2){ display:none; } /* 1 por slide */
.hero{ padding-top: 72px; } /* un toque menos bajo la navbar en phone */
}
/* === ESPECIALIDADES === */
.especialidades{ padding-top:4.5rem; padding-bottom:4.5rem; }
.especialidades .eyebrow{
letter-spacing:.18em; font-weight:700; color:#6b7280; font-size:.9rem; display:block; margin-bottom:.5rem;
}
.especialidades .title-accent{
width:90px; height:4px; background:var(--accent); border-radius:2px;
}
.especialidades .link-more{
display:inline-flex; align-items:center; gap:.25rem; font-weight:600; text-decoration:none;
color:var(--dark); border-bottom:2px solid transparent; transition:var(--transition);
}
.especialidades .link-more:hover{ color:var(--brand); border-color:var(--accent); }
/* Icon-box (mismo look dorado que “Áreas”) */
.icon-box{
display:flex; gap:14px; align-items:flex-start;
padding:.25rem 0 1.25rem 0; border-bottom:1px solid #eef2f7;
}
@media (min-width:768px){ .icon-box:nth-child(n+3){ border-bottom:0; } }
.icon-badge{
width:58px; height:58px; border-radius:16px; flex:0 0 58px;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(180deg, rgba(201,164,103,.18), rgba(201,164,103,.12));
color:#a88446;
box-shadow: inset 0 0 0 1px rgba(201,164,103,.28), 0 6px 14px rgba(10,54,67,.08);
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.icon-badge i{ font-size:24px; line-height:1; }
.icon-box:hover .icon-badge{
transform: translateY(-2px) scale(1.06);
background:linear-gradient(180deg, rgba(201,164,103,.22), rgba(201,164,103,.14));
box-shadow: inset 0 0 0 1px rgba(201,164,103,.34), 0 10px 22px rgba(10,54,67,.12);
}
.icon-box-content h3{ color:var(--dark); margin-top:2px; }
.icon-box-content p{ color:#4b5563; }
/* ==== VIDEOS GRID ==== */
.videos-section{ padding-top:4rem; padding-bottom:4rem; }
.videos-title h2{ color: var(--dark); }
.videos-accent{
width:90px; height:4px; background:var(--accent);
border-radius:3px; display:inline-block; margin-top:.25rem;
}
/* Grid responsive */
.video-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 991.98px){
.video-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
.video-grid{ grid-template-columns: 1fr; gap:18px; }
}
/* Card + embed 16:9 */
.video-card{
background:#fff; border-radius:14px; overflow:hidden;
box-shadow: var(--shadow);
transition: transform .2s ease, box-shadow .2s ease;
}
.video-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.video-embed{
aspect-ratio: 16/9;
position: relative; width:100%; background:#000;
}
.video-embed iframe{
position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
/* Copy debajo del grid */
.videos-copy .videos-subtitle{
font-weight:800; color: var(--dark);
margin-bottom:.5rem; letter-spacing:-.01em;
}
.videos-copy p{ line-height:1.75; }
/* Ajustes del CTA (usa tu .btn-brand existente) */
.videos-copy .btn.btn-brand{
padding:.85rem 1.6rem; font-weight:700; border-radius:10px;
}
/* ===== Nosotros: imagen redondeada y más chica, sin marco ===== */
.brand-pic{
/* tamaño más chico en desktop */
margin-inline: auto; /* centra en mobile y tablet */
}
.brand-image{
width: 100%;
height: auto;
aspect-ratio: auto;
object-fit: initial;
/* mantiene cuadrada */
object-position: center;
border-radius: 26px; /* redondeado */
box-shadow: 0 10px 24px rgba(0,0,0,.12); /* sombra suave (podés quitarla) */
background: transparent; /* de fondo por si el logo es png con transparencias */
display: block;
}
/* pisa cualquier estilo viejo del marco gris */
.brand-frame, .brand-frame::before, .brand-frame::after{
all: unset !important;
}
/* responsive: un toque más chica en mobile */
@media (max-width: 575.98px){
.brand-pic{ max-width: 280px; }
.brand-image{ border-radius: 22px; }
}
/* ===== NOSOTROS ===== */
.about-hero{ padding-top:4.5rem; padding-bottom:4.5rem; }
.about-eyebrow{
letter-spacing:.18em; font-weight:700; color:#6b7280; font-size:.9rem; display:block; margin-bottom:.25rem;
}
.about-accent{
width:90px; height:4px; background:var(--accent);
border-radius:3px;
}
.about-link{
display:inline-flex; align-items:center; gap:.25rem;
font-weight:700; color:var(--dark); text-decoration:none; border-bottom:2px solid transparent;
transition: var(--transition);
}
.about-link:hover{ color:var(--brand); border-color:var(--accent); }
/* Tarjeta del logo (cuadrado 1:1 con marco suave) */
.brand-frame{
border-radius:28px;
border:8px solid transparent;
background:
linear-gradient(#0b0b0b, #0b0b0b) padding-box, /* fondo negro dentro */
linear-gradient(145deg,#d8dde3,#b8c0c9) border-box; /* “marco” claro */
box-shadow:
0 12px 28px rgba(10,54,67,.08),
0 22px 48px rgba(10,54,67,.06);
padding:18px;
transition: transform .25s ease, box-shadow .25s ease;
}
.brand-frame:hover{
transform: translateY(-4px);
box-shadow:
0 16px 36px rgba(10,54,67,.12),
0 28px 60px rgba(10,54,67,.10);
}
.brand-image{
width:100%; aspect-ratio:1/1; display:block;
object-fit:cover; object-position:center;
border-radius:20px;
/* si tu logo es PNG con fondo transparente y querés “contain”:
object-fit: contain; background:#0b0b0b; padding:16px; */
}
/* Responsive */
@media (max-width: 991.98px){
.about-hero{ text-align:left; }
.brand-frame{ max-width:520px; margin-inline:auto; }
}
@media (max-width: 575.98px){
.about-hero{ padding-top:3.5rem; padding-bottom:3.5rem; }
.brand-frame{ padding:14px; border-radius:24px; }
}
/* === FIX brand image: wider, no crop, no background === */
.about-hero .brand-pic{ max-width: 640px; margin-inline: auto; }
.about-hero .brand-image{
width:100%; height:auto; aspect-ratio:auto; object-fit:initial;
background: transparent; padding: 0;
}
/* ===== TESTIMONIOS ===== */
.testi-section{ padding-top:4.5rem; padding-bottom:4.5rem; }
.testi-eyebrow{
display:inline-block; letter-spacing:.18em; text-transform:uppercase;
font-weight:700; font-size:.9rem; color:#6b7280; margin-bottom:.25rem;
}
.testi-accent{
width:90px; height:4px; background:var(--accent);
border-radius:3px; display:inline-block;
}
/* Card */
.testi-card{
background:#fff; border-radius:14px; padding:1.6rem 1.8rem 1.4rem;
box-shadow: 0 10px 24px rgba(10,54,67,.08);
position:relative; overflow:hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.testi-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.testi-card p{ color:#4b5563; line-height:1.75; }
/* Comillas grandes decorativas */
.testi-quote{
font-family: Georgia, 'Times New Roman', serif;
font-size:40px; line-height:1; color:var(--accent); margin-bottom:.25rem;
user-select:none;
}
@media (max-width: 575.98px){
.testi-card{ padding:1.4rem 1.4rem 1.2rem; }
.testi-quote{ font-size:36px; }
}
.eyebrow{letter-spacing:.2em;font-size:.8rem;text-transform:uppercase;opacity:.7}
.section-title{font-weight:800}
.title-underline{width:70px;height:3px;background:#c69c5e;border-radius:2px;margin-top:.5rem}
.blog-card{border:0;border-radius:14px;overflow:hidden;transition:transform .2s, box-shadow .2s}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 .8rem 2rem rgba(0,0,0,.12)}
.object-fit-cover{object-fit:cover}
.modal-content{border:0;border-radius:16px;overflow:hidden}
.modal-img-wrap{width:100%;height:280px;overflow:hidden}
.modal-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
/* Asegura que el footer del modal pueda alinear a la izquierda sin conflictos */
.modal-footer{gap:.5rem}
/* ===== CTA previa al footer ===== */
.footer-cta{
position: relative;
isolation: isolate;
color: #fff;
padding: 68px 0 84px; /* altura como la ref */
text-align: center;
}
.footer-cta__title{
font-weight: 800;
letter-spacing: -0.01em;
}
.footer-cta__sub{ opacity: .9; }
.btn-accent{
background: var(--accent);
color: #1c1c1c;
border: 0;
padding: .9rem 1.6rem;
font-weight: 700;
border-radius: 10px;
box-shadow: 0 10px 26px rgba(201,164,103,.25);
}
.btn-accent:hover{
background: var(--accent-dark);
color:#fff;
transform: translateY(-2px);
}
/* fondo con imagen oscurecida */
.footer-cta__bg{
position: absolute; inset: 0;
background:
linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.65)),
url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
z-index: -1;
}
/* ===== Footer oscuro ===== */
.site-footer{
background: #0b0f14; /* negro profundo */
color: rgba(255,255,255,.85);
padding: 38px 0 28px;
border-top: 1px solid rgba(255,255,255,.06);
}
.footer-head{
font-weight: 800;
color:#fff;
margin-bottom: 14px;
}
.footer-list{
list-style: none; padding: 0; margin: 0;
}
.footer-list li{
display: flex; gap:.6rem; align-items: center;
margin: .55rem 0;
}
.footer-list i{
color: var(--accent);
font-size: 1.05rem;
width: 1.2rem; text-align: center; flex: 0 0 auto;
}
.footer-list a{
color: rgba(255,255,255,.85);
text-decoration: none;
transition: color .2s ease;
}
.footer-list a:hover{ color:#fff; }
/* copy */
.footer-copy{
border-top: 1px solid rgba(255,255,255,.08);
margin-top: 26px;
padding-top: 18px;
}
@media (max-width: 991.98px){
.footer-cta{ padding: 56px 0 72px; }
}
@media (max-width: 575.98px){
.footer-cta__title{ font-size: 1.8rem; }
}
/* === Fix colores en la banda CTA === */
.footer-cta,
.footer-cta h1,
.footer-cta h2,
.footer-cta .footer-cta__title,
.footer-cta p,
.footer-cta a:not(.btn) {
color: #fff !important; /* texto blanco sí o sí */
}
/* Opcional: un leve halo para legibilidad sobre la foto */
.footer-cta h1,
.footer-cta h2,
.footer-cta p {
text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
/* Si querés que el botón también sea blanco con borde */
.footer-cta .btn-accent {
background: var(--accent);
color: #111 !important; /* dejalo oscuro si usás fondo dorado */
}
/* Instagram FLOAT (independiente del WhatsApp) */
.ig-float{
position:fixed;
right:25px;
bottom:100px; /* queda arriba del WhatsApp (que está en 25px) */
z-index:1060;
width:65px; height:65px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:#E4405F; /* color IG */
color:#fff;
font-size:28px;
box-shadow:0 15px 30px rgba(228,64,95,.35);
transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
animation: ig-pulse 2s infinite;
}
.ig-float:hover{
transform:scale(1.1) rotate(5deg);
box-shadow:0 20px 40px rgba(228,64,95,.45);
text-decoration:none;
color:#fff;
}
@keyframes ig-pulse{
0% { box-shadow:0 0 0 0 rgba(228,64,95,.6); }
70% { box-shadow:0 0 0 12px rgba(228,64,95,0); }
100% { box-shadow:0 0 0 0 rgba(228,64,95,0); }
}
/* Evitar superposición en pantallas muy chicas */
@media (max-width: 420px){
.ig-float{ bottom:95px; right:20px; width:58px; height:58px; font-size:26px; }
}
/* Respeta accesibilidad si el usuario reduce animaciones */
@media (prefers-reduced-motion: reduce){
.ig-float{ animation:none; }
}
modospapinamar.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.csshttps://unpkg.com/aos@next/dist/aos.css:root {
--primary-color: #5ac1a2;
--primary-dark: #3a9d80;
--primary-light: #8ad6c1;
--secondary-color: #f6f9f8;
--dark-color: #1a2e35;
--light-color: #ffffff;
--accent-color: #ff7e5f;
--text-color: #333333;
--text-light: #777777;
--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, #ff9a5f 100%);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@font-face {
font-family: 'Montserrat';
src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
}
@font-face {
font-family: 'Playfair Display';
src: url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Montserrat', sans-serif;
color: var(--text-color);
line-height: 1.6;
overflow-x: hidden;
background-color: var(--secondary-color);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 600;
}
.navbar {
background: rgba(255, 255, 255, 0.95);
box-shadow: var(--shadow-sm);
padding: 1rem 0;
transition: var(--transition);
}
.navbar.scrolled {
padding: 0.5rem 0;
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow-md);
}
.navbar-brand {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.5rem;
color: var(--primary-dark) !important;
display: flex;
align-items: center;
}
.navbar-brand i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
.nav-link {
color: var(--dark-color) !important;
font-weight: 500;
margin: 0 0.5rem;
position: relative;
transition: var(--transition);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: var(--transition);
}
.nav-link:hover::after {
width: 100%;
}
.nav-link.active {
color: var(--primary-color) !important;
}
.nav-link.active::after {
width: 100%;
}
.btn-primary {
background: var(--gradient-primary);
border: none;
padding: 0.75rem 1.75rem;
font-weight: 500;
letter-spacing: 0.5px;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-accent {
background: var(--gradient-accent);
color: white;
border: none;
padding: 0.75rem 1.75rem;
font-weight: 500;
letter-spacing: 0.5px;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.btn-accent:hover {
background: #ff6a45;
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.hero {
background: url('img/hero3.png') center/cover no-repeat;
min-height: 100vh;
color: var(--light-color);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(90, 193, 162, 0.2) 0%, rgba(26, 46, 53, 0.8) 100%);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
}
.hero h1 {
font-size: 4rem;
font-weight: 700;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.hero p {
font-size: 1.5rem;
margin-bottom: 2.5rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.section {
padding: 6rem 0;
position: relative;
}
.section-title {
color: var(--primary-dark);
font-weight: 700;
margin-bottom: 3rem;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 3px;
background: var(--accent-color);
}
.section-title.center::after {
left: 50%;
transform: translateX(-50%);
}
.bg-light {
background-color: var(--secondary-color) !important;
}
.bg-dark {
background-color: var(--dark-color) !important;
color: white;
}
.bg-primary {
background: var(--gradient-primary) !important;
color: white;
}
.service-card {
background: white;
border-radius: 12px;
padding: 2rem;
height: 100%;
transition: var(--transition);
box-shadow: var(--shadow-sm);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.service-card i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
display: inline-block;
}
.service-card h4 {
color: var(--primary-dark);
margin-bottom: 1rem;
}
.service-card ul {
list-style-type: none;
padding-left: 0;
}
.service-card ul li {
padding: 0.25rem 0;
position: relative;
padding-left: 1.5rem;
}
.service-card ul li::before {
content: '\f00c';
font-family: 'bootstrap-icons';
position: absolute;
left: 0;
color: var(--primary-color);
}
.feature-box {
text-align: center;
padding: 2rem;
transition: var(--transition);
}
.feature-box i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
background: rgba(90, 193, 162, 0.1);
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
display: inline-block;
transition: var(--transition);
}
.feature-box:hover i {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
.feature-box h5 {
margin-bottom: 1rem;
}
.feature-box p {
color: var(--text-light);
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.gallery-item img {
transition: var(--transition);
width: 100%;
height: auto; max-height: 400px;
object-fit: cover;
}
.gallery-item:hover {
box-shadow: var(--shadow-lg);
}
.gallery-item:hover img {
transform: scale(1.05);
/* ...cortado... */
/* --- Further lower hero content as requested --- */
.hero-content{
padding-top:9rem;
}
@media (max-width:992px){
.hero-content{
padding-top:11rem;
}
}
@media (max-width:576px){
.hero-content{
padding-top:13rem;
}
}
/* --- Prevent horizontal overflow & further adjust hero --- */
html,body{
overflow-x:hidden;
}
.hero-content{
padding-top:11rem;
}
@media (max-width:992px){
.hero-content{
padding-top:14rem;
}
}
@media (max-width:576px){
.hero-content{
padding-top:17rem;
}
}
fleteslopez.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap:root {
--primary: #111827;
--accent: #1d4ed8;
--accent-hover: #1e40af;
--accent-soft: #e0ecff;
--text-main: #111827;
--text-muted: #6b7280;
--bg-soft: #f3f4f6;
--radius-lg: 18px;
--shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.15);
--shadow-hover: 0 25px 50px rgba(15, 23, 42, 0.2);
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text-main);
background: #ffffff;
overflow-x: hidden;
}
.section {
padding: 90px 0;
position: relative;
}
.section-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
color: var(--text-muted);
max-width: 640px;
margin: 0.5rem auto 0;
font-size: 1.1rem;
line-height: 1.6;
}
.eyebrow {
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.15em;
color: var(--accent);
font-weight: 600;
display: inline-block;
margin-bottom: 0.75rem;
position: relative;
}
.eyebrow::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 30px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
/* NAVBAR */
.navbar {
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
transition: var(--transition);
padding: 0.75rem 0;
}
.navbar.scrolled {
padding: 0.5rem 0;
box-shadow: 0 5px 20px rgba(15, 23, 42, 0.1);
}
.navbar-brand span.brand-title {
font-weight: 800;
font-size: 1.2rem;
line-height: 1.1;
background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.navbar-brand span.brand-sub {
font-size: 0.78rem;
color: var(--text-muted);
}
.nav-link {
font-weight: 500;
color: #4b5563;
position: relative;
transition: var(--transition);
padding: 0.5rem 1rem !important;
border-radius: 8px;
}
.nav-link:hover,
.nav-link:focus {
color: var(--accent);
background: rgba(29, 78, 216, 0.05);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--accent);
transition: var(--transition);
transform: translateX(-50%);
}
.nav-link:hover::after {
width: 70%;
}
.btn-cta-nav {
font-size: 0.9rem;
padding: 0.6rem 1.2rem;
border-radius: 999px;
border: none;
background: var(--accent);
color: #fff;
font-weight: 600;
transition: var(--transition);
box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}
.btn-cta-nav:hover {
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
}
.btn-cta-nav i {
margin-right: 0.35rem;
}
/* HERO */
#inicio {
padding-top: 120px;
padding-bottom: 100px;
background: radial-gradient(circle at top left, #e0ecff 0, #ffffff 40%, #f9fafb 100%);
position: relative;
overflow: hidden;
}
#inicio::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(29,78,216,0.03)"/></svg>');
background-size: cover;
z-index: 0;
}
.hero-title {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 1.5rem;
color: #0f172a;
line-height: 1.2;
}
.hero-lead {
font-size: 1.1rem;
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.hero-badge {
font-size: 0.85rem;
background: #ffffff;
border-radius: 999px;
padding: 0.4rem 1rem;
border: 1px solid #e5e7eb;
color: #374151;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: var(--transition);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.hero-badge:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
border-color: var(--accent);
}
.hero-badge i {
color: var(--accent);
font-size: 0.9rem;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin-bottom: 1.5rem;
}
.btn-hero-main {
padding: 0.9rem 2rem;
border-radius: 999px;
font-weight: 600;
border: none;
background: var(--accent);
color: #ffffff;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: var(--shadow-soft);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-hero-main::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: 0.5s;
}
.btn-hero-main:hover::before {
left: 100%;
}
.btn-hero-main:hover {
background: var(--accent-hover);
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.btn-hero-ghost {
padding: 0.9rem 1.8rem;
border-radius: 999px;
font-weight: 500;
border: 1px solid #cbd5f5;
background: rgba(255, 255, 255, 0.85);
color: #1f2933;
display: inline-flex;
align-items: center;
gap: 0.45rem;
transition: var(--transition);
}
.btn-hero-ghost:hover {
background: #ffffff;
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.hero-footnote {
font-size: 0.9rem;
color: var(--text-muted);
max-width: 500px;
}
.hero-image-wrapper {
max-width: 520px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.hero-image-card {
border-radius: 26px;
background: #ffffff;
box-shadow: var(--shadow-soft);
overflow: hidden;
position: relative;
transition: var(--transition);
}
.hero-image-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.hero-image-card img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
transition: var(--transition);
}
.hero-image-card:hover img {
transform: scale(1.03);
}
.hero-pill {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(15, 23, 42, 0.88);
color: #
/* ...cortado... */
/* Servicio “pro”: icono + subtítulo + tags */
.service-card-header {
display: flex;
align-items: flex-start;
gap: 0.9rem;
margin-bottom: 0.75rem;
}
.service-card-icon {
width: 42px;
height: 42px;
border-radius: 14px;
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.2rem;
}
.service-card h3 {
margin-bottom: 0.15rem;
}
.service-card-sub {
font-size: 0.86rem;
color: var(--text-muted);
}
.service-card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
margin-bottom: 0.75rem;
}
.service-tag {
font-size: 0.72rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: #f3f4f6;
color: #6b7280;
border: 1px solid #e5e7eb;
}
/* Tira de highlights arriba de los servicios */
.service-highlights {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
.service-pill {
padding: 0.45rem 0.9rem;
border-radius: 999px;
background: rgba(29, 78, 216, 0.06);
border: 1px solid rgba(129, 140, 248, 0.35);
font-size: 0.8rem;
color: #1f2937;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.service-pill i {
font-size: 0.9rem;
color: var(--accent);
}
@media (max-width: 767.98px) {
.service-card-header {
align-items: center;
}
}
:root{
/* Colores WhatsApp */
--wa:#25D366;
--wa-dark:#128C7E;
/* Colores adaptados al sitio Fletes López (azules) */
--wa-head:#1d4ed8; /* azul principal del sitio */
--wa-text:#111827;
--wa-muted:#9ca3af;
--wa-bg:#ffffff;
--wa-border:#e5e7eb;
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
.wa-btn{
background:linear-gradient(135deg,var(--wa),var(--wa-dark));
color:#fff;
border:0;
width:60px;
height:60px;
border-radius:50%;
display:grid;
place-items:center;
box-shadow:0 10px 30px rgba(15,23,42,.35);
cursor:pointer;
transition:transform .3s, box-shadow .3s, background .3s;
position:relative;
overflow:hidden;
}
.wa-btn::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
opacity:0;
transition:opacity .3s;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(15,23,42,.45);
}
.wa-btn:hover::after{ opacity:1; }
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:var(--wa-bg);
color:var(--wa-text);
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 60px rgba(15,23,42,.45);
border:1px solid var(--wa-border);
transform:translateY(10px);
opacity:0;
transition:transform .3s, opacity .3s;
}
.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,#1d4ed8,#3b82f6);
border-bottom:1px solid var(--wa-border);
color:#f9fafb;
}
.wa-avatar{
width:40px;
height:40px;
border-radius:8px;
background:#0f172a;
display:grid;
place-items:center;
border:1px solid rgba(148,163,184,.7);
overflow:hidden;
}
.wa-title{
font-weight:700;
font-size:1.05rem;
}
.wa-status{
font-size:.85rem;
color:#e5e7eb;
display:flex;
align-items:center;
gap:6px;
}
.wa-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#22c55e;
}
.wa-close{
margin-left:auto;
background:transparent;
color:#0b1120;
border:0;
font-size:24px;
cursor:pointer;
opacity:.7;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
background:rgba(15,23,42,.06);
}
.wa-close:hover{
opacity:1;
background:rgba(15,23,42,.12);
}
.wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
background:#ffffff;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
line-height:1.35;
box-shadow:0 4px 10px rgba(15,23,42,.08);
animation:fadeIn .25s ease;
font-size:.95rem;
}
@keyframes fadeIn{
from{opacity:0; transform:translateY(5px);}
to{opacity:1; transform:none;}
}
.wa-bot{
background:#f9fafb;
border:1px solid #e5e7eb;
align-self:flex-start;
border-bottom-left-radius:4px;
}
.wa-user{
background:#e0ecff;
border:1px solid #bfdbfe;
align-self:flex-end;
border-bottom-right-radius:4px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
background:#f9fafb;
border-top:1px solid var(--wa-border);
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px 12px;
border:1px solid var(--wa-border);
background:#ffffff;
color:var(--wa-text);
outline:none;
min-height:44px;
font-family:inherit;
font-size:.95rem;
transition:.2s;
}
.wa-compose textarea:focus{
border-color:#1d4ed8;
box-shadow:0 0 0 2px rgba(37,99,235,.18);
}
.wa-send{
background:var(--wa);
color:#ffffff;
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:var(--wa-dark);
transform:scale(1.05);
}
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background:rgba(15,23,42,.02); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.25); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(15,23,42,.35); }
@media (max-width:480px){
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width:calc(100vw - 24px); right:0; }
}
piedrafirme.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.csshttps://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;600;700;800&display=swap:root {
--primary: #006164;
--primary-soft: #0b7f83;
--primary-light: #e6f4f5;
--accent: #d9bd7d;
--accent-dark: #c4a862;
--dark: #12212a;
--muted: #6b7280;
--line: #e2e8f0;
--bg: #f5f7fb;
--radius: 20px;
--shadow: 0 10px 30px rgba(0, 97, 100, .08);
--shadow-lg: 0 20px 50px rgba(0, 97, 100, .14);
--shadow-xl: 0 25px 70px rgba(0, 97, 100, .20);
--grad: linear-gradient(135deg, #006164 0%, #0b7f83 50%, #d9bd7d 100%);
--transition: .35s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
color: var(--dark);
background: #fff;
line-height: 1.7;
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
right: 0;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(217, 189, 125, .06), transparent 70%);
pointer-events: none;
z-index: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
line-height: 1.2;
}
/* ===== NAVBAR ===== */
.navbar-piedra {
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid rgba(0, 97, 100, .08);
box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
transition: var(--transition);
padding: 1rem 0;
}
.navbar-piedra.scrolled {
background: rgba(255, 255, 255, .98);
box-shadow: 0 4px 30px rgba(0, 0, 0, .08);
}
.navbar-piedra .navbar-brand {
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
font-size: .95rem;
color: var(--dark);
transition: var(--transition);
display: flex;
align-items: center;
gap: .8rem;
}
.navbar-piedra .navbar-brand:hover {
color: var(--primary);
transform: translateY(-1px);
}
.navbar-piedra .nav-link {
font-weight: 600;
letter-spacing: .03em;
font-size: .88rem;
color: #1f2933;
padding: .6rem 1.1rem !important;
margin: 0 .15rem;
border-radius: 12px;
transition: var(--transition);
position: relative;
}
.navbar-piedra .nav-link::after {
content: '';
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 24px;
height: 3px;
background: var(--accent);
border-radius: 999px;
transition: var(--transition);
}
.navbar-piedra .nav-link:hover,
.navbar-piedra .nav-link.active {
color: var(--primary);
background: var(--primary-light);
}
.navbar-piedra .nav-link:hover::after,
.navbar-piedra .nav-link.active::after {
transform: translateX(-50%) scaleX(1);
}
.brand-img {
height: 86px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .1));
transition: var(--transition);
}
.navbar-brand:hover .brand-img {
transform: rotate(-3deg) scale(1.05);
}
.brand-text {
white-space: nowrap;
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===== HERO ===== */
.hero {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
background:
radial-gradient(ellipse at 15% 20%, rgba(217, 189, 125, .12), transparent 50%),
radial-gradient(ellipse at 85% 10%, rgba(0, 97, 100, .08), transparent 55%),
linear-gradient(180deg, #fafbfc 0%, #f0f4f8 100%);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(217, 189, 125, .15), transparent 65%);
border-radius: 50%;
animation: float 20s ease-in-out infinite;
}
.hero::after {
content: '';
position: absolute;
bottom: -150px;
left: -150px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(0, 97, 100, .1), transparent 65%);
border-radius: 50%;
animation: float 25s ease-in-out infinite reverse;
}
@keyframes float {
0%,
100% {
transform: translate(0, 0) rotate(0deg)
}
33% {
transform: translate(30px, -30px) rotate(5deg)
}
66% {
transform: translate(-20px, 20px) rotate(-3deg)
}
}
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
padding-top: 5rem;
padding-bottom: 4rem;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .45rem 1rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(0, 97, 100, .1), rgba(0, 97, 100, .05));
border: 1px solid rgba(0, 97, 100, .15);
color: var(--primary);
font-size: .82rem;
font-weight: 600;
margin-bottom: 1rem;
animation: slideDown .8s ease;
box-shadow: 0 4px 15px rgba(0, 97, 100, .08);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.hero-eyebrow {
text-transform: uppercase;
letter-spacing: .25em;
font-size: .8rem;
color: var(--accent-dark);
font-weight: 700;
margin-bottom: .8rem;
animation: slideDown .8s .1s ease both;
}
.hero-title {
font-size: clamp(2.4rem, 4vw, 4rem);
line-height: 1.15;
margin-bottom: 1.3rem;
color: var(--dark);
animation: slideDown .8s .2s ease both;
font-weight: 800;
}
.hero-highlight {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-colo
/* ...cortado... */
:root{
--wa:#25D366;
--wa-dark:#128C7E;
--wa-text:#12212a;
--wa-muted:#6b7280;
--wa-bg:#ffffff;
--wa-border:#e4e4e4;
/* color cabeza acorde a la web (primary Piedra Firme) */
--wa-head:#006164;
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
.wa-btn{
background:linear-gradient(135deg,var(--wa),var(--wa-dark));
color:#fff;
border:0;
width:60px;
height:60px;
border-radius:50%;
display:grid;
place-items:center;
box-shadow:0 10px 30px rgba(0,0,0,.25);
cursor:pointer;
transition:transform .3s, box-shadow .3s, background .3s;
position:relative;
overflow:hidden;
}
.wa-btn::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
opacity:0;
transition:opacity .3s;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.wa-btn:hover::after{ opacity:1; }
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:var(--wa-bg);
color:var(--wa-text);
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.25);
border:1px solid var(--wa-border);
transform:translateY(10px);
opacity:0;
transition:transform .3s, opacity .3s;
}
.wa-card[aria-modal="true"]{
transform:translateY(0);
opacity:1;
}
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:var(--wa-head);
border-bottom:1px solid var(--wa-border);
color:#f9fafb;
}
.wa-avatar{
width:40px;
height:40px;
border-radius:8px;
background:#fff;
display:grid;
place-items:center;
border:1px solid var(--wa-border);
overflow:hidden;
}
.wa-title{
font-weight:700;
font-size:1.05rem;
}
.wa-status{
font-size:.85rem;
color:var(--wa-muted);
display:flex;
align-items:center;
gap:6px;
}
.wa-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--wa);
}
.wa-close{
margin-left:auto;
background:transparent;
color:#000;
border:0;
font-size:24px;
cursor:pointer;
opacity:.6;
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,.06);
}
.wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
background:#ffffff;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
line-height:1.35;
box-shadow:0 4px 10px rgba(0,0,0,.08);
animation:fadeIn .25s ease;
font-size:.95rem;
}
@keyframes fadeIn{
from{opacity:0; transform:translateY(5px);}
to{opacity:1; transform:none;}
}
.wa-bot{
background:#f7f7f7;
border:1px solid #e8e8e8;
align-self:flex-start;
border-bottom-left-radius:4px;
}
.wa-user{
background:#e9fdf1;
border:1px solid #c4f1d8;
align-self:flex-end;
border-bottom-right-radius:4px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
background:#fafafa;
border-top:1px solid var(--wa-border);
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px 12px;
border:1px solid var(--wa-border);
background:#ffffff;
color:var(--wa-text);
outline:none;
min-height:44px;
font-family:inherit;
font-size:.95rem;
transition:.2s;
}
.wa-compose textarea:focus{
border-color:var(--wa);
box-shadow:0 0 0 2px rgba(37,211,102,.15);
}
.wa-send{
background:var(--wa);
color:#ffffff;
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:var(--wa-dark);
transform:scale(1.05);
}
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background:rgba(0,0,0,.02); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.3); }
@media (max-width:480px){
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width:calc(100vw - 24px); right:0; }
}
generadoresargentina.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swapp.section-subtitle {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
h2.section-title {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Catálogo: permitir que el iframe “full-bleed” no se recorte por el card */
#catalogo .card-modern{
overflow: visible !important;
border-radius: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* Refuerzo: el propio iframe sin radios dentro del card */
#catalogo .card-modern iframe{
border-radius: 0 !important;
}
.section-subtitle-muted {
color: #6c757d !important;
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
font-size: 1rem;
line-height: 1.5;
}
.section-title{
font-size:2.5rem;
font-weight:900;
text-align:left !important;
margin-bottom:.6rem;
position:relative;
display:inline-block;
}
.section-title::after{
content:"";
position:absolute;
bottom:-10px;
left:0;
width:60px;
height:4px;
background:linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius:2px;
}
.section-subtitle{
color:var(--gray-600);
text-align:left !important;
margin:0 0 1.6rem !important;
max-width:760px;
}
.catalogo-iframe-wrapper {
width: 100%;
}
/* Altura por defecto (mobile / general) */
.catalogo-iframe {
width: 100%;
min-height: 420px; /* ajustá si querés un poco menos/más */
border: 0;
}
/* En desktop, un poco más de alto */
@media (min-width: 992px) {
.catalogo-iframe {
min-height: 620px; /* subimos un poco, sin ocupar toda la pantalla */
}
}
:root {
--primary: #f2a700;
--primary-dark: #c88400;
--primary-light: #ffd266;
--accent: #000000;
--ink: #0f172a;
--light: #ffffff;
--gray-100: #f5f6f8;
--gray-200: #eceff3;
--gray-300: #d7dde5;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-900: #111827;
--radius: 16px;
--radius-lg: 24px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.06);
--shadow: 0 8px 20px rgba(0,0,0,.08);
--shadow-md: 0 12px 24px rgba(0,0,0,.12);
--shadow-lg: 0 24px 48px rgba(0,0,0,.15);
--transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
--gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-light));
--gradient-dark: linear-gradient(135deg, #000, #333);
--gradient-hero: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
color:var(--ink);
background:var(--light);
line-height:1.6;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-weight:800;color:var(--gray-900)}
.text-brand{color:var(--primary)}
.bg-brand{background:var(--primary)!important}
.badge-brand{background:var(--primary); color:#000; font-weight:700}
/* Navbar mejorada */
.navbar{
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0,0,0,0.05);
padding: 1rem 0;
transition: var(--transition);
}
.navbar.scrolled {
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.navbar .navbar-brand{
font-weight:900; letter-spacing:.2px; display:flex; align-items:center; gap:.5rem; color:var(--accent);
}
.navbar .navbar-brand img{height:40px; width:auto; transition: var(--transition);}
.navbar .navbar-brand:hover img {
transform: scale(1.05);
}
.navbar .nav-link{
color:var(--gray-700);
border-radius:10px;
padding:.5rem .9rem !important;
font-weight:600;
position: relative;
transition: var(--transition);
}
.navbar .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--primary);
transition: var(--transition);
transform: translateX(-50%);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
width: 70%;
}
.navbar .nav-link:hover{color:var(--accent)}
.navbar .nav-link.active{color:#000; background:linear-gradient(90deg, rgba(242,167,0,.15), rgba(0,0,0,.05))}
/* Botones mejorados */
.btn-primary{
background: var(--gradient-primary);
border:none;
border-radius:var(--radius);
font-weight:800;
color:#000;
box-shadow:var(--shadow);
padding: 0.75rem 1.5rem;
position: relative;
overflow: hidden;
transition: var(--transition);
z-index: 1;
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
opacity: 0;
transition: var(--transition);
z-index: -1;
}
.btn-primary:hover::before {
opacity: 1;
}
.btn-primary:hover{
transform:translateY(-3px);
box-shadow: var(--shadow-md);
}
.btn-outline-dark{
border:2px solid #000;
color:#000;
border-radius:var(--radius);
font-weight:700;
padding: 0.75rem 1.5rem;
transition: var(--transition);
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-outline-dark::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
transform: translateX(-100%);
transition: var(--transition);
z-index: -1;
}
.btn-outline-dark:hover::before {
transform: translateX(0);
}
.btn-outline-dark:hover{
color:#fff;
transform: translateY(-3px);
box-shadow: var(--shadow);
}
/* Hero base (luego se reemplaza por HERO PRO)*/
.hero{
padding: 7rem 0 5rem;
background: var(--gradient-hero);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 70%;
height: 200%;
background: radial-gradient(circle, rgba(242,167,0,0.05) 0%, rgba(242,167,0,0) 70%);
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero .chip{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.5rem 1rem;
border-radius:999px;
background:rgba(242,167,0,.15);
color:#000;
font-weight:700;
font-size:.9rem;
border:1px solid rgba(0,0,0,.06);
backdrop-filter: blur(10px);
animation: fadeInUp 0.8s ease;
}
.hero h1 {
animation: fadeInUp 0.8s ease 0.2s both;
}
.hero p {
animation: fadeInUp 0.8s ease 0.4s both;
}
.hero .hero-illus{
max-width:520px;
width:100%;
height:auto;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
transition:var(--transition);
animation: fadeInRight 1s ease 0.6s both;
}
.hero .hero-illus:hover{
transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-lg);
}
/* Secciones */
section{padding:4rem 0; position: relative;}
.section-title{
font-size:2.5rem;
font-weight:900;
text-align:center;
margin-bottom:1rem;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--gradient-primary);
border-radius: 2px;
}
.section-subtitle{
color:var(--gray-600);
text-align:center;
margin:0 auto 3rem;
max-width:760px;
font-size: 1.1rem;
}
/* Cards mejoradas */
.card-modern{
background:#fff;
border:1px solid var(--gray-200);
border-radius:var(--radius-lg);
box-shadow:var(--shadow);
transition:var(--transition);
overflow:hidden;
position: relative;
}
.card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transform-origin: left;
transition: var(--transition);
}
.card-modern:hover::before {
transform: scaleX(1);
}
.card-modern:hover{
transform:translateY(-8px
/* ...cortado... */
/* Quitamos padding lateral SOLO en la sección catálogo para que el iframe no se corte */
#catalogo .container, #catalogo .container-fluid{
padding-left:0 !important;
padding-right:0 !important;
}
/* Iframe full-bleed con 100vw y centrado, sin redondeos (evita corte derecho) */
#catalogo iframe,
iframe.catalog-iframe,
iframe#tienda,
iframe[src*="tienda"],
iframe[src*="store"],
iframe[src*="catalog"],
iframe[src*="shop"]{
width:100vw !important;
max-width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
display:block !important;
border:0 !important;
border-radius:0 !important;
background:#fff;
}
/* Alturas generosas para mostrar muchos productos sin quedar corto (cross-origin safe) */
@media (max-width:576px){
#catalogo iframe,
iframe.catalog-iframe,
iframe#tienda,
iframe[src*="tienda"],
iframe[src*="store"],
iframe[src*="catalog"],
iframe[src*="shop"]{ min-height:135vh !important; }
}
@media (min-width:576px) and (max-width:991.98px){
#catalogo iframe,
iframe.catalog-iframe,
iframe#tienda,
iframe[src*="tienda"],
iframe[src*="store"],
iframe[src*="catalog"],
iframe[src*="shop"]{ min-height:105vh !important; }
}
@media (min-width:992px){
#catalogo iframe,
iframe.catalog-iframe,
iframe#tienda,
iframe[src*="tienda"],
iframe[src*="store"],
iframe[src*="catalog"],
iframe[src*="shop"]{ min-height:92vh !important; }
}
/* Seguridad */
html, body{overflow-x:hidden}
@media (max-width: 576px){
.navbar{ padding:.5rem 0 !important; }
.hero{ padding:3.25rem 0 1.5rem !important; }
.hero h1{
font-size:1.8rem !important;
line-height:1.15 !important;
margin:.6rem 0 .75rem !important;
letter-spacing:.1px;
}
.hero .mt-4{ margin-top:1rem !important; }
.hero p.lead{
font-size:1rem !important;
line-height:1.45 !important;
margin-bottom:1rem !important;
}
.hero .chip{
font-size:.8rem !important;
padding:.4rem .8rem !important;
}
.list-check{ margin-bottom:1rem !important; }
.list-check li{
margin:.25rem 0 !important;
gap:.4rem !important;
align-items:flex-start !important;
}
.list-check i{ margin-top:.15rem !important; }
.hero .d-flex{ gap:.5rem !important; }
.hero .btn{ padding:.6rem 1rem !important; }
section{ padding:2.75rem 0 !important; }
}
/* === Eyebrow label + hero stack compacto === */
.eyebrow{
display:inline-flex;
align-items:center;
gap:.45rem;
padding:.28rem .7rem;
font-size:.85rem;
font-weight:700;
letter-spacing:.15px;
border-radius:999px;
color:#000;
background:linear-gradient(135deg, rgba(242,167,0,.18), rgba(242,167,0,.08));
border:1px solid rgba(0,0,0,.06);
backdrop-filter: blur(6px);
}
.hero .eyebrow{ margin:0 0 .5rem; }
.hero h1{ margin:.2rem 0 .65rem !important; line-height:1.1; }
.hero .lead{ margin:0 0 .9rem !important; }
.hero .list-check{ margin:.2rem 0 .9rem !important; }
.hero .d-flex{ gap:.6rem !important; }
/* Títulos y subtítulos más cercanos en secciones */
.section-title{ margin-bottom:.4rem !important; }
.section-subtitle{ margin:0 auto 1.6rem !important; }
/* Hero más compacto en desktop */
@media (min-width: 577px){
.hero{ padding: 5.25rem 0 3.25rem !important; }
}
#catalogo.section,
section#catalogo {
padding-top: clamp(1.25rem, 1.8vw, 2rem) !important;
padding-bottom: clamp(1.25rem, 1.8vw, 2rem) !important;
scroll-margin-top: 80px;
}
#catalogo .section-title{ margin-bottom:.25rem !important; }
#catalogo .section-subtitle{ margin:0 0 .75rem !important; }
#catalogo iframe,
#catalogo .catalog-iframe{
display:block !important;
}
@media (max-width: 576px){
#catalogo iframe,
#catalogo .catalog-iframe{ min-height: 135vh !important; }
}
@media (min-width: 577px) and (max-width: 991.98px){
#catalogo iframe,
#catalogo .catalog-iframe{ min-height: 115vh !important; }
}
@media (min-width: 992px){
#catalogo iframe,
#catalogo .catalog-iframe{ min-height: 92vh !important; }
}
#catalogo .card-modern{ margin-top:.25rem !important; }
#catalogo .text-center.mt-4{ margin-top:1.25rem !important; }
section#catalogo:has(.cards),
#catalogo:has(.cards) {
min-height: auto !important;
padding-top: clamp(.8rem, 1.2vw, 1.25rem) !important;
padding-bottom: clamp(.8rem, 1.2vw, 1.25rem) !important;
}
#catalogo .cards { margin-bottom: .75rem !important; }
#catalogo .catalogo-cta,
#catalogo .open-catalog-cta,
#catalogo .btn-open-catalog {
margin-top: .75rem !important;
}
#catalogo .catalog-iframe,
#catalogo iframe {
min-height: auto;
}
@media (max-width: 576px){
#catalogo:has(iframe),
section#catalogo:has(iframe){
min-height: 0;
}
#catalogo:has(iframe) iframe,
section#catalogo:has(iframe) iframe{
min-height: 125vh !important;
}
}
@media (min-width: 992px){
#catalogo:has(.cards) iframe,
section#catalogo:has(.cards) iframe{
min-height: 70vh !important;
}
}
#catalogo .catalog-iframe,
#catalogo iframe.catalog-iframe {
display: none !important;
min-height: 0 !important;
height: auto !important;
}
#catalogo iframe.catalog-iframe[src*="cat="],
#catalogo iframe.catalog-iframe[src*="categoria"],
#catalogo iframe.catalog-iframe[src*="category"],
#catalogo iframe.catalog-iframe[src*="productos"],
#catalogo iframe.catalog-iframe[src*="producto"],
#catalogo iframe.catalog-iframe[src*="product"],
#catalogo iframe.catalog-iframe[src*="view="]{
display: block !important;
}
@media (max-width: 576px){
#catalogo iframe.catalog-iframe[src]{ min-height: 125vh !important; }
}
@media (min-width: 577px) and (max-width: 991.98px){
#catalogo iframe.catalog-iframe[src]{ min-height: 105vh !important; }
}
@media (min-width: 992px){
#catalogo iframe.catalog-iframe[src]{ min-height: 85vh !important; }
}
section#catalogo, #catalogo.section {
padding-top: clamp(.5rem, .9vw, 1rem) !important;
padding-bottom: clamp(.6rem, 1vw, 1.1rem) !important;
}
#catalogo .open-catalog-cta,
#catalogo .btn-open-catalog,
#catalogo .catalogo-cta{
margin-top: .5rem !important;
}
#catalogo .catalog-iframe,
#catalogo iframe.catalog-iframe {
display: block !important;
width: 100% !important;
border: 0;
}
@media (max-width: 576px){
#catalogo iframe.catalog-iframe{ min-height: 120vh !important; }
}
@media (min-width: 577px) and (max-width: 991.98px){
#catalogo iframe.catalog-iframe{ min-height: 100vh !important; }
}
@media (min-width: 992px){
#catalogo iframe.catalog-iframe{ min-height: 60vh !important; }
}
section#catalogo, #catalogo.section {
padding-top: clamp(.6rem, 1vw, 1.1rem) !important;
padding-bottom: clamp(.6rem, 1vw, 1.1rem) !important;
}
section#catalogo .container,
#catalogo.section .container {
max-width: 1200px;
margin-left: auto !important;
margin-right: auto !important;
}
#catalogo .section-title,
#catalogo .section-subtitle {
text-align: center !important;
}
#catalogo .cards {
display: grid !important;
gap: 1.1rem;
justify-content: center;
align-content: start;
}
@media (min-width: 1200px){
#catalogo .cards { grid-template-columns: repeat(4, minmax(240px, 1fr)); }
}
@media (min-width: 992px) and (max-width: 1199.98px){
#catalogo .cards { grid-template-columns: repeat(3, minmax(260px, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px){
#catalogo .cards { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 767.98px){
#catalogo .cards { grid-template-columns: 1fr; }
}
#catalogo .card,
#catalogo .card-modern {
width: 100%;
max-width: 290px;
margin-left: auto;
margin-right: auto;
}
#catalogo iframe.catalog-iframe {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
section#catalogo .container,
#catalogo.section .container {
display: block !important;
width: min(1200px, 100%) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
#catalogo .row,
#catalogo .row-2,
#catalogo .row-3,
#catalogo .row-4 {
display: block !important;
width: 100% !important;
margin: 0 auto !important;
}
#catalogo .cards {
display: grid !important;
width: 100% !important;
gap: 1.1rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
justify-items: stretch;
align-items: stretch;
justify-content: center;
}
#catalogo .card,
#catalogo .card-modern {
max-width: none !important;
min-width: 260px;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#catalogo iframe.catalog-iframe {
display: block !important;
width: min(1200px, 100%) !important;
margin-left: auto !important;
margin-right: auto !important;
}
#catalogo iframe.catalog-iframe,
#catalogo iframe#tiendaFrame{
display:block !important;
width:100% !important;
border:0 !important;
overflow:hidden !important;
}
@media (max-width: 576px){
#catalogo iframe#tiendaFrame{ min-height: 140vh !important; }
}
@media (min-width: 577px) and (max-width: 991.98px){
#catalogo iframe#tiendaFrame{ min-height: 115vh !important; }
}
@media (min-width: 992px){
#catalogo iframe#tiendaFrame{ min-height: 95vh !important; }
}
#tienda-inline{
padding-top: 2rem;
padding-bottom: 2rem;
}
#tienda-inline .container{
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#tienda-inline .card-modern{
padding: 0.75rem;
background: #f6f7f9;
border-radius: var(--radius-lg, 24px);
box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.08));
overflow: hidden;
border: 1px solid var(--gray-200, #eceff3);
}
#tienda-inline iframe#tienda2Inline{
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
border: 0 !important;
border-radius: var(--radius-lg, 24px);
background: #fff;
height: 520px !important;
overflow: hidden;
}
#tienda-inline iframe#tienda2Inline[src*="tienda"]{
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
min-height: 0 !important;
}
#tienda-inline .section-title,
#tienda-inline .section-subtitle {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
#catalogo .container{
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#catalogo .card-modern{
padding: 0.75rem;
background: #f6f7f9;
border-radius: var(--radius-lg, 24px);
box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.08));
overflow: hidden;
border: 1px solid var(--gray-200, #eceff3);
}
#catalogo iframe.catalog-iframe,
#catalogo iframe#tiendaFrame{
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
border: 0 !important;
border-radius: var(--radius-lg, 24px);
background: #fff;
height: 520px !important;
overflow: auto !important;
}
@media (max-width: 9999px){
#catalogo iframe#tiendaFrame{
min-height: 0 !important;
}
}
@media (min-width: 992px){
section#catalogo,
#catalogo.section {
padding-top: 1.8rem !important;
padding-bottom: 1.8rem !important;
min-height: auto !important;
}
section#alquiler {
padding-top: 2.5rem !important;
padding-bottom: 2.8rem !important;
}
/* Evitar que reglas anteriores le metan min-height exagerado al iframe */
#catalogo iframe#tiendaFrame,
#catalogo iframe.catalog-iframe {
min-height: 0 !important;
}
}
.hero-pro{
position: relative;
padding: clamp(3.25rem, 6vw, 6rem) 0 clamp(1.75rem, 3vw, 3rem);
background: var(--gradient-hero, linear-gradient(135deg, #ffffff 0%, #f8fafc 100%));
overflow: hidden;
}
.hero-pro::before{
content:"";
position:absolute; inset:-20% -10% auto auto;
width:70%; height:70%;
background: radial-gradient(circle at 70% 30%, rgba(242,167,0,.10), rgba(242,167,0,0) 60%);
pointer-events:none;
}
.hero-pro__content{ position: relative; z-index: 1; }
.hero-pro__eyebrow{
display:inline-flex; align-items:center; gap:.45rem;
padding:.3rem .75rem; font-weight:700; font-size:.9rem;
color:#000; border-radius:999px;
background:linear-gradient(135deg, rgba(242,167,0,.18), rgba(242,167,0,.08));
border:1px solid rgba(0,0,0,.06);
backdrop-filter: blur(6px);
margin:0 0 .5rem;
}
.hero-pro__title{
margin:.2rem 0 .6rem; line-height:1.1;
font-weight:900; font-size:clamp(1.9rem, 3.2vw, 2.75rem);
}
.hero-pro__lead{
margin:0 0 1rem;
font-size:clamp(1rem, 1.2vw, 1.125rem);
line-height:1.5; color:var(--gray-700, #374151);
max-width: 52ch;
}
.hero-pro__bullets{ margin:.2rem 0 1rem; }
.hero-pro__bullets li{
display:grid; grid-template-columns: 22px 1fr;
column-gap:.55rem; row-gap:.45rem;
align-items:flex-start;
padding:.25rem 0;
}
.hero-pro__bullets i{
color:var(--primary, #f2a700);
font-size:1.05rem; line-height:1.2;
margin-top:.1rem;
}
.hero-pro__bullets span{ line-height:1.45; }
.hero-pro__image{
max-width:520px; width:100%; height:auto;
border-radius: var(--radius-lg, 24px);
box-shadow: var(--shadow-lg, 0 24px 48px rgba(0,0,0,.15));
transition: transform .25s ease, box-shadow .25s ease;
}
.hero-pro__image:hover{ transform: translateY(-4px) scale(1.015); }
.hero-pro__cta .btn{ padding:.65rem 1.1rem; }
@media (max-width: 576px){
.hero-pro__cta{ gap:.6rem !important; }
.hero-pro__cta .btn{ width:100%; }
}
@media (max-width: 576px){
.hero-pro{ padding: 3rem 0 1.4rem; }
.hero-pro__title{ font-size:1.85rem; margin:.3rem 0 .6rem; }
.hero-pro__lead{ font-size:1rem; margin-bottom:.9rem; }
.hero-pro__bullets{ margin-bottom:.9rem; }
.hero-pro__bullets li{ padding:.15rem 0; }
}
#tiendaFrame {
width: 100% !important;
max-width: 100% !important;
height: 1800px !important;
min-height: 1800px !important;
border: 0 !important;
overflow: auto !important;
display: block !important;
}
.site-footer .footer-link{
color:#fff; text-decoration:none; transition:opacity .2s ease;
}
.site-footer .footer-link:hover{ opacity:.7; }
odontologiacm.com.ar
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.csshttps://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap:root {
/* Paleta de colores optimizada */
--primary: #1a76d2;
--primary-dark: #1565c0;
--primary-light: #e3f2fd;
--accent: #00b8a9;
--accent-light: #e0f7fa;
--text-main: #1a1a1a;
--text-muted: #5a5a5a;
--text-light: #8a8a8a;
--bg-light: #f8fafc;
--bg-white: #ffffff;
--border-light: #e1e8ed;
--radius-lg: 24px;
--radius-md: 16px;
--radius-sm: 12px;
--shadow-soft: 0 10px 40px rgba(0,0,0,0.08);
--shadow-medium: 0 15px 50px rgba(0,0,0,0.12);
--shadow-hover: 0 20px 60px rgba(0,0,0,0.15);
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
color: var(--text-main);
background: var(--bg-white);
line-height: 1.6;
overflow-x: hidden;
}
a {
color: var(--primary);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--primary-dark);
}
/* NAVBAR - Mejorada */
.navbar {
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 1rem 0;
transition: var(--transition);
}
.navbar.scrolled {
padding: 0.7rem 0;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.navbar-brand {
font-weight: 800;
color: var(--primary);
font-size: 1.1rem;
display: flex;
align-items: center; /* centra logo + texto verticalmente */
gap: 8px; /* espacio entre logo y texto */
line-height: 1.1;
}
/* texto de abajo */
.navbar-brand .sub {
font-size: 0.72rem;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.4px;
}
/* imagen del logo en nav */
.navbar-brand img {
height: 29px; /* un poco más grande para verse bien */
display: block;
}
.nav-link {
font-weight: 500;
color: var(--text-main);
position: relative;
padding: 0.5rem 1rem !important;
margin: 0 0.2rem;
border-radius: var(--radius-sm);
transition: var(--transition);
}
.nav-link:hover,
.nav-link:focus,
.nav-link.active {
color: var(--primary);
background-color: var(--primary-light);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--primary);
transition: var(--transition);
transform: translateX(-50%);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 80%;
}
.btn-nav-whatsapp {
background: linear-gradient(135deg, #25D366, #128C7E);
color: #fff !important;
font-weight: 600;
border-radius: 50px;
padding: 0.6rem 1.2rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
transition: var(--transition);
}
.btn-nav-whatsapp:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}
.navbar-toggler {
border: none;
padding: 0.25rem 0.5rem;
}
.navbar-toggler:focus {
box-shadow: none;
}
/* SECCIONES GENERALES */
.section {
padding: 100px 0;
position: relative;
}
.section-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
margin-bottom: 0.5rem;
line-height: 1.2;
}
.section-subtitle {
color: var(--text-muted);
max-width: 680px;
margin-inline: auto;
font-size: 1.1rem;
}
.eyebrow {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
font-weight: 700;
display: inline-block;
margin-bottom: 1rem;
position: relative;
padding-left: 1.5rem;
}
.eyebrow::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 2px;
background: var(--accent);
}
/* HERO - Completamente renovado */
#inicio {
padding-top: 140px;
padding-bottom: 100px;
background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
#inicio::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%231a76d2' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
opacity: 0.7;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.2rem;
border-radius: 50px;
background: rgba(26, 118, 210, 0.08);
color: var(--primary);
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1.5rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(26, 118, 210, 0.1);
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
margin-bottom: 1rem;
line-height: 1.1;
background: linear-gradient(135deg, var(--text-main) 0%, var(--primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-lead {
font-size: 1.2rem;
color: var(--text-muted);
max-width: 580px;
margin-bottom: 2rem;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin: 2rem 0;
}
.hero-badge {
padding: 0.5rem 1rem;
border-radius: 50px;
background: rgba(0, 184, 169, 0.1);
color: var(--accent);
font-size: 0.85rem;
font-weight: 600;
border: 1px solid rgba(0, 184, 169, 0.2);
transition: var(--transition);
}
.hero-badge:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 184, 169, 0.2);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.btn-primary-soft {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border: none;
color: #fff;
font-weight: 600;
border-radius: 50px;
pa
/* ...cortado... */
:root{
--wa:#25D366;
--wa-dark:#128C7E;
--wa-text:#111111;
--wa-muted:#4a4a4a;
--wa-bg:#ffffff;
--wa-border:#e4e4e4;
/* Franjita superior celeste en modo claro, en línea con el sitio */
--wa-head:linear-gradient(135deg,#e3f2fd,#d0e7ff);
}
.wa-float{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
font-family:inherit;
}
.wa-btn{
background:linear-gradient(135deg,var(--wa),var(--wa-dark));
color:#fff;
border:0;
width:60px;
height:60px;
border-radius:50%;
display:grid;
place-items:center;
box-shadow:0 10px 30px rgba(0,0,0,.25);
cursor:pointer;
transition:transform .3s, box-shadow .3s, background .3s;
position:relative;
overflow:hidden;
}
.wa-btn::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), rgba(255,255,255,0) 70%);
opacity:0;
transition:opacity .3s;
}
.wa-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.wa-btn:hover::after{ opacity:1; }
.wa-card{
position:absolute;
right:0;
bottom:74px;
width:min(360px,92vw);
background:var(--wa-bg);
color:var(--wa-text);
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.25);
border:1px solid var(--wa-border);
transform:translateY(10px);
opacity:0;
transition:transform .3s, opacity .3s;
}
.wa-card[aria-modal="true"]{
transform:translateY(0);
opacity:1;
}
.wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
background:var(--wa-head);
border-bottom:1px solid rgba(26,118,210,0.12);
}
.wa-avatar{
width:40px;
height:40px;
border-radius:8px;
background:#fff;
display:grid;
place-items:center;
border:1px solid var(--wa-border);
overflow:hidden;
}
.wa-title{
font-weight:700;
font-size:1.05rem;
}
.wa-status{
font-size:.85rem;
color:var(--wa-muted);
display:flex;
align-items:center;
gap:6px;
}
.wa-status::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--wa);
}
.wa-close{
margin-left:auto;
background:transparent;
color:#000;
border:0;
font-size:24px;
cursor:pointer;
opacity:.6;
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,.06);
}
.wa-body{
padding:12px 14px;
max-height:40vh;
overflow:auto;
background:#ffffff;
display:flex;
flex-direction:column;
gap:8px;
}
.wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
line-height:1.35;
box-shadow:0 4px 10px rgba(0,0,0,.08);
animation:fadeIn .25s ease;
font-size:.95rem;
}
@keyframes fadeIn{
from{opacity:0; transform:translateY(5px);}
to{opacity:1; transform:none;}
}
.wa-bot{
background:#f7f7f7;
border:1px solid #e8e8e8;
align-self:flex-start;
border-bottom-left-radius:4px;
}
.wa-user{
background:#e9fdf1;
border:1px solid #c4f1d8;
align-self:flex-end;
border-bottom-right-radius:4px;
}
.wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
background:#fafafa;
border-top:1px solid var(--wa-border);
}
.wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px 12px;
border:1px solid var(--wa-border);
background:#ffffff;
color:var(--wa-text);
outline:none;
min-height:44px;
font-family:inherit;
font-size:.95rem;
transition:.2s;
}
.wa-compose textarea:focus{
border-color:var(--wa);
box-shadow:0 0 0 2px rgba(37,211,102,.15);
}
.wa-send{
background:var(--wa);
color:#ffffff;
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:var(--wa-dark);
transform:scale(1.05);
}
.wa-body::-webkit-scrollbar{ width:6px; }
.wa-body::-webkit-scrollbar-track{ background:rgba(0,0,0,.02); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:3px; }
.wa-body::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.3); }
@media (max-width:480px){
.wa-float{ right:12px; bottom:12px; }
.wa-card{ width:calc(100vw - 24px); right:0; }
}
/* Fix navbar y overflow en móviles */
@media (max-width: 991.98px) {
.navbar .container {
max-width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
.navbar-collapse {
width: 100%;
}
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav .nav-item {
width: 100%;
}
}