/* ==========================================================================
   Componentes
   1. Héroe (slider)          4. Servicios (torres)
   2. Mapa animado            5. Nosotros
   3. Diagrama de vectores    6. Contacto (WhatsApp)
   Los banners del slider (plataforma, phishing, GAP, pentesting y análisis)
   están en banners.css, que también usan las páginas de servicio.
   Toda animación vive dentro de (prefers-reduced-motion: no-preference):
   quien pide reducir movimiento ve directamente el estado final.
   ========================================================================== */

/* 1. Héroe · slider ----------------------------------------------------- */

.hero {
  /* Borde izquierdo alineado con el contenedor de la cabecera */
  --hero-inset: max(var(--gutter), calc((100% - var(--container)) / 2));
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}

.hero__viewport { display: grid; }

.hero-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 620px);
  justify-content: space-between;
  align-items: center;
  column-gap: 40px;
  min-height: min(calc(100svh - var(--header-h)), 900px);
  padding: 32px max(calc(var(--gutter) / 2), calc((100% - var(--container)) / 2 - 64px)) 112px var(--hero-inset);
  visibility: hidden;
  opacity: 0;
}
.hero-slide.is-active,
.hero-slide.is-leaving { visibility: visible; }
.hero-slide.is-active { opacity: 1; }

.hero-slide__text { display: flex; flex-direction: column; gap: 26px; }

.hero-slide__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-slide__title--secondary { font-size: var(--fs-h2-slide); line-height: 1; }

.hero-slide__lead {
  max-width: 520px;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.hero-slide__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.hero-slide__visual {
  justify-self: end;
  width: 100%;
  max-width: 620px;
}

/* Industrias (slide 1) */
.industries { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.industries__title { font-size: var(--fs-mono-sm); }
.industries ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  list-style: none;
  font-weight: 500;
}
.industries li {
  min-height: 40px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--sw-line-strong);
}
.industries li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--sw-line-strong); }

/* Leyenda del diagrama (slide 2) */
.legend {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--sw-line-strong);
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.legend li { display: flex; align-items: center; gap: 14px; }
.legend svg { flex-shrink: 0; }
.legend__icons { display: inline-flex; flex-shrink: 0; gap: 3px; color: var(--color-brand); }

/* Controles del slider */
.hero__controls {
  position: absolute;
  z-index: 3;
  left: var(--hero-inset);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.hero__tabs { display: flex; gap: 20px; }
.hero__tab {
  position: relative;
  width: 56px;
  min-height: 44px;
  padding: 10px 0 12px;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-muted);
}
.hero__tab[aria-selected="true"] { width: auto; min-width: 56px; color: var(--color-text); }
.hero__tab-name { white-space: nowrap; }
/* Siete pestañas no caben con nombre: solo la activa lo muestra (las demás, para lectores de pantalla) */
.hero__tab:not([aria-selected="true"]) .hero__tab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.hero__tab-index { color: var(--color-brand); font-weight: 600; margin-right: 8px; }
.hero__tab-track {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: var(--sw-line-strong);
}
.hero__tab-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-brand);
  transform-origin: left center;
  transform: scaleX(0);
}
.hero__tab[aria-selected="true"] .hero__tab-track::after { transform: scaleX(var(--progress, 1)); }

.hero__buttons { display: flex; gap: 8px; }

@media (max-width: 999px) {
  /* En columna, los controles van después de las diapositivas */
  .hero { display: flex; flex-direction: column; }
  .hero__controls {
    order: 2;
    position: relative;
    left: auto;
    bottom: auto;
    padding: 0 var(--gutter) 40px;
  }
  .hero-slide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    align-content: start;
    min-height: 0;
    padding: 40px var(--gutter) 32px;
  }
  .hero-slide__visual { justify-self: center; max-width: 600px; }
  /* En columna las pestañas se reparten a lo ancho; la activa toma lo que necesite su nombre */
  .hero__tabs { flex: 1; min-width: 0; gap: 16px; }
  .hero__tab { width: auto; flex: 1 1 0; min-width: 0; }
  .hero__tab[aria-selected="true"] { flex: 0 0 auto; }
}

