html{
scroll-behavior:smooth;
}
body{
padding-top:120px;
font-family:Arial, Helvetica, sans-serif;
}
section{
padding:60px 0;
}
.hero h1{
color:#333;
font-weight:700;
}
.btn-danger{
background:#c62828;
border:none;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: 15px;
background: transparent;
z-index: 9999;
}
/*======================
NAVBAR
======================*/
.navbar{
background:#0b4e94;
height:60px;
padding:0;
position:fixed;
top:30px;
left:0;
width:100%;
z-index:9999;
transition:.35s;
box-shadow:0 5px 20px rgba(0,0,0,.20);
}
.navbar.scrolled{
height:55px;
top:5px;
background:rgba(11,78,148,.97);
}
.navbar .container{
position:relative;
height:100%;
display:flex;
align-items:center;
}
.navbar-brand{
position: relative;
margin-left: -20px; /* ajusta aquí */
z-index: 10;
}
.navbar-brand img{
height:105px;
margin-top:20px;
transition:.35s;
}
.navbar .container{
align-items:center;
}
.navbar.scrolled .navbar-brand img{
height:65px;
margin-top:0;
}
.nav-link{
color:white !important;
font-weight:bold;
margin-left:22px;
font-size:17px;
transition:.3s;
}
.nav-link:hover{
color:#ff9800 !important;
}
section{
padding:60px 0;
}
.navbar .container{
position:relative;
display:flex;
align-items:center;
}
.navbar-collapse{
justify-content:center;
}
.navbar-nav{
margin:auto;
}
/*========================
HERO
========================*/
.hero{
position: relative;
margin-top: 15px;
height: 55vh;
min-height: 420px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 18px;
margin-left: auto;
margin-right: auto;
background: #f5f5f5;
}
.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}
.hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.35);
z-index:2;
}
.hero-text{
position:relative;
z-index:3;
width:90%;
max-width:1000px;
}
.hero h1{
color:white;
font-size:3.5rem;
font-weight:800;
line-height:1.15;
text-shadow:0 5px 15px rgba(0,0,0,.7);
}
.hero-text{
width:90%;
max-width:900px;
}
.hero h1{
color:white;
font-size:3rem;
font-weight:700;
line-height:1.2;
}
/*==========================
SLIDER
==========================*/
.hero-slider{
position:relative;
width:100%;
height:420px;
overflow:hidden;
margin-top:15px;
border-radius:0px;
margin-left:auto;
margin-right:auto;
}
.hero-slider .slide{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1s ease;
}
.hero-slider .active{
opacity:1;
}
/*==========================
CONTROLES SLIDER
==========================*/
.slider-controls{
position:absolute;
bottom:12px;
left:50%;
transform:translateX(-50%);
z-index:20;
display:flex;
align-items:center;
justify-content:center;
gap:9px;
}
/*==========================
FLECHAS
==========================*/
.slider-btn{
position:static;
width:32px;
height:32px;
padding:0;
border:none;
background:transparent;
color:white;
font-size:28px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
opacity:.9;
text-shadow:
0 2px 6px rgba(0,0,0,.8);
transition:.25s ease;
}
.slider-btn:hover{
color:#f36f21;
transform:scale(1.15);
}
/*==========================
PUNTOS
==========================*/
.slider-dots{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
}
.slider-dot{
width:7px;
height:7px;
padding:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,.65);
cursor:pointer;
box-shadow:
0 1px 4px rgba(0,0,0,.6);
transition:.25s ease;
}
/* ACTIVO */
.slider-dot.active{
width:28px;
border-radius:10px;
background:rgba(255,255,255,.45);
position:relative;
overflow:hidden;
}
/* PROGRESO NARANJA */
.slider-dot.active::after{
content:"";
position:absolute;
top:0;
left:0;
width:0;
height:100%;
background:#f36f21;
border-radius:10px;
animation:sliderProgreso 4s linear forwards;
}
@keyframes sliderProgreso{
from{
width:0;
}
to{
width:100%;
}
}
/* HOVER */
.slider-dot:hover{
background:white;
}
/*==========================
NOSOTROS
==========================*/
.nosotros{
display:flex;
width:100%;
padding:0;
background:
linear-gradient(
135deg,
rgba(27, 58, 92, 0.65) 0%,
rgba(53, 92, 140, 0.50) 50%,
rgba(94, 146, 199, 0.35) 100%
);
min-height:600px;
margin-top:15px;
}
/* TEXTO IZQUIERDA */
.nosotros-texto{
width:50%;
padding:70px 60px;
color:white;
display:flex;
flex-direction:column;
justify-content:center;
}
.nosotros h2{
font-size:3rem;
font-weight:800;
margin-bottom:35px;
}
.nosotros p{
font-size:1.05rem;
line-height:1.8;
margin-bottom:22px;
text-align:justify;
}
/* IMAGEN DERECHA */
.nosotros-imagen{
width:50%;
}
.nosotros-imagen img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* BOTON */
.btn-nosotros{
align-self:center;
margin-top:25px;
padding:15px 40px;
background:black;
color:white;
border-radius:40px;
text-decoration:none;
font-weight:bold;
transition:.35s;
}
.btn-nosotros:hover{
background:#ff6f00;
color:white;
}
/*========================
PRODUCTOS
========================*/
.productos{
padding:45px 0;
}
.titulo-seccion1{
text-align:center;
font-size:2.8rem;
font-weight:800;
margin-bottom:35px;
color:#e0720c;
}
.titulo-seccion2{
text-align:center;
font-size:2.8rem;
font-weight:800;
margin-bottom:35px;
color:#ffffff;
}
.producto-card{
position:relative;
border-radius:0;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
}
.producto-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.20);
}
.producto-imagen{
position:relative;
overflow:hidden;
}
.producto-imagen img{
width:100%;
height:280px;
object-fit:cover;
transition:.5s;
}
.producto-imagen::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,.80),
rgba(0,0,0,.55),
rgba(0,0,0,.80)
);
opacity:0;
transition:.35s;
z-index:1;
}
.producto-card:hover .producto-imagen::after{
opacity:1;
}
.producto-info{
position:absolute;
top:18px;
left:0;
width:100%;
text-align:center;
z-index:2;
pointer-events:none;
transform:translateY(0) scale(1);
transition:.4s ease;
}
.producto-info h4{
margin:0;
color:#fff;
font-size:1.5rem;
font-weight:700;
text-shadow:0 3px 12px rgba(0,0,0,.7);
}
.producto-card:hover .producto-info{
top:50%;
transform:translateY(-50%) scale(1.08);
}
.btn-producto{
position:absolute;
right:18px;
bottom:18px;
z-index:2;
padding:10px 22px;
background:#ff6f00;
color:white;
text-decoration:none;
border-radius:30px;
transition:.3s;
}
.btn-producto:hover{
background:#0b4e94;
color:white;
}
/*====================
CLIENTES
====================*/
.clientes{
background:rgb(255, 255, 255);
padding:30px 0;
overflow:hidden;
}
.clientes-slider{
overflow:hidden;
width:100%;
}
.clientes-track{
display:flex;
width:max-content;
animation:scroll 28s linear infinite;
align-items:center;
}
.clientes-track img{
height:140px;
margin:0 70px;
object-fit:contain;
transition:.3s;
}
.clientes-track img:hover{
transform:scale(1.1);
}
@keyframes scroll{
from{
transform:translateX(0);
}
to{
transform:translateX(-50%);
}
}
/*====================
SUCURSALES
====================*/
.sucursal{
position:relative;
width:100%;
height:680px;
overflow:hidden;
}
.sucursal img{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
display:block;
transition:.6s;
}
.sucursal:hover img{
transform:scale(1.05);
}
.sucursal-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:center;
padding-top:120px;
background:rgba(0,0,0,0);
}
.sucursal-overlay h2{
color:white;
font-size:3rem;
font-weight:800;
margin-bottom:25px;
text-shadow:0 4px 10px rgba(0,0,0,.5);
}
.btn-sucursal{
padding:15px 35px;
background:#ff6f00;
color:white;
border-radius:40px;
text-decoration:none;
font-weight:bold;
/* BAJAR BOTÓN */
margin-top:180px;
transition:.3s ease;
}
.btn-sucursal:hover{
background:#0b4e94;
transform:translateY(-3px);
}
/*====================
FOOTER
====================*/
.footer{
position:relative;
width:100%;
overflow:hidden;
padding:0;
}
.footer img{
width:100%;
display:block;
}
.footer-redes{
position:absolute;
top:20px;
right:20px;
display:flex;
flex-direction:column;
gap:10px;
}
.footer-redes a{
width:46px;
height:46px;
background:white;
color:#0b4e94;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:22px;
box-shadow:0 5px 15px rgba(0,0,0,.25);
transition:.3s;
}
.footer-redes a:hover{
background:#ff6f00;
color:white;
transform:translateY(-3px);
}
/*====================
COPYRIGHT
====================*/
.copyright{
background:#111;
color:white;
text-align:center;
padding:18px 15px;
font-size:.95rem;
font-weight:500;
letter-spacing:.5px;
}
.reveal{
opacity:0;
transform:translateY(60px) scale(.9);
transition:1s;
}
.reveal.active{
opacity:1;
transform:translateY(0) scale(1);
}
.whatsapp:hover{
transform:scale(1.12);
color:white;
}
/*=========================
SUBIR
=========================*/
#arriba{
position:fixed;
right:28px;
bottom:105px;
width:55px;
height:55px;
background:#0b4e94;
color:white;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
cursor:pointer;
opacity:0;
visibility:hidden;
transition:.35s;
z-index:9999;
}
#arriba.show{
opacity:1;
visibility:visible;
}
#arriba:hover{
background:#ff6f00;
}
/*=========================
ANIMACIONES
=========================*/
.reveal{
opacity:0;
transform:translateY(70px);
transition:1s;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}
.producto-card{
transition:.45s;
}
.producto-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 45px rgba(0,0,0,.18);
}
.shop{
padding:60px 0;
}
/* BUSCADOR */
.shop-search{
display:flex;
justify-content:center;
margin-bottom:25px;
}
.shop-search input{
width:100%;
max-width:500px;
padding:12px 18px;
border-radius:30px;
border:1px solid #ddd;
outline:none;
}
/* FILTROS */
.shop-filtros{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:35px;
}
.shop-filtros button{
border:none;
padding:10px 18px;
border-radius:25px;
background:#eee;
font-weight:bold;
cursor:pointer;
transition:.3s;
}
.shop-filtros button.active,
.shop-filtros button:hover{
background:#0b4e94;
color:white;
}
/* GRID */
.shop-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
gap:25px;
}
/* CARD */
.shop-card{
background:white;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
text-align:center;
transition:.3s;
}
.shop-card:hover{
transform:translateY(-10px);
}
.shop-card img{
width:100%;
height:260px;
object-fit:cover;
}
.shop-card h4{
padding:15px;
font-weight:700;
}
.btn-shop{
display:inline-block;
margin-bottom:20px;
padding:10px 25px;
background:#ff6f00;
color:white;
border-radius:30px;
text-decoration:none;
}
.cart-btn{
margin-top:20px;
padding:10px 20px;
border:none;
border-radius:30px;
background:#ff6f00;
color:white;
font-weight:bold;
cursor:pointer;
}
.cart-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}
.cart-box{
background:white;
width:90%;
max-width:500px;
padding:20px;
border-radius:15px;
}
.cart-item{
display:flex;
justify-content:space-between;
margin-bottom:10px;
border-bottom:1px solid #eee;
padding-bottom:10px;
}
.cart-item button{
border:none;
background:red;
color:white;
border-radius:5px;
cursor:pointer;
padding:3px 8px;
}
.add-btn{
display:inline-block;
margin-bottom:20px;
padding:8px 20px;
background:#0b4e94;
color:white;
border-radius:20px;
border:none;
cursor:pointer;
}
.base-productos{
padding:60px 0;
}
.base-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:20px;
}
/* CARD */
.base-card{
background:white;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
text-align:center;
transition:.3s;
}
.base-card:hover{
transform:translateY(-8px);
}
.base-card img{
width:100%;
height:220px;
object-fit:cover;
}
.base-card h4{
padding:12px;
font-weight:700;
}
/* BOTONES */
.base-botones{
display:flex;
justify-content:space-between;
gap:10px;
padding:0 12px 15px;
}
.btn-ficha,
.btn-ver{
flex:1;
padding:8px 10px;
border-radius:20px;
text-decoration:none;
font-size:.85rem;
font-weight:bold;
text-align:center;
}
.btn-ficha{
background:#0b4e94;
color:white;
}
.btn-ver{
background:#ff6f00;
color:white;
}
/* RESPONSIVE */
@media(max-width:992px){
.base-grid{
grid-template-columns:repeat(2, 1fr);
}
}
@media(max-width:576px){
.base-grid{
grid-template-columns:1fr;
}
.base-botones{
flex-direction:column;
}
}
/* HERO LAYOUT TIENDA */
.hero-productos{
padding:50px 0;
}
/* contenedor interno */
.hero-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
max-width:1100px;
margin:auto;
}
/* título */
.hero-title h1{
font-size:2.6rem;
font-weight:800;
margin:0;
}
.hero-title p{
margin:5px 0 0;
opacity:.8;
}
/* carrito esquina */
.cart-btn{
padding:10px 18px;
border:none;
border-radius:30px;
background:#ff6f00;
color:white;
font-weight:bold;
cursor:pointer;
white-space:nowrap;
}
/*====================================
CARRITO NAVBAR
====================================*/
.navbar .container{
position:relative;
}
.navbar .nav-cart{
position:absolute;
right:-40px;
top:50%;
transform:translateY(-50%);
display:flex;
align-items:center;
}
/*==============================
BOTON
==============================*/
.cart-btn-nav{
display:flex;
align-items:center;
gap:6px;
padding:6px 7px;
background:linear-gradient(
180deg,
#1f67b8,
#0d4f96
);
color:#fff;
border:2px solid #ff7a00;
border-radius:14px;
cursor:pointer;
transition:all .30s ease;
box-shadow:
inset 0 2px 1px rgba(255,255,255,.30),
inset 0 -2px 3px rgba(0,0,0,.12),
0 6px 14px rgba(0,0,0,.25);
}
/*==============================
IMAGEN CARRITO
==============================*/
.cart-btn-img{
width:42px;
height:auto;
display:block;
object-fit:contain;
transition:.30s;
}
/*==============================
CONTADOR
==============================*/
#cartCount{
width:24px;
height:24px;
font-size:13px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
color:#2463d9;
border-radius:50%;
font-size:14px;
font-weight:800;
border:2px solid rgba(255,255,255,.35);
box-shadow:
0 3px 8px rgba(0,0,0,.25);
}
/*==============================
HOVER
==============================*/
.cart-btn-nav:hover{
background:linear-gradient(
180deg,
#ffbf63 0%,
#ff972f 45%,
#f07200 100%
);
transform:translateY(-2px);
box-shadow:
inset 0 2px 1px rgba(255,255,255,.35),
inset 0 -2px 3px rgba(0,0,0,.15),
0 10px 22px rgba(0,0,0,.30);
}
.cart-btn-nav:hover .cart-btn-img{
transform:
translateX(4px)
rotate(-4deg);
}
.cart-btn-nav:hover #cartCount{
transform:scale(1.08);
}
/* BOTONES BASE */
.btn-ficha,
.btn-ver{
display:inline-block;
padding:8px 12px;
border-radius:20px;
text-decoration:none;
font-weight:bold;
font-size:.85rem;
transition:.3s;
cursor:pointer;
}
/* HOVER EFECTO REAL */
.btn-ficha:hover{
background:#083a6b;
transform:translateY(-3px);
color:white;
}
.btn-ver:hover{
background:#d95a00;
transform:translateY(-3px);
color:white;
}
/* opcional: efecto general al pasar mouse */
.base-card:hover .btn-ficha,
.base-card:hover .btn-ver{
filter:brightness(1.05);
}
/* AZUL (ficha técnica / acciones pro) */
.btn-ficha,
.add-btn,
.btn-producto{
background:#0b4e94;
color:white;
}
.btn-ficha:hover,
.add-btn:hover,
.btn-producto:hover{
background:#083a6b;
transform:translateY(-4px);
}
/* NARANJA (ver más / carrito / acción principal) */
.btn-ver,
.cart-btn{
background:#ff6f00;
color:white;
}
.btn-ver:hover,
.cart-btn:hover{
background:#e85d00;
transform:translateY(-4px);
}
/*=========================
MEGA MENU
=========================*/
.mega-dropdown{
position:relative;
}
.mega-menu{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
width:min(1100px,95vw);
background:
linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.80)),
url("../assets/fondos/menu.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius:20px;
padding:25px 35px 35px;
box-shadow:0 20px 50px rgba(0,0,0,.18);
opacity:0;
visibility:hidden;
transition:.30s;
z-index:9999;
}
.mega-header{
display:flex;
justify-content:center;
align-items:center;
padding-bottom:22px;
margin-bottom:25px;
border-bottom:2px solid #ececec;
}
.mega-header img{
height:85px;
}
.mega-content{
display:flex;
justify-content:space-between;
gap:45px;
}
.mega-dropdown:hover .mega-menu{
opacity:1;
visibility:visible;
top:120%;
}
.mega-column{
display:flex;
flex-direction:column;
min-width:130px;
}
.mega-links{
display:flex;
flex-direction:column;
}
.mega-links a{
display:block;
}
.mega-column h5{
color:#0b4e94;
font-size:20px;
font-weight:800;
margin-bottom:18px;
}
.mega-column a{
color:#333;
text-decoration:none;
font-weight:600;
padding:8px 0;
transition:.25s;
}
.mega-column a:hover{
color:#ff6f00;
transform:translateX(8px);
}
.mega-image{
flex:1;
display:flex;
justify-content:center;
align-items:center;
}
.mega-image img{
width:100%;
max-width:320px;
border-radius:15px;
object-fit:cover;
}
/*=========================
SUCURSAL LATERAL
=========================*/
#panelSucursal{
position:fixed;
right:0;
top:50%;
transform:translateY(-50%);
display:flex;
z-index:9999;
}
/* BOTON */
#btnSucursal{
width:55px;
height:180px;
background:#0b4e94;
color:white;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
border-radius:15px 0 0 15px;
box-shadow:-8px 8px 20px rgba(0,0,0,.25);
}
.sucursal-tab{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
}
.sucursal-tab i{
font-size:18px;
color:#25D366;
transform:none;
}
.sucursal-tab span{
writing-mode:vertical-rl;
transform:rotate(180deg);
font-weight:700;
letter-spacing:2px;
}
/* PANEL */
#contenidoSucursal{
width:0;
overflow:hidden;
background:white;
transition:.4s;
box-shadow:-10px 0 30px rgba(0,0,0,.15);
display:flex;
flex-direction:column;
justify-content:center;
gap:20px;
padding:0;
}
#panelSucursal.open #contenidoSucursal{
width:280px;
padding:30px;
}
#contenidoSucursal h4{
margin:0;
color:#0b4e94;
font-weight:800;
}
#txtSucursal{
font-size:1rem;
margin:0;
}
#btnWhatsappSucursal{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
background:#25D366;
color:white;
padding:14px 18px;
border-radius:40px;
text-decoration:none;
font-weight:700;
font-size:1rem;
transition:.3s;
}
#btnWhatsappSucursal i{
font-size:26px;
}
#btnWhatsappSucursal:hover{
background:#18b854;
transform:translateY(-3px);
color:white;
}
#btnWhatsappSucursal:hover{
background:#18b854;
}
@media(max-width:768px){
#panelSucursal{
top:auto;
bottom:140px;
transform:none;
}
#btnSucursal{
height:130px;
}
}
/*=====================
COTIZADOR ENVIO
=====================*/
.cotizador{
padding-top:10px;
padding-bottom:80px;
}
/* CONTENEDOR */
.cotizador-box{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
/* IMAGEN */
.cotizador-img{
display:flex;
justify-content:center;
}
.cotizador-img img{
width:100%;
max-width:560px;
height:650px;
object-fit:cover;
border-radius:25px;
display:block;
box-shadow:0 15px 40px rgba(0,0,0,.15);
}
/* FORM */
.cotizador-form{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:16px;
width:100%;
}
.cotizador-form h2{
font-size:3rem;
font-weight:800;
margin:0;
}
.cotizador-form p{
margin-bottom:10px;
}
/* INPUTS */
.cotizador-form input{
width:100%;
padding:16px;
border:1px solid #ddd;
border-radius:14px;
font-size:18px;
outline:none;
}
.cotizador-form select{
padding:14px;
border:1px solid #ddd;
border-radius:12px;
background:white;
}
.cotizador-form input:focus{
border-color:#0b4e94;
}
/* BOTON UBICACION */
#usarUbicacion{
width:320px;
height:60px;
background:#ff6f00;
color:white;
border:none;
border-radius:40px;
font-size:22px;
font-weight:700;
cursor:pointer;
}
#usarUbicacion:hover{
background:#e85d00;
}
/* BOTON CALCULAR */
#calcularEnvio{
width:260px;
height:58px;
background:#0b4e94;
color:white;
border:none;
border-radius:40px;
font-size:20px;
font-weight:700;
cursor:pointer;
margin-top:10px;
}
#calcularEnvio:hover{
background:#083a6b;
transform:translateY(-3px);
}
/* RESULTADO */
#resultadoEnvio{
width:100%;
margin-top:25px;
padding:25px;
background:#f6f8fb;
border-radius:18px;
display:none;
font-size:20px;
line-height:1.8;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
#resultadoEnvio.show{
display:block;
}
/* RESPONSIVE */
@media(max-width:991px){
.cotizador{
padding-top:130px;
}
.cotizador-box{
grid-template-columns:1fr;
gap:35px;
}
.cotizador-img img{
height:320px;
}
#usarUbicacion,
#calcularEnvio{
width:100%;
}
}
.btn-envio{
background:#0b4e94;
color:white;
border:none;
border-radius:40px;
padding:15px 35px;
font-weight:bold;
cursor:pointer;
}
/*=====================
RESULTADO ENVIO
=====================*/
#resultadoEnvio{
margin-top:25px;
padding:25px;
background:#f5f5f5;
border-radius:18px;
display:none;
}
#resultadoEnvio.show{
display:block;
}
#resultadoEnvio a{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
padding:12px 24px;
margin-top:15px;
text-decoration:none;
border-radius:12px;
}
#resultadoEnvio p{
margin-bottom:10px;
}
#resultadoEnvio h4{
margin-bottom:15px;
}
/*=====================
BOTONES ENVIO
=====================*/
.acciones-envio{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:14px !important;
margin-top:20px !important;
position:relative !important;
}
.acciones-envio > *{
position:static !important;
transform:none !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
margin:0 !important;
}
#calcularEnvio{
background:#0b4e94;
color:white;
padding:14px 28px;
border:none;
border-radius:12px;
cursor:pointer;
flex:none;
}
.btn-cotizar{
display:none;
background:#25D366;
color:white;
padding:14px 28px;
border-radius:12px;
text-decoration:none;
white-space:nowrap;
flex:none;
}
.btn-cotizar.show{
display:inline-flex !important;
align-items:center;
justify-content:center;
}
#calcularEnvio{
background:#0b4e94;
color:white;
padding:14px 28px;
border:none;
border-radius:12px;
cursor:pointer;
}
.btn-cotizar{
display:none;
background:#25D366;
color:white;
padding:14px 28px;
border-radius:12px;
text-decoration:none;
align-items:center;
gap:10px;
white-space:nowrap;
}
.btn-cotizar.show{
display:inline-flex;
}
.btn-cotizar:hover{
background:#18b854;
color:white;
}
/*=========================
HERO CATEGORIA
=========================*/
.hero-categoria{
position:relative;
width:100%;
height:78vh;
min-height:620px;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
}
.hero-categoria img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.hero-categoria-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
z-index:1;
}
.hero-categoria-texto{
position:relative;
z-index:2;
width:90%;
max-width:1200px;
color:white;
}
.hero-etiqueta{
display:inline-block;
background:#ff6f00;
padding:8px 18px;
border-radius:30px;
font-weight:700;
letter-spacing:1px;
margin-bottom:25px;
}
.hero-categoria h1{
font-size:4rem;
font-weight:800;
margin-bottom:20px;
}
.hero-categoria p{
max-width:650px;
font-size:1.25rem;
line-height:1.8;
margin-bottom:35px;
}
.btn-categoria{
display:inline-block;
padding:16px 38px;
background:#0b4e94;
color:white;
text-decoration:none;
border-radius:40px;
font-weight:700;
transition:.3s;
}
.btn-categoria:hover{
background:#ff6f00;
color:white;
}
/*=========================
INTRO CATEGORIA
=========================*/
.intro-categoria{
padding:90px 0;
background:white;
}
.intro-box{
max-width:900px;
margin:auto;
text-align:center;
}
.intro-linea{
width:90px;
height:5px;
background:#ff6f00;
display:block;
margin:auto;
margin-bottom:30px;
border-radius:50px;
}
.intro-box h2{
font-size:2.8rem;
font-weight:800;
color:#222;
margin-bottom:25px;
}
.intro-box p{
font-size:1.15rem;
color:#666;
line-height:1.9;
}
/*=========================
DETALLE PRODUCTO
=========================*/
.detalle-producto{
padding:90px 0;
}
.producto-layout{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:70px;
align-items:stretch;
}
.producto-imagenx{
height:100%;
}
.producto-imagenx img{
width:100%;
height:100%;
min-height:620px;
object-fit:cover;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,.15);
display:block;
}
.producto-numero{
font-size:5rem;
font-weight:800;
color:#e9eef4;
display:block;
line-height:1;
margin-bottom:15px;
}
.producto-texto h2{
font-size:2.8rem;
font-weight:800;
margin-bottom:20px;
color:#0b4e94;
}
.producto-texto p{
font-size:1.1rem;
line-height:1.9;
margin-bottom:25px;
}
.producto-texto ul{
padding-left:20px;
margin-bottom:35px;
}
.producto-texto li{
margin-bottom:12px;
font-size:1.05rem;
}
.producto-botones{
display:flex;
gap:18px;
flex-wrap:wrap;
}
/*=========================
DATOS PRODUCTO
=========================*/
.producto-datos{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin:35px 0;
}
.dato{
background:#f8f9fb;
border-radius:18px;
padding:25px;
text-align:center;
transition:.35s;
border:1px solid #ececec;
}
.dato:hover{
transform:translateY(-6px);
box-shadow:0 15px 30px rgba(0,0,0,.12);
}
.dato i{
font-size:36px;
color:#0b4e94;
margin-bottom:15px;
display:block;
}
.dato h5{
margin:0;
font-weight:800;
font-size:1.3rem;
}
.dato span{
color:#666;
font-size:.95rem;
}
.mobile-menu-logo{
display:none;
}
/*====================================
BANNER CATÁLOGO
====================================*/
.catalogo-banner{
position:relative;
height:520px;
overflow:hidden;
line-height:0;
}
.catalogo-banner img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.catalogo-banner-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:#fff;
-webkit-text-stroke:0;
text-shadow:
0 3px 10px rgba(0,0,0,.65),
0 8px 25px rgba(0,0,0,.35);
background:linear-gradient(
to bottom,
rgba(0,0,0,0),
rgba(0,0,0,.18) 25%,
rgba(0,0,0,.48) 50%,
rgba(0,0,0,.18) 75%,
rgba(0,0,0,0)
);
padding:20px;
}
.catalogo-banner-overlay h1{
font-size:48px;
font-weight:800;
margin-bottom:15px;
text-transform:uppercase;
letter-spacing:2px;
}
.catalogo-banner-overlay p{
font-size:22px;
max-width:700px;
margin:0;
}
/*====================================
CATÁLOGO
====================================*/
.catalogo{
width:65%;
max-width:1400px;
margin:30px auto; /* antes 60px */
padding:15px; /* antes 20px */
background:
linear-gradient(
135deg,
rgba(8,41,75,.60) 0%,
rgba(11,78,148,.60) 50%,
rgba(20,101,184,.60) 100%
);
border-radius:0px;
box-shadow:0 25px 70px rgba(0,0,0,.30);
position:relative;
z-index:2;
}
/*====================================
VISOR
====================================*/
.visor-producto{
display:flex;
align-items:center;
gap:35px;
padding:30px;
border-radius:0px;
background-size:200%;
background-repeat:no-repeat;
background-position:center;
}
.fondo-racks{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/racks.jpg");
}
.fondo-estanteria{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/estanteria.JPG");
}
.fondo-lockers{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/lockers.jpg");
}
.fondo-estanterialigera{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/estanterialigera.JPG");
}
.fondo-checkout{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/checkout.jpg");
}
.fondo-gondolas{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/gon.jpg");
}
.fondo-maxigondola{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/maxigondola.jpg");
}
.fondo-carritos{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/carritos.jpg");
}
.fondo-fastfood{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/fastfood.jpg");
}
.fondo-eurolinea{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/eurolinea.jpg");
}
.fondo-newgeneration{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/newgeneration.jpg");
}
.fondo-clasica{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/clasica.jpg");
}
.fondo-silleria{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/silleria.jpg");
}
.fondo-premium{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/premium.png");
}
.fondo-standar{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/standar.png");
}
.fondo-milenium{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/milenium.png");
}
.fondo-accest{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/accesoriosestanteria.jpg");
}
.fondo-accesgon{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/accesgon.jpg");
}
.fondo-exhi{
background-image:
linear-gradient(rgba(0,0,0,.80),rgba(0,0,0,.80)),
url("../assets/fondos/exhipanel.jpg");
}
.visor-imagen{
flex:0 0 60%;
position:relative;
display:flex;
justify-content:center;
align-items:center;
overflow:visible;
height:65vh;
min-height:420px;
max-height:520px;
background-size:70%;
background-repeat:no-repeat;
background-position:center;
border-radius:0;
padding:30px;
box-shadow:0 15px 40px rgba(0,0,0,.10);
cursor:zoom-in;
}
.visor-imagen img{
width:100%;
height:100%;
object-fit:contain;
transform:scale(1.08);
transition:.4s;
filter:drop-shadow(0 25px 35px rgba(0,0,0,.35));
cursor:zoom-out;
}
.visor-imagen.zoom{
cursor:zoom-out;
z-index: 9999;
}
.visor-imagen.zoom img{
transform:scale(1.8);
position: relative;
z-index: 10000;
}
.visor-info{
flex:0 0 40%;
background:rgba(255,255,255,.90);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
padding:20px;
border-radius:0px;
box-shadow:0 15px 35px rgba(0,0,0,.25);
color:#111;
position: relative;
z-index: 1;
}
.visor-info h2{
font-size:30px;
color:#0b4e94;
font-weight:800;
margin-bottom:20px;
}
.visor-info p{
font-size:16px;
color:#000000;
line-height:1.8;
margin-bottom:30px;
}
/*====================================
CARACTERÍSTICAS
====================================*/
.listaCaracteristicas{
list-style:none;
padding:0;
margin:0 0 35px;
}
.listaCaracteristicas li{
font-size:10px;
margin-bottom:12px;
color:#000;
}
.listaCaracteristicas li::before{
content:"✓";
color:#198754;
font-weight:bold;
margin-right:10px;
}
/*====================================
BOTONES
====================================*/
.botones-producto{
display:flex;
gap:20px;
flex-wrap:wrap;
}
.btn-ficha,
.btn-cotizar{
text-decoration:none;
padding:15px 30px;
border-radius:12px;
font-weight:700;
transition:.30s;
}
.btn-ficha{
background:#0b4e94;
color:#fff;
}
.btn-ficha:hover{
background:#08396c;
}
.btn-cotizar{
background:#25D366;
color:#fff;
}
.btn-cotizar:hover{
background:#1ebc59;
}
/*====================================
FLECHAS
====================================*/
.flecha{
position:absolute;
width:60px;
height:60px;
border:none;
border-radius:50%;
background:#0b4e94;
color:#fff;
font-size:30px;
cursor:pointer;
box-shadow:0 8px 20px rgba(0,0,0,.20);
transition:.30s;
z-index:5;
}
.flecha:hover{
transform:scale(1.1);
}
.izquierda{
left:-15px;
}
.derecha{
right:-15px;
}
/*====================================
MINIATURAS
====================================*/
.miniaturas{
display:flex;
justify-content:center;
gap:16px;
margin-top:35px;
flex-wrap:wrap;
}
.miniatura{
width:80px;
padding:8px;
border-radius:0px;
background:#fff;
box-shadow:0 8px 20px rgba(0,0,0,.10);
cursor:pointer;
text-align:center;
transition:.30s;
}
.miniatura:hover{
transform:translateY(-8px);
}
.miniatura img{
width:100%;
height:60px;
object-fit:contain;
}
.miniatura span{
display:block;
margin-top:8px;
font-size:13px;
font-weight:700;
}
.miniatura.activa{
border:2px solid #0b4e94;
}
/*=========================
FLECHAS
=========================*/
.flecha{
position:absolute;
top:50%;
transform:translateY(-50%);
width:50px;
height:50px;
border:none;
border-radius:50%;
background:#0b4e94;
color:#fff;
font-size:24px;
cursor:pointer;
transition:.30s;
z-index:5;
}
.flecha:hover{
background:#ff6f00;
}
#anterior,
#anteriorLock,
#anteriorEstL,
#anteriorFF,
#anteriorEst{
left:0px;
}
#siguiente,
#siguienteLock,
#siguienteEstL,
#siguienteFF,
#siguienteEst{
right:0px;
}
/*=========================
MINIATURAS
=========================*/
.miniaturas{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin-top:30px;
}
/*=========================
MINIATURAS
=========================*/
.miniatura{
width:90px;
background:#fff;
border:2px solid transparent;
border-radius:10px;
padding:8px;
cursor:pointer;
transition:.30s;
box-shadow:0 6px 15px rgba(0,0,0,.10);
}
.miniatura:hover{
transform:translateY(-5px);
}
.miniatura.activa{
border-color:#0b4e94;
}
.miniatura img{
width:100%;
height:60px;
object-fit:contain;
}
.miniatura span{
display:block;
text-align:center;
margin-top:6px;
font-size:11px;
font-weight:700;
color:#333;
}
body{
background:
radial-gradient(
circle at 10% 15%,
rgba(255,122,0,.10),
transparent 35%
),
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.04),
transparent 35%
),
radial-gradient(
circle at 50% 90%,
rgba(255,255,255,.03),
transparent 45%
),
/* Capa que "apaga" la imagen */
linear-gradient(
rgba(15,15,15,.65),
rgba(15,15,15,.65)
),
url("../assets/fondos/fondo-industrial.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
}
body.racks{
background:
radial-gradient(
circle at 10% 15%,
rgba(255,122,0,.10),
transparent 35%
),
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.04),
transparent 35%
),
radial-gradient(
circle at 50% 90%,
rgba(255,255,255,.03),
transparent 45%
),
/* Capa que "apaga" la imagen */
linear-gradient(
rgba(15,15,15,.65),
rgba(15,15,15,.65)
),
url("../assets/fondos/bodega1.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
}
body.autoservicio{
background:
radial-gradient(
circle at 10% 15%,
rgba(255,122,0,.10),
transparent 35%
),
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.04),
transparent 35%
),
radial-gradient(
circle at 50% 90%,
rgba(255,255,255,.03),
transparent 45%
),
/* Capa que "apaga" la imagen */
linear-gradient(
rgba(15,15,15,.65),
rgba(15,15,15,.65)
),
url("../assets/fondos/autoservicio.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
}
body.vitrinas{
background:
radial-gradient(
circle at 10% 15%,
rgba(255,122,0,.10),
transparent 35%
),
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.04),
transparent 35%
),
radial-gradient(
circle at 50% 90%,
rgba(255,255,255,.03),
transparent 45%
),
/* Capa que "apaga" la imagen */
linear-gradient(
rgba(15,15,15,.65),
rgba(15,15,15,.65)
),
url("../assets/fondos/fc.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
}
body.oficina{
background:
radial-gradient(
circle at 10% 15%,
rgba(255,122,0,.10),
transparent 35%
),
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.04),
transparent 35%
),
radial-gradient(
circle at 50% 90%,
rgba(255,255,255,.03),
transparent 45%
),
/* Capa que "apaga" la imagen */
linear-gradient(
rgba(15,15,15,.65),
rgba(15,15,15,.65)
),
url("../assets/fondos/oficina.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
}
body.contacto{
background:
radial-gradient(
circle at 10% 15%,
rgba(255,122,0,.10),
transparent 35%
),
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.04),
transparent 35%
),
radial-gradient(
circle at 50% 90%,
rgba(255,255,255,.03),
transparent 45%
),
/* Capa que "apaga" la imagen */
linear-gradient(
rgba(15,15,15,.65),
rgba(15,15,15,.65)
),
url("../assets/fondos/fondo-industrial.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
}
body.accesorios{
background:
radial-gradient(
circle at 10% 15%,
rgba(255,122,0,.10),
transparent 35%
),
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.04),
transparent 35%
),
radial-gradient(
circle at 50% 90%,
rgba(255,255,255,.03),
transparent 45%
),
/* Capa que "apaga" la imagen */
linear-gradient(
rgba(15,15,15,.65),
rgba(15,15,15,.65)
),
url("../assets/fondos/accesorios.jpeg");
background-size:cover;
background-position:center;
background-attachment:fixed;
}
body.carrito{
background:
radial-gradient(
circle at 10% 15%,
rgba(255,122,0,.10),
transparent 35%
),
radial-gradient(
circle at 85% 20%,
rgba(255,255,255,.04),
transparent 35%
),
radial-gradient(
circle at 50% 90%,
rgba(255,255,255,.03),
transparent 45%
),
/* Capa que "apaga" la imagen */
linear-gradient(
rgba(15,15,15,.65),
rgba(15,15,15,.65)
),
url("../assets/fondos/carrito.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
}
/*=========================
VISOR FICHA
=========================*/
.visor-ficha{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
}
.visor-ficha.activo{
display:flex;
}
.visor-ficha-contenido{
position:relative;
width:90%;
height:90vh;
display:flex;
justify-content:center;
align-items:center;
}
/*====================================
PROTECCIÓN / MARCA DE AGUA FICHA
====================================*/
.visor-ficha-contenido::after{
content:"";
position:absolute;
inset:5%;
background-image:url("../assets/icons/watermark.svg");
background-repeat:repeat;
background-size:300px auto;
pointer-events:none;
user-select:none;
z-index:20;
}
#imagenFicha{
max-width:95%;
max-height:95%;
object-fit:contain;
cursor:grab;
transition:.15s;
transform-origin:center center;
border-radius:10px;
box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.cerrar-ficha{
position:absolute;
top:15px;
right:15px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:white;
font-size:22px;
cursor:pointer;
}
.flecha-ficha{
position:absolute;
top:50%;
transform:translateY(-50%);
width:55px;
height:55px;
border:none;
border-radius:50%;
background:white;
display:flex;
justify-content:center;
align-items:center;
padding:0;
cursor:pointer;
font-size:26px;
line-height:1;
}
.flecha-ficha.izquierda{
left:30px;
}
.flecha-ficha.derecha{
right:30px;
}
.titulo-categoria{
text-align:center;
font-size:50px;
font-weight:800;
color:#ffffff;
text-transform:uppercase;
letter-spacing:3px;
margin-bottom:20px; /* antes 40px */
position:relative;
}
.titulo-categoria::after{
content:"";
display:block;
width:120px;
height:5px;
background:#ff7a00;
margin:10px auto 0; /* antes 15px */
border-radius:20px;
}
/*=========================
VIDEOS HOME
=========================*/
.videos-home{
display:flex;
width:100%;
gap:32px;
max-width:1200px;
margin:30px auto 45px;
padding:0 20px !important;
/* Sin contenedor visual */
background:transparent;
border:none;
border-radius:0;
box-shadow:none;
}
/*=========================
TARJETA DE VIDEO
=========================*/
.video-item{
flex:1;
position:relative;
border-radius:18px;
overflow:hidden;
background:#111;
border:1px solid rgba(255,120,0,.60);
box-shadow:
0 15px 30px rgba(0,0,0,.55),
0 0 12px rgba(255,120,0,.10);
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
/*=========================
VIDEO
=========================*/
.video-item video{
width:100%;
height:300px;
object-fit:cover;
display:block;
transition:
transform .55s ease,
filter .35s ease;
}
/*=========================
SOMBRA SOBRE EL VIDEO
=========================*/
.video-item::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.75) 0%,
rgba(0,0,0,.22) 30%,
transparent 55%
);
pointer-events:none;
z-index:2;
}
/*=========================
LÍNEA SUPERIOR
=========================*/
.video-item::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:linear-gradient(
90deg,
#ff7a00 0%,
#ff9d32 45%,
#1675db 100%
);
z-index:4;
}
/*=========================
INFORMACIÓN DEL PROYECTO
=========================*/
.video-info{
position:absolute;
left:0;
bottom:0;
width:100%;
padding:60px 28px 22px;
z-index:5;
background:linear-gradient(
to top,
rgba(0,0,0,.94) 0%,
rgba(0,0,0,.70) 42%,
rgba(0,0,0,.20) 75%,
transparent 100%
);
color:#fff;
transform:translateY(6px);
transition:transform .35s ease;
}
/* CATEGORÍA */
.video-info span{
display:block;
color:#ff7900;
font-size:12px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:6px;
}
/* TÍTULO */
.video-info h3{
margin:0;
color:#fff;
font-size:25px;
font-weight:700;
line-height:1.2;
text-shadow:0 2px 5px rgba(0,0,0,.60);
}
/* LÍNEA NARANJA / AZUL */
.video-info h3::after{
content:"";
display:block;
width:45px;
height:2px;
margin-top:9px;
margin-bottom:8px;
background:linear-gradient(
90deg,
#ff7900,
#1675db
);
}
/* DESCRIPCIÓN */
.video-info p{
margin:0;
color:rgba(255,255,255,.82);
font-size:14px;
line-height:1.5;
text-shadow:0 1px 3px rgba(0,0,0,.70);
}
/*=========================
HOVER
=========================*/
.video-item:hover{
transform:translateY(-6px);
border-color:#ff7900;
box-shadow:
0 20px 38px rgba(0,0,0,.60),
0 0 18px rgba(255,120,0,.20);
}
.video-item:hover video{
transform:scale(1.045);
filter:brightness(1.08);
}
.video-item:hover .video-info{
transform:translateY(0);
}
/*=========================
RESPONSIVE
=========================*/
@media(max-width:768px){
.videos-home{
flex-direction:column;
gap:22px;
padding:0 15px !important;
margin:25px auto 35px;
}
.video-item video{
height:260px;
}
.video-info{
padding:55px 20px 18px;
}
.video-info h3{
font-size:22px;
}
.video-info p{
font-size:13px;
}
}
/*==============================
RELACIONADOS
==============================*/
.relacionados{
width:90%;
max-width:1500px;
margin:90px auto;
position:relative;
}
.rel-contenedor{
overflow:hidden;
}
.rel-track{
display:flex;
gap:25px;
transition:.45s;
}
.rel-card{
min-width:280px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.10) 0%,
rgba(255,255,255,.06) 100%
);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 20px 50px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.12);
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.15);
cursor:pointer;
transition:.30s;
flex-shrink:0;
}
.rel-card:hover{
transform:translateY(-8px);
}
.rel-card img{
width:100%;
height:180px;
object-fit:contain;
padding:15px;
}
.rel-info{
padding:20px;
}
.rel-info h3{
font-size:22px;
color:#cc800e;
margin-bottom:10px;
}
.rel-info p{
font-size:15px;
color:#ffffff;
}
.rel-flecha{
position:absolute;
top:58%;
transform:translateY(-50%);
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#0b4e94;
color:#fff;
font-size:22px;
cursor:pointer;
z-index:5;
}
.rel-flecha.izquierda{
left:-25px;
}
.rel-flecha.derecha{
right:-25px;
}
@media(max-width:768px){
.rel-card{
min-width:220px;
}
.rel-flecha{
display:none;
}
}
/*=========================
BANNER
=========================*/
.banner-interno{
padding:180px 8% 120px;
text-align:center;
}
.banner-contenido{
max-width:900px;
margin:auto;
}
.banner-contenido h1{
color:#fff;
font-size:clamp(46px,6vw,70px);
margin-bottom:20px;
}
.banner-contenido p{
color:#d9e4ef;
font-size:20px;
line-height:1.8;
}
/*=========================
NOSOTROS PAGE
=========================*/
.nosotros-page{
width:100%;
padding:0;
}
.nosotros-page-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:stretch;
min-height:650px;
}
.nosotros-page-texto{
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
padding:70px;
min-height:650px;
background:
linear-gradient(
135deg,
rgba(27, 58, 92, 0.65) 0%,
rgba(53, 92, 140, 0.50) 50%,
rgba(94, 146, 199, 0.35) 100%
);
}
.subtitulo{
color:#4aa8ff;
font-size:15px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:20px;
}
.nosotros-page-texto h2{
color:#fff;
font-size:56px;
font-weight:800;
line-height:1.1;
margin-bottom:30px;
}
.nosotros-page-texto p{
color:#d8e2ee;
font-size:17px;
line-height:1.9;
text-align:justify;
margin-bottom:22px;
}
.nosotros-page-imagen{
width:100%;
min-height:650px;
overflow:hidden;
}
.nosotros-page-imagen img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:.45s;
}
.nosotros-page-imagen:hover img{
transform:scale(1.05);
}
/*=========================
VALORES
=========================*/
.valores{
padding:100px 8%;
}
.titulo-seccion{
text-align:center;
margin-bottom:70px;
}
.titulo-seccion span{
color:#4aa8ff;
font-size:15px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
}
.titulo-seccion h2{
color:#fff;
font-size:46px;
font-weight:800;
margin-top:18px;
}
.valores-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}
.valor{
background:rgba(255,255,255,.08);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
padding:40px 30px;
text-align:center;
transition:.35s;
}
.valor:hover{
transform:translateY(-10px);
}
.valor i{
font-size:42px;
color:#4aa8ff;
margin-bottom:20px;
}
.valor h3{
color:#fff;
margin-bottom:15px;
}
.valor p{
color:#d8e2ee;
line-height:1.8;
}
/*=========================
RESPONSIVE
=========================*/
@media(max-width:992px){
.nosotros-page-grid{
grid-template-columns:1fr;
}
.nosotros-page-texto{
min-height:auto;
padding:45px;
}
.nosotros-page-imagen{
min-height:420px;
}
.nosotros-page-texto h2{
font-size:42px;
}
.valores-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:768px){
.nosotros-page-texto{
padding:30px;
}
.nosotros-page-texto h2{
font-size:34px;
}
.nosotros-page-texto p{
font-size:16px;
}
.nosotros-page-imagen{
min-height:300px;
}
.valores-grid{
grid-template-columns:1fr;
}
}
/*====================================
FRANJA INDUSTRIAL
====================================*/
.franja-industrial{
width:100%;
background:
linear-gradient(
180deg,
#ff9347 0%,
#ef6a2f 45%,
#d94f17 100%
);
overflow:hidden;
white-space:nowrap;
padding:7px 0; /* Antes: 12px */
margin-top:15px; /* Ajusta este valor */
}
.franja-contenido{
display:inline-flex;
align-items:center;
animation:franjaMover 25s linear infinite;
}
.franja-contenido span{
font-size:24px; /* Antes: 28px */
font-weight:900;
color:#fff;
text-transform:uppercase;
letter-spacing:2px;
padding-right:80px;
}
@keyframes franjaMover{
from{
transform:translateX(0);
}
to{
transform:translateX(-50%);
}
}
/*====================================
LISTA DEL CARRITO
====================================*/
#listaCarrito{
display:flex;
flex-direction:column;
gap:20px;
}
.carrito-vacio{
text-align:center;
padding:80px 20px;
color:#777;
font-size:22px;
font-weight:600;
}
.carrito-vacio i{
display:block;
font-size:70px;
color:#d0d0d0;
margin-bottom:20px;
}
/*====================================
ITEM DEL CARRITO
====================================*/
.item-carrito{
display:flex;
align-items:center;
gap:25px;
padding:20px;
border:1px solid #e5e5e5;
border-radius:12px;
background:#fff;
transition:.3s;
}
.item-carrito:hover{
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.item-carrito img{
width:120px;
height:120px;
object-fit:contain;
flex-shrink:0;
}
.item-info{
flex:1;
}
.item-info h3{
margin:0 0 8px;
color:#0b4e94;
font-size:22px;
}
.item-info p{
margin:4px 0;
color:#666;
}
.item-acciones{
display:flex;
align-items:center;
gap:10px;
}
.item-acciones button{
width:38px;
height:38px;
border:none;
border-radius:50%;
background:#0b4e94;
color:#fff;
font-size:20px;
font-weight:bold;
cursor:pointer;
transition:.3s;
}
.item-acciones button:hover{
background:#08396c;
}
.item-cantidad{
min-width:35px;
text-align:center;
font-size:20px;
font-weight:700;
}
.btn-eliminar{
margin-left:20px;
background:#ef4444 !important;
}
.btn-eliminar:hover{
background:#c62828 !important;
}
/*====================================
BOTÓN AGREGAR A COTIZACIÓN
====================================*/
.btn-agregar-carrito{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
margin-top:12px;
padding:14px 28px;
background:#ef6a2f;
color:#fff;
border-radius:12px;
text-decoration:none;
font-weight:700;
transition:.3s;
}
.btn-agregar-carrito:hover{
background:#d95b24;
color:#fff;
}
/*====================================
VISOR INICIAL
====================================*/
.visor-inicio{
position:fixed;
inset:0;
background:rgba(0,0,0,.90);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
overflow:hidden;
}
.visor-inicio img{
max-width:90%;
max-height:90%;
cursor:grab;
user-select:none;
-webkit-user-drag:none;
transition:none;
transform-origin:0 0;
}
.cerrar-visor{
position:absolute;
top:20px;
right:30px;
color:#fff;
font-size:45px;
cursor:pointer;
user-select:none;
z-index:100001;
pointer-events:auto;
}
.mega-title a{
color:#0b4e94;
font-size:20px;
font-weight:800;
}
.mega-title a:hover{
color:#ff7a00 !important;
}
/*====================================
ZOOM VISOR PORTADA
====================================*/
/*====================================
FRANJA PROMOCIONAL
====================================*/
.franja-promocional{
width:65%;
max-width:1400px;
margin:20px auto;
height:42px;
overflow:hidden;
background:rgba(255, 102, 0, 0.692);
background-size:cover;
background-position:center;
border-top:2px solid rgba(255,255,255,.15);
border-bottom:2px solid rgba(255,255,255,.15);
cursor:pointer;
display:flex;
align-items:center;
transition:.3s;
}
.franja-promocional:hover{
background:#0b4e94;
}
.texto-promocional{
white-space:nowrap;
color:#fff;
font-weight:700;
font-size:17px;
animation:marquesina 18s linear infinite;
padding-left:100%;
}
.franja-promocional:hover .texto-promocional{
color:#fd8700;
}
@keyframes marquesina{
from{
transform:translateX(0);
}
to{
transform:translateX(-100%);
}
}
/*====================================
PESTAÑAS RACKS
====================================*/
.tabs-racks{
display:flex;
justify-content:center;
gap:12px;
margin:20px 0 25px;
}
.tab-rack{
background:rgba(255,255,255,.12);
color:#fff;
border:2px solid rgba(255,255,255,.25);
border-radius:10px;
padding:12px 28px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.30s;
backdrop-filter:blur(6px);
}
.tab-rack:hover{
background:#0d6efd;
border-color:#0d6efd;
transform:translateY(-2px);
}
.tab-rack.activa{
background:#ff6b2c;
border-color:#ff6b2c;
color:#fff;
box-shadow:0 8px 20px rgba(255,107,44,.35);
}
/*====================================
BANNER PROYECTOS
====================================*/
.banner-proyectos{
position:relative;
width:100%;
height:420px;
overflow:hidden;
}
.banner-proyectos img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.banner-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:#fff;
background:linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
);
padding:20px;
}
.banner-overlay h1{
font-size:56px;
font-weight:800;
letter-spacing:2px;
margin-bottom:20px;
text-transform:uppercase;
text-shadow:0 6px 20px rgba(0,0,0,.45);
}
.banner-overlay p{
font-size:22px;
max-width:800px;
line-height:1.7;
text-shadow:0 4px 15px rgba(0,0,0,.40);
}
@media(max-width:768px){
.banner-proyectos{
height:260px;
}
.banner-overlay h1{
font-size:34px;
}
.banner-overlay p{
font-size:16px;
width:90%;
}
}
/*==================================================
PROYECTOS METÁLICOS DÁVILA
PARTE 1
==================================================*/
.md-proyectos{
position:relative;
padding:90px 0;
background:#0a0a0a;
overflow:hidden;
}
.md-proyectos::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at top right,
rgba(255,122,0,.10),
transparent 40%),
radial-gradient(circle at bottom left,
rgba(11,78,148,.18),
transparent 45%);
pointer-events:none;
}
.md-proyectos .container{
position:relative;
z-index:2;
}
/*====================================
INTRO
====================================*/
.md-proyectos-intro{
max-width:900px;
margin:0 auto 70px;
text-align:center;
}
.md-etiqueta{
display:inline-block;
padding:8px 18px;
border-radius:40px;
background:rgba(255,122,0,.12);
border:1px solid rgba(255,122,0,.35);
color:#ff9a38;
font-size:13px;
font-weight:700;
letter-spacing:2px;
}
.md-proyectos-intro h2{
margin-top:25px;
margin-bottom:25px;
color:#fff;
font-size:52px;
font-weight:800;
line-height:1.1;
}
.md-proyectos-intro p{
color:#bdbdbd;
font-size:19px;
line-height:1.8;
}
/*====================================
PROYECTO PRINCIPAL
====================================*/
.md-proyecto-principal{
display:grid;
grid-template-columns:1.25fr .75fr;
overflow:hidden;
margin-bottom:50px;
border-radius:28px;
background:#111;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 35px 70px rgba(0,0,0,.40);
transition:.4s;
}
.md-proyecto-principal:hover{
transform:translateY(-8px);
box-shadow:0 45px 90px rgba(0,0,0,.55);
}
/*====================================
VIDEO
====================================*/
.md-video-principal{
position:relative;
min-height:620px;
overflow:hidden;
}
.md-video-principal video{
width:100%;
height:100%;
object-fit:cover;
transition:transform .9s;
}
.md-proyecto-principal:hover video{
transform:scale(1.05);
}
.md-video-overlay{
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(
rgba(0,0,0,.10),
rgba(0,0,0,.45)
);
}
/*====================================
BOTÓN PLAY
====================================*/
.md-play{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:110px;
height:110px;
border:none;
border-radius:50%;
background:#ff7a00;
color:#fff;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:48px;
transition:.35s;
box-shadow:
0 20px 45px rgba(255,122,0,.35);
z-index:100;
}
.md-play:hover{
transform:translate(-50%,-50%) scale(1.08);
}
/*====================================
INFORMACIÓN
====================================*/
.md-info-principal{
padding:60px;
display:flex;
flex-direction:column;
justify-content:center;
}
.md-categoria{
display:inline-block;
align-self:flex-start;
padding:8px 18px;
margin-bottom:22px;
border-radius:40px;
background:rgba(255,122,0,.12);
color:#ff9d41;
font-size:13px;
font-weight:700;
letter-spacing:2px;
}
.md-info-principal h2{
color:#fff;
font-size:48px;
font-weight:800;
margin-bottom:20px;
}
.md-info-principal p{
color:#c9c9c9;
line-height:1.9;
font-size:17px;
margin-bottom:35px;
}
/*====================================
BOTONES
====================================*/
.md-botones{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.md-btn-azul{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
border-radius:50px;
background:#0b4e94;
color:#fff;
text-decoration:none;
font-weight:700;
transition:.35s;
}
.md-btn-azul:hover{
background:#1565c0;
color:#fff;
transform:translateY(-4px);
}
.md-btn-naranja{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
border-radius:50px;
background:#ff7a00;
color:#fff;
text-decoration:none;
font-weight:700;
transition:.35s;
}
.md-btn-naranja:hover{
background:#ff922d;
color:#fff;
transform:translateY(-4px);
}
/*==================================================
TARJETAS SECUNDARIAS
==================================================*/
.md-grid-secundario{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
margin-bottom:35px;
}
.md-card{
position:relative;
height:360px;
overflow:hidden;
border-radius:24px;
background:#111;
cursor:pointer;
border:1px solid rgba(255,255,255,.08);
transition:.35s;
}
.md-card:hover{
transform:translateY(-8px);
box-shadow:0 25px 55px rgba(0,0,0,.45);
}
.md-card video{
width:100%;
height:100%;
object-fit:cover;
transition:transform .8s;
}
.md-card:hover video{
transform:scale(1.08);
}
.md-card-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:30px;
background:linear-gradient(
transparent,
rgba(0,0,0,.90)
);
}
.md-card-overlay span{
color:#ff9a38;
font-size:13px;
font-weight:700;
letter-spacing:2px;
margin-bottom:12px;
}
.md-card-overlay h3{
color:#fff;
font-size:34px;
font-weight:800;
}
/*==================================================
VIDEO HORIZONTAL
==================================================*/
.md-video-horizontal{
position:relative;
height:480px;
overflow:hidden;
border-radius:28px;
background:#111;
}
.md-video-horizontal video{
width:100%;
height:100%;
object-fit:cover;
transition:transform .9s;
}
.md-video-horizontal:hover video{
transform:scale(1.05);
}
.md-horizontal-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:60px;
background:linear-gradient(
transparent,
rgba(0,0,0,.88)
);
}
.md-horizontal-overlay span{
color:#ff9a38;
font-size:14px;
font-weight:700;
letter-spacing:2px;
margin-bottom:15px;
}
.md-horizontal-overlay h2{
color:#fff;
font-size:52px;
font-weight:800;
max-width:700px;
}
/*==================================================
RESPONSIVE
==================================================*/
@media(max-width:1200px){
.md-proyecto-principal{
grid-template-columns:1fr;
}
.md-video-principal{
min-height:450px;
}
}
@media(max-width:992px){
.md-grid-secundario{
grid-template-columns:1fr;
}
.md-horizontal-overlay h2{
font-size:38px;
}
.md-info-principal{
padding:40px;
}
.md-info-principal h2{
font-size:38px;
}
}
@media(max-width:768px){
.md-proyectos{
padding:60px 0;
}
.md-proyectos-intro h2{
font-size:34px;
}
.md-proyectos-intro p{
font-size:16px;
}
.md-video-principal{
min-height:280px;
}
.md-play{
width:75px;
height:75px;
font-size:30px;
}
.md-info-principal{
padding:30px 24px;
}
.md-info-principal h2{
font-size:30px;
}
.md-botones{
flex-direction:column;
}
.md-btn-azul,
.md-btn-naranja{
width:100%;
justify-content:center;
}
.md-card{
height:240px;
}
.md-card-overlay h3{
font-size:26px;
}
.md-video-horizontal{
height:260px;
}
.md-horizontal-overlay{
padding:25px;
}
.md-horizontal-overlay h2{
font-size:28px;
}
}
/*==================================================
ANIMACIÓN
==================================================*/
.md-proyecto-principal,
.md-card,
.md-video-horizontal{
transition:
transform .4s,
box-shadow .4s;
}
/*=========================
SUBRAYADO MENÚ
=========================*/
.navbar .nav-link{
position: relative;
display: inline-block;
color: #fff;
font-weight: 600;
padding: 24px 18px;
}
.navbar .nav-link::after{
content: "";
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
width: 0;
height: 3px;
background: #fff;
border-radius: 50px;
transition: .25s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
width: 45px;
}
/*=========================
BOTÓN COTIZACIÓN PREMIUM
=========================*/
.cta-banner{
position:absolute;
left:5%;
bottom:8%;
z-index:20;
}
.btn-cotizar-banner{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
overflow:hidden;
padding:14px 34px;
font-family:"Rajdhani",sans-serif;
font-size:22px;
font-weight:600;
letter-spacing:1px;
text-decoration:none;
color:#fff;
background:linear-gradient(
180deg,
rgba(54,145,255,.82) 0%,
rgba(20,104,215,.78) 50%,
rgba(10,70,170,.82) 100%
);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.28);
border-radius:2px;
box-shadow:
0 10px 25px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.25),
inset 0 -2px 5px rgba(0,0,0,.18);
transition:.35s ease;
}
/* Reflejo superior */
.btn-cotizar-banner::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(255,255,255,.22),
transparent 45%
);
pointer-events:none;
}
/* Brillo que cruza */
.btn-cotizar-banner::after{
content:"";
position:absolute;
top:0;
left:-70%;
width:40%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.65),
transparent
);
transform:skewX(-25deg);
transition:.8s;
}
.btn-cotizar-banner:hover::after{
left:150%;
}
/* Hover */
.btn-cotizar-banner:hover{
color:#fff;
background:linear-gradient(
180deg,
rgba(25,118,230,.95) 0%,
rgba(13,71,161,.93) 55%,
rgba(8,48,120,.96) 100%
);
transform:translateY(-4px);
box-shadow:
0 18px 35px rgba(0,0,0,.35),
0 0 18px rgba(20,104,215,.35);
}
/*====================================
SECCIÓN VIDEOS HOME
====================================*/
.videos-home-section{
width:100%;
max-width:1200px;
margin:90px auto;
padding:0 20px;
}
.videos-titulo{
text-align:center;
margin-bottom:45px;
}
.videos-titulo h2{
font-family:"Rajdhani",sans-serif;
font-size:62px; /* antes 44 */
font-weight:700;
color:#fff;
text-transform:uppercase;
letter-spacing:3px;
margin-bottom:20px;
text-shadow:
0 4px 18px rgba(0,0,0,.45);
}
.videos-titulo p{
max-width:1000px; /* antes 780 */
margin:auto;
font-size:24px; /* antes 18 */
line-height:1.8;
color:rgba(255,255,255,.90);
}
.videos-boton{
text-align:center;
margin-top:45px;
}
.videos-titulo::after{
content:"";
display:block;
width:90px;
height:4px;
margin:18px auto 25px;
border-radius:20px;
background:linear-gradient(
90deg,
#ff7a00,
#0d6efd
);
}
.btn-ver-proyectos{
position:relative;
display:inline-block;
overflow:hidden;
padding:18px 42px;
font-family:"Rajdhani",sans-serif;
font-size:28px;
font-weight:600;
letter-spacing:2px;
text-decoration:none;
color:#fff;
background:linear-gradient(
180deg,
rgba(54,145,255,.82),
rgba(20,104,215,.78),
rgba(10,70,170,.82)
);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.25);
border-radius:8px;
box-shadow:
0 10px 22px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.25);
transition:.35s ease;
}
/* Reflejo superior */
.btn-ver-proyectos::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(255,255,255,.22),
transparent 45%
);
pointer-events:none;
}
/* Brillo que cruza */
.btn-ver-proyectos::after{
content:"";
position:absolute;
top:0;
left:-70%;
width:40%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.65),
transparent
);
transform:skewX(-25deg);
transition:.8s;
}
.btn-ver-proyectos:hover::after{
left:150%;
}
.btn-ver-proyectos:hover{
color:#fff;
transform:translateY(-4px);
background:linear-gradient(
180deg,
rgba(25,118,230,.95),
rgba(13,71,161,.93),
rgba(8,48,120,.96)
);
box-shadow:
0 18px 35px rgba(0,0,0,.35),
0 0 18px rgba(20,104,215,.35);
}
/*====================================
ESTADÍSTICAS
=====================================*/
.estadisticas-md{
position:relative;
overflow:hidden;
/* Separación respecto al slider */
margin-top:35px;
/* Sección compacta */
padding:18px 0;
background-image:
linear-gradient(
110deg,
rgba(4,29,49,.88) 0%,
rgba(7,49,79,.82) 48%,
rgba(11,64,99,.78) 100%
),
url("../assets/fondos/fondo-estadisticas.png");
background-size:
cover,
cover;
background-position:
center,
center;
background-repeat:no-repeat;
}
.estadisticas-md::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:#ef7423;
}
.estadisticas-md::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at 50% -80px,
rgba(255,255,255,.10),
transparent 55%
);
pointer-events:none;
}
.estadisticas-grid{
position:relative;
z-index:2;
display:flex;
align-items:stretch;
gap:0;
}
/*============================
FONDO
============================*/
.estadisticas-md::before{
content:"";
position:absolute;
inset:0;
background-image:url("../assets/fondos/fondo-estadisticas.png");
background-size:cover;
background-position:center;
opacity:.22;
transform:scale(1.03);
}
/*============================
OVERLAY
============================*/
.estadisticas-md::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
rgba(6,32,52,.70),
rgba(8,40,66,.74)
);
}
.estadisticas-linea{
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:#ef7423;
z-index:5;
}
/*============================
ITEM
============================*/
.estadistica-item{
flex:1;
position:relative;
display:flex;
align-items:center;
gap:14px;
padding:16px 18px;
min-height:72px;
overflow:hidden;
cursor:pointer;
transition:
flex .35s ease,
background .35s ease,
transform .35s ease;
}
.estadistica-item:hover{
flex:1.45;
background:rgba(255,255,255,.08);
}
.estadistica-item:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:18%;
width:1px;
height:64%;
background:rgba(255,255,255,.18);
}
/*============================
ICONO
============================*/
.estadistica-icono{
width:46px;
height:46px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
border:1px solid rgba(239,116,35,.70);
color:#ef7423;
font-size:20px;
background:rgba(255,255,255,.05);
transition:.35s;
}
.estadistica-item:hover .estadistica-icono{
background:#ef7423;
color:#fff;
transform:rotate(-8deg) scale(1.08);
}
/*============================
CONTENIDO
============================*/
.estadistica-contenido{
display:flex;
flex-direction:column;
overflow:hidden;
}
.estadistica-numero{
color:#fff;
font-family:"Rajdhani",sans-serif;
font-size:1.05rem;
font-weight:800;
line-height:1;
text-transform:uppercase;
}
.estadistica-texto{
margin-top:3px;
color:rgba(255,255,255,.80);
font-size:.74rem;
line-height:1.25;
transition:.35s;
}
/*============================
DESCRIPCION EXTRA
============================*/
.estadistica-extra{
max-height:0;
opacity:0;
overflow:hidden;
margin-top:0;
color:#dfe7ed;
font-size:.72rem;
line-height:1.35;
transition:.35s;
}
.estadistica-item:hover .estadistica-extra{
max-height:60px;
margin-top:8px;
opacity:1;
}
/*============================
LINEA NARANJA
============================*/
.estadistica-item::before{
content:"";
position:absolute;
bottom:0;
left:50%;
width:0;
height:3px;
background:#ef7423;
transform:translateX(-50%);
transition:.35s;
}
.estadistica-item:hover::before{
width:82%;
}
/*==================================================
FOOTER INDUSTRIAL V5
PARTE 1
==================================================*/
/*==============================
BASE
==============================*/
.footer-industrial{
position:relative;
overflow:hidden;
background:#082845;
color:#fff;
font-family:"Montserrat",sans-serif;
}
.footer-industrial::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#ef7423;
z-index:20;
}
/*==============================
FONDO
==============================*/
.footer-industrial-fondo{
position:absolute;
inset:0;
background-image:url("../assets/fondos/footer-industrial.jpg");
background-size:cover;
background-position:center;
opacity:.16;
transform:scale(1.03);
}
.footer-industrial-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
rgba(6,32,52,.66),
rgba(5,31,51,.74)
);
}
.footer-industrial-brillo{
position:absolute;
left:50%;
top:-180px;
transform:translateX(-50%);
width:900px;
height:420px;
border-radius:50%;
background:
radial-gradient(
rgba(90,165,220,.18),
transparent 70%
);
}
/*==============================
CONTENEDOR
==============================*/
.footer-industrial-contenido{
position:relative;
z-index:5;
padding:38px 0 18px;
}
.footer-industrial .container{
max-width:1220px;
}
/*==============================
GRID
==============================*/
.footer-industrial-grid{
display:grid;
grid-template-columns:
1.18fr
1.05fr
1fr
1.08fr;
column-gap:38px;
}
/*==============================
COLUMNAS
==============================*/
.footer-industrial-columna{
display:flex;
flex-direction:column;
position:relative;
}
.footer-industrial-columna:not(:last-child){
padding-right:34px;
}
.footer-industrial-columna:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:8px;
bottom:8px;
width:1px;
background:
linear-gradient(
transparent,
rgba(255,255,255,.18),
transparent
);
}
/*==============================
CUERPO
==============================*/
.footer-industrial-cuerpo{
flex:1;
display:flex;
flex-direction:column;
}
/*==============================
LOGO
==============================*/
.footer-industrial-logo{
display:inline-block;
margin-bottom:18px;
}
.footer-industrial-logo img{
width:295px;
max-width:100%;
display:block;
}
/*==============================
DESCRIPCIÓN
==============================*/
.footer-industrial-descripcion{
max-width:285px;
margin:0;
color:rgba(255,255,255,.88);
font-size:.95rem;
line-height:1.75;
}
/*==============================
REDES
==============================*/
.footer-industrial-redes{
display:flex;
gap:12px;
margin-top:28px;
}
.footer-industrial-redes a{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:9px;
border:1px solid rgba(255,255,255,.20);
color:#fff;
text-decoration:none;
font-size:22px;
background:rgba(255,255,255,.03);
transition:.25s;
}
.footer-industrial-redes a:hover{
background:#ef7423;
border-color:#ef7423;
transform:translateY(-3px);
}
/*==============================
TÍTULOS
==============================*/
.footer-industrial-columna h3{
margin:0;
font-family:"Rajdhani",sans-serif;
font-size:2rem;
font-weight:700;
text-transform:uppercase;
line-height:1.05;
}
.footer-industrial-linea-titulo{
width:58px;
height:4px;
margin:14px 0 22px;
background:#ef7423;
}
/*==============================
TELÉFONO
==============================*/
.footer-industrial-telefono{
margin-bottom:18px;
}
.footer-industrial-telefono span{
display:block;
margin-bottom:5px;
color:#ff963f;
font-size:.88rem;
letter-spacing:2px;
font-weight:700;
text-transform:uppercase;
}
.footer-industrial-telefono a{
text-decoration:none;
color:#fff;
font-family:"Rajdhani",sans-serif;
font-size:3rem;
font-weight:800;
line-height:1;
}
/*==============================
DATOS
==============================*/
.footer-industrial-datos{
display:flex;
flex-direction:column;
gap:14px;
}
.footer-industrial-datos a,
.footer-industrial-datos div{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:rgba(255,255,255,.92);
font-size:.95rem;
}
.footer-industrial-datos i{
color:#ef7423;
width:20px;
font-size:18px;
}
/*==============================
SUCURSALES
==============================*/
.footer-industrial-ciudades{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px 18px;
}
.footer-industrial-ciudades a{
display:flex;
align-items:flex-start;
gap:10px;
color:#fff;
text-decoration:none;
font-size:.92rem;
line-height:1.45;
}
.footer-industrial-ciudades i{
color:#ef7423;
margin-top:2px;
}
/*==============================
BENEFICIOS
==============================*/
.footer-industrial-beneficios{
display:flex;
flex-direction:column;
}
.footer-industrial-beneficio{
display:flex;
align-items:flex-start;
gap:14px;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-industrial-beneficio:last-child{
border-bottom:none;
}
.footer-industrial-beneficio i{
color:#ef7423;
font-size:24px;
margin-top:2px;
}
.footer-industrial-beneficio span{
color:rgba(255,255,255,.92);
font-size:.93rem;
line-height:1.55;
}
/*==============================
BOTONES
==============================*/
.footer-industrial-boton{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
height:54px;
margin-top:24px;
border-radius:8px;
text-decoration:none;
font-size:.95rem;
font-weight:600;
transition:.25s;
}
.footer-industrial-boton-principal{
color:#fff;
background:linear-gradient(
#f47b21,
#ea6710
);
}
.footer-industrial-boton-principal:hover{
background:#ff8f36;
}
.footer-industrial-boton-borde{
color:#fff;
border:1px solid rgba(239,116,35,.85);
background:rgba(255,255,255,.02);
}
.footer-industrial-boton-borde:hover{
background:#ef7423;
}
/*==================================================
FOOTER INDUSTRIAL V5
PARTE 2
==================================================*/
/*==================================
COBERTURA
==================================*/
.footer-cobertura{
position:relative;
overflow:hidden;
margin-top:18px;
border-top:1px solid rgba(255,255,255,.12);
background:#0a314f;
}
.footer-cobertura::before{
content:"";
position:absolute;
inset:0;
background-image:url("../assets/fondos/footer-industrial.jpg");
background-size:cover;
background-position:center;
opacity:.18;
transform:scale(1.03);
}
.footer-cobertura::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
rgba(7,38,60,.74),
rgba(7,38,60,.74)
);
}
/*=========================
CONTENIDO
=========================*/
.footer-cobertura-contenido{
position:relative;
z-index:2;
display:grid;
grid-template-columns:
180px
1fr
150px
300px;
align-items:center;
gap:25px;
min-height:150px;
padding:18px 0;
}
/*=========================
MAPA
=========================*/
.footer-mapa-mexico{
display:flex;
justify-content:center;
align-items:center;
}
.footer-mapa-svg{
width:185px;
height:auto;
}
.footer-mapa-forma{
fill:#8f9eab;
opacity:.82;
}
.footer-mapa-punto{
fill:#ef7423;
}
/*=========================
TEXTO
=========================*/
.footer-cobertura-texto{
display:flex;
align-items:center;
gap:24px;
}
.footer-cobertura-linea{
width:5px;
height:58px;
background:#ef7423;
}
.footer-cobertura-texto h3{
margin:0;
font-family:"Rajdhani",sans-serif;
font-size:2.25rem;
line-height:1;
text-transform:uppercase;
}
.footer-cobertura-texto h4{
margin:10px 0 8px;
color:#ef7423;
font-family:"Rajdhani",sans-serif;
font-size:1.55rem;
}
.footer-cobertura-texto p{
margin:0;
color:rgba(255,255,255,.82);
font-size:.95rem;
}
/*=========================
BOTON
=========================*/
.footer-cobertura-boton{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
width:100%;
height:64px;
border-radius:8px;
background:
linear-gradient(
#f47b21,
#eb6812
);
color:#fff;
text-decoration:none;
font-size:1.15rem;
font-weight:700;
transition:.25s;
}
.footer-cobertura-boton:hover{
transform:translateY(-2px);
background:#ff9134;
}
/*==================================
COPYRIGHT
==================================*/
.footer-industrial-inferior{
background:#061d30;
border-top:1px solid rgba(255,255,255,.10);
}
.footer-industrial-inferior-contenido{
display:flex;
justify-content:space-between;
align-items:center;
height:46px;
}
.footer-industrial-inferior p{
margin:0;
color:rgba(255,255,255,.78);
font-size:.82rem;
}
.footer-industrial-legales{
display:flex;
align-items:center;
gap:26px;
}
.footer-industrial-legales a{
display:flex;
align-items:center;
gap:8px;
color:rgba(255,255,255,.82);
text-decoration:none;
font-size:.84rem;
}
.footer-industrial-legales a:hover{
color:#ef7423;
}
.footer-industrial-separador{
width:1px;
height:18px;
background:rgba(255,255,255,.18);
}
/*==================================
RESPONSIVE
==================================*/
@media(max-width:1200px){
.footer-industrial-grid{
grid-template-columns:1fr 1fr;
row-gap:40px;
}
.footer-industrial-columna::after{
display:none;
}
.footer-industrial-columna{
padding-right:0;
}
.footer-cobertura-contenido{
grid-template-columns:1fr;
text-align:center;
gap:22px;
}
.footer-cobertura-texto{
justify-content:center;
}
}
@media(max-width:768px){
.footer-industrial-grid{
grid-template-columns:1fr;
}
.footer-industrial-ciudades{
grid-template-columns:1fr;
}
.footer-mapa-mexico{
display:none;
}
.footer-cobertura-texto{
flex-direction:column;
text-align:center;
}
.footer-cobertura-linea{
width:55px;
height:4px;
}
.footer-cobertura-boton{
height:54px;
font-size:1rem;
}
.footer-industrial-inferior-contenido{
flex-direction:column;
justify-content:center;
height:auto;
padding:14px 0;
gap:10px;
}
.footer-industrial-legales{
flex-wrap:wrap;
justify-content:center;
}
}
/*==================================================
FOOTER INDUSTRIAL V5
PARTE 3
AJUSTES FINALES
==================================================*/
/*==========================
MAPA
==========================*/
.footer-mapa-mexico{
display:flex;
justify-content:center;
align-items:center;
}
.footer-mapa-mexico img{
width:195px;
height:auto;
opacity:.82;
filter:
drop-shadow(0 10px 20px rgba(0,0,0,.25));
}
/*==========================
ILUMINACIÓN GENERAL
==========================*/
.footer-industrial::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.18),
transparent 28%,
transparent 72%,
rgba(0,0,0,.20)
);
pointer-events:none;
}
/*==========================
BOTONES
==========================*/
.footer-industrial-boton,
.footer-cobertura-boton{
box-shadow:
0 12px 25px rgba(0,0,0,.18);
}
.footer-industrial-boton:hover,
.footer-cobertura-boton:hover{
box-shadow:
0 18px 35px rgba(0,0,0,.28);
}
/*==========================
LOGO
==========================*/
.footer-industrial-logo img{
transition:.35s;
}
.footer-industrial-logo img:hover{
transform:scale(1.02);
}
/*==========================
ICONOS
==========================*/
.footer-industrial-redes a{
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.06);
}
.footer-industrial-redes a:hover{
transform:translateY(-3px);
}
/*==========================
HOVER LINKS
==========================*/
.footer-industrial-ciudades a:hover,
.footer-industrial-datos a:hover{
color:#ffb06f;
}
.footer-industrial-ciudades a{
transition:.25s;
}
.footer-industrial-ciudades a:hover{
transform:translateX(4px);
}
/*==========================
BENEFICIOS
==========================*/
.footer-industrial-beneficio{
transition:.25s;
}
.footer-industrial-beneficio:hover{
transform:translateX(5px);
}
/*==========================
COPYRIGHT
==========================*/
.footer-industrial-inferior{
backdrop-filter:blur(8px);
}
.footer-industrial-legales a i{
color:#ef7423;
}
/*==========================
MEJOR ESPACIADO
==========================*/
.footer-industrial-columna h3{
letter-spacing:.3px;
}
.footer-industrial-descripcion{
text-wrap:pretty;
}
.footer-cobertura-texto h3{
text-wrap:balance;
}
/*==========================
TRANSICIONES
==========================*/
.footer-industrial *{
transition:
background-color .25s,
border-color .25s,
color .25s;
}
/*==================================================
FOOTER V5.1
AJUSTES DE PROPORCIONES PARA NO MOVER EL PUTO MONSTRUO DE ARRIBA JEJE
==================================================*/
/*=========================
CONTENEDOR
=========================*/
.footer-industrial-contenido{
padding:20px 0 8px;
}
/*=========================
GRID
=========================*/
.footer-industrial-grid{
column-gap:30px;
}
/*=========================
COLUMNAS
=========================*/
.footer-industrial-columna:not(:last-child){
padding-right:28px;
}
.footer-industrial-columna:not(:last-child)::after{
top:4px;
bottom:4px;
}
/*=========================
LOGO
=========================*/
.footer-industrial-logo{
margin-bottom:12px;
}
.footer-industrial-logo img{
width:235px;
}
/*=========================
DESCRIPCIÓN
=========================*/
.footer-industrial-descripcion{
max-width:265px;
font-size:.90rem;
line-height:1.52;
}
/*=========================
REDES
=========================*/
.footer-industrial-redes{
margin-top:18px;
gap:10px;
}
.footer-industrial-redes a{
width:44px;
height:44px;
font-size:20px;
}
/*=========================
TITULOS
=========================*/
.footer-industrial-columna h3{
font-size:1.72rem;
line-height:.95;
}
.footer-industrial-linea-titulo{
margin:10px 0 16px;
width:54px;
}
/*=========================
TELÉFONO
=========================*/
.footer-industrial-telefono{
margin-bottom:14px;
}
.footer-industrial-telefono span{
margin-bottom:3px;
font-size:.82rem;
}
.footer-industrial-telefono a{
font-size:2.45rem;
}
/*=========================
DATOS
=========================*/
.footer-industrial-datos{
gap:10px;
}
.footer-industrial-datos a,
.footer-industrial-datos div{
font-size:.90rem;
}
.footer-industrial-datos i{
font-size:17px;
}
/*=========================
SUCURSALES
=========================*/
.footer-industrial-ciudades{
gap:10px 14px;
}
.footer-industrial-ciudades a{
font-size:.90rem;
line-height:1.30;
}
/*=========================
BENEFICIOS
=========================*/
.footer-industrial-beneficio{
padding:10px 0;
gap:12px;
}
.footer-industrial-beneficio span{
font-size:.90rem;
line-height:1.45;
}
.footer-industrial-beneficio i{
font-size:22px;
}
/*=========================
BOTONES
=========================*/
.footer-industrial-boton{
margin-top:18px;
height:46px;
font-size:.92rem;
}
/*==================================================
COBERTURA
==================================================*/
.footer-cobertura{
margin-top:12px;
}
.footer-cobertura-contenido{
min-height:105px;
padding:10px 0;
gap:24px;
grid-template-columns:
180px
1fr
150px
300px;
}
/*=========================
MAPA
=========================*/
.footer-mapa-mexico img{
width:155px;
}
/*=========================
TEXTO
=========================*/
.footer-cobertura-linea{
height:48px;
}
.footer-cobertura-texto{
gap:18px;
}
.footer-cobertura-texto h3{
font-size:1.85rem;
}
.footer-cobertura-texto h4{
margin:6px 0 6px;
font-size:1.25rem;
}
.footer-cobertura-texto p{
font-size:.90rem;
}
/*=========================
BOTON COBERTURA
=========================*/
.footer-cobertura-boton{
height:54px;
font-size:1rem;
grid-column:auto;
grid-row:auto;
margin:0;
justify-self:end;
}
/*==================================================
COPYRIGHT
==================================================*/
.footer-industrial-inferior-contenido{
height:38px;
}
.footer-industrial-inferior p{
font-size:.78rem;
}
.footer-industrial-legales{
gap:18px;
}
.footer-industrial-legales a{
font-size:.80rem;
}
.footer-industrial-separador{
height:15px;
}
/*==================================================
PEQUEÑOS AJUSTES
==================================================*/
.footer-industrial-beneficio:hover{
transform:translateX(2px);
}
.footer-industrial-ciudades a:hover{
transform:translateX(2px);
}
.footer-industrial-boton:hover{
transform:translateY(-1px);
}
.footer-cobertura-boton:hover{
transform:translateY(-1px);
}
/*====================================
CERTIFICACIONES
====================================*/
.certificaciones{
position:relative;
padding:20px 0;
margin-top:50px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
overflow:hidden;
}
/* Imagen de fondo */
.certificaciones::before{
content:"";
position:absolute;
inset:0;
background-image:url("../assets/certificaciones/fondo_certificaciones.png");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
opacity:.20;
pointer-events:none;
}
.certificaciones>*{
position:relative;
z-index:2;
}
.certificaciones h2{
text-align:center;
color:#fff;
font-size:3rem;
letter-spacing:5px;
margin-bottom:20px;
font-weight:700;
}
.certificaciones-grid{
display:flex;
justify-content:center;
align-items:center;
gap:90px;
flex-wrap:wrap;
}
.certificaciones-grid img{
height:130px;
width:auto;
object-fit:contain;
opacity:.95;
transition:.35s ease;
}
.certificaciones-grid img:hover{
transform:scale(1.12);
}
@media(max-width:768px){
.certificaciones{
margin-top:30px;
padding:40px 20px;
}
.certificaciones h2{
font-size:1.7rem;
margin-bottom:30px;
}
.certificaciones-grid{
gap:35px;
}
.certificaciones-grid img{
height:85px;
}
}
/*====================================
CERTIFICACIONES FOOTER
====================================*/
.footer-industrial-certificaciones{
width:210px;
margin:18px 0 22px;
text-align:center;
}
.footer-industrial-certificaciones h4{
margin:0;
color:#fff;
font-size:.85rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
}
.footer-industrial-certificaciones-linea{
width:90px;
height:3px;
background:#ff6a00;
margin:6px auto 10px;
}
.footer-industrial-certificaciones-logos{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}
.footer-industrial-certificaciones-logos img{
width:auto;
opacity:.80;
transition:.35s ease;
}
.cert-dmt{
height:70px;
}
.cert-mhi{
height:72px;
}
.cert-rrr{
height:98px;
}
.footer-industrial-certificaciones-logos img:hover{
opacity:1;
transform:translateY(-2px) scale(1.04);
}
/*====================================
CLIENTES
====================================*/
.pagina-clientes{
background:#0b0b0b;
color:#fff;
overflow:hidden;
}
/*====================================
HERO
====================================*/
.clientes-hero{
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-height:85vh;
overflow:hidden;
}
.clientes-hero-fondo{
position:absolute;
inset:0;
background-image:url("../assets/clientes/banner-clientes.jpg");
background-size:cover;
background-position:center;
transform:scale(1.05);
}
.clientes-hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
rgba(0,0,0,.78),
rgba(0,0,0,.70)
);
}
.clientes-hero-brillo{
position:absolute;
width:700px;
height:700px;
right:-180px;
top:-180px;
background:radial-gradient(
circle,
rgba(255,128,0,.20),
transparent 70%
);
filter:blur(20px);
}
.clientes-hero-contenido{
position:relative;
z-index:2;
}
.clientes-hero-texto{
max-width:820px;
text-align:center;
margin:auto;
}
.clientes-hero-etiqueta{
display:inline-block;
padding:8px 18px;
border:1px solid rgba(255,255,255,.15);
border-radius:40px;
background:rgba(255,255,255,.05);
font-size:.9rem;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:25px;
}
.clientes-hero h1{
font-family:"Rajdhani",sans-serif;
font-size:5rem;
font-weight:800;
margin-bottom:15px;
text-transform:uppercase;
}
.clientes-hero-linea{
width:110px;
height:4px;
margin:25px auto;
background:#ff7a00;
border-radius:50px;
}
.clientes-hero p{
font-size:1.2rem;
line-height:1.8;
color:#d5d5d5;
max-width:760px;
margin:auto auto 45px;
}
.clientes-hero-boton{
display:inline-flex;
align-items:center;
gap:12px;
padding:15px 35px;
background:#ff7a00;
color:#fff;
text-decoration:none;
border-radius:50px;
font-weight:700;
transition:.35s;
}
.clientes-hero-boton:hover{
transform:translateY(-5px);
background:#ff9500;
color:#fff;
box-shadow:0 15px 35px rgba(255,122,0,.35);
}
.clientes-hero-indicador{
position:absolute;
bottom:35px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
color:#fff;
font-size:.85rem;
letter-spacing:2px;
text-transform:uppercase;
animation:flotar 2s infinite;
z-index:2;
}
@keyframes flotar{
0%,100%{
transform:translate(-50%,0);
}
50%{
transform:translate(-50%,8px);
}
}
/*====================================
CONFIANZA
====================================*/
.clientes-confianza{
background:#111;
padding:40px 0;
border-top:1px solid rgba(255,255,255,.05);
border-bottom:1px solid rgba(255,255,255,.05);
}
.clientes-confianza-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
align-items:center;
gap:20px;
}
.clientes-confianza-item{
display:flex;
align-items:center;
gap:18px;
}
.clientes-confianza-icono{
width:65px;
height:65px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#ff7a00;
font-size:1.4rem;
flex-shrink:0;
}
.clientes-confianza-texto strong{
display:block;
font-size:1.05rem;
}
.clientes-confianza-texto span{
color:#bdbdbd;
font-size:.92rem;
}
.clientes-confianza-separador{
width:1px;
height:60px;
background:rgba(255,255,255,.08);
justify-self:center;
}
/*====================================
INTRODUCCION
====================================*/
.clientes-introduccion{
padding:110px 0 70px;
text-align:center;
}
.clientes-subtitulo{
display:inline-block;
color:#ff7a00;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:15px;
}
.clientes-introduccion h2{
font-size:3rem;
font-family:"Rajdhani",sans-serif;
font-weight:800;
margin-bottom:20px;
}
.clientes-titulo-linea{
width:90px;
height:4px;
margin:25px auto;
background:#ff7a00;
border-radius:30px;
}
.clientes-introduccion p{
max-width:900px;
margin:auto;
line-height:1.9;
font-size:1.15rem;
color:#cfcfcf;
}
/*====================================
CLIENTES NUEVO
====================================*/
.clientes-logos{
padding:60px 0 120px;
background:#0d0d0d;
position:relative;
overflow:hidden;
}
.clientes-encabezado{
text-align:center;
margin-bottom:70px;
}
.clientes-encabezado h2{
color:#fff;
font-size:2rem;
font-family:"Rajdhani",sans-serif;
font-weight:800;
}
.clientes-masonry{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-auto-rows:280px;
gap:25px;
}
.cliente-item{
position:relative;
overflow:hidden;
border-radius:24px;
background:#181818;
border:1px solid rgba(255,255,255,.06);
display:flex;
align-items:center;
justify-content:center;
transition:.45s;
text-decoration:none;
}
.cliente-item.grande{
grid-row:span 2;
}
.cliente-item.horizontal{
grid-column:span 2;
}
.cliente-item img{
max-width:240px;
max-height:120px;
width:80%;
height:auto;
object-fit:contain;
filter:grayscale(100%);
transition:.45s;
z-index:2;
}
.cliente-hover{
position:absolute;
left:35px;
right:35px;
bottom:-120px;
transition:.45s;
z-index:3;
}
.cliente-hover span{
color:#ff7a00;
font-size:.8rem;
letter-spacing:2px;
text-transform:uppercase;
}
.cliente-hover h3{
margin:8px 0;
font-family:Rajdhani;
font-size:2rem;
color:white;
}
.cliente-hover p{
color:#d5d5d5;
line-height:1.7;
}
.cliente-item::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
transparent,
rgba(0,0,0,.90)
);
opacity:0;
transition:.45s;
}
.cliente-item:hover::before{
opacity:1;
}
.cliente-item:hover img{
transform:translateY(-70px);
filter:none;
}
.cliente-item:hover .cliente-hover{
bottom:35px;
}
.cliente-item:hover{
border-color:#ff7a00;
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(255,122,0,.18);
}
/*====================================
SECTORES
====================================*/
.clientes-sectores{
padding:120px 0;
background:#0f0f0f;
}
.clientes-sectores-titulo{
text-align:center;
max-width:900px;
margin:auto auto 70px;
color:#fff;
font-size:1.3rem;
font-family:"Rajdhani",sans-serif;
font-weight:800;
margin-bottom:20px;
}
.clientes-sectores-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
}
.clientes-ventajas-titulo{
text-align:center;
max-width:900px;
margin:auto;
}
.clientes-ventajas-titulo h2{
color:#fff;
font-size:2rem;
font-family:"Rajdhani",sans-serif;
font-weight:800;
margin:20px 0;
}
.sector-card{
position:relative;
height:380px;
border-radius:22px;
overflow:hidden;
cursor:pointer;
}
.sector-card img{
width:100%;
height:100%;
object-fit:cover;
transition:.6s;
}
.sector-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
transparent,
rgba(0,0,0,.88)
);
}
.sector-overlay{
position:absolute;
left:35px;
right:35px;
bottom:35px;
z-index:2;
}
.sector-overlay h3{
font-size:2rem;
font-family:"Rajdhani";
font-weight:800;
margin-bottom:12px;
color:#fff;
}
.sector-overlay p{
color:#dddddd;
line-height:1.7;
margin:0;
}
.sector-card:hover img{
transform:scale(1.10);
}
.sector-card:hover{
box-shadow:
0 25px 60px rgba(0,0,0,.45),
0 0 40px rgba(255,122,0,.18);
}
/*====================================
VENTAJAS
====================================*/
.clientes-ventajas{
padding:120px 0;
background:#111;
}
.clientes-ventajas-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:70px;
}
.ventaja-card{
padding:45px 30px;
text-align:center;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
transition:.35s;
}
.ventaja-card i{
font-size:3rem;
color:#ff7a00;
margin-bottom:25px;
display:block;
}
.ventaja-card h3{
font-family:"Rajdhani";
font-weight:800;
margin-bottom:15px;
color:#fff;
}
.ventaja-card p{
color:#d8d8d8;
line-height:1.8;
}
.ventaja-card:hover{
transform:translateY(-10px);
border-color:#ff7a00;
box-shadow:0 20px 50px rgba(255,122,0,.15);
}
/*====================================
CTA FINAL
====================================*/
.clientes-cta{
position:relative;
padding:160px 0;
overflow:hidden;
}
.clientes-cta-fondo{
position:absolute;
inset:0;
background:url("../assets/clientes/cta-clientes.jpg") center center/cover no-repeat;
transform:scale(1.1);
}
.clientes-cta-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.82);
}
.clientes-cta .container{
position:relative;
z-index:2;
}
.clientes-cta-contenido{
max-width:850px;
margin:auto;
text-align:center;
}
.clientes-cta-contenido span{
color:#ff7a00;
letter-spacing:3px;
text-transform:uppercase;
font-weight:700;
}
.clientes-cta h2{
color:#fff;
margin:25px 0;
font-size:3.6rem;
font-family:"Rajdhani";
font-weight:800;
}
.clientes-cta p{
font-size:1.2rem;
line-height:1.9;
color:#ddd;
margin-bottom:45px;
}
.clientes-cta-boton{
display:inline-flex;
align-items:center;
gap:12px;
padding:18px 40px;
background:#ff7a00;
border-radius:50px;
color:#fff;
text-decoration:none;
font-weight:700;
transition:.35s;
}
.clientes-cta-boton:hover{
background:#ff9500;
transform:translateY(-5px);
color:#fff;
box-shadow:0 20px 40px rgba(255,122,0,.35);
}
.md-card video,
.md-video-horizontal video{
display:block !important;
opacity:1 !important;
visibility:visible !important;
position:absolute;
inset:0;
z-index:1;
}
.md-card-overlay,
.md-horizontal-overlay{
z-index:2;
}
.md-play{
z-index:3;
}
/*==================================================
CARRITO V2
PARTE 1
CONTENEDOR
==================================================*/
.cotizacion{
width:min(1360px,95%);
margin:30px auto 55px;
}
/*==================================================
TITULO
==================================================*/
.titulo-cotizacion{
text-align:center;
margin-bottom:28px;
}
.titulo-cotizacion h1{
color:#fff;
font-size:42px;
font-weight:800;
margin-bottom:8px;
letter-spacing:.5px;
}
.titulo-cotizacion p{
color:#d8e2ec;
font-size:17px;
margin:0;
}
/*==================================================
PASOS
==================================================*/
.pasos-cotizacion{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin-bottom:28px;
}
.linea-paso{
width:65px;
height:2px;
background:rgba(255,255,255,.18);
}
.paso{
display:flex;
align-items:center;
gap:8px;
color:#91a2b5;
font-size:14px;
font-weight:600;
}
.paso span{
width:30px;
height:30px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#273949;
color:#fff;
font-size:14px;
}
.paso.activo{
color:#fff;
}
.paso.activo span{
background:#ef6a2f;
}
/*==================================================
GRID
==================================================*/
.cotizacion-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:28px;
align-items:start;
}
/*==================================================
PANELES
==================================================*/
.panel-cotizacion{
background:#fff;
border-radius:18px;
padding:22px;
box-shadow:
0 12px 30px rgba(0,0,0,.12);
}
.panel-cotizacion h2,
.panel-cotizacion h3{
color:#0b4e94;
font-size:26px;
font-weight:800;
margin-bottom:22px;
}
/*==================================================
TARJETA PRODUCTO
==================================================*/
.item-carrito{
position:relative;
display:grid;
grid-template-columns:110px 1fr;
gap:18px;
margin-bottom:18px;
padding:16px;
border-radius:16px;
background:#fff;
border:1px solid #edf1f5;
overflow:hidden;
transition:.25s;
box-shadow:
0 8px 18px rgba(0,0,0,.05);
}
.item-carrito:last-child{
margin-bottom:0;
}
.item-carrito::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:5px;
background:linear-gradient(
#ff8b1e,
#ef6a2f
);
}
.item-carrito:hover{
transform:translateY(-3px);
box-shadow:
0 15px 28px rgba(0,0,0,.12);
}
/*==================================================
IMAGEN
==================================================*/
.item-imagen{
width:110px;
height:110px;
border-radius:14px;
background:#f6f8fb;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.item-imagen img{
width:82%;
height:82%;
object-fit:contain;
transition:.30s;
}
.item-carrito:hover .item-imagen img{
transform:scale(1.08);
}
/*==================================================
CARRITO V2
PARTE 2
PRODUCTO + RESUMEN
==================================================*/
/*==================================
INFORMACIÓN
==================================*/
.item-info{
display:flex;
flex-direction:column;
height:100%;
}
.item-etiqueta{
display:inline-flex;
align-items:center;
gap:7px;
width:max-content;
padding:5px 11px;
border-radius:30px;
background:#eef6ff;
color:#0b4e94;
font-size:11px;
font-weight:700;
margin-bottom:10px;
}
.item-info h3{
color:#0b4e94;
font-size:20px;
font-weight:800;
margin-bottom:8px;
line-height:1.2;
}
.item-info p{
color:#6d7783;
font-size:14px;
line-height:1.55;
margin-bottom:16px;
}
/*==================================
PIE PRODUCTO
==================================*/
.item-bottom{
margin-top:auto;
display:flex;
justify-content:space-between;
align-items:center;
}
/*==================================
CANTIDAD
==================================*/
.item-acciones{
display:flex;
align-items:center;
gap:10px;
}
.btn-cantidad{
width:34px;
height:34px;
border:none;
border-radius:50%;
background:#0b4e94;
color:#fff;
font-size:16px;
cursor:pointer;
transition:.25s;
}
.btn-cantidad:hover{
background:#ef6a2f;
transform:translateY(-2px);
}
.item-cantidad{
min-width:28px;
text-align:center;
font-size:18px;
font-weight:800;
color:#222;
}
/*==================================
QUITAR
==================================*/
.btn-eliminar{
display:flex;
align-items:center;
gap:6px;
padding:9px 13px;
border:none;
border-radius:10px;
background:#fff2f2;
color:#d43b3b;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:.25s;
}
.btn-eliminar:hover{
background:#d43b3b;
color:#fff;
}
/*==================================================
RESUMEN
==================================================*/
.resumen-carrito{
margin-top:22px;
padding:22px;
border-radius:16px;
background:linear-gradient(
160deg,
#0b4e94,
#08376b
);
color:#fff;
box-shadow:
0 12px 30px rgba(11,78,148,.25);
}
.resumen-carrito h3{
color:#fff;
font-size:21px;
font-weight:800;
margin-bottom:18px;
}
.resumen-carrito .resumen-linea{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.15);
}
.resumen-carrito .resumen-linea span{
color:rgba(255,255,255,.82);
font-size:14px;
}
.resumen-carrito .resumen-linea strong{
color:#fff;
font-size:18px;
font-weight:800;
}
.resumen-extra{
display:flex;
flex-direction:column;
gap:10px;
margin-top:18px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.15);
}
.resumen-extra div{
display:flex;
align-items:center;
gap:9px;
font-size:13px;
}
.resumen-extra i{
color:#6df38b;
}
/*==================================
VACIAR
==================================*/
.btn-vaciar{
width:100%;
margin-top:20px;
padding:11px;
border:none;
border-radius:10px;
background:rgba(255,255,255,.10);
color:#fff;
font-size:14px;
font-weight:700;
cursor:pointer;
transition:.25s;
}
.btn-vaciar:hover{
background:#fff;
color:#d43b3b;
}
/*==================================================
CARRITO VACÍO
==================================================*/
.carrito-vacio{
min-height:320px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
.carrito-vacio>i{
font-size:60px;
color:#bcc7d2;
margin-bottom:16px;
}
.carrito-vacio h2{
color:#52606d;
font-size:26px;
margin-bottom:8px;
}
.carrito-vacio p{
color:#7d8894;
margin-bottom:22px;
}
.btn-seguir{
display:inline-flex;
align-items:center;
gap:8px;
padding:11px 18px;
border-radius:10px;
background:#0b4e94;
color:#fff;
text-decoration:none;
font-weight:700;
transition:.25s;
}
.btn-seguir:hover{
background:#ef6a2f;
color:#fff;
transform:translateY(-2px);
}
/*==================================================
CARRITO V2
PARTE 3
FORMULARIO + RESPONSIVE
==================================================*/
/*==================================
FORMULARIO
==================================*/
.resumen{
position:sticky;
top:95px;
}
.resumen>h3{
display:flex;
align-items:center;
gap:10px;
color:#0b4e94;
font-size:24px;
font-weight:800;
}
.resumen>h3::before{
content:"\F4E1";
font-family:"bootstrap-icons";
}
.form-cotizacion{
display:flex;
flex-direction:column;
gap:12px;
}
.form-cotizacion input,
.form-cotizacion textarea{
width:100%;
padding:12px 15px;
border:1px solid #d7e0e8;
border-radius:10px;
background:#fff;
color:#2d3c4a;
font-size:14px;
outline:none;
transition:.25s;
}
.form-cotizacion input::placeholder,
.form-cotizacion textarea::placeholder{
color:#7c8896;
}
.form-cotizacion input:focus,
.form-cotizacion textarea:focus{
border-color:#0b4e94;
box-shadow:
0 0 0 4px rgba(11,78,148,.10);
}
.form-cotizacion textarea{
min-height:110px;
resize:vertical;
}
/*==================================
WHATSAPP
==================================*/
.btn-enviar-cotizacion{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
width:100%;
margin-top:6px;
padding:14px;
border:none;
border-radius:12px;
background:linear-gradient(
#2ad768,
#18b955
);
color:#fff;
font-size:15px;
font-weight:800;
cursor:pointer;
transition:.25s;
box-shadow:
0 8px 18px rgba(37,211,102,.22);
}
.btn-enviar-cotizacion:hover{
transform:translateY(-2px);
background:linear-gradient(
#34df74,
#18ae50
);
}
.btn-enviar-cotizacion i{
font-size:20px;
}
/*==================================
AYUDA
==================================*/
.panel-ayuda{
display:flex;
gap:14px;
margin-top:18px;
padding:15px;
border-radius:12px;
background:#f4f8fd;
border:1px solid #dde8f2;
}
.panel-ayuda>i{
color:#0b4e94;
font-size:24px;
}
.panel-ayuda strong{
display:block;
color:#0b4e94;
margin-bottom:5px;
font-size:14px;
}
.panel-ayuda p{
margin:0;
color:#6b7784;
font-size:13px;
line-height:1.5;
}
/*==================================
SCROLL BONITO
==================================*/
.productos-carrito{
max-height:78vh;
overflow:auto;
padding-right:6px;
}
.productos-carrito::-webkit-scrollbar{
width:8px;
}
.productos-carrito::-webkit-scrollbar-thumb{
background:#d0d8e2;
border-radius:10px;
}
.productos-carrito::-webkit-scrollbar-thumb:hover{
background:#9fb1c6;
}
/*==================================
RESPONSIVE
==================================*/
@media(max-width:1200px){
.cotizacion-grid{
grid-template-columns:1fr 330px;
}
}
@media(max-width:991px){
.cotizacion{
width:95%;
}
.cotizacion-grid{
grid-template-columns:1fr;
}
.resumen{
position:static;
}
.panel-cotizacion{
padding:18px;
}
.item-carrito{
grid-template-columns:95px 1fr;
}
.item-imagen{
width:95px;
height:95px;
}
}
@media(max-width:768px){
.titulo-cotizacion h1{
font-size:34px;
}
.titulo-cotizacion p{
font-size:15px;
}
.pasos-cotizacion{
display:none;
}
.item-carrito{
grid-template-columns:1fr;
text-align:center;
}
.item-imagen{
margin:auto;
}
.item-bottom{
flex-direction:column;
gap:14px;
}
.item-acciones{
justify-content:center;
}
.btn-eliminar{
width:100%;
justify-content:center;
}
}
/*==================================
ANIMACIONES
==================================*/
.panel-cotizacion{
animation:fadeUp .45s ease;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(18px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*====================================
BOTÓN CLIENTES HOME
====================================*/
.clientes-home-cta{
text-align:center;
margin-top:35px;
}
.btn-clientes-home{
display:inline-flex;
align-items:center;
gap:12px;
padding:15px 34px;
background:#0b4e94;
color:#fff;
text-decoration:none;
font-size:17px;
font-weight:700;
border-radius:50px;
transition:.30s;
box-shadow:
0 10px 25px rgba(11,78,148,.25);
}
.btn-clientes-home:hover{
background:#ef6a2f;
color:#fff;
transform:translateY(-4px);
box-shadow:
0 16px 35px rgba(239,106,47,.30);
}
.btn-clientes-home i{
transition:.30s;
}
.btn-clientes-home:hover i{
transform:translateX(6px);
}
/*====================================
CENTRADO REAL DEL MENU EN ESCRITORIO
====================================*/
@media (min-width:992px){
.navbar .container{
position:relative;
}
.navbar-collapse{
position:static;
}
.navbar-nav{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
margin:0 !important;
}
}
/*====================================
DAVI - ASISTENTE VIRTUAL
====================================*/
.davi-widget{
position:fixed;
right:8px;
bottom:12px;
z-index:999999;
font-family:Arial, sans-serif;
}
/*====================================
BOTÓN FLOTANTE
====================================*/
.davi-boton{
width:82px;
height:82px;
border:none;
border-radius:50%;
background:#0b4e94;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
position:relative;
box-shadow:0 8px 30px rgba(0,0,0,.30);
transition:.3s;
}
.davi-boton:hover{
transform:scale(1.06);
}
.davi-boton img{
width:78px;
height:78px;
object-fit:contain;
border-radius:50%;
}
/* BURBUJA MINI */
.davi-burbuja-mini{
position:absolute;
right:70px;
top:8px;
background:#0b4e94;
color:white;
padding:9px 13px;
border-radius:20px 20px 5px 20px;
white-space:nowrap;
font-size:13px;
font-weight:bold;
box-shadow:0 5px 15px rgba(0,0,0,.20);
animation:daviBurbuja 4s infinite;
}
@keyframes daviBurbuja{
0%,70%,100%{
opacity:1;
transform:translateY(0);
}
80%{
transform:translateY(-5px);
}
}
/*====================================
VENTANA CHAT
====================================*/
.davi-chat{
width:350px;
height:min(520px, calc(100vh - 40px));
position:fixed;
right:12px;
bottom:12px;
background:white;
border-radius:20px;
overflow:hidden;
display:none;
flex-direction:column;
box-shadow:
0 20px 60px rgba(0,0,0,.30),
0 0 0 3px rgba(11,78,148,.15);
}
.davi-chat.activo{
display:flex;
}
/*====================================
HEADER
====================================*/
.davi-header{
background:linear-gradient(
135deg,
#0b4e94,
#0878c9
);
color:white;
padding:14px 16px;
display:flex;
align-items:center;
justify-content:space-between;
}
.davi-header-info{
display:flex;
align-items:center;
gap:10px;
}
.davi-header-info img{
width:48px;
height:48px;
object-fit:contain;
background:white;
border-radius:50%;
border:2px solid #ff7a00;
}
.davi-header-info strong{
display:block;
font-size:19px;
}
.davi-header-info span{
display:block;
font-size:12px;
opacity:.85;
}
.davi-header-botones{
display:flex;
gap:6px;
}
.davi-header-botones button{
width:34px;
height:34px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.15);
color:white;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}
.davi-header-botones button:hover{
background:rgba(255,255,255,.25);
}
/*====================================
MENSAJES
====================================*/
.davi-mensajes{
flex:1;
padding:18px;
overflow-y:auto;
background:#f4f7fb;
}
.davi-mensaje{
display:flex;
gap:8px;
margin-bottom:15px;
}
.davi-avatar-mensaje img{
width:38px;
height:38px;
object-fit:contain;
border-radius:50%;
background:white;
border:1px solid #ddd;
}
/*====================================
DAVI - BIENVENIDA
====================================*/
.davi-mensaje.bienvenida{
align-items:flex-end;
gap:8px;
}
/* CONTENEDOR DAVI COMPLETO */
.davi-avatar-bienvenida{
width:105px;
flex-shrink:0;
align-self:flex-end;
}
/* IMAGEN DAVI COMPLETO */
.davi-avatar-bienvenida img{
width:105px !important;
height:180px !important;
object-fit:contain !important;
object-position:center bottom;
border:none !important;
border-radius:0 !important;
background:transparent !important;
display:block;
}
/* BURBUJA DE BIENVENIDA */
.davi-mensaje.bienvenida .davi-texto-mensaje{
flex:1;
max-width:none;
padding:14px 15px;
border-radius:18px 18px 18px 5px;
}
.davi-texto-mensaje{
background:white;
padding:12px 14px;
border-radius:5px 18px 18px 18px;
max-width:275px;
color:#1c2b3a;
font-size:14px;
line-height:1.45;
box-shadow:0 3px 12px rgba(0,0,0,.07);
}
.davi-texto-mensaje p{
margin:5px 0 0;
}
/* MENSAJE DEL USUARIO */
.davi-mensaje.usuario{
justify-content:flex-end;
}
.davi-mensaje.usuario .davi-texto-mensaje{
background:#0b4e94;
color:white;
border-radius:18px 5px 18px 18px;
}
/*====================================
OPCIONES RÁPIDAS
====================================*/
.davi-opciones{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:15px;
}
.davi-opciones button{
min-height:50px;
border:1px solid #d7e3f1;
background:white;
border-radius:14px;
padding:8px;
cursor:pointer;
font-size:12px;
font-weight:bold;
color:#0b4e94;
transition:.25s;
}
.davi-opciones button i{
display:block;
font-size:19px;
color:#ff7a00;
margin-bottom:3px;
}
.davi-opciones button:hover{
border-color:#ff7a00;
transform:translateY(-2px);
box-shadow:0 5px 12px rgba(0,0,0,.08);
}
/*====================================
INPUT
====================================*/
.davi-input{
display:flex;
gap:8px;
padding:12px;
border-top:1px solid #e7e7e7;
background:white;
}
.davi-input input{
flex:1;
height:45px;
border:1px solid #d7dce3;
border-radius:25px;
padding:0 17px;
outline:none;
}
.davi-input input:focus{
border-color:#0b4e94;
}
.davi-input button{
width:45px;
height:45px;
border:none;
border-radius:50%;
background:#ff7a00;
color:white;
cursor:pointer;
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
}
/*====================================
DAVI RESPONSIVE
====================================*/
@media(max-width:600px){
.davi-widget{
right:8px;
bottom:8px;
}
.davi-chat{
position:fixed;
left:8px;
right:8px;
bottom:8px;
width:auto;
height:calc(100dvh - 16px);
max-height:650px;
border-radius:18px;
}
.davi-boton{
width:72px;
height:72px;
}
.davi-boton img{
width:68px;
height:68px;
}
.davi-burbuja-mini{
right:62px;
top:5px;
font-size:12px;
padding:8px 11px;
}
}
/*====================================
DAVI - TARJETAS PRODUCTOS
====================================*/
.davi-producto{
background:#fff;
border:1px solid #dce4ee;
border-radius:15px;
padding:10px;
margin:10px 0;
display:flex;
gap:10px;
box-shadow:
0 4px 12px
rgba(0,0,0,.06);
}
.davi-producto img{
width:75px;
height:75px;
object-fit:contain;
background:#f5f7fa;
border-radius:10px;
flex-shrink:0;
}
.davi-producto-info{
flex:1;
min-width:0;
}
.davi-producto-nombre{
display:block;
color:#0b4e94;
font-size:15px;
margin-bottom:4px;
}
.davi-producto-info p{
font-size:11px;
line-height:1.35;
margin:0 0 8px;
color:#444;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.davi-ver-producto{
border:none;
background:#ff7a00;
color:white;
padding:7px 13px;
border-radius:16px;
font-size:11px;
font-weight:bold;
cursor:pointer;
transition:.2s;
}
.davi-ver-producto:hover{
background:#0b4e94;
transform:translateY(-1px);
}
/*====================================
DAVI - TARJETA SUCURSAL
====================================*/
.davi-sucursal{
background:#fff;
border:1px solid #dce4ee;
border-radius:15px;
padding:12px;
margin:8px 0 15px 34px;
box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.davi-sucursal-nombre{
display:block;
color:#0b4e94;
font-size:15px;
margin-bottom:10px;
}
.davi-sucursal-botones{
display:flex;
gap:8px;
}
.davi-sucursal-botones a{
flex:1;
min-height:36px;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
border-radius:18px;
text-decoration:none;
font-size:11px;
font-weight:bold;
transition:.2s;
}
/* UBICACIÓN */
.davi-btn-ubicacion{
background:#0b4e94;
color:white;
}
.davi-btn-ubicacion:hover{
background:#083b70;
color:white;
transform:translateY(-1px);
}
/* WHATSAPP */
.davi-btn-whatsapp{
background:#25D366;
color:white;
}
.davi-btn-whatsapp:hover{
background:#1ebe5d;
color:white;
transform:translateY(-1px);
}
.davi-ver-sucursal{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:10px;
padding:8px 15px;
background:#ff7a00;
color:white;
border-radius:18px;
text-decoration:none;
font-size:12px;
font-weight:bold;
transition:.2s;
}
.davi-ver-sucursal:hover{
background:#0b4e94;
color:white;
transform:translateY(-1px);
}
/*====================================
CATÁLOGO DIGITAL - FOOTER
====================================*/
.footer-catalogo{
grid-column:auto;
grid-row:auto;
margin:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
justify-self:center;
gap:7px;
}
.footer-catalogo-titulo{
color:#fff;
font-size:13px;
font-weight:700;
}
/* PORTADA */
.catalogo-portada{
position:relative;
width:70px;
height:82px;
padding:0;
border:1px solid #ff7a00;
border-radius:6px;
overflow:hidden;
background:#fff;
cursor:pointer;
box-shadow:0 5px 15px rgba(0,0,0,.25);
transition:
transform .25s,
box-shadow .25s;
}
.catalogo-portada img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.catalogo-portada span{
position:absolute;
left:0;
right:0;
bottom:0;
padding:5px 2px;
background:rgba(11,78,148,.92);
color:#fff;
font-size:9px;
font-weight:bold;
text-align:center;
}
.catalogo-portada span i{
margin-right:3px;
color:#ff7a00;
}
.catalogo-portada:hover{
transform:
translateY(-4px)
scale(1.04);
box-shadow:
0 9px 20px
rgba(0,0,0,.35);
}
/*====================================
VISOR CATÁLOGO DIGITAL
====================================*/
.visor-catalogo-digital{
position:fixed;
inset:0;
width:100vw;
height:100dvh;
z-index:9999999;
display:none;
align-items:center;
justify-content:center;
background:rgba(3,15,29,.94);
backdrop-filter:blur(4px);
overflow:hidden;
}
.visor-catalogo-digital.activo{
display:flex;
}
/*====================================
CONTENEDOR DEL LIBRO
====================================*/
.catalogo-libro-contenedor{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:calc(100vw - 160px);
height:calc(100dvh - 40px);
display:flex;
align-items:center;
justify-content:center;
perspective:1800px;
overflow:hidden;
}
/*====================================
LIBRO
====================================*/
.catalogo-libro{
position:relative;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
transform-style:preserve-3d;
}
/*====================================
PÁGINA
====================================*/
.catalogo-pagina{
position:relative;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
transform-style:preserve-3d;
overflow:hidden;
}
/*====================================
IMAGEN
====================================*/
.catalogo-pagina img{
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:calc(100dvh - 50px);
object-fit:contain;
margin:auto;
user-select:none;
-webkit-user-drag:none;
cursor:grab;
transform-origin:center center;
}
/*====================================
ZOOM CATÁLOGO DIGITAL
====================================*/
.catalogo-pagina{
overflow:hidden;
}
.catalogo-pagina img{
display:block;
max-width:100%;
max-height:84vh;
width:auto;
height:auto;
object-fit:contain;
user-select:none;
-webkit-user-drag:none;
cursor:grab;
transform-origin:center center;
transition:none;
}
/* SOMBRA DE HOJA */
.catalogo-pagina::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(
90deg,
rgba(0,0,0,.16),
transparent 12%,
transparent 82%,
rgba(0,0,0,.08)
);
opacity:.5;
}
/*====================================
EFECTO PASAR PÁGINA - LIBRO
====================================*/
.catalogo-libro{
perspective:1800px;
}
/* PÁGINA */
.catalogo-pagina{
transform-style:preserve-3d;
backface-visibility:hidden;
}
/* SIGUIENTE */
.catalogo-pagina.pasar-siguiente{
transform-origin:left center;
animation:catalogoPasarSiguiente .55s ease-in-out;
}
/* ANTERIOR */
.catalogo-pagina.pasar-anterior{
transform-origin:right center;
animation:catalogoPasarAnterior .55s ease-in-out;
}
/*====================================
ANIMACIONES
====================================*/
@keyframes catalogoPasarSiguiente{
0%{
transform:
rotateY(0deg)
scale(1);
opacity:1;
}
45%{
transform:
rotateY(-85deg)
scale(.97);
opacity:.65;
}
50%{
transform:
rotateY(-90deg)
scale(.97);
opacity:0;
}
51%{
transform:
rotateY(90deg)
scale(.97);
opacity:0;
}
100%{
transform:
rotateY(0deg)
scale(1);
opacity:1;
}
}
@keyframes catalogoPasarAnterior{
0%{
transform:
rotateY(0deg)
scale(1);
opacity:1;
}
45%{
transform:
rotateY(85deg)
scale(.97);
opacity:.65;
}
50%{
transform:
rotateY(90deg)
scale(.97);
opacity:0;
}
51%{
transform:
rotateY(-90deg)
scale(.97);
opacity:0;
}
100%{
transform:
rotateY(0deg)
scale(1);
opacity:1;
}
}
/*====================================
CONTROLES
====================================*/
.catalogo-control{
position:absolute;
top:50%;
transform:translateY(-50%);
width:50px;
height:50px;
z-index:20;
border:1px solid
rgba(255,255,255,.25);
border-radius:50%;
background:
rgba(11,78,148,.75);
color:#fff;
font-size:22px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}
.catalogo-control:hover{
background:#ff7a00;
transform:
translateY(-50%)
scale(1.08);
}
.catalogo-control-anterior{
left:25px;
}
.catalogo-control-siguiente{
right:25px;
}
/*====================================
CERRAR
====================================*/
.catalogo-digital-cerrar{
position:absolute;
top:20px;
right:25px;
width:46px;
height:46px;
z-index:30;
border:none;
border-radius:50%;
background:#ff7a00;
color:#fff;
font-size:20px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}
.catalogo-digital-cerrar:hover{
background:#0b4e94;
transform:scale(1.08);
}
/*====================================
NUMERACIÓN
====================================*/
.catalogo-numeracion{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
padding:6px 14px;
border-radius:20px;
background:
rgba(0,0,0,.65);
color:#fff;
font-size:12px;
white-space:nowrap;
}
/*====================================
RESPONSIVE
====================================*/
@media(max-width:600px){
.catalogo-libro-contenedor{
width:96vw;
height:88vh;
}
.catalogo-pagina img{
max-width:94vw;
max-height:78vh;
}
.catalogo-control{
width:40px;
height:40px;
font-size:17px;
}
.catalogo-control-anterior{
left:5px;
}
.catalogo-control-siguiente{
right:5px;
}
.catalogo-digital-cerrar{
top:10px;
right:10px;
width:40px;
height:40px;
}
}
/*====================================
DESCARGAR CATÁLOGO
====================================*/
.catalogo-descargar{
position:absolute;
right:25px;
bottom:20px;
z-index:40;
display:flex;
align-items:center;
gap:8px;
padding:10px 16px;
border:1px solid rgba(255,255,255,.25);
border-radius:22px;
background:rgba(11,78,148,.85);
color:white;
text-decoration:none;
font-size:13px;
font-weight:600;
box-shadow:0 5px 18px rgba(0,0,0,.25);
backdrop-filter:blur(5px);
transition:.25s;
}
.catalogo-descargar i{
font-size:17px;
color:#ff7a00;
}
.catalogo-descargar:hover{
background:#ff7a00;
color:white;
transform:translateY(-2px);
}
.catalogo-descargar:hover i{
color:white;
}
@media(max-width:600px){
.catalogo-descargar{
right:10px;
bottom:10px;
padding:9px 12px;
font-size:11px;
}
}
/*========================================
INTRO METÁLICOS DÁVILA
========================================*/
#introDavila{
position:fixed;
inset:0;
width:100%;
height:100vh;
z-index:9999999;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:#080b0e;
opacity:1;
visibility:visible;
}
/*========================================
FONDO INDUSTRIAL
========================================*/
.intro-davila-fondo{
position:absolute;
inset:-30px;
background-image:
url("../assets/fondos/racks.jpg");
background-size:cover;
background-position:center;
filter:
brightness(.20)
saturate(.55)
contrast(1.08);
transform:scale(1.10);
animation:
introFondoDavila
2.5s
ease-out
forwards;
}
/*========================================
OVERLAY
========================================*/
.intro-davila-overlay{
position:absolute;
inset:0;
background:
radial-gradient(
circle at center,
rgba(0,0,0,.05) 0%,
rgba(0,0,0,.25) 45%,
rgba(0,0,0,.78) 100%
),
linear-gradient(
180deg,
rgba(4,10,16,.30),
rgba(4,10,16,.65)
);
}
/*========================================
CONTENIDO
========================================*/
.intro-davila-contenido{
position:relative;
z-index:2;
width:min(900px,82vw);
display:flex;
flex-direction:column;
align-items:center;
}
/*========================================
CONTENEDOR LOGO
========================================*/
.intro-davila-logo-wrap{
position:relative;
width:100%;
overflow:hidden;
opacity:0;
transform:
scale(.84)
translateY(15px);
animation:
introEntradaDavila
.8s
cubic-bezier(.16,.84,.34,1)
.15s
forwards;
}
/*========================================
LOGO
========================================*/
.intro-davila-logo{
display:block;
width:100%;
height:auto;
filter:
drop-shadow(
0 18px 25px
rgba(0,0,0,.60)
);
}
/*========================================
DESTELLO SOBRE LOGO
========================================*/
.intro-davila-destello{
position:absolute;
top:-50%;
left:-40%;
width:16%;
height:200%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.05),
rgba(255,255,255,.80),
rgba(255,255,255,.20),
transparent
);
filter:blur(3px);
mix-blend-mode:screen;
transform:
rotate(15deg)
translateX(-400%);
animation:
introDestelloDavila
.8s
ease-in-out
.85s
forwards;
}
/*========================================
LÍNEA NARANJA
========================================*/
.intro-davila-linea{
width:0;
height:3px;
margin-top:22px;
border-radius:10px;
background:
linear-gradient(
90deg,
transparent,
#ff6500,
#ff8a00,
#ff6500,
transparent
);
box-shadow:
0 0 15px
rgba(255,101,0,.65);
animation:
introLineaDavila
.65s
ease
.65s
forwards;
}
/*========================================
TEXTO
========================================*/
.intro-davila-texto{
margin-top:15px;
color:rgba(255,255,255,.82);
font-size:13px;
font-weight:500;
letter-spacing:4px;
text-align:center;
opacity:0;
transform:translateY(8px);
animation:
introTextoDavila
.5s
ease
.9s
forwards;
}
/*========================================
SALIDA
========================================*/
#introDavila.saliendo{
animation:
introSalidaDavila
.55s
ease
forwards;
}
/*========================================
ANIMACIONES
========================================*/
@keyframes introEntradaDavila{
0%{
opacity:0;
transform:
scale(.84)
translateY(15px);
filter:blur(6px);
}
65%{
opacity:1;
}
100%{
opacity:1;
transform:
scale(1)
translateY(0);
filter:blur(0);
}
}
@keyframes introDestelloDavila{
from{
transform:
rotate(15deg)
translateX(-400%);
}
to{
transform:
rotate(15deg)
translateX(950%);
}
}
@keyframes introLineaDavila{
from{
width:0;
opacity:0;
}
to{
width:72%;
opacity:1;
}
}
@keyframes introTextoDavila{
from{
opacity:0;
transform:
translateY(8px);
}
to{
opacity:1;
transform:
translateY(0);
}
}
@keyframes introFondoDavila{
from{
transform:scale(1.10);
}
to{
transform:scale(1.03);
}
}
@keyframes introSalidaDavila{
from{
opacity:1;
visibility:visible;
}
to{
opacity:0;
visibility:hidden;
}
}
/*========================================
INTRO - MÓVIL
========================================*/
@media(max-width:768px){
.intro-davila-contenido{
width:92vw;
}
.intro-davila-texto{
font-size:10px;
letter-spacing:2px;
padding:0 20px;
}
.intro-davila-linea{
margin-top:15px;
}
}
/*====================================
ZOOM DEL SLIDER
====================================*/
.hero-slider{
overflow:hidden;
}
/* SLIDES */
.hero-slider .slide{
transform:scale(1);
}
/* SOLO EL BANNER ACTIVO */
.hero-slider .slide.active{
animation:heroZoom 4s linear forwards;
}
/* ANIMACIÓN */
@keyframes heroZoom{
from{
transform:scale(1);
}
to{
transform:scale(1.050);
}
}