/* =========================================================
   FOOTER — fluido y responsive
   ========================================================= */
.footer {
   --footer-pad: clamp(24px, 8vw, 150px);
   /* padding lateral que escala solo */
   --cyan: #51cee0;

   position: relative;
   background:
      radial-gradient(ellipse 60% 50% at 15% 0%, rgba(81, 206, 224, 0.08), transparent 70%),
      #091114;
   color: #fff;
   padding: clamp(48px, 8vw, 80px) 0 0;
   font-family: 'Inter', sans-serif;
   border-top: 0;
   overflow-x: clip;
}

/* línea de luz en vez del borde blanco */
.footer::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--cyan), transparent);
   opacity: 0.6;
}

/* ---------- Grid principal ---------- */
.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   gap: clamp(28px, 4vw, 48px);
   margin-bottom: clamp(36px, 6vw, 60px);
}

.footer-grid>* {
   min-width: 0;
}

/* ---------- Marca ---------- */
.footer-logo-link {
   display: inline-block;
   margin: -50px 0 -50px;
   transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.footer-logo-link:hover {
   transform: scale(1.03);
}

.footer-main-logo {
   height: 120px;
   width: auto;
   max-width: 100%;
   object-fit: contain;
   filter: brightness(0) invert(1);
}

.tagline {
   font-size: 0.85rem;
   font-weight: 300;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.78);
   margin-bottom: 25px;
   max-width: 38ch;
}

.alliance-box {
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px 20px;
   margin-top: 15px;
}

.alliance-box .footer-partner-logo {
   margin-bottom: 0 !important;
   height: 40px;
   width: auto;
   max-width: 100%;
   object-fit: contain;
}

.footer-partner-logo {
   height: 50px;
   filter: grayscale(1) brightness(1);
   margin-bottom: 10px;
   opacity: 0.8;
   transition: opacity 0.3s, filter 0.3s;
}

.footer-partner-logo:hover {
   opacity: 1;
   filter: none;
}

/* ---------- Columnas de links ---------- */
.footer-column h4 {
   color: #fff;
   font-size: 0.95rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   margin: 0 0 clamp(18px, 3vw, 32px);
   padding-bottom: 12px;
   position: relative;
}

/* acento bajo el título */
.footer-column h4::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 28px;
   height: 2px;
   border-radius: 2px;
   background: linear-gradient(90deg, var(--cyan), transparent);
}

.footer-column ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.footer-column ul li {
   margin-bottom: 12px;
}

.footer-column ul li a {
   display: inline-block;
   color: rgba(255, 255, 255, 0.85);
   text-decoration: none;
   font-size: 0.85rem;
   letter-spacing: -0.2px;
   padding: 2px 0;
   transition: color 0.3s, transform 0.3s;
}

.footer-column ul li a:hover {
   color: var(--cyan);
   transform: translateX(4px);
}

/* ================= BARRA INTERMEDIA ================= */
.footer-bottom-bar {
   background-color: #091113;
   color: #fff;
   padding: 40px var(--footer-pad);
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 24px;
   width: 100%;
   box-sizing: border-box;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-right {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 20px;
}

/* ---------- Redes ---------- */
.social-links {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   /* ya no desborda en pantallas chicas */
   align-items: center;
   gap: 12px;
}

.social-icon {
   width: 40px;
   height: 40px;
   background-color: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   text-decoration: none;
   flex-shrink: 0;
   transition: background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.social-icon:hover,
.social-icon:focus-visible {
   background-color: #7ce0f2;
   color: #062831;
   transform: translateY(-3px);
   box-shadow: 0 8px 20px -6px rgba(124, 224, 242, 0.6);
   outline: none;
}

.social-icon svg {
   width: 18px;
   height: 18px;
}

/* ================= AVISO LEGAL ================= */
.legal-disclaimer-container {
   background-color: #091113;
   color: rgba(255, 255, 255, 0.68);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: clamp(10.5px, 1.4vw, 11.5px);
   font-weight: 300;
   line-height: 1.6;
   padding: clamp(28px, 5vw, 48px) var(--footer-pad);
   width: 100%;
   box-sizing: border-box;
   text-align: left;
   overflow-wrap: anywhere;
   /* evita que textos largos rompan el ancho */
}

.legal-disclaimer-container p {
   margin: 0 0 10px;
   padding: 0;
   letter-spacing: -0.05px;
}

.legal-disclaimer-container p:last-child {
   margin-bottom: 0;
}

/* ================= BARRA FINAL ================= */
.footer-bottom {
   background: #fff;
   padding: 20px var(--footer-pad);
   padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
   /* iPhone con barra inferior */
   text-align: center;
}

.footer-bottom p {
   margin: 0;
   font-size: 0.75rem;
   color: #000;
}

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

/* Tablet: la marca ocupa todo el ancho arriba, links en 3 columnas */
@media (max-width: 1024px) {
   .footer-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .footer-grid> :first-child {
      grid-column: 1 / -1;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }

   .tagline {
      max-width: 60ch;
   }
}

/* Móvil grande */
@media (max-width: 768px) {
   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 32px 20px;
   }

   .footer-logo-link {
      margin: -40px 0 -40px;
   }

   .footer-main-logo {
      height: 100px;
   }

   .footer-bottom-bar {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 24px;
      padding: 32px var(--footer-pad);
   }

   .footer-right,
   .footer-copyright {
      align-items: center;
      text-align: center;
   }

   .social-links {
      justify-content: center;
   }

   .social-icon {
      width: 44px;
      height: 44px;
   }

   /* objetivo táctil cómodo */
}

/* Móvil chico */
@media (max-width: 480px) {
   .footer-main-logo {
      height: 84px;
   }

   .footer-logo-link {
      margin: -32px 0 -32px;
   }

   .footer-column h4 {
      font-size: 0.85rem;
   }

   .footer-column ul li {
      margin-bottom: 10px;
   }

   .footer-column ul li a {
      font-size: 0.85rem;
      padding: 4px 0;
      /* más área para el dedo */
   }

   .alliance-box {
      gap: 14px;
   }

   .alliance-box .footer-partner-logo {
      height: 34px;
   }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {

   .footer *,
   .footer *::before {
      transition: none !important;
   }
}