/* T-Conecta — estilos globales */

body {
  margin: 0;
  background: #040404;
  -webkit-font-smoothing: antialiased;
}

/* el atributo hidden debe ganar sobre los display en línea */
[hidden] { display: none !important; }

a { color: #59D9DC; text-decoration: none; }
a:hover { color: #37BFC2; }

/* hover de la navegación principal */
.nav-link:hover { color: #37BFC2 !important; }

/* campos del formulario */
.tc-field::placeholder { color: #5A6577; }
.tc-field:focus { outline: none; border-color: #37BFC2; }

/* entrada del header */
@keyframes tcDropIn {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  header { animation: none !important; }
}

/* visibilidad desktop / mobile */
.tc-desk { display: none; }

@media (max-width: 1023px) {
  #top.hero-home { height: auto !important; padding-bottom: 24px; }
  .tc-hero-img img { width: 100% !important; height: auto !important; }

  /* la diadema va full-bleed, sin márgenes laterales */
  .tc-hero-img {
    margin-left: calc(-1 * clamp(16px, 4vw, 80px));
    margin-right: calc(-1 * clamp(16px, 4vw, 80px));
    max-width: none !important;
    width: calc(100% + 2 * clamp(16px, 4vw, 80px)) !important;
    flex-basis: calc(100% + 2 * clamp(16px, 4vw, 80px)) !important;
  }

  /* los rayos ocupan solo el área de la diadema, detrás de ella */
  #top.hero-home #hero-canvas {
    top: clamp(24px, 5vw, 64px);
    left: clamp(16px, 4vw, 80px);
    right: clamp(16px, 4vw, 80px);
    bottom: auto;
    width: auto;
    height: auto;
    aspect-ratio: 967 / 717;
  }
}

@media (min-width: 1024px) {
  .tc-desk { display: flex; }
  .tc-mob { display: none !important; }

  .tc-hero-row {
    min-height: 600px;
    justify-content: flex-end !important;
  }

  .tc-hero-img {
    position: absolute;
    left: clamp(0px, 2vw, 40px);
    top: 0;
    width: 967px;
    height: 717px;
    max-width: none;
    flex: none !important;
    pointer-events: none;
  }

  .tc-hero-img img {
    width: 967px;
    height: 717px;
    object-fit: contain;
  }

  .tc-benefits {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 46px;
    width: 1280px;
    max-width: calc(100% - 32px);
  }
}

@media (max-width: 768px) {
  .hero-cta { gap: 20px !important; }
  .hero-btn { flex: 1 1 100% !important; width: 100% !important; }
}