/* portal.css — Página de recepción INERGIS */
@import './fonts.css';

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --blue-electric: #00c3ff;
  --blue-mid:      #0077cc;
  --navy:          #050d1a;
  --navy-2:        #071220;
  --accent:        #1af0ff;
  --gold:          #ffb300;
  --text-muted:    rgba(255, 255, 255, 0.5);
}

html, body {
  height: 100%;
}

body {
  background: var(--navy);
  color: #fff;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  overflow: hidden;
}

/* ─── Fondo con gradiente radial sutil ────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0, 80, 160, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(0, 30, 80, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Scanlines overlay (efecto tech/CRT) ─────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 4;
}

/* ─── Particles canvas ────────────────────────────────────────────────── */
#tsparticles {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* ─── Globo COBE (wrapper + overlays) ────────────────────────────────── */
#globe-wrapper {
  position: fixed;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65vmin;
  height: 65vmin;
  pointer-events: none;
  z-index: 2;
  opacity: 0; /* fade-in via GSAP al cargar */
  transition: opacity 0.6s ease;
}

#portal-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Atmósfera exterior — glow difuso FUERA del globo, no encima */
#globe-atm-ti,
#globe-atm-solar {
  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#globe-atm-ti {
  background: radial-gradient(ellipse 55% 100% at -8% 50%,
    rgba(0, 195, 255, 0.60) 0%,
    rgba(0, 195, 255, 0.20) 45%,
    transparent 68%
  );
  filter: blur(16px);
  opacity: 0.12; /* oscuro por defecto */
}

#globe-atm-solar {
  background: radial-gradient(ellipse 55% 100% at 108% 50%,
    rgba(255, 179, 0, 0.60) 0%,
    rgba(255, 179, 0, 0.20) 45%,
    transparent 68%
  );
  filter: blur(16px);
  opacity: 0.12; /* oscuro por defecto */
}

/* ─── Portal wrapper ──────────────────────────────────────────────────── */
.portal {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 2.25rem;
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.portal__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.portal__logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(0, 195, 255, 0.5))
    drop-shadow(0 0 40px rgba(0, 120, 200, 0.25));
}

.portal__tagline {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-height: 1.2em; /* evita salto al escribir */
}

/* ─── Divider animado ─────────────────────────────────────────────────── */
.portal__divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-electric), transparent);
  border-radius: 2px;
}

/* ─── Label ───────────────────────────────────────────────────────────── */
.portal__label {
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.06em;
}

/* ─── Grid de vertientes ──────────────────────────────────────────────── */
.vertientes {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  /* perspectiva 3D para el tilt */
  perspective: 1000px;
}

/* ─── Card base ───────────────────────────────────────────────────────── */
.vertiente {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1.5rem;
  padding: 2.75rem 2.25rem;
  width: 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* borde base */
  border: 1px solid rgba(255, 255, 255, 0.07);
  /* necesario para el tilt 3D */
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}

/* ─── Borde giratorio (pseudo-element) ────────────────────────────────── */
.vertiente::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0%,
    transparent 65%,
    var(--glow-color, #00c3ff) 80%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

/* Máscara interior para que solo se vea el borde */
.vertiente::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(1.5rem - 1px);
  background: #070f1e;
  z-index: 0;
}

.vertiente--ti  { --glow-color: #00c3ff; }
.vertiente--energia { --glow-color: #ffb300; }

.vertiente:hover::before {
  opacity: 1;
}

/* ─── Contenido por encima del pseudo-element ─────────────────────────── */
.vertiente__icon,
.vertiente__title,
.vertiente__desc,
.vertiente__cta {
  position: relative;
  z-index: 1;
}

/* ─── Icono circular ──────────────────────────────────────────────────── */
.vertiente__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.vertiente--ti .vertiente__icon {
  background: rgba(0, 195, 255, 0.07);
  border: 1px solid rgba(0, 195, 255, 0.22);
}

.vertiente--energia .vertiente__icon {
  background: rgba(255, 179, 0, 0.07);
  border: 1px solid rgba(255, 179, 0, 0.22);
}

.vertiente__icon svg {
  width: 34px;
  height: 34px;
}

.vertiente--ti .vertiente__icon svg      { color: var(--blue-electric); }
.vertiente--energia .vertiente__icon svg { color: var(--gold); }

/* ─── Título ──────────────────────────────────────────────────────────── */
.vertiente__title {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
}

/* ─── Descripción ─────────────────────────────────────────────────────── */
.vertiente__desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ─── CTA ─────────────────────────────────────────────────────────────── */
.vertiente__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 0.25rem;
  transition: color 0.3s ease, gap 0.3s ease;
}

.vertiente--ti:hover     .vertiente__cta { color: var(--blue-electric); gap: 0.75rem; }
.vertiente--energia:hover .vertiente__cta { color: var(--gold);          gap: 0.75rem; }

/* ─── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  body { overflow-y: auto; }

  .portal {
    gap: 1.75rem;
    padding: 3rem 1.25rem 2rem;
    justify-content: flex-start;
  }

  .vertiente {
    width: 100%;
    max-width: 380px;
    padding: 2rem 1.75rem;
  }

  .portal__logo { height: 42px; }

  /* Tagline: reducir letter-spacing para que no desborde en móvil */
  .portal__tagline {
    font-size: 0.65rem;
    letter-spacing: 0.10em;
    white-space: normal;
    text-align: center;
  }

  /* Globo: ajustar posición y tamaño en móvil */
  #globe-wrapper {
    width: 90vw;
    height: 90vw;
    top: 22%;
  }
}