/* =============================================
   Sistemas HD1 - Colores de marca
   Azul institucional, Blanco y Rojo vivo
   (Colores extraídos directamente del logo oficial)
   Este archivo se carga DESPUÉS de style.css para
   sobrescribir las variables de color del tema.
============================================= */
:root {
  /* Rojo vivo del logo -> color de acento (botones, iconos, resaltados) */
  --theme-color: #EE1023;

  /* Azul institucional del logo -> color oscuro (encabezados, footer, fondos) */
  --theme-color3: #024385;
  --dark-color2: #01315f;
  --dark-color3: #012a52;
  --dark-color4: #011f3d;
  --bs-bg-color13: #01315f;

  /* Tonos suaves derivados para fondos y bordes con acento rojo */
  --bs-bg-color3: rgba(238, 16, 35, 0.12);
  --bs-bg-color7: rgba(238, 16, 35, 0.10);
  --bs-bg-color9: rgba(238, 16, 35, 0.14);
  --bs-border-color9: rgba(238, 16, 35, 0.35);
  --bs-border-color10: rgba(238, 16, 35, 0.2);

  /* Tonos suaves derivados para fondos y bordes con acento azul */
  --light-color: #f3f7fb;
  --light-color2: #e6eef7;
  --light-color3: #e8eff8;
  --light-color4: #b8c9db;
  --bs-bg-color2: #f0f6fb;
  --bs-bg-color4: #dbe7f2;
  --bs-bg-color21: #f1f6fb;
}

/* Flechas e íconos dentro de botones: mismo rojo vivo de marca */
.arrow-all svg path,
.arrow-all-2 svg path {
  stroke: #EE1023 !important;
}

/* Fuerza el rojo vivo en los íconos de check usados en textos destacados */
.sub-title-2 i,
.sub-title-2.two i {
  color: #EE1023;
}

/* =============================================
   Control de tamaño del logo
   ============================================= */
.header-logo img,
.mobile-logo img,
.sidebar-logo img {
  max-height: 122px !important;
  max-width: none !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Ajuste específico para menú móvil */
.mobile-logo img {
  max-height: 96px !important;
}

/* Ajuste específico para sidebar */
.sidebar-logo img {
  max-height: 109px !important;
}

/* Sin fondo ni bordes para el logo */
.col-auto.logo,
.mobile-logo,
.sidebar-logo {
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* =============================================
   Estilos para la sección Hero
   ============================================= */
.hero-subtitle {
  color: #666 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 15px !important;
}

.hero-line-1 {
  position: relative;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  font-family: 'Verdana', sans-serif !important;
  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.14) !important;
}

.hero-line-2 {
  position: relative;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  font-family: 'Verdana', sans-serif !important;
  text-shadow: 0 6px 10px rgba(0, 0, 0, 0.14) !important;
}

/* Efecto: las letras toman su color desde el centro hacia afuera (revelado radial),
   una sola vez, y luego quedan estáticas en su color original */
.hero-line-1::after,
.hero-line-2::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  white-space: normal;
  word-break: normal;
  pointer-events: none;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor;
  -webkit-clip-path: circle(0% at 50% 50%);
  clip-path: circle(0% at 50% 50%);
  animation: hero-color-fill 3.2s ease-in-out 0.8s both;
}

.hero-line-1::after {
  color: #00298E;
  text-shadow:
    0 1px 0 #001f70,
    0 2px 0 #001c63,
    0 3px 0 #001956,
    0 4px 0 #001549,
    0 5px 0 #00123c,
    0 6px 0 #001030,
    0 7px 0 #000d24,
    0 8px 0 #000a18,
    0 9px 1px #00070d,
    0 12px 14px rgba(0, 0, 0, 0.45);
}

.hero-line-2::after {
  color: #E03434;
  text-shadow:
    0 1px 0 #d23131,
    0 2px 0 #c52e2e,
    0 3px 0 #b82b2b,
    0 4px 0 #ab2828,
    0 5px 0 #9e2525,
    0 6px 0 #912222,
    0 7px 0 #841f1f,
    0 8px 0 #772121,
    0 9px 1px #6a1d1d,
    0 12px 14px rgba(0, 0, 0, 0.45);
}

