/* =========================================================
   Cerrajeros La Latina 3000
   Hoja de estilos única · Estética GeoCities 1998 / Windows 95
   HTML + CSS planos: todas las "animaciones GIF" son CSS.
   ========================================================= */

@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fuentes/vt323-latin-400-normal.woff2") format("woff2");
}

:root {
  --negro: #000;
  --blanco: #fff;
  --amarillo: #ffff00;
  --cian: #00ffff;
  --magenta: #ff00ff;
  --lima: #00ff00;
  --rojo: #ff0000;
  --rojo-oscuro: #cc0000;
  --azul-marino: #000080;
  --gris-win: #c0c0c0;
  --gris-oscuro: #808080;
  --fuente-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", "Trebuchet MS", sans-serif;
  --fuente-titulo: "Arial Black", "Arial Bold", Gadget, Arial, sans-serif;
  --fuente-pixel: "VT323", "Courier New", Courier, monospace;
  --fuente-maquina: "Courier New", Courier, monospace;
  --fuente-documento: "Times New Roman", Times, serif;
  --alto-barra-tareas: 54px;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-bottom: calc(var(--alto-barra-tareas) + 16px);
  font-family: var(--fuente-comic);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--blanco);
  /* Cielo estrellado en baldosas: sin imágenes */
  background-color: var(--negro);
  background-image:
    radial-gradient(1px 1px at 18px 26px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 132px 74px, #ffff00 50%, transparent 52%),
    radial-gradient(2px 2px at 64px 142px, #00ffff 50%, transparent 52%),
    radial-gradient(1px 1px at 178px 18px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 96px 104px, #ff00ff 50%, transparent 52%),
    radial-gradient(1px 1px at 160px 176px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 30px 190px, #00ff00 50%, transparent 52%);
  background-size: 200px 200px;
}

/* Segunda capa de estrellas que titila como un GIF */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 40px 60px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 110px 20px, #00ffff 50%, transparent 52%),
    radial-gradient(2px 2px at 150px 120px, #ffff00 50%, transparent 52%),
    radial-gradient(1px 1px at 76px 168px, #fff 50%, transparent 52%);
  background-size: 180px 180px;
  animation: titilar 1.6s steps(1, end) infinite;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* Colores de enlace clásicos de Netscape */
a:link {
  color: #0000ff;
}

a:visited {
  color: #800080;
}

a:hover {
  text-decoration-style: wavy;
}

a:active {
  color: var(--rojo);
}

:focus-visible {
  outline: 3px dashed var(--magenta);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  font-family: var(--fuente-titulo);
  line-height: 1.2;
  margin: 0 0 .6em;
}

p {
  margin: 0 0 1em;
}

strong {
  font-weight: 700;
}

address {
  font-style: normal;
}

.saltar {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 2000;
  padding: 8px 12px;
  background: var(--amarillo);
  color: var(--negro) !important;
  font-weight: 700;
}

.saltar:focus {
  top: 8px;
}

.solo-lectores {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contenedor {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 14px;
}

/* ---------- <blink> y <marquee> en versión CSS ---------- */

.blink,
.parpadeo {
  animation: parpadeo 1s steps(1, end) infinite;
}

.marquesina {
  overflow: hidden;
  white-space: nowrap;
}

.marquesina-contenido {
  display: inline-block;
  margin: 0;
  padding-left: 100%;
  animation: marquesina 22s linear infinite;
  /* Retardo negativo: el texto ya está a la vista al cargar la página */
  animation-delay: -7s;
}

.marquesina:hover .marquesina-contenido {
  animation-play-state: paused;
}

.marquesina-superior {
  background: var(--rojo-oscuro);
  color: var(--amarillo);
  border-bottom: 3px ridge var(--amarillo);
  font-family: var(--fuente-pixel);
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: .04em;
}

.marquesina-superior .icono-reloj {
  width: 26px;
}

/* ---------- Cabecera ---------- */

.cabecera {
  background:
    repeating-conic-gradient(#000080 0 25%, #1a0040 0 50%) 0 0 / 48px 48px;
  border-bottom: 4px ridge var(--magenta);
}

.cabecera-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: inline-block;
  text-decoration: none;
  font-family: var(--fuente-titulo);
  line-height: 1;
  transform: rotate(-2deg);
}

.logo:link,
.logo:visited {
  color: var(--amarillo);
}

.logo-linea1,
.logo-linea2 {
  display: block;
}

.logo-linea1 {
  font-size: clamp(1.5rem, 4.4vw, 2.3rem);
  color: var(--amarillo);
  text-shadow: 2px 2px 0 var(--magenta), 4px 4px 0 var(--azul-marino);
}

.logo-linea2 {
  margin-top: 4px;
  font-size: clamp(1.4rem, 4.4vw, 2.1rem);
  letter-spacing: .25em;
  color: var(--cian);
  text-shadow: 2px 2px 0 var(--magenta);
}

.cabecera-urgencias {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.texto-urgencias {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-titulo);
  font-size: 1.2rem;
  color: var(--lima);
  text-transform: uppercase;
}

.icono-reloj {
  width: 40px;
  height: auto;
  vertical-align: middle;
}

.boton-telefono-cabecera {
  font-size: 1.35rem;
  padding: 6px 16px;
}

/* ---------- Menú (botones Windows 95) ---------- */

.menu {
  background: var(--gris-win);
  border-top: 2px solid var(--blanco);
  border-bottom: 2px solid var(--gris-oscuro);
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 auto;
  padding: 8px 14px;
  max-width: 1000px;
  list-style: none;
}

.menu li {
  flex: 1 1 auto;
}

.menu a {
  display: block;
  padding: 6px 10px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  color: var(--negro);
  background: var(--gris-win);
  border: 3px outset #dfdfdf;
}

.menu a:hover {
  background: #d4d4d4;
}

.menu a:active,
.menu a[aria-current="page"] {
  border-style: inset;
  background: #b0b0b0;
}

/* ---------- Botones ---------- */

.boton-win95 {
  display: inline-block;
  padding: 6px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
  color: var(--negro);
  background: var(--gris-win);
  border: 3px outset #dfdfdf;
  cursor: pointer;
}

.boton-win95:link,
.boton-win95:visited {
  color: var(--negro);
}

.boton-win95:active {
  border-style: inset;
}

.boton-llamar {
  display: inline-block;
  padding: 12px 22px;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.3rem, 5vw, 2.1rem);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  color: var(--rojo-oscuro);
  background: var(--amarillo);
  border: 6px outset #ffff80;
  box-shadow: 4px 4px 0 var(--negro);
}

.boton-llamar:link,
.boton-llamar:visited {
  color: var(--rojo-oscuro);
}

.boton-llamar:hover {
  background: #ffff66;
}

.boton-llamar:active {
  border-style: inset;
  box-shadow: none;
  transform: translate(4px, 4px);
}

/* El CTA parpadea cambiando de color: nunca desaparece y siempre se puede pulsar */
.boton-llamar.blink {
  animation: parpadeo-boton 1s steps(1, end) infinite;
}

.boton-llamar-numero {
  display: block;
  margin-top: 4px;
  font-size: .7em;
  letter-spacing: .06em;
}

/* ---------- Paneles tipo ventana de Windows 95 ---------- */

.panel {
  margin: 28px 0;
  background: var(--gris-win);
  color: var(--negro);
  border: 4px outset #dfdfdf;
  box-shadow: 6px 6px 0 rgba(255, 0, 255, .55);
}

.panel-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 10px;
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  color: var(--blanco);
  background: linear-gradient(90deg, #000080, #1084d0);
}

.panel-titulo::after {
  content: "✕";
  content: "✕" / "";
  margin-left: auto;
  padding: 0 6px;
  font: 700 .85rem/1.4 Arial, sans-serif;
  color: var(--negro);
  background: var(--gris-win);
  border: 2px outset #dfdfdf;
}

.panel-titulo img {
  flex: none;
}

.panel-cuerpo {
  margin: 6px;
  padding: 18px;
  background: var(--blanco);
  border: 3px inset #dfdfdf;
}

.panel-cuerpo > :last-child {
  margin-bottom: 0;
}

.panel-cuerpo h3 {
  font-size: 1.2rem;
  color: var(--azul-marino);
}

/* ---------- Portada ---------- */

.portada {
  margin: 24px 0;
  padding: 22px 18px 26px;
  text-align: center;
  background: rgba(0, 0, 80, .82);
  border: 5px ridge var(--magenta);
}

.titulo-con-llave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  perspective: 500px;
}

.titulo-con-llave h1 {
  margin: 0;
}

h1 {
  font-size: clamp(1.8rem, 6vw, 3.1rem);
  color: var(--amarillo);
  text-shadow: 2px 2px 0 var(--magenta), 4px 4px 0 #0000aa, 6px 6px 0 #000;
}

.llave-3d {
  flex: none;
  width: clamp(58px, 11vw, 100px);
  height: auto;
}

.portada-urgencias {
  margin: 14px 0 10px;
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
}

.portada-urgencias .icono-reloj {
  width: clamp(44px, 9vw, 64px);
}

.portada-texto {
  max-width: 720px;
  margin: 0 auto 20px;
  font-size: 1.1rem;
}

.portada-texto a:link,
.portada-texto a:visited {
  color: var(--cian);
}

.nota-cta {
  margin: 14px 0 0;
  font-family: var(--fuente-pixel);
  font-size: 1.45rem;
  color: var(--cian);
}

/* ---------- Persecución: cerrajero vs. ladrón ---------- */

.persecucion {
  margin: 10px 0 0;
  padding: 10px 0 0;
  background: linear-gradient(transparent 82%, #3a3a3a 82%, #3a3a3a 86%, #222 86%);
  border: 3px inset #dfdfdf;
}

.persecucion .marquesina-contenido {
  animation-duration: 11s;
  animation-delay: -3s;
}

.persecucion img {
  display: inline-block;
  height: 120px;
  width: auto;
  vertical-align: bottom;
}

.persecucion .hueco {
  display: inline-block;
  width: 110px;
}

.pie-de-foto {
  margin: 6px 0 0;
  font-family: var(--fuente-pixel);
  font-size: 1.35rem;
  text-align: center;
  color: var(--amarillo);
}

/* ---------- Servicios ---------- */

.servicios-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.servicios-cabecera p {
  flex: 1 1 280px;
  margin: 0;
}

.caja-herramientas {
  width: 170px;
  height: auto;
}

.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.tarjeta-servicio {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  text-align: center;
  background: #ffffe0;
  border: 4px outset #e8e8c0;
}

.tarjeta-servicio img {
  width: 150px;
  height: auto;
  margin-bottom: 10px;
}

.tarjeta-servicio h3 {
  font-size: 1.15rem;
}

.tarjeta-servicio p {
  flex: 1;
}

.nuevo {
  display: inline-block;
  padding: 0 6px;
  font: 700 .8rem/1.5 Arial, sans-serif;
  color: var(--amarillo);
  background: var(--rojo);
  transform: rotate(-6deg);
}

/* ---------- Tablas con relieve ---------- */

.tabla-retro {
  width: 100%;
  border: 4px outset #dfdfdf;
  border-collapse: separate;
  border-spacing: 4px;
  background: var(--gris-win);
}

.tabla-retro caption {
  padding: 6px;
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  color: var(--azul-marino);
  text-align: left;
}

.tabla-retro th,
.tabla-retro td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border: 2px inset #dfdfdf;
  background: var(--blanco);
}

.tabla-retro thead th {
  color: var(--blanco);
  background: var(--azul-marino);
}

.tabla-retro tbody th {
  background: #ffffe0;
}

/* ---------- Listas y bloques de texto ---------- */

.lista-estrellas {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.lista-estrellas li {
  position: relative;
  margin-bottom: .5em;
  padding-left: 1.8em;
}

.lista-estrellas li::before {
  content: "★";
  content: "★" / "";
  position: absolute;
  left: 0;
  color: var(--rojo);
  text-shadow: 1px 1px 0 var(--amarillo);
}

.con-ilustracion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
}

.con-ilustracion > div {
  flex: 1 1 300px;
}

.ilustracion {
  flex: none;
  width: min(240px, 62%);
  height: auto;
  margin: 0 auto;
}

.ilustracion-pequena {
  width: min(170px, 50%);
}

.lista-columnas {
  columns: 2 180px;
  column-gap: 24px;
}

.lista-columnas li {
  break-inside: avoid;
}

.tabla-desplazable {
  overflow-x: auto;
  margin-bottom: 1em;
}

.texto-legal .tabla-retro {
  min-width: 560px;
  font-size: .95rem;
}

.separador {
  height: 8px;
  margin: 26px 0;
  border: 0;
  background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  background-size: 200% 100%;
  animation: arcoiris 2s steps(8, end) infinite;
}

.cta-caja {
  margin: 28px 0;
  padding: 20px 16px;
  text-align: center;
  color: var(--negro);
  background:
    repeating-linear-gradient(45deg, #ffff00 0 22px, #ffd400 22px 44px);
  border: 6px ridge var(--rojo);
}

.cta-caja h2 {
  margin-bottom: .4em;
  font-size: clamp(1.3rem, 4.5vw, 1.8rem);
  color: var(--rojo-oscuro);
  text-shadow: 2px 2px 0 var(--blanco);
}

.cta-caja .boton-llamar,
.cta-caja .boton-llamar:link,
.cta-caja .boton-llamar:visited {
  color: var(--amarillo);
  background: var(--rojo-oscuro);
  border-color: #ff5050;
}

.cta-caja .boton-llamar.blink {
  animation-name: parpadeo-boton-inverso;
}

/* ---------- Migas de pan ---------- */

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 18px 0 0;
  padding: 6px 10px;
  font-family: var(--fuente-maquina);
  font-size: .95rem;
  color: var(--negro);
  background: var(--gris-win);
  border: 2px inset #dfdfdf;
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.migas li + li::before {
  content: "»";
  content: "»" / "";
  margin-right: 4px;
}

.migas-prefijo {
  font-weight: 700;
}

/* ---------- Páginas de servicio e internas ---------- */

.encabezado-pagina {
  margin: 20px 0;
  padding: 20px 16px;
  text-align: center;
  background: rgba(0, 0, 80, .82);
  border: 5px ridge var(--cian);
}

.encabezado-pagina h1 {
  font-size: clamp(1.6rem, 5.2vw, 2.6rem);
}

.entradilla {
  max-width: 720px;
  margin: 14px auto 18px;
  font-size: 1.1rem;
}

/* Preguntas frecuentes */
.pregunta {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: #f4f4ff;
  border: 3px outset #dfdfdf;
}

.pregunta h3 {
  margin-bottom: .4em;
  font-size: 1.08rem;
  color: var(--azul-marino);
}

.pregunta h3::before {
  content: "? ";
  content: "? " / "";
  color: var(--rojo);
}

.pregunta p:last-child {
  margin-bottom: 0;
}

.otros-servicios ul {
  margin: 0;
  padding-left: 1.2em;
}

/* Contacto */
.telefono-gigante {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  margin: 18px 0;
  /* Hueco para que el teléfono bote sin tapar el título */
  padding-top: 56px;
}

.telefono-botando {
  width: clamp(150px, 34vw, 240px);
  height: auto;
}

.numero-gigante {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: clamp(2.2rem, 10vw, 4.4rem);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 3px 3px 0 var(--magenta), 6px 6px 0 #000;
}

.numero-gigante:link,
.numero-gigante:visited {
  color: var(--amarillo);
}

.riiing {
  display: block;
  font-family: var(--fuente-pixel);
  font-size: 2rem;
  color: var(--lima);
}

/* 404 */
.error-404 {
  text-align: center;
}

.construccion {
  display: block;
  width: min(420px, 92%);
  height: auto;
  margin: 10px auto;
}

.destornillador {
  width: 110px;
  height: auto;
}

/* Videojuego "CERRAJERO II": se amplía sin difuminar los píxeles */
.videojuego {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background: var(--negro);
  border: 4px inset #dfdfdf;
}

/* Libro de visitas */
.libro-visitas {
  width: min(280px, 80%);
  height: auto;
}

.contador-firmas {
  font-weight: 700;
}

.contador-digitos {
  display: inline-block;
  padding: 0 8px;
  font-family: var(--fuente-pixel);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .15em;
  color: var(--lima);
  background: var(--negro);
  border: 3px inset #dfdfdf;
}

.lista-firmas {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.firma {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: #fffff0;
  border: 3px outset #e8e8c0;
}

.firma:nth-child(even) {
  background: #f0f8ff;
  border-color: #d8e4f0;
}

.firma-cabecera {
  margin-bottom: .4em;
  color: var(--azul-marino);
}

.firma-cabecera strong {
  color: #b00060;
}

.firma-fecha {
  font-family: var(--fuente-maquina);
  font-size: .9rem;
  color: #555;
}

.firma-mensaje {
  margin: 0;
  overflow-wrap: anywhere;
}

.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.aviso-ok,
.aviso-error {
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 3px ridge;
}

.aviso-ok {
  font-weight: 700;
  color: #004d00;
  background: #ccffcc;
  border-color: var(--lima);
}

.aviso-error {
  color: #6b0000;
  background: #ffe0e0;
  border-color: var(--rojo);
}

.aviso-error p,
.aviso-error ul {
  margin: 0;
}

.aviso-error ul {
  padding-left: 1.2em;
}

.formulario-libro .campo label {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

.formulario-libro input[type="text"],
.formulario-libro textarea {
  display: block;
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  color: var(--negro);
  background: var(--blanco);
  border: 3px inset #dfdfdf;
  border-radius: 0;
}

.formulario-libro textarea {
  resize: vertical;
}

.formulario-libro .ayuda {
  display: block;
  margin-top: 4px;
  font-size: .9rem;
  color: #444;
}

.campo-casilla {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.campo-casilla input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}

.boton-firmar {
  font-size: 1.15rem;
}

/* Área privada del libro de visitas */
.pagina-admin {
  padding-bottom: 24px;
}

.pagina-admin h1.panel-titulo {
  font-size: clamp(1.1rem, 3.6vw, 1.4rem);
  text-shadow: none;
}

.admin-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 16px;
}

.admin-barra p,
.admin-barra form {
  margin: 0;
}

.firma-admin {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.firma-admin input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
}

.firma-admin .firma-cabecera,
.firma-admin .firma-mensaje {
  display: block;
}

.boton-borrar {
  color: #a00000;
}

/* Honeypot: fuera de la pantalla para las personas, visible para los robots */
.campo-trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Textos legales */
.texto-legal {
  font-family: var(--fuente-documento);
  font-size: 1.08rem;
}

.texto-legal h2 {
  margin-top: 1.4em;
  font-size: 1.25rem;
  color: var(--azul-marino);
}

.texto-legal h2:first-child {
  margin-top: 0;
}

/* ---------- Pie ---------- */

.pie {
  margin-top: 36px;
  color: var(--negro);
  background: var(--gris-win);
  border-top: 4px outset #dfdfdf;
}

.pie-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  padding-top: 22px;
  padding-bottom: 14px;
}

.pie h2 {
  margin-bottom: .5em;
  font-size: 1.1rem;
  color: var(--azul-marino);
}

.pie ul {
  margin: 0;
  padding-left: 1.2em;
}

.pie-mapa iframe {
  display: block;
  width: 100%;
  height: 230px;
  margin-bottom: 8px;
  border: 3px inset #dfdfdf;
  background: #ddd;
}

.pie-legal {
  padding: 10px 14px 14px;
  text-align: center;
  font-size: .95rem;
  border-top: 2px groove #dfdfdf;
}

.insignias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.insignia {
  display: inline-block;
  min-width: 88px;
  padding: 2px 6px;
  font-family: var(--fuente-pixel);
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
  border: 2px outset #dfdfdf;
}

.insignia-1 {
  color: var(--amarillo);
  background: var(--negro);
}

.insignia-2 {
  color: var(--blanco);
  background: var(--azul-marino);
}

.insignia-3,
a.insignia-3:link,
a.insignia-3:visited {
  color: var(--negro);
  text-decoration: none;
  background: var(--lima);
}

.boton-enlace {
  padding: 0;
  font: inherit;
  color: #0000ff;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------- Barra de tareas Windows 95 (llamada siempre visible) ---------- */

.barra-tareas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--alto-barra-tareas);
  padding: 5px 6px;
  background: var(--gris-win);
  border-top: 3px solid var(--blanco);
  box-shadow: 0 -1px 0 #dfdfdf;
}

.barra-tareas-inicio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
}

.bandera-win {
  display: inline-block;
  width: 18px;
  height: 16px;
  background:
    linear-gradient(#f00, #f00) 0 0 / 8px 7px no-repeat,
    linear-gradient(#0a0, #0a0) 10px 0 / 8px 7px no-repeat,
    linear-gradient(#00f, #00f) 0 9px / 8px 7px no-repeat,
    linear-gradient(#ff0, #ff0) 10px 9px / 8px 7px no-repeat;
}

.barra-tareas-llamar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  font-family: var(--fuente-titulo);
  font-size: clamp(.95rem, 3.6vw, 1.2rem);
  white-space: nowrap;
  text-decoration: none;
  color: var(--rojo-oscuro);
  background: var(--amarillo);
  border: 3px outset #ffff80;
}

.barra-tareas-llamar:link,
.barra-tareas-llamar:visited {
  color: var(--rojo-oscuro);
}

.barra-tareas-llamar:active {
  border-style: inset;
}

.barra-tareas-llamar.blink {
  animation: parpadeo-boton 1s steps(1, end) infinite;
}

.barra-tareas-reloj {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 8px;
  font-family: var(--fuente-pixel);
  font-size: 1.15rem;
  color: var(--negro);
  border: 2px inset #dfdfdf;
}

.barra-tareas-reloj .icono-reloj {
  width: 28px;
}

/* ---------- Aviso de cookies "cuqui" ---------- */

.aviso-cookies {
  position: fixed;
  left: 12px;
  bottom: calc(var(--alto-barra-tareas) + 12px);
  z-index: 1000;
  width: min(440px, calc(100% - 24px));
  color: var(--negro);
  font-family: var(--fuente-pixel);
  font-size: 1.3rem;
  line-height: 1.25;
}

.aviso-cookies[hidden] {
  display: none;
}

.marco-win95 {
  background: var(--gris-win);
  border: 4px outset #dfdfdf;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .6);
}

.barra-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px 3px 8px;
  color: var(--blanco);
  background: linear-gradient(90deg, #ff00aa, #8a2be2);
}

.barra-titulo-texto {
  flex: 1;
  margin: 0;
  font: inherit;
  font-size: 1.35rem;
}

.boton-cerrar-titulo {
  width: 28px;
  height: 24px;
  padding: 0;
  font: 700 .95rem/1 Arial, sans-serif;
  color: var(--negro);
  background: var(--gris-win);
  border: 2px outset #dfdfdf;
  cursor: pointer;
}

.boton-cerrar-titulo:active {
  border-style: inset;
}

.aviso-cookies-cuerpo {
  display: flex;
  gap: 12px;
  padding: 12px;
}

.galleta {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, #4a2a10 0 4px, transparent 5px),
    radial-gradient(circle at 65% 30%, #4a2a10 0 3px, transparent 4px),
    radial-gradient(circle at 55% 65%, #4a2a10 0 4px, transparent 5px),
    radial-gradient(circle at 28% 70%, #4a2a10 0 3px, transparent 4px),
    #d89a4a;
  border: 3px solid #8a5a20;
  animation: girar 4s steps(8, end) infinite;
}

.aviso-cookies p {
  margin: 0 0 10px;
}

.aviso-cookies a:link,
.aviso-cookies a:visited {
  color: #0000ff;
}

.aviso-cookies-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aviso-cookies-botones .boton-win95 {
  flex: 1 1 120px;
  font-family: var(--fuente-pixel);
  font-weight: 400;
  font-size: 1.35rem;
}

/* =========================================================
   "GIFs" animados: cada ilustración se anima con CSS.
   steps() da el movimiento a saltos típico de un GIF de 1998.
   ========================================================= */

.anim-girar-3d {
  animation: girar-3d 2.4s steps(24, end) infinite;
}

.anim-correr {
  animation: correr .36s steps(1, end) infinite;
}

.anim-correr-desfase {
  animation-delay: -.18s;
}

.anim-temblar {
  animation: temblar 1.8s steps(1, end) infinite;
}

.anim-clic {
  animation: clic 1.6s steps(1, end) infinite;
}

.anim-sonar {
  animation: sonar 1.4s steps(1, end) infinite;
}

.anim-botar {
  animation: botar 1s steps(1, end) infinite;
  transform-origin: 50% 100%;
}

.anim-flotar {
  animation: flotar 1.6s steps(1, end) infinite;
}

.anim-balancear {
  animation: balancear 1.6s steps(1, end) infinite;
  transform-origin: 50% 0;
}

.anim-latido {
  animation: latido 1.2s steps(1, end) infinite;
}

.anim-girar {
  animation: girar 1.6s steps(8, end) infinite;
}

.anim-atornillar {
  animation: atornillar 1.2s steps(1, end) infinite;
  transform-origin: 20% 80%;
}

/* El cierre metálico baja y sube a saltos sobre la ilustración */
.cierre-animado {
  position: relative;
  flex: none;
  display: block;
  width: min(240px, 62%);
  margin: 0 auto;
}

.cierre-animado img {
  display: block;
  width: 100%;
  height: auto;
}

.cierre-animado::after {
  content: "";
  position: absolute;
  top: 55%;
  left: 9%;
  right: 4%;
  height: 0;
  background: repeating-linear-gradient(#bdbdbd 0 7px, #8c8c8c 7px 9px, #5e5e5e 9px 10px);
  border-bottom: 3px solid #333;
  animation: cierre-baja 4.8s steps(1, end) infinite;
}

/* ---------- Keyframes ---------- */

@keyframes parpadeo {
  50% { visibility: hidden; }
}

@keyframes parpadeo-boton {
  50% {
    color: var(--amarillo);
    background-color: var(--rojo-oscuro);
    border-color: #ff5050;
  }
}

@keyframes parpadeo-boton-inverso {
  50% {
    color: var(--rojo-oscuro);
    background-color: var(--amarillo);
    border-color: #ffff80;
  }
}

@keyframes marquesina {
  to { transform: translateX(-100%); }
}

@keyframes titilar {
  50% { opacity: .2; }
}

@keyframes arcoiris {
  to { background-position: 200% 0; }
}

@keyframes girar-3d {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

@keyframes correr {
  0% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

@keyframes temblar {
  0%, 60%, 100% { transform: none; }
  64% { transform: translateX(-4px) rotate(-3deg); }
  70% { transform: translateX(4px) rotate(3deg); }
  76% { transform: translateX(-4px) rotate(-2deg); }
  82% { transform: translateX(3px) rotate(2deg); }
  88% { transform: none; }
}

@keyframes clic {
  0% { transform: none; }
  55% { transform: translateY(5px) scale(1.04, .94); }
  62% { transform: translateY(-6px) scale(.97, 1.04); }
  70% { transform: none; }
  76% { transform: rotate(-3deg); }
  82% { transform: rotate(3deg); }
  88% { transform: none; }
}

@keyframes sonar {
  0% { transform: rotate(-12deg); }
  8% { transform: rotate(12deg); }
  16% { transform: rotate(-12deg); }
  24% { transform: rotate(12deg); }
  32% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg); }
  48% { transform: none; }
}

@keyframes botar {
  0% { transform: translateY(0) scale(1.12, .88); }
  12% { transform: translateY(-14px) scale(.96, 1.05); }
  25% { transform: translateY(-34px) scale(.98, 1.02); }
  38% { transform: translateY(-44px) rotate(-4deg); }
  50% { transform: translateY(-46px) rotate(4deg); }
  62% { transform: translateY(-40px) rotate(-3deg); }
  75% { transform: translateY(-26px); }
  88% { transform: translateY(-8px); }
}

@keyframes flotar {
  0% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  50% { transform: translateY(-9px) rotate(-1deg); }
  75% { transform: translateY(-5px); }
}

@keyframes balancear {
  0% { transform: rotate(-9deg); }
  25% { transform: rotate(-3deg); }
  50% { transform: rotate(9deg); }
  75% { transform: rotate(3deg); }
}

@keyframes latido {
  0% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

@keyframes atornillar {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(6deg); }
}

@keyframes cierre-baja {
  0% { height: 0; }
  8% { height: 7%; }
  16% { height: 14%; }
  24% { height: 21%; }
  32% { height: 28%; }
  40% { height: 35%; }
  58% { height: 28%; }
  66% { height: 21%; }
  74% { height: 14%; }
  82% { height: 7%; }
  90% { height: 0; }
}

/* ---------- Adaptación a móvil ---------- */

@media (max-width: 760px) {
  body {
    font-size: 1rem;
  }

  .cabecera-interior {
    justify-content: center;
    text-align: center;
  }

  .menu ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 8px;
  }

  .menu a {
    padding: 8px 4px;
    font-size: .9rem;
  }

  .titulo-con-llave {
    flex-direction: column;
    gap: 6px;
  }

  .panel-cuerpo {
    padding: 14px;
  }

  .persecucion img {
    height: 88px;
  }

  .persecucion .hueco {
    width: 60px;
  }

  .barra-tareas-inicio-texto {
    display: none;
  }
}

@media (max-width: 480px) {
  .aviso-cookies {
    font-size: 1.15rem;
  }

  .aviso-cookies-cuerpo {
    padding: 10px;
  }

  .galleta {
    display: none;
  }

  .barra-tareas-reloj span {
    display: none;
  }

  .barra-tareas-reloj {
    padding: 0 4px;
  }

  .tabla-retro th,
  .tabla-retro td {
    padding: 6px;
  }
}

/* ---------- Movimiento reducido: se respetan las preferencias del sistema ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .marquesina {
    white-space: normal;
    text-align: center;
  }

  .marquesina-contenido {
    padding-left: 0;
  }
}

/* ---------- Impresión ---------- */

@media print {
  body {
    padding: 0;
    color: #000;
    background: #fff;
  }

  body::before,
  .barra-tareas,
  .aviso-cookies,
  .marquesina,
  .pie-mapa iframe {
    display: none !important;
  }
}