/* ============================================================
 * Innovación Digital — layout.css
 * Infraestructura visual de la página: navbar, hero,
 * shells de sección, íconos de sección, clientes,
 * proceso, contacto, footer y loader.
 *
 * CRITERIO DE NAMING:
 *   · Infraestructura de layout sin equivalente Bootstrap →
 *     prefijo .fxa- justificado (.fxa-navbar, .fxa-hero, .fxa-section, …)
 *   · Componentes que sí existen en Bootstrap (.navbar, .nav-link,
 *     .navbar-toggler) → override directo sin duplicar clases.
 *   · Todos los valores vienen de tokens en root.css.
 *   · Sin ningún color, tamaño o timing hardcodeado acá.
 *
 * ORDEN DE CARGA:
 *   1. bootstrap.css  2. root.css  3. base.css
 *   4. layout.css (este archivo)
 *   5. components.css  6. customs.css
 * ============================================================ */


/* ============================================================
 * NAVBAR
 * ============================================================ */

.fxa-navbar {
  background: var(--fxa-navbar-bg);
  backdrop-filter: blur(var(--fxa-navbar-blur));
  -webkit-backdrop-filter: blur(var(--fxa-navbar-blur));
  border-bottom: var(--fxa-border-width) solid var(--fxa-navbar-border);
  padding: 0.8rem 0;
  height: var(--fxa-navbar-height);
}

.fxa-navbar .navbar-brand img {
  height: 55px;
  filter: drop-shadow(0 0 8px rgba(var(--fxa-primary-rgb), 0.3));
}

/* ----------------------------------------------------------
 * Nav links — override de .nav-link en contexto navbar
 * ---------------------------------------------------------- */
.fxa-navbar .nav-link {
  color: var(--fxa-nav-link-color);
  font-weight: var(--fxa-font-weight-medium);
  font-size: var(--fxa-font-size-sm);
  letter-spacing: 0.04em;
  padding: 0.38rem 0.85rem;
  border-radius: var(--fxa-border-radius-sm);
  transition: color var(--fxa-transition-fast), background var(--fxa-transition-fast);
}

.fxa-navbar .nav-link:hover,
.fxa-navbar .nav-link.active {
  color: var(--fxa-nav-link-hover-color);
  background: var(--fxa-nav-link-hover-bg);
}

/* ----------------------------------------------------------
 * Botones de idioma — sin equivalente Bootstrap
 * ---------------------------------------------------------- */
.fxa-lang-btn {
  background: transparent;
  border: var(--fxa-border-width) solid var(--fxa-lang-btn-border);
  color: var(--fxa-lang-btn-color);
  font-size: 0.7rem;
  font-weight: var(--fxa-font-weight-bold);
  font-family: var(--fxa-font-family-mono);
  letter-spacing: 0.1em;
  padding: 0.26rem 0.58rem;
  border-radius: 5px;
  cursor: pointer;
  transition:
    border-color var(--fxa-transition-fast),
    color        var(--fxa-transition-fast),
    background   var(--fxa-transition-fast);
}

.fxa-lang-btn:hover,
.fxa-lang-btn.active-lang {
  border-color: var(--fxa-lang-btn-active-border);
  color: var(--fxa-lang-btn-active-color);
  background: var(--fxa-lang-btn-active-bg);
}


/* ----------------------------------------------------------
 * Hamburguesa tech — override de .navbar-toggler de Bootstrap
 * Sin equivalente Bootstrap para este patrón específico.
 * Tres barras de ancho escalonado, animación X al abrir,
 * scan-line al hacer click, glow en hover.
 * ---------------------------------------------------------- */
.navbar-toggler {
  border: var(--fxa-border-width) solid var(--fxa-ham-border);
  border-radius: var(--fxa-border-radius);
  background: var(--fxa-ham-bg);
  padding: 0;
  width: 44px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition:
    border-color var(--fxa-transition-base),
    box-shadow   var(--fxa-transition-base);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.navbar-toggler:hover {
  border-color: var(--fxa-ham-hover-border);
  box-shadow: 0 0 10px var(--fxa-ham-glow) !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 2px var(--fxa-ham-glow) !important;
}

/* Ocultar el ícono nativo de Bootstrap */
.navbar-toggler-icon { display: none; }

/* Scan-line: corre de arriba a abajo al hacer click */
.navbar-toggler::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom,
    transparent 40%,
    var(--fxa-ham-scan-color) 50%,
    transparent 60%);
  pointer-events: none;
}