@media (max-width: 559px) {
  .industries ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industries li:nth-last-child(-n + 3) { border-bottom: 0; }
  .industries li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--sw-line-strong); }
  .hero__controls { gap: 12px; }
  .hero__tabs { gap: 12px; }
  /* En teléfonos se cambia con las pestañas o deslizando; la pausa se mantiene */
  .hero__buttons [data-slider-prev],
  .hero__buttons [data-slider-next] { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slide {
    transform: translateX(var(--enter-from, 32px));
    transition:
      opacity var(--dur-slide) var(--ease-out),
      transform var(--dur-slide) var(--ease-out),
      visibility 0s linear var(--dur-slide);
  }
  .hero-slide.is-active {
    transform: none;
    transition: opacity var(--dur-slide) var(--ease-out), transform var(--dur-slide) var(--ease-out), visibility 0s;
  }
  .hero-slide.is-leaving { transform: translateX(var(--leave-to, -32px)); }
  .hero[data-direction="prev"] { --enter-from: -32px; --leave-to: 32px; }

  .hero-slide.is-active .hero-slide__text > * { animation: sw-rise 0.8s var(--ease-out) both; }
  .hero-slide.is-active .hero-slide__text > :nth-child(2) { animation-delay: 0.06s; }
  .hero-slide.is-active .hero-slide__text > :nth-child(3) { animation-delay: 0.12s; }
  .hero-slide.is-active .hero-slide__text > :nth-child(4) { animation-delay: 0.18s; }
  .hero-slide.is-active .hero-slide__text > :nth-child(5) { animation-delay: 0.24s; }
}

/* Figuras del héroe: lo propio del diagrama. El mapa (también lo usa la página
   Nosotros) y el marco común de las figuras están en banners.css */

@media (max-width: 899px) {
  .vectors-svg .vx__degrees,
  .vectors-svg .vx__frame text { display: none; }
}

@media (max-width: 639px) {
  .vectors-svg .vx__label,
  .vectors-svg .vx__ring-labels { display: none; }
}

/* 2. Mapa animado: está en banners.css (lo comparten la portada y Nosotros) ---- */

/* 3. Diagrama de vectores animado ---------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .vectors-svg :is(.vx__ring, .vx__arc, .vx__line) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .vectors-svg :is(.vx__frame, .vx__ticks, .vx__degrees, .vx__cross, .vx__ring-labels,
                   .vx__core, .vx__origin, .vx__trail, .vx__intercept, .vx__label, .vx__node) { opacity: 0; }
  .vectors-svg :is(.vx__core, .vx__node) { transform-box: fill-box; transform-origin: center; }

  :is(.is-active, .is-leaving) .vectors-svg :is(.vx__frame, .vx__ticks, .vx__degrees, .vx__cross) {
    animation: sw-fade 0.8s var(--ease-out) 0.15s forwards;
  }
  /* Las capas se dibujan de adentro hacia afuera */
  :is(.is-active, .is-leaving) .vectors-svg .vx__ring {
    animation: sw-draw 1.1s var(--ease-out) forwards;
    animation-delay: calc(0.6s - var(--k) * 0.12s);
  }
  :is(.is-active, .is-leaving) .vectors-svg .vx__core { animation: sw-pop 0.6s var(--ease-out) 0.2s forwards; }
  :is(.is-active, .is-leaving) .vectors-svg .vx__ring-labels { animation: sw-fade 0.6s var(--ease-out) 0.9s forwards; }

  /* Los vectores entran desde afuera */
  :is(.is-active, .is-leaving) .vectors-svg .vx__line {
    animation: sw-draw 0.8s var(--ease-out) forwards;
    animation-delay: calc(0.8s + var(--i) * 0.08s);
  }
  :is(.is-active, .is-leaving) .vectors-svg :is(.vx__origin, .vx__label) {
    animation: sw-fade 0.5s var(--ease-out) forwards;
    animation-delay: calc(0.7s + var(--i) * 0.08s);
  }
  :is(.is-active, .is-leaving) .vectors-svg .vx__trail {
    animation: sw-fade 0.6s var(--ease-out) forwards;
    animation-delay: calc(1.5s + var(--i) * 0.08s);
  }

  /* Cada torre cubre su capa y aparece su nodo */
  :is(.is-active, .is-leaving) .vectors-svg .vx__arc {
    animation: sw-draw 0.9s var(--ease-out) forwards;
    animation-delay: calc(1.3s + var(--k) * 0.15s);
  }
  :is(.is-active, .is-leaving) .vectors-svg .vx__node {
    animation: sw-pop 0.55s var(--ease-spring) forwards;
    animation-delay: calc(1.6s + var(--k) * 0.12s);
  }

  /* Bucle: un paquete de ataque viaja por cada vector y explota al chocar con la torre */
  .vectors-svg :is(.vx__packet, .vx__flash, .vx__shock, .vx__shard) { transform-box: fill-box; transform-origin: center; }
  :is(.is-active, .is-leaving) .vectors-svg .vx__packet {
    animation: sw-packet 3.2s linear infinite;
    animation-delay: calc(2.8s + var(--i) * 0.4s);
  }
  :is(.is-active, .is-leaving) .vectors-svg :is(.vx__flash, .vx__shock, .vx__shard) {
    animation: 3.2s var(--ease-out) calc(2.8s + var(--i) * 0.4s) infinite;
  }
  :is(.is-active, .is-leaving) .vectors-svg .vx__flash { animation-name: sw-flash-burst; }
  :is(.is-active, .is-leaving) .vectors-svg .vx__shock { animation-name: sw-shock; }
  :is(.is-active, .is-leaving) .vectors-svg .vx__shard { animation-name: sw-shard; }
  :is(.is-active, .is-leaving) .vectors-svg .vx__intercept {
    animation:
      sw-fade 0.3s var(--ease-out) calc(1.45s + var(--i) * 0.08s) forwards,
      sw-flash 3.2s var(--ease-out) calc(2.8s + var(--i) * 0.4s) infinite;
  }
}

