/* ==========================================================
   GEOPLOT — FOOTER SIMPLIFICADO

   Archivo:
   C:\MAV_2026\GEOPLOT SPA\Geoplot_Web\assets\css\footer.css
========================================================== */


/* ==========================================================
   01. VARIABLES DEL FOOTER
========================================================== */

:root {
  --footer-bg: #34424d;
  --footer-bg-dark: #2b3740;

  --footer-white: #ffffff;
  --footer-text: rgba(255, 255, 255, 0.92);
  --footer-text-soft: rgba(255, 255, 255, 0.72);

  --footer-line: rgba(255, 255, 255, 0.18);

  --footer-hover: #22c5f6;

  --footer-container: 1390px;

  --footer-radius: 10px;

  --footer-transition: 180ms ease;
}


/* ==========================================================
   02. CONTENEDOR GENERAL
========================================================== */

.site-footer {
  width: 100%;

  color: var(--footer-white);
  background: var(--footer-bg);

  font-family:
    "Inter",
    Arial,
    sans-serif;
}

.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer img {
  display: block;
  max-width: 100%;
}


/* ==========================================================
   03. BLOQUE PRINCIPAL
========================================================== */

.footer-simple {
  width: 100%;

  padding:
    54px 0 42px;

  background:
    linear-gradient(
      180deg,
      var(--footer-bg) 0%,
      var(--footer-bg-dark) 100%
    );
}

.footer-simple__container {
  width:
    min(
      calc(100% - 48px),
      var(--footer-container)
    );

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(300px, 1fr)
    minmax(360px, 1fr);

  gap:
    clamp(50px, 9vw, 150px);

  align-items: start;
}


/* ==========================================================
   04. BLOQUE IZQUIERDO
========================================================== */

.footer-simple__identity {
  min-width: 0;
}


/* MARCA */

.footer-simple__brand,
.footer-simple__brand:link,
.footer-simple__brand:visited {
  display: inline-flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 28px;

  color: var(--footer-white);

  text-decoration: none;
}

.footer-simple__brand:hover,
.footer-simple__brand:focus-visible {
  color: var(--footer-white);
}

.footer-simple__logo {
  width: 68px;
  height: 68px;

  flex: 0 0 68px;

  object-fit: contain;
  object-position: center;
}

.footer-simple__brand-copy {
  display: flex;

  flex-direction: column;

  min-width: 0;
}

.footer-simple__brand-name {
  color: var(--footer-white);

  font-size:
    clamp(1.6rem, 2.1vw, 2.2rem);

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.035em;
}

.footer-simple__tagline {
  margin-top: 6px;

  color: var(--footer-text);

  font-size: 0.8rem;

  font-weight: 700;

  line-height: 1.3;
}


/* CONTACTO */

.footer-simple__contact {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 8px;

  margin: 0;

  color: var(--footer-text);

  font-style: normal;
}

.footer-simple__contact p {
  max-width: 310px;

  margin: 0;

  color: var(--footer-text);

  font-size: 0.95rem;

  line-height: 1.55;
}

.footer-simple__contact a {
  position: relative;

  display: inline-flex;

  color: var(--footer-text);

  font-size: 0.95rem;

  font-weight: 500;

  line-height: 1.45;

  transition:
    color var(--footer-transition),
    transform var(--footer-transition);
}

.footer-simple__contact a:hover,
.footer-simple__contact a:focus-visible {
  color: var(--footer-hover);

  transform: translateX(2px);
}


/* COPYRIGHT */

.footer-simple__copyright {
  margin:
    30px 0 0;

  color: var(--footer-text-soft);

  font-size: 0.82rem;

  line-height: 1.4;
}


/* ==========================================================
   05. BLOQUE DERECHO
========================================================== */

.footer-simple__secondary {
  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 26px;

  padding-top: 8px;
}


/* ENLACES */

.footer-simple__links {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 0;
}

.footer-simple__links a {
  position: relative;

  display: inline-flex;

  align-items: center;

  color: var(--footer-text);

  font-size: 0.92rem;

  font-weight: 500;

  line-height: 1.4;

  transition:
    color var(--footer-transition);
}

