/* =========================================================
   FOOTER COMÚN
   Se carga en todas las páginas que incluyen el componente.
   ========================================================= */

/* =========================================================
   BANDA ANTERIOR AL PIE — «El taller abierto»
   Da acceso, desde todas las páginas, a la que cuenta cómo
   se ha hecho el trabajo. No es el primer bloque del pie: se
   separa de él por fondo, por tipografía y por el filete ocre,
   que es el mismo que marca el aparato de fuentes en la página
   a la que lleva. Se reconocen como la misma cosa antes de
   pulsar.
   ========================================================= */

/* 1 uso: separa la banda del contenido y la distingue del pie por fondo. */
.v4-workshop-band {
  margin-top: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--v4-petrol-border);
  background: var(--v4-bg-raised);
}

/* 1 uso: la banda ya separa del contenido; el pie va pegado a ella. */
.v4-workshop-band + .v4-footer {
  margin-top: 0;
}

/* 1 uso: alinea la banda con el resto del sitio y le da aire propio. */
.v4-workshop-band-shell {
  max-width: 1366px;
  margin-inline: auto;
  padding: clamp(2.2rem, 4.5vw, 3.4rem) 24px;
}

/* 1 uso: el filete ocre del aparato de fuentes, y el ancho de la frase.
   72ch, no la medida de lectura corriente: la frase es un rótulo, no un
   párrafo, y a 58ch caía en tres líneas cortas con la banda medio vacía. */
.v4-workshop-band-inner {
  max-width: 72ch;
  padding-left: clamp(1.1rem, 2.5vw, 1.6rem);
  border-left: 4px solid var(--v4-ochre);
}

/* 1 uso: la frase afirma; por eso va en la tipografía de los títulos. */
.v4-workshop-band-text {
  margin: 0 0 0.9rem;
  color: var(--v4-text-heading);
  font-family: var(--v4-font-heading, "Inter", "Segoe UI", Arial, sans-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.3;
}

/* 1 uso: el destino, debajo de la frase y no al otro extremo de la franja. */
.v4-workshop-band-link {
  display: inline-block;
  color: var(--v4-petrol-link);
  font-family: var(--v4-font-heading, "Inter", "Segoe UI", Arial, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* 1 uso: la flecha va en contenido generado, como en el resto de enlaces de texto. */
.v4-workshop-band-link::after {
  content: " →";
}

/* 1 uso: refuerzo al pasar por encima, del mismo color que el resto de enlaces. */
.v4-workshop-band-link:hover {
  color: var(--v4-petrol-hover);
}

/* 1 uso: separa el pie del contenido y define su aspecto general. */
.v4-footer {
  margin-top: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid #242424;
  color: #74706a;
  background: #0f0f0f;
  font-size: 0.88rem;
}

/* 2 usos: limita el contenido del pie a 1366 px y lo centra. */
.v4-footer-shell {
  max-width: 1366px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* 1 uso: distribuye identidad, canales y navegación en tres columnas. */
.v4-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(10rem, 0.5fr) minmax(14rem, 0.6fr);
  gap: clamp(3rem, 8vw, 8rem);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

/* 1 uso: limita la anchura del bloque de identidad. */
.v4-footer-studio {
  max-width: 70ch;
}

/* 1 uso: presenta el nombre del autor. */
.v4-footer-name {
  margin: 0;
  font-family: var(--v4-font-heading, "Inter", "Segoe UI", Arial, sans-serif);
  font-size: 1.7rem;
  font-weight: 700;
}

/* 1 uso: separa el descriptor del lema. */
.v4-footer-descriptor {
  margin: 0.2rem 0 2.4rem;
}

/* 1 uso: presenta el lema con una línea lateral. */
.v4-footer-motto {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 5px solid currentcolor;
  font-family: var(--v4-font-heading, "Inter", "Segoe UI", Arial, sans-serif);
  font-size: 1.2rem;
  line-height: 1.45;
}

/* 3 usos: coloca cada frase del lema en una línea. */
.v4-footer-motto span {
  display: block;
}

/* 11 usos: comparte alineación entre aviso, enlaces y filas. */
.v4-footer-warning,
.v4-footer-nav a,
.v4-footer-nav-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* 1 uso: presenta el aviso de encargos. */
.v4-footer-warning {
  align-items: flex-start;
  margin-top: 2.25rem;
  color: #8a3f32;
}

/* 6 usos: conserva la proporción de los iconos. */
.v4-footer-warning img,
.v4-footer-nav img {
  flex: none;
  object-fit: contain;
}

/* 1 uso: limita el texto del aviso. */
.v4-footer-commissions {
  max-width: 58ch;
  margin: 0;
}

/* 1 uso: apila los enlaces del pie. */
.v4-footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.95rem;
  font-size: 1rem;
}

/* 5 usos: conserva el color del pie y separa el subrayado. */
.v4-footer-nav a {
  color: inherit;
  text-underline-offset: 0.22em;
}

/* 1 uso: presenta los créditos y la firma. */
.v4-footer-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  padding-block: 1.5rem 2rem;
  border-top: 2px solid #303030;
  font-size: 0.76rem;
  line-height: 1.55;
  text-align: center;
}

/* 2 usos: limita los textos legales. */
.v4-footer-credits p {
  max-width: 70ch;
  margin: 0;
}

/* 1 uso: dimensiona e integra la firma. */
.v4-footer-signature {
  width: min(9rem, 28vw);
  max-height: 3.5rem;
  opacity: 0.6;
  filter: grayscale(1) brightness(1.8);
}

/* En pantallas estrechas, el pie pasa de tres columnas a una. */
@media (max-width: 800px) {
  .v4-footer-main {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   BOTÓN COMÚN PARA VOLVER ARRIBA
   El componente footer también genera este botón.
   ========================================================= */

/* 1 uso: fija el botón abajo a la derecha y define su aspecto. */
.scroll-top-button {
  position: fixed;
  z-index: 80;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: 3rem;
  height: 3rem;
  padding: 0;
  place-items: center;
  border: 1px solid #3f6673;
  border-radius: 50%;
  color: #878681;
  background: rgb(0 0 0 / 88%);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 35%);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

/* Oculta el botón mientras la página se encuentra arriba. */
.scroll-top-button[hidden] {
  display: none;
}

.scroll-top-button:hover {
  color: #b4b4b1;
  border-color: #8ba3ab;
}

/* Dibuja la flecha sin utilizar una imagen. */
.scroll-top-button span {
  width: 0.75rem;
  height: 0.75rem;
  border-top: 2px solid currentcolor;
  border-left: 2px solid currentcolor;
  transform: translateY(0.2rem) rotate(45deg);
}

.scroll-top-button:focus-visible {
  outline: 3px solid #3f6673;
  outline-offset: 4px;
}