/* 4. Servicios · torres ---------------------------------------------------- */

.towers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
}
/* Las seis partes de cada torre (ícono, nombre, área, descripción, servicios y enlace)
   comparten filas con las de las otras torres: todo empieza a la misma altura aunque
   los textos midan distinto */
.tower {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 14px;
  align-content: start;
  padding-top: 24px;
  border-top: 2px solid var(--sw-tinta);
}
.tower__head { display: flex; align-items: center; justify-content: space-between; }
/* Ícono de la torre sobre una baldosa suave: escudo, portapapeles, mira y birrete */
.tower__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--sw-tint);
  color: var(--color-brand);
}
.tower__code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-brand);
}
/* Nombre y área en Cobalto: se leen como título, separados de la descripción en gris */
.tower__name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-brand); }
.tower__area { margin-top: -8px; font-weight: 500; color: var(--color-brand); }
.tower__desc { line-height: 1.55; color: var(--color-text-muted); }
.tower__list { margin-top: 6px; list-style: none; font-weight: 500; }
.tower__list li { padding: 9px 0; border-top: 1px solid var(--sw-line); }
.tower__list li:last-child { border-bottom: 1px solid var(--sw-line); }
/* Servicios con página propia */
.tower__list li:has(> a) { padding: 0; }
.tower__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 9px 0;
  color: var(--color-brand);
  text-decoration: none;
}
.tower__list a::after { content: '→' / ''; font-family: var(--font-mono); }
/* Servicios de equipo extendido: un asterisco remite a la nota de abajo. Va en el CSS para que
   no forme parte del nombre del servicio (los lectores de pantalla no lo leen) */
.tower__list [data-extendido] .tower__service::after { content: '*' / ''; color: var(--color-signal); }
.tower__list a:hover { text-decoration: underline; }
.tower__link { justify-self: start; font-weight: 600; }

