/* ==========================================================================
   PORTÓN & CONSTRUCCIÓN — Pie de página sobre Elessi
   --------------------------------------------------------------------------
   Basado en preview/assets/porton.css (líneas 842-864), con tres cambios
   obligados por el entorno:

     .container → .pc-container   Elessi usa .container en todo el sitio.
     Colores de enlace explícitos  Elessi aplica a{color:#333}, que sobre el
                                   negro del pie queda ilegible (1,3:1).
     Reglas para el marcado de wp_nav_menu, que envuelve todo en <ul class="menu">

   Destino: elessi-theme-child/assets/css/porton-footer.css
   ========================================================================== */

.footer{background:var(--pc-black);color:#A1A1AA;font-size:.9375rem}

.footer__grid{display:grid;gap:var(--space-7);padding:var(--space-8) 0}
@media(min-width:768px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}

.footer h4{
  color:#fff;font-family:var(--font-display);font-weight:700;
  font-size:1.0625rem;text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 var(--space-4);
}

/* wp_nav_menu escupe <ul class="menu"><li class="menu-item">. Se le quitan
   viñetas y sangrías para que quede como la lista de la maqueta. */
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}
.footer li{margin:0}

/* Elessi pinta los enlaces en #333: sobre negro es invisible. */
.footer a{color:#A1A1AA;text-decoration:none;transition:color .2s ease}
.footer a:hover,
.footer a:focus-visible{color:var(--pc-red)}
.footer :focus-visible{outline:2px solid var(--pc-red);outline-offset:3px}

.footer__logo{
  font-family:var(--font-display);font-weight:800;font-style:italic;
  font-size:1.75rem;color:#fff;line-height:1;margin-bottom:var(--space-4);
  text-transform:uppercase;
}
.footer__logo em{color:var(--pc-red);font-style:italic}

/* 38ch: el ancho al que un párrafo se lee cómodo sin saltos raros. */
.footer__lema{max-width:38ch;margin:0}

.footer__contact li{display:flex;gap:var(--space-3);align-items:flex-start}
.footer__contact svg{width:18px;height:18px;color:var(--pc-red);flex:none;margin-top:3px}

.social{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
.social a{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid #2A2A2E;border-radius:var(--radius);
  transition:background-color .2s,border-color .2s,color .2s;
}
.social a:hover{background:var(--pc-red);border-color:var(--pc-red);color:#fff}
.social svg{width:20px;height:20px}

.footer__bottom{
  border-top:1px solid #1F1F22;padding:var(--space-5) 0;
  display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);
  justify-content:space-between;align-items:center;
  font-size:.8125rem;
}

/* Lado del cliente: copyright + legales juntos, a la izquierda. */
.footer__bottom-cliente{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-2) var(--space-5);
}
/* Los enlaces legales van en línea, separados por un punto medio. */
.footer__legal{display:flex!important;flex-wrap:wrap;gap:var(--space-3);
  list-style:none;margin:0;padding:0}
.footer__legal li + li::before{content:"·";margin-right:var(--space-3);color:#3F3F46}
.footer__legal li{display:flex;align-items:center}

/* ---------- Crédito de LunarWeb ----------
   A la derecha de la misma franja, sin fila ni divisor propios: es una firma,
   no contenido del cliente. El texto baja un tono (#71717A) y solo "LunarWeb"
   sube a blanco para que se lea la marca. Al pasar el cursor toma el rojo del
   sitio como cualquier otro enlace del pie: no mete un color ajeno al cliente. */
.footer__credito{margin:0;color:#71717A;font-size:.8125rem;line-height:1.4}

.footer .footer__credito a{
  display:inline-flex;align-items:center;gap:6px;margin-left:4px;
  color:#fff;font-weight:600;
}
.footer .footer__credito a:hover,
.footer .footer__credito a:focus-visible{color:var(--pc-red)}

.footer__credito svg{width:16px;height:15px;flex:none;transition:transform .4s ease}
/* El único gesto: el isotipo gira un poco al pasar el cursor, como la luna. */
.footer__credito a:hover svg{transform:rotate(-25deg)}

@media(prefers-reduced-motion:reduce){
  .footer__credito svg{transition:none}
  .footer__credito a:hover svg{transform:none}
}

/* Aviso que solo ve quien puede arreglarlo (ver porton_columna_pie en el PHP).
   Un pie con un título y nada debajo parece un fallo de la web; así se ve que
   falta configurar un menú, y quién debe hacerlo. */
.footer__aviso{font-size:.8125rem;color:#71717A;margin:0}
.footer__aviso a{color:var(--pc-red);text-decoration:underline}

/* En móvil el bloque inferior se apila y se centra: con dos líneas a los
   extremos y poco ancho, el reparto justificado deja huecos raros. El crédito
   queda último. */
@media(max-width:767px){
  .footer__bottom,
  .footer__bottom-cliente{flex-direction:column;justify-content:center;text-align:center}
  .footer__grid{padding:var(--space-7) 0}
}

/* ---------- El <footer> vacío de Elessi ----------
   Su footer.php monta el pie desde do_action('nasa_footer_layout_style'), y
   uno de sus callbacks imprime <footer id="nasa-footer"> aunque no haya nada
   configurado en Theme Options. No se le quita el hook (por ahí pasan también
   la barra inferior del móvil y otras piezas suyas): se oculta solo cuando
   está vacío, y así la página queda con un único landmark de pie. */
#nasa-footer:empty{display:none}

/* ---------- Logotipo del pie ----------
   Es una imagen, no texto: se usa logo-footer.png, la variante con el negro
   pasado a blanco para que se lea sobre el fondo oscuro.

   width:auto + height fija y max-width de seguridad: la columna del pie es la
   más ancha del grid (1.4fr) pero en tablet se estrecha, y sin el tope el logo
   se saldría de su columna. */
.footer__marca{display:inline-block;line-height:0;margin-bottom:var(--space-4)}
.footer__marca img{
  display:block;
  height:58px;
  width:auto;
  max-width:100%;
}
@media(max-width:767px){
  .footer__marca img{height:50px}
}