/* 77 · Pie con render centrado: banda de 44 vh con render a sangre y velo --grafito al 55 % + pie sobre --mesa. Prefijo pie77-. */
.pie77 {
  --mesa: #e6e4df; --piedra: #d9d4cb; --arcilla: #b9a593; --oliva: #7f8574; --grafito: #3a3835;
  background: var(--mesa); color: #0a0a0a;
}

.pie77-banda {
  position: relative; isolation: isolate; overflow: hidden; background: var(--grafito); color: #fff;
  min-height: 44vh; min-height: 44svh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding-block: var(--s-5);
}
.pie77-banda > img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 60%;
}
.pie77-banda::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(58, 56, 53, 0.55); }
.pie77-banda .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.pie77-t { margin: 0; color: #fff; font-size: clamp(1.75rem, 4.2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 500; max-width: 18ch; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.4); }
.pie77-acc { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.pie77-banda .btn { background: #fff; border-color: #fff; color: #0a0a0a; }
.pie77-banda .btn:hover { background: var(--mesa); border-color: var(--mesa); color: #0a0a0a; }
.pie77-banda a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pie77-mail { color: #fff; font-size: var(--t-0); text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.pie77-mail:hover { text-decoration-thickness: 2px; }

.pie77-in { max-width: 960px; margin-inline: auto; padding-inline: var(--m); }
.pie77-cols { display: grid; grid-template-columns: 1fr; gap: var(--s-4) var(--gut); padding-block: var(--s-5) var(--s-4); font-size: var(--t-small); text-align: center; }
.pie77-cols h2 { font: 500 0.75rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; color: #55524e; }
.pie77-cols ul { margin: 0; padding: 0; list-style: none; }
.pie77-cols li { padding: 3px 0; }
.pie77-cols a { color: #0a0a0a; text-decoration: none; }
.pie77-cols a:hover { text-decoration: underline; text-decoration-color: var(--oliva); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pie77-cols a:focus-visible, .pie77-base button:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 3px; }
.pie77-nav ul { columns: 2; column-gap: var(--gut); }
.pie77-nav li { break-inside: avoid; }
@media (min-width: 760px) {
  .pie77-cols { grid-template-columns: 1.3fr 1fr 1fr; }
}

.pie77-base { display: grid; grid-template-columns: 1fr; justify-items: center; gap: var(--s-1); padding-block: var(--s-3); border-top: 1px solid var(--arcilla); font-size: var(--t-small); color: #3a3835; text-align: center; }
.pie77-base p { margin: 0; }
.pie77-base .idiomas { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--s-2); }
.pie77-base .idiomas button { color: #55524e; }
.pie77-base .idiomas a { display: inline-block; padding: 2px 0; color: #55524e; text-decoration: none; border-bottom: 2px solid transparent; }
.pie77-base .idiomas a:not([aria-current]):hover { color: #0a0a0a; border-bottom-color: #d9d4cb; }
.pie77-base .idiomas [aria-current="true"] { color: #0a0a0a; font-weight: 500; border-bottom-color: var(--signal); }
@media (min-width: 760px) {
  .pie77-base { grid-template-columns: 1fr auto 1fr; }
  .pie77-base p { grid-column: 2; }
  .pie77-base .idiomas { grid-column: 3; justify-self: end; }
}

/* zonas táctiles (puntero grueso): ≥ 40 px de alto; el margen negativo mantiene la composición */
@media (pointer: coarse) {
  .pie77-mail { display: inline-flex; align-items: center; min-height: 40px; margin-block: -7px; }
  .pie77-base .idiomas a { display: inline-flex; align-items: center; min-height: 40px; padding: 0; margin-block: -5.5px; border-bottom: 0;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: transparent; }
  .pie77-base .idiomas a:not([aria-current]):hover { text-decoration-color: #d9d4cb; }
  .pie77-base .idiomas [aria-current="true"] { text-decoration-color: var(--signal); }
}