/* ============================================================
       FOOTER PRINCIPAL
    ============================================================ */
    .footer-plycem {
      background-color: #f8f8f8;
      border-top: 1px solid #e2e8f0;
      padding: 3rem 0 1.5rem 0;
      margin-top: auto;
      position: relative;
      overflow-x: clip;
    }

    /* Logo decorativo grande en la esquina inferior derecha */
    .footer-plycem::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 570px;
      height: 570px;
      background-image: url('/dist/bootstrap-5.3.8-dist/img/Logo-Footer.svg');
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: contain;
      opacity: 0.7;
      pointer-events: none;
      z-index: 0;
    }


    /* ============================================================
       CONTENEDOR INTERNO
       - z-index: 1 para quedar encima del logo decorativo
    ============================================================ */
    .footer-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
      position: relative;
      z-index: 1;
    }


    /* ============================================================
       GRID DE COLUMNAS
       - 5 columnas iguales en desktop
    ============================================================ */
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1.8rem;
      align-items: start;
    }


    /* ============================================================
       TITULOS DE COLUMNA
       - h5: titulo normal
       - h6: variante en mayusculas para "Contactanos"
    ============================================================ */
    .footer-col h5,
    .footer-col h6 {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 1.25rem;
      color: #1f2937;
      letter-spacing: -0.2px;
      display: inline-block;
    }

    .footer-col h6 {
      font-size: 0.95rem;
      text-transform: uppercase;
      font-weight: 700;
      color: #2c3e4e;
      letter-spacing: 0.5px;
    }


    /* ============================================================
       LISTAS DE ENLACES
    ============================================================ */
    .footer-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-list li {
      margin-bottom: 0.60rem;
    }

    .footer-list a {
      text-decoration: none;
      color: #4b5563;
      font-size: 0.9rem;
      transition: color 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .footer-list a:hover { color: #111; }

    /* Fila extra de info dentro de la lista */
    .plycem-row {
      margin-top: 1.2rem;
      padding-top: 1rem;
    }


    /* ============================================================
       LOGOS (Plycem y Elementia)
    ============================================================ */
    .logo-elementia {
      display: flex;
      align-items: flex-start;
    }

    .logo-elementia .logo-svg {
      width: 120px;
      height: auto;
      margin-top: -4px;
    }

    .logo-plycem .logo-svg {
      width: 150px;
      height: auto;
      padding-top: 15px;
    }


    /* ============================================================
       BARRA INFERIOR (copyright + logo Elementia)
    ============================================================ */
    .footer-bottom {
      margin-top: 2.5rem;
      padding-top: 1.8rem;
      border-top: 1px solid #e9ecef;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      font-size: 0.8rem;
      color: #6c757d;
      position: relative;
      z-index: 1;
    }


    /* ============================================================
       RESPONSIVE - 1200px
       Reduce el logo decorativo de fondo
    ============================================================ */
    @media (max-width: 1200px) {
      .footer-plycem::after {
        width: 450px;
        height: 450px;
        opacity: 0.6;
      }
    }


    /* ============================================================
       RESPONSIVE - 992px (tablet)
       Grid pasa a 2 columnas, bottom en columna
    ============================================================ */
    @media (max-width: 992px) {
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
      }

      .footer-container { padding: 0 1.5rem; }

      .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
      }

      .footer-plycem::after {
        width: 300px;
        height: 300px;
        opacity: 0.5;
      }
    }


    /* ============================================================
       RESPONSIVE - 768px (movil grande)
       Logo decorativo mas pequeno
    ============================================================ */
    @media (max-width: 768px) {
      .footer-plycem::after {
        width: 200px;
        height: 200px;
        opacity: 0.4;
        bottom: 20px;
      }
    }


    /* ============================================================
       RESPONSIVE - 640px (movil)
       Grid a 1 columna, separadores entre columnas
    ============================================================ */
    @media (max-width: 640px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
      }

      /* Separador entre columnas, excepto primera y ultima */
      .footer-col {
        border-bottom: 1px solid #f0f2f5;
        padding-bottom: 1rem;
      }

      .footer-col:first-child,
      .footer-col:last-child {
        border-bottom: none;
      }

      .whatsapp-link { margin-bottom: 0.5rem; }

      .footer-plycem::after {
        width: 150px;
        height: 150px;
        opacity: 0.35;
        bottom: 10px;
      }
    }