@keyframes hero-color-fill {
  0% {
    -webkit-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%);
  }
  60% {
    -webkit-clip-path: circle(150% at 50% 50%);
    clip-path: circle(150% at 50% 50%);
  }
  100% {
    -webkit-clip-path: circle(150% at 50% 50%);
    clip-path: circle(150% at 50% 50%);
  }
}

/* Texto de descripción del hero */
.hero-left-content .text {
  color: #001a4d !important;
}

/* Conócenos - círculo completo y más grande */
.tv-about-section.style-2 .about-left .left-img {
  max-width: 480px;
}
.tv-about-section.style-2 .about-left .left-img svg {
  width: 108% !important;
  height: 108% !important;
  left: -24px !important;
  top: -16px !important;
}
.tv-about-section.style-2 .about-left .left-img .image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1;
}
.tv-about-section.style-2 .about-left .left-img .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 50% !important;
}

/* Franja deslizante (marquee) en rojo puro */
.marquee-wrap {
  background: #FF0000 !important;
  padding: 10px 0 !important;
}

.marquee-wrap .marquee__group .m-item {
  font-size: 16px !important;
  margin-right: 24px !important;
}

.marquee-wrap .marquee__group .m-item .icon {
  margin-right: 24px !important;
  width: 18px !important;
  height: 18px !important;
}

/* Cuadro azul (breadcrumb) a la mitad de alto */
.tv-breadcrumb-section .tv-breadcrumb-inner {
  padding: 80px 0 !important;
}

/* Menú principal: letra más pequeña y opciones más juntas */
.main-menu a {
  font-size: 16px !important;
  font-family: 'Verdana', sans-serif !important;
}
.main-menu > ul > li {
  margin-right: 22px !important;
}

/* =============================================
   Hero más compacto
   (márgenes, título e imagen más pequeños)
   ============================================= */
