/* =========================================================
   FOOTER — VARIABLES
========================================================= */

:root{
  --footer-cyan:#12dfff;
  --footer-blue:#2457ff;
  --footer-pink:#ff0062;

  --footer-text:rgba(255,255,255,.58);
  --footer-muted:rgba(255,255,255,.42);
  --footer-border:rgba(255,255,255,.07);

  --footer-max-width:1180px;
}


/* =========================================================
   FOOTER — BASE / ESCRITORIO GRANDE
========================================================= */

.z-footer{
  position:relative;
  overflow:hidden;

  width:100%;
  padding:96px 32px 28px;

  color:#fff;
  border-top:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      #020202 18%,
      #000 100%
    );
}


/* =========================================================
   LÍNEA LUMINOSA SUPERIOR
========================================================= */

.z-footer::before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  width:min(
    var(--footer-max-width),
    calc(100% - 64px)
  );
  height:1px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,212,255,.75),
      rgba(36,87,255,.6),
      rgba(255,0,98,.65),
      transparent
    );

  box-shadow:
    0 0 18px rgba(0,212,255,.22),
    0 0 26px rgba(255,0,98,.24);

  pointer-events:none;
}


/* =========================================================
   CONTENEDORES PRINCIPALES
========================================================= */

.z-footer-grid,
.z-footer-bottom{
  position:relative;
  z-index:2;

  width:min(var(--footer-max-width), 100%);
  margin-inline:auto;
}


/* =========================================================
   GRID PRINCIPAL
========================================================= */

.z-footer-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:start;
  gap:56px;
}


/* =========================================================
   ALINEACIÓN DE COLUMNAS
========================================================= */

.z-footer-brand{
  width:100%;

  justify-self:start;
  text-align:left;
}

.z-footer-links{
  width:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-self:center;
  gap:12px;

  text-align:center;
}

.z-footer-contact{
  width:max-content;
  max-width:100%;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-self:end;
  gap:12px;

  text-align:left;
}


/* =========================================================
   MARCA
========================================================= */

.z-footer-brand h3{
  margin:0 0 20px;

  font-family:"Michroma", sans-serif;
  font-size:1.58rem;
  font-weight:400;
  line-height:1.2;
  letter-spacing:7px;

  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #baf7ff 58%,
      #4deaff 100%
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  text-shadow:
    0 0 22px rgba(0,212,255,.12);
}

.z-footer-brand p{
  max-width:390px;
  margin:0;

  color:var(--footer-text);

  font-family:"Michroma", sans-serif;
  font-size:.72rem;
  font-weight:400;
  line-height:1.9;
  letter-spacing:.1px;
}


/* =========================================================
   TÍTULOS DE COLUMNAS
========================================================= */