/* Qué es un «equipo extendido» (servicios de varias torres): nota al pie, en cursiva */
.towers__note {
  margin-top: 40px;
  max-width: 780px;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.towers__note strong { font-weight: 600; color: var(--color-text); }
.towers__note-marca { font-style: normal; font-weight: 600; color: var(--color-signal); }

@media (max-width: 1099px) {
  .towers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tower:nth-child(n+3) { margin-top: 48px; }
}
@media (max-width: 639px) {
  .towers { grid-template-columns: minmax(0, 1fr); }
  .tower:nth-child(n+2) { margin-top: 48px; }
}

/* 5. Nosotros ---------------------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 80px;
}
.about__copy { display: flex; flex-direction: column; gap: 18px; }
.about__statement {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.about__text { font-size: 1.125rem; line-height: 1.55; color: var(--color-text-muted); }
.about__link { align-self: flex-start; }
.about__vendors { display: flex; flex-direction: column; gap: 14px; }
.vendors {
  padding: 12px 28px;
  border-radius: 20px;
  background: var(--sw-blanco);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  list-style: none;
  font-weight: 500;
}
.vendors li {
  min-height: 44px;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(9, 16, 31, 0.08);
}
.vendors li:nth-child(-n + 3) { border-top: 0; }

@media (max-width: 999px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 639px) {
  .vendors { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 20px; }
  .vendors li:nth-child(3) { border-top: 1px solid rgba(9, 16, 31, 0.08); }
}

/* 6. Contacto: WhatsApp --------------------------------------------------- */
/* Un campo de Cobalto, como el cierre del catálogo: el texto y el botón a la izquierda,
   los canales a la derecha, en filas con filete y rótulo en mono */

.contact { padding-block: var(--section-y); background: var(--sw-cobalto); color: #FFFFFF; }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 520px);
  justify-content: space-between;
  align-items: center;
  gap: 48px 64px;
}
.contact__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.contact__intro .eyebrow { color: var(--sw-bruma); }
.contact__title {
  font-size: clamp(2.25rem, 1.45rem + 2.6vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.contact__lead { max-width: 30em; font-size: var(--fs-lead); line-height: 1.55; color: var(--sw-bruma); text-wrap: pretty; }
.contact__intro .btn { margin-top: 4px; }

.contact__canales { display: flex; flex-direction: column; gap: 20px; }
.contact__canales dl > div {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(203, 216, 248, 0.3);
}
.contact__canales dl > div:last-child { border-bottom: 1px solid rgba(203, 216, 248, 0.3); }
.contact__canales dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-bruma);
}
/* Cada canal con su ícono, en blanco */
.contact__canales dt .icono { width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; color: #FFFFFF; }
.contact__canales dd { font-size: 1.125rem; font-weight: 500; overflow-wrap: anywhere; }
/* Subrayado en Señal clara, la señal sobre Cobalto */
.contact__canales a,
.contact__privacidad a {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: var(--sw-senal-clara);
  text-underline-offset: 5px;
}
.contact__canales a:hover,
.contact__privacidad a:hover { color: #FFFFFF; text-decoration-thickness: 2px; }
.contact__privacidad { font-size: 0.9375rem; line-height: 1.5; color: var(--sw-bruma); }

@media (max-width: 999px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .contact__canales dl > div { grid-template-columns: 118px minmax(0, 1fr); gap: 12px; }
  .contact__canales dd { font-size: 1rem; }
}

/* Animaciones ---------------------------------------------------------------- */

@keyframes sw-packet {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  8% { opacity: 1; }
  62% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
  66%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.9); }  /* estalla contra la marca */
}
/* Explosión: destello, onda expansiva y esquirlas que rebotan contra la marca de la torre */
@keyframes sw-flash-burst {
  0%, 61% { opacity: 0; transform: scale(0.4); }
  62.5% { opacity: 0.6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes sw-shock {
  0%, 61% { opacity: 0; transform: scale(0.3); }
  62.5% { opacity: 1; }
  84%, 100% { opacity: 0; transform: scale(3.2); }
}
@keyframes sw-shard {
  0%, 61% { opacity: 0; transform: translate(0, 0) scale(1.2); }
  62% { opacity: 1; }
  74% { opacity: 1; }
  90%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.6); }
}
@keyframes sw-flash {
  0%, 58% { stroke-width: 3; }
  64% { stroke-width: 7; }
  78%, 100% { stroke-width: 3; }
}
@keyframes sw-typing {
  0%, 60%, 100% { transform: none; opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}