/* assets/footer.css */

.app-footer {
   position: relative;
   overflow: hidden;
   background: #0a0a0a;
   border-top: 1px solid rgba(35, 53, 84, 0.65);
}

/* BG image detrás de TODO el footer */
.app-footer::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: url("/footer_bg.webp");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

   /* Ajusta aquí el “peso” del fondo */
   opacity: 0.18;
   filter: brightness(0.55) saturate(0.85) contrast(1.05);

   pointer-events: none;
   z-index: 0;
}

.app-footer {
   --footer-pad-x: 0.6rem; /* cambia este valor si quieres más/menos borde */
}

/* Franja superior (más clara) */
.footer-topbar {
   background: rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   padding: 0.15rem var(--footer-pad-x);
}

/* Misma “caja” que el contenido del footer */
.footer-topbar-inner {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0.45rem; /* esto controla lo “lejos” del nombre */
   min-height: 56px; /* altura visual estable */
}

/* Este wrapper ya NO es “texto”, es solo contenedor del logo */
.footer-topbar-name {
   display: flex;
   align-items: center;
   line-height: 0;
}

/* Como reutilizaste footer-built arriba, le quitamos el margin-top SOLO en topbar */
.footer-topbar .footer-built {
   margin-top: 0;
   color: rgba(230, 241, 255, 0.92);
   font-weight: 600;
   letter-spacing: 0.2px;
}

/* Contenido principal */
.footer-main {
   padding: 2.1rem var(--footer-pad-x) 1.6rem; /* mismo borde que el topbar */
}

.footer-inner {
   width: 100%;
   max-width: 900px; /* más angosto que el sitio */
   margin: 0 auto;
   position: relative;
   z-index: 1;
}

/* Grid: izquierda + figura a la derecha (md+) */
.footer-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   align-items: start;
}

@media (min-width: 768px) {
   .footer-grid {
      grid-template-columns: 1fr auto; /* nunca abajo */
      gap: 2.4rem;
   }
}

.footer-title {
   color: rgba(230, 241, 255, 0.9);
   font-weight: 600;
   font-size: 1rem;
   letter-spacing: 0.2px;
}

.footer-built {
   color: rgba(136, 146, 176, 0.95);
   font-size: 0.92rem;
   margin-top: 0.35rem;
}

.footer-links {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.25rem 1.6rem;
   margin-top: 1.55rem;
}

@media (min-width: 768px) {
   .footer-links {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2rem;
      margin-top: 1.7rem;
   }
}

.footer-col-title {
   margin: 0 0 0.45rem 0;
   font-size: 0.85rem;
   font-weight: 600;
   color: rgba(230, 241, 255, 0.68);
   letter-spacing: 0.02em;
}

/* Ojo: aunque uses VStack, esto asegura look consistente */
.footer-links a,
.footer-links span {
   color: rgba(136, 146, 176, 0.95);
   font-size: 0.92rem;
   opacity: 0.95;
   text-decoration: none;
   display: inline-block;
   transition:
      opacity 160ms ease,
      color 160ms ease,
      transform 160ms ease,
      padding-left 160ms ease;
}

.footer-links a:hover {
   color: #ffffff;
   opacity: 1;
   transform: translateX(4px);
   padding-left: 2px;
}

.footer-nav-link {
   color: rgba(136, 146, 176, 0.95);
   text-decoration: none;
   display: inline-block;
   transition:
      color 160ms ease,
      transform 160ms ease,
      padding-left 160ms ease;
}

.footer-nav-link:hover {
   color: #ffffff;
   transform: translateX(4px);
   padding-left: 2px;
}

.footer-bottom {
   margin-top: 1.6rem;
   padding-top: 1.1rem;
   border-top: 1px solid rgba(35, 53, 84, 0.65);
   color: rgba(136, 146, 176, 0.95);
   font-size: 0.9rem;
}

/* ===== Imagen (md+), sin borde, flotando y opaca por defecto ===== */

.footer-figure {
   display: none; /* initial: no aparece */
}

@media (min-width: 768px) {
   .footer-figure {
      display: block;
      justify-self: end;
      align-self: start;
      position: relative;
      z-index: 2;
   }
}

/* Flotación sutil */
.footer-float {
   display: inline-block;
   animation: footer-float 5.2s ease-in-out infinite;
}

.footer-float:hover {
   animation-play-state: paused;
}

@keyframes footer-float {
   0%,
   100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-10px);
   }
}

/* Imagen: apagada por defecto (sin “marco” rectangular) */
.footer-img {
   display: block;
   width: 380px;
   height: auto;

   background: transparent;
   border-radius: 0;
   outline: none;

   /* Estado opaco */
   opacity: 0.82;
   filter: brightness(0.65) saturate(0.75) contrast(1.10) grayscale(0.0)
      drop-shadow(0 26px 75px rgba(0, 0, 0, 0.55));

   transition:
      filter 220ms ease,
      transform 220ms ease,
      opacity 220ms ease;
}

@media (min-width: 1024px) {
   .footer-img {
      width: 420px;
   }
}

/* Hover: color real */
.footer-float:hover .footer-img {
   opacity: 1;
   transform: translateY(-4px);
   filter: brightness(0.98) saturate(1.06) contrast(1.02)
      drop-shadow(0 34px 95px rgba(0, 0, 0, 0.62));
}

@media (prefers-reduced-motion: reduce) {
   .footer-float {
      animation: none;
   }
   .footer-img {
      transition: none;
   }
}

/* ==========================
   TOPBAR ALIGN (OVERRIDE FINAL)
   ========================== */

.app-footer {
   --footer-pad-x: 1.5rem; /* mismo borde que el contenido inferior */
}

/* Alinea topbar y contenido inferior al mismo borde */
.app-footer .footer-topbar {
   padding: 0.15rem var(--footer-pad-x) !important;
}

.app-footer .footer-main {
   padding-left: var(--footer-pad-x) !important;
   padding-right: var(--footer-pad-x) !important;
}

/* Logo + nombre pegados y a la izquierda (NO space-between) */
.app-footer .footer-topbar-inner {
   width: 100%;
   max-width: 900px;
   margin: 0 auto;

   display: flex;
   align-items: center;
   justify-content: flex-start !important;
   gap: 0.7rem;
}

/* Wrapper del logo (sin baseline gap) */
.app-footer .footer-topbar-logo {
   display: flex;
   align-items: center;
   line-height: 0;
   margin: 0;
   padding: 0;
}

/* Footer logo color */
.app-footer .footer-topbar-logo .cno-logo {
   color: var(--text-footer);
}

/* Texto del nombre (sin margen raro) */
.app-footer .footer-topbar-title {
   margin: 0 !important;
   padding: 0 !important;
   line-height: 1;
   color: rgba(230, 241, 255, 0.92);
   font-weight: 600;
   letter-spacing: 0.2px;
}