/* ═══════════════════════════════════════════════════════════════════
   SELECTOR DE MARCA — Arimez · Doña Dominga
   Lo usan las cuatro páginas (index, proyecto, portal y ficha).
   Una sola hoja para que los dos sitios se vean iguales.
   ═══════════════════════════════════════════════════════════════════ */

.marca-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--marca-linea, rgba(255, 255, 255, .18));
  border-radius: 999px;
  background: var(--marca-fondo, rgba(255, 255, 255, .06));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.marca-opcion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  color: var(--marca-texto, rgba(255, 255, 255, .62));
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 200ms cubic-bezier(.2, 0, 0, 1),
    color      200ms cubic-bezier(.2, 0, 0, 1),
    transform  120ms cubic-bezier(.2, 0, 0, 1);
}
.marca-opcion:hover  { color: var(--marca-texto-fuerte, #fff); }
.marca-opcion:active { transform: scale(.96); }

/* La marca en la que estás parado */
.marca-opcion[aria-current="page"] {
  background: var(--marca-activo, #fff);
  color: var(--marca-activo-texto, #14161A);
  cursor: default;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* Punto de color propio de cada marca */
.marca-punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  opacity: .55;
}
.marca-opcion[aria-current="page"] .marca-punto { opacity: 1; }
.marca-opcion[data-marca="dd"] .marca-punto { background: #E26B2C; opacity: .9; }

/* ── Tema claro: el selector se aclara ── */
html[data-theme="light"] .marca-switch {
  --marca-linea: rgba(31, 35, 40, .16);
  --marca-fondo: rgba(31, 35, 40, .04);
  --marca-texto: #4B5259;
  --marca-texto-fuerte: #1F2328;
  --marca-activo: #1F2328;
  --marca-activo-texto: #FFFFFF;
}

/* En pantallas angostas se abrevia: "Arimez / Doña Dominga" no cabe entero.
   No se oculta: en las páginas de proyecto y de propiedad es la única
   forma de saltar entre los dos sitios, porque ahí no hay menú lateral. */
@media (max-width: 900px) {
  .marca-opcion { padding: 9px 11px; font-size: 10px; letter-spacing: .05em; }
  .marca-opcion .marca-largo { display: none; }
}
@media (max-width: 430px) {
  .marca-opcion { padding: 9px 9px; font-size: 9px; gap: 5px; }
  .marca-punto { width: 6px; height: 6px; }
}

/* Versión para el menú lateral en celular */
.marca-switch-menu { display: flex; width: 100%; margin-top: 20px; }
.marca-switch-menu .marca-opcion { flex: 1; justify-content: center; padding-block: 12px; }
.marca-switch-menu .marca-largo { display: inline; }