/* ==========================================================================
   OMNITEK — home.css
   Estilos exclusivos de index.html. Se carga solo en esta página,
   después de componentes.css.
   ========================================================================== */

.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-height) + var(--space-8)) var(--space-6) var(--space-9);
  overflow: hidden;
  z-index: 1;
}

#network{
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
}

.hero .hud-tag{ position: absolute; }
.hud-tl{ top: calc(var(--nav-height) + var(--space-5)); left: var(--space-6); }
.hud-tr{ top: calc(var(--nav-height) + var(--space-5)); right: var(--space-6); text-align: right; }
.hud-tl span, .hud-tr span{ display: block; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 3px;
  color: var(--color-blue);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.hero-title{
  font-size: clamp(34px, 5.5vw, 68px);
  line-height: 1.12;
  max-width: 980px;
  color: var(--color-text);
}

#heroRotator{ position: relative; display: inline-block; min-width: 1ch; }
#heroRotator .word{
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  opacity: 0;
  color: var(--color-red-bright);
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#heroRotator .word.active{ position: relative; opacity: 1; transform: none; }

.hero-sub{
  margin-top: var(--space-6);
  max-width: 620px;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

.hero-ctas{
  margin-top: var(--space-7);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.scroll-hint{
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.scroll-hint::after{
  content: '';
  width: 1px; height: 34px;
  background: linear-gradient(var(--color-text-muted), transparent);
  animation: dropline 1.8s ease-in-out infinite;
}

/* ---------- franja de servicios ---------- */

.strip{
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  max-width: var(--max-width);
  margin: 0 auto;
}
.strip-item{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 150px;
  justify-content: center;
}
.strip-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-blue);
  box-shadow: var(--glow-blue);
}
.strip-item span{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

@media (max-width: 900px){
  .hud-tl, .hud-tr{ display: none; }
  .strip{ justify-content: flex-start; }
}

/* ---------- teaser de proyectos ---------- */

.projects-teaser{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.project-card{
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-panel);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.project-card:hover{ border-color: var(--color-blue); transform: translateY(-4px); }
.project-card .tag{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-blue);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.project-card h3{ font-size: var(--fs-md); margin-top: var(--space-4); }
.project-card p{ font-size: 13.5px; color: var(--color-text-muted); margin-top: var(--space-3); }

@media (max-width: 900px){
  .projects-teaser{ grid-template-columns: 1fr; }
}

/* ---------- CTA final ---------- */

.cta-section{
  text-align: center;
  border-top: 1px solid var(--color-line);
}
.cta-section h2{
  font-size: clamp(26px, 4vw, 40px);
  max-width: 700px;
  margin: 0 auto var(--space-5);
}
.cta-section .section-desc{ margin-left: auto; margin-right: auto; }