/* =============================================================
   Footer — present on every page
   ============================================================= */
.site-footer { background: var(--ink); color: rgba(248,246,241,.6); padding: 3rem 0 3rem; font-size: .85rem; }
.footer-inner { display: flex; flex-direction: column; gap: .5rem; }
.footer-legal a { text-decoration: underline; }

/* Marca del footer — misma estructura y tipografía que el encabezado:
   icono a la izquierda + nombre (Cormorant, mayúsculas, tracking) y tagline
   (Montserrat, cursiva, dorado) apilados en columna. */
.footer-brand { display: inline-flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; text-decoration: none; }
.footer-brand img { height: 66px; width: auto; flex-shrink: 0; opacity: .95; }
@media (max-width: 719px) { .footer-brand img { height: 44px; } }
.footer-brand-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.05; gap: .12rem; }
.footer-brand-name { font-family: var(--serif); font-weight: 600; color: var(--bg); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .1em; }
/* Mismo filete dorado del logo que en el encabezado: línea corta y centrada
   entre el nombre y el eslogan, del centro de una «o» de TORREJÓN al de la otra. */
.footer-brand-rule {
  display: block;
  width: 4.4rem;
  height: 1px;
  margin: .4rem 0 .34rem;   /* +1 mm de aire arriba y abajo (nombre / eslogan) */
  background: linear-gradient(90deg, #9c6f27 0%, #caa14e 50%, #9c6f27 100%);
}
.footer-brand-tagline { font-family: var(--sans); font-weight: 400; font-style: normal; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }

/* --- Footer reordenado: marca + redes en fila arriba; copyright + legal en barra abajo.
   Clases nuevas (.footer-top/.footer-bottom/.footer-divider): no afectan a las
   páginas que aún usan el pie apilado clásico. --- */
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem; flex-wrap: wrap;
}
.footer-top .footer-brand { margin-bottom: 0; }
.footer-top .footer-social { margin-bottom: 0; }
.footer-divider { height: 1px; background: rgba(248,246,241,.14); margin: 1.6rem 0; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: .35rem 1.5rem; flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }
@media (max-width: 640px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Redes sociales — botones circulares con el color corporativo de cada red
   (LinkedIn azul #0a66c2, Instagram degradado oficial) para que destaquen
   sobre el azul del footer. Al hover suben y se iluminan un poco. */
.footer-social { display: flex; gap: .7rem; margin-bottom: 1.4rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .25s var(--ease-out), filter .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.footer-social a[href*="linkedin"] { background: #0a66c2; border-color: #0a66c2; }
.footer-social a[href*="instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border-color: transparent; }
.footer-social a:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.1); box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }