/* STS Innova v1.2 — ajustes propios sobre la plantilla original.
   La base visual es css/template.css (la hoja compilada del sitio original)
   + css/header.css (su encabezado azul). Aquí solo van retoques puntuales. */

/* Logo animado dentro de un círculo blanco (el arte del logo es circular) */
.img-logo{width:90px;height:90px;object-fit:cover;border-radius:50%;background:#fff}
.img-logo-small{width:50px;height:50px;object-fit:cover;border-radius:50%;background:#fff}

/* Redes sociales del pie: el componente original de la firma
   (círculo claro, capa de color de cada red que sube al hover y tooltip) */
.redes-footer{list-style:none;display:flex;gap:20px;padding:0;margin:10px 0 0}
.redes-footer .icon-content{position:relative}
.redes-footer .tooltip{position:absolute;top:-30px;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:6px 10px;border-radius:5px;opacity:0;font-size:13px;pointer-events:none;transition:all .3s ease;white-space:nowrap;z-index:2}
.redes-footer .icon-content:hover .tooltip{opacity:1;top:-38px}
.redes-footer .icon-content a{width:50px;height:50px;background-color:#fff;display:flex;justify-content:center;align-items:center;border-radius:50%;color:#333;position:relative;overflow:hidden;transition:all .3s ease-in-out;text-decoration:none}
.redes-footer .icon-content a:hover{color:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2)}
.redes-footer .icon-content a i{font-size:24px;z-index:1;position:relative}
.redes-footer .icon-content .filled{position:absolute;bottom:0;left:0;width:100%;height:0%;z-index:0;transition:height .3s ease-in-out}
.redes-footer .icon-content:hover .filled{height:100%}
.redes-footer [data-social="linkedin"] .filled,.redes-footer [data-social="linkedin"] ~ .tooltip{background-color:#0077b5}
.redes-footer [data-social="instagram"] .filled,.redes-footer [data-social="instagram"] ~ .tooltip{background:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d)}
.redes-footer [data-social="whatsapp"] .filled,.redes-footer [data-social="whatsapp"] ~ .tooltip{background-color:#25d366}

/* Tienda: tarjetas uniformes */
.tienda-card .card-img-top{height:190px;object-fit:cover}
.tienda-card .card-title{font-size:1.02rem}

/* Artículo del blog: contenido cómodo e imágenes fluidas */
.articulo-cuerpo{font-size:1.02rem;line-height:1.75}
.articulo-cuerpo p{margin-bottom:1.05rem}
.articulo-cuerpo h2,.articulo-cuerpo h3{margin:1.4rem 0 .6rem}
.articulo-cuerpo img{max-width:100%;height:auto;border-radius:8px}

/* Formularios: campos con borde más marcado (mejor contraste al escribir) */
.form-control{border:2px solid #B9C2CF}
.form-control:focus{border-color:#2575AC;box-shadow:0 0 0 3px rgba(255,198,0,.35)}

/* Detalle de proyecto: galería */
.galeria-proyecto img{height:190px;object-fit:cover;width:100%;border-radius:8px}

/* Campo trampa (honeypot) del formulario de contacto */
.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}

/* El carrusel principal no debe quedar bajo el encabezado en pantallas chicas */
@media (max-width:575.98px){
  .carousel-caption h1{font-size:1.9rem}
  .carousel-caption h5{font-size:.8rem}
}

/* ===== v1.3: fluidez, transiciones y logo interactivo ===== */
html{scroll-behavior:smooth}

/* Logo interactivo: anillos que laten desde la diana al pasar el mouse */
.logo-wrap{position:relative;display:inline-block;border-radius:50%;flex:none}
.logo-wrap::before,.logo-wrap::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,198,0,0);pointer-events:none}
a:hover .logo-wrap::before,a:focus .logo-wrap::before{animation:anillo-logo 1.1s ease-out infinite}
a:hover .logo-wrap::after,a:focus .logo-wrap::after{animation:anillo-logo 1.1s ease-out .35s infinite}
@keyframes anillo-logo{0%{transform:scale(1);border-color:rgba(255,198,0,.75)}100%{transform:scale(1.45);border-color:rgba(255,198,0,0)}}

/* Aparición suave de secciones al hacer scroll (la activa mejoras.js) */
body.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
body.js-reveal .reveal.visible{opacity:1;transform:none}

/* Botón flotante de WhatsApp (antes lo inyectaba template.js con un <style> en línea) */
#whatsapp-float{position:fixed;bottom:20px;right:20px;z-index:9999;animation:whatsapp-slide-in .5s ease-out,whatsapp-pulse 2s infinite .5s}
.whatsapp-float-btn{display:flex;align-items:center;justify-content:center;width:60px;height:60px;background-color:#25D366;color:#fff;border-radius:50%;font-size:35px;box-shadow:0 4px 15px rgba(0,0,0,.3);transition:all .3s ease;text-decoration:none}
.whatsapp-float-btn:hover{transform:scale(1.1);background-color:#20b859;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4);text-decoration:none}
@keyframes whatsapp-pulse{0%{transform:scale(1)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes whatsapp-slide-in{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}
@media (max-width:768px){
  .whatsapp-float-btn{width:50px;height:50px;font-size:28px}
  #whatsapp-float{bottom:15px;right:15px}
}

/* Movimiento reducido: todo visible y quieto */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body.js-reveal .reveal{opacity:1;transform:none;transition:none}
  #whatsapp-float{animation:none}
  a:hover .logo-wrap::before,a:hover .logo-wrap::after{animation:none}
}

/* Servicios: el primer título es el H1 de la página pero se ve como los demás */
.h1-como-h2{font-size:2rem}

/* ===== v1.4: ajustes pedidos por el cliente ===== */
/* Encabezado fijo (sticky) y más angosto; logo más pequeño */
#cabecera{position:sticky;top:0;z-index:1030;box-shadow:0 2px 14px rgba(10,16,38,.16)}
.img-logo{width:62px;height:62px}
.img-logo-small{width:42px;height:42px}
.header-left .company-name{font-size:2rem}
.navbar{padding-top:.3rem;padding-bottom:.3rem}

/* Botones unificados: azul #2575AC con texto blanco; al hover, azul más
   oscuro y el texto se «enciende» en amarillo */
.btn-primary,.btn-secondary{background-color:#2575AC;border-color:#2575AC;color:#fff}
.btn-primary:hover,.btn-primary:focus,.btn-secondary:hover,.btn-secondary:focus{background-color:#17456B !important;border-color:#17456B !important;color:#FFC600 !important}
.btn-outline-primary{color:#2575AC;border-color:#2575AC;background-color:transparent}
.btn-outline-primary:hover,.btn-outline-primary:focus{background-color:#17456B !important;border-color:#17456B !important;color:#FFC600 !important}
/* El filtro elegido (blog y proyectos) conserva el efecto hover fijo */
.btn.filtro-activo,#portfolio-flters li.active{background-color:#17456B !important;border-color:#17456B !important;color:#FFC600 !important}

/* Pie de página más compacto */
.pie-marca{font-size:2rem;line-height:1.15}

/* Cortina de proyectos: título centrado y con aire */
.portfolio-text{padding:22px;text-align:center;justify-content:center}
.portfolio-text h4{text-align:center;width:100%;line-height:1.35}

/* Modal de video: equis de cierre limpia, en círculo (sin el cuadro negro) */
#videoModal .modal-content{position:relative}
#videoModal .modal-header{border-bottom:0;padding:.6rem 1rem 0}
#videoModal .close{position:absolute;top:10px;right:12px;width:38px;height:38px;border-radius:50%;background:#0A1026;color:#fff;opacity:1;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;margin:0;text-shadow:none;z-index:5}
#videoModal .close:hover{background:#2575AC;color:#FFC600;opacity:1}
#videoModal .modal-body{padding:.6rem 1rem 1rem}

/* Nosotros: panel del logo sin parche blanco ni bandas negras */
.logo-panel{background:linear-gradient(135deg,#EAF3FA,#FFFFFF);border:1px solid #DCE9F5;min-height:320px}
.logo-grande{width:250px;height:250px;object-fit:cover;border-radius:50%;background:#fff;box-shadow:0 12px 32px rgba(10,16,38,.16)}
.logo-panel:hover .logo-wrap::before{animation:anillo-logo 1.1s ease-out infinite}
.logo-panel:hover .logo-wrap::after{animation:anillo-logo 1.1s ease-out .35s infinite}

/* Ilustraciones de Misión/Visión (ya sin fondo negro): interactivas */
.ilustracion{position:relative;display:flex;justify-content:center;align-items:center}
.ilustracion img{max-height:300px;width:auto;transition:transform .45s ease,filter .45s ease}
.ilustracion:hover img{transform:scale(1.05) rotate(-1.5deg)}
.ilustracion-brillo:hover img{filter:drop-shadow(0 0 20px rgba(255,198,0,.65))}

/* Tienda: «Cotizar» con círculo de WhatsApp (gris; al hover, verde WhatsApp) */
.cotizar-wa{display:inline-flex;align-items:center;gap:9px;text-decoration:none;margin-top:10px}
.cotizar-wa:hover{text-decoration:none}
.cotizar-wa-ico{width:38px;height:38px;flex:none;border-radius:50%;background:#E9ECEF;color:#6C757D;display:flex;align-items:center;justify-content:center;font-size:19px;transition:all .3s ease}
.cotizar-wa:hover .cotizar-wa-ico{background:#25D366;color:#fff;box-shadow:0 4px 12px rgba(37,211,102,.45)}
.cotizar-wa-txt{color:#111;font-weight:600}

/* Contacto: teléfono y correo en el azul de la página; formulario recogido */
.contacto-dato{color:#2575AC;font-weight:600}
@media (min-width:992px){.form-recogido{max-width:660px}}

/* v1.4.1: el alto real de la barra lo daban los enlaces del menú (30px de
   relleno vertical en la plantilla); se reduce solo en pantallas grandes */
@media (min-width:992px){
  .navbar-light .navbar-nav .nav-link{padding:12px 15px}
  .header-left .navbar-brand{padding-top:0;padding-bottom:0}
}

/* v1.4.2: el alto de la cabecera lo manda el bloque del logo (padding 20px
   de header.css); se recorta y la cabecera queda realmente angosta */
.header-left{padding:8px 20px}
/* Contacto: la tarjeta de datos arranca a la altura del primer campo */
@media (min-width:992px){.contacto-lateral{margin-top:32px}}

/* ===== v1.5: logo en movimiento continuo y escenas animadas ===== */
/* Nosotros: el logo va directo sobre el fondo de la sección (sin panel),
   más grande y redondo; su animación corre siempre, como el GIF original */
.logo-grande{width:min(330px,78vw);height:auto;border-radius:50%;background:#fff;box-shadow:0 14px 34px rgba(10,16,38,.18)}
.logo-sobre:hover .logo-wrap::before{animation:anillo-logo 1.1s ease-out infinite}
.logo-sobre:hover .logo-wrap::after{animation:anillo-logo 1.1s ease-out .35s infinite}

/* Escena de la diana: la flecha entra volando y acierta en el centro.
   Se dispara cuando la sección aparece en pantalla (.en-vista) y se
   repite al pasar el mouse. Al final, la escena queda compuesta. */
.diana-escena{position:relative;width:min(300px,80vw);aspect-ratio:1/1;margin:0 auto;flex:none}
.diana-escena img{position:absolute;inset:0;width:100%;height:100%}
.diana-escena .flecha-capa{transform:translate(38%,-38%);opacity:0}
.diana-escena .diana-onda{position:absolute;left:50%;top:49%;width:56px;height:56px;margin:-28px 0 0 -28px;border:3px solid rgba(244,86,75,.75);border-radius:50%;opacity:0;pointer-events:none}
@keyframes flecha-vuelo{0%{transform:translate(38%,-38%);opacity:0}12%{opacity:1}58%{transform:translate(0,0);opacity:1}72%{transform:translate(-1.6%,1.6%)}86%{transform:translate(.7%,-.7%)}100%{transform:translate(0,0);opacity:1}}
@keyframes diana-golpe{0%,54%{transform:rotate(0deg)}62%{transform:rotate(-1.7deg) scale(.982)}74%{transform:rotate(1.25deg)}86%{transform:rotate(-.6deg)}100%{transform:rotate(0deg)}}
@keyframes onda-impacto{0%,56%{opacity:0;transform:scale(.35)}64%{opacity:.85}100%{opacity:0;transform:scale(2.1)}}
.diana-escena.en-vista .flecha-capa,.diana-escena:hover .flecha-capa{animation:flecha-vuelo 1.15s ease-in-out both}
.diana-escena.en-vista .diana-fondo,.diana-escena:hover .diana-fondo{animation:diana-golpe 1.15s ease-in-out both}
.diana-escena.en-vista .diana-onda,.diana-escena:hover .diana-onda{animation:onda-impacto 1.15s ease-out both}

/* Escena de la visión: los rayitos del bombillo respiran como luz */
.vision-escena{position:relative;width:min(300px,80vw);aspect-ratio:1/1;margin:0 auto}
.vision-escena img{position:absolute;inset:0;width:100%;height:100%}
.vision-escena .rayos-capa{transform-origin:50% 45%;animation:rayos-luz 2.8s ease-in-out infinite}
@keyframes rayos-luz{0%,100%{opacity:.35;transform:scale(.965)}50%{opacity:1;transform:scale(1.03)}}

@media (prefers-reduced-motion: reduce){
  .diana-escena .flecha-capa{transform:none;opacity:1;animation:none}
  .diana-escena .diana-fondo,.diana-escena .diana-onda{animation:none}
  .vision-escena .rayos-capa{animation:none;opacity:.8;transform:none}
}