/* ==========================================================================
   Vidriera en mantenimiento
   --------------------------------------------------------------------------
   Un cartel de cartulina escrito con fibrón, colgado con hilo de un clavito
   sobre la foto de la vidriera del local. Tiene que parecer el que el local
   pondría a mano en la puerta, no una pantalla de error: textura de papel,
   bordes que no son perfectos, letra de fibrón, nudos en el hilo.

   La pantalla tapa la tienda entera (body.en-mantenimiento). El movimiento lo
   maneja views/vidriera/mantenimiento.js; acá sólo hay forma.
   ========================================================================== */

body.en-mantenimiento {
  overflow: hidden;
  background: #1d1a17;
}

body.en-mantenimiento > :not(.mant):not(#toast-host) {
  display: none !important;
}

.mant {
  --ancho: min(78vw, 340px);
  --hilo: 64px;
  --tinta: #1c1b19;

  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* El conjunto va centrado en alto: en un celular largo, colgar el cartel
     arriba y el texto abajo dejaba un hueco vacío en el medio. */
  justify-content: center;
  padding: 16px 0 env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  color: #f4f1ea;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- Fondo */

/* El dibujo de la fachada que ya usa la tienda (photosSrc/background.jpeg):
   sigue siendo "nuestra vidriera". Hubo una opción para subir una foto propia
   y se sacó: al dueño le gusta este. Oscurecido y entibiado, porque es casi
   blanco y la cartulina tiene que despegar. El color de abajo queda por si la
   imagen no llega. */
.mant-fondo {
  position: absolute;
  inset: -24px;
  background: #26221d url("/photosSrc/background.jpeg") center / cover no-repeat;
  filter: blur(2.5px) brightness(0.48) sepia(0.3) saturate(0.85);
  transform: scale(1.04);
}

.mant-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 50% 26%, rgba(255, 240, 210, 0.16), transparent 75%),
    linear-gradient(180deg, transparent 45%, rgba(10, 9, 8, 0.65) 100%);
}

/* ---------------------------------------------------------------- Escena */

.mant-escena {
  position: relative;
  z-index: 1;
  width: var(--ancho);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Un clavito, nada más: la cabeza tapa el nudo del hilo. El margen negativo
   es la mitad de su alto, para que el péndulo arranque justo en su centro. */
.mant-clavo {
  position: relative;
  z-index: 3;
  width: 20px;
  height: 20px;
  margin-bottom: -10px;
  filter: drop-shadow(1.5px 2px 1.5px rgba(0, 0, 0, 0.5));
}

/* Todo lo que cuelga gira alrededor del clavo. */
.mant-pendulo {
  position: relative;
  width: 100%;
  transform-origin: 50% 0;
  will-change: transform;
  cursor: grab;
  touch-action: manipulation;
}

.mant-hilo {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--hilo) + 16px);
  overflow: visible;
  pointer-events: none;
}

.mant-cartel-sombra {
  margin-top: var(--hilo);
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

/* La cartulina: color hueso, grano de papel y un borde cortado a tijera, no
   a regla. El clip-path come la sombra, por eso la sombra va en el padre. */
.mant-cartel {
  position: relative;
  padding: 34px 22px 22px;
  text-align: center;
  color: var(--tinta);
  background-color: #f6f2e8;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.29  0 0 0 0 0.2  0 0 0 0.11 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    linear-gradient(170deg, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.04) 60%, rgba(120, 90, 50, 0.08));
  clip-path: polygon(0.6% 1.2%, 38% 0, 71% 0.9%, 99.4% 0, 100% 46%, 99.1% 98.8%, 62% 100%, 24% 99.2%, 0 100%, 0.8% 52%);
}

.mant-ojal {
  position: absolute;
  top: 12px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, #3a332b 0 30%, #b9b2a4 36% 58%, #7d766a 64% 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.mant-ojal.izq { left: calc(14% - 6.5px); }
.mant-ojal.der { left: calc(86% - 6.5px); }

/* El nudo del hilo, apenas arriba de cada ojal. */
.mant-ojal::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 3px;
  width: 7px;
  height: 6px;
  border-radius: 45% 55% 50% 50%;
  background: #8a6f4b;
  box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25);
}