.z-footer h4{
  margin:0 0 24px;

  color:var(--footer-cyan);

  font-family:"Michroma", sans-serif;
  font-size:.78rem;
  font-weight:400;
  line-height:1.4;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

.z-footer-links h4{
  width:100%;
  text-align:center;
}

.z-footer-contact h4{
  width:100%;
  text-align:left;
}


/* =========================================================
   ENLACES
========================================================= */

.z-footer-links a{
  width:fit-content;

  color:rgba(255,255,255,.55);

  font-family:"Michroma", sans-serif;
  font-size:.72rem;
  font-weight:400;
  line-height:1.6;

  text-decoration:none;

  transition:
    color .25s ease,
    transform .25s ease,
    text-shadow .25s ease;
}

.z-footer-links a:hover{
  color:#fff;

  transform:translateY(-2px);

  text-shadow:
    0 0 14px rgba(0,212,255,.45);
}


/* =========================================================
   INFORMACIÓN DE CONTACTO
========================================================= */

.z-footer-contact p{
  width:100%;
  max-width:none;
  margin:0;

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;

  color:var(--footer-text);

  font-family:"Michroma", sans-serif;
  font-size:.72rem;
  font-weight:400;
  line-height:1.9;
  letter-spacing:.1px;
}

.z-footer-contact i{
  flex:0 0 34px;

  width:34px;
  height:34px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:var(--footer-cyan);

  border:1px solid rgba(18,223,255,.28);
  border-radius:50%;

  background:rgba(0,212,255,.035);

  box-shadow:
    inset 0 0 10px rgba(255,255,255,.035),
    0 0 20px rgba(0,212,255,.12);

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.z-footer-contact p:hover i{
  border-color:rgba(18,223,255,.55);

  box-shadow:
    inset 0 0 10px rgba(255,255,255,.05),
    0 0 24px rgba(0,212,255,.28);

  transform:translateY(-2px);
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.z-footer-bottom{
  margin-top:72px;
  padding-top:24px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:30px;

  border-top:1px solid var(--footer-border);
}

.z-footer-bottom span{
  color:var(--footer-muted);

  font-family:"Michroma", sans-serif;
  font-size:.66rem;
  font-weight:400;
  line-height:1.6;
}

.z-footer-bottom > span:first-child{
  text-align:left;
}


/* =========================================================
   CRÉDITOS
========================================================= */

.z-footer-credit{
  margin-left:auto;

  color:rgba(255,255,255,.55);

  font-family:"Michroma", sans-serif;
  font-size:.66rem;
  line-height:1.6;
  text-align:right;
}

.z-footer-credit a{
  color:#fff;

  font-weight:700;
  letter-spacing:.03em;
  text-decoration:none;

  transition:
    color .25s ease,
    text-shadow .25s ease;
}

.z-footer-credit a:hover{
  color:#0fcfd9;

  text-shadow:
    0 0 12px rgba(15,207,217,.35);
}


/* =========================================================
   FOOTER — NOTEBOOK PEQUEÑO
   1025px HASTA 1366px
========================================================= */

@media (min-width:1025px) and (max-width:1366px){

  .z-footer{
    padding:76px 42px 26px;
  }

  .z-footer::before{
    width:min(1120px, calc(100% - 84px));
  }

  .z-footer-grid,
  .z-footer-bottom{
    width:min(1120px, 100%);
  }

  .z-footer-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:42px;
  }

  .z-footer-brand h3{
    margin-bottom:18px;

    font-size:1.38rem;
    letter-spacing:6px;
  }

  .z-footer-brand p,
  .z-footer-contact p{
    font-size:.66rem;
    line-height:1.8;
  }

  .z-footer h4{
    margin-bottom:20px;

    font-size:.7rem;
    letter-spacing:1.5px;
  }

  .z-footer-links{
    gap:10px;
  }

  .z-footer-links a{
    font-size:.66rem;
  }

  .z-footer-contact{
    gap:10px;
  }

  .z-footer-contact p{
    gap:11px;
  }

  .z-footer-contact i{
    flex-basis:31px;

    width:31px;
    height:31px;
  }

  .z-footer-bottom{
    margin-top:54px;
    padding-top:20px;
  }

  .z-footer-bottom span,
  .z-footer-credit{
    font-size:.6rem;
  }
}


/* =========================================================
   FOOTER — TABLET
   769px HASTA 1024px
========================================================= */

@media (min-width:769px) and (max-width:1024px){

  .z-footer{
    padding:70px 34px 26px;
  }

  .z-footer::before{
    width:calc(100% - 68px);
  }

  .z-footer-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:48px 44px;
  }

  .z-footer-brand{
    grid-column:1 / -1;

    max-width:620px;

    justify-self:center;
    text-align:center;
  }

  .z-footer-brand p{
    max-width:560px;
    margin-inline:auto;
  }

  .z-footer-links{
    justify-self:center;
  }

  .z-footer-contact{
    justify-self:center;
  }

  .z-footer-contact h4{
    text-align:left;
  }

  .z-footer-brand h3{
    font-size:1.4rem;
    letter-spacing:6px;
  }

  .z-footer h4{
    margin-bottom:20px;
  }

  .z-footer-bottom{
    margin-top:50px;
  }
}


/* =========================================================
   FOOTER — MÓVIL
   HASTA 768px
========================================================= */

@media (max-width:768px){

  .z-footer{
    padding:58px 24px 24px;
  }

  .z-footer::before{
    width:calc(100% - 48px);
  }

  .z-footer-grid{
    width:100%;

    grid-template-columns:1fr;
    gap:38px;

    text-align:center;
  }

  .z-footer-brand{
    justify-self:center;
    text-align:center;
  }

  .z-footer-brand h3{
    margin-bottom:16px;

    font-size:1.35rem;
    letter-spacing:5px;
  }

  .z-footer-brand p{
    max-width:430px;
    margin:0 auto;

    font-size:.65rem;
    line-height:1.85;
  }

  .z-footer h4{
    margin-bottom:18px;

    font-size:.7rem;
    letter-spacing:1.6px;
  }

  .z-footer-links{
    justify-self:center;
    align-items:center;
    gap:10px;
  }

  .z-footer-links a{
    font-size:.66rem;
  }

  /*
    El contacto se oculta en móvil para mantener
    el footer compacto, tal como estaba en tu diseño.
  */
  .z-footer-contact{
    display:none;
  }

  .z-footer-bottom{
    width:100%;

    margin-top:42px;
    padding-top:20px;

    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;

    text-align:center;
  }

  .z-footer-bottom > span:first-child,
  .z-footer-credit{
    margin-left:0;
    text-align:center;
  }

  .z-footer-bottom span,
  .z-footer-credit{
    max-width:380px;

    font-size:.57rem;
    line-height:1.7;
  }
}


/* =========================================================
   FOOTER — MÓVIL PEQUEÑO
   HASTA 480px
========================================================= */

@media (max-width:480px){

  .z-footer{
    padding:52px 18px 22px;
  }

  .z-footer::before{
    width:calc(100% - 36px);
  }

  .z-footer-grid{
    gap:32px;
  }

  .z-footer-brand h3{
    font-size:1.15rem;
    letter-spacing:4.5px;
  }

  .z-footer-brand p{
    max-width:300px;

    font-size:.59rem;
    line-height:1.8;
  }

  .z-footer h4{
    margin-bottom:16px;

    font-size:.65rem;
  }

  .z-footer-links a{
    font-size:.61rem;
  }

  .z-footer-bottom{
    margin-top:34px;
    padding-top:18px;
  }

  .z-footer-bottom span,
  .z-footer-credit{
    max-width:290px;

    font-size:.52rem;
  }
}


/* =========================================================
   ACCESIBILIDAD — REDUCIR MOVIMIENTO
========================================================= */

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

  .z-footer-links a,
  .z-footer-contact i,
  .z-footer-credit a{
    transition:none;
  }
}