/* FamiliA | capa consolidada de experiencia 20260710r12
   Conserva la estructura compilada y elimina overrides acumulativos. */

/* Construcción exacta del wordmark primigenio r2.
   Móvil conserva sin alteraciones las métricas base de index.css. */
@media (min-width: 1024px) {
  /* Mantiene las cinco estaciones con un recorrido más corto que el bundle base.
     El wordmark usa las métricas únicas de index.css en todos los viewports. */
  .scroll-journey {
    min-height: 520svh !important;
  }
}

/* Un único sistema HUD: geometría fija, profundidad estática y señal luminosa. */
.hero-hud-module.hud-frame,
.hero-hud-module.hud-frame.is-active,
.hero-hud-module.hud-frame:hover,
.hero-hud-module.hud-frame:focus-within,
.group:hover .hero-hud-module.hud-frame {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden !important;
  transform: none !important;
  transform-style: flat !important;
  perspective: none !important;
  filter: none !important;
  animation: none !important;
  border-color: rgba(95, 255, 240, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(95, 255, 240, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(7, 31, 34, 0.97), rgba(2, 13, 16, 0.985)) !important;
  box-shadow:
    0 2.2rem 4.6rem -3rem rgba(95, 255, 240, 0.28),
    0 1.2rem 2.4rem -1.8rem rgba(0, 0, 0, 0.96),
    inset 0 1px rgba(244, 240, 232, 0.12),
    inset 0 0 0 1px rgba(95, 255, 240, 0.065) !important;
  transition:
    border-color 190ms ease,
    background-color 190ms ease,
    box-shadow 190ms ease !important;
}

.hero-hud-module.hud-frame:hover,
.hero-hud-module.hud-frame:focus-within {
  border-color: rgba(95, 255, 240, 0.54) !important;
  box-shadow:
    0 2.2rem 4.6rem -3rem rgba(95, 255, 240, 0.4),
    0 1.2rem 2.4rem -1.8rem rgba(0, 0, 0, 0.96),
    inset 0 1px rgba(244, 240, 232, 0.15),
    inset 0 0 0 1px rgba(95, 255, 240, 0.11) !important;
}

/* Barrido estrecho: se anima una sola capa compuesta, no el panel completo. */
.hero-hud-module.hud-frame::before {
  position: absolute !important;
  inset: 0 auto 0 -34% !important;
  z-index: 0 !important;
  display: block !important;
  width: 24% !important;
  height: auto !important;
  content: "" !important;
  pointer-events: none;
  border: 0 !important;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(95, 255, 240, 0.04) 38%,
    rgba(95, 255, 240, 0.22) 50%,
    rgba(244, 240, 232, 0.08) 54%,
    transparent 68%
  ) !important;
  opacity: 0.48 !important;
  animation: familia-hud-scan 7.2s 0.7s ease-in-out infinite !important;
  transition: opacity 190ms ease !important;
}

.hero-hud-module.hud-frame:hover::before,
.hero-hud-module.hud-frame:focus-within::before {
  opacity: 0.72 !important;
}

.hero-hud-module.hud-frame::after,
.hero-hud-module.hud-frame:hover::after,
.hero-hud-module.hud-frame:focus-within::after,
.hero-hud-module.hud-frame.is-active::after {
  position: absolute !important;
  inset: auto 0.9rem 0.9rem auto !important;
  z-index: 2 !important;
  width: 3.8rem !important;
  height: 1px !important;
  content: "" !important;
  pointer-events: none;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(95, 255, 240, 0.88)) !important;
  box-shadow: 0 0 0.7rem rgba(95, 255, 240, 0.42) !important;
  opacity: 0.62 !important;
  transform: none !important;
  transition: opacity 190ms ease !important;
}

.hero-hud-module.hud-frame:hover::after,
.hero-hud-module.hud-frame:focus-within::after {
  opacity: 0.94 !important;
}

.hero-hud-module > .hud-panel-depth {
  inset: 0.48rem !important;
  z-index: 0;
  display: block !important;
  border: 1px solid rgba(95, 255, 240, 0.07);
  background: none !important;
  opacity: 0.72 !important;
  transform: none !important;
  animation: none !important;
}

.hero-hud-module > .hud-fold-plane {
  display: none !important;
}

.hero-hud-module > .hud-corners {
  z-index: 0;
  opacity: 0.56 !important;
  transform: none !important;
  animation: none !important;
}

