@charset "UTF-8";
/**
 * GEWISSEC - Master Custom Stylesheet
 * 1. Video Hero Full-Cover
 * 2. Swiper Hero en Fondo Blanco Unificado
 * 3. Manifiesto Responsivo: Cyber Shield Neon Reactor
 * 4. Sección Servicios: Cyber-Security Operations Grid
 * 5. Sección CTA: Parallax Nativo por Hardware + Canvas Neón Tricolor
 * 6. Proyectos Recientes: Carrusel 3D Flip Card Vertical (Estilo Omada TP-Link con Marca de Agua)
 * 7. Años de Experiencia: Números Calibrados (45px / 30px) en Una Sola Línea
 * 8. Pasarela Real de Partners (Owl Carousel - Movimiento Fluido Continuo & Hover Popup Arriba)
 * 9. Sección Capacidades Operativas: Tabs Tech y Carrusel Contenido
 * 10. Sección Noticias / Conocimiento en Acción: Cyber-Tech con Escáner Láser
 * 11. Sección Información de Contacto: Cyber-Security Hub Cards
 * 12. Sección Formulario de Contacto: Cyber-Vault Reactor con Checkbox Blindado
 * 13. Sección Previa al Footer: Cyber-Security Assessment Banner
 * 14. Sección Footer: Cyber-Defense Operations Footer
 * 15. Preloader Holográfico con Isotipo Real GEWISSEC
 */

/* ==========================================================================
   1. VARIABLES GLOBALES
   ========================================================================== */
:root {
  --gewissec-blue: #004AAD;
  --gewissec-red: #D92027;
  --gewissec-accent: #6689ff;
  --gewissec-cyan: #00e5ff;
  --gewissec-dark: #151515;
  --gewissec-light: #ffffff;
  --gewissec-text-muted: #a0a6b5;
}

/* ==========================================================================
   2. HERO SLIDER Y VIDEO 100% RESPONSIVE (MÓVIL Y DESKTOP)
   ========================================================================== */
#home,
.hero-unified-slider,
.hero-unified-slider.swiper-container,
.hero-unified-slider .swiper-wrapper {
  background-color: #ffffff !important;
  background: #ffffff !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.hero-unified-slider {
  position: relative !important;
  width: 100% !important;
  height: 540px !important;
  min-height: 540px !important;
  max-height: 540px !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  .hero-unified-slider {
    height: 580px !important;
    min-height: 580px !important;
    max-height: 580px !important;
  }
}

@media (min-width: 1200px) {
  .hero-unified-slider {
    height: 640px !important;
    min-height: 640px !important;
    max-height: 640px !important;
  }
}

.hero-unified-slider .swiper-slide {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #ffffff !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  -webkit-background-size: cover !important;
  overflow: hidden !important;
}

.swiper-slide-video {
  background-color: #000000 !important;
  display: block !important;
}

.video-hero-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.video-hero-element {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  -o-object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.hero-overlay-unified {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(10, 17, 34, 0.48) !important;
  z-index: 2 !important;
}

.hero-unified-slider .swiper-slide-caption {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  z-index: 5 !important;
  width: 100% !important;
  padding: 0 15px !important;
  margin: 0 !important;
}

.swiper-blur-bg,
.swiper-blur-overlay,
.swiper-slide-bg-blur {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero-slider-title {
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75) !important;
}

@media (min-width: 576px) {
  .hero-slider-title {
    font-size: 30px !important;
  }
}

@media (min-width: 992px) {
  .hero-slider-title {
    font-size: 42px !important;
  }
}

.hero-slider-text {
  color: #f1f3f5 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8) !important;
}

@media (min-width: 768px) {
  .hero-slider-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* =========================================================
   3. SECCIÓN MANIFIESTO (CYBER SHIELD NEON REACTOR CALIBRADO)
   ========================================================= */
.manifesto-dynamic-wrap {
  position: relative !important;
  background: #030a16 !important;
  overflow: hidden !important;
  padding: 95px 0 !important;
}

.manifesto-neon-bg-layer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: url('images/parallax-1.jpg') no-repeat center center !important;
  background-size: cover !important;
  mix-blend-mode: screen !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transform-origin: center center !important;
  will-change: transform, filter, opacity !important;
  animation: cyberShieldPulse 4.5s ease-in-out infinite !important;
}

.manifesto-glass-card {
  background: rgba(7, 21, 43, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(102, 137, 255, 0.28) !important;
  border-radius: 12px !important;
  padding: 26px 22px !important;
  height: 100% !important;
  text-align: left !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.manifesto-glass-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(90deg, #004AAD, #6689ff) !important;
}

.manifesto-glass-card:hover {
  transform: translateY(-6px) !important;
  border-color: #6689ff !important;
  box-shadow: 0 16px 36px rgba(0, 74, 173, 0.35) !important;
}

/* =========================================================
   4. SECCIÓN CTA: PARALLAX NATIVO POR HARDWARE + CIRCUITOS NEÓN
   ========================================================= */
.cta-pure-parallax {
  position: relative !important;
  background-color: #020712 !important;
  background-image: url('../images/parallax-1.jpg') !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  padding: 100px 0 !important;
  overflow: hidden !important;
}

.cta-pure-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(circle at 35% 50%, rgba(2, 7, 18, 0.65) 0%, rgba(2, 7, 18, 0.94) 80%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.cta-pure-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  mix-blend-mode: screen !important;
}

.cta-pure-content {
  position: relative !important;
  z-index: 3 !important;
}

.cta-vault-card {
  background: rgba(7, 21, 43, 0.9) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(0, 229, 255, 0.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 74, 173, 0.35) !important;
}

/* =========================================================
   5. AÑOS DE EXPERIENCIA
   ========================================================= */
.counter-amy {
  text-align: center;
}

.counter-amy .counter {
  font-family: "Poppins", sans-serif !important;
  font-size: 45px !important;
  font-weight: 700 !important;
  color: #151515 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.counter-amy .symbol {
  font-family: "Poppins", sans-serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--gewissec-blue) !important;
  line-height: 1 !important;
  margin-left: 2px !important;
}

.counter-amy-title {
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  color: #64748b !important;
  margin-top: 8px !important;
  font-weight: 500 !important;
}

/* =========================================================
   6. PASARELA REAL DE PARTNERS
   ========================================================= */
.partners-subheading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gewissec-blue);
  text-transform: uppercase;
}

