/* ======== PALETA CORPORATIVA ========
   Azul primario: #0056b3
   Azul secundario: #007bff
   Gris oscuro: #2c2c2c
   Gris claro: #f4f6f9
   Blanco: #ffffff
===================================== */


/* ===============================
   RESET GENERAL
================================= */
*{
  box-sizing:border-box;
}

body{
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  margin:0;
  padding:0;
  color:#2c2c2c;
  background:#f4f6f9;
  font-size:16px;
  line-height:1.6;
}


/* ===============================
   HEADER SUPERIOR
================================= */

.top-header{
  background:linear-gradient(135deg,#0056b3,#007bff);
  color:#fff;
  padding:10px 0;
  font-weight:600;
  text-align:center;
  letter-spacing:.3px;
}

/* Logo texto */

.brand-text{
  text-transform:uppercase;
  font-weight:700;
  font-size:1.35rem;
  color:#0056b3;
  margin-left:10px;
  letter-spacing:1px;
}


/* ===============================
   NAVBAR
================================= */


.brand-text{
font-size:22px;
font-weight:600;
margin-left:10px;
color:#0b1c2c;
}

.navbar-nav .nav-link{
font-weight:500;
color:#333;
margin-left:10px;
transition:0.3s;
}

.navbar-nav .nav-link:hover{
color:#0d6efd;
}


/* línea elegante al pasar */

.navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  width:0;
  height:2px;
  left:0;
  bottom:0;
  background:#0056b3;
  transition:.3s;
}

.navbar-nav .nav-link:hover::after{
  width:100%;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color:#0056b3 !important;
}


/* ===============================
   TITULOS
================================= */

h1,h2,h3,h4,h5,h6{
  color:#0056b3;
  font-weight:700;
  margin-bottom:15px;
}


/* ===============================
   IMÁGENES PRODUCTOS
================================= */

.producto-img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:10px;
  transition:transform .4s ease, box-shadow .4s ease;
}

.producto-img:hover{
  transform:scale(1.04);
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
}


/* ===============================
   VIDEOS
================================= */

.sec_video video{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  transition:transform .3s ease;
}

.sec_video video:hover{
  transform:scale(1.02);
}


/* ===============================
   SECCIONES
================================= */

.about,
.service,
.sec_video{
  background:#ffffff;
  padding:60px 35px;
  border-radius:12px;
  margin-bottom:40px;
  box-shadow:0 8px 30px rgba(0,0,0,0.05);
}


/* ===============================
   BOTONES
================================= */

.btn{
  border-radius:6px;
  font-weight:600;
  letter-spacing:.3px;
}

.card .btn{
  transition:all .3s ease;
}

.card .btn:hover{
  transform:translateY(-2px);
  background:#004a99;
}

/* TARJETAS SERVICIOS */

/* CARD GENERAL */
.card {
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.4s ease;
  position: relative;
}

/* HOVER EFECTO */
.card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* IMAGEN */
.card-img-top {
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ZOOM IMAGEN */
.card:hover .card-img-top {
  transform: scale(1.1);
}

/* OVERLAY */
.card::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(13,110,253,0.25), rgba(0,0,0,0.5));
  opacity: 0;
  transition: 0.4s;
  z-index: 1;
}

.card:hover::before {
  opacity: 1;
}

/* CONTENIDO */
.card-body {
  position: relative;
  z-index: 2;
}

/* LETRA (V M V) */
.pentagon-text {
  width: 60px;
  height: 60px;
  margin: -40px auto 10px;
  background: linear-gradient(135deg, #0d6efd, #00c6ff);
  color: white;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  font-size: 1.5rem;
}

/* TITULO */
.card-title {
  font-weight: 700;
  margin-top: 10px;
  transition: color 0.3s;
}

/* COLOR HOVER */
.card:hover .card-title {
  color: #0d6efd;
}

/* TEXTO */
.card-text {
  font-size: 0.95rem;
  color: #555;
}

/* EFECTO SUAVE */
.card-body p {
  transition: all 0.3s;
}

.card:hover .card-text {
  color: #222;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.card{
border-radius:12px;
transition:all .3s ease;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.contact-card{
border-radius:12px;
transition:all .3s ease;
}

.contact-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.icon-circle{
width:60px;
height:60px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#f1f5f9;
font-size:22px;
color:#0d6efd;
}
/* IMAGEN PRODUCTOS */

.producto-img{
height:180px;
object-fit:cover;
}
/* ===============================
   FOOTER CORPORATIVO
================================= */
.footer-corporate{
background:#0b1c2c;
color:#cbd5e1;
font-size:14px;
}

.footer-corporate strong{
color:#ffffff;
}




/* ===============================
   REDES SOCIALES
================================= */

.footer-social{
display:flex;
gap:12px;
justify-content:flex-end;
}

.footer-social a{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
background:#1e3a5f;
border-radius:50%;
color:white;
font-size:16px;
transition:.3s;
}

.footer-social a:hover{
transform:translateY(-3px);
box-shadow:0 6px 14px rgba(0,0,0,0.3);
}

/* colores redes */

.footer-social a:nth-child(1):hover{
background:#1877f2;
}

.footer-social a:nth-child(2):hover{
background:#e1306c;
}

.footer-social a:nth-child(3):hover{
background:#000;
}

.footer-social a:nth-child(4):hover{
background:#000;
}




/* ==============================
   BOTÓN WHATSAPP FLOTANTE PRO
================================ */

.whatsapp-float{
  position:fixed;
  bottom:25px;
  right:25px;
  width:65px;
  height:65px;
  background:linear-gradient(135deg,#25D366,#1ebe5d);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  text-decoration:none;
  box-shadow:0 15px 35px rgba(0,0,0,0.25);
  transition:all .3s ease;
  z-index:9999;
}

.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 20px 45px rgba(0,0,0,0.35);
}


/* Animación pulso */

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.6);}
  70%{box-shadow:0 0 0 15px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

.whatsapp-float{
  animation:pulse 2.5s infinite;
}


/* ===============================
   RESPONSIVE
================================= */

@media (max-width:768px){

  .producto-img{
    height:170px;
  }

  .sec_video video{
    height:210px;
  }

  .whatsapp-float{
    width:58px;
    height:58px;
    font-size:26px;
    bottom:20px;
    right:20px;
  }

}