.navbar-toggler.fxa-scanning::after {
  animation: fxa-ham-scan 0.6s linear;
}

/* Contenedor de barras */
.fxa-ham-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  width: 22px;
}

/* Barra individual */
.fxa-ham-bar {
  display: block;
  height: 2px;
  background: var(--fxa-ham-color);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform  var(--fxa-transition-slow),
    opacity    var(--fxa-transition-fast),
    width      0.32s ease,
    box-shadow var(--fxa-transition-fast);
}

/* Anchos escalonados — apariencia tech */
.fxa-ham-bar:nth-child(1) { width: var(--fxa-ham-bar-1-width); }
.fxa-ham-bar:nth-child(2) { width: var(--fxa-ham-bar-2-width); transition-delay: 0.04s; }
.fxa-ham-bar:nth-child(3) { width: var(--fxa-ham-bar-3-width); transition-delay: 0.08s; }

/* Glow en hover */
.navbar-toggler:hover .fxa-ham-bar {
  box-shadow: 0 0 6px rgba(var(--fxa-primary-rgb), 0.7);
}

/* Estado abierto → X */
.navbar-toggler[aria-expanded="true"] .fxa-ham-bar:nth-child(1) {
  width: 22px;
  transform: translateY(7px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .fxa-ham-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar-toggler[aria-expanded="true"] .fxa-ham-bar:nth-child(3) {
  width: 22px;
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
 * HERO
 * ============================================================ */

.fxa-hero {
  min-height: var(--fxa-hero-min-height);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 7rem 0 5rem;
  background: var(--fxa-bg-section-a);
}

/* Grid de fondo */
.fxa-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--fxa-hero-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--fxa-hero-grid-color) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 100%);
}

/* Glow ambiental */
.fxa-hero-glow {
  position: absolute;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, var(--fxa-hero-glow-color) 0%, transparent 70%);
  top: -80px;
  right: -80px;
  pointer-events: none;
}

/* Tag "Soluciones digitales para PyMEs" */
.fxa-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--fxa-hero-tag-bg);
  border: var(--fxa-border-width) solid var(--fxa-hero-tag-border);
  color: var(--fxa-hero-tag-color);
  font-size: 0.77rem;
  font-weight: var(--fxa-font-weight-semibold);
  font-family: var(--fxa-font-family-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.33rem 0.85rem;
  border-radius: var(--fxa-border-radius-pill);
  margin-bottom: 1.4rem;
}

/* Punto parpadeante antes del tag */
.fxa-hero-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--fxa-hero-tag-color);
  border-radius: 50%;
  animation: fxa-blink var(--fxa-anim-blink-duration) ease-in-out infinite;
  flex-shrink: 0;
}

/* Título hero */
.fxa-hero-title {
  font-size: clamp(2.7rem, 5.5vw, 4.8rem);
  font-weight: var(--fxa-font-weight-bold);
  line-height: 1.06;
  margin-bottom: 1.4rem;
}

/* Palabra de acento dentro del título */
.fxa-hero-accent {
  color: var(--fxa-hero-accent-color);
}

/* Subtítulo */
.fxa-hero-sub {
  font-size: var(--fxa-font-size-lg);
  color: var(--fxa-muted-color);
  line-height: 1.72;
  max-width: 490px;
  margin-bottom: 2.4rem;
}

/* Stats row */
.fxa-hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3.2rem;
  padding-top: 2.4rem;
  border-top: var(--fxa-border-width) solid var(--fxa-border-color);
}

.fxa-stat-num {
  font-family: var(--fxa-font-family-mono);
  font-size: 1.9rem;
  font-weight: var(--fxa-font-weight-bold);
  color: var(--fxa-hero-stat-num-color);
  line-height: 1;
}

