/* Internetworks Corporate Theme - Bootstrap Override */

:root{
  --primary-color:#0B0E14;
  --secondary-color:#1A2238;
  --accent-color:#00F0FF;
  --accent-secondary:#FF2E63;
  --text-primary:#FFFFFF;
  --text-secondary:#B0B7C3;
  --glass-bg:rgba(255,255,255,0.05);
  --glass-border:rgba(255,255,255,0.10);
  --font-heading:'Inter',sans-serif;
  --font-body:'Roboto',sans-serif;
  --transition-fast:0.2s;
  --transition-smooth:0.4s cubic-bezier(0.25,0.8,0.25,1);
}

body{
  font-family:var(--font-body);
  background-color:var(--primary-color);
  color:var(--text-primary);
  overflow-x:hidden;
}

h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  font-family:var(--font-heading);
  color:var(--text-primary);
  font-weight:700;
}

a{
  transition:all var(--transition-fast);
  text-decoration:none;
  color:inherit;
}

a:hover{ color:var(--accent-color); }

.highlight{
  color:var(--accent-color);
  background:linear-gradient(90deg,var(--accent-color),#00A8E8);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Navbar */
.navbar{
  padding:1.5rem 0;
  background:transparent;
  transition:background-color var(--transition-smooth),padding var(--transition-smooth),backdrop-filter var(--transition-smooth);
}

header.scrolled .navbar{
  background-color:rgba(11,14,20,0.95);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  padding:1rem 0;
}

#contenido{ scroll-margin-top:90px; }

.nav-link{
  font-weight:600;
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-secondary)!important;
  position:relative;
  padding-bottom:5px;
}

.nav-link::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background-color:var(--accent-color);
  transition:width var(--transition-smooth);
}

.nav-link:hover,
.nav-link.active{
  color:var(--text-primary)!important;
}

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

/* Logo */
.logotipo{
  width:clamp(200px,28vw,260px);
  height:auto;
  aspect-ratio:4/1;
  display:block;
}

@media (min-width:992px){
  .navbar .navbar-brand .logotipo{
    width:380px!important;
    height:auto!important;
  }
}

/* Hamburger button */
.navbar-toggler{
  border:none;
  padding:10px 12px;
  min-width:44px;
  min-height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:12px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}

.navbar-toggler:focus{ box-shadow:none; }

.navbar-toggler-bar{
  display:block;
  width:25px;
  height:3px;
  background-color:var(--text-primary);
  transition:all 0.2s;
  margin:0;
  pointer-events:none;
}

/* Elimina animaciones del collapse (incluye .collapsing) */
.collapse{ transition:none!important; }
.collapsing{ transition:none!important; }

