tallerecoart.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.1/css/all.min.csshttps://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap:root {
--primary-color: #3a7d44;
--secondary-color: #2d3a3a;
--accent-color: #d4a762;
--light-color: #f8f9fa;
--dark-color: #212529;
--transition: all 0.3s ease;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--dark-color);
overflow-x: hidden;
scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4 {
font-family: 'Playfair Display', serif;
font-weight: 600;
}
/* Navbar */
.navbar {
background-color: rgba(255, 255, 255, 0.95) !important;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
padding: 15px 0;
transition: var(--transition);
}
.navbar.scrolled {
padding: 10px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
color: var(--primary-color) !important;
}
.navbar-nav .nav-link {
color: var(--secondary-color) !important;
font-weight: 500;
padding: 8px 15px;
margin: 0 5px;
position: relative;
transition: var(--transition);
}
.navbar-nav .nav-link:before {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--accent-color);
transition: var(--transition);
}
.navbar-nav .nav-link:hover:before {
width: 100%;
}
.navbar-nav .nav-link:hover {
color: var(--primary-color) !important;
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('img/logoecc.png') no-repeat center center/cover;
min-height: 90vh;
display: flex;
align-items: center;
color: white;
position: relative;
padding: 120px 0 80px;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 20px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
animation: fadeInDown 1s ease;
}
.hero p.lead {
font-size: 1.5rem;
margin-bottom: 30px;
animation: fadeInUp 1s ease 0.3s both;
}
.hero .highlight-text {
display: inline-block;
font-style: italic;
font-weight: 500;
padding: 15px 25px;
background-color: rgba(212, 167, 98, 0.2);
border-left: 3px solid var(--accent-color);
margin: 20px 0;
animation: fadeIn 1s ease 0.6s both;
}
.hero .contact-info {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 30px;
animation: fadeIn 1s ease 0.9s both;
}
.hero .btn {
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
letter-spacing: 0.5px;
transition: var(--transition);
animation: fadeInUp 1s ease 1.2s both;
}
.hero .btn-outline-light {
border: 2px solid white;
color: white;
}
.hero .btn-outline-light:hover {
background-color: white;
color: var(--primary-color);
}
.hero .btn-success {
background-color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.hero .btn-success:hover {
background-color: transparent;
color: white;
}
/* Section Styles */
.section {
padding: 100px 0;
position: relative;
}
.section-title {
position: relative;
display: inline-block;
margin-bottom: 60px;
color: var(--secondary-color);
}
.section-title:after {
content: '';
position: absolute;
width: 50px;
height: 3px;
background-color: var(--accent-color);
bottom: -15px;
left: 50%;
transform: translateX(-50%);
}
.section-light {
background-color: var(--light-color);
}
.section-dark {
background-color: var(--secondary-color);
color: white;
}
/* About Section */
.about-img {
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.about-img:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* Services Section */
.service-card {
background: white;
border-radius: 10px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: var(--transition);
height: 100%;
border-top: 3px solid var(--primary-color);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.service-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 20px;
}
.service-card h3 {
margin-bottom: 15px;
color: var(--secondary-color);
}
.service-card ul {
padding-left: 20px;
}
.service-card ul li {
margin-bottom: 8px;
position: relative;
}
.service-card ul li:before {
content: '✓';
color: var(--accent-color);
font-weight: bold;
position: absolute;
left: -20px;
}
/* Why Choose Us */
.feature-box {
text-align: center;
padding: 30px 20px;
border-radius: 10px;
background: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: var(--transition);
margin-bottom: 30px;
height: 100%;
}
.feature-box:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 70px;
height: 70px;
background-color: rgba(58, 125, 68, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.8rem;
color: var(--primary-color);
}
/* Portfolio Section */
.portfolio-section {
background-color: #f5f5f5;
}
.portfolio-filter {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
gap: 10px;
}
.filter-btn {
padding: 8px 20px;
background: transparent;
border: 1px solid var(--primary-color);
color: var(--primary-color);
border-radius: 50px;
transition: var(--transition);
font-weight: 500;
}
.filter-btn:hover, .filter-btn.active {
background: var(--primary-color);
color: white;
}
.portfolio-item {
position: relative;
margin-bottom: 30px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.portfolio-item img {
width: 100%;
height: 250px;
object-fit: cover;
transition: var(--transition);
}
.portfolio-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(58, 125, 68, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: var(--transition);
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-overlay h3 {
/* ...cortado... */
.img-hover-box {
overflow: hidden;
border-radius: 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
max-width: 300px;
margin: auto;
}
.img-hover-box img {
width: 100%;
height: auto;
display: block;
transition: transform 0.4s ease;
}
.img-hover-box:hover {
transform: scale(1.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.img-hover-box:hover img {
transform: scale(1.1);
}
.ticker-container {
perspective: 1000px;
width: 100%;
max-width: 300px;
height: 300px;
position: relative;
margin: auto;
}
.ticker {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: girar 20s infinite linear;
}
.ticker-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.ticker-face img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ticker-text {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
text-align: center;
padding: 10px 0;
font-size: 16px;
}
.face-1 { transform: rotateY(0deg) translateZ(150px); }
.face-2 { transform: rotateY(90deg) translateZ(150px); }
.face-3 { transform: rotateY(180deg) translateZ(150px); }
.face-4 { transform: rotateY(270deg) translateZ(150px); }
@keyframes girar {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
/* ✅ RESPONSIVO */
@media (max-width: 768px) {
.ticker-container {
max-width: 240px;
height: 240px;
}
.face-1, .face-2, .face-3, .face-4 {
transform: rotateY(var(--rot)) translateZ(120px);
}
}
@media (max-width: 480px) {
.ticker-container {
max-width: 180px;
height: 180px;
}
.face-1 { transform: rotateY(0deg) translateZ(90px); }
.face-2 { transform: rotateY(90deg) translateZ(90px); }
.face-3 { transform: rotateY(180deg) translateZ(90px); }
.face-4 { transform: rotateY(270deg) translateZ(90px); }
.ticker-text {
font-size: 12px;
padding: 6px 0;
}
}
:root {
--img-ticker-size: 500px;
}
.ticker-img {
max-height: var(--img-ticker-size);
width: auto;
object-fit: contain;
}
.carousel-control-prev,
.carousel-control-next {
filter: invert(1); /* para que los íconos se vean si el fondo es claro */
}
:root {
--img-ticker-size: 500px;
}
.ticker-img {
max-height: var(--img-ticker-size);
width: auto;
object-fit: contain;
}
footer {
background: #222;
color: #fff;
padding: 40px 0;
}
.footer a {
color: #ccc;
text-decoration: none;
}
/* Contenedor de botones flotantes */
.social-float-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
gap: 15px;
align-items: flex-end;
}
/* Estilos base para todos los botones sociales */
.social-float {
position: relative;
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.social-float:hover {
transform: translateY(-5px) rotate(5deg) scale(1.1);
}
.social-button {
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
position: relative;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
color: white;
text-decoration: none;
}
.social-button:hover {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.social-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
}
.social-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite;
}
.social-pulse-delayed {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite 0.5s;
}
.social-tooltip {
position: absolute;
right: 90px;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
padding: 12px 15px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
width: 200px;
text-align: center;
}
.social-tooltip small {
display: block;
font-size: 12px;
color: #666;
font-weight: normal;
margin-top: 3px;
}
.tooltip-arrow {
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
.social-float:hover .social-tooltip {
opacity: 1;
visibility: visible;
right: 80px;
}
/* Estilos específicos para cada botón */
.whatsapp-button {
background: #25D366;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
}
.whatsapp-button:hover {
background: #128C7E;
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}
.whatsapp-pulse {
background: rgba(37, 211, 102, 0.6);
}
.whatsapp-pulse-delayed {
background: rgba(37, 211, 102, 0.4);
}
.instagram-button {
background: #E1306C;
box-shadow: 0 10px 25px rgba(225, 48, 108, 0.3);
}
.instagram-button:hover {
background: #C13584;
box-shadow: 0 15px 30px rgba(193, 53, 132, 0.4);
}
.instagram-pulse {
background: rgba(225, 48, 108, 0.6);
}
.instagram-pulse-delayed {
background: rgba(193, 53, 132, 0.4);
}
.facebook-button {
background: #1877F2;
box-shadow: 0 10px 25px rgba(24, 119, 242, 0.3);
}
.facebook-button:hover {
background: #166FE5;
box-shadow: 0 15px 30px rgba(22, 111, 229, 0.4);
}
.facebook-pulse {
background: rgba(24, 119, 242, 0.6);
}
.facebook-pulse-delayed {
background: rgba(22, 111, 229, 0.4);
}
/* Animaciones */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.3); opacity: 0.4; }
100% { transform: scale(1.4); opacity: 0; }
}
/* Efecto de latido al cargar */
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Animación inicial para los botones */
.social-button {
animation: heartbeat 1.5s ease 2s 2, float 3s ease-in-out infinite 3s;
}
/* Mostrar botones con un pequeño retraso entre ellos */
.instagram-float { animation: fadeInUp 0.5s ease 0.2s both; }
.facebook-float { animation: fadeInUp 0.5s ease 0.4s both; }
.whatsapp-float { animation: fadeInUp 0.5s ease 0.6s both; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 768px) {
.social-float-container {
bottom: 20px;
right: 20px;
}
.social-button {
width: 60px;
height: 60px;
}
.social-icon {
font-size: 25px;
}
.social-tooltip {
display: none;
}
}
alvarezserviciosgenerales.com.ar
https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swaphttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css:root {
--primary: #005f73;
--primary-dark: #0a4c5c;
--secondary: #ee9b00;
--secondary-dark: #ca6702;
--accent: #bb3e03;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--light-gray: #e9ecef;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
--border-radius: 8px;
--section-padding: 5rem 0;
--hero-height: 80vh;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.7;
color: var(--dark);
background-color: #fff;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 1.2;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul {
list-style: none;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.section {
padding: var(--section-padding);
position: relative;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 2.5rem;
text-align: center;
position: relative;
color: var(--primary);
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--secondary);
margin: 1rem auto 0;
border-radius: 2px;
}
.text-center {
text-align: center;
}
.btn {
display: inline-block;
padding: 0.8rem 2rem;
background: var(--secondary);
color: white;
border: none;
border-radius: var(--border-radius);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
box-shadow: var(--shadow);
}
.btn:hover {
background: var(--secondary-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.btn-primary {
background: var(--primary);
}
.btn-primary:hover {
background: var(--primary-dark);
}
.btn-accent {
background: var(--accent);
}
.btn-accent:hover {
background: #9a3402;
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
box-shadow: var(--shadow);
transition: var(--transition);
}
.header.scrolled {
background: rgba(0, 95, 115, 0.95);
}
.header.scrolled .nav-links a,
.header.scrolled .logo {
color: white;
}
.header.scrolled .hamburger span {
background: white;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.logo {
font-size: 1.8rem;
font-weight: 800;
color: var(--primary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo i {
color: var(--secondary);
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
font-weight: 500;
position: relative;
padding: 0.5rem 0;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--secondary);
transition: var(--transition);
}
.nav-links a:hover::after {
width: 100%;
}
.hamburger {
display: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 25px;
height: 3px;
background: var(--primary);
margin: 5px 0;
transition: var(--transition);
}
/* Hero Section */
.hero {
height: var(--hero-height);
background: url('img/heroall.png') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
margin-top: 80px;
}
.hero-content {
max-width: 800px;
padding: 0 20px;
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-subtitle {
font-size: 1.5rem;
margin-bottom: 2rem;
font-weight: 300;
}
.hero-btns {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 18rem; /* 🔽 Baja los botones respecto al contenido anterior */
margin-bottom: 2rem; /* 🔽 Agrega espacio hacia abajo */
}
/* About Section */
.about {
background: var(--light);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.about-img {
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.about-img:hover img {
transform: scale(1.05);
}
.about-text h2 {
margin-bottom: 1.5rem;
color: var(--primary);
}
.about-text p {
margin-bottom: 1.5rem;
}
.about-features {
margin-top: 2rem;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.feature-icon {
color: var(--secondary);
font-size: 1.5rem;
margin-top: 0.2rem;
}
/* Services Section */
.services {
background: white;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.service-card {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
text-align: center;
padding: 2rem;
border-top: 4px solid var(--secondary);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.service-icon {
font-size: 3rem;
color: var(--secondary);
margin-bottom: 1.5rem;
}
.service-title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--primary);
}
.service-desc {
color: var(--gray);
margin-bottom: 1.5rem;
}
/* Why Us Section */
.why-us {
background: var(--light);
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-box {
background: white;
padding: 2rem;
border-radius: var(--border-radius);
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
}
.feature-box:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.feature-icon-box {
width: 70px;
height: 70px;
background: rgba(238, 155, 0, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: var(--secondary);
font-size: 1.8rem;
}
.feature-title {
font-size: 1.3rem;
margin-bottom: 1rem;
color: var(-
/* ...cortado... */
.ticker-wrapper {
position: relative;
overflow: hidden;
padding: 1rem;
background: #f8f9fa;
}
.ticker-track {
display: flex;
gap: 1rem;
animation: scroll-left 60s linear infinite;
width: max-content;
align-items: center;
}
.ticker-track img {
max-height: 500px; /* 👈 Altura máxima, pero conserva proporción */
height: auto;
width: auto;
border-radius: 8px;
object-fit: contain;
flex-shrink: 0;
}
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.btn-ticker {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.8);
border: none;
font-size: 2rem;
cursor: pointer;
z-index: 10;
}
.btn-ticker.left { left: 0; }
.btn-ticker.right { right: 0; }
/* Responsive control */
@media (max-width: 768px) {
.ticker-track img {
max-height: 300px;
}
}
@media (max-width: 480px) {
.ticker-track img {
max-height: 200px;
}
}
/* Contenedor de botones flotantes */
.social-float-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
gap: 15px;
align-items: flex-end;
}
/* Estilos base para todos los botones sociales */
.social-float {
position: relative;
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.social-float:hover {
transform: translateY(-5px) rotate(5deg) scale(1.1);
}
.social-button {
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
position: relative;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
color: white;
text-decoration: none;
}
.social-button:hover {
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.social-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
}
.social-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite;
}
.social-pulse-delayed {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite 0.5s;
}
.social-tooltip {
position: absolute;
right: 90px;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
padding: 12px 15px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
width: 200px;
text-align: center;
}
.social-tooltip small {
display: block;
font-size: 12px;
color: #666;
font-weight: normal;
margin-top: 3px;
}
.tooltip-arrow {
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
.social-float:hover .social-tooltip {
opacity: 1;
visibility: visible;
right: 80px;
}
/* Estilos específicos para cada botón */
.whatsapp-button {
background: #25D366;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
}
.whatsapp-button:hover {
background: #128C7E;
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}
.whatsapp-pulse {
background: rgba(37, 211, 102, 0.6);
}
.whatsapp-pulse-delayed {
background: rgba(37, 211, 102, 0.4);
}
.instagram-button {
background: #E1306C;
box-shadow: 0 10px 25px rgba(225, 48, 108, 0.3);
}
.instagram-button:hover {
background: #C13584;
box-shadow: 0 15px 30px rgba(193, 53, 132, 0.4);
}
.instagram-pulse {
background: rgba(225, 48, 108, 0.6);
}
.instagram-pulse-delayed {
background: rgba(193, 53, 132, 0.4);
}
.facebook-button {
background: #1877F2;
box-shadow: 0 10px 25px rgba(24, 119, 242, 0.3);
}
.facebook-button:hover {
background: #166FE5;
box-shadow: 0 15px 30px rgba(22, 111, 229, 0.4);
}
.facebook-pulse {
background: rgba(24, 119, 242, 0.6);
}
.facebook-pulse-delayed {
background: rgba(22, 111, 229, 0.4);
}
/* Animaciones */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.3); opacity: 0.4; }
100% { transform: scale(1.4); opacity: 0; }
}
/* Efecto de latido al cargar */
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Animación inicial para los botones */
.social-button {
animation: heartbeat 1.5s ease 2s 2, float 3s ease-in-out infinite 3s;
}
/* Mostrar botones con un pequeño retraso entre ellos */
.instagram-float { animation: fadeInUp 0.5s ease 0.2s both; }
.facebook-float { animation: fadeInUp 0.5s ease 0.4s both; }
.whatsapp-float { animation: fadeInUp 0.5s ease 0.6s both; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 768px) {
.social-float-container {
bottom: 20px;
right: 20px;
}
.social-button {
width: 60px;
height: 60px;
}
.social-icon {
font-size: 25px;
}
.social-tooltip {
display: none;
}
}
laicromados.com.ar
https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Montserrat:wght@700;800;900&display=swaphttps://unpkg.com/aos@next/dist/aos.css/* ✅ Mostrar contenido mientras AOS aún no cargó */
[data-aos]{opacity:1 !important; transform:none !important}
/* Cuando AOS esté listo, sí aplicamos el pre-oculto + transición */
html.aos-ready [data-aos]{opacity:0 !important; transform:translateY(14px) !important;
transition:opacity .6s ease, transform .6s ease}
/* Y cuando AOS dispara la animación, aparece */
html.aos-ready [data-aos].aos-animate{opacity:1 !important; transform:none !important}
:root {
--red: #FF3B2F;
--red-dark: #D13228;
--graphite: #1E1E1E;
--graphite-light: #2A2A2A;
--gunmetal: #2B2E34;
--steel: #C0C7CF;
--steel-light: #E1E6EC;
--white: #FFFFFF;
--black: #0A0B0C;
--black-light: #101214;
--ticker-size: 500px;
--ticker-gap: 20px;
--ticker-speed: 120s;
--container: 1200px;
--radius-xl: 16px;
--radius-2xl: 28px;
--radius-3xl: 40px;
--shadow-1: 0 10px 30px rgba(0,0,0,.25);
--shadow-2: 0 12px 40px rgba(0,0,0,.35);
--shadow-red: 0 8px 24px rgba(255,59,47,.35);
--shadow-red-hover: 0 12px 30px rgba(255,59,47,.45);
--grad-hero: radial-gradient(1200px 600px at 20% 10%, rgba(255,59,47,.15), transparent 50%),
radial-gradient(900px 500px at 80% 0%, rgba(192,199,207,.12), transparent 60%),
linear-gradient(180deg, #101214, #0A0B0C);
--grad-card: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
--grad-accent: linear-gradient(90deg, #FF3B2F, #FF6B3B);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
background: var(--black);
color: var(--steel-light);
font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Montserrat', 'Outfit', sans-serif;
font-weight: 800;
line-height: 1.1;
}
a {
color: var(--red);
text-decoration: none;
transition: all 0.3s ease;
}
img {
max-width: 100%;
display: block;
}
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 20px;
}
/* Navbar */
.navbar {
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: saturate(180%) blur(12px);
background: rgba(20, 22, 25, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.navbar.scrolled {
background: rgba(10, 11, 12, 0.98);
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 14px 0;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
letter-spacing: 0.5px;
}
.brand-logo {
width: 42px;
height: 42px;
border-radius: 50%;
background: conic-gradient(from 200deg, #9EA7B2, #E6EBF1 30%, #9EA7B2 60%, #CAD2DA);
border: 2px solid rgba(255, 255, 255, 0.18);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.brand-logo img {
width: 80%;
height: 80%;
object-fit: contain;
}
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.nav-links a {
padding: 8px 16px;
border-radius: var(--radius-xl);
color: var(--steel-light);
font-weight: 500;
opacity: 0.9;
transition: all 0.3s ease;
}
.nav-links a:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
opacity: 1;
transform: translateY(-1px);
}
.nav-cta {
display: flex;
align-items: center;
gap: 12px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius-xl);
border: 1px solid transparent;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-primary {
background: var(--red);
color: var(--white);
box-shadow: var(--shadow-red);
}
.btn-primary:hover {
background: var(--red-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-red-hover);
}
.btn-outline {
border-color: rgba(255, 255, 255, 0.18);
color: var(--steel-light);
background: transparent;
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
border-color: rgba(255, 255, 255, 0.25);
}
.mobile-toggle {
display: none;
background: transparent;
border: 0;
color: var(--white);
font-size: 24px;
cursor: pointer;
padding: 8px;
}
@media (max-width: 980px) {
.mobile-toggle {
display: inline-flex;
}
.nav-links {
display: none;
flex-direction: column;
width: 100%;
margin-top: 10px;
}
.nav-links.open {
display: flex;
}
.nav-cta {
display: none;
}
.nav-inner {
flex-wrap: wrap;
}
}
/* Hero Section */
.hero {
background: var(--grad-hero);
position: relative;
overflow: hidden;
padding: 120px 0 80px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hero .grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: center;
}
@media (max-width: 980px) {
.hero .grid {
grid-template-columns: 1fr;
gap: 28px;
}
}
.hero-card {
background: linear-gradient(145deg, rgba(30, 30, 30, 0.8), rgba(20, 22, 25, 0.9));
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2);
padding: 40px;
backdrop-filter: blur(8px);
position: relative;
overflow: hidden;
}
.hero-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 59, 47, 0.1) 0%, transparent 70%);
z-index: -1;
}
.eyebrow {
display: inline-block;
font-weight: 700;
color: var(--steel);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 12px;
margin-bottom: 12px;
position: relative;
padding-left: 16px;
}
.eyebrow::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: var(--red);
border-radius: 50%;
}
.hero h1 {
font-size: clamp(36px, 5vw, 52px);
margin: 12px 0 16px;
line-height: 1.05;
background: linear-gradient(to right, var(--steel-light), var(--white));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
font-size: clamp(16px, 2.2vw, 18px);
opacity: 0.92;
margin: 0 0 20px;
color: var(--steel);
}
.ticks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 20px;
margin: 22px 0 28px;
}
.tick {
display: flex;
gap: 10px;
align-items: flex-start;
}
.tick svg {
flex: 0 0 auto;
margin-top: 4px;
color: var(--red);
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-showpiece {
aspect-ratio: 1/1;
border-radius: var(--radius-2xl);
background: radial-gradient(400px 240px at 60% 30%, rgba(255, 59, 47, 0.25), transparent 60%), linear-gradient(145deg, #16181B, #0D0F12);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--shadow-1);
disp
/* ...cortado... */
/* === Compact & aligned navbar === */
.nav-inner{display:flex;align-items:center;gap:16px;padding:6px 0 !important;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{width:40px;height:40px;border-radius:50%;}
.brand-name{font-size:16px;line-height:1.1;margin:0}
.mobile-toggle{min-width:40px;min-height:40px;line-height:1;border:0}
.nav-links{align-items:center;gap:6px}
.nav-links a{padding:6px 10px !important;font-size:14px !important;line-height:1.1 !important}
.nav-cta .btn{padding:8px 12px !important;font-size:14px !important;line-height:1.1 !important}
.navbar .btn{line-height:1.1}
@media (max-width: 640px){
.brand-name{font-size:15px}
.nav-links a{padding:8px 10px}
}
/* === Map embed style === */
.map-embed{margin-top:16px;border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-xl);overflow:hidden;background:var(--black-light);box-shadow:var(--shadow-1)}
.map-embed iframe{width:100%;height:320px;border:0;}
@media (max-width: 640px){.map-embed iframe{height:260px}}
/* HERO: imagen de fondo (no se toca el contenido de arriba).
Cambiá la ruta en la línea marcada para usar tu foto. */
.hero{ background:none !important; position:relative; overflow:hidden; }
.hero::before{
content:""; position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(10,11,12,.22) 0%, rgba(10,11,12,.65) 70%),
radial-gradient(900px 500px at 20% 15%, rgba(0,0,0,.30), transparent 65%),
url('img/herolai4.png') center/cover no-repeat; /* ← IMAGEN DESKTOP (cambiá esta ruta para escritorio) */
z-index:-2; filter:saturate(.98) contrast(1.02);
}
/* ================= TRANSPARENCIA DE LO QUE ESTÁ SOBRE LA IMAGEN ================
Ajustá los valores (0–1). Cuanto más chico, más transparente.
No modifica el fondo del hero, solo las “cajas” encima.
*/
/* Panel de texto (izquierda) */
.hero-card{
background: linear-gradient(145deg,
rgba(30,30,30,.50), /* ← opacidad 1 */
rgba(20,22,25,.55) /* ← opacidad 2 */
) !important;
border-color: rgba(255,255,255,.10) !important;
backdrop-filter: blur(8px);
}
/* Panel del logo / showpiece (derecha) */
.hero-showpiece{
background: linear-gradient(145deg,
rgba(22,24,27,.35), /* ← opacidad 1 */
rgba(13,15,18,.38) /* ← opacidad 2 */
) !important;
border-color: rgba(255,255,255,.08) !important;
backdrop-filter: blur(6px);
}
.hero-showpiece::before{
opacity: .88 !important; /* ← transparencia del logo/imagen dentro del panel derecho */
}
/* IMPORTANTE
- Desktop usa la imagen marcada más abajo como "IMAGEN DESKTOP".
- Phone (≤640px) usa OTRA imagen vertical. Cambiá la ruta en la línea marcada "IMAGEN MOBILE".
*/
@media (max-width: 640px){
.hero::before{
/* === IMAGEN MOBILE (VERTICAL) — CAMBIAR ESTA RUTA === */
background:
linear-gradient(180deg, rgba(10,11,12,.24) 0%, rgba(10,11,12,.85) 86%),
radial-gradient(800px 420px at 22% 12%, rgba(0,0,0,.35), transparent 62%),
url('img/herovertical3.png') center/cover no-repeat !important; /* ← IMAGEN MOBILE */
}
}
#faqs [data-aos], #contacto [data-aos] { opacity:1 !important; transform:none !important }
.video-container {
display: flex;
justify-content: center;
gap: 20px;
padding: 40px 10px;
max-width: 100vw;
flex-wrap: wrap;
background-color: #000;
}
.video-wrapper {
position: relative;
width: 19vw;
height: 33.8vw;
min-width: 216px;
min-height: 384px;
border-radius: 12px;
overflow: hidden;
background-color: #000;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 🎯 Enmascarado más alto todavía para tapar completamente */
.video-wrapper.center::before,
.video-wrapper.center::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 22.1%; /* antes 18%, ahora más */
background: #000;
z-index: 2;
}
.video-wrapper.center::before {
top: 0;
}
.video-wrapper.center::after {
bottom: 0;
}
@media (max-width: 768px) {
.video-container {
flex-direction: column;
align-items: center;
gap: 30px;
}
.video-wrapper {
width: 80vw;
height: 140vw;
}
}
:root{
--wa-right: 20px;
--wa-bottom: 20px;
}
/* Chips (siempre sin contenedor, position:fixed) */
.wa-chip{
position: fixed;
right: calc(var(--wa-right) + env(safe-area-inset-right));
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 16px; border-radius: 28px; text-decoration: none;
color:#fff; font-weight:700; background:#25D366;
box-shadow: 0 6px 24px rgba(37,211,102,.45);
transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
z-index: 9999;
}
.wa-chip svg{ width:22px; height:22px; fill:#fff; }
.wa-chip:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.55); }
/* Posiciones independientes (sin wrapper) */
.wa-1{ bottom: calc(var(--wa-bottom) + env(safe-area-inset-bottom) + 80px); background:#25D366; }
.wa-2{ bottom: calc(var(--wa-bottom) + env(safe-area-inset-bottom) + 140px); background:#128C7E; }
/* FAB */
.wa-fab{
position: fixed;
right: calc(var(--wa-right) + env(safe-area-inset-right));
bottom: calc(var(--wa-bottom) + env(safe-area-inset-bottom));
display: inline-flex; align-items:center; gap:10px;
padding: 14px 18px; border-radius: 28px; border:0; cursor:pointer; outline:0;
background:#25D366; color:#fff; box-shadow: 0 8px 26px rgba(0,0,0,.25);
transition: transform .2s, box-shadow .2s; z-index: 9999;
}
.wa-fab svg{ width:22px; height:22px; fill:#fff; }
.wa-badge{
display:inline-flex; align-items:center; justify-content:center;
min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#0b7b62;
font-size:12px; font-weight:700;
}
.wa-fab[aria-expanded="true"]{ transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.28); }
/* Mobile (<992px): chips ocultos hasta abrir */
@media (max-width: 991.98px){
.wa-chip{ opacity:0; pointer-events:none; transform: translateY(6px); }
body.wa-open .wa-chip{ opacity:1; pointer-events:auto; transform: translateY(0); }
.wa-fab{ display:inline-flex; }
}
/* Desktop (>=992px): chips visibles, FAB oculto */
@media (min-width: 992px){
.wa-chip{ opacity:1; pointer-events:auto; transform:none; }
.wa-fab{ display:none; }
}
/* Muy angosto: ocultar texto para que entren */
@media (max-width: 360px){
.wa-chip span{ display:none; }
}
fonduslaplata.com.ar
https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swaphttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css/* =====================
Variables y reset
====================== */
:root {
/* Paleta premium */
--brand-dark: #0a2633; /* azul profundo */
--brand: #0d5c70; /* azul verdoso principal */
--brand-light: #1a7a8f; /* azul más claro */
--brand-acc: #2e9aa1; /* turquesa */
--brand-acc-light: #4ac7c7; /* turquesa claro */
--brand-soft: #e6f6f7; /* fondo suave */
--gradient: linear-gradient(135deg, var(--brand), var(--brand-acc));
--gradient-hover: linear-gradient(135deg, var(--brand-light), var(--brand-acc-light));
/* Sistema de color */
--ink: #0f1820;
--ink-2: #4b5661;
--ink-3: #6b7681;
--white: #ffffff;
--light-bg: #f9fcfd;
/* Sombras */
--shadow-sm: 0 2px 8px rgba(10, 42, 58, 0.08);
--shadow-md: 0 4px 16px rgba(10, 42, 58, 0.12);
--shadow-lg: 0 8px 24px rgba(10, 42, 58, 0.16);
--shadow-xl: 0 12px 32px rgba(10, 42, 58, 0.2);
/* Bordes */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 999px;
/* Espaciado */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
/* Tipografía */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
/* Animaciones */
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--transition-fast: all 0.15s ease;
/* Ticker */
--tile-size: 500px;
--ticker-speed: 40;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', system-ui, -apple-system, sans-serif;
color: var(--ink);
background-color: var(--light-bg);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
line-height: 1.2;
}
img {
max-width: 100%;
display: block;
height: auto;
}
a {
color: var(--brand);
text-decoration: none;
transition: var(--transition-fast);
}
a:hover {
color: var(--brand-acc);
}
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-md);
}
.section {
padding: clamp(var(--space-2xl), 7vw, var(--space-3xl)) 0;
position: relative;
}
.section-title {
font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
margin-bottom: var(--space-md);
position: relative;
display: inline-block;
}
.section-title:after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 4px;
background: var(--gradient);
border-radius: 2px;
}
.section-subtitle {
font-size: clamp(var(--text-lg), 2.6vw, var(--text-xl));
color: var(--ink-2);
margin-bottom: var(--space-xl);
max-width: 700px;
}
/* =====================
Componentes reutilizables
====================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
appearance: none;
border: none;
border-radius: var(--radius-full);
padding: var(--space-md) var(--space-lg);
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: var(--text-base);
cursor: pointer;
transition: var(--transition);
background: var(--gradient);
color: var(--white);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.btn:hover {
background: var(--gradient-hover);
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
.btn i {
font-size: var(--text-lg);
}
.btn-alt {
background: var(--white);
color: var(--brand);
border: 2px solid var(--brand-acc);
}
.btn-alt:hover {
background: var(--brand-soft);
color: var(--brand);
}
.card {
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-sm);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.card-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-md);
background: var(--brand-soft);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-lg);
color: var(--brand);
font-size: var(--text-2xl);
}
.card-title {
font-size: var(--text-xl);
margin-bottom: var(--space-sm);
color: var(--brand-dark);
}
.card-text {
color: var(--ink-2);
font-size: var(--text-base);
}
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
background: var(--brand-soft);
color: var(--brand-dark);
font-weight: 600;
font-size: var(--text-sm);
border-radius: var(--radius-full);
padding: var(--space-xs) var(--space-md);
transition: var(--transition-fast);
}
.pill:hover {
background: var(--brand);
color: var(--white);
transform: translateY(-2px);
}
/* =====================
Header y navegación
====================== */
.topbar {
background: linear-gradient(90deg, var(--brand), var(--brand-acc));
color: var(--white);
font-size: var(--text-sm);
padding: var(--space-xs) 0;
position: relative;
z-index: 100;
}
.topbar .container {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
align-items: center;
}
.topbar a {
color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.topbar a:hover {
color: var(--white);
text-decoration: none;
}
.navbar {
position: sticky;
top: 0;
z-index: 90;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: var(--transition);
}
.navbar.scrolled {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) 0;
}
.logo {
display: flex;
align-items: center;
gap: var(--space-sm);
font-weight: 700;
font-size: var(--text-xl);
color: var(--brand-dark);
transition: var(--transition);
}
.logo span {
font-size: 1.2rem; /* o el tamaño que prefieras */
font-weight: 600;
}
.logo:hover {
opacity: 0.9;
}
.logo-badge {
width: 42px;
height: 42px;
border-radius: var(--radius-md);
backg
/* ...cortado... */
/* --- Feedback banners --- */
.alert-feedback{display:none;align-items:center;gap:.6rem;border-radius:12px;padding:12px 14px;margin:0 0 14px 0;border:1px solid transparent;box-shadow:0 8px 22px rgba(0,0,0,.06);font-weight:600}
.alert-feedback.show{display:flex}
.alert-success{background:#ecfdf5;border-color:#34d39933;color:#065f46}
.alert-error{background:#fef2f2;border-color:#ef444433;color:#7f1d1d}
.alert-feedback i{font-size:18px}
/* Honeypot */
.hp-wrap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* --- Responsive, taller videos (non-breaking override) --- */
.videos-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(14px, 2.2vw, 24px);
}
.video-card{
position: relative;
border-radius: 14px;
overflow: hidden;
/* More height by default and fully responsive */
aspect-ratio: 4 / 3; /* taller than 16:9 to evitar cortes */
box-shadow: 0 8px 18px rgba(0,0,0,.15);
}
.video-card .video-thumbnail{
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* llena el contenedor */
}
/* Titles stay readable over controls */
.video-card .video-title{
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
margin: 0;
color: #fff;
font-weight: 700;
text-shadow: 0 2px 6px rgba(0,0,0,.6);
z-index: 3;
}
/* Play button overlay slightly bigger for new size */
.video-card .video-play-btn{
position: absolute;
inset: 0;
margin: auto;
width: clamp(54px, 6vw, 72px);
height: clamp(54px, 6vw, 72px);
z-index: 2;
transition: opacity .2s ease;
}
/* Desktop can be a bit wider and 16:9 if preferred */
@media (min-width: 992px){
.video-card{ aspect-ratio: 16 / 9; }
}
/* Phones: one per row and a bit taller */
@media (max-width: 575.98px){
.videos-grid{ grid-template-columns: 1fr; }
.video-card{ aspect-ratio: 3 / 2; }
}
/* === VERTICAL (9:16) VIDEOS — SIN ESTIRAR === */
.videos-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(14px, 2vw, 24px);
}
/* Forzamos relación 9:16 (alto) y evitamos estirar */
.video-card{
position: relative;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(180deg, #0f2743 0%, #000 100%);
aspect-ratio: 9 / 16;
max-height: min(85vh, 920px); /* no pasa la altura de la pantalla */
box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
.video-card .video-thumbnail{
width: 100%;
height: 100%;
object-fit: contain; /* SIN cortes ni estiramientos */
background: transparent;
}
/* Título por encima, sin tapar controles */
.video-card .video-title{
position: absolute;
left: 12px; right: 12px; bottom: 12px;
margin: 0;
color: #fff; font-weight: 800;
text-shadow: 0 2px 8px rgba(0,0,0,.7);
z-index: 3;
}
.video-card .video-play-btn{
position: absolute; inset: 0; margin: auto;
width: clamp(56px, 6vw, 76px); height: clamp(56px, 6vw, 76px);
z-index: 4; transition: opacity .2s ease;
}
/* Desktop: solo 2 columnas para que se vean grandes */
@media (min-width: 1200px){
.videos-grid{ grid-template-columns: repeat(2, minmax(380px, 1fr)); }
}
/* Mobile: 1 por fila y full width, alto 9:16 */
@media (max-width: 575.98px){
.videos-grid{ grid-template-columns: 1fr; }
.video-card{ aspect-ratio: 9 / 16; max-height: none; }
}
/* =====================
Topbar — Mejora visual sin romper markup
===================== */
.topbar{
background: linear-gradient(90deg, var(--brand-dark), var(--brand));
color: var(--white);
font-size: clamp(12px, 1.5vw, 14px);
padding: 8px 0;
position: relative;
z-index: 110; /* por encima de la navbar */
box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 24px rgba(0,0,0,.08);
}
.topbar .container{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
min-height: 38px;
}
.topbar .container > div{
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.3;
opacity: .95;
white-space: nowrap;
}
/* Separadores sutiles solo en pantallas grandes */
@media (min-width: 992px){
.topbar .container{
justify-content: space-between;
}
.topbar .container > div:not(:last-child){
position: relative;
padding-right: 18px;
}
.topbar .container > div:not(:last-child)::after{
content: "";
position: absolute;
right: 4px;
top: 50%;
width: 6px;
height: 6px;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(255,255,255,.3);
}
}
/* En mobile, dos filas centradas y sin separadores */
@media (max-width: 991.98px){
.topbar .container{
justify-content: center;
row-gap: 6px;
}
}
/* Links del topbar */
.topbar a{
color: #e9f8fb;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.topbar a:hover{
color: #fff;
border-color: rgba(255,255,255,.25);
}
/* WhatsApp destacado como pill */
.topbar a[href*="wa.me"]{
background: rgba(255,255,255,.10);
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.18);
font-weight: 700;
letter-spacing: .2px;
box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.topbar a[href*="wa.me"]:hover{
background: rgba(255,255,255,.16);
transform: translateY(-1px);
}
/* Efecto sutil de brillo */
.topbar::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
opacity: .6;
}
/* =====================
Fixes de responsive sin romper markup
Aplica sólo en pantallas chicas
===================== */
@media (max-width: 992px){
/* Hero: pasar a 1 columna */
.hero-grid{
grid-template-columns: 1fr !important;
gap: var(--space-xl) !important;
}
/* KPIs: que envuelvan y no se corten */
.hero-stats{
flex-wrap: wrap !important;
row-gap: var(--space-sm) !important;
}
.stat-number{
font-size: var(--text-2xl) !important;
}
/* Tarjeta de categorías: 2 columnas y padding más chico */
.hero-card{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
padding: var(--space-md) !important;
}
.pill{
justify-content: center;
text-align: center;
}
/* Asegurar que nada desborde horizontalmente */
.container, .section, .hero, body{
overflow-x: hidden !important;
}
}
/* Pequeñísimo ajuste para móviles muy angostos */
@media (max-width: 375px){
.stat-number{ font-size: var(--text-xl) !important; }
.pill{ padding: 6px 10px; font-size: var(--text-sm); }
}
/* ===== Topbar compact ===== */
.topbar{
background: #0c5f62;
color: #e9fbfb;
font-size: 13px;
}
.topbar .container{
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 6px 12px;
flex-wrap: wrap;
}
.topbar .container > *{
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.topbar .container > * + *{
position: relative;
}
.topbar .container > * + *::before{
content: "•";
opacity: .55;
margin: 0 6px 0 2px;
}
.topbar a{
color: inherit;
text-decoration: none;
}
.topbar a:hover{ text-decoration: underline; }
.topbar .topbar-cta{
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
padding: 4px 12px;
font-weight: 600;
text-decoration: none !important;
}
/* Iframe de notificación reducido y alineado */
.topbar iframe.topbar-iframe{
border: 0;
display: inline-block;
height: 28px;
width: 520px;
transform: scale(.86);
transform-origin: left center;
margin: 0;
}
/* Tablets: más margen y ajuste suave */
@media (max-width: 768px){
.topbar .container{
justify-content: center;
gap: 8px;
padding-top: 6px;
padding-bottom: 6px;
}
.topbar .container > * + *::before{ display: none; }
.topbar iframe.topbar-iframe{
width: 420px;
height: 30px; /* evita cortar texto vertical */
transform: scale(.84);
}
}
/* Phones */
@media (max-width: 480px){
/* 2 líneas ordenadas: 1) iframe // 2) texto + CTA */
.topbar .container{
flex-direction: column;
gap: 6px;
}
.topbar .container > * + *::before{ display: none; }
.topbar iframe.topbar-iframe{
width: 100%;
max-width: 360px; /* evita overflow en pantallas muy chicas */
height: 34px; /* asegura que no corte el contenido */
transform: scale(.92);
}
}
.logo-badge{ width:56px; height:56px; }
.logo-badge {
all: unset; /* elimina cualquier estilo heredado */
display: flex;
align-items: center;
justify-content: center;
width: 50px; height: 50px;
margin-right: 5px;
}
.logo-badge img.logo-icon {
width: 100%;
height: 100%;
object-fit: contain; /* o 'cover' si querés rellenar completamente */
border-radius: 0; /* sin redondeos */
box-shadow: none;
}
/* --- Ticker imágenes grandes --- */
#trabajos .ticker-wrapper {
overflow: hidden;
position: relative;
width: 100%;
padding: 8px 0;
}
#trabajos .ticker-track {
display: flex;
width: max-content;
animation: tickerScroll 28s linear infinite;
align-items: center;
}
#trabajos .ticker-img {
height: 540px;
width: auto;
margin-right: 28px;
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
@keyframes tickerScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
#trabajos .ticker-img {
height: 92vw;
margin-right: 16px;
}
}
.reclutamiento-section {
padding: 30px 0;
background-color: #f9f9f9;
}
.flyer-reclutamiento {
max-width: 520px;
width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
margin: 0 auto;
display: block;
}
/* WhatsApp Float - El más hermoso del mundo */
.whatsapp-float-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
perspective: 1000px;
}
.whatsapp-float {
position: relative;
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.whatsapp-float:hover {
transform: translateY(-5px) rotate(5deg) scale(1.1);
}
.whatsapp-button {
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
position: relative;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
}
.whatsapp-button:hover {
background: #128C7E;
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}
.whatsapp-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
color: white;
}
.whatsapp-ico {
width: 100%;
height: 100%;
fill: white;
}
.whatsapp-pulse {
position: absolute;
width: 100%;
height: 100%;
background: rgba(37, 211, 102, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite;
}
.whatsapp-pulse-delayed {
position: absolute;
width: 100%;
height: 100%;
background: rgba(37, 211, 102, 0.4);
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite 0.5s;
}
.whatsapp-tooltip {
position: absolute;
right: 90px;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
padding: 12px 15px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
width: 200px;
text-align: center;
}
.whatsapp-tooltip small {
display: block;
font-size: 12px;
color: #666;
font-weight: normal;
margin-top: 3px;
}
.tooltip-arrow {
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
.whatsapp-float:hover .whatsapp-tooltip {
opacity: 1;
visibility: visible;
right: 80px;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.3); opacity: 0.4; }
100% { transform: scale(1.4); opacity: 0; }
}
/* Efecto de latido al cargar */
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Animación inicial */
.whatsapp-button {
animation: heartbeat 1.5s ease 2s 2, float 3s ease-in-out infinite 3s;
}
/* Responsive */
@media (max-width: 768px) {
.whatsapp-float-container {
bottom: 20px;
right: 20px;
}
.whatsapp-button {
width: 60px;
height: 60px;
}
.whatsapp-tooltip {
display: none;
}
}
electromecanicasanchez.com
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.csshttps://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto+Condensed:wght@700&display=swap:root {
--ticker-size: 500px;
--primary-color: #2a5ee8;
--secondary-color: #ff6b35;
--dark-color: #1a1a2e;
--light-color: #f8f9fa;
--accent-color: #00b4d8;
}
body {
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
}
.navbar {
background-color: rgba(26, 26, 46, 0.95) !important;
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.navbar.scrolled {
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-brand {
font-weight: 700;
font-size: 1.5rem;
color: white !important;
}
.nav-link {
font-weight: 500;
position: relative;
margin: 0 5px;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--secondary-color);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
/* Hero Section */
header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);
padding: 120px 0 100px;
position: relative;
overflow: hidden;
color: white;
}
header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80') no-repeat center center/cover;
opacity: 0.15;
z-index: 0;
}
header .container {
position: relative;
z-index: 1;
}
header h1 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
header .lead {
font-size: 1.5rem;
margin-bottom: 2.5rem;
font-weight: 300;
}
.btn-primary {
background-color: var(--secondary-color);
border: none;
padding: 12px 30px;
font-weight: 400;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}
.btn-primary:hover {
background-color: #e05a2b;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
}
/* Sections */
section {
padding: 80px 0;
position: relative;
}
.section-title {
position: relative;
display: inline-block;
margin-bottom: 50px;
}
.section-title::after {
content: '';
position: absolute;
width: 70%;
height: 4px;
bottom: -10px;
left: 15%;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
}
/* About Section */
#quienessomos {
background-color: white;
}
#quienessomos p {
font-size: 1.1rem;
line-height: 1.8;
max-width: 800px;
margin: 0 auto;
}
/* Services Section */
#servicios {
background-color: var(--light-color);
}
.service-card {
background: white;
border-radius: 10px;
padding: 30px;
height: 100%;
transition: all 0.3s ease;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 0;
background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
transition: height 0.3s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.service-card:hover::before {
height: 100%;
}
/* Why Choose Us */
.list-group-item {
border-left: none;
border-right: none;
padding: 20px;
font-size: 1.1rem;
position: relative;
padding-left: 50px;
}
.list-group-item::before {
content: '✓';
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--secondary-color);
font-weight: bold;
font-size: 1.5rem;
}
.ticker-wrapper {
position: relative;
width: 100%;
overflow: hidden;
height: 520px;
}
.ticker-track {
display: flex;
min-width: 200%;
gap: 2rem;
align-items: center;
animation: tickerScroll 60s linear infinite; /* velocidad razonable para 38 imágenes */
}
.ticker-track img {
width: var(--ticker-size, 500px);
height: auto;
border-radius: 10px;
flex-shrink: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.ticker-track img:hover {
transform: scale(1.03);
}
@keyframes tickerScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* FAQ Section */
.accordion-button {
font-weight: 600;
font-size: 1.1rem;
}
.accordion-button:not(.collapsed) {
background-color: rgba(42, 94, 232, 0.1);
color: var(--primary-color);
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(42, 94, 232, 0.2);
}
/* Contact Section */
#contacto {
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
}
.form-control {
padding: 15px;
border-radius: 8px;
border: 1px solid #ddd;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(42, 94, 232, 0.25);
}
textarea.form-control {
min-height: 150px;
}
/* Footer */
footer {
background-color: var(--dark-color);
padding: 40px 0 20px;
}
.social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin: 0 10px;
color: white;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.social-icons a:hover {
background-color: var(--secondary-color);
transform: translateY(-3px);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 1s ease forwards;
}
/* Responsive Adjustments */
@media (max-width: 992px) {
header h1 {
font-size: 2.8rem;
}
header .lead {
font-size: 1.2rem;
}
:root {
--ticker-size: 400px;
}
}
@media (max-width: 768px) {
header {
padding: 100px 0 80px;
}
header h1 {
font-size: 2.2rem;
}
section {
padding: 60px 0;
}
:root {
--ticker-size: 300px;
}
}
@media (max-width: 576px) {
header h1 {
font-size: 1.8rem;
}
header .lead {
font-size: 1
/* ...cortado... */
.btn-ticker {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
font-size: 3rem;
background: rgba(0, 0, 0, 0.3);
border: none;
color: white;
padding: 10px 20px;
cursor: pointer;
transition: background 0.3s ease;
}
.btn-ticker:hover {
background: rgba(0, 0, 0, 0.6);
}
.btn-ticker.left {
left: 0;
}
.btn-ticker.right {
right: 0;
}
/* WhatsApp Float - El más hermoso del mundo */
.whatsapp-float-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
perspective: 1000px;
}
.whatsapp-float {
position: relative;
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.whatsapp-float:hover {
transform: translateY(-5px) rotate(5deg) scale(1.1);
}
.whatsapp-button {
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
position: relative;
transition: all 0.3s ease;
animation: float 3s ease-in-out infinite;
}
.whatsapp-button:hover {
background: #128C7E;
transform: scale(1.1);
box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}
.whatsapp-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
color: white;
}
.whatsapp-ico {
width: 100%;
height: 100%;
fill: white;
}
.whatsapp-pulse {
position: absolute;
width: 100%;
height: 100%;
background: rgba(37, 211, 102, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite;
}
.whatsapp-pulse-delayed {
position: absolute;
width: 100%;
height: 100%;
background: rgba(37, 211, 102, 0.4);
border-radius: 50%;
opacity: 0;
animation: pulse 2s infinite 0.5s;
}
.whatsapp-tooltip {
position: absolute;
right: 90px;
top: 50%;
transform: translateY(-50%);
background: white;
color: #333;
padding: 12px 15px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
width: 200px;
text-align: center;
}
.whatsapp-tooltip small {
display: block;
font-size: 12px;
color: #666;
font-weight: normal;
margin-top: 3px;
}
.tooltip-arrow {
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid white;
}
.whatsapp-float:hover .whatsapp-tooltip {
opacity: 1;
visibility: visible;
right: 80px;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.3); opacity: 0.4; }
100% { transform: scale(1.4); opacity: 0; }
}
/* Efecto de latido al cargar */
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Animación inicial */
.whatsapp-button {
animation: heartbeat 1.5s ease 2s 2, float 3s ease-in-out infinite 3s;
}
/* Responsive */
@media (max-width: 768px) {
.whatsapp-float-container {
bottom: 20px;
right: 20px;
}
.whatsapp-button {
width: 60px;
height: 60px;
}
.whatsapp-tooltip {
display: none;
}
}
capayan365.com.ar/app
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.csshttps://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swapbody {
background: <?php echo $d_color_titulo; ?>;
color: #fff;
font-family: 'Poppins', sans-serif;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
h1 {
font-size: 1.8rem;
margin-bottom: 2rem;
}
#playBtn {
font-size: 4rem;
width: 110px;
height: 110px;
border-radius: 50%;
border: 4px solid #fff;
color: #fff;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
#playBtn:hover {
background: #fff;
color: <?php echo $d_color_titulo; ?>;
}
#offlineMsg {
display: none;
margin-top: 1.5rem;
font-size: 1rem;
color: #fff;
}