.fxa-stat-label {
  font-size: 0.75rem;
  color: var(--fxa-hero-stat-label-color);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ----------------------------------------------------------
 * Logo flotante
 * ---------------------------------------------------------- */
.fxa-logo-wrap {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  margin: 0 auto;
  background: radial-gradient(circle, var(--fxa-logo-wrap-bg) 0%, transparent 70%);
  border: var(--fxa-border-width) solid var(--fxa-logo-wrap-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: fxa-float var(--fxa-anim-float-duration) ease-in-out infinite;
}

.fxa-logo-wrap img { width: 170px; }

.fxa-logo-orbit {
  position: absolute;
  inset: -26px;
  border: 1px dashed var(--fxa-logo-orbit-border);
  border-radius: 50%;
  animation: fxa-spin var(--fxa-anim-orbit-duration) linear infinite;
}

/* Punto sobre la órbita */
.fxa-logo-orbit::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--fxa-logo-dot-color);
  border-radius: 50%;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--fxa-logo-dot-glow);
}


/* ============================================================
 * SECCIONES — shell genérico
 * ============================================================ */

.fxa-section {
  padding: var(--fxa-section-padding-y) 0;
}

/* Fondos alternados */
.fxa-section-a { background: var(--fxa-bg-section-a); }
.fxa-section-b { background: var(--fxa-bg-section-b); }

/* Separador entre secciones */
.fxa-divider {
  height: var(--fxa-border-width);
  border: none;
  background: linear-gradient(90deg,
    transparent,
    var(--fxa-divider-color),
    transparent);
  margin: 0;
}

/* ----------------------------------------------------------
 * Header de sección (tag mono + título + subtítulo)
 * ---------------------------------------------------------- */
.fxa-section-tag {
  font-family: var(--fxa-section-tag-family);
  font-size: var(--fxa-section-tag-size);
  font-weight: var(--fxa-font-weight-medium);
  color: var(--fxa-section-tag-color);
  letter-spacing: var(--fxa-section-tag-spacing);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  display: block;
}

.fxa-section-title {
  font-size: clamp(1.85rem, 3.2vw, 2.7rem);
  font-weight: var(--fxa-font-weight-bold);
  margin-bottom: 0.9rem;
}

.fxa-section-sub {
  color: var(--fxa-muted-color);
  font-size: var(--fxa-font-size-base);
  line-height: 1.7;
  max-width: 540px;
}


/* ============================================================
 * SERVICIOS & POR QUÉ — íconos de sección
 * Sin equivalente Bootstrap — prefijo fxa- justificado.
 * ============================================================ */

/* Ícono cuadrado para service cards */
.fxa-service-icon {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: var(--fxa-primary-subtle);
  border: var(--fxa-border-width) solid rgba(var(--fxa-primary-rgb), 0.17);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--fxa-primary);
  margin-bottom: 1.1rem;
  transition:
    background     var(--fxa-transition-base),
    border-color   var(--fxa-transition-base);
}

.card:hover .fxa-service-icon {
  background: rgba(var(--fxa-primary-rgb), 0.14);
  border-color: rgba(var(--fxa-primary-rgb), 0.38);
}

/* Ícono para why cards */
.fxa-why-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--fxa-primary-subtle);
  border: var(--fxa-border-width) solid rgba(var(--fxa-primary-rgb), 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--fxa-primary);
}

.fxa-why-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}


/* ============================================================
 * CLIENTES — browser chrome mock
 * Sin equivalente Bootstrap — prefijo fxa- justificado.
 * ============================================================ */

/* Barra de browser en la parte superior de la card */
.fxa-browser-bar {
  background: var(--fxa-browser-bg);
  border-bottom: var(--fxa-border-width) solid var(--fxa-browser-border);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  height: 26px;
  flex-shrink: 0;
}

.fxa-b-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fxa-b-dot-r { background: var(--fxa-browser-dot-r); }
.fxa-b-dot-y { background: var(--fxa-browser-dot-y); }
.fxa-b-dot-g { background: var(--fxa-browser-dot-g); }

.fxa-b-url {
  margin-left: 6px;
  flex: 1;
  background: var(--fxa-browser-url-bg);
  border-radius: 4px;
  height: 14px;
  font-size: 0.6rem;
  font-family: var(--fxa-font-family-mono);
  color: var(--fxa-browser-url-color);
  padding: 0 7px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

/* Screenshot */
.fxa-screenshot-wrap {
  position: relative;
  height: var(--fxa-screenshot-height);
  overflow: hidden;
}

.fxa-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--fxa-screenshot-filter);
  transition:
    transform var(--fxa-transition-base),
    filter    var(--fxa-transition-base);
}