/* Panel mobile: evita flash y evita barrita al cerrar */
@media (max-width:991.98px){

  /* Estado base (cerrado): sin padding/margen/fondo para que no se vea nada raro */
  .navbar .navbar-collapse.nav-panel{
    background:transparent;
    border-radius:0;
    padding:0;
    margin-top:0;
    overflow:hidden;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* Abriendo/abierto: aplica fondo y padding desde el primer frame */
  .navbar .navbar-collapse.nav-panel.show,
  .navbar .navbar-collapse.nav-panel.collapsing,
  .navbar .navbar-collapse.nav-panel.is-opening{
    background:rgba(0,0,0,0.60);
    border-radius:12px;
    padding:12px;
    margin-top:10px;
  }

  /* Cerrando: fuerza a no dejar “restos” */
  .navbar .navbar-collapse.nav-panel.is-hiding{
    background:transparent!important;
    border-radius:0!important;
    padding:0!important;
    margin-top:0!important;
    overflow:hidden!important;
  }

  .navbar .navbar-collapse.nav-panel .nav-link{
    padding:12px 14px;
    border-radius:10px;
  }

  .navbar .navbar-collapse.nav-panel .nav-link:hover,
  .navbar .navbar-collapse.nav-panel .nav-link:focus{
    background:rgba(255,255,255,0.08);
  }
}

/* Hero */
.hero-section{
  position:relative;
  min-height:100vh;
  padding-top:80px;
  background:radial-gradient(circle at top right,#1A2238 0%,#0B0E14 60%);
  overflow:hidden;
}

.hero-bg-elements{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.glow-circle{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.4;
}

.glow-1{
  width:600px;
  height:600px;
  background:var(--accent-color);
  top:-200px;
  right:-200px;
  animation:drift 10s infinite alternate;
}

.glow-2{
  width:500px;
  height:500px;
  background:blue;
  bottom:-100px;
  left:-100px;
  animation:drift 15s infinite alternate-reverse;
}

@keyframes drift{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(50px,30px); }
}

.hero-content{
  z-index:1;
  position:relative;
}

.hero-tagline{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:4px;
  color:var(--accent-color);
  margin-bottom:1.5rem;
  font-weight:600;
}

.hero-title{
  font-size:3.5rem;
  margin-bottom:1.5rem;
  background:linear-gradient(180deg,#FFFFFF 0%,#A0A0A0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

@media (min-width:992px){
  .hero-title{ font-size:4.5rem; }
}

.hero-description{
  font-size:1.2rem;
  color:var(--text-secondary);
  margin-bottom:3rem;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

/* Sections */
.stats-section{ background-color:var(--secondary-color); }

.image-container-gradient{
  height:400px;
  background:linear-gradient(135deg,#1A2238 0%,#000 100%);
}

.page-header-gradient{
  background:linear-gradient(180deg,var(--secondary-color) 0%,var(--primary-color) 100%);
}

.about-trajectory-card{ background:rgba(255,255,255,0.03); }

.about-glow-effect{
  filter:blur(100px);
  width:300px;
  height:300px;
  opacity:0.1;
}

.phone-number{ letter-spacing:-1px; }
.office-img-container{ height:200px; }
.lead-max-width{ max-width:800px; }

.company-icon-circle{
  width:120px;
  height:120px;
  font-size:3rem;
}

/* Buttons */
.btn-custom-primary{
  background:linear-gradient(90deg,var(--accent-color),#00A8E8);
  color:#000;
  box-shadow:0 0 20px rgba(0,240,255,0.4);
  border:none;
  border-radius:50px;
  padding:0.8rem 2rem;
  font-weight:700;
  text-transform:uppercase;
  font-size:0.9rem;
  letter-spacing:1px;
  transition:all var(--transition-smooth);
}

.btn-custom-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,240,255,0.6);
  color:#000;
}

.btn-custom-outline{
  background:transparent;
  color:var(--text-primary);
  border:1px solid var(--text-secondary);
  border-radius:50px;
  padding:0.8rem 2rem;
  font-weight:700;
  text-transform:uppercase;
  font-size:0.9rem;
  letter-spacing:1px;
  transition:all var(--transition-smooth);
}

.btn-custom-outline:hover{
  border-color:var(--text-primary);
  background:rgba(255,255,255,0.05);
  color:var(--text-primary);
}

/* Cards */
.tech-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  padding:2.5rem;
  border-radius:20px;
  transition:all var(--transition-smooth);
  position:relative;
  overflow:hidden;
  height:100%;
}

.tech-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--accent-color),var(--accent-secondary));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-smooth);
}

.tech-card:hover{
  transform:translateY(-10px);
  border-color:rgba(255,255,255,0.30);
  box-shadow:0 20px 40px rgba(0,0,0,0.30);
}

.tech-card:hover::before{ transform:scaleX(1); }

.card-icon{
  font-size:2.5rem;
  margin-bottom:1.5rem;
  color:var(--accent-color);
}

.card-icon img{
  width:50%;
  height:auto;
  object-fit:contain;
}

/* Footer */
footer{
  background-color:#05070a;
  color:var(--text-secondary);
  border-top:1px solid var(--glass-border);
  position:relative;
  overflow:hidden;
}

footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-color),transparent);
  opacity:0.5;
}

.footer-brand p{
  font-size:0.95rem;
  line-height:1.6;
  color:var(--text-secondary);
}

.footer-section h4{
  color:var(--text-primary);
  font-size:0.9rem;
  margin-bottom:1.5rem;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;
}

.footer-links li{ margin-bottom:0.8rem; }

.footer-links a{
  color:var(--text-secondary);
  transition:all var(--transition-fast);
  font-size:0.95rem;
}

.footer-links a:hover{
  color:var(--accent-color);
  padding-left:5px;
}

.years-badge{
  background:linear-gradient(135deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));
  border:1px solid var(--glass-border);
  border-radius:12px;
  padding:1.5rem;
  text-align:center;
  transition:all var(--transition-smooth);
}

.years-badge:hover{
  border-color:var(--accent-color);
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(0,240,255,0.10);
}

.years-count{
  font-size:2.5rem;
  font-weight:800;
  color:var(--accent-color);
  line-height:1;
  display:block;
  margin-bottom:0.5rem;
}

.years-label{
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-primary);
}

.copyright-strip{
  background-color:#020304;
  padding:1.5rem 0;
  font-size:0.85rem;
  color:#6c757d;
  border-top:1px solid rgba(255,255,255,0.05);
}

/* Inputs */
.form-control-dark{
  width:100%;
  padding:1rem;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
  color:#fff;
  border-radius:4px;
}

.form-control-dark:focus{
  background:rgba(255,255,255,0.10);
  border-color:var(--accent-color);
  outline:none;
  color:#fff;
}

@media (min-width:768px){
  .border-end-md{
    border-right:1px solid var(--glass-border)!important;
  }
}

/* Timeline */
.timeline{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:2rem 0;
}