.partners-lead {
  font-size: 14px;
}

.owl-carousel-partners {
  display: block;
  width: 100%;
  margin-top: 25px;
  padding: 15px 0;
}

.owl-carousel-partners .owl-stage {
  display: flex !important;
  align-items: center !important;
  transition-timing-function: linear !important;
  -webkit-transition-timing-function: linear !important;
}

.owl-carousel-partners .item-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  background: #ffffff;
  border-radius: 8px;
  min-height: 95px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.owl-carousel-partners .item-partner:hover {
  border-color: #dbeafe;
  box-shadow: 0 8px 25px rgba(0, 74, 173, 0.12);
  transform: translateY(-4px);
}

.owl-carousel-partners .partner-img {
  max-height: 55px;
  width: auto !important;
  max-width: 180px;
  margin: 0 auto;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  opacity: 0.65;
  transition: all 0.35s ease;
}

.owl-carousel-partners .item-partner:hover .partner-img {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}

/* =========================================================
   7. PROYECTOS RECIENTES: SOPORTE DE CARRUSEL & MARCA DE AGUA
   ========================================================= */
.owl-projects-carousel {
  display: block;
  width: 100%;
}

.owl-projects-carousel .item {
  padding: 0 10px;
}

.omada-back {
  position: relative !important;
  overflow: hidden !important;
}

.omada-back::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.075 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='55' viewBox='0 0 110 55'%3E%3Ctext x='55' y='32' fill='%23ffffff' font-family='Poppins, sans-serif' font-size='10' font-weight='700' letter-spacing='0.16em' text-anchor='middle' transform='rotate(-25 55 32)'%3EGEWISSEC%3C/text%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 110px 55px !important;
}

.omada-back > * {
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   8. SECCIÓN CAPACIDADES OPERATIVAS: TABS Y CARRO CONTENIDO
   ========================================================= */
.cap-carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cap-carousel-container .owl-style-1 .owl-stage-outer {
  overflow: hidden !important;
  padding: 10px 0 !important;
}

.cap-carousel-container .box-device {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 20, 50, 0.16);
  border: 1px solid rgba(226, 232, 240, 0.9);
  display: block;
  transition: transform 0.35s ease;
}

.cap-carousel-container .box-device:hover {
  transform: translateY(-4px);
}

.cap-carousel-container .box-device img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   9. SECCIÓN NOTICIAS: ESCÁNER LÁSER
   ========================================================= */
.owl-news-carousel {
  display: block;
  width: 100%;
}

.owl-news-carousel .item {
  padding: 0 10px;
}

@keyframes cyberScanBeam {
  0% { top: -30%; opacity: 0; }
  15% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { top: 115%; opacity: 0; }
}

.cyber-card-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 35px;
  background: linear-gradient(180deg, rgba(0, 74, 173, 0) 0%, rgba(0, 114, 255, 0.4) 60%, rgba(102, 187, 255, 0.95) 95%, #ffffff 100%);
  box-shadow: 0 4px 15px rgba(0, 114, 255, 0.8);
  pointer-events: none;
  z-index: 3;
  animation: cyberScanBeam 3.5s ease-in-out infinite;
}

.cyber-card-item:hover .cyber-card-media::after {
  animation: cyberScanBeam 1.6s ease-in-out infinite;
  box-shadow: 0 4px 22px rgba(102, 187, 255, 0.95);
}

/* =========================================================
   10. SECCIÓN CONTACT INFORMATION: CYBER-SECURITY HUB CARDS
   ========================================================= */
.contact-card-modern {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 38px 24px !important;
  text-align: center !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 4px 20px rgba(0, 74, 173, 0.05) !important;
}

.contact-card-modern:hover {
  transform: translateY(-6px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 16px 36px rgba(0, 74, 173, 0.12) !important;
}

/* =========================================================
   11. SECCIÓN FORMULARIO DE CONTACTO B2B
   ========================================================= */
.cyber-vault-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.cyber-input-field {
  background-color: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
}

.cyber-privacy-checkbox {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  accent-color: var(--gewissec-blue);
}

/* =========================================================
   12. SECCIÓN PREVIA AL FOOTER: ASSESSMENT BANNER
   ========================================================= */
.cyber-prefooter-banner {
  position: relative;
  background: #07152b;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 20, 50, 0.25);
}

/* =========================================================
   13. SECCIÓN FOOTER: CYBER-DEFENSE OPERATIONS FOOTER
   ========================================================= */
.footer-corporate-gewissec {
  background-color: #07152b !important;
}

.footer-contrast-text,
.footer-contrast-text span,
.footer-contrast-text p {
  color: #94a3b8 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.footer-brand-link {
  color: #ffffff !important;
  text-decoration: none;
}

.footer-brand-link:hover {
  color: var(--gewissec-accent) !important;
}

/* =========================================================
   15. PRELOADER HOLOGRÁFICO CON ISOTIPO REAL GEWISSEC
   ========================================================= */
.preloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  background-color: #030a16 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease !important;
}

.preloader.loaded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}