.card:hover .fxa-screenshot {
  transform: scale(1.05);
  filter: var(--fxa-screenshot-hover-filter);
}

/* Overlay con botón "Ver sitio" */
.fxa-screenshot-overlay {
  position: absolute;
  inset: 0;
  background: var(--fxa-client-overlay-bg);
  opacity: 0;
  transition: opacity var(--fxa-transition-base);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card:hover .fxa-screenshot-overlay { opacity: 1; }

.fxa-visit-btn {
  background: var(--fxa-visit-btn-bg);
  color: var(--fxa-visit-btn-color);
  font-weight: var(--fxa-font-weight-bold);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem;
  border-radius: var(--fxa-border-radius);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transform: translateY(10px);
  transition: transform var(--fxa-transition-base);
}

.card:hover .fxa-visit-btn { transform: translateY(0); }


/* ============================================================
 * PROCESO
 * ============================================================ */

.fxa-process-num {
  font-family: var(--fxa-process-num-family);
  font-size: 0.7rem;
  font-weight: var(--fxa-font-weight-medium);
  color: var(--fxa-process-num-color);
  letter-spacing: 0.1em;
  margin-bottom: 0.7rem;
  display: block;
}

.fxa-process-icon {
  font-size: 1.5rem;
  color: var(--fxa-process-icon-color);
  margin-bottom: 0.85rem;
  display: block;
}

.fxa-process-connector {
  position: absolute;
  top: 50%;
  right: -1.4rem;
  transform: translateY(-50%);
  color: var(--fxa-process-connector-color);
  font-size: 1rem;
}


/* ============================================================
 * CONTACTO — info lateral
 * ============================================================ */

.fxa-cinfo-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--fxa-cinfo-icon-bg);
  border: var(--fxa-border-width) solid var(--fxa-cinfo-icon-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fxa-cinfo-icon-color);
  font-size: 0.95rem;
}

.fxa-cinfo-label {
  font-size: 0.7rem;
  color: var(--fxa-cinfo-label-color);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.1rem;
}

.fxa-cinfo-value {
  font-size: 0.9rem;
  font-weight: var(--fxa-font-weight-medium);
}


/* ============================================================
 * FOOTER
 * ============================================================ */

.fxa-footer {
  background: var(--fxa-footer-bg);
  border-top: var(--fxa-border-width) solid var(--fxa-footer-border);
  padding: 2.2rem 0;
}

.fxa-footer-copy {
  font-size: 0.78rem;
  color: var(--fxa-footer-color);
  margin: 0;
}

.fxa-footer-links a {
  font-size: 0.78rem;
  color: var(--fxa-footer-link-color);
  margin-left: 1.4rem;
  transition: color var(--fxa-transition-fast);
}

.fxa-footer-links a:hover {
  color: var(--fxa-footer-link-hover);
}


/* ============================================================
 * LOADER
 * ============================================================ */

.fxa-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--fxa-loader-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.1rem;
  transition: opacity 0.45s ease;
}

.fxa-loader-out {
  opacity: 0;
  pointer-events: none;
}

.fxa-loader-track {
  width: 180px;
  height: 2px;
  background: var(--fxa-loader-track-bg);
  border-radius: 2px;
  overflow: hidden;
}

.fxa-loader-prog {
  height: 100%;
  width: 0;
  background: var(--fxa-loader-bar-color);
  border-radius: 2px;
  animation: fxa-load-progress var(--fxa-anim-loader-duration)
             cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fxa-loader-text {
  font-family: var(--fxa-font-family-mono);
  font-size: 0.68rem;
  color: var(--fxa-loader-text-color);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}


/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media (max-width: 767px) {
  .fxa-hero-stats {
    flex-direction: column;
    gap: 1.2rem;
  }

  .fxa-logo-wrap {
    width: 220px;
    height: 220px;
  }

  .fxa-logo-wrap img { width: 115px; }

  .fxa-process-connector {
    display: none !important;
  }
}