.timeline::after{
  content:'';
  position:absolute;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--glass-border) 10%,var(--glass-border) 90%,transparent);
  top:0;
  bottom:0;
  left:50%;
  margin-left:-1px;
}

.timeline-item{
  padding:10px 40px;
  position:relative;
  background-color:inherit;
  width:50%;
}

.timeline-item::after{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  right:-8px;
  background-color:var(--primary-color);
  border:2px solid var(--text-secondary);
  top:32px;
  border-radius:50%;
  z-index:1;
  transition:all var(--transition-smooth);
}

.timeline-item:hover::after{
  background-color:var(--accent-color);
  border-color:var(--accent-color);
  box-shadow:0 0 15px var(--accent-color);
  transform:scale(1.2);
}

.timeline-item.left{ left:0; }
.timeline-item.right{ left:50%; }
.timeline-item.right::after{ left:-8px; }

.timeline-content{
  padding:1.5rem;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--glass-border);
  position:relative;
  border-radius:12px;
  transition:all var(--transition-smooth);
  backdrop-filter:blur(5px);
}

.timeline-item:hover .timeline-content{
  border-color:rgba(255,255,255,0.20);
  background:rgba(255,255,255,0.05);
  transform:translateY(-5px);
}

.timeline-year{
  color:var(--accent-color);
  font-weight:700;
  font-size:1.2rem;
  display:block;
  margin-bottom:0.5rem;
  font-family:var(--font-heading);
  letter-spacing:1px;
}

@media (max-width:768px){
  .timeline::after{ left:31px; }
  .timeline-item{
    width:100%;
    padding-left:70px;
    padding-right:25px;
  }
  .timeline-item.right{ left:0%; }
  .timeline-item.left::after,
  .timeline-item.right::after{ left:23px; }
}

/* Reservar espacio y evitar brincos de layout sin usar width/height en el HTML */
.imagen-iaas,
.imagen-centro-de-datos {
  width: 100%;
  aspect-ratio: 16 / 9; /* Si tus fotos son mas cuadradas, cambia a 4 / 3 o 1 / 1 */
  position: relative;
}

/* Hacer que la imagen llene el contenedor conservando responsividad */
.imagen-iaas img,
.imagen-centro-de-datos img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cambia a contain si no quieres recorte */
  display: block;
}

/* Mantener proporción consistente en tarjetas de instalaciones sin width/height en HTML */
.imagen-oficina-cdmx,
.imagen-noc-queretaro,
.imagen-data-center-mexico,
.imagen-data-center-usa {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
}

/* Imagen responsiva dentro del contenedor con recorte elegante */
.imagen-tarjeta-instalacion {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.imagen-aniversario-footer{
  width: 100%;
  height: auto;
  display: block;
}


/* FAQ - Internetworks (estilo tipo tech-card) */
.faq-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* Accordion container */
.faq-accordion{
  margin-top: 1.25rem;
}

/* Cada item se comporta como tech-card */
.faq-accordion .faq-item{
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: all var(--transition-smooth);
  box-shadow: none;
}

/* Barra superior degradada como tech-card::before */
.faq-accordion .faq-item::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-smooth);
}

/* Hover similar a tech-card */
.faq-accordion .faq-item:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 20px 40px rgba(0,0,0,0.30);
}

.faq-accordion .faq-item:hover::before{
  transform: scaleX(1);
}

/* Boton pregunta */
.faq-accordion .faq-question{
  background: transparent;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 1.1rem 1.25rem;
  transition: all var(--transition-smooth);
}

/* Estado abierto */
.faq-accordion .accordion-button:not(.collapsed){
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  box-shadow: none;
}

/* Hover sobre el boton (ligero glow) */
.faq-accordion .faq-item:hover .faq-question{
  background: rgba(255,255,255,0.03);
}

/* Focus accesible, coherente con tu UI */
.faq-accordion .accordion-button:focus{
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 0 0 .25rem rgba(0,240,255,0.12);
}

/* Respuesta */
.faq-accordion .accordion-body.faq-answer{
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 0.25rem 1.25rem 1.25rem 1.25rem;
}

/* Flecha del accordion: mas elegante en dark */
.faq-accordion .accordion-button::after{
  filter: brightness(1.9);
  opacity: 0.95;
  transition: transform var(--transition-smooth);
}

/* Cuando abre, que se sienta mas “pro” */
.faq-accordion .accordion-button:not(.collapsed)::after{
  transform: rotate(-180deg);
}

/* Links dentro de respuestas */
.faq-answer a{
  color: var(--text-primary);
  text-decoration: none;
  position: relative;
  opacity: 0.95;
  transition: all var(--transition-fast);
}

.faq-answer a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background: linear-gradient(90deg, var(--accent-color), #00A8E8);
  opacity: 0.9;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-smooth);
}

.faq-answer a:hover{
  color: var(--accent-color);
  opacity: 1;
}

.faq-answer a:hover::after{
  transform: scaleX(1);
}