.tv-hero-section.style-2 .hero-area {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.tv-hero-section.style-2 .hero-area .hero-left-content {
  margin: 8px 0;
}

.tv-hero-section.style-2 .hero-area .hero-left-content .title {
  font-size: clamp(22px, 5vw, 44px);
  line-height: 1.15;
  max-width: 100%;
}

.tv-hero-section.style-2 .hero-area .hero-left-content .text-icon {
  margin: 10px 0 !important;
}

.tv-hero-section.style-2 .hero-area .hero-left-content .theme-btn.mt-50 {
  margin-top: 20px !important;
}

.tv-hero-section.style-2 .hero-area .hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tv-hero-section.style-2 .hero-area .hero-right .image-box img {
  width: 260px;
  max-width: 100%;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

/* Asegurar que la imagen del joven se vea completa dentro del hero */
.tv-hero-section.style-2 .hero-area .hero-right .image-box {
  border-radius: 30px 30px 0 0;
  overflow: visible !important;
  height: auto !important;
  position: relative;
}
.hero-fe-btn {
  position: absolute;
  right: -180px;
  top: 15px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 30px;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  font-family: 'Verdana', sans-serif;
  text-decoration: none !important;
  background: linear-gradient(135deg, #FF5A00, #E03434);
  box-shadow: 0 0 16px rgba(238, 16, 35, 0.85), 0 0 36px rgba(255, 90, 0, 0.55);
  animation: hd1-hero-glow 1.6s ease-in-out infinite alternate;
  transition: transform 0.25s ease;
  white-space: nowrap;
}

.hero-fe-btn i {
  font-size: 15px;
}

.hero-fe-btn:hover {
  transform: translateY(-3px) scale(1.04);
}

@keyframes hd1-hero-glow {
  from {
    box-shadow: 0 0 12px rgba(238, 16, 35, 0.70), 0 0 28px rgba(255, 90, 0, 0.40);
  }
  to {
    box-shadow: 0 0 26px rgba(238, 16, 35, 1), 0 0 52px rgba(255, 90, 0, 0.80);
  }
}

/* =============================================
   Redes sociales al lado del botón de cotización
   ============================================= */
.tv-header .header-right-wrapper .outer-box .social-icon-one.header-social {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 10px 0 0;
  padding: 0;
  list-style: none;
}

.tv-header .header-right-wrapper .outer-box .social-icon-one.header-social li {
  display: inline-flex;
}

.tv-header .header-right-wrapper .outer-box .social-icon-one.header-social li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f0f6fb;
  color: #024385;
  font-size: 14px;
  transition: all 0.3s ease 0s;
}

.tv-header .header-right-wrapper .outer-box .social-icon-one.header-social li a:hover {
  background: #EE1023;
  color: #ffffff;
}

/* =============================================
   Cuadros de servicios más pequeños (home, style-2)
   ============================================= */
.tv-service-section.style-2 .tv-service-single-box {
  padding: 28px 24px !important;
  border-radius: 20px !important;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon {
  height: 56px !important;
  width: 56px !important;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon img {
  max-width: 28px;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon i {
  font-size: 26px;
  line-height: 1;
  color: #ffffff;
}

/* =============================================
   Header de fondo blanco completo
   ============================================= */
.tv-header.header-style1,
.tv-header.header-style1 .header-top,
.tv-header.header-style1 .main-wrapper {
  background-color: #ffffff !important;
}

.sticky-header {
  background-color: #ffffff !important;
}

/* =============================================
   Hero gris oscuro con efecto espacial
   ============================================= */
.tv-hero-section.style-2 {
  background-color: #c9d1dc;
  background-image:
    radial-gradient(ellipse at 18% 82%, rgba(16, 83, 243, 0.10), transparent 55%),
    radial-gradient(ellipse at 82% 12%, rgba(224, 52, 52, 0.07), transparent 55%),
    radial-gradient(ellipse at 55% 0%, rgba(16, 83, 243, 0.05), transparent 50%);
}

.tv-hero-section.style-2 .hero-area > .container {
  position: relative;
  z-index: 2;
}

.hd1-space {
  position: absolute;
  left: -60px;
  right: -60px;
  top: -40px;
  bottom: -40px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.hd1-star {
  position: absolute;
  width: var(--sz, 12px);
  height: var(--sz, 12px);
  border-radius: 50%;
  color: #ffffff;
  background: radial-gradient(circle, currentColor 0%, rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 0 10px 1px currentColor;
  animation: hd1-star-float var(--dur, 22s) ease-in-out infinite alternate, hd1-star-pulse var(--pd, 2.6s) ease-in-out infinite;
}

.hd1-star.st-gold {
  color: #ffd76a;
}

.hd1-star.st-blue {
  color: #8fc3ff;
}

.hd1-star.st-violet {
  color: #c4b5fd;
}

.hd1-shoot {
  position: absolute;
  width: 150px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 55%, #ffffff 100%);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  opacity: 0;
  animation: hd1-shoot-anim 9s linear infinite;
}

.hd1-shoot::before {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
}

@keyframes hd1-star-float {
  0% {
    transform: translate3d(var(--x0, 0px), var(--y0, 0px), 0);
  }
  50% {
    transform: translate3d(var(--x1, 60px), var(--y1, -150px), 0);
  }
  100% {
    transform: translate3d(var(--x2, -80px), var(--y2, 60px), 0);
  }
}

@keyframes hd1-star-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

@keyframes hd1-shoot-anim {
  0% {
    transform: translate3d(0, 0, 0) rotate(-35deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  18% {
    transform: translate3d(70vw, 34vh, 0) rotate(-35deg);
    opacity: 1;
  }
  24%, 100% {
    transform: translate3d(74vw, 37vh, 0) rotate(-35deg);
    opacity: 0;
  }
}

.tv-hero-section.style-2 .hd1-horn {
  position: absolute;
  right: 1%;
  bottom: 9%;
  width: 96px;
  z-index: 2;
}

.tv-hero-section.style-2 .hd1-horn img {
  width: 100%;
  height: auto;
}

/* =============================================
   Hero: separar imágenes (sin elementos encimados)
   ============================================= */
.tv-hero-section.style-2 .hero-area .hero-right {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 30px;
  padding: 10px 6px;
}

.tv-hero-section.style-2 .hero-area .hero-right .image-box,
.tv-hero-section.style-2 .hero-area .hero-right .box-thumb,
.tv-hero-section.style-2 .hero-area .hero-right .hd1-horn {
  flex-shrink: 0;
}

.tv-hero-section.style-2 .hero-area .hero-right .image-box {
  position: static;
  margin: 0;
  align-self: flex-end;
}

.tv-hero-section.style-2 .hero-area .hero-right .image-box img {
  width: 250px;
}

.tv-hero-section.style-2 .hero-area .hero-right .image-box .hero-fe-btn {
  right: 40px;
  top: 24px;
  left: auto;
  bottom: auto;
  position: absolute;
}

.tv-hero-section.style-2 .hero-area .hero-right .box-thumb {
  position: static;
  right: auto;
  top: auto;
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 26px;
  padding: 12px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.tv-hero-section.style-2 .hero-area .hero-right .hd1-horn {
  position: static;
  width: 104px;
  align-self: flex-end;
  margin-bottom: 4px;
}

.tv-hero-section.style-2 .hero-area .hero-right .right-shape {
  display: none;
}

/* Laptops y tablets: reducir tamaños para que no se desborde la columna */
@media (max-width: 1399px) {
  .tv-hero-section.style-2 .hero-area .hero-right {
    gap: 22px;
  }
  .tv-hero-section.style-2 .hero-area .hero-right .image-box img {
    width: 230px;
  }
  .tv-hero-section.style-2 .hero-area .hero-right .hd1-horn {
    width: 90px;
  }
}

@media (max-width: 1199px) {
  .tv-hero-section.style-2 .hero-area .hero-right {
    gap: 20px;
  }
  .tv-hero-section.style-2 .hero-area .hero-right .image-box img {
    width: 190px;
  }
  .tv-hero-section.style-2 .hero-area .hero-right .hd1-horn,
  .tv-hero-section.style-2 .hero-area .hero-right .right-shape {
    display: none;
  }
}

@media (max-width: 1439px) {
  .tv-hero-section.style-2 .hero-area .hero-right .image-box .hero-fe-btn {
    right: 26px;
    top: 16px;
    left: auto;
    bottom: auto;
    padding: 10px 14px;
    font-size: 12px;
    gap: 6px;
  }
}

/* Móvil (menos de 480px): solo el botón, arriba a la derecha, sin las imágenes */
@media (max-width: 479px) {
  .tv-hero-section.style-2 .hero-area .hero-right {
    display: block !important;
    position: static;
    height: 0;
    padding: 0;
    overflow: visible;
  }
  .tv-hero-section.style-2 .hero-area .hero-right .image-box img,
  .tv-hero-section.style-2 .hero-area .hero-right .box-thumb,
  .tv-hero-section.style-2 .hero-area .hero-right .hd1-horn,
  .tv-hero-section.style-2 .hero-area .hero-right .right-shape {
    display: none;
  }
  .tv-hero-section.style-2 .hero-area .hero-right .image-box .hero-fe-btn {
    right: 14px;
    top: 10px;
    left: auto;
    bottom: auto;
    padding: 9px 13px;
    font-size: 12px;
    gap: 6px;
  }
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon i.fa-cash-register {
  color: #E03434;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon i.fa-laptop-code {
  color: #2563eb;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon i.fa-headset {
  color: #10b981;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon i.fa-network-wired {
  color: #06b6d4;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon i.fa-file-invoice-dollar {
  color: #f59e0b;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon i.fa-computer {
  color: #8b5cf6;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .icon i.fa-layer-group {
  color: #059669;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .title {
  font-size: 18px !important;
  line-height: 24px !important;
  margin-top: 14px !important;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .border2 {
  width: 60px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .text {
  font-size: 14px !important;
  line-height: 22px !important;
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .theme-btn {
  margin-top: 16px !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
}

/* Toda la tarjeta de servicio es clicable */
a.tv-service-single-box-link {
  display: block;
  height: 100%;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}

a.tv-service-single-box-link:hover .tv-service-single-box {
  transform: translateY(-6px);
}

.tv-service-section.style-2 .tv-service-single-box .inner-box .theme-btn {
  display: inline-flex;
  cursor: default;
}

/* =============================================
   Fotos del detalle de servicio: tamaños uniformes
   ============================================= */
.services-details__content .image img {
  height: 430px !important;
  object-fit: cover !important;
  object-position: center !important;
}

.services-details__content .details-image-box img {
  height: 250px !important;
  object-fit: cover !important;
  object-position: center !important;
}