
/* ── MODERN FOOTER ── */
/* El pie SIGUE AL TEMA desde el 2026-09-25 (lo pidió el propietario): oscuro
   en Noche y claro en Lino. Sus colores viven en estas fichas, igual que los
   --cab-* de la cabecera, porque el pie los quiere un punto más apagados que
   el resto de la página. Los valores de Noche son los de siempre: en Noche no
   cambia nada. */
.footer-modern {
  --pie-fondo:       #0a0a0a;
  --pie-texto:       #ECE7DF;   /* blanco roto, como el resto de Noche (2026-10-05) */
  --pie-suave:       rgba(236, 231, 223, 0.62);   /* teléfono, horario, enlaces */
  --pie-tenue:       rgba(255, 255, 255, 0.45);  /* la línea de abajo */
  --pie-linea:       rgba(255, 255, 255, 0.1);
  --pie-linea-fina:  rgba(255, 255, 255, 0.05);
  --pie-oro-borde:   rgba(201, 168, 76, 0.2);    /* la raya de arriba del pie */
  --pie-oro-boton:   rgba(201, 168, 76, 0.55);   /* borde de «Cómo llegar» */
  --pie-oro-fondo:   rgba(201, 168, 76, 0.12);

  background: var(--pie-fondo);
  color: var(--pie-texto);
  padding: 40px 0 15px;
  border-top: 1px solid var(--pie-oro-borde);
  font-family: var(--font-body);
}

html[data-tema="lino"] .footer-modern {
  --pie-fondo:       var(--color-dark-bg);      /* beige, un punto más que la página */
  --pie-texto:       var(--color-text-light);
  --pie-suave:       var(--color-text-suave);
  --pie-tenue:       var(--color-text-muted);
  --pie-linea:       rgba(34, 33, 31, 0.14);
  --pie-linea-fina:  rgba(34, 33, 31, 0.08);
  --pie-oro-borde:   rgba(111, 96, 64, 0.30);
  --pie-oro-boton:   rgba(111, 96, 64, 0.45);
  --pie-oro-fondo:   rgba(111, 96, 64, 0.10);
}



.footer-modern__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 30px;
}

.footer-modern__brand {
  max-width: 400px;
}

.contacto__map {
  width: 100%;
  height: 120px;
  border: 1px solid var(--pie-linea-fina);
  border-radius: 12px;
  /* El mapa de Google es claro: se pone del revés para que case con la web
     oscura. En Lino la web ya es clara, así que se deja como es. */
  filter: grayscale(100%) invert(92%) contrast(83%);
  transition: filter 0.3s ease;
}

.contacto__map:hover {
  filter: grayscale(80%) invert(92%) contrast(90%);
}

html[data-tema="lino"] .contacto__map { filter: grayscale(35%) contrast(96%); }
html[data-tema="lino"] .contacto__map:hover { filter: grayscale(10%) contrast(100%); }

.footer-modern__socials {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.footer-modern__socials a {
  color: var(--pie-suave);
  transition: all 0.3s ease;
}

.footer-modern__socials a:hover {
  color: var(--color-gold-text);
  transform: translateY(-3px);
}

.footer-modern__col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-modern__col h4 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-gold-text);
  margin-bottom: 10px;
  font-weight: 600;
}

.footer-modern__col a,
.footer-modern__col p {
  font-size: 0.85rem;
  color: var(--pie-suave);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-modern__col a:hover {
  color: var(--color-gold-text);
  transform: translateX(4px);
}

.footer-modern__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--pie-linea);
  padding-top: 15px;
  font-size: 0.8rem;
  color: var(--pie-tenue);
}

.footer-modern__scroll-top {
  color: var(--color-gold-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.3s ease;
}

.footer-modern__scroll-top:hover {
  opacity: 0.7;
}

@media (max-width: 900px) {
  .footer-modern__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 600px) {
  .footer-modern__bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

/* Enlace a la política de privacidad, en la línea de abajo del pie */
.footer-modern__privacidad {
  color: var(--pie-tenue);
  text-decoration: none;
  transition: color 200ms ease;
}

.footer-modern__privacidad:hover {
  color: var(--color-gold-warm);
}

/* Una red social sin dirección guardada en el panel no se enseña */
.footer-modern__socials a[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   PIE «MAPA PROTAGONISTA» (2026-09-24, opción B elegida por el propietario)
   ═══════════════════════════════════════════════════════════════
   Izquierda: logo, contacto, horario y redes. Derecha: el mapa grande y,
   justo debajo, la dirección con «Cómo llegar». En el móvil, todo en una
   columna en ese mismo orden. */
.footer-modern__top {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  grid-template-areas:
    "marca    donde"
    "contacto donde";
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  row-gap: 22px;
  align-items: start;
}
.footer-modern__brand { grid-area: marca; }
.footer-modern__contacto { grid-area: contacto; gap: 12px; }
.footer-modern__donde { grid-area: donde; gap: 14px; }

.footer-modern__horario {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--pie-suave);
}
.footer-modern__horario svg { flex-shrink: 0; margin-top: 2px; }
.footer-modern__horario p { margin: 0 0 2px; }
.footer-modern__horario p span:first-child { color: var(--pie-tenue); margin-right: 4px; }
.footer-modern__socials { margin-top: 4px; gap: 6px; margin-left: -12px; }   /* la zona de toque (44 px) es mayor que el icono: así el icono se alinea con el texto */

/* El mapa, alto de verdad (antes 120 px) */
.footer-modern__donde .contacto__map,
.footer-modern__donde .mapa-diferido__boton { height: 230px; min-height: 230px; }

.footer-modern__direccion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.footer-modern__direccion #public-info-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--color-gold-text);
  line-height: 1.6;
}
.footer-modern__llegar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--pie-oro-boton);
  border-radius: 999px;
  color: var(--color-gold-text) !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-modern__col a.footer-modern__llegar:hover {
  background: var(--pie-oro-fondo);
  transform: none;
}

@media (max-width: 900px) {
  .footer-modern__top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marca" "contacto" "donde";
    grid-template-rows: auto;
    row-gap: 28px;
  }
  .footer-modern__donde .contacto__map,
  .footer-modern__donde .mapa-diferido__boton { height: 200px; min-height: 200px; }
}
@media (max-width: 480px) {
  .footer-modern__direccion { flex-direction: column; gap: 10px; }
  .footer-modern__llegar { min-height: 44px; }
}

/* Las líneas del horario que no tocan (lunes y domingo, 2026-10-01) */
.footer-modern__horario p[hidden] { display: none; }
