/* =====================================================================
   PANTALLA · Web pública · EL MARCO (cabecera y pie de todas las páginas)
   Qué hace:    la cabecera (marca, Diseños · Precio, el botón sol/luna y
                WhatsApp), el pie (marca, frase, enlaces, redes y derechos),
                el botón flotante de WhatsApp (siempre visible) y la franja de
                aviso que solo ve el equipo, y el movimiento al bajar de los
                elementos con data-sube. Iguales en todas las páginas
                públicas; los dibuja pantallas/web/web.js (montarMarco).
                Solo tokens del sistema (§4).
   Quién la usa: index.html, catalogo/, diseno/, en-memoria/, guias/, 404.html
   Depende de:  tokens.css, base.css, componentes (icono, boton)
   Requisitos:  R-WEB-01, 04, 14
   ===================================================================== */

/* ---------- Cabecera ---------- */
.web-marco__cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  max-width: 72rem;
  min-height: 4rem;
  margin-inline: auto;
  padding-inline: var(--espacio-4);
}

.web-marco__marca {
  margin: 0 auto 0 0;
  color: var(--color-texto);
  font-family: var(--letra-titulo);
  font-size: var(--tamano-l);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
}

/* La segunda palabra de la marca, en dorado */
.web-marco__marca-resto {
  color: var(--color-acento);
}

.web-marco__menu {
  display: none;
  gap: var(--espacio-5);
}

.web-marco__enlace {
  color: var(--color-texto-suave);
  text-decoration: none;
}

.web-marco__enlace:hover,
.web-marco__enlace[aria-current="page"] {
  color: var(--color-texto);
}

.web-marco__modo {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-redondo);
  background: transparent;
  color: var(--color-texto);
  cursor: pointer;
}

.web-marco__modo:hover {
  background: var(--color-superficie-resaltada);
}

/* ---------- Pie ---------- */
.web-marco__pie {
  border-top: 1px solid var(--color-borde);
}

.web-marco__pie-contenido {
  display: grid;
  justify-items: center;
  gap: var(--espacio-3);
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--espacio-7) var(--espacio-4);
  text-align: center;
}

/* En el pie la marca va centrada (en la cabecera empuja el menú a la derecha) */
.web-marco__pie .web-marco__marca {
  margin: 0;
}

.web-marco__pie-frase,
.web-marco__pie-derechos {
  margin: 0;
  color: var(--color-texto-suave);
}

.web-marco__pie-derechos {
  font-size: var(--tamano-chico);
}

.web-marco__pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-5);
  margin: 0;
}

/* ---------- WhatsApp flotante: siempre visible, en el celular y en la computadora ---------- */
/* Dorado (no el negro del botón principal: ese es uno solo por pantalla) para que resalte sobre
   cualquier fondo, también sobre la foto de la portada; el ícono, del color del fondo de la página */
.web-marco__flotante {
  position: fixed;
  right: var(--espacio-4);
  bottom: var(--espacio-4);
  z-index: 10;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--radio-redondo);
  background: var(--color-acento);   /* dorado oscuro en claro, dorado claro en oscuro: el ícono contrasta 6:1 y 9:1 */
  box-shadow: var(--sombra-media);
  color: var(--color-fondo);
  transition: transform var(--duracion-media) var(--curva-salida);
}

.web-marco__flotante:hover {
  transform: translateY(-2px);
}

.web-marco__flotante .icono {
  width: 1.75rem;
  height: 1.75rem;
}

/* ---------- Aviso para el equipo (solo con sesión abierta) ---------- */
.web-marco__aviso-equipo {
  margin: 0;
  padding: var(--espacio-2) var(--espacio-4);
  background: var(--color-aviso-fondo);
  color: var(--color-aviso);
  font-size: var(--tamano-suave);
  text-align: center;
}

/* ---------- El movimiento al bajar (común): cada elemento con data-sube sube hasta su lugar
   (subida.js pone --subida en px). «translate» no pisa las animaciones de aparición de cada uno ---------- */
[data-sube] {
  translate: 0 calc(var(--subida, 0) * 1px);
}

@media (prefers-reduced-motion: reduce) {
  [data-sube] {
    translate: none;
  }
}

@media (min-width: 48rem) {
  .web-marco__menu {
    display: flex;
  }

  .web-marco__flotante {
    right: var(--espacio-5);
    bottom: var(--espacio-5);
  }
}