.mant-cartel-marca {
  font-family: "Permanent Marker", "Segoe Print", cursive;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  opacity: 0.8;
  transform: rotate(-1.5deg);
}

.mant-cartel-titulo {
  margin: 10px 0 4px;
  font-family: "Permanent Marker", "Segoe Print", cursive;
  font-weight: 400;
  font-size: clamp(2.3rem, 11.5vw, 3.1rem);
  line-height: 0.98;
  text-shadow: 0 0 0.6px rgba(0, 0, 0, 0.55);
}

/* Cada renglón un poco torcido para su lado, como escribe cualquiera. */
.mant-cartel-titulo span {
  display: block;
}

.mant-cartel-titulo span:first-child { transform: rotate(-2deg) translateX(-4px); }
.mant-cartel-titulo span:last-child { transform: rotate(1deg) translateX(3px); }

.mant-subrayado {
  display: block;
  width: 78%;
  height: 14px;
  margin: -2px auto 8px;
  overflow: visible;
}

.mant-cartel-nota {
  font-family: "Caveat", "Segoe Print", cursive;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.05;
  transform: rotate(-1deg);
}

/* ---------------------------------------------------------------- Texto */

.mant-pie {
  position: relative;
  z-index: 1;
  /* Lugar de sobra para que el cartel se hamaque sin pisar el texto. */
  margin-top: clamp(40px, 8vh, 72px);
  width: 100%;
  max-width: 460px;
  padding: 0 22px;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.mant-pie h1 {
  margin: 0 0 6px;
  font-family: "Caveat", "Segoe Print", cursive;
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
}

.mant-pie p {
  margin: 0 0 4px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: rgba(244, 241, 234, 0.86);
}

.mant-ig {
  display: inline-block;
  margin: 10px 0 14px;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  position: relative;
}

/* Subrayado de fibrón, que se completa al pasar el mouse. */
.mant-ig svg {
  position: absolute;
  left: -4%;
  bottom: -9px;
  width: 108%;
  height: 10px;
  overflow: visible;
}

.mant-ig path {
  stroke-dasharray: 160;
  stroke-dashoffset: 34;
  transition: stroke-dashoffset 0.35s ease;
}

.mant-ig:hover path,
.mant-ig:focus-visible path {
  stroke-dashoffset: 0;
}

.mant-ig:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
  border-radius: 2px;
}

.mant-direccion {
  font-size: 0.85rem !important;
  line-height: 1.7;
  color: rgba(244, 241, 234, 0.66) !important;
}

/* El número es para tocarlo desde el celular: abre el chat de WhatsApp. Se
   subraya con el mismo rojo de fibrón que el resto del cartel. */
.mant-direccion a {
  color: #f4f1ea;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(200, 55, 45, 0.85);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* El acceso del personal, donde está en la tienda abierta (arriba a la
   derecha) y con el mismo tono apagado: el cliente no tiene por qué verlo
   primero, pero el que lo busca lo encuentra en su lugar de siempre. */
.mant-staff {
  position: absolute;
  z-index: 2;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  /* Va sobre la parte más clara del dibujo: la sombra lo despega sin tener
     que subirlo de tono. */
  color: rgba(244, 241, 234, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: color 0.25s ease;
}

.mant-staff:hover,
.mant-staff:focus-visible {
  color: #f4f1ea;
}

.mant-staff:focus-visible {
  outline: 1px solid rgba(244, 241, 234, 0.6);
  outline-offset: 2px;
}

@media (min-width: 700px) {
  .mant-staff {
    top: calc(20px + env(safe-area-inset-top, 0px));
    right: 46px;
  }
}

/* ---------------------------------------------------------------- Pantallas */

@media (min-width: 700px) {
  .mant {
    --ancho: 360px;
    --hilo: 80px;
  }

  .mant-pie {
    margin-top: 72px;
  }
}

/* Pantallas bajitas (celular acostado): el cartel se achica para que el
   texto de abajo no quede tapado. */
@media (max-height: 560px) {
  .mant {
    --ancho: min(56vw, 280px);
    --hilo: 40px;
  }

  .mant-cartel-titulo {
    font-size: 2rem;
  }

  .mant-pie {
    margin-top: 24px;
  }
}