/**
 * Footer Component Styles - REFACTORED v3.0
 * 
 * Orden específico para mobile según imagen:
 * 1. SÍGUENOS EN NUESTRAS REDES + íconos (centrado, horizontal)
 * 2. Enlaces de navegación (centrado, vertical)
 * 3. AVISO DE PRIVACIDAD | © 2025 PLANIGRUPO (centrado)
 * 4. Logo BMV (centrado)
 * 
 * @version 3.0.0
 * @date 2026-01-27
 */

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

:root {
  /* Espaciado */
  --footer-padding: clamp(1rem, 4vw, 2rem);
  --footer-gap: clamp(1rem, 3vw, 1.5rem);
  --footer-gap-small: clamp(0.5rem, 2vw, 1rem);
  
  /* Colores */
  --footer-bg: #F5F3F1;
  --footer-text: #545859;
  --footer-text-dark: #333;
  --footer-hover: #0096A9;
  
  /* Tipografía */
  --footer-font-primary: 'Raleway', sans-serif;
  --footer-font-secondary: 'Barlow Condensed', sans-serif;
  --footer-font-size-base: clamp(8px, 1.8vw, 10px);
  --footer-font-size-small: clamp(7px, 1.5vw, 9px);
  --footer-font-size-social: clamp(11px, 2vw, 14px);
  
  /* Dimensiones */
  --footer-icon-size: clamp(20px, 3vw, 24px);
  --footer-logo-height: clamp(30px, 4vw, 35px);
}

/* ============================================
   BASE FOOTER LAYOUT
   ============================================ */

.footer {
  background-color: var(--footer-bg);
  padding: var(--footer-padding);
  text-align: center;
  container-type: inline-size;
}

/* Desktop Layout - 3 columnas */
@container (min-width: 901px) {
  .footer {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: "social navigation brand";
    align-items: center;
    gap: var(--footer-gap);
    text-align: left;
  }
  
  .footer__social {
    grid-area: social;
    justify-self: start;
    /* Cambio solicitado: Layout vertical con título arriba e iconos abajo, todo centrado */
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .footer__social-title {
    text-align: left;  /* Título alineado a la izquierda */
    align-self: flex-start;  /* Alinear el título a la izquierda del contenedor */
  }
  
  .footer__social-icons {
    justify-content: center;
  }
  
  .footer__navigation {
    grid-area: navigation;
    justify-self: center;
  }
  
  .footer__brand {
    grid-area: brand;
    justify-self: end;
  }
}

/* Tablet Layout - 2 filas */
@container (min-width: 601px) and (max-width: 900px) {
  .footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "social brand"
      "navigation navigation";
    gap: var(--footer-gap);
    align-items: center;
  }
  
  .footer__social {
    grid-area: social;
    justify-self: center;
  }
  
  .footer__navigation {
    grid-area: navigation;
    justify-self: center;
  }
  
  .footer__brand {
    grid-area: brand;
    justify-self: center;
  }
}

/* Mobile Layout - Orden específico según imagen */
@container (max-width: 600px) {
  .footer {
    display: flex;
    flex-direction: column;
    gap: var(--footer-gap);
    align-items: center;
    text-align: center;
  }
  
  /* Orden específico */
  .footer__social {
    order: 1;
  }
  
  .footer__navigation {
    order: 2;
  }
  
  .footer__brand {
    order: 3;
  }
}

/* ============================================
   SOCIAL SECTION
   ============================================ */

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--footer-gap-small);
}

.footer__social-title {
  color: var(--footer-text-dark);
  font-family: var(--footer-font-secondary);
  font-size: var(--footer-font-size-social);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

.footer__social-icons {
  display: flex;
  gap: var(--footer-gap-small);
  align-items: center;
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--footer-icon-size);
  height: var(--footer-icon-size);
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--footer-text-dark);
}

.footer__social-icon:hover {
  transform: scale(1.1);
  color: var(--footer-hover);
}

.footer__social-icon i {
  font-size: var(--footer-font-size-social);
}

/* Mobile: Social en una línea horizontal centrada */
@container (max-width: 600px) {
  .footer__social {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .footer__social-title {
    margin-right: var(--footer-gap-small);
  }
}

/* ============================================
   NAVIGATION SECTION
   ============================================ */

.footer__navigation {
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap-small);
}

.footer__nav-links {
  display: flex;
  gap: var(--footer-gap);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.footer__nav-link {
  color: var(--footer-text);
  text-decoration: none;
  font-family: var(--footer-font-primary);
  font-size: var(--footer-font-size-base);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.footer__nav-link:hover {
  color: var(--footer-hover);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.footer__legal-link {
  color: var(--footer-text);
  text-decoration: none;
  font-family: var(--footer-font-primary);
  font-size: var(--footer-font-size-small);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.footer__legal-link:hover {
  color: var(--footer-hover);
}

.footer__legal-text {
  color: var(--footer-text);
  font-family: var(--footer-font-primary);
  font-size: var(--footer-font-size-small);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

/* Mobile: Navigation en línea horizontal como en la imagen */
@container (max-width: 600px) {
  .footer__navigation {
    gap: var(--footer-gap);
    width: 100%;
  }
  
  .footer__nav-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(4px, 1vw, 8px);
    justify-content: center;
    width: 100%;
    line-height: 1.2;
  }
  
  .footer__nav-link {
    font-size: clamp(7px, 1.8vw, 9px);
    padding: 2px 3px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .footer__legal {
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    margin-top: var(--footer-gap-small);
    flex-wrap: wrap;
  }
}

/* ============================================
   BRAND SECTION
   ============================================ */

.footer__brand {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer__logo {
  height: var(--footer-logo-height);
  width: auto;
  object-fit: contain;
}

/* ============================================
   FALLBACK MEDIA QUERIES
   ============================================ */

@supports not (container-type: inline-size) {
  /* Desktop */
  @media (min-width: 901px) {
    .footer {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-areas: "social navigation brand";
      text-align: left;
    }
  }
  
  /* Tablet */
  @media (min-width: 601px) and (max-width: 900px) {
    .footer {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 
        "social brand"
        "navigation navigation";
    }
  }
  
  /* Mobile */
  @media (max-width: 600px) {
    .footer {
      display: flex;
      flex-direction: column;
    }
    
    .footer__social {
      flex-direction: row;
      order: 1;
    }
    
    .footer__navigation {
      order: 2;
    }
    
    .footer__nav-links {
      flex-direction: row;
      flex-wrap: wrap;
      gap: clamp(4px, 1vw, 8px);
      justify-content: center;
    }
    
    .footer__nav-link {
      font-size: clamp(7px, 1.8vw, 9px);
      padding: 2px 3px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    
    .footer__legal {
      flex-direction: row;
      gap: 0.5rem;
      justify-content: center;
      margin-top: var(--footer-gap-small);
      flex-wrap: wrap;
    }
    
    .footer__brand {
      order: 3;
    }
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.footer__nav-link:focus,
.footer__legal-link:focus,
.footer__social-icon:focus {
  outline: 2px solid var(--footer-hover);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .footer__nav-link,
  .footer__legal-link,
  .footer__social-icon {
    transition: none;
  }
}