.hero-hud-module > :not(.hud-panel-depth):not(.hud-fold-plane):not(.hud-corners) {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hero-hud-kicker,
.hero-hud-module:hover .hero-hud-kicker,
.hero-hud-module:focus-within .hero-hud-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 1.6rem;
  padding-bottom: 0.64rem;
  border-bottom: 1px solid rgba(95, 255, 240, 0.17);
  color: #7efff3;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  transform: none !important;
  animation: none !important;
  transition: border-color 190ms ease, color 190ms ease !important;
}

.hero-hud-kicker span {
  min-width: 0;
}

.hero-hud-kicker span:last-child {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.42rem;
  white-space: nowrap;
}

.hero-hud-kicker span:last-child::before {
  width: 0.38rem;
  height: 0.38rem;
  content: "";
  border-radius: 50%;
  background: #5ffff0;
  box-shadow: 0 0 0 0.2rem rgba(95, 255, 240, 0.08), 0 0 0.8rem rgba(95, 255, 240, 0.54);
}

.hero-hud-module:hover .hero-hud-kicker,
.hero-hud-module:focus-within .hero-hud-kicker {
  border-bottom-color: rgba(95, 255, 240, 0.34);
  color: #a4fff8;
}

.hero-scope-core,
.hero-hud-module:hover .hero-scope-core,
.hero-hud-module:focus-within .hero-scope-core {
  position: relative;
  display: grid;
  min-height: 6.8rem;
  margin-top: 0.76rem;
  padding: 1.1rem 1.2rem;
  place-content: center;
  overflow: hidden;
  border: 1px solid rgba(95, 255, 240, 0.19);
  background:
    radial-gradient(circle at 50% 48%, rgba(95, 255, 240, 0.14), transparent 24%),
    repeating-linear-gradient(90deg, rgba(95, 255, 240, 0.025) 0 1px, transparent 1px 20px),
    rgba(1, 8, 10, 0.54);
  text-align: center;
  transform: none !important;
  animation: none !important;
  transition: border-color 190ms ease, background-color 190ms ease !important;
}

.hero-hud-module:hover .hero-scope-core,
.hero-hud-module:focus-within .hero-scope-core {
  border-color: rgba(95, 255, 240, 0.31);
}

.hero-scope-core::before {
  position: absolute;
  inset: 0.72rem;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(95, 255, 240, 0.14);
  border-radius: 0;
  box-shadow: none;
  opacity: 0.48;
  transform: none !important;
  animation: familia-hud-reticle 3.8s ease-in-out infinite !important;
}

.hero-scope-core::after {
  position: absolute;
  top: 0.75rem;
  right: 0.92rem;
  bottom: 0.75rem;
  left: auto;
  width: 1px;
  height: auto;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(95, 255, 240, 0.64), transparent);
  opacity: 0.48;
}

.hero-scope-core span,
.hero-scope-core strong {
  position: relative;
  z-index: 1;
}

.hero-scope-core span {
  margin-bottom: 0.48rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
}

.hero-scope-core strong {
  max-width: 18rem;
  font-size: clamp(0.94rem, 1.08vw, 1.12rem);
  line-height: 1.25;
  letter-spacing: 0.045em;
}

.hero-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
  margin-top: 0.66rem;
  transform: none !important;
  transform-style: flat !important;
}

.hero-scope-node,
.hero-scope-node:hover,
.hero-scope-node:focus-within,
.hero-hud-module:hover .hero-scope-node,
.hero-hud-module:focus-within .hero-scope-node {
  position: relative;
  display: grid;
  grid-template-areas:
    "code icon"
    "copy copy";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 0.42rem 0.65rem;
  min-width: 0;
  min-height: 5.4rem;
  padding: 0.76rem 0.82rem;
  overflow: hidden;
  border: 1px solid rgba(95, 255, 240, 0.17);
  background:
    linear-gradient(135deg, rgba(95, 255, 240, 0.07), transparent 56%),
    rgba(1, 9, 12, 0.48);
  box-shadow: inset 0 0 0 1px rgba(95, 255, 240, 0.025);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transform: none !important;
  transform-style: flat !important;
  filter: none !important;
  animation: none !important;
  transition: border-color 190ms ease, background-color 190ms ease, box-shadow 190ms ease !important;
}

.hero-scope-node:hover,
.hero-scope-node:focus-within {
  border-color: rgba(95, 255, 240, 0.38);
  box-shadow: inset 0 0 1.2rem rgba(95, 255, 240, 0.055);
}