.footer-simple__links a:hover,
.footer-simple__links a:focus-visible {
  color: var(--footer-hover);
}

.footer-simple__links a:not(:last-child)::after {
  content: "";

  width: 1px;
  height: 16px;

  margin-inline: 12px;

  background: var(--footer-line);
}


/* ==========================================================
   06. REDES SOCIALES
========================================================== */

.footer-simple__social {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 12px;
}

.footer-simple__social a {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: transparent;

  transition:
    transform var(--footer-transition),
    background-color var(--footer-transition),
    box-shadow var(--footer-transition);
}

.footer-simple__social a:hover,
.footer-simple__social a:focus-visible {
  transform: translateY(-3px);

  background: rgba(255, 255, 255, 0.08);

  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, 0.18);
}

.footer-simple__social img {
  width: 24px;
  height: 24px;

  object-fit: contain;
  object-position: center;
}

.footer-simple__github-icon {
  width: 25px;
  height: 25px;
}


/* ==========================================================
   07. ACCESIBILIDAD
========================================================== */

.site-footer a:focus-visible {
  outline:
    3px solid
    rgba(34, 197, 246, 0.55);

  outline-offset: 4px;

  border-radius: 4px;
}


/* ==========================================================
   08. TABLET
========================================================== */

@media (max-width: 900px) {

  .footer-simple {
    padding:
      48px 0 38px;
  }

  .footer-simple__container {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }

  .footer-simple__secondary {
    align-items: flex-start;

    padding-top: 0;
  }

  .footer-simple__links {
    justify-content: flex-start;
  }

  .footer-simple__social {
    justify-content: flex-start;
  }

}


/* ==========================================================
   09. MÓVIL
========================================================== */

@media (max-width: 640px) {

  .footer-simple {
    padding:
      40px 0 32px;
  }

  .footer-simple__container {
    width:
      min(
        calc(100% - 28px),
        var(--footer-container)
      );

    gap:
      34px;
  }

  .footer-simple__brand {
    gap: 12px;

    margin-bottom: 24px;
  }

  .footer-simple__logo {
    width: 58px;
    height: 58px;

    flex-basis: 58px;
  }

  .footer-simple__brand-name {
    font-size: 1.65rem;
  }

  .footer-simple__tagline {
    font-size: 0.74rem;
  }

  .footer-simple__contact p,
  .footer-simple__contact a {
    font-size: 0.9rem;
  }

  .footer-simple__copyright {
    margin-top: 24px;

    font-size: 0.78rem;
  }

  .footer-simple__links {
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
  }

  .footer-simple__links a:not(:last-child)::after {
    display: none;
  }

  .footer-simple__social {
    gap: 10px;
  }

  .footer-simple__social a {
    width: 36px;
    height: 36px;
  }

  .footer-simple__social img {
    width: 23px;
    height: 23px;
  }

}


/* ==========================================================
   10. MÓVIL PEQUEÑO
========================================================== */

@media (max-width: 420px) {

  .footer-simple__brand {
    align-items: flex-start;
  }

  .footer-simple__logo {
    width: 54px;
    height: 54px;

    flex-basis: 54px;
  }

  .footer-simple__brand-name {
    font-size: 1.5rem;
  }

}


/* ==========================================================
   11. MOVIMIENTO REDUCIDO
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {
    transition-duration: 0.01ms !important;
  }

}


/* ==========================================================
   12. IMPRESIÓN
========================================================== */

@media print {

  .site-footer {
    color: #000000;
    background: #ffffff;
  }

  .footer-simple {
    padding: 24px 0;

    color: #000000;
    background: #ffffff;

    border-top: 1px solid #999999;
  }

  .footer-simple__container {
    display: block;
  }

  .footer-simple__brand-name,
  .footer-simple__tagline,
  .footer-simple__contact,
  .footer-simple__contact p,
  .footer-simple__contact a,
  .footer-simple__copyright {
    color: #000000;
  }

  .footer-simple__secondary {
    display: none;
  }

}