.hero-scope-node::before {
  display: none !important;
}

.hero-scope-code {
  position: static !important;
  grid-area: code;
  align-self: center;
  min-width: 0;
  color: rgba(95, 255, 240, 0.7);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.hero-scope-node > svg {
  grid-area: icon;
  align-self: center;
  justify-self: end;
  width: 0.9rem;
  height: 0.9rem;
  margin: 0 !important;
  opacity: 0.88;
  transform: none !important;
}

.hero-scope-node > div {
  grid-area: copy;
  min-width: 0;
}

.hero-scope-node strong {
  display: block;
  font-size: 0.8rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.hero-scope-node p {
  display: block;
  max-width: none;
  margin-top: 0.27rem;
  color: rgba(214, 228, 225, 0.75);
  font-size: 0.62rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.hero-agent-module,
.hero-hud-module:hover .hero-agent-module,
.hero-hud-module:focus-within .hero-agent-module {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.78rem 0.9rem;
  min-width: 0;
  margin-top: 0.72rem;
  padding: 0.76rem 0.84rem;
  border: 1px solid rgba(95, 255, 240, 0.18);
  background:
    linear-gradient(90deg, rgba(95, 255, 240, 0.075), transparent 58%),
    rgba(1, 8, 10, 0.52);
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: border-color 190ms ease, background-color 190ms ease !important;
}

.hero-hud-module:hover .hero-agent-module,
.hero-hud-module:focus-within .hero-agent-module {
  border-color: rgba(95, 255, 240, 0.3);
}

.hero-agent-module > div {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
  white-space: nowrap;
}

.hero-agent-module p {
  min-width: 0;
  padding-left: 0.82rem;
  border-left: 1px solid rgba(95, 255, 240, 0.15);
  color: rgba(214, 228, 225, 0.76);
  line-height: 1.46;
  overflow-wrap: anywhere;
}

@keyframes familia-hud-scan {
  0%,
  72% {
    transform: skewX(-12deg) translate3d(-240%, 0, 0);
  }
  100% {
    transform: skewX(-12deg) translate3d(680%, 0, 0);
  }
}

@keyframes familia-hud-reticle {
  0%,
  100% {
    opacity: 0.34;
  }
  50% {
    opacity: 0.74;
  }
}

@keyframes familia-hud-mobile-enter {
  from {
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 1023px) {
  /* El contenedor Framer del HUD es quien porta hidden; se habilita explícitamente. */
  html.mobile-experience-ready main > section:first-child > .relative.mx-auto.grid > .hidden.lg\:block {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html.mobile-experience-ready main > section:first-child {
    min-height: auto;
    padding-bottom: 1.35rem;
  }

  html.mobile-experience-ready main > section:first-child .max-w-4xl {
    max-width: none;
  }

  html.mobile-experience-ready .hero-hud-module.hud-frame {
    display: block !important;
    margin-top: 0.9rem;
    padding: 0.82rem !important;
    opacity: 1;
    animation: familia-hud-mobile-enter 480ms ease-out both !important;
  }

  .hero-hud-kicker,
  .hero-hud-module:hover .hero-hud-kicker,
  .hero-hud-module:focus-within .hero-hud-kicker {
    min-height: 1.35rem;
    padding-bottom: 0.48rem;
    font-size: 0.55rem;
    letter-spacing: 0.14em;
  }

  .hero-scope-core,
  .hero-hud-module:hover .hero-scope-core,
  .hero-hud-module:focus-within .hero-scope-core {
    min-height: 5.35rem;
    margin-top: 0.54rem;
    padding: 0.86rem 0.9rem;
  }

  .hero-scope-core span {
    margin-bottom: 0.34rem;
    font-size: 0.5rem;
  }

  .hero-scope-core strong {
    max-width: 15rem;
    font-size: 0.82rem;
  }

  .hero-scope-grid {
    gap: 0.44rem;
    margin-top: 0.48rem;
  }

  .hero-scope-node,
  .hero-scope-node:hover,
  .hero-scope-node:focus-within,
  .hero-hud-module:hover .hero-scope-node,
  .hero-hud-module:focus-within .hero-scope-node {
    min-height: 5.15rem;
    padding: 0.58rem 0.62rem;
    gap: 0.34rem 0.48rem;
  }

  .hero-scope-code {
    font-size: 0.48rem;
    letter-spacing: 0.13em;
  }

  .hero-scope-node > svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .hero-scope-node strong {
    font-size: 0.68rem;
  }

  .hero-scope-node p {
    margin-top: 0.2rem;
    font-size: 0.54rem;
    line-height: 1.34;
  }

  .hero-agent-module,
  .hero-hud-module:hover .hero-agent-module,
  .hero-hud-module:focus-within .hero-agent-module {
    grid-template-columns: 1fr;
    gap: 0.34rem;
    margin-top: 0.5rem;
    padding: 0.6rem 0.66rem;
  }

  .hero-agent-module > div {
    font-size: 0.54rem;
    letter-spacing: 0.12em;
  }

  .hero-agent-module p {
    padding-left: 0;
    border-left: 0;
    font-size: 0.56rem;
    line-height: 1.38;
  }

  .scroll-journey {
    min-height: auto !important;
  }

  .mobile-station {
    padding-top: 1.65rem !important;
    padding-bottom: 2rem !important;
  }

  .mobile-station-copy .hud-heading {
    font-size: clamp(2.05rem, 10.5vw, 2.65rem) !important;
    line-height: 0.99;
  }

  .mobile-station-copy .mt-5,
  .mobile-station-copy .mt-6 {
    margin-top: 0.82rem !important;
  }

  /* Aplana solo las superficies que sufrían pérdida intermitente de glifos. */
  html.mobile-experience-ready .hero-hud-module,
  html.mobile-experience-ready .hero-scope-grid,
  html.mobile-experience-ready .hero-scope-node,
  html.mobile-experience-ready .hero-agent-module,
  html.mobile-experience-ready .mobile-station,
  html.mobile-experience-ready .mobile-station-copy,
  html.mobile-experience-ready .mobile-service-stack,
  html.mobile-experience-ready .mobile-service-card,
  html.mobile-experience-ready .quote-terminal,
  html.mobile-experience-ready .quote-mobile-catalog,
  html.mobile-experience-ready .quote-mobile-service {
    transform-style: flat !important;
    perspective: none !important;
    backface-visibility: visible !important;
    will-change: auto !important;
  }
}

@media (max-width: 374px) {
  .hero-scope-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-hud-module.hud-frame,
  .hero-hud-module.hud-frame::before,
  .hero-scope-core::before {
    animation: none !important;
  }
}


/* r15 wordmark alignment correction: match custom red-square i to the normal i and align the top markers horizontally */
.hud-wordmark-i{
  position:relative;
  display:inline-block;
  width:.212em;
  height:.71em;
  margin-inline:.004em .006em;
  transform:translateY(-.005em);
}
.hud-wordmark-i:before{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:.148em;
  height:.495em;
  background:currentColor;
  transform:translateX(-50%);
}
.hud-wordmark-i:after{
  content:"";
  position:absolute;
  left:50%;
  top:-.03em;
  width:.138em;
  height:.138em;
  background:#c7191f;
  box-shadow:0 0 .055em rgba(199,25,31,.48);
  transform:translateX(-50%);
}

/* FamiliA | r17 CSS-safe | ajustes localizados verificados
   Mantiene la interfaz móvil hasta el breakpoint lg, completa movimiento
   reducido y unifica el foco visible sin modificar layout ni animaciones normales. */

/* El bundle activa md:flex/md:hidden desde 768px, pero la experiencia móvil y
   sus defensas permanecen vigentes hasta 1023px. Este override evita que la
   navegación de escritorio se recorte en tabletas y ventanas estrechas. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header > div > .md\:flex {
    display: none !important;
  }

  .site-header > div > .hud-menu-trigger {
    display: inline-flex !important;
  }

  .site-header > .mobile-menu-shell {
    display: block !important;
  }
}

/* r16 restablece 1.05s en las piezas internas de la intro después de la regla
   general de movimiento reducido. La anulación final recupera la resolución
   prácticamente inmediata sin tocar la duración de la experiencia normal. */
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  html.mobile-experience-ready .site-intro-shadow,
  html.mobile-experience-ready .site-intro-beam,
  html.mobile-experience-ready .site-intro-mark {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }

  /* La regla móvil del HUD usa mayor especificidad y animation !important;
     se cancela aquí para impedir que el panel comience casi transparente. */
  html.mobile-experience-ready .hero-hud-module.hud-frame {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Indicador de teclado: outline no participa en el flujo, no altera el layout
   y deja intactos los box-shadow y ráfagas HUD existentes. */
:where(
  a[href],
  button,
  input,
  textarea,
  select,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid #5ffff0;
  outline